| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>TechVault - Premium Electronics</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body class="bg-slate-950 text-slate-100 font-['Inter'] antialiased overflow-x-hidden"> |
|
|
| |
| <nav class="fixed top-0 w-full z-50 bg-slate-950/80 backdrop-blur-md border-b border-slate-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-16"> |
| |
| <div class="flex items-center gap-2 cursor-pointer" onclick="window.scrollTo(0,0)"> |
| <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center"> |
| <i data-lucide="zap" class="w-5 h-5 text-white"></i> |
| </div> |
| <span class="text-xl font-bold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent">TechVault</span> |
| </div> |
|
|
| |
| <div class="hidden md:flex items-center gap-8"> |
| <a href="#products" class="text-sm font-medium text-slate-300 hover:text-white transition-colors">Products</a> |
| <a href="#deals" class="text-sm font-medium text-slate-300 hover:text-white transition-colors">Deals</a> |
| <a href="#categories" class="text-sm font-medium text-slate-300 hover:text-white transition-colors">Categories</a> |
| <a href="#support" class="text-sm font-medium text-slate-300 hover:text-white transition-colors">Support</a> |
| </div> |
|
|
| |
| <div class="flex items-center gap-4"> |
| <button class="p-2 hover:bg-slate-800 rounded-full transition-colors" onclick="toggleSearch()"> |
| <i data-lucide="search" class="w-5 h-5 text-slate-300"></i> |
| </button> |
| <button class="p-2 hover:bg-slate-800 rounded-full transition-colors relative" onclick="toggleCart()"> |
| <i data-lucide="shopping-cart" class="w-5 h-5 text-slate-300"></i> |
| <span id="cart-badge" class="absolute -top-1 -right-1 w-5 h-5 bg-blue-500 text-xs rounded-full flex items-center justify-center font-semibold hidden">0</span> |
| </button> |
| <button class="md:hidden p-2 hover:bg-slate-800 rounded-full transition-colors" onclick="toggleMobileMenu()"> |
| <i data-lucide="menu" class="w-5 h-5 text-slate-300"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="search-overlay" class="hidden absolute top-full left-0 w-full bg-slate-900 border-b border-slate-800 p-4"> |
| <div class="max-w-3xl mx-auto relative"> |
| <i data-lucide="search" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"></i> |
| <input type="text" id="search-input" placeholder="Search for products..." |
| class="w-full pl-12 pr-4 py-3 bg-slate-800 rounded-xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| </div> |
|
|
| |
| <div id="mobile-menu" class="hidden md:hidden bg-slate-900 border-b border-slate-800"> |
| <div class="px-4 py-4 space-y-2"> |
| <a href="#products" class="block py-2 text-slate-300 hover:text-white">Products</a> |
| <a href="#deals" class="block py-2 text-slate-300 hover:text-white">Deals</a> |
| <a href="#categories" class="block py-2 text-slate-300 hover:text-white">Categories</a> |
| <a href="#support" class="block py-2 text-slate-300 hover:text-white">Support</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="relative pt-32 pb-20 overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-600/20 via-purple-600/20 to-slate-950 pointer-events-none"></div> |
| <div class="absolute top-20 right-0 w-96 h-96 bg-blue-500/30 rounded-full blur-3xl pointer-events-none"></div> |
| <div class="absolute bottom-0 left-0 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl pointer-events-none"></div> |
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> |
| <div class="space-y-8 animate-fade-in"> |
| <div class="inline-flex items-center gap-2 px-4 py-2 bg-blue-500/10 border border-blue-500/20 rounded-full"> |
| <span class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span> |
| <span class="text-sm font-medium text-blue-400">New Arrivals Available</span> |
| </div> |
| <h1 class="text-5xl md:text-7xl font-bold leading-tight"> |
| Next Gen <br> |
| <span class="bg-gradient-to-r from-blue-400 via-cyan-400 to-teal-400 bg-clip-text text-transparent">Electronics</span> |
| </h1> |
| <p class="text-lg text-slate-400 max-w-lg"> |
| Discover cutting-edge technology with premium devices. From flagship smartphones to professional audio equipment. |
| </p> |
| <div class="flex flex-wrap gap-4"> |
| <button onclick="scrollToProducts()" class="px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl transition-all transform hover:scale-105 flex items-center gap-2"> |
| Shop Now |
| <i data-lucide="arrow-right" class="w-5 h-5"></i> |
| </button> |
| <button class="px-8 py-4 bg-slate-800 hover:bg-slate-700 text-white font-semibold rounded-xl transition-all flex items-center gap-2"> |
| View Deals |
| <i data-lucide="tag" class="w-5 h-5"></i> |
| </button> |
| </div> |
| <div class="flex items-center gap-8 pt-4"> |
| <div> |
| <div class="text-2xl font-bold text-white">50K+</div> |
| <div class="text-sm text-slate-400">Products Sold</div> |
| </div> |
| <div class="w-px h-12 bg-slate-700"></div> |
| <div> |
| <div class="text-2xl font-bold text-white">4.9</div> |
| <div class="text-sm text-slate-400">Customer Rating</div> |
| </div> |
| <div class="w-px h-12 bg-slate-700"></div> |
| <div> |
| <div class="text-2xl font-bold text-white">24/7</div> |
| <div class="text-sm text-slate-400">Support</div> |
| </div> |
| </div> |
| </div> |
| <div class="relative animate-float"> |
| <div class="relative z-10"> |
| <img src="https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?w=800&auto=format&fit=crop&q=80" alt="Premium Headphones" class="rounded-3xl shadow-2xl shadow-blue-500/20 w-full object-cover"> |
| </div> |
| <div class="absolute -bottom-6 -right-6 bg-slate-800 p-4 rounded-2xl border border-slate-700 shadow-xl"> |
| <div class="flex items-center gap-3"> |
| <div class="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center"> |
| <i data-lucide="check" class="w-6 h-6 text-green-500"></i> |
| </div> |
| <div> |
| <div class="font-semibold text-white">In Stock</div> |
| <div class="text-sm text-slate-400">Free Shipping</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="categories" class="py-20 bg-slate-900/50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-white mb-4">Shop by Category</h2> |
| <p class="text-slate-400">Browse our wide range of premium electronics</p> |
| </div> |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4"> |
| <button onclick="filterByCategory('all')" class="category-btn active group p-6 bg-slate-800 hover:bg-slate-700 rounded-2xl border border-slate-700 hover:border-blue-500/50 transition-all text-center"> |
| <div class="w-12 h-12 mx-auto mb-3 bg-blue-500/20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform"> |
| <i data-lucide="layout-grid" class="w-6 h-6 text-blue-400"></i> |
| </div> |
| <span class="font-medium text-sm">All</span> |
| </button> |
| <button onclick="filterByCategory('phones')" class="category-btn group p-6 bg-slate-800 hover:bg-slate-700 rounded-2xl border border-slate-700 hover:border-blue-500/50 transition-all text-center"> |
| <div class="w-12 h-12 mx-auto mb-3 bg-purple-500/20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform"> |
| <i data-lucide="smartphone" class="w-6 h-6 text-purple-400"></i> |
| </div> |
| <span class="font-medium text-sm">Phones</span> |
| </button> |
| <button onclick="filterByCategory('laptops')" class="category-btn group p-6 bg-slate-800 hover:bg-slate-700 rounded-2xl border border-slate-700 hover:border-blue-500/50 transition-all text-center"> |
| <div class="w-12 h-12 mx-auto mb-3 bg-cyan-500/20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform"> |
| <i data-lucide="laptop" class="w-6 h-6 text-cyan-400"></i> |
| </div> |
| <span class="font-medium text-sm">Laptops</span> |
| </button> |
| <button onclick="filterByCategory('audio')" class="category-btn group p-6 bg-slate-800 hover:bg-slate-700 rounded-2xl border border-slate-700 hover:border-blue-500/50 transition-all text-center"> |
| <div class="w-12 h-12 mx-auto mb-3 bg-pink-500/20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform"> |
| <i data-lucide="headphones" class="w-6 h-6 text-pink-400"></i> |
| </div> |
| <span class="font-medium text-sm">Audio</span> |
| </button> |
| <button onclick="filterByCategory('gaming')" class="category-btn group p-6 bg-slate-800 hover:bg-slate-700 rounded-2xl border border-slate-700 hover:border-blue-500/50 transition-all text-center"> |
| <div class="w-12 h-12 mx-auto mb-3 bg-orange-500/20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform"> |
| <i data-lucide="gamepad-2" class="w-6 h-6 text-orange-400"></i> |
| </div> |
| <span class="font-medium text-sm">Gaming</span> |
| </button> |
| <button onclick="filterByCategory('accessories')" class="category-btn group p-6 bg-slate-800 hover:bg-slate-700 rounded-2xl border border-slate-700 hover:border-blue-500/50 transition-all text-center"> |
| <div class="w-12 h-12 mx-auto mb-3 bg-emerald-500/20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform"> |
| <i data-lucide="watch" class="w-6 h-6 text-emerald-400"></i> |
| </div> |
| <span class="font-medium text-sm">Accessories</span> |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="products" class="py-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4"> |
| <div> |
| <h2 class="text-3xl font-bold text-white mb-2">Featured Products</h2> |
| <p class="text-slate-400">Handpicked premium electronics for you</p> |
| </div> |
| <div class="flex items-center gap-4"> |
| <select id="sort-select" onchange="sortProducts()" class="px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="featured">Featured</option> |
| <option value="price-low">Price: Low to High</option> |
| <option value="price-high">Price: High to Low</option> |
| <option value="newest">Newest</option> |
| </select> |
| </div> |
| </div> |
|
|
| |
| <div id="products-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> |
| |
| </div> |
|
|
| <div class="text-center mt-12"> |
| <button class="px-8 py-3 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-xl font-medium transition-all"> |
| Load More Products |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-slate-900/30 border-y border-slate-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="flex items-start gap-4 p-6 bg-slate-800/50 rounded-2xl border border-slate-700"> |
| <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center flex-shrink-0"> |
| <i data-lucide="truck" class="w-6 h-6 text-blue-400"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-white mb-1">Free Express Shipping</h3> |
| <p class="text-sm text-slate-400">On all orders over $500. International delivery available.</p> |
| </div> |
| </div> |
| <div class="flex items-start gap-4 p-6 bg-slate-800/50 rounded-2xl border border-slate-700"> |
| <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center flex-shrink-0"> |
| <i data-lucide="shield-check" class="w-6 h-6 text-green-400"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-white mb-1">2-Year Warranty</h3> |
| <p class="text-sm text-slate-400">Full coverage on all electronics with easy replacements.</p> |
| </div> |
| </div> |
| <div class="flex items-start gap-4 p-6 bg-slate-800/50 rounded-2xl border border-slate-700"> |
| <div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center flex-shrink-0"> |
| <i data-lucide="rotate-ccw" class="w-6 h-6 text-purple-400"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-white mb-1">30-Day Returns</h3> |
| <p class="text-sm text-slate-400">Not satisfied? Return within 30 days for full refund.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20"> |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <div class="p-8 md:p-12 bg-gradient-to-br from-blue-600/20 to-purple-600/20 rounded-3xl border border-blue-500/20"> |
| <h2 class="text-3xl font-bold text-white mb-4">Stay Updated</h2> |
| <p class="text-slate-400 mb-8 max-w-lg mx-auto">Subscribe to get exclusive deals, new arrival alerts, and tech news delivered to your inbox.</p> |
| <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto" onsubmit="handleSubscribe(event)"> |
| <input type="email" placeholder="Enter your email" required |
| class="flex-1 px-6 py-3 bg-slate-950/50 border border-slate-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-slate-500"> |
| <button type="submit" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl transition-colors whitespace-nowrap"> |
| Subscribe |
| </button> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-slate-900 border-t border-slate-800 pt-16 pb-8"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-12"> |
| <div class="col-span-2 lg:col-span-2"> |
| <div class="flex items-center gap-2 mb-4"> |
| <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center"> |
| <i data-lucide="zap" class="w-5 h-5 text-white"></i> |
| </div> |
| <span class="text-xl font-bold text-white">TechVault</span> |
| </div> |
| <p class="text-slate-400 mb-6 max-w-sm">Your trusted destination for premium electronics. Quality products, exceptional service, guaranteed satisfaction.</p> |
| <div class="flex gap-4"> |
| <a href="#" class="w-10 h-10 bg-slate-800 hover:bg-slate-700 rounded-lg flex items-center justify-center transition-colors"> |
| <i data-lucide="twitter" class="w-5 h-5 text-slate-400"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-slate-800 hover:bg-slate-700 rounded-lg flex items-center justify-center transition-colors"> |
| <i data-lucide="instagram" class="w-5 h-5 text-slate-400"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-slate-800 hover:bg-slate-700 rounded-lg flex items-center justify-center transition-colors"> |
| <i data-lucide="facebook" class="w-5 h-5 text-slate-400"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-slate-800 hover:bg-slate-700 rounded-lg flex items-center justify-center transition-colors"> |
| <i data-lucide="youtube" class="w-5 h-5 text-slate-400"></i> |
| </a> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-semibold text-white mb-4">Products</h4> |
| <ul class="space-y-3 text-sm text-slate-400"> |
| <li><a href="#" class="hover:text-white transition-colors">Smartphones</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Laptops</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Audio</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Gaming</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Accessories</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-semibold text-white mb-4">Support</h4> |
| <ul class="space-y-3 text-sm text-slate-400"> |
| <li><a href="#" class="hover:text-white transition-colors">Help Center</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Track Order</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Returns</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Warranty</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Contact Us</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-semibold text-white mb-4">Company</h4> |
| <ul class="space-y-3 text-sm text-slate-400"> |
| <li><a href="#" class="hover:text-white transition-colors">About Us</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Careers</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Press</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li> |
| <li><a href="#" class="hover:text-white transition-colors">Terms of Service</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-4"> |
| <p class="text-sm text-slate-500">© 2024 TechVault. All rights reserved.</p> |
| <div class="flex items-center gap-6"> |
| <div class="flex items-center gap-2 text-sm text-slate-500"> |
| <i data-lucide="credit-card" class="w-4 h-4"></i> |
| <span>Secure Payment</span> |
| </div> |
| <div class="flex gap-2"> |
| <div class="w-8 h-5 bg-slate-800 rounded"></div> |
| <div class="w-8 h-5 bg-slate-800 rounded"></div> |
| <div class="w-8 h-5 bg-slate-800 rounded"></div> |
| <div class="w-8 h-5 bg-slate-800 rounded"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="cart-sidebar" class="fixed inset-y-0 right-0 w-full md:w-96 bg-slate-900 border-l border-slate-800 transform translate-x-full transition-transform duration-300 z-50 shadow-2xl"> |
| <div class="flex flex-col h-full"> |
| <div class="flex items-center justify-between p-6 border-b border-slate-800"> |
| <h2 class="text-xl font-bold text-white flex items-center gap-2"> |
| <i data-lucide="shopping-cart" class="w-5 h-5"></i> |
| Your Cart |
| </h2> |
| <button onclick="toggleCart()" class="p-2 hover:bg-slate-800 rounded-lg transition-colors"> |
| <i data-lucide="x" class="w-5 h-5 text-slate-400"></i> |
| </button> |
| </div> |
| <div id="cart-items" class="flex-1 overflow-y-auto p-6 space-y-4"> |
| <div class="text-center text-slate-500 py-12"> |
| <i data-lucide="shopping-bag" class="w-12 h-12 mx-auto mb-4 opacity-50"></i> |
| <p>Your cart is empty</p> |
| </div> |
| </div> |
| <div class="p-6 border-t border-slate-800 bg-slate-900"> |
| <div class="space-y-3 mb-6"> |
| <div class="flex justify-between text-sm"> |
| <span class="text-slate-400">Subtotal</span> |
| <span id="cart-subtotal" class="text-white font-medium">$0.00</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-slate-400">Shipping</span> |
| <span class="text-green-400 font-medium">Free</span> |
| </div> |
| <div class="flex justify-between text-lg font-bold pt-3 border-t border-slate-800"> |
| <span class="text-white">Total</span> |
| <span id="cart-total" class="text-blue-400">$0.00</span> |
| </div> |
| </div> |
| <button onclick="checkout()" class="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl transition-colors"> |
| Checkout |
| </button> |
| </div> |
| </div> |
| </div> |
| <div id="cart-overlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-40 hidden" onclick="toggleCart()"></div> |
|
|
| |
| <div id="product-modal" class="fixed inset-0 z-50 hidden overflow-y-auto"> |
| <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20"> |
| <div class="fixed inset-0 bg-black/70 backdrop-blur-sm transition-opacity" onclick="closeProductModal()"></div> |
| <div class="relative bg-slate-900 rounded-3xl max-w-4xl w-full border border-slate-800 shadow-2xl transform transition-all"> |
| <button onclick="closeProductModal()" class="absolute top-4 right-4 p-2 bg-slate-800 hover:bg-slate-700 rounded-full transition-colors z-10"> |
| <i data-lucide="x" class="w-5 h-5 text-slate-400"></i> |
| </button> |
| <div id="modal-content" class="grid md:grid-cols-2 gap-0"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="toast" class="fixed bottom-6 right-6 bg-slate-800 border border-slate-700 text-white px-6 py-4 rounded-xl shadow-2xl transform translate-y-24 transition-transform duration-300 z-50 flex items-center gap-3"> |
| <div class="w-8 h-8 bg-green-500/20 rounded-full flex items-center justify-center"> |
| <i data-lucide="check" class="w-4 h-4 text-green-500"></i> |
| </div> |
| <span id="toast-message">Added to cart!</span> |
| </div> |
|
|
| <script src="script.js"></script> |
| <script> |
| lucide.createIcons(); |
| </script> |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| </body> |
| </html> |
