Hugging Face's logo

Spaces:
akhaliq
/
anycoder-2d03158b
Running

App Files Community
ricardoarh commited on
Commit
d81ae37
·
verified ·
1 Parent(s): 11e8ba3

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1400 -19
index.html CHANGED
@@ -1,19 +1,1400 @@
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>The Cheesecake Club</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: #f59e0b;
11
+ --primary-dark: #d97706;
12
+ --secondary: #fbbf24;
13
+ --accent: #f472b6;
14
+ --text: #1f2937;
15
+ --text-light: #6b7280;
16
+ --bg: #fef7ed;
17
+ --bg-card: #ffffff;
18
+ --border: #e5e7eb;
19
+ --success: #10b981;
20
+ --warning: #f59e0b;
21
+ --error: #ef4444;
22
+ --radius: 12px;
23
+ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
24
+ --transition: all 0.3s ease;
25
+ }
26
+
27
+ .dark-mode {
28
+ --primary: #f59e0b;
29
+ --primary-dark: #d97706;
30
+ --secondary: #fbbf24;
31
+ --accent: #f472b6;
32
+ --text: #f9fafb;
33
+ --text-light: #d1d5db;
34
+ --bg: #1f2937;
35
+ --bg-card: #374151;
36
+ --border: #4b5563;
37
+ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
38
+ }
39
+
40
+ * {
41
+ margin: 0;
42
+ padding: 0;
43
+ box-sizing: border-box;
44
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
45
+ }
46
+
47
+ body {
48
+ background-color: var(--bg);
49
+ color: var(--text);
50
+ transition: var(--transition);
51
+ line-height: 1.6;
52
+ }
53
+
54
+ .container {
55
+ max-width: 1200px;
56
+ margin: 0 auto;
57
+ padding: 0 1rem;
58
+ }
59
+
60
+ header {
61
+ background-color: var(--bg-card);
62
+ box-shadow: var(--shadow);
63
+ position: sticky;
64
+ top: 0;
65
+ z-index: 100;
66
+ }
67
+
68
+ .header-content {
69
+ display: flex;
70
+ justify-content: space-between;
71
+ align-items: center;
72
+ padding: 1rem 0;
73
+ }
74
+
75
+ .logo {
76
+ display: flex;
77
+ align-items: center;
78
+ gap: 0.5rem;
79
+ font-weight: 700;
80
+ font-size: 1.5rem;
81
+ color: var(--primary);
82
+ }
83
+
84
+ .logo i {
85
+ font-size: 1.75rem;
86
+ }
87
+
88
+ .nav-links {
89
+ display: flex;
90
+ gap: 2rem;
91
+ }
92
+
93
+ .nav-links a {
94
+ text-decoration: none;
95
+ color: var(--text);
96
+ font-weight: 500;
97
+ transition: var(--transition);
98
+ position: relative;
99
+ }
100
+
101
+ .nav-links a:hover {
102
+ color: var(--primary);
103
+ }
104
+
105
+ .nav-links a.active {
106
+ color: var(--primary);
107
+ }
108
+
109
+ .nav-links a.active::after {
110
+ content: '';
111
+ position: absolute;
112
+ bottom: -0.5rem;
113
+ left: 0;
114
+ width: 100%;
115
+ height: 2px;
116
+ background-color: var(--primary);
117
+ }
118
+
119
+ .header-actions {
120
+ display: flex;
121
+ align-items: center;
122
+ gap: 1rem;
123
+ }
124
+
125
+ .theme-toggle {
126
+ background: none;
127
+ border: none;
128
+ color: var(--text);
129
+ cursor: pointer;
130
+ font-size: 1.25rem;
131
+ transition: var(--transition);
132
+ }
133
+
134
+ .theme-toggle:hover {
135
+ color: var(--primary);
136
+ }
137
+
138
+ .add-review-btn {
139
+ background-color: var(--primary);
140
+ color: white;
141
+ border: none;
142
+ padding: 0.5rem 1rem;
143
+ border-radius: var(--radius);
144
+ font-weight: 500;
145
+ cursor: pointer;
146
+ transition: var(--transition);
147
+ display: flex;
148
+ align-items: center;
149
+ gap: 0.5rem;
150
+ }
151
+
152
+ .add-review-btn:hover {
153
+ background-color: var(--primary-dark);
154
+ }
155
+
156
+ .mobile-menu-btn {
157
+ display: none;
158
+ background: none;
159
+ border: none;
160
+ color: var(--text);
161
+ font-size: 1.5rem;
162
+ cursor: pointer;
163
+ }
164
+
165
+ .hero {
166
+ padding: 3rem 0;
167
+ text-align: center;
168
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
169
+ color: white;
170
+ border-radius: 0 0 var(--radius) var(--radius);
171
+ margin-bottom: 2rem;
172
+ }
173
+
174
+ .hero h1 {
175
+ font-size: 2.5rem;
176
+ margin-bottom: 1rem;
177
+ }
178
+
179
+ .hero p {
180
+ font-size: 1.25rem;
181
+ max-width: 600px;
182
+ margin: 0 auto 1.5rem;
183
+ }
184
+
185
+ .hero-actions {
186
+ display: flex;
187
+ gap: 1rem;
188
+ justify-content: center;
189
+ }
190
+
191
+ .btn {
192
+ padding: 0.75rem 1.5rem;
193
+ border-radius: var(--radius);
194
+ font-weight: 500;
195
+ cursor: pointer;
196
+ transition: var(--transition);
197
+ border: none;
198
+ display: inline-flex;
199
+ align-items: center;
200
+ gap: 0.5rem;
201
+ }
202
+
203
+ .btn-primary {
204
+ background-color: white;
205
+ color: var(--primary);
206
+ }
207
+
208
+ .btn-primary:hover {
209
+ background-color: rgba(255, 255, 255, 0.9);
210
+ }
211
+
212
+ .btn-secondary {
213
+ background-color: transparent;
214
+ color: white;
215
+ border: 2px solid white;
216
+ }
217
+
218
+ .btn-secondary:hover {
219
+ background-color: white;
220
+ color: var(--primary);
221
+ }
222
+
223
+ .section-title {
224
+ font-size: 1.75rem;
225
+ margin-bottom: 1.5rem;
226
+ display: flex;
227
+ align-items: center;
228
+ gap: 0.5rem;
229
+ }
230
+
231
+ .section-title i {
232
+ color: var(--primary);
233
+ }
234
+
235
+ .reviews-grid {
236
+ display: grid;
237
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
238
+ gap: 1.5rem;
239
+ margin-bottom: 3rem;
240
+ }
241
+
242
+ .review-card {
243
+ background-color: var(--bg-card);
244
+ border-radius: var(--radius);
245
+ overflow: hidden;
246
+ box-shadow: var(--shadow);
247
+ transition: var(--transition);
248
+ }
249
+
250
+ .review-card:hover {
251
+ transform: translateY(-5px);
252
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
253
+ }
254
+
255
+ .review-image {
256
+ width: 100%;
257
+ height: 200px;
258
+ object-fit: cover;
259
+ }
260
+
261
+ .review-content {
262
+ padding: 1.25rem;
263
+ }
264
+
265
+ .review-header {
266
+ display: flex;
267
+ justify-content: space-between;
268
+ align-items: flex-start;
269
+ margin-bottom: 0.75rem;
270
+ }
271
+
272
+ .review-title {
273
+ font-size: 1.25rem;
274
+ font-weight: 600;
275
+ margin-bottom: 0.25rem;
276
+ }
277
+
278
+ .review-badge {
279
+ background-color: var(--primary);
280
+ color: white;
281
+ padding: 0.25rem 0.5rem;
282
+ border-radius: 20px;
283
+ font-size: 0.75rem;
284
+ font-weight: 500;
285
+ }
286
+
287
+ .review-badge.exception {
288
+ background-color: var(--accent);
289
+ }
290
+
291
+ .review-meta {
292
+ color: var(--text-light);
293
+ font-size: 0.875rem;
294
+ margin-bottom: 0.75rem;
295
+ }
296
+
297
+ .rating {
298
+ display: flex;
299
+ align-items: center;
300
+ gap: 0.5rem;
301
+ margin-bottom: 0.75rem;
302
+ }
303
+
304
+ .rating-stars {
305
+ color: var(--primary);
306
+ display: flex;
307
+ }
308
+
309
+ .rating-value {
310
+ font-weight: 600;
311
+ }
312
+
313
+ .review-tags {
314
+ display: flex;
315
+ flex-wrap: wrap;
316
+ gap: 0.5rem;
317
+ margin-bottom: 1rem;
318
+ }
319
+
320
+ .tag {
321
+ background-color: var(--bg);
322
+ color: var(--text);
323
+ padding: 0.25rem 0.5rem;
324
+ border-radius: 20px;
325
+ font-size: 0.75rem;
326
+ }
327
+
328
+ .review-preview {
329
+ color: var(--text-light);
330
+ font-size: 0.875rem;
331
+ display: -webkit-box;
332
+ -webkit-line-clamp: 3;
333
+ -webkit-box-orient: vertical;
334
+ overflow: hidden;
335
+ }
336
+
337
+ .filters {
338
+ display: flex;
339
+ flex-wrap: wrap;
340
+ gap: 1rem;
341
+ margin-bottom: 2rem;
342
+ background-color: var(--bg-card);
343
+ padding: 1.25rem;
344
+ border-radius: var(--radius);
345
+ box-shadow: var(--shadow);
346
+ }
347
+
348
+ .filter-group {
349
+ display: flex;
350
+ flex-direction: column;
351
+ gap: 0.5rem;
352
+ }
353
+
354
+ .filter-label {
355
+ font-size: 0.875rem;
356
+ font-weight: 500;
357
+ }
358
+
359
+ .filter-select, .filter-input {
360
+ padding: 0.5rem;
361
+ border-radius: var(--radius);
362
+ border: 1px solid var(--border);
363
+ background-color: var(--bg);
364
+ color: var(--text);
365
+ }
366
+
367
+ .search-bar {
368
+ display: flex;
369
+ gap: 0.5rem;
370
+ margin-bottom: 2rem;
371
+ }
372
+
373
+ .search-input {
374
+ flex: 1;
375
+ padding: 0.75rem 1rem;
376
+ border-radius: var(--radius);
377
+ border: 1px solid var(--border);
378
+ background-color: var(--bg);
379
+ color: var(--text);
380
+ }
381
+
382
+ .search-btn {
383
+ background-color: var(--primary);
384
+ color: white;
385
+ border: none;
386
+ padding: 0 1.25rem;
387
+ border-radius: var(--radius);
388
+ cursor: pointer;
389
+ }
390
+
391
+ .form-container {
392
+ max-width: 800px;
393
+ margin: 0 auto;
394
+ background-color: var(--bg-card);
395
+ padding: 2rem;
396
+ border-radius: var(--radius);
397
+ box-shadow: var(--shadow);
398
+ }
399
+
400
+ .form-group {
401
+ margin-bottom: 1.5rem;
402
+ }
403
+
404
+ .form-label {
405
+ display: block;
406
+ margin-bottom: 0.5rem;
407
+ font-weight: 500;
408
+ }
409
+
410
+ .form-input, .form-textarea, .form-select {
411
+ width: 100%;
412
+ padding: 0.75rem;
413
+ border-radius: var(--radius);
414
+ border: 1px solid var(--border);
415
+ background-color: var(--bg);
416
+ color: var(--text);
417
+ transition: var(--transition);
418
+ }
419
+
420
+ .form-input:focus, .form-textarea:focus, .form-select:focus {
421
+ outline: none;
422
+ border-color: var(--primary);
423
+ box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
424
+ }
425
+
426
+ .form-textarea {
427
+ min-height: 150px;
428
+ resize: vertical;
429
+ }
430
+
431
+ .form-row {
432
+ display: grid;
433
+ grid-template-columns: 1fr 1fr;
434
+ gap: 1rem;
435
+ }
436
+
437
+ .rating-slider {
438
+ width: 100%;
439
+ margin: 0.5rem 0;
440
+ }
441
+
442
+ .rating-display {
443
+ display: flex;
444
+ justify-content: space-between;
445
+ margin-top: 0.5rem;
446
+ font-size: 0.875rem;
447
+ color: var(--text-light);
448
+ }
449
+
450
+ .sub-ratings {
451
+ display: grid;
452
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
453
+ gap: 1rem;
454
+ margin-top: 1rem;
455
+ }
456
+
457
+ .checkbox-group {
458
+ display: flex;
459
+ align-items: center;
460
+ gap: 0.5rem;
461
+ }
462
+
463
+ .checkbox {
464
+ width: 1.25rem;
465
+ height: 1.25rem;
466
+ accent-color: var(--primary);
467
+ }
468
+
469
+ .photo-upload {
470
+ border: 2px dashed var(--border);
471
+ border-radius: var(--radius);
472
+ padding: 2rem;
473
+ text-align: center;
474
+ cursor: pointer;
475
+ transition: var(--transition);
476
+ }
477
+
478
+ .photo-upload:hover {
479
+ border-color: var(--primary);
480
+ }
481
+
482
+ .photo-preview {
483
+ display: flex;
484
+ flex-wrap: wrap;
485
+ gap: 1rem;
486
+ margin-top: 1rem;
487
+ }
488
+
489
+ .preview-image {
490
+ width: 100px;
491
+ height: 100px;
492
+ object-fit: cover;
493
+ border-radius: var(--radius);
494
+ }
495
+
496
+ .submit-btn {
497
+ background-color: var(--primary);
498
+ color: white;
499
+ border: none;
500
+ padding: 0.75rem 2rem;
501
+ border-radius: var(--radius);
502
+ font-weight: 500;
503
+ cursor: pointer;
504
+ transition: var(--transition);
505
+ width: 100%;
506
+ font-size: 1rem;
507
+ }
508
+
509
+ .submit-btn:hover {
510
+ background-color: var(--primary-dark);
511
+ }
512
+
513
+ .toast {
514
+ position: fixed;
515
+ bottom: 1rem;
516
+ right: 1rem;
517
+ background-color: var(--bg-card);
518
+ color: var(--text);
519
+ padding: 1rem 1.5rem;
520
+ border-radius: var(--radius);
521
+ box-shadow: var(--shadow);
522
+ display: flex;
523
+ align-items: center;
524
+ gap: 0.75rem;
525
+ z-index: 1000;
526
+ transform: translateX(150%);
527
+ transition: transform 0.3s ease;
528
+ }
529
+
530
+ .toast.show {
531
+ transform: translateX(0);
532
+ }
533
+
534
+ .toast.success {
535
+ border-left: 4px solid var(--success);
536
+ }
537
+
538
+ .toast.error {
539
+ border-left: 4px solid var(--error);
540
+ }
541
+
542
+ .toast-icon {
543
+ font-size: 1.25rem;
544
+ }
545
+
546
+ .toast.success .toast-icon {
547
+ color: var(--success);
548
+ }
549
+
550
+ .toast.error .toast-icon {
551
+ color: var(--error);
552
+ }
553
+
554
+ .top-lists {
555
+ display: grid;
556
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
557
+ gap: 1.5rem;
558
+ margin-bottom: 3rem;
559
+ }
560
+
561
+ .top-list {
562
+ background-color: var(--bg-card);
563
+ border-radius: var(--radius);
564
+ padding: 1.5rem;
565
+ box-shadow: var(--shadow);
566
+ }
567
+
568
+ .top-list-item {
569
+ display: flex;
570
+ justify-content: space-between;
571
+ align-items: center;
572
+ padding: 0.75rem 0;
573
+ border-bottom: 1px solid var(--border);
574
+ }
575
+
576
+ .top-list-item:last-child {
577
+ border-bottom: none;
578
+ }
579
+
580
+ .premium-badge {
581
+ background: linear-gradient(135deg, #f59e0b, #f472b6);
582
+ color: white;
583
+ padding: 0.25rem 0.5rem;
584
+ border-radius: 20px;
585
+ font-size: 0.75rem;
586
+ font-weight: 500;
587
+ margin-left: 0.5rem;
588
+ }
589
+
590
+ footer {
591
+ background-color: var(--bg-card);
592
+ padding: 2rem 0;
593
+ margin-top: 3rem;
594
+ border-top: 1px solid var(--border);
595
+ }
596
+
597
+ .footer-content {
598
+ display: flex;
599
+ justify-content: space-between;
600
+ align-items: center;
601
+ }
602
+
603
+ .footer-links {
604
+ display: flex;
605
+ gap: 1.5rem;
606
+ }
607
+
608
+ .footer-links a {
609
+ color: var(--text-light);
610
+ text-decoration: none;
611
+ transition: var(--transition);
612
+ }
613
+
614
+ .footer-links a:hover {
615
+ color: var(--primary);
616
+ }
617
+
618
+ .built-with {
619
+ color: var(--text-light);
620
+ font-size: 0.875rem;
621
+ }
622
+
623
+ .built-with a {
624
+ color: var(--primary);
625
+ text-decoration: none;
626
+ }
627
+
628
+ .built-with a:hover {
629
+ text-decoration: underline;
630
+ }
631
+
632
+ .detail-container {
633
+ max-width: 900px;
634
+ margin: 0 auto;
635
+ background-color: var(--bg-card);
636
+ border-radius: var(--radius);
637
+ overflow: hidden;
638
+ box-shadow: var(--shadow);
639
+ }
640
+
641
+ .detail-gallery {
642
+ display: grid;
643
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
644
+ gap: 1rem;
645
+ padding: 1.5rem;
646
+ }
647
+
648
+ .detail-image {
649
+ width: 100%;
650
+ height: 150px;
651
+ object-fit: cover;
652
+ border-radius: var(--radius);
653
+ cursor: pointer;
654
+ transition: var(--transition);
655
+ }
656
+
657
+ .detail-image:hover {
658
+ transform: scale(1.05);
659
+ }
660
+
661
+ .detail-content {
662
+ padding: 1.5rem;
663
+ }
664
+
665
+ .detail-header {
666
+ display: flex;
667
+ justify-content: space-between;
668
+ align-items: flex-start;
669
+ margin-bottom: 1rem;
670
+ }
671
+
672
+ .detail-meta {
673
+ color: var(--text-light);
674
+ margin-bottom: 1.5rem;
675
+ }
676
+
677
+ .detail-ratings {
678
+ display: grid;
679
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
680
+ gap: 1rem;
681
+ margin-bottom: 1.5rem;
682
+ }
683
+
684
+ .rating-bar {
685
+ height: 8px;
686
+ background-color: var(--border);
687
+ border-radius: 4px;
688
+ overflow: hidden;
689
+ margin-top: 0.25rem;
690
+ }
691
+
692
+ .rating-fill {
693
+ height: 100%;
694
+ background-color: var(--primary);
695
+ border-radius: 4px;
696
+ }
697
+
698
+ .detail-text {
699
+ line-height: 1.7;
700
+ margin-bottom: 1.5rem;
701
+ }
702
+
703
+ .modal {
704
+ position: fixed;
705
+ top: 0;
706
+ left: 0;
707
+ width: 100%;
708
+ height: 100%;
709
+ background-color: rgba(0, 0, 0, 0.7);
710
+ display: flex;
711
+ justify-content: center;
712
+ align-items: center;
713
+ z-index: 1000;
714
+ opacity: 0;
715
+ visibility: hidden;
716
+ transition: var(--transition);
717
+ }
718
+
719
+ .modal.show {
720
+ opacity: 1;
721
+ visibility: visible;
722
+ }
723
+
724
+ .modal-content {
725
+ max-width: 90%;
726
+ max-height: 90%;
727
+ position: relative;
728
+ }
729
+
730
+ .modal-image {
731
+ max-width: 100%;
732
+ max-height: 90vh;
733
+ border-radius: var(--radius);
734
+ }
735
+
736
+ .modal-close {
737
+ position: absolute;
738
+ top: 1rem;
739
+ right: 1rem;
740
+ background-color: rgba(0, 0, 0, 0.5);
741
+ color: white;
742
+ border: none;
743
+ width: 2.5rem;
744
+ height: 2.5rem;
745
+ border-radius: 50%;
746
+ display: flex;
747
+ justify-content: center;
748
+ align-items: center;
749
+ cursor: pointer;
750
+ transition: var(--transition);
751
+ }
752
+
753
+ .modal-close:hover {
754
+ background-color: rgba(0, 0, 0, 0.7);
755
+ }
756
+
757
+ .skeleton {
758
+ background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
759
+ background-size: 200% 100%;
760
+ animation: loading 1.5s infinite;
761
+ border-radius: var(--radius);
762
+ }
763
+
764
+ @keyframes loading {
765
+ 0% {
766
+ background-position: 200% 0;
767
+ }
768
+ 100% {
769
+ background-position: -200% 0;
770
+ }
771
+ }
772
+
773
+ .skeleton-image {
774
+ height: 200px;
775
+ width: 100%;
776
+ }
777
+
778
+ .skeleton-text {
779
+ height: 1rem;
780
+ margin-bottom: 0.5rem;
781
+ }
782
+
783
+ .skeleton-text.short {
784
+ width: 60%;
785
+ }
786
+
787
+ .mobile-nav {
788
+ position: fixed;
789
+ top: 0;
790
+ left: 0;
791
+ width: 100%;
792
+ height: 100%;
793
+ background-color: var(--bg);
794
+ z-index: 200;
795
+ display: flex;
796
+ flex-direction: column;
797
+ padding: 2rem;
798
+ transform: translateX(-100%);
799
+ transition: var(--transition);
800
+ }
801
+
802
+ .mobile-nav.show {
803
+ transform: translateX(0);
804
+ }
805
+
806
+ .mobile-nav-header {
807
+ display: flex;
808
+ justify-content: space-between;
809
+ align-items: center;
810
+ margin-bottom: 2rem;
811
+ }
812
+
813
+ .mobile-nav-close {
814
+ background: none;
815
+ border: none;
816
+ color: var(--text);
817
+ font-size: 1.5rem;
818
+ cursor: pointer;
819
+ }
820
+
821
+ .mobile-nav-links {
822
+ display: flex;
823
+ flex-direction: column;
824
+ gap: 1.5rem;
825
+ }
826
+
827
+ .mobile-nav-links a {
828
+ text-decoration: none;
829
+ color: var(--text);
830
+ font-size: 1.25rem;
831
+ font-weight: 500;
832
+ }
833
+
834
+ .mobile-nav-links a.active {
835
+ color: var(--primary);
836
+ }
837
+
838
+ @media (max-width: 768px) {
839
+ .nav-links, .header-actions .add-review-btn {
840
+ display: none;
841
+ }
842
+
843
+ .mobile-menu-btn {
844
+ display: block;
845
+ }
846
+
847
+ .hero h1 {
848
+ font-size: 2rem;
849
+ }
850
+
851
+ .hero p {
852
+ font-size: 1rem;
853
+ }
854
+
855
+ .hero-actions {
856
+ flex-direction: column;
857
+ align-items: center;
858
+ }
859
+
860
+ .form-row {
861
+ grid-template-columns: 1fr;
862
+ }
863
+
864
+ .footer-content {
865
+ flex-direction: column;
866
+ gap: 1.5rem;
867
+ text-align: center;
868
+ }
869
+
870
+ .reviews-grid {
871
+ grid-template-columns: 1fr;
872
+ }
873
+ }
874
+ </style>
875
+ </head>
876
+ <body>
877
+ <header>
878
+ <div class="container">
879
+ <div class="header-content">
880
+ <div class="logo">
881
+ <i class="fas fa-cheese"></i>
882
+ <span>The Cheesecake Club</span>
883
+ </div>
884
+ <nav class="nav-links">
885
+ <a href="#" class="active">Home</a>
886
+ <a href="#">Explore</a>
887
+ <a href="#">Top Lists</a>
888
+ <a href="#">Premium</a>
889
+ </nav>
890
+ <div class="header-actions">
891
+ <button class="theme-toggle" id="themeToggle">
892
+ <i class="fas fa-moon"></i>
893
+ </button>
894
+ <button class="add-review-btn">
895
+ <i class="fas fa-plus"></i>
896
+ Add Review
897
+ </button>
898
+ <button class="mobile-menu-btn" id="mobileMenuBtn">
899
+ <i class="fas fa-bars"></i>
900
+ </button>
901
+ </div>
902
+ </div>
903
+ </div>
904
+ </header>
905
+
906
+ <div class="mobile-nav" id="mobileNav">
907
+ <div class="mobile-nav-header">
908
+ <div class="logo">
909
+ <i class="fas fa-cheese"></i>
910
+ <span>The Cheesecake Club</span>
911
+ </div>
912
+ <button class="mobile-nav-close" id="mobileNavClose">
913
+ <i class="fas fa-times"></i>
914
+ </button>
915
+ <div class="mobile-nav-links">
916
+ <a href="#" class="active">Home</a>
917
+ <a href="#">Explore</a>
918
+ <a href="#">Top Lists</a>
919
+ <a href="#">Add Review</a>
920
+ <a href="#">Premium</a>
921
+ </div>
922
+ </div>
923
+
924
+ <div class="hero">
925
+ <div class="container">
926
+ <h1>Discover the World's Best Cheesecakes</h1>
927
+ <p>A community of dessert lovers sharing honest reviews, ratings, and photos of cheesecakes and other sweet treats from around the globe.</p>
928
+ <div class="hero-actions">
929
+ <button class="btn btn-primary" id="addReviewBtn">
930
+ <i class="fas fa-plus"></i>
931
+ Add Your Review
932
+ </button>
933
+ <button class="btn btn-secondary" id="exploreBtn">
934
+ <i class="fas fa-compass"></i>
935
+ Explore Reviews
936
+ </button>
937
+ </div>
938
+ </div>
939
+ </div>
940
+
941
+ <main class="container">
942
+ <div class="search-bar">
943
+ <input type="text" class="search-input" placeholder="Search by dessert, restaurant, city, or review text...">
944
+ <button class="search-btn">
945
+ <i class="fas fa-search"></i>
946
+ </button>
947
+ </div>
948
+
949
+ <div class="filters">
950
+ <div class="filter-group">
951
+ <label class="filter-label">Dessert Type</label>
952
+ <select class="filter-select">
953
+ <option>All Desserts</option>
954
+ <option>Cheesecake Only</option>
955
+ <option>Exceptions Only</option>
956
+ </select>
957
+ </div>
958
+ <div class="filter-group">
959
+ <label class="filter-label">City</label>
960
+ <select class="filter-select">
961
+ <option>All Cities</option>
962
+ <option>New York</option>
963
+ <option>Lisbon</option>
964
+ <option>Paris</option>
965
+ <option>Tokyo</option>
966
+ </select>
967
+ </div>
968
+ <div class="filter-group">
969
+ <label class="filter-label">Min Rating</label>
970
+ <select class="filter-select">
971
+ <option>Any Rating</option>
972
+ <option>9+</option>
973
+ <option>8+</option>
974
+ <option>7+</option>
975
+ <option>6+</option>
976
+ </select>
977
+ </div>
978
+ <div class="filter-group">
979
+ <label class="filter-label">Sort By</label>
980
+ <select class="filter-select">
981
+ <option>Newest First</option>
982
+ <option>Highest Rated</option>
983
+ <option>Oldest First</option>
984
+ </select>
985
+ </div>
986
+ </div>
987
+
988
+ <h2 class="section-title">
989
+ <i class="fas fa-clock"></i>
990
+ Latest Reviews
991
+ </h2>
992
+
993
+ <div class="reviews-grid" id="reviewsGrid">
994
+ <!-- Reviews will be populated by JavaScript -->
995
+ </div>
996
+
997
+ <h2 class="section-title">
998
+ <i class="fas fa-trophy"></i>
999
+ Top Lists
1000
+ </h2>
1001
+
1002
+ <div class="top-lists">
1003
+ <div class="top-list">
1004
+ <h3>Top Rated Cheesecakes</h3>
1005
+ <div class="top-list-item">
1006
+ <span>New York Cheesecake</span>
1007
+ <span class="rating-value">9.8</span>
1008
+ </div>
1009
+ <div class="top-list-item">
1010
+ <span>Caramel American Cheesecake</span>
1011
+ <span class="rating-value">9.5</span>
1012
+ </div>
1013
+ <div class="top-list-item">
1014
+ <span>Oreo Cheesecake</span>
1015
+ <span class="rating-value">9.3</span>
1016
+ </div>
1017
+ <div class="top-list-item">
1018
+ <span>Basque Burnt Cheesecake</span>
1019
+ <span class="rating-value">9.2</span>
1020
+ </div>
1021
+ <div class="top-list-item">
1022
+ <span>Strawberry Swirl Cheesecake</span>
1023
+ <span class="rating-value">9.0</span>
1024
+ </div>
1025
+ </div>
1026
+
1027
+ <div class="top-list">
1028
+ <h3>Top Rated Exceptions</h3>
1029
+ <div class="top-list-item">
1030
+ <span>Tiramisu</span>
1031
+ <span class="rating-value">9.7</span>
1032
+ </div>
1033
+ <div class="top-list-item">
1034
+ <span>Chocolate Lava Cake</span>
1035
+ <span class="rating-value">9.4</span>
1036
+ </div>
1037
+ <div class="top-list-item">
1038
+ <span>Crème Brûlée</span>
1039
+ <span class="rating-value">9.2</span>
1040
+ </div>
1041
+ <div class="top-list-item">
1042
+ <span>Apple Pie</span>
1043
+ <span class="rating-value">9.0</span>
1044
+ </div>
1045
+ <div class="top-list-item">
1046
+ <span>Panna Cotta</span>
1047
+ <span class="rating-value">8.8</span>
1048
+ </div>
1049
+ </div>
1050
+
1051
+ <div class="top-list">
1052
+ <h3>By City</h3>
1053
+ <div class="top-list-item">
1054
+ <span>New York</span>
1055
+ <span class="rating-value">9.4</span>
1056
+ </div>
1057
+ <div class="top-list-item">
1058
+ <span>Lisbon</span>
1059
+ <span class="rating-value">9.1</span>
1060
+ </div>
1061
+ <div class="top-list-item">
1062
+ <span>Paris</span>
1063
+ <span class="rating-value">8.9</span>
1064
+ </div>
1065
+ <div class="top-list-item">
1066
+ <span>Tokyo</span>
1067
+ <span class="rating-value">8.7</span>
1068
+ </div>
1069
+ <div class="top-list-item">
1070
+ <span>London</span>
1071
+ <span class="rating-value">8.5</span>
1072
+ </div>
1073
+ </div>
1074
+ </div>
1075
+ </main>
1076
+
1077
+ <footer>
1078
+ <div class="container">
1079
+ <div class="footer-content">
1080
+ <div class="footer-links">
1081
+ <a href="#">About</a>
1082
+ <a href="#">Contact</a>
1083
+ <a href="#">Privacy</a>
1084
+ <a href="#">Terms</a>
1085
+ </div>
1086
+ <div class="built-with">
1087
+ Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder">anycoder</a>
1088
+ </div>
1089
+ </div>
1090
+ </div>
1091
+ </footer>
1092
+
1093
+ <div class="toast" id="toast">
1094
+ <i class="fas fa-check-circle toast-icon"></i>
1095
+ <div class="toast-message">Review added successfully!</div>
1096
+ </div>
1097
+
1098
+ <div class="modal" id="imageModal">
1099
+ <div class="modal-content">
1100
+ <img class="modal-image" id="modalImage" src="" alt="">
1101
+ <button class="modal-close" id="modalClose">
1102
+ <i class="fas fa-times"></i>
1103
+ </button>
1104
+ </div>
1105
+ </div>
1106
+
1107
+ <script>
1108
+ // Sample review data
1109
+ const reviews = [
1110
+ {
1111
+ id: 1,
1112
+ dessertType: 'cheesecake',
1113
+ dessertName: 'New York Cheesecake',
1114
+ restaurantName: 'Junior\'s Restaurant',
1115
+ city: 'New York',
1116
+ country: 'USA',
1117
+ dateEaten: '2023-05-15',
1118
+ overallRating: 9.8,
1119
+ subRatings: {
1120
+ base: 9.5,
1121
+ texture: 10,
1122
+ sweetness: 9.5,
1123
+ topping: 9.0
1124
+ },
1125
+ wouldReturn: true,
1126
+ tags: ['NY Style', 'Classic', 'Dense'],
1127
+ textReview: 'This is the quintessential New York cheesecake. Perfectly dense, creamy, with just the right amount of sweetness. The graham cracker crust is perfectly crisp and buttery. Absolutely worth the hype!',
1128
+ imageUrl: 'https://images.unsplash.com/photo-1567306301408-9b74779a11f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
1129
+ price: 8.50
1130
+ },
1131
+ {
1132
+ id: 2,
1133
+ dessertType: 'cheesecake',
1134
+ dessertName: 'Caramel American Cheesecake',
1135
+ restaurantName: 'The Cheesecake Factory',
1136
+ city: 'Lisbon',
1137
+ country: 'Portugal',
1138
+ dateEaten: '2023-06-22',
1139
+ overallRating: 9.5,
1140
+ subRatings: {
1141
+ base: 9.0,
1142
+ texture: 9.5,
1143
+ sweetness: 9.0,
1144
+ topping: 10
1145
+ },
1146
+ wouldReturn: true,
1147
+ tags: ['Caramel', 'Creamy', 'Rich'],
1148
+ textReview: 'Incrível! A textura é perfeita, nem muito densa nem muito leve. O caramelo é divino - nem doce demais nem amargo. A combinação com a base de biscoito é perfeita. Definitivamente voltaria só por esta sobremesa.',
1149
+ imageUrl: 'https://images.unsplash.com/photo-1524351199678-941a58a3df50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
1150
+ price: 7.80
1151
+ },
1152
+ {
1153
+ id: 3,
1154
+ dessertType: 'exception',
1155
+ dessertName: 'Tiramisu',
1156
+ restaurantName: 'Trattoria Italiana',
1157
+ city: 'Paris',
1158
+ country: 'France',
1159
+ dateEaten: '2023-07-10',
1160
+ overallRating: 9.7,
1161
+ subRatings: {
1162
+ base: 9.5,
1163
+ texture: 9.8,
1164
+ sweetness: 9.5,
1165
+ topping: 9.0
1166
+ },
1167
+ wouldReturn: true,
1168
+ tags: ['Coffee', 'Mascarpone', 'Italian'],
1169
+ textReview: 'Um dos melhores tiramisù que já provei. O equilíbrio entre o café e o mascarpone é perfeito. Não é excessivamente doce e tem uma textura incrivelmente leve. Perfeito para terminar uma refeição.',
1170
+ imageUrl: 'https://images.unsplash.com/photo-1571877227200-a0d98ea1ae6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
1171
+ price: 9.20
1172
+ },
1173
+ {
1174
+ id: 4,
1175
+ dessertType: 'cheesecake',
1176
+ dessertName: 'Oreo Cheesecake',
1177
+ restaurantName: 'Sweet Corner',
1178
+ city: 'Tokyo',
1179
+ country: 'Japan',
1180
+ dateEaten: '2023-08-05',
1181
+ overallRating: 9.3,
1182
+ subRatings: {
1183
+ base: 9.5,
1184
+ texture: 9.0,
1185
+ sweetness: 9.0,
1186
+ topping: 9.5
1187
+ },
1188
+ wouldReturn: true,
1189
+ tags: ['Oreo', 'Chocolate', 'Creamy'],
1190
+ textReview: 'This cheesecake is a chocolate lover\'s dream. The Oreo crust is thick and crunchy, and the filling is perfectly balanced between cream cheese and cookie flavors. The chocolate ganache topping is rich but not overwhelming.',
1191
+ imageUrl: 'https://images.unsplash.com/photo-1623334044303-2410217754f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
1192
+ price: 6.50
1193
+ },
1194
+ {
1195
+ id: 5,
1196
+ dessertType: 'cheesecake',
1197
+ dessertName: 'Basque Burnt Cheesecake',
1198
+ restaurantName: 'La Fromagerie',
1199
+ city: 'Paris',
1200
+ country: 'France',
1201
+ dateEaten: '2023-09-12',
1202
+ overallRating: 9.2,
1203
+ subRatings: {
1204
+ base: 8.5,
1205
+ texture: 9.5,
1206
+ sweetness: 9.0,
1207
+ topping: 8.0
1208
+ },
1209
+ wouldReturn: true,
1210
+ tags: ['Burnt', 'Creamy', 'Rustic'],
1211
+ textReview: 'A textura é incrível - cremosa por dentro com aquela crosta caramelizada por fora. Menos doce que um cheesecake tradicional, o que permite que o sabor do queijo realmente brilhe. A apresentação rústica é encantadora.',
1212
+ imageUrl: 'https://images.unsplash.com/photo-1569670751316-4d5c5d5b5b5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
1213
+ price: 7.00
1214
+ }
1215
+ ];
1216
+
1217
+ // DOM elements
1218
+ const themeToggle = document.getElementById('themeToggle');
1219
+ const mobileMenuBtn = document.getElementById('mobileMenuBtn');
1220
+ const mobileNav = document.getElementById('mobileNav');
1221
+ const mobileNavClose = document.getElementById('mobileNavClose');
1222
+ const addReviewBtn = document.getElementById('addReviewBtn');
1223
+ const exploreBtn = document.getElementById('exploreBtn');
1224
+ const reviewsGrid = document.getElementById('reviewsGrid');
1225
+ const toast = document.getElementById('toast');
1226
+ const imageModal = document.getElementById('imageModal');
1227
+ const modalImage = document.getElementById('modalImage');
1228
+ const modalClose = document.getElementById('modalClose');
1229
+
1230
+ // Theme toggle functionality
1231
+ themeToggle.addEventListener('click', () => {
1232
+ document.body.classList.toggle('dark-mode');
1233
+ const icon = themeToggle.querySelector('i');
1234
+ if (document.body.classList.contains('dark-mode')) {
1235
+ icon.classList.remove('fa-moon');
1236
+ icon.classList.add('fa-sun');
1237
+ localStorage.setItem('theme', 'dark');
1238
+ } else {
1239
+ icon.classList.remove('fa-sun');
1240
+ icon.classList.add('fa-moon');
1241
+ localStorage.setItem('theme', 'light');
1242
+ }
1243
+ });
1244
+
1245
+ // Check for saved theme preference
1246
+ const savedTheme = localStorage.getItem('theme');
1247
+ if (savedTheme === 'dark') {
1248
+ document.body.classList.add('dark-mode');
1249
+ const icon = themeToggle.querySelector('i');
1250
+ icon.classList.remove('fa-moon');
1251
+ icon.classList.add('fa-sun');
1252
+ }
1253
+
1254
+ // Mobile menu functionality
1255
+ mobileMenuBtn.addEventListener('click', () => {
1256
+ mobileNav.classList.add('show');
1257
+ });
1258
+
1259
+ mobileNavClose.addEventListener('click', () => {
1260
+ mobileNav.classList.remove('show');
1261
+ });
1262
+
1263
+ // Add review button functionality
1264
+ addReviewBtn.addEventListener('click', () => {
1265
+ showToast('Redirecting to add review form...', 'success');
1266
+ // In a real app, this would navigate to the add review page
1267
+ });
1268
+
1269
+ exploreBtn.addEventListener('click', () => {
1270
+ showToast('Loading explore page...', 'success');
1271
+ // In a real app, this would navigate to the explore page
1272
+ });
1273
+
1274
+ // Show toast notification
1275
+ function showToast(message, type) {
1276
+ toast.className = `toast ${type}`;
1277
+ toast.querySelector('.toast-message').textContent = message;
1278
+ toast.classList.add('show');
1279
+
1280
+ setTimeout(() => {
1281
+ toast.classList.remove('show');
1282
+ }, 3000);
1283
+ }
1284
+
1285
+ // Render stars based on rating
1286
+ function renderStars(rating) {
1287
+ const fullStars = Math.floor(rating / 2);
1288
+ const hasHalfStar = rating % 2 >= 1;
1289
+
1290
+ let starsHtml = '';
1291
+ for (let i = 0; i < 5; i++) {
1292
+ if (i < fullStars) {
1293
+ starsHtml += '<i class="fas fa-star"></i>';
1294
+ } else if (i === fullStars && hasHalfStar) {
1295
+ starsHtml += '<i class="fas fa-star-half-alt"></i>';
1296
+ } else {
1297
+ starsHtml += '<i class="far fa-star"></i>';
1298
+ }
1299
+ }
1300
+ return starsHtml;
1301
+ }
1302
+
1303
+ // Render reviews
1304
+ function renderReviews() {
1305
+ let reviewsHtml = '';
1306
+
1307
+ reviews.forEach(review => {
1308
+ const badgeClass = review.dessertType === 'exception' ? 'exception' : '';
1309
+
1310
+ reviewsHtml += `
1311
+ <div class="review-card" data-id="${review.id}">
1312
+ <img src="${review.imageUrl}" alt="${review.dessertName}" class="review-image">
1313
+ <div class="review-content">
1314
+ <div class="review-header">
1315
+ <div>
1316
+ <h3 class="review-title">${review.dessertName}</h3>
1317
+ <div class="review-meta">${review.restaurantName} • ${review.city}</div>
1318
+ </div>
1319
+ <span class="review-badge ${badgeClass}">${review.dessertType === 'cheesecake' ? 'Cheesecake' : 'Exception'}</span>
1320
+ </div>
1321
+ <div class="rating">
1322
+ <div class="rating-stars">
1323
+ ${renderStars(review.overallRating)}
1324
+ </div>
1325
+ <span class="rating-value">${review.overallRating}</span>
1326
+ </div>
1327
+ <div class="review-tags">
1328
+ ${review.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
1329
+ </div>
1330
+ <p class="review-preview">${review.textReview}</p>
1331
+ </div>
1332
+ </div>
1333
+ `;
1334
+ });
1335
+
1336
+ reviewsGrid.innerHTML = reviewsHtml;
1337
+
1338
+ // Add click event to review cards
1339
+ document.querySelectorAll('.review-card').forEach(card => {
1340
+ card.addEventListener('click', (e) => {
1341
+ if (!e.target.classList.contains('review-image')) {
1342
+ const reviewId = card.getAttribute('data-id');
1343
+ showReviewDetail(reviewId);
1344
+ }
1345
+ });
1346
+ });
1347
+
1348
+ // Add click event to review images
1349
+ document.querySelectorAll('.review-image').forEach(img => {
1350
+ img.addEventListener('click', (e) => {
1351
+ e.stopPropagation();
1352
+ const reviewId = img.closest('.review-card').getAttribute('data-id');
1353
+ openImageModal(reviewId);
1354
+ });
1355
+ });
1356
+ }
1357
+
1358
+ // Show review detail
1359
+ function showReviewDetail(reviewId) {
1360
+ const review = reviews.find(r => r.id == reviewId);
1361
+ if (!review) return;
1362
+
1363
+ // In a real app, this would navigate to the review detail page
1364
+ showToast(`Loading review: ${review.dessertName}`, 'success');
1365
+ }
1366
+
1367
+ // Open image modal
1368
+ function openImageModal(reviewId) {
1369
+ const review = reviews.find(r => r.id == reviewId);
1370
+ if (!review) return;
1371
+
1372
+ modalImage.src = review.imageUrl;
1373
+ modalImage.alt = review.dessertName;
1374
+ imageModal.classList.add('show');
1375
+ }
1376
+
1377
+ // Close image modal
1378
+ modalClose.addEventListener('click', () => {
1379
+ imageModal.classList.remove('show');
1380
+ });
1381
+
1382
+ // Close modal when clicking outside the image
1383
+ imageModal.addEventListener('click', (e) => {
1384
+ if (e.target === imageModal) {
1385
+ imageModal.classList.remove('show');
1386
+ }
1387
+ });
1388
+
1389
+ // Initialize the app
1390
+ document.addEventListener('DOMContentLoaded', () => {
1391
+ renderReviews();
1392
+
1393
+ // Show welcome toast
1394
+ setTimeout(() => {
1395
+ showToast('Welcome to The Cheesecake Club!', 'success');
1396
+ }, 1000);
1397
+ });
1398
+ </script>
1399
+ </body>
1400
+ </html>