Hugging Face's logo

Spaces:
ekstra26
/
anycoder-82bb496f
Running

App Files Community
ekstra26 commited on
Commit
b0c8088
·
verified ·
1 Parent(s): ea310fd

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +870 -19
index.html CHANGED
@@ -1,19 +1,870 @@
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>Gelsin - Food Delivery</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-color: #FF6B6B;
11
+ --secondary-color: #4ECDC4;
12
+ --dark-color: #2A2A2A;
13
+ --light-color: #F8F9FA;
14
+ --success-color: #4CAF50;
15
+ --warning-color: #FFC107;
16
+ --danger-color: #F44336;
17
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
18
+ --transition: all 0.3s ease;
19
+ }
20
+
21
+ * {
22
+ margin: 0;
23
+ padding: 0;
24
+ box-sizing: border-box;
25
+ }
26
+
27
+ body {
28
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
29
+ line-height: 1.6;
30
+ color: var(--dark-color);
31
+ background-color: var(--light-color);
32
+ }
33
+
34
+ /* Header */
35
+ header {
36
+ background-color: white;
37
+ box-shadow: var(--shadow);
38
+ position: sticky;
39
+ top: 0;
40
+ z-index: 100;
41
+ }
42
+
43
+ .header-container {
44
+ max-width: 1200px;
45
+ margin: 0 auto;
46
+ padding: 1rem;
47
+ display: flex;
48
+ justify-content: space-between;
49
+ align-items: center;
50
+ }
51
+
52
+ .logo {
53
+ display: flex;
54
+ align-items: center;
55
+ gap: 0.5rem;
56
+ text-decoration: none;
57
+ color: var(--dark-color);
58
+ font-weight: bold;
59
+ font-size: 1.5rem;
60
+ }
61
+
62
+ .logo-icon {
63
+ font-size: 2rem;
64
+ color: var(--primary-color);
65
+ }
66
+
67
+ .nav-links {
68
+ display: flex;
69
+ gap: 2rem;
70
+ }
71
+
72
+ .nav-links a {
73
+ text-decoration: none;
74
+ color: var(--dark-color);
75
+ font-weight: 500;
76
+ transition: var(--transition);
77
+ position: relative;
78
+ }
79
+
80
+ .nav-links a:hover {
81
+ color: var(--primary-color);
82
+ }
83
+
84
+ .nav-links a::after {
85
+ content: '';
86
+ position: absolute;
87
+ width: 0;
88
+ height: 2px;
89
+ bottom: -5px;
90
+ left: 0;
91
+ background-color: var(--primary-color);
92
+ transition: var(--transition);
93
+ }
94
+
95
+ .nav-links a:hover::after {
96
+ width: 100%;
97
+ }
98
+
99
+ .auth-buttons {
100
+ display: flex;
101
+ gap: 1rem;
102
+ }
103
+
104
+ .btn {
105
+ padding: 0.5rem 1rem;
106
+ border-radius: 25px;
107
+ text-decoration: none;
108
+ font-weight: 500;
109
+ transition: var(--transition);
110
+ border: none;
111
+ cursor: pointer;
112
+ }
113
+
114
+ .btn-primary {
115
+ background-color: var(--primary-color);
116
+ color: white;
117
+ }
118
+
119
+ .btn-primary:hover {
120
+ background-color: #ff5252;
121
+ transform: translateY(-2px);
122
+ }
123
+
124
+ .btn-secondary {
125
+ background-color: transparent;
126
+ color: var(--dark-color);
127
+ border: 1px solid var(--dark-color);
128
+ }
129
+
130
+ .btn-secondary:hover {
131
+ background-color: var(--dark-color);
132
+ color: white;
133
+ }
134
+
135
+ /* Hero Section */
136
+ .hero {
137
+ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1555939594-58d7cb561ad1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
138
+ background-size: cover;
139
+ background-position: center;
140
+ height: 80vh;
141
+ display: flex;
142
+ align-items: center;
143
+ color: white;
144
+ text-align: center;
145
+ }
146
+
147
+ .hero-content {
148
+ max-width: 800px;
149
+ margin: 0 auto;
150
+ padding: 0 1rem;
151
+ }
152
+
153
+ .hero h1 {
154
+ font-size: 3rem;
155
+ margin-bottom: 1rem;
156
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
157
+ }
158
+
159
+ .hero p {
160
+ font-size: 1.2rem;
161
+ margin-bottom: 2rem;
162
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
163
+ }
164
+
165
+ .search-container {
166
+ display: flex;
167
+ max-width: 600px;
168
+ margin: 0 auto;
169
+ background-color: white;
170
+ border-radius: 30px;
171
+ overflow: hidden;
172
+ box-shadow: var(--shadow);
173
+ }
174
+
175
+ .search-input {
176
+ flex: 1;
177
+ padding: 1rem;
178
+ border: none;
179
+ outline: none;
180
+ font-size: 1rem;
181
+ }
182
+
183
+ .search-button {
184
+ padding: 0 1.5rem;
185
+ background-color: var(--primary-color);
186
+ color: white;
187
+ border: none;
188
+ cursor: pointer;
189
+ transition: var(--transition);
190
+ }
191
+
192
+ .search-button:hover {
193
+ background-color: #ff5252;
194
+ }
195
+
196
+ /* Features Section */
197
+ .features {
198
+ padding: 4rem 1rem;
199
+ max-width: 1200px;
200
+ margin: 0 auto;
201
+ }
202
+
203
+ .section-title {
204
+ text-align: center;
205
+ margin-bottom: 3rem;
206
+ font-size: 2rem;
207
+ color: var(--dark-color);
208
+ }
209
+
210
+ .features-grid {
211
+ display: grid;
212
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
213
+ gap: 2rem;
214
+ }
215
+
216
+ .feature-card {
217
+ background-color: white;
218
+ border-radius: 10px;
219
+ padding: 2rem;
220
+ text-align: center;
221
+ box-shadow: var(--shadow);
222
+ transition: var(--transition);
223
+ }
224
+
225
+ .feature-card:hover {
226
+ transform: translateY(-10px);
227
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
228
+ }
229
+
230
+ .feature-icon {
231
+ font-size: 3rem;
232
+ color: var(--primary-color);
233
+ margin-bottom: 1rem;
234
+ }
235
+
236
+ .feature-card h3 {
237
+ margin-bottom: 1rem;
238
+ color: var(--dark-color);
239
+ }
240
+
241
+ /* Popular Restaurants */
242
+ .restaurants {
243
+ background-color: #f8f9fa;
244
+ padding: 4rem 1rem;
245
+ }
246
+
247
+ .restaurants-grid {
248
+ display: grid;
249
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
250
+ gap: 2rem;
251
+ max-width: 1200px;
252
+ margin: 0 auto;
253
+ }
254
+
255
+ .restaurant-card {
256
+ background-color: white;
257
+ border-radius: 10px;
258
+ overflow: hidden;
259
+ box-shadow: var(--shadow);
260
+ transition: var(--transition);
261
+ }
262
+
263
+ .restaurant-card:hover {
264
+ transform: translateY(-5px);
265
+ }
266
+
267
+ .restaurant-image {
268
+ height: 150px;
269
+ width: 100%;
270
+ object-fit: cover;
271
+ }
272
+
273
+ .restaurant-info {
274
+ padding: 1rem;
275
+ }
276
+
277
+ .restaurant-name {
278
+ font-size: 1.2rem;
279
+ margin-bottom: 0.5rem;
280
+ color: var(--dark-color);
281
+ }
282
+
283
+ .restaurant-rating {
284
+ display: flex;
285
+ align-items: center;
286
+ gap: 0.5rem;
287
+ margin-bottom: 0.5rem;
288
+ }
289
+
290
+ .rating-stars {
291
+ color: var(--warning-color);
292
+ }
293
+
294
+ .restaurant-tags {
295
+ display: flex;
296
+ gap: 0.5rem;
297
+ flex-wrap: wrap;
298
+ }
299
+
300
+ .tag {
301
+ background-color: #e9ecef;
302
+ padding: 0.2rem 0.5rem;
303
+ border-radius: 10px;
304
+ font-size: 0.8rem;
305
+ }
306
+
307
+ /* How It Works */
308
+ .how-it-works {
309
+ padding: 4rem 1rem;
310
+ max-width: 1200px;
311
+ margin: 0 auto;
312
+ }
313
+
314
+ .steps-container {
315
+ display: grid;
316
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
317
+ gap: 3rem;
318
+ align-items: center;
319
+ }
320
+
321
+ .step {
322
+ text-align: center;
323
+ }
324
+
325
+ .step-number {
326
+ background-color: var(--primary-color);
327
+ color: white;
328
+ width: 50px;
329
+ height: 50px;
330
+ border-radius: 50%;
331
+ display: flex;
332
+ align-items: center;
333
+ justify-content: center;
334
+ font-size: 1.5rem;
335
+ font-weight: bold;
336
+ margin: 0 auto 1rem;
337
+ }
338
+
339
+ .step h3 {
340
+ margin-bottom: 1rem;
341
+ color: var(--dark-color);
342
+ }
343
+
344
+ /* Testimonials */
345
+ .testimonials {
346
+ background-color: #f8f9fa;
347
+ padding: 4rem 1rem;
348
+ }
349
+
350
+ .testimonial-slider {
351
+ max-width: 800px;
352
+ margin: 0 auto;
353
+ position: relative;
354
+ }
355
+
356
+ .testimonial {
357
+ background-color: white;
358
+ padding: 2rem;
359
+ border-radius: 10px;
360
+ box-shadow: var(--shadow);
361
+ text-align: center;
362
+ margin: 0 1rem;
363
+ }
364
+
365
+ .testimonial-image {
366
+ width: 80px;
367
+ height: 80px;
368
+ border-radius: 50%;
369
+ object-fit: cover;
370
+ margin: 0 auto 1rem;
371
+ }
372
+
373
+ .testimonial-text {
374
+ font-style: italic;
375
+ margin-bottom: 1rem;
376
+ color: var(--dark-color);
377
+ }
378
+
379
+ .testimonial-name {
380
+ font-weight: bold;
381
+ color: var(--primary-color);
382
+ }
383
+
384
+ .slider-controls {
385
+ display: flex;
386
+ justify-content: center;
387
+ gap: 1rem;
388
+ margin-top: 2rem;
389
+ }
390
+
391
+ .slider-control {
392
+ width: 12px;
393
+ height: 12px;
394
+ border-radius: 50%;
395
+ background-color: #ddd;
396
+ cursor: pointer;
397
+ transition: var(--transition);
398
+ }
399
+
400
+ .slider-control.active {
401
+ background-color: var(--primary-color);
402
+ }
403
+
404
+ /* Footer */
405
+ footer {
406
+ background-color: var(--dark-color);
407
+ color: white;
408
+ padding: 3rem 1rem 1rem;
409
+ }
410
+
411
+ .footer-container {
412
+ max-width: 1200px;
413
+ margin: 0 auto;
414
+ display: grid;
415
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
416
+ gap: 2rem;
417
+ }
418
+
419
+ .footer-section h3 {
420
+ margin-bottom: 1rem;
421
+ font-size: 1.2rem;
422
+ }
423
+
424
+ .footer-links {
425
+ display: flex;
426
+ flex-direction: column;
427
+ gap: 0.5rem;
428
+ }
429
+
430
+ .footer-links a {
431
+ color: #ccc;
432
+ text-decoration: none;
433
+ transition: var(--transition);
434
+ }
435
+
436
+ .footer-links a:hover {
437
+ color: var(--primary-color);
438
+ }
439
+
440
+ .social-links {
441
+ display: flex;
442
+ gap: 1rem;
443
+ }
444
+
445
+ .social-links a {
446
+ color: white;
447
+ font-size: 1.5rem;
448
+ transition: var(--transition);
449
+ }
450
+
451
+ .social-links a:hover {
452
+ color: var(--primary-color);
453
+ transform: translateY(-3px);
454
+ }
455
+
456
+ .copyright {
457
+ text-align: center;
458
+ margin-top: 2rem;
459
+ padding-top: 2rem;
460
+ border-top: 1px solid #444;
461
+ color: #ccc;
462
+ }
463
+
464
+ /* Mobile Menu */
465
+ .menu-toggle {
466
+ display: none;
467
+ background: none;
468
+ border: none;
469
+ font-size: 1.5rem;
470
+ cursor: pointer;
471
+ color: var(--dark-color);
472
+ }
473
+
474
+ /* Responsive Design */
475
+ @media (max-width: 768px) {
476
+ .nav-links {
477
+ display: none;
478
+ flex-direction: column;
479
+ position: absolute;
480
+ top: 100%;
481
+ left: 0;
482
+ width: 100%;
483
+ background-color: white;
484
+ padding: 1rem;
485
+ box-shadow: var(--shadow);
486
+ }
487
+
488
+ .nav-links.active {
489
+ display: flex;
490
+ }
491
+
492
+ .menu-toggle {
493
+ display: block;
494
+ }
495
+
496
+ .hero h1 {
497
+ font-size: 2rem;
498
+ }
499
+
500
+ .search-container {
501
+ flex-direction: column;
502
+ }
503
+
504
+ .steps-container {
505
+ grid-template-columns: 1fr;
506
+ }
507
+ }
508
+
509
+ /* Animations */
510
+ @keyframes fadeIn {
511
+ from { opacity: 0; transform: translateY(20px); }
512
+ to { opacity: 1; transform: translateY(0); }
513
+ }
514
+
515
+ .fade-in {
516
+ animation: fadeIn 0.5s ease-out;
517
+ }
518
+
519
+ /* Built with anycoder */
520
+ .anycoder-link {
521
+ position: fixed;
522
+ bottom: 1rem;
523
+ right: 1rem;
524
+ background-color: var(--primary-color);
525
+ color: white;
526
+ padding: 0.5rem 1rem;
527
+ border-radius: 25px;
528
+ text-decoration: none;
529
+ font-size: 0.9rem;
530
+ z-index: 1000;
531
+ box-shadow: var(--shadow);
532
+ transition: var(--transition);
533
+ }
534
+
535
+ .anycoder-link:hover {
536
+ background-color: #ff5252;
537
+ transform: translateY(-2px);
538
+ }
539
+ </style>
540
+ </head>
541
+ <body>
542
+ <header>
543
+ <div class="header-container">
544
+ <a href="#" class="logo">
545
+ <i class="fas fa-utensils logo-icon"></i>
546
+ <span>Gelsin</span>
547
+ </a>
548
+
549
+ <button class="menu-toggle" id="menuToggle">
550
+ <i class="fas fa-bars"></i>
551
+ </button>
552
+
553
+ <nav class="nav-links" id="navLinks">
554
+ <a href="#home">Home</a>
555
+ <a href="#restaurants">Restaurants</a>
556
+ <a href="#how-it-works">How It Works</a>
557
+ <a href="#about">About</a>
558
+ <a href="#contact">Contact</a>
559
+ </nav>
560
+
561
+ <div class="auth-buttons">
562
+ <a href="#" class="btn btn-secondary">Login</a>
563
+ <a href="#" class="btn btn-primary">Sign Up</a>
564
+ </div>
565
+ </div>
566
+ </header>
567
+
568
+ <section class="hero" id="home">
569
+ <div class="hero-content fade-in">
570
+ <h1>Order Food You Love</h1>
571
+ <p>Discover the best restaurants in your area and get your favorite meals delivered fast</p>
572
+ <div class="search-container">
573
+ <input type="text" class="search-input" placeholder="Search for restaurants or dishes...">
574
+ <button class="search-button">
575
+ <i class="fas fa-search"></i>
576
+ </button>
577
+ </div>
578
+ </div>
579
+ </section>
580
+
581
+ <section class="features">
582
+ <h2 class="section-title">Why Choose Gelsin?</h2>
583
+ <div class="features-grid">
584
+ <div class="feature-card fade-in">
585
+ <i class="fas fa-bolt feature-icon"></i>
586
+ <h3>Fast Delivery</h3>
587
+ <p>Get your food delivered in record time with our network of professional delivery partners.</p>
588
+ </div>
589
+ <div class="feature-card fade-in">
590
+ <i class="fas fa-utensils feature-icon"></i>
591
+ <h3>Wide Selection</h3>
592
+ <p>Choose from hundreds of restaurants and thousands of dishes to satisfy any craving.</p>
593
+ </div>
594
+ <div class="feature-card fade-in">
595
+ <i class="fas fa-shield-alt feature-icon"></i>
596
+ <h3>Secure Payments</h3>
597
+ <p>All payments are processed securely with multiple payment options available.</p>
598
+ </div>
599
+ </div>
600
+ </section>
601
+
602
+ <section class="restaurants" id="restaurants">
603
+ <h2 class="section-title">Popular Restaurants</h2>
604
+ <div class="restaurants-grid">
605
+ <div class="restaurant-card fade-in">
606
+ <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Pizza Palace" class="restaurant-image">
607
+ <div class="restaurant-info">
608
+ <h3 class="restaurant-name">Pizza Palace</h3>
609
+ <div class="restaurant-rating">
610
+ <span class="rating-stars">
611
+ <i class="fas fa-star"></i>
612
+ <i class="fas fa-star"></i>
613
+ <i class="fas fa-star"></i>
614
+ <i class="fas fa-star"></i>
615
+ <i class="fas fa-star-half-alt"></i>
616
+ </span>
617
+ <span>4.5 (248)</span>
618
+ </div>
619
+ <div class="restaurant-tags">
620
+ <span class="tag">Italian</span>
621
+ <span class="tag">Pizza</span>
622
+ <span class="tag">Pasta</span>
623
+ </div>
624
+ </div>
625
+ </div>
626
+ <div class="restaurant-card fade-in">
627
+ <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1481&q=80" alt="Burger Haven" class="restaurant-image">
628
+ <div class="restaurant-info">
629
+ <h3 class="restaurant-name">Burger Haven</h3>
630
+ <div class="restaurant-rating">
631
+ <span class="rating-stars">
632
+ <i class="fas fa-star"></i>
633
+ <i class="fas fa-star"></i>
634
+ <i class="fas fa-star"></i>
635
+ <i class="fas fa-star"></i>
636
+ <i class="far fa-star"></i>
637
+ </span>
638
+ <span>4.0 (187)</span>
639
+ </div>
640
+ <div class="restaurant-tags">
641
+ <span class="tag">American</span>
642
+ <span class="tag">Burgers</span>
643
+ <span class="tag">Fast Food</span>
644
+ </div>
645
+ </div>
646
+ </div>
647
+ <div class="restaurant-card fade-in">
648
+ <img src="https://images.unsplash.com/photo-1565958011703-44f9829ba187?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sushi Express" class="restaurant-image">
649
+ <div class="restaurant-info">
650
+ <h3 class="restaurant-name">Sushi Express</h3>
651
+ <div class="restaurant-rating">
652
+ <span class="rating-stars">
653
+ <i class="fas fa-star"></i>
654
+ <i class="fas fa-star"></i>
655
+ <i class="fas fa-star"></i>
656
+ <i class="fas fa-star"></i>
657
+ <i class="fas fa-star"></i>
658
+ </span>
659
+ <span>5.0 (312)</span>
660
+ </div>
661
+ <div class="restaurant-tags">
662
+ <span class="tag">Japanese</span>
663
+ <span class="tag">Sushi</span>
664
+ <span class="tag">Asian</span>
665
+ </div>
666
+ </div>
667
+ </div>
668
+ <div class="restaurant-card fade-in">
669
+ <img src="https://images.unsplash.com/photo-1551024506-0bccd828d307?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Taco Fiesta" class="restaurant-image">
670
+ <div class="restaurant-info">
671
+ <h3 class="restaurant-name">Taco Fiesta</h3>
672
+ <div class="restaurant-rating">
673
+ <span class="rating-stars">
674
+ <i class="fas fa-star"></i>
675
+ <i class="fas fa-star"></i>
676
+ <i class="fas fa-star"></i>
677
+ <i class="fas fa-star-half-alt"></i>
678
+ <i class="far fa-star"></i>
679
+ </span>
680
+ <span>3.8 (96)</span>
681
+ </div>
682
+ <div class="restaurant-tags">
683
+ <span class="tag">Mexican</span>
684
+ <span class="tag">Tacos</span>
685
+ <span class="tag">Spicy</span>
686
+ </div>
687
+ </div>
688
+ </div>
689
+ </div>
690
+ </section>
691
+
692
+ <section class="how-it-works" id="how-it-works">
693
+ <h2 class="section-title">How It Works</h2>
694
+ <div class="steps-container">
695
+ <div class="step fade-in">
696
+ <div class="step-number">1</div>
697
+ <h3>Choose Your Restaurant</h3>
698
+ <p>Browse through our extensive list of partner restaurants and find the one that suits your taste.</p>
699
+ </div>
700
+ <div class="step fade-in">
701
+ <div class="step-number">2</div>
702
+ <h3>Select Your Meal</h3>
703
+ <p>Pick your favorite dishes from the menu and customize them to your liking with our easy-to-use interface.</p>
704
+ </div>
705
+ <div class="step fade-in">
706
+ <div class="step-number">3</div>
707
+ <h3>Place Your Order</h3>
708
+ <p>Add your items to the cart, choose your payment method, and place your order with just a few clicks.</p>
709
+ </div>
710
+ <div class="step fade-in">
711
+ <div class="step-number">4</div>
712
+ <h3>Enjoy Your Food</h3>
713
+ <p>Sit back and relax while we prepare and deliver your food. Track your order in real-time and enjoy!</p>
714
+ </div>
715
+ </div>
716
+ </section>
717
+
718
+ <section class="testimonials">
719
+ <h2 class="section-title">What Our Customers Say</h2>
720
+ <div class="testimonial-slider">
721
+ <div class="testimonial fade-in">
722
+ <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Customer" class="testimonial-image">
723
+ <p class="testimonial-text">"Gelsin has completely changed how I order food. The variety is amazing and the delivery is always on time. Highly recommended!"</p>
724
+ <p class="testimonial-name">- Sarah Johnson</p>
725
+ </div>
726
+ <div class="slider-controls">
727
+ <div class="slider-control active"></div>
728
+ <div class="slider-control"></div>
729
+ <div class="slider-control"></div>
730
+ </div>
731
+ </div>
732
+ </section>
733
+
734
+ <footer>
735
+ <div class="footer-container">
736
+ <div class="footer-section">
737
+ <h3>Gelsin</h3>
738
+ <p>Your favorite food, delivered fast to your doorstep.</p>
739
+ <div class="social-links">
740
+ <a href="#"><i class="fab fa-facebook"></i></a>
741
+ <a href="#"><i class="fab fa-twitter"></i></a>
742
+ <a href="#"><i class="fab fa-instagram"></i></a>
743
+ <a href="#"><i class="fab fa-youtube"></i></a>
744
+ </div>
745
+ </div>
746
+ <div class="footer-section">
747
+ <h3>Quick Links</h3>
748
+ <div class="footer-links">
749
+ <a href="#">Home</a>
750
+ <a href="#">Restaurants</a>
751
+ <a href="#">How It Works</a>
752
+ <a href="#">About Us</a>
753
+ <a href="#">Contact</a>
754
+ </div>
755
+ </div>
756
+ <div class="footer-section">
757
+ <h3>Support</h3>
758
+ <div class="footer-links">
759
+ <a href="#">FAQ</a>
760
+ <a href="#">Help Center</a>
761
+ <a href="#">Delivery Areas</a>
762
+ <a href="#">Terms of Service</a>
763
+ <a href="#">Privacy Policy</a>
764
+ </div>
765
+ </div>
766
+ <div class="footer-section">
767
+ <h3>Contact Us</h3>
768
+ <div class="footer-links">
769
+ <p><i class="fas fa-map-marker-alt"></i> 123 Food Street, City</p>
770
+ <p><i class="fas fa-phone"></i> +1 (555) 123-4567</p>
771
+ <p><i class="fas fa-envelope"></i> info@gelsin.com</p>
772
+ </div>
773
+ </div>
774
+ </div>
775
+ <div class="copyright">
776
+ <p>&copy; 2023 Gelsin. All rights reserved.</p>
777
+ </div>
778
+ </footer>
779
+
780
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
781
+ Built with anycoder
782
+ </a>
783
+
784
+ <script>
785
+ // Mobile menu toggle
786
+ const menuToggle = document.getElementById('menuToggle');
787
+ const navLinks = document.getElementById('navLinks');
788
+
789
+ menuToggle.addEventListener('click', () => {
790
+ navLinks.classList.toggle('active');
791
+ });
792
+
793
+ // Smooth scrolling for anchor links
794
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
795
+ anchor.addEventListener('click', function (e) {
796
+ e.preventDefault();
797
+
798
+ // Close mobile menu if open
799
+ navLinks.classList.remove('active');
800
+
801
+ const targetId = this.getAttribute('href');
802
+ if (targetId === '#') return;
803
+
804
+ const targetElement = document.querySelector(targetId);
805
+ if (targetElement) {
806
+ window.scrollTo({
807
+ top: targetElement.offsetTop - 80,
808
+ behavior: 'smooth'
809
+ });
810
+ }
811
+ });
812
+ });
813
+
814
+ // Testimonial slider
815
+ const sliderControls = document.querySelectorAll('.slider-control');
816
+ const testimonials = document.querySelectorAll('.testimonial');
817
+
818
+ sliderControls.forEach((control, index) => {
819
+ control.addEventListener('click', () => {
820
+ // Remove active class from all controls
821
+ sliderControls.forEach(c => c.classList.remove('active'));
822
+ // Add active class to clicked control
823
+ control.classList.add('active');
824
+
825
+ // Hide all testimonials
826
+ testimonials.forEach(t => t.style.display = 'none');
827
+ // Show selected testimonial
828
+ testimonials[index].style.display = 'block';
829
+ });
830
+ });
831
+
832
+ // Intersection Observer for fade-in animations
833
+ const observerOptions = {
834
+ threshold: 0.1,
835
+ rootMargin: '0px 0px -50px 0px'
836
+ };
837
+
838
+ const observer = new IntersectionObserver((entries) => {
839
+ entries.forEach(entry => {
840
+ if (entry.isIntersecting) {
841
+ entry.target.classList.add('fade-in');
842
+ }
843
+ });
844
+ }, observerOptions);
845
+
846
+ // Observe all elements with fade-in class
847
+ document.querySelectorAll('.fade-in').forEach(el => {
848
+ observer.observe(el);
849
+ });
850
+
851
+ // Search functionality
852
+ const searchInput = document.querySelector('.search-input');
853
+ const searchButton = document.querySelector('.search-button');
854
+
855
+ searchButton.addEventListener('click', () => {
856
+ const searchTerm = searchInput.value.trim();
857
+ if (searchTerm) {
858
+ alert(`Searching for: ${searchTerm}`);
859
+ // In a real app, this would filter restaurants or redirect to search results
860
+ }
861
+ });
862
+
863
+ searchInput.addEventListener('keypress', (e) => {
864
+ if (e.key === 'Enter') {
865
+ searchButton.click();
866
+ }
867
+ });
868
+ </script>
869
+ </body>
870
+ </html>