Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ShopSphere - Your Shopping Cart</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 animations */ | |
| @keyframes slideIn { | |
| from { transform: translateY(20px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .animate-slide-in { | |
| animation: slideIn 0.3s ease-out forwards; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| /* Pulse animation for empty cart */ | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen font-sans"> | |
| <!-- Header --> | |
| <header class="bg-indigo-600 text-white shadow-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-shopping-bag text-2xl"></i> | |
| <h1 class="text-2xl font-bold">ShopSphere</h1> | |
| </div> | |
| <div class="relative"> | |
| <button id="cartButton" class="relative p-2 rounded-full hover:bg-indigo-700 transition"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span id="cartCount" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Products Section --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2">Featured Products</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Product 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300 animate-slide-in"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="Wireless Headphones" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">NEW</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-lg mb-1">Wireless Headphones</h3> | |
| <p class="text-gray-600 text-sm mb-2">Premium sound quality with noise cancellation</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-indigo-600">$129.99</span> | |
| <button onclick="addToCart('Wireless Headphones', 129.99, 'https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80')" class="bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700 transition"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300 animate-slide-in" style="animation-delay: 0.1s;"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1026&q=80" alt="MacBook Pro" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">SALE</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-lg mb-1">MacBook Pro</h3> | |
| <p class="text-gray-600 text-sm mb-2">16-inch, M2 Pro chip, 16GB RAM</p> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="font-bold text-indigo-600">$2,199.00</span> | |
| <span class="text-sm text-gray-500 line-through ml-2">$2,499.00</span> | |
| </div> | |
| <button onclick="addToCart('MacBook Pro', 2199, 'https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1026&q=80')" class="bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700 transition"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300 animate-slide-in" style="animation-delay: 0.2s;"> | |
| <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1099&q=80" alt="Smart Watch" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-lg mb-1">Smart Watch</h3> | |
| <p class="text-gray-600 text-sm mb-2">Fitness tracker & heart rate monitor</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-indigo-600">$199.99</span> | |
| <button onclick="addToCart('Smart Watch', 199.99, 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1099&q=80')" class="bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700 transition"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300 animate-slide-in" style="animation-delay: 0.3s;"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Bluetooth Speaker" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-yellow-500 text-white text-xs px-2 py-1 rounded-full">POPULAR</span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-lg mb-1">Bluetooth Speaker</h3> | |
| <p class="text-gray-600 text-sm mb-2">Portable with 20h battery life</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-indigo-600">$89.99</span> | |
| <button onclick="addToCart('Bluetooth Speaker', 89.99, 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80')" class="bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700 transition"> | |
| <i class="fas fa-cart-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Special Offers --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2">Special Offers</h2> | |
| <div class="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-xl shadow-lg p-6 text-white"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-6 md:mb-0"> | |
| <h3 class="text-2xl font-bold mb-2">Limited Time Offer!</h3> | |
| <p class="mb-4">Get 15% off on all products when you spend over $200. Use code: SHOP15</p> | |
| <button class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition"> | |
| Shop Now | |
| </button> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Special Offer" class="h-40 rounded-lg shadow-md"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Shopping Cart Sidebar --> | |
| <div id="cartSidebar" class="fixed top-0 right-0 w-full sm:w-96 h-full bg-white shadow-xl z-50 transform translate-x-full transition-transform duration-300 ease-in-out overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6 border-b pb-4"> | |
| <h2 class="text-2xl font-bold text-gray-800"> | |
| <i class="fas fa-shopping-cart mr-2 text-indigo-600"></i> Your Cart | |
| </h2> | |
| <button id="closeCart" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <div id="cartItems" class="mb-6"> | |
| <!-- Cart items will be added here dynamically --> | |
| <div id="emptyCart" class="text-center py-12 animate-pulse"> | |
| <i class="fas fa-shopping-cart text-5xl text-gray-300 mb-4"></i> | |
| <p class="text-gray-500 font-medium">Your cart is empty</p> | |
| <p class="text-gray-400 text-sm">Start shopping to add items</p> | |
| </div> | |
| </div> | |
| <div id="cartSummary" class="border-t pt-4 hidden"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Subtotal:</span> | |
| <span id="subtotal" class="font-semibold">$0.00</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Shipping:</span> | |
| <span id="shipping" class="font-semibold">$0.00</span> | |
| </div> | |
| <div class="flex justify-between mb-4 text-lg"> | |
| <span class="text-gray-800 font-bold">Total:</span> | |
| <span id="total" class="font-bold text-indigo-600">$0.00</span> | |
| </div> | |
| <button id="checkoutBtn" class="w-full bg-indigo-600 text-white py-3 rounded-lg font-semibold hover:bg-indigo-700 transition flex items-center justify-center"> | |
| <i class="fas fa-credit-card mr-2"></i> Proceed to Checkout | |
| </button> | |
| <p class="text-center text-gray-500 text-sm mt-2">or <button id="continueShopping" class="text-indigo-600 hover:underline">continue shopping</button></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Overlay --> | |
| <div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div> | |
| <!-- Notification Toast --> | |
| <div id="toast" class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-10 opacity-0 transition-all duration-300 flex items-center"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span id="toastMessage">Item added to cart!</span> | |
| </div> | |
| <script> | |
| // Cart data | |
| let cart = []; | |
| // DOM elements | |
| const cartButton = document.getElementById('cartButton'); | |
| const cartSidebar = document.getElementById('cartSidebar'); | |
| const closeCart = document.getElementById('closeCart'); | |
| const overlay = document.getElementById('overlay'); | |
| const cartItems = document.getElementById('cartItems'); | |
| const emptyCart = document.getElementById('emptyCart'); | |
| const cartSummary = document.getElementById('cartSummary'); | |
| const subtotalEl = document.getElementById('subtotal'); | |
| const shippingEl = document.getElementById('shipping'); | |
| const totalEl = document.getElementById('total'); | |
| const cartCount = document.getElementById('cartCount'); | |
| const checkoutBtn = document.getElementById('checkoutBtn'); | |
| const continueShopping = document.getElementById('continueShopping'); | |
| const toast = document.getElementById('toast'); | |
| const toastMessage = document.getElementById('toastMessage'); | |
| // Toggle cart sidebar | |
| cartButton.addEventListener('click', () => { | |
| cartSidebar.classList.remove('translate-x-full'); | |
| overlay.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| closeCart.addEventListener('click', closeCartSidebar); | |
| overlay.addEventListener('click', closeCartSidebar); | |
| continueShopping.addEventListener('click', closeCartSidebar); | |
| function closeCartSidebar() { | |
| cartSidebar.classList.add('translate-x-full'); | |
| overlay.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| // Add to cart function | |
| function addToCart(name, price, image) { | |
| // Check if item already exists in cart | |
| const existingItem = cart.find(item => item.name === name); | |
| if (existingItem) { | |
| existingItem.quantity += 1; | |
| } else { | |
| cart.push({ | |
| name, | |
| price, | |
| image, | |
| quantity: 1 | |
| }); | |
| } | |
| updateCart(); | |
| showToast(`${name} added to cart`); | |
| } | |
| // Update cart UI | |
| function updateCart() { | |
| // Update cart count | |
| const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); | |
| cartCount.textContent = totalItems; | |
| // Update cart items | |
| if (cart.length === 0) { | |
| emptyCart.classList.remove('hidden'); | |
| cartSummary.classList.add('hidden'); | |
| } else { | |
| emptyCart.classList.add('hidden'); | |
| cartSummary.classList.remove('hidden'); | |
| // Clear existing items | |
| cartItems.innerHTML = ''; | |
| // Add each item to cart | |
| cart.forEach((item, index) => { | |
| const itemTotal = (item.price * item.quantity).toFixed(2); | |
| const itemEl = document.createElement('div'); | |
| itemEl.className = 'flex items-center mb-4 pb-4 border-b'; | |
| itemEl.innerHTML = ` | |
| <div class="flex-shrink-0 w-16 h-16 bg-gray-200 rounded-md overflow-hidden"> | |
| <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4 flex-grow"> | |
| <h3 class="font-medium text-gray-800">${item.name}</h3> | |
| <p class="text-gray-600 text-sm">$${item.price.toFixed(2)}</p> | |
| <div class="flex items-center mt-1"> | |
| <button onclick="updateQuantity(${index}, -1)" class="text-gray-500 hover:text-indigo-600"> | |
| <i class="fas fa-minus text-xs"></i> | |
| </button> | |
| <span class="mx-2 text-gray-800">${item.quantity}</span> | |
| <button onclick="updateQuantity(${index}, 1)" class="text-gray-500 hover:text-indigo-600"> | |
| <i class="fas fa-plus text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="ml-4 text-right"> | |
| <span class="font-semibold">$${itemTotal}</span> | |
| <button onclick="removeItem(${index})" class="block mt-1 text-red-500 hover:text-red-700 text-sm"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| `; | |
| cartItems.appendChild(itemEl); | |
| }); | |
| // Update summary | |
| const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); | |
| const shipping = subtotal > 0 ? (subtotal > 50 ? 0 : 5.99) : 0; | |
| const total = subtotal + shipping; | |
| subtotalEl.textContent = `$${subtotal.toFixed(2)}`; | |
| shippingEl.textContent = shipping === 0 ? 'FREE' : `$${shipping.toFixed(2)}`; | |
| totalEl.textContent = `$${total.toFixed(2)}`; | |
| } | |
| } | |
| // Update item quantity | |
| function updateQuantity(index, change) { | |
| cart[index].quantity += change; | |
| // Remove item if quantity reaches 0 | |
| if (cart[index].quantity <= 0) { | |
| cart.splice(index, 1); | |
| showToast('Item removed from cart'); | |
| } | |
| updateCart(); | |
| } | |
| // Remove item from cart | |
| function removeItem(index) { | |
| const itemName = cart[index].name; | |
| cart.splice(index, 1); | |
| updateCart(); | |
| showToast(`${itemName} removed from cart`); | |
| } | |
| // Show toast notification | |
| function showToast(message) { | |
| toastMessage.textContent = message; | |
| toast.classList.remove('translate-y-10', 'opacity-0'); | |
| toast.classList.add('translate-y-0', 'opacity-100'); | |
| setTimeout(() => { | |
| toast.classList.remove('translate-y-0', 'opacity-100'); | |
| toast.classList.add('translate-y-10', 'opacity-0'); | |
| }, 3000); | |
| } | |
| // Checkout button | |
| checkoutBtn.addEventListener('click', () => { | |
| if (cart.length > 0) { | |
| showToast('Checkout functionality would go here!'); | |
| // In a real app, you would redirect to checkout page or show a checkout form | |
| } | |
| }); | |
| // Initialize cart | |
| updateCart(); | |
| </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=rajeshuriti/shopsphere" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |