Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ShopSphere - Modern WooCommerce Experience</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛍️</text></svg>"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary: #ec4899; | |
| --secondary-dark: #db2777; | |
| --accent: #f59e0b; | |
| --surface: #ffffff; | |
| --surface-dark: #0f172a; | |
| --text: #1e293b; | |
| --text-dark: #f1f5f9; | |
| --border: #e2e8f0; | |
| --border-dark: #334155; | |
| } | |
| .dark { | |
| --surface: #0f172a; | |
| --text: #f1f5f9; | |
| --border: #334155; | |
| } | |
| .glass-effect { | |
| backdrop-filter: blur(10px); | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .dark .glass-effect { | |
| background: rgba(15, 23, 42, 0.3); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .product-card { | |
| transition: all 0.3s ease; | |
| transform: translateY(0); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15); | |
| } | |
| .dark .product-card:hover { | |
| box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3); | |
| } | |
| .cart-drawer { | |
| transform: translateX(100%); | |
| transition: transform 0.3s ease; | |
| } | |
| .cart-drawer.open { | |
| transform: translateX(0); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .floating-action { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| z-index: 50; | |
| } | |
| .search-overlay { | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .search-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .category-pill { | |
| transition: all 0.2s ease; | |
| } | |
| .category-pill.active { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .loading-skeleton { | |
| background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); | |
| background-size: 200% 100%; | |
| animation: loading 1.5s infinite; | |
| } | |
| @keyframes loading { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 transition-colors duration-300"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-40 bg-white/80 dark:bg-slate-900/80 glass-effect"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <!-- Logo --> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-pink-500 rounded-lg flex items-center justify-center"> | |
| <i data-feather="shopping-bag" class="w-5 h-5 text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold gradient-text">ShopSphere</span> | |
| </div> | |
| <!-- Search Bar --> | |
| <div class="hidden md:flex flex-1 max-w-md mx-8"> | |
| <div class="relative w-full"> | |
| <input type="text" | |
| placeholder="Search products..." | |
| class="w-full pl-10 pr-4 py-2 bg-slate-100 dark:bg-slate-800 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500" | |
| id="searchInput"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 w-5 h-5 text-slate-400"></i> | |
| </div> | |
| </div> | |
| <!-- Actions --> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors" id="themeToggle"> | |
| <i data-feather="moon" class="w-5 h-5 dark:hidden"></i> | |
| <i data-feather="sun" class="w-5 h-5 hidden dark:block"></i> | |
| </button> | |
| <button class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors relative" id="cartBtn"> | |
| <i data-feather="shopping-cart" class="w-5 h-5"></i> | |
| <span class="absolute -top-1 -right-1 bg-pink-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center" id="cartCount">0</span> | |
| </button> | |
| <button class="md:hidden p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors" id="searchBtn"> | |
| <i data-feather="search" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative h-[60vh] overflow-hidden"> | |
| <div id="vanta-bg" class="absolute inset-0"></div> | |
| <div class="relative z-10 h-full flex items-center justify-center text-center px-4"> | |
| <div> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4"> | |
| Discover Your <span class="gradient-text">Style</span> | |
| </h1> | |
| <p class="text-lg md:text-xl text-slate-600 dark:text-slate-300 mb-8 max-w-2xl mx-auto"> | |
| Explore thousands of products with our modern shopping experience | |
| </p> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-full font-medium transition-colors"> | |
| Start Shopping | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories --> | |
| <section class="py-12 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-2xl font-bold mb-6">Shop by Category</h2> | |
| <div class="flex space-x-4 overflow-x-auto pb-4" id="categories"> | |
| <button class="category-pill active px-6 py-2 rounded-full bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 whitespace-nowrap" data-category="all"> | |
| All Products | |
| </button> | |
| <button class="category-pill px-6 py-2 rounded-full bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 transition-colors" data-category="electronics"> | |
| Electronics | |
| </button> | |
| <button class="category-pill px-6 py-2 rounded-full bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 transition-colors" data-category="fashion"> | |
| Fashion | |
| </button> | |
| <button class="category-pill px-6 py-2 rounded-full bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 transition-colors" data-category="home"> | |
| Home & Living | |
| </button> | |
| <button class="category-pill px-6 py-2 rounded-full bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 transition-colors" data-category="beauty"> | |
| Beauty | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Grid --> | |
| <section class="py-12 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6" id="productsGrid"> | |
| <!-- Products will be loaded here --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Cart Drawer --> | |
| <div class="cart-drawer fixed top-0 right-0 h-full w-full sm:w-96 bg-white dark:bg-slate-900 shadow-2xl z-50" id="cartDrawer"> | |
| <div class="p-4 border-b border-slate-200 dark:border-slate-700"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-semibold">Shopping Cart</h3> | |
| <button class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full" id="closeCart"> | |
| <i data-feather="x" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-4" id="cartItems"> | |
| <p class="text-center text-slate-500 dark:text-slate-400 py-8">Your cart is empty</p> | |
| </div> | |
| <div class="p-4 border-t border-slate-200 dark:border-slate-700"> | |
| <div class="flex justify-between mb-4"> | |
| <span class="font-semibold">Total:</span> | |
| <span class="font-bold text-lg" id="cartTotal">$0.00</span> | |
| </div> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-lg font-medium transition-colors"> | |
| Checkout | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Search Overlay --> | |
| <div class="search-overlay fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4" id="searchOverlay"> | |
| <div class="bg-white dark:bg-slate-900 rounded-2xl p-6 w-full max-w-2xl"> | |
| <div class="flex items-center space-x-4 mb-4"> | |
| <i data-feather="search" class="w-5 h-5 text-slate-400"></i> | |
| <input type="text" | |
| placeholder="Search for products..." | |
| class="flex-1 bg-transparent text-lg focus:outline-none" | |
| id="overlaySearchInput"> | |
| <button class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full" id="closeSearch"> | |
| <i data-feather="x" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <div id="searchResults" class="space-y-2"> | |
| <!-- Search results will appear here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating Action Button --> | |
| <button class="floating-action bg-indigo-600 hover:bg-indigo-700 text-white p-4 rounded-full shadow-lg transition-transform hover:scale-110" id="fab"> | |
| <i data-feather="arrow-up" class="w-6 h-6"></i> | |
| </button> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x6366f1, | |
| backgroundColor: 0xffffff, | |
| points: 8.00, | |
| maxDistance: 25.00, | |
| spacing: 20.00 | |
| }); | |
| // Theme toggle | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const html = document.documentElement; | |
| themeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); | |
| }); | |
| // Load saved theme | |
| if (localStorage.getItem('theme') === 'dark') { | |
| html.classList.add('dark'); | |
| } | |
| // Sample products data | |
| const products = [ | |
| { | |
| id: 1, | |
| name: "Wireless Headphones", | |
| price: 199.99, | |
| category: "electronics", | |
| image: "http://static.photos/technology/320x240/1", | |
| rating: 4.5, | |
| reviews: 234 | |
| }, | |
| { | |
| id: 2, | |
| name: "Designer T-Shirt", | |
| price: 49.99, | |
| category: "fashion", | |
| image: "http://static.photos/fashion/320x240/2", | |
| rating: 4.8, | |
| reviews: 156 | |
| }, | |
| { | |
| id: 3, | |
| name: "Smart Home Hub", | |
| price: 129.99, | |
| category: "home", | |
| image: "http://static.photos/technology/320x240/3", | |
| rating: 4.3, | |
| reviews: 89 | |
| }, | |
| { | |
| id: 4, | |
| name: "Organic Face Cream", | |
| price: 34.99, | |
| category: "beauty", | |
| image: "http://static.photos/wellness/320x240/4", | |
| rating: 4.7, | |
| reviews: 312 | |
| }, | |
| { | |
| id: 5, | |
| name: "Laptop Stand", | |
| price: 79.99, | |
| category: "electronics", | |
| image: "http://static.photos/workspace/320x240/5", | |
| rating: 4.6, | |
| reviews: 178 | |
| }, | |
| { | |
| id: 6, | |
| name: "Summer Dress", | |
| price: 89.99, | |
| category: "fashion", | |
| image: "http://static.photos/fashion/320x240/6", | |
| rating: 4.9, | |
| reviews: 423 | |
| }, | |
| { | |
| id: 7, | |
| name: "Aromatherapy Diffuser", | |
| price: 59.99, | |
| category: "home", | |
| image: "http://static.photos/wellness/320x240/7", | |
| rating: 4.4, | |
| reviews: 267 | |
| }, | |
| { | |
| id: 8, | |
| name: "Vitamin C Serum", | |
| price: 24.99, | |
| category: "beauty", | |
| image: "http://static.photos/wellness/320x240/8", | |
| rating: 4.6, | |
| reviews: 198 | |
| } | |
| ]; | |
| // Cart functionality | |
| let cart = []; | |
| function addToCart(product) { | |
| const existingItem = cart.find(item => item.id === product.id); | |
| if (existingItem) { | |
| existingItem.quantity += 1; | |
| } else { | |
| cart.push({ ...product, quantity: 1 }); | |
| } | |
| updateCart(); | |
| showCartNotification(); | |
| } | |
| function updateCart() { | |
| const cartCount = document.getElementById('cartCount'); | |
| const cartItems = document.getElementById('cartItems'); | |
| const cartTotal = document.getElementById('cartTotal'); | |
| cartCount.textContent = cart.reduce((sum, item) => sum + item.quantity, 0); | |
| if (cart.length === 0) { | |
| cartItems.innerHTML = '<p class="text-center text-slate-500 dark:text-slate-400 py-8">Your cart is empty</p>'; | |
| } else { | |
| cartItems.innerHTML = cart.map(item => ` | |
| <div class="flex items-center space-x-4 p-4 bg-slate-50 dark:bg-slate-800 rounded-lg mb-2"> | |
| <img src="${item.image}" alt="${item.name}" class="w-16 h-16 rounded-lg object-cover"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">${item.name}</h4> | |
| <p class="text-sm text-slate-500 dark:text-slate-400">$${item.price}</p> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-1 hover:bg-slate-200 dark:hover:bg-slate-700 rounded" onclick="updateQuantity(${item.id}, -1)"> | |
| <i data-feather="minus" class="w-4 h-4"></i> | |
| </button> | |
| <span class="w-8 text-center">${item.quantity}</span> | |
| <button class="p-1 hover:bg-slate-200 dark:hover:bg-slate-700 rounded" onclick="updateQuantity(${item.id}, 1)"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); | |
| cartTotal.textContent = `$${total.toFixed(2)}`; | |
| } | |
| function updateQuantity(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 showCartNotification() { | |
| const notification = document.createElement('div'); | |
| notification.className = 'fixed top-20 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg z-50'; | |
| notification.textContent = 'Added to cart!'; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.remove(); | |
| }, 2000); | |
| } | |
| // Render products | |
| function renderProducts(productsToRender = products) { | |
| const grid = document.getElementById('productsGrid'); | |
| grid.innerHTML = productsToRender.map(product => ` | |
| <div class="product-card bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm"> | |
| <div class="aspect-square overflow-hidden"> | |
| <img src="${product.image}" alt="${product.name}" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold mb-1">${product.name}</h3> | |
| <div class="flex items-center space-x-1 mb-2"> | |
| <div class="flex"> | |
| ${Array(5).fill(0).map((_, i) => | |
| `<i data-feather="star" class="w-4 h-4 ${i < Math.floor(product.rating) ? 'fill-amber-400 text-amber-400' : 'text-slate-300'}"></i>` | |
| ).join('')} | |
| </div> | |
| <span class="text-sm text-slate-500 dark:text-slate-400">(${product.reviews})</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xl font-bold">$${product.price}</span> | |
| <button onclick="addToCart(${JSON.stringify(product).replace(/"/g, '"')})" | |
| class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors"> | |
| <i data-feather="shopping-cart" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| feather.replace(); | |
| } | |
| // Category filtering | |
| document.querySelectorAll('.category-pill').forEach(pill => { | |
| pill.addEventListener('click', (e) => { | |
| document.querySelectorAll('.category-pill').forEach(p => p.classList.remove('active')); | |
| e.target.classList.add('active'); | |
| const category = e.target.dataset.category; | |
| const filtered = category === 'all' ? products : products.filter(p => p.category === category); | |
| renderProducts(filtered); | |
| }); | |
| }); | |
| // Cart drawer | |
| const cartBtn = document.getElementById('cartBtn'); | |
| const closeCart = document.getElementById('closeCart'); | |
| const cartDrawer = document.getElementById('cartDrawer'); | |
| cartBtn.addEventListener('click', () => { | |
| cartDrawer.classList.add('open'); | |
| }); | |
| closeCart.addEventListener('click', () => { | |
| cartDrawer.classList.remove('open'); | |
| }); | |
| // Search overlay | |
| const searchBtn = document.getElementById('searchBtn'); | |
| const searchOverlay = document.getElementById('searchOverlay'); | |
| const closeSearch = document.getElementById('closeSearch'); | |
| const overlaySearchInput = document.getElementById('overlaySearchInput'); | |
| const searchResults = document.getElementById('searchResults'); | |
| searchBtn.addEventListener('click', () => { | |
| searchOverlay.classList.add('active'); | |
| overlaySearchInput.focus(); | |
| }); | |
| closeSearch.addEventListener('click', () => { | |
| searchOverlay.classList.remove('active'); | |
| }); | |
| overlaySearchInput.addEventListener('input', (e) => { | |
| const query = e.target.value.toLowerCase(); | |
| const results = products.filter(p => | |
| p.name.toLowerCase().includes(query) || | |
| p.category.toLowerCase().includes(query) | |
| ); | |
| searchResults.innerHTML = results.map(product => ` | |
| <div class="flex items-center space-x-3 p-3 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg cursor-pointer"> | |
| <img src="${product.image}" alt="${product.name}" class="w-12 h-12 rounded-lg object-cover"> | |
| <div> | |
| <p class="font-medium">${product.name}</p> | |
| <p class="text-sm text-slate-500 dark:text-slate-400">$${product.price}</p> | |
| </div> | |
| </div> | |
| `).join(''); | |
| }); | |
| // Floating action button | |
| const fab = document.getElementById('fab'); | |
| fab.addEventListener('click', () => { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| }); | |
| // Show/hide FAB based on scroll | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 300) { | |
| fab.style.transform = 'scale(1)'; | |
| } else { | |
| fab.style.transform = 'scale(0)'; | |
| } | |
| }); | |
| // Initialize | |
| renderProducts(); | |
| updateCart(); | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |