|
|
<!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></body> |
|
|
</html> |
