WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NexShop - Modern E-commerce Store</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"> <script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { primary: '#3B82F6', secondary: '#10B981', dark: '#1F2937', light: '#F9FAFB' } } } } </script> <style> .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .transition-all { transition: all 0.3s ease; } .cart-badge { position: absolute; top: -8px; right: -8px; background-color: #EF4444; color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; } .mobile-menu { transform: translateX(100%); transition: transform 0.3s ease-in-out; } .mobile-menu.active { transform: translateX(0); } .search-container { opacity: 0; visibility: hidden; transition: all 0.3s ease; } .search-container.active { opacity: 1; visibility: visible; } .login-modal { opacity: 0; visibility: hidden; transition: all 0.3s ease; } .login-modal.active { opacity: 1; visibility: visible; } </style> </head> <body class="bg-gray-50 dark:bg-gray-900 transition-all duration-300"> <!-- Navigation Bar --> <nav class="bg-white dark:bg-gray-800 shadow-md py-4 sticky top-0 z-50"> <div class="container mx-auto px-4 flex justify-between items-center"> <a href="#" class="text-2xl font-bold text-primary dark:text-white">NexShop</a> <div class="hidden md:flex space-x-8"> <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-primary">Home</a> <div class="relative group"> <button class="text-gray-700 dark:text-gray-200 hover:text-primary focus:outline-none"> Categories <i class="fas fa-chevron-down text-xs"></i> </button> <div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-lg rounded-md mt-2 p-2 w-48 z-10"> <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Electronics</a> <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Clothing</a> <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Home & Kitchen</a> <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Books</a> </div> </div> <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-primary">Shop</a> <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-primary">About</a> <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-primary">Contact</a> </div> <div class="flex items-center space-x-4"> <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200"> <i class="fas fa-moon dark:hidden"></i> <i class="fas fa-sun hidden dark:block"></i> </button> <button id="search-toggle" class="text-gray-700 dark:text-gray-200 md:hidden"> <i class="fas fa-search"></i> </button> <div class="hidden md:block"> <button id="search-toggle-desktop" class="text-gray-700 dark:text-gray-200"> <i class="fas fa-search"></i> </button> </div> <a href="#" class="text-gray-700 dark:text-gray-200 relative" id="cart-icon"> <i class="fas fa-shopping-cart"></i> <span class="cart-badge">3</span> </a> <button id="user-toggle" class="text-gray-700 dark:text-gray-200"> <i class="fas fa-user"></i> </button> <button id="mobile-menu-toggle" class="md:hidden text-gray-700 dark:text-gray-200"> <i class="fas fa-bars"></i> </button> </div> </div> <!-- Mobile Search Bar --> <div id="mobile-search" class="search-container md:hidden px-4 mt-2"> <div class="flex"> <input type="text" placeholder="Search products..." class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white dark:border-gray-600"> <button class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-blue-600"> <i class="fas fa-search"></i> </button> </div> </div> </nav> <!-- Mobile Menu --> <div id="mobile-menu" class="mobile-menu fixed inset-0 bg-black bg-opacity-50 z-50 md:hidden"> <div class="absolute right-0 top-0 h-full w-3/4 bg-white dark:bg-gray-800 shadow-lg p-6 overflow-y-auto"> <div class="flex justify-between items-center mb-8"> <span class="text-xl font-bold text-primary dark:text-white">Menu</span> <button id="mobile-menu-close" class="text-gray-700 dark:text-gray-200"> <i class="fas fa-times text-2xl"></i> </button> </div> <div class="mb-6"> <div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-lg mb-4"> <i class="fas fa-user-circle text-gray-600 dark:text-gray-300 text-xl mr-3"></i> <span class="text-gray-700 dark:text-gray-200">Hello, Sign In</span> </div> </div> <nav class="space-y-4 mb-8"> <a href="#" class="block py-2 text-lg font-medium text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700">Home</a> <div> <button class="flex justify-between items-center w-full py-2 text-lg font-medium text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700"> <span>Categories</span> <i class="fas fa-chevron-down"></i> </button> <div class="pl-4 mt-2 space-y-2 hidden"> <a href="#" class="block py-2 text-gray-600 dark:text-gray-300">Electronics</a> <a href="#" class="block py-2 text-gray-600 dark:text-gray-300">Clothing</a> <a href="#" class="block py-2 text-gray-600 dark:text-gray-300">Home & Kitchen</a> <a href="#" class="block py-2 text-gray-600 dark:text-gray-300">Books</a> </div> </div> <a href="#" class="block py-2 text-lg font-medium text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700">Shop</a> <a href="#" class="block py-2 text-lg font-medium text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700">About</a> <a href="#" class="block py-2 text-lg font-medium text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700">Contact</a> </nav> <div class="space-y-4 pt-4 border-t border-gray-200 dark:border-gray-700"> <a href="#" class="flex items-center text-gray-700 dark:text-gray-200"> <i class="fas fa-shopping-cart mr-3"></i> <span>Cart</span> <span class="cart-badge ml-2">3</span> </a> <a href="#" class="flex items-center text-gray-700 dark:text-gray-200"> <i class="fas fa-heart mr-3"></i> <span>Wishlist</span> </a> <a href="#" class="flex items-center text-gray-700 dark:text-gray-200"> <i class="fas fa-history mr-3"></i> <span>Order History</span> </a> <a href="#" class="flex items-center text-gray-700 dark:text-gray-200"> <i class="fas fa-cog mr-3"></i> <span>Settings</span> </a> </div> </div> </div> <!-- Login Modal --> <div id="login-modal" class="login-modal fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md p-6"> <div class="flex justify-between items-center mb-6"> <h3 class="text-2xl font-bold text-gray-800 dark:text-white">Sign In</h3> <button id="login-close" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"> <i class="fas fa-times text-xl"></i> </button> </div> <form class="space-y-4"> <div> <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label> <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white dark:border-gray-600" placeholder="Your email"> </div> <div> <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label> <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white dark:border-gray-600" placeholder="Your password"> </div> <div class="flex items-center justify-between"> <div class="flex items-center"> <input type="checkbox" id="remember" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"> <label for="remember" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Remember me</label> </div> <a href="#" class="text-sm text-primary hover:underline">Forgot password?</a> </div> <button type="submit" class="w-full bg-primary text-white py-2 rounded-lg hover:bg-blue-600 transition">Sign In</button> </form> <div class="mt-6 text-center"> <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-primary hover:underline">Sign Up</a></p> </div> <div class="relative my-6"> <div class="absolute inset-0 flex items-center"> <div class="w-full border-t border-gray-300 dark:border-gray-600"></div> </div> <div class="relative flex justify-center text-sm"> <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span> </div> </div> <div class="grid grid-cols-2 gap-4"> <button class="bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 py-2 rounded-lg flex items-center justify-center"> <i class="fab fa-google mr-2"></i> Google </button> <button class="bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 py-2 rounded-lg flex items-center justify-center"> <i class="fab fa-facebook-f mr-2"></i> Facebook </button> </div> </div> </div> <!-- Hero Section --> <section class="bg-gradient-to-r from-blue-500 to-purple-600 dark:from-blue-700 dark:to-purple-800 text-white 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 mb-4">Summer Sale Up To 50% Off</h1> <p class="text-xl mb-6">Get the latest products with amazing discounts. Limited time offer!</p> <div class="flex space-x-4"> <a href="#" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100">Shop Now</a> <a href="#" class="border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600">Learn More</a> </div> </div> <div class="md:w-1/2"> <img src="https://images.unsplash.com/photo-1607082350899-7e105aa886ae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=772&q=80" alt="Hero Image" class="rounded-lg shadow-xl"> </div> </div> </section> <!-- Product Categories --> <section class="py-12 bg-white dark:bg-gray-800"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12 text-gray-800 dark:text-white">Shop By Category</h2> <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-center hover:shadow-lg transition-shadow"> <div class="bg-blue-100 dark:bg-blue-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-laptop text-2xl text-blue-600 dark:text-blue-300"></i> </div> <h3 class="font-semibold text-gray-800 dark:text-white">Electronics</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Latest gadgets</p> </div> <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-center hover:shadow-lg transition-shadow"> <div class="bg-green-100 dark:bg-green-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-tshirt text-2xl text-green-600 dark:text-green-300"></i> </div> <h3 class="font-semibold text-gray-800 dark:text-white">Clothing</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Fashion trends</p> </div> <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-center hover:shadow-lg transition-shadow"> <div class="bg-yellow-100 dark:bg-yellow-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-utensils text-2xl text-yellow-600 dark:text-yellow-300"></i> </div> <h3 class="font-semibold text-gray-800 dark:text-white">Home & Kitchen</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Essentials</p> </div> <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-center hover:shadow-lg transition-shadow"> <div class="bg-red-100 dark:bg-red-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-book text-2xl text-red-600 dark:text-red-300"></i> </div> <h3 class="font-semibold text-gray-800 dark:text-white">Books</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Best sellers</p> </div> </div> </div> </section> <!-- Featured Products --> <section class="py-12 bg-gray-100 dark:bg-gray-900"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12 text-gray-800 dark:text-white">Featured Products</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <!-- Product Card --> <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md product-card transition-all"> <div class="relative"> <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80" alt="Smart Watch" 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">Sale</span> </div> <div class="p-4"> <h3 class="font-semibold text-lg text-gray-800 dark:text-white">Smart Watch Series 5</h3> <div class="flex items-center mt-2"> <div class="flex text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> <span class="text-gray-600 dark:text-gray-300 text-sm ml-2">(4.5)</span> </div> <div class="flex items-center justify-between mt-4"> <span class="text-xl font-bold text-gray-800 dark:text-white">$249.99</span> <span class="text-sm text-gray-500 line-through">$299.99</span> </div> <button class="w-full mt-4 bg-primary text-white py-2 rounded-lg hover:bg-blue-600">Add to Cart</button> </div> </div> <!-- Product Card --> <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md product-card transition-all"> <div class="relative"> <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=499&q=80" alt="Wireless Headphones" class="w-full h-48 object-cover"> </div> <div class="p-4"> <h3 class="font-semibold text-lg text-gray-800 dark:text-white">Wireless Headphones</h3> <div class="flex items-center mt-2"> <div class="flex text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> <span class="text-gray-600 dark:text-gray-300 text-sm ml-2">(4.0)</span> </div> <div class="flex items-center justify-between mt-4"> <span class="text-xl font-bold text-gray-800 dark:text-white">$159.99</span> </div> <button class="w-full mt-4 bg-primary text-white py-2 rounded-lg hover:bg-blue-600">Add to Cart</button> </div> </div> <!-- Product Card --> <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md product-card transition-all"> <div class="relative"> <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80" alt="Running Shoes" 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">New</span> </div> <div class="p-4"> <h3 class="font-semibold text-lg text-gray-800 dark:text-white">Running Shoes</h3> <div class="flex items-center mt-2"> <div class="flex text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <span class="text-gray-600 dark:text-gray-300 text-sm ml-2">(5.0)</span> </div> <div class="flex items-center justify-between mt-4"> <span class="text-xl font-bold text-gray-800 dark:text-white">$89.99</span> </div> <button class="w-full mt-4 bg-primary text-white py-2 rounded-lg hover:bg-blue-600">Add to Cart</button> </div> </div> <!-- Product Card --> <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md product-card transition-all"> <div class="relative"> <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="Wireless Earbuds" class="w-full h-48 object-cover"> </div> <div class="p-4"> <h3 class="font-semibold text-lg text-gray-800 dark:text-white">Wireless Earbuds</h3> <div class="flex items-center mt-2"> <div class="flex text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> <span class="text-gray-600 dark:text-gray-300 text-sm ml-2">(4.5)</span> </div> <div class="flex items-center justify-between mt-4"> <span class="text-xl font-bold text-gray-800 dark:text-white">$129.99</span> <span class="text-sm text-gray-500 line-through">$149.99</span> </div> <button class="w-full mt-4 bg-primary text-white py-2 rounded-lg hover:bg-blue-600">Add to Cart</button> </div> </div> </div> <div class="text-center mt-12"> <a href="#" class="inline-block bg-primary text-white px-6 py-3 rounded-lg hover:bg-blue-600">View All Products</a> </div> </div> </section> <!-- Newsletter Section --> <section class="py-12 bg-primary dark:bg-blue-800"> <div class="container mx-auto px-4 text-center"> <h2 class="text-3xl font-bold text-white mb-4">Subscribe to Our Newsletter</h2> <p class="text-blue-100 mb-8">Get the latest updates, offers and special announcements</p> <form class="max-w-md mx-auto flex"> <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none"> <button type="submit" class="bg-secondary text-white px-6 py-3 rounded-r-lg hover:bg-green-600">Subscribe</button> </form> </div> </section> <!-- Footer --> <footer class="bg-gray-800 text-white py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div> <h3 class="text-xl font-bold mb-4">NexShop</h3> <p class="text-gray-400">Your one-stop destination for all your shopping needs. Quality products at affordable prices.</p> <div class="flex space-x-4 mt-4"> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> </div> </div> <div> <h3 class="text-xl font-bold mb-4">Quick Links</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Shop</a></li> <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-4">Customer Service</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white">Track Order</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Return Policy</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Shipping Policy</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Terms & Conditions</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-4">Contact Info</h3> <ul class="space-y-2"> <li class="flex items-center"> <i class="fas fa-map-marker-alt mr-2 text-gray-400"></i> <span class="text-gray-400">123 Commerce St, City, Country</span> </li> <li class="flex items-center"> <i class="fas fa-phone mr-2 text-gray-400"></i> <span class="text-gray-400">+1 234 567 8900</span> </li> <li class="flex items-center"> <i class="fas fa-envelope mr-2 text-gray-400"></i> <span class="text-gray-400">info@nexshop.com</span> </li> </ul> </div> </div> <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> <p>© 2023 NexShop. All rights reserved.</p> </div> </div> </footer> <script> // Dark/Light Mode Toggle const themeToggle = document.getElementById('theme-toggle'); const html = document.documentElement; // Check for saved theme preference or respect OS preference if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { html.classList.add('dark'); } else { html.classList.remove('dark'); } themeToggle.addEventListener('click', () => { html.classList.toggle('dark'); localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); }); // Simple Cart Functionality (for demonstration) const addToCartButtons = document.querySelectorAll('button:not(#theme-toggle):not(#mobile-menu-toggle):not(#search-toggle):not(#search-toggle-desktop):not(#user-toggle):not(#mobile-menu-close):not(#login-close)'); let cartCount = 3; // Starting count addToCartButtons.forEach(button => { if (button.textContent === 'Add to Cart') { button.addEventListener('click', () => { cartCount++; document.querySelector('.cart-badge').textContent = cartCount; // Show added feedback const originalText = button.textContent; button.textContent = 'Added!'; button.classList.add('bg-green-500'); setTimeout(() => { button.textContent = originalText; button.classList.remove('bg-green-500'); }, 1500); }); } }); // Mobile Menu Functionality const mobileMenuToggle = document.getElementById('mobile-menu-toggle'); const mobileMenuClose = document.getElementById('mobile-menu-close'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuToggle.addEventListener('click', () => { mobileMenu.classList.add('active'); document.body.style.overflow = 'hidden'; }); mobileMenuClose.addEventListener('click', () => { mobileMenu.classList.remove('active'); document.body.style.overflow = 'auto'; }); // Search Toggle Functionality const searchToggle = document.getElementById('search-toggle'); const searchToggleDesktop = document.getElementById('search-toggle-desktop'); const mobileSearch = document.getElementById('mobile-search'); searchToggle.addEventListener('click', () => { mobileSearch.classList.toggle('active'); }); searchToggleDesktop.addEventListener('click', () => { alert('Desktop search functionality would open a search modal or focus on a search bar here.'); }); // User Toggle Functionality const userToggle = document.getElementById('user-toggle'); const loginModal = document.getElementById('login-modal'); const loginClose = document.getElementById('login-close'); userToggle.addEventListener('click', () => { loginModal.classList.add('active'); document.body.style.overflow = 'hidden'; }); loginClose.addEventListener('click', () => { loginModal.classList.remove('active'); document.body.style.overflow = 'auto'; }); // Close modals when clicking outside document.addEventListener('click', (e) => { if (e.target === mobileMenu) { mobileMenu.classList.remove('active'); document.body.style.overflow = 'auto'; } if (e.target === loginModal) { loginModal.classList.remove('active'); document.body.style.overflow = 'auto'; } }); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NexShop - Modern E-commerce Store</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"> <script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { primary: '#3B82F6', secondary: '#10B981', dark: '#1F2937', light: '#F9FAFB' } } } } </script> <style> .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .transition-all { transition: all 0.3s ease; } .cart-badge { position: absolute; top: -8px; right: -8px; background-color: #EF4444; color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; } .mobile-menu { transform: translateX(100%); transition: transform 0.3s ease-in-out; } .mobile-menu.active { transform: translateX(0); } .search-container { opacity: 0; visibility: hidden; transition: all 0.3s ease; } .search-container.active { opacity: 1; visibility: visible; } .login-modal { opacity: 0; visibility: hidden; transition: all 0.3s ease; } .login-modal.active { opacity: 1; visibility: visible; } </style> </head> <body class="bg-gray-50 dark:bg-gray-900 transition-all duration-300"> <!-- Navigation Bar --> <nav class="bg-white dark:bg-gray-800 shadow-md py-4 sticky top-0 z-50"> <div class="container mx-auto px-4 flex justify-between items-center"> <a href="#" class="text-2xl font-bold text-primary dark:text-white">NexShop</a> <div class="hidden md:flex space-x-8"> <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-primary">Home</a> <div class="relative group"> <button class="text-gray-700 dark:text-gray-200 hover:text-primary focus:outline-none"> Categories <i class="fas fa-chevron-down text-xs"></i> </button> <div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-lg rounded-md mt-2 p-2 w-48 z-10"> <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Electronics</a> <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Clothing</a> <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Home & Kitchen</a> <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Books</a> </div> </div> <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-primary">Shop</a> <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-primary">About</a> <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-primary">Contact</a> </div> <div class="flex items-center space-x-4"> <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200"> <i class="fas fa-moon dark:hidden"></i> <i class="fas fa-sun hidden dark:block"></i> </button> <button id="search-toggle" class="text-gray-700 dark:text-gray-200 md:hidden"> <i class="fas fa-search"></i> </button> <div class="hidden md:block"> <button id="search-toggle-desktop" class="text-gray-700 dark:text-gray-200"> <i class="fas fa-search"></i> </button> </div> <a href="#" class="text-gray-700 dark:text-gray-200 relative" id="cart-icon"> <i class="fas fa-shopping-cart"></i> <span class="cart-badge">3</span> </a> <button id="user-toggle" class="text-gray-700 dark:text-gray-200"> <i class="fas fa-user"></i> </button> <button id="mobile-menu-toggle" class="md:hidden text-gray-700 dark:text-gray-200"> <i class="fas fa-bars"></i> </button> </div> </div> <!-- Mobile Search Bar --> <div id="mobile-search" class="search-container md:hidden px-4 mt-2"> <div class="flex"> <input type="text" placeholder="Search products..." class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white dark:border-gray-600"> <button class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-blue-600"> <i class="fas fa-search"></i> </button> </div> </div> </nav> <!-- Mobile Menu --> <div id="mobile-menu" class="mobile-menu fixed inset-0 bg-black bg-opacity-50 z-50 md:hidden"> <div class="absolute right-0 top-0 h-full w-3/4 bg-white dark:bg-gray-800 shadow-lg p-6 overflow-y-auto"> <div class="flex justify-between items-center mb-8"> <span class="text-xl font-bold text-primary dark:text-white">Menu</span> <button id="mobile-menu-close" class="text-gray-700 dark:text-gray-200"> <i class="fas fa-times text-2xl"></i> </button> </div> <div class="mb-6"> <div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-lg mb-4"> <i class="fas fa-user-circle text-gray-600 dark:text-gray-300 text-xl mr-3"></i> <span class="text-gray-700 dark:text-gray-200">Hello, Sign In</span> </div> </div> <nav class="space-y-4 mb-8"> <a href="#" class="block py-2 text-lg font-medium text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700">Home</a> <div> <button class="flex justify-between items-center w-full py-2 text-lg font-medium text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700"> <span>Categories</span> <i class="fas fa-chevron-down"></i> </button> <div class="pl-4 mt-2 space-y-2 hidden"> <a href="#" class="block py-2 text-gray-600 dark:text-gray-300">Electronics</a> <a href="#" class="block py-2 text-gray-600 dark:text-gray-300">Clothing</a> <a href="#" class="block py-2 text-gray-600 dark:text-gray-300">Home & Kitchen</a> <a href="#" class="block py-2 text-gray-600 dark:text-gray-300">Books</a> </div> </div> <a href="#" class="block py-2 text-lg font-medium text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700">Shop</a> <a href="#" class="block py-2 text-lg font-medium text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700">About</a> <a href="#" class="block py-2 text-lg font-medium text-gray-700 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700">Contact</a> </nav> <div class="space-y-4 pt-4 border-t border-gray-200 dark:border-gray-700"> <a href="#" class="flex items-center text-gray-700 dark:text-gray-200"> <i class="fas fa-shopping-cart mr-3"></i> <span>Cart</span> <span class="cart-badge ml-2">3</span> </a> <a href="#" class="flex items-center text-gray-700 dark:text-gray-200"> <i class="fas fa-heart mr-3"></i> <span>Wishlist</span> </a> <a href="#" class="flex items-center text-gray-700 dark:text-gray-200"> <i class="fas fa-history mr-3"></i> <span>Order History</span> </a> <a href="#" class="flex items-center text-gray-700 dark:text-gray-200"> <i class="fas fa-cog mr-3"></i> <span>Settings</span> </a> </div> </div> </div> <!-- Login Modal --> <div id="login-modal" class="login-modal fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md p-6"> <div class="flex justify-between items-center mb-6"> <h3 class="text-2xl font-bold text-gray-800 dark:text-white">Sign In</h3> <button id="login-close" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"> <i class="fas fa-times text-xl"></i> </button> </div> <form class="space-y-4"> <div> <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label> <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white dark:border-gray-600" placeholder="Your email"> </div> <div> <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label> <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary dark:bg-gray-700 dark:text-white dark:border-gray-600" placeholder="Your password"> </div> <div class="flex items-center justify-between"> <div class="flex items-center"> <input type="checkbox" id="remember" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"> <label for="remember" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Remember me</label> </div> <a href="#" class="text-sm text-primary hover:underline">Forgot password?</a> </div> <button type="submit" class="w-full bg-primary text-white py-2 rounded-lg hover:bg-blue-600 transition">Sign In</button> </form> <div class="mt-6 text-center"> <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-primary hover:underline">Sign Up</a></p> </div> <div class="relative my-6"> <div class="absolute inset-0 flex items-center"> <div class="w-full border-t border-gray-300 dark:border-gray-600"></div> </div> <div class="relative flex justify-center text-sm"> <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span> </div> </div> <div class="grid grid-cols-2 gap-4"> <button class="bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 py-2 rounded-lg flex items-center justify-center"> <i class="fab fa-google mr-2"></i> Google </button> <button class="bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 py-2 rounded-lg flex items-center justify-center"> <i class="fab fa-facebook-f mr-2"></i> Facebook </button> </div> </div> </div> <!-- Hero Section --> <section class="bg-gradient-to-r from-blue-500 to-purple-600 dark:from-blue-700 dark:to-purple-800 text-white 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 mb-4">Summer Sale Up To 50% Off</h1> <p class="text-xl mb-6">Get the latest products with amazing discounts. Limited time offer!</p> <div class="flex space-x-4"> <a href="#" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100">Shop Now</a> <a href="#" class="border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600">Learn More</a> </div> </div> <div class="md:w-1/2"> <img src="https://images.unsplash.com/photo-1607082350899-7e105aa886ae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=772&q=80" alt="Hero Image" class="rounded-lg shadow-xl"> </div> </div> </section> <!-- Product Categories --> <section class="py-12 bg-white dark:bg-gray-800"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12 text-gray-800 dark:text-white">Shop By Category</h2> <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-center hover:shadow-lg transition-shadow"> <div class="bg-blue-100 dark:bg-blue-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-laptop text-2xl text-blue-600 dark:text-blue-300"></i> </div> <h3 class="font-semibold text-gray-800 dark:text-white">Electronics</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Latest gadgets</p> </div> <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-center hover:shadow-lg transition-shadow"> <div class="bg-green-100 dark:bg-green-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-tshirt text-2xl text-green-600 dark:text-green-300"></i> </div> <h3 class="font-semibold text-gray-800 dark:text-white">Clothing</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Fashion trends</p> </div> <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-center hover:shadow-lg transition-shadow"> <div class="bg-yellow-100 dark:bg-yellow-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-utensils text-2xl text-yellow-600 dark:text-yellow-300"></i> </div> <h3 class="font-semibold text-gray-800 dark:text-white">Home & Kitchen</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Essentials</p> </div> <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-6 text-center hover:shadow-lg transition-shadow"> <div class="bg-red-100 dark:bg-red-800 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-book text-2xl text-red-600 dark:text-red-300"></i> </div> <h3 class="font-semibold text-gray-800 dark:text-white">Books</h3> <p class="text-gray-600 dark:text-gray-300 mt-2">Best sellers</p> </div> </div> </div> </section> <!-- Featured Products --> <section class="py-12 bg-gray-100 dark:bg-gray-900"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12 text-gray-800 dark:text-white">Featured Products</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <!-- Product Card --> <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md product-card transition-all"> <div class="relative"> <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80" alt="Smart Watch" 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">Sale</span> </div> <div class="p-4"> <h3 class="font-semibold text-lg text-gray-800 dark:text-white">Smart Watch Series 5</h3> <div class="flex items-center mt-2"> <div class="flex text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> <span class="text-gray-600 dark:text-gray-300 text-sm ml-2">(4.5)</span> </div> <div class="flex items-center justify-between mt-4"> <span class="text-xl font-bold text-gray-800 dark:text-white">$249.99</span> <span class="text-sm text-gray-500 line-through">$299.99</span> </div> <button class="w-full mt-4 bg-primary text-white py-2 rounded-lg hover:bg-blue-600">Add to Cart</button> </div> </div> <!-- Product Card --> <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md product-card transition-all"> <div class="relative"> <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=499&q=80" alt="Wireless Headphones" class="w-full h-48 object-cover"> </div> <div class="p-4"> <h3 class="font-semibold text-lg text-gray-800 dark:text-white">Wireless Headphones</h3> <div class="flex items-center mt-2"> <div class="flex text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> <span class="text-gray-600 dark:text-gray-300 text-sm ml-2">(4.0)</span> </div> <div class="flex items-center justify-between mt-4"> <span class="text-xl font-bold text-gray-800 dark:text-white">$159.99</span> </div> <button class="w-full mt-4 bg-primary text-white py-2 rounded-lg hover:bg-blue-600">Add to Cart</button> </div> </div> <!-- Product Card --> <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md product-card transition-all"> <div class="relative"> <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80" alt="Running Shoes" 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">New</span> </div> <div class="p-4"> <h3 class="font-semibold text-lg text-gray-800 dark:text-white">Running Shoes</h3> <div class="flex items-center mt-2"> <div class="flex text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <span class="text-gray-600 dark:text-gray-300 text-sm ml-2">(5.0)</span> </div> <div class="flex items-center justify-between mt-4"> <span class="text-xl font-bold text-gray-800 dark:text-white">$89.99</span> </div> <button class="w-full mt-4 bg-primary text-white py-2 rounded-lg hover:bg-blue-600">Add to Cart</button> </div> </div> <!-- Product Card --> <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md product-card transition-all"> <div class="relative"> <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="Wireless Earbuds" class="w-full h-48 object-cover"> </div> <div class="p-4"> <h3 class="font-semibold text-lg text-gray-800 dark:text-white">Wireless Earbuds</h3> <div class="flex items-center mt-2"> <div class="flex text-yellow-400"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> <span class="text-gray-600 dark:text-gray-300 text-sm ml-2">(4.5)</span> </div> <div class="flex items-center justify-between mt-4"> <span class="text-xl font-bold text-gray-800 dark:text-white">$129.99</span> <span class="text-sm text-gray-500 line-through">$149.99</span> </div> <button class="w-full mt-4 bg-primary text-white py-2 rounded-lg hover:bg-blue-600">Add to Cart</button> </div> </div> </div> <div class="text-center mt-12"> <a href="#" class="inline-block bg-primary text-white px-6 py-3 rounded-lg hover:bg-blue-600">View All Products</a> </div> </div> </section> <!-- Newsletter Section --> <section class="py-12 bg-primary dark:bg-blue-800"> <div class="container mx-auto px-4 text-center"> <h2 class="text-3xl font-bold text-white mb-4">Subscribe to Our Newsletter</h2> <p class="text-blue-100 mb-8">Get the latest updates, offers and special announcements</p> <form class="max-w-md mx-auto flex"> <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none"> <button type="submit" class="bg-secondary text-white px-6 py-3 rounded-r-lg hover:bg-green-600">Subscribe</button> </form> </div> </section> <!-- Footer --> <footer class="bg-gray-800 text-white py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div> <h3 class="text-xl font-bold mb-4">NexShop</h3> <p class="text-gray-400">Your one-stop destination for all your shopping needs. Quality products at affordable prices.</p> <div class="flex space-x-4 mt-4"> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> </div> </div> <div> <h3 class="text-xl font-bold mb-4">Quick Links</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Shop</a></li> <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-4">Customer Service</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white">Track Order</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Return Policy</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Shipping Policy</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Terms & Conditions</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-4">Contact Info</h3> <ul class="space-y-2"> <li class="flex items-center"> <i class="fas fa-map-marker-alt mr-2 text-gray-400"></i> <span class="text-gray-400">123 Commerce St, City, Country</span> </li> <li class="flex items-center"> <i class="fas fa-phone mr-2 text-gray-400"></i> <span class="text-gray-400">+1 234 567 8900</span> </li> <li class="flex items-center"> <i class="fas fa-envelope mr-2 text-gray-400"></i> <span class="text-gray-400">info@nexshop.com</span> </li> </ul> </div> </div> <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> <p>© 2023 NexShop. All rights reserved.</p> </div> </div> </footer> <script> // Dark/Light Mode Toggle const themeToggle = document.getElementById('theme-toggle'); const html = document.documentElement; // Check for saved theme preference or respect OS preference if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { html.classList.add('dark'); } else { html.classList.remove('dark'); } themeToggle.addEventListener('click', () => { html.classList.toggle('dark'); localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); }); // Simple Cart Functionality (for demonstration) const addToCartButtons = document.querySelectorAll('button:not(#theme-toggle):not(#mobile-menu-toggle):not(#search-toggle):not(#search-toggle-desktop):not(#user-toggle):not(#mobile-menu-close):not(#login-close)'); let cartCount = 3; // Starting count addToCartButtons.forEach(button => { if (button.textContent === 'Add to Cart') { button.addEventListener('click', () => { cartCount++; document.querySelector('.cart-badge').textContent = cartCount; // Show added feedback const originalText = button.textContent; button.textContent = 'Added!'; button.classList.add('bg-green-500'); setTimeout(() => { button.textContent = originalText; button.classList.remove('bg-green-500'); }, 1500); }); } }); // Mobile Menu Functionality const mobileMenuToggle = document.getElementById('mobile-menu-toggle'); const mobileMenuClose = document.getElementById('mobile-menu-close'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuToggle.addEventListener('click', () => { mobileMenu.classList.add('active'); document.body.style.overflow = 'hidden'; }); mobileMenuClose.addEventListener('click', () => { mobileMenu.classList.remove('active'); document.body.style.overflow = 'auto'; }); // Search Toggle Functionality const searchToggle = document.getElementById('search-toggle'); const searchToggleDesktop = document.getElementById('search-toggle-desktop'); const mobileSearch = document.getElementById('mobile-search'); searchToggle.addEventListener('click', () => { mobileSearch.classList.toggle('active'); }); searchToggleDesktop.addEventListener('click', () => { alert('Desktop search functionality would open a search modal or focus on a search bar here.'); }); // User Toggle Functionality const userToggle = document.getElementById('user-toggle'); const loginModal = document.getElementById('login-modal'); const loginClose = document.getElementById('login-close'); userToggle.addEventListener('click', () => { loginModal.classList.add('active'); document.body.style.overflow = 'hidden'; }); loginClose.addEventListener('click', () => { loginModal.classList.remove('active'); document.body.style.overflow = 'auto'; }); // Close modals when clicking outside document.addEventListener('click', (e) => { if (e.target === mobileMenu) { mobileMenu.classList.remove('active'); document.body.style.overflow = 'auto'; } if (e.target === loginModal) { loginModal.classList.remove('active'); document.body.style.overflow = 'auto'; } }); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */