Hugging Face's logo

Spaces:
akhaliq
/
anycoder-coffee-shop
Running

App Files Community
akhaliq HF Staff commited on
Commit
f2deabe
·
verified ·
1 Parent(s): 06b57db

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +50 -855
index.html CHANGED
@@ -3,901 +3,96 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Anycoder Coffee Shop</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: #6F4E37;
11
- --secondary: #8B4513;
12
- --accent: #D2691E;
13
- --light: #F5F5DC;
14
- --dark: #3E2723;
15
- --text: #212121;
16
- --text-light: #FFFFFF;
17
- --shadow: 0 4px 12px 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
- color: var(--text);
30
- background-color: var(--light);
31
- line-height: 1.6;
32
- }
33
-
34
- .container {
35
- width: 90%;
36
- max-width: 1200px;
37
- margin: 0 auto;
38
- }
39
-
40
- /* Header Styles */
41
- header {
42
- background-color: var(--primary);
43
- color: var(--text-light);
44
- padding: 1rem 0;
45
- position: sticky;
46
- top: 0;
47
- z-index: 100;
48
- box-shadow: var(--shadow);
49
- }
50
-
51
- .header-container {
52
- display: flex;
53
- justify-content: space-between;
54
- align-items: center;
55
- }
56
-
57
- .logo {
58
- display: flex;
59
- align-items: center;
60
- gap: 0.5rem;
61
- font-size: 1.8rem;
62
- font-weight: 700;
63
- }
64
-
65
- .logo i {
66
- color: var(--accent);
67
- }
68
-
69
- nav ul {
70
- display: flex;
71
- list-style: none;
72
- gap: 2rem;
73
- }
74
-
75
- nav a {
76
- color: var(--text-light);
77
- text-decoration: none;
78
- font-weight: 500;
79
- transition: var(--transition);
80
- padding: 0.5rem 1rem;
81
- border-radius: 4px;
82
- }
83
-
84
- nav a:hover {
85
- background-color: var(--secondary);
86
- }
87
-
88
- .mobile-menu-btn {
89
- display: none;
90
- background: none;
91
- border: none;
92
- color: var(--text-light);
93
- font-size: 1.5rem;
94
- cursor: pointer;
95
- }
96
-
97
- /* Hero Section */
98
- .hero {
99
- background: linear-gradient(rgba(62, 39, 35, 0.7), rgba(62, 39, 35, 0.7)),
100
- url('https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80');
101
- background-size: cover;
102
- background-position: center;
103
- height: 80vh;
104
- display: flex;
105
- align-items: center;
106
- justify-content: center;
107
- text-align: center;
108
- color: var(--text-light);
109
- }
110
-
111
- .hero-content {
112
- max-width: 800px;
113
- padding: 2rem;
114
- }
115
-
116
- .hero h1 {
117
- font-size: 3.5rem;
118
- margin-bottom: 1rem;
119
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
120
- }
121
-
122
- .hero p {
123
- font-size: 1.5rem;
124
- margin-bottom: 2rem;
125
- text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
126
- }
127
-
128
- .btn {
129
- display: inline-block;
130
- background-color: var(--accent);
131
- color: var(--text-light);
132
- padding: 1rem 2rem;
133
- border-radius: 30px;
134
- text-decoration: none;
135
- font-weight: 600;
136
- transition: var(--transition);
137
- border: none;
138
- cursor: pointer;
139
- font-size: 1rem;
140
- }
141
-
142
- .btn:hover {
143
- background-color: var(--secondary);
144
- transform: translateY(-3px);
145
- box-shadow: var(--shadow);
146
- }
147
-
148
- /* About Section */
149
- .about {
150
- padding: 5rem 0;
151
- background-color: var(--text-light);
152
- }
153
-
154
- .about-content {
155
- display: grid;
156
- grid-template-columns: 1fr 1fr;
157
- gap: 3rem;
158
- align-items: center;
159
- }
160
-
161
- .about-text h2 {
162
- font-size: 2.5rem;
163
- color: var(--dark);
164
- margin-bottom: 1.5rem;
165
- }
166
-
167
- .about-text p {
168
- margin-bottom: 1rem;
169
- font-size: 1.1rem;
170
- }
171
-
172
- .about-image {
173
- border-radius: 10px;
174
- overflow: hidden;
175
- box-shadow: var(--shadow);
176
- }
177
-
178
- .about-image img {
179
- width: 100%;
180
- height: auto;
181
- display: block;
182
- transition: var(--transition);
183
- }
184
-
185
- .about-image img:hover {
186
- transform: scale(1.05);
187
- }
188
-
189
- /* Menu Section */
190
- .menu {
191
- padding: 5rem 0;
192
- background-color: var(--light);
193
- }
194
-
195
- .section-title {
196
- text-align: center;
197
- font-size: 2.5rem;
198
- color: var(--dark);
199
- margin-bottom: 3rem;
200
- }
201
-
202
- .section-title::after {
203
- content: '';
204
- display: block;
205
- width: 100px;
206
- height: 4px;
207
- background-color: var(--accent);
208
- margin: 0.5rem auto;
209
- border-radius: 2px;
210
- }
211
-
212
- .menu-grid {
213
- display: grid;
214
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
215
- gap: 2rem;
216
- }
217
-
218
- .menu-item {
219
- background-color: var(--text-light);
220
- border-radius: 10px;
221
- overflow: hidden;
222
- box-shadow: var(--shadow);
223
- transition: var(--transition);
224
- }
225
-
226
- .menu-item:hover {
227
- transform: translateY(-10px);
228
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
229
- }
230
-
231
- .menu-item img {
232
- width: 100%;
233
- height: 200px;
234
- object-fit: cover;
235
- }
236
-
237
- .menu-item-content {
238
- padding: 1.5rem;
239
- }
240
-
241
- .menu-item h3 {
242
- font-size: 1.5rem;
243
- margin-bottom: 0.5rem;
244
- color: var(--dark);
245
- }
246
-
247
- .menu-item p {
248
- color: #666;
249
- margin-bottom: 1rem;
250
- }
251
-
252
- .price {
253
- font-weight: 700;
254
- color: var(--accent);
255
- font-size: 1.2rem;
256
- }
257
-
258
- /* Services Section */
259
- .services {
260
- padding: 5rem 0;
261
- background-color: var(--dark);
262
- color: var(--text-light);
263
- }
264
-
265
- .services-grid {
266
- display: grid;
267
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
268
- gap: 2rem;
269
- }
270
-
271
- .service-card {
272
- text-align: center;
273
- padding: 2rem;
274
- background-color: rgba(255, 255, 255, 0.1);
275
- border-radius: 10px;
276
- transition: var(--transition);
277
- }
278
-
279
- .service-card:hover {
280
- background-color: rgba(255, 255, 255, 0.2);
281
- transform: scale(1.05);
282
- }
283
-
284
- .service-icon {
285
- font-size: 3rem;
286
- color: var(--accent);
287
- margin-bottom: 1rem;
288
- }
289
-
290
- .service-card h3 {
291
- font-size: 1.5rem;
292
- margin-bottom: 1rem;
293
- }
294
-
295
- /* Testimonials */
296
- .testimonials {
297
- padding: 5rem 0;
298
- background-color: var(--text-light);
299
- }
300
-
301
- .testimonials-container {
302
- max-width: 800px;
303
- margin: 0 auto;
304
- }
305
-
306
- .testimonial {
307
- background-color: var(--light);
308
- padding: 2rem;
309
- border-radius: 10px;
310
- box-shadow: var(--shadow);
311
- margin-bottom: 2rem;
312
- position: relative;
313
- }
314
-
315
- .testimonial::before {
316
- content: '"';
317
- font-size: 5rem;
318
- position: absolute;
319
- top: -20px;
320
- left: 10px;
321
- color: var(--accent);
322
- opacity: 0.2;
323
- font-family: Georgia, serif;
324
- }
325
-
326
- .testimonial p {
327
- font-style: italic;
328
- margin-bottom: 1rem;
329
- }
330
-
331
- .customer {
332
- display: flex;
333
- align-items: center;
334
- gap: 1rem;
335
- }
336
-
337
- .customer img {
338
- width: 60px;
339
- height: 60px;
340
- border-radius: 50%;
341
- object-fit: cover;
342
- }
343
-
344
- .customer-info h4 {
345
- margin-bottom: 0.2rem;
346
- }
347
-
348
- .rating {
349
- color: var(--accent);
350
- }
351
-
352
- /* Contact Section */
353
- .contact {
354
- padding: 5rem 0;
355
- background-color: var(--light);
356
- }
357
-
358
- .contact-container {
359
- display: grid;
360
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
361
- gap: 3rem;
362
- }
363
-
364
- .contact-info h3 {
365
- font-size: 1.8rem;
366
- margin-bottom: 1.5rem;
367
- color: var(--dark);
368
- }
369
-
370
- .contact-detail {
371
- display: flex;
372
- align-items: flex-start;
373
- gap: 1rem;
374
- margin-bottom: 1.5rem;
375
- }
376
-
377
- .contact-icon {
378
- font-size: 1.5rem;
379
- color: var(--accent);
380
- min-width: 40px;
381
- }
382
-
383
- .contact-form input,
384
- .contact-form textarea {
385
- width: 100%;
386
- padding: 0.8rem;
387
- margin-bottom: 1rem;
388
- border: 1px solid #ddd;
389
- border-radius: 5px;
390
- font-family: inherit;
391
- }
392
-
393
- .contact-form textarea {
394
- height: 150px;
395
- resize: vertical;
396
- }
397
-
398
- /* Footer */
399
- footer {
400
- background-color: var(--primary);
401
- color: var(--text-light);
402
- padding: 3rem 0 1.5rem;
403
- }
404
-
405
- .footer-container {
406
- display: grid;
407
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
408
- gap: 2rem;
409
- margin-bottom: 2rem;
410
- }
411
-
412
- .footer-section h4 {
413
- font-size: 1.3rem;
414
- margin-bottom: 1rem;
415
- position: relative;
416
- padding-bottom: 0.5rem;
417
- }
418
-
419
- .footer-section h4::after {
420
- content: '';
421
- position: absolute;
422
- bottom: 0;
423
- left: 0;
424
- width: 50px;
425
- height: 2px;
426
- background-color: var(--accent);
427
- }
428
-
429
- .footer-section ul {
430
- list-style: none;
431
- }
432
-
433
- .footer-section ul li {
434
- margin-bottom: 0.5rem;
435
- }
436
-
437
- .footer-section a {
438
- color: var(--text-light);
439
- text-decoration: none;
440
- transition: var(--transition);
441
- }
442
-
443
- .footer-section a:hover {
444
- color: var(--accent);
445
- }
446
-
447
- .social-links {
448
- display: flex;
449
- gap: 1rem;
450
- margin-top: 1rem;
451
- }
452
-
453
- .social-links a {
454
- display: inline-flex;
455
- align-items: center;
456
- justify-content: center;
457
- width: 40px;
458
- height: 40px;
459
- background-color: var(--secondary);
460
- border-radius: 50%;
461
- transition: var(--transition);
462
- }
463
-
464
- .social-links a:hover {
465
- background-color: var(--accent);
466
- transform: translateY(-3px);
467
- }
468
-
469
- .copyright {
470
- text-align: center;
471
- padding-top: 1.5rem;
472
- border-top: 1px solid rgba(255, 255, 255, 0.1);
473
- }
474
-
475
- /* Responsive Design */
476
- @media (max-width: 768px) {
477
- .header-container {
478
- flex-wrap: wrap;
479
- }
480
-
481
- nav ul {
482
- gap: 1rem;
483
- flex-wrap: wrap;
484
- justify-content: center;
485
- width: 100%;
486
- margin-top: 1rem;
487
- }
488
-
489
- .hero h1 {
490
- font-size: 2.5rem;
491
- }
492
-
493
- .hero p {
494
- font-size: 1.2rem;
495
- }
496
-
497
- .about-content {
498
- grid-template-columns: 1fr;
499
- gap: 2rem;
500
- }
501
-
502
- .about-image {
503
- order: -1;
504
- }
505
- }
506
-
507
- @media (max-width: 576px) {
508
- .mobile-menu-btn {
509
- display: block;
510
- }
511
-
512
- nav ul {
513
- display: none;
514
- flex-direction: column;
515
- gap: 0.5rem;
516
- width: 100%;
517
- background-color: var(--secondary);
518
- padding: 1rem;
519
- border-radius: 5px;
520
- position: absolute;
521
- top: 100%;
522
- left: 0;
523
- box-shadow: var(--shadow);
524
- }
525
-
526
- nav ul.active {
527
- display: flex;
528
- }
529
-
530
- .hero {
531
- height: 60vh;
532
- }
533
-
534
- .hero h1 {
535
- font-size: 2rem;
536
- }
537
-
538
- .section-title {
539
- font-size: 2rem;
540
- }
541
- }
542
  </style>
543
  </head>
544
  <body>
545
- <!-- Header -->
546
  <header>
547
- <div class="container header-container">
548
- <div class="logo">
549
- <i class="fas fa-mug-hot"></i>
550
- <span>Anycoder Coffee</span>
551
- </div>
552
- <button class="mobile-menu-btn">
553
- <i class="fas fa-bars"></i>
554
- </button>
555
- <nav>
556
- <ul>
557
- <li><a href="#home">Home</a></li>
558
- <li><a href="#about">About</a></li>
559
- <li><a href="#menu">Menu</a></li>
560
- <li><a href="#services">Services</a></li>
561
- <li><a href="#testimonials">Testimonials</a></li>
562
- <li><a href="#contact">Contact</a></li>
563
- </ul>
564
- </nav>
565
- </div>
566
  </header>
567
 
568
- <!-- Hero Section -->
569
- <section class="hero" id="home">
570
  <div class="hero-content">
571
- <h1>Experience the Perfect Brew</h1>
572
- <p>Where coding passion meets coffee excellence. Fuel your creativity with our premium selections.</p>
573
  <a href="#menu" class="btn">Explore Our Menu</a>
574
  </div>
575
  </section>
576
 
577
- <!-- About Section -->
578
- <section class="about" id="about">
579
- <div class="container about-content">
580
- <div class="about-text">
581
- <h2>About Anycoder Coffee</h2>
582
- <p>Anycoder Coffee was born from the intersection of two passions: exceptional coffee and the art of coding. We understand that every great project starts with a great cup of coffee, and we're here to fuel your creativity.</p>
583
- <p>Our baristas are trained to perfection, bringing the same precision to your cup that you bring to your code. We source our beans directly from sustainable farms, ensuring quality from farm to cup.</p>
584
- <p>Whether you're debugging an algorithm or bringing a new app to life, our cozy environment and premium coffee will provide the perfect backdrop for your coding sessions.</p>
585
- <a href="#services" class="btn">Our Services</a>
586
- </div>
587
- <div class="about-image">
588
- <video controls style="max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0;"><source src="file:///tmp/anycoder_videos/b22e028d-08d1-4d12-8837-5f4e84cf099c.mp4" type="video/mp4" />Your browser does not support the video tag.</video>
589
- </div>
590
- </div>
591
- </section>
592
 
