Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EVLEND - EV Automobile Subscription Service</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .floating-window { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| width: 350px; | |
| height: 500px; | |
| background: white; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.2); | |
| z-index: 1000; | |
| display: none; | |
| flex-direction: column; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .floating-header { | |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| color: white; | |
| padding: 12px 15px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .floating-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 15px; | |
| } | |
| .deal-card { | |
| border: 1px solid #e5e7eb; | |
| border-radius: 8px; | |
| padding: 12px; | |
| margin-bottom: 10px; | |
| transition: all 0.2s ease; | |
| } | |
| .deal-card:hover { | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| transform: translateY(-2px); | |
| } | |
| .floating-btn { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| width: 60px; | |
| height: 60px; | |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); | |
| cursor: pointer; | |
| z-index: 999; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .tab-button.active { | |
| border-bottom: 3px solid #10b981; | |
| color: #10b981; | |
| font-weight: 600; | |
| } | |
| .crypto-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| margin-right: 5px; | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| border-radius: 3px; | |
| background-color: #e5e7eb; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%); | |
| } | |
| .blink { | |
| animation: blink 2s infinite; | |
| } | |
| @keyframes blink { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .telegram-btn { | |
| position: fixed; | |
| bottom: 90px; | |
| right: 20px; | |
| width: 60px; | |
| height: 60px; | |
| background: #0088cc; | |
| color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4); | |
| cursor: pointer; | |
| z-index: 999; | |
| transition: all 0.3s ease; | |
| } | |
| .telegram-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .legal-badge { | |
| display: inline-block; | |
| background-color: #f3f4f6; | |
| color: #4b5563; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| margin-right: 5px; | |
| margin-bottom: 5px; | |
| } | |
| .subscription-badge { | |
| display: inline-block; | |
| background-color: #e0f2fe; | |
| color: #0369a1; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| margin-right: 5px; | |
| margin-bottom: 5px; | |
| } | |
| .ev-icon { | |
| color: #10b981; | |
| } | |
| .subscription-card { | |
| border: 1px solid #e5e7eb; | |
| border-radius: 8px; | |
| padding: 15px; | |
| transition: all 0.3s ease; | |
| } | |
| .subscription-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .subscription-card.popular { | |
| border: 2px solid #10b981; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .popular-tag { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| background: #10b981; | |
| color: white; | |
| padding: 3px 10px; | |
| font-size: 12px; | |
| border-bottom-left-radius: 8px; | |
| } | |
| .inventory-btn { | |
| position: fixed; | |
| bottom: 160px; | |
| right: 20px; | |
| width: 60px; | |
| height: 60px; | |
| background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); | |
| color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); | |
| cursor: pointer; | |
| z-index: 999; | |
| transition: all 0.3s ease; | |
| } | |
| .inventory-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .ev-subscription-window { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| width: 400px; | |
| height: 550px; | |
| background: white; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.2); | |
| z-index: 1000; | |
| display: none; | |
| flex-direction: column; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .ev-subscription-header { | |
| background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); | |
| color: white; | |
| padding: 12px 15px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .ev-subscription-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 15px; | |
| } | |
| .ev-model-card { | |
| border: 1px solid #e5e7eb; | |
| border-radius: 8px; | |
| padding: 12px; | |
| margin-bottom: 10px; | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .ev-model-card:hover { | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| transform: translateY(-2px); | |
| } | |
| .ev-model-card.selected { | |
| border: 2px solid #3b82f6; | |
| background-color: #f0f9ff; | |
| } | |
| .ev-subscription-form { | |
| display: none; | |
| } | |
| .feature-icon { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background-color: #e0f2fe; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1rem; | |
| color: #0369a1; | |
| font-size: 1.5rem; | |
| } | |
| .benefit-card { | |
| border-left: 4px solid #10b981; | |
| padding-left: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .vehicle-selector { | |
| display: flex; | |
| overflow-x: auto; | |
| padding-bottom: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .vehicle-option { | |
| flex: 0 0 auto; | |
| width: 120px; | |
| margin-right: 1rem; | |
| text-align: center; | |
| cursor: pointer; | |
| padding: 0.5rem; | |
| border-radius: 0.5rem; | |
| transition: all 0.2s ease; | |
| } | |
| .vehicle-option:hover { | |
| background-color: #f0fdf4; | |
| } | |
| .vehicle-option.selected { | |
| background-color: #dcfce7; | |
| border: 1px solid #10b981; | |
| } | |
| .vehicle-option .vehicle-icon { | |
| width: 100%; | |
| height: 80px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 0.5rem; | |
| font-size: 3rem; | |
| color: #10b981; | |
| } | |
| .calculator-input { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .calculator-input label { | |
| width: 150px; | |
| margin-right: 1rem; | |
| } | |
| .calculator-input input { | |
| flex: 1; | |
| padding: 0.5rem; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.25rem; | |
| } | |
| .calculator-result { | |
| background-color: #f0fdf4; | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| margin-top: 1rem; | |
| } | |
| /* Ampere Credits Panel Styles */ | |
| .ampere-panel { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| width: 350px; | |
| background: white; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.2); | |
| z-index: 1000; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .ampere-header { | |
| background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); | |
| color: white; | |
| padding: 12px 15px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .ampere-content { | |
| padding: 15px; | |
| } | |
| .ampere-balance { | |
| background-color: #fffbeb; | |
| border: 1px solid #fef3c7; | |
| border-radius: 6px; | |
| padding: 12px; | |
| margin-bottom: 15px; | |
| text-align: center; | |
| } | |
| .ampere-balance h4 { | |
| font-size: 14px; | |
| color: #92400e; | |
| margin-bottom: 5px; | |
| } | |
| .ampere-balance p { | |
| font-size: 24px; | |
| font-weight: 600; | |
| color: #92400e; | |
| } | |
| .ampere-balance span { | |
| font-size: 14px; | |
| color: #92400e; | |
| } | |
| .ampere-actions { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .ampere-action-btn { | |
| padding: 8px; | |
| border-radius: 6px; | |
| text-align: center; | |
| font-size: 12px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .ampere-earn { | |
| background-color: #ecfccb; | |
| color: #365314; | |
| border: 1px solid #84cc16; | |
| } | |
| .ampere-earn:hover { | |
| background-color: #d9f99d; | |
| } | |
| .ampere-transfer { | |
| background-color: #e0f2fe; | |
| color: #075985; | |
| border: 1px solid #0ea5e9; | |
| } | |
| .ampere-transfer:hover { | |
| background-color: #bae6fd; | |
| } | |
| .ampere-history { | |
| border-top: 1px solid #e5e7eb; | |
| padding-top: 15px; | |
| } | |
| .ampere-history h4 { | |
| font-size: 14px; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| } | |
| .ampere-history-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 8px 0; | |
| border-bottom: 1px solid #f3f4f6; | |
| font-size: 13px; | |
| } | |
| .ampere-history-date { | |
| color: #6b7280; | |
| } | |
| .ampere-history-amount { | |
| font-weight: 500; | |
| color: #92400e; | |
| } | |
| .ampere-history-description { | |
| color: #6b7280; | |
| font-size: 12px; | |
| margin-top: 2px; | |
| } | |
| /* Dealer Panel Styles */ | |
| .dealer-panel { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| width: 400px; | |
| height: 550px; | |
| background: white; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.2); | |
| z-index: 1000; | |
| display: none; | |
| flex-direction: column; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .dealer-header { | |
| background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); | |
| color: white; | |
| padding: 12px 15px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .dealer-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 15px; | |
| } | |
| .dealer-btn { | |
| position: fixed; | |
| bottom: 230px; | |
| right: 20px; | |
| width: 60px; | |
| height: 60px; | |
| background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); | |
| color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4); | |
| cursor: pointer; | |
| z-index: 999; | |
| transition: all 0.3s ease; | |
| } | |
| .dealer-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .dealer-vehicle-card { | |
| border: 1px solid #e5e7eb; | |
| border-radius: 8px; | |
| padding: 12px; | |
| margin-bottom: 10px; | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .dealer-vehicle-card:hover { | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| transform: translateY(-2px); | |
| } | |
| .dealer-vehicle-card.selected { | |
| border: 2px solid #8b5cf6; | |
| background-color: #f5f3ff; | |
| } | |
| /* Community Panel Styles */ | |
| .community-panel { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| width: 400px; | |
| height: 550px; | |
| background: white; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.2); | |
| z-index: 1000; | |
| display: none; | |
| flex-direction: column; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .community-header { | |
| background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); | |
| color: white; | |
| padding: 12px 15px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .community-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 15px; | |
| } | |
| .community-btn { | |
| position: fixed; | |
| bottom: 300px; | |
| right: 20px; | |
| width: 60px; | |
| height: 60px; | |
| background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); | |
| color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4); | |
| cursor: pointer; | |
| z-index: 999; | |
| transition: all 0.3s ease; | |
| } | |
| .community-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .community-sponsor-card { | |
| border: 1px solid #e5e7eb; | |
| border-radius: 8px; | |
| padding: 12px; | |
| margin-bottom: 10px; | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .community-sponsor-card:hover { | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| transform: translateY(-2px); | |
| } | |
| .community-sponsor-card.selected { | |
| border: 2px solid #ec4899; | |
| background-color: #fdf2f8; | |
| } | |
| .sponsor-progress { | |
| height: 10px; | |
| border-radius: 5px; | |
| background-color: #f3f4f6; | |
| margin-top: 8px; | |
| overflow: hidden; | |
| } | |
| .sponsor-progress-bar { | |
| height: 100%; | |
| background: linear-gradient(90deg, #ec4899 0%, #db2777 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-green-600 to-emerald-600 text-white"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-bolt ev-icon text-2xl"></i> | |
| <h1 class="text-2xl font-bold">EVLEND</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#features" class="hover:text-green-200 transition">Features</a> | |
| <a href="#benefits" class="hover:text-green-200 transition">Benefits</a> | |
| <a href="#vehicles" class="hover:text-green-200 transition">Vehicles</a> | |
| <a href="#calculator" class="hover:text-green-200 transition">Calculator</a> | |
| <a href="#faq" class="hover:text-green-200 transition">FAQ</a> | |
| </nav> | |
| <button class="md:hidden text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="mt-12 mb-16 text-center"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">EV Automobile Subscription Service</h2> | |
| <p class="text-xl md:text-2xl max-w-3xl mx-auto">All-inclusive monthly payments for electric vehicles with no long-term commitment</p> | |
| <div class="mt-8 flex justify-center space-x-4"> | |
| <a href="#vehicles" class="bg-white text-green-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">Browse Vehicles</a> | |
| <a href="#how-it-works" class="border border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-green-600 transition">How It Works</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-12"> | |
| <!-- Features Section --> | |
| <section id="features" class="mb-20"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">All-Inclusive EV Subscription</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto">One simple monthly payment covers everything you need to drive an electric vehicle</p> | |
| </div> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div class="text-center"> | |
| <div class="feature-icon mx-auto"> | |
| <i class="fas fa-car"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Vehicle Access</h3> | |
| <p class="text-gray-600">Get access to the latest EV models with no long-term commitment</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="feature-icon mx-auto"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Insurance Included</h3> | |
| <p class="text-gray-600">Comprehensive insurance coverage included in your monthly payment</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="feature-icon mx-auto"> | |
| <i class="fas fa-tools"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Maintenance</h3> | |
| <p class="text-gray-600">All scheduled maintenance and repairs covered by your subscription</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="feature-icon mx-auto"> | |
| <i class="fas fa-plug"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Charging Support</h3> | |
| <p class="text-gray-600">Access to charging networks and home charger installation support for Ampere branded chargers.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="how-it-works" class="mb-20 bg-white rounded-xl shadow-md p-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">How EVLEND Works</h2> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="text-center"> | |
| <div class="feature-icon mx-auto bg-green-100 text-green-600"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">1. Choose Your EV</h3> | |
| <p class="text-gray-600">Browse our selection of electric vehicles and select the model that fits your needs.</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="feature-icon mx-auto bg-blue-100 text-blue-600"> | |
| <i class="fas fa-file-signature"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">2. Subscribe Online</h3> | |
| <p class="text-gray-600">Complete our simple online application and get approved in minutes.</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="feature-icon mx-auto bg-purple-100 text-purple-600"> | |
| <i class="fas fa-car-side"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">3. Start Driving</h3> | |
| <p class="text-gray-600">We'll deliver your EV to your door and you can start driving immediately.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits Section --> | |
| <section id="benefits" class="mb-20 bg-white rounded-xl shadow-md p-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Why Choose EV Subscription?</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto">The smarter way to drive electric with maximum flexibility</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <div class="benefit-card"> | |
| <h3 class="text-xl font-semibold mb-2">No Long-Term Commitment</h3> | |
| <p class="text-gray-600">Month-to-month flexibility means you can change or cancel anytime without penalties.</p> | |
| </div> | |
| <div class="benefit-card"> | |
| <h3 class="text-xl font-semibold mb-2">Hassle-Free Experience</h3> | |
| <p class="text-gray-600">We handle insurance, maintenance, registration, and roadside assistance so you don't have to.</p> | |
| </div> | |
| <div class="benefit-card"> | |
| <h3 class="text-xl font-semibold mb-2">Try Different Models</h3> | |
| <p class="text-gray-600">Switch between different EV models as your needs change without the hassle of selling or trading in.</p> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="benefit-card"> | |
| <h3 class="text-xl font-semibold mb-2">Predictable Costs</h3> | |
| <p class="text-gray-600">One flat monthly payment makes budgeting easy with no surprise expenses.</p> | |
| </div> | |
| <div class="benefit-card"> | |
| <h3 class="text-xl font-semibold mb-2">Always Drive New Tech</h3> | |
| <p class="text-gray-600">Regularly upgrade to the latest EV models with improved range and features.</p> | |
| </div> | |
| <div class="benefit-card"> | |
| <h3 class="text-xl font-semibold mb-2">Business Friendly</h3> | |
| <p class="text-gray-600">Simple expense reporting with one monthly payment that's often tax-deductible for businesses.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-lg font-medium">Start Your Subscription</button> | |
| </div> | |
| </section> | |
| <!-- Vehicles Section --> | |
| <section id="vehicles" class="mb-20"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Available EV Models</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto">Choose from our selection of popular electric vehicles</p> | |
| </div> | |
| <div class="vehicle-selector"> | |
| <div class="vehicle-option selected" data-model="tesla-model3"> | |
| <div class="vehicle-icon"> | |
| <i class="fas fa-car-alt"></i> | |
| </div> | |
| <p>Tesla Model 3</p> | |
| </div> | |
| <div class="vehicle-option" data-model="tesla-modely"> | |
| <div class="vehicle-icon"> | |
| <i class="fas fa-car-side"></i> | |
| </div> | |
| <p>Tesla Model Y</p> | |
| </div> | |
| <div class="vehicle-option" data-model="rivian-r1t"> | |
| <div class="vehicle-icon"> | |
| <i class="fas fa-truck-pickup"></i> | |
| </div> | |
| <p>Rivian R1T</p> | |
| </div> | |
| <div class="vehicle-option" data-model="lucid-air"> | |
| <div class="vehicle-icon"> | |
| <i class="fas fa-car"></i> | |
| </div> | |
| <p>Lucid Air</p> | |
| </div> | |
| <div class="vehicle-option" data-model="ford-f150-lightning"> | |
| <div class="vehicle-icon"> | |
| <i class="fas fa-truck"></i> | |
| </div> | |
| <p>Ford F-150 Lightning</p> | |
| </div> | |
| <div class="vehicle-option" data-model="hyundai-ioniq5"> | |
| <div class="vehicle-icon"> | |
| <i class="fas fa-car"></i> | |
| </div> | |
| <p>Hyundai Ioniq 5</p> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-4" id="selected-vehicle-name">Tesla Model 3</h3> | |
| <p class="text-gray-600 mb-6" id="selected-vehicle-description"> | |
| The Tesla Model 3 is an all-electric four-door sedan with a range of up to 358 miles. | |
| It features Autopilot capability, a minimalist interior with a 15-inch touchscreen, | |
| and acceleration from 0-60 mph in as little as 3.1 seconds for the Performance model. | |
| </p> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Range</p> | |
| <p class="font-medium" id="selected-vehicle-range">358 miles</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">0-60 mph</p> | |
| <p class="font-medium" id="selected-vehicle-acceleration">3.1-5.8s</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Seating</p> | |
| <p class="font-medium" id="selected-vehicle-seating">5 adults</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Cargo</p> | |
| <p class="font-medium" id="selected-vehicle-cargo">15 cu ft</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <h4 class="font-semibold mb-4">Subscription Options</h4> | |
| <div class="mb-4"> | |
| <div class="flex justify-between mb-1"> | |
| <span>Standard Range</span> | |
| <span class="font-medium" id="standard-price">$699/month</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-3">12-month commitment, 1,000 miles/month</p> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between mb-1"> | |
| <span>Long Range</span> | |
| <span class="font-medium" id="longrange-price">$899/month</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-3">6-month commitment, 1,500 miles/month</p> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between mb-1"> | |
| <span>Performance</span> | |
| <span class="font-medium" id="performance-price">$1,099/month</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Month-to-month, 2,000 miles/month</p> | |
| </div> | |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-medium">Subscribe Now</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Calculator Section --> | |
| <section id="calculator" class="mb-20 bg-white rounded-xl shadow-md p-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Subscription Calculator</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto">Estimate your monthly payment based on your preferences</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <div class="calculator-input"> | |
| <label for="vehicle-select">Vehicle Model:</label> | |
| <select id="vehicle-select" class="p-2 border rounded"> | |
| <option value="tesla-model3">Tesla Model 3</option> | |
| <option value="tesla-modely">Tesla Model Y</option> | |
| <option value="rivian-r1t">Rivian R1T</option> | |
| <option value="lucid-air">Lucid Air</option> | |
| <option value="ford-f150-lightning">Ford F-150 Lightning</option> | |
| </select> | |
| </div> | |
| <div class="calculator-input"> | |
| <label for="term-length">Term Length:</label> | |
| <select id="term-length" class="p-2 border rounded"> | |
| <option value="monthly">Month-to-Month (+15%)</option> | |
| <option value="3month">3 Months (+10%)</option> | |
| <option value="6month">6 Months (+5%)</option> | |
| <option value="12month" selected>12 Months</option> | |
| </select> | |
| </div> | |
| <div class="calculator-input"> | |
| <label for="mileage">Monthly Mileage:</label> | |
| <select id="mileage" class="p-2 border rounded"> | |
| <option value="750">750 miles</option> | |
| <option value="1000" selected>1,000 miles</option> | |
| <option value="1500">1,500 miles</option> | |
| <option value="2000">2,000 miles</option> | |
| <option value="unlimited">Unlimited (+25%)</option> | |
| </select> | |
| </div> | |
| <div class="calculator-input"> | |
| <label for="insurance">Insurance Level:</label> | |
| <select id="insurance" class="p-2 border rounded"> | |
| <option value="basic">Basic Coverage</option> | |
| <option value="standard" selected>Standard Coverage</option> | |
| <option value="premium">Premium Coverage (+10%)</option> | |
| </select> | |
| </div> | |
| <button id="calculate-btn" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg font-medium mt-4">Calculate</button> | |
| </div> | |
| <div class="calculator-result"> | |
| <h3 class="text-xl font-semibold mb-4">Estimated Monthly Payment</h3> | |
| <div class="text-4xl font-bold mb-4" id="estimated-payment">$899</div> | |
| <p class="text-gray-600 mb-2">Includes:</p> | |
| <ul class="space-y-1 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Vehicle access</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Comprehensive insurance</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Scheduled maintenance</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Roadside assistance</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Registration fees</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium mt-6">Start Subscription</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="mb-20"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">Frequently Asked Questions</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto">Get answers to common questions about EV subscriptions</p> | |
| </div> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="border-b border-gray-200 py-4"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-medium"> | |
| <span>How does EV subscription differ from leasing?</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer mt-2 text-gray-600 hidden"> | |
| <p>EV subscription is more flexible than traditional leasing. With a subscription, you typically get:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>Shorter commitment periods (often month-to-month)</li> | |
| <li>All-inclusive pricing that covers insurance, maintenance, and other costs</li> | |
| <li>Ability to switch vehicles more frequently</li> | |
| <li>No down payment or security deposit in most cases</li> | |
| <li>Simpler application and approval process</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 py-4"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-medium"> | |
| <span>What's included in the monthly subscription fee?</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer mt-2 text-gray-600 hidden"> | |
| <p>Our all-inclusive subscription typically covers:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>Use of the electric vehicle</li> | |
| <li>Comprehensive insurance coverage</li> | |
| <li>All scheduled maintenance and repairs</li> | |
| <li>Roadside assistance</li> | |
| <li>Vehicle registration and licensing fees</li> | |
| <li>In some plans: access to charging networks or home charger installation</li> | |
| </ul> | |
| <p class="mt-2">The only additional costs would be for excessive wear and tear or mileage overages if you exceed your plan's limits.</p> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 py-4"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-medium"> | |
| <span>How long does it take to get a vehicle after subscribing?</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer mt-2 text-gray-600 hidden"> | |
| <p>Delivery times vary based on vehicle availability in your area:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>Popular models in stock: 3-7 business days</li> | |
| <li>Special orders or high-demand models: 2-4 weeks</li> | |
| <li>Custom configurations: 4-8 weeks</li> | |
| </ul> | |
| <p class="mt-2">We'll provide an estimated delivery timeline when you complete your subscription application.</p> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 py-4"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-medium"> | |
| <span>Can I switch to a different EV model during my subscription?</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer mt-2 text-gray-600 hidden"> | |
| <p>Yes! One of the key benefits of EV subscription is the flexibility to switch vehicles:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>Month-to-month plans: Can switch anytime with 14 days notice</li> | |
| <li>Term plans: Can switch at the end of your term or pay a small fee to switch early</li> | |
| <li>Vehicle availability depends on inventory in your area</li> | |
| </ul> | |
| <p class="mt-2">This makes EV subscription ideal for trying different models before committing to a purchase.</p> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 py-4"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-medium"> | |
| <span>What happens if I exceed my monthly mileage limit?</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer mt-2 text-gray-600 hidden"> | |
| <p>If you exceed your monthly mileage allowance:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>We'll notify you when you approach your limit</li> | |
| <li>Overage charges are typically $0.25-$0.35 per mile depending on your plan</li> | |
| <li>You can upgrade to a higher mileage plan for the remainder of your term</li> | |
| <li>Some plans allow you to bank unused miles from previous months</li> | |
| </ul> | |
| <p class="mt-2">We recommend choosing a plan that matches your actual driving needs to avoid overages.</p> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 py-4"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-medium"> | |
| <span>How does insurance work with EV subscriptions?</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer mt-2 text-gray-600 hidden"> | |
| <p>Insurance is included in your subscription and works as follows:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>We provide comprehensive coverage that meets state minimum requirements</li> | |
| <li>Typical coverage includes liability, collision, and comprehensive</li> | |
| <li>You can often upgrade to higher coverage limits for an additional fee</li> | |
| <li>Claims are handled through our insurance provider</li> | |
| <li>Your personal insurance may not be needed while subscribed</li> | |
| </ul> | |
| <p class="mt-2">Exact coverage details will be provided when you sign up.</p> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 py-4"> | |
| <button class="faq-question flex justify-between items-center w-full text-left font-medium"> | |
| <span>What are the requirements to qualify for a subscription?</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="faq-answer mt-2 text-gray-600 hidden"> | |
| <p>Subscription requirements are typically more flexible than leasing or financing:</p> | |
| </section> | |
| <!-- Call to Action Section --> | |
| <section class="bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-xl shadow-md p-12 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Ready to Experience EV Subscription?</h2> | |
| <p class="text-xl max-w-3xl mx-auto mb-8">Join thousands of satisfied customers enjoying hassle-free electric vehicle access</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#vehicles" class="bg-white text-green-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">Browse Vehicles</a> | |
| <a href="#calculator" class="border border-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-green-600 transition">Get a Quote</a> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Ampere Credits Panel --> | |
| <div class="ampere-panel" id="ampere-panel"> | |
| <div class="ampere-header"> | |
| <h3>Ampere (Ah) Credits</h3> | |
| <div> | |
| <button id="close-ampere-panel" class="text-white hover:text-gray-200"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="ampere-content"> | |
| <div class="ampere-balance"> | |
| <h4>Your Ampere Balance</h4> | |
| <p id="ampere-balance">1,250</p> | |
| <span>Ah (Stellar Network)</span> | |
| </div> | |
| <div class="ampere-actions"> | |
| <button class="ampere-action-btn ampere-earn" id="earn-ampere"> | |
| <i class="fas fa-plus-circle mr-1"></i> Earn Credits | |
| </button> | |
| <button class="ampere-action-btn ampere-transfer" id="transfer-ampere"> | |
| <i class="fas fa-exchange-alt mr-1"></i> Transfer | |
| </button> | |
| </div> | |
| <div class="ampere-history"> | |
| <h4>Recent Transactions</h4> | |
| <div class="ampere-history-item"> | |
| <div> | |
| <div>Charging Rebate</div> | |
| <div class="ampere-history-description">2023-12-15</div> | |
| </div> | |
| <div class="ampere-history-amount">+50 Ah</div> | |
| </div> | |
| <div class="ampere-history-item"> | |
| <div> | |
| <div>Referral Bonus</div> | |
| <div class="ampere-history-description">2023-12-10</div> | |
| </div> | |
| <div class="ampere-history-amount">+100 Ah</div> | |
| </div> | |
| <div class="ampere-history-item"> | |
| <div> | |
| <div>Charging Session</div> | |
| <div class="ampere-history-description">2023-12-05</div> | |
| </div> | |
| <div class="ampere-history-amount">-25 Ah</div> | |
| </div> | |
| <div class="ampere-history-item"> | |
| <div> | |
| <div>Welcome Bonus</div> | |
| <div class="ampere-history-description">2023-11-28</div> | |
| </div> | |
| <div class="ampere-history-amount">+150 Ah</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dealer Panel --> | |
| <div class="dealer-panel" id="dealer-panel"> | |
| <div class="dealer-header"> | |
| <h3>EV Dealer Portal</h3> | |
| <div> | |
| <button id="close-dealer-panel" class="text-white hover:text-gray-200"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="dealer-content"> | |
| <div class="mb-4"> | |
| <h4 class="font-semibold mb-2">Available Inventory for Placement</h4> | |
| <p class="text-sm text-gray-600">List your EVs directly with EVLEND without registration</p> | |
| </div> | |
| <div class="dealer-vehicle-card"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h5 class="font-medium">Tesla Model 3 Standard Range</h5> | |
| <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">Available</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">2023 Model • 5,000 miles</p> | |
| <div class="flex justify-between text-sm"> | |
| <span>Lease Price: <strong>$699/mo</strong></span> | |
| <span>Term: <strong>12 months</strong></span> | |
| </div> | |
| </div> | |
| <div class="dealer-vehicle-card"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h5 class="font-medium">Ford F-150 Lightning Pro</h5> | |
| <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">Available</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">2024 Model • 2,500 miles</p> | |
| <div class="flex justify-between text-sm"> | |
| <span>Lease Price: <strong>$899/mo</strong></span> | |
| <span>Term: <strong>24 months</strong></span> | |
| </div> | |
| </div> | |
| <div class="dealer-vehicle-card"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h5 class="font-medium">Rivian R1T Adventure</h5> | |
| <span class="text-sm bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Pending</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">2023 Model • 8,000 miles</p> | |
| <div class="flex justify-between text-sm"> | |
| <span>Lease Price: <strong>$1,199/mo</strong></span> | |
| <span>Term: <strong>36 months</strong></span> | |
| </div> | |
| </div> | |
| <div class="dealer-vehicle-card"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h5 class="font-medium">Lucid Air Pure</h5> | |
| <span class="text-sm bg-red-100 text-red-800 px-2 py-1 rounded">Reserved</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">2024 Model • 1,200 miles</p> | |
| <div class="flex justify-between text-sm"> | |
| <span>Lease Price: <strong>$1,299/mo</strong></span> | |
| <span>Term: <strong>12 months</strong></span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-medium"> | |
| <i class="fas fa-plus-circle mr-2"></i> Add Your Inventory | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Community Panel --> | |
| <div class="community-panel" id="community-panel"> | |
| <div class="community-header"> | |
| <h3>Community Sponsorship</h3> | |
| <div> | |
| <button id="close-community-panel" class="text-white hover:text-gray-200"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="community-content"> | |
| <div class="mb-4"> | |
| <h4 class="font-semibold mb-2">Sponsor EV Leases in Your Community</h4> | |
| <p class="text-sm text-gray-600">Help finance EV subscriptions for local residents and businesses. Data provided for information al purposes only.</p> | |
| </div> | |
| <div class="community-sponsor-card"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h5 class="font-medium">Local Business Fleet Program</h5> | |
| <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">Active</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">Sponsor EV leases for small businesses in your area</p> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span>Target: <strong>$50,000</strong></span> | |
| <span>Raised: <strong>$32,450</strong></span> | |
| </div> | |
| <div class="sponsor-progress"> | |
| <div class="sponsor-progress-bar" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div class="community-sponsor-card"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h5 class="font-medium">Rideshare Driver Initiative</h5> | |
| <span class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">New</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">Help rideshare drivers transition to electric vehicles</p> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span>Target: <strong>$25,000</strong></span> | |
| <span>Raised: <strong>$8,200</strong></span> | |
| </div> | |
| <div class="sponsor-progress"> | |
| <div class="sponsor-progress-bar" style="width: 33%"></div> | |
| </div> | |
| </div> | |
| <div class="community-sponsor-card"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h5 class="font-medium">Non-Profit EV Access</h5> | |
| <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">Active</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">Provide EVs for local non-profit organizations</p> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span>Target: <strong>$15,000</strong></span> | |
| <span>Raised: <strong>$14,850</strong></span> | |
| </div> | |
| <div class="sponsor-progress"> | |
| <div class="sponsor-progress-bar" style="width: 99%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="w-full bg-pink-600 hover:bg-pink-700 text-white py-2 rounded-lg font-medium"> | |
| <i class="fas fa-hand-holding-heart mr-2"></i> Create Sponsorship Program | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating Buttons --> | |
| <div class="floating-btn" id="open-ampere-panel"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div class="dealer-btn" id="open-dealer-panel"> | |
| <i class="fas fa-store"></i> | |
| </div> | |
| <div class="community-btn" id="open-community-panel"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">EVLEND</h3> | |
| <p class="text-gray-400">Innovative EV subscription service making electric vehicle access simple and flexible.</p> | |
| <div class="mt-4 flex space-x-4"> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">How It Works</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Available Vehicles</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Subscription Plans</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing Calculator</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Subscription Agreement</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Insurance Terms</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Contact</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-calendar text-gray-400 mr-2"></i> | |
| <span class="text-gray-400"></span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-700 text-center text-gray-400"> | |
| <p>© 2025 EVLEND. By Ampere, BT. All rights reserved.</p> | |
| <p class="mt-2 text-sm">EV subscription service available in select markets. Vehicle availability may vary by location.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Tab functionality for vehicle selection | |
| const vehicleOptions = document.querySelectorAll('.vehicle-option'); | |
| vehicleOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| // Remove selected class from all options | |
| vehicleOptions.forEach(opt => opt.classList.remove('selected')); | |
| // Add selected class to clicked option | |
| this.classList.add('selected'); | |
| // Update vehicle details based on selection | |
| const model = this.getAttribute('data-model'); | |
| updateVehicleDetails(model); | |
| }); | |
| }); | |
| // Function to update vehicle details | |
| function updateVehicleDetails(model) { | |
| const vehicleName = document.getElementById('selected-vehicle-name'); | |
| const vehicleDesc = document.getElementById('selected-vehicle-description'); | |
| const vehicleRange = document.getElementById('selected-vehicle-range'); | |
| const vehicleAccel = document.getElementById('selected-vehicle-acceleration'); | |
| const vehicleSeating = document.getElementById('selected-vehicle-seating'); | |
| const vehicleCargo = document.getElementById('selected-vehicle-cargo'); | |
| const standardPrice = document.getElementById('standard-price'); | |
| const longrangePrice = document.getElementById('longrange-price'); | |
| const performancePrice = document.getElementById('performance-price'); | |
| switch(model) { | |
| case 'tesla-model3': | |
| vehicleName.textContent = 'Tesla Model 3'; | |
| vehicleDesc.textContent = 'The Tesla Model 3 is an all-electric four-door sedan with a range of up to 358 miles. It features Autopilot capability, a minimalist interior with a 15-inch touchscreen, and acceleration from 0-60 mph in as little as 3.1 seconds for the Performance model.'; | |
| vehicleRange.textContent = '358 miles'; | |
| vehicleAccel.textContent = '3.1-5.8s'; | |
| vehicleSeating.textContent = '5 adults'; | |
| vehicleCargo.textContent = '15 cu ft'; | |
| standardPrice.textContent = '$699/month'; | |
| longrangePrice.textContent = '$899/month'; | |
| performancePrice.textContent = '$1,099/month'; | |
| break; | |
| case 'tesla-modely': | |
| vehicleName.textContent = 'Tesla Model Y'; | |
| vehicleDesc.textContent = 'The Tesla Model Y is a compact all-electric SUV with seating for up to seven and a range of up to 330 miles. It offers versatile cargo space, dual motor all-wheel drive, and the same advanced technology features as the Model 3.'; | |
| vehicleRange.textContent = '330 miles'; | |
| vehicleAccel.textContent = '3.5-4.8s'; | |
| vehicleSeating.textContent = '5-7 adults'; | |
| vehicleCargo.textContent = '68 cu ft'; | |
| standardPrice.textContent = '$799/month'; | |
| longrangePrice.textContent = '$999/month'; | |
| performancePrice.textContent = '$1,199/month'; | |
| break; | |
| case 'rivian-r1t': | |
| vehicleName.textContent = 'Rivian R1T'; | |
| vehicleDesc.textContent = 'The Rivian R1T is an all-electric adventure pickup truck with up to 400 miles of range. It features a unique gear tunnel, impressive off-road capability, and luxurious interior with sustainable materials.'; | |
| vehicleRange.textContent = '400 miles'; | |
| vehicleAccel.textContent = '3.0s'; | |
| vehicleSeating.textContent = '5 adults'; | |
| vehicleCargo.textContent = '62 cu ft'; | |
| standardPrice.textContent = '$1,199/month'; | |
| longrangePrice.textContent = '$1,399/month'; | |
| performancePrice.textContent = '$1,599/month'; | |
| break; | |
| case 'lucid-air': | |
| vehicleName.textContent = 'Lucid Air'; | |
| vehicleDesc.textContent = 'The Lucid Air is a luxury all-electric sedan with industry-leading range up to 516 miles. It offers exceptional performance, spacious interior with executive rear seating options, and cutting-edge technology.'; | |
| vehicleRange.textContent = '516 miles'; | |
| vehicleAccel.textContent = '2.5-3.8s'; | |
| vehicleSeating.textContent = '5 adults'; | |
| vehicleCargo.textContent = '26 cu ft'; | |
| standardPrice.textContent = '$1,299/month'; | |
| longrangePrice.textContent = '$1,499/month'; | |
| performancePrice.textContent = '$1,799/month'; | |
| break; | |
| case 'ford-f150-lightning': | |
| vehicleName.textContent = 'Ford F-150 Lightning'; | |
| vehicleDesc.textContent = 'The Ford F-150 Lightning is an all-electric version of America\'s best-selling pickup truck. It offers up to 320 miles of range, impressive towing capacity, and innovative features like vehicle-to-home power backup.'; | |
| vehicleRange.textContent = '320 miles'; | |
| vehicleAccel.textContent = '4.0-5.8s'; | |
| vehicleSeating.textContent = '5 adults'; | |
| vehicleCargo.textContent = '52 cu ft'; | |
| standardPrice.textContent = '$899/month'; | |
| longrangePrice.textContent = '$1,099/month'; | |
| performancePrice.textContent = '$1,299/month'; | |
| break; | |
| case 'hyundai-ioniq5': | |
| vehicleName.textContent = 'Hyundai Ioniq 5'; | |
| vehicleDesc.textContent = 'The Hyundai Ioniq 5 is a futuristic all-electric crossover with up to 303 miles of range. It features ultra-fast charging, a spacious and flexible interior, and unique retro-futuristic styling.'; | |
| vehicleRange.textContent = '303 miles'; | |
| vehicleAccel.textContent = '5.2-7.4s'; | |
| vehicleSeating.textContent = '5 adults'; | |
| vegetableCargo.textContent = '27 cu ft'; | |
| standardPrice.textContent = '$649/month'; | |
| longrangePrice.textContent = '$799/month'; | |
| performancePrice.textContent = '$949/month'; | |
| break; | |
| } | |
| } | |
| // Calculator functionality | |
| document.getElementById('calculate-btn').addEventListener('click', function() { | |
| const vehicle = document.getElementById('vehicle-select').value; | |
| const term = document.getElementById('term-length').value; | |
| const mileage = document.getElementById('mileage').value; | |
| const insurance = document.getElementById('insurance').value; | |
| // Base prices for each vehicle | |
| let basePrice = 699; | |
| switch(vehicle) { | |
| case 'tesla-model3': basePrice = 699; break; | |
| case 'tesla-modely': basePrice = 799; break; | |
| case 'rivian-r1t': basePrice = 1199; break; | |
| case 'lucid-air': basePrice = 1299; break; | |
| case 'ford-f150-lightning': basePrice = 899; break; | |
| } | |
| // Adjust for term length | |
| let termAdjustment = 0; | |
| switch(term) { | |
| case 'monthly': termAdjustment = 0.15; break; | |
| case '3month': termAdjustment = 0.10; break; | |
| case '6month': termAdjustment = 0.05; break; | |
| case '12month': termAdjustment = 0; break; | |
| } | |
| // Adjust for mileage | |
| let mileageAdjustment = 0; | |
| switch(mileage) { | |
| case '750': mileageAdjustment = -0.10; break; | |
| case '1000': mileageAdjustment = 0; break; | |
| case '1500': mileageAdjustment = 0.15; break; | |
| case '2000': mileageAdjustment = 0.25; break; | |
| case 'unlimited': mileageAdjustment = 0.25; break; | |
| } | |
| // Adjust for insurance | |
| let insuranceAdjustment = 0; | |
| switch(insurance) { | |
| case 'basic': insuranceAdjustment = -0.10; break; | |
| case 'standard': insuranceAdjustment = 0; break; | |
| case 'premium': insuranceAdjustment = 0.10; break; | |
| } | |
| // Calculate final price | |
| let finalPrice = basePrice * (1 + termAdjustment + mileageAdjustment + insuranceAdjustment); | |
| // Round to nearest dollar | |
| finalPrice = Math.round(finalPrice); | |
| // Update display | |
| document.getElementById('estimated-payment').textContent = `$${finalPrice}`; | |
| }); | |
| // FAQ accordion functionality | |
| const faqQuestions = document.querySelectorAll('.faq-question'); | |
| faqQuestions.forEach(question => { | |
| question.addEventListener('click', function() { | |
| const answer = this.nextElementSibling; | |
| const icon = this.querySelector('i'); | |
| // Toggle answer visibility | |
| answer.classList.toggle('hidden'); | |
| // Rotate icon | |
| if (answer.classList.contains('hidden')) { | |
| icon.style.transform = 'rotate(0deg)'; | |
| } else { | |
| icon.style.transform = 'rotate(180deg)'; | |
| } | |
| }); | |
| }); | |
| // Panel toggle functionality | |
| const amperePanel = document.getElementById('ampere-panel'); | |
| const dealerPanel = document.getElementById('dealer-panel'); | |
| const communityPanel = document.getElementById('community-panel'); | |
| document.getElementById('open-ampere-panel').addEventListener('click', () => { | |
| amperePanel.style.display = 'block'; | |
| dealerPanel.style.display = 'none'; | |
| communityPanel.style.display = 'none'; | |
| }); | |
| document.getElementById('open-dealer-panel').addEventListener('click', () => { | |
| amperePanel.style.display = 'none'; | |
| dealerPanel.style.display = 'block'; | |
| communityPanel.style.display = 'none'; | |
| }); | |
| document.getElementById('open-community-panel').addEventListener('click', () => { | |
| amperePanel.style.display = 'none'; | |
| dealerPanel.style.display = 'none'; | |
| communityPanel.style.display = 'block'; | |
| }); | |
| document.getElementById('close-ampere-panel').addEventListener('click', () => { | |
| amperePanel.style.display = 'none'; | |
| }); | |
| document.getElementById('close-dealer-panel').addEventListener('click', () => { | |
| dealerPanel.style.display = 'none'; | |
| }); | |
| document.getElementById('close-community-panel').addEventListener('click', () => { | |
| communityPanel.style.display = 'none'; | |
| }); | |
| // Ampere panel functionality | |
| const earnAmpereBtn = document.getElementById('earn-ampere'); | |
| const transferAmpereBtn = document.getElementById('transfer-ampere'); | |
| earnAmpereBtn.addEventListener('click', () => { | |
| // Get current balance | |
| let currentBalance = parseInt(document.getElementById('ampere-balance').textContent); | |
| // Add 50 Ah credits | |
| currentBalance += 50; | |
| // Update display | |
| document.getElementById('ampere-balance').textContent = currentBalance; | |
| // Show notification | |
| alert('You earned 50 Ah credits for charging at a participating station!'); | |
| }); | |
| transferAmpereBtn.addEventListener('click', () => { | |
| alert('Transfer functionality coming soon!'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/evlend-vbeta1-01" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |