Download index.html from joaokss/teste: direct link, hf CLI and curl.
- Browser
- Download file 27.8 kB
-
https://huggingface.co/spaces/joaokss/teste/resolve/main/index.html
- Command line
-
hf download hf://spaces/joaokss/teste/index.html
-
curl -L -o index.html https://huggingface.co/spaces/joaokss/teste/resolve/main/index.html
27.8 kB
| <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); | |
| } | |
| } | |
| /* Custom styles for admin section */ | |
| .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"> | |
| <!-- Top Bar --> | |
| <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> contato@elegance.com</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> | |
| <!-- Main Header --> | |
| <header class="sticky top-0 z-50 bg-white shadow-md"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <!-- Mobile Menu Button (hidden on desktop) --> | |
| <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> | |
| <!-- Desktop Header --> | |
| <div class="hidden md:flex justify-between items-center"> | |
| <!-- Logo --> | |
| <a href="#" class="text-3xl font-bold text-pink-600">ELEGANCE</a> | |
| <!-- Search Bar --> | |
| <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> | |
| <!-- User Actions --> | |
| <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> | |
| <!-- Navigation --> | |
| <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> | |
| <!-- Mobile Menu (hidden by default) --> | |
| <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> | |
| <!-- Admin Content --> | |
| <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> | |
| <!-- Product Form Modal (hidden by default) --> | |
| <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> | |
| <!-- Products Table --> | |
| <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"> | |
| <!-- Products will be loaded here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Mobile menu toggle | |
| 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'; | |
| }); | |
| // Close mobile menu when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!mobileMenu.contains(e.target) && e.target !== mobileMenuButton) { | |
| mobileMenu.classList.remove('active'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| }); | |
| // Dropdown menus | |
| 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'); | |
| // Close other dropdowns | |
| dropdowns.forEach(otherDropdown => { | |
| if (otherDropdown !== dropdown) { | |
| otherDropdown.querySelector('.dropdown-menu').classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Close dropdowns when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!e.target.matches('.dropdown a')) { | |
| dropdowns.forEach(dropdown => { | |
| dropdown.querySelector('.dropdown-menu').classList.add('hidden'); | |
| }); | |
| } | |
| }); | |
| // Product CRUD functionality | |
| let products = JSON.parse(localStorage.getItem('products')) || []; | |
| let currentProductId = null; | |
| // DOM Elements | |
| 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'); | |
| // Event Listeners | |
| addProductBtn.addEventListener('click', openAddProductModal); | |
| closeModalBtn.addEventListener('click', closeProductModal); | |
| cancelBtn.addEventListener('click', closeProductModal); | |
| productForm.addEventListener('submit', saveProduct); | |
| productImage.addEventListener('change', previewImage); | |
| // Initialize the products table | |
| renderProductsTable(); | |
| // Functions | |
| 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) { | |
| // Update existing product | |
| const index = products.findIndex(p => p.id === currentProductId); | |
| if (index !== -1) { | |
| products[index] = productData; | |
| } | |
| } else { | |
| // Add new product | |
| products.push(productData); | |
| } | |
| // Save to localStorage | |
| localStorage.setItem('products', JSON.stringify(products)); | |
| // Refresh the table | |
| renderProductsTable(); | |
| // Close the modal | |
| 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> |