Hugging Face's logo

Spaces:
fancer1
/
anycoder-caaa57e8
Running

App Files Community
fancer1 commited on
Commit
7b7cb5c
·
verified ·
1 Parent(s): 7a56e8c

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1133 -19
index.html CHANGED
@@ -1,19 +1,1133 @@
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="vi">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Trà Sữa Ngon - Thương Hiệu Trà Sữa Hàng Đầu</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ :root {
16
+ --primary-color: #e91e63;
17
+ --secondary-color: #ff6090;
18
+ --accent-color: #ffc1e3;
19
+ --dark-color: #333;
20
+ --light-color: #fff;
21
+ --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
22
+ }
23
+
24
+ body {
25
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26
+ background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
27
+ min-height: 100vh;
28
+ }
29
+
30
+ /* Header */
31
+ header {
32
+ background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%);
33
+ padding: 1rem 2rem;
34
+ position: sticky;
35
+ top: 0;
36
+ z-index: 1000;
37
+ box-shadow: 0 4px 20px rgba(0,0,0,0.2);
38
+ }
39
+
40
+ .header-container {
41
+ max-width: 1400px;
42
+ margin: 0 auto;
43
+ display: flex;
44
+ justify-content: space-between;
45
+ align-items: center;
46
+ flex-wrap: wrap;
47
+ gap: 1rem;
48
+ }
49
+
50
+ .logo {
51
+ display: flex;
52
+ align-items: center;
53
+ gap: 0.5rem;
54
+ color: white;
55
+ font-size: 1.8rem;
56
+ font-weight: bold;
57
+ text-decoration: none;
58
+ }
59
+
60
+ .logo i {
61
+ font-size: 2rem;
62
+ }
63
+
64
+ .built-with {
65
+ color: rgba(255,255,255,0.8);
66
+ font-size: 0.75rem;
67
+ text-decoration: none;
68
+ transition: color 0.3s;
69
+ }
70
+
71
+ .built-with:hover {
72
+ color: white;
73
+ }
74
+
75
+ nav {
76
+ display: flex;
77
+ gap: 2rem;
78
+ align-items: center;
79
+ }
80
+
81
+ nav a {
82
+ color: white;
83
+ text-decoration: none;
84
+ font-weight: 500;
85
+ transition: all 0.3s;
86
+ position: relative;
87
+ }
88
+
89
+ nav a::after {
90
+ content: '';
91
+ position: absolute;
92
+ bottom: -5px;
93
+ left: 0;
94
+ width: 0;
95
+ height: 2px;
96
+ background: white;
97
+ transition: width 0.3s;
98
+ }
99
+
100
+ nav a:hover::after {
101
+ width: 100%;
102
+ }
103
+
104
+ .cart-icon {
105
+ position: relative;
106
+ cursor: pointer;
107
+ font-size: 1.5rem;
108
+ color: white;
109
+ }
110
+
111
+ .cart-count {
112
+ position: absolute;
113
+ top: -10px;
114
+ right: -10px;
115
+ background: #ffeb3b;
116
+ color: #333;
117
+ border-radius: 50%;
118
+ width: 22px;
119
+ height: 22px;
120
+ display: flex;
121
+ align-items: center;
122
+ justify-content: center;
123
+ font-size: 0.75rem;
124
+ font-weight: bold;
125
+ }
126
+
127
+ .mobile-menu {
128
+ display: none;
129
+ font-size: 1.5rem;
130
+ color: white;
131
+ cursor: pointer;
132
+ }
133
+
134
+ /* Hero Section */
135
+ .hero {
136
+ background: linear-gradient(135deg, rgba(233,30,99,0.9) 0%, rgba(156,39,176,0.9) 100%),
137
+ url('https://images.unsplash.com/photo-1558857563-c0c3a8b7c8b5?w=1200') center/cover;
138
+ padding: 6rem 2rem;
139
+ text-align: center;
140
+ color: white;
141
+ }
142
+
143
+ .hero h1 {
144
+ font-size: clamp(2rem, 5vw, 3.5rem);
145
+ margin-bottom: 1rem;
146
+ text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
147
+ }
148
+
149
+ .hero p {
150
+ font-size: 1.2rem;
151
+ margin-bottom: 2rem;
152
+ opacity: 0.9;
153
+ }
154
+
155
+ .hero-btn {
156
+ background: white;
157
+ color: var(--primary-color);
158
+ padding: 1rem 2.5rem;
159
+ border: none;
160
+ border-radius: 50px;
161
+ font-size: 1.1rem;
162
+ font-weight: bold;
163
+ cursor: pointer;
164
+ transition: all 0.3s;
165
+ box-shadow: 0 10px 30px rgba(0,0,0,0.2);
166
+ }
167
+
168
+ .hero-btn:hover {
169
+ transform: translateY(-3px);
170
+ box-shadow: 0 15px 40px rgba(0,0,0,0.3);
171
+ }
172
+
173
+ /* Categories */
174
+ .categories {
175
+ padding: 3rem 2rem;
176
+ max-width: 1400px;
177
+ margin: 0 auto;
178
+ }
179
+
180
+ .section-title {
181
+ text-align: center;
182
+ font-size: 2rem;
183
+ color: var(--dark-color);
184
+ margin-bottom: 2rem;
185
+ position: relative;
186
+ }
187
+
188
+ .section-title::after {
189
+ content: '';
190
+ display: block;
191
+ width: 80px;
192
+ height: 4px;
193
+ background: var(--primary-color);
194
+ margin: 0.5rem auto;
195
+ border-radius: 2px;
196
+ }
197
+
198
+ .category-grid {
199
+ display: grid;
200
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
201
+ gap: 1.5rem;
202
+ }
203
+
204
+ .category-card {
205
+ background: white;
206
+ padding: 2rem 1rem;
207
+ border-radius: 20px;
208
+ text-align: center;
209
+ cursor: pointer;
210
+ transition: all 0.3s;
211
+ box-shadow: 0 5px 20px rgba(0,0,0,0.1);
212
+ }
213
+
214
+ .category-card:hover {
215
+ transform: translateY(-10px);
216
+ box-shadow: 0 15px 40px rgba(233,30,99,0.2);
217
+ }
218
+
219
+ .category-card.active {
220
+ background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%);
221
+ color: white;
222
+ }
223
+
224
+ .category-card i {
225
+ font-size: 2.5rem;
226
+ margin-bottom: 1rem;
227
+ color: var(--primary-color);
228
+ }
229
+
230
+ .category-card.active i {
231
+ color: white;
232
+ }
233
+
234
+ /* Products */
235
+ .products {
236
+ padding: 3rem 2rem;
237
+ max-width: 1400px;
238
+ margin: 0 auto;
239
+ }
240
+
241
+ .product-grid {
242
+ display: grid;
243
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
244
+ gap: 2rem;
245
+ }
246
+
247
+ .product-card {
248
+ background: white;
249
+ border-radius: 25px;
250
+ overflow: hidden;
251
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
252
+ transition: all 0.3s;
253
+ position: relative;
254
+ }
255
+
256
+ .product-card:hover {
257
+ transform: translateY(-10px);
258
+ box-shadow: 0 20px 50px rgba(233,30,99,0.2);
259
+ }
260
+
261
+ .product-badge {
262
+ position: absolute;
263
+ top: 15px;
264
+ left: 15px;
265
+ background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
266
+ color: white;
267
+ padding: 0.3rem 0.8rem;
268
+ border-radius: 20px;
269
+ font-size: 0.8rem;
270
+ font-weight: bold;
271
+ }
272
+
273
+ .product-image {
274
+ width: 100%;
275
+ height: 200px;
276
+ object-fit: cover;
277
+ transition: transform 0.5s;
278
+ }
279
+
280
+ .product-card:hover .product-image {
281
+ transform: scale(1.1);
282
+ }
283
+
284
+ .product-image-container {
285
+ overflow: hidden;
286
+ position: relative;
287
+ }
288
+
289
+ .quick-add {
290
+ position: absolute;
291
+ bottom: -50px;
292
+ left: 50%;
293
+ transform: translateX(-50%);
294
+ background: var(--primary-color);
295
+ color: white;
296
+ border: none;
297
+ padding: 0.8rem 1.5rem;
298
+ border-radius: 25px;
299
+ cursor: pointer;
300
+ transition: all 0.3s;
301
+ font-weight: bold;
302
+ }
303
+
304
+ .product-card:hover .quick-add {
305
+ bottom: 15px;
306
+ }
307
+
308
+ .product-info {
309
+ padding: 1.5rem;
310
+ }
311
+
312
+ .product-name {
313
+ font-size: 1.2rem;
314
+ font-weight: bold;
315
+ color: var(--dark-color);
316
+ margin-bottom: 0.5rem;
317
+ }
318
+
319
+ .product-desc {
320
+ color: #777;
321
+ font-size: 0.9rem;
322
+ margin-bottom: 1rem;
323
+ }
324
+
325
+ .product-footer {
326
+ display: flex;
327
+ justify-content: space-between;
328
+ align-items: center;
329
+ }
330
+
331
+ .product-price {
332
+ font-size: 1.3rem;
333
+ font-weight: bold;
334
+ color: var(--primary-color);
335
+ }
336
+
337
+ .product-rating {
338
+ color: #ffc107;
339
+ display: flex;
340
+ align-items: center;
341
+ gap: 0.3rem;
342
+ }
343
+
344
+ .add-to-cart {
345
+ background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%);
346
+ color: white;
347
+ border: none;
348
+ padding: 0.8rem 1.5rem;
349
+ border-radius: 25px;
350
+ cursor: pointer;
351
+ font-weight: bold;
352
+ transition: all 0.3s;
353
+ display: flex;
354
+ align-items: center;
355
+ gap: 0.5rem;
356
+ }
357
+
358
+ .add-to-cart:hover {
359
+ transform: scale(1.05);
360
+ box-shadow: 0 5px 20px rgba(233,30,99,0.4);
361
+ }
362
+
363
+ /* Cart Sidebar */
364
+ .cart-overlay {
365
+ position: fixed;
366
+ top: 0;
367
+ left: 0;
368
+ width: 100%;
369
+ height: 100%;
370
+ background: rgba(0,0,0,0.5);
371
+ z-index: 2000;
372
+ opacity: 0;
373
+ visibility: hidden;
374
+ transition: all 0.3s;
375
+ }
376
+
377
+ .cart-overlay.active {
378
+ opacity: 1;
379
+ visibility: visible;
380
+ }
381
+
382
+ .cart-sidebar {
383
+ position: fixed;
384
+ top: 0;
385
+ right: -400px;
386
+ width: 100%;
387
+ max-width: 400px;
388
+ height: 100%;
389
+ background: white;
390
+ z-index: 2001;
391
+ transition: right 0.3s;
392
+ display: flex;
393
+ flex-direction: column;
394
+ }
395
+
396
+ .cart-sidebar.active {
397
+ right: 0;
398
+ }
399
+
400
+ .cart-header {
401
+ background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%);
402
+ color: white;
403
+ padding: 1.5rem;
404
+ display: flex;
405
+ justify-content: space-between;
406
+ align-items: center;
407
+ }
408
+
409
+ .cart-header h2 {
410
+ display: flex;
411
+ align-items: center;
412
+ gap: 0.5rem;
413
+ }
414
+
415
+ .close-cart {
416
+ background: none;
417
+ border: none;
418
+ color: white;
419
+ font-size: 1.5rem;
420
+ cursor: pointer;
421
+ }
422
+
423
+ .cart-items {
424
+ flex: 1;
425
+ overflow-y: auto;
426
+ padding: 1rem;
427
+ }
428
+
429
+ .cart-item {
430
+ display: flex;
431
+ gap: 1rem;
432
+ padding: 1rem;
433
+ border-bottom: 1px solid #eee;
434
+ align-items: center;
435
+ }
436
+
437
+ .cart-item-image {
438
+ width: 70px;
439
+ height: 70px;
440
+ border-radius: 15px;
441
+ object-fit: cover;
442
+ }
443
+
444
+ .cart-item-info {
445
+ flex: 1;
446
+ }
447
+
448
+ .cart-item-name {
449
+ font-weight: bold;
450
+ margin-bottom: 0.3rem;
451
+ }
452
+
453
+ .cart-item-price {
454
+ color: var(--primary-color);
455
+ font-weight: bold;
456
+ }
457
+
458
+ .cart-item-controls {
459
+ display: flex;
460
+ align-items: center;
461
+ gap: 0.5rem;
462
+ margin-top: 0.5rem;
463
+ }
464
+
465
+ .qty-btn {
466
+ background: #f0f0f0;
467
+ border: none;
468
+ width: 30px;
469
+ height: 30px;
470
+ border-radius: 50%;
471
+ cursor: pointer;
472
+ font-size: 1rem;
473
+ display: flex;
474
+ align-items: center;
475
+ justify-content: center;
476
+ }
477
+
478
+ .qty-btn:hover {
479
+ background: var(--primary-color);
480
+ color: white;
481
+ }
482
+
483
+ .remove-item {
484
+ color: #ff6b6b;
485
+ cursor: pointer;
486
+ font-size: 1.2rem;
487
+ }
488
+
489
+ .cart-footer {
490
+ padding: 1.5rem;
491
+ border-top: 2px solid #eee;
492
+ }
493
+
494
+ .cart-total {
495
+ display: flex;
496
+ justify-content: space-between;
497
+ font-size: 1.3rem;
498
+ font-weight: bold;
499
+ margin-bottom: 1rem;
500
+ }
501
+
502
+ .checkout-btn {
503
+ width: 100%;
504
+ background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%);
505
+ color: white;
506
+ border: none;
507
+ padding: 1rem;
508
+ border-radius: 25px;
509
+ font-size: 1.1rem;
510
+ font-weight: bold;
511
+ cursor: pointer;
512
+ transition: all 0.3s;
513
+ }
514
+
515
+ .checkout-btn:hover {
516
+ transform: scale(1.02);
517
+ box-shadow: 0 10px 30px rgba(233,30,99,0.4);
518
+ }
519
+
520
+ .empty-cart {
521
+ text-align: center;
522
+ padding: 3rem;
523
+ color: #999;
524
+ }
525
+
526
+ .empty-cart i {
527
+ font-size: 4rem;
528
+ margin-bottom: 1rem;
529
+ }
530
+
531
+ /* Product Modal */
532
+ .modal-overlay {
533
+ position: fixed;
534
+ top: 0;
535
+ left: 0;
536
+ width: 100%;
537
+ height: 100%;
538
+ background: rgba(0,0,0,0.7);
539
+ z-index: 3000;
540
+ display: flex;
541
+ align-items: center;
542
+ justify-content: center;
543
+ opacity: 0;
544
+ visibility: hidden;
545
+ transition: all 0.3s;
546
+ padding: 1rem;
547
+ }
548
+
549
+ .modal-overlay.active {
550
+ opacity: 1;
551
+ visibility: visible;
552
+ }
553
+
554
+ .modal {
555
+ background: white;
556
+ border-radius: 30px;
557
+ max-width: 500px;
558
+ width: 100%;
559
+ max-height: 90vh;
560
+ overflow-y: auto;
561
+ transform: scale(0.8);
562
+ transition: transform 0.3s;
563
+ }
564
+
565
+ .modal-overlay.active .modal {
566
+ transform: scale(1);
567
+ }
568
+
569
+ .modal-image {
570
+ width: 100%;
571
+ height: 250px;
572
+ object-fit: cover;
573
+ border-radius: 30px 30px 0 0;
574
+ }
575
+
576
+ .modal-content {
577
+ padding: 2rem;
578
+ }
579
+
580
+ .modal-title {
581
+ font-size: 1.5rem;
582
+ margin-bottom: 0.5rem;
583
+ }
584
+
585
+ .modal-price {
586
+ font-size: 1.8rem;
587
+ color: var(--primary-color);
588
+ font-weight: bold;
589
+ margin-bottom: 1rem;
590
+ }
591
+
592
+ .modal-desc {
593
+ color: #666;
594
+ margin-bottom: 1.5rem;
595
+ }
596
+
597
+ .option-group {
598
+ margin-bottom: 1.5rem;
599
+ }
600
+
601
+ .option-title {
602
+ font-weight: bold;
603
+ margin-bottom: 0.8rem;
604
+ display: flex;
605
+ align-items: center;
606
+ gap: 0.5rem;
607
+ }
608
+
609
+ .option-buttons {
610
+ display: flex;
611
+ gap: 0.5rem;
612
+ flex-wrap: wrap;
613
+ }
614
+
615
+ .option-btn {
616
+ padding: 0.6rem 1.2rem;
617
+ border: 2px solid #ddd;
618
+ border-radius: 25px;
619
+ background: white;
620
+ cursor: pointer;
621
+ transition: all 0.3s;
622
+ }
623
+
624
+ .option-btn:hover, .option-btn.active {
625
+ border-color: var(--primary-color);
626
+ background: var(--primary-color);
627
+ color: white;
628
+ }
629
+
630
+ .topping-grid {
631
+ display: grid;
632
+ grid-template-columns: repeat(2, 1fr);
633
+ gap: 0.5rem;
634
+ }
635
+
636
+ .topping-item {
637
+ display: flex;
638
+ align-items: center;
639
+ gap: 0.5rem;
640
+ padding: 0.5rem;
641
+ border: 2px solid #ddd;
642
+ border-radius: 10px;
643
+ cursor: pointer;
644
+ transition: all 0.3s;
645
+ }
646
+
647
+ .topping-item:hover, .topping-item.active {
648
+ border-color: var(--primary-color);
649
+ background: rgba(233,30,99,0.1);
650
+ }
651
+
652
+ .topping-item input {
653
+ display: none;
654
+ }
655
+
656
+ .modal-footer {
657
+ display: flex;
658
+ gap: 1rem;
659
+ margin-top: 1.5rem;
660
+ }
661
+
662
+ .modal-qty {
663
+ display: flex;
664
+ align-items: center;
665
+ gap: 1rem;
666
+ background: #f5f5f5;
667
+ padding: 0.5rem 1rem;
668
+ border-radius: 25px;
669
+ }
670
+
671
+ .modal-qty-btn {
672
+ background: white;
673
+ border: none;
674
+ width: 35px;
675
+ height: 35px;
676
+ border-radius: 50%;
677
+ cursor: pointer;
678
+ font-size: 1.2rem;
679
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
680
+ }
681
+
682
+ .modal-add-btn {
683
+ flex: 1;
684
+ background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%);
685
+ color: white;
686
+ border: none;
687
+ padding: 1rem;
688
+ border-radius: 25px;
689
+ font-size: 1rem;
690
+ font-weight: bold;
691
+ cursor: pointer;
692
+ transition: all 0.3s;
693
+ }
694
+
695
+ .modal-add-btn:hover {
696
+ transform: scale(1.02);
697
+ }
698
+
699
+ .close-modal {
700
+ position: absolute;
701
+ top: 15px;
702
+ right: 15px;
703
+ background: white;
704
+ border: none;
705
+ width: 40px;
706
+ height: 40px;
707
+ border-radius: 50%;
708
+ cursor: pointer;
709
+ font-size: 1.2rem;
710
+ box-shadow: 0 2px 10px rgba(0,0,0,0.2);
711
+ }
712
+
713
+ /* Promotions */
714
+ .promotions {
715
+ padding: 3rem 2rem;
716
+ max-width: 1400px;
717
+ margin: 0 auto;
718
+ }
719
+
720
+ .promo-grid {
721
+ display: grid;
722
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
723
+ gap: 2rem;
724
+ }
725
+
726
+ .promo-card {
727
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
728
+ border-radius: 25px;
729
+ padding: 2rem;
730
+ color: white;
731
+ position: relative;
732
+ overflow: hidden;
733
+ }
734
+
735
+ .promo-card::before {
736
+ content: '';
737
+ position: absolute;
738
+ top: -50%;
739
+ right: -50%;
740
+ width: 100%;
741
+ height: 100%;
742
+ background: rgba(255,255,255,0.1);
743
+ border-radius: 50%;
744
+ }
745
+
746
+ .promo-card h3 {
747
+ font-size: 1.5rem;
748
+ margin-bottom: 0.5rem;
749
+ }
750
+
751
+ .promo-card p {
752
+ opacity: 0.9;
753
+ margin-bottom: 1rem;
754
+ }
755
+
756
+ .promo-code {
757
+ background: rgba(255,255,255,0.2);
758
+ padding: 0.5rem 1rem;
759
+ border-radius: 10px;
760
+ display: inline-block;
761
+ font-weight: bold;
762
+ letter-spacing: 2px;
763
+ }
764
+
765
+ /* Footer */
766
+ footer {
767
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
768
+ color: white;
769
+ padding: 3rem 2rem;
770
+ margin-top: 3rem;
771
+ }
772
+
773
+ .footer-grid {
774
+ max-width: 1400px;
775
+ margin: 0 auto;
776
+ display: grid;
777
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
778
+ gap: 2rem;
779
+ }
780
+
781
+ .footer-section h3 {
782
+ margin-bottom: 1rem;
783
+ color: var(--secondary-color);
784
+ }
785
+
786
+ .footer-section p, .footer-section a {
787
+ color: rgba(255,255,255,0.7);
788
+ text-decoration: none;
789
+ display: block;
790
+ margin-bottom: 0.5rem;
791
+ transition: color 0.3s;
792
+ }
793
+
794
+ .footer-section a:hover {
795
+ color: white;
796
+ }
797
+
798
+ .social-links {
799
+ display: flex;
800
+ gap: 1rem;
801
+ margin-top: 1rem;
802
+ }
803
+
804
+ .social-links a {
805
+ width: 40px;
806
+ height: 40px;
807
+ background: rgba(255,255,255,0.1);
808
+ border-radius: 50%;
809
+ display: flex;
810
+ align-items: center;
811
+ justify-content: center;
812
+ transition: all 0.3s;
813
+ }
814
+
815
+ .social-links a:hover {
816
+ background: var(--primary-color);
817
+ transform: translateY(-3px);
818
+ }
819
+
820
+ .footer-bottom {
821
+ text-align: center;
822
+ padding-top: 2rem;
823
+ margin-top: 2rem;
824
+ border-top: 1px solid rgba(255,255,255,0.1);
825
+ color: rgba(255,255,255,0.5);
826
+ }
827
+
828
+ /* Toast Notification */
829
+ .toast {
830
+ position: fixed;
831
+ bottom: 30px;
832
+ left: 50%;
833
+ transform: translateX(-50%) translateY(100px);
834
+ background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
835
+ color: white;
836
+ padding: 1rem 2rem;
837
+ border-radius: 50px;
838
+ box-shadow: 0 10px 30px rgba(0,0,0,0.3);
839
+ z-index: 5000;
840
+ display: flex;
841
+ align-items: center;
842
+ gap: 0.5rem;
843
+ transition: transform 0.3s;
844
+ }
845
+
846
+ .toast.show {
847
+ transform: translateX(-50%) translateY(0);
848
+ }
849
+
850
+ /* Responsive */
851
+ @media (max-width: 768px) {
852
+ .mobile-menu {
853
+ display: block;
854
+ }
855
+
856
+ nav {
857
+ display: none;
858
+ position: absolute;
859
+ top: 100%;
860
+ left: 0;
861
+ width: 100%;
862
+ background: linear-gradient(135deg, #e91e63 0%, #9c27b0 100%);
863
+ flex-direction: column;
864
+ padding: 1rem;
865
+ gap: 1rem;
866
+ }
867
+
868
+ nav.active {
869
+ display: flex;
870
+ }
871
+
872
+ .hero {
873
+ padding: 4rem 1rem;
874
+ }
875
+
876
+ .modal {
877
+ margin: 1rem;
878
+ }
879
+
880
+ .modal-footer {
881
+ flex-direction: column;
882
+ }
883
+
884
+ .cart-sidebar {
885
+ max-width: 100%;
886
+ }
887
+ }
888
+
889
+ /* Animations */
890
+ @keyframes fadeInUp {
891
+ from {
892
+ opacity: 0;
893
+ transform: translateY(30px);
894
+ }
895
+ to {
896
+ opacity: 1;
897
+ transform: translateY(0);
898
+ }
899
+ }
900
+
901
+ .product-card {
902
+ animation: fadeInUp 0.5s ease forwards;
903
+ }
904
+
905
+ .product-card:nth-child(1) { animation-delay: 0.1s; }
906
+ .product-card:nth-child(2) { animation-delay: 0.2s; }
907
+ .product-card:nth-child(3) { animation-delay: 0.3s; }
908
+ .product-card:nth-child(4) { animation-delay: 0.4s; }
909
+ .product-card:nth-child(5) { animation-delay: 0.5s; }
910
+ .product-card:nth-child(6) { animation-delay: 0.6s; }
911
+ </style>
912
+ </head>
913
+ <body>
914
+ <!-- Header -->
915
+ <header>
916
+ <div class="header-container">
917
+ <div>
918
+ <a href="#" class="logo">
919
+ <i class="fas fa-mug-hot"></i>
920
+ Trà Sữa Ngon
921
+ </a>
922
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a>
923
+ </div>
924
+ <nav id="nav">
925
+ <a href="#home">Trang chủ</a>
926
+ <a href="#menu">Thực đơn</a>
927
+ <a href="#promo">Khuyến mãi</a>
928
+ <a href="#contact">Liên hệ</a>
929
+ </nav>
930
+ <div style="display: flex; align-items: center; gap: 1rem;">
931
+ <div class="cart-icon" onclick="toggleCart()">
932
+ <i class="fas fa-shopping-bag"></i>
933
+ <span class="cart-count" id="cartCount">0</span>
934
+ </div>
935
+ <div class="mobile-menu" onclick="toggleMenu()">
936
+ <i class="fas fa-bars"></i>
937
+ </div>
938
+ </div>
939
+ </div>
940
+ </header>
941
+
942
+ <!-- Hero Section -->
943
+ <section class="hero" id="home">
944
+ <h1>🧋 Trà Sữa Thượng Hạng</h1>
945
+ <p>Hương vị đậm đà, nguyên liệu tươi ngon, giao hàng siêu tốc!</p>
946
+ <button class="hero-btn" onclick="scrollToMenu()">
947
+ <i class="fas fa-utensils"></i> Xem Thực Đơn
948
+ </button>
949
+ </section>
950
+
951
+ <!-- Categories -->
952
+ <section class="categories">
953
+ <h2 class="section-title">Danh Mục</h2>
954
+ <div class="category-grid">
955
+ <div class="category-card active" onclick="filterProducts('all')">
956
+ <i class="fas fa-th-large"></i>
957
+ <h3>Tất cả</h3>
958
+ </div>
959
+ <div class="category-card" onclick="filterProducts('milk-tea')">
960
+ <i class="fas fa-mug-hot"></i>
961
+ <h3>Trà Sữa</h3>
962
+ </div>
963
+ <div class="category-card" onclick="filterProducts('fruit-tea')">
964
+ <i class="fas fa-lemon"></i>
965
+ <h3>Trà Trái Cây</h3>
966
+ </div>
967
+ <div class="category-card" onclick="filterProducts('special')">
968
+ <i class="fas fa-star"></i>
969
+ <h3>Đặc Biệt</h3>
970
+ </div>
971
+ <div class="category-card" onclick="filterProducts('topping')">
972
+ <i class="fas fa-cookie"></i>
973
+ <h3>Topping</h3>
974
+ </div>
975
+ </div>
976
+ </section>
977
+
978
+ <!-- Products -->
979
+ <section class="products" id="menu">
980
+ <h2 class="section-title">Thực Đơn</h2>
981
+ <div class="product-grid" id="productGrid">
982
+ <!-- Products will be rendered here -->
983
+ </div>
984
+ </section>
985
+
986
+ <!-- Promotions -->
987
+ <section class="promotions" id="promo">
988
+ <h2 class="section-title">Khuyến Mãi Hot</h2>
989
+ <div class="promo-grid">
990
+ <div class="promo-card">
991
+ <h3>🎉 Giảm 20% Đơn Đầu Tiên</h3>
992
+ <p>Áp dụng cho khách hàng mới đặt hàng lần đầu</p>
993
+ <span class="promo-code">NEWBIE20</span>
994
+ </div>
995
+ <div class="promo-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
996
+ <h3>🧋 Mua 2 Tặng 1</h3>
997
+ <p>Mua 2 ly trà sữa bất kỳ, tặng 1 ly size M</p>
998
+ <span class="promo-code">BUY2GET1</span>
999
+ </div>
1000
+ <div class="promo-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
1001
+ <h3>🚚 Freeship Đơn 100K</h3>
1002
+ <p>Miễn phí giao hàng cho đơn từ 100.000đ</p>
1003
+ <span class="promo-code">FREESHIP</span>
1004
+ </div>
1005
+ </div>
1006
+ </section>
1007
+
1008
+ <!-- Footer -->
1009
+ <footer id="contact">
1010
+ <div class="footer-grid">
1011
+ <div class="footer-section">
1012
+ <h3><i class="fas fa-mug-hot"></i> Trà Sữa Ngon</h3>
1013
+ <p>Thương hiệu trà sữa hàng đầu Việt Nam với hơn 100 cửa hàng trên toàn quốc.</p>
1014
+ <div class="social-links">
1015
+ <a href="#"><i class="fab fa-facebook-f"></i></a>
1016
+ <a href="#"><i class="fab fa-instagram"></i></a>
1017
+ <a href="#"><i class="fab fa-tiktok"></i></a>
1018
+ <a href="#"><i class="fab fa-youtube"></i></a>
1019
+ </div>
1020
+ </div>
1021
+ <div class="footer-section">
1022
+ <h3>Liên hệ</h3>
1023
+ <p><i class="fas fa-phone"></i> 1900 1234</p>
1024
+ <p><i class="fas fa-envelope"></i> info@trasuangon.vn</p>
1025
+ <p><i class="fas fa-map-marker-alt"></i> 123 Nguyễn Huệ, Q.1, TP.HCM</p>
1026
+ </div>
1027
+ <div class="footer-section">
1028
+ <h3>Giờ mở cửa</h3>
1029
+ <p>Thứ 2 - Thứ 6: 8:00 - 22:00</p>
1030
+ <p>Thứ 7 - Chủ nhật: 9:00 - 23:00</p>
1031
+ </div>
1032
+ <div class="footer-section">
1033
+ <h3>Thanh toán</h3>
1034
+ <p><i class="fas fa-credit-card"></i> Thẻ tín dụng</p>
1035
+ <p><i class="fas fa-mobile-alt"></i> Momo, ZaloPay</p>
1036
+ <p><i class="fas fa-money-bill"></i> Tiền mặt</p>
1037
+ </div>
1038
+ </div>
1039
+ <div class="footer-bottom">
1040
+ <p>© 2024 Trà Sữa Ngon. All rights reserved.</p>
1041
+ </div>
1042
+ </footer>
1043
+
1044
+ <!-- Cart Sidebar -->
1045
+ <div class="cart-overlay" id="cartOverlay" onclick="toggleCart()"></div>
1046
+ <div class="cart-sidebar" id="cartSidebar">
1047
+ <div class="cart-header">
1048
+ <h2><i class="fas fa-shopping-bag"></i> Giỏ hàng</h2>
1049
+ <button class="close-cart" onclick="toggleCart()">
1050
+ <i class="fas fa-times"></i>
1051
+ </button>
1052
+ </div>
1053
+ <div class="cart-items" id="cartItems">
1054
+ <!-- Cart items will be rendered here -->
1055
+ </div>
1056
+ <div class="cart-footer">
1057
+ <div class="cart-total">
1058
+ <span>Tổng cộng:</span>
1059
+ <span id="cartTotal">0đ</span>
1060
+ </div>
1061
+ <button class="checkout-btn" onclick="checkout()">
1062
+ <i class="fas fa-credit-card"></i> Thanh toán
1063
+ </button>
1064
+ </div>
1065
+ </div>
1066
+
1067
+ <!-- Product Modal -->
1068
+ <div class="modal-overlay" id="modalOverlay" onclick="closeModal(event)">
1069
+ <div class="modal" onclick="event.stopPropagation()">
1070
+ <button class="close-modal" onclick="closeModalBtn()">
1071
+ <i class="fas fa-times"></i>
1072
+ </button>
1073
+ <img src="" alt="" class="modal-image" id="modalImage">
1074
+ <div class="modal-content">
1075
+ <h2 class="modal-title" id="modalTitle"></h2>
1076
+ <div class="modal-price" id="modalPrice"></div>
1077
+ <p class="modal-desc" id="modalDesc"></p>
1078
+
1079
+ <div class="option-group">
1080
+ <div class="option-title"><i class="fas fa-glass-whiskey"></i> Chọn size</div>
1081
+ <div class="option-buttons">
1082
+ <button class="option-btn active" data-size="M" data-price="0">Size M</button>
1083
+ <button class="option-btn" data-size="L" data-price="6000">Size L (+6k)</button>
1084
+ <button class="option-btn" data-size="XL" data-price="10000">Size XL (+10k)</button>
1085
+ </div>
1086
+ </div>
1087
+
1088
+ <div class="option-group">
1089
+ <div class="option-title"><i class="fas fa-snowflake"></i> Chọn đá</div>
1090
+ <div class="option-buttons">
1091
+ <button class="option-btn" data-ice="0">Không đá</button>
1092
+ <button class="option-btn" data-ice="30">Ít đá</button>
1093
+ <button class="option-btn active" data-ice="70">Bình thường</button>
1094
+ <button class="option-btn" data-ice="100">Nhiều đá</button>
1095
+ </div>
1096
+ </div>
1097
+
1098
+ <div class="option-group">
1099
+ <div class="option-title"><i class="fas fa-candy-cane"></i> Chọn đường</div>
1100
+ <div class="option-buttons">
1101
+ <button class="option-btn" data-sugar="0">Không đường</button>
1102
+ <button class="option-btn" data-sugar="30">30%</button>
1103
+ <button class="option-btn" data-sugar="50">50%</button>
1104
+ <button class="option-btn active" data-sugar="70">70%</button>
1105
+ <button class="option-btn" data-sugar="100">100%</button>
1106
+ </div>
1107
+ </div>
1108
+
1109
+ <div class="option-group">
1110
+ <div class="option-title"><i class="fas fa-cookie-bite"></i> Thêm topping</div>
1111
+ <div class="topping-grid" id="toppingGrid">
1112
+ <!-- Toppings will be rendered here -->
1113
+ </div>
1114
+ </div>
1115
+
1116
+ <div class="modal-footer">
1117
+ <div class="modal-qty">
1118
+ <button class="modal-qty-btn" onclick="changeModalQty(-1)">-</button>
1119
+ <span id="modalQty">1</span>
1120
+ <button class="modal-qty-btn" onclick="changeModalQty(1)">+</button>
1121
+ </div>
1122
+ <button class="modal-add-btn" onclick="addToCartFromModal()">
1123
+ <i class="fas fa-cart-plus"></i> Thêm vào giỏ - <span id="modalTotalPrice">0đ</span>
1124
+ </button>
1125
+ </div>
1126
+ </div>
1127
+ </div>
1128
+ </div>
1129
+
1130
+ <!-- Toast -->
1131
+ <div class="toast" id="toast">
1132
+ <i class="fas fa-check-circle"></i>
1133
+ <span i