|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Elegance - Moda Feminina | Admin</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.dropdown:hover .dropdown-menu { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.search-bar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.search-bar:focus-within { |
|
|
width: 300px; |
|
|
} |
|
|
|
|
|
.cart-count { |
|
|
top: -8px; |
|
|
right: -8px; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.mobile-menu { |
|
|
transform: translateX(-100%); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.mobile-menu.active { |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.admin-container { |
|
|
min-height: calc(100vh - 200px); |
|
|
} |
|
|
|
|
|
.product-image-preview { |
|
|
max-height: 150px; |
|
|
object-fit: contain; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans bg-gray-50"> |
|
|
|
|
|
<div class="bg-pink-600 text-white text-sm py-2 px-4"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="hover:text-pink-200"><i class="fas fa-phone-alt mr-1"></i> (11) 9999-9999</a> |
|
|
<a href="#" class="hover:text-pink-200"><i class="fas fa-envelope mr-1"></i> [email protected]</a> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="hover:text-pink-200"><i class="fas fa-truck mr-1"></i> Frete Grátis acima de R$20000</a> |
|
|
<a href="#" class="hover:text-pink-200"><i class="fas fa-exchange-alt mr-1"></i> Troca Fácil</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<header class="sticky top-0 z-50 bg-white shadow-md"> |
|
|
<div class="container mx-auto px-4 py-4"> |
|
|
|
|
|
<div class="md:hidden flex justify-between items-center"> |
|
|
<button id="mobileMenuButton" class="text-gray-700"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
<a href="#" class="text-2xl font-bold text-pink-600">ELEGANCE</a> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-700 relative"> |
|
|
<i class="fas fa-user text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-700 relative"> |
|
|
<i class="fas fa-shopping-bag text-xl"></i> |
|
|
<span class="cart-count absolute bg-pink-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:flex justify-between items-center"> |
|
|
|
|
|
<a href="#" class="text-3xl font-bold text-pink-600">ELEGANCE</a> |
|
|
|
|
|
|
|
|
<div class="search-bar relative w-64"> |
|
|
<input type="text" placeholder="Buscar produtos..." class="w-full py-2 px-4 pr-10 rounded-full border border-gray-300 focus:outline-none focus:border-pink-500"> |
|
|
<button class="absolute right-0 top-0 h-full px-3 text-gray-500 hover:text-pink-600"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex space-x-6 items-center"> |
|
|
<a href="#" class="text-gray-700 hover:text-pink-600 flex flex-col items-center"> |
|
|
<i class="fas fa-user text-xl"></i> |
|
|
<span class="text-xs mt-1">Minha Conta</span> |
|
|
</a> |
|
|
<a href="#" class="text-gray-700 hover:text-pink-600 flex flex-col items-center"> |
|
|
<i class="fas fa-heart text-xl"></i> |
|
|
<span class="text-xs mt-1">Favoritos</span> |
|
|
</a> |
|
|
<a href="#" class="text-gray-700 hover:text-pink-600 flex flex-col items-center relative"> |
|
|
<i class="fas fa-shopping-bag text-xl"></i> |
|
|
<span class="text-xs mt-1">Carrinho</span> |
|
|
<span class="cart-count absolute -top-1 -right-2 bg-pink-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="hidden md:block mt-4"> |
|
|
<ul class="flex justify-center space-x-8"> |
|
|
<li class="dropdown relative"> |
|
|
<a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 flex items-center"> |
|
|
Novidades <i class="fas fa-chevron-down ml-1 text-xs"></i> |
|
|
</a> |
|
|
<div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48 z-50"> |
|
|
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Lançamentos</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Coleção Verão</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Promoções</a> |
|
|
</div> |
|
|
</li> |
|
|
<li class="dropdown relative"> |
|
|
<a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 flex items-center"> |
|
|
Roupas <i class="fas fa-chevron-down ml-1 text-xs"></i> |
|
|
</a> |
|
|
<div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48 z-50"> |
|
|
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Vestidos</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Blusas</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Calças</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Shorts</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Saias</a> |
|
|
</div> |
|
|
</li> |
|
|
<li class="dropdown relative"> |
|
|
<a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 flex items-center"> |
|
|
Acessórios <i class="fas fa-chevron-down ml-1 text-xs"></i> |
|
|
</a> |
|
|
<div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48 z-50"> |
|
|
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Bolsas</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Cintos</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Óculos</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Joias</a> |
|
|
</div> |
|
|
</li> |
|
|
<li><a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2">Sapatos</a></li> |
|
|
<li><a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2">Plus Size</a></li> |
|
|
<li><a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2">Promoções</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div id="mobileMenu" class="mobile-menu fixed inset-y-0 left-0 w-64 bg-white shadow-lg z-50 p-4 md:hidden"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<a href="#" class="text-xl font-bold text-pink-600">ELEGANCE</a> |
|
|
<button id="closeMobileMenu" class="text-gray-700"> |
|
|
<i class="fas fa-times text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="search-bar relative mb-6"> |
|
|
<input type="text" placeholder="Buscar produtos..." class="w-full py-2 px-4 pr-10 rounded-full border border-gray-300 focus:outline-none focus:border-pink-500"> |
|
|
<button class="absolute right-0 top-0 h-full px-3 text-gray-500 hover:text-pink-600"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<nav> |
|
|
<ul class="space-y-4"> |
|
|
<li> |
|
|
<a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 flex justify-between items-center"> |
|
|
Novidades <i class="fas fa-chevron-down"></i> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 flex justify-between items-center"> |
|
|
Roupas <i class="fas fa-chevron-down"></i> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 flex justify-between items-center"> |
|
|
Acessórios <i class="fas fa-chevron-down"></i> |
|
|
</a> |
|
|
</li> |
|
|
<li><a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 block">Sapatos</a></li> |
|
|
<li><a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 block">Plus Size</a></li> |
|
|
<li><a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 block">Promoções</a></li> |
|
|
<li class="border-t border-gray-200 pt-4 mt-4"> |
|
|
<a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 block"><i class="fas fa-user mr-2"></i> Minha Conta</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 block"><i class="fas fa-heart mr-2"></i> Favoritos</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 block relative"> |
|
|
<i class="fas fa-shopping-bag mr-2"></i> Carrinho |
|
|
<span class="cart-count absolute top-1/2 -right-6 transform -translate-y-1/2 bg-pink-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
|
|
|
<main class="admin-container container mx-auto px-4 py-8"> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<h1 class="text-3xl font-bold text-gray-800">Gerenciamento de Produtos</h1> |
|
|
<button id="addProductBtn" class="bg-pink-600 hover:bg-pink-700 text-white px-4 py-2 rounded-md flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Adicionar Produto |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="productModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto"> |
|
|
<div class="flex justify-between items-center border-b px-6 py-4"> |
|
|
<h3 id="modalTitle" class="text-xl font-semibold text-gray-800">Adicionar Novo Produto</h3> |
|
|
<button id="closeModalBtn" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<form id="productForm" class="p-6"> |
|
|
<input type="hidden" id="productId"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label for="productName" class="block text-sm font-medium text-gray-700 mb-1">Nome do Produto</label> |
|
|
<input type="text" id="productName" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-pink-500 focus:border-pink-500" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="productCategory" class="block text-sm font-medium text-gray-700 mb-1">Categoria</label> |
|
|
<select id="productCategory" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-pink-500 focus:border-pink-500" required> |
|
|
<option value="">Selecione uma categoria</option> |
|
|
<option value="Vestidos">Vestidos</option> |
|
|
<option value="Blusas">Blusas</option> |
|
|
<option value="Calças">Calças</option> |
|
|
<option value="Shorts">Shorts</option> |
|
|
<option value="Saias">Saias</option> |
|
|
<option value="Bolsas">Bolsas</option> |
|
|
<option value="Acessórios">Acessórios</option> |
|
|
<option value="Sapatos">Sapatos</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="productPrice" class="block text-sm font-medium text-gray-700 mb-1">Preço (R$)</label> |
|
|
<input type="number" id="productPrice" step="0.01" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-pink-500 focus:border-pink-500" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="productStock" class="block text-sm font-medium text-gray-700 mb-1">Estoque</label> |
|
|
<input type="number" id="productStock" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-pink-500 focus:border-pink-500" required> |
|
|
</div> |
|
|
<div class="md:col-span-2"> |
|
|
<label for="productDescription" class="block text-sm font-medium text-gray-700 mb-1">Descrição</label> |
|
|
<textarea id="productDescription" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-pink-500 focus:border-pink-500"></textarea> |
|
|
</div> |
|
|
<div class="md:col-span-2"> |
|
|
<label for="productImage" class="block text-sm font-medium text-gray-700 mb-1">Imagem do Produto</label> |
|
|
<input type="file" id="productImage" accept="image/*" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-pink-500 focus:border-pink-500"> |
|
|
<div id="imagePreviewContainer" class="mt-2 hidden"> |
|
|
<img id="imagePreview" src="#" alt="Preview da imagem" class="product-image-preview"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 flex justify-end space-x-3"> |
|
|
<button type="button" id="cancelBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Cancelar</button> |
|
|
<button type="submit" id="saveProductBtn" class="px-4 py-2 bg-pink-600 text-white rounded-md hover:bg-pink-700">Salvar Produto</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white shadow-md rounded-lg overflow-hidden"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Imagem</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nome</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Categoria</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Preço</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estoque</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="productsTableBody" class="bg-white divide-y divide-gray-200"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobileMenuButton'); |
|
|
const closeMobileMenu = document.getElementById('closeMobileMenu'); |
|
|
const mobileMenu = document.getElementById('mobileMenu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.add('active'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
|
|
|
closeMobileMenu.addEventListener('click', () => { |
|
|
mobileMenu.classList.remove('active'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
if (!mobileMenu.contains(e.target) && e.target !== mobileMenuButton) { |
|
|
mobileMenu.classList.remove('active'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const dropdowns = document.querySelectorAll('.dropdown'); |
|
|
|
|
|
dropdowns.forEach(dropdown => { |
|
|
const button = dropdown.querySelector('a'); |
|
|
const menu = dropdown.querySelector('.dropdown-menu'); |
|
|
|
|
|
button.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
menu.classList.toggle('hidden'); |
|
|
|
|
|
|
|
|
dropdowns.forEach(otherDropdown => { |
|
|
if (otherDropdown !== dropdown) { |
|
|
otherDropdown.querySelector('.dropdown-menu').classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
if (!e.target.matches('.dropdown a')) { |
|
|
dropdowns.forEach(dropdown => { |
|
|
dropdown.querySelector('.dropdown-menu').classList.add('hidden'); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
let products = JSON.parse(localStorage.getItem('products')) || []; |
|
|
let currentProductId = null; |
|
|
|
|
|
|
|
|
const addProductBtn = document.getElementById('addProductBtn'); |
|
|
const productModal = document.getElementById('productModal'); |
|
|
const closeModalBtn = document.getElementById('closeModalBtn'); |
|
|
const cancelBtn = document.getElementById('cancelBtn'); |
|
|
const productForm = document.getElementById('productForm'); |
|
|
const productsTableBody = document.getElementById('productsTableBody'); |
|
|
const productImage = document.getElementById('productImage'); |
|
|
const imagePreviewContainer = document.getElementById('imagePreviewContainer'); |
|
|
const imagePreview = document.getElementById('imagePreview'); |
|
|
|
|
|
|
|
|
addProductBtn.addEventListener('click', openAddProductModal); |
|
|
closeModalBtn.addEventListener('click', closeProductModal); |
|
|
cancelBtn.addEventListener('click', closeProductModal); |
|
|
productForm.addEventListener('submit', saveProduct); |
|
|
productImage.addEventListener('change', previewImage); |
|
|
|
|
|
|
|
|
renderProductsTable(); |
|
|
|
|
|
|
|
|
function openAddProductModal() { |
|
|
currentProductId = null; |
|
|
document.getElementById('modalTitle').textContent = 'Adicionar Novo Produto'; |
|
|
document.getElementById('productForm').reset(); |
|
|
imagePreviewContainer.classList.add('hidden'); |
|
|
productModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function openEditProductModal(id) { |
|
|
const product = products.find(p => p.id === id); |
|
|
if (!product) return; |
|
|
|
|
|
currentProductId = id; |
|
|
document.getElementById('modalTitle').textContent = 'Editar Produto'; |
|
|
document.getElementById('productId').value = product.id; |
|
|
document.getElementById('productName').value = product.name; |
|
|
document.getElementById('productCategory').value = product.category; |
|
|
document.getElementById('productPrice').value = product.price; |
|
|
document.getElementById('productStock').value = product.stock; |
|
|
document.getElementById('productDescription').value = product.description || ''; |
|
|
|
|
|
if (product.image) { |
|
|
imagePreview.src = product.image; |
|
|
imagePreviewContainer.classList.remove('hidden'); |
|
|
} else { |
|
|
imagePreviewContainer.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
productModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function closeProductModal() { |
|
|
productModal.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function previewImage(e) { |
|
|
const file = e.target.files[0]; |
|
|
if (file) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(event) { |
|
|
imagePreview.src = event.target.result; |
|
|
imagePreviewContainer.classList.remove('hidden'); |
|
|
}; |
|
|
reader.readAsDataURL(file); |
|
|
} |
|
|
} |
|
|
|
|
|
function saveProduct(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const productData = { |
|
|
id: currentProductId || Date.now().toString(), |
|
|
name: document.getElementById('productName').value, |
|
|
category: document.getElementById('productCategory').value, |
|
|
price: parseFloat(document.getElementById('productPrice').value), |
|
|
stock: parseInt(document.getElementById('productStock').value), |
|
|
description: document.getElementById('productDescription').value, |
|
|
image: imagePreview.src !== '#' ? imagePreview.src : '' |
|
|
}; |
|
|
|
|
|
if (currentProductId) { |
|
|
|
|
|
const index = products.findIndex(p => p.id === currentProductId); |
|
|
if (index !== -1) { |
|
|
products[index] = productData; |
|
|
} |
|
|
} else { |
|
|
|
|
|
products.push(productData); |
|
|
} |
|
|
|
|
|
|
|
|
localStorage.setItem('products', JSON.stringify(products)); |
|
|
|
|
|
|
|
|
renderProductsTable(); |
|
|
|
|
|
|
|
|
closeProductModal(); |
|
|
} |
|
|
|
|
|
function deleteProduct(id) { |
|
|
if (confirm('Tem certeza que deseja excluir este produto?')) { |
|
|
products = products.filter(p => p.id !== id); |
|
|
localStorage.setItem('products', JSON.stringify(products)); |
|
|
renderProductsTable(); |
|
|
} |
|
|
} |
|
|
|
|
|
function renderProductsTable() { |
|
|
productsTableBody.innerHTML = ''; |
|
|
|
|
|
if (products.length === 0) { |
|
|
productsTableBody.innerHTML = ` |
|
|
<tr> |
|
|
<td colspan="6" class="px-6 py-4 text-center text-gray-500">Nenhum produto cadastrado</td> |
|
|
</tr> |
|
|
`; |
|
|
return; |
|
|
} |
|
|
|
|
|
products.forEach(product => { |
|
|
const row = document.createElement('tr'); |
|
|
row.innerHTML = ` |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
${product.image ? `<img src="${product.image}" alt="${product.name}" class="h-10 w-10 rounded-full object-cover">` : '<div class="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center"><i class="fas fa-image text-gray-400"></i></div>'} |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-medium text-gray-900">${product.name}</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-500">${product.category}</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">R$ ${product.price.toFixed(2)}</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">${product.stock}</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button onclick="openEditProductModal('${product.id}')" class="text-pink-600 hover:text-pink-900 mr-3"><i class="fas fa-edit"></i> Editar</button> |
|
|
<button onclick="deleteProduct('${product.id}')" class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i> Excluir</button> |
|
|
</td> |
|
|
`; |
|
|
productsTableBody.appendChild(row); |
|
|
}); |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=joaokss/teste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
