Hugging Face's logo

Spaces:
bdsmgdjfv
/
anycoder-4c4c3b76
Running

App Files Community
bdsmgdjfv commited on
Commit
97fbccc
·
verified ·
1 Parent(s): 9528130

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1359 -19
index.html CHANGED
@@ -1,19 +1,1359 @@
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="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>علي إكسبريس - تسوق أونلاين</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #ff4747;
11
+ --primary-dark: #e63e3e;
12
+ --secondary: #ff6b6b;
13
+ --accent: #ffd700;
14
+ --dark: #1a1a1a;
15
+ --gray: #f5f5f5;
16
+ --gray-dark: #666;
17
+ --white: #ffffff;
18
+ --shadow: 0 2px 8px rgba(0,0,0,0.1);
19
+ --shadow-lg: 0 4px 12px rgba(0,0,0,0.15);
20
+ --radius: 8px;
21
+ --radius-lg: 16px;
22
+ --transition: all 0.3s ease;
23
+ }
24
+
25
+ * {
26
+ margin: 0;
27
+ padding: 0;
28
+ box-sizing: border-box;
29
+ }
30
+
31
+ body {
32
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
33
+ background-color: var(--gray);
34
+ color: var(--dark);
35
+ line-height: 1.6;
36
+ }
37
+
38
+ /* Scrollbar Styling */
39
+ ::-webkit-scrollbar {
40
+ width: 8px;
41
+ }
42
+ ::-webkit-scrollbar-track {
43
+ background: var(--gray);
44
+ }
45
+ ::-webkit-scrollbar-thumb {
46
+ background: var(--primary);
47
+ border-radius: 4px;
48
+ }
49
+
50
+ /* Header Styles */
51
+ .top-bar {
52
+ background: var(--dark);
53
+ color: var(--white);
54
+ padding: 8px 0;
55
+ font-size: 0.85rem;
56
+ }
57
+
58
+ .container {
59
+ max-width: 1400px;
60
+ margin: 0 auto;
61
+ padding: 0 20px;
62
+ }
63
+
64
+ .top-bar-content {
65
+ display: flex;
66
+ justify-content: space-between;
67
+ align-items: center;
68
+ }
69
+
70
+ .top-links a {
71
+ color: var(--white);
72
+ text-decoration: none;
73
+ margin: 0 10px;
74
+ transition: var(--transition);
75
+ }
76
+
77
+ .top-links a:hover {
78
+ color: var(--primary);
79
+ }
80
+
81
+ /* Main Header */
82
+ .main-header {
83
+ background: var(--white);
84
+ padding: 15px 0;
85
+ position: sticky;
86
+ top: 0;
87
+ z-index: 1000;
88
+ box-shadow: var(--shadow);
89
+ }
90
+
91
+ .header-content {
92
+ display: flex;
93
+ align-items: center;
94
+ gap: 30px;
95
+ }
96
+
97
+ .logo {
98
+ font-size: 2rem;
99
+ font-weight: bold;
100
+ color: var(--primary);
101
+ text-decoration: none;
102
+ display: flex;
103
+ align-items: center;
104
+ gap: 10px;
105
+ }
106
+
107
+ .search-box {
108
+ flex: 1;
109
+ position: relative;
110
+ max-width: 600px;
111
+ }
112
+
113
+ .search-box input {
114
+ width: 100%;
115
+ padding: 12px 45px 12px 20px;
116
+ border: 2px solid var(--primary);
117
+ border-radius: 30px;
118
+ font-size: 1rem;
119
+ transition: var(--transition);
120
+ }
121
+
122
+ .search-box input:focus {
123
+ outline: none;
124
+ box-shadow: 0 0 0 3px rgba(255, 71, 71, 0.1);
125
+ }
126
+
127
+ .search-btn {
128
+ position: absolute;
129
+ left: 5px;
130
+ top: 50%;
131
+ transform: translateY(-50%);
132
+ background: var(--primary);
133
+ color: white;
134
+ border: none;
135
+ width: 36px;
136
+ height: 36px;
137
+ border-radius: 50%;
138
+ cursor: pointer;
139
+ transition: var(--transition);
140
+ }
141
+
142
+ .search-btn:hover {
143
+ background: var(--primary-dark);
144
+ }
145
+
146
+ .header-actions {
147
+ display: flex;
148
+ gap: 25px;
149
+ align-items: center;
150
+ }
151
+
152
+ .action-btn {
153
+ position: relative;
154
+ cursor: pointer;
155
+ text-align: center;
156
+ transition: var(--transition);
157
+ }
158
+
159
+ .action-btn:hover {
160
+ color: var(--primary);
161
+ transform: translateY(-2px);
162
+ }
163
+
164
+ .action-btn i {
165
+ font-size: 1.5rem;
166
+ display: block;
167
+ margin-bottom: 4px;
168
+ }
169
+
170
+ .action-btn span {
171
+ font-size: 0.8rem;
172
+ display: block;
173
+ }
174
+
175
+ .badge {
176
+ position: absolute;
177
+ top: -5px;
178
+ right: -5px;
179
+ background: var(--primary);
180
+ color: white;
181
+ font-size: 0.7rem;
182
+ width: 20px;
183
+ height: 20px;
184
+ border-radius: 50%;
185
+ display: flex;
186
+ align-items: center;
187
+ justify-content: center;
188
+ font-weight: bold;
189
+ }
190
+
191
+ /* Navigation */
192
+ .main-nav {
193
+ background: var(--white);
194
+ border-top: 1px solid #eee;
195
+ padding: 10px 0;
196
+ }
197
+
198
+ .nav-content {
199
+ display: flex;
200
+ gap: 30px;
201
+ overflow-x: auto;
202
+ scrollbar-width: none;
203
+ }
204
+
205
+ .nav-content::-webkit-scrollbar {
206
+ display: none;
207
+ }
208
+
209
+ .nav-item {
210
+ white-space: nowrap;
211
+ cursor: pointer;
212
+ padding: 5px 15px;
213
+ border-radius: 20px;
214
+ transition: var(--transition);
215
+ font-weight: 500;
216
+ }
217
+
218
+ .nav-item:hover, .nav-item.active {
219
+ background: var(--primary);
220
+ color: white;
221
+ }
222
+
223
+ /* Hero Section */
224
+ .hero-section {
225
+ margin: 20px 0;
226
+ }
227
+
228
+ .hero-grid {
229
+ display: grid;
230
+ grid-template-columns: 250px 1fr 300px;
231
+ gap: 20px;
232
+ height: 400px;
233
+ }
234
+
235
+ .categories-sidebar {
236
+ background: white;
237
+ border-radius: var(--radius-lg);
238
+ padding: 20px;
239
+ box-shadow: var(--shadow);
240
+ overflow-y: auto;
241
+ }
242
+
243
+ .category-item {
244
+ display: flex;
245
+ align-items: center;
246
+ gap: 10px;
247
+ padding: 10px;
248
+ cursor: pointer;
249
+ border-radius: var(--radius);
250
+ transition: var(--transition);
251
+ margin-bottom: 5px;
252
+ }
253
+
254
+ .category-item:hover {
255
+ background: var(--gray);
256
+ color: var(--primary);
257
+ }
258
+
259
+ .category-item i {
260
+ width: 24px;
261
+ text-align: center;
262
+ }
263
+
264
+ .hero-slider {
265
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
266
+ border-radius: var(--radius-lg);
267
+ position: relative;
268
+ overflow: hidden;
269
+ display: flex;
270
+ align-items: center;
271
+ justify-content: center;
272
+ color: white;
273
+ text-align: center;
274
+ padding: 40px;
275
+ }
276
+
277
+ .hero-content h1 {
278
+ font-size: 2.5rem;
279
+ margin-bottom: 15px;
280
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
281
+ }
282
+
283
+ .hero-content p {
284
+ font-size: 1.2rem;
285
+ margin-bottom: 25px;
286
+ }
287
+
288
+ .btn-primary {
289
+ background: var(--primary);
290
+ color: white;
291
+ border: none;
292
+ padding: 12px 30px;
293
+ border-radius: 25px;
294
+ font-size: 1rem;
295
+ cursor: pointer;
296
+ transition: var(--transition);
297
+ font-weight: bold;
298
+ display: inline-flex;
299
+ align-items: center;
300
+ gap: 8px;
301
+ }
302
+
303
+ .btn-primary:hover {
304
+ background: var(--primary-dark);
305
+ transform: translateY(-2px);
306
+ box-shadow: 0 5px 15px rgba(255, 71, 71, 0.3);
307
+ }
308
+
309
+ .deals-sidebar {
310
+ display: flex;
311
+ flex-direction: column;
312
+ gap: 15px;
313
+ }
314
+
315
+ .deal-card {
316
+ background: white;
317
+ border-radius: var(--radius-lg);
318
+ padding: 20px;
319
+ flex: 1;
320
+ box-shadow: var(--shadow);
321
+ position: relative;
322
+ overflow: hidden;
323
+ }
324
+
325
+ .deal-card::before {
326
+ content: 'خصم 50%';
327
+ position: absolute;
328
+ top: 10px;
329
+ right: -30px;
330
+ background: var(--primary);
331
+ color: white;
332
+ padding: 5px 40px;
333
+ transform: rotate(45deg);
334
+ font-size: 0.8rem;
335
+ font-weight: bold;
336
+ }
337
+
338
+ .countdown {
339
+ display: flex;
340
+ gap: 10px;
341
+ margin-top: 15px;
342
+ justify-content: center;
343
+ }
344
+
345
+ .countdown-item {
346
+ background: var(--dark);
347
+ color: white;
348
+ padding: 8px;
349
+ border-radius: var(--radius);
350
+ min-width: 40px;
351
+ text-align: center;
352
+ }
353
+
354
+ .countdown-item span {
355
+ display: block;
356
+ font-size: 1.2rem;
357
+ font-weight: bold;
358
+ }
359
+
360
+ .countdown-item small {
361
+ font-size: 0.7rem;
362
+ }
363
+
364
+ /* Products Section */
365
+ .section-header {
366
+ display: flex;
367
+ justify-content: space-between;
368
+ align-items: center;
369
+ margin: 40px 0 20px;
370
+ }
371
+
372
+ .section-title {
373
+ font-size: 1.8rem;
374
+ display: flex;
375
+ align-items: center;
376
+ gap: 10px;
377
+ }
378
+
379
+ .section-title i {
380
+ color: var(--primary);
381
+ }
382
+
383
+ .view-all {
384
+ color: var(--primary);
385
+ text-decoration: none;
386
+ font-weight: 500;
387
+ display: flex;
388
+ align-items: center;
389
+ gap: 5px;
390
+ }
391
+
392
+ .products-grid {
393
+ display: grid;
394
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
395
+ gap: 20px;
396
+ }
397
+
398
+ .product-card {
399
+ background: white;
400
+ border-radius: var(--radius-lg);
401
+ overflow: hidden;
402
+ box-shadow: var(--shadow);
403
+ transition: var(--transition);
404
+ cursor: pointer;
405
+ position: relative;
406
+ }
407
+
408
+ .product-card:hover {
409
+ transform: translateY(-5px);
410
+ box-shadow: var(--shadow-lg);
411
+ }
412
+
413
+ .product-image {
414
+ width: 100%;
415
+ height: 250px;
416
+ object-fit: cover;
417
+ background: var(--gray);
418
+ }
419
+
420
+ .product-info {
421
+ padding: 15px;
422
+ }
423
+
424
+ .product-title {
425
+ font-size: 0.95rem;
426
+ margin-bottom: 8px;
427
+ display: -webkit-box;
428
+ -webkit-line-clamp: 2;
429
+ -webkit-box-orient: vertical;
430
+ overflow: hidden;
431
+ height: 45px;
432
+ }
433
+
434
+ .product-price {
435
+ display: flex;
436
+ align-items: center;
437
+ gap: 10px;
438
+ margin-bottom: 8px;
439
+ }
440
+
441
+ .current-price {
442
+ font-size: 1.3rem;
443
+ font-weight: bold;
444
+ color: var(--primary);
445
+ }
446
+
447
+ .old-price {
448
+ text-decoration: line-through;
449
+ color: var(--gray-dark);
450
+ font-size: 0.9rem;
451
+ }
452
+
453
+ .discount-badge {
454
+ background: #ffe6e6;
455
+ color: var(--primary);
456
+ padding: 2px 8px;
457
+ border-radius: 12px;
458
+ font-size: 0.8rem;
459
+ font-weight: bold;
460
+ }
461
+
462
+ .product-rating {
463
+ display: flex;
464
+ align-items: center;
465
+ gap: 5px;
466
+ color: var(--accent);
467
+ font-size: 0.9rem;
468
+ }
469
+
470
+ .sold-count {
471
+ color: var(--gray-dark);
472
+ font-size: 0.8rem;
473
+ margin-right: auto;
474
+ }
475
+
476
+ .add-to-cart {
477
+ width: 100%;
478
+ margin-top: 10px;
479
+ padding: 10px;
480
+ background: var(--primary);
481
+ color: white;
482
+ border: none;
483
+ border-radius: var(--radius);
484
+ cursor: pointer;
485
+ font-weight: bold;
486
+ transition: var(--transition);
487
+ opacity: 0;
488
+ transform: translateY(10px);
489
+ }
490
+
491
+ .product-card:hover .add-to-cart {
492
+ opacity: 1;
493
+ transform: translateY(0);
494
+ }
495
+
496
+ .add-to-cart:hover {
497
+ background: var(--primary-dark);
498
+ }
499
+
500
+ /* Cart Sidebar */
501
+ .cart-overlay {
502
+ position: fixed;
503
+ top: 0;
504
+ left: 0;
505
+ width: 100%;
506
+ height: 100%;
507
+ background: rgba(0,0,0,0.5);
508
+ z-index: 2000;
509
+ opacity: 0;
510
+ visibility: hidden;
511
+ transition: var(--transition);
512
+ }
513
+
514
+ .cart-overlay.active {
515
+ opacity: 1;
516
+ visibility: visible;
517
+ }
518
+
519
+ .cart-sidebar {
520
+ position: fixed;
521
+ top: 0;
522
+ left: -400px;
523
+ width: 400px;
524
+ height: 100%;
525
+ background: white;
526
+ z-index: 2001;
527
+ transition: var(--transition);
528
+ display: flex;
529
+ flex-direction: column;
530
+ }
531
+
532
+ .cart-sidebar.active {
533
+ left: 0;
534
+ }
535
+
536
+ .cart-header {
537
+ padding: 20px;
538
+ border-bottom: 1px solid #eee;
539
+ display: flex;
540
+ justify-content: space-between;
541
+ align-items: center;
542
+ }
543
+
544
+ .cart-items {
545
+ flex: 1;
546
+ overflow-y: auto;
547
+ padding: 20px;
548
+ }
549
+
550
+ .cart-item {
551
+ display: flex;
552
+ gap: 15px;
553
+ margin-bottom: 20px;
554
+ padding-bottom: 20px;
555
+ border-bottom: 1px solid #eee;
556
+ }
557
+
558
+ .cart-item-image {
559
+ width: 80px;
560
+ height: 80px;
561
+ object-fit: cover;
562
+ border-radius: var(--radius);
563
+ }
564
+
565
+ .cart-item-details {
566
+ flex: 1;
567
+ }
568
+
569
+ .cart-item-title {
570
+ font-size: 0.9rem;
571
+ margin-bottom: 5px;
572
+ }
573
+
574
+ .cart-item-price {
575
+ color: var(--primary);
576
+ font-weight: bold;
577
+ }
578
+
579
+ .quantity-control {
580
+ display: flex;
581
+ align-items: center;
582
+ gap: 10px;
583
+ margin-top: 10px;
584
+ }
585
+
586
+ .qty-btn {
587
+ width: 28px;
588
+ height: 28px;
589
+ border: 1px solid #ddd;
590
+ background: white;
591
+ cursor: pointer;
592
+ border-radius: 4px;
593
+ transition: var(--transition);
594
+ }
595
+
596
+ .qty-btn:hover {
597
+ background: var(--gray);
598
+ }
599
+
600
+ .remove-item {
601
+ color: #999;
602
+ cursor: pointer;
603
+ transition: var(--transition);
604
+ }
605
+
606
+ .remove-item:hover {
607
+ color: var(--primary);
608
+ }
609
+
610
+ .cart-footer {
611
+ padding: 20px;
612
+ border-top: 1px solid #eee;
613
+ background: var(--gray);
614
+ }
615
+
616
+ .cart-total {
617
+ display: flex;
618
+ justify-content: space-between;
619
+ font-size: 1.2rem;
620
+ font-weight: bold;
621
+ margin-bottom: 15px;
622
+ }
623
+
624
+ .checkout-btn {
625
+ width: 100%;
626
+ padding: 15px;
627
+ background: var(--primary);
628
+ color: white;
629
+ border: none;
630
+ border-radius: var(--radius);
631
+ font-size: 1.1rem;
632
+ font-weight: bold;
633
+ cursor: pointer;
634
+ transition: var(--transition);
635
+ }
636
+
637
+ .checkout-btn:hover {
638
+ background: var(--primary-dark);
639
+ }
640
+
641
+ /* Product Modal */
642
+ .modal-overlay {
643
+ position: fixed;
644
+ top: 0;
645
+ left: 0;
646
+ width: 100%;
647
+ height: 100%;
648
+ background: rgba(0,0,0,0.7);
649
+ z-index: 3000;
650
+ display: flex;
651
+ align-items: center;
652
+ justify-content: center;
653
+ opacity: 0;
654
+ visibility: hidden;
655
+ transition: var(--transition);
656
+ padding: 20px;
657
+ }
658
+
659
+ .modal-overlay.active {
660
+ opacity: 1;
661
+ visibility: visible;
662
+ }
663
+
664
+ .modal-content {
665
+ background: white;
666
+ border-radius: var(--radius-lg);
667
+ max-width: 900px;
668
+ width: 100%;
669
+ max-height: 90vh;
670
+ overflow-y: auto;
671
+ position: relative;
672
+ transform: scale(0.9);
673
+ transition: var(--transition);
674
+ }
675
+
676
+ .modal-overlay.active .modal-content {
677
+ transform: scale(1);
678
+ }
679
+
680
+ .modal-close {
681
+ position: absolute;
682
+ top: 20px;
683
+ left: 20px;
684
+ width: 40px;
685
+ height: 40px;
686
+ background: var(--gray);
687
+ border: none;
688
+ border-radius: 50%;
689
+ cursor: pointer;
690
+ font-size: 1.2rem;
691
+ z-index: 10;
692
+ transition: var(--transition);
693
+ }
694
+
695
+ .modal-close:hover {
696
+ background: var(--primary);
697
+ color: white;
698
+ }
699
+
700
+ .modal-body {
701
+ display: grid;
702
+ grid-template-columns: 1fr 1fr;
703
+ gap: 30px;
704
+ padding: 40px;
705
+ }
706
+
707
+ .modal-image {
708
+ width: 100%;
709
+ border-radius: var(--radius);
710
+ }
711
+
712
+ .modal-details h2 {
713
+ font-size: 1.8rem;
714
+ margin-bottom: 15px;
715
+ }
716
+
717
+ .modal-price {
718
+ font-size: 2rem;
719
+ color: var(--primary);
720
+ font-weight: bold;
721
+ margin-bottom: 20px;
722
+ }
723
+
724
+ .modal-description {
725
+ color: var(--gray-dark);
726
+ line-height: 1.8;
727
+ margin-bottom: 20px;
728
+ }
729
+
730
+ .modal-actions {
731
+ display: flex;
732
+ gap: 15px;
733
+ margin-top: 30px;
734
+ }
735
+
736
+ .btn-secondary {
737
+ flex: 1;
738
+ padding: 15px;
739
+ border: 2px solid var(--primary);
740
+ background: white;
741
+ color: var(--primary);
742
+ border-radius: var(--radius);
743
+ cursor: pointer;
744
+ font-weight: bold;
745
+ transition: var(--transition);
746
+ }
747
+
748
+ .btn-secondary:hover {
749
+ background: var(--primary);
750
+ color: white;
751
+ }
752
+
753
+ /* Toast Notification */
754
+ .toast {
755
+ position: fixed;
756
+ bottom: 30px;
757
+ right: 30px;
758
+ background: var(--dark);
759
+ color: white;
760
+ padding: 15px 25px;
761
+ border-radius: var(--radius);
762
+ box-shadow: var(--shadow-lg);
763
+ display: flex;
764
+ align-items: center;
765
+ gap: 10px;
766
+ transform: translateY(100px);
767
+ opacity: 0;
768
+ transition: var(--transition);
769
+ z-index: 4000;
770
+ }
771
+
772
+ .toast.show {
773
+ transform: translateY(0);
774
+ opacity: 1;
775
+ }
776
+
777
+ .toast i {
778
+ color: #4caf50;
779
+ }
780
+
781
+ /* Footer */
782
+ footer {
783
+ background: var(--dark);
784
+ color: white;
785
+ padding: 50px 0 20px;
786
+ margin-top: 60px;
787
+ }
788
+
789
+ .footer-content {
790
+ display: grid;
791
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
792
+ gap: 40px;
793
+ margin-bottom: 30px;
794
+ }
795
+
796
+ .footer-section h3 {
797
+ margin-bottom: 20px;
798
+ color: var(--primary);
799
+ }
800
+
801
+ .footer-section ul {
802
+ list-style: none;
803
+ }
804
+
805
+ .footer-section ul li {
806
+ margin-bottom: 10px;
807
+ }
808
+
809
+ .footer-section a {
810
+ color: #ccc;
811
+ text-decoration: none;
812
+ transition: var(--transition);
813
+ }
814
+
815
+ .footer-section a:hover {
816
+ color: var(--primary);
817
+ }
818
+
819
+ .footer-bottom {
820
+ text-align: center;
821
+ padding-top: 20px;
822
+ border-top: 1px solid #333;
823
+ color: #999;
824
+ }
825
+
826
+ .anycoder-link {
827
+ color: var(--primary);
828
+ text-decoration: none;
829
+ font-weight: bold;
830
+ }
831
+
832
+ /* Responsive */
833
+ @media (max-width: 1024px) {
834
+ .hero-grid {
835
+ grid-template-columns: 1fr;
836
+ height: auto;
837
+ }
838
+ .categories-sidebar, .deals-sidebar {
839
+ display: none;
840
+ }
841
+ }
842
+
843
+ @media (max-width: 768px) {
844
+ .header-content {
845
+ flex-wrap: wrap;
846
+ gap: 15px;
847
+ }
848
+ .search-box {
849
+ order: 3;
850
+ max-width: 100%;
851
+ width: 100%;
852
+ }
853
+ .products-grid {
854
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
855
+ gap: 10px;
856
+ }
857
+ .cart-sidebar {
858
+ width: 100%;
859
+ left: -100%;
860
+ }
861
+ .modal-body {
862
+ grid-template-columns: 1fr;
863
+ }
864
+ }
865
+
866
+ /* Loading Animation */
867
+ .skeleton {
868
+ background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
869
+ background-size: 200% 100%;
870
+ animation: loading 1.5s infinite;
871
+ }
872
+
873
+ @keyframes loading {
874
+ 0% { background-position: 200% 0; }
875
+ 100% { background-position: -200% 0; }
876
+ }
877
+
878
+ /* Flash Sale Badge */
879
+ .flash-badge {
880
+ position: absolute;
881
+ top: 10px;
882
+ left: 10px;
883
+ background: linear-gradient(45deg, #ff4747, #ff6b6b);
884
+ color: white;
885
+ padding: 5px 15px;
886
+ border-radius: 20px;
887
+ font-size: 0.8rem;
888
+ font-weight: bold;
889
+ z-index: 2;
890
+ animation: pulse 2s infinite;
891
+ }
892
+
893
+ @keyframes pulse {
894
+ 0%, 100% { transform: scale(1); }
895
+ 50% { transform: scale(1.05); }
896
+ }
897
+ </style>
898
+ </head>
899
+ <body>
900
+
901
+ <!-- Top Bar -->
902
+ <div class="top-bar">
903
+ <div class="container">
904
+ <div class="top-bar-content">
905
+ <div>
906
+ <span>🔥 شحن مجاني على الطلبات فوق 50$</span>
907
+ </div>
908
+ <div class="top-links">
909
+ <a href="#" onclick="switchLang()">English</a>
910
+ <a href="#">المساعدة</a>
911
+ <a href="#">حمّل التطبيق</a>
912
+ </div>
913
+ </div>
914
+ </div>
915
+ </div>
916
+
917
+ <!-- Main Header -->
918
+ <header class="main-header">
919
+ <div class="container">
920
+ <div class="header-content">
921
+ <a href="#" class="logo">
922
+ <i class="fas fa-shopping-bag"></i>
923
+ علي إكسبريس
924
+ </a>
925
+
926
+ <div class="search-box">
927
+ <input type="text" id="searchInput" placeholder="ابحث عن منتجات، ماركات، فئات...">
928
+ <button class="search-btn" onclick="searchProducts()">
929
+ <i class="fas fa-search"></i>
930
+ </button>
931
+ </div>
932
+
933
+ <div class="header-actions">
934
+ <div class="action-btn">
935
+ <i class="fas fa-user"></i>
936
+ <span>حسابي</span>
937
+ </div>
938
+ <div class="action-btn">
939
+ <i class="fas fa-heart"></i>
940
+ <span>المفضلة</span>
941
+ </div>
942
+ <div class="action-btn" onclick="toggleCart()">
943
+ <i class="fas fa-shopping-cart"></i>
944
+ <span>السلة</span>
945
+ <span class="badge" id="cartCount">0</span>
946
+ </div>
947
+ </div>
948
+ </div>
949
+ </div>
950
+ </header>
951
+
952
+ <!-- Navigation -->
953
+ <nav class="main-nav">
954
+ <div class="container">
955
+ <div class="nav-content">
956
+ <div class="nav-item active" onclick="filterCategory('all')">الكل</div>
957
+ <div class="nav-item" onclick="filterCategory('electronics')">إلكترونيات</div>
958
+ <div class="nav-item" onclick="filterCategory('fashion')">أزياء</div>
959
+ <div class="nav-item" onclick="filterCategory('home')">منزل وحديقة</div>
960
+ <div class="nav-item" onclick="filterCategory('sports')">رياضة</div>
961
+ <div class="nav-item" onclick="filterCategory('beauty')">جمال وصحة</div>
962
+ <div class="nav-item" onclick="filterCategory('toys')">ألعاب</div>
963
+ <div class="nav-item" onclick="filterCategory('automotive')">سيارات</div>
964
+ </div>
965
+ </div>
966
+ </nav>
967
+
968
+ <!-- Hero Section -->
969
+ <section class="hero-section">
970
+ <div class="container">
971
+ <div class="hero-grid">
972
+ <div class="categories-sidebar">
973
+ <h3 style="margin-bottom: 15px;">الفئات</h3>
974
+ <div class="category-item">
975
+ <i class="fas fa-mobile-alt"></i>
976
+ <span>هواتف ذكية</span>
977
+ </div>
978
+ <div class="category-item">
979
+ <i class="fas fa-laptop"></i>
980
+ <span>كمبيوتر وشبكات</span>
981
+ </div>
982
+ <div class="category-item">
983
+ <i class="fas fa-tshirt"></i>
984
+ <span>ملابس رجالية</span>
985
+ </div>
986
+ <div class="category-item">
987
+ <i class="fas fa-female"></i>
988
+ <span>ملابس نسائية</span>
989
+ </div>
990
+ <div class="category-item">
991
+ <i class="fas fa-clock"></i>
992
+ <span>ساعات ومجوهرات</span>
993
+ </div>
994
+ <div class="category-item">
995
+ <i class="fas fa-home"></i>
996
+ <span>أثاث منزلي</span>
997
+ </div>
998
+ <div class="category-item">
999
+ <i class="fas fa-baby"></i>
1000
+ <span>مستلزمات أطفال</span>
1001
+ </div>
1002
+ <div class="category-item">
1003
+ <i class="fas fa-football-ball"></i>
1004
+ <span>رياضة وخارج</span>
1005
+ </div>
1006
+ </div>
1007
+
1008
+ <div class="hero-slider">
1009
+ <div class="hero-content">
1010
+ <h1>تخفيضات الصيف الكبرى</h1>
1011
+ <p>خصومات تصل إلى 70% على الإلكترونيات والأزياء</p>
1012
+ <button class="btn-primary" onclick="scrollToProducts()">
1013
+ تسوق الآن <i class="fas fa-arrow-left"></i>
1014
+ </button>
1015
+ </div>
1016
+ </div>
1017
+
1018
+ <div class="deals-sidebar">
1019
+ <div class="deal-card">
1020
+ <h3>العروض المحصورة</h3>
1021
+ <p style="color: var(--gray-dark); margin-top: 10px;">تنتهي خلال:</p>
1022
+ <div class="countdown">
1023
+ <div class="countdown-item">
1024
+ <span id="hours">04</span>
1025
+ <small>ساعة</small>
1026
+ </div>
1027
+ <div class="countdown-item">
1028
+ <span id="minutes">32</span>
1029
+ <small>دقيقة</small>
1030
+ </div>
1031
+ <div class="countdown-item">
1032
+ <span id="seconds">15</span>
1033
+ <small>ثانية</small>
1034
+ </div>
1035
+ </div>
1036
+ </div>
1037
+ <div class="deal-card" style="background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);">
1038
+ <h3>كوبونات خصم</h3>
1039
+ <p style="margin-top: 10px; font-size: 0.9rem;">استخدم كود: <strong style="color: var(--primary);">SALE2024</strong></p>
1040
+ <p style="font-size: 0.8rem; color: var(--gray-dark);">لخصم إضافي 15%</p>
1041
+ </div>
1042
+ </div>
1043
+ </div>
1044
+ </div>
1045
+ </section>
1046
+
1047
+ <!-- Flash Sale Section -->
1048
+ <section class="container">
1049
+ <div class="section-header">
1050
+ <h2 class="section-title">
1051
+ <i class="fas fa-bolt"></i>
1052
+ عروض فلاش
1053
+ </h2>
1054
+ <a href="#" class="view-all">عرض الكل <i class="fas fa-chevron-left"></i></a>
1055
+ </div>
1056
+ <div class="products-grid" id="flashProducts">
1057
+ <!-- Flash products will be inserted here -->
1058
+ </div>
1059
+ </section>
1060
+
1061
+ <!-- Main Products Section -->
1062
+ <section class="container" style="margin-top: 40px;">
1063
+ <div class="section-header">
1064
+ <h2 class="section-title">
1065
+ <i class="fas fa-fire"></i>
1066
+ منتجات قد تعجبك
1067
+ </h2>
1068
+ <div style="display: flex; gap: 10px;">
1069
+ <select id="sortSelect" onchange="sortProducts()" style="padding: 8px; border-radius: 8px; border: 1px solid #ddd;">
1070
+ <option value="default">الترتيب الافتراضي</option>
1071
+ <option value="price-low">السعر: من低 إلى高</option>
1072
+ <option value="price-high">السعر: من高 إلى低</option>
1073
+ <option value="rating">الأعلى تقييماً</option>
1074
+ </select>
1075
+ </div>
1076
+ </div>
1077
+ <div class="products-grid" id="productsGrid">
1078
+ <!-- Products will be inserted here -->
1079
+ </div>
1080
+ </section>
1081
+
1082
+ <!-- Cart Sidebar -->
1083
+ <div class="cart-overlay" onclick="toggleCart()"></div>
1084
+ <div class="cart-sidebar" id="cartSidebar">
1085
+ <div class="cart-header">
1086
+ <h2>سلة التسوق (<span id="cartItemCount">0</span>)</h2>
1087
+ <button onclick="toggleCart()" style="background: none; border: none; font-size: 1.5rem; cursor: pointer;">
1088
+ <i class="fas fa-times"></i>
1089
+ </button>
1090
+ </div>
1091
+ <div class="cart-items" id="cartItems">
1092
+ <p style="text-align: center; color: #999; margin-top: 50px;">
1093
+ <i class="fas fa-shopping-cart" style="font-size: 3rem; display: block; margin-bottom: 15px;"></i>
1094
+ السلة فارغة
1095
+ </p>
1096
+ </div>
1097
+ <div class="cart-footer">
1098
+ <div class="cart-total">
1099
+ <span>المجموع:</span>
1100
+ <span id="cartTotal">$0.00</span>
1101
+ </div>
1102
+ <button class="checkout-btn" onclick="checkout()">
1103
+ إتمام الشراء <i class="fas fa-lock"></i>
1104
+ </button>
1105
+ </div>
1106
+ </div>
1107
+
1108
+ <!-- Product Modal -->
1109
+ <div class="modal-overlay" id="productModal" onclick="closeModal(event)">
1110
+ <div class="modal-content" onclick="event.stopPropagation()">
1111
+ <button class="modal-close" onclick="closeModal()">
1112
+ <i class="fas fa-times"></i>
1113
+ </button>
1114
+ <div class="modal-body" id="modalBody">
1115
+ <!-- Modal content will be inserted here -->
1116
+ </div>
1117
+ </div>
1118
+ </div>
1119
+
1120
+ <!-- Toast -->
1121
+ <div class="toast" id="toast">
1122
+ <i class="fas fa-check-circle"></i>
1123
+ <span id="toastMessage">تمت الإضافة إلى السلة</span>
1124
+ </div>
1125
+
1126
+ <!-- Footer -->
1127
+ <footer>
1128
+ <div class="container">
1129
+ <div class="footer-content">
1130
+ <div class="footer-section">
1131
+ <h3>عن المتجر</h3>
1132
+ <p style="color: #ccc; line-height: 1.8;">
1133
+ علي إكسبريس هو وجهتك المثالية للتسوق أونلاين. نقدم ملايين المنتجات بأسعار مميزة مع شحن سريع إلى جميع أنحاء العالم.
1134
+ </p>
1135
+ </div>
1136
+ <div class="footer-section">
1137
+ <h3>روابط سريعة</h3>
1138
+ <ul>
1139
+ <li><a href="#">من نحن</a></li>
1140
+ <li><a href="#">شروط الاستخدام</a></li>
1141
+ <li><a href="#">سياسة الخصوصية</a></li>
1142
+ <li><a href="#">الإرجاع والاستبدال</a></li>
1143
+ </ul>
1144
+ </div>
1145
+ <div class="footer-section">
1146
+ <h3>خدمة العملاء</h3>
1147
+ <ul>
1148
+ <li><a href="#">مركز المساعدة</a></li>
1149
+ <li><a href="#">تتبع الطلب</a></li>
1150
+ <li><a href="#">الشحن والتوصيل</a></li>
1151
+ <li><a href="#">اتصل بنا</a></li>
1152
+ </ul>
1153
+ </div>
1154
+ <div class="footer-section">
1155
+ <h3>تابعنا</h3>
1156
+ <div style="display: flex; gap: 15px; margin-top: 15px;">
1157
+ <a href="#" style="font-size: 1.5rem;"><i class="fab fa-facebook"></i></a>
1158
+ <a href="#" style="font-size: 1.5rem;"><i class="fab fa-twitter"></i></a>
1159
+ <a href="#" style="font-size: 1.5rem;"><i class="fab fa-instagram"></i></a>
1160
+ <a href="#" style="font-size: 1.5rem;"><i class="fab fa-youtube"></i></a>
1161
+ </div>
1162
+ <p style="margin-top: 20px; color: #ccc;">
1163
+ <i class="fas fa-envelope"></i> support@aliexpress-clone.com
1164
+ </p>
1165
+ </div>
1166
+ </div>
1167
+ <div class="footer-bottom">
1168
+ <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">anycoder</a></p>
1169
+ <p style="margin-top: 10px;">© 2024 علي إكسبريس. جميع الحقوق محفوظة.</p>
1170
+ </div>
1171
+ </div>
1172
+ </footer>
1173
+
1174
+ <script>
1175
+ // Products Data
1176
+ const products = [
1177
+ {
1178
+ id: 1,
1179
+ title: "سماعات لاسلكية فاخرة مع إلغاء الضوضاء النشط",
1180
+ price: 45.99,
1181
+ oldPrice: 89.99,
1182
+ image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400",
1183
+ rating: 4.8,
1184
+ reviews: 2341,
1185
+ category: "electronics",
1186
+ discount: 49,
1187
+ sold: 5420
1188
+ },
1189
+ {
1190
+ id: 2,
1191
+ title: "ساعة ذكية متعددة الوظائف مع قياس ضربات القلب",
1192
+ price: 29.99,
1193
+ oldPrice: 59.99,
1194
+ image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400",
1195
+ rating: 4.6,
1196
+ reviews: 1823,
1197
+ category: "electronics",
1198
+ discount: 50,
1199
+ sold: 3200
1200
+ },
1201
+ {
1202
+ id: 3,
1203
+ title: "حقيبة يد نسائية جلدية فاخرة",
1204
+ price: 35.50,
1205
+ oldPrice: 70.00,
1206
+ image: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=400",
1207
+ rating: 4.9,
1208
+ reviews: 892,
1209
+ category: "fashion",
1210
+ discount: 49,
1211
+ sold: 1500
1212
+ },
1213
+ {
1214
+ id: 4,
1215
+ title: "نظارة شمسية بولارايزد بتصميم عصري",
1216
+ price: 15.99,
1217
+ oldPrice: 39.99,
1218
+ image: "https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=400",
1219
+ rating: 4.5,
1220
+ reviews: 567,
1221
+ category: "fashion",
1222
+ discount: 60,
1223
+ sold: 2800
1224
+ },
1225
+ {
1226
+ id: 5,
1227
+ title: "ماكينة قهوة اسبريسو منزلية",
1228
+ price: 89.99,
1229
+ oldPrice: 149.99,
1230
+ image: "https://images.unsplash.com/photo-1517914309750-cdf34c211d62?w=400",
1231
+ rating: 4.7,
1232
+ reviews: 445,
1233
+ category: "home",
1234
+ discount: 40,
1235
+ sold: 890
1236
+ },
1237
+ {
1238
+ id: 6,
1239
+ title: "مكواة بخار 2400 واط مع لوحة سيراميك",
1240
+ price: 24.99,
1241
+ oldPrice: 49.99,
1242
+ image: "https://images.unsplash.com/photo-1584269600519-112d071b35e6?w=400",
1243
+ rating: 4.4,
1244
+ reviews: 1234,
1245
+ category: "home",
1246
+ discount: 50,
1247
+ sold: 2100
1248
+ },
1249
+ {
1250
+ id: 7,
1251
+ title: "حذاء رياضي خفيف الوزن للجري",
1252
+ price: 39.99,
1253
+ oldPrice: 79.99,
1254
+ image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=400",
1255
+ rating: 4.8,
1256
+ reviews: 3421,
1257
+ category: "sports",
1258
+ discount: 50,
1259
+ sold: 5600
1260
+ },
1261
+ {
1262
+ id: 8,
1263
+ title: "مجموعة أثقال منزلية قابلة للتعديل",
1264
+ price: 55.00,
1265
+ oldPrice: 110.00,
1266
+ image: "https://images.unsplash.com/photo-1638536532686-d610adfc8e5c?w=400",
1267
+ rating: 4.6,
1268
+ reviews: 678,
1269
+ category: "sports",
1270
+ discount: 50,
1271
+ sold: 1200
1272
+ },
1273
+ {
1274
+ id: 9,
1275
+ title: "مجموعة عناية بالبشرة الكورية 10 خطوات",
1276
+ price: 42.00,
1277
+ oldPrice: 84.00,
1278
+ image: "https://images.unsplash.com/photo-1570194065650-d99fb4b38b15?w=400",
1279
+ rating: 4.9,
1280
+ reviews: 2234,
1281
+ category: "beauty",
1282
+ discount: 50,
1283
+ sold: 4500
1284
+ },
1285
+ {
1286
+ id: 10,
1287
+ title: "مكياج كامل من ماركات عالمية",
1288
+ price: 58.99,
1289
+ oldPrice: 117.99,
1290
+ image: "https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=400",
1291
+ rating: 4.7,
1292
+ reviews: 1567,
1293
+ category: "beauty",
1294
+ discount: 50,
1295
+ sold: 3200
1296
+ },
1297
+ {
1298
+ id: 11,
1299
+ title: "سيارة تحكم عن بعد عالية السرعة",
1300
+ price: 35.00,
1301
+ oldPrice: 69.99,
1302
+ image: "https://images.unsplash.com/photo-1594787318286-3d835c1d207f?w=400",
1303
+ rating: 4.5,
1304
+ reviews: 892,
1305
+ category: "toys",
1306
+ discount: 50,
1307
+ sold: 1800
1308
+ },
1309
+ {
1310
+ id: 12,
1311
+ title: "لعبة بناء ليغو للأطفال 1000 قطعة",
1312
+ price: 28.50,
1313
+ oldPrice: 57.00,
1314
+ image: "https://images.unsplash.com/photo-1585366119957-e9730b6d0f60?w=400",
1315
+ rating: 4.8,
1316
+ reviews: 3345,
1317
+ category: "toys",
1318
+ discount: 50,
1319
+ sold: 6700
1320
+ }
1321
+ ];
1322
+
1323
+ let cart = [];
1324
+ let currentCategory = 'all';
1325
+
1326
+ // Initialize
1327
+ document.addEventListener('DOMContentLoaded', () => {
1328
+ renderProducts();
1329
+ renderFlashProducts();
1330
+ startCountdown();
1331
+ updateCartUI();
1332
+ });
1333
+
1334
+ // Render Products
1335
+ function renderProducts(filter = 'all') {
1336
+ const grid = document.getElementById('productsGrid');
1337
+ grid.innerHTML = '';
1338
+
1339
+ let filteredProducts = filter === 'all' ? products : products.filter(p => p.category === filter);
1340
+
1341
+ filteredProducts.forEach(product => {
1342
+ const card = createProductCard(product);
1343
+ grid.appendChild(card);
1344
+ });
1345
+ }
1346
+
1347
+ // Render Flash Sale Products (first 4 with highest discount)
1348
+ function renderFlashProducts() {
1349
+ const grid = document.getElementById('flashProducts');
1350
+ const flashProducts = [...products].sort((a, b) => b.discount - a.discount).slice(0, 4);
1351
+
1352
+ flashProducts.forEach(product => {
1353
+ const card = createProductCard(product, true);
1354
+ grid.appendChild(card);
1355
+ });
1356
+ }
1357
+
1358
+ function createProductCard(product, isFlash = false) {
1359
+ const div = document.createElement('div