| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NexusShop - Premium E-commerce</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> |
| |
| .product-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| |
| .cart-item-enter { |
| opacity: 0; |
| transform: translateX(20px); |
| } |
| .cart-item-enter-active { |
| opacity: 1; |
| transform: translateX(0); |
| transition: all 300ms ease-out; |
| } |
| .cart-item-exit { |
| opacity: 1; |
| } |
| .cart-item-exit-active { |
| opacity: 0; |
| transform: translateX(20px); |
| transition: all 300ms ease-in; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { |
| transform: scale(1); |
| } |
| 50% { |
| transform: scale(1.05); |
| } |
| } |
| .pulse-animation { |
| animation: pulse 1.5s infinite; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| |
| <header class="bg-white shadow-sm sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-bolt text-2xl text-indigo-600"></i> |
| <h1 class="text-xl font-bold text-gray-800">Nexus<span class="text-indigo-600">Shop</span></h1> |
| </div> |
| |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Home</a> |
| <a href="#products" class="text-gray-700 hover:text-indigo-600 font-medium">Shop</a> |
| <a href="#features" class="text-gray-700 hover:text-indigo-600 font-medium">Features</a> |
| <a href="#testimonials" class="text-gray-700 hover:text-indigo-600 font-medium">Reviews</a> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <button id="search-btn" class="p-2 text-gray-600 hover:text-indigo-600"> |
| <i class="fas fa-search"></i> |
| </button> |
| <button id="cart-btn" class="relative p-2 text-gray-600 hover:text-indigo-600"> |
| <i class="fas fa-shopping-cart"></i> |
| <span id="cart-count" class="absolute -top-1 -right-1 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> |
| </button> |
| <button class="md:hidden p-2 text-gray-600 hover:text-indigo-600" id="mobile-menu-btn"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t"> |
| <div class="container mx-auto px-4 py-2 flex flex-col space-y-2"> |
| <a href="#" class="py-2 text-gray-700 hover:text-indigo-600">Home</a> |
| <a href="#products" class="py-2 text-gray-700 hover:text-indigo-600">Shop</a> |
| <a href="#features" class="py-2 text-gray-700 hover:text-indigo-600">Features</a> |
| <a href="#testimonials" class="py-2 text-gray-700 hover:text-indigo-600">Reviews</a> |
| </div> |
| </div> |
| |
| |
| <div id="search-bar" class="hidden bg-white border-t"> |
| <div class="container mx-auto px-4 py-3"> |
| <div class="relative"> |
| <input type="text" placeholder="Search products..." class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <button class="absolute right-3 top-2 text-gray-500 hover:text-indigo-600"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white"> |
| <div class="container mx-auto px-4 py-16 md:py-24 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">Premium Tech for Your Digital Life</h2> |
| <p class="text-xl mb-6 opacity-90">Discover the latest gadgets and electronics at unbeatable prices with fast delivery and excellent support.</p> |
| <div class="flex space-x-4"> |
| <a href="#products" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">Shop Now</a> |
| <a href="#features" class="border border-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-indigo-600 transition duration-300">Learn More</a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Tech Products" class="rounded-xl shadow-2xl max-h-96 w-auto object-cover"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="features" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Why Choose NexusShop?</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition duration-300"> |
| <div class="bg-indigo-100 w-14 h-14 rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-truck text-indigo-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">Fast Delivery</h3> |
| <p class="text-gray-600">Get your products delivered within 2-3 business days with our premium shipping partners.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition duration-300"> |
| <div class="bg-indigo-100 w-14 h-14 rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-shield-alt text-indigo-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">Secure Payments</h3> |
| <p class="text-gray-600">Shop with confidence using our 256-bit encrypted payment gateway with multiple options.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition duration-300"> |
| <div class="bg-indigo-100 w-14 h-14 rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-headset text-indigo-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">24/7 Support</h3> |
| <p class="text-gray-600">Our customer support team is available round the clock to assist you with any queries.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="products" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="flex justify-between items-center mb-8"> |
| <h2 class="text-3xl font-bold text-gray-800">Featured Products</h2> |
| <div class="flex space-x-2"> |
| <button class="category-btn px-4 py-2 rounded-lg bg-indigo-600 text-white" data-category="all">All</button> |
| <button class="category-btn px-4 py-2 rounded-lg bg-white text-gray-700 hover:bg-gray-100" data-category="electronics">Electronics</button> |
| <button class="category-btn px-4 py-2 rounded-lg bg-white text-gray-700 hover:bg-gray-100" data-category="accessories">Accessories</button> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6" id="products-container"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="testimonials" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">What Our Customers Say</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
| <span class="text-indigo-600 font-bold">JD</span> |
| </div> |
| <div> |
| <h4 class="font-semibold">John Doe</h4> |
| <div class="flex text-yellow-400"> |
| <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="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600">"The delivery was incredibly fast and the product quality exceeded my expectations. Will definitely shop here again!"</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
| <span class="text-indigo-600 font-bold">AS</span> |
| </div> |
| <div> |
| <h4 class="font-semibold">Alice Smith</h4> |
| <div class="flex text-yellow-400"> |
| <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="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600">"Excellent customer service! They helped me choose the perfect laptop for my needs and the price was very competitive."</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
| <span class="text-indigo-600 font-bold">RJ</span> |
| </div> |
| <div> |
| <h4 class="font-semibold">Robert Johnson</h4> |
| <div class="flex text-yellow-400"> |
| <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="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600">"I've ordered multiple times from NexusShop and every experience has been flawless. Highly recommended for tech enthusiasts!"</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-indigo-600 text-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl font-bold mb-4">Stay Updated</h2> |
| <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">Subscribe to our newsletter for exclusive deals, new arrivals, and tech tips.</p> |
| |
| <div class="max-w-md mx-auto flex"> |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800"> |
| <button class="bg-indigo-800 px-6 py-3 rounded-r-lg font-medium hover:bg-indigo-900 transition duration-300">Subscribe</button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div id="cart-sidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-lg transform translate-x-full transition-transform duration-300 z-50 overflow-y-auto"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-xl font-bold text-gray-800">Your Cart</h3> |
| <button id="close-cart" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div id="cart-items" class="space-y-4"> |
| |
| <div class="text-center py-8 text-gray-500" id="empty-cart-message"> |
| <i class="fas fa-shopping-cart text-4xl mb-4 opacity-30"></i> |
| <p>Your cart is empty</p> |
| </div> |
| </div> |
| |
| <div id="cart-summary" class="border-t mt-6 pt-6 hidden"> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-600">Subtotal</span> |
| <span id="cart-subtotal" class="font-medium">$0.00</span> |
| </div> |
| <div class="flex justify-between mb-4"> |
| <span class="text-gray-600">Shipping</span> |
| <span class="font-medium">Free</span> |
| </div> |
| <div class="flex justify-between text-lg font-bold mb-6"> |
| <span>Total</span> |
| <span id="cart-total" class="text-indigo-600">$0.00</span> |
| </div> |
| <button id="checkout-btn" class="w-full bg-indigo-600 text-white py-3 rounded-lg font-medium hover:bg-indigo-700 transition duration-300"> |
| Proceed to Checkout |
| </button> |
| </div> |
| </div> |
| </div> |
| <div id="cart-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div> |
|
|
| |
| <footer class="bg-gray-800 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> |
| <div class="flex items-center space-x-2 mb-4"> |
| <i class="fas fa-bolt text-2xl text-indigo-400"></i> |
| <h3 class="text-xl font-bold">Nexus<span class="text-indigo-400">Shop</span></h3> |
| </div> |
| <p class="text-gray-400">Premium e-commerce platform for all your tech needs. Quality products, fast delivery, and excellent support.</p> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Shop</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">All Products</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Featured</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">New Arrivals</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Deals</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Support</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Shipping Policy</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Returns & Refunds</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Connect</h4> |
| <div class="flex space-x-4 mb-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-indigo-600"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-indigo-600"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-indigo-600"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-indigo-600"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| <p class="text-gray-400">support@nexusshop.com</p> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 NexusShop. All rights reserved.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a> |
| <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="quick-view-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> |
| <div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto"> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-6"> |
| <h3 id="quick-view-title" class="text-2xl font-bold text-gray-800">Product Name</h3> |
| <button id="close-quick-view" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="flex flex-col md:flex-row gap-8"> |
| <div class="md:w-1/2"> |
| <img id="quick-view-image" src="" alt="Product" class="w-full rounded-lg object-cover"> |
| </div> |
| |
| <div class="md:w-1/2"> |
| <div class="flex items-center mb-4"> |
| <div class="flex text-yellow-400 mr-2"> |
| <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="fas fa-star-half-alt"></i> |
| </div> |
| <span class="text-gray-600">(24 reviews)</span> |
| </div> |
| |
| <p id="quick-view-price" class="text-2xl font-bold text-indigo-600 mb-4">$0.00</p> |
| |
| <p id="quick-view-description" class="text-gray-600 mb-6">Product description goes here with all the details about features and specifications.</p> |
| |
| <div class="flex items-center mb-6"> |
| <span class="text-gray-700 mr-4">Quantity:</span> |
| <div class="flex items-center border rounded-lg"> |
| <button class="quantity-decrease px-3 py-1 text-gray-600 hover:bg-gray-100">-</button> |
| <span class="quantity-value px-4 py-1 border-x">1</span> |
| <button class="quantity-increase px-3 py-1 text-gray-600 hover:bg-gray-100">+</button> |
| </div> |
| </div> |
| |
| <button id="add-to-cart-quick" class="w-full bg-indigo-600 text-white py-3 rounded-lg font-medium hover:bg-indigo-700 transition duration-300 mb-4"> |
| Add to Cart |
| </button> |
| |
| <div class="flex items-center text-gray-600"> |
| <i class="fas fa-truck mr-2"></i> |
| <span>Free shipping on orders over $50</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const products = [ |
| { |
| id: 1, |
| name: "Wireless Bluetooth Headphones", |
| price: 89.99, |
| image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", |
| category: "electronics", |
| description: "Premium wireless headphones with noise cancellation and 30-hour battery life." |
| }, |
| { |
| id: 2, |
| name: "Smart Watch Pro", |
| price: 199.99, |
| image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1399&q=80", |
| category: "electronics", |
| description: "Advanced smartwatch with health monitoring, GPS, and customizable watch faces." |
| }, |
| { |
| id: 3, |
| name: "Laptop Backpack", |
| price: 49.99, |
| image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80", |
| category: "accessories", |
| description: "Durable and stylish backpack with padded laptop compartment and USB charging port." |
| }, |
| { |
| id: 4, |
| name: "4K Ultra HD Smart TV", |
| price: 799.99, |
| image: "https://images.unsplash.com/photo-1593305841991-05e297cb997d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", |
| category: "electronics", |
| description: "65-inch 4K UHD Smart TV with HDR and built-in streaming apps." |
| }, |
| { |
| id: 5, |
| name: "Wireless Charging Pad", |
| price: 29.99, |
| image: "https://images.unsplash.com/photo-1583394838336-acd977736f90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80", |
| category: "accessories", |
| description: "Fast wireless charging pad compatible with Qi-enabled devices." |
| }, |
| { |
| id: 6, |
| name: "Bluetooth Speaker", |
| price: 59.99, |
| image: "https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80", |
| category: "electronics", |
| description: "Portable Bluetooth speaker with 20W output and 15-hour battery life." |
| }, |
| { |
| id: 7, |
| name: "Phone Mount for Car", |
| price: 19.99, |
| image: "https://images.unsplash.com/photo-1604977042-6f117a8a9b09?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80", |
| category: "accessories", |
| description: "Adjustable car phone mount with strong suction cup and 360° rotation." |
| }, |
| { |
| id: 8, |
| name: "Gaming Keyboard", |
| price: 79.99, |
| image: "https://images.unsplash.com/photo-1611381079428-a6d7a73237ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", |
| category: "electronics", |
| description: "Mechanical gaming keyboard with RGB backlighting and anti-ghosting." |
| } |
| ]; |
| |
| |
| let cart = []; |
| |
| |
| const productsContainer = document.getElementById('products-container'); |
| const cartSidebar = document.getElementById('cart-sidebar'); |
| const cartOverlay = document.getElementById('cart-overlay'); |
| const cartBtn = document.getElementById('cart-btn'); |
| const closeCartBtn = document.getElementById('close-cart'); |
| const cartItemsContainer = document.getElementById('cart-items'); |
| const cartCount = document.getElementById('cart-count'); |
| const emptyCartMessage = document.getElementById('empty-cart-message'); |
| const cartSummary = document.getElementById('cart-summary'); |
| const cartSubtotal = document.getElementById('cart-subtotal'); |
| const cartTotal = document.getElementById('cart-total'); |
| const checkoutBtn = document.getElementById('checkout-btn'); |
| const categoryBtns = document.querySelectorAll('.category-btn'); |
| const quickViewModal = document.getElementById('quick-view-modal'); |
| const closeQuickViewBtn = document.getElementById('close-quick-view'); |
| const searchBtn = document.getElementById('search-btn'); |
| const searchBar = document.getElementById('search-bar'); |
| const mobileMenuBtn = document.getElementById('mobile-menu-btn'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| renderProducts(products); |
| setupEventListeners(); |
| }); |
| |
| |
| function renderProducts(productsToRender) { |
| productsContainer.innerHTML = ''; |
| |
| productsToRender.forEach(product => { |
| const productCard = document.createElement('div'); |
| productCard.className = 'product-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300'; |
| productCard.innerHTML = ` |
| <div class="relative"> |
| <img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover"> |
| <button class="quick-view-btn absolute top-2 right-2 bg-white p-2 rounded-full shadow-md hover:bg-indigo-100 transition duration-200" data-id="${product.id}"> |
| <i class="fas fa-eye text-gray-700"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="font-semibold text-gray-800">${product.name}</h3> |
| <span class="text-indigo-600 font-bold">$${product.price.toFixed(2)}</span> |
| </div> |
| <p class="text-sm text-gray-600 mb-4">${product.description.substring(0, 60)}...</p> |
| <button class="add-to-cart-btn w-full bg-indigo-600 text-white py-2 rounded-lg font-medium hover:bg-indigo-700 transition duration-300" data-id="${product.id}"> |
| Add to Cart |
| </button> |
| </div> |
| `; |
| productsContainer.appendChild(productCard); |
| }); |
| |
| |
| document.querySelectorAll('.add-to-cart-btn').forEach(btn => { |
| btn.addEventListener('click', (e) => { |
| const productId = parseInt(e.target.getAttribute('data-id')); |
| addToCart(productId); |
| }); |
| }); |
| |
| document.querySelectorAll('.quick-view-btn').forEach(btn => { |
| btn.addEventListener('click', (e) => { |
| const productId = parseInt(e.target.closest('button').getAttribute('data-id')); |
| showQuickView(productId); |
| }); |
| }); |
| } |
| |
| |
| function setupEventListeners() { |
| |
| cartBtn.addEventListener('click', toggleCart); |
| closeCartBtn.addEventListener('click', toggleCart); |
| cartOverlay.addEventListener('click', toggleCart); |
| |
| |
| categoryBtns.forEach(btn => { |
| btn.addEventListener('click', (e) => { |
| const category = e.target.getAttribute('data-category'); |
| filterProducts(category); |
| |
| |
| categoryBtns.forEach(b => b.classList.remove('bg-indigo-600', 'text-white')); |
| categoryBtns.forEach(b => b.classList.add('bg-white', 'text-gray-700')); |
| |
| e.target.classList.remove('bg-white', 'text-gray-700'); |
| e.target.classList.add('bg-indigo-600', 'text-white'); |
| }); |
| }); |
| |
| |
| closeQuickViewBtn.addEventListener('click', () => { |
| quickViewModal.classList.add('hidden'); |
| }); |
| |
| |
| searchBtn.addEventListener('click', () => { |
| searchBar.classList.toggle('hidden'); |
| }); |
| |
| |
| mobileMenuBtn.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| checkoutBtn.addEventListener('click', () => { |
| alert('Checkout functionality would be implemented here!'); |
| |
| }); |
| } |
| |
| |
| function filterProducts(category) { |
| if (category === 'all') { |
| renderProducts(products); |
| } else { |
| const filteredProducts = products.filter(product => product.category === category); |
| renderProducts(filteredProducts); |
| } |
| } |
| |
| |
| function addToCart(productId) { |
| const product = products.find(p => p.id === productId); |
| |
| |
| const existingItem = cart.find(item => item.id === productId); |
| |
| if (existingItem) { |
| existingItem.quantity += 1; |
| } else { |
| cart.push({ |
| ...product, |
| quantity: 1 |
| }); |
| } |
| |
| updateCart(); |
| |
| |
| const cartIcon = cartBtn.querySelector('i'); |
| cartIcon.classList.add('pulse-animation'); |
| setTimeout(() => { |
| cartIcon.classList.remove('pulse-animation'); |
| }, 1500); |
| } |
| |
| |
| function updateCart() { |
| |
| const totalItems = cart.reduce((total, item) => total + item.quantity, 0); |
| cartCount.textContent = totalItems; |
| |
| |
| cartItemsContainer.innerHTML = ''; |
| |
| if (cart.length === 0) { |
| emptyCartMessage.classList.remove('hidden'); |
| cartSummary.classList.add('hidden'); |
| } else { |
| emptyCartMessage.classList.add('hidden'); |
| cartSummary.classList.remove('hidden'); |
| |
| let subtotal = 0; |
| |
| cart.forEach(item => { |
| const itemTotal = item.price * item.quantity; |
| subtotal += itemTotal; |
| |
| const cartItem = document.createElement('div'); |
| cartItem.className = 'cart-item flex items-center border-b pb-4'; |
| cartItem.innerHTML = ` |
| <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-4"> |
| <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover"> |
| </div> |
| <div class="flex-grow"> |
| <h4 class="font-medium text-gray-800">${item.name}</h4> |
| <div class="flex justify-between items-center mt-1"> |
| <div class="flex items-center border rounded-lg"> |
| <button class="decrease-quantity px-2 py-1 text-gray-600 hover:bg-gray-100" data-id="${item.id}">-</button> |
| <span class="quantity px-3 py-1 border-x">${item.quantity}</span> |
| <button class="increase-quantity px-2 py-1 text-gray-600 hover:bg-gray-100" data-id="${item.id}">+</button> |
| </div> |
| <span class="font-medium">$${itemTotal.toFixed(2)}</span> |
| </div> |
| </div> |
| <button class="remove-item ml-4 text-gray-500 hover:text-red-500" data-id="${item.id}"> |
| <i class="fas fa-times"></i> |
| </button> |
| `; |
| cartItemsContainer.appendChild(cartItem); |
| }); |
| |
| |
| cartSubtotal.textContent = `$${subtotal.toFixed(2)}`; |
| cartTotal.textContent = `$${subtotal.toFixed(2)}`; |
| |
| |
| document.querySelectorAll('.increase-quantity').forEach(btn => { |
| btn.addEventListener('click', (e) => { |
| const id = parseInt(e.target.getAttribute('data-id')); |
| updateCartItemQuantity(id, 1); |
| }); |
| }); |
| |
| document.querySelectorAll('.decrease-quantity').forEach(btn => { |
| btn.addEventListener('click', (e) => { |
| const id = parseInt(e.target.getAttribute('data-id')); |
| updateCartItemQuantity(id, -1); |
| }); |
| }); |
| |
| document.querySelectorAll('.remove-item').forEach(btn => { |
| btn.addEventListener('click', (e) => { |
| const id = parseInt(e.target.closest('button').getAttribute('data-id')); |
| removeFromCart(id); |
| }); |
| }); |
| } |
| } |
| |
| |
| function updateCartItemQuantity(productId, change) { |
| const item = cart.find(item => item.id === productId); |
| |
| if (item) { |
| item.quantity += change; |
| |
| |
| if (item.quantity <= 0) { |
| cart = cart.filter(item => item.id !== productId); |
| } |
| |
| updateCart(); |
| } |
| } |
| |
| |
| function removeFromCart(productId) { |
| cart = cart.filter(item => item.id !== productId); |
| updateCart(); |
| } |
| |
| |
| function toggleCart() { |
| cartSidebar.classList.toggle('translate-x-full'); |
| cartOverlay.classList.toggle('hidden'); |
| |
| |
| if (cartOverlay.classList.contains('hidden')) { |
| document.body.style.overflow = 'auto'; |
| } else { |
| document.body.style.overflow = 'hidden'; |
| } |
| } |
| |
| |
| function showQuickView(productId) { |
| const product = products.find(p => p.id === productId); |
| |
| if (product) { |
| document.getElementById('quick-view-title').textContent = product.name; |
| document.getElementById('quick-view-image').src = product.image; |
| document.getElementById('quick-view-price').textContent = `$${product.price.toFixed(2)}`; |
| document.getElementById('quick-view-description').textContent = product.description; |
| |
| |
| const quantityValue = document.querySelector('.quantity-value'); |
| const decreaseBtn = document.querySelector('.quantity-decrease'); |
| const increaseBtn = document.querySelector('.quantity-increase'); |
| |
| let quantity = 1; |
| quantityValue.textContent = quantity; |
| |
| decreaseBtn.addEventListener('click', () => { |
| if (quantity > 1) { |
| quantity--; |
| quantityValue.textContent = quantity; |
| } |
| }); |
| |
| increaseBtn.addEventListener('click', () => { |
| quantity++; |
| quantityValue.textContent = quantity; |
| }); |
| |
| |
| const addToCartBtn = document.getElementById('add-to-cart-quick'); |
| addToCartBtn.onclick = () => { |
| for (let i = 0; i < quantity; i++) { |
| addToCart(productId); |
| } |
| quickViewModal.classList.add('hidden'); |
| }; |
| |
| quickViewModal.classList.remove('hidden'); |
| } |
| } |
| </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=priom7/ecom" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
| </html> |