593
- <!-- Menu Section -->
594
  <section class="menu" id="menu">
595
  <div class="container">
596
- <h2 class="section-title">Our Coffee Menu</h2>
597
- <div class="menu-grid">
598
- <div class="menu-item">
599
- <img src="https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Espresso">
600
- <div class="menu-item-content">
601
- <h3>Classic Espresso</h3>
602
- <p>Strong, rich, and bold - our signature espresso blend crafted to perfection</p>
603
- <div class="price">$3.50</div>
604
- </div>
605
- </div>
606
- <div class="menu-item">
607
- <img src="https://images.unsplash.com/photo-1505253668822-4d16ac0907a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Cappuccino">
608
- <div class="menu-item-content">
609
- <h3>Coder's Cappuccino</h3>
610
- <p>Smooth espresso layered with perfectly frothed milk, topped with cocoa</p>
611
- <div class="price">$4.75</div>
612
- </div>
613
- </div>
614
- <div class="menu-item">
615
- <img src="https://images.unsplash.com/photo-1561040046-025d87f779a7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Latte">
616
- <div class="menu-item-content">
617
- <h3>Developer's Latte</h3>
618
- <p>Delicate balance of espresso and steamed milk with vanilla notes</p>
619
- <div class="price">$5.25</div>
620
- </div>
621
- </div>
622
  <div class="menu-item">
623
- <img src="https://images.unsplash.com/photo-1611854779393-1b2da9d0b4e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Cold Brew">
624
- <div class="menu-item-content">
625
- <h3>Code Cold Brew</h3>
626
- <p>Slow-steeped concentrate, perfect for long coding sessions</p>
627
- <div class="price">$4.50</div>
628
- </div>
629
  </div>
630
  <div class="menu-item">
631
- <img src="https://images.unsplash.com/photo-1525475042740-1fc916c6ecac?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Mocha">
632
- <div class="menu-item-content">
633
- <h3>Chocolate Mocha</h3>
634
- <p>Espresso with chocolate syrup and steamed milk, topped with whipped cream</p>
635
- <div class="price">$5.75</div>
636
- </div>
637
  </div>
638
  <div class="menu-item">
639
- <img src="https://images.unsplash.com/photo-1611078489935-0cb9de83b024?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Matcha">
640
- <div class="menu-item-content">
641
- <h3>Green Matcha</h3>
642
- <p>Premium ceremonial matcha whisked with steamed milk and honey</p>
643
- <div class="price">$5.00</div>
644
- </div>
645
  </div>
646
  </div>
647
  </div>
648
  </section>
649
 
650
- <!-- Services Section -->
651
- <section class="services" id="services">
652
  <div class="container">
