Hugging Face's logo

Spaces:
coreline
/
anycoder-ce9ab26e
Running

App Files Community
coreline commited on
Commit
ae53ef8
·
verified ·
1 Parent(s): de51a9c

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1208 -19
index.html CHANGED
@@ -1,19 +1,1208 @@
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>Andaman Bliss | Your Tropical Paradise Awaits</title>
7
+ <meta name="description" content="Explore the pristine beaches and vibrant culture of the Andaman Islands. Book tours, rentals, and luxury resorts.">
8
+
9
+ <!-- Google Fonts -->
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
13
+
14
+ <!-- FontAwesome for Icons -->
15
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
16
+
17
+ <style>
18
+ /* --- CSS VARIABLES & RESET --- */
19
+ :root {
20
+ --primary-color: #006D77; /* Deep Teal */
21
+ --secondary-color: #83C5BE; /* Soft Cyan */
22
+ --accent-color: #E29578; /* Terracotta/Coral */
23
+ --bg-color: #EDF6F9; /* Very Light Blue */
24
+ --text-dark: #2D3436;
25
+ --text-light: #636E72;
26
+ --white: #ffffff;
27
+ --glass-bg: rgba(255, 255, 255, 0.85);
28
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
29
+ --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
30
+ }
31
+
32
+ * {
33
+ margin: 0;
34
+ padding: 0;
35
+ box-sizing: border-box;
36
+ }
37
+
38
+ html {
39
+ scroll-behavior: smooth;
40
+ }
41
+
42
+ body {
43
+ font-family: 'Poppins', sans-serif;
44
+ background-color: var(--bg-color);
45
+ color: var(--text-dark);
46
+ line-height: 1.6;
47
+ overflow-x: hidden;
48
+ }
49
+
50
+ h1, h2, h3, h4 {
51
+ font-family: 'Playfair Display', serif;
52
+ color: var(--primary-color);
53
+ }
54
+
55
+ a {
56
+ text-decoration: none;
57
+ color: inherit;
58
+ }
59
+
60
+ ul {
61
+ list-style: none;
62
+ }
63
+
64
+ img {
65
+ max-width: 100%;
66
+ display: block;
67
+ }
68
+
69
+ /* --- UTILITY CLASSES --- */
70
+ .container {
71
+ max-width: 1200px;
72
+ margin: 0 auto;
73
+ padding: 0 20px;
74
+ }
75
+
76
+ .section-padding {
77
+ padding: 80px 0;
78
+ }
79
+
80
+ .text-center {
81
+ text-align: center;
82
+ }
83
+
84
+ .btn {
85
+ display: inline-block;
86
+ padding: 12px 30px;
87
+ border-radius: 50px;
88
+ font-weight: 600;
89
+ cursor: pointer;
90
+ transition: var(--transition);
91
+ border: none;
92
+ font-size: 1rem;
93
+ }
94
+
95
+ .btn-primary {
96
+ background-color: var(--primary-color);
97
+ color: var(--white);
98
+ box-shadow: 0 4px 15px rgba(0, 109, 119, 0.3);
99
+ }
100
+
101
+ .btn-primary:hover {
102
+ background-color: #005056;
103
+ transform: translateY(-2px);
104
+ }
105
+
106
+ .btn-outline {
107
+ border: 2px solid var(--white);
108
+ color: var(--white);
109
+ background: transparent;
110
+ }
111
+
112
+ .btn-outline:hover {
113
+ background: var(--white);
114
+ color: var(--primary-color);
115
+ }
116
+
117
+ .section-title {
118
+ margin-bottom: 50px;
119
+ position: relative;
120
+ display: inline-block;
121
+ }
122
+
123
+ .section-title h2 {
124
+ font-size: 2.5rem;
125
+ margin-bottom: 10px;
126
+ }
127
+
128
+ .section-title::after {
129
+ content: '';
130
+ display: block;
131
+ width: 60px;
132
+ height: 3px;
133
+ background-color: var(--accent-color);
134
+ margin: 0 auto;
135
+ }
136
+
137
+ /* --- HEADER & NAV --- */
138
+ header {
139
+ position: fixed;
140
+ top: 0;
141
+ width: 100%;
142
+ z-index: 1000;
143
+ transition: var(--transition);
144
+ background: transparent;
145
+ }
146
+
147
+ header.scrolled {
148
+ background: var(--glass-bg);
149
+ backdrop-filter: blur(10px);
150
+ box-shadow: 0 2px 20px rgba(0,0,0,0.05);
151
+ padding: 15px 0;
152
+ }
153
+
154
+ nav {
155
+ display: flex;
156
+ justify-content: space-between;
157
+ align-items: center;
158
+ }
159
+
160
+ .logo {
161
+ font-family: 'Playfair Display', serif;
162
+ font-size: 1.8rem;
163
+ font-weight: 700;
164
+ color: var(--white);
165
+ display: flex;
166
+ align-items: center;
167
+ gap: 10px;
168
+ }
169
+
170
+ .logo i {
171
+ color: var(--secondary-color);
172
+ }
173
+
174
+ .nav-links {
175
+ display: flex;
176
+ gap: 30px;
177
+ }
178
+
179
+ .nav-links a {
180
+ color: var(--white);
181
+ font-weight: 500;
182
+ position: relative;
183
+ transition: var(--transition);
184
+ }
185
+
186
+ .nav-links a::after {
187
+ content: '';
188
+ position: absolute;
189
+ width: 0;
190
+ height: 2px;
191
+ bottom: -5px;
192
+ left: 0;
193
+ background-color: var(--secondary-color);
194
+ transition: var(--transition);
195
+ }
196
+
197
+ .nav-links a:hover::after {
198
+ width: 100%;
199
+ }
200
+
201
+ .nav-cta {
202
+ background-color: var(--white);
203
+ color: var(--primary-color);
204
+ padding: 8px 20px;
205
+ border-radius: 20px;
206
+ font-weight: 600;
207
+ }
208
+
209
+ .nav-cta:hover {
210
+ background-color: var(--secondary-color);
211
+ color: var(--white);
212
+ }
213
+
214
+ /* Mobile Menu */
215
+ .hamburger {
216
+ display: none;
217
+ color: var(--white);
218
+ font-size: 1.5rem;
219
+ cursor: pointer;
220
+ }
221
+
222
+ /* --- HERO SECTION --- */
223
+ #home {
224
+ height: 100vh;
225
+ background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4)), url('https://picsum.photos/seed/andamanbeach/1920/1080');
226
+ background-size: cover;
227
+ background-position: center;
228
+ background-attachment: fixed;
229
+ display: flex;
230
+ align-items: center;
231
+ justify-content: center;
232
+ text-align: center;
233
+ color: var(--white);
234
+ position: relative;
235
+ }
236
+
237
+ .hero-content {
238
+ max-width: 800px;
239
+ padding: 20px;
240
+ animation: fadeIn Up 1s ease-out;
241
+ }
242
+
243
+ .hero-content h1 {
244
+ font-size: 4rem;
245
+ margin-bottom: 20px;
246
+ color: var(--white);
247
+ text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
248
+ }
249
+
250
+ .hero-content p {
251
+ font-size: 1.2rem;
252
+ margin-bottom: 40px;
253
+ opacity: 0.9;
254
+ }
255
+
256
+ .hero-buttons {
257
+ display: flex;
258
+ gap: 20px;
259
+ justify-content: center;
260
+ }
261
+
262
+ /* --- STATS BAR --- */
263
+ .stats-bar {
264
+ background-color: var(--white);
265
+ padding: 40px 0;
266
+ margin-top: -50px;
267
+ position: relative;
268
+ z-index: 10;
269
+ border-radius: var(--shadow);
270
+ display: flex;
271
+ justify-content: space-around;
272
+ box-shadow: var(--shadow);
273
+ flex-wrap: wrap;
274
+ gap: 20px;
275
+ }
276
+
277
+ .stat-item {
278
+ text-align: center;
279
+ flex: 1;
280
+ min-width: 150px;
281
+ }
282
+
283
+ .stat-item i {
284
+ font-size: 2rem;
285
+ color: var(--primary-color);
286
+ margin-bottom: 10px;
287
+ }
288
+
289
+ .stat-item h3 {
290
+ font-size: 1.5rem;
291
+ font-family: 'Poppins', sans-serif;
292
+ }
293
+
294
+ .stat-item p {
295
+ font-size: 0.9rem;
296
+ color: var(--text-light);
297
+ }
298
+
299
+ /* --- PACKAGES --- */
300
+ #packages {
301
+ background-color: var(--white);
302
+ }
303
+
304
+ .package-grid {
305
+ display: grid;
306
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
307
+ gap: 30px;
308
+ }
309
+
310
+ .package-card {
311
+ background: var(--white);
312
+ border-radius: 15px;
313
+ overflow: hidden;
314
+ box-shadow: 0 5px 20px rgba(0,0,0,0.05);
315
+ transition: var(--transition);
316
+ position: relative;
317
+ border: 1px solid #eee;
318
+ }
319
+
320
+ .package-card:hover {
321
+ transform: translateY(-10px);
322
+ box-shadow: 0 15px 40px rgba(0, 109, 119, 0.15);
323
+ }
324
+
325
+ .card-image {
326
+ height: 200px;
327
+ overflow: hidden;
328
+ }
329
+
330
+ .card-image img {
331
+ width: 100%;
332
+ height: 100%;
333
+ object-fit: cover;
334
+ transition: transform 0.5s ease;
335
+ }
336
+
337
+ .package-card:hover .card-image img {
338
+ transform: scale(1.1);
339
+ }
340
+
341
+ .card-content {
342
+ padding: 25px;
343
+ }
344
+
345
+ .card-header {
346
+ display: flex;
347
+ justify-content: space-between;
348
+ align-items: center;
349
+ margin-bottom: 15px;
350
+ }
351
+
352
+ .card-header h3 {
353
+ font-size: 1.4rem;
354
+ }
355
+
356
+ .price {
357
+ color: var(--accent-color);
358
+ font-weight: 700;
359
+ font-size: 1.2rem;
360
+ }
361
+
362
+ .duration {
363
+ font-size: 0.9rem;
364
+ color: var(--text-light);
365
+ margin-bottom: 15px;
366
+ display: block;
367
+ }
368
+
369
+ .card-features {
370
+ margin-bottom: 20px;
371
+ display: flex;
372
+ flex-wrap: wrap;
373
+ gap: 10px;
374
+ }
375
+
376
+ .feature-tag {
377
+ background-color: var(--bg-color);
378
+ padding: 5px 12px;
379
+ border-radius: 20px;
380
+ font-size: 0.8rem;
381
+ color: var(--primary-color);
382
+ }
383
+
384
+ .card-footer {
385
+ border-top: 1px solid #eee;
386
+ padding-top: 15px;
387
+ display: flex;
388
+ justify-content: space-between;
389
+ align-items: center;
390
+ }
391
+
392
+ /* --- ACTIVITIES --- */
393
+ #activities {
394
+ background-color: var(--bg-color);
395
+ }
396
+
397
+ .activity-slider {
398
+ display: flex;
399
+ overflow-x: auto;
400
+ gap: 20px;
401
+ padding-bottom: 20px;
402
+ scroll-snap-type: x mandatory;
403
+ -webkit-overflow-scrolling: touch;
404
+ }
405
+
406
+ .activity-item {
407
+ min-width: 280px;
408
+ scroll-snap-align: center;
409
+ position: relative;
410
+ border-radius: 15px;
411
+ overflow: hidden;
412
+ height: 350px;
413
+ cursor: pointer;
414
+ }
415
+
416
+ .activity-item img {
417
+ width: 100%;
418
+ height: 100%;
419
+ object-fit: cover;
420
+ transition: var(--transition);
421
+ }
422
+
423
+ .activity-overlay {
424
+ position: absolute;
425
+ bottom: 0;
426
+ left: 0;
427
+ width: 100%;
428
+ padding: 20px;
429
+ background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
430
+ color: var(--white);
431
+ }
432
+
433
+ .activity-item:hover img {
434
+ transform: scale(1.1);
435
+ }
436
+
437
+ /* --- BOOKING WIDGET --- */
438
+ #booking {
439
+ background: var(--primary-color);
440
+ color: var(--white);
441
+ padding: 60px 0;
442
+ }
443
+
444
+ .booking-container {
445
+ background: var(--white);
446
+ border-radius: 20px;
447
+ padding: 40px;
448
+ color: var(--text-dark);
449
+ display: grid;
450
+ grid-template-columns: 1fr 1fr;
451
+ gap: 40px;
452
+ box-shadow: 0 20px 50px rgba(0,0,0,0.2);
453
+ }
454
+
455
+ .booking-info h2 {
456
+ color: var(--primary-color);
457
+ margin-bottom: 15px;
458
+ }
459
+
460
+ .booking-info p {
461
+ margin-bottom: 30px;
462
+ color: var(--text-light);
463
+ }
464
+
465
+ .booking-form {
466
+ display: flex;
467
+ flex-direction: column;
468
+ gap: 20px;
469
+ }
470
+
471
+ .form-group {
472
+ display: flex;
473
+ gap: 15px;
474
+ }
475
+
476
+ .form-group input, .form-group select {
477
+ flex: 1;
478
+ padding: 12px 15px;
479
+ border: 1px solid #ddd;
480
+ border-radius: 8px;
481
+ font-family: inherit;
482
+ outline: none;
483
+ }
484
+
485
+ .form-group input:focus, .form-group select:focus {
486
+ border-color: var(--primary-color);
487
+ }
488
+
489
+ /* --- BLOG --- */
490
+ #blog {
491
+ background-color: var(--white);
492
+ }
493
+
494
+ .blog-grid {
495
+ display: grid;
496
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
497
+ gap: 30px;
498
+ }
499
+
500
+ .blog-card {
501
+ border-radius: 10px;
502
+ overflow: hidden;
503
+ box-shadow: 0 5px 15px rgba(0,0,0,0.05);
504
+ transition: var(--transition);
505
+ }
506
+
507
+ .blog-card:hover {
508
+ transform: translateY(-5px);
509
+ }
510
+
511
+ .blog-img {
512
+ height: 200px;
513
+ overflow: hidden;
514
+ }
515
+
516
+ .blog-img img {
517
+ width: 100%;
518
+ height: 100%;
519
+ object-fit: cover;
520
+ }
521
+
522
+ .blog-content {
523
+ padding: 20px;
524
+ }
525
+
526
+ .blog-meta {
527
+ font-size: 0.8rem;
528
+ color: var(--text-light);
529
+ margin-bottom: 10px;
530
+ }
531
+
532
+ .blog-content h3 {
533
+ font-size: 1.2rem;
534
+ margin-bottom: 10px;
535
+ }
536
+
537
+ .read-more {
538
+ color: var(--primary-color);
539
+ font-weight: 600;
540
+ font-size: 0.9rem;
541
+ display: inline-flex;
542
+ align-items: center;
543
+ gap: 5px;
544
+ }
545
+
546
+ /* --- CONTACT & ABOUT --- */
547
+ #contact {
548
+ background-color: var(--bg-color);
549
+ }
550
+
551
+ .contact-wrapper {
552
+ display: grid;
553
+ grid-template-columns: 1fr 1fr;
554
+ gap: 50px;
555
+ }
556
+
557
+ .about-card {
558
+ background: var(--white);
559
+ padding: 40px;
560
+ border-radius: 20px;
561
+ box-shadow: var(--shadow);
562
+ }
563
+
564
+ .contact-form {
565
+ background: var(--white);
566
+ padding: 40px;
567
+ border-radius: 20px;
568
+ box-shadow: var(--shadow);
569
+ }
570
+
571
+ .form-row {
572
+ display: grid;
573
+ grid-template-columns: 1fr 1fr;
574
+ gap: 20px;
575
+ margin-bottom: 20px;
576
+ }
577
+
578
+ .contact-item {
579
+ display: flex;
580
+ align-items: flex-start;
581
+ gap: 15px;
582
+ margin-bottom: 20px;
583
+ }
584
+
585
+ .contact-item i {
586
+ background-color: var(--secondary-color);
587
+ color: var(--primary-color);
588
+ width: 40px;
589
+ height: 40px;
590
+ border-radius: 50%;
591
+ display: flex;
592
+ align-items: center;
593
+ justify-content: center;
594
+ flex-shrink: 0;
595
+ }
596
+
597
+ /* --- FOOTER --- */
598
+ footer {
599
+ background-color: #1a2631;
600
+ color: #dfe6e9;
601
+ padding: 60px 0 20px;
602
+ }
603
+
604
+ .footer-grid {
605
+ display: grid;
606
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
607
+ gap: 40px;
608
+ margin-bottom: 40px;
609
+ }
610
+
611
+ .footer-col h4 {
612
+ color: var(--white);
613
+ margin-bottom: 20px;
614
+ font-family: 'Poppins', sans-serif;
615
+ }
616
+
617
+ .footer-col ul li {
618
+ margin-bottom: 10px;
619
+ }
620
+
621
+ .footer-col ul li a {
622
+ color: #b2bec3;
623
+ transition: var(--transition);
624
+ }
625
+
626
+ .footer-col ul li a:hover {
627
+ color: var(--secondary-color);
628
+ padding-left: 5px;
629
+ }
630
+
631
+ .footer-bottom {
632
+ border-top: 1px solid rgba(255,255,255,0.1);
633
+ padding-top: 20px;
634
+ text-align: center;
635
+ font-size: 0.9rem;
636
+ }
637
+
638
+ /* --- TOAST NOTIFICATION --- */
639
+ .toast {
640
+ position: fixed;
641
+ bottom: 30px;
642
+ right: 30px;
643
+ background-color: var(--white);
644
+ padding: 15px 25px;
645
+ border-radius: 10px;
646
+ box-shadow: 0 10px 40px rgba(0,0,0,0.2);
647
+ border-left: 5px solid var(--primary-color);
648
+ transform: translateX(200%);
649
+ transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
650
+ z-index: 2000;
651
+ display: flex;
652
+ align-items: center;
653
+ gap: 15px;
654
+ }
655
+
656
+ .toast.show {
657
+ transform: translateX(0);
658
+ }
659
+
660
+ .toast i {
661
+ color: var(--primary-color);
662
+ font-size: 1.2rem;
663
+ }
664
+
665
+ /* --- RESPONSIVE --- */
666
+ @media (max-width: 992px) {
667
+ .hero-content h1 {
668
+ font-size: 3rem;
669
+ }
670
+
671
+ .booking-container {
672
+ grid-template-columns: 1fr;
673
+ }
674
+
675
+ .contact-wrapper {
676
+ grid-template-columns: 1fr;
677
+ }
678
+ }
679
+
680
+ @media (max-width: 768px) {
681
+ .hamburger {
682
+ display: block;
683
+ z-index: 1001;
684
+ }
685
+
686
+ .nav-links {
687
+ position: fixed;
688
+ top: 0;
689
+ right: -100%;
690
+ width: 70%;
691
+ height: 100vh;
692
+ background-color: var(--white);
693
+ flex-direction: column;
694
+ justify-content: center;
695
+ align-items: center;
696
+ transition: var(--transition);
697
+ box-shadow: -5px 0 15px rgba(0,0,0,0.1);
698
+ }
699
+
700
+ .nav-links.active {
701
+ right: 0;
702
+ }
703
+
704
+ .nav-links a {
705
+ color: var(--text-dark);
706
+ font-size: 1.2rem;
707
+ }
708
+
709
+ .hero-content h1 {
710
+ font-size: 2.5rem;
711
+ }
712
+
713
+ .form-row {
714
+ grid-template-columns: 1fr;
715
+ }
716
+
717
+ .stats-bar {
718
+ flex-direction: column;
719
+ }
720
+ }
721
+ </style>
722
+ </head>
723
+ <body>
724
+
725
+ <!-- Header -->
726
+ <header id="header">
727
+ <div class="container">
728
+ <nav>
729
+ <a href="#" class="logo">
730
+ <i class="fa-solid fa-umbrella-beach"></i> Andaman Bliss
731
+ </a>
732
+ <div class="hamburger" id="hamburger">
733
+ <i class="fa-solid fa-bars"></i>
734
+ </div>
735
+ <ul class="nav-links" id="nav-links">
736
+ <li><a href="#home">Home</a></li>
737
+ <li><a href="#packages">Packages</a></li>
738
+ <li><a href="#activities">Activities</a></li>
739
+ <li><a href="#blog">Blog</a></li>
740
+ <li><a href="#contact">Contact</a></li>
741
+ <li><a href="#booking" class="nav-cta">Book Now</a></li>
742
+ </ul>
743
+ </nav>
744
+ </div>
745
+ </header>
746
+
747
+ <!-- Hero Section -->
748
+ <section id="home">
749
+ <div class="hero-content">
750
+ <h1>Discover the Paradise of the Andamans</h1>
751
+ <p>Experience pristine beaches, crystal clear waters, and unforgettable adventures in one of India's most stunning archipelagos.</p>
752
+ <div class="hero-buttons">
753
+ <a href="#packages" class="btn btn-primary">Explore Tours</a>
754
+ <a href="#about" class="btn btn-outline">Learn More</a>
755
+ </div>
756
+ </div>
757
+ </section>
758
+
759
+ <!-- Stats Bar -->
760
+ <div class="container">
761
+ <div class="stats-bar">
762
+ <div class="stat-item">
763
+ <i class="fa-solid fa-map-location-dot"></i>
764
+ <h3>57</h3>
765
+ <p>Islands</p>
766
+ </div>
767
+ <div class="stat-item">
768
+ <i class="fa-solid fa-umbrella-beach"></i>
769
+ <h3>100+</h3>
770
+ <p>Tours</p>
771
+ </div>
772
+ <div class="stat-item">
773
+ <i class="fa-solid fa-users"></i>
774
+ <h3>10k+</h3>
775
+ <p>Happy Travelers</p>
776
+ </div>
777
+ <div class="stat-item">
778
+ <i class="fa-solid fa-medal"></i>
779
+ <h3>5 Star</h3>
780
+ <p>Rating</p>
781
+ </div>
782
+ </div>
783
+ </div>
784
+
785
+ <!-- Packages Section -->
786
+ <section id="packages" class="section-padding">
787
+ <div class="container">
788
+ <div class="text-center">
789
+ <div class="section-title">
790
+ <h2>Popular Packages</h2>
791
+ </div>
792
+ </div>
793
+ <div class="package-grid">
794
+ <!-- Package 1 -->
795
+ <div class="package-card">
796
+ <div class="card-image">
797
+ <img src="https://picsum.photos/seed/andaman1/400/300" alt="Havelock Tour">
798
+ </div>
799
+ <div class="card-content">
800
+ <div class="card-header">
801
+ <h3>Havelock Escape</h3>
802
+ <span class="price">$450</span>
803
+ </div>
804
+ <span class="duration"><i class="fa-regular fa-clock"></i> 4 Days / 3 Nights</span>
805
+ <div class="card-features">
806
+ <span class="feature-tag">Transfer</span>
807
+ <span class="feature-tag">Stay</span>
808
+ <span class="feature-tag">Breakfast</span>
809
+ </div>
810
+ <div class="card-footer">
811
+ <a href="#booking" onclick="prefillBooking('Havelock Escape')" class="btn btn-primary" style="padding: 8px 20px; font-size: 0.9rem;">Book Now</a>
812
+ </div>
813
+ </div>
814
+ </div>
815
+
816
+ <!-- Package 2 -->
817
+ <div class="package-card">
818
+ <div class="card-image">
819
+ <img src="https://picsum.photos/seed/andaman2/400/300" alt="Andaman Cruise">
820
+ </div>
821
+ <div class="card-content">
822
+ <div class="card-header">
823
+ <h3>Island Hopper</h3>
824
+ <span class="price">$680</span>
825
+ </div>
826
+ <span class="duration"><i class="fa-regular fa-clock"></i> 6 Days / 5 Nights</span>
827
+ <div class="card-features">
828
+ <span class="feature-tag">Cruise</span>
829
+ <span class="feature-tag">Snorkeling</span>
830
+ <span class="feature-tag">Dinner</span>
831
+ </div>
832
+ <div class="card-footer">
833
+ <a href="#booking" onclick="prefillBooking('Island Hopper')" class="btn btn-primary" style="padding: 8px 20px; font-size: 0.9rem;">Book Now</a>
834
+ </div>
835
+ </div>
836
+ </div>
837
+
838
+ <!-- Package 3 -->
839
+ <div class="package-card">
840
+ <div class="card-image">
841
+ <img src="https://picsum.photos/seed/andaman3/400/300" alt="Scuba Diving">
842
+ </div>
843
+ <div class="card-content">
844
+ <div class="card-header">
845
+ <h3>Deep Blue Dive</h3>
846
+ <span class="price">$320</span>
847
+ </div>
848
+ <span class="duration"><i class="fa-regular fa-clock"></i> 3 Days / 2 Nights</span>
849
+ <div class="card-features">
850
+ <span class="feature-tag">Diving</span>
851
+ <span class="feature-tag">Resort</span>
852
+ <span class="feature-tag">Breakfast</span>
853
+ </div>
854
+ <div class="card-footer">
855
+ <a href="#booking" onclick="prefillBooking('Deep Blue Dive')" class="btn btn-primary" style="padding: 8px 20px; font-size: 0.9rem;">Book Now</a>
856
+ </div>
857
+ </div>
858
+ </div>
859
+ </div>
860
+ </div>
861
+ </section>
862
+
863
+ <!-- Activities Section -->
864
+ <section id="activities" class="section-padding">
865
+ <div class="container">
866
+ <div class="text-center">
867
+ <div class="section-title">
868
+ <h2>Adventures Await</h2>
869
+ </div>
870
+ </div>
871
+ <div class="activity-slider">
872
+ <div class="activity-item">
873
+ <img src="https://picsum.photos/seed/snorkel/400/500" alt="Snorkeling">
874
+ <div class="activity-overlay">
875
+ <h3>Snorkeling</h3>
876
+ <p>Explore the coral reefs</p>
877
+ </div>
878
+ </div>
879
+ <div class="activity-item">
880
+ <img src="https://picsum.photos/seed/diving/400/500" alt="Scuba Diving">
881
+ <div class="activity-overlay">
882
+ <h3>Scuba Diving</h3>
883
+ <p>Dive deep into the blue</p>
884
+ </div>
885
+ </div>
886
+ <div class="activity-item">
887
+ <img src="https://picsum.photos/seed/jet/400/500" alt="Jet Skiing">
888
+ <div class="activity-overlay">
889
+ <h3>Jet Skiing</h3>
890
+ <p>Feel the adrenaline rush</p>
891
+ </div>
892
+ </div>
893
+ <div class="activity-item">
894
+ <img src="https://picsum.photos/seed/fishing/400/500" alt="Fishing">
895
+ <div class="activity-overlay">
896
+ <h3>Deep Sea Fishing</h3>
897
+ <p>Catch the big one</p>
898
+ </div>
899
+ </div>
900
+ <div class="activity-item">
901
+ <img src="https://picsum.photos/seed/camping/400/500" alt="Beach Camping">
902
+ <div class="activity-overlay">
903
+ <h3>Beach Camping</h3>
904
+ <p>Under the stars</p>
905
+ </div>
906
+ </div>
907
+ </div>
908
+ </div>
909
+ </section>
910
+
911
+ <!-- About & Trust Section -->
912
+ <section id="about" class="section-padding" style="background-color: var(--white);">
913
+ <div class="container">
914
+ <div class="text-center">
915
+ <div class="section-title">
916
+ <h2>Why Choose Us</h2>
917
+ </div>
918
+ </div>
919
+ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 40px;">
920
+ <div class="about-card text-center">
921
+ <i class="fa-solid fa-shield-halved" style="font-size: 3rem; color: var(--primary-color); margin-bottom: 20px;"></i>
922
+ <h3>Safe Travel</h3>
923
+ <p style="margin-top: 10px; color: var(--text-light);">We prioritize your safety with licensed guides and high-quality equipment.</p>
924
+ </div>
925
+ <div class="about-card text-center">
926
+ <i class="fa-solid fa-headset" style="font-size: 3rem; color: var(--primary-color); margin-bottom: 20px;"></i>
927
+ <h3>24/7 Support</h3>
928
+ <p style="margin-top: 10px; color: var(--text-light);">Our team is available around the clock to assist you during your trip.</p>
929
+ </div>
930
+ <div class="about-card text-center">
931
+ <i class="fa-solid fa-hand-holding-dollar" style="font-size: 3rem; color: var(--primary-color); margin-bottom: 20px;"></i>
932
+ <h3>Best Prices</h3>
933
+ <p style="margin-top: 10px; color: var(--text-light);">Competitive pricing with no hidden charges for a transparent experience.</p>
934
+ </div>
935
+ </div>
936
+ </div>
937
+ </section>
938
+
939
+ <!-- Booking Section -->
940
+ <section id="booking">
941
+ <div class="container">
942
+ <div class="booking-container">
943
+ <div class="booking-info">
944
+ <h2>Start Your Journey</h2>
945
+ <p>Ready to escape to the Andamans? Fill out the form and our travel experts will curate the perfect itinerary for you.</p>
946
+ <div style="display: flex; gap: 20px; margin-top: 30px;">
947
+ <div>
948
+ <h4 style="color: var(--primary-color);">Call Us</h4>
949
+ <p>+91 98765 43210</p>
950
+ </div>
951
+ <div>
952
+ <h4 style="color: var(--primary-color);">Email Us</h4>
953
+ <p>hello@andamanbliss.com</p>
954
+ </div>
955
+ </div>
956
+ </div>
957
+ <div class="booking-form">
958
+ <form id="bookingForm" onsubmit="handleBooking(event)">
959
+ <div class="form-group">
960
+ <input type="text" placeholder="Your Name" required>
961
+ </div>
962
+ <div class="form-group">
963
+ <input type="email" placeholder="Your Email" required>
964
+ </div>
965
+ <div class="form-group">
966
+ <select required>
967
+ <option value="">Select Package</option>
968
+ <option value="Havelock Escape">Havelock Escape</option>
969
+ <option value="Island Hopper">Island Hopper</option>
970
+ <option value="Deep Blue Dive">Deep Blue Dive</option>
971
+ <option value="Custom">Custom Plan</option>
972
+ </select>
973
+ </div>
974
+ <div class="form-row">
975
+ <input type="date" required>
976
+ <input type="number" placeholder="Guests" min="1" max="10" required>
977
+ </div>
978
+ <button type="submit" class="btn btn-primary" style="width: 100%;">Confirm Booking</button>
979
+ </form>
980
+ </div>
981
+ </div>
982
+ </div>
983
+ </section>
984
+
985
+ <!-- Blog Section -->
986
+ <section id="blog" class="section-padding">
987
+ <div class="container">
988
+ <div class="text-center">
989
+ <div class="section-title">
990
+ <h2>Travel Blog</h2>
991
+ </div>
992
+ </div>
993
+ <div class="blog-grid">
994
+ <article class="blog-card">
995
+ <div class="blog-img">
996
+ <img src="https://picsum.photos/seed/blog1/400/300" alt="Best time to visit">
997
+ </div>
998
+ <div class="blog-content">
999
+ <div class="blog-meta">Oct 12, 2023 • Tips</div>
1000
+ <h3>Best Time to Visit Andaman</h3>
1001
+ <p style="font-size: 0.9rem; color: var(--text-light); margin-bottom: 15px;">Discover the optimal season for clear skies and calm waters.</p>
1002
+ <a href="#" class="read-more">Read More <i class="fa-solid fa-arrow-right"></i></a>
1003
+ </div>
1004
+ </article>
1005
+ <article class="blog-card">
1006
+ <div class="blog-img">
1007
+ <img src="https://picsum.photos/seed/blog2/400/300" alt="Local food">
1008
+ </div>
1009
+ <div class="blog-content">
1010
+ <div class="blog-meta">Sep 28, 2023 • Food</div>
1011
+ <h3>Top Local Dishes to Try</h3>
1012
+ <p style="font-size: 0.9rem; color: var(--text-light); margin-bottom: 15px;">From crab curry to coconut sweets, taste the island's flavor.</p>
1013
+ <a href="#" class="read-more">Read More <i class="fa-solid fa-arrow-right"></i></a>
1014
+ </div>
1015
+ </article>
1016
+ <article class="blog-card">
1017
+ <div class="blog-img">
1018
+ <img src="https://picsum.photos/seed/blog3/400/300" alt="Itinerary">
1019
+ </div>
1020
+ <div class="blog-content">
1021
+ <div class="blog-meta">Sep 15, 2023 • Itinerary</div>
1022
+ <h3>7-Day Perfect Itinerary</h3>
1023
+ <p style="font-size: 0.9rem; color: var(--text-light); margin-bottom: 15px;">A detailed guide on how to cover the best spots in a week.</p>
1024
+ <a href="#" class="read-more">Read More <i class="fa-solid fa-arrow-right"></i></a>
1025
+ </div>
1026
+ </article>
1027
+ </div>
1028
+ </div>
1029
+ </section>
1030
+
1031
+ <!-- Contact Section -->
1032
+ <section id="contact" class="section-padding">
1033
+ <div class="container">
1034
+ <div class="contact-wrapper">
1035
+ <div class="about-card">
1036
+ <h3 style="margin-bottom: 20px;">Get in Touch</h3>
1037
+ <p style="margin-bottom: 30px; color: var(--text-light);">Have questions about our packages or need assistance? Reach out to us.</p>
1038
+
1039
+ <div class="contact-item">
1040
+ <i class="fa-solid fa-location-dot"></i>
1041
+ <div>
1042
+ <h4>Location</h4>
1043
+ <p>Port Blair, Andaman & Nicobar Islands</p>
1044
+ </div>
1045
+ </div>
1046
+ <div class="contact-item">
1047
+ <i class="fa-solid fa-envelope"></i>
1048
+ <div>
1049
+ <h4>Email</h4>
1050
+ <p>support@andamanbliss.com</p>
1051
+ </div>
1052
+ </div>
1053
+ <div class="contact-item">
1054
+ <i class="fa-solid fa-phone"></i>
1055
+ <div>
1056
+ <h4>Phone</h4>
1057
+ <p>+91 98765 43210</p>
1058
+ </div>
1059
+ </div>
1060
+ </div>
1061
+
1062
+ <div class="contact-form">
1063
+ <h3 style="margin-bottom: 20px;">Send a Message</h3>
1064
+ <form onsubmit="handleContact(event)">
1065
+ <div class="form-row">
1066
+ <input type="text" placeholder="Name" required>
1067
+ <input type="email" placeholder="Email" required>
1068
+ </div>
1069
+ <input type="text" placeholder="Subject" required>
1070
+ <textarea rows="5" placeholder="Your Message" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 20px; font-family: inherit;" required></textarea>
1071
+ <button type="submit" class="btn btn-primary">Send Message</button>
1072
+ </form>
1073
+ </div>
1074
+ </div>
1075
+ </div>
1076
+ </section>
1077
+
1078
+ <!-- Footer -->
1079
+ <footer>
1080
+ <div class="container">
1081
+ <div class="footer-grid">
1082
+ <div class="footer-col">
1083
+ <div class="logo" style="margin-bottom: 20px;">
1084
+ <i class="fa-solid fa-umbrella-beach"></i> Andaman Bliss
1085
+ </div>
1086
+ <p style="font-size: 0.9rem; color: #b2bec3;">Your gateway to the most beautiful islands in the Bay of Bengal. Experience luxury and adventure combined.</p>
1087
+ </div>
1088
+ <div class="footer-col">
1089
+ <h4>Quick Links</h4>
1090
+ <ul>
1091
+ <li><a href="#home">Home</a></li>
1092
+ <li><a href="#packages">Packages</a></li>
1093
+ <li><a href="#activities">Activities</a></li>
1094
+ <li><a href="#blog">Blog</a></li>
1095
+ </ul>
1096
+ </div>
1097
+ <div class="footer-col">
1098
+ <h4>Legal</h4>
1099
+ <ul>
1100
+ <li><a href="#">Privacy Policy</a></li>
1101
+ <li><a href="#">Terms of Service</a></li>
1102
+ <li><a href="#">Refund Policy</a></li>
1103
+ </ul>
1104
+ </div>
1105
+ <div class="footer-col">
1106
+ <h4>Follow Us</h4>
1107
+ <div style="display: flex; gap: 15px;">
1108
+ <a href="#"><i class="fa-brands fa-facebook fa-lg"></i></a>
1109
+ <a href="#"><i class="fa-brands fa-instagram fa-lg"></i></a>
1110
+ <a href="#"><i class="fa-brands fa-twitter fa-lg"></i></a>
1111
+ </div>
1112
+ </div>
1113
+ </div>
1114
+ <div class="footer-bottom">
1115
+ <p>&copy; 2023 Andaman Bliss. All rights reserved.</p>
1116
+ <p style="margin-top: 5px; font-size: 0.8rem;">
1117
+ Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--secondary-color);">anycoder</a>
1118
+ </p>
1119
+ </div>
1120
+ </div>
1121
+ </footer>
1122
+
1123
+ <!-- Toast Notification -->
1124
+ <div class="toast" id="toast">
1125
+ <i class="fa-solid fa-circle-check"></i>
1126
+ <div>
1127
+ <h4 style="margin: 0; font-size: 1rem;">Success!</h4>
1128
+ <p style="margin: 0; font-size: 0.85rem; color: var(--text-light);" id="toastMessage">Action completed successfully.</p>
1129
+ </div>
1130
+ </div>
1131
+
1132
+ <script>
1133
+ // --- Mobile Menu Toggle ---
1134
+ const hamburger = document.getElementById('hamburger');
1135
+ const navLinks = document.getElementById('nav-links');
1136
+ const navItems = document.querySelectorAll('.nav-links a');
1137
+
1138
+ hamburger.addEventListener('click', () => {
1139
+ navLinks.classList.toggle('active');
1140
+ const icon = hamburger.querySelector('i');
1141
+ if (navLinks.classList.contains('active')) {
1142
+ icon.classList.remove('fa-bars');
1143
+ icon.classList.add('fa-xmark');
1144
+ } else {
1145
+ icon.classList.remove('fa-xmark');
1146
+ icon.classList.add('fa-bars');
1147
+ }
1148
+ });
1149
+
1150
+ // Close mobile menu when a link is clicked
1151
+ navItems.forEach(item => {
1152
+ item.addEventListener('click', () => {
1153
+ navLinks.classList.remove('active');
1154
+ hamburger.querySelector('i').classList.remove('fa-xmark');
1155
+ hamburger.querySelector('i').classList.add('fa-bars');
1156
+ });
1157
+ });
1158
+
1159
+ // --- Sticky Header Effect ---
1160
+ const header = document.getElementById('header');
1161
+ window.addEventListener('scroll', () => {
1162
+ if (window.scrollY > 50) {
1163
+ header.classList.add('scrolled');
1164
+ } else {
1165
+ header.classList.remove('scrolled');
1166
+ }
1167
+ });
1168
+
1169
+ // --- Booking Interaction ---
1170
+ function prefillBooking(packageName) {
1171
+ const select = document.querySelector('#booking select');
1172
+ select.value = packageName;
1173
+ }
1174
+
1175
+ function showToast(message) {
1176
+ const toast = document.getElementById('toast');
1177
+ const toastMsg = document.getElementById('toastMessage');
1178
+ toastMsg.textContent = message;
1179
+ toast.classList.add('show');
1180
+ setTimeout(() => {
1181
+ toast.classList.remove('show');
1182
+ }, 3000);
1183
+ }
1184
+
1185
+ function handleBooking(e) {
1186
+ e.preventDefault();
1187
+ // Simulate API call
1188
+ const btn = e.target.querySelector('button');
1189
+ const originalText = btn.textContent;
1190
+ btn.textContent = 'Processing...';
1191
+ btn.disabled = true;
1192
+
1193
+ setTimeout(() => {
1194
+ showToast('Booking request sent! We will contact you shortly.');
1195
+ e.target.reset();
1196
+ btn.textContent = originalText;
1197
+ btn.disabled = false;
1198
+ }, 1500);
1199
+ }
1200
+
1201
+ function handleContact(e) {
1202
+ e.preventDefault();
1203
+ showToast('Message sent successfully!');
1204
+ e.target.reset();
1205
+ }
1206
+ </script>
1207
+ </body>
1208
+ </html>