Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SafeTrip | Travel Cancellation Insurance</title> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <!-- Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* --- CSS Variables & Reset --- */ | |
| :root { | |
| --primary: #0ea5e9; /* Sky Blue */ | |
| --primary-dark: #0284c7; | |
| --secondary: #1e293b; /* Slate Dark */ | |
| --accent: #f43f5e; /* Rose for alerts/urgent */ | |
| --bg-light: #f8fafc; | |
| --text-main: #334155; | |
| --text-light: #64748b; | |
| --white: #ffffff; | |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.1); | |
| --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1); | |
| --shadow-lg: 0 25px 50px -12px rgba(0,0,0,0.1); | |
| --radius: 12px; | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| color: var(--text-main); | |
| background-color: var(--bg-light); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| a { text-decoration: none; color: inherit; } | |
| ul { list-style: none; } | |
| /* --- Layout Utilities --- */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| .section { | |
| padding: 80px 0; | |
| } | |
| .text-center { text-align: center; } | |
| h1, h2, h3, h4 { | |
| color: var(--secondary); | |
| font-weight: 700; | |
| line-height: 1.2; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 12px 32px; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| border: none; | |
| font-size: 1rem; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary); | |
| color: var(--white); | |
| box-shadow: 0 4px 14px 0 rgba(14, 165, 233, 0.39); | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--primary-dark); | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(14, 165, 233, 0.23); | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| border: 2px solid var(--secondary); | |
| color: var(--secondary); | |
| } | |
| .btn-outline:hover { | |
| background: var(--secondary); | |
| color: var(--white); | |
| } | |
| /* --- Header --- */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| z-index: 1000; | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid rgba(0,0,0,0.05); | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| height: 80px; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| color: var(--secondary); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .logo i { color: var(--primary); } | |
| .nav-links { | |
| display: flex; | |
| gap: 40px; | |
| } | |
| .nav-links a { | |
| font-weight: 500; | |
| font-size: 0.95rem; | |
| color: var(--text-main); | |
| transition: var(--transition); | |
| } | |
| .nav-links a:hover { color: var(--primary); } | |
| .anycoder-link { | |
| font-size: 0.8rem; | |
| background: var(--secondary); | |
| color: white ; | |
| padding: 6px 12px; | |
| border-radius: 20px; | |
| font-weight: 600; | |
| } | |
| .anycoder-link:hover { background: var(--primary) ; } | |
| .mobile-menu-btn { display: none; font-size: 1.5rem; cursor: pointer; } | |
| /* --- Hero Section --- */ | |
| .hero { | |
| padding-top: 160px; | |
| padding-bottom: 100px; | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* Decorative background circles */ | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: -10%; | |
| right: -10%; | |
| width: 600px; | |
| height: 600px; | |
| background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, rgba(255,255,255,0) 70%); | |
| border-radius: 50%; | |
| z-index: 0; | |
| } | |
| .hero-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 60px; | |
| align-items: center; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero-text h1 { | |
| font-size: 3.5rem; | |
| margin-bottom: 20px; | |
| letter-spacing: -1px; | |
| } | |
| .hero-text p { | |
| font-size: 1.2rem; | |
| color: var(--text-light); | |
| margin-bottom: 40px; | |
| max-width: 500px; | |
| } | |
| .hero-image { | |
| position: relative; | |
| } | |
| .hero-image img { | |
| width: 100%; | |
| border-radius: 20px; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| /* --- Calculator Section --- */ | |
| .calculator-section { | |
| background: var(--white); | |
| margin-top: -50px; | |
| position: relative; | |
| z-index: 10; | |
| border-radius: 20px; | |
| box-shadow: var(--shadow-lg); | |
| max-width: 900px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding: 50px; | |
| } | |
| .calc-grid { | |
| display: grid; | |
| grid-template-columns: 1.5fr 1fr; | |
| gap: 40px; | |
| align-items: center; | |
| } | |
| .input-group label { | |
| display: block; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| color: var(--secondary); | |
| } | |
| input[type="range"] { | |
| width: 100%; | |
| height: 8px; | |
| background: #e2e8f0; | |
| border-radius: 5px; | |
| outline: none; | |
| -webkit-appearance: none; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 24px; | |
| height: 24px; | |
| background: var(--primary); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2); | |
| transition: var(--transition); | |
| } | |
| input[type="range"]::-webkit-slider-thumb:hover { | |
| transform: scale(1.1); | |
| } | |
| .trip-cost-display { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| margin-top: 10px; | |
| } | |
| .quote-box { | |
| background: var(--secondary); | |
| color: var(--white); | |
| padding: 30px; | |
| border-radius: 16px; | |
| text-align: center; | |
| } | |
| .quote-price { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| margin: 10px 0; | |
| } | |
| .quote-sub { | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| margin-bottom: 20px; | |
| } | |
| /* --- Features --- */ | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| margin-top: 50px; | |
| } | |
| .feature-card { | |
| background: var(--white); | |
| padding: 30px; | |
| border-radius: 16px; | |
| transition: var(--transition); | |
| border: 1px solid transparent; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| border-color: #e2e8f0; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .icon-box { | |
| width: 60px; | |
| height: 60px; | |
| background: #e0f2fe; | |
| color: var(--primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 12px; | |
| font-size: 1.5rem; | |
| margin-bottom: 20px; | |
| } | |
| .feature-card h3 { margin-bottom: 10px; font-size: 1.25rem; } | |
| .feature-card p { color: var(--text-light); font-size: 0.95rem; } | |
| /* --- Pricing Plans --- */ | |
| .plans-section { background: var(--white); } | |
| .plans-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| margin-top: 50px; | |
| } | |
| .plan-card { | |
| background: var(--bg-light); | |
| padding: 40px; | |
| border-radius: 20px; | |
| position: relative; | |
| transition: var(--transition); | |
| border: 1px solid #e2e8f0; | |
| } | |
| .plan-card.popular { | |
| background: var(--white); | |
| border: 2px solid var(--primary); | |
| transform: scale(1.05); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .badge { | |
| position: absolute; | |
| top: -12px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: var(--primary); | |
| color: white; | |
| padding: 5px 15px; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| } | |
| .plan-name { font-size: 1.2rem; font-weight: 600; color: var(--text-light); } | |
| .plan-price { font-size: 3rem; font-weight: 700; color: var(--secondary); margin: 15px 0; } | |
| .plan-price span { font-size: 1rem; color: var(--text-light); font-weight: 400; } | |
| .plan-features { margin: 30px 0; } | |
| .plan-features li { | |
| margin-bottom: 15px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: var(--text-main); | |
| } | |
| .plan-features li i { color: #10b981; } | |
| .plan-features li.disabled { color: #cbd5e1; } | |
| .plan-features li.disabled i { color: #cbd5e1; } | |
| /* --- FAQ --- */ | |
| .faq-item { | |
| background: var(--white); | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow-sm); | |
| border: 1px solid #f1f5f9; | |
| } | |
| .faq-question { | |
| padding: 20px; | |
| cursor: pointer; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-weight: 600; | |
| } | |
| .faq-answer { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| padding: 0 20px; | |
| color: var(--text-light); | |
| } | |
| .faq-item.active .faq-answer { | |
| max-height: 200px; | |
| padding-bottom: 20px; | |
| } | |
| .faq-item.active i { | |
| transform: rotate(180deg); | |
| color: var(--primary); | |
| } | |
| /* --- Footer --- */ | |
| footer { | |
| background: var(--secondary); | |
| color: #94a3b8; | |
| padding: 80px 0 40px; | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr 1fr 1fr; | |
| gap: 40px; | |
| margin-bottom: 60px; | |
| } | |
| .footer-brand p { margin-top: 20px; max-width: 300px; } | |
| .footer-col h4 { color: var(--white); margin-bottom: 20px; } | |
| .footer-col ul li { margin-bottom: 12px; } | |
| .footer-col ul li a:hover { color: var(--white); } | |
| .copyright { | |
| border-top: 1px solid #334155; | |
| padding-top: 30px; | |
| text-align: center; | |
| font-size: 0.9rem; | |
| } | |
| /* --- Responsive --- */ | |
| @media (max-width: 968px) { | |
| .hero-content { grid-template-columns: 1fr; text-align: center; } | |
| .hero-text p { margin: 0 auto 40px; } | |
| .calc-grid { grid-template-columns: 1fr; } | |
| .plan-card.popular { transform: scale(1); } | |
| .footer-grid { grid-template-columns: 1fr 1fr; } | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links { display: none; } /* Simple hide for demo, normally use JS toggle */ | |
| .mobile-menu-btn { display: block; } | |
| .hero-text h1 { font-size: 2.5rem; } | |
| .calculator-section { padding: 30px 20px; margin-top: 0; border-radius: 0; } | |
| .footer-grid { grid-template-columns: 1fr; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="container"> | |
| <nav> | |
| <a href="#" class="logo"> | |
| <i class="fa-solid fa-plane-slash"></i> SafeTrip | |
| </a> | |
| <ul class="nav-links"> | |
| <li><a href="#features">Benefits</a></li> | |
| <li><a href="#coverage">Coverage</a></li> | |
| <li><a href="#faq">FAQ</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| <li><a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a></li> | |
| </ul> | |
| <div class="mobile-menu-btn"> | |
| <i class="fa-solid fa-bars"></i> | |
| </div> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <div class="hero-text"> | |
| <h1>Travel Far,<br>Worry Less.</h1> | |
| <p>Comprehensive cancellation insurance for the modern traveler. Secure your trip investment against the unexpected.</p> | |
| <a href="#calculator" class="btn btn-primary">Get a Free Quote</a> | |
| <a href="#coverage" class="btn btn-outline" style="margin-left: 10px;">View Plans</a> | |
| </div> | |
| <div class="hero-image"> | |
| <!-- CSS Illustration Placeholder --> | |
| <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;"> | |
| <i class="fa-solid fa-shield-halved" style="font-size: 150px; color: rgba(255,255,255,0.4);"></i> | |
| <div style="position: absolute; bottom: 30px; left: 30px; background: white; padding: 20px; border-radius: 15px; box-shadow: var(--shadow-md); width: 200px;"> | |
| <div style="color: var(--primary); font-weight: bold; font-size: 1.5rem;">100%</div> | |
| <div style="color: var(--text-light); font-size: 0.9rem;">Claim Satisfaction</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Calculator Section --> | |
| <div class="container" id="calculator"> | |
| <section class="calculator-section"> | |
| <div class="text-center" style="margin-bottom: 40px;"> | |
| <h2>Calculate Your Premium</h2> | |
| <p style="color: var(--text-light);">Instant estimate based on your trip cost.</p> | |
| </div> | |
| <div class="calc-grid"> | |
| <div class="input-group"> | |
| <label for="tripCost">Total Trip Cost ($)</label> | |
| <input type="range" id="tripCost" min="500" max="20000" step="100" value="2000"> | |
| <div class="trip-cost-display">$<span id="costValue">2,000</span></div> | |
| <p style="font-size: 0.85rem; color: var(--text-light); margin-top: 10px;">Drag the slider to adjust your coverage amount.</p> | |
| </div> | |
| <div class="quote-box"> | |
| <div>Estimated Monthly Premium</div> | |
| <div class="quote-price">$<span id="priceValue">29</span></div> | |
| <div class="quote-sub">Includes all taxes & fees</div> | |
| <button class="btn btn-primary" style="width: 100%;" onclick="alert('Redirecting to secure checkout...')">Buy Now</button> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Features Section --> | |
| <section class="section" id="features"> | |
| <div class="container"> | |
| <div class="text-center"> | |
| <h2>Why Choose SafeTrip?</h2> | |
| <p style="color: var(--text-light);">We make getting insured as easy as booking your flight.</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i class="fa-solid fa-bolt"></i></div> | |
| <h3>Instant Coverage</h3> | |
| <p>Get covered immediately upon purchase. No waiting periods, no medical exams required for standard plans.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i class="fa-solid fa-globe"></i></div> | |
| <h3>Global Support</h3> | |
| <p>24/7 emergency assistance helpline available from anywhere in the world, in multiple languages.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon-box"><i class="fa-solid fa-user-shield"></i></div> | |
| <h3>COVID-19 Protection</h3> | |
| <p>Comprehensive coverage for trip cancellations and medical expenses related to pandemic events.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Plans --> | |
| <section class="section plans-section" id="coverage"> | |
| <div class="container"> | |
| <div class="text-center"> | |
| <h2>Choose Your Protection Level</h2> | |
| <p style="color: var(--text-light);">Plans designed for solo backpackers and luxury travelers alike.</p> | |
| </div> | |
| <div class="plans-grid"> | |
| <!-- Basic --> | |
| <div class="plan-card"> | |
| <div class="plan-name">Essential</div> | |
| <div class="plan-price">$29<span>/trip</span></div> | |
| <p style="color: var(--text-light); font-size: 0.9rem;">Perfect for weekend getaways</p> | |
| <ul class="plan-features"> | |
| <li><i class="fa-solid fa-check"></i> Trip Cancellation (up to $1k)</li> | |
| <li><i class="fa-solid fa-check"></i> Emergency Medical ($10k)</li> | |
| <li><i class="fa-solid fa-check"></i> 24/7 Assistance</li> | |
| <li class="disabled"><i class="fa-solid fa-xmark"></i> Rental Car Coverage</li> | |
| <li class="disabled"><i class="fa-solid fa-xmark"></i> Adventure Sports</li> | |
| </ul> | |
| <button class="btn btn-outline" style="width: 100%;" onclick="selectPlan('Essential')">Select Essential</button> | |
| </div> | |
| <!-- Standard --> | |
| <div class="plan-card popular"> | |
| <div class="badge">MOST POPULAR</div> | |
| <div class="plan-name">Premium</div> | |
| <div class="plan-price">$59<span>/trip</span></div> | |
| <p style="color: var(--text-light); font-size: 0.9rem;">The best value for most trips</p> | |
| <ul class="plan-features"> | |
| <li><i class="fa-solid fa-check"></i> Trip Cancellation (up to $5k)</li> | |
| <li><i class="fa-solid fa-check"></i> Emergency Medical ($50k)</li> | |
| <li><i class="fa-solid fa-check"></i> Rental Car Coverage</li> | |
| <li><i class="fa-solid fa-check"></i> Baggage Delay Protection</li> | |
| <li class="disabled"><i class="fa-solid fa-xmark"></i> Adventure Sports</li> | |
| </ul> | |
| <button class="btn btn-primary" style="width: 100%;" onclick="selectPlan('Premium')">Select Premium</button> | |
| </div> | |
| <!-- Platinum --> | |
| <div class="plan-card"> | |
| <div class="plan-name">Platinum</div> | |
| <div class="plan-price">$99<span>/trip</span></div> | |
| <p style="color: var(--text-light); font-size: 0.9rem;">Maximum coverage, maximum peace</p> | |
| <ul class="plan-features"> | |
| <li><i class="fa-solid fa-check"></i> Trip Cancellation (100%)</li> | |
| <li><i class="fa-solid fa-check"></i> Emergency Medical ($100k)</li> | |
| <li><i class="fa-solid fa-check"></i> "Cancel for Any Reason" (CFAR)</li> | |
| <li><i class="fa-solid fa-check"></i> Adventure Sports Included</li> | |
| <li><i class="fa-solid fa-check"></i> Concierge Service</li> | |
| </ul> | |
| <button class="btn btn-outline" style="width: 100%;" onclick="selectPlan('Platinum')">Select Platinum</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="section" id="faq"> | |
| <div class="container" style="max-width: 800px;"> | |
| <div class="text-center"> | |
| <h2>Frequently Asked Questions</h2> | |
| </div> | |
| <div class="faq-container" style="margin-top: 40px;"> | |
| <div class="faq-item"> | |
| <div class="faq-question"> | |
| What does trip cancellation cover? | |
| <i class="fa-solid fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| 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. | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question"> | |
| Can I buy insurance after booking my flight? | |
| <i class="fa-solid fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| 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. | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question"> | |
| Is COVID-19 covered? | |
| <i class="fa-solid fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| Yes, our Premium and Platinum plans include coverage for trip cancellation and medical expenses related to a positive COVID-19 diagnosis. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer id="contact"> | |
| <div class="container"> | |
| <div class="footer-grid"> | |
| <div class="footer-brand"> | |
| <a href="#" class="logo" style="color: white;"> | |
| <i class="fa-solid fa-plane-slash"></i> SafeTrip | |
| </a> | |
| <p>Making travel safer, one trip at a time. We provide transparent, comprehensive coverage so you can explore the world with confidence.</p> | |
| <div style="margin-top: 20px; display: flex; gap: 15px;"> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="footer-col"> | |
| <h4>Company</h4> | |
| <ul> | |
| <li><a href="#">About Us</a></li> | |
| <li><a href="#">Careers</a></li> | |
| <li><a href="#">Press</a></li> | |
| <li><a href="#">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h4>Support</h4> | |
| <ul> | |
| <li><a href="#">Help Center</a></li> | |
| <li><a href="#">File a Claim</a></li> | |
| <li><a href="#">Contact Us</a></li> | |
| <li><a href="#">Policy Lookup</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h4>Legal</h4> | |
| <ul> | |
| <li><a href="#">Privacy Policy</a></li> | |
| <li><a href="#">Terms of Service</a></li> | |
| <li><a href="#">Accessibility</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| © 2023 SafeTrip Insurance Services. All rights reserved. | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // --- Calculator Logic --- | |
| const tripInput = document.getElementById('tripCost'); | |
| const costDisplay = document.getElementById('costValue'); | |
| const priceDisplay = document.getElementById('priceValue'); | |
| function updatePrice() { | |
| const cost = parseInt(tripInput.value); | |
| // Format cost with commas | |
| costDisplay.innerText = cost.toLocaleString(); | |
| // Simple logic: Base $20 + $4 per $100 of trip cost | |
| let price = 20 + (cost / 100) * 4; | |
| // Round to integer | |
| price = Math.ceil(price); | |
| priceDisplay.innerText = price; | |
| } | |
| tripInput.addEventListener('input', updatePrice); | |
| updatePrice(); // Init | |
| // --- FAQ Accordion --- | |
| const faqItems = document.querySelectorAll('.faq-item'); | |
| faqItems.forEach(item => { | |
| item.querySelector('.faq-question').addEventListener('click', () => { | |
| // Close others | |
| faqItems.forEach(i => { | |
| if(i !== item) i.classList.remove('active'); | |
| }); | |
| // Toggle current | |
| item.classList.toggle('active'); | |
| }); | |
| }); | |
| // --- Plan Selection Alert --- | |
| function selectPlan(planName) { | |
| alert(`You selected the ${planName} plan. Redirecting to checkout...`); | |
| } | |
| // --- Sticky Header Effect --- | |
| window.addEventListener('scroll', () => { | |
| const header = document.querySelector('header'); | |
| if(window.scrollY > 50) { | |
| header.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.1)"; | |
| } else { | |
| header.style.boxShadow = "none"; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |