Hugging Face's logo

Spaces:
designfailure
/
anycoder-58f0d77e
Running

App Files Community
designfailure commited on
Commit
3260046
·
verified ·
1 Parent(s): 2a47c92

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +769 -19
index.html CHANGED
@@ -1,19 +1,769 @@
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>SafeTrip | Travel Cancellation Insurance</title>
7
+
8
+ <!-- Fonts -->
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=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
12
+
13
+ <!-- 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
+ /* --- CSS Variables & Reset --- */
18
+ :root {
19
+ --primary: #0ea5e9; /* Sky Blue */
20
+ --primary-dark: #0284c7;
21
+ --secondary: #1e293b; /* Slate Dark */
22
+ --accent: #f43f5e; /* Rose for alerts/urgent */
23
+ --bg-light: #f8fafc;
24
+ --text-main: #334155;
25
+ --text-light: #64748b;
26
+ --white: #ffffff;
27
+ --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
28
+ --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1);
29
+ --shadow-lg: 0 25px 50px -12px rgba(0,0,0,0.1);
30
+ --radius: 12px;
31
+ --transition: all 0.3s ease;
32
+ }
33
+
34
+ * {
35
+ margin: 0;
36
+ padding: 0;
37
+ box-sizing: border-box;
38
+ }
39
+
40
+ html {
41
+ scroll-behavior: smooth;
42
+ }
43
+
44
+ body {
45
+ font-family: 'Inter', sans-serif;
46
+ color: var(--text-main);
47
+ background-color: var(--bg-light);
48
+ line-height: 1.6;
49
+ overflow-x: hidden;
50
+ }
51
+
52
+ a { text-decoration: none; color: inherit; }
53
+ ul { list-style: none; }
54
+
55
+ /* --- Layout Utilities --- */
56
+ .container {
57
+ max-width: 1200px;
58
+ margin: 0 auto;
59
+ padding: 0 20px;
60
+ }
61
+
62
+ .section {
63
+ padding: 80px 0;
64
+ }
65
+
66
+ .text-center { text-align: center; }
67
+
68
+ h1, h2, h3, h4 {
69
+ color: var(--secondary);
70
+ font-weight: 700;
71
+ line-height: 1.2;
72
+ }
73
+
74
+ .btn {
75
+ display: inline-block;
76
+ padding: 12px 32px;
77
+ border-radius: 50px;
78
+ font-weight: 600;
79
+ cursor: pointer;
80
+ transition: var(--transition);
81
+ border: none;
82
+ font-size: 1rem;
83
+ }
84
+
85
+ .btn-primary {
86
+ background-color: var(--primary);
87
+ color: var(--white);
88
+ box-shadow: 0 4px 14px 0 rgba(14, 165, 233, 0.39);
89
+ }
90
+
91
+ .btn-primary:hover {
92
+ background-color: var(--primary-dark);
93
+ transform: translateY(-2px);
94
+ box-shadow: 0 6px 20px rgba(14, 165, 233, 0.23);
95
+ }
96
+
97
+ .btn-outline {
98
+ background: transparent;
99
+ border: 2px solid var(--secondary);
100
+ color: var(--secondary);
101
+ }
102
+
103
+ .btn-outline:hover {
104
+ background: var(--secondary);
105
+ color: var(--white);
106
+ }
107
+
108
+ /* --- Header --- */
109
+ header {
110
+ position: fixed;
111
+ top: 0;
112
+ width: 100%;
113
+ z-index: 1000;
114
+ background: rgba(255, 255, 255, 0.8);
115
+ backdrop-filter: blur(12px);
116
+ border-bottom: 1px solid rgba(0,0,0,0.05);
117
+ }
118
+
119
+ nav {
120
+ display: flex;
121
+ justify-content: space-between;
122
+ align-items: center;
123
+ height: 80px;
124
+ }
125
+
126
+ .logo {
127
+ font-size: 1.5rem;
128
+ font-weight: 800;
129
+ color: var(--secondary);
130
+ display: flex;
131
+ align-items: center;
132
+ gap: 8px;
133
+ }
134
+
135
+ .logo i { color: var(--primary); }
136
+
137
+ .nav-links {
138
+ display: flex;
139
+ gap: 40px;
140
+ }
141
+
142
+ .nav-links a {
143
+ font-weight: 500;
144
+ font-size: 0.95rem;
145
+ color: var(--text-main);
146
+ transition: var(--transition);
147
+ }
148
+
149
+ .nav-links a:hover { color: var(--primary); }
150
+
151
+ .anycoder-link {
152
+ font-size: 0.8rem;
153
+ background: var(--secondary);
154
+ color: white !important;
155
+ padding: 6px 12px;
156
+ border-radius: 20px;
157
+ font-weight: 600;
158
+ }
159
+
160
+ .anycoder-link:hover { background: var(--primary) !important; }
161
+
162
+ .mobile-menu-btn { display: none; font-size: 1.5rem; cursor: pointer; }
163
+
164
+ /* --- Hero Section --- */
165
+ .hero {
166
+ padding-top: 160px;
167
+ padding-bottom: 100px;
168
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
169
+ position: relative;
170
+ overflow: hidden;
171
+ }
172
+
173
+ /* Decorative background circles */
174
+ .hero::before {
175
+ content: '';
176
+ position: absolute;
177
+ top: -10%;
178
+ right: -10%;
179
+ width: 600px;
180
+ height: 600px;
181
+ background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, rgba(255,255,255,0) 70%);
182
+ border-radius: 50%;
183
+ z-index: 0;
184
+ }
185
+
186
+ .hero-content {
187
+ display: grid;
188
+ grid-template-columns: 1fr 1fr;
189
+ gap: 60px;
190
+ align-items: center;
191
+ position: relative;
192
+ z-index: 1;
193
+ }
194
+
195
+ .hero-text h1 {
196
+ font-size: 3.5rem;
197
+ margin-bottom: 20px;
198
+ letter-spacing: -1px;
199
+ }
200
+
201
+ .hero-text p {
202
+ font-size: 1.2rem;
203
+ color: var(--text-light);
204
+ margin-bottom: 40px;
205
+ max-width: 500px;
206
+ }
207
+
208
+ .hero-image {
209
+ position: relative;
210
+ }
211
+
212
+ .hero-image img {
213
+ width: 100%;
214
+ border-radius: 20px;
215
+ box-shadow: var(--shadow-lg);
216
+ }
217
+
218
+ /* --- Calculator Section --- */
219
+ .calculator-section {
220
+ background: var(--white);
221
+ margin-top: -50px;
222
+ position: relative;
223
+ z-index: 10;
224
+ border-radius: 20px;
225
+ box-shadow: var(--shadow-lg);
226
+ max-width: 900px;
227
+ margin-left: auto;
228
+ margin-right: auto;
229
+ padding: 50px;
230
+ }
231
+
232
+ .calc-grid {
233
+ display: grid;
234
+ grid-template-columns: 1.5fr 1fr;
235
+ gap: 40px;
236
+ align-items: center;
237
+ }
238
+
239
+ .input-group label {
240
+ display: block;
241
+ font-weight: 600;
242
+ margin-bottom: 15px;
243
+ color: var(--secondary);
244
+ }
245
+
246
+ input[type="range"] {
247
+ width: 100%;
248
+ height: 8px;
249
+ background: #e2e8f0;
250
+ border-radius: 5px;
251
+ outline: none;
252
+ -webkit-appearance: none;
253
+ }
254
+
255
+ input[type="range"]::-webkit-slider-thumb {
256
+ -webkit-appearance: none;
257
+ width: 24px;
258
+ height: 24px;
259
+ background: var(--primary);
260
+ border-radius: 50%;
261
+ cursor: pointer;
262
+ box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2);
263
+ transition: var(--transition);
264
+ }
265
+
266
+ input[type="range"]::-webkit-slider-thumb:hover {
267
+ transform: scale(1.1);
268
+ }
269
+
270
+ .trip-cost-display {
271
+ font-size: 1.5rem;
272
+ font-weight: 700;
273
+ color: var(--primary);
274
+ margin-top: 10px;
275
+ }
276
+
277
+ .quote-box {
278
+ background: var(--secondary);
279
+ color: var(--white);
280
+ padding: 30px;
281
+ border-radius: 16px;
282
+ text-align: center;
283
+ }
284
+
285
+ .quote-price {
286
+ font-size: 2.5rem;
287
+ font-weight: 700;
288
+ margin: 10px 0;
289
+ }
290
+
291
+ .quote-sub {
292
+ font-size: 0.9rem;
293
+ opacity: 0.8;
294
+ margin-bottom: 20px;
295
+ }
296
+
297
+ /* --- Features --- */
298
+ .features-grid {
299
+ display: grid;
300
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
301
+ gap: 30px;
302
+ margin-top: 50px;
303
+ }
304
+
305
+ .feature-card {
306
+ background: var(--white);
307
+ padding: 30px;
308
+ border-radius: 16px;
309
+ transition: var(--transition);
310
+ border: 1px solid transparent;
311
+ }
312
+
313
+ .feature-card:hover {
314
+ transform: translateY(-5px);
315
+ border-color: #e2e8f0;
316
+ box-shadow: var(--shadow-md);
317
+ }
318
+
319
+ .icon-box {
320
+ width: 60px;
321
+ height: 60px;
322
+ background: #e0f2fe;
323
+ color: var(--primary);
324
+ display: flex;
325
+ align-items: center;
326
+ justify-content: center;
327
+ border-radius: 12px;
328
+ font-size: 1.5rem;
329
+ margin-bottom: 20px;
330
+ }
331
+
332
+ .feature-card h3 { margin-bottom: 10px; font-size: 1.25rem; }
333
+ .feature-card p { color: var(--text-light); font-size: 0.95rem; }
334
+
335
+ /* --- Pricing Plans --- */
336
+ .plans-section { background: var(--white); }
337
+
338
+ .plans-grid {
339
+ display: grid;
340
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
341
+ gap: 30px;
342
+ margin-top: 50px;
343
+ }
344
+
345
+ .plan-card {
346
+ background: var(--bg-light);
347
+ padding: 40px;
348
+ border-radius: 20px;
349
+ position: relative;
350
+ transition: var(--transition);
351
+ border: 1px solid #e2e8f0;
352
+ }
353
+
354
+ .plan-card.popular {
355
+ background: var(--white);
356
+ border: 2px solid var(--primary);
357
+ transform: scale(1.05);
358
+ box-shadow: var(--shadow-lg);
359
+ }
360
+
361
+ .badge {
362
+ position: absolute;
363
+ top: -12px;
364
+ left: 50%;
365
+ transform: translateX(-50%);
366
+ background: var(--primary);
367
+ color: white;
368
+ padding: 5px 15px;
369
+ border-radius: 20px;
370
+ font-size: 0.8rem;
371
+ font-weight: 600;
372
+ }
373
+
374
+ .plan-name { font-size: 1.2rem; font-weight: 600; color: var(--text-light); }
375
+ .plan-price { font-size: 3rem; font-weight: 700; color: var(--secondary); margin: 15px 0; }
376
+ .plan-price span { font-size: 1rem; color: var(--text-light); font-weight: 400; }
377
+
378
+ .plan-features { margin: 30px 0; }
379
+
380
+ .plan-features li {
381
+ margin-bottom: 15px;
382
+ display: flex;
383
+ align-items: center;
384
+ gap: 10px;
385
+ color: var(--text-main);
386
+ }
387
+
388
+ .plan-features li i { color: #10b981; }
389
+ .plan-features li.disabled { color: #cbd5e1; }
390
+ .plan-features li.disabled i { color: #cbd5e1; }
391
+
392
+ /* --- FAQ --- */
393
+ .faq-item {
394
+ background: var(--white);
395
+ border-radius: 10px;
396
+ margin-bottom: 15px;
397
+ overflow: hidden;
398
+ box-shadow: var(--shadow-sm);
399
+ border: 1px solid #f1f5f9;
400
+ }
401
+
402
+ .faq-question {
403
+ padding: 20px;
404
+ cursor: pointer;
405
+ display: flex;
406
+ justify-content: space-between;
407
+ align-items: center;
408
+ font-weight: 600;
409
+ }
410
+
411
+ .faq-answer {
412
+ max-height: 0;
413
+ overflow: hidden;
414
+ transition: max-height 0.3s ease-out;
415
+ padding: 0 20px;
416
+ color: var(--text-light);
417
+ }
418
+
419
+ .faq-item.active .faq-answer {
420
+ max-height: 200px;
421
+ padding-bottom: 20px;
422
+ }
423
+
424
+ .faq-item.active i {
425
+ transform: rotate(180deg);
426
+ color: var(--primary);
427
+ }
428
+
429
+ /* --- Footer --- */
430
+ footer {
431
+ background: var(--secondary);
432
+ color: #94a3b8;
433
+ padding: 80px 0 40px;
434
+ }
435
+
436
+ .footer-grid {
437
+ display: grid;
438
+ grid-template-columns: 2fr 1fr 1fr 1fr;
439
+ gap: 40px;
440
+ margin-bottom: 60px;
441
+ }
442
+
443
+ .footer-brand p { margin-top: 20px; max-width: 300px; }
444
+
445
+ .footer-col h4 { color: var(--white); margin-bottom: 20px; }
446
+ .footer-col ul li { margin-bottom: 12px; }
447
+ .footer-col ul li a:hover { color: var(--white); }
448
+
449
+ .copyright {
450
+ border-top: 1px solid #334155;
451
+ padding-top: 30px;
452
+ text-align: center;
453
+ font-size: 0.9rem;
454
+ }
455
+
456
+ /* --- Responsive --- */
457
+ @media (max-width: 968px) {
458
+ .hero-content { grid-template-columns: 1fr; text-align: center; }
459
+ .hero-text p { margin: 0 auto 40px; }
460
+ .calc-grid { grid-template-columns: 1fr; }
461
+ .plan-card.popular { transform: scale(1); }
462
+ .footer-grid { grid-template-columns: 1fr 1fr; }
463
+ }
464
+
465
+ @media (max-width: 768px) {
466
+ .nav-links { display: none; } /* Simple hide for demo, normally use JS toggle */
467
+ .mobile-menu-btn { display: block; }
468
+ .hero-text h1 { font-size: 2.5rem; }
469
+ .calculator-section { padding: 30px 20px; margin-top: 0; border-radius: 0; }
470
+ .footer-grid { grid-template-columns: 1fr; }
471
+ }
472
+ </style>
473
+ </head>
474
+ <body>
475
+
476
+ <!-- Header -->
477
+ <header>
478
+ <div class="container">
479
+ <nav>
480
+ <a href="#" class="logo">
481
+ <i class="fa-solid fa-plane-slash"></i> SafeTrip
482
+ </a>
483
+ <ul class="nav-links">
484
+ <li><a href="#features">Benefits</a></li>
485
+ <li><a href="#coverage">Coverage</a></li>
486
+ <li><a href="#faq">FAQ</a></li>
487
+ <li><a href="#contact">Contact</a></li>
488
+ <li><a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a></li>
489
+ </ul>
490
+ <div class="mobile-menu-btn">
491
+ <i class="fa-solid fa-bars"></i>
492
+ </div>
493
+ </nav>
494
+ </div>
495
+ </header>
496
+
497
+ <!-- Hero Section -->
498
+ <section class="hero">
499
+ <div class="container">
500
+ <div class="hero-content">
501
+ <div class="hero-text">
502
+ <h1>Travel Far,<br>Worry Less.</h1>
503
+ <p>Comprehensive cancellation insurance for the modern traveler. Secure your trip investment against the unexpected.</p>
504
+ <a href="#calculator" class="btn btn-primary">Get a Free Quote</a>
505
+ <a href="#coverage" class="btn btn-outline" style="margin-left: 10px;">View Plans</a>
506
+ </div>
507
+ <div class="hero-image">
508
+ <!-- CSS Illustration Placeholder -->
509
+ <div style="width: 100%; height: 350px; background: linear-gradient(to right bottom, #e0f2fe, #bae6fd); border-radius: 20px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;">
510
+ <i class="fa-solid fa-shield-halved" style="font-size: 150px; color: rgba(255,255,255,0.4);"></i>
511
+ <div style="position: absolute; bottom: 30px; left: 30px; background: white; padding: 20px; border-radius: 15px; box-shadow: var(--shadow-md); width: 200px;">
512
+ <div style="color: var(--primary); font-weight: bold; font-size: 1.5rem;">100%</div>
513
+ <div style="color: var(--text-light); font-size: 0.9rem;">Claim Satisfaction</div>
514
+ </div>
515
+ </div>
516
+ </div>
517
+ </div>
518
+ </div>
519
+ </section>
520
+
521
+ <!-- Calculator Section -->
522
+ <div class="container" id="calculator">
523
+ <section class="calculator-section">
524
+ <div class="text-center" style="margin-bottom: 40px;">
525
+ <h2>Calculate Your Premium</h2>
526
+ <p style="color: var(--text-light);">Instant estimate based on your trip cost.</p>
527
+ </div>
528
+ <div class="calc-grid">
529
+ <div class="input-group">
530
+ <label for="tripCost">Total Trip Cost ($)</label>
531
+ <input type="range" id="tripCost" min="500" max="20000" step="100" value="2000">
532
+ <div class="trip-cost-display">$<span id="costValue">2,000</span></div>
533
+ <p style="font-size: 0.85rem; color: var(--text-light); margin-top: 10px;">Drag the slider to adjust your coverage amount.</p>
534
+ </div>
535
+ <div class="quote-box">
536
+ <div>Estimated Monthly Premium</div>
537
+ <div class="quote-price">$<span id="priceValue">29</span></div>
538
+ <div class="quote-sub">Includes all taxes & fees</div>
539
+ <button class="btn btn-primary" style="width: 100%;" onclick="alert('Redirecting to secure checkout...')">Buy Now</button>
540
+ </div>
541
+ </div>
542
+ </section>
543
+ </div>
544
+
545
+ <!-- Features Section -->
546
+ <section class="section" id="features">
547
+ <div class="container">
548
+ <div class="text-center">
549
+ <h2>Why Choose SafeTrip?</h2>
550
+ <p style="color: var(--text-light);">We make getting insured as easy as booking your flight.</p>
551
+ </div>
552
+ <div class="features-grid">
553
+ <div class="feature-card">
554
+ <div class="icon-box"><i class="fa-solid fa-bolt"></i></div>
555
+ <h3>Instant Coverage</h3>
556
+ <p>Get covered immediately upon purchase. No waiting periods, no medical exams required for standard plans.</p>
557
+ </div>
558
+ <div class="feature-card">
559
+ <div class="icon-box"><i class="fa-solid fa-globe"></i></div>
560
+ <h3>Global Support</h3>
561
+ <p>24/7 emergency assistance helpline available from anywhere in the world, in multiple languages.</p>
562
+ </div>
563
+ <div class="feature-card">
564
+ <div class="icon-box"><i class="fa-solid fa-user-shield"></i></div>
565
+ <h3>COVID-19 Protection</h3>
566
+ <p>Comprehensive coverage for trip cancellations and medical expenses related to pandemic events.</p>
567
+ </div>
568
+ </div>
569
+ </div>
570
+ </section>
571
+
572
+ <!-- Pricing Plans -->
573
+ <section class="section plans-section" id="coverage">
574
+ <div class="container">
575
+ <div class="text-center">
576
+ <h2>Choose Your Protection Level</h2>
577
+ <p style="color: var(--text-light);">Plans designed for solo backpackers and luxury travelers alike.</p>
578
+ </div>
579
+ <div class="plans-grid">
580
+ <!-- Basic -->
581
+ <div class="plan-card">
582
+ <div class="plan-name">Essential</div>
583
+ <div class="plan-price">$29<span>/trip</span></div>
584
+ <p style="color: var(--text-light); font-size: 0.9rem;">Perfect for weekend getaways</p>
585
+ <ul class="plan-features">
586
+ <li><i class="fa-solid fa-check"></i> Trip Cancellation (up to $1k)</li>
587
+ <li><i class="fa-solid fa-check"></i> Emergency Medical ($10k)</li>
588
+ <li><i class="fa-solid fa-check"></i> 24/7 Assistance</li>
589
+ <li class="disabled"><i class="fa-solid fa-xmark"></i> Rental Car Coverage</li>
590
+ <li class="disabled"><i class="fa-solid fa-xmark"></i> Adventure Sports</li>
591
+ </ul>
592
+ <button class="btn btn-outline" style="width: 100%;" onclick="selectPlan('Essential')">Select Essential</button>
593
+ </div>
594
+
595
+ <!-- Standard -->
596
+ <div class="plan-card popular">
597
+ <div class="badge">MOST POPULAR</div>
598
+ <div class="plan-name">Premium</div>
599
+ <div class="plan-price">$59<span>/trip</span></div>
600
+ <p style="color: var(--text-light); font-size: 0.9rem;">The best value for most trips</p>
601
+ <ul class="plan-features">
602
+ <li><i class="fa-solid fa-check"></i> Trip Cancellation (up to $5k)</li>
603
+ <li><i class="fa-solid fa-check"></i> Emergency Medical ($50k)</li>
604
+ <li><i class="fa-solid fa-check"></i> Rental Car Coverage</li>
605
+ <li><i class="fa-solid fa-check"></i> Baggage Delay Protection</li>
606
+ <li class="disabled"><i class="fa-solid fa-xmark"></i> Adventure Sports</li>
607
+ </ul>
608
+ <button class="btn btn-primary" style="width: 100%;" onclick="selectPlan('Premium')">Select Premium</button>
609
+ </div>
610
+
611
+ <!-- Platinum -->
612
+ <div class="plan-card">
613
+ <div class="plan-name">Platinum</div>
614
+ <div class="plan-price">$99<span>/trip</span></div>
615
+ <p style="color: var(--text-light); font-size: 0.9rem;">Maximum coverage, maximum peace</p>
616
+ <ul class="plan-features">
617
+ <li><i class="fa-solid fa-check"></i> Trip Cancellation (100%)</li>
618
+ <li><i class="fa-solid fa-check"></i> Emergency Medical ($100k)</li>
619
+ <li><i class="fa-solid fa-check"></i> "Cancel for Any Reason" (CFAR)</li>
620
+ <li><i class="fa-solid fa-check"></i> Adventure Sports Included</li>
621
+ <li><i class="fa-solid fa-check"></i> Concierge Service</li>
622
+ </ul>
623
+ <button class="btn btn-outline" style="width: 100%;" onclick="selectPlan('Platinum')">Select Platinum</button>
624
+ </div>
625
+ </div>
626
+ </div>
627
+ </section>
628
+
629
+ <!-- FAQ Section -->
630
+ <section class="section" id="faq">
631
+ <div class="container" style="max-width: 800px;">
632
+ <div class="text-center">
633
+ <h2>Frequently Asked Questions</h2>
634
+ </div>
635
+ <div class="faq-container" style="margin-top: 40px;">
636
+ <div class="faq-item">
637
+ <div class="faq-question">
638
+ What does trip cancellation cover?
639
+ <i class="fa-solid fa-chevron-down"></i>
640
+ </div>
641
+ <div class="faq-answer">
642
+ Trip cancellation covers the non-refundable cost of your trip if you have to cancel due to a covered reason such as illness, injury, death of a family member, or severe weather.
643
+ </div>
644
+ </div>
645
+ <div class="faq-item">
646
+ <div class="faq-question">
647
+ Can I buy insurance after booking my flight?
648
+ <i class="fa-solid fa-chevron-down"></i>
649
+ </div>
650
+ <div class="faq-answer">
651
+ Yes! You can purchase travel insurance at any time before your departure date. However, for the best coverage, we recommend buying it within 14 days of your initial trip deposit.
652
+ </div>
653
+ </div>
654
+ <div class="faq-item">
655
+ <div class="faq-question">
656
+ Is COVID-19 covered?
657
+ <i class="fa-solid fa-chevron-down"></i>
658
+ </div>
659
+ <div class="faq-answer">
660
+ Yes, our Premium and Platinum plans include coverage for trip cancellation and medical expenses related to a positive COVID-19 diagnosis.
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </div>
665
+ </section>
666
+
667
+ <!-- Footer -->
668
+ <footer id="contact">
669
+ <div class="container">
670
+ <div class="footer-grid">
671
+ <div class="footer-brand">
672
+ <a href="#" class="logo" style="color: white;">
673
+ <i class="fa-solid fa-plane-slash"></i> SafeTrip
674
+ </a>
675
+ <p>Making travel safer, one trip at a time. We provide transparent, comprehensive coverage so you can explore the world with confidence.</p>
676
+ <div style="margin-top: 20px; display: flex; gap: 15px;">
677
+ <a href="#" style="width: 40px; height: 40px; background: #334155; display: flex; align-items: center; justify-content: center; border-radius: 50%;"><i class="fa-brands fa-twitter"></i></a>
678
+ <a href="#" style="width: 40px; height: 40px; background: #334155; display: flex; align-items: center; justify-content: center; border-radius: 50%;"><i class="fa-brands fa-facebook"></i></a>
679
+ <a href="#" style="width: 40px; height: 40px; background: #334155; display: flex; align-items: center; justify-content: center; border-radius: 50%;"><i class="fa-brands fa-instagram"></i></a>
680
+ </div>
681
+ </div>
682
+ <div class="footer-col">
683
+ <h4>Company</h4>
684
+ <ul>
685
+ <li><a href="#">About Us</a></li>
686
+ <li><a href="#">Careers</a></li>
687
+ <li><a href="#">Press</a></li>
688
+ <li><a href="#">Blog</a></li>
689
+ </ul>
690
+ </div>
691
+ <div class="footer-col">
692
+ <h4>Support</h4>
693
+ <ul>
694
+ <li><a href="#">Help Center</a></li>
695
+ <li><a href="#">File a Claim</a></li>
696
+ <li><a href="#">Contact Us</a></li>
697
+ <li><a href="#">Policy Lookup</a></li>
698
+ </ul>
699
+ </div>
700
+ <div class="footer-col">
701
+ <h4>Legal</h4>
702
+ <ul>
703
+ <li><a href="#">Privacy Policy</a></li>
704
+ <li><a href="#">Terms of Service</a></li>
705
+ <li><a href="#">Accessibility</a></li>
706
+ </ul>
707
+ </div>
708
+ </div>
709
+ <div class="copyright">
710
+ &copy; 2023 SafeTrip Insurance Services. All rights reserved.
711
+ </div>
712
+ </div>
713
+ </footer>
714
+
715
+ <script>
716
+ // --- Calculator Logic ---
717
+ const tripInput = document.getElementById('tripCost');
718
+ const costDisplay = document.getElementById('costValue');
719
+ const priceDisplay = document.getElementById('priceValue');
720
+
721
+ function updatePrice() {
722
+ const cost = parseInt(tripInput.value);
723
+
724
+ // Format cost with commas
725
+ costDisplay.innerText = cost.toLocaleString();
726
+
727
+ // Simple logic: Base $20 + $4 per $100 of trip cost
728
+ let price = 20 + (cost / 100) * 4;
729
+
730
+ // Round to integer
731
+ price = Math.ceil(price);
732
+
733
+ priceDisplay.innerText = price;
734
+ }
735
+
736
+ tripInput.addEventListener('input', updatePrice);
737
+ updatePrice(); // Init
738
+
739
+ // --- FAQ Accordion ---
740
+ const faqItems = document.querySelectorAll('.faq-item');
741
+
742
+ faqItems.forEach(item => {
743
+ item.querySelector('.faq-question').addEventListener('click', () => {
744
+ // Close others
745
+ faqItems.forEach(i => {
746
+ if(i !== item) i.classList.remove('active');
747
+ });
748
+ // Toggle current
749
+ item.classList.toggle('active');
750
+ });
751
+ });
752
+
753
+ // --- Plan Selection Alert ---
754
+ function selectPlan(planName) {
755
+ alert(`You selected the ${planName} plan. Redirecting to checkout...`);
756
+ }
757
+
758
+ // --- Sticky Header Effect ---
759
+ window.addEventListener('scroll', () => {
760
+ const header = document.querySelector('header');
761
+ if(window.scrollY > 50) {
762
+ header.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.1)";
763
+ } else {
764
+ header.style.boxShadow = "none";
765
+ }
766
+ });
767
+ </script>
768
+ </body>
769
+ </html>