Spaces:
Running
Running
Tem dois avaliações de clientes e a descrição do produto ainda não está horizontalmente começando do borde esquerdo da página e terminando no borde direito da página, ele tem que estar nessa ordem m baixo de detalhes do produto tem que estar segurança e pagamento, em baixo de segurança e pagamento tem que estar detalhes técnicos, embaixo de detalhes técnicos tem que estar avaliações dos clientes e abaixo de avaliações doa clientes tem que estar produtos similares e as opções de produtos similares com sua foto e nada mais abaixo tira tudo o que estiver abaixo de produtos similares - Follow Up Deployment
b8509b8 verified | <!-- Product Page Template --> | |
| <div id="product-page" class="hidden fixed inset-0 bg-white z-50 overflow-y-auto h-screen w-screen p-0 md:p-4"> | |
| <div class="w-full h-full"> | |
| <div class="bg-black text-white py-4 px-4 sticky top-0 z-30 w-full shadow-lg"> | |
| <div class="container mx-auto flex flex-col md:flex-row justify-between items-center space-y-2 md:space-y-0"> | |
| <a href="#" class="text-2xl font-bold volt-text tracking-wider">VOLT</a> | |
| <div class="w-full md:w-1/3 px-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Buscar produtos..." class="w-full py-2 px-4 rounded-full bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-volt"> | |
| <button class="absolute right-0 top-0 h-full px-4 text-gray-400 hover:text-volt"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4 text-sm justify-center"> | |
| <a href="#" class="hover:text-volt transition">Novidades</a> | |
| <a href="#" class="hover:text-volt transition">Oversized</a> | |
| <a href="#" class="hover:text-volt transition">Masculino</a> | |
| <a href="#" class="hover:text-volt transition">Feminino</a> | |
| </div> | |
| </div> | |
| </div> | |
| <button onclick="closeProductPage()" class="fixed top-4 right-4 text-2xl hover:text-volt transition z-50 bg-black bg-opacity-70 rounded-full p-2"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div class="flex flex-col md:flex-row gap-4 md:gap-8 pt-16 pb-20 md:pb-0 h-[calc(100%-80px)] overflow-y-auto"> | |
| <!-- Left Column - Product Images --> | |
| <div class="w-full md:w-1/2 px-4 md:px-0"> | |
| <div class="mb-4 rounded-lg overflow-hidden"> | |
| <img id="product-main-image" src="" alt="Product Image" class="w-full h-auto object-cover"> | |
| </div> | |
| <div class="grid grid-cols-4 gap-2"> | |
| <div class="cursor-pointer border border-gray-200 rounded hover:border-volt"> | |
| <img src="" alt="Thumbnail" class="w-full h-20 object-cover"> | |
| </div> | |
| <div class="cursor-pointer border border-gray-200 rounded hover:border-volt"> | |
| <img src="" alt="Thumbnail" class="w-full h-20 object-cover"> | |
| </div> | |
| <div class="cursor-pointer border border-gray-200 rounded hover:border-volt"> | |
| <img src="" alt="Thumbnail" class="w-full h-20 object-cover"> | |
| </div> | |
| <div class="cursor-pointer border border-gray-200 rounded hover:border-volt"> | |
| <img src="" alt="Thumbnail" class="w-full h-20 object-cover"> | |
| </div> | |
| </div> | |
| <!-- Product Description --> | |
| <div class="mt-8 w-full"> | |
| <div class="bg-gray-50 p-6 rounded-lg mb-8 w-full"> | |
| <h3 class="font-bold mb-6 text-3xl text-black">DESCRIÇÃO DO PRODUTO</h3> | |
| <p id="product-description" class="text-gray-700 text-lg mb-6 w-full leading-relaxed"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Product Info --> | |
| <div class="w-full md:w-1/2 px-4 md:px-0 sticky bottom-0 bg-white pt-4 pb-4 md:pb-0 md:static md:bg-transparent"> | |
| <div id="quantity-warning" class="hidden bg-red-100 text-red-800 font-bold text-sm py-2 px-4 w-full text-center fixed top-0 left-0 z-50"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <p>Para pedidos acima de 100 unidades, entre em contato via <a href="https://wa.me/551140040040" class="font-bold underline hover:text-gray-200 transition">WhatsApp</a></p> | |
| <button onclick="closeQuantityWarning()" class="ml-4"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="warning-timer" class="h-1 bg-red-500 w-full absolute bottom-0 left-0"></div> | |
| </div> | |
| <h1 id="product-title" class="text-3xl font-bold mb-2"></h1> | |
| <div class="mb-4"> | |
| <div class="flex text-gray-300 mr-2"> | |
| <i class="far fa-star"></i> | |
| <i class="far fa-star"></i> | |
| <i class="far fa-star"></i> | |
| <i class="far fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-600">(Seja o primeiro a avaliar)</span> | |
| </div> | |
| <div class="mb-6"> | |
| <span id="product-price" class="text-2xl font-bold"></span> | |
| <span class="text-gray-500 line-through ml-2">R$ 159,90</span> | |
| <span class="ml-2 bg-volt text-white text-sm px-2 py-1 rounded">20% OFF</span> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bolt text-volt mr-2"></i> | |
| <div class="voltage-meter" style="max-width: 300px;"> | |
| <div class="voltage-fill high" style="width: 100%"> | |
| <div class="lightning"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">MEDIDOR DE VOLTAGEM: 100% (MAIS VENDIDO)</p> | |
| </div> | |
| , | |
| <div class="mb-6"> | |
| <h3 class="font-bold mb-2">CORES</h3> | |
| <div class="flex space-x-4"> | |
| <button class="color-option w-10 h-10 rounded-full bg-black border-2 border-gray-300 hover:scale-110 transition-transform duration-200" data-color="black"></button> | |
| <button class="color-option w-10 h-10 rounded-full bg-gray-400 border-2 border-gray-300 hover:scale-110 transition-transform duration-200" data-color="gray"></button> | |
| <button class="color-option w-10 h-10 rounded-full bg-white border-2 border-gray-300 hover:scale-110 transition-transform duration-200" data-color="white"></button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-bold mb-2">TAMANHOS</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="size-option px-4 py-2 border border-gray-300 hover:border-volt hover:text-volt rounded transition-all duration-200" data-size="P">P</button> | |
| <button class="size-option px-4 py-2 border border-gray-300 hover:border-volt hover:text-volt rounded transition-all duration-200" data-size="M">M</button> | |
| <button class="size-option px-4 py-2 border border-gray-300 hover:border-volt hover:text-volt rounded transition-all duration-200" data-size="G">G</button> | |
| <button class="size-option px-4 py-2 border border-gray-300 hover:border-volt hover:text-volt rounded transition-all duration-200" data-size="GG">GG</button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex flex-col space-y-4 md:flex-row md:items-center md:space-y-0 md:space-x-4 mb-4"> | |
| <div class="flex items-center justify-center"> | |
| <button id="decrease-qty" class="bg-gray-200 px-3 py-1 rounded-l hover:bg-gray-300 transition">-</button> | |
| <input type="number" id="quantity" min="1" max="100" value="1" class="w-16 text-center border-t border-b border-gray-300 px-2 py-1"> | |
| <button id="increase-qty" class="bg-gray-200 px-3 py-1 rounded-r hover:bg-gray-300 transition">+</button> | |
| </div> | |
| <button onclick="handleBuyClick(event)" class="bg-volt hover:bg-voltlight text-white font-bold py-3 px-6 rounded-full transition w-full md:w-auto">COMPRAR</button> | |
| <button onclick="handleAddToCartClick(event)" class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-full transition w-full md:w-auto">ADICIONAR AO CARRINHO</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Info Bottom Section --> | |
| <div class="w-full mt-8"> | |
| <div class="border-t border-gray-200 pt-8 pb-8 w-full"> | |
| <div class="bg-gray-50 p-6 rounded-lg mb-8 w-full"> | |
| <h3 class="font-bold mb-6 text-3xl text-black">SEGURANÇA E PAGAMENTO</h3> | |
| <ul class="text-gray-700 list-disc pl-5 w-full space-y-3 text-lg"> | |
| <li><span class="font-semibold">Pagamentos:</span> Processados com criptografia SSL de 256-bit</li> | |
| <li><span class="font-semibold">Dados:</span> Suas informações são protegidas e nunca compartilhadas</li> | |
| <li><span class="font-semibold">Garantia:</span> Compra segura com reembolso em até 7 dias</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg mb-8 w-full"> | |
| <h3 class="font-bold mb-6 text-3xl text-black">DETALHES TÉCNICOS</h3> | |
| <ul class="text-gray-700 list-disc pl-5 w-full space-y-3 text-lg"> | |
| <li><span class="font-semibold">Modelagem:</span> Oversized com caimento perfeito</li> | |
| <li><span class="font-semibold">Tecido:</span> 100% algodão penteado de alta qualidade</li> | |
| <li><span class="font-semibold">Estampa:</span> Digital de alta definição e durabilidade</li> | |
| <li><span class="font-semibold">Costura:</span> Reforçada para maior resistência</li> | |
| <li><span class="font-semibold">Lavagem:</span> Pode ser lavada na máquina sem desbotar</li> | |
| <li><span class="font-semibold">Origem:</span> Produzido no Brasil com materiais premium</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg mb-8 w-full"> | |
| <h3 class="font-bold mb-6 text-3xl text-black">AVALIAÇÕES DOS CLIENTES</h3> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex text-yellow-400 text-2xl mr-4"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-700 text-lg">0/5.0 (<span id="review-count">0</span> avaliações)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Customer Reviews Section --> | |
| <div class="border-t border-gray-200 pt-12 mt-8"> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <h3 class="font-bold mb-6 text-3xl text-black">AVALIAÇÕES DOS CLIENTES</h3> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex text-yellow-400 text-2xl mr-4"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-700 text-lg">0/5.0 (<span id="review-count">0</span> avaliações)</span> | |
| </div> | |
| <!-- Review Form (hidden by default) --> | |
| <div id="review-form" class="hidden bg-gray-50 p-6 rounded-lg mb-6"> | |
| <div id="login-prompt" class="mb-4 p-4 bg-yellow-50 border-l-4 border-yellow-400"> | |
| <p class="text-yellow-700">Você precisa estar logado para avaliar.</p> | |
| <div class="flex space-x-2 mt-2"> | |
| <button class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">Google</button> | |
| <button class="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700">Facebook</button> | |
| <button class="px-3 py-1 bg-purple-500 text-white rounded hover:bg-purple-600">Discord</button> | |
| </div> | |
| </div> | |
| <h4 class="font-bold mb-4">ESCREVA SUA AVALIAÇÃO</h4> | |
| <form id="submit-review"> | |
| <div class="mb-4"> | |
| <label class="block font-medium mb-2">Sua avaliação *</label> | |
| <div class="flex text-yellow-400 text-2xl mb-2" id="star-rating"> | |
| <i class="far fa-star cursor-pointer hover:scale-110 transition" data-rating="1"></i> | |
| <i class="far fa-star cursor-pointer hover:scale-110 transition" data-rating="2"></i> | |
| <i class="far fa-star cursor-pointer hover:scale-110 transition" data-rating="3"></i> | |
| <i class="far fa-star cursor-pointer hover:scale-110 transition" data-rating="4"></i> | |
| <i class="far fa-star cursor-pointer hover:scale-110 transition" data-rating="5"></i> | |
| </div> | |
| <input type="hidden" id="rating-value" name="rating" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="review-title" class="block font-medium mb-2">Título *</label> | |
| <input type="text" id="review-title" name="title" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-volt focus:border-volt" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="review-text" class="block font-medium mb-2">Comentário *</label> | |
| <textarea id="review-text" name="review" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-volt focus:border-volt" required></textarea> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block font-medium mb-2">Fotos (opcional)</label> | |
| <div class="flex items-center space-x-2"> | |
| <label for="review-photos" class="cursor-pointer border border-dashed border-gray-300 rounded p-4 text-center hover:bg-gray-100 transition"> | |
| <i class="fas fa-camera text-gray-400 text-xl mb-2"></i> | |
| <p class="text-sm">Adicionar fotos</p> | |
| <input type="file" id="review-photos" name="photos" class="hidden" multiple accept="image/*"> | |
| </label> | |
| <div id="photo-preview" class="flex space-x-2"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-4"> | |
| <button type="button" onclick="document.getElementById('review-form').classList.add('hidden'); document.getElementById('review-button').classList.remove('hidden')" class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-100 transition">Cancelar</button> | |
| <button type="submit" class="px-4 py-2 bg-volt hover:bg-voltlight text-white rounded transition">Enviar Avaliação</button> | |
| </div> | |
| </form> | |
| </div> | |
| <button id="review-button" onclick="document.getElementById('review-form').classList.remove('hidden'); this.classList.add('hidden')" class="bg-volt hover:bg-voltlight text-white font-bold py-2 px-4 rounded transition"> | |
| <i class="fas fa-pen mr-2"></i>ESCREVER AVALIAÇÃO | |
| </button> | |
| </div> | |
| <!-- Review List --> | |
| <div class="space-y-6"> | |
| <!-- Reviews List --> | |
| <div class="space-y-6"> | |
| <div id="no-reviews-message" class="bg-white p-6 rounded-lg shadow-sm text-center"> | |
| <i class="far fa-comment-dots text-4xl text-gray-300 mb-4"></i> | |
| <p class="text-gray-500">Este produto ainda não possui avaliações. Seja o primeiro a compartilhar sua opinião!</p> | |
| </div> | |
| </div> | |
| <!-- Load More Button --> | |
| <div class="text-center mt-4 hidden"> | |
| <button id="load-more-reviews" class="text-volt hover:text-voltlight font-medium"> | |
| <i class="fas fa-chevron-down mr-1"></i>CARREGAR MAIS AVALIAÇÕES | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Star rating interaction | |
| const stars = document.querySelectorAll('#star-rating i'); | |
| stars.forEach(star => { | |
| star.addEventListener('click', function() { | |
| const rating = parseInt(this.getAttribute('data-rating')); | |
| document.getElementById('rating-value').value = rating; | |
| stars.forEach((s, index) => { | |
| if (index < rating) { | |
| s.classList.remove('far'); | |
| s.classList.add('fas'); | |
| } else { | |
| s.classList.remove('fas'); | |
| s.classList.add('far'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Photo upload preview | |
| document.getElementById('review-photos').addEventListener('change', function(e) { | |
| const preview = document.getElementById('photo-preview'); | |
| preview.innerHTML = ''; | |
| if (this.files) { | |
| Array.from(this.files).forEach(file => { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const img = document.createElement('img'); | |
| img.src = e.target.result; | |
| img.className = 'w-20 h-20 object-cover rounded border border-gray-200'; | |
| preview.appendChild(img); | |
| } | |
| reader.readAsDataURL(file); | |
| }); | |
| } | |
| }); | |
| // Check login status before showing review form | |
| function checkLoginBeforeReview() { | |
| // In a real app, check actual login status | |
| const isLoggedIn = false; // Change to true when user logs in | |
| if (!isLoggedIn) { | |
| document.getElementById('review-form').classList.remove('hidden'); | |
| document.getElementById('login-prompt').classList.remove('hidden'); | |
| } else { | |
| document.getElementById('review-form').classList.toggle('hidden'); | |
| document.getElementById('login-prompt').classList.add('hidden'); | |
| } | |
| } | |
| // Form submission | |
| document.getElementById('submit-review').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Verify user is logged in | |
| const isLoggedIn = false; // Change to true when user logs in | |
| if (!isLoggedIn) { | |
| alert('Por favor, faça login para enviar uma avaliação.'); | |
| return; | |
| } | |
| // Create new review element | |
| const reviewsContainer = document.querySelector('.space-y-6'); | |
| const newReview = document.createElement('div'); | |
| newReview.className = 'bg-white p-6 rounded-lg shadow-sm'; | |
| newReview.innerHTML = ` | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h4 class="font-bold">Você</h4> | |
| <div class="flex text-yellow-400 text-sm mt-1" id="new-review-stars"></div> | |
| </div> | |
| <span class="text-gray-500 text-sm">${new Date().toLocaleDateString()}</span> | |
| </div> | |
| <h5 class="font-medium mb-2">${document.getElementById('review-title').value}</h5> | |
| <p class="text-gray-700">${document.getElementById('review-text').value}</p> | |
| `; | |
| // Add stars to new review | |
| const rating = parseInt(document.getElementById('rating-value').value); | |
| const starsContainer = newReview.querySelector('#new-review-stars'); | |
| for (let i = 1; i <= 5; i++) { | |
| const star = document.createElement('i'); | |
| star.className = i <= rating ? 'fas fa-star' : 'far fa-star'; | |
| starsContainer.appendChild(star); | |
| } | |
| // Add new review to top of list | |
| reviewsContainer.prepend(newReview); | |
| // Update review count and hide "no reviews" message | |
| const countElement = document.getElementById('review-count'); | |
| const newCount = parseInt(countElement.textContent) + 1; | |
| countElement.textContent = newCount; | |
| // Hide "no reviews" message if it's the first review | |
| if (newCount === 1) { | |
| document.getElementById('no-reviews-message').classList.add('hidden'); | |
| } | |
| // Reset form | |
| this.reset(); | |
| document.getElementById('photo-preview').innerHTML = ''; | |
| document.getElementById('review-form').classList.add('hidden'); | |
| document.getElementById('review-button').classList.remove('hidden'); | |
| alert('Avaliação publicada com sucesso! Obrigado por seu feedback.'); | |
| }); | |
| // Load more reviews button | |
| document.getElementById('load-more-reviews').addEventListener('click', function() { | |
| // In a real app, this would fetch more reviews from the server | |
| console.log('Loading more reviews...'); | |
| }); | |
| </script> | |
| </div> | |
| </div> | |
| <!-- Related Products (moved below reviews) --> | |
| <div class="px-4 py-8 bg-gray-50 mt-12"> | |
| <h2 class="text-2xl font-bold mb-8 electric-line">PRODUTOS RELACIONADOS</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <!-- Related product cards would go here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VOLT - Camisas Oversized Premium</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| volt: '#bc13fe', | |
| voltlight: '#d46afd', | |
| voltdark: '#8a00b5', | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .volt-text { | |
| color: #bc13fe; | |
| text-shadow: 0 0 8px rgba(188, 19, 254, 0.6); | |
| } | |
| .volt-border { | |
| border-color: #bc13fe; | |
| box-shadow: 0 0 12px rgba(188, 19, 254, 0.4); | |
| } | |
| .volt-bg { | |
| background-color: #bc13fe; | |
| box-shadow: 0 0 12px rgba(188, 19, 254, 0.4); | |
| } | |
| .hover-effect:hover { | |
| transform: translateY(-2px); | |
| transition: all 0.3s ease; | |
| } | |
| .sticky-nav-active { | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| animation: slideDown 0.3s ease-out; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| } | |
| @keyframes slideDown { | |
| from { | |
| transform: translateY(-100%); | |
| } | |
| to { | |
| transform: translateY(0); | |
| } | |
| } | |
| .electric-line { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .electric-line::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, #bc13fe, transparent); | |
| animation: electric 3s linear infinite; | |
| } | |
| @keyframes electric { | |
| 0% { | |
| transform: translateX(-100%); | |
| opacity: 0; | |
| } | |
| 20% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| } | |
| #mobile-menu { | |
| backdrop-filter: blur(5px); | |
| -webkit-backdrop-filter: blur(5px); | |
| } | |
| @media (max-width: 1023px) { | |
| body.menu-open { | |
| overflow: hidden; | |
| height: 100vh; | |
| } | |
| } | |
| #mobile-menu-button { | |
| box-shadow: 0 0 10px rgba(188, 19, 254, 0.5); | |
| } | |
| .product-card:hover .product-image { | |
| transform: scale(1.03); | |
| transition: transform 0.3s ease; | |
| } | |
| .voltage-meter { | |
| width: 100%; | |
| height: 6px; | |
| background: white; | |
| border: 1px solid black; | |
| border-radius: 3px; | |
| margin-top: 8px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .voltage-fill { | |
| height: 100%; | |
| width: 100%; | |
| position: relative; | |
| transition: width 0.5s ease, background 0.5s ease; | |
| } | |
| .voltage-fill.low { | |
| background: white; | |
| } | |
| .voltage-fill.low ~ .fa-bolt { | |
| color: white; | |
| } | |
| .voltage-fill.medium { | |
| background: #00f0ff; | |
| box-shadow: 0 0 10px #00f0ff; | |
| animation: electric-pulse 2s infinite; | |
| } | |
| .voltage-fill.medium ~ .fa-bolt { | |
| color: #00f0ff; | |
| animation: electric-pulse 2s infinite; | |
| } | |
| .voltage-fill.high { | |
| background: #bc13fe; | |
| box-shadow: 0 0 15px #bc13fe; | |
| animation: electric-storm 1.5s infinite; | |
| } | |
| .voltage-fill.high ~ .fa-bolt { | |
| color: #bc13fe; | |
| animation: electric-storm 1.5s infinite; | |
| } | |
| /* Selected color option */ | |
| .selected-color { | |
| border-color: #bc13fe ; | |
| box-shadow: 0 0 0 2px #bc13fe ; | |
| transform: scale(1.1) ; | |
| } | |
| /* Selected size option */ | |
| .selected-size { | |
| background-color: #bc13fe ; | |
| color: white ; | |
| border-color: #bc13fe ; | |
| transform: scale(1.05) ; | |
| box-shadow: 0 0 0 2px #bc13fe; | |
| } | |
| @keyframes electric-pulse { | |
| 0% { box-shadow: 0 0 5px #00f0ff; } | |
| 50% { box-shadow: 0 0 15px #00f0ff; } | |
| 100% { box-shadow: 0 0 5px #00f0ff; } | |
| } | |
| @keyframes electric-storm { | |
| 0% { box-shadow: 0 0 10px #bc13fe; } | |
| 25% { box-shadow: 0 0 20px #bc13fe, 0 0 30px rgba(188, 19, 254, 0.5); } | |
| 50% { box-shadow: 0 0 15px #bc13fe; } | |
| 75% { box-shadow: 0 0 25px #bc13fe, 0 0 35px rgba(188, 19, 254, 0.5); } | |
| 100% { box-shadow: 0 0 10px #bc13fe; } | |
| } | |
| .lightning { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); | |
| top: 0; | |
| left: -100%; | |
| animation: lightning 3s infinite; | |
| opacity: 0; | |
| } | |
| @keyframes lightning { | |
| 0% { left: -100%; opacity: 0; } | |
| 10% { opacity: 0.8; } | |
| 20% { left: 100%; opacity: 0; } | |
| 100% { left: 100%; opacity: 0; } | |
| } | |
| .high .lightning { | |
| animation: lightning 1s infinite; | |
| } | |
| #product-page { | |
| background-color: rgba(255, 255, 255, 0.98); | |
| z-index: 1000; | |
| } | |
| #cart-sidebar { | |
| scrollbar-width: thin; | |
| scrollbar-color: #bc13fe #f3f4f6; | |
| } | |
| #cart-sidebar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| #cart-sidebar::-webkit-scrollbar-track { | |
| background: #f3f4f6; | |
| } | |
| #cart-sidebar::-webkit-scrollbar-thumb { | |
| background-color: #bc13fe; | |
| border-radius: 3px; | |
| } | |
| @media (min-width: 768px) { | |
| #product-page { | |
| padding: 3rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white text-gray-900"> | |
| <!-- Top Bar --> | |
| <div class="bg-black text-white text-sm py-2 px-4"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <button id="mobile-menu-button" class="lg:hidden mr-2 bg-black p-2 rounded-full focus:outline-none"> | |
| <div class="w-6 h-6 relative"> | |
| <span class="block absolute h-0.5 w-6 bg-volt transform transition duration-300 ease-in-out" id="bar1"></span> | |
| <span class="block absolute h-0.5 w-6 bg-volt transform transition duration-300 ease-in-out mt-2" id="bar2"></span> | |
| <span class="block absolute h-0.5 w-6 bg-volt transform transition duration-300 ease-in-out mt-4" id="bar3"></span> | |
| </div> | |
| </button> | |
| <a href="#" class="hover:text-volt transition">Ajuda</a> | |
| <a href="#" class="hover:text-volt transition">Entregas</a> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-volt transition"><i class="fas fa-store mr-1"></i> Lojas</a> | |
| <a href="#" class="hover:text-volt transition"><i class="fas fa-phone mr-1"></i> Contato</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Header --> | |
| <header class="py-6 px-4 border-b border-gray-200"> | |
| <div class="container mx-auto flex flex-col md:flex-row items-center justify-between"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <a href="#" class="text-3xl font-bold volt-text">VOLT</a> | |
| <span class="ml-2 text-xs bg-black text-white px-2 py-1 rounded">BRASIL</span> | |
| </div> | |
| <div class="w-full md:w-auto flex-1 md:px-8"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Buscar produtos..." class="w-full py-2 px-4 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-volt focus:border-transparent"> | |
| <button class="absolute right-0 top-0 h-full px-4 text-gray-500 hover:text-volt"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="hover:text-volt transition"><i class="far fa-user text-xl"></i></a> | |
| <a href="#" onclick="openCart(event)" class="hover:text-volt transition relative"> | |
| <i class="fas fa-shopping-bag text-xl"></i> | |
| <span id="cart-count" class="absolute -top-2 -right-2 bg-volt text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden fixed inset-0 bg-black bg-opacity-80 z-40 pt-20 px-6"> | |
| <button onclick="closeMobileMenu()" class="absolute top-6 right-6 text-volt text-2xl"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div class="flex flex-col items-center mb-8 mt-8"> | |
| <img src="https://via.placeholder.com/80" alt="Profile" class="rounded-full w-20 h-20 mb-2 border-2 border-volt"> | |
| <span class="text-white font-medium">Olá, Cliente</span> | |
| </div> | |
| <nav class="flex flex-col space-y-4 text-white"> | |
| <a href="#" class="py-2 border-b border-gray-700 hover:text-volt transition"><i class="fas fa-user mr-2"></i> Minha Conta</a> | |
| <a href="#" class="py-2 border-b border-gray-700 hover:text-volt transition"><i class="fas fa-box mr-2"></i> Meus Pedidos</a> | |
| <a href="#" class="py-2 border-b border-gray-700 hover:text-volt transition"><i class="fas fa-heart mr-2"></i> Favoritos</a> | |
| <a href="#" class="py-2 border-b border-gray-700 hover:text-volt transition"><i class="fas fa-question-circle mr-2"></i> Ajuda</a> | |
| <a href="#" class="py-2 border-b border-gray-700 hover:text-volt transition"><i class="fas fa-cog mr-2"></i> Configurações</a> | |
| <a href="#" class="py-2 text-volt hover:text-voltlight transition"><i class="fas fa-sign-out-alt mr-2"></i> Sair</a> | |
| </nav> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="bg-white py-4 px-4 border-b border-gray-200 sticky top-0 z-30" id="main-nav"> | |
| <div class="container mx-auto"> | |
| <div class="overflow-x-auto whitespace-nowrap py-2"> | |
| <ul class="inline-flex space-x-1 md:space-x-6"> | |
| <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Novidades</a></li> | |
| <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Oversized</a></li> | |
| <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Masculino</a></li> | |
| <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Feminino</a></li> | |
| <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Outlet</a></li> | |
| <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Basics</a></li> | |
| <li><a href="#" class="px-3 py-2 font-medium hover:text-volt transition">Acessórios</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Banner --> | |
| <div class="relative bg-black text-white pt-20"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-black to-transparent z-10"></div> | |
| <img src="https://images.unsplash.com/photo-1527719327859-c6ce80353573?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="VOLT Collection" class="w-full h-auto object-cover opacity-90"> | |
| <div class="absolute inset-0 flex items-center z-20"> | |
| <div class="container mx-auto px-6"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4">COLEÇÃO <span class="volt-text">ELÉTRICA</span></h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-lg">Camisas oversized que carregam sua personalidade com alta voltagem.</p> | |
| <a href="#" class="inline-block bg-volt hover:bg-voltlight text-white font-bold py-3 px-8 rounded-full transition hover-effect" onclick="openProductPageFromHero(event, this)">COMPRE AGORA</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Categories --> | |
| <div class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 electric-line">CATEGORIAS EM DESTAQUE</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <a href="#" class="group relative overflow-hidden rounded-lg hover-effect"> | |
| <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Camisetas Oversized" class="w-full h-64 object-cover group-hover:opacity-90 transition"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> | |
| <h3 class="text-white text-xl font-bold">CAMISETAS OVERSIZED</h3> | |
| </div> | |
| </a> | |
| <a href="#" class="group relative overflow-hidden rounded-lg hover-effect"> | |
| <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=776&q=80" alt="Moletons" class="w-full h-64 object-cover group-hover:opacity-90 transition"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> | |
| <h3 class="text-white text-xl font-bold">MOLETONS</h3> | |
| </div> | |
| </a> | |
| <a href="#" class="group relative overflow-hidden rounded-lg hover-effect"> | |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Shorts" class="w-full h-64 object-cover group-hover:opacity-90 transition"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> | |
| <h3 class="text-white text-xl font-bold">SHORTS</h3> | |
| </div> | |
| </a> | |
| <a href="#" class="group relative overflow-hidden rounded-lg hover-effect"> | |
| <img src="https://images.unsplash.com/photo-1594631252845-29fc4cc8cde9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Acessórios" class="w-full h-64 object-cover group-hover:opacity-90 transition"> | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> | |
| <h3 class="text-white text-xl font-bold">ACESSÓRIOS</h3> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Arrivals --> | |
| <div class="py-12"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 electric-line">LANÇAMENTOS</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <!-- Product 1 --> | |
| <div class="product-card group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=776&q=80" alt="Camiseta VOLT" class="w-full h-80 object-cover product-image transition cursor-pointer" onclick="showBuyButton(this)"> | |
| <div class="absolute top-4 right-4"> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-3 opacity-0 transition buy-button-container"> | |
| <a href="#" class="block text-center py-2 bg-volt hover:bg-voltlight rounded font-medium transition" onclick="openProductPageFromCard(event, this)">COMPRAR</a> | |
| </div> | |
| </div> | |
| <h3 class="font-medium">CAMISETA OVERSIZED VOLT</h3> | |
| <div class="flex justify-between items-center mt-1"> | |
| <span class="text-gray-600">Preto</span> | |
| <span class="font-bold">R$ 129,90</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bolt text-volt mr-2"></i> | |
| <div class="voltage-meter"> | |
| <div class="voltage-fill high" style="width: 100%"> | |
| <div class="lightning"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="Moletom VOLT" class="w-full h-80 object-cover product-image transition cursor-pointer" onclick="showBuyButton(this)"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-3 opacity-0 transition buy-button-container"> | |
| <a href="#" class="block text-center py-2 bg-volt hover:bg-voltlight rounded font-medium transition" onclick="openProductPageFromCard(event, this)">COMPRAR</a> | |
| </div> | |
| </div> | |
| <h3 class="font-medium">MOLETON OVERSIZED VOLT</h3> | |
| <div class="flex justify-between items-center mt-1"> | |
| <span class="text-gray-600">Cinza</span> | |
| <span class="font-bold">R$ 199,90</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bolt text-volt mr-2"></i> | |
| <div class="voltage-meter"> | |
| <div class="voltage-fill medium" style="width: 75%"> | |
| <div class="lightning"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-card group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Camiseta VOLT" class="w-full h-80 object-cover product-image transition"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-3 opacity-0 group-hover:opacity-100 transition"> | |
| <a href="#" class="block text-center py-2 bg-volt hover:bg-voltlight rounded font-medium transition">COMPRAR</a> | |
| </div> | |
| </div> | |
| <h3 class="font-medium">CAMISETA OVERSIZED VOLT</h3> | |
| <div class="flex justify-between items-center mt-1"> | |
| <span class="text-gray-600">Branco</span> | |
| <span class="font-bold">R$ 129,90</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bolt text-volt mr-2"></i> | |
| <div class="voltage-meter"> | |
| <div class="voltage-fill high" style="width: 100%"> | |
| <div class="lightning"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="product-card group"> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="Camiseta VOLT" class="w-full h-80 object-cover product-image transition"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-3 opacity-0 group-hover:opacity-100 transition"> | |
| <a href="#" class="block text-center py-2 bg-volt hover:bg-voltlight rounded font-medium transition">COMPRAR</a> | |
| </div> | |
| </div> | |
| <h3 class="font-medium">CAMISETA OVERSIZED VOLT</h3> | |
| <div class="flex justify-between items-center mt-1"> | |
| <span class="text-gray-600">Azul</span> | |
| <span class="font-bold">R$ 139,90</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bolt text-volt mr-2"></i> | |
| <div class="voltage-meter"> | |
| <div class="voltage-fill medium" style="width: 75%"> | |
| <div class="lightning"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="inline-block border-2 border-black hover:bg-black hover:text-white font-bold py-3 px-8 rounded-full transition">VER TODOS</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Banner --> | |
| <div class="py-12 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-lg"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center"> | |
| <h2 class="text-3xl font-bold mb-4">SEJA UM <span class="volt-text">MEMBRO VOLT</span></h2> | |
| <p class="text-gray-600 mb-6">Cadastre-se e ganhe 10% OFF na primeira compra, além de receber ofertas exclusivas e acesso antecipado a novos lançamentos.</p> | |
| <div class="flex max-w-md"> | |
| <input type="email" placeholder="Seu e-mail" class="flex-1 py-2 px-4 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-volt focus:border-transparent"> | |
| <button class="bg-volt hover:bg-voltlight text-white font-bold py-2 px-4 rounded-r-lg transition text-sm">CADASTRAR</button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Membro VOLT" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Instagram --> | |
| <div class="py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center justify-between mb-8"> | |
| <h2 class="text-3xl font-bold electric-line">SIGA A <span class="volt-text">@VOLTBRASIL</span></h2> | |
| <a href="#" class="mt-4 md:mt-0 inline-flex items-center text-black hover:text-volt font-medium"> | |
| <i class="fab fa-instagram text-2xl mr-2"></i> VER MAIS NO INSTAGRAM | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <a href="#" class="group relative overflow-hidden rounded-lg hover-effect"> | |
| <img src="https://images.unsplash.com/photo-1527719327859-c6ce80353573?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Instagram 1" class="w-full h-64 object-cover group-hover:opacity-90 transition"> | |
| <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center transition"> | |
| <i class="fab fa-instagram text-white text-3xl opacity-0 group-hover:opacity-100 transition"></i> | |
| </div> | |
| </a> | |
| <a href="#" class="group relative overflow-hidden rounded-lg hover-effect"> | |
| <img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="Instagram 2" class="w-full h-64 object-cover group-hover:opacity-90 transition"> | |
| <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center transition"> | |
| <i class="fab fa-instagram text-white text-3xl opacity-0 group-hover:opacity-100 transition"></i> | |
| </div> | |
| </a> | |
| <a href="#" class="group relative overflow-hidden rounded-lg hover-effect"> | |
| <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Instagram 3" class="w-full h-64 object-cover group-hover:opacity-90 transition"> | |
| <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center transition"> | |
| <i class="fab fa-instagram text-white text-3xl opacity-0 group-hover:opacity-100 transition"></i> | |
| </div> | |
| </a> | |
| <a href="#" class="group relative overflow-hidden rounded-lg hover-effect"> | |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Instagram 4" class="w-full h-64 object-cover group-hover:opacity-90 transition"> | |
| <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center transition"> | |
| <i class="fab fa-instagram text-white text-3xl opacity-0 group-hover:opacity-100 transition"></i> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-black text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 volt-text">VOLT</h3> | |
| <p class="mb-4">Camisas oversized premium com estilo único e conforto inigualável.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-white hover:text-volt transition"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-white hover:text-volt transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-white hover:text-volt transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-white hover:text-volt transition"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">INSTITUCIONAL</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-volt transition">Sobre a VOLT</a></li> | |
| <li><a href="#" class="hover:text-volt transition">Trabalhe Conosco</a></li> | |
| <li><a href="#" class="hover:text-volt transition">Política de Privacidade</a></li> | |
| <li><a href="#" class="hover:text-volt transition">Termos e Condições</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">AJUDA</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-volt transition">Dúvidas Frequentes</a></li> | |
| <li><a href="#" class="hover:text-volt transition">Trocas e Devoluções</a></li> | |
| <li><a href="#" class="hover:text-volt transition">Entregas</a></li> | |
| <li><a href="#" class="hover:text-volt transition">Meus Pedidos</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">CONTATO</h3> | |
| <ul class="space-y-2"> | |
| <li><i class="fas fa-phone-alt mr-2"></i> (11) 4004-0040</li> | |
| <li><i class="fas fa-envelope mr-2"></i> contato@voltbrasil.com.br</li> | |
| <li><i class="fas fa-map-marker-alt mr-2"></i> São Paulo - SP</li> | |
| <li class="mt-4"> | |
| <div class="flex max-w-xs"> | |
| <input type="email" placeholder="Seu e-mail" class="flex-1 py-1 px-3 bg-gray-800 text-white rounded-l focus:outline-none text-sm"> | |
| <button class="bg-volt hover:bg-voltlight text-white py-1 px-3 rounded-r transition text-sm"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 VOLT Brasil. Todos os direitos reservados.</p> | |
| <div class="flex space-x-4"> | |
| <img src="https://via.placeholder.com/40x25" alt="Visa" class="h-6"> | |
| <img src="https://via.placeholder.com/40x25" alt="Mastercard" class="h-6"> | |
| <img src="https://via.placeholder.com/40x25" alt="American Express" class="h-6"> | |
| <img src="https://via.placeholder.com/40x25" alt="Pix" class="h-6"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Shopping Cart Sidebar --> | |
| <div id="cart-sidebar" class="fixed top-0 right-0 h-full w-0 bg-white shadow-xl z-50 overflow-y-auto transition-all duration-300"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">SEU CARRINHO</h2> | |
| <button onclick="closeCart()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| </div> | |
| <div id="cart-items" class="space-y-4"> | |
| <!-- Cart items will be added here dynamically --> | |
| <div id="empty-cart-message" class="text-center py-12"> | |
| <i class="fas fa-shopping-cart text-4xl text-gray-300 mb-4"></i> | |
| <p class="text-gray-500">Seu carrinho está vazio</p> | |
| </div> | |
| </div> | |
| <div id="cart-summary" class="border-t border-gray-200 pt-4 mt-6 hidden"> | |
| <div class="flex justify-between mb-2"> | |
| <span>Subtotal</span> | |
| <span id="cart-subtotal">R$ 0,00</span> | |
| </div> | |
| <div class="flex justify-between mb-4"> | |
| <span>Frete</span> | |
| <span>Grátis</span> | |
| </div> | |
| <div class="flex justify-between font-bold text-lg"> | |
| <span>Total</span> | |
| <span id="cart-total">R$ 0,00</span> | |
| </div> | |
| <button id="checkout-button" class="w-full bg-volt hover:bg-voltlight text-white font-bold py-3 px-4 rounded-full mt-6 transition"> | |
| FINALIZAR COMPRA | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- WhatsApp Float --> | |
| <a href="#" class="fixed bottom-6 right-6 bg-green-500 text-white rounded-full p-4 shadow-lg hover:bg-green-600 transition"> | |
| <i class="fab fa-whatsapp text-2xl"></i> | |
| </a> | |
| <!-- Notification Toast --> | |
| <div id="notification-toast" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gray-600 text-white px-6 py-3 rounded-lg shadow-lg opacity-0 transition-opacity duration-300 z-50"> | |
| <p id="notification-message" class="text-center"></p> | |
| </div> | |
| <script> | |
| // Sticky navigation handler | |
| window.addEventListener('scroll', function() { | |
| const nav = document.getElementById('main-nav'); | |
| const navHeight = nav.offsetHeight; | |
| if (window.pageYOffset > navHeight) { | |
| nav.classList.add('sticky-nav-active'); | |
| document.body.style.paddingTop = navHeight + 'px'; | |
| } else { | |
| nav.classList.remove('sticky-nav-active'); | |
| document.body.style.paddingTop = '0'; | |
| } | |
| }); | |
| // Mobile menu functions | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| const bars = [ | |
| document.getElementById('bar1'), | |
| document.getElementById('bar2'), | |
| document.getElementById('bar3') | |
| ]; | |
| let menuOpen = false; | |
| function closeMobileMenu() { | |
| menuOpen = false; | |
| mobileMenu.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| bars[0].style.transform = ''; | |
| bars[0].style.width = ''; | |
| bars[1].style.opacity = ''; | |
| bars[2].style.transform = ''; | |
| bars[2].style.width = ''; | |
| } | |
| mobileMenuButton.addEventListener('click', () => { | |
| menuOpen = !menuOpen; | |
| if (menuOpen) { | |
| mobileMenu.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| bars[0].style.transform = 'rotate(45deg) translate(6px, 6px)'; | |
| bars[0].style.width = '24px'; | |
| bars[1].style.opacity = '0'; | |
| bars[2].style.transform = 'rotate(-45deg) translate(6px, -6px)'; | |
| bars[2].style.width = '24px'; | |
| } else { | |
| mobileMenu.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| bars[0].style.transform = ''; | |
| bars[0].style.width = ''; | |
| bars[1].style.opacity = ''; | |
| bars[2].style.transform = ''; | |
| bars[2].style.width = ''; | |
| } | |
| }); | |
| function openProductPage(product) { | |
| document.getElementById('product-page').classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| // Populate product data | |
| document.getElementById('product-title').textContent = product.title; | |
| document.getElementById('product-price').textContent = product.price; | |
| document.getElementById('product-description').textContent = product.description; | |
| document.getElementById('product-main-image').src = product.image; | |
| // Initialize selection controls | |
| initializeQuantityControls(); | |
| } | |
| function closeProductPage() { | |
| document.getElementById('product-page').classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| function closeQuantityWarning() { | |
| document.getElementById('quantity-warning').classList.add('hidden'); | |
| } | |
| function showQuantityWarning() { | |
| const warningDiv = document.getElementById('quantity-warning'); | |
| warningDiv.classList.remove('hidden'); | |
| // Auto-hide after 5 seconds | |
| setTimeout(() => { | |
| warningDiv.classList.add('hidden'); | |
| }, 5000); | |
| } | |
| // Product voltage data (simulated) - all set to high voltage (100%) | |
| const productVoltage = { | |
| 'CAMISETA OVERSIZED VOLT': 100, | |
| 'MOLETON OVERSIZED VOLT': 75, | |
| 'CAMISETA OVERSIZED VOLT': 50, | |
| 'CAMISETA OVERSIZED VOLT': 75 | |
| }; | |
| // Update voltage meters | |
| function updateVoltageMeters() { | |
| document.querySelectorAll('.product-card').forEach(card => { | |
| const title = card.querySelector('h3').textContent; | |
| const voltage = productVoltage[title] || 0; | |
| const meter = card.querySelector('.voltage-fill'); | |
| meter.style.width = `${voltage}%`; | |
| meter.className = 'voltage-fill'; | |
| const boltIcon = card.querySelector('.fa-bolt'); | |
| if (voltage === 0) { | |
| meter.classList.add('low'); | |
| boltIcon.classList.add('low'); | |
| } else if (voltage < 75) { | |
| meter.classList.add('medium'); | |
| boltIcon.classList.add('medium'); | |
| } else { | |
| meter.classList.add('high'); | |
| boltIcon.classList.add('high'); | |
| } | |
| }); | |
| } | |
| // Shopping cart functionality | |
| let cart = []; | |
| function openCart(e) { | |
| e.preventDefault(); | |
| document.getElementById('cart-sidebar').style.width = '85%'; | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function closeCart() { | |
| document.getElementById('cart-sidebar').style.width = '0'; | |
| document.body.style.overflow = 'auto'; | |
| } | |
| function showNotification(message, color = 'gray') { | |
| const toast = document.getElementById('notification-toast'); | |
| const messageEl = document.getElementById('notification-message'); | |
| messageEl.textContent = message; | |
| toast.style.backgroundColor = color === 'gray' ? '#4B5563' : '#374151'; | |
| toast.classList.remove('opacity-0'); | |
| toast.classList.add('opacity-100'); | |
| setTimeout(() => { | |
| toast.classList.remove('opacity-100'); | |
| toast.classList.add('opacity-0'); | |
| }, 3000); | |
| } | |
| function addToCart(product, color, size, quantity) { | |
| // Check if color and size are selected | |
| if (!color || !size) { | |
| let message = ''; | |
| if (!color && !size) { | |
| message = 'Por favor, selecione a cor e o tamanho'; | |
| } else if (!color) { | |
| message = 'Por favor, selecione a cor'; | |
| } else { | |
| message = 'Por favor, selecione o tamanho'; | |
| } | |
| showNotification(message, 'gray'); | |
| return false; | |
| } | |
| // Add item to cart | |
| const price = parseFloat(product.price.replace('R$ ', '').replace(',', '.')); | |
| const total = price * quantity; | |
| const cartItem = { | |
| id: Date.now(), | |
| product: product.title, | |
| image: product.image, | |
| price: price, | |
| color: color, | |
| size: size, | |
| quantity: quantity, | |
| total: total | |
| }; | |
| cart.push(cartItem); | |
| updateCartDisplay(); | |
| showNotification('Item adicionado ao carrinho!'); | |
| return true; | |
| } | |
| function updateCartDisplay() { | |
| const cartItemsEl = document.getElementById('cart-items'); | |
| const emptyCartEl = document.getElementById('empty-cart-message'); | |
| const cartSummaryEl = document.getElementById('cart-summary'); | |
| const cartCountEl = document.getElementById('cart-count'); | |
| if (cart.length === 0) { | |
| emptyCartEl.classList.remove('hidden'); | |
| cartSummaryEl.classList.add('hidden'); | |
| cartCountEl.textContent = '0'; | |
| return; | |
| } | |
| emptyCartEl.classList.add('hidden'); | |
| cartSummaryEl.classList.remove('hidden'); | |
| cartCountEl.textContent = cart.length.toString(); | |
| // Clear existing items | |
| cartItemsEl.innerHTML = ''; | |
| let subtotal = 0; | |
| // Add each cart item | |
| cart.forEach(item => { | |
| subtotal += item.total; | |
| const itemEl = document.createElement('div'); | |
| itemEl.className = 'flex border-b border-gray-200 pb-4'; | |
| itemEl.innerHTML = ` | |
| <div class="w-24 h-24 bg-gray-100 rounded-lg overflow-hidden mr-4"> | |
| <img src="${item.image}" alt="${item.product}" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium">${item.product}</h3> | |
| <p class="text-sm text-gray-500">${item.color} / ${item.size}</p> | |
| <div class="flex justify-between items-center mt-2"> | |
| <div class="flex items-center"> | |
| <button onclick="updateQuantity(${item.id}, -1)" class="bg-gray-200 px-2 py-1 rounded-l">-</button> | |
| <span class="px-2">${item.quantity}</span> | |
| <button onclick="updateQuantity(${item.id}, 1)" class="bg-gray-200 px-2 py-1 rounded-r">+</button> | |
| </div> | |
| <span class="font-medium">R$ ${item.total.toFixed(2).replace('.', ',')}</span> | |
| </div> | |
| </div> | |
| <button onclick="removeFromCart(${item.id})" class="ml-4 text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| `; | |
| cartItemsEl.appendChild(itemEl); | |
| }); | |
| // Update totals | |
| document.getElementById('cart-subtotal').textContent = `R$ ${subtotal.toFixed(2).replace('.', ',')}`; | |
| document.getElementById('cart-total').textContent = `R$ ${subtotal.toFixed(2).replace('.', ',')}`; | |
| } | |
| function updateQuantity(itemId, change) { | |
| const itemIndex = cart.findIndex(item => item.id === itemId); | |
| if (itemIndex === -1) return; | |
| const newQuantity = cart[itemIndex].quantity + change; | |
| if (newQuantity < 1) return; | |
| cart[itemIndex].quantity = newQuantity; | |
| cart[itemIndex].total = cart[itemIndex].price * newQuantity; | |
| updateCartDisplay(); | |
| } | |
| function removeFromCart(itemId) { | |
| cart = cart.filter(item => item.id !== itemId); | |
| updateCartDisplay(); | |
| } | |
| function handleBuyClick(e) { | |
| e.preventDefault(); | |
| const color = document.querySelector('.color-option.selected')?.dataset.color; | |
| const size = document.querySelector('.size-option.selected')?.dataset.size; | |
| const quantity = parseInt(document.getElementById('quantity').value); | |
| const product = { | |
| title: document.getElementById('product-title').textContent, | |
| price: document.getElementById('product-price').textContent, | |
| image: document.getElementById('product-main-image').src | |
| }; | |
| if (!color || !size) { | |
| let message = ''; | |
| if (!color && !size) { | |
| message = 'Por favor, selecione a cor e o tamanho'; | |
| } else if (!color) { | |
| message = 'Por favor, selecione a cor'; | |
| } else { | |
| message = 'Por favor, selecione o tamanho'; | |
| } | |
| showNotification(message, 'gray'); | |
| return; | |
| } | |
| if (addToCart(product, color, size, quantity)) { | |
| openCart(e); | |
| } | |
| } | |
| function handleAddToCartClick(e) { | |
| e.preventDefault(); | |
| const color = document.querySelector('.color-option.selected')?.dataset.color; | |
| const size = document.querySelector('.size-option.selected')?.dataset.size; | |
| const quantity = parseInt(document.getElementById('quantity').value); | |
| const product = { | |
| title: document.getElementById('product-title').textContent, | |
| price: document.getElementById('product-price').textContent, | |
| image: document.getElementById('product-main-image').src | |
| }; | |
| if (!color || !size) { | |
| let message = ''; | |
| if (!color && !size) { | |
| message = 'Por favor, selecione a cor e o tamanho'; | |
| } else if (!color) { | |
| message = 'Por favor, selecione a cor'; | |
| } else { | |
| message = 'Por favor, selecione o tamanho'; | |
| } | |
| showNotification(message, 'gray'); | |
| return; | |
| } | |
| addToCart(product, color, size, quantity); | |
| } | |
| // Initialize voltage meters | |
| updateVoltageMeters(); | |
| // Show buy button when clicking product image | |
| function showBuyButton(imgElement) { | |
| const container = imgElement.closest('.relative'); | |
| const buyButton = container.querySelector('.buy-button-container'); | |
| buyButton.classList.toggle('opacity-0'); | |
| buyButton.classList.toggle('opacity-100'); | |
| } | |
| // Open product page from hero banner | |
| function openProductPageFromHero(event, button) { | |
| event.preventDefault(); | |
| const product = { | |
| title: "CAMISETA OVERSIZED VOLT", | |
| price: "R$ 129,90", | |
| description: 'Camiseta oversized premium com estampa exclusiva VOLT. Modelagem confortável e moderna, perfeita para looks despojados.', | |
| image: "https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=776&q=80" | |
| }; | |
| openProductPage(product); | |
| } | |
| // Open product page from buy button | |
| function openProductPageFromCard(event, button) { | |
| event.preventDefault(); | |
| event.stopPropagation(); | |
| const productCard = button.closest('.product-card'); | |
| const product = { | |
| title: productCard.querySelector('h3').textContent, | |
| price: productCard.querySelector('.font-bold:last-child').textContent, | |
| description: 'Camiseta oversized premium com estampa exclusiva VOLT. Modelagem confortável e moderna, perfeita para looks despojados.', | |
| image: productCard.querySelector('.product-image').src | |
| }; | |
| openProductPage(product); | |
| initializeQuantityControls(); | |
| } | |
| // Initialize product selection controls | |
| function initializeQuantityControls() { | |
| // Color selection | |
| const colorOptions = document.querySelectorAll('.color-option'); | |
| colorOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| // Remove selected class from all color options | |
| colorOptions.forEach(opt => { | |
| opt.classList.remove('selected-color'); | |
| }); | |
| // Add selected class to clicked option | |
| this.classList.add('selected-color'); | |
| // Store selected color | |
| document.getElementById('product-page').dataset.selectedColor = this.dataset.color; | |
| }); | |
| }); | |
| // Set default selected color if none selected | |
| if (!document.getElementById('product-page').dataset.selectedColor) { | |
| document.getElementById('product-page').dataset.selectedColor = 'black'; | |
| document.querySelector('.color-option[data-color="black"]').classList.add('selected-color'); | |
| } else { | |
| const selectedColor = document.getElementById('product-page').dataset.selectedColor; | |
| document.querySelector(`.color-option[data-color="${selectedColor}"]`).classList.add('selected-color'); | |
| } | |
| // Size selection | |
| const sizeOptions = document.querySelectorAll('.size-option'); | |
| sizeOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| // Remove selected class from all size options | |
| sizeOptions.forEach(opt => { | |
| opt.classList.remove('selected-size'); | |
| }); | |
| // Add selected class to clicked option | |
| this.classList.add('selected-size'); | |
| // Store selected size | |
| document.getElementById('product-page').dataset.selectedSize = this.dataset.size; | |
| }); | |
| }); | |
| // Initialize selected size (default to M if none selected) | |
| const selectedSize = document.getElementById('product-page').dataset.selectedSize || 'M'; | |
| document.querySelector(`.size-option[data-size="${selectedSize}"]`).classList.add('selected-size'); | |
| const decreaseBtn = document.getElementById('decrease-qty'); | |
| const increaseBtn = document.getElementById('increase-qty'); | |
| const quantityInput = document.getElementById('quantity'); | |
| const warningDiv = document.getElementById('quantity-warning'); | |
| // Button controls | |
| decreaseBtn.addEventListener('click', () => { | |
| let quantity = parseInt(quantityInput.value); | |
| if (isNaN(quantity)) quantity = 1; | |
| if (quantity > 1) { | |
| quantityInput.value = quantity - 1; | |
| } | |
| }); | |
| increaseBtn.addEventListener('click', () => { | |
| let quantity = parseInt(quantityInput.value); | |
| if (isNaN(quantity)) quantity = 0; | |
| if (quantity < 100) { | |
| quantityInput.value = quantity + 1; | |
| // Show warning when reaching 100 | |
| if (quantity + 1 === 100) { | |
| showQuantityWarning(); | |
| } | |
| } else { | |
| showQuantityWarning(); | |
| } | |
| }); | |
| // Input validation | |
| quantityInput.addEventListener('input', () => { | |
| let quantity = parseInt(quantityInput.value); | |
| if (isNaN(quantity)) { | |
| quantityInput.value = 1; | |
| return; | |
| } | |
| if (quantity > 100) { | |
| quantityInput.value = 100; | |
| showQuantityWarning(); | |
| } else if (quantity < 1) { | |
| quantityInput.value = 1; | |
| } | |
| // Show warning if quantity is exactly 100 | |
| if (quantity === 100) { | |
| showQuantityWarning(); | |
| } | |
| }); | |
| // Also validate on blur in case user typed invalid value | |
| quantityInput.addEventListener('blur', () => { | |
| let quantity = parseInt(quantityInput.value); | |
| if (isNaN(quantity) || quantity < 1) { | |
| quantityInput.value = 1; | |
| } else if (quantity > 100) { | |
| quantityInput.value = 100; | |
| showQuantityWarning(); | |
| } | |
| }); | |
| let warningTimer; | |
| function showQuantityWarning() { | |
| // Clear any existing timer | |
| if (warningTimer) { | |
| clearInterval(warningTimer); | |
| } | |
| warningDiv.classList.remove('hidden'); | |
| let timeLeft = 7; | |
| const timer = document.getElementById('warning-timer'); | |
| timer.style.width = '100%'; | |
| warningTimer = setInterval(() => { | |
| timeLeft -= 0.1; | |
| timer.style.width = `${(timeLeft / 7) * 100}%`; | |
| if (timeLeft <= 0) { | |
| clearInterval(warningTimer); | |
| warningDiv.classList.add('hidden'); | |
| } | |
| }, 100); | |
| } | |
| } | |
| // Add click handlers to all "COMPRAR" buttons | |
| document.querySelectorAll('.product-card a[href="#"]').forEach(button => { | |
| button.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const productCard = this.closest('.product-card'); | |
| const product = { | |
| title: productCard.querySelector('h3').textContent, | |
| price: productCard.querySelector('.font-bold:last-child').textContent, | |
| description: 'Camiseta oversized premium com estampa exclusiva VOLT. Modelagem confortável e moderna, perfeita para looks despojados.', | |
| image: productCard.querySelector('.product-image').src | |
| }; | |
| openProductPage(product); | |
| // Initialize quantity controls | |
| const decreaseBtn = document.getElementById('decrease-qty'); | |
| const increaseBtn = document.getElementById('increase-qty'); | |
| const quantityInput = document.getElementById('quantity'); | |
| const warningDiv = document.getElementById('quantity-warning'); | |
| // Button controls | |
| decreaseBtn.addEventListener('click', () => { | |
| let quantity = parseInt(quantityInput.value); | |
| if (quantity > 1) { | |
| quantityInput.value = quantity - 1; | |
| } | |
| }); | |
| increaseBtn.addEventListener('click', () => { | |
| let quantity = parseInt(quantityInput.value); | |
| if (quantity < 100) { | |
| quantityInput.value = quantity + 1; | |
| // Show warning when reaching 100 | |
| if (quantity + 1 === 100) { | |
| showQuantityWarning(); | |
| } | |
| } else { | |
| showQuantityWarning(); | |
| } | |
| }); | |
| // Input validation | |
| quantityInput.addEventListener('input', () => { | |
| let quantity = parseInt(quantityInput.value); | |
| if (isNaN(quantity)) { | |
| return; // Allow empty input | |
| } | |
| if (quantity > 100) { | |
| quantityInput.value = 100; | |
| showQuantityWarning(); | |
| } else if (quantity < 1) { | |
| quantityInput.value = 1; | |
| } | |
| // Show warning if quantity is exactly 100 | |
| if (quantity === 100) { | |
| showQuantityWarning(); | |
| } | |
| }); | |
| let warningTimer; | |
| function showQuantityWarning() { | |
| // Clear any existing timer | |
| if (warningTimer) { | |
| clearInterval(warningTimer); | |
| } | |
| warningDiv.classList.remove('hidden'); | |
| let timeLeft = 7; | |
| const timer = document.getElementById('warning-timer'); | |
| timer.style.width = '100%'; | |
| warningTimer = setInterval(() => { | |
| timeLeft -= 0.1; | |
| timer.style.width = `${(timeLeft / 7) * 100}%`; | |
| if (timeLeft <= 0) { | |
| clearInterval(warningTimer); | |
| warningDiv.classList.add('hidden'); | |
| } | |
| }, 100); | |
| } | |
| }); | |
| }); | |
| </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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=Paolo2000p/volt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=Antoli121/good" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=Alex3566m/volts" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=Juanelgod5/volt-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=Matheusopro/g" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><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=Proplayer555/Volt-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |