Hugging Face's logo

Spaces:
nitipon
/
blthy
Running

App Files Community
junglicheats commited on
Commit
fd5dfc3
·
verified ·
1 Parent(s): 6407319

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1200 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hi
3
- emoji: 🦀
4
- colorFrom: gray
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: hi
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1200 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Flipkart 2.0 - Modern Online Shopping</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8fafc;
15
+ color: #1e293b;
16
+ scroll-behavior: smooth;
17
+ }
18
+
19
+ /* Custom scrollbar */
20
+ ::-webkit-scrollbar {
21
+ width: 8px;
22
+ height: 8px;
23
+ }
24
+
25
+ ::-webkit-scrollbar-track {
26
+ background: #f1f5f9;
27
+ }
28
+
29
+ ::-webkit-scrollbar-thumb {
30
+ background: #cbd5e1;
31
+ border-radius: 4px;
32
+ }
33
+
34
+ ::-webkit-scrollbar-thumb:hover {
35
+ background: #94a3b8;
36
+ }
37
+
38
+ /* Header */
39
+ .header {
40
+ box-shadow: 0 4px 12px 0 rgba(0,0,0,.05);
41
+ border-bottom: 1px solid #e2e8f0;
42
+ background: white;
43
+ }
44
+
45
+ /* Search bar */
46
+ .search-bar {
47
+ box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
48
+ border-radius: 8px;
49
+ transition: all 0.3s cubic-bezier(.25,.8,.25,1);
50
+ }
51
+
52
+ .search-bar:focus-within {
53
+ box-shadow: 0 4px 16px 0 rgba(0,0,0,.1);
54
+ }
55
+
56
+ /* Category nav */
57
+ .category-item {
58
+ transition: all 0.3s ease;
59
+ color: #64748b;
60
+ }
61
+
62
+ .category-item:hover {
63
+ color: #3b82f6;
64
+ transform: translateY(-2px);
65
+ }
66
+
67
+ .category-item.active {
68
+ color: #3b82f6;
69
+ position: relative;
70
+ }
71
+
72
+ .category-item.active::after {
73
+ content: '';
74
+ position: absolute;
75
+ bottom: -4px;
76
+ left: 50%;
77
+ transform: translateX(-50%);
78
+ width: 6px;
79
+ height: 6px;
80
+ border-radius: 50%;
81
+ background: #3b82f6;
82
+ }
83
+
84
+ /* Product cards */
85
+ .product-card {
86
+ background: white;
87
+ border-radius: 12px;
88
+ overflow: hidden;
89
+ transition: all 0.3s cubic-bezier(.25,.8,.25,1);
90
+ box-shadow: 0 1px 3px rgba(0,0,0,0.08);
91
+ border: 1px solid #e2e8f0;
92
+ }
93
+
94
+ .product-card:hover {
95
+ transform: translateY(-5px);
96
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
97
+ border-color: #3b82f6;
98
+ }
99
+
100
+ .product-img {
101
+ height: 180px;
102
+ object-fit: contain;
103
+ transition: transform 0.3s ease;
104
+ }
105
+
106
+ .product-card:hover .product-img {
107
+ transform: scale(1.05);
108
+ }
109
+
110
+ .discount-badge {
111
+ background: linear-gradient(to right, #10b981, #34d399);
112
+ color: white;
113
+ border-radius: 4px;
114
+ padding: 2px 6px;
115
+ font-size: 11px;
116
+ font-weight: 500;
117
+ }
118
+
119
+ .add-to-cart {
120
+ background: linear-gradient(to right, #3b82f6, #60a5fa);
121
+ color: white;
122
+ border-radius: 6px;
123
+ font-weight: 500;
124
+ transition: all 0.3s;
125
+ }
126
+
127
+ .add-to-cart:hover {
128
+ background: linear-gradient(to right, #2563eb, #3b82f6);
129
+ transform: translateY(-1px);
130
+ }
131
+
132
+ /* Hero banner */
133
+ .hero-banner {
134
+ height: 320px;
135
+ 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');
136
+ background-size: cover;
137
+ background-position: center;
138
+ border-radius: 12px;
139
+ position: relative;
140
+ overflow: hidden;
141
+ }
142
+
143
+ .hero-overlay {
144
+ position: absolute;
145
+ inset: 0;
146
+ background: linear-gradient(45deg, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
147
+ }
148
+
149
+ /* Animations */
150
+ @keyframes fadeIn {
151
+ from { opacity: 0; transform: translateY(10px); }
152
+ to { opacity: 1; transform: translateY(0); }
153
+ }
154
+
155
+ @keyframes slideRight {
156
+ from { transform: translateX(-20px); opacity: 0; }
157
+ to { transform: translateX(0); opacity: 1; }
158
+ }
159
+
160
+ .animate-fadeIn {
161
+ animation: fadeIn 0.5s ease-out forwards;
162
+ }
163
+
164
+ .animate-slideRight {
165
+ animation: slideRight 0.6s ease-out forwards;
166
+ }
167
+
168
+ /* Modal */
169
+ .modal {
170
+ backdrop-filter: blur(5px);
171
+ }
172
+
173
+ /* Notification */
174
+ .notification {
175
+ opacity: 0;
176
+ transform: translateY(20px);
177
+ animation: fadeIn 0.3s ease-out forwards;
178
+ }
179
+
180
+ /* Cart sidebar */
181
+ .cart-sidebar {
182
+ box-shadow: -10px 0 30px rgba(0,0,0,0.1);
183
+ }
184
+
185
+ /* Discount banner */
186
+ .discount-banner {
187
+ transition: transform 0.3s ease;
188
+ }
189
+
190
+ .discount-banner:hover {
191
+ transform: translateY(-3px);
192
+ }
193
+
194
+ /* Responsive adjustments */
195
+ @media (max-width: 768px) {
196
+ .hero-banner {
197
+ height: 200px;
198
+ }
199
+
200
+ .product-img {
201
+ height: 120px;
202
+ }
203
+ }
204
+ </style>
205
+ </head>
206
+ <body class="bg-gray-50">
207
+ <!-- Notification Area -->
208
+ <div id="notification-area" class="fixed top-4 right-4 z-50 space-y-2 w-full max-w-xs"></div>
209
+
210
+ <!-- Header -->
211
+ <header class="header sticky top-0 z-40">
212
+ <div class="container mx-auto px-4">
213
+ <!-- Top Bar -->
214
+ <div class="flex items-center justify-between py-3 md:py-0">
215
+ <!-- Logo -->
216
+ <a href="#" class="flex items-center">
217
+ <h1 class="text-2xl font-bold text-blue-600 flex items-center">
218
+ <span class="mr-1">Flipkart</span>
219
+ <span class="text-xs text-yellow-400 font-normal">Plus</span>
220
+ </h1>
221
+ </a>
222
+
223
+ <!-- Search Bar -->
224
+ <div class="hidden md:block mx-4 flex-1 max-w-2xl">
225
+ <div class="search-bar flex items-center bg-gray-50 p-1.5 rounded-lg">
226
+ <input type="text" placeholder="Search for products, brands and more..."
227
+ class="w-full px-4 py-2 bg-transparent focus:outline-none text-gray-700">
228
+ <button class="bg-blue-600 text-white p-2 rounded-lg hover:bg-blue-700 transition">
229
+ <i class="fas fa-search"></i>
230
+ </button>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- User Actions -->
235
+ <div class="flex items-center space-x-3 md:space-x-6">
236
+ <button id="login-btn" class="hidden md:flex items-center space-x-1 px-3 py-2 text-gray-700 hover:text-blue-600">
237
+ <i class="far fa-user"></i>
238
+ <span>Login</span>
239
+ </button>
240
+
241
+ <div class="relative group">
242
+ <button class="hidden md:flex items-center space-x-1 px-3 py-2 text-gray-700 hover:text-blue-600">
243
+ <span>More</span>
244
+ <i class="fas fa-chevron-down text-xs mt-0.5"></i>
245
+ </button>
246
+
247
+ <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">
248
+ <div class="py-1">
249
+ <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
250
+ <i class="far fa-bell mr-2"></i> Notifications
251
+ </a>
252
+ <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
253
+ <i class="far fa-question-circle mr-2"></i> Customer Care
254
+ </a>
255
+ <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
256
+ <i class="fas fa-ad mr-2"></i> Advertise
257
+ </a>
258
+ <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
259
+ <i class="fas fa-mobile-alt mr-2"></i> Download App
260
+ </a>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <a href="#" id="cart-button" class="flex items-center space-x-1 px-3 py-2 relative text-gray-700 hover:text-blue-600">
266
+ <i class="fas fa-shopping-cart"></i>
267
+ <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>
268
+ <span class="hidden md:inline">Cart</span>
269
+ </a>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Mobile Search -->
274
+ <div class="md:hidden pb-3">
275
+ <div class="search-bar flex items-center bg-gray-50 p-1.5 rounded-lg">
276
+ <input type="text" placeholder="Search for products..."
277
+ class="w-full px-4 py-2 bg-transparent focus:outline-none text-gray-700">
278
+ <button class="bg-blue-600 text-white p-2 rounded-lg hover:bg-blue-700 transition">
279
+ <i class="fas fa-search"></i>
280
+ </button>
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ <!-- Categories Navigation -->
286
+ <nav class="bg-white border-t border-gray-100 hidden md:block">
287
+ <div class="container mx-auto px-4 overflow-x-auto">
288
+ <div class="flex space-x-8 py-3 whitespace-nowrap">
289
+ <a href="#" class="category-item text-sm font-medium flex flex-col items-center active">
290
+ <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center">
291
+ <i class="fas fa-shopping-basket text-blue-600"></i>
292
+ </div>
293
+ <span>Grocery</span>
294
+ </a>
295
+ <a href="#" class="category-item text-sm font-medium flex flex-col items-center">
296
+ <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center">
297
+ <i class="fas fa-mobile-alt text-blue-600"></i>
298
+ </div>
299
+ <span>Mobiles</span>
300
+ </a>
301
+ <a href="#" class="category-item text-sm font-medium flex flex-col items-center">
302
+ <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center">
303
+ <i class="fas fa-tshirt text-blue-600"></i>
304
+ </div>
305
+ <span>Fashion</span>
306
+ </a>
307
+ <a href="#" class="category-item text-sm font-medium flex flex-col items-center">
308
+ <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center">
309
+ <i class="fas fa-laptop text-blue-600"></i>
310
+ </div>
311
+ <span>Electronics</span>
312
+ </a>
313
+ <a href="#" class="category-item text-sm font-medium flex flex-col items-center">
314
+ <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center">
315
+ <i class="fas fa-home text-blue-600"></i>
316
+ </div>
317
+ <span>Home</span>
318
+ </a>
319
+ <a href="#" class="category-item text-sm font-medium flex flex-col items-center">
320
+ <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center">
321
+ <i class="fas fa-tv text-blue-600"></i>
322
+ </div>
323
+ <span>Appliances</span>
324
+ </a>
325
+ <a href="#" class="category-item text-sm font-medium flex flex-col items-center">
326
+ <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center">
327
+ <i class="fas fa-umbrella-beach text-blue-600"></i>
328
+ </div>
329
+ <span>Travel</span>
330
+ </a>
331
+ <a href="#" class="category-item text-sm font-medium flex flex-col items-center">
332
+ <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center">
333
+ <i class="fas fa-spa text-blue-600"></i>
334
+ </div>
335
+ <span>Beauty</span>
336
+ </a>
337
+ <a href="#" class="category-item text-sm font-medium flex flex-col items-center">
338
+ <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center">
339
+ <i class="fas fa-gamepad text-blue-600"></i>
340
+ </div>
341
+ <span>Toys</span>
342
+ </a>
343
+ <a href="#" class="category-item text-sm font-medium flex flex-col items-center">
344
+ <div class="w-10 h-10 rounded-full bg-gray-100 mb-1 flex items-center justify-center">
345
+ <i class="fas fa-couch text-blue-600"></i>
346
+ </div>
347
+ <span>Furniture</span>
348
+ </a>
349
+ </div>
350
+ </div>
351
+ </nav>
352
+ </header>
353
+
354
+ <!-- Main Content -->
355
+ <main class="container mx-auto px-4 py-6">
356
+ <!-- Hero Banner -->
357
+ <section class="hero-banner mb-8 rounded-xl overflow-hidden animate-slideRight">
358
+ <div class="hero-overlay flex items-center">
359
+ <div class="px-8 text-white">
360
+ <h2 class="text-3xl md:text-4xl font-bold mb-2">Summer Sale 2023</h2>
361
+ <p class="text-lg md:text-xl mb-6 max-w-lg">Up to 70% off on all fashion items. Limited time only!</p>
362
+ <button class="bg-white text-blue-600 px-6 py-3 rounded-xl font-bold hover:bg-gray-100 transition">
363
+ Shop Collection <i class="fas fa-arrow-right ml-2"></i>
364
+ </button>
365
+ </div>
366
+ </div>
367
+ </section>
368
+
369
+ <!-- Deals Section -->
370
+ <section class="mb-10 animate-fadeIn" style="animation-delay: 0.2s">
371
+ <div class="flex items-center justify-between mb-6">
372
+ <h2 class="text-2xl font-bold text-gray-900">Trending Deals</h2>
373
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm flex items-center">
374
+ View All <i class="fas fa-chevron-right text-xs ml-1"></i>
375
+ </a>
376
+ </div>
377
+
378
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5">
379
+ <!-- Product Card 1 -->
380
+ <div class="product-card transform transition">
381
+ <div class="relative overflow-hidden">
382
+ <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"
383
+ alt="iPhone 14" class="product-img w-full">
384
+ <div class="absolute top-2 left-2">
385
+ <span class="discount-badge">20% OFF</span>
386
+ </div>
387
+ </div>
388
+ <div class="p-4">
389
+ <h3 class="text-md font-semibold text-gray-800 line-clamp-2">Apple iPhone 14 (Blue, 128GB)</h3>
390
+ <div class="flex items-center mt-2">
391
+ <span class="text-lg font-bold">₹66,999</span>
392
+ <span class="text-sm text-gray-500 line-through ml-2">₹79,900</span>
393
+ </div>
394
+ <div class="flex items-center mt-1">
395
+ <div class="flex items-center">
396
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
397
+ <span class="text-sm text-gray-600 ml-1">4.7</span>
398
+ </div>
399
+ <span class="text-sm text-gray-500 mx-2">•</span>
400
+ <span class="text-sm text-gray-500">1,243 Reviews</span>
401
+ </div>
402
+ <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2"
403
+ data-id="1" data-name="iPhone 14" data-price="66999">
404
+ <i class="fas fa-shopping-cart"></i>
405
+ <span>Add to Cart</span>
406
+ </button>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- Product Card 2 -->
411
+ <div class="product-card transform transition">
412
+ <div class="relative overflow-hidden">
413
+ <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"
414
+ alt="Samsung TV" class="product-img w-full">
415
+ <div class="absolute top-2 left-2">
416
+ <span class="discount-badge">30% OFF</span>
417
+ </div>
418
+ </div>
419
+ <div class="p-4">
420
+ <h3 class="text-md font-semibold text-gray-800 line-clamp-2">Samsung 80 cm (32 inch) HD Smart TV</h3>
421
+ <div class="flex items-center mt-2">
422
+ <span class="text-lg font-bold">₹15,499</span>
423
+ <span class="text-sm text-gray-500 line-through ml-2">₹19,900</span>
424
+ </div>
425
+ <div class="flex items-center mt-1">
426
+ <div class="flex items-center">
427
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
428
+ <span class="text-sm text-gray-600 ml-1">4.5</span>
429
+ </div>
430
+ <span class="text-sm text-gray-500 mx-2">•</span>
431
+ <span class="text-sm text-gray-500">892 Reviews</span>
432
+ </div>
433
+ <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2"
434
+ data-id="2" data-name="Samsung TV" data-price="15499">
435
+ <i class="fas fa-shopping-cart"></i>
436
+ <span>Add to Cart</span>
437
+ </button>
438
+ </div>
439
+ </div>
440
+
441
+ <!-- Product Card 3 -->
442
+ <div class="product-card transform transition">
443
+ <div class="relative overflow-hidden">
444
+ <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"
445
+ alt="Shoes" class="product-img w-full">
446
+ <div class="absolute top-2 left-2">
447
+ <span class="discount-badge">60% OFF</span>
448
+ </div>
449
+ </div>
450
+ <div class="p-4">
451
+ <h3 class="text-md font-semibold text-gray-800 line-clamp-2">Nike Running Shoes For Men</h3>
452
+ <div class="flex items-center mt-2">
453
+ <span class="text-lg font-bold">₹2,499</span>
454
+ <span class="text-sm text-gray-500 line-through ml-2">₹5,999</span>
455
+ </div>
456
+ <div class="flex items-center mt-1">
457
+ <div class="flex items-center">
458
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
459
+ <span class="text-sm text-gray-600 ml-1">4.8</span>
460
+ </div>
461
+ <span class="text-sm text-gray-500 mx-2">•</span>
462
+ <span class="text-sm text-gray-500">1,542 Reviews</span>
463
+ </div>
464
+ <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2"
465
+ data-id="3" data-name="Nike Shoes" data-price="2499">
466
+ <i class="fas fa-shopping-cart"></i>
467
+ <span>Add to Cart</span>
468
+ </button>
469
+ </div>
470
+ </div>
471
+
472
+ <!-- Product Card 4 -->
473
+ <div class="product-card transform transition">
474
+ <div class="relative overflow-hidden">
475
+ <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"
476
+ alt="Headphones" class="product-img w-full">
477
+ <div class="absolute top-2 left-2">
478
+ <span class="discount-badge">45% OFF</span>
479
+ </div>
480
+ </div>
481
+ <div class="p-4">
482
+ <h3 class="text-md font-semibold text-gray-800 line-clamp-2">boAt Rockerz 450 Wireless Headphones</h3>
483
+ <div class="flex items-center mt-2">
484
+ <span class="text-lg font-bold">₹1,299</span>
485
+ <span class="text-sm text-gray-500 line-through ml-2">₹2,990</span>
486
+ </div>
487
+ <div class="flex items-center mt-1">
488
+ <div class="flex items-center">
489
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
490
+ <span class="text-sm text-gray-600 ml-1">4.3</span>
491
+ </div>
492
+ <span class="text-sm text-gray-500 mx-2">•</span>
493
+ <span class="text-sm text-gray-500">1,024 Reviews</span>
494
+ </div>
495
+ <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2"
496
+ data-id="4" data-name="Boat Headphones" data-price="1299">
497
+ <i class="fas fa-shopping-cart"></i>
498
+ <span>Add to Cart</span>
499
+ </button>
500
+ </div>
501
+ </div>
502
+
503
+ <!-- Product Card 5 -->
504
+ <div class="product-card transform transition">
505
+ <div class="relative overflow-hidden">
506
+ <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"
507
+ alt="Watch" class="product-img w-full">
508
+ <div class="absolute top-2 left-2">
509
+ <span class="discount-badge">30% OFF</span>
510
+ </div>
511
+ </div>
512
+ <div class="p-4">
513
+ <h3 class="text-md font-semibold text-gray-800 line-clamp-2">Noise ColorFit Pro Smart Watch</h3>
514
+ <div class="flex items-center mt-2">
515
+ <span class="text-lg font-bold">₹2,999</span>
516
+ <span class="text-sm text-gray-500 line-through ml-2">₹4,299</span>
517
+ </div>
518
+ <div class="flex items-center mt-1">
519
+ <div class="flex items-center">
520
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
521
+ <span class="text-sm text-gray-600 ml-1">4.2</span>
522
+ </div>
523
+ <span class="text-sm text-gray-500 mx-2">•</span>
524
+ <span class="text-sm text-gray-500">876 Reviews</span>
525
+ </div>
526
+ <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2"
527
+ data-id="5" data-name="Smart Watch" data-price="2999">
528
+ <i class="fas fa-shopping-cart"></i>
529
+ <span>Add to Cart</span>
530
+ </button>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ </section>
535
+
536
+ <!-- Fashion Section -->
537
+ <section class="mb-10 animate-fadeIn" style="animation-delay: 0.4s">
538
+ <div class="flex items-center justify-between mb-6">
539
+ <h2 class="text-2xl font-bold text-gray-900">Summer Fashion</h2>
540
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium text-sm flex items-center">
541
+ View All <i class="fas fa-chevron-right text-xs ml-1"></i>
542
+ </a>
543
+ </div>
544
+
545
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5">
546
+ <!-- Product Card 1 -->
547
+ <div class="product-card transform transition">
548
+ <div class="relative overflow-hidden">
549
+ <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"
550
+ alt="Shirt" class="product-img w-full">
551
+ <div class="absolute top-2 left-2">
552
+ <span class="discount-badge">55% OFF</span>
553
+ </div>
554
+ </div>
555
+ <div class="p-4">
556
+ <h3 class="text-md font-semibold text-gray-800 line-clamp-2">Peter England Slim Fit Shirt</h3>
557
+ <div class="flex items-center mt-2">
558
+ <span class="text-lg font-bold">₹799</span>
559
+ <span class="text-sm text-gray-500 line-through ml-2">₹1,799</span>
560
+ </div>
561
+ <div class="flex items-center mt-1">
562
+ <div class="flex items-center">
563
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
564
+ <span class="text-sm text-gray-600 ml-1">4.4</span>
565
+ </div>
566
+ <span class="text-sm text-gray-500 mx-2">•</span>
567
+ <span class="text-sm text-gray-500">634 Reviews</span>
568
+ </div>
569
+ <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2"
570
+ data-id="6" data-name="Formal Shirt" data-price="799">
571
+ <i class="fas fa-shopping-cart"></i>
572
+ <span>Add to Cart</span>
573
+ </button>
574
+ </div>
575
+ </div>
576
+
577
+ <!-- Product Card 2 -->
578
+ <div class="product-card transform transition">
579
+ <div class="relative overflow-hidden">
580
+ <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"
581
+ alt="Jeans" class="product-img w-full">
582
+ <div class="absolute top-2 left-2">
583
+ <span class="discount-badge">50% OFF</span>
584
+ </div>
585
+ </div>
586
+ <div class="p-4">
587
+ <h3 class="text-md font-semibold text-gray-800 line-clamp-2">Levis Men's Slim Fit Jeans</h3>
588
+ <div class="flex items-center mt-2">
589
+ <span class="text-lg font-bold">₹1,499</span>
590
+ <span class="text-sm text-gray-500 line-through ml-2">₹2,999</span>
591
+ </div>
592
+ <div class="flex items-center mt-1">
593
+ <div class="flex items-center">
594
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
595
+ <span class="text-sm text-gray-600 ml-1">4.6</span>
596
+ </div>
597
+ <span class="text-sm text-gray-500 mx-2">•</span>
598
+ <span class="text-sm text-gray-500">1,128 Reviews</span>
599
+ </div>
600
+ <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2"
601
+ data-id="7" data-name="Levis Jeans" data-price="1499">
602
+ <i class="fas fa-shopping-cart"></i>
603
+ <span>Add to Cart</span>
604
+ </button>
605
+ </div>
606
+ </div>
607
+
608
+ <!-- Product Card 3 -->
609
+ <div class="product-card transform transition">
610
+ <div class="relative overflow-hidden">
611
+ <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"
612
+ alt="Dress" class="product-img w-full">
613
+ <div class="absolute top-2 left-2">
614
+ <span class="discount-badge">60% OFF</span>
615
+ </div>
616
+ </div>
617
+ <div class="p-4">
618
+ <h3 class="text-md font-semibold text-gray-800 line-clamp-2">H&M Women's Summer Dress</h3>
619
+ <div class="flex items-center mt-2">
620
+ <span class="text-lg font-bold">₹999</span>
621
+ <span class="text-sm text-gray-500 line-through ml-2">₹2,499</span>
622
+ </div>
623
+ <div class="flex items-center mt-1">
624
+ <div class="flex items-center">
625
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
626
+ <span class="text-sm text-gray-600 ml-1">4.5</span>
627
+ </div>
628
+ <span class="text-sm text-gray-500 mx-2">•</span>
629
+ <span class="text-sm text-gray-500">842 Reviews</span>
630
+ </div>
631
+ <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2"
632
+ data-id="8" data-name="Summer Dress" data-price="999">
633
+ <i class="fas fa-shopping-cart"></i>
634
+ <span>Add to Cart</span>
635
+ </button>
636
+ </div>
637
+ </div>
638
+
639
+ <!-- Product Card 4 -->
640
+ <div class="product-card transform transition">
641
+ <div class="relative overflow-hidden">
642
+ <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"
643
+ alt="Sandals" class="product-img w-full">
644
+ <div class="absolute top-2 left-2">
645
+ <span class="discount-badge">40% OFF</span>
646
+ </div>
647
+ </div>
648
+ <div class="p-4">
649
+ <h3 class="text-md font-semibold text-gray-800 line-clamp-2">Puma Men's Sports Sandals</h3>
650
+ <div class="flex items-center mt-2">
651
+ <span class="text-lg font-bold">₹1,199</span>
652
+ <span class="text-sm text-gray-500 line-through ml-2">₹1,999</span>
653
+ </div>
654
+ <div class="flex items-center mt-1">
655
+ <div class="flex items-center">
656
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
657
+ <span class="text-sm text-gray-600 ml-1">4.3</span>
658
+ </div>
659
+ <span class="text-sm text-gray-500 mx-2">•</span>
660
+ <span class="text-sm text-gray-500">567 Reviews</span>
661
+ </div>
662
+ <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2"
663
+ data-id="9" data-name="Sports Sandals" data-price="1199">
664
+ <i class="fas fa-shopping-cart"></i>
665
+ <span>Add to Cart</span>
666
+ </button>
667
+ </div>
668
+ </div>
669
+
670
+ <!-- Product Card 5 -->
671
+ <div class="product-card transform transition">
672
+ <div class="relative overflow-hidden">
673
+ <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"
674
+ alt="Bag" class="product-img w-full">
675
+ <div class="absolute top-2 left-2">
676
+ <span class="discount-badge">35% OFF</span>
677
+ </div>
678
+ </div>
679
+ <div class="p-4">
680
+ <h3 class="text-md font-semibold text-gray-800 line-clamp-2">American Tourister Backpack</h3>
681
+ <div class="flex items-center mt-2">
682
+ <span class="text-lg font-bold">₹1,599</span>
683
+ <span class="text-sm text-gray-500 line-through ml-2">₹2,459</span>
684
+ </div>
685
+ <div class="flex items-center mt-1">
686
+ <div class="flex items-center">
687
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
688
+ <span class="text-sm text-gray-600 ml-1">4.7</span>
689
+ </div>
690
+ <span class="text-sm text-gray-500 mx-2">•</span>
691
+ <span class="text-sm text-gray-500">1,043 Reviews</span>
692
+ </div>
693
+ <button class="add-to-cart mt-4 w-full py-2.5 text-sm flex items-center justify-center space-x-2"
694
+ data-id="10" data-name="Backpack" data-price="1599">
695
+ <i class="fas fa-shopping-cart"></i>
696
+ <span>Add to Cart</span>
697
+ </button>
698
+ </div>
699
+ </div>
700
+ </div>
701
+ </section>
702
+
703
+ <!-- Discount Banner -->
704
+ <div class="discount-banner overflow-hidden rounded-xl mb-10 cursor-pointer group animate-fadeIn" style="animation-delay: 0.6s">
705
+ <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"
706
+ alt="Discount Banner" class="w-full h-auto group-hover:scale-105 transition-transform duration-500">
707
+ <div class="absolute inset-0 bg-black/10"></div>
708
+ </div>
709
+ </main>
710
+
711
+ <!-- Footer -->
712
+ <footer class="bg-gray-900 text-gray-300">
713
+ <div class="container mx-auto px-4 py-12">
714
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
715
+ <!-- About -->
716
+ <div>
717
+ <h3 class="text-white text-lg font-bold mb-4">ABOUT</h3>
718
+ <ul class="space-y-2">
719
+ <li><a href="#" class="hover:text-white transition">Contact Us</a></li>
720
+ <li><a href="#" class="hover:text-white transition">About Us</a></li>
721
+ <li><a href="#" class="hover:text-white transition">Careers</a></li>
722
+ <li><a href="#" class="hover:text-white transition">Flipkart Stories</a></li>
723
+ <li><a href="#" class="hover:text-white transition">Press</a></li>
724
+ </ul>
725
+ </div>
726
+
727
+ <!-- Help -->
728
+ <div>
729
+ <h3 class="text-white text-lg font-bold mb-4">HELP</h3>
730
+ <ul class="space-y-2">
731
+ <li><a href="#" class="hover:text-white transition">Payments</a></li>
732
+ <li><a href="#" class="hover:text-white transition">Shipping</a></li>
733
+ <li><a href="#" class="hover:text-white transition">Cancellation & Returns</a></li>
734
+ <li><a href="#" class="hover:text-white transition">FAQ</a></li>
735
+ <li><a href="#" class="hover:text-white transition">Report Infringement</a></li>
736
+ </ul>
737
+ </div>
738
+
739
+ <!-- Policy -->
740
+ <div>
741
+ <h3 class="text-white text-lg font-bold mb-4">POLICY</h3>
742
+ <ul class="space-y-2">
743
+ <li><a href="#" class="hover:text-white transition">Return Policy</a></li>
744
+ <li><a href="#" class="hover:text-white transition">Terms Of Use</a></li>
745
+ <li><a href="#" class="hover:text-white transition">Security</a></li>
746
+ <li><a href="#" class="hover:text-white transition">Privacy</a></li>
747
+ <li><a href="#" class="hover:text-white transition">Sitemap</a></li>
748
+ </ul>
749
+ </div>
750
+
751
+ <!-- Social -->
752
+ <div>
753
+ <h3 class="text-white text-lg font-bold mb-4">SOCIAL</h3>
754
+ <div class="flex space-x-4">
755
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 transition">
756
+ <i class="fab fa-facebook-f"></i>
757
+ </a>
758
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-400 transition">
759
+ <i class="fab fa-twitter"></i>
760
+ </a>
761
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-600 transition">
762
+ <i class="fab fa-youtube"></i>
763
+ </a>
764
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-pink-600 transition">
765
+ <i class="fab fa-instagram"></i>
766
+ </a>
767
+ </div>
768
+
769
+ <h4 class="text-white text-lg font-bold mt-6 mb-3">Download App</h4>
770
+ <div class="flex space-x-2">
771
+ <a href="#" class="w-32 h-10 rounded bg-gray-800 hover:bg-gray-700 transition"></a>
772
+ <a href="#" class="w-32 h-10 rounded bg-gray-800 hover:bg-gray-700 transition"></a>
773
+ </div>
774
+ </div>
775
+ </div>
776
+
777
+ <div class="border-t border-gray-800 mt-8 pt-8">
778
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
779
+ <div class="flex items-center">
780
+ <i class="fas fa-briefcase mr-3 text-gray-400"></i>
781
+ <span class="hover:text-white cursor-pointer transition">Become a Seller</span>
782
+ </div>
783
+ <div class="flex items-center">
784
+ <i class="fas fa-star mr-3 text-gray-400"></i>
785
+ <span class="hover:text-white cursor-pointer transition">Advertise</span>
786
+ </div>
787
+ <div class="flex items-center">
788
+ <i class="fas fa-gift mr-3 text-gray-400"></i>
789
+ <span class="hover:text-white cursor-pointer transition">Gift Cards</span>
790
+ </div>
791
+ <div class="flex items-center">
792
+ <i class="fas fa-question-circle mr-3 text-gray-400"></i>
793
+ <span class="hover:text-white cursor-pointer transition">Help Center</span>
794
+ </div>
795
+ </div>
796
+ </div>
797
+ </div>
798
+
799
+ <div class="bg-gray-800 py-4">
800
+ <div class="container mx-auto px-4 text-center text-gray-400 text-sm">
801
+ © 2023 Flipkart Clone. All Rights Reserved.
802
+ </div>
803
+ </div>
804
+ </footer>
805
+
806
+ <!-- Login Modal -->
807
+ <div id="login-modal" class="fixed inset-0 z-50 hidden modal">
808
+ <div class="flex items-center justify-center min-h-screen p-4">
809
+ <div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative">
810
+ <div class="absolute top-4 right-4">
811
+ <button id="close-login" class="text-gray-500 hover:text-gray-700">
812
+ <i class="fas fa-times"></i>
813
+ </button>
814
+ </div>
815
+
816
+ <div class="p-8">
817
+ <h2 class="text-3xl font-bold text-center mb-8">Welcome Back</h2>
818
+
819
+ <div class="mb-6">
820
+ <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"
821
+ id="login-email" type="text" placeholder="Email or mobile number">
822
+ </div>
823
+
824
+ <div class="mb-6">
825
+ <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"
826
+ id="login-password" type="password" placeholder="Password">
827
+ </div>
828
+
829
+ <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">
830
+ Login
831
+ </button>
832
+
833
+ <div class="text-center">
834
+ <a href="#" class="text-blue-600 text-sm hover:underline">Forgot Password?</a>
835
+ </div>
836
+
837
+ <div class="flex items-center my-6">
838
+ <div class="flex-1 border-t border-gray-200"></div>
839
+ <span class="px-3 text-gray-400">or</span>
840
+ <div class="flex-1 border-t border-gray-200"></div>
841
+ </div>
842
+
843
+ <div class="space-y-3">
844
+ <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">
845
+ <i class="fab fa-google text-blue-600"></i>
846
+ <span>Continue with Google</span>
847
+ </button>
848
+ <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">
849
+ <i class="fab fa-facebook text-blue-600"></i>
850
+ <span>Continue with Facebook</span>
851
+ </button>
852
+ </div>
853
+
854
+ <p class="text-center text-gray-500 mt-6">
855
+ New to Flipkart? <a href="#" class="text-blue-600 hover:underline">Create an account</a>
856
+ </p>
857
+ </div>
858
+ </div>
859
+ </div>
860
+ </div>
861
+
862
+ <!-- Cart Sidebar -->
863
+ <div id="cart-sidebar" class="fixed inset-0 z-50 overflow-hidden hidden">
864
+ <div class="absolute inset-0 bg-black/30" id="cart-backdrop"></div>
865
+ <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">
866
+ <div class="flex flex-col h-full">
867
+ <div class="p-6 border-b border-gray-200 flex items-center justify-between">
868
+ <h2 class="text-xl font-bold">My Cart</h2>
869
+ <button id="close-cart" class="text-gray-500 hover:text-gray-700">
870
+ <i class="fas fa-times"></i>
871
+ </button>
872
+ </div>
873
+
874
+ <div id="cart-items" class="flex-1 overflow-y-auto p-6">
875
+ <div class="flex flex-col items-center justify-center h-full">
876
+ <div class="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center mb-4">
877
+ <i class="fas fa-shopping-cart text-gray-400 text-3xl"></i>
878
+ </div>
879
+ <h3 class="text-xl font-semibold mb-2">Your cart is empty</h3>
880
+ <p class="text-gray-500 text-center mb-6">Looks like you haven't added anything to your cart yet</p>
881
+ <button class="bg-blue-600 text-white px-6 py-2.5 rounded-lg hover:bg-blue-700 transition">
882
+ Continue Shopping
883
+ </button>
884
+ </div>
885
+ </div>
886
+
887
+ <div class="p-6 border-t border-gray-200">
888
+ <div class="flex justify-between mb-4">
889
+ <span>Subtotal (<span id="sidebar-item-count">0</span> items):</span>
890
+ <span id="cart-subtotal" class="font-bold text-lg">₹0</span>
891
+ </div>
892
+ <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">
893
+ <span>Proceed to Checkout</span>
894
+ <i class="fas fa-arrow-right ml-2"></i>
895
+ </button>
896
+ </div>
897
+ </div>
898
+ </div>
899
+ </div>
900
+
901
+ <script>
902
+ // Cart functionality
903
+ let cart = [];
904
+
905
+ // Load cart from localStorage if available
906
+ if (localStorage.getItem('cart')) {
907
+ cart = JSON.parse(localStorage.getItem('cart'));
908
+ updateCartCount();
909
+ }
910
+
911
+ // Login modal functionality
912
+ const loginBtn = document.getElementById('login-btn');
913
+ const loginModal = document.getElementById('login-modal');
914
+ const closeLogin = document.getElementById('close-login');
915
+ const loginSubmit = document.getElementById('login-submit');
916
+
917
+ loginBtn.addEventListener('click', () => {
918
+ loginModal.classList.remove('hidden');
919
+ document.body.style.overflow = 'hidden';
920
+ });
921
+
922
+ closeLogin.addEventListener('click', () => {
923
+ loginModal.classList.add('hidden');
924
+ document.body.style.overflow = '';
925
+ });
926
+
927
+ loginSubmit.addEventListener('click', () => {
928
+ const email = document.getElementById('login-email').value;
929
+ const password = document.getElementById('login-password').value;
930
+
931
+ if (email && password) {
932
+ showNotification('Logged in successfully!', 'success');
933
+ loginModal.classList.add('hidden');
934
+ document.body.style.overflow = '';
935
+ loginBtn.innerHTML = `
936
+ <i class="far fa-user-circle"></i>
937
+ <span>${email.split('@')[0]}</span>
938
+ `;
939
+ } else {
940
+ showNotification('Please fill all fields', 'error');
941
+ }
942
+ });
943
+
944
+ // Cart functionality
945
+ const cartButton = document.getElementById('cart-button');
946
+ const cartSidebar = document.getElementById('cart-sidebar');
947
+ const cartBackdrop = document.getElementById('cart-backdrop');
948
+ const closeCart = document.getElementById('close-cart');
949
+ const addToCartButtons = document.querySelectorAll('.add-to-cart');
950
+
951
+ cartButton.addEventListener('click', (e) => {
952
+ e.preventDefault();
953
+ cartSidebar.classList.remove('hidden');
954
+ setTimeout(() => {
955
+ cartSidebar.querySelector('div.cart-sidebar').style.transform = 'translateX(0)';
956
+ document.body.style.overflow = 'hidden';
957
+ }, 10);
958
+ updateCartSidebar();
959
+ });
960
+
961
+ const closeCartSidebar = () => {
962
+ cartSidebar.querySelector('div.cart-sidebar').style.transform = 'translateX(100%)';
963
+ setTimeout(() => {
964
+ cartSidebar.classList.add('hidden');
965
+ document.body.style.overflow = '';
966
+ }, 300);
967
+ };
968
+
969
+ closeCart.addEventListener('click', closeCartSidebar);
970
+ cartBackdrop.addEventListener('click', closeCartSidebar);
971
+
972
+ addToCartButtons.forEach(button => {
973
+ button.addEventListener('click', function() {
974
+ const id = this.getAttribute('data-id');
975
+ const name = this.getAttribute('data-name');
976
+ const price = parseFloat(this.getAttribute('data-price'));
977
+
978
+ addToCart(id, name, price);
979
+ });
980
+ });
981
+
982
+ function addToCart(id, name, price) {
983
+ const existingItem = cart.find(item => item.id === id);
984
+
985
+ if (existingItem) {
986
+ existingItem.quantity += 1;
987
+ } else {
988
+ cart.push({
989
+ id,
990
+ name,
991
+ price,
992
+ quantity: 1
993
+ });
994
+ }
995
+
996
+ // Save to localStorage
997
+ localStorage.setItem('cart', JSON.stringify(cart));
998
+
999
+ // Update UI
1000
+ updateCartCount();
1001
+ updateCartSidebar();
1002
+
1003
+ // Show notification
1004
+ showNotification(`${name} added to cart!`, 'success');
1005
+
1006
+ // Open cart sidebar if it's not empty
1007
+ if (cart.length === 1) {
1008
+ cartSidebar.classList.remove('hidden');
1009
+ setTimeout(() => {
1010
+ cartSidebar.querySelector('div.cart-sidebar').style.transform = 'translateX(0)';
1011
+ document.body.style.overflow = 'hidden';
1012
+ }, 10);
1013
+ }
1014
+ }
1015
+
1016
+ function updateCartCount() {
1017
+ const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
1018
+ document.getElementById('cart-count').textContent = totalItems;
1019
+ }
1020
+
1021
+ function updateCartSidebar() {
1022
+ const cartItemsContainer = document.getElementById('cart-items');
1023
+ const sidebarItemCount = document.getElementById('sidebar-item-count');
1024
+ const cartSubtotal = document.getElementById('cart-subtotal');
1025
+
1026
+ const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
1027
+ const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
1028
+
1029
+ sidebarItemCount.textContent = totalItems;
1030
+ cartSubtotal.textContent = `₹${subtotal.toLocaleString('en-IN')}`;
1031
+
1032
+ if (cart.length === 0) {
1033
+ cartItemsContainer.innerHTML = `
1034
+ <div class="flex flex-col items-center justify-center h-full">
1035
+ <div class="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center mb-4">
1036
+ <i class="fas fa-shopping-cart text-gray-400 text-3xl"></i>
1037
+ </div>
1038
+ <h3 class="text-xl font-semibold mb-2">Your cart is empty</h3>
1039
+ <p class="text-gray-500 text-center mb-6">Looks like you haven't added anything to your cart yet</p>
1040
+ <button class="bg-blue-600 text-white px-6 py-2.5 rounded-lg hover:bg-blue-700 transition">
1041
+ Continue Shopping
1042
+ </button>
1043
+ </div>
1044
+ `;
1045
+ return;
1046
+ }
1047
+
1048
+ let cartItemsHTML = '<div class="space-y-4">';
1049
+
1050
+ cart.forEach(item => {
1051
+ const productImg = document.querySelector(`.add-to-cart[data-id="${item.id}"]`).closest('.product-card').querySelector('.product-img').src;
1052
+
1053
+ cartItemsHTML += `
1054
+ <div class="flex items-start p-3 rounded-lg bg-gray-50">
1055
+ <div class="w-20 h-20 rounded-md bg-white border border-gray-200 overflow-hidden mr-4 flex-shrink-0">
1056
+ <img src="${productImg}" alt="${item.name}" class="w-full h-full object-contain">
1057
+ </div>
1058
+ <div class="flex-1">
1059
+ <h3 class="text-sm font-semibold text-gray-800">${item.name}</h3>
1060
+ <div class="flex items-center justify-between mt-1">
1061
+ <span class="text-sm font-bold text-gray-700">₹${item.price.toLocaleString('en-IN')}</span>
1062
+ <div class="flex items-center">
1063
+ <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">
1064
+ <i class="fas fa-minus text-xs"></i>
1065
+ </button>
1066
+ <span class="w-8 text-center">${item.quantity}</span>
1067
+ <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">
1068
+ <i class="fas fa-plus text-xs"></i>
1069
+ </button>
1070
+ </div>
1071
+ </div>
1072
+ </div>
1073
+ <button class="remove-item ml-2 text-gray-400 hover:text-red-500 transition" data-id="${item.id}">
1074
+ <i class="fas fa-trash-alt text-sm"></i>
1075
+ </button>
1076
+ </div>
1077
+ `;
1078
+ });
1079
+
1080
+ cartItemsHTML += '</div>';
1081
+ cartItemsContainer.innerHTML = cartItemsHTML;
1082
+
1083
+ // Add event listeners to remove buttons
1084
+ document.querySelectorAll('.remove-item').forEach(button => {
1085
+ button.addEventListener('click', function() {
1086
+ const id = this.getAttribute('data-id');
1087
+ removeFromCart(id);
1088
+ });
1089
+ });
1090
+
1091
+ // Add event listeners to quantity buttons
1092
+ document.querySelectorAll('.quantity-btn').forEach(button => {
1093
+ button.addEventListener('click', function() {
1094
+ const id = this.getAttribute('data-id');
1095
+ const action = this.getAttribute('data-action');
1096
+ updateQuantity(id, action);
1097
+ });
1098
+ });
1099
+ }
1100
+
1101
+ function updateQuantity(id, action) {
1102
+ const item = cart.find(item => item.id === id);
1103
+
1104
+ if (action === 'increase') {
1105
+ item.quantity += 1;
1106
+ } else if (action === 'decrease' && item.quantity > 1) {
1107
+ item.quantity -= 1;
1108
+ }
1109
+
1110
+ localStorage.setItem('cart', JSON.stringify(cart));
1111
+ updateCartCount();
1112
+ updateCartSidebar();
1113
+ }
1114
+
1115
+ function removeFromCart(id) {
1116
+ cart = cart.filter(item => item.id !== id);
1117
+ localStorage.setItem('cart', JSON.stringify(cart));
1118
+ updateCartCount();
1119
+ updateCartSidebar();
1120
+ showNotification('Item removed from cart', 'success');
1121
+ }
1122
+
1123
+ // Checkout button
1124
+ document.getElementById('checkout-btn').addEventListener('click', () => {
1125
+ if (cart.length === 0) {
1126
+ showNotification('Your cart is empty!', 'error');
1127
+ return;
1128
+ }
1129
+
1130
+ showNotification('Proceeding to checkout!', 'success');
1131
+ closeCartSidebar();
1132
+ // Here you would typically redirect to a checkout page
1133
+ });
1134
+
1135
+ // Notification system
1136
+ function showNotification(message, type) {
1137
+ const notificationArea = document.getElementById('notification-area');
1138
+ const notification = document.createElement('div');
1139
+
1140
+ 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'}`;
1141
+ notification.innerHTML = `
1142
+ <i class="${type === 'success' ? 'fas fa-check-circle' : 'fas fa-exclamation-circle'} mr-2"></i>
1143
+ <span class="flex-1 text-sm">${message}</span>
1144
+ <button class="ml-4 -mr-1">
1145
+ <i class="fas fa-times"></i>
1146
+ </button>
1147
+ `;
1148
+
1149
+ notificationArea.appendChild(notification);
1150
+
1151
+ // Auto remove notification after 3 seconds
1152
+ const timeout = setTimeout(() => {
1153
+ notification.style.opacity = '0';
1154
+ setTimeout(() => {
1155
+ notification.remove();
1156
+ }, 300);
1157
+ }, 3000);
1158
+
1159
+ // Add click to dismiss
1160
+ notification.querySelector('button').addEventListener('click', () => {
1161
+ clearTimeout(timeout);
1162
+ notification.remove();
1163
+ });
1164
+ }
1165
+
1166
+ // Close modals when clicking outside
1167
+ window.addEventListener('click', (e) => {
1168
+ if (e.target === loginModal) {
1169
+ loginModal.classList.add('hidden');
1170
+ document.body.style.overflow = '';
1171
+ }
1172
+ });
1173
+
1174
+ // Product search functionality (simplified)
1175
+ document.querySelectorAll('.search-bar button').forEach(button => {
1176
+ button.addEventListener('click', () => {
1177
+ const input = button.closest('.search-bar').querySelector('input');
1178
+ const query = input.value.trim();
1179
+ if (query) {
1180
+ showNotification(`Searching for: ${query}`, 'success');
1181
+ input.value = '';
1182
+ }
1183
+ });
1184
+ });
1185
+
1186
+ // Allow search on Enter key
1187
+ document.querySelectorAll('.search-bar input').forEach(input => {
1188
+ input.addEventListener('keypress', (e) => {
1189
+ if (e.key === 'Enter') {
1190
+ const query = input.value.trim();
1191
+ if (query) {
1192
+ showNotification(`Searching for: ${query}`, 'success');
1193
+ input.value = '';
1194
+ }
1195
+ }
1196
+ });
1197
+ });
1198
+ </script>
1199
+ <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>
1200
+ </html>