Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ShopNest - 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> | |
| /* Custom CSS for animations and effects */ | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px 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-in; | |
| } | |
| .cart-item-exit { | |
| opacity: 1; | |
| } | |
| .cart-item-exit-active { | |
| opacity: 0; | |
| transform: translateX(20px); | |
| transition: all 300ms ease-in; | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header/Navigation --> | |
| <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-shopping-bag text-2xl text-indigo-600"></i> | |
| <h1 class="text-xl font-bold text-gray-800">Shop<span class="text-indigo-600">Nest</span></h1> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Home</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Shop</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Categories</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 transition">About</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Contact</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 text-gray-600 hover:text-indigo-600 relative"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="p-2 text-gray-600 hover:text-indigo-600 relative"> | |
| <i class="far fa-heart"></i> | |
| <span class="absolute -top-1 -right-1 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </button> | |
| <button id="cart-btn" class="p-2 text-gray-600 hover:text-indigo-600 relative"> | |
| <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"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient py-16"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Summer Collection 2023</h1> | |
| <p class="text-lg text-gray-600 mb-6">Discover our premium selection of products designed to elevate your | |
| lifestyle.</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition">Shop Now</button> | |
| <button class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg font-medium transition">Learn More</button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Fashion Model" class="rounded-lg shadow-xl max-w-full h-auto"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Shop by Category</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer"> | |
| <div class="h-40 bg-indigo-50 flex items-center justify-center"> | |
| <i class="fas fa-tshirt text-5xl text-indigo-600"></i> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-gray-800">Clothing</h3> | |
| <p class="text-sm text-gray-500 mt-1">200+ items</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer"> | |
| <div class="h-40 bg-blue-50 flex items-center justify-center"> | |
| <i class="fas fa-laptop text-5xl text-blue-600"></i> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-gray-800">Electronics</h3> | |
| <p class="text-sm text-gray-500 mt-1">150+ items</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer"> | |
| <div class="h-40 bg-green-50 flex items-center justify-center"> | |
| <i class="fas fa-home text-5xl text-green-600"></i> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-gray-800">Home</h3> | |
| <p class="text-sm text-gray-500 mt-1">300+ items</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer"> | |
| <div class="h-40 bg-yellow-50 flex items-center justify-center"> | |
| <i class="fas fa-gamepad text-5xl text-yellow-600"></i> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-gray-800">Gaming</h3> | |
| <p class="text-sm text-gray-500 mt-1">120+ items</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section class="py-12 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> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">View All</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" id="products-container"> | |
| <!-- Products will be loaded here by JavaScript --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Special Offer --> | |
| <section class="py-16 bg-indigo-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Limited Time Offer</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Get 30% off on all summer collection. Use code | |
| <span class="font-bold">SUMMER30</span> at checkout.</p> | |
| <div class="flex justify-center space-x-4 mb-8"> | |
| <div class="bg-white bg-opacity-20 rounded-lg p-4 text-center"> | |
| <div class="text-3xl font-bold" id="days">00</div> | |
| <div class="text-sm">Days</div> | |
| </div> | |
| <div class="bg-white bg-opacity-20 rounded-lg p-4 text-center"> | |
| <div class="text-3xl font-bold" id="hours">00</div> | |
| <div class="text-sm">Hours</div> | |
| </div> | |
| <div class="bg-white bg-opacity-20 rounded-lg p-4 text-center"> | |
| <div class="text-3xl font-bold" id="minutes">00</div> | |
| <div class="text-sm">Minutes</div> | |
| </div> | |
| <div class="bg-white bg-opacity-20 rounded-lg p-4 text-center"> | |
| <div class="text-3xl font-bold" id="seconds">00</div> | |
| <div class="text-sm">Seconds</div> | |
| </div> | |
| </div> | |
| <button class="bg-white text-indigo-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-bold transition">Shop Now</button> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">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-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="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> | |
| <p class="text-gray-600 mb-4">"The quality of products is outstanding and the delivery was super fast. Will | |
| definitely shop here again!"</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Customer" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Sarah Johnson</h4> | |
| <p class="text-sm text-gray-500">Verified Customer</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="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> | |
| <p class="text-gray-600 mb-4">"Excellent customer service! They helped me choose the perfect gift for my | |
| wife's birthday. Highly recommended!"</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Michael Chen</h4> | |
| <p class="text-sm text-gray-500">Verified Customer</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="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> | |
| <p class="text-gray-600 mb-4">"I've ordered multiple times and never been disappointed. The packaging is | |
| eco-friendly which I really appreciate."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Customer" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Emma Rodriguez</h4> | |
| <p class="text-sm text-gray-500">Verified Customer</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-12 bg-gray-100"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Stay Updated</h2> | |
| <p class="text-gray-600 mb-8 max-w-2xl mx-auto">Subscribe to our newsletter to receive updates on new products, | |
| special offers, and more.</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 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-r-lg font-medium transition">Subscribe</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <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-shopping-bag text-2xl text-indigo-400"></i> | |
| <h3 class="text-xl font-bold">Shop<span class="text-indigo-400">Nest</span></h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Premium e-commerce platform offering the best products at competitive prices. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </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 transition">All Products</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Featured</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">New Arrivals</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Sale Items</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Gift Cards</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Customer Service</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Shipping Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Returns & Refunds</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Track Order</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| </ul> | |
| </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 ShopNest. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <img src="https://via.placeholder.com/40x25?text=VISA" alt="Visa" class="h-6"> | |
| <img src="https://via.placeholder.com/40x25?text=MC" alt="Mastercard" class="h-6"> | |
| <img src="https://via.placeholder.com/40x25?text=AMEX" alt="American Express" class="h-6"> | |
| <img src="https://via.placeholder.com/40x25?text=PP" alt="PayPal" class="h-6"> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Shopping Cart Sidebar --> | |
| <div id="cart-sidebar" | |
| class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out 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 (<span id="sidebar-cart-count">0</span>)</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 mb-6"> | |
| <!-- Cart items will be loaded here --> | |
| <div class="text-center py-8 text-gray-500" id="empty-cart-message"> | |
| <i class="fas fa-shopping-cart text-4xl mb-4 text-gray-300"></i> | |
| <p>Your cart is empty</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-4 mb-4"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Subtotal</span> | |
| <span class="font-medium" id="cart-subtotal">$0.00</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Shipping</span> | |
| <span class="font-medium">Free</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Tax</span> | |
| <span class="font-medium" id="cart-tax">$0.00</span> | |
| </div> | |
| <div class="flex justify-between text-lg font-bold mt-4"> | |
| <span>Total</span> | |
| <span id="cart-total">$0.00</span> | |
| </div> | |
| </div> | |
| <button id="checkout-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-lg font-medium transition mb-4">Proceed to Checkout</button> | |
| <button class="w-full border border-indigo-600 text-indigo-600 hover:bg-indigo-50 py-3 rounded-lg font-medium transition">Continue Shopping</button> | |
| </div> | |
| </div> | |
| <div id="cart-overlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-40"></div> | |
| <!-- Product Quick View Modal --> | |
| <div id="quickview-modal" | |
| class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-lg shadow-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 class="text-2xl font-bold text-gray-800" id="quickview-title">Product Name</h3> | |
| <button id="close-quickview" 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="quickview-image" src="" alt="Product" class="w-full rounded-lg mb-4"> | |
| <div class="grid grid-cols-4 gap-2"> | |
| <div class="border rounded cursor-pointer"> | |
| <img src="" class="w-full h-16 object-cover"> | |
| </div> | |
| <div class="border rounded cursor-pointer"> | |
| <img src="" class="w-full h-16 object-cover"> | |
| </div> | |
| <div class="border rounded cursor-pointer"> | |
| <img src="" class="w-full h-16 object-cover"> | |
| </div> | |
| <div class="border rounded cursor-pointer"> | |
| <img src="" class="w-full h-16 object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="flex items-center mb-4"> | |
| <div class="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 text-sm">(42 reviews)</span> | |
| </div> | |
| <div class="text-2xl font-bold text-gray-800 mb-4" id="quickview-price">$99.99</div> | |
| <p class="text-gray-600 mb-6" id="quickview-description">Product description goes here...</p> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-2"> | |
| <span class="text-gray-700 font-medium mr-4">Color:</span> | |
| <div class="flex space-x-2"> | |
| <button class="w-6 h-6 rounded-full bg-blue-500 border-2 border-white shadow-md"></button> | |
| <button class="w-6 h-6 rounded-full bg-red-500 border-2 border-transparent hover:border-gray-200"></button> | |
| <button class="w-6 h-6 rounded-full bg-green-500 border-2 border-transparent hover:border-gray-200"></button> | |
| <button class="w-6 h-6 rounded-full bg-yellow-500 border-2 border-transparent hover:border-gray-200"></button> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-gray-700 font-medium mr-4">Size:</span> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border rounded hover:bg-gray-100">S</button> | |
| <button class="px-3 py-1 border rounded hover:bg-gray-100">M</button> | |
| <button class="px-3 py-1 border bg-gray-800 text-white rounded">L</button> | |
| <button class="px-3 py-1 border rounded hover:bg-gray-100">XL</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex items-center border rounded"> | |
| <button class="px-3 py-2 text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-minus"></i> | |
| </button> | |
| <span class="px-4 py-2">1</span> | |
| <button class="px-3 py-2 text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <button id="add-to-cart-quickview" class="ml-4 bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded font-medium transition flex items-center"> | |
| <i class="fas fa-shopping-cart mr-2"></i> Add to Cart | |
| </button> | |
| </div> | |
| <div class="border-t border-gray-200 pt-4"> | |
| <div class="flex items-center text-gray-600 mb-2"> | |
| <i class="fas fa-truck mr-2"></i> | |
| <span>Free shipping on orders over $50</span> | |
| </div> | |
| <div class="flex items-center text-gray-600 mb-2"> | |
| <i class="fas fa-undo mr-2"></i> | |
| <span>30-day return policy</span> | |
| </div> | |
| <div class="flex items-center text-gray-600"> | |
| <i class="fas fa-shield-alt mr-2"></i> | |
| <span>Secure payment</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample product data | |
| const products = [ | |
| { | |
| id: 1, | |
| name: "Premium Wireless Headphones", | |
| price: 199.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", | |
| description: "Noise-cancelling wireless headphones with premium sound quality and 30-hour battery life.", | |
| rating: 4.5 | |
| }, | |
| { | |
| id: 2, | |
| name: "Smart Watch Pro", | |
| price: 249.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", | |
| description: "Advanced smartwatch with health monitoring, GPS, and customizable watch faces.", | |
| rating: 4.7 | |
| }, | |
| { | |
| id: 3, | |
| name: "Organic Cotton T-Shirt", | |
| price: 29.99, | |
| image: "https://images.unsplash.com/photo-1521572163474-6864f9cf17a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80", | |
| description: "Comfortable 100% organic cotton t-shirt available in multiple colors.", | |
| rating: 4.3 | |
| }, | |
| { | |
| id: 4, | |
| name: "Leather Wallet", | |
| price: 49.99, | |
| image: "https://images.unsplash.com/photo-1600857544200-b2f666a9a1ec?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", | |
| description: "Genuine leather wallet with multiple card slots and RFID protection.", | |
| rating: 4.6 | |
| }, | |
| { | |
| id: 5, | |
| name: "Ceramic Coffee Mug", | |
| price: 19.99, | |
| image: "https://images.unsplash.com/photo-1517256064527-09c73fc73e38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", | |
| description: "Handcrafted ceramic mug with ergonomic handle and heat-resistant design.", | |
| rating: 4.8 | |
| }, | |
| { | |
| id: 6, | |
| name: "Wireless Charging Pad", | |
| price: 39.99, | |
| image: "https://images.unsplash.com/photo-1583394838336-acd977736f90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", | |
| description: "Fast-charging wireless pad compatible with all Qi-enabled devices.", | |
| rating: 4.2 | |
| }, | |
| { | |
| id: 7, | |
| name: "Stainless Steel Water Bottle", | |
| price: 24.99, | |
| image: "https://images.unsplash.com/photo-1602143407151-7111541de5c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80", | |
| description: "Insulated stainless steel water bottle that keeps drinks cold for 24 hours.", | |
| rating: 4.9 | |
| }, | |
| { | |
| id: 8, | |
| name: "Bluetooth Speaker", | |
| price: 89.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", | |
| description: "Portable Bluetooth speaker with 20W output and 15-hour playtime.", | |
| rating: 4.4 | |
| } | |
| ]; | |
| // Shopping cart functionality | |
| let cart = []; | |
| // DOM elements | |
| const productsContainer = document.getElementById('products-container'); | |
| const cartBtn = document.getElementById('cart-btn'); | |
| const closeCartBtn = document.getElementById('close-cart'); | |
| const cartSidebar = document.getElementById('cart-sidebar'); | |
| const cartOverlay = document.getElementById('cart-overlay'); | |
| const cartItemsContainer = document.getElementById('cart-items'); | |
| const emptyCartMessage = document.getElementById('empty-cart-message'); | |
| const cartCount = document.getElementById('cart-count'); | |
| const sidebarCartCount = document.getElementById('sidebar-cart-count'); | |
| const cartSubtotal = document.getElementById('cart-subtotal'); | |
| const cartTax = document.getElementById('cart-tax'); | |
| const cartTotal = document.getElementById('cart-total'); | |
| const checkoutBtn = document.getElementById('checkout-btn'); | |
| // Quick view modal elements | |
| const quickviewModal = document.getElementById('quickview-modal'); | |
| const closeQuickview = document.getElementById('close-quickview'); | |
| const quickviewTitle = document.getElementById('quickview-title'); | |
| const quickviewImage = document.getElementById('quickview-image'); | |
| const quickviewPrice = document.getElementById('quickview-price'); | |
| const quickviewDescription = document.getElementById('quickview-description'); | |
| const addToCartQuickview = document.getElementById('add-to-cart-quickview'); | |
| let currentQuickviewProduct = null; | |
| // Initialize the page | |
| document.addEventListener('DOMContentLoaded', () => { | |
| renderProducts(); | |
| setupEventListeners(); | |
| startCountdown(); | |
| }); | |
| // Render products to the page | |
| function renderProducts() { | |
| productsContainer.innerHTML = ''; | |
| products.forEach(product => { | |
| const productCard = document.createElement('div'); | |
| productCard.className = 'bg-white rounded-lg shadow-md overflow-hidden product-card transition duration-300'; | |
| productCard.innerHTML = ` | |
| <div class="relative"> | |
| <img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| </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> | |
| <div class="flex items-center mb-3"> | |
| <div class="text-yellow-400 text-sm"> | |
| ${renderStars(product.rating)} | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(${Math.floor(Math.random() * 100) + 20})</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-grow bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded font-medium transition text-sm add-to-cart" data-id="${product.id}"> | |
| Add to Cart | |
| </button> | |
| <button class="w-10 h-10 flex items-center justify-center border border-gray-300 rounded hover:bg-gray-100 quick-view" data-id="${product.id}"> | |
| <i class="fas fa-eye text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| productsContainer.appendChild(productCard); | |
| }); | |
| } | |
| // Render star rating | |
| function renderStars(rating) { | |
| let stars = ''; | |
| const fullStars = Math.floor(rating); | |
| const hasHalfStar = rating % 1 >= 0.5; | |
| for (let i = 0; i < fullStars; i++) { | |
| stars += '<i class="fas fa-star"></i>'; | |
| } | |
| if (hasHalfStar) { | |
| stars += '<i class="fas fa-star-half-alt"></i>'; | |
| } | |
| const emptyStars = 5 - Math.ceil(rating); | |
| for (let i = 0; i < emptyStars; i++) { | |
| stars += '<i class="far fa-star"></i>'; | |
| } | |
| return stars; | |
| } | |
| // Setup event listeners | |
| function setupEventListeners() { | |
| // Cart toggle | |
| cartBtn.addEventListener('click', toggleCart); | |
| closeCartBtn.addEventListener('click', toggleCart); | |
| cartOverlay.addEventListener('click', toggleCart); | |
| // Quick view modal | |
| closeQuickview.addEventListener('click', () => { | |
| quickviewModal.classList.add('hidden'); | |
| }); | |
| // Add to cart buttons | |
| document.addEventListener('click', (e) => { | |
| if (e.target.classList.contains('add-to-cart') || e.target.closest('.add-to-cart')) { | |
| const button = e.target.classList.contains('add-to-cart') ? e.target : e.target.closest('.add-to-cart'); | |
| const productId = parseInt(button.getAttribute('data-id')); | |
| addToCart(productId); | |
| // Show added animation | |
| button.innerHTML = '<i class="fas fa-check mr-1"></i> Added'; | |
| button.classList.remove('bg-indigo-600'); | |
| button.classList.add('bg-green-500'); | |
| setTimeout(() => { | |
| button.innerHTML = 'Add to Cart'; | |
| button.classList.remove('bg-green-500'); | |
| button.classList.add('bg-indigo-600'); | |
| }, 1500); | |
| } | |
| // Quick view buttons | |
| if (e.target.classList.contains('quick-view') || e.target.closest('.quick-view')) { | |
| const button = e.target.classList.contains('quick-view') ? e.target : e.target.closest('.quick-view'); | |
| const productId = parseInt(button.getAttribute('data-id')); | |
| showQuickView(productId); | |
| } | |
| }); | |
| // Add to cart from quick view | |
| addToCartQuickview.addEventListener('click', () => { | |
| if (currentQuickviewProduct) { | |
| addToCart(currentQuickviewProduct.id); | |
| // Show added animation | |
| addToCartQuickview.innerHTML = '<i class="fas fa-check mr-2"></i> Added to Cart'; | |
| addToCartQuickview.classList.remove('bg-indigo-600'); | |
| addToCartQuickview.classList.add('bg-green-500'); | |
| setTimeout(() => { | |
| addToCartQuickview.innerHTML = '<i class="fas fa-shopping-cart mr-2"></i> Add to Cart'; | |
| addToCartQuickview.classList.remove('bg-green-500'); | |
| addToCartQuickview.classList.add('bg-indigo-600'); | |
| }, 1500); | |
| } | |
| }); | |
| // Checkout button | |
| checkoutBtn.addEventListener('click', () => { | |
| alert('Proceeding to checkout! In a real application, this would redirect to the checkout page.'); | |
| toggleCart(); | |
| }); | |
| } | |
| // Toggle cart sidebar | |
| function toggleCart() { | |
| cartSidebar.classList.toggle('translate-x-full'); | |
| cartOverlay.classList.toggle('hidden'); | |
| document.body.classList.toggle('overflow-hidden'); | |
| if (!cartSidebar.classList.contains('translate-x-full')) { | |
| renderCartItems(); | |
| } | |
| } | |
| // Add product to cart | |
| function addToCart(productId) { | |
| const product = products.find(p => p.id === productId); | |
| if (product) { | |
| const existingItem = cart.find(item => item.id === productId); | |
| if (existingItem) { | |
| existingItem.quantity += 1; | |
| } else { | |
| cart.push({ | |
| ...product, | |
| quantity: 1 | |
| }); | |
| } | |
| updateCartCount(); | |
| // If cart is open, update the display | |
| if (!cartSidebar.classList.contains('translate-x-full')) { | |
| renderCartItems(); | |
| } | |
| } | |
| } | |
| // Update cart count in header | |
| function updateCartCount() { | |
| const count = cart.reduce((total, item) => total + item.quantity, 0); | |
| cartCount.textContent = count; | |
| sidebarCartCount.textContent = count; | |
| } | |
| // Render cart items in sidebar | |
| function renderCartItems() { | |
| if (cart.length === 0) { | |
| emptyCartMessage.classList.remove('hidden'); | |
| cartItemsContainer.innerHTML = ''; | |
| cartItemsContainer.appendChild(emptyCartMessage); | |
| cartSubtotal.textContent = '$0.00'; | |
| cartTax.textContent = '$0.00'; | |
| cartTotal.textContent = '$0.00'; | |
| return; | |
| } | |
| emptyCartMessage.classList.add('hidden'); | |
| cartItemsContainer.innerHTML = ''; | |
| let subtotal = 0; | |
| cart.forEach(item => { | |
| const itemTotal = item.price * item.quantity; | |
| subtotal += itemTotal; | |
| const cartItem = document.createElement('div'); | |
| cartItem.className = 'flex items-center border-b border-gray-100 pb-4'; | |
| cartItem.innerHTML = ` | |
| <div class="w-20 h-20 flex-shrink-0 overflow-hidden rounded-md border border-gray-200"> | |
| <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4 flex-grow"> | |
| <div class="flex justify-between"> | |
| <h3 class="text-sm font-medium text-gray-900">${item.name}</h3> | |
| <p class="ml-4 text-sm font-medium text-gray-900">$${item.price.toFixed(2)}</p> | |
| </div> | |
| <div class="flex justify-between mt-1 text-sm text-gray-500"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-gray-500 hover:text-indigo-600 quantity-btn" data-action="decrease" data-id="${item.id}"> | |
| <i class="fas fa-minus text-xs"></i> | |
| </button> | |
| <span class="quantity">${item.quantity}</span> | |
| <button class="text-gray-500 hover:text-indigo-600 quantity-btn" data-action="increase" data-id="${item.id}"> | |
| <i class="fas fa-plus text-xs"></i> | |
| </button> | |
| </div> | |
| <button class="text-red-500 hover:text-red-700 remove-btn" data-id="${item.id}"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| cartItemsContainer.appendChild(cartItem); | |
| }); | |
| // Calculate totals | |
| const tax = subtotal * 0.1; // 10% tax | |
| const total = subtotal + tax; | |
| cartSubtotal.textContent = `$${subtotal.toFixed(2)}`; | |
| cartTax.textContent = `$${tax.toFixed(2)}`; | |
| cartTotal.textContent = `$${total.toFixed(2)}`; | |
| // Add event listeners for quantity buttons and remove buttons | |
| document.querySelectorAll('.quantity-btn').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| const action = button.getAttribute('data-action'); | |
| const productId = parseInt(button.getAttribute('data-id')); | |
| updateCartItemQuantity(productId, action); | |
| }); | |
| }); | |
| document.querySelectorAll('.remove-btn').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| const productId = parseInt(button.getAttribute('data-id')); | |
| removeFromCart(productId); | |
| }); | |
| }); | |
| } | |
| // Update cart item quantity | |
| function updateCartItemQuantity(productId, action) { | |
| const item = cart.find(item => item.id === productId); | |
| if (item) { | |
| if (action === 'increase') { | |
| item.quantity += 1; | |
| } else if (action === 'decrease' && item.quantity > 1) { | |
| item.quantity -= 1; | |
| } | |
| updateCartCount(); | |
| renderCartItems(); | |
| } | |
| } | |
| // Remove item from cart | |
| function removeFromCart(productId) { | |
| cart = cart.filter(item => item.id !== productId); | |
| updateCartCount(); | |
| renderCartItems(); | |
| } | |
| // Show quick view modal | |
| function showQuickView(productId) { | |
| const product = products.find(p => p.id === productId); | |
| if (product) { | |
| currentQuickviewProduct = product; | |
| quickviewTitle.textContent = product.name; | |
| quickviewImage.src = product.image; | |
| quickviewPrice.textContent = `$${product.price.toFixed(2)}`; | |
| quickviewDescription.textContent = product.description; | |
| quickviewModal.classList.remove('hidden'); | |
| document.body.classList.add('overflow-hidden'); | |
| } | |
| } | |
| // Countdown timer for special offer | |
| function startCountdown() { | |
| // Set the date we're counting down to (3 days from now) | |
| const countDownDate = new Date(); | |
| countDownDate.setDate(countDownDate.getDate() + 3); | |
| // Update the count down every 1 second | |
| const x = setInterval(function() { | |
| // Get today's date and time | |
| const now = new Date().getTime(); | |
| // Find the distance between now and the count down date | |
| const distance = countDownDate - now; | |
| // Time calculations for days, hours, minutes and seconds | |
| const days = Math.floor(distance / (1000 * 60 * 60 * 24)); | |
| const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((distance % (1000 * 60)) / 1000); | |
| // Display the result | |
| document.getElementById("days").textContent = days.toString().padStart(2, '0'); | |
| document.getElementById("hours").textContent = hours.toString().padStart(2, '0'); | |
| document.getElementById("minutes").textContent = minutes.toString().padStart(2, '0'); | |
| document.getElementById("seconds").textContent = seconds.toString().padStart(2, '0'); | |
| // If the count down is finished, clear interval | |
| if (distance < 0) { | |
| clearInterval(x); | |
| document.getElementById("days").textContent = "00"; | |
| document.getElementById("hours").textContent = "00"; | |
| document.getElementById("minutes").textContent = "00"; | |
| document.getElementById("seconds").textContent = "00"; | |
| } | |
| }, 1000); | |
| } | |
| </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=XBotz/e-commerce" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |