| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Nike - Just Do It</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .hero-bg { |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1600269452121-1f5d14159f18?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); |
| background-size: cover; |
| background-position: center; |
| } |
| |
| .product-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
| } |
| |
| .cart-panel { |
| transition: all 0.3s ease; |
| transform: translateX(100%); |
| } |
| |
| .cart-panel.open { |
| transform: translateX(0); |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| .animate-fadeIn { |
| animation: fadeIn 0.5s ease-in-out; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50"> |
| |
| <div class="bg-black text-white text-center py-2 text-sm"> |
| Free shipping on orders over $50 | Members get free returns |
| </div> |
| |
| |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <img class="h-8 w-auto" src="https://www.nike.com/assets/experience/2023/logo-primary-white/static/current/nike-logo-white.svg" alt="Nike"> |
| </div> |
| <div class="hidden md:ml-8 md:flex md:space-x-8"> |
| <a href="#" class="border-transparent text-gray-900 hover:text-gray-600 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">New & Featured</a> |
| <a href="#" class="border-transparent text-gray-900 hover:text-gray-600 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Men</a> |
| <a href="#" class="border-transparent text-gray-900 hover:text-gray-600 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Women</a> |
| <a href="#" class="border-transparent text-gray-900 hover:text-gray-600 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Kids</a> |
| <a href="#" class="border-transparent text-gray-900 hover:text-gray-600 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Sale</a> |
| <a href="#" class="border-transparent text-gray-900 hover:text-gray-600 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">SNKRS</a> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="hidden md:ml-4 md:flex md:flex-shrink-0 md:items-center"> |
| <div class="relative mx-4"> |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
| <i class="fas fa-search text-gray-400"></i> |
| </div> |
| <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-black focus:border-black sm:text-sm" placeholder="Search"> |
| </div> |
| <a href="#" class="ml-4 text-gray-900 hover:text-gray-600"> |
| <i class="far fa-heart text-xl"></i> |
| </a> |
| <button onclick="toggleCart()" class="ml-4 text-gray-900 hover:text-gray-600 relative"> |
| <i class="fas fa-shopping-bag text-xl"></i> |
| <span id="cart-count" class="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">0</span> |
| </button> |
| </div> |
| <div class="-mr-2 flex items-center md:hidden"> |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-black" aria-controls="mobile-menu" aria-expanded="false"> |
| <span class="sr-only">Open main menu</span> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </nav> |
| |
| |
| <div class="hero-bg h-96 md:h-screen/2 flex items-center justify-center text-white"> |
| <div class="text-center px-4"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-4">AIR MAX PULSE</h1> |
| <p class="text-lg md:text-xl mb-8">Inspired by the energy of London's music scene</p> |
| <button class="bg-white text-black font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition duration-300"> |
| Shop Now |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
| <h2 class="text-2xl font-bold mb-8">Shop by Category</h2> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <div class="relative group overflow-hidden rounded-lg"> |
| <img src="https://images.unsplash.com/photo-1600269452121-1f5d14159f18?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Men's Shoes" class="w-full h-64 object-cover group-hover:scale-105 transition duration-300"> |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
| <h3 class="text-white text-xl font-bold">Men's Shoes</h3> |
| </div> |
| </div> |
| <div class="relative group overflow-hidden rounded-lg"> |
| <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Women's Shoes" class="w-full h-64 object-cover group-hover:scale-105 transition duration-300"> |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
| <h3 class="text-white text-xl font-bold">Women's Shoes</h3> |
| </div> |
| </div> |
| <div class="relative group overflow-hidden rounded-lg"> |
| <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80" alt="Kids" class="w-full h-64 object-cover group-hover:scale-105 transition duration-300"> |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
| <h3 class="text-white text-xl font-bold">Kids</h3> |
| </div> |
| </div> |
| <div class="relative group overflow-hidden rounded-lg"> |
| <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1999&q=80" alt="Accessories" class="w-full h-64 object-cover group-hover:scale-105 transition duration-300"> |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> |
| <h3 class="text-white text-xl font-bold">Accessories</h3> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-100 py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <h2 class="text-2xl font-bold mb-8">New Arrivals</h2> |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> |
| |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1025&q=80" alt="Nike Air Max" class="w-full h-64 object-cover"> |
| <button class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md hover:bg-gray-100"> |
| <i class="far fa-heart text-xl"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-lg mb-1">Nike Air Max 270</h3> |
| <p class="text-gray-600 mb-2">Men's Shoes</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-lg">$150</span> |
| <button onclick="addToCart('Nike Air Max 270', 150)" class="bg-black text-white px-4 py-2 rounded-full text-sm hover:bg-gray-800 transition duration-300"> |
| Add to Cart |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1543508282-6319a3e2621f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1015&q=80" alt="Nike Air Force" class="w-full h-64 object-cover"> |
| <button class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md hover:bg-gray-100"> |
| <i class="far fa-heart text-xl"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-lg mb-1">Nike Air Force 1 '07</h3> |
| <p class="text-gray-600 mb-2">Women's Shoes</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-lg">$110</span> |
| <button onclick="addToCart('Nike Air Force 1 \'07', 110)" class="bg-black text-white px-4 py-2 rounded-full text-sm hover:bg-gray-800 transition duration-300"> |
| Add to Cart |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1600269452121-1f5d14159f18?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Nike Dunk Low" class="w-full h-64 object-cover"> |
| <button class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md hover:bg-gray-100"> |
| <i class="far fa-heart text-xl"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-lg mb-1">Nike Dunk Low Retro</h3> |
| <p class="text-gray-600 mb-2">Men's Shoes</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-lg">$120</span> |
| <button onclick="addToCart('Nike Dunk Low Retro', 120)" class="bg-black text-white px-4 py-2 rounded-full text-sm hover:bg-gray-800 transition duration-300"> |
| Add to Cart |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1600185365926-3a2ce3cdb89e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1025&q=80" alt="Nike Air Jordan" class="w-full h-64 object-cover"> |
| <button class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md hover:bg-gray-100"> |
| <i class="far fa-heart text-xl"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-lg mb-1">Air Jordan 1 Mid</h3> |
| <p class="text-gray-600 mb-2">Men's Shoes</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-lg">$125</span> |
| <button onclick="addToCart('Air Jordan 1 Mid', 125)" class="bg-black text-white px-4 py-2 rounded-full text-sm hover:bg-gray-800 transition duration-300"> |
| Add to Cart |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-black text-white py-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h2 class="text-3xl font-bold mb-6">BECOME A NIKE MEMBER</h2> |
| <p class="text-lg mb-8 max-w-2xl mx-auto">Create your Nike Member profile and get first access to the best products, inspiration and community.</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <button class="bg-white text-black font-bold py-3 px-8 rounded-full hover:bg-gray-200 transition duration-300"> |
| Join Us |
| </button> |
| <button class="bg-transparent border border-white text-white font-bold py-3 px-8 rounded-full hover:bg-gray-900 transition duration-300"> |
| Sign In |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
| <h2 class="text-2xl font-bold mb-8">Trending Now</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div class="bg-gray-100 rounded-lg p-8 flex flex-col md:flex-row items-center"> |
| <img src="https://images.unsplash.com/photo-1600269452121-1f5d14159f18?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Trending Product" class="w-full md:w-1/2 h-64 object-contain mb-6 md:mb-0 md:mr-6"> |
| <div> |
| <h3 class="text-xl font-bold mb-2">Nike Air Max Pulse</h3> |
| <p class="text-gray-600 mb-4">The radiance lives on in the Nike Air Max Pulse. Keeping the iconic visible Air unit that shook up the running world, it adds fresh innovations like a super-comfortable collar and super springy foam.</p> |
| <button class="bg-black text-white px-6 py-3 rounded-full hover:bg-gray-800 transition duration-300"> |
| Shop Now |
| </button> |
| </div> |
| </div> |
| <div class="bg-gray-100 rounded-lg p-8 flex flex-col md:flex-row items-center"> |
| <img src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1025&q=80" alt="Trending Product" class="w-full md:w-1/2 h-64 object-contain mb-6 md:mb-0 md:mr-6"> |
| <div> |
| <h3 class="text-xl font-bold mb-2">Nike Air Max 270</h3> |
| <p class="text-gray-600 mb-4">The Nike Air Max 270 delivers the brand's biggest heel Air unit yet for a sensation unlike any other. The design draws inspiration from Air Max icons, showcasing Nike's greatest innovation with its large window and fresh array of colors.</p> |
| <button class="bg-black text-white px-6 py-3 rounded-full hover:bg-gray-800 transition duration-300"> |
| Shop Now |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <footer class="bg-gray-100 text-gray-700"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="font-bold text-lg mb-4">Products</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-gray-900">All Products</a></li> |
| <li><a href="#" class="hover:text-gray-900">Featured</a></li> |
| <li><a href="#" class="hover:text-gray-900">New Arrivals</a></li> |
| <li><a href="#" class="hover:text-gray-900">Sale</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-4">Support</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-gray-900">Customer Service</a></li> |
| <li><a href="#" class="hover:text-gray-900">FAQs</a></li> |
| <li><a href="#" class="hover:text-gray-900">Returns & Exchanges</a></li> |
| <li><a href="#" class="hover:text-gray-900">Shipping Info</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-4">Company</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-gray-900">About Us</a></li> |
| <li><a href="#" class="hover:text-gray-900">Careers</a></li> |
| <li><a href="#" class="hover:text-gray-900">Sustainability</a></li> |
| <li><a href="#" class="hover:text-gray-900">News</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-4">Connect With Us</h3> |
| <div class="flex space-x-4 mb-4"> |
| <a href="#" class="text-2xl hover:text-gray-900"><i class="fab fa-facebook"></i></a> |
| <a href="#" class="text-2xl hover:text-gray-900"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-2xl hover:text-gray-900"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-2xl hover:text-gray-900"><i class="fab fa-youtube"></i></a> |
| </div> |
| <p class="text-sm">Sign up for emails and be the first to see new arrivals, special offers, and more.</p> |
| <div class="mt-4 flex"> |
| <input type="email" placeholder="Email Address" class="px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-black focus:border-black w-full"> |
| <button class="bg-black text-white px-4 py-2 rounded-r-md hover:bg-gray-800 transition duration-300"> |
| Sign Up |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-300 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <img class="h-8 w-auto" src="https://www.nike.com/assets/experience/2023/logo-primary-white/static/current/nike-logo-white.svg" alt="Nike"> |
| <span class="ml-2 text-sm">© 2023 Nike, Inc. All Rights Reserved</span> |
| </div> |
| <div class="flex space-x-4 text-sm"> |
| <a href="#" class="hover:text-gray-900">Guides</a> |
| <a href="#" class="hover:text-gray-900">Terms of Sale</a> |
| <a href="#" class="hover:text-gray-900">Terms of Use</a> |
| <a href="#" class="hover:text-gray-900">Privacy Policy</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
| |
| |
| <div id="cart-panel" class="cart-panel fixed inset-y-0 right-0 w-full md:w-1/3 bg-white shadow-xl z-50 overflow-y-auto"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-xl font-bold">Your Cart</h2> |
| <button onclick="toggleCart()" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times text-xl"></i> |
| </button> |
| </div> |
| |
| <div id="cart-items" class="space-y-4"> |
| |
| <div class="text-center py-8"> |
| <i class="fas fa-shopping-bag text-4xl text-gray-300 mb-4"></i> |
| <p class="text-gray-500">Your cart is empty</p> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-200 mt-6 pt-6"> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-600">Subtotal</span> |
| <span id="cart-subtotal" class="font-bold">$0.00</span> |
| </div> |
| <div class="flex justify-between mb-4"> |
| <span class="text-gray-600">Shipping</span> |
| <span class="font-bold">Free</span> |
| </div> |
| <div class="flex justify-between text-lg font-bold mb-6"> |
| <span>Total</span> |
| <span id="cart-total">$0.00</span> |
| </div> |
| <button class="w-full bg-black text-white py-3 rounded-full hover:bg-gray-800 transition duration-300"> |
| Checkout |
| </button> |
| <div class="mt-4 flex justify-center"> |
| <img src="https://www.nike.com/assets/experience/2023/payment-methods/static/current/payment-methods.svg" alt="Payment Methods" class="h-8"> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="overlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-40" onclick="toggleCart()"></div> |
| |
| <script> |
| |
| let cart = []; |
| |
| function toggleCart() { |
| const cartPanel = document.getElementById('cart-panel'); |
| const overlay = document.getElementById('overlay'); |
| |
| cartPanel.classList.toggle('open'); |
| overlay.classList.toggle('hidden'); |
| document.body.classList.toggle('overflow-hidden'); |
| } |
| |
| function addToCart(name, price) { |
| |
| const existingItem = cart.find(item => item.name === name); |
| |
| if (existingItem) { |
| existingItem.quantity += 1; |
| } else { |
| cart.push({ |
| name: name, |
| price: price, |
| quantity: 1 |
| }); |
| } |
| |
| updateCart(); |
| showAddedToCart(name); |
| } |
| |
| function updateCart() { |
| const cartItemsContainer = document.getElementById('cart-items'); |
| const cartCount = document.getElementById('cart-count'); |
| const cartSubtotal = document.getElementById('cart-subtotal'); |
| const cartTotal = document.getElementById('cart-total'); |
| |
| |
| const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); |
| cartCount.textContent = totalItems; |
| |
| |
| const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); |
| cartSubtotal.textContent = `$${subtotal.toFixed(2)}`; |
| cartTotal.textContent = `$${subtotal.toFixed(2)}`; |
| |
| |
| if (cart.length === 0) { |
| cartItemsContainer.innerHTML = ` |
| <div class="text-center py-8"> |
| <i class="fas fa-shopping-bag text-4xl text-gray-300 mb-4"></i> |
| <p class="text-gray-500">Your cart is empty</p> |
| </div> |
| `; |
| } else { |
| cartItemsContainer.innerHTML = cart.map(item => ` |
| <div class="flex justify-between items-center border-b border-gray-200 pb-4 animate-fadeIn"> |
| <div class="flex items-center"> |
| <img src="https://via.placeholder.com/80" alt="${item.name}" class="w-16 h-16 object-cover rounded mr-4"> |
| <div> |
| <h4 class="font-medium">${item.name}</h4> |
| <p class="text-gray-600 text-sm">$${item.price.toFixed(2)}</p> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <button onclick="updateQuantity('${item.name}', -1)" class="text-gray-500 hover:text-black px-2"> |
| <i class="fas fa-minus"></i> |
| </button> |
| <span class="mx-2">${item.quantity}</span> |
| <button onclick="updateQuantity('${item.name}', 1)" class="text-gray-500 hover:text-black px-2"> |
| <i class="fas fa-plus"></i> |
| </button> |
| <button onclick="removeFromCart('${item.name}')" class="ml-4 text-gray-500 hover:text-red-500"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </div> |
| </div> |
| `).join(''); |
| } |
| } |
| |
| function updateQuantity(name, change) { |
| const item = cart.find(item => item.name === name); |
| |
| if (item) { |
| item.quantity += change; |
| |
| if (item.quantity <= 0) { |
| cart = cart.filter(item => item.name !== name); |
| } |
| |
| updateCart(); |
| } |
| } |
| |
| function removeFromCart(name) { |
| cart = cart.filter(item => item.name !== name); |
| updateCart(); |
| } |
| |
| function showAddedToCart(name) { |
| |
| const notification = document.createElement('div'); |
| notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center animate-fadeIn'; |
| notification.innerHTML = ` |
| <i class="fas fa-check-circle mr-2"></i> |
| <span>Added ${name} to cart</span> |
| `; |
| |
| document.body.appendChild(notification); |
| |
| |
| setTimeout(() => { |
| notification.classList.remove('animate-fadeIn'); |
| notification.classList.add('animate-fadeOut'); |
| setTimeout(() => notification.remove(), 300); |
| }, 3000); |
| } |
| |
| |
| document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() { |
| |
| alert('Mobile menu would open here'); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=reaper56/nike" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
