Hugging Face's logo

Spaces:
privateuserh
/
evlend-vbeta1-01
Running

App Files Community
privateuserh commited on
Commit
73461bc
·
verified ·
1 Parent(s): c7edf18

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1647 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Evlend Vbeta1 01
3
- emoji: 🐢
4
  colorFrom: pink
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: evlend-vbeta1-01
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1647 @@
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>EVLEND - EV Automobile Subscription Service</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .floating-window {
11
+ position: fixed;
12
+ bottom: 20px;
13
+ right: 20px;
14
+ width: 350px;
15
+ height: 500px;
16
+ background: white;
17
+ border-radius: 10px;
18
+ box-shadow: 0 10px 25px rgba(0,0,0,0.2);
19
+ z-index: 1000;
20
+ display: none;
21
+ flex-direction: column;
22
+ overflow: hidden;
23
+ transition: all 0.3s ease;
24
+ }
25
+
26
+ .floating-header {
27
+ background: linear-gradient(135deg, #10b981 0%, #059669 100%);
28
+ color: white;
29
+ padding: 12px 15px;
30
+ display: flex;
31
+ justify-content: space-between;
32
+ align-items: center;
33
+ }
34
+
35
+ .floating-content {
36
+ flex: 1;
37
+ overflow-y: auto;
38
+ padding: 15px;
39
+ }
40
+
41
+ .deal-card {
42
+ border: 1px solid #e5e7eb;
43
+ border-radius: 8px;
44
+ padding: 12px;
45
+ margin-bottom: 10px;
46
+ transition: all 0.2s ease;
47
+ }
48
+
49
+ .deal-card:hover {
50
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
51
+ transform: translateY(-2px);
52
+ }
53
+
54
+ .floating-btn {
55
+ position: fixed;
56
+ bottom: 20px;
57
+ right: 20px;
58
+ width: 60px;
59
+ height: 60px;
60
+ background: linear-gradient(135deg, #10b981 0%, #059669 100%);
61
+ color: white;
62
+ border-radius: 50%;
63
+ display: flex;
64
+ justify-content: center;
65
+ align-items: center;
66
+ box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
67
+ cursor: pointer;
68
+ z-index: 999;
69
+ }
70
+
71
+ .tab-content {
72
+ display: none;
73
+ }
74
+
75
+ .tab-content.active {
76
+ display: block;
77
+ }
78
+
79
+ .tab-button.active {
80
+ border-bottom: 3px solid #10b981;
81
+ color: #10b981;
82
+ font-weight: 600;
83
+ }
84
+
85
+ .crypto-badge {
86
+ display: inline-flex;
87
+ align-items: center;
88
+ padding: 2px 8px;
89
+ border-radius: 4px;
90
+ font-size: 12px;
91
+ font-weight: 500;
92
+ margin-right: 5px;
93
+ }
94
+
95
+ .progress-bar {
96
+ height: 6px;
97
+ border-radius: 3px;
98
+ background-color: #e5e7eb;
99
+ overflow: hidden;
100
+ }
101
+
102
+ .progress-fill {
103
+ height: 100%;
104
+ background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
105
+ }
106
+
107
+ .blink {
108
+ animation: blink 2s infinite;
109
+ }
110
+
111
+ @keyframes blink {
112
+ 0% { opacity: 1; }
113
+ 50% { opacity: 0.5; }
114
+ 100% { opacity: 1; }
115
+ }
116
+
117
+ .telegram-btn {
118
+ position: fixed;
119
+ bottom: 90px;
120
+ right: 20px;
121
+ width: 60px;
122
+ height: 60px;
123
+ background: #0088cc;
124
+ color: white;
125
+ border-radius: 50%;
126
+ display: flex;
127
+ justify-content: center;
128
+ align-items: center;
129
+ box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4);
130
+ cursor: pointer;
131
+ z-index: 999;
132
+ transition: all 0.3s ease;
133
+ }
134
+
135
+ .telegram-btn:hover {
136
+ transform: scale(1.1);
137
+ }
138
+
139
+ .legal-badge {
140
+ display: inline-block;
141
+ background-color: #f3f4f6;
142
+ color: #4b5563;
143
+ padding: 2px 8px;
144
+ border-radius: 4px;
145
+ font-size: 11px;
146
+ margin-right: 5px;
147
+ margin-bottom: 5px;
148
+ }
149
+
150
+ .subscription-badge {
151
+ display: inline-block;
152
+ background-color: #e0f2fe;
153
+ color: #0369a1;
154
+ padding: 2px 8px;
155
+ border-radius: 4px;
156
+ font-size: 11px;
157
+ margin-right: 5px;
158
+ margin-bottom: 5px;
159
+ }
160
+
161
+ .ev-icon {
162
+ color: #10b981;
163
+ }
164
+
165
+ .subscription-card {
166
+ border: 1px solid #e5e7eb;
167
+ border-radius: 8px;
168
+ padding: 15px;
169
+ transition: all 0.3s ease;
170
+ }
171
+
172
+ .subscription-card:hover {
173
+ transform: translateY(-5px);
174
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
175
+ }
176
+
177
+ .subscription-card.popular {
178
+ border: 2px solid #10b981;
179
+ position: relative;
180
+ overflow: hidden;
181
+ }
182
+
183
+ .popular-tag {
184
+ position: absolute;
185
+ top: 0;
186
+ right: 0;
187
+ background: #10b981;
188
+ color: white;
189
+ padding: 3px 10px;
190
+ font-size: 12px;
191
+ border-bottom-left-radius: 8px;
192
+ }
193
+
194
+ .inventory-btn {
195
+ position: fixed;
196
+ bottom: 160px;
197
+ right: 20px;
198
+ width: 60px;
199
+ height: 60px;
200
+ background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
201
+ color: white;
202
+ border-radius: 50%;
203
+ display: flex;
204
+ justify-content: center;
205
+ align-items: center;
206
+ box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
207
+ cursor: pointer;
208
+ z-index: 999;
209
+ transition: all 0.3s ease;
210
+ }
211
+
212
+ .inventory-btn:hover {
213
+ transform: scale(1.1);
214
+ }
215
+
216
+ .ev-subscription-window {
217
+ position: fixed;
218
+ bottom: 20px;
219
+ right: 20px;
220
+ width: 400px;
221
+ height: 550px;
222
+ background: white;
223
+ border-radius: 10px;
224
+ box-shadow: 0 10px 25px rgba(0,0,0,0.2);
225
+ z-index: 1000;
226
+ display: none;
227
+ flex-direction: column;
228
+ overflow: hidden;
229
+ transition: all 0.3s ease;
230
+ }
231
+
232
+ .ev-subscription-header {
233
+ background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
234
+ color: white;
235
+ padding: 12px 15px;
236
+ display: flex;
237
+ justify-content: space-between;
238
+ align-items: center;
239
+ }
240
+
241
+ .ev-subscription-content {
242
+ flex: 1;
243
+ overflow-y: auto;
244
+ padding: 15px;
245
+ }
246
+
247
+ .ev-model-card {
248
+ border: 1px solid #e5e7eb;
249
+ border-radius: 8px;
250
+ padding: 12px;
251
+ margin-bottom: 10px;
252
+ transition: all 0.2s ease;
253
+ cursor: pointer;
254
+ }
255
+
256
+ .ev-model-card:hover {
257
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
258
+ transform: translateY(-2px);
259
+ }
260
+
261
+ .ev-model-card.selected {
262
+ border: 2px solid #3b82f6;
263
+ background-color: #f0f9ff;
264
+ }
265
+
266
+ .ev-subscription-form {
267
+ display: none;
268
+ }
269
+
270
+ .feature-icon {
271
+ width: 60px;
272
+ height: 60px;
273
+ border-radius: 50%;
274
+ background-color: #e0f2fe;
275
+ display: flex;
276
+ align-items: center;
277
+ justify-content: center;
278
+ margin-bottom: 1rem;
279
+ color: #0369a1;
280
+ font-size: 1.5rem;
281
+ }
282
+
283
+ .benefit-card {
284
+ border-left: 4px solid #10b981;
285
+ padding-left: 1rem;
286
+ margin-bottom: 1.5rem;
287
+ }
288
+
289
+ .vehicle-selector {
290
+ display: flex;
291
+ overflow-x: auto;
292
+ padding-bottom: 1rem;
293
+ margin-bottom: 1.5rem;
294
+ }
295
+
296
+ .vehicle-option {
297
+ flex: 0 0 auto;
298
+ width: 120px;
299
+ margin-right: 1rem;
300
+ text-align: center;
301
+ cursor: pointer;
302
+ padding: 0.5rem;
303
+ border-radius: 0.5rem;
304
+ transition: all 0.2s ease;
305
+ }
306
+
307
+ .vehicle-option:hover {
308
+ background-color: #f0fdf4;
309
+ }
310
+
311
+ .vehicle-option.selected {
312
+ background-color: #dcfce7;
313
+ border: 1px solid #10b981;
314
+ }
315
+
316
+ .vehicle-option .vehicle-icon {
317
+ width: 100%;
318
+ height: 80px;
319
+ display: flex;
320
+ align-items: center;
321
+ justify-content: center;
322
+ margin-bottom: 0.5rem;
323
+ font-size: 3rem;
324
+ color: #10b981;
325
+ }
326
+
327
+ .calculator-input {
328
+ display: flex;
329
+ align-items: center;
330
+ margin-bottom: 1rem;
331
+ }
332
+
333
+ .calculator-input label {
334
+ width: 150px;
335
+ margin-right: 1rem;
336
+ }
337
+
338
+ .calculator-input input {
339
+ flex: 1;
340
+ padding: 0.5rem;
341
+ border: 1px solid #e5e7eb;
342
+ border-radius: 0.25rem;
343
+ }
344
+
345
+ .calculator-result {
346
+ background-color: #f0fdf4;
347
+ padding: 1rem;
348
+ border-radius: 0.5rem;
349
+ margin-top: 1rem;
350
+ }
351
+
352
+ /* Ampere Credits Panel Styles */
353
+ .ampere-panel {
354
+ position: fixed;
355
+ bottom: 20px;
356
+ right: 20px;
357
+ width: 350px;
358
+ background: white;
359
+ border-radius: 10px;
360
+ box-shadow: 0 10px 25px rgba(0,0,0,0.2);
361
+ z-index: 1000;
362
+ overflow: hidden;
363
+ transition: all 0.3s ease;
364
+ }
365
+
366
+ .ampere-header {
367
+ background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
368
+ color: white;
369
+ padding: 12px 15px;
370
+ display: flex;
371
+ justify-content: space-between;
372
+ align-items: center;
373
+ }
374
+
375
+ .ampere-content {
376
+ padding: 15px;
377
+ }
378
+
379
+ .ampere-balance {
380
+ background-color: #fffbeb;
381
+ border: 1px solid #fef3c7;
382
+ border-radius: 6px;
383
+ padding: 12px;
384
+ margin-bottom: 15px;
385
+ text-align: center;
386
+ }
387
+
388
+ .ampere-balance h4 {
389
+ font-size: 14px;
390
+ color: #92400e;
391
+ margin-bottom: 5px;
392
+ }
393
+
394
+ .ampere-balance p {
395
+ font-size: 24px;
396
+ font-weight: 600;
397
+ color: #92400e;
398
+ }
399
+
400
+ .ampere-balance span {
401
+ font-size: 14px;
402
+ color: #92400e;
403
+ }
404
+
405
+ .ampere-actions {
406
+ display: grid;
407
+ grid-template-columns: 1fr 1fr;
408
+ gap: 10px;
409
+ margin-bottom: 15px;
410
+ }
411
+
412
+ .ampere-action-btn {
413
+ padding: 8px;
414
+ border-radius: 6px;
415
+ text-align: center;
416
+ font-size: 12px;
417
+ font-weight: 500;
418
+ cursor: pointer;
419
+ transition: all 0.2s ease;
420
+ }
421
+
422
+ .ampere-earn {
423
+ background-color: #ecfccb;
424
+ color: #365314;
425
+ border: 1px solid #84cc16;
426
+ }
427
+
428
+ .ampere-earn:hover {
429
+ background-color: #d9f99d;
430
+ }
431
+
432
+ .ampere-transfer {
433
+ background-color: #e0f2fe;
434
+ color: #075985;
435
+ border: 1px solid #0ea5e9;
436
+ }
437
+
438
+ .ampere-transfer:hover {
439
+ background-color: #bae6fd;
440
+ }
441
+
442
+ .ampere-history {
443
+ border-top: 1px solid #e5e7eb;
444
+ padding-top: 15px;
445
+ }
446
+
447
+ .ampere-history h4 {
448
+ font-size: 14px;
449
+ font-weight: 600;
450
+ margin-bottom: 10px;
451
+ }
452
+
453
+ .ampere-history-item {
454
+ display: flex;
455
+ justify-content: space-between;
456
+ padding: 8px 0;
457
+ border-bottom: 1px solid #f3f4f6;
458
+ font-size: 13px;
459
+ }
460
+
461
+ .ampere-history-date {
462
+ color: #6b7280;
463
+ }
464
+
465
+ .ampere-history-amount {
466
+ font-weight: 500;
467
+ color: #92400e;
468
+ }
469
+
470
+ .ampere-history-description {
471
+ color: #6b7280;
472
+ font-size: 12px;
473
+ margin-top: 2px;
474
+ }
475
+
476
+ /* Dealer Panel Styles */
477
+ .dealer-panel {
478
+ position: fixed;
479
+ bottom: 20px;
480
+ right: 20px;
481
+ width: 400px;
482
+ height: 550px;
483
+ background: white;
484
+ border-radius: 10px;
485
+ box-shadow: 0 10px 25px rgba(0,0,0,0.2);
486
+ z-index: 1000;
487
+ display: none;
488
+ flex-direction: column;
489
+ overflow: hidden;
490
+ transition: all 0.3s ease;
491
+ }
492
+
493
+ .dealer-header {
494
+ background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
495
+ color: white;
496
+ padding: 12px 15px;
497
+ display: flex;
498
+ justify-content: space-between;
499
+ align-items: center;
500
+ }
501
+
502
+ .dealer-content {
503
+ flex: 1;
504
+ overflow-y: auto;
505
+ padding: 15px;
506
+ }
507
+
508
+ .dealer-btn {
509
+ position: fixed;
510
+ bottom: 230px;
511
+ right: 20px;
512
+ width: 60px;
513
+ height: 60px;
514
+ background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
515
+ color: white;
516
+ border-radius: 50%;
517
+ display: flex;
518
+ justify-content: center;
519
+ align-items: center;
520
+ box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
521
+ cursor: pointer;
522
+ z-index: 999;
523
+ transition: all 0.3s ease;
524
+ }
525
+
526
+ .dealer-btn:hover {
527
+ transform: scale(1.1);
528
+ }
529
+
530
+ .dealer-vehicle-card {
531
+ border: 1px solid #e5e7eb;
532
+ border-radius: 8px;
533
+ padding: 12px;
534
+ margin-bottom: 10px;
535
+ transition: all 0.2s ease;
536
+ cursor: pointer;
537
+ }
538
+
539
+ .dealer-vehicle-card:hover {
540
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
541
+ transform: translateY(-2px);
542
+ }
543
+
544
+ .dealer-vehicle-card.selected {
545
+ border: 2px solid #8b5cf6;
546
+ background-color: #f5f3ff;
547
+ }
548
+
549
+ /* Community Panel Styles */
550
+ .community-panel {
551
+ position: fixed;
552
+ bottom: 20px;
553
+ right: 20px;
554
+ width: 400px;
555
+ height: 550px;
556
+ background: white;
557
+ border-radius: 10px;
558
+ box-shadow: 0 10px 25px rgba(0,0,0,0.2);
559
+ z-index: 1000;
560
+ display: none;
561
+ flex-direction: column;
562
+ overflow: hidden;
563
+ transition: all 0.3s ease;
564
+ }
565
+
566
+ .community-header {
567
+ background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
568
+ color: white;
569
+ padding: 12px 15px;
570
+ display: flex;
571
+ justify-content: space-between;
572
+ align-items: center;
573
+ }
574
+
575
+ .community-content {
576
+ flex: 1;
577
+ overflow-y: auto;
578
+ padding: 15px;
579
+ }
580
+
581
+ .community-btn {
582
+ position: fixed;
583
+ bottom: 300px;
584
+ right: 20px;
585
+ width: 60px;
586
+ height: 60px;
587
+ background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
588
+ color: white;
589
+ border-radius: 50%;
590
+ display: flex;
591
+ justify-content: center;
592
+ align-items: center;
593
+ box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
594
+ cursor: pointer;
595
+ z-index: 999;
596
+ transition: all 0.3s ease;
597
+ }
598
+
599
+ .community-btn:hover {
600
+ transform: scale(1.1);
601
+ }
602
+
603
+ .community-sponsor-card {
604
+ border: 1px solid #e5e7eb;
605
+ border-radius: 8px;
606
+ padding: 12px;
607
+ margin-bottom: 10px;
608
+ transition: all 0.2s ease;
609
+ cursor: pointer;
610
+ }
611
+
612
+ .community-sponsor-card:hover {
613
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
614
+ transform: translateY(-2px);
615
+ }
616
+
617
+ .community-sponsor-card.selected {
618
+ border: 2px solid #ec4899;
619
+ background-color: #fdf2f8;
620
+ }
621
+
622
+ .sponsor-progress {
623
+ height: 10px;
624
+ border-radius: 5px;
625
+ background-color: #f3f4f6;
626
+ margin-top: 8px;
627
+ overflow: hidden;
628
+ }
629
+
630
+ .sponsor-progress-bar {
631
+ height: 100%;
632
+ background: linear-gradient(90deg, #ec4899 0%, #db2777 100%);
633
+ }
634
+ </style>
635
+ </head>
636
+ <body class="bg-gray-50">
637
+ <!-- Header -->
638
+ <header class="bg-gradient-to-r from-green-600 to-emerald-600 text-white">
639
+ <div class="container mx-auto px-4 py-6">
640
+ <div class="flex justify-between items-center">
641
+ <div class="flex items-center space-x-2">
642
+ <i class="fas fa-bolt ev-icon text-2xl"></i>
643
+ <h1 class="text-2xl font-bold">EVLEND</h1>
644
+ </div>
645
+ <nav class="hidden md:flex space-x-6">
646
+ <a href="#features" class="hover:text-green-200 transition">Features</a>
647
+ <a href="#benefits" class="hover:text-green-200 transition">Benefits</a>
648
+ <a href="#vehicles" class="hover:text-green-200 transition">Vehicles</a>
649
+ <a href="#calculator" class="hover:text-green-200 transition">Calculator</a>
650
+ <a href="#faq" class="hover:text-green-200 transition">FAQ</a>
651
+ </nav>
652
+ <button class="md:hidden text-xl">
653
+ <i class="fas fa-bars"></i>
654
+ </button>
655
+ </div>
656
+ <div class="mt-12 mb-16 text-center">
657
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">EV Automobile Subscription Service</h2>
658
+ <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>
659
+ <div class="mt-8 flex justify-center space-x-4">
660
+ <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>
661
+ <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>
662
+ </div>
663
+ </div>
664
+ </div>
665
+ </header>
666
+
667
+ <!-- Main Content -->
668
+ <main class="container mx-auto px-4 py-12">
669
+ <!-- Features Section -->
670
+ <section id="features" class="mb-20">
671
+ <div class="text-center mb-12">
672
+ <h2 class="text-3xl font-bold mb-4">All-Inclusive EV Subscription</h2>
673
+ <p class="text-gray-600 max-w-3xl mx-auto">One simple monthly payment covers everything you need to drive an electric vehicle</p>
674
+ </div>
675
+
676
+ <div class="grid md:grid-cols-4 gap-8">
677
+ <div class="text-center">
678
+ <div class="feature-icon mx-auto">
679
+ <i class="fas fa-car"></i>
680
+ </div>
681
+ <h3 class="text-xl font-semibold mb-2">Vehicle Access</h3>
682
+ <p class="text-gray-600">Get access to the latest EV models with no long-term commitment</p>
683
+ </div>
684
+
685
+ <div class="text-center">
686
+ <div class="feature-icon mx-auto">
687
+ <i class="fas fa-shield-alt"></i>
688
+ </div>
689
+ <h3 class="text-xl font-semibold mb-2">Insurance Included</h3>
690
+ <p class="text-gray-600">Comprehensive insurance coverage included in your monthly payment</p>
691
+ </div>
692
+
693
+ <div class="text-center">
694
+ <div class="feature-icon mx-auto">
695
+ <i class="fas fa-tools"></i>
696
+ </div>
697
+ <h3 class="text-xl font-semibold mb-2">Maintenance</h3>
698
+ <p class="text-gray-600">All scheduled maintenance and repairs covered by your subscription</p>
699
+ </div>
700
+
701
+ <div class="text-center">
702
+ <div class="feature-icon mx-auto">
703
+ <i class="fas fa-plug"></i>
704
+ </div>
705
+ <h3 class="text-xl font-semibold mb-2">Charging Support</h3>
706
+ <p class="text-gray-600">Access to charging networks and home charger installation support for Ampere branded chargers.</p>
707
+ </div>
708
+ </div>
709
+ </section>
710
+
711
+ <!-- How It Works Section -->
712
+ <section id="how-it-works" class="mb-20 bg-white rounded-xl shadow-md p-8">
713
+ <div class="text-center mb-12">
714
+ <h2 class="text-3xl font-bold mb-4">How EVLEND Works</h2>
715
+ </div>
716
+
717
+ <div class="grid md:grid-cols-3 gap-8">
718
+ <div class="text-center">
719
+ <div class="feature-icon mx-auto bg-green-100 text-green-600">
720
+ <i class="fas fa-search"></i>
721
+ </div>
722
+ <h3 class="text-xl font-semibold mb-2">1. Choose Your EV</h3>
723
+ <p class="text-gray-600">Browse our selection of electric vehicles and select the model that fits your needs.</p>
724
+ </div>
725
+
726
+ <div class="text-center">
727
+ <div class="feature-icon mx-auto bg-blue-100 text-blue-600">
728
+ <i class="fas fa-file-signature"></i>
729
+ </div>
730
+ <h3 class="text-xl font-semibold mb-2">2. Subscribe Online</h3>
731
+ <p class="text-gray-600">Complete our simple online application and get approved in minutes.</p>
732
+ </div>
733
+
734
+ <div class="text-center">
735
+ <div class="feature-icon mx-auto bg-purple-100 text-purple-600">
736
+ <i class="fas fa-car-side"></i>
737
+ </div>
738
+ <h3 class="text-xl font-semibold mb-2">3. Start Driving</h3>
739
+ <p class="text-gray-600">We'll deliver your EV to your door and you can start driving immediately.</p>
740
+ </div>
741
+ </div>
742
+ </section>
743
+
744
+ <!-- Benefits Section -->
745
+ <section id="benefits" class="mb-20 bg-white rounded-xl shadow-md p-8">
746
+ <div class="text-center mb-12">
747
+ <h2 class="text-3xl font-bold mb-4">Why Choose EV Subscription?</h2>
748
+ <p class="text-gray-600 max-w-3xl mx-auto">The smarter way to drive electric with maximum flexibility</p>
749
+ </div>
750
+
751
+ <div class="grid md:grid-cols-2 gap-8">
752
+ <div>
753
+ <div class="benefit-card">
754
+ <h3 class="text-xl font-semibold mb-2">No Long-Term Commitment</h3>
755
+ <p class="text-gray-600">Month-to-month flexibility means you can change or cancel anytime without penalties.</p>
756
+ </div>
757
+
758
+ <div class="benefit-card">
759
+ <h3 class="text-xl font-semibold mb-2">Hassle-Free Experience</h3>
760
+ <p class="text-gray-600">We handle insurance, maintenance, registration, and roadside assistance so you don't have to.</p>
761
+ </div>
762
+
763
+ <div class="benefit-card">
764
+ <h3 class="text-xl font-semibold mb-2">Try Different Models</h3>
765
+ <p class="text-gray-600">Switch between different EV models as your needs change without the hassle of selling or trading in.</p>
766
+ </div>
767
+ </div>
768
+
769
+ <div>
770
+ <div class="benefit-card">
771
+ <h3 class="text-xl font-semibold mb-2">Predictable Costs</h3>
772
+ <p class="text-gray-600">One flat monthly payment makes budgeting easy with no surprise expenses.</p>
773
+ </div>
774
+
775
+ <div class="benefit-card">
776
+ <h3 class="text-xl font-semibold mb-2">Always Drive New Tech</h3>
777
+ <p class="text-gray-600">Regularly upgrade to the latest EV models with improved range and features.</p>
778
+ </div>
779
+
780
+ <div class="benefit-card">
781
+ <h3 class="text-xl font-semibold mb-2">Business Friendly</h3>
782
+ <p class="text-gray-600">Simple expense reporting with one monthly payment that's often tax-deductible for businesses.</p>
783
+ </div>
784
+ </div>
785
+ </div>
786
+
787
+ <div class="mt-12 text-center">
788
+ <button class="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-lg font-medium">Start Your Subscription</button>
789
+ </div>
790
+ </section>
791
+
792
+ <!-- Vehicles Section -->
793
+ <section id="vehicles" class="mb-20">
794
+ <div class="text-center mb-12">
795
+ <h2 class="text-3xl font-bold mb-4">Available EV Models</h2>
796
+ <p class="text-gray-600 max-w-3xl mx-auto">Choose from our selection of popular electric vehicles</p>
797
+ </div>
798
+
799
+ <div class="vehicle-selector">
800
+ <div class="vehicle-option selected" data-model="tesla-model3">
801
+ <div class="vehicle-icon">
802
+ <i class="fas fa-car-alt"></i>
803
+ </div>
804
+ <p>Tesla Model 3</p>
805
+ </div>
806
+ <div class="vehicle-option" data-model="tesla-modely">
807
+ <div class="vehicle-icon">
808
+ <i class="fas fa-car-side"></i>
809
+ </div>
810
+ <p>Tesla Model Y</p>
811
+ </div>
812
+ <div class="vehicle-option" data-model="rivian-r1t">
813
+ <div class="vehicle-icon">
814
+ <i class="fas fa-truck-pickup"></i>
815
+ </div>
816
+ <p>Rivian R1T</p>
817
+ </div>
818
+ <div class="vehicle-option" data-model="lucid-air">
819
+ <div class="vehicle-icon">
820
+ <i class="fas fa-car"></i>
821
+ </div>
822
+ <p>Lucid Air</p>
823
+ </div>
824
+ <div class="vehicle-option" data-model="ford-f150-lightning">
825
+ <div class="vehicle-icon">
826
+ <i class="fas fa-truck"></i>
827
+ </div>
828
+ <p>Ford F-150 Lightning</p>
829
+ </div>
830
+ <div class="vehicle-option" data-model="hyundai-ioniq5">
831
+ <div class="vehicle-icon">
832
+ <i class="fas fa-car"></i>
833
+ </div>
834
+ <p>Hyundai Ioniq 5</p>
835
+ </div>
836
+ </div>
837
+
838
+ <div class="grid md:grid-cols-2 gap-8">
839
+ <div>
840
+ <h3 class="text-2xl font-semibold mb-4" id="selected-vehicle-name">Tesla Model 3</h3>
841
+ <p class="text-gray-600 mb-6" id="selected-vehicle-description">
842
+ The Tesla Model 3 is an all-electric four-door sedan with a range of up to 358 miles.
843
+ It features Autopilot capability, a minimalist interior with a 15-inch touchscreen,
844
+ and acceleration from 0-60 mph in as little as 3.1 seconds for the Performance model.
845
+ </p>
846
+
847
+ <div class="grid grid-cols-2 gap-4 mb-6">
848
+ <div>
849
+ <p class="text-gray-500 text-sm">Range</p>
850
+ <p class="font-medium" id="selected-vehicle-range">358 miles</p>
851
+ </div>
852
+ <div>
853
+ <p class="text-gray-500 text-sm">0-60 mph</p>
854
+ <p class="font-medium" id="selected-vehicle-acceleration">3.1-5.8s</p>
855
+ </div>
856
+ <div>
857
+ <p class="text-gray-500 text-sm">Seating</p>
858
+ <p class="font-medium" id="selected-vehicle-seating">5 adults</p>
859
+ </div>
860
+ <div>
861
+ <p class="text-gray-500 text-sm">Cargo</p>
862
+ <p class="font-medium" id="selected-vehicle-cargo">15 cu ft</p>
863
+ </div>
864
+ </div>
865
+ </div>
866
+
867
+ <div class="bg-gray-50 p-6 rounded-xl">
868
+ <h4 class="font-semibold mb-4">Subscription Options</h4>
869
+
870
+ <div class="mb-4">
871
+ <div class="flex justify-between mb-1">
872
+ <span>Standard Range</span>
873
+ <span class="font-medium" id="standard-price">$699/month</span>
874
+ </div>
875
+ <p class="text-sm text-gray-500 mb-3">12-month commitment, 1,000 miles/month</p>
876
+ </div>
877
+
878
+ <div class="mb-4">
879
+ <div class="flex justify-between mb-1">
880
+ <span>Long Range</span>
881
+ <span class="font-medium" id="longrange-price">$899/month</span>
882
+ </div>
883
+ <p class="text-sm text-gray-500 mb-3">6-month commitment, 1,500 miles/month</p>
884
+ </div>
885
+
886
+ <div class="mb-6">
887
+ <div class="flex justify-between mb-1">
888
+ <span>Performance</span>
889
+ <span class="font-medium" id="performance-price">$1,099/month</span>
890
+ </div>
891
+ <p class="text-sm text-gray-500">Month-to-month, 2,000 miles/month</p>
892
+ </div>
893
+
894
+ <button class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-medium">Subscribe Now</button>
895
+ </div>
896
+ </div>
897
+ </section>
898
+
899
+ <!-- Calculator Section -->
900
+ <section id="calculator" class="mb-20 bg-white rounded-xl shadow-md p-8">
901
+ <div class="text-center mb-12">
902
+ <h2 class="text-3xl font-bold mb-4">Subscription Calculator</h2>
903
+ <p class="text-gray-600 max-w-3xl mx-auto">Estimate your monthly payment based on your preferences</p>
904
+ </div>
905
+
906
+ <div class="grid md:grid-cols-2 gap-8">
907
+ <div>
908
+ <div class="calculator-input">
909
+ <label for="vehicle-select">Vehicle Model:</label>
910
+ <select id="vehicle-select" class="p-2 border rounded">
911
+ <option value="tesla-model3">Tesla Model 3</option>
912
+ <option value="tesla-modely">Tesla Model Y</option>
913
+ <option value="rivian-r1t">Rivian R1T</option>
914
+ <option value="lucid-air">Lucid Air</option>
915
+ <option value="ford-f150-lightning">Ford F-150 Lightning</option>
916
+ </select>
917
+ </div>
918
+
919
+ <div class="calculator-input">
920
+ <label for="term-length">Term Length:</label>
921
+ <select id="term-length" class="p-2 border rounded">
922
+ <option value="monthly">Month-to-Month (+15%)</option>
923
+ <option value="3month">3 Months (+10%)</option>
924
+ <option value="6month">6 Months (+5%)</option>
925
+ <option value="12month" selected>12 Months</option>
926
+ </select>
927
+ </div>
928
+
929
+ <div class="calculator-input">
930
+ <label for="mileage">Monthly Mileage:</label>
931
+ <select id="mileage" class="p-2 border rounded">
932
+ <option value="750">750 miles</option>
933
+ <option value="1000" selected>1,000 miles</option>
934
+ <option value="1500">1,500 miles</option>
935
+ <option value="2000">2,000 miles</option>
936
+ <option value="unlimited">Unlimited (+25%)</option>
937
+ </select>
938
+ </div>
939
+
940
+ <div class="calculator-input">
941
+ <label for="insurance">Insurance Level:</label>
942
+ <select id="insurance" class="p-2 border rounded">
943
+ <option value="basic">Basic Coverage</option>
944
+ <option value="standard" selected>Standard Coverage</option>
945
+ <option value="premium">Premium Coverage (+10%)</option>
946
+ </select>
947
+ </div>
948
+
949
+ <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>
950
+ </div>
951
+
952
+ <div class="calculator-result">
953
+ <h3 class="text-xl font-semibold mb-4">Estimated Monthly Payment</h3>
954
+ <div class="text-4xl font-bold mb-4" id="estimated-payment">$899</div>
955
+ <p class="text-gray-600 mb-2">Includes:</p>
956
+ <ul class="space-y-1 text-gray-600">
957
+ <li class="flex items-center">
958
+ <i class="fas fa-check text-green-500 mr-2"></i>
959
+ <span>Vehicle access</span>
960
+ </li>
961
+ <li class="flex items-center">
962
+ <i class="fas fa-check text-green-500 mr-2"></i>
963
+ <span>Comprehensive insurance</span>
964
+ </li>
965
+ <li class="flex items-center">
966
+ <i class="fas fa-check text-green-500 mr-2"></i>
967
+ <span>Scheduled maintenance</span>
968
+ </li>
969
+ <li class="flex items-center">
970
+ <i class="fas fa-check text-green-500 mr-2"></i>
971
+ <span>Roadside assistance</span>
972
+ </li>
973
+ <li class="flex items-center">
974
+ <i class="fas fa-check text-green-500 mr-2"></i>
975
+ <span>Registration fees</span>
976
+ </li>
977
+ </ul>
978
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium mt-6">Start Subscription</button>
979
+ </div>
980
+ </div>
981
+ </section>
982
+
983
+ <!-- FAQ Section -->
984
+ <section id="faq" class="mb-20">
985
+ <div class="text-center mb-12">
986
+ <h2 class="text-3xl font-bold mb-4">Frequently Asked Questions</h2>
987
+ <p class="text-gray-600 max-w-3xl mx-auto">Get answers to common questions about EV subscriptions</p>
988
+ </div>
989
+
990
+ <div class="max-w-3xl mx-auto">
991
+ <div class="border-b border-gray-200 py-4">
992
+ <button class="faq-question flex justify-between items-center w-full text-left font-medium">
993
+ <span>How does EV subscription differ from leasing?</span>
994
+ <i class="fas fa-chevron-down transition-transform"></i>
995
+ </button>
996
+ <div class="faq-answer mt-2 text-gray-600 hidden">
997
+ <p>EV subscription is more flexible than traditional leasing. With a subscription, you typically get:</p>
998
+ <ul class="list-disc pl-5 mt-2 space-y-1">
999
+ <li>Shorter commitment periods (often month-to-month)</li>
1000
+ <li>All-inclusive pricing that covers insurance, maintenance, and other costs</li>
1001
+ <li>Ability to switch vehicles more frequently</li>
1002
+ <li>No down payment or security deposit in most cases</li>
1003
+ <li>Simpler application and approval process</li>
1004
+ </ul>
1005
+ </div>
1006
+ </div>
1007
+
1008
+ <div class="border-b border-gray-200 py-4">
1009
+ <button class="faq-question flex justify-between items-center w-full text-left font-medium">
1010
+ <span>What's included in the monthly subscription fee?</span>
1011
+ <i class="fas fa-chevron-down transition-transform"></i>
1012
+ </button>
1013
+ <div class="faq-answer mt-2 text-gray-600 hidden">
1014
+ <p>Our all-inclusive subscription typically covers:</p>
1015
+ <ul class="list-disc pl-5 mt-2 space-y-1">
1016
+ <li>Use of the electric vehicle</li>
1017
+ <li>Comprehensive insurance coverage</li>
1018
+ <li>All scheduled maintenance and repairs</li>
1019
+ <li>Roadside assistance</li>
1020
+ <li>Vehicle registration and licensing fees</li>
1021
+ <li>In some plans: access to charging networks or home charger installation</li>
1022
+ </ul>
1023
+ <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>
1024
+ </div>
1025
+ </div>
1026
+
1027
+ <div class="border-b border-gray-200 py-4">
1028
+ <button class="faq-question flex justify-between items-center w-full text-left font-medium">
1029
+ <span>How long does it take to get a vehicle after subscribing?</span>
1030
+ <i class="fas fa-chevron-down transition-transform"></i>
1031
+ </button>
1032
+ <div class="faq-answer mt-2 text-gray-600 hidden">
1033
+ <p>Delivery times vary based on vehicle availability in your area:</p>
1034
+ <ul class="list-disc pl-5 mt-2 space-y-1">
1035
+ <li>Popular models in stock: 3-7 business days</li>
1036
+ <li>Special orders or high-demand models: 2-4 weeks</li>
1037
+ <li>Custom configurations: 4-8 weeks</li>
1038
+ </ul>
1039
+ <p class="mt-2">We'll provide an estimated delivery timeline when you complete your subscription application.</p>
1040
+ </div>
1041
+ </div>
1042
+
1043
+ <div class="border-b border-gray-200 py-4">
1044
+ <button class="faq-question flex justify-between items-center w-full text-left font-medium">
1045
+ <span>Can I switch to a different EV model during my subscription?</span>
1046
+ <i class="fas fa-chevron-down transition-transform"></i>
1047
+ </button>
1048
+ <div class="faq-answer mt-2 text-gray-600 hidden">
1049
+ <p>Yes! One of the key benefits of EV subscription is the flexibility to switch vehicles:</p>
1050
+ <ul class="list-disc pl-5 mt-2 space-y-1">
1051
+ <li>Month-to-month plans: Can switch anytime with 14 days notice</li>
1052
+ <li>Term plans: Can switch at the end of your term or pay a small fee to switch early</li>
1053
+ <li>Vehicle availability depends on inventory in your area</li>
1054
+ </ul>
1055
+ <p class="mt-2">This makes EV subscription ideal for trying different models before committing to a purchase.</p>
1056
+ </div>
1057
+ </div>
1058
+
1059
+ <div class="border-b border-gray-200 py-4">
1060
+ <button class="faq-question flex justify-between items-center w-full text-left font-medium">
1061
+ <span>What happens if I exceed my monthly mileage limit?</span>
1062
+ <i class="fas fa-chevron-down transition-transform"></i>
1063
+ </button>
1064
+ <div class="faq-answer mt-2 text-gray-600 hidden">
1065
+ <p>If you exceed your monthly mileage allowance:</p>
1066
+ <ul class="list-disc pl-5 mt-2 space-y-1">
1067
+ <li>We'll notify you when you approach your limit</li>
1068
+ <li>Overage charges are typically $0.25-$0.35 per mile depending on your plan</li>
1069
+ <li>You can upgrade to a higher mileage plan for the remainder of your term</li>
1070
+ <li>Some plans allow you to bank unused miles from previous months</li>
1071
+ </ul>
1072
+ <p class="mt-2">We recommend choosing a plan that matches your actual driving needs to avoid overages.</p>
1073
+ </div>
1074
+ </div>
1075
+
1076
+ <div class="border-b border-gray-200 py-4">
1077
+ <button class="faq-question flex justify-between items-center w-full text-left font-medium">
1078
+ <span>How does insurance work with EV subscriptions?</span>
1079
+ <i class="fas fa-chevron-down transition-transform"></i>
1080
+ </button>
1081
+ <div class="faq-answer mt-2 text-gray-600 hidden">
1082
+ <p>Insurance is included in your subscription and works as follows:</p>
1083
+ <ul class="list-disc pl-5 mt-2 space-y-1">
1084
+ <li>We provide comprehensive coverage that meets state minimum requirements</li>
1085
+ <li>Typical coverage includes liability, collision, and comprehensive</li>
1086
+ <li>You can often upgrade to higher coverage limits for an additional fee</li>
1087
+ <li>Claims are handled through our insurance provider</li>
1088
+ <li>Your personal insurance may not be needed while subscribed</li>
1089
+ </ul>
1090
+ <p class="mt-2">Exact coverage details will be provided when you sign up.</p>
1091
+ </div>
1092
+ </div>
1093
+
1094
+ <div class="border-b border-gray-200 py-4">
1095
+ <button class="faq-question flex justify-between items-center w-full text-left font-medium">
1096
+ <span>What are the requirements to qualify for a subscription?</span>
1097
+ <i class="fas fa-chevron-down transition-transform"></i>
1098
+ </button>
1099
+ <div class="faq-answer mt-2 text-gray-600 hidden">
1100
+ <p>Subscription requirements are typically more flexible than leasing or financing:</p>
1101
+ </section>
1102
+
1103
+ <!-- Call to Action Section -->
1104
+ <section class="bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-xl shadow-md p-12 text-center">
1105
+ <h2 class="text-3xl font-bold mb-4">Ready to Experience EV Subscription?</h2>
1106
+ <p class="text-xl max-w-3xl mx-auto mb-8">Join thousands of satisfied customers enjoying hassle-free electric vehicle access</p>
1107
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
1108
+ <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>
1109
+ <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>
1110
+ </div>
1111
+ </section>
1112
+ </main>
1113
+
1114
+ <!-- Ampere Credits Panel -->
1115
+ <div class="ampere-panel" id="ampere-panel">
1116
+ <div class="ampere-header">
1117
+ <h3>Ampere (Ah) Credits</h3>
1118
+ <div>
1119
+ <button id="close-ampere-panel" class="text-white hover:text-gray-200">
1120
+ <i class="fas fa-times"></i>
1121
+ </button>
1122
+ </div>
1123
+ </div>
1124
+
1125
+ <div class="ampere-content">
1126
+ <div class="ampere-balance">
1127
+ <h4>Your Ampere Balance</h4>
1128
+ <p id="ampere-balance">1,250</p>
1129
+ <span>Ah (Stellar Network)</span>
1130
+ </div>
1131
+
1132
+ <div class="ampere-actions">
1133
+ <button class="ampere-action-btn ampere-earn" id="earn-ampere">
1134
+ <i class="fas fa-plus-circle mr-1"></i> Earn Credits
1135
+ </button>
1136
+ <button class="ampere-action-btn ampere-transfer" id="transfer-ampere">
1137
+ <i class="fas fa-exchange-alt mr-1"></i> Transfer
1138
+ </button>
1139
+ </div>
1140
+
1141
+ <div class="ampere-history">
1142
+ <h4>Recent Transactions</h4>
1143
+
1144
+ <div class="ampere-history-item">
1145
+ <div>
1146
+ <div>Charging Rebate</div>
1147
+ <div class="ampere-history-description">2023-12-15</div>
1148
+ </div>
1149
+ <div class="ampere-history-amount">+50 Ah</div>
1150
+ </div>
1151
+
1152
+ <div class="ampere-history-item">
1153
+ <div>
1154
+ <div>Referral Bonus</div>
1155
+ <div class="ampere-history-description">2023-12-10</div>
1156
+ </div>
1157
+ <div class="ampere-history-amount">+100 Ah</div>
1158
+ </div>
1159
+
1160
+ <div class="ampere-history-item">
1161
+ <div>
1162
+ <div>Charging Session</div>
1163
+ <div class="ampere-history-description">2023-12-05</div>
1164
+ </div>
1165
+ <div class="ampere-history-amount">-25 Ah</div>
1166
+ </div>
1167
+
1168
+ <div class="ampere-history-item">
1169
+ <div>
1170
+ <div>Welcome Bonus</div>
1171
+ <div class="ampere-history-description">2023-11-28</div>
1172
+ </div>
1173
+ <div class="ampere-history-amount">+150 Ah</div>
1174
+ </div>
1175
+ </div>
1176
+ </div>
1177
+ </div>
1178
+
1179
+ <!-- Dealer Panel -->
1180
+ <div class="dealer-panel" id="dealer-panel">
1181
+ <div class="dealer-header">
1182
+ <h3>EV Dealer Portal</h3>
1183
+ <div>
1184
+ <button id="close-dealer-panel" class="text-white hover:text-gray-200">
1185
+ <i class="fas fa-times"></i>
1186
+ </button>
1187
+ </div>
1188
+ </div>
1189
+
1190
+ <div class="dealer-content">
1191
+ <div class="mb-4">
1192
+ <h4 class="font-semibold mb-2">Available Inventory for Placement</h4>
1193
+ <p class="text-sm text-gray-600">List your EVs directly with EVLEND without registration</p>
1194
+ </div>
1195
+
1196
+ <div class="dealer-vehicle-card">
1197
+ <div class="flex justify-between items-center mb-2">
1198
+ <h5 class="font-medium">Tesla Model 3 Standard Range</h5>
1199
+ <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">Available</span>
1200
+ </div>
1201
+ <p class="text-sm text-gray-600 mb-2">2023 Model • 5,000 miles</p>
1202
+ <div class="flex justify-between text-sm">
1203
+ <span>Lease Price: <strong>$699/mo</strong></span>
1204
+ <span>Term: <strong>12 months</strong></span>
1205
+ </div>
1206
+ </div>
1207
+
1208
+ <div class="dealer-vehicle-card">
1209
+ <div class="flex justify-between items-center mb-2">
1210
+ <h5 class="font-medium">Ford F-150 Lightning Pro</h5>
1211
+ <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">Available</span>
1212
+ </div>
1213
+ <p class="text-sm text-gray-600 mb-2">2024 Model • 2,500 miles</p>
1214
+ <div class="flex justify-between text-sm">
1215
+ <span>Lease Price: <strong>$899/mo</strong></span>
1216
+ <span>Term: <strong>24 months</strong></span>
1217
+ </div>
1218
+ </div>
1219
+
1220
+ <div class="dealer-vehicle-card">
1221
+ <div class="flex justify-between items-center mb-2">
1222
+ <h5 class="font-medium">Rivian R1T Adventure</h5>
1223
+ <span class="text-sm bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Pending</span>
1224
+ </div>
1225
+ <p class="text-sm text-gray-600 mb-2">2023 Model • 8,000 miles</p>
1226
+ <div class="flex justify-between text-sm">
1227
+ <span>Lease Price: <strong>$1,199/mo</strong></span>
1228
+ <span>Term: <strong>36 months</strong></span>
1229
+ </div>
1230
+ </div>
1231
+
1232
+ <div class="dealer-vehicle-card">
1233
+ <div class="flex justify-between items-center mb-2">
1234
+ <h5 class="font-medium">Lucid Air Pure</h5>
1235
+ <span class="text-sm bg-red-100 text-red-800 px-2 py-1 rounded">Reserved</span>
1236
+ </div>
1237
+ <p class="text-sm text-gray-600 mb-2">2024 Model • 1,200 miles</p>
1238
+ <div class="flex justify-between text-sm">
1239
+ <span>Lease Price: <strong>$1,299/mo</strong></span>
1240
+ <span>Term: <strong>12 months</strong></span>
1241
+ </div>
1242
+ </div>
1243
+
1244
+ <div class="mt-6">
1245
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-medium">
1246
+ <i class="fas fa-plus-circle mr-2"></i> Add Your Inventory
1247
+ </button>
1248
+ </div>
1249
+ </div>
1250
+ </div>
1251
+
1252
+ <!-- Community Panel -->
1253
+ <div class="community-panel" id="community-panel">
1254
+ <div class="community-header">
1255
+ <h3>Community Sponsorship</h3>
1256
+ <div>
1257
+ <button id="close-community-panel" class="text-white hover:text-gray-200">
1258
+ <i class="fas fa-times"></i>
1259
+ </button>
1260
+ </div>
1261
+ </div>
1262
+
1263
+ <div class="community-content">
1264
+ <div class="mb-4">
1265
+ <h4 class="font-semibold mb-2">Sponsor EV Leases in Your Community</h4>
1266
+ <p class="text-sm text-gray-600">Help finance EV subscriptions for local residents and businesses</p>
1267
+ </div>
1268
+
1269
+ <div class="community-sponsor-card">
1270
+ <div class="flex justify-between items-center mb-2">
1271
+ <h5 class="font-medium">Local Business Fleet Program</h5>
1272
+ <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">Active</span>
1273
+ </div>
1274
+ <p class="text-sm text-gray-600 mb-2">Sponsor EV leases for small businesses in your area</p>
1275
+ <div class="flex justify-between text-sm mb-2">
1276
+ <span>Target: <strong>$50,000</strong></span>
1277
+ <span>Raised: <strong>$32,450</strong></span>
1278
+ </div>
1279
+ <div class="sponsor-progress">
1280
+ <div class="sponsor-progress-bar" style="width: 65%"></div>
1281
+ </div>
1282
+ </div>
1283
+
1284
+ <div class="community-sponsor-card">
1285
+ <div class="flex justify-between items-center mb-2">
1286
+ <h5 class="font-medium">Rideshare Driver Initiative</h5>
1287
+ <span class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">New</span>
1288
+ </div>
1289
+ <p class="text-sm text-gray-600 mb-2">Help rideshare drivers transition to electric vehicles</p>
1290
+ <div class="flex justify-between text-sm mb-2">
1291
+ <span>Target: <strong>$25,000</strong></span>
1292
+ <span>Raised: <strong>$8,200</strong></span>
1293
+ </div>
1294
+ <div class="sponsor-progress">
1295
+ <div class="sponsor-progress-bar" style="width: 33%"></div>
1296
+ </div>
1297
+ </div>
1298
+
1299
+ <div class="community-sponsor-card">
1300
+ <div class="flex justify-between items-center mb-2">
1301
+ <h5 class="font-medium">Non-Profit EV Access</h5>
1302
+ <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">Active</span>
1303
+ </div>
1304
+ <p class="text-sm text-gray-600 mb-2">Provide EVs for local non-profit organizations</p>
1305
+ <div class="flex justify-between text-sm mb-2">
1306
+ <span>Target: <strong>$15,000</strong></span>
1307
+ <span>Raised: <strong>$14,850</strong></span>
1308
+ </div>
1309
+ <div class="sponsor-progress">
1310
+ <div class="sponsor-progress-bar" style="width: 99%"></div>
1311
+ </div>
1312
+ </div>
1313
+
1314
+ <div class="mt-6">
1315
+ <button class="w-full bg-pink-600 hover:bg-pink-700 text-white py-2 rounded-lg font-medium">
1316
+ <i class="fas fa-hand-holding-heart mr-2"></i> Create Sponsorship Program
1317
+ </button>
1318
+ </div>
1319
+ </div>
1320
+ </div>
1321
+
1322
+ <!-- Floating Buttons -->
1323
+ <div class="floating-btn" id="open-ampere-panel">
1324
+ <i class="fas fa-bolt"></i>
1325
+ </div>
1326
+
1327
+ <div class="dealer-btn" id="open-dealer-panel">
1328
+ <i class="fas fa-store"></i>
1329
+ </div>
1330
+
1331
+ <div class="community-btn" id="open-community-panel">
1332
+ <i class="fas fa-users"></i>
1333
+ </div>
1334
+
1335
+ <!-- Footer -->
1336
+ <footer class="bg-gray-800 text-white py-12">
1337
+ <div class="container mx-auto px-4">
1338
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
1339
+ <div>
1340
+ <h3 class="text-xl font-semibold mb-4">EVLEND</h3>
1341
+ <p class="text-gray-400">Innovative EV subscription service making electric vehicle access simple and flexible.</p>
1342
+ <div class="mt-4 flex space-x-4">
1343
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
1344
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook"></i></a>
1345
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
1346
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin"></i></a>
1347
+ </div>
1348
+ </div>
1349
+
1350
+ <div>
1351
+ <h4 class="font-semibold mb-4">Quick Links</h4>
1352
+ <ul class="space-y-2">
1353
+ <li><a href="#" class="text-gray-400 hover:text-white transition">How It Works</a></li>
1354
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Available Vehicles</a></li>
1355
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Subscription Plans</a></li>
1356
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing Calculator</a></li>
1357
+ </ul>
1358
+ </div>
1359
+
1360
+ <div>
1361
+ <h4 class="font-semibold mb-4">Legal</h4>
1362
+ <ul class="space-y-2">
1363
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
1364
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
1365
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Subscription Agreement</a></li>
1366
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Insurance Terms</a></li>
1367
+ </ul>
1368
+ </div>
1369
+
1370
+ <div>
1371
+ <h4 class="font-semibold mb-4">Contact</h4>
1372
+ <ul class="space-y-2">
1373
+ <li class="flex items-center">
1374
+ <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
1375
+ <span class="text-gray-400">123 EV Street, San Francisco, CA 94107</span>
1376
+ </li>
1377
+ <li class="flex items-center">
1378
+ <i class="fas fa-phone text-gray-400 mr-2"></i>
1379
+ <span class="text-gray-400">(888) 555-EVSU</span>
1380
+ </li>
1381
+ <li class="flex items-center">
1382
+ <i class="fas fa-envelope text-gray-400 mr-2"></i>
1383
+ <span class="text-gray-400">[email protected]</span>
1384
+ </li>
1385
+ </ul>
1386
+ </div>
1387
+ </div>
1388
+ <div class="pt-8 border-t border-gray-700 text-center text-gray-400">
1389
+ <p>&copy; 2025 EVLEND. By Ampere, BT. All rights reserved.</p>
1390
+ <p class="mt-2 text-sm">EV subscription service available in select markets. Vehicle availability may vary by location.</p>
1391
+ </div>
1392
+ </div>
1393
+ </footer>
1394
+
1395
+ <script>
1396
+ // Tab functionality for vehicle selection
1397
+ const vehicleOptions = document.querySelectorAll('.vehicle-option');
1398
+ vehicleOptions.forEach(option => {
1399
+ option.addEventListener('click', function() {
1400
+ // Remove selected class from all options
1401
+ vehicleOptions.forEach(opt => opt.classList.remove('selected'));
1402
+
1403
+ // Add selected class to clicked option
1404
+ this.classList.add('selected');
1405
+
1406
+ // Update vehicle details based on selection
1407
+ const model = this.getAttribute('data-model');
1408
+ updateVehicleDetails(model);
1409
+ });
1410
+ });
1411
+
1412
+ // Function to update vehicle details
1413
+ function updateVehicleDetails(model) {
1414
+ const vehicleName = document.getElementById('selected-vehicle-name');
1415
+ const vehicleDesc = document.getElementById('selected-vehicle-description');
1416
+ const vehicleRange = document.getElementById('selected-vehicle-range');
1417
+ const vehicleAccel = document.getElementById('selected-vehicle-acceleration');
1418
+ const vehicleSeating = document.getElementById('selected-vehicle-seating');
1419
+ const vehicleCargo = document.getElementById('selected-vehicle-cargo');
1420
+ const standardPrice = document.getElementById('standard-price');
1421
+ const longrangePrice = document.getElementById('longrange-price');
1422
+ const performancePrice = document.getElementById('performance-price');
1423
+
1424
+ switch(model) {
1425
+ case 'tesla-model3':
1426
+ vehicleName.textContent = 'Tesla Model 3';
1427
+ 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.';
1428
+ vehicleRange.textContent = '358 miles';
1429
+ vehicleAccel.textContent = '3.1-5.8s';
1430
+ vehicleSeating.textContent = '5 adults';
1431
+ vehicleCargo.textContent = '15 cu ft';
1432
+ standardPrice.textContent = '$699/month';
1433
+ longrangePrice.textContent = '$899/month';
1434
+ performancePrice.textContent = '$1,099/month';
1435
+ break;
1436
+
1437
+ case 'tesla-modely':
1438
+ vehicleName.textContent = 'Tesla Model Y';
1439
+ 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.';
1440
+ vehicleRange.textContent = '330 miles';
1441
+ vehicleAccel.textContent = '3.5-4.8s';
1442
+ vehicleSeating.textContent = '5-7 adults';
1443
+ vehicleCargo.textContent = '68 cu ft';
1444
+ standardPrice.textContent = '$799/month';
1445
+ longrangePrice.textContent = '$999/month';
1446
+ performancePrice.textContent = '$1,199/month';
1447
+ break;
1448
+
1449
+ case 'rivian-r1t':
1450
+ vehicleName.textContent = 'Rivian R1T';
1451
+ 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.';
1452
+ vehicleRange.textContent = '400 miles';
1453
+ vehicleAccel.textContent = '3.0s';
1454
+ vehicleSeating.textContent = '5 adults';
1455
+ vehicleCargo.textContent = '62 cu ft';
1456
+ standardPrice.textContent = '$1,199/month';
1457
+ longrangePrice.textContent = '$1,399/month';
1458
+ performancePrice.textContent = '$1,599/month';
1459
+ break;
1460
+
1461
+ case 'lucid-air':
1462
+ vehicleName.textContent = 'Lucid Air';
1463
+ 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.';
1464
+ vehicleRange.textContent = '516 miles';
1465
+ vehicleAccel.textContent = '2.5-3.8s';
1466
+ vehicleSeating.textContent = '5 adults';
1467
+ vehicleCargo.textContent = '26 cu ft';
1468
+ standardPrice.textContent = '$1,299/month';
1469
+ longrangePrice.textContent = '$1,499/month';
1470
+ performancePrice.textContent = '$1,799/month';
1471
+ break;
1472
+
1473
+ case 'ford-f150-lightning':
1474
+ vehicleName.textContent = 'Ford F-150 Lightning';
1475
+ 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.';
1476
+ vehicleRange.textContent = '320 miles';
1477
+ vehicleAccel.textContent = '4.0-5.8s';
1478
+ vehicleSeating.textContent = '5 adults';
1479
+ vehicleCargo.textContent = '52 cu ft';
1480
+ standardPrice.textContent = '$899/month';
1481
+ longrangePrice.textContent = '$1,099/month';
1482
+ performancePrice.textContent = '$1,299/month';
1483
+ break;
1484
+
1485
+ case 'hyundai-ioniq5':
1486
+ vehicleName.textContent = 'Hyundai Ioniq 5';
1487
+ 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.';
1488
+ vehicleRange.textContent = '303 miles';
1489
+ vehicleAccel.textContent = '5.2-7.4s';
1490
+ vehicleSeating.textContent = '5 adults';
1491
+ vegetableCargo.textContent = '27 cu ft';
1492
+ standardPrice.textContent = '$649/month';
1493
+ longrangePrice.textContent = '$799/month';
1494
+ performancePrice.textContent = '$949/month';
1495
+ break;
1496
+ }
1497
+ }
1498
+
1499
+ // Calculator functionality
1500
+ document.getElementById('calculate-btn').addEventListener('click', function() {
1501
+ const vehicle = document.getElementById('vehicle-select').value;
1502
+ const term = document.getElementById('term-length').value;
1503
+ const mileage = document.getElementById('mileage').value;
1504
+ const insurance = document.getElementById('insurance').value;
1505
+
1506
+ // Base prices for each vehicle
1507
+ let basePrice = 699;
1508
+ switch(vehicle) {
1509
+ case 'tesla-model3': basePrice = 699; break;
1510
+ case 'tesla-modely': basePrice = 799; break;
1511
+ case 'rivian-r1t': basePrice = 1199; break;
1512
+ case 'lucid-air': basePrice = 1299; break;
1513
+ case 'ford-f150-lightning': basePrice = 899; break;
1514
+ }
1515
+
1516
+ // Adjust for term length
1517
+ let termAdjustment = 0;
1518
+ switch(term) {
1519
+ case 'monthly': termAdjustment = 0.15; break;
1520
+ case '3month': termAdjustment = 0.10; break;
1521
+ case '6month': termAdjustment = 0.05; break;
1522
+ case '12month': termAdjustment = 0; break;
1523
+ }
1524
+
1525
+ // Adjust for mileage
1526
+ let mileageAdjustment = 0;
1527
+ switch(mileage) {
1528
+ case '750': mileageAdjustment = -0.10; break;
1529
+ case '1000': mileageAdjustment = 0; break;
1530
+ case '1500': mileageAdjustment = 0.15; break;
1531
+ case '2000': mileageAdjustment = 0.25; break;
1532
+ case 'unlimited': mileageAdjustment = 0.25; break;
1533
+ }
1534
+
1535
+ // Adjust for insurance
1536
+ let insuranceAdjustment = 0;
1537
+ switch(insurance) {
1538
+ case 'basic': insuranceAdjustment = -0.10; break;
1539
+ case 'standard': insuranceAdjustment = 0; break;
1540
+ case 'premium': insuranceAdjustment = 0.10; break;
1541
+ }
1542
+
1543
+ // Calculate final price
1544
+ let finalPrice = basePrice * (1 + termAdjustment + mileageAdjustment + insuranceAdjustment);
1545
+
1546
+ // Round to nearest dollar
1547
+ finalPrice = Math.round(finalPrice);
1548
+
1549
+ // Update display
1550
+ document.getElementById('estimated-payment').textContent = `$${finalPrice}`;
1551
+ });
1552
+
1553
+ // FAQ accordion functionality
1554
+ const faqQuestions = document.querySelectorAll('.faq-question');
1555
+ faqQuestions.forEach(question => {
1556
+ question.addEventListener('click', function() {
1557
+ const answer = this.nextElementSibling;
1558
+ const icon = this.querySelector('i');
1559
+
1560
+ // Toggle answer visibility
1561
+ answer.classList.toggle('hidden');
1562
+
1563
+ // Rotate icon
1564
+ if (answer.classList.contains('hidden')) {
1565
+ icon.style.transform = 'rotate(0deg)';
1566
+ } else {
1567
+ icon.style.transform = 'rotate(180deg)';
1568
+ }
1569
+ });
1570
+ });
1571
+
1572
+ // Panel toggle functionality
1573
+ const amperePanel = document.getElementById('ampere-panel');
1574
+ const dealerPanel = document.getElementById('dealer-panel');
1575
+ const communityPanel = document.getElementById('community-panel');
1576
+
1577
+ document.getElementById('open-ampere-panel').addEventListener('click', () => {
1578
+ amperePanel.style.display = 'block';
1579
+ dealerPanel.style.display = 'none';
1580
+ communityPanel.style.display = 'none';
1581
+ });
1582
+
1583
+ document.getElementById('open-dealer-panel').addEventListener('click', () => {
1584
+ amperePanel.style.display = 'none';
1585
+ dealerPanel.style.display = 'block';
1586
+ communityPanel.style.display = 'none';
1587
+ });
1588
+
1589
+ document.getElementById('open-community-panel').addEventListener('click', () => {
1590
+ amperePanel.style.display = 'none';
1591
+ dealerPanel.style.display = 'none';
1592
+ communityPanel.style.display = 'block';
1593
+ });
1594
+
1595
+ document.getElementById('close-ampere-panel').addEventListener('click', () => {
1596
+ amperePanel.style.display = 'none';
1597
+ });
1598
+
1599
+ document.getElementById('close-dealer-panel').addEventListener('click', () => {
1600
+ dealerPanel.style.display = 'none';
1601
+ });
1602
+
1603
+ document.getElementById('close-community-panel').addEventListener('click', () => {
1604
+ communityPanel.style.display = 'none';
1605
+ });
1606
+
1607
+ // Ampere panel functionality
1608
+ const earnAmpereBtn = document.getElementById('earn-ampere');
1609
+ const transferAmpereBtn = document.getElementById('transfer-ampere');
1610
+
1611
+ earnAmpereBtn.addEventListener('click', () => {
1612
+ // Get current balance
1613
+ let currentBalance = parseInt(document.getElementById('ampere-balance').textContent);
1614
+
1615
+ // Add 50 Ah credits
1616
+ currentBalance += 50;
1617
+
1618
+ // Update display
1619
+ document.getElementById('ampere-balance').textContent = currentBalance;
1620
+
1621
+ // Show notification
1622
+ alert('You earned 50 Ah credits for charging at a participating station!');
1623
+ });
1624
+
1625
+ transferAmpereBtn.addEventListener('click', () => {
1626
+ alert('Transfer functionality coming soon!');
1627
+ });
1628
+
1629
+ // Smooth scrolling for anchor links
1630
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1631
+ anchor.addEventListener('click', function(e) {
1632
+ e.preventDefault();
1633
+
1634
+ const targetId = this.getAttribute('href');
1635
+ if (targetId === '#') return;
1636
+
1637
+ const targetElement = document.querySelector(targetId);
1638
+ if (targetElement) {
1639
+ targetElement.scrollIntoView({
1640
+ behavior: 'smooth'
1641
+ });
1642
+ }
1643
+ });
1644
+ });
1645
+ </script>
1646
+ <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>
1647
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ keep all components working properly add a floating button for EV dealer sign up without registration that allows leases to be sources directly their panel make the panel display relevant leases details from site offerings looking for placement also add floating button for community sponsorship for lease financing make it similar to dealership panel