653
- <h2 class="section-title">Our Services</h2>
654
- <div class="services-grid">
655
- <div class="service-card">
656
- <div class="service-icon">
657
- <i class="fas fa-laptop"></i>
658
- </div>
659
- <h3>Coder Workspace</h3>
660
- <p>High-speed WiFi, comfortable seating, and plenty of outlets for your devices</p>
661
- </div>
662
- <div class="service-card">
663
- <div class="service-icon">
664
- <i class="fas fa-coffee"></i>
665
- </div>
666
- <h3>Premium Coffee</h3>
667
- <p>Ethically sourced beans roasted fresh for the perfect coding fuel</p>
668
- </div>
669
- <div class="service-card">
670
- <div class="service-icon">
671
- <i class="fas fa-briefcase"></i>
672
- </div>
673
- <h3>Coding Events</h3>
674
- <p>Regular workshops, hackathons, and networking events for developers</p>
675
- </div>
676
- <div class="service-card">
677
- <div class="service-icon">
678
- <i class="fas fa-wifi"></i>
679
- </div>
680
- <h3>Free WiFi</h3>
681
- <p>Stay connected while enjoying your favorite coffee blends</p>
682
- </div>
683
- </div>
684
- </div>
685
- </section>
686
-
687
- <!-- Testimonials -->
688
- <section class="testimonials" id="testimonials">
689
- <div class="container">
690
- <h2 class="section-title">What Our Customers Say</h2>
691
- <div class="testimonials-container">
692
- <div class="testimonial">
693
- <p>"The perfect spot to code with a great cup of coffee. The atmosphere here helps me focus better than anywhere else. Highly recommended for fellow developers!"</p>
694
- <div class="customer">
695
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer">
696
- <div class="customer-info">
697
- <h4>Alex Johnson</h4>
698
- <p>Full Stack Developer</p>
699
- <div class="rating">
700
- <i class="fas fa-star"></i>
701
- <i class="fas fa-star"></i>
702
- <i class="fas fa-star"></i>
703
- <i class="fas fa-star"></i>
704
- <i class="fas fa-star"></i>
705
- </div>
706
- </div>
707
- </div>
708
- </div>
709
- <div class="testimonial">
710
- <p>"Anycoder Coffee is more than just a cafe. It's like a community hub for coders. The staff understands the developer lifestyle and really cares about their customers."</p>
711
- <div class="customer">
712
- <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer">
713
- <div class="customer-info">
714
- <h4>Sarah Williams</h4>
715
- <p>UX Designer</p>
716
- <div class="rating">
717
- <i class="fas fa-star"></i>
718
- <i class="fas fa-star"></i>
719
- <i class="fas fa-star"></i>
720
- <i class="fas fa-star"></i>
721
- <i class="fas fa-star-half-alt"></i>
722
- </div>
723
- </div>
724
- </div>
725
- </div>
726
- <div class="testimonial">
727
- <p>"I've been coming here for two years now. The cold brew is my go-to fuel for marathon coding sessions. The ambiance always sparks creativity in me."</p>
728
- <div class="customer">
729
- <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Customer">
730
- <div class="customer-info">
731
- <h4>Michael Chen</h4>
732
- <p>Software Engineer</p>
733
- <div class="rating">
734
- <i class="fas fa-star"></i>
735
- <i class="fas fa-star"></i>
736
- <i class="fas fa-star"></i>
737
- <i class="fas fa-star"></i>
738
- <i class="fas fa-star"></i>
739
- </div>
740
- </div>
741
- </div>
742
- </div>
743
- </div>
744
  </div>
