Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Produtos - SleepingComfort</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 50%, #ce93d8 100%); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .cart-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| background-color: #9c27b0; | |
| color: white; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| } | |
| .size-selector input[type="radio"]:checked + label { | |
| background-color: #9c27b0; | |
| color: white; | |
| border-color: #9c27b0; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-md"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="moon" class="w-8 h-8"></i> | |
| <h1 class="text-2xl font-bold">SleepingComfort</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="index.html" class="font-medium hover:text-purple-200">Início</a> | |
| <a href="produtos.html" class="font-medium hover:text-purple-200">Produtos</a> | |
| <a href="contato.html" class="font-medium hover:text-purple-200">Contato</a> | |
| </nav> | |
| <div class="relative"> | |
| <button id="cart-btn" class="p-2 rounded-full hover:bg-purple-600 transition"> | |
| <i data-feather="shopping-cart" class="w-6 h-6"></i> | |
| <span id="cart-count" class="cart-badge hidden">0</span> | |
| </button> | |
| </div> | |
| <button id="mobile-menu-btn" class="md:hidden p-2"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden gradient-bg px-4 pb-4"> | |
| <a href="index.html" class="block py-2 font-medium hover:text-purple-200">Início</a> | |
| <a href="produtos.html" class="block py-2 font-medium hover:text-purple-200">Produtos</a> | |
| <a href="contato.html" class="block py-2 font-medium hover:text-purple-200">Contato</a> | |
| </div> | |
| </header> | |
| <!-- Product Page Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Breadcrumbs --> | |
| <div class="flex items-center text-sm text-gray-600 mb-6"> | |
| <a href="index.html" class="hover:text-purple-600">Início</a> | |
| <i data-feather="chevron-right" class="w-4 h-4 mx-2"></i> | |
| <span>Produtos</span> | |
| </div> | |
| <!-- Page Title and Filters --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8"> | |
| <h1 class="text-3xl font-bold text-purple-800 mb-4 md:mb-0">Nossos Pijamas</h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <select class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option>Ordenar por</option> | |
| <option>Preço: menor para maior</option> | |
| <option>Preço: maior para menor</option> | |
| <option>Mais recentes</option> | |
| <option>Mais vendidos</option> | |
| </select> | |
| <i data-feather="chevron-down" class="absolute right-3 top-2.5 w-4 h-4 text-gray-500"></i> | |
| </div> | |
| <button class="p-2 rounded-lg bg-purple-100 text-purple-800 hover:bg-purple-200"> | |
| <i data-feather="filter" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300" data-aos="fade-up"> | |
| <a href="produto-detalhe.html?id=1"> | |
| <img src="https://images.unsplash.com/photo-1594631252845-29fc4cc8cde9?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" | |
| alt="Pijama Lilás" class="w-full h-64 object-cover"> | |
| </a> | |
| <div class="p-4"> | |
| <a href="produto-detalhe.html?id=1" class="hover:text-purple-600"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Pijama Lilás</h3> | |
| </a> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-purple-600 font-bold text-lg">R$ 129,90</span> | |
| <div class="flex space-x-1"> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">P</span> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">M</span> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">G</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4">Pijama em algodão orgânico com estampa floral delicada.</p> | |
| <button class="add-to-cart w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded transition duration-300" | |
| data-product='{"id":1,"name":"Pijama Lilás","price":129.90,"image":"https://images.unsplash.com/photo-1594631252845-29fc4cc8cde9?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"}'> | |
| Adicionar ao Carrinho | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <a href="produto-detalhe.html?id=2"> | |
| <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" | |
| alt="Pijama Rosa" class="w-full h-64 object-cover"> | |
| </a> | |
| <div class="p-4"> | |
| <a href="produto-detalhe.html?id=2" class="hover:text-purple-600"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Pijama Rosa</h3> | |
| </a> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-purple-600 font-bold text-lg">R$ 119,90</span> | |
| <div class="flex space-x-1"> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">P</span> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">M</span> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">G</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4">Conjunto de pijama em malha macia com detalhes em renda.</p> | |
| <button class="add-to-cart w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded transition duration-300" | |
| data-product='{"id":2,"name":"Pijama Rosa","price":119.90,"image":"https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"}'> | |
| Adicionar ao Carrinho | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <a href="produto-detalhe.html?id=3"> | |
| <img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" | |
| alt="Pijama Branco" class="w-full h-64 object-cover"> | |
| </a> | |
| <div class="p-4"> | |
| <a href="produto-detalhe.html?id=3" class="hover:text-purple-600"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Pijama Branco</h3> | |
| </a> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-purple-600 font-bold text-lg">R$ 139,90</span> | |
| <div class="flex space-x-1"> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">P</span> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">M</span> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">G</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4">Pijama em seda com detalhes em renda e laço.</p> | |
| <button class="add-to-cart w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded transition duration-300" | |
| data-product='{"id":3,"name":"Pijama Branco","price":139.90,"image":"https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"}'> | |
| Adicionar ao Carrinho | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300" data-aos="fade-up"> | |
| <a href="produto-detalhe.html?id=4"> | |
| <img src="https://images.unsplash.com/photo-1583744946564-b52d01e2da64?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" | |
| alt="Pijama Azul" class="w-full h-64 object-cover"> | |
| </a> | |
| <div class="p-4"> | |
| <a href="produto-detalhe.html?id=4" class="hover:text-purple-600"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Pijama Azul</h3> | |
| </a> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-purple-600 font-bold text-lg">R$ 109,90</span> | |
| <div class="flex space-x-1"> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">P</span> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">M</span> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">G</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4">Pijama em algodão penteado com listras verticais.</p> | |
| <button class="add-to-cart w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded transition duration-300" | |
| data-product='{"id":4,"name":"Pijama Azul","price":109.90,"image":"https://images.unsplash.com/photo-1583744946564-b52d01e2da64?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"}'> | |
| Adicionar ao Carrinho | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 5 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <a href="produto-detalhe.html?id=5"> | |
| <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" | |
| alt="Pijama Verde" class="w-full h-64 object-cover"> | |
| </a> | |
| <div class="p-4"> | |
| <a href="produto-detalhe.html?id=5" class="hover:text-purple-600"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Pijama Verde</h3> | |
| </a> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-purple-600 font-bold text-lg">R$ 99,90</span> | |
| <div class="flex space-x-1"> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">P</span> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">M</span> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">G</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4">Pijama em viscose com estampa tropical.</p> | |
| <button class="add-to-cart w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded transition duration-300" | |
| data-product='{"id":5,"name":"Pijama Verde","price":99.90,"image":"https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"}'> | |
| Adicionar ao Carrinho | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 6 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <a href="produto-detalhe.html?id=6"> | |
| <img src="https://images.unsplash.com/photo-1595341595379-cf1cd0fb7fb9?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" | |
| alt="Pijama Estampado" class="w-full h-64 object-cover"> | |
| </a> | |
| <div class="p-4"> | |
| <a href="produto-detalhe.html?id=6" class="hover:text-purple-600"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Pijama Estampado</h3> | |
| </a> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-purple-600 font-bold text-lg">R$ 149,90</span> | |
| <div class="flex space-x-1"> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">P</span> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">M</span> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded">G</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4">Pijama em algodão com estampa exclusiva.</p> | |
| <button class="add-to-cart w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded transition duration-300" | |
| data-product='{"id":6,"name":"Pijama Estampado","price":149.90,"image":"https://images.unsplash.com/photo-1595341595379-cf1cd0fb7fb9?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"}'> | |
| Adicionar ao Carrinho | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex justify-center mt-12"> | |
| <nav class="flex items-center space-x-2"> | |
| <button class="w-10 h-10 flex items-center justify-center rounded-full bg-purple-100 text-purple-800"> | |
| <i data-feather="chevron-left" class="w-5 h-5"></i> | |
| </button> | |
| <button class="w-10 h-10 flex items-center justify-center rounded-full bg-purple-600 text-white font-medium">1</button> | |
| <button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-purple-100">2</button> | |
| <button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-purple-100">3</button> | |
| <span class="px-2">...</span> | |
| <button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-purple-100">8</button> | |
| <button class="w-10 h-10 flex items-center justify-center rounded-full bg-purple-100 text-purple-800"> | |
| <i data-feather="chevron-right" class="w-5 h-5"></i> | |
| </button> | |
| </nav> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-purple-900 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i data-feather="moon" class="w-6 h-6 mr-2"></i> SleepingComfort | |
| </h3> | |
| <p class="text-purple-200">Conforto e estilo para suas noites de sono.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Links Rápidos</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="text-purple-200 hover:text-white transition">Início</a></li> | |
| <li><a href="produtos.html" class="text-purple-200 hover:text-white transition">Produtos</a></li> | |
| <li><a href="contato.html" class="text-purple-200 hover:text-white transition">Contato</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Ajuda</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-purple-200 hover:text-white transition">Trocas e Devoluções</a></li> | |
| <li><a href="#" class="text-purple-200 hover:text-white transition">Política de Privacidade</a></li> | |
| <li><a href="#" class="text-purple-200 hover:text-white transition">Termos de Serviço</a></li> | |
| <li><a href="#" class="text-purple-200 hover:text-white transition">Perguntas Frequentes</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Contato</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i data-feather="mail" class="w-4 h-4 mr-2"></i> | |
| <span>contato@sleepingcomfort.com</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="phone" class="w-4 h-4 mr-2"></i> | |
| <span>(11) 98765-4321</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-2"></i> | |
| <span>São Paulo, Brasil</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-purple-800 mt-8 pt-8 text-center text-purple-300"> | |
| <p>© 2023 SleepingComfort. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Floating Social Media --> | |
| <div class="fixed right-4 bottom-4 space-y-3 z-50"> | |
| <a href="https://wa.me/5511987654321" class="block w-12 h-12 bg-green-500 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-green-600 transition" target="_blank"> | |
| <i data-feather="message-circle" class="w-5 h-5"></i> | |
| </a> | |
| <a href="https://instagram.com/sleepingcomfort" class="block w-12 h-12 bg-pink-600 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-pink-700 transition" target="_blank"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| <a href="mailto:contato@sleepingcomfort.com" class="block w-12 h-12 bg-gray-700 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-gray-800 transition"> | |
| <i data-feather="mail" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| <!-- Shopping Cart Sidebar --> | |
| <div id="cart-sidebar" class="fixed top-0 right-0 w-full md:w-96 h-full bg-white shadow-lg z-50 transform translate-x-full transition-transform duration-300 overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold text-gray-800">Seu Carrinho</h3> | |
| <button id="close-cart" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div id="cart-items" class="space-y-4"> | |
| <!-- Cart items will be added here dynamically --> | |
| <p class="text-gray-500 text-center py-8">Seu carrinho está vazio</p> | |
| </div> | |
| <div id="cart-summary" class="border-t border-gray-200 pt-4 mt-4 hidden"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Subtotal</span> | |
| <span id="cart-subtotal" class="font-semibold">R$ 0,00</span> | |
| </div> | |
| <div class="flex justify-between mb-4"> | |
| <span class="text-gray-600">Frete</span> | |
| <span class="font-semibold">A calcular</span> | |
| </div> | |
| <div class="flex justify-between text-lg font-bold"> | |
| <span>Total</span> | |
| <span id="cart-total">R$ 0,00</span> | |
| </div> | |
| <button id="clear-cart" class="w-full mt-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300 transition"> | |
| Limpar Carrinho | |
| </button> | |
| <div id="delivery-form" class="mt-4 hidden"> | |
| <h4 class="font-bold mb-4">Dados de Entrega</h4> | |
| <div class="space-y-4"> | |
| <input type="text" id="full-name" placeholder="Nome Completo" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <input type="text" id="street" placeholder="Rua" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <input type="text" id="neighborhood" placeholder="Bairro" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <input type="text" id="number" placeholder="Número" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <input type="text" id="cep" placeholder="CEP" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <input type="text" id="complement" placeholder="Complemento" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| </div> | |
| <button id="send-order" class="w-full mt-4 py-3 bg-green-500 hover:bg-green-600 text-white text-center rounded font-medium transition"> | |
| Enviar Pedido via WhatsApp | |
| </button> | |
| </div> | |
| <button id="show-delivery-form" class="w-full mt-4 py-3 bg-purple-600 hover:bg-purple-700 text-white text-center rounded font-medium transition"> | |
| Finalizar Compra | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="cart-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div> | |
| <script> | |
| // Initialize AOS animations | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-btn').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Cart functionality | |
| let cart = JSON.parse(localStorage.getItem('cart')) || []; | |
| function updateCartCount() { | |
| const count = cart.reduce((total, item) => total + item.quantity, 0); | |
| const cartCount = document.getElementById('cart-count'); | |
| if (count > 0) { | |
| cartCount.textContent = count; | |
| cartCount.classList.remove('hidden'); | |
| } else { | |
| cartCount.classList.add('hidden'); | |
| } | |
| } | |
| function updateCartSidebar() { | |
| const cartItems = document.getElementById('cart-items'); | |
| const cartSummary = document.getElementById('cart-summary'); | |
| if (cart.length === 0) { | |
| cartItems.innerHTML = '<p class="text-gray-500 text-center py-8">Seu carrinho está vazio</p>'; | |
| cartSummary.classList.add('hidden'); | |
| return; | |
| } | |
| cartItems.innerHTML = ''; | |
| let subtotal = 0; | |
| cart.forEach((item, index) => { | |
| const itemTotal = item.price * item.quantity; | |
| subtotal += itemTotal; | |
| const itemElement = document.createElement('div'); | |
| itemElement.className = 'flex items-start border-b border-gray-100 pb-4'; | |
| itemElement.innerHTML = ` | |
| <img src="${item.image}" alt="${item.name}" class="w-16 h-16 object-cover rounded"> | |
| <div class="ml-4 flex-grow"> | |
| <h4 class="font-medium text-gray-800">${item.name}</h4> | |
| <p class="text-sm text-gray-500">Tamanho: ${item.size || 'M'}</p> | |
| <div class="flex justify-between items-center mt-1"> | |
| <div class="flex items-center border border-gray-200 rounded"> | |
| <button class="decrease-quantity px-2 py-1 text-gray-600 hover:bg-gray-100" data-index="${index}">-</button> | |
| <span class="px-2">${item.quantity}</span> | |
| <button class="increase-quantity px-2 py-1 text-gray-600 hover:bg-gray-100" data-index="${index}">+</button> | |
| </div> | |
| <span class="font-medium">R$ ${itemTotal.toFixed(2)}</span> | |
| </div> | |
| </div> | |
| <button class="remove-item ml-2 text-gray-400 hover:text-red-500" data-index="${index}"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| `; | |
| cartItems.appendChild(itemElement); | |
| }); | |
| document.getElementById('cart-subtotal').textContent = `R$ ${subtotal.toFixed(2)}`; | |
| document.getElementById('cart-total').textContent = `R$ ${subtotal.toFixed(2)}`; | |
| cartSummary.classList.remove('hidden'); | |
| feather.replace(); | |
| // Add event listeners to quantity buttons | |
| document.querySelectorAll('.decrease-quantity').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const index = parseInt(this.getAttribute('data-index')); | |
| if (cart[index].quantity > 1) { | |
| cart[index].quantity--; | |
| saveCart(); | |
| updateCartSidebar(); | |
| updateCartCount(); | |
| } | |
| }); | |
| }); | |
| document.querySelectorAll('.increase-quantity').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const index = parseInt(this.getAttribute('data-index')); | |
| cart[index].quantity++; | |
| saveCart(); | |
| updateCartSidebar(); | |
| updateCartCount(); | |
| }); | |
| }); | |
| document.querySelectorAll('.remove-item').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const index = parseInt(this.getAttribute('data-index')); | |
| cart.splice(index, 1); | |
| saveCart(); | |
| updateCartSidebar(); | |
| updateCartCount(); | |
| }); | |
| }); | |
| } | |
| function saveCart() { | |
| localStorage.setItem('cart', JSON.stringify(cart)); | |
| } | |
| // Add to cart buttons | |
| document.querySelectorAll('.add-to-cart').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const product = JSON.parse(this.getAttribute('data-product')); | |
| product.quantity = 1; | |
| product.size = 'M'; // Default size | |
| // Check if product already exists in cart | |
| const existingItem = cart.find(item => | |
| item.id === product.id && item.size === product.size | |
| ); | |
| if (existingItem) { | |
| existingItem.quantity++; | |
| } else { | |
| cart.push(product); | |
| } | |
| saveCart(); | |
| updateCartCount(); | |
| // Show success message | |
| const notification = document.createElement('div'); | |
| notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow-lg flex items-center'; | |
| notification.innerHTML = ` | |
| <i data-feather="check-circle" class="w-5 h-5 mr-2"></i> | |
| <span>Produto adicionado ao carrinho!</span> | |
| `; | |
| document.body.appendChild(notification); | |
| feather.replace(); | |
| setTimeout(() => { | |
| notification.classList.add('opacity-0', 'translate-y-2'); | |
| setTimeout(() => notification.remove(), 300); | |
| }, 2000); | |
| }); | |
| }); | |
| // Cart sidebar toggle | |
| document.getElementById('cart-btn').addEventListener('click', function() { | |
| document.getElementById('cart-sidebar').classList.remove('translate-x-full'); | |
| document.getElementById('cart-overlay').classList.remove('hidden'); | |
| updateCartSidebar(); | |
| }); | |
| document.getElementById('close-cart').addEventListener('click', function() { | |
| document.getElementById('cart-sidebar').classList.add('translate-x-full'); | |
| document.getElementById('cart-overlay').classList.add('hidden'); | |
| }); | |
| document.getElementById('cart-overlay').addEventListener('click', function() { | |
| document.getElementById('cart-sidebar').classList.add('translate-x-full'); | |
| this.classList.add('hidden'); | |
| }); | |
| // Clear cart button | |
| document.getElementById('clear-cart').addEventListener('click', function() { | |
| cart = []; | |
| saveCart(); | |
| updateCartSidebar(); | |
| updateCartCount(); | |
| }); | |
| // Show delivery form | |
| document.getElementById('show-delivery-form').addEventListener('click', function() { | |
| document.getElementById('delivery-form').classList.remove('hidden'); | |
| this.classList.add('hidden'); | |
| }); | |
| // Send order via WhatsApp | |
| document.getElementById('send-order').addEventListener('click', function() { | |
| const fullName = document.getElementById('full-name').value; | |
| const street = document.getElementById('street').value; | |
| const neighborhood = document.getElementById('neighborhood').value; | |
| const number = document.getElementById('number').value; | |
| const cep = document.getElementById('cep').value; | |
| const complement = document.getElementById('complement').value; | |
| if (!fullName || !street || !neighborhood || !number || !cep) { | |
| alert('Por favor, preencha todos os campos obrigatórios!'); | |
| return; | |
| } | |
| let message = `*Pedido SleepingComfort*%0A%0A`; | |
| message += `*Dados de Entrega:*%0A`; | |
| message += `Nome: ${fullName}%0A`; | |
| message += `Endereço: ${street}, ${number}%0A`; | |
| message += `Bairro: ${neighborhood}%0A`; | |
| message += `CEP: ${cep}%0A`; | |
| if (complement) message += `Complemento: ${complement}%0A%0A`; | |
| message += `*Itens do Pedido:*%0A`; | |
| cart.forEach(item => { | |
| message += `- ${item.name} (${item.size || 'M'}) - R$ ${item.price.toFixed(2)} x ${item.quantity}%0A`; | |
| }); | |
| const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); | |
| message += `%0A*Total: R$ ${total.toFixed(2)}*`; | |
| window.open(`https://wa.me/5511987654321?text=${message}`, '_blank'); | |
| }); | |
| // Initialize cart count on page load | |
| updateCartCount(); | |
| </script> | |
| </body> | |
| </html> | |