Hugging Face's logo

Spaces:
coreline
/
anycoder-125a4343
Running

App Files Community
coreline commited on
Commit
e4751ff
·
verified ·
1 Parent(s): 332e4a5

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1026 -19
index.html CHANGED
@@ -1,19 +1,1026 @@
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>TripNav Andaman | Explore the Andaman Islands</title>
7
+
8
+ <!-- Google Fonts for Modern Typography -->
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=Montserrat:wght@400;600;700;800&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
12
+
13
+ <!-- Font Awesome for Icons -->
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
15
+
16
+ <style>
17
+ :root {
18
+ /* Andaman Theme Colors: Ocean Blue, Sandy White, Coral Accent */
19
+ --primary-color: #006994; /* Deep Ocean */
20
+ --primary-light: #008fb3;
21
+ --accent-color: #ff6b6b; /* Coral Sunset */
22
+ --text-dark: #333333;
23
+ --text-light: #666666;
24
+ --bg-light: #f8f9fa;
25
+ --white: #ffffff;
26
+ --shadow: 0 4px 20px rgba(0,0,0,0.1);
27
+ --transition: all 0.3s ease;
28
+ }
29
+
30
+ * {
31
+ margin: 0;
32
+ padding: 0;
33
+ box-sizing: border-box;
34
+ }
35
+
36
+ body {
37
+ font-family: 'Poppins', sans-serif;
38
+ color: var(--text-dark);
39
+ background-color: var(--bg-light);
40
+ line-height: 1.6;
41
+ overflow-x: hidden;
42
+ }
43
+
44
+ h1, h2, h3, h4, h5 {
45
+ font-family: 'Montserrat', sans-serif;
46
+ font-weight: 700;
47
+ color: var(--text-dark);
48
+ }
49
+
50
+ a { text-decoration: none; color: inherit; }
51
+ ul { list-style: none; }
52
+
53
+ /* --- Utility Classes --- */
54
+ .container {
55
+ max-width: 1200px;
56
+ margin: 0 auto;
57
+ padding: 0 20px;
58
+ }
59
+
60
+ .btn {
61
+ display: inline-block;
62
+ padding: 12px 30px;
63
+ border-radius: 50px;
64
+ font-weight: 600;
65
+ cursor: pointer;
66
+ transition: var(--transition);
67
+ text-align: center;
68
+ border: none;
69
+ }
70
+
71
+ .btn-primary {
72
+ background-color: var(--primary-color);
73
+ color: var(--white);
74
+ box-shadow: 0 4px 10px rgba(0, 105, 148, 0.3);
75
+ }
76
+
77
+ .btn-primary:hover {
78
+ background-color: var(--primary-light);
79
+ transform: translateY(-2px);
80
+ }
81
+
82
+ .btn-outline {
83
+ border: 2px solid var(--primary-color);
84
+ color: var(--primary-color);
85
+ background: transparent;
86
+ }
87
+
88
+ .btn-outline:hover {
89
+ background-color: var(--primary-color);
90
+ color: var(--white);
91
+ }
92
+
93
+ .section-title {
94
+ text-align: center;
95
+ margin-bottom: 50px;
96
+ }
97
+
98
+ .section-title h2 {
99
+ font-size: 2.5rem;
100
+ margin-bottom: 10px;
101
+ }
102
+
103
+ .section-title p {
104
+ color: var(--text-light);
105
+ max-width: 600px;
106
+ margin: 0 auto;
107
+ }
108
+
109
+ .hidden { display: none !important; }
110
+ .fade-in { animation: fadeIn 0.5s ease-in-out; }
111
+
112
+ @keyframes fadeIn {
113
+ from { opacity: 0; transform: translateY(10px); }
114
+ to { opacity: 1; transform: translateY(0); }
115
+ }
116
+
117
+ /* --- Navigation --- */
118
+ nav {
119
+ background: var(--white);
120
+ padding: 1rem 0;
121
+ position: sticky;
122
+ top: 0;
123
+ z-index: 1000;
124
+ box-shadow: 0 2px 10px rgba(0,0,0,0.05);
125
+ }
126
+
127
+ .nav-container {
128
+ display: flex;
129
+ justify-content: space-between;
130
+ align-items: center;
131
+ }
132
+
133
+ .logo {
134
+ font-size: 1.8rem;
135
+ font-weight: 800;
136
+ color: var(--primary-color);
137
+ display: flex;
138
+ align-items: center;
139
+ gap: 10px;
140
+ }
141
+
142
+ .logo i { color: var(--accent-color); }
143
+
144
+ .nav-links {
145
+ display: flex;
146
+ gap: 30px;
147
+ align-items: center;
148
+ }
149
+
150
+ .nav-item {
151
+ font-weight: 500;
152
+ color: var(--text-dark);
153
+ cursor: pointer;
154
+ transition: color 0.3s;
155
+ }
156
+
157
+ .nav-item:hover { color: var(--primary-color); }
158
+ .nav-item.active { color: var(--primary-color); font-weight: 700; border-bottom: 2px solid var(--accent-color); padding-bottom: 5px; }
159
+
160
+ .user-actions {
161
+ display: flex;
162
+ align-items: center;
163
+ gap: 20px;
164
+ }
165
+
166
+ .cart-icon {
167
+ position: relative;
168
+ cursor: pointer;
169
+ font-size: 1.2rem;
170
+ }
171
+
172
+ .cart-count {
173
+ position: absolute;
174
+ top: -8px;
175
+ right: -10px;
176
+ background: var(--accent-color);
177
+ color: white;
178
+ font-size: 0.7rem;
179
+ width: 18px;
180
+ height: 18px;
181
+ border-radius: 50%;
182
+ display: flex;
183
+ align-items: center;
184
+ justify-content: center;
185
+ }
186
+
187
+ .auth-btn {
188
+ font-size: 0.9rem;
189
+ padding: 8px 20px;
190
+ }
191
+
192
+ /* --- Hero Section --- */
193
+ .hero {
194
+ position: relative;
195
+ height: 80vh;
196
+ display: flex;
197
+ align-items: center;
198
+ justify-content: center;
199
+ text-align: center;
200
+ color: var(--white);
201
+ overflow: hidden;
202
+ }
203
+
204
+ .hero::before {
205
+ content: '';
206
+ position: absolute;
207
+ top: 0; left: 0; width: 100%; height: 100%;
208
+ background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
209
+ z-index: 1;
210
+ }
211
+
212
+ .hero-bg {
213
+ position: absolute;
214
+ top: 0; left: 0; width: 100%; height: 100%;
215
+ background: url('https://images.unsplash.com/photo-1518199266791-5375a83190b7?q=80&w=2070&auto=format&fit=crop') no-repeat center center/cover;
216
+ z-index: 0;
217
+ }
218
+
219
+ .hero-content {
220
+ position: relative;
221
+ z-index: 2;
222
+ max-width: 800px;
223
+ padding: 20px;
224
+ }
225
+
226
+ .hero h1 {
227
+ font-size: 4rem;
228
+ margin-bottom: 20px;
229
+ line-height: 1.1;
230
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
231
+ }
232
+
233
+ .hero p {
234
+ font-size: 1.5rem;
235
+ margin-bottom: 40px;
236
+ opacity: 0.9;
237
+ }
238
+
239
+ .search-bar {
240
+ background: var(--white);
241
+ padding: 20px;
242
+ border-radius: 50px;
243
+ display: flex;
244
+ gap: 20px;
245
+ box-shadow: 0 10px 30px rgba(0,0,0,0.2);
246
+ }
247
+
248
+ .search-item {
249
+ flex: 1;
250
+ display: flex;
251
+ flex-direction: column;
252
+ }
253
+
254
+ .search-label { font-size: 0.8rem; color: var(--text-light); margin-bottom: 5px; font-weight: 600; }
255
+ .search-input { padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; }
256
+
257
+ /* --- Categories --- */
258
+ .categories {
259
+ padding: 80px 0;
260
+ background: var(--white);
261
+ }
262
+
263
+ .category-grid {
264
+ display: grid;
265
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
266
+ gap: 30px;
267
+ }
268
+
269
+ .category-card {
270
+ position: relative;
271
+ height: 300px;
272
+ border-radius: 20px;
273
+ overflow: hidden;
274
+ cursor: pointer;
275
+ box-shadow: var(--shadow);
276
+ transition: var(--transition);
277
+ }
278
+
279
+ .category-card:hover { transform: translateY(-10px); }
280
+
281
+ .category-img {
282
+ width: 100%;
283
+ height: 100%;
284
+ object-fit: cover;
285
+ transition: transform 0.5s;
286
+ }
287
+
288
+ .category-card:hover .category-img { transform: scale(1.1); }
289
+
290
+ .category-overlay {
291
+ position: absolute;
292
+ bottom: 0;
293
+ left: 0;
294
+ width: 100%;
295
+ padding: 30px;
296
+ background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
297
+ color: var(--white);
298
+ }
299
+
300
+ /* --- Packages Section --- */
301
+ .packages-section {
302
+ padding: 80px 0;
303
+ background: var(--bg-light);
304
+ }
305
+
306
+ .packages-grid {
307
+ display: grid;
308
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
309
+ gap: 40px;
310
+ }
311
+
312
+ .package-card {
313
+ background: var(--white);
314
+ border-radius: 20px;
315
+ overflow: hidden;
316
+ box-shadow: var(--shadow);
317
+ transition: var(--transition);
318
+ display: flex;
319
+ flex-direction: column;
320
+ }
321
+
322
+ .package-card:hover { box-shadow: 0 10px 40px rgba(0,0,0,0.15); }
323
+
324
+ .package-img {
325
+ height: 220px;
326
+ width: 100%;
327
+ object-fit: cover;
328
+ }
329
+
330
+ .package-content {
331
+ padding: 25px;
332
+ flex-grow: 1;
333
+ display: flex;
334
+ flex-direction: column;
335
+ }
336
+
337
+ .package-tag {
338
+ background: #e0f7fa;
339
+ color: var(--primary-color);
340
+ padding: 5px 10px;
341
+ border-radius: 20px;
342
+ font-size: 0.75rem;
343
+ font-weight: 700;
344
+ width: fit-content;
345
+ margin-bottom: 15px;
346
+ }
347
+
348
+ .package-title { font-size: 1.5rem; margin-bottom: 10px; }
349
+ .package-rating { color: #f1c40f; margin-bottom: 10px; font-size: 0.9rem; }
350
+ .package-desc { color: var(--text-light); font-size: 0.95rem; margin-bottom: 20px; flex-grow: 1; }
351
+
352
+ .package-footer {
353
+ display: flex;
354
+ justify-content: space-between;
355
+ align-items: center;
356
+ border-top: 1px solid #eee;
357
+ padding-top: 20px;
358
+ margin-top: auto;
359
+ }
360
+
361
+ .price { font-size: 1.5rem; font-weight: 800; color: var(--primary-color); }
362
+ .price span { font-size: 1rem; color: var(--text-light); font-weight: 400; }
363
+
364
+ /* --- Package Details Modal/Overlay --- */
365
+ .detail-overlay {
366
+ position: fixed;
367
+ top: 0; left: 0; width: 100%; height: 100%;
368
+ background: rgba(0,0,0,0.8);
369
+ z-index: 2000;
370
+ display: flex;
371
+ justify-content: center;
372
+ align-items: center;
373
+ padding: 20px;
374
+ opacity: 0;
375
+ pointer-events: none;
376
+ transition: opacity 0.3s;
377
+ }
378
+
379
+ .detail-overlay.active { opacity: 1; pointer-events: all; }
380
+
381
+ .detail-content {
382
+ background: var(--white);
383
+ width: 100%;
384
+ max-width: 900px;
385
+ max-height: 90vh;
386
+ border-radius: 20px;
387
+ overflow-y: auto;
388
+ position: relative;
389
+ animation: slideUp 0.4s ease;
390
+ }
391
+
392
+ @keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
393
+
394
+ .close-detail {
395
+ position: absolute;
396
+ top: 20px;
397
+ right: 20px;
398
+ background: var(--white);
399
+ width: 40px;
400
+ height: 40px;
401
+ border-radius: 50%;
402
+ display: flex;
403
+ align-items: center;
404
+ justify-content: center;
405
+ cursor: pointer;
406
+ z-index: 10;
407
+ box-shadow: 0 2px 10px rgba(0,0,0,0.2);
408
+ }
409
+
410
+ .detail-header { position: relative; height: 400px; }
411
+ .detail-img { width: 100%; height: 100%; object-fit: cover; }
412
+ .detail-badge {
413
+ position: absolute;
414
+ top: 20px;
415
+ right: 20px;
416
+ background: var(--white);
417
+ padding: 10px 20px;
418
+ border-radius: 30px;
419
+ font-weight: 700;
420
+ box-shadow: 0 2px 10px rgba(0,0,0,0.2);
421
+ }
422
+
423
+ .detail-body { padding: 40px; }
424
+ .detail-header-info { margin-bottom: 30px; }
425
+ .detail-header-info h2 { font-size: 2.5rem; margin-bottom: 10px; }
426
+ .detail-meta { display: flex; gap: 20px; color: var(--text-light); font-size: 0.9rem; }
427
+ .meta-item { display: flex; align-items: center; gap: 5px; }
428
+
429
+ .itinerary-section { margin: 30px 0; }
430
+ .itinerary-item { display: flex; gap: 20px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
431
+ .day-tag { background: var(--primary-color); color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
432
+
433
+ .booking-section { background: #f8f9fa; padding: 30px; border-radius: 15px; margin-top: 40px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
434
+ .total-price { font-size: 2rem; font-weight: 800; color: var(--primary-color); }
435
+
436
+ /* --- Dashboard & Admin Tables --- */
437
+ .dashboard-container { padding: 60px 0; }
438
+ .dashboard-header { margin-bottom: 40px; }
439
+
440
+ .table-container {
441
+ background: var(--white);
442
+ border-radius: 15px;
443
+ box-shadow: var(--shadow);
444
+ overflow: hidden;
445
+ }
446
+
447
+ table { width: 100%; border-collapse: collapse; }
448
+ th, td { padding: 20px; text-align: left; border-bottom: 1px solid #eee; }
449
+ th { background-color: #f8f9fa; font-weight: 700; color: var(--text-dark); }
450
+ tr:hover { background-color: #f8f9fa; }
451
+
452
+ .status-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
453
+ .status-upcoming { background: #d4edda; color: #155724; }
454
+ .status-completed { background: #e2e3e5; color: #383d41; }
455
+ .status-pending { background: #fff3cd; color: #856404; }
456
+
457
+ /* --- Admin Panel --- */
458
+ .admin-panel { display: flex; gap: 30px; }
459
+ .admin-sidebar { width: 250px; background: var(--white); padding: 20px; border-radius: 15px; box-shadow: var(--shadow); height: fit-content; }
460
+ .admin-sidebar ul li { padding: 15px; cursor: pointer; border-radius: 10px; transition: 0.3s; margin-bottom: 5px; }
461
+ .admin-sidebar ul li:hover, .admin-sidebar ul li.active { background: var(--primary-color); color: white; }
462
+
463
+ .admin-main { flex: 1; }
464
+ .form-group { margin-bottom: 20px; }
465
+ .form-group label { display: block; margin-bottom: 8px; font-weight: 600; }
466
+ .form-control { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; }
467
+ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
468
+
469
+ .action-btn { padding: 10px 20px; border-radius: 8px; cursor: pointer; border: none; font-weight: 600; }
470
+ .btn-save { background: var(--primary-color); color: white; }
471
+ .btn-delete { background: var(--accent-color); color: white; }
472
+
473
+ /* --- Footer --- */
474
+ footer {
475
+ background: #2c3e50;
476
+ color: #ecf0f1;
477
+ padding: 60px 0 20px;
478
+ }
479
+
480
+ .footer-grid {
481
+ display: grid;
482
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
483
+ gap: 40px;
484
+ margin-bottom: 40px;
485
+ }
486
+
487
+ .footer-col h3 { margin-bottom: 20px; color: var(--accent-color); }
488
+ .footer-col ul li { margin-bottom: 10px; }
489
+ .footer-col ul li a { color: #bdc3c7; transition: 0.3s; }
490
+ .footer-col ul li a:hover { color: var(--white); }
491
+
492
+ .copyright {
493
+ text-align: center;
494
+ padding-top: 20px;
495
+ border-top: 1px solid #34495e;
496
+ font-size: 0.9rem;
497
+ color: #bdc3c7;
498
+ }
499
+
500
+ .copyright a { color: var(--accent-color); text-decoration: underline; }
501
+
502
+ /* --- Responsive --- */
503
+ @media (max-width: 768px) {
504
+ .hero h1 { font-size: 2.5rem; }
505
+ .nav-links { display: none; } /* Simple hide for mobile in this demo, would need hamburger menu in production */
506
+ .user-actions { gap: 10px; }
507
+ .search-bar { flex-direction: column; }
508
+ .form-row { grid-template-columns: 1fr; }
509
+ .detail-overlay { padding: 10px; }
510
+ .detail-content { max-height: 95vh; }
511
+ }
512
+ </style>
513
+ </head>
514
+ <body>
515
+
516
+ <!-- Navigation -->
517
+ <nav>
518
+ <div class="container nav-container">
519
+ <a href="#" class="logo" onclick="app.navigate('home')">
520
+ <i class="fa-solid fa-island-tropical"></i> TripNav Andaman
521
+ </a>
522
+ <ul class="nav-links">
523
+ <li class="nav-item active" onclick="app.navigate('home')">Home</li>
524
+ <li class="nav-item" onclick="app.navigate('packages')">Packages</li>
525
+ <li class="nav-item" onclick="app.navigate('dashboard')">My Trips</li>
526
+ <li class="nav-item" onclick="app.navigate('admin')">Admin</li>
527
+ </ul>
528
+ <div class="user-actions">
529
+ <div class="cart-icon" onclick="alert('This is a demo cart feature!')">
530
+ <i class="fa-solid fa-cart-shopping"></i>
531
+ <span class="cart-count" id="cartCount">0</span>
532
+ </div>
533
+ <button class="btn auth-btn" onclick="app.toggleAuth()">Login / Sign Up</button>
534
+ </div>
535
+ </div>
536
+ </nav>
537
+
538
+ <!-- Main Content Area -->
539
+ <main id="main-content">
540
+ <!-- Content injected via JS -->
541
+ </main>
542
+
543
+ <!-- Footer -->
544
+ <footer>
545
+ <div class="container">
546
+ <div class="footer-grid">
547
+ <div class="footer-col">
548
+ <h3>TripNav Andaman</h3>
549
+ <p>Your trusted partner for unforgettable experiences in the Andaman Islands. Curated adventures, luxury stays, and cultural immersion.</p>
550
+ </div>
551
+ <div class="footer-col">
552
+ <h3>Quick Links</h3>
553
+ <ul>
554
+ <li><a href="#" onclick="app.navigate('home')">Home</a></li>
555
+ <li><a href="#" onclick="app.navigate('packages')">Book a Tour</a></li>
556
+ <li><a href="#">Contact Us</a></li>
557
+ <li><a href="#">FAQs</a></li>
558
+ </ul>
559
+ </div>
560
+ <div class="footer-col">
561
+ <h3>Categories</h3>
562
+ <ul>
563
+ <li><a href="#" onclick="app.filterPackages('water-sports')">Water Sports</a></li>
564
+ <li><a href="#" onclick="app.filterPackages('cultural')">Cultural Tours</a></li>
565
+ <li><a href="#" onclick="app.filterPackages('luxury')">Luxury Escapes</a></li>
566
+ </ul>
567
+ </div>
568
+ <div class="footer-col">
569
+ <h3>Contact</h3>
570
+ <ul>
571
+ <li><i class="fa-solid fa-phone" style="color: var(--accent-color); margin-right: 10px;"></i> +91 8888 123 456</li>
572
+ <li><i class="fa-solid fa-envelope" style="color: var(--accent-color); margin-right: 10px;"></i> support@tripnavandaman.com</li>
573
+ <li><i class="fa-solid fa-location-dot" style="color: var(--accent-color); margin-right: 10px;"></i> Port Blair, Andaman</li>
574
+ </ul>
575
+ </div>
576
+ </div>
577
+ <div class="copyright">
578
+ &copy; 2023 TripNav Andaman. All Rights Reserved. <br>
579
+ Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--accent-color);">anycoder</a>
580
+ </div>
581
+ </div>
582
+ </footer>
583
+
584
+ <!-- Package Detail Modal -->
585
+ <div id="packageDetailModal" class="detail-overlay" onclick="if(event.target === this) app.closeDetail()">
586
+ <div class="detail-content">
587
+ <div class="close-detail" onclick="app.closeDetail()">
588
+ <i class="fa-solid fa-xmark"></i>
589
+ </div>
590
+ <div id="detailContentContainer">
591
+ <!-- Content injected via JS -->
592
+ </div>
593
+ </div>
594
+ </div>
595
+
596
+ <script>
597
+ // --- Mock Data ---
598
+ const packagesData = [
599
+ {
600
+ id: 1,
601
+ title: "Radhanagar Beach & Water Sports",
602
+ category: "water-sports",
603
+ price: 2500,
604
+ rating: 4.8,
605
+ reviews: 1240,
606
+ image: "https://images.unsplash.com/photo-1539253776667-57d631212386?q=80&w=800&auto=format&fit=crop",
607
+ description: "Experience the crystal-clear waters of Radhanagar Beach with a package including parasailing, jet skiing, and banana boat rides. Perfect for adrenaline junkies.",
608
+ itinerary: [
609
+ { day: 1, activity: "Arrival at Havelock Island & Check-in" },
610
+ { day: 1, activity: "Sunset cruise to Radhanagar Beach" },
611
+ { day: 1, activity: "Full Day Water Sports Activity (Parasailing, Jet Ski)" },
612
+ { day: 1, activity: "Evening free at beach resort" }
613
+ ],
614
+ inclusions: ["Transport", "Equipment", "Guide", "Lunch"]
615
+ },
616
+ {
617
+ id: 2,
618
+ title: "Andaman Heritage Cultural Tour",
619
+ category: "cultural",
620
+ price: 3200,
621
+ rating: 4.6,
622
+ reviews: 850,
623
+ image: "https://images.unsplash.com/photo-1516627117852-36564d556756?q=80&w=800&auto=format&fit=crop",
624
+ description: "Dive deep into the rich history and diverse culture of the Andamans. Visit the Cellular Jail, Chatham Island, and interact with local tribes (regulated zones).",
625
+ itinerary: [
626
+ { day: 1, activity: "Pickup from Port Blair Hotel" },
627
+ { day: 1, activity: "Guided tour of Cellular Jail (Light & Sound Show)" },
628
+ { day: 1, activity: "Visiting Anthropological Museum" },
629
+ { day: 1, activity: "Evening at Chowru Bazaar for local crafts" }
630
+ ],
631
+ inclusions: ["Guide", "Entry Tickets", "AC Transport", " Dinner"]
632
+ },
633
+ {
634
+ id: 3,
635
+ title: "Luxury Havelock Island Retreat",
636
+ category: "luxury",
637
+ price: 15000,
638
+ rating: 4.9,
639
+ reviews: 320,
640
+ image: "https://images.unsplash.com/photo-1566350453-5915955a8c31?q=80&w=800&auto=format&fit=crop",
641
+ description: "Indulge in a 4-night luxury stay at a 5-star beachfront resort. Includes private beach access, spa credits, and gourmet dining.",
642
+ itinerary: [
643
+ { day: 1, activity: "Arrival & Welcome Drink" },
644
+ { day: 1, activity: "Spa Treatment (60 mins)" },
645
+ { day: 1, activity: "Gourmet Dinner at Seaside Restaurant" },
646
+ { day: 2, activity: "Private Catamaran Cruise" }
647
+ ],
648
+ inclusions: ["4 Nights Luxury Stay", "Daily Breakfast", "Spa Credit", "Private Transfers"]
649
+ },
650
+ {
651
+ id: 4,
652
+ title: "Neil Island Adventure",
653
+ category: "water-sports",
654
+ price: 1800,
655
+ rating: 4.5,
656
+ reviews: 600,
657
+ image: "https://images.unsplash.com/photo-1544556185-8f384681a0a0?q=80&w=800&auto=format&fit=crop",
658
+ description: "Explore the coral reefs of Neil Island with snorkeling and scuba diving. Visit the iconic Laxmanpur Beach and Sitapur Beach.",
659
+ itinerary: [
660
+ { day: 1, activity: "Boat ride to Neil Island" },
661
+ { day: 1, activity: "Snorkeling at Neil Island Reef" },
662
+ { day: 1, activity: "Lunch at a local beach shack" },
663
+ { day: 1, activity: "Bicycle tour of the island" }
664
+ ],
665
+ inclusions: ["Boat Tickets", "Snorkeling Gear", "Lunch", "Guide"]
666
+ },
667
+ {
668
+ id: 5,
669
+ title: "Port Blair City Explorer",
670
+ category: "cultural",
671
+ price: 1200,
672
+ rating: 4.3,
673
+ reviews: 450,
674
+ image: "https://images.unsplash.com/photo-1596259772435-3e36a7887b48?q=80&w=800&auto=format&fit=crop",
675
+ description: "A perfect 2-day tour for first-time visitors. Covers all major landmarks in the capital city including Cellular Jail and Chatham Island.",
676
+ itinerary: [
677
+ { day: 1, activity: "Cellular Jail History Tour" },
678
+ { day: 1, activity: "Light & Sound Show" },
679
+ { day: 2, activity: "Chatham Island Beaches" },
680
+ { day: 2, activity: "Shopping at Market" }
681
+ ],
682
+ inclusions: ["Hotel Stay", "Meals", "Local Transport", "Guide"]
683
+ },
684
+ {
685
+ id: 6,
686
+ title: "Andaman Scuba Diving Masterclass",
687
+ category: "water-sports",
688
+ price: 8500,
689
+ rating: 4.8,
690
+ reviews: 210,
691
+ image: "https://images.unsplash.com/photo-1546519638-68e1b9927184?q=80&w=800&auto=format&fit=crop",
692
+ description: "Get PADI certified or improve your skills with professional instructors. Explore the vibrant marine life of the Andaman Sea.",
693
+ itinerary: [
694
+ { day: 1, activity: "Theory Session & Pool Training" },
695
+ { day: 2, activity: "Deep Sea Diving (2 dives)" },
696
+ { day: 3, activity: "Examination & Certification" }
697
+ ],
698
+ inclusions: ["Equipment", "Certification Fee", "Instructor", "Boat Trips"]
699
+ }
700
+ ];
701
+
702
+ const userData = {
703
+ name: "Tourist User",
704
+ bookings: [
705
+ { id: 101, package: "Radhanagar Beach & Water Sports", date: "2023-12-15", status: "upcoming", price: 2500 },
706
+ { id: 102, package: "Port Blair City Explorer", date: "2023-11-20", status: "completed", price: 1200 }
707
+ ]
708
+ };
709
+
710
+ // --- Application Logic ---
711
+ const app = {
712
+ currentPage: 'home',
713
+ cartCount: 0,
714
+
715
+ init: function() {
716
+ this.renderHome();
717
+ this.updateCartUI();
718
+ },
719
+
720
+ navigate: function(page) {
721
+ this.currentPage = page;
722
+
723
+ // Update Nav Active States
724
+ document.querySelectorAll('.nav-item').forEach(item => {
725
+ item.classList.remove('active');
726
+ if(item.innerText.toLowerCase().includes(page) || (page === 'home' && item.innerText === 'Home')) {
727
+ item.classList.add('active');
728
+ }
729
+ });
730
+
731
+ const mainContent = document.getElementById('main-content');
732
+ mainContent.innerHTML = ''; // Clear content
733
+
734
+ if (page === 'home') this.renderHome();
735
+ else if (page === 'packages') this.renderPackages();
736
+ else if (page === 'dashboard') this.renderDashboard();
737
+ else if (page === 'admin') this.renderAdmin();
738
+ },
739
+
740
+ // --- Render Functions ---
741
+
742
+ renderHome: function() {
743
+ const mainContent = document.getElementById('main-content');
744
+ mainContent.innerHTML = `
745
+ <!-- Hero Section -->
746
+ <section class="hero">
747
+ <div class="hero-bg"></div>
748
+ <div class="hero-content">
749
+ <h1>Discover the Paradise of Andaman</h1>
750
+ <p>Crystal clear waters, white sandy beaches, and unforgettable adventures.</p>
751
+ <div class="search-bar">
752
+ <div class="search-item">
753
+ <label class="search-label">Destination</label>
754
+ <input type="text" class="search-input" value="Andaman Islands" readonly>
755
+ </div>
756
+ <div class="search-item">
757
+ <label class="search-label">Category</label>
758
+ <select class="search-input" onchange="app.navigate('packages'); app.filterPackages(this.value)">
759
+ <option value="">All Activities</option>
760
+ <option value="water-sports">Water Sports</option>
761
+ <option value="cultural">Cultural Tours</option>
762
+ <option value="luxury">Luxury Escapes</option>
763
+ </select>
764
+ </div>
765
+ <div class="search-item">
766
+ <label class="search-label">Dates</label>
767
+ <input type="date" class="search-input">
768
+ </div>
769
+ <div class="search-item" style="justify-content: center;">
770
+ <button class="btn btn-primary" style="height: 100%; width: 100%;" onclick="app.navigate('packages')">Search Tours</button>
771
+ </div>
772
+ </div>
773
+ </div>
774
+ </section>
775
+
776
+ <!-- Categories -->
777
+ <section class="categories">
778
+ <div class="container">
779
+ <div class="section-title">
780
+ <h2>Explore by Interest</h2>
781
+ <p>Choose from our curated collection of experiences tailored to your travel style.</p>
782
+ </div>
783
+ <div class="category-grid">
784
+ <div class="category-card" onclick="app.filterPackages('water-sports')">
785
+ <img src="https://images.unsplash.com/photo-1539253776667-57d631212386?q=80&w=600&auto=format&fit=crop" class="category-img" alt="Water Sports">
786
+ <div class="category-overlay">
787
+ <h3>Adventure Water Sports</h3>
788
+ <p>Diving, Snorkeling, Jet Skiing</p>
789
+ </div>
790
+ </div>
791
+ <div class="category-card" onclick="app.filterPackages('cultural')">
792
+ <img src="https://images.unsplash.com/photo-1516627117852-36564d556756?q=80&w=600&auto=format&fit=crop" class="category-img" alt="Culture">
793
+ <div class="category-overlay">
794
+ <h3>Cultural Tours</h3>
795
+ <p>History, Museums & Local Life</p>
796
+ </div>
797
+ </div>
798
+ <div class="category-card" onclick="app.filterPackages('luxury')">
799
+ <img src="https://images.unsplash.com/photo-1566350453-5915955a8c31?q=80&w=600&auto=format&fit=crop" class="category-img" alt="Luxury">
800
+ <div class="category-overlay">
801
+ <h3>Luxury Escape</h3>
802
+ <p>5-Star Resorts & Private Tours</p>
803
+ </div>
804
+ </div>
805
+ </div>
806
+ </div>
807
+ </section>
808
+
809
+ <!-- Featured Packages -->
810
+ <section class="packages-section">
811
+ <div class="container">
812
+ <div class="section-title">
813
+ <h2>Featured Packages</h2>
814
+ <p>Top-rated experiences chosen by fellow travelers.</p>
815
+ </div>
816
+ <div class="packages-grid" id="homePackagesGrid">
817
+ ${this.generatePackageCards(packagesData.slice(0, 3))}
818
+ </div>
819
+ <div style="text-align: center; margin-top: 40px;">
820
+ <button class="btn btn-outline" onclick="app.navigate('packages')">View All Packages <i class="fa-solid fa-arrow-right"></i></button>
821
+ </div>
822
+ </div>
823
+ </section>
824
+ `;
825
+ },
826
+
827
+ renderPackages: function() {
828
+ const mainContent = document.getElementById('main-content');
829
+ mainContent.innerHTML = `
830
+ <div style="background: #e0f7fa; padding: 40px 0; text-align: center;">
831
+ <div class="container">
832
+ <h2 style="color: var(--primary-color);">Find Your Perfect Andaman Adventure</h2>
833
+ <p>Browse our full collection of curated tours and activities.</p>
834
+ <div style="margin-top: 20px;">
835
+ <button class="btn btn-primary" onclick="app.filterPackages('')">All Packages</button>
836
+ <button class="btn btn-outline" onclick="app.filterPackages('water-sports')">Water Sports</button>
837
+ <button class="btn btn-outline" onclick="app.filterPackages('cultural')">Cultural</button>
838
+ <button class="btn btn-outline" onclick="app.filterPackages('luxury')">Luxury</button>
839
+ </div>
840
+ </div>
841
+ </div>
842
+ <div class="container" style="padding-top: 60px;">
843
+ <div class="packages-grid" id="packagesGrid">
844
+ ${this.generatePackageCards(packagesData)}
845
+ </div>
846
+ </div>
847
+ `;
848
+ },
849
+
850
+ renderDashboard: function() {
851
+ const mainContent = document.getElementById('main-content');
852
+ mainContent.innerHTML = `
853
+ <div class="container dashboard-container">
854
+ <div class="dashboard-header">
855
+ <h2>Welcome back, ${userData.name}</h2>
856
+ <p>Manage your upcoming trips and booking history.</p>
857
+ </div>
858
+ <div class="table-container">
859
+ <table>
860
+ <thead>
861
+ <tr>
862
+ <th>Trip Name</th>
863
+ <th>Date</th>
864
+ <th>Price</th>
865
+ <th>Status</th>
866
+ <th>Action</th>
867
+ </tr>
868
+ </thead>
869
+ <tbody id="dashboardTableBody">
870
+ ${this.generateDashboardRows(userData.bookings)}
871
+ </tbody>
872
+ </table>
873
+ </div>
874
+ </div>
875
+ `;
876
+ },
877
+
878
+ renderAdmin: function() {
879
+ const mainContent = document.getElementById('main-content');
880
+ mainContent.innerHTML = `
881
+ <div class="container dashboard-container">
882
+ <div class="admin-panel">
883
+ <div class="admin-sidebar">
884
+ <ul>
885
+ <li onclick="alert('Dashboard stats would go here')" class="active">Overview</li>
886
+ <li onclick="alert('Manage listings')">Manage Listings</li>
887
+ <li onclick="alert('Manage bookings')">Manage Bookings</li>
888
+ <li onclick="alert('View customer inquiries')">Customer Inquiries</li>
889
+ </ul>
890
+ </div>
891
+ <div class="admin-main">
892
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
893
+ <h2>Manage Listings</h2>
894
+ <button class="btn btn-primary" onclick="alert('Add new package functionality would open here')"><i class="fa-solid fa-plus"></i> Add New Package</button>
895
+ </div>
896
+ <div class="table-container">
897
+ <table>
898
+ <thead>
899
+ <tr>
900
+ <th>Package Name</th>
901
+ <th>Category</th>
902
+ <th>Price</th>
903
+ <th>Active</th>
904
+ <th>Actions</th>
905
+ </tr>
906
+ </thead>
907
+ <tbody>
908
+ ${this.generateAdminRows(packagesData)}
909
+ </tbody>
910
+ </table>
911
+ </div>
912
+ </div>
913
+ </div>
914
+ </div>
915
+ `;
916
+ },
917
+
918
+ // --- Helper Functions ---
919
+
920
+ generatePackageCards: function(data) {
921
+ return data.map(pkg => `
922
+ <div class="package-card">
923
+ <img src="${pkg.image}" class="package-img" alt="${pkg.title}">
924
+ <div class="package-content">
925
+ <span class="package-tag">${pkg.category.replace('-', ' ').toUpperCase()}</span>
926
+ <h3 class="package-title">${pkg.title}</h3>
927
+ <div class="package-rating">
928
+ <i class="fa-solid fa-star"></i> ${pkg.rating} (${pkg.reviews} reviews)
929
+ </div>
930
+ <p class="package-desc">${pkg.description}</p>
931
+ <div class="package-footer">
932
+ <div>
933
+ <span class="price">₹${pkg.price}</span>
934
+ <span>/ per person</span>
935
+ </div>
936
+ <button class="btn btn-primary" onclick="app.openPackageDetail(${pkg.id})">Book Now</button>
937
+ </div>
938
+ </div>
939
+ </div>
940
+ `).join('');
941
+ },
942
+
943
+ generateDashboardRows: function(bookings) {
944
+ return bookings.map(b => `
945
+ <tr>
946
+ <td>${b.package}</td>
947
+ <td>${b.date}</td>
948
+ <td>₹${b.price}</td>
949
+ <td><span class="status-badge status-${b.status}">${b.status.toUpperCase()}</span></td>
950
+ <td><button class="btn btn-outline" style="padding: 5px 10px; font-size: 0.8rem;">View Details</button></td>
951
+ </tr>
952
+ `).join('');
953
+ },
954
+
955
+ generateAdminRows: function(listings) {
956
+ return listings.map(l => `
957
+ <tr>
958
+ <td>${l.title}</td>
959
+ <td>${l.category}</td>
960
+ <td>₹${l.price}</td>
961
+ <td><i class="fa-solid fa-check" style="color: green;"></i></td>
962
+ <td>
963
+ <button class="action-btn btn-delete" onclick="app.deleteListing(${l.id})"><i class="fa-solid fa-trash"></i></button>
964
+ </td>
965
+ </tr>
966
+ `).join('');
967
+ },
968
+
969
+ filterPackages: function(category) {
970
+ const grid = document.getElementById('packagesGrid') || document.getElementById('homePackagesGrid');
971
+ if (!grid) return;
972
+
973
+ let filtered = packagesData;
974
+ if (category) {
975
+ filtered = packagesData.filter(p => p.category === category);
976
+ }
977
+
978
+ grid.innerHTML = filtered.length > 0
979
+ ? this.generatePackageCards(filtered)
980
+ : '<div style="grid-column: 1/-1; text-align: center; padding: 50px;"><h3>No packages found in this category.</h3></div>';
981
+ },
982
+
983
+ openPackageDetail: function(id) {
984
+ const pkg = packagesData.find(p => p.id === id);
985
+ if (!pkg) return;
986
+
987
+ const container = document.getElementById('detailContentContainer');
988
+
989
+ // Generate Itinerary HTML
990
+ const itineraryHTML = pkg.itinerary.map(item => `
991
+ <div class="itinerary-item">
992
+ <div class="day-tag">Day ${item.day}</div>
993
+ <div>
994
+ <h4 style="color: var(--primary-color); margin-bottom: 5px;">${item.activity}</h4>
995
+ <p style="color: var(--text-light); font-size: 0.9rem;">Detailed schedule and meeting points provided upon booking.</p>
996
+ </div>
997
+ </div>
998
+ `).join('');
999
+
1000
+ container.innerHTML = `
1001
+ <div class="detail-header">
1002
+ <img src="${pkg.image}" class="detail-img" alt="${pkg.title}">
1003
+ <div class="detail-badge">
1004
+ <i class="fa-solid fa-star" style="color: #f1c40f;"></i> ${pkg.rating} | ${pkg.reviews} Reviews
1005
+ </div>
1006
+ </div>
1007
+ <div class="detail-body">
1008
+ <div class="detail-header-info">
1009
+ <h2>${pkg.title}</h2>
1010
+ <div class="detail-meta">
1011
+ <div class="meta-item"><i class="fa-solid fa-clock"></i> 1 Day / ${pkg.itinerary.length} Days</div>
1012
+ <div class="meta-item"><i class="fa-solid fa-person-hiking"></i> Moderate Activity</div>
1013
+ <div class="meta-item"><i class="fa-solid fa-location-dot"></i> ${pkg.category === 'water-sports' ? 'Havelock/Neil Island' : 'Port Blair'}</div>
1014
+ </div>
1015
+ </div>
1016
+
1017
+ <h3>About this Experience</h3>
1018
+ <p style="margin-bottom: 30px; color: var(--text-light);">${pkg.description}</p>
1019
+
1020
+ <div class="itinerary-section">
1021
+ <h3>Itinerary</h3>
1022
+ ${itineraryHTML}
1023
+ </div>
1024
+
1025
+ <div class="itinerary-section">
1026
+ <h3