745
  </section>
746
 
747
- <!-- Contact Section -->
748
- <section class="contact" id="contact">
749
- <div class="container">
750
- <h2 class="section-title">Contact Us</h2>
751
- <div class="contact-container">
752
- <div class="contact-info">
753
- <h3>Get In Touch</h3>
754
- <div class="contact-detail">
755
- <div class="contact-icon">
756
- <i class="fas fa-map-marker-alt"></i>
757
- </div>
758
- <div>
759
- <h4>Location</h4>
760
- <p>123 Code Street, Silicon Valley, CA 94043</p>
761
- </div>
762
- </div>
763
- <div class="contact-detail">
764
- <div class="contact-icon">
765
- <i class="fas fa-phone"></i>
766
- </div>
767
- <div>
768
- <h4>Phone</h4>
769
- <p>(123) 456-7890</p>
770
- </div>
771
- </div>
772
- <div class="contact-detail">
773
- <div class="contact-icon">
774
- <i class="fas fa-envelope"></i>
775
- </div>
776
- <div>
777
- <h4>Email</h4>
778
- <p>[email protected]</p>
779
- </div>
780
- </div>
781
- <div class="contact-detail">
782
- <div class="contact-icon">
783
- <i class="fas fa-clock"></i>
784
- </div>
785
- <div>
786
- <h4>Hours</h4>
787
- <p>Monday-Friday: 7am - 10pm</p>
788
- <p>Saturday-Sunday: 8am - 9pm</p>
789
- </div>
790
- </div>
791
- </div>
792
- <div class="contact-form">
793
- <h3>Send a Message</h3>
794
- <form>
795
- <input type="text" placeholder="Your Name" required>
796
- <input type="email" placeholder="Your Email" required>
797
- <input type="text" placeholder="Subject">
798
- <textarea placeholder="Your Message" required></textarea>
799
- <button type="submit" class="btn">Send Message</button>
800
- </form>
801
- </div>
802
- </div>
803
- </div>
804
- </section>
805
-
806
- <!-- Footer -->
807
  <footer>
808
  <div class="container">
809
- <div class="footer-container">
810
- <div class="footer-section">
811
- <h4>Anycoder Coffee</h4>
812
- <p>Where every coder finds their perfect cup and coding inspiration.</p>
813
- <div class="social-links">
814
- <a href="#"><i class="fab fa-facebook-f"></i></a>
815
- <a href="#"><i class="fab fa-instagram"></i></a>
816
- <a href="#"><i class="fab fa-twitter"></i></a>
817
- <a href="#"><i class="fab fa-linkedin-in"></i></a>
818
- </div>
819
- </div>
820
- <div class="footer-section">
821
- <h4>Quick Links</h4>
822
- <ul>
823
- <li><a href="#home">Home</a></li>
824
- <li><a href="#about">About</a></li>
825
- <li><a href="#menu">Menu</a></li>
826
- <li><a href="#services">Services</a></li>
827
- <li><a href="#contact">Contact</a></li>
828
- </ul>
829
- </div>
830
- <div class="footer-section">
831
- <h4>Popular Items</h4>
832
- <ul>
833
- <li><a href="#">Classic Espresso</a></li>
834
- <li><a href="#">Developer's Latte</a></li>
835
- <li><a href="#">Code Cold Brew</a></li>
836
- <li><a href="#">Chocolate Mocha</a></li>
837
- <li><a href="#">Green Matcha</a></li>
838
- </ul>
839
- </div>
840
- <div class="footer-section">
841
- <h4>Newsletter</h4>
842
- <p>Subscribe to get updates on special events and promotions.</p>
843
- <form>
844
- <input type="email" placeholder="Your Email" style="width: 100%; padding: 0.8rem; margin: 0.5rem 0; border-radius: 5px; border: none;">
845
- <button type="submit" class="btn" style="width: 100%;">Subscribe</button>
846
- </form>
847
- </div>
848
- </div>
849
- <div class="copyright">
850
- <p>&copy; 2023 Anycoder Coffee Shop. All rights reserved.</p>
851
- </div>
852
  </div>
853
  </footer>
854
 
855
  <script>
856
- // Mobile menu toggle
857
- const menuBtn = document.querySelector('.mobile-menu-btn');
858
- const navMenu = document.querySelector('nav ul');
859
-
860
- menuBtn.addEventListener('click', () => {
861
- navMenu.classList.toggle('active');
862
- });
863
-
864
- // Smooth scrolling for navigation links
865
- document.querySelectorAll('nav a').forEach(anchor => {
866
- anchor.addEventListener('click', function(e) {
867
  e.preventDefault();
868
- const targetId = this.getAttribute('href');
869
- const targetElement = document.querySelector(targetId);
870
-
871
- window.scrollTo({
872
- top: targetElement.offsetTop - 80,
873
  behavior: 'smooth'
874
  });
875
-
876
- // Close mobile menu after clicking
877
- navMenu.classList.remove('active');
878
  });
879
  });
880
-
881
- // Add animation to menu items on scroll
882
- const menuItems = document.querySelectorAll('.menu-item');
883
-
884
- const observer = new IntersectionObserver((entries) => {
885
- entries.forEach(entry => {
886
- if (entry.isIntersecting) {
887
- entry.target.style.opacity = 1;
888
- entry.target.style.transform = 'translateY(0)';
889
- }
890
- });
891
- }, {
892
- threshold: 0.1
893
- });
894
-
895
- menuItems.forEach(item => {
896
- item.style.opacity = 0;
897
- item.style.transform = 'translateY(20px)';
898
- item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
899
- observer.observe(item);
900
- });
901
  </script>
902
  </body>
903
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Anycoder Coffee - Premium coffee for developers">
7
+ <title>Anycoder Coffee</title>
8
  <style>
9
+ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
10
+ body { color: #333; line-height: 1.6; }
11
+ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
12
+ header { background: linear-gradient(135deg, #3e2723, #5d4037); color: white; padding: 1rem 0; position: sticky; top: 0; z-index: 100; }
13
+ nav { display: flex; justify-content: space-between; align-items: center; }
14
+ .logo { font-size: 1.8rem; font-weight: bold; }
15
+ .hero { background: url('https://picsum.photos/seed/coffee/1200/600.jpg') no-repeat center center/cover; height: 70vh; display: flex; align-items: center; color: white; text-align: center; }
16
+ .hero-content { max-width: 700px; margin: 0 auto; padding: 2rem; background: rgba(0,0,0,0.5); border-radius: 10px; }
17
+ .hero h1 { font-size: 3rem; margin-bottom: 1rem; }
18
+ .btn { display: inline-block; background: #795548; color: white; padding: 0.8rem 1.5rem; border-radius: 5px; text-decoration: none; margin-top: 1rem; transition: background 0.3s; }
19
+ .btn:hover { background: #5d4037; }
20
+ .menu, .contact { padding: 4rem 0; }
21
+ .menu h2, .contact h2 { text-align: center; margin-bottom: 2rem; color: #5d4037; }
22
+ .menu-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
23
+ .menu-item { background: #f5f5f5; padding: 1.5rem; border-radius: 8px; text-align: center; transition: transform 0.3s; }
24
+ .menu-item:hover { transform: translateY(-10px); }
25
+ .menu-item h3 { margin-bottom: 1rem; color: #3e2723; }
26
+ footer { background: #3e2723; color: white; text-align: center; padding: 2rem 0; }
27
+ @media (max-width: 768px) { .hero h1 { font-size: 2rem; } }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  </style>
29
  </head>
30
  <body>
 
31
  <header>
32
+ <nav class="container">
33
+ <div class="logo">☕ Anycoder Coffee</div>
34
+ <div>Crafted for Code Lovers</div>
35
+ </nav>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  </header>
37
 
38
+ <section class="hero">
 
39
  <div class="hero-content">
40
+ <h1>Fuel Your Code, Ignite Your Ideas</h1>
41
+ <p>Premium coffee blends designed specifically for developers.</p>
42
  <a href="#menu" class="btn">Explore Our Menu</a>
43
  </div>
44
  </section>
45
 
46
+ <div class="container" style="margin-top: 2rem; text-align: center;">
47
+ <video controls autoplay muted loop playsinline style="max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; display: block;" onloadstart="this.style.backgroundColor='#f0f0f0'" onerror="this.style.display='none'; console.error('Video failed to load')"><source src="https://huggingface.co/datasets/akhaliq/anycoder-media/resolve/main/video/20250824_173905_8f458ae2_text_to_video_result.mp4" type="video/mp4" /><p style="text-align: center; color: #666;">Your browser does not support the video tag.</p></video>
48
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
49
 
 
50
  <section class="menu" id="menu">
51
  <div class="container">
52
+ <h2>Our Signature Blends</h2>
53
+ <div class="menu-items">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  <div class="menu-item">
55
+ <h3>☕ Debugging Dark</h3>
56
+ <p>Intense and focused, perfect for long debugging sessions.</p>
57
+ <strong>$4.50</strong>
 
 
 
58
  </div>
59
  <div class="menu-item">
60
+ <h3>☕ Java Jam</h3>
61
+ <p>Smooth and balanced, ideal for coding marathons.</p>
62
+ <strong>$4.75</strong>
 
 
 
63
  </div>
64
  <div class="menu-item">
65
+ <h3>☕ Python's Pride</h3>
66
+ <p>Simple yet elegant, with clean flavors that never disappoint.</p>
67
+ <strong>$4.25</strong>
 
 
 
68
  </div>
69
  </div>
70
  </div>
71
  </section>
72
 
73
+ <section class="contact">
 
74
  <div class="container">
75
+ <h2>Visit Us</h2>
76
+ <p style="text-align: center;">123 Tech Street, Silicon Valley, CA 94025</p>
77
+ <p style="text-align: center;">Mon-Fri: 7AM-7PM | Sat-Sun: 8AM-5PM</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
  </div>
79
  </section>
80
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
81
  <footer>
82
  <div class="container">
83
+ <p>&copy; 2023 Anycoder Coffee. All rights reserved.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
84
  </div>
85
  </footer>
86
 
87
  <script>
88
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
89
+ anchor.addEventListener('click', function (e) {
 
 
 
 
 
 
 
 
 
90
  e.preventDefault();
91
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
 
 
 
 
92
  behavior: 'smooth'
93
  });
 
 
 
94
  });
95
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
96
  </script>
97
  </body>
98
  </html>