Hugging Face's logo

Spaces:
akhaliq
/
anycoder-coffee-multi
Running

App Files Community
akhaliq HF Staff commited on
Commit
61bec0b
·
verified ·
1 Parent(s): e03f1c4

Upload folder using huggingface_hub

Browse files
Files changed (5) hide show
  1. about.html +114 -0
  2. assets/css/styles.css +548 -0
  3. assets/js/main.js +114 -0
  4. contact.html +141 -0
  5. index.html +121 -19
about.html ADDED
@@ -0,0 +1,114 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <meta name="description" content="Learn about AnyCoder Coffee's story and mission to serve the developer community">
7
+ <title>About Us - AnyCoder Coffee</title>
8
+ <link rel="stylesheet" href="assets/css/styles.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
12
+ </head>
13
+ <body>
14
+ <header>
15
+ <div class="container">
16
+ <div class="logo">
17
+ <h1><span class="logo-code">&lt;/&gt;</span> AnyCoder Coffee</h1>
18
+ </div>
19
+ <nav>
20
+ <button class="mobile-menu-toggle" aria-label="Toggle navigation menu">
21
+ <span></span>
22
+ <span></span>
23
+ <span></span>
24
+ </button>
25
+ <ul class="nav-menu">
26
+ <li><a href="index.html">Home</a></li>
27
+ <li><a href="about.html" class="active">About</a></li>
28
+ <li><a href="contact.html">Contact</a></li>
29
+ </ul>
30
+ </nav>
31
+ </div>
32
+ </header>
33
+
34
+ <main>
35
+ <section class="page-hero">
36
+ <div class="container">
37
+ <h1>Our Story</h1>
38
+ <p>From a developer's dream to a community hub</p>
39
+ </div>
40
+ </section>
41
+
42
+ <section class="about-content">
43
+ <div class="container">
44
+ <div class="about-grid">
45
+ <div class="about-text">
46
+ <h2>Born from Late-Night Coding Sessions</h2>
47
+ <p>AnyCoder Coffee was founded in 2018 by a group of developers who were tired of compromising between good coffee and productive workspaces. We wanted a place that understood the unique needs of programmers - fast internet, plenty of power outlets, comfortable seating, and most importantly, exceptional coffee.</p>
48
+
49
+ <p>What started as a small café with just a few tables has grown into a thriving community space where developers gather to work, collaborate, and share ideas. We've hosted hackathons, meetups, and coding workshops, becoming a central hub for the local tech community.</p>
50
+
51
+ <h3>Our Mission</h3>
52
+ <p>To create the perfect environment where developers can focus, create, and connect over great coffee. We believe that the right atmosphere and brew can turn good code into great software.</p>
53
+ </div>
54
+ <div class="about-image">
55
+ <div class="image-placeholder">
56
+ <span>Coffee & Coding Space</span>
57
+ </div>
58
+ </div>
59
+ </div>
60
+
61
+ <div class="values-section">
62
+ <h2>Our Values</h2>
63
+ <div class="values-grid">
64
+ <div class="value-item">
65
+ <h3>Quality</h3>
66
+ <p>We source only the finest ethically-grown beans and maintain rigorous brewing standards.</p>
67
+ </div>
68
+ <div class="value-item">
69
+ <h3>Community</h3>
70
+ <p>We foster connections between developers through events, collaborations, and shared spaces.</p>
71
+ </div>
72
+ <div class="value-item">
73
+ <h3>Innovation</h3>
74
+ <p>We continuously improve our space, services, and offerings to meet developers' evolving needs.</p>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </section>
80
+ </main>
81
+
82
+ <footer>
83
+ <div class="container">
84
+ <div class="footer-content">
85
+ <div class="footer-section">
86
+ <h3>AnyCoder Coffee</h3>
87
+ <p>Where code meets coffee perfection</p>
88
+ </div>
89
+ <div class="footer-section">
90
+ <h4>Connect</h4>
91
+ <ul>
92
+ <li><a href="#">GitHub</a></li>
93
+ <li><a href="#">Twitter</a></li>
94
+ <li><a href="#">LinkedIn</a></li>
95
+ </ul>
96
+ </div>
97
+ <div class="footer-section">
98
+ <h4>Resources</h4>
99
+ <ul>
100
+ <li><a href="#">Tech Events</a></li>
101
+ <li><a href="#">Developer Blog</a></li>
102
+ <li><a href="#">Coffee Recipes</a></li>
103
+ </ul>
104
+ </div>
105
+ </div>
106
+ <div class="footer-bottom">
107
+ <p>&copy; 2023 AnyCoder Coffee. All rights reserved.</p>
108
+ </div>
109
+ </div>
110
+ </footer>
111
+
112
+ <script src="assets/js/main.js"></script>
113
+ </body>
114
+ </html>
assets/css/styles.css ADDED
@@ -0,0 +1,548 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Reset and base styles */
2
+ * {
3
+ margin: 0;
4
+ padding: 0;
5
+ box-sizing: border-box;
6
+ }
7
+
8
+ :root {
9
+ --primary-color: #2d3748;
10
+ --secondary-color: #e2e8f0;
11
+ --accent-color: #3182ce;
12
+ --text-color: #2d3748;
13
+ --light-text: #718096;
14
+ --background: #ffffff;
15
+ --code-bg: #f7fafc;
16
+ --border-color: #e2e8f0;
17
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
18
+ --transition: all 0.3s ease;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Source Sans Pro', sans-serif;
23
+ line-height: 1.6;
24
+ color: var(--text-color);
25
+ background-color: var(--background);
26
+ }
27
+
28
+ .container {
29
+ width: 90%;
30
+ max-width: 1200px;
31
+ margin: 0 auto;
32
+ padding: 0 20px;
33
+ }
34
+
35
+ /* Typography */
36
+ h1, h2, h3, h4, h5, h6 {
37
+ font-family: 'Source Code Pro', monospace;
38
+ font-weight: 600;
39
+ margin-bottom: 1rem;
40
+ line-height: 1.3;
41
+ }
42
+
43
+ h1 {
44
+ font-size: 2.5rem;
45
+ }
46
+
47
+ h2 {
48
+ font-size: 2rem;
49
+ }
50
+
51
+ h3 {
52
+ font-size: 1.5rem;
53
+ }
54
+
55
+ p {
56
+ margin-bottom: 1rem;
57
+ }
58
+
59
+ a {
60
+ color: var(--accent-color);
61
+ text-decoration: none;
62
+ transition: var(--transition);
63
+ }
64
+
65
+ a:hover {
66
+ color: #2c5282;
67
+ }
68
+
69
+ /* Header and Navigation */
70
+ header {
71
+ background-color: var(--background);
72
+ box-shadow: var(--shadow);
73
+ position: sticky;
74
+ top: 0;
75
+ z-index: 100;
76
+ }
77
+
78
+ header .container {
79
+ display: flex;
80
+ justify-content: space-between;
81
+ align-items: center;
82
+ padding: 1rem 20px;
83
+ }
84
+
85
+ .logo h1 {
86
+ font-size: 1.5rem;
87
+ margin: 0;
88
+ display: flex;
89
+ align-items: center;
90
+ }
91
+
92
+ .logo-code {
93
+ color: var(--accent-color);
94
+ margin-right: 0.5rem;
95
+ }
96
+
97
+ nav {
98
+ position: relative;
99
+ }
100
+
101
+ .nav-menu {
102
+ display: flex;
103
+ list-style: none;
104
+ gap: 2rem;
105
+ }
106
+
107
+ .nav-menu a {
108
+ color: var(--text-color);
109
+ font-weight: 600;
110
+ padding: 0.5rem 0;
111
+ position: relative;
112
+ }
113
+
114
+ .nav-menu a.active {
115
+ color: var(--accent-color);
116
+ }
117
+
118
+ .nav-menu a.active::after {
119
+ content: '';
120
+ position: absolute;
121
+ bottom: 0;
122
+ left: 0;
123
+ width: 100%;
124
+ height: 2px;
125
+ background-color: var(--accent-color);
126
+ }
127
+
128
+ .nav-menu a:hover {
129
+ color: var(--accent-color);
130
+ }
131
+
132
+ .mobile-menu-toggle {
133
+ display: none;
134
+ flex-direction: column;
135
+ background: none;
136
+ border: none;
137
+ cursor: pointer;
138
+ padding: 0.5rem;
139
+ }
140
+
141
+ .mobile-menu-toggle span {
142
+ width: 25px;
143
+ height: 3px;
144
+ background-color: var(--text-color);
145
+ margin: 3px 0;
146
+ transition: var(--transition);
147
+ }
148
+
149
+ /* Buttons */
150
+ .btn, .btn-outline {
151
+ display: inline-block;
152
+ padding: 0.75rem 1.5rem;
153
+ border-radius: 4px;
154
+ font-weight: 600;
155
+ text-align: center;
156
+ transition: var(--transition);
157
+ cursor: pointer;
158
+ }
159
+
160
+ .btn {
161
+ background-color: var(--accent-color);
162
+ color: white;
163
+ border: none;
164
+ }
165
+
166
+ .btn:hover {
167
+ background-color: #2c5282;
168
+ transform: translateY(-2px);
169
+ }
170
+
171
+ .btn-outline {
172
+ background-color: transparent;
173
+ color: var(--accent-color);
174
+ border: 2px solid var(--accent-color);
175
+ }
176
+
177
+ .btn-outline:hover {
178
+ background-color: var(--accent-color);
179
+ color: white;
180
+ }
181
+
182
+ /* Hero Section */
183
+ .hero {
184
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
185
+ color: white;
186
+ padding: 4rem 0;
187
+ text-align: center;
188
+ }
189
+
190
+ .hero-content h2 {
191
+ font-size: 2.5rem;
192
+ margin-bottom: 1rem;
193
+ }
194
+
195
+ .hero-content p {
196
+ font-size: 1.2rem;
197
+ margin-bottom: 2rem;
198
+ opacity: 0.9;
199
+ }
200
+
201
+ .page-hero {
202
+ background-color: var(--code-bg);
203
+ padding: 3rem 0;
204
+ text-align: center;
205
+ }
206
+
207
+ .page-hero h1 {
208
+ margin-bottom: 0.5rem;
209
+ }
210
+
211
+ .page-hero p {
212
+ color: var(--light-text);
213
+ font-size: 1.1rem;
214
+ }
215
+
216
+ /* Features Section */
217
+ .features {
218
+ padding: 4rem 0;
219
+ }
220
+
221
+ .features h2 {
222
+ text-align: center;
223
+ margin-bottom: 3rem;
224
+ }
225
+
226
+ .features-grid {
227
+ display: grid;
228
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
229
+ gap: 2rem;
230
+ }
231
+
232
+ .feature-card {
233
+ text-align: center;
234
+ padding: 2rem;
235
+ border-radius: 8px;
236
+ background-color: var(--background);
237
+ box-shadow: var(--shadow);
238
+ transition: var(--transition);
239
+ }
240
+
241
+ .feature-card:hover {
242
+ transform: translateY(-5px);
243
+ }
244
+
245
+ .feature-icon {
246
+ font-size: 3rem;
247
+ margin-bottom: 1rem;
248
+ }
249
+
250
+ /* Hours & Location */
251
+ .hours-location {
252
+ background-color: var(--code-bg);
253
+ padding: 4rem 0;
254
+ }
255
+
256
+ .hours-location-grid {
257
+ display: grid;
258
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
259
+ gap: 3rem;
260
+ }
261
+
262
+ .hours ul, .location p {
263
+ list-style: none;
264
+ margin-top: 1rem;
265
+ }
266
+
267
+ .hours li {
268
+ margin-bottom: 0.5rem;
269
+ display: flex;
270
+ justify-content: space-between;
271
+ }
272
+
273
+ .hours span {
274
+ font-weight: 600;
275
+ }
276
+
277
+ /* About Page */
278
+ .about-content {
279
+ padding: 4rem 0;
280
+ }
281
+
282
+ .about-grid {
283
+ display: grid;
284
+ grid-template-columns: 1fr;
285
+ gap: 3rem;
286
+ margin-bottom: 4rem;
287
+ }
288
+
289
+ .about-image .image-placeholder {
290
+ height: 300px;
291
+ background-color: var(--secondary-color);
292
+ border-radius: 8px;
293
+ display: flex;
294
+ align-items: center;
295
+ justify-content: center;
296
+ color: var(--light-text);
297
+ }
298
+
299
+ .values-section {
300
+ margin-top: 4rem;
301
+ }
302
+
303
+ .values-grid {
304
+ display: grid;
305
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
306
+ gap: 2rem;
307
+ margin-top: 2rem;
308
+ }
309
+
310
+ .value-item {
311
+ padding: 2rem;
312
+ background-color: var(--code-bg);
313
+ border-radius: 8px;
314
+ text-align: center;
315
+ }
316
+
317
+ .value-item h3 {
318
+ color: var(--accent-color);
319
+ margin-bottom: 1rem;
320
+ }
321
+
322
+ /* Contact Page */
323
+ .contact-content {
324
+ padding: 4rem 0;
325
+ }
326
+
327
+ .contact-grid {
328
+ display: grid;
329
+ grid-template-columns: 1fr;
330
+ gap: 3rem;
331
+ }
332
+
333
+ .contact-info h2 {
334
+ margin-bottom: 2rem;
335
+ }
336
+
337
+ .info-item {
338
+ margin-bottom: 2rem;
339
+ }
340
+
341
+ .info-item h3 {
342
+ color: var(--accent-color);
343
+ margin-bottom: 0.5rem;
344
+ }
345
+
346
+ .contact-form-container {
347
+ background-color: var(--code-bg);
348
+ padding: 2rem;
349
+ border-radius: 8px;
350
+ }
351
+
352
+ .contact-form {
353
+ display: grid;
354
+ gap: 1.5rem;
355
+ }
356
+
357
+ .form-group {
358
+ display: flex;
359
+ flex-direction: column;
360
+ }
361
+
362
+ .form-group label {
363
+ margin-bottom: 0.5rem;
364
+ font-weight: 600;
365
+ }
366
+
367
+ .form-group input,
368
+ .form-group select,
369
+ .form-group textarea {
370
+ padding: 0.75rem;
371
+ border: 1px solid var(--border-color);
372
+ border-radius: 4px;
373
+ font-family: inherit;
374
+ font-size: 1rem;
375
+ }
376
+
377
+ .form-group input:focus,
378
+ .form-group select:focus,
379
+ .form-group textarea:focus {
380
+ outline: none;
381
+ border-color: var(--accent-color);
382
+ box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
383
+ }
384
+
385
+ .form-message {
386
+ margin-top: 1rem;
387
+ padding: 1rem;
388
+ border-radius: 4px;
389
+ display: none;
390
+ }
391
+
392
+ .form-message.success {
393
+ background-color: #c6f6d5;
394
+ color: #2d7848;
395
+ display: block;
396
+ }
397
+
398
+ .form-message.error {
399
+ background-color: #fed7d7;
400
+ color: #c53030;
401
+ display: block;
402
+ }
403
+
404
+ .map-section {
405
+ padding: 4rem 0;
406
+ background-color: var(--secondary-color);
407
+ }
408
+
409
+ .map-section h2 {
410
+ text-align: center;
411
+ margin-bottom: 2rem;
412
+ }
413
+
414
+ .map-placeholder {
415
+ height: 300px;
416
+ background-color: var(--border-color);
417
+ border-radius: 8px;
418
+ display: flex;
419
+ flex-direction: column;
420
+ align-items: center;
421
+ justify-content: center;
422
+ color: var(--light-text);
423
+ }
424
+
425
+ /* Footer */
426
+ footer {
427
+ background-color: var(--primary-color);
428
+ color: white;
429
+ padding: 3rem 0 1rem;
430
+ }
431
+
432
+ .footer-content {
433
+ display: grid;
434
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
435
+ gap: 2rem;
436
+ margin-bottom: 2rem;
437
+ }
438
+
439
+ .footer-section h3,
440
+ .footer-section h4 {
441
+ color: white;
442
+ margin-bottom: 1rem;
443
+ }
444
+
445
+ .footer-section ul {
446
+ list-style: none;
447
+ }
448
+
449
+ .footer-section ul li {
450
+ margin-bottom: 0.5rem;
451
+ }
452
+
453
+ .footer-section a {
454
+ color: var(--secondary-color);
455
+ }
456
+
457
+ .footer-section a:hover {
458
+ color: white;
459
+ }
460
+
461
+ .footer-bottom {
462
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
463
+ padding-top: 1rem;
464
+ text-align: center;
465
+ font-size: 0.9rem;
466
+ color: var(--secondary-color);
467
+ }
468
+
469
+ /* Responsive Design */
470
+ @media (min-width: 768px) {
471
+ .about-grid {
472
+ grid-template-columns: 1fr 1fr;
473
+ }
474
+
475
+ .contact-grid {
476
+ grid-template-columns: 1fr 1fr;
477
+ }
478
+
479
+ h1 {
480
+ font-size: 3rem;
481
+ }
482
+
483
+ .hero-content h2 {
484
+ font-size: 3.5rem;
485
+ }
486
+ }
487
+
488
+ @media (max-width: 768px) {
489
+ .mobile-menu-toggle {
490
+ display: flex;
491
+ }
492
+
493
+ .nav-menu {
494
+ position: absolute;
495
+ top: 100%;
496
+ right: 0;
497
+ background-color: var(--background);
498
+ flex-direction: column;
499
+ width: 200px;
500
+ padding: 1rem;
501
+ box-shadow: var(--shadow);
502
+ border-radius: 4px;
503
+ display: none;
504
+ gap: 0;
505
+ }
506
+
507
+ .nav-menu.active {
508
+ display: flex;
509
+ }
510
+
511
+ .nav-menu li {
512
+ margin: 0.5rem 0;
513
+ }
514
+
515
+ header .container {
516
+ padding: 1rem;
517
+ }
518
+ }
519
+
520
+ /* Accessibility */
521
+ @media (prefers-reduced-motion: reduce) {
522
+ * {
523
+ transition: none;
524
+ }
525
+ }
526
+
527
+ button:focus,
528
+ input:focus,
529
+ select:focus,
530
+ textarea:focus {
531
+ outline: 2px solid var(--accent-color);
532
+ outline-offset: 2px;
533
+ }
534
+
535
+ .skip-to-content {
536
+ position: absolute;
537
+ top: -40px;
538
+ left: 0;
539
+ background: var(--accent-color);
540
+ color: white;
541
+ padding: 8px;
542
+ z-index: 1000;
543
+ transition: top 0.3s;
544
+ }
545
+
546
+ .skip-to-content:focus {
547
+ top: 0;
548
+ }
assets/js/main.js ADDED
@@ -0,0 +1,114 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Mobile menu toggle
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
4
+ const navMenu = document.querySelector('.nav-menu');
5
+
6
+ if (mobileMenuToggle && navMenu) {
7
+ mobileMenuToggle.addEventListener('click', function() {
8
+ navMenu.classList.toggle('active');
9
+ mobileMenuToggle.setAttribute('aria-expanded',
10
+ navMenu.classList.contains('active'));
11
+ });
12
+
13
+ // Close menu when clicking outside
14
+ document.addEventListener('click', function(event) {
15
+ if (!event.target.closest('nav') && navMenu.classList.contains('active')) {
16
+ navMenu.classList.remove('active');
17
+ mobileMenuToggle.setAttribute('aria-expanded', 'false');
18
+ }
19
+ });
20
+ }
21
+
22
+ // Contact form handling
23
+ const contactForm = document.getElementById('contactForm');
24
+ const formMessage = document.getElementById('formMessage');
25
+
26
+ if (contactForm && formMessage) {
27
+ contactForm.addEventListener('submit', function(e) {
28
+ e.preventDefault();
29
+
30
+ // Simple validation
31
+ const name = document.getElementById('name').value;
32
+ const email = document.getElementById('email').value;
33
+ const subject = document.getElementById('subject').value;
34
+ const message = document.getElementById('message').value;
35
+
36
+ if (!name || !email || !subject || !message) {
37
+ formMessage.textContent = 'Please fill in all fields.';
38
+ formMessage.className = 'form-message error';
39
+ return;
40
+ }
41
+
42
+ // Email validation
43
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
44
+ if (!emailRegex.test(email)) {
45
+ formMessage.textContent = 'Please enter a valid email address.';
46
+ formMessage.className = 'form-message error';
47
+ return;
48
+ }
49
+
50
+ // Simulate form submission
51
+ formMessage.textContent = 'Thank you for your message! We\'ll get back to you soon.';
52
+ formMessage.className = 'form-message success';
53
+
54
+ // Reset form
55
+ contactForm.reset();
56
+
57
+ // Clear message after 5 seconds
58
+ setTimeout(() => {
59
+ formMessage.textContent = '';
60
+ formMessage.className = 'form-message';
61
+ }, 5000);
62
+ });
63
+ }
64
+
65
+ // Smooth scrolling for anchor links
66
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
67
+ anchor.addEventListener('click', function(e) {
68
+ e.preventDefault();
69
+ const targetId = this.getAttribute('href');
70
+ if (targetId === '#') return;
71
+
72
+ const targetElement = document.querySelector(targetId);
73
+ if (targetElement) {
74
+ targetElement.scrollIntoView({
75
+ behavior: 'smooth',
76
+ block: 'start'
77
+ });
78
+ }
79
+ });
80
+ });
81
+
82
+ // Current page highlighting
83
+ const currentPage = location.pathname.split('/').pop();
84
+ const navLinks = document.querySelectorAll('.nav-menu a');
85
+
86
+ navLinks.forEach(link => {
87
+ const linkPage = link.getAttribute('href');
88
+ if (currentPage === linkPage || (currentPage === '' && linkPage === 'index.html')) {
89
+ link.classList.add('active');
90
+ } else {
91
+ link.classList.remove('active');
92
+ }
93
+ });
94
+
95
+ // Lazy loading for images (would be implemented with actual images)
96
+ if ('IntersectionObserver' in window) {
97
+ const lazyImages = document.querySelectorAll('img[data-src]');
98
+
99
+ const imageObserver = new IntersectionObserver((entries, observer) => {
100
+ entries.forEach(entry => {
101
+ if (entry.isIntersecting) {
102
+ const img = entry.target;
103
+ img.src = img.dataset.src;
104
+ img.classList.remove('lazy');
105
+ imageObserver.unobserve(img);
106
+ }
107
+ });
108
+ });
109
+
110
+ lazyImages.forEach(img => {
111
+ imageObserver.observe(img);
112
+ });
113
+ }
114
+ });
contact.html ADDED
@@ -0,0 +1,141 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <meta name="description" content="Get in touch with AnyCoder Coffee - reservations, events, and inquiries">
7
+ <title>Contact Us - AnyCoder Coffee</title>
8
+ <link rel="stylesheet" href="assets/css/styles.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
12
+ </head>
13
+ <body>
14
+ <header>
15
+ <div class="container">
16
+ <div class="logo">
17
+ <h1><span class="logo-code">&lt;/&gt;</span> AnyCoder Coffee</h1>
18
+ </div>
19
+ <nav>
20
+ <button class="mobile-menu-toggle" aria-label="Toggle navigation menu">
21
+ <span></span>
22
+ <span></span>
23
+ <span></span>
24
+ </button>
25
+ <ul class="nav-menu">
26
+ <li><a href="index.html">Home</a></li>
27
+ <li><a href="about.html">About</a></li>
28
+ <li><a href="contact.html" class="active">Contact</a></li>
29
+ </ul>
30
+ </nav>
31
+ </div>
32
+ </header>
33
+
34
+ <main>
35
+ <section class="page-hero">
36
+ <div class="container">
37
+ <h1>Get In Touch</h1>
38
+ <p>We'd love to hear from you</p>
39
+ </div>
40
+ </section>
41
+
42
+ <section class="contact-content">
43
+ <div class="container">
44
+ <div class="contact-grid">
45
+ <div class="contact-info">
46
+ <h2>Visit Us</h2>
47
+ <div class="info-item">
48
+ <h3>Address</h3>
49
+ <p>123 Developer Avenue<br>Tech City, TC 10101</p>
50
+ </div>
51
+ <div class="info-item">
52
+ <h3>Hours</h3>
53
+ <p>Mon-Fri: 7:00 AM - 11:00 PM<br>
54
+ Saturday: 8:00 AM - 11:00 PM<br>
55
+ Sunday: 9:00 AM - 10:00 PM</p>
56
+ </div>
57
+ <div class="info-item">
58
+ <h3>Contact</h3>
59
+ <p>Email: hello@anycodercoffee.com<br>
60
+ Phone: (555) 123-CODE</p>
61
+ </div>
62
+ </div>
63
+
64
+ <div class="contact-form-container">
65
+ <h2>Send us a message</h2>
66
+ <form class="contact-form" id="contactForm">
67
+ <div class="form-group">
68
+ <label for="name">Name</label>
69
+ <input type="text" id="name" name="name" required>
70
+ </div>
71
+ <div class="form-group">
72
+ <label for="email">Email</label>
73
+ <input type="email" id="email" name="email" required>
74
+ </div>
75
+ <div class="form-group">
76
+ <label for="subject">Subject</label>
77
+ <select id="subject" name="subject" required>
78
+ <option value="">Select a subject</option>
79
+ <option value="general">General Inquiry</option>
80
+ <option value="reservation">Reservation</option>
81
+ <option value="event">Event Space</option>
82
+ <option value="feedback">Feedback</option>
83
+ <option value="other">Other</option>
84
+ </select>
85
+ </div>
86
+ <div class="form-group">
87
+ <label for="message">Message</label>
88
+ <textarea id="message" name="message" rows="5" required></textarea>
89
+ </div>
90
+ <button type="submit" class="btn">Send Message</button>
91
+ </form>
92
+ <div id="formMessage" class="form-message"></div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </section>
97
+
98
+ <section class="map-section">
99
+ <div class="container">
100
+ <h2>Find Your Way</h2>
101
+ <div class="map-placeholder">
102
+ <p>Interactive map would be displayed here</p>
103
+ <span>123 Developer Avenue, Tech City</span>
104
+ </div>
105
+ </div>
106
+ </section>
107
+ </main>
108
+
109
+ <footer>
110
+ <div class="container">
111
+ <div class="footer-content">
112
+ <div class="footer-section">
113
+ <h3>AnyCoder Coffee</h3>
114
+ <p>Where code meets coffee perfection</p>
115
+ </div>
116
+ <div class="footer-section">
117
+ <h4>Connect</h4>
118
+ <ul>
119
+ <li><a href="#">GitHub</a></li>
120
+ <li><a href="#">Twitter</a></li>
121
+ <li><a href="#">LinkedIn</a></li>
122
+ </ul>
123
+ </div>
124
+ <div class="footer-section">
125
+ <h4>Resources</h4>
126
+ <ul>
127
+ <li><a href="#">Tech Events</a></li>
128
+ <li><a href="#">Developer Blog</a></li>
129
+ <li><a href="#">Coffee Recipes</a></li>
130
+ </ul>
131
+ </div>
132
+ </div>
133
+ <div class="footer-bottom">
134
+ <p>&copy; 2023 AnyCoder Coffee. All rights reserved.</p>
135
+ </div>
136
+ </div>
137
+ </footer>
138
+
139
+ <script src="assets/js/main.js"></script>
140
+ </body>
141
+ </html>
index.html CHANGED
@@ -1,19 +1,121 @@
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
+ <meta name="description" content="AnyCoder Coffee - Premium coffee and coding space for developers">
7
+ <title>AnyCoder Coffee - Home</title>
8
+ <link rel="stylesheet" href="assets/css/styles.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
12
+ </head>
13
+ <body>
14
+ <header>
15
+ <div class="container">
16
+ <div class="logo">
17
+ <h1><span class="logo-code">&lt;/&gt;</span> AnyCoder Coffee</h1>
18
+ </div>
19
+ <nav>
20
+ <button class="mobile-menu-toggle" aria-label="Toggle navigation menu">
21
+ <span></span>
22
+ <span></span>
23
+ <span></span>
24
+ </button>
25
+ <ul class="nav-menu">
26
+ <li><a href="index.html" class="active">Home</a></li>
27
+ <li><a href="about.html">About</a></li>
28
+ <li><a href="contact.html">Contact</a></li>
29
+ </ul>
30
+ </nav>
31
+ </div>
32
+ </header>
33
+
34
+ <main>
35
+ <section class="hero">
36
+ <div class="container">
37
+ <div class="hero-content">
38
+ <h2>Code. Coffee. Community.</h2>
39
+ <p>Where developers find their perfect brew and workspace</p>
40
+ <a href="about.html" class="btn">Discover Our Story</a>
41
+ </div>
42
+ </div>
43
+ </section>
44
+
45
+ <section class="features">
46
+ <div class="container">
47
+ <h2>Why Developers Love Us</h2>
48
+ <div class="features-grid">
49
+ <div class="feature-card">
50
+ <div class="feature-icon">⚡</div>
51
+ <h3>High-Speed WiFi</h3>
52
+ <p>Gigabit internet with dedicated bandwidth for seamless coding and deployment</p>
53
+ </div>
54
+ <div class="feature-card">
55
+ <div class="feature-icon">☕</div>
56
+ <h3>Artisan Coffee</h3>
57
+ <p>Specialty brews from ethical sources, roasted to perfection for coding sessions</p>
58
+ </div>
59
+ <div class="feature-card">
60
+ <div class="feature-icon">💻</div>
61
+ <h3>Ergonomic Spaces</h3>
62
+ <p>Comfortable workstations with ample power outlets and monitor connections</p>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </section>
67
+
68
+ <section class="hours-location">
69
+ <div class="container">
70
+ <div class="hours-location-grid">
71
+ <div class="hours">
72
+ <h2>Opening Hours</h2>
73
+ <ul>
74
+ <li><span>Mon-Fri:</span> 7:00 AM - 11:00 PM</li>
75
+ <li><span>Saturday:</span> 8:00 AM - 11:00 PM</li>
76
+ <li><span>Sunday:</span> 9:00 AM - 10:00 PM</li>
77
+ </ul>
78
+ </div>
79
+ <div class="location">
80
+ <h2>Find Us</h2>
81
+ <p>123 Developer Avenue<br>Tech City, TC 10101</p>
82
+ <a href="contact.html" class="btn-outline">Get Directions</a>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </section>
87
+ </main>
88
+
89
+ <footer>
90
+ <div class="container">
91
+ <div class="footer-content">
92
+ <div class="footer-section">
93
+ <h3>AnyCoder Coffee</h3>
94
+ <p>Where code meets coffee perfection</p>
95
+ </div>
96
+ <div class="footer-section">
97
+ <h4>Connect</h4>
98
+ <ul>
99
+ <li><a href="#">GitHub</a></li>
100
+ <li><a href="#">Twitter</a></li>
101
+ <li><a href="#">LinkedIn</a></li>
102
+ </ul>
103
+ </div>
104
+ <div class="footer-section">
105
+ <h4>Resources</h4>
106
+ <ul>
107
+ <li><a href="#">Tech Events</a></li>
108
+ <li><a href="#">Developer Blog</a></li>
109
+ <li><a href="#">Coffee Recipes</a></li>
110
+ </ul>
111
+ </div>
112
+ </div>
113
+ <div class="footer-bottom">
114
+ <p>&copy; 2023 AnyCoder Coffee. All rights reserved.</p>
115
+ </div>
116
+ </div>
117
+ </footer>
118
+
119
+ <script src="assets/js/main.js"></script>
120
+ </body>
121
+ </html>