| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Flipkart 2.0 - Modern Online Shopping</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> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #f8fafc; |
| color: #1e293b; |
| scroll-behavior: smooth; |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: #f1f5f9; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: #cbd5e1; |
| border-radius: 4px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: #94a3b8; |
| } |
| |
| |
| .header { |
| box-shadow: 0 4px 12px 0 rgba(0,0,0,.05); |
| border-bottom: 1px solid #e2e8f0; |
| background: white; |
| } |
| |
| |
| .search-bar { |
| box-shadow: 0 2px 8px 0 rgba(0,0,0,.05); |
| border-radius: 8px; |
| transition: all 0.3s cubic-bezier(.25,.8,.25,1); |
| } |
| |
| .search-bar:focus-within { |
| box-shadow: 0 4px 16px 0 rgba(0,0,0,.1); |
| } |
| |
| |
| .category-item { |
| transition: all 0.3s ease; |
| color: #64748b; |
| } |
| |
| .category-item:hover { |
| color: #3b82f6; |
| transform: translateY(-2px); |
| } |
| |
| .category-item.active { |
| color: #3b82f6; |
| position: relative; |
| } |
| |
| .category-item.active::after { |
| content: ''; |
| position: absolute; |
| bottom: -4px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| background: #3b82f6; |
| } |
| |
| |
| .product-card { |
| background: white; |
| border-radius: 12px; |
| overflow: hidden; |
| transition: all 0.3s cubic-bezier(.25,.8,.25,1); |
| box-shadow: 0 1px 3px rgba(0,0,0,0.08); |
| border: 1px solid #e2e8f0; |
| } |
| |
| .product-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); |
| border-color: #3b82f6; |
| } |
| |
| .product-img { |
| height: 180px; |
| object-fit: contain; |
| transition: transform 0.3s ease; |
| } |
| |
| .product-card:hover .product-img { |
| transform: scale(1.05); |
| } |
| |
| .discount-badge { |
| background: linear-gradient(to right, #10b981, #34d399); |
| color: white; |
| border-radius: 4px; |
| padding: 2px 6px; |
| font-size: 11px; |
| font-weight: 500; |
| } |
| |
| .add-to-cart { |
| background: linear-gradient(to right, #3b82f6, #60a5fa); |
| color: white; |
| border-radius: 6px; |
| font-weight: 500; |
| transition: all 0.3s; |
| } |
| |
| .add-to-cart:hover { |
| background: linear-gradient(to right, #2563eb, #3b82f6); |
| transform: translateY(-1px); |
| } |
| |
| |
| .hero-banner { |
| height: 320px; |
| background-image: url('https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1998&q=80'); |
| background-size: cover; |
| background-position: center; |
| border-radius: 12px; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .hero-overlay { |
| position: absolute; |
| inset: 0; |
| background: linear-gradient(45deg, rgba(0,0,0,0.6), rgba(0,0,0,0.3)); |
| } |
| |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| @keyframes slideRight { |
| from { transform: translateX(-20px); opacity: 0; } |
| to { transform: translateX(0); opacity: 1; } |
| } |
| |
| .animate-fadeIn { |
| animation: fadeIn 0.5s ease-out forwards; |
| } |
| |
| .animate-slideRight { |
| animation: slideRight 0.6s ease-out forwards; |
| } |
| |
| |
| .modal { |
| backdrop-filter: blur(5px); |
| } |
| |
| |
| .notification { |
| opacity: 0; |
| transform: translateY(20px); |
| animation: fadeIn 0.3s ease-out forwards; |
| } |
| |
| |
| .cart-sidebar { |
| box-shadow: -10px 0 30px rgba(0,0,0,0.1); |
| } |
| |
| |
| .discount-banner { |
| transition: transform 0.3s ease; |
| } |
| |
| .discount-banner:hover { |
| transform: translateY(-3px); |
| } |
| |
| |
| @media (max-width: 768px) { |
| .hero-banner { |
| height: 200px; |
| } |
| |
| .product-img { |
| height: 120px; |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <div id="notification-area" class="fixed top-4 right-4 z-50 space-y-2 w-full max-w-xs"></div> |
|
|
| |
| <header class="header sticky top-0 z-40"> |
| <div class="container mx-auto px-4"> |
| |
| <div class="flex items-center justify-between py-3 md:py-0"> |
| |
| <a href="#" class="flex items-center"> |
| <h1 class="text-2xl font-bold text-blue-600 flex items-center"> |
| <span class="mr-1">Flipkart</span> |
| <span class="text-xs text-yellow-400 font-normal">Plus</span> |
| </h1> |
| </a> |
| |
| |
| <div class="hidden md:block mx-4 flex-1 max-w-2xl"> |
| <div class="search-bar flex items-center bg-gray-50 p-1.5 rounded-lg"> |
| <input type="text" placeholder="Search for products, brands and more..." |
| class="w-full px-4 py-2 bg-transparent focus:outline-none text-gray-700"> |
| <button class="bg-blue-600 text-white p-2 rounded-lg hover:bg-blue-700 transition"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-center space-x-3 md:space-x-6"> |
| <button id="login-btn" class="hidden md:flex items-center space-x-1 px-3 py-2 text-gray-700 hover:text-blue-600"> |
| <i class="far fa-user"></i> |
| <span>Login</span> |
| </button> |
| |
| <div class="relative group"> |
| <button class="hidden md:flex items-center space-x-1 px-3 py-2 text-gray-700 hover:text-blue-600"> |
| <span>More</span> |
| <i class="fas fa-chevron-down text-xs mt-0.5"></i> |
| </button> |
| |
| <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg hidden group-hover:block z-50 border border-gray-100 animate-fadeIn"> |
| <div class="py-1"> |
| <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"> |
| <i class="far fa-bell mr-2"></i> Notifications |
| </a> |
| <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"> |
| <i class="far fa-question-circle mr-2"></i> Customer Care |
| </a> |
| <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"> |
| <i class="fas fa-ad mr-2"></i> Advertise |
| </a> |
| <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"> |
| <i class="fas fa-mobile-alt mr-2"></i> Download App |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <a href="#" id="cart-button" class="flex items-center space-x-1 px-3 py-2 relative text-gray-700 hover:text-blue-600"> |
| <i class="fas fa-shopping-cart"></i> |
| <span id="cart-count" class="absolute -top-1 -right-1 bg-blue-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold">0</span> |
| <span class="hidden md:inline">Cart</span> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="md:hidden pb-3"> |
| <div class="search-bar flex items-center bg-gray-50 p-1.5 rounded-lg"> |
| <input type="text" placeholder="Search for products..." |
| class="w-full px-4 py-2 bg-transparent focus:outline-none text-gray-700"> |
| <button class="bg-blue-600 text-white p-2 rounded-lg hover:bg-blue-700 transition"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <nav class="bg-white border-t border-gray-100 hidden md:block"> |
| <div class="container mx-auto px-4 overflow-x-auto"> |
| <div class="flex space-x-8 py-3 whitespace-nowrap"> |
| <a href="#" class="category-item text-sm font-medium flex flex-col items-center active"> |
| <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center"> |
| <i class="fas fa-shopping-basket text-blue-600"></i> |
| </div> |
| <span>Grocery</span> |
| </a> |
| <a href="#" class="category-item text-sm font-medium flex flex-col items-center"> |
| <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center"> |
| <i class="fas fa-mobile-alt text-blue-600"></i> |
| </div> |
| <span>Mobiles</span> |
| </a> |
| <a href="#" class="category-item text-sm font-medium flex flex-col items-center"> |
| <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center"> |
| <i class="fas fa-tshirt text-blue-600"></i> |
| </div> |
| <span>Fashion</span> |
| </a> |
| <a href="#" class="category-item text-sm font-medium flex flex-col items-center"> |
| <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center"> |
| <i class="fas fa-laptop text-blue-600"></i> |
| </div> |
| <span>Electronics</span> |
| </a> |
| <a href="#" class="category-item text-sm font-medium flex flex-col items-center"> |
| <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center"> |
| <i class="fas fa-home text-blue-600"></i> |
| </div> |
| <span>Home</span> |
| </a> |
| <a href="#" class="category-item text-sm font-medium flex flex-col items-center"> |
| <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center"> |
| <i class="fas fa-tv text-blue-600"></i> |
| </div> |
| <span>Appliances</span> |
| </a> |
| <a href="#" class="category-item text-sm font-medium flex flex-col items-center"> |
| <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center"> |
| <i class="fas fa-umbrella-beach text-blue-600"></i> |
| </div> |
| <span>Travel</span> |
| </a> |
| <a href="#" class="category-item text-sm font-medium flex flex-col items-center"> |
| <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center"> |
| <i class="fas fa-spa text-blue-600"></i> |
| </div> |
| <span>Beauty</span> |
| </a> |
| <a href="#" class="category-item text-sm font-medium flex flex-col items-center"> |
| <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center"> |
| <i class="fas fa-gamepad text-blue-600"></i> |
| </div> |
| <span>Toys</span> |
| </a> |
| <a href="#" class="category-item text-sm font-medium flex flex-col items-center"> |
| <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center"> |
| <i class="fas fa-couch text-blue-600"></i> |
| </div> |
| <span>Furniture</span> |
| </a> |
| </div> |
| </div> |
| </nav> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-6"> |
| |
| <section class="hero-banner mb-8 rounded-xl overflow-hidden animate-slideRight"> |
| <div class="hero-overlay flex items-center"> |
| <div class="px-8 text-white"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-2">Summer Sale 2023</h2> |
| <p class="text-lg md:text-xl mb-6 max-w-lg">Up to 70% off on all fashion items. Limited time only!</p> |
| <button class="bg-white text-blue-600 px-6 py-3 rounded-xl font-bold hover:bg-gray-100 transition"> |
| Shop Collection <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="mb-10 animate-fadeIn" style="animation-delay: 0.2s"> |
| <div class="flex items-center justify-between mb-6"> |
| <h2 class="text-2xl font-bold text-gray-900">Trending Deals</h2> |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm flex items-center"> |
| View All <i class="fas fa-chevron-right text-xs ml-1"></i> |
| </a> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5"> |
| |
| <div class="product-card transform transition"> |
| <div class="relative overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1611791484670-ce19b801d192?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" |
| alt="iPhone 14" class="product-img w-full"> |
| <div class="absolute top-2 left-2"> |
| <span class="discount-badge">20% OFF</span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-md font-semibold text-gray-800 line-clamp-2">Apple iPhone 14 (Blue, 128GB)</h3> |
| <div class="flex items-center mt-2"> |
| <span class="text-lg font-bold">₹66,999</span> |
| <span class="text-sm text-gray-500 line-through ml-2">₹79,900</span> |
| </div> |
| <div class="flex items-center mt-1"> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-yellow-400 text-sm"></i> |
| <span class="text-sm text-gray-600 ml-1">4.7</span> |
| </div> |
| <span class="text-sm text-gray-500 mx-2">•</span> |
| <span class="text-sm text-gray-500">1,243 Reviews</span> |
| </div> |
| <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2" |
| data-id="1" data-name="iPhone 14" data-price="66999"> |
| <i class="fas fa-shopping-cart"></i> |
| <span>Add to Cart</span> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="product-card transform transition"> |
| <div class="relative overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Samsung TV" class="product-img w-full"> |
| <div class="absolute top-2 left-2"> |
| <span class="discount-badge">30% OFF</span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-md font-semibold text-gray-800 line-clamp-2">Samsung 80 cm (32 inch) HD Smart TV</h3> |
| <div class="flex items-center mt-2"> |
| <span class="text-lg font-bold">₹15,499</span> |
| <span class="text-sm text-gray-500 line-through ml-2">₹19,900</span> |
| </div> |
| <div class="flex items-center mt-1"> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-yellow-400 text-sm"></i> |
| <span class="text-sm text-gray-600 ml-1">4.5</span> |
| </div> |
| <span class="text-sm text-gray-500 mx-2">•</span> |
| <span class="text-sm text-gray-500">892 Reviews</span> |
| </div> |
| <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2" |
| data-id="2" data-name="Samsung TV" data-price="15499"> |
| <i class="fas fa-shopping-cart"></i> |
| <span>Add to Cart</span> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="product-card transform transition"> |
| <div class="relative overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=698&q=80" |
| alt="Shoes" class="product-img w-full"> |
| <div class="absolute top-2 left-2"> |
| <span class="discount-badge">60% OFF</span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-md font-semibold text-gray-800 line-clamp-2">Nike Running Shoes For Men</h3> |
| <div class="flex items-center mt-2"> |
| <span class="text-lg font-bold">₹2,499</span> |
| <span class="text-sm text-gray-500 line-through ml-2">₹5,999</span> |
| </div> |
| <div class="flex items-center mt-1"> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-yellow-400 text-sm"></i> |
| <span class="text-sm text-gray-600 ml-1">4.8</span> |
| </div> |
| <span class="text-sm text-gray-500 mx-2">•</span> |
| <span class="text-sm text-gray-500">1,542 Reviews</span> |
| </div> |
| <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2" |
| data-id="3" data-name="Nike Shoes" data-price="2499"> |
| <i class="fas fa-shopping-cart"></i> |
| <span>Add to Cart</span> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="product-card transform transition"> |
| <div class="relative overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1590658268037-6bf12165ee8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=732&q=80" |
| alt="Headphones" class="product-img w-full"> |
| <div class="absolute top-2 left-2"> |
| <span class="discount-badge">45% OFF</span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-md font-semibold text-gray-800 line-clamp-2">boAt Rockerz 450 Wireless Headphones</h3> |
| <div class="flex items-center mt-2"> |
| <span class="text-lg font-bold">₹1,299</span> |
| <span class="text-sm text-gray-500 line-through ml-2">₹2,990</span> |
| </div> |
| <div class="flex items-center mt-1"> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-yellow-400 text-sm"></i> |
| <span class="text-sm text-gray-600 ml-1">4.3</span> |
| </div> |
| <span class="text-sm text-gray-500 mx-2">•</span> |
| <span class="text-sm text-gray-500">1,024 Reviews</span> |
| </div> |
| <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2" |
| data-id="4" data-name="Boat Headphones" data-price="1299"> |
| <i class="fas fa-shopping-cart"></i> |
| <span>Add to Cart</span> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="product-card transform transition"> |
| <div class="relative overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1523170335258-f5ed11844a49?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" |
| alt="Watch" class="product-img w-full"> |
| <div class="absolute top-2 left-2"> |
| <span class="discount-badge">30% OFF</span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-md font-semibold text-gray-800 line-clamp-2">Noise ColorFit Pro Smart Watch</h3> |
| <div class="flex items-center mt-2"> |
| <span class="text-lg font-bold">₹2,999</span> |
| <span class="text-sm text-gray-500 line-through ml-2">₹4,299</span> |
| </div> |
| <div class="flex items-center mt-1"> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-yellow-400 text-sm"></i> |
| <span class="text-sm text-gray-600 ml-1">4.2</span> |
| </div> |
| <span class="text-sm text-gray-500 mx-2">•</span> |
| <span class="text-sm text-gray-500">876 Reviews</span> |
| </div> |
| <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2" |
| data-id="5" data-name="Smart Watch" data-price="2999"> |
| <i class="fas fa-shopping-cart"></i> |
| <span>Add to Cart</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="mb-10 animate-fadeIn" style="animation-delay: 0.4s"> |
| <div class="flex items-center justify-between mb-6"> |
| <h2 class="text-2xl font-bold text-gray-900">Summer Fashion</h2> |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm flex items-center"> |
| View All <i class="fas fa-chevron-right text-xs ml-1"></i> |
| </a> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5"> |
| |
| <div class="product-card transform transition"> |
| <div class="relative overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" |
| alt="Shirt" class="product-img w-full"> |
| <div class="absolute top-2 left-2"> |
| <span class="discount-badge">55% OFF</span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-md font-semibold text-gray-800 line-clamp-2">Peter England Slim Fit Shirt</h3> |
| <div class="flex items-center mt-2"> |
| <span class="text-lg font-bold">₹799</span> |
| <span class="text-sm text-gray-500 line-through ml-2">₹1,799</span> |
| </div> |
| <div class="flex items-center mt-1"> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-yellow-400 text-sm"></i> |
| <span class="text-sm text-gray-600 ml-1">4.4</span> |
| </div> |
| <span class="text-sm text-gray-500 mx-2">•</span> |
| <span class="text-sm text-gray-500">634 Reviews</span> |
| </div> |
| <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2" |
| data-id="6" data-name="Formal Shirt" data-price="799"> |
| <i class="fas fa-shopping-cart"></i> |
| <span>Add to Cart</span> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="product-card transform transition"> |
| <div class="relative overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1542272604-787c3835535d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1026&q=80" |
| alt="Jeans" class="product-img w-full"> |
| <div class="absolute top-2 left-2"> |
| <span class="discount-badge">50% OFF</span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-md font-semibold text-gray-800 line-clamp-2">Levis Men's Slim Fit Jeans</h3> |
| <div class="flex items-center mt-2"> |
| <span class="text-lg font-bold">₹1,499</span> |
| <span class="text-sm text-gray-500 line-through ml-2">₹2,999</span> |
| </div> |
| <div class="flex items-center mt-1"> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-yellow-400 text-sm"></i> |
| <span class="text-sm text-gray-600 ml-1">4.6</span> |
| </div> |
| <span class="text-sm text-gray-500 mx-2">•</span> |
| <span class="text-sm text-gray-500">1,128 Reviews</span> |
| </div> |
| <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2" |
| data-id="7" data-name="Levis Jeans" data-price="1499"> |
| <i class="fas fa-shopping-cart"></i> |
| <span>Add to Cart</span> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="product-card transform transition"> |
| <div class="relative overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" |
| alt="Dress" class="product-img w-full"> |
| <div class="absolute top-2 left-2"> |
| <span class="discount-badge">60% OFF</span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-md font-semibold text-gray-800 line-clamp-2">H&M Women's Summer Dress</h3> |
| <div class="flex items-center mt-2"> |
| <span class="text-lg font-bold">₹999</span> |
| <span class="text-sm text-gray-500 line-through ml-2">₹2,499</span> |
| </div> |
| <div class="flex items-center mt-1"> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-yellow-400 text-sm"></i> |
| <span class="text-sm text-gray-600 ml-1">4.5</span> |
| </div> |
| <span class="text-sm text-gray-500 mx-2">•</span> |
| <span class="text-sm text-gray-500">842 Reviews</span> |
| </div> |
| <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2" |
| data-id="8" data-name="Summer Dress" data-price="999"> |
| <i class="fas fa-shopping-cart"></i> |
| <span>Add to Cart</span> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="product-card transform transition"> |
| <div class="relative overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" |
| alt="Sandals" class="product-img w-full"> |
| <div class="absolute top-2 left-2"> |
| <span class="discount-badge">40% OFF</span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-md font-semibold text-gray-800 line-clamp-2">Puma Men's Sports Sandals</h3> |
| <div class="flex items-center mt-2"> |
| <span class="text-lg font-bold">₹1,199</span> |
| <span class="text-sm text-gray-500 line-through ml-2">₹1,999</span> |
| </div> |
| <div class="flex items-center mt-1"> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-yellow-400 text-sm"></i> |
| <span class="text-sm text-gray-600 ml-1">4.3</span> |
| </div> |
| <span class="text-sm text-gray-500 mx-2">•</span> |
| <span class="text-sm text-gray-500">567 Reviews</span> |
| </div> |
| <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2" |
| data-id="9" data-name="Sports Sandals" data-price="1199"> |
| <i class="fas fa-shopping-cart"></i> |
| <span>Add to Cart</span> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="product-card transform transition"> |
| <div class="relative overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" |
| alt="Bag" class="product-img w-full"> |
| <div class="absolute top-2 left-2"> |
| <span class="discount-badge">35% OFF</span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-md font-semibold text-gray-800 line-clamp-2">American Tourister Backpack</h3> |
| <div class="flex items-center mt-2"> |
| <span class="text-lg font-bold">₹1,599</span> |
| <span class="text-sm text-gray-500 line-through ml-2">₹2,459</span> |
| </div> |
| <div class="flex items-center mt-1"> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-yellow-400 text-sm"></i> |
| <span class="text-sm text-gray-600 ml-1">4.7</span> |
| </div> |
| <span class="text-sm text-gray-500 mx-2">•</span> |
| <span class="text-sm text-gray-500">1,043 Reviews</span> |
| </div> |
| <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2" |
| data-id="10" data-name="Backpack" data-price="1599"> |
| <i class="fas fa-shopping-cart"></i> |
| <span>Add to Cart</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <div class="discount-banner overflow-hidden rounded-xl mb-10 cursor-pointer group animate-fadeIn" style="animation-delay: 0.6s"> |
| <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Discount Banner" class="w-full h-auto group-hover:scale-105 transition-transform duration-500"> |
| <div class="absolute inset-0 bg-black/10"></div> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-900 text-gray-300"> |
| <div class="container mx-auto px-4 py-12"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| |
| <div> |
| <h3 class="text-white text-lg font-bold mb-4">ABOUT</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white transition">Contact Us</a></li> |
| <li><a href="#" class="hover:text-white transition">About Us</a></li> |
| <li><a href="#" class="hover:text-white transition">Careers</a></li> |
| <li><a href="#" class="hover:text-white transition">Flipkart Stories</a></li> |
| <li><a href="#" class="hover:text-white transition">Press</a></li> |
| </ul> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-white text-lg font-bold mb-4">HELP</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white transition">Payments</a></li> |
| <li><a href="#" class="hover:text-white transition">Shipping</a></li> |
| <li><a href="#" class="hover:text-white transition">Cancellation & Returns</a></li> |
| <li><a href="#" class="hover:text-white transition">FAQ</a></li> |
| <li><a href="#" class="hover:text-white transition">Report Infringement</a></li> |
| </ul> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-white text-lg font-bold mb-4">POLICY</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white transition">Return Policy</a></li> |
| <li><a href="#" class="hover:text-white transition">Terms Of Use</a></li> |
| <li><a href="#" class="hover:text-white transition">Security</a></li> |
| <li><a href="#" class="hover:text-white transition">Privacy</a></li> |
| <li><a href="#" class="hover:text-white transition">Sitemap</a></li> |
| </ul> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-white text-lg font-bold mb-4">SOCIAL</h3> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-400 transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-600 transition"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-pink-600 transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| </div> |
| |
| <h4 class="text-white text-lg font-bold mt-6 mb-3">Download App</h4> |
| <div class="flex space-x-2"> |
| <a href="#" class="w-32 h-10 rounded bg-gray-800 hover:bg-gray-700 transition"></a> |
| <a href="#" class="w-32 h-10 rounded bg-gray-800 hover:bg-gray-700 transition"></a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-8 pt-8"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
| <div class="flex items-center"> |
| <i class="fas fa-briefcase mr-3 text-gray-400"></i> |
| <span class="hover:text-white cursor-pointer transition">Become a Seller</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-star mr-3 text-gray-400"></i> |
| <span class="hover:text-white cursor-pointer transition">Advertise</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-gift mr-3 text-gray-400"></i> |
| <span class="hover:text-white cursor-pointer transition">Gift Cards</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-question-circle mr-3 text-gray-400"></i> |
| <span class="hover:text-white cursor-pointer transition">Help Center</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800 py-4"> |
| <div class="container mx-auto px-4 text-center text-gray-400 text-sm"> |
| © 2023 Flipkart Clone. All Rights Reserved. |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="login-modal" class="fixed inset-0 z-50 hidden modal"> |
| <div class="flex items-center justify-center min-h-screen p-4"> |
| <div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative"> |
| <div class="absolute top-4 right-4"> |
| <button id="close-login" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="p-8"> |
| <h2 class="text-3xl font-bold text-center mb-8">Welcome Back</h2> |
| |
| <div class="mb-6"> |
| <input class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200" |
| id="login-email" type="text" placeholder="Email or mobile number"> |
| </div> |
| |
| <div class="mb-6"> |
| <input class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200" |
| id="login-password" type="password" placeholder="Password"> |
| </div> |
| |
| <button id="login-submit" class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition mb-4"> |
| Login |
| </button> |
| |
| <div class="text-center"> |
| <a href="#" class="text-blue-600 text-sm hover:underline">Forgot Password?</a> |
| </div> |
| |
| <div class="flex items-center my-6"> |
| <div class="flex-1 border-t border-gray-200"></div> |
| <span class="px-3 text-gray-400">or</span> |
| <div class="flex-1 border-t border-gray-200"></div> |
| </div> |
| |
| <div class="space-y-3"> |
| <button class="w-full flex items-center justify-center space-x-2 py-2.5 px-4 rounded-lg border border-gray-200 hover:bg-gray-50"> |
| <i class="fab fa-google text-blue-600"></i> |
| <span>Continue with Google</span> |
| </button> |
| <button class="w-full flex items-center justify-center space-x-2 py-2.5 px-4 rounded-lg border border-gray-200 hover:bg-gray-50"> |
| <i class="fab fa-facebook text-blue-600"></i> |
| <span>Continue with Facebook</span> |
| </button> |
| </div> |
| |
| <p class="text-center text-gray-500 mt-6"> |
| New to Flipkart? <a href="#" class="text-blue-600 hover:underline">Create an account</a> |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="cart-sidebar" class="fixed inset-0 z-50 overflow-hidden hidden"> |
| <div class="absolute inset-0 bg-black/30" id="cart-backdrop"></div> |
| <div class="absolute inset-y-0 right-0 w-full sm:w-96 bg-white cart-sidebar transform transition-transform duration-300 translate-x-full"> |
| <div class="flex flex-col h-full"> |
| <div class="p-6 border-b border-gray-200 flex items-center justify-between"> |
| <h2 class="text-xl font-bold">My Cart</h2> |
| <button id="close-cart" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div id="cart-items" class="flex-1 overflow-y-auto p-6"> |
| <div class="flex flex-col items-center justify-center h-full"> |
| <div class="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center mb-4"> |
| <i class="fas fa-shopping-cart text-gray-400 text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Your cart is empty</h3> |
| <p class="text-gray-500 text-center mb-6">Looks like you haven't added anything to your cart yet</p> |
| <button class="bg-blue-600 text-white px-6 py-2.5 rounded-lg hover:bg-blue-700 transition"> |
| Continue Shopping |
| </button> |
| </div> |
| </div> |
| |
| <div class="p-6 border-t border-gray-200"> |
| <div class="flex justify-between mb-4"> |
| <span>Subtotal (<span id="sidebar-item-count">0</span> items):</span> |
| <span id="cart-subtotal" class="font-bold text-lg">₹0</span> |
| </div> |
| <button id="checkout-btn" class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition flex items-center justify-center"> |
| <span>Proceed to Checkout</span> |
| <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| let cart = []; |
| |
| |
| if (localStorage.getItem('cart')) { |
| cart = JSON.parse(localStorage.getItem('cart')); |
| updateCartCount(); |
| } |
| |
| |
| const loginBtn = document.getElementById('login-btn'); |
| const loginModal = document.getElementById('login-modal'); |
| const closeLogin = document.getElementById('close-login'); |
| const loginSubmit = document.getElementById('login-submit'); |
| |
| loginBtn.addEventListener('click', () => { |
| loginModal.classList.remove('hidden'); |
| document.body.style.overflow = 'hidden'; |
| }); |
| |
| closeLogin.addEventListener('click', () => { |
| loginModal.classList.add('hidden'); |
| document.body.style.overflow = ''; |
| }); |
| |
| loginSubmit.addEventListener('click', () => { |
| const email = document.getElementById('login-email').value; |
| const password = document.getElementById('login-password').value; |
| |
| if (email && password) { |
| showNotification('Logged in successfully!', 'success'); |
| loginModal.classList.add('hidden'); |
| document.body.style.overflow = ''; |
| loginBtn.innerHTML = ` |
| <i class="far fa-user-circle"></i> |
| <span>${email.split('@')[0]}</span> |
| `; |
| } else { |
| showNotification('Please fill all fields', 'error'); |
| } |
| }); |
| |
| |
| const cartButton = document.getElementById('cart-button'); |
| const cartSidebar = document.getElementById('cart-sidebar'); |
| const cartBackdrop = document.getElementById('cart-backdrop'); |
| const closeCart = document.getElementById('close-cart'); |
| const addToCartButtons = document.querySelectorAll('.add-to-cart'); |
| |
| cartButton.addEventListener('click', (e) => { |
| e.preventDefault(); |
| cartSidebar.classList.remove('hidden'); |
| setTimeout(() => { |
| cartSidebar.querySelector('div.cart-sidebar').style.transform = 'translateX(0)'; |
| document.body.style.overflow = 'hidden'; |
| }, 10); |
| updateCartSidebar(); |
| }); |
| |
| const closeCartSidebar = () => { |
| cartSidebar.querySelector('div.cart-sidebar').style.transform = 'translateX(100%)'; |
| setTimeout(() => { |
| cartSidebar.classList.add('hidden'); |
| document.body.style.overflow = ''; |
| }, 300); |
| }; |
| |
| closeCart.addEventListener('click', closeCartSidebar); |
| cartBackdrop.addEventListener('click', closeCartSidebar); |
| |
| addToCartButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| const id = this.getAttribute('data-id'); |
| const name = this.getAttribute('data-name'); |
| const price = parseFloat(this.getAttribute('data-price')); |
| |
| addToCart(id, name, price); |
| }); |
| }); |
| |
| function addToCart(id, name, price) { |
| const existingItem = cart.find(item => item.id === id); |
| |
| if (existingItem) { |
| existingItem.quantity += 1; |
| } else { |
| cart.push({ |
| id, |
| name, |
| price, |
| quantity: 1 |
| }); |
| } |
| |
| |
| localStorage.setItem('cart', JSON.stringify(cart)); |
| |
| |
| updateCartCount(); |
| updateCartSidebar(); |
| |
| |
| showNotification(`${name} added to cart!`, 'success'); |
| |
| |
| if (cart.length === 1) { |
| cartSidebar.classList.remove('hidden'); |
| setTimeout(() => { |
| cartSidebar.querySelector('div.cart-sidebar').style.transform = 'translateX(0)'; |
| document.body.style.overflow = 'hidden'; |
| }, 10); |
| } |
| } |
| |
| function updateCartCount() { |
| const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); |
| document.getElementById('cart-count').textContent = totalItems; |
| } |
| |
| function updateCartSidebar() { |
| const cartItemsContainer = document.getElementById('cart-items'); |
| const sidebarItemCount = document.getElementById('sidebar-item-count'); |
| const cartSubtotal = document.getElementById('cart-subtotal'); |
| |
| const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); |
| const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0); |
| |
| sidebarItemCount.textContent = totalItems; |
| cartSubtotal.textContent = `₹${subtotal.toLocaleString('en-IN')}`; |
| |
| if (cart.length === 0) { |
| cartItemsContainer.innerHTML = ` |
| <div class="flex flex-col items-center justify-center h-full"> |
| <div class="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center mb-4"> |
| <i class="fas fa-shopping-cart text-gray-400 text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Your cart is empty</h3> |
| <p class="text-gray-500 text-center mb-6">Looks like you haven't added anything to your cart yet</p> |
| <button class="bg-blue-600 text-white px-6 py-2.5 rounded-lg hover:bg-blue-700 transition"> |
| Continue Shopping |
| </button> |
| </div> |
| `; |
| return; |
| } |
| |
| let cartItemsHTML = '<div class="space-y-4">'; |
| |
| cart.forEach(item => { |
| const productImg = document.querySelector(`.add-to-cart[data-id="${item.id}"]`).closest('.product-card').querySelector('.product-img').src; |
| |
| cartItemsHTML += ` |
| <div class="flex items-start p-3 rounded-lg bg-gray-50"> |
| <div class="w-20 h-20 rounded-md bg-white border border-gray-200 overflow-hidden mr-4 flex-shrink-0"> |
| <img src="${productImg}" alt="${item.name}" class="w-full h-full object-contain"> |
| </div> |
| <div class="flex-1"> |
| <h3 class="text-sm font-semibold text-gray-800">${item.name}</h3> |
| <div class="flex items-center justify-between mt-1"> |
| <span class="text-sm font-bold text-gray-700">₹${item.price.toLocaleString('en-IN')}</span> |
| <div class="flex items-center"> |
| <button class="quantity-btn w-6 h-6 flex items-center justify-center bg-gray-200 rounded-l-md" data-id="${item.id}" data-action="decrease"> |
| <i class="fas fa-minus text-xs"></i> |
| </button> |
| <span class="w-8 text-center">${item.quantity}</span> |
| <button class="quantity-btn w-6 h-6 flex items-center justify-center bg-gray-200 rounded-r-md" data-id="${item.id}" data-action="increase"> |
| <i class="fas fa-plus text-xs"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| <button class="remove-item ml-2 text-gray-400 hover:text-red-500 transition" data-id="${item.id}"> |
| <i class="fas fa-trash-alt text-sm"></i> |
| </button> |
| </div> |
| `; |
| }); |
| |
| cartItemsHTML += '</div>'; |
| cartItemsContainer.innerHTML = cartItemsHTML; |
| |
| |
| document.querySelectorAll('.remove-item').forEach(button => { |
| button.addEventListener('click', function() { |
| const id = this.getAttribute('data-id'); |
| removeFromCart(id); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.quantity-btn').forEach(button => { |
| button.addEventListener('click', function() { |
| const id = this.getAttribute('data-id'); |
| const action = this.getAttribute('data-action'); |
| updateQuantity(id, action); |
| }); |
| }); |
| } |
| |
| function updateQuantity(id, action) { |
| const item = cart.find(item => item.id === id); |
| |
| if (action === 'increase') { |
| item.quantity += 1; |
| } else if (action === 'decrease' && item.quantity > 1) { |
| item.quantity -= 1; |
| } |
| |
| localStorage.setItem('cart', JSON.stringify(cart)); |
| updateCartCount(); |
| updateCartSidebar(); |
| } |
| |
| function removeFromCart(id) { |
| cart = cart.filter(item => item.id !== id); |
| localStorage.setItem('cart', JSON.stringify(cart)); |
| updateCartCount(); |
| updateCartSidebar(); |
| showNotification('Item removed from cart', 'success'); |
| } |
| |
| |
| document.getElementById('checkout-btn').addEventListener('click', () => { |
| if (cart.length === 0) { |
| showNotification('Your cart is empty!', 'error'); |
| return; |
| } |
| |
| showNotification('Proceeding to checkout!', 'success'); |
| closeCartSidebar(); |
| |
| }); |
| |
| |
| function showNotification(message, type) { |
| const notificationArea = document.getElementById('notification-area'); |
| const notification = document.createElement('div'); |
| |
| notification.className = `notification px-4 py-3 rounded-lg shadow-md flex items-center ${type === 'success' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`; |
| notification.innerHTML = ` |
| <i class="${type === 'success' ? 'fas fa-check-circle' : 'fas fa-exclamation-circle'} mr-2"></i> |
| <span class="flex-1 text-sm">${message}</span> |
| <button class="ml-4 -mr-1"> |
| <i class="fas fa-times"></i> |
| </button> |
| `; |
| |
| notificationArea.appendChild(notification); |
| |
| |
| const timeout = setTimeout(() => { |
| notification.style.opacity = '0'; |
| setTimeout(() => { |
| notification.remove(); |
| }, 300); |
| }, 3000); |
| |
| |
| notification.querySelector('button').addEventListener('click', () => { |
| clearTimeout(timeout); |
| notification.remove(); |
| }); |
| } |
| |
| |
| window.addEventListener('click', (e) => { |
| if (e.target === loginModal) { |
| loginModal.classList.add('hidden'); |
| document.body.style.overflow = ''; |
| } |
| }); |
| |
| |
| document.querySelectorAll('.search-bar button').forEach(button => { |
| button.addEventListener('click', () => { |
| const input = button.closest('.search-bar').querySelector('input'); |
| const query = input.value.trim(); |
| if (query) { |
| showNotification(`Searching for: ${query}`, 'success'); |
| input.value = ''; |
| } |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.search-bar input').forEach(input => { |
| input.addEventListener('keypress', (e) => { |
| if (e.key === 'Enter') { |
| const query = input.value.trim(); |
| if (query) { |
| showNotification(`Searching for: ${query}`, 'success'); |
| input.value = ''; |
| } |
| } |
| }); |
| }); |
| </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=junglicheats/hi" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p><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=gtkh/test7" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
