| <!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> 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> |
|
|
| |
| <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> |
