Hugging Face's logo

Spaces:
Yocapp
/
deepsite-project-0eeaz
Running

App Files Community
Yocapp commited on
Commit
2fdf2f9
·
verified ·
1 Parent(s): 56c71c3

🐳 19/03 - 14:18 - Fix and improve the current VTC simulator experience with the following requirements:------------------------------------MAIN ISSUES TO FIX1. The simulator card is currently NOT cli

Browse files
Files changed (2) hide show
  1. index.html +2 -2
  2. simulateur-pertes.html +962 -0
index.html CHANGED
@@ -290,7 +290,7 @@
290
  </a>
291
 
292
  <!-- Card 2 - Impact -->
293
- <div class="snap-start min-w-[240px] max-w-[240px] rounded-2xl border border-white/8 bg-[#151821] p-5 shadow-sm transition-all duration-200 hover:bg-[#181c26] hover:border-emerald-500/40 cursor-pointer group">
294
  <div class="flex flex-col justify-between min-h-[220px]">
295
  <div>
296
  <div class="text-[11px] uppercase tracking-wide text-white/35 mb-2">Impact</div>
@@ -305,7 +305,7 @@
305
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
306
  </div>
307
  </div>
308
- </div>
309
 
310
  <!-- Card 3 - Objectif -->
311
  <div class="snap-start min-w-[240px] max-w-[240px] rounded-2xl border border-white/8 bg-[#151821] p-5 shadow-sm transition-all duration-200 hover:bg-[#181c26] hover:border-emerald-500/40 cursor-pointer group">
 
290
  </a>
291
 
292
  <!-- Card 2 - Impact -->
293
+ <a href="simulateur-pertes.html" class="snap-start min-w-[240px] max-w-[240px] rounded-2xl border border-white/8 bg-[#151821] p-5 shadow-sm transition-all duration-200 hover:bg-[#181c26] hover:border-emerald-500/40 cursor-pointer group block no-underline">
294
  <div class="flex flex-col justify-between min-h-[220px]">
295
  <div>
296
  <div class="text-[11px] uppercase tracking-wide text-white/35 mb-2">Impact</div>
 
305
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
306
  </div>
307
  </div>
308
+ </a>
309
 
310
  <!-- Card 3 - Objectif -->
311
  <div class="snap-start min-w-[240px] max-w-[240px] rounded-2xl border border-white/8 bg-[#151821] p-5 shadow-sm transition-all duration-200 hover:bg-[#181c26] hover:border-emerald-500/40 cursor-pointer group">
simulateur-pertes.html ADDED
@@ -0,0 +1,962 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>TIE - Combien vous perdez par mois</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ body {
13
+ font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
14
+ }
15
+ input[type=number]::-webkit-inner-spin-button,
16
+ input[type=number]::-webkit-outer-spin-button {
17
+ -webkit-appearance: none;
18
+ margin: 0;
19
+ }
20
+ input[type=number] {
21
+ -moz-appearance: textfield;
22
+ }
23
+ .step-container {
24
+ display: none;
25
+ animation: fadeIn 0.4s ease-out;
26
+ }
27
+ .step-container.active {
28
+ display: block;
29
+ }
30
+ @keyframes fadeIn {
31
+ from { opacity: 0; transform: translateY(10px); }
32
+ to { opacity: 1; transform: translateY(0); }
33
+ }
34
+ .loading-container {
35
+ display: none;
36
+ animation: fadeIn 0.3s ease-out;
37
+ }
38
+ .loading-container.active {
39
+ display: block;
40
+ }
41
+ .result-container {
42
+ display: none;
43
+ animation: fadeIn 0.4s ease-out;
44
+ }
45
+ .result-container.active {
46
+ display: block;
47
+ }
48
+ .score-container {
49
+ display: none;
50
+ animation: fadeIn 0.4s ease-out;
51
+ }
52
+ .score-container.active {
53
+ display: block;
54
+ }
55
+ .vehicle-btn.selected {
56
+ background-color: white;
57
+ color: black;
58
+ border-color: white;
59
+ }
60
+ </style>
61
+ </head>
62
+ <body class="bg-[#0b0b0f] text-white antialiased min-h-screen">
63
+
64
+ <!-- Header -->
65
+ <header class="sticky top-0 z-50 bg-[#0b0b0f]/90 backdrop-blur-xl border-b border-white/5">
66
+ <div class="max-w-3xl mx-auto px-5 py-4 flex items-center justify-between">
67
+ <a href="index.html" class="text-sm text-white/60 hover:text-white transition flex items-center gap-2">
68
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
69
+ Retour
70
+ </a>
71
+ <div class="text-lg font-semibold tracking-tight text-white">TIE</div>
72
+ <div class="w-18"></div>
73
+ </div>
74
+ </header>
75
+
76
+ <!-- Main Content -->
77
+ <main class="max-w-3xl mx-auto px-5 pt-6 pb-28">
78
+
79
+ <!-- Page Header -->
80
+ <div id="pageHeader">
81
+ <div class="text-[11px] text-white/50 mb-3 uppercase tracking-wide">Simulateur mensuel</div>
82
+ <h1 class="text-[26px] leading-tight font-semibold text-white mb-3">Combien vous perdez par mois</h1>
83
+ <p class="text-sm text-white/60 mb-6">Découvrez votre rentabilité réelle et votre score TIE en 5 étapes.</p>
84
+ </div>
85
+
86
+ <!-- Progress Bar -->
87
+ <div id="progressBarContainer" class="mb-6">
88
+ <div class="flex justify-between items-center mb-2">
89
+ <span class="text-xs text-white/45">Étape <span id="stepLabel">1</span> sur 5</span>
90
+ </div>
91
+ <div class="w-full h-1.5 bg-white/10 rounded-full overflow-hidden">
92
+ <div id="progressFill" class="h-full bg-emerald-500 rounded-full transition-all duration-300 ease-out" style="width: 20%"></div>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Step 1: Activity -->
97
+ <div id="step1" class="step-container active">
98
+ <div class="bg-[#151821] border border-white/10 rounded-2xl p-5">
99
+ <h2 class="text-lg font-medium text-white mb-4">Votre activité mensuelle</h2>
100
+
101
+ <div class="space-y-4 mb-6">
102
+ <div>
103
+ <label class="block text-sm text-white/80 mb-2">Courses par jour</label>
104
+ <input type="number" id="coursesPerDay" placeholder="Ex : 8"
105
+ class="w-full rounded-xl bg-black/40 border border-white/10 px-4 py-3 text-white text-sm outline-none focus:border-emerald-500/50 transition">
106
+ </div>
107
+ <div>
108
+ <label class="block text-sm text-white/80 mb-2">Jours travaillés par mois</label>
109
+ <input type="number" id="daysPerMonth" placeholder="Ex : 22"
110
+ class="w-full rounded-xl bg-black/40 border border-white/10 px-4 py-3 text-white text-sm outline-none focus:border-emerald-500/50 transition">
111
+ </div>
112
+ </div>
113
+
114
+ <div class="text-xs text-white/50 mb-4 bg-white/5 rounded-lg p-3">
115
+ Total courses estimées : <span id="totalCoursesPreview" class="text-emerald-400 font-medium">0</span>
116
+ </div>
117
+
118
+ <button id="btnStep1Next" class="w-full py-3 rounded-xl bg-emerald-500 text-black font-medium text-sm hover:opacity-90 transition">
119
+ Suivant
120
+ </button>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Step 2: Platform Revenue -->
125
+ <div id="step2" class="step-container">
126
+ <div class="bg-[#151821] border border-white/10 rounded-2xl p-5">
127
+ <h2 class="text-lg font-medium text-white mb-4">Revenus via plateformes</h2>
128
+
129
+ <div class="mb-4">
130
+ <label class="block text-sm text-white/80 mb-2">Revenu mensuel net (Uber / Bolt / Heetch)</label>
131
+ <input type="number" id="platformRevenue" placeholder="Ex : 2500"
132
+ class="w-full rounded-xl bg-black/40 border border-white/10 px-4 py-3 text-white text-sm outline-none focus:border-emerald-500/50 transition">
133
+ </div>
134
+
135
+ <div class="text-xs text-white/50 mb-2 bg-emerald-500/10 border border-emerald-500/20 rounded-lg p-3 text-emerald-400/90">
136
+ <span class="font-medium">Important :</span> Utilisez votre récapitulatif fiscal mensuel. Cette valeur est déjà NETTE (commissions déduites).
137
+ </div>
138
+
139
+ <div class="flex gap-3 mt-6">
140
+ <button id="btnStep2Back" class="w-1/3 py-3 rounded-xl bg-white/5 text-white border border-white/10 text-sm font-medium hover:bg-white/10 transition">
141
+ Retour
142
+ </button>
143
+ <button id="btnStep2Next" class="w-2/3 py-3 rounded-xl bg-emerald-500 text-black font-medium text-sm hover:opacity-90 transition">
144
+ Suivant
145
+ </button>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Step 3: Private Clients -->
151
+ <div id="step3" class="step-container">
152
+ <div class="bg-[#151821] border border-white/10 rounded-2xl p-5">
153
+ <h2 class="text-lg font-medium text-white mb-4">Courses privées</h2>
154
+
155
+ <div class="mb-4">
156
+ <label class="block text-sm text-white/80 mb-2">Revenu mensuel privé (hors plateformes)</label>
157
+ <input type="number" id="privateRevenue" placeholder="Ex : 800"
158
+ class="w-full rounded-xl bg-black/40 border border-white/10 px-4 py-3 text-white text-sm outline-none focus:border-emerald-500/50 transition">
159
+ <p class="text-xs text-white/40 mt-2">Laissez 0 si vous n'avez pas encore de clients privés.</p>
160
+ </div>
161
+
162
+ <div class="flex gap-3 mt-6">
163
+ <button id="btnStep3Back" class="w-1/3 py-3 rounded-xl bg-white/5 text-white border border-white/10 text-sm font-medium hover:bg-white/10 transition">
164
+ Retour
165
+ </button>
166
+ <button id="btnStep3Next" class="w-2/3 py-3 rounded-xl bg-emerald-500 text-black font-medium text-sm hover:opacity-90 transition">
167
+ Suivant
168
+ </button>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Step 4: Tips -->
174
+ <div id="step4" class="step-container">
175
+ <div class="bg-[#151821] border border-white/10 rounded-2xl p-5">
176
+ <h2 class="text-lg font-medium text-white mb-4">Bonus & pourboires</h2>
177
+
178
+ <div class="mb-4">
179
+ <label class="block text-sm text-white/80 mb-2">Pourboires mensuels estimés (optionnel)</label>
180
+ <input type="number" id="tipsRevenue" placeholder="Ex : 150"
181
+ class="w-full rounded-xl bg-black/40 border border-white/10 px-4 py-3 text-white text-sm outline-none focus:border-emerald-500/50 transition">
182
+ <p class="text-xs text-white/40 mt-2">Laissez vide ou 0 si aucun.</p>
183
+ </div>
184
+
185
+ <div class="flex gap-3 mt-6">
186
+ <button id="btnStep4Back" class="w-1/3 py-3 rounded-xl bg-white/5 text-white border border-white/10 text-sm font-medium hover:bg-white/10 transition">
187
+ Retour
188
+ </button>
189
+ <button id="btnStep4Next" class="w-2/3 py-3 rounded-xl bg-emerald-500 text-black font-medium text-sm hover:opacity-90 transition">
190
+ Suivant
191
+ </button>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Step 5: Vehicle -->
197
+ <div id="step5" class="step-container">
198
+ <div class="bg-[#151821] border border-white/10 rounded-2xl p-5">
199
+ <h2 class="text-lg font-medium text-white mb-4">Votre véhicule</h2>
200
+
201
+ <div class="grid grid-cols-3 gap-2 mb-6" id="vehicleButtons">
202
+ <button type="button" data-value="thermique" class="vehicle-btn py-3 rounded-xl border border-white/10 text-white/60 bg-transparent transition text-sm font-medium">
203
+ Thermique
204
+ </button>
205
+ <button type="button" data-value="hybride" class="vehicle-btn py-3 rounded-xl border border-white/10 text-white/60 bg-transparent transition text-sm font-medium">
206
+ Hybride
207
+ </button>
208
+ <button type="button" data-value="electrique" class="vehicle-btn py-3 rounded-xl border border-white/10 text-white/60 bg-transparent transition text-sm font-medium">
209
+ Électrique
210
+ </button>
211
+ </div>
212
+ <input type="hidden" id="vehicleType" value="">
213
+
214
+ <div class="flex gap-3">
215
+ <button id="btnStep5Back" class="w-1/3 py-3 rounded-xl bg-white/5 text-white border border-white/10 text-sm font-medium hover:bg-white/10 transition">
216
+ Retour
217
+ </button>
218
+ <button id="btnStep5Calculate" class="w-2/3 py-3 rounded-xl bg-emerald-500 text-black font-medium text-sm hover:opacity-90 transition disabled:opacity-40 disabled:cursor-not-allowed" disabled>
219
+ Analyser mon activité
220
+ </button>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Loading Screen -->
226
+ <div id="loadingScreen" class="loading-container">
227
+ <div class="bg-[#151821] border border-white/10 rounded-2xl p-8 text-center">
228
+ <div class="w-16 h-16 mx-auto mb-6 rounded-full border-2 border-white/10 border-t-emerald-500 animate-spin"></div>
229
+ <div class="text-base font-medium text-white mb-2">Analyse de votre activité...</div>
230
+ <div class="text-sm text-white/50">TIE calcule votre rentabilité...</div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Results Screen -->
235
+ <div id="resultScreen" class="result-container">
236
+ <!-- Main Result Card -->
237
+ <div class="bg-[#151821] border border-white/10 rounded-2xl p-6 mb-4">
238
+ <div id="resultIcon" class="text-4xl mb-3">💸</div>
239
+ <h2 id="resultTitle" class="text-xl font-semibold text-white mb-2">Vous perdez de l'argent</h2>
240
+ <p id="resultSubtitle" class="text-sm text-white/60 mb-6">Votre activité n'est pas rentable actuellement.</p>
241
+
242
+ <div class="bg-emerald-500/10 border border-emerald-500/20 rounded-xl p-4 mb-4">
243
+ <div class="text-xs text-emerald-400/80 mb-1">Profit mensuel estimé</div>
244
+ <div id="profitAmount" class="text-3xl font-bold text-white">0 €</div>
245
+ </div>
246
+
247
+ <div class="space-y-2 mb-6">
248
+ <div class="flex justify-between text-sm">
249
+ <span class="text-white/60">Chiffre d'affaires total</span>
250
+ <span id="caTotal" class="text-white font-medium">0 €</span>
251
+ </div>
252
+ <div class="flex justify-between text-sm">
253
+ <span class="text-white/60">Charges (22%)</span>
254
+ <span id="chargesAmount" class="text-red-400">-0 €</span>
255
+ </div>
256
+ <div class="flex justify-between text-sm">
257
+ <span class="text-white/60">Coût kilométrique</span>
258
+ <span id="kmCost" class="text-red-400">-0 €</span>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="border-t border-white/10 pt-4 mb-4">
263
+ <div class="text-xs text-white/50 mb-3 uppercase tracking-wide">Répartition de votre activité</div>
264
+ <div class="space-y-2">
265
+ <div class="flex justify-between text-sm">
266
+ <span class="text-white/60">% Plateformes</span>
267
+ <span id="pctPlatform" class="text-white">0%</span>
268
+ </div>
269
+ <div class="flex justify-between text-sm">
270
+ <span class="text-white/60">% Privé</span>
271
+ <span id="pctPrivate" class="text-emerald-400">0%</span>
272
+ </div>
273
+ <div class="flex justify-between text-sm">
274
+ <span class="text-white/60">% Pourboires</span>
275
+ <span id="pctTips" class="text-white">0%</span>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Private Projection -->
281
+ <div id="privateProjection" class="bg-emerald-500/10 border border-emerald-500/20 rounded-xl p-4 mb-6 hidden">
282
+ <div class="flex items-center gap-2 text-emerald-400 font-medium text-sm mb-1">
283
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
284
+ Potentiel de croissance
285
+ </div>
286
+ <div class="text-sm text-white/80">
287
+ <span id="gainProjection">+0 €</span>/mois en développant vos courses privées (+15%)
288
+ </div>
289
+ </div>
290
+
291
+ <button id="btnDiscoverScore" class="w-full py-3 rounded-xl bg-emerald-500 text-black font-medium text-sm hover:opacity-90 transition">
292
+ Découvrir mon score TIE
293
+ </button>
294
+
295
+ <button id="btnReset" class="w-full py-2 mt-3 text-xs text-white/60 hover:text-white transition">
296
+ Refaire le calcul
297
+ </button>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Score Loading -->
302
+ <div id="scoreLoading" class="loading-container">
303
+ <div class="bg-[#151821] border border-white/10 rounded-2xl p-8 text-center">
304
+ <div class="w-16 h-16 mx-auto mb-6 rounded-full border-2 border-white/10 border-t-emerald-500 animate-spin"></div>
305
+ <div class="text-base font-medium text-white mb-2">Calcul de votre score TIE...</div>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- Score Screen -->
310
+ <div id="scoreScreen" class="score-container">
311
+ <div class="bg-[#151821] border border-white/10 rounded-2xl p-6 mb-4">
312
+ <div class="text-center mb-6">
313
+ <div class="text-5xl mb-4">⭐</div>
314
+ <div class="text-sm text-white/60 mb-2">Score TIE</div>
315
+ <div id="tieScore" class="text-5xl font-bold text-white mb-2">0<span class="text-2xl text-white/40">/100</span></div>
316
+ <div id="scoreLabel" class="text-lg text-emerald-400 font-medium">Chauffeur expert</div>
317
+ </div>
318
+
319
+ <div class="bg-black/40 rounded-xl p-4 mb-4">
320
+ <div id="scoreInterpretation" class="text-sm text-white/80 text-center leading-relaxed">
321
+ Votre activité est rentable et bien optimisée.
322
+ </div>
323
+ </div>
324
+
325
+ <!-- Score Breakdown -->
326
+ <div class="space-y-3 mb-6">
327
+ <div>
328
+ <div class="flex justify-between text-xs text-white/60 mb-1">
329
+ <span>Rentabilité</span>
330
+ <span id="scoreProfit">0/40</span>
331
+ </div>
332
+ <div class="w-full h-1.5 bg-white/10 rounded-full">
333
+ <div id="barProfit" class="h-full bg-emerald-500 rounded-full" style="width: 0%"></div>
334
+ </div>
335
+ </div>
336
+ <div>
337
+ <div class="flex justify-between text-xs text-white/60 mb-1">
338
+ <span>Mix privé/plateforme</span>
339
+ <span id="scoreMix">0/20</span>
340
+ </div>
341
+ <div class="w-full h-1.5 bg-white/10 rounded-full">
342
+ <div id="barMix" class="h-full bg-emerald-500 rounded-full" style="width: 0%"></div>
343
+ </div>
344
+ </div>
345
+ <div>
346
+ <div class="flex justify-between text-xs text-white/60 mb-1">
347
+ <span>Qualité d'activité</span>
348
+ <span id="scoreQuality">0/25</span>
349
+ </div>
350
+ <div class="w-full h-1.5 bg-white/10 rounded-full">
351
+ <div id="barQuality" class="h-full bg-emerald-500 rounded-full" style="width: 0%"></div>
352
+ </div>
353
+ </div>
354
+ <div>
355
+ <div class="flex justify-between text-xs text-white/60 mb-1">
356
+ <span>Efficience</span>
357
+ <span id="scoreEfficiency">0/15</span>
358
+ </div>
359
+ <div class="w-full h-1.5 bg-white/10 rounded-full">
360
+ <div id="barEfficiency" class="h-full bg-emerald-500 rounded-full" style="width: 0%"></div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <!-- Projection -->
366
+ <div id="scoreProjection" class="bg-emerald-500/10 border border-emerald-500/20 rounded-xl p-4 mb-6 text-center">
367
+ <div class="text-sm text-emerald-400 font-medium" id="scoreProjectionText">
368
+ +12 points possibles en développant vos courses privées
369
+ </div>
370
+ </div>
371
+
372
+ <!-- CTAs -->
373
+ <div class="space-y-3 mb-6">
374
+ <button class="w-full py-3 rounded-xl bg-emerald-500 text-black font-medium text-sm hover:opacity-90 transition">
375
+ Optimiser mes courses
376
+ </button>
377
+ <button class="w-full py-3 rounded-xl bg-white/5 border border-white/10 text-white font-medium text-sm hover:bg-white/10 transition">
378
+ Développer mes clients privés
379
+ </button>
380
+ </div>
381
+
382
+ <!-- Psychological Trigger -->
383
+ <div class="text-center pt-4 border-t border-white/10">
384
+ <p class="text-xs text-white/40">
385
+ Les meilleurs chauffeurs sont au-dessus de 80
386
+ </p>
387
+ </div>
388
+ </div>
389
+ </div>
390
+
391
+ </main>
392
+
393
+ <script>
394
+ // State management
395
+ let currentStep = 1;
396
+ const totalSteps = 5;
397
+ let formData = {
398
+ coursesPerDay: 0,
399
+ daysPerMonth: 0,
400
+ platformRevenue: 0,
401
+ privateRevenue: 0,
402
+ tipsRevenue: 0,
403
+ vehicleType: ''
404
+ };
405
+
406
+ let calculationResults = {};
407
+
408
+ // DOM Elements check helper
409
+ function getElement(id) {
410
+ const el = document.getElementById(id);
411
+ if (!el) console.warn(`Element ${id} not found`);
412
+ return el;
413
+ }
414
+
415
+ // Format helpers
416
+ function formatMoney(value) {
417
+ if (isNaN(value)) return '0 €';
418
+ return Math.round(value).toLocaleString('fr-FR') + ' €';
419
+ }
420
+
421
+ function formatNumber(value, decimals = 0) {
422
+ if (isNaN(value)) return '0';
423
+ return value.toFixed(decimals).replace('.', ',');
424
+ }
425
+
426
+ // Progress bar update
427
+ function updateProgress() {
428
+ const progressBar = getElement('progressFill');
429
+ const stepLabel = getElement('stepLabel');
430
+ if (!progressBar || !stepLabel) return;
431
+
432
+ const progress = (currentStep / totalSteps) * 100;
433
+ progressBar.style.width = progress + '%';
434
+ stepLabel.textContent = currentStep;
435
+ }
436
+
437
+ // Show specific step
438
+ function showStep(step) {
439
+ // Hide all steps
440
+ document.querySelectorAll('.step-container').forEach(el => el.classList.remove('active'));
441
+ document.querySelectorAll('.loading-container').forEach(el => el.classList.remove('active'));
442
+ document.querySelectorAll('.result-container').forEach(el => el.classList.remove('active'));
443
+ document.querySelectorAll('.score-container').forEach(el => el.classList.remove('active'));
444
+
445
+ if (step >= 1 && step <= 5) {
446
+ const stepEl = getElement('step' + step);
447
+ if (stepEl) stepEl.classList.add('active');
448
+ currentStep = step;
449
+ updateProgress();
450
+
451
+ // Show progress bar and header
452
+ const progressContainer = getElement('progressBarContainer');
453
+ const pageHeader = getElement('pageHeader');
454
+ if (progressContainer) progressContainer.style.display = 'block';
455
+ if (pageHeader) pageHeader.style.display = 'block';
456
+ }
457
+ }
458
+
459
+ function showLoading() {
460
+ document.querySelectorAll('.step-container').forEach(el => el.classList.remove('active'));
461
+ document.querySelectorAll('.result-container').forEach(el => el.classList.remove('active'));
462
+ document.querySelectorAll('.score-container').forEach(el => el.classList.remove('active'));
463
+
464
+ const loading = getElement('loadingScreen');
465
+ if (loading) {
466
+ loading.classList.add('active');
467
+ // Hide progress bar during loading
468
+ const progressContainer = getElement('progressBarContainer');
469
+ if (progressContainer) progressContainer.style.display = 'none';
470
+ }
471
+ }
472
+
473
+ function showResults() {
474
+ document.querySelectorAll('.step-container').forEach(el => el.classList.remove('active'));
475
+ document.querySelectorAll('.loading-container').forEach(el => el.classList.remove('active'));
476
+ document.querySelectorAll('.score-container').forEach(el => el.classList.remove('active'));
477
+
478
+ const result = getElement('resultScreen');
479
+ if (result) {
480
+ result.classList.add('active');
481
+ // Hide progress bar for results
482
+ const progressContainer = getElement('progressBarContainer');
483
+ const pageHeader = getElement('pageHeader');
484
+ if (progressContainer) progressContainer.style.display = 'none';
485
+ if (pageHeader) pageHeader.style.display = 'none';
486
+ }
487
+ }
488
+
489
+ function showScoreLoading() {
490
+ document.querySelectorAll('.result-container').forEach(el => el.classList.remove('active'));
491
+
492
+ const loading = getElement('scoreLoading');
493
+ if (loading) loading.classList.add('active');
494
+ }
495
+
496
+ function showScore() {
497
+ document.querySelectorAll('.loading-container').forEach(el => el.classList.remove('active'));
498
+ document.querySelectorAll('.result-container').forEach(el => el.classList.remove('active'));
499
+
500
+ const score = getElement('scoreScreen');
501
+ if (score) score.classList.add('active');
502
+ }
503
+
504
+ // Step 1 Logic
505
+ const coursesPerDayInput = getElement('coursesPerDay');
506
+ const daysPerMonthInput = getElement('daysPerMonth');
507
+ const totalCoursesPreview = getElement('totalCoursesPreview');
508
+ const btnStep1Next = getElement('btnStep1Next');
509
+
510
+ function updateTotalCourses() {
511
+ if (!coursesPerDayInput || !daysPerMonthInput || !totalCoursesPreview) return;
512
+
513
+ const courses = parseFloat(coursesPerDayInput.value) || 0;
514
+ const days = parseFloat(daysPerMonthInput.value) || 0;
515
+ const total = courses * days;
516
+ totalCoursesPreview.textContent = total;
517
+ }
518
+
519
+ if (coursesPerDayInput) {
520
+ coursesPerDayInput.addEventListener('input', updateTotalCourses);
521
+ }
522
+ if (daysPerMonthInput) {
523
+ daysPerMonthInput.addEventListener('input', updateTotalCourses);
524
+ }
525
+
526
+ if (btnStep1Next) {
527
+ btnStep1Next.addEventListener('click', () => {
528
+ if (!coursesPerDayInput || !daysPerMonthInput) return;
529
+
530
+ const courses = parseFloat(coursesPerDayInput.value);
531
+ const days = parseFloat(daysPerMonthInput.value);
532
+
533
+ if (!courses || courses <= 0) {
534
+ alert('Veuillez entrer un nombre de courses valide.');
535
+ return;
536
+ }
537
+ if (!days || days <= 0 || days > 31) {
538
+ alert('Veuillez entrer un nombre de jours valide (1-31).');
539
+ return;
540
+ }
541
+
542
+ formData.coursesPerDay = courses;
543
+ formData.daysPerMonth = days;
544
+ showStep(2);
545
+ });
546
+ }
547
+
548
+ // Step 2 Logic
549
+ const btnStep2Back = getElement('btnStep2Back');
550
+ const btnStep2Next = getElement('btnStep2Next');
551
+ const platformRevenueInput = getElement('platformRevenue');
552
+
553
+ if (btnStep2Back) {
554
+ btnStep2Back.addEventListener('click', () => showStep(1));
555
+ }
556
+
557
+ if (btnStep2Next) {
558
+ btnStep2Next.addEventListener('click', () => {
559
+ if (!platformRevenueInput) return;
560
+
561
+ const revenue = parseFloat(platformRevenueInput.value);
562
+ if (revenue === undefined || revenue < 0 || isNaN(revenue)) {
563
+ alert('Veuillez entrer un montant valide.');
564
+ return;
565
+ }
566
+
567
+ formData.platformRevenue = revenue;
568
+ showStep(3);
569
+ });
570
+ }
571
+
572
+ // Step 3 Logic
573
+ const btnStep3Back = getElement('btnStep3Back');
574
+ const btnStep3Next = getElement('btnStep3Next');
575
+ const privateRevenueInput = getElement('privateRevenue');
576
+
577
+ if (btnStep3Back) {
578
+ btnStep3Back.addEventListener('click', () => showStep(2));
579
+ }
580
+
581
+ if (btnStep3Next) {
582
+ btnStep3Next.addEventListener('click', () => {
583
+ if (!privateRevenueInput) return;
584
+
585
+ const revenue = parseFloat(privateRevenueInput.value) || 0;
586
+ formData.privateRevenue = revenue;
587
+ showStep(4);
588
+ });
589
+ }
590
+
591
+ // Step 4 Logic
592
+ const btnStep4Back = getElement('btnStep4Back');
593
+ const btnStep4Next = getElement('btnStep4Next');
594
+ const tipsRevenueInput = getElement('tipsRevenue');
595
+
596
+ if (btnStep4Back) {
597
+ btnStep4Back.addEventListener('click', () => showStep(3));
598
+ }
599
+
600
+ if (btnStep4Next) {
601
+ btnStep4Next.addEventListener('click', () => {
602
+ if (!tipsRevenueInput) return;
603
+
604
+ const tips = parseFloat(tipsRevenueInput.value) || 0;
605
+ formData.tipsRevenue = tips;
606
+ showStep(5);
607
+ });
608
+ }
609
+
610
+ // Step 5 Logic
611
+ const vehicleBtns = document.querySelectorAll('.vehicle-btn');
612
+ const vehicleTypeInput = getElement('vehicleType');
613
+ const btnStep5Back = getElement('btnStep5Back');
614
+ const btnStep5Calculate = getElement('btnStep5Calculate');
615
+
616
+ vehicleBtns.forEach(btn => {
617
+ btn.addEventListener('click', () => {
618
+ vehicleBtns.forEach(b => b.classList.remove('selected'));
619
+ btn.classList.add('selected');
620
+
621
+ const value = btn.dataset.value;
622
+ if (vehicleTypeInput) vehicleTypeInput.value = value;
623
+ formData.vehicleType = value;
624
+
625
+ if (btnStep5Calculate) btnStep5Calculate.disabled = false;
626
+ });
627
+ });
628
+
629
+ if (btnStep5Back) {
630
+ btnStep5Back.addEventListener('click', () => showStep(4));
631
+ }
632
+
633
+ // Calculation Logic
634
+ function calculateResults() {
635
+ const courses = formData.coursesPerDay * formData.daysPerMonth;
636
+ const caTotal = formData.platformRevenue + formData.privateRevenue + formData.tipsRevenue;
637
+ const kmTotal = courses * 10;
638
+
639
+ // Cost per km
640
+ let costPerKm = 0.35; // thermique default
641
+ if (formData.vehicleType === 'hybride') costPerKm = 0.28;
642
+ if (formData.vehicleType === 'electrique') costPerKm = 0.20;
643
+
644
+ const costKm = kmTotal * costPerKm;
645
+ const charges = caTotal * 0.22;
646
+
647
+ // Hidden losses (bad trips)
648
+ const badTripRate = 0.35;
649
+ const lossPerTrip = 3;
650
+ const hiddenLoss = courses * badTripRate * lossPerTrip;
651
+
652
+ const profit = caTotal - charges - costKm;
653
+
654
+ // Percentages
655
+ const pctPlatform = caTotal > 0 ? (formData.platformRevenue / caTotal) * 100 : 0;
656
+ const pctPrivate = caTotal > 0 ? (formData.privateRevenue / caTotal) * 100 : 0;
657
+ const pctTips = caTotal > 0 ? (formData.tipsRevenue / caTotal) * 100 : 0;
658
+
659
+ // Private projection (+15%)
660
+ const privateGain = formData.privateRevenue * 0.15;
661
+
662
+ calculationResults = {
663
+ courses,
664
+ caTotal,
665
+ kmTotal,
666
+ costKm,
667
+ charges,
668
+ hiddenLoss,
669
+ profit,
670
+ pctPlatform,
671
+ pctPrivate,
672
+ pctTips,
673
+ privateGain
674
+ };
675
+
676
+ return calculationResults;
677
+ }
678
+
679
+ // TIE Score Calculation
680
+ function calculateTIEScore() {
681
+ const results = calculationResults;
682
+ let score = 0;
683
+ let scoreProfit = 0;
684
+ let scoreMix = 0;
685
+ let scoreQuality = 0;
686
+ let scoreEfficiency = 0;
687
+
688
+ // 1. Profitability (40 pts)
689
+ if (results.profit < 1500) {
690
+ scoreProfit = 10;
691
+ } else if (results.profit <= 3000) {
692
+ scoreProfit = 25;
693
+ } else {
694
+ scoreProfit = 35;
695
+ }
696
+ score += scoreProfit;
697
+
698
+ // 2. Private revenue mix (20 pts)
699
+ const privateRatio = results.pctPrivate;
700
+ if (privateRatio < 10) {
701
+ scoreMix = 5;
702
+ } else if (privateRatio < 25) {
703
+ scoreMix = 10;
704
+ } else if (privateRatio < 50) {
705
+ scoreMix = 15;
706
+ } else {
707
+ scoreMix = 20;
708
+ }
709
+ score += scoreMix;
710
+
711
+ // 3. Activity quality (25 pts) - based on hidden loss ratio
712
+ const lossRatio = results.hiddenLoss / results.caTotal;
713
+ if (lossRatio > 0.15) {
714
+ scoreQuality = 10;
715
+ } else if (lossRatio > 0.08) {
716
+ scoreQuality = 18;
717
+ } else {
718
+ scoreQuality = 25;
719
+ }
720
+ score += scoreQuality;
721
+
722
+ // 4. Efficiency (15 pts) - based on courses consistency (assume consistent if > 100 courses/month)
723
+ if (results.courses < 50) {
724
+ scoreEfficiency = 5;
725
+ } else if (results.courses < 100) {
726
+ scoreEfficiency = 10;
727
+ } else {
728
+ scoreEfficiency = 15;
729
+ }
730
+ score += scoreEfficiency;
731
+
732
+ // Score projection (if they increase private by 15%)
733
+ const newPrivateRevenue = formData.privateRevenue * 1.15;
734
+ const newPrivateRatio = (newPrivateRevenue / (results.caTotal + (newPrivateRevenue - formData.privateRevenue))) * 100;
735
+ let potentialScoreMix = 0;
736
+ if (newPrivateRatio < 10) potentialScoreMix = 5;
737
+ else if (newPrivateRatio < 25) potentialScoreMix = 10;
738
+ else if (newPrivateRatio < 50) potentialScoreMix = 15;
739
+ else potentialScoreMix = 20;
740
+
741
+ const pointsToGain = potentialScoreMix - scoreMix;
742
+
743
+ return {
744
+ total: score,
745
+ profit: scoreProfit,
746
+ mix: scoreMix,
747
+ quality: scoreQuality,
748
+ efficiency: scoreEfficiency,
749
+ interpretation: getScoreInterpretation(score),
750
+ label: getScoreLabel(score),
751
+ pointsToGain: pointsToGain > 0 ? pointsToGain : 0
752
+ };
753
+ }
754
+
755
+ function getScoreInterpretation(score) {
756
+ if (score < 40) return "⚠️ Activité à risque. Votre rentabilité est fragile et dépend trop des plateformes.";
757
+ if (score < 70) return "⚖️ Activité stable mais optimisable. Vous pouvez gagner plus en développant votre clientèle privée.";
758
+ if (score < 85) return "🚀 Bon niveau. Votre activité est rentable mais peut encore être améliorée.";
759
+ return "🏆 Chauffeur expert. Votre activité est bien optimisée et rentable.";
760
+ }
761
+
762
+ function getScoreLabel(score) {
763
+ if (score < 40) return "Activité à risque";
764
+ if (score < 70) return "Activité stable";
765
+ if (score < 85) return "Bon niveau";
766
+ return "Chauffeur expert";
767
+ }
768
+
769
+ function displayResults() {
770
+ const results = calculationResults;
771
+
772
+ // Update UI
773
+ const resultIcon = getElement('resultIcon');
774
+ const resultTitle = getElement('resultTitle');
775
+ const resultSubtitle = getElement('resultSubtitle');
776
+ const profitAmount = getElement('profitAmount');
777
+ const caTotal = getElement('caTotal');
778
+ const chargesAmount = getElement('chargesAmount');
779
+ const kmCost = getElement('kmCost');
780
+ const pctPlatform = getElement('pctPlatform');
781
+ const pctPrivate = getElement('pctPrivate');
782
+ const pctTips = getElement('pctTips');
783
+ const privateProjection = getElement('privateProjection');
784
+ const gainProjection = getElement('gainProjection');
785
+
786
+ if (profitAmount) profitAmount.textContent = formatMoney(results.profit);
787
+ if (caTotal) caTotal.textContent = formatMoney(results.caTotal);
788
+ if (chargesAmount) chargesAmount.textContent = '-' + formatMoney(results.charges);
789
+ if (kmCost) kmCost.textContent = '-' + formatMoney(results.costKm);
790
+ if (pctPlatform) pctPlatform.textContent = Math.round(results.pctPlatform) + '%';
791
+ if (pctPrivate) pctPrivate.textContent = Math.round(results.pctPrivate) + '%';
792
+ if (pctTips) pctTips.textContent = Math.round(results.pctTips) + '%';
793
+
794
+ // Result logic
795
+ if (results.profit < 1500) {
796
+ if (resultIcon) resultIcon.textContent = '💸';
797
+ if (resultTitle) resultTitle.textContent = `Vous perdez environ ${Math.abs(Math.round(results.profit - 1500))}€/mois`;
798
+ if (resultSubtitle) resultSubtitle.textContent = "Votre activité n'est pas rentable actuellement.";
799
+ } else if (results.profit <= 3000) {
800
+ if (resultIcon) resultIcon.textContent = '⚖️';
801
+ if (resultTitle) resultTitle.textContent = "Votre activité est stable mais optimisable";
802
+ if (resultSubtitle) resultSubtitle.textContent = "Vous gagnez correctement mais pouvez optimiser davantage.";
803
+ } else {
804
+ if (resultIcon) resultIcon.textContent = '🚀';
805
+ if (resultTitle) resultTitle.textContent = "Votre activité est rentable et bien optimisée";
806
+ if (resultSubtitle) resultSubtitle.textContent = "Excellent travail ! Votre modèle économique est solide.";
807
+ }
808
+
809
+ // Private projection
810
+ if (results.privateGain > 0) {
811
+ if (privateProjection) privateProjection.classList.remove('hidden');
812
+ if (gainProjection) gainProjection.textContent = formatMoney(results.privateGain);
813
+ } else {
814
+ if (privateProjection) privateProjection.classList.add('hidden');
815
+ }
816
+ }
817
+
818
+ function displayScore() {
819
+ const score = calculateTIEScore();
820
+
821
+ const tieScore = getElement('tieScore');
822
+ const scoreLabel = getElement('scoreLabel');
823
+ const scoreInterpretation = getElement('scoreInterpretation');
824
+
825
+ const scoreProfit = getElement('scoreProfit');
826
+ const scoreMix = getElement('scoreMix');
827
+ const scoreQuality = getElement('scoreQuality');
828
+ const scoreEfficiency = getElement('scoreEfficiency');
829
+
830
+ const barProfit = getElement('barProfit');
831
+ const barMix = getElement('barMix');
832
+ const barQuality = getElement('barQuality');
833
+ const barEfficiency = getElement('barEfficiency');
834
+
835
+ const scoreProjectionText = getElement('scoreProjectionText');
836
+
837
+ if (tieScore) tieScore.innerHTML = `${score.total}<span class="text-2xl text-white/40">/100</span>`;
838
+ if (scoreLabel) scoreLabel.textContent = score.label;
839
+ if (scoreInterpretation) scoreInterpretation.textContent = score.interpretation;
840
+
841
+ if (scoreProfit) scoreProfit.textContent = `${score.profit}/40`;
842
+ if (scoreMix) scoreMix.textContent = `${score.mix}/20`;
843
+ if (scoreQuality) scoreQuality.textContent = `${score.quality}/25`;
844
+ if (scoreEfficiency) scoreEfficiency.textContent = `${score.efficiency}/15`;
845
+
846
+ if (barProfit) barProfit.style.width = (score.profit / 40 * 100) + '%';
847
+ if (barMix) barMix.style.width = (score.mix / 20 * 100) + '%';
848
+ if (barQuality) barQuality.style.width = (score.quality / 25 * 100) + '%';
849
+ if (barEfficiency) barEfficiency.style.width = (score.efficiency / 15 * 100) + '%';
850
+
851
+ if (scoreProjectionText && score.pointsToGain > 0) {
852
+ scoreProjectionText.textContent = `+${score.pointsToGain} points possibles en développant vos courses privées`;
853
+ } else if (scoreProjectionText) {
854
+ scoreProjectionText.textContent = "Votre mix privé/plateforme est déjà optimal";
855
+ }
856
+ }
857
+
858
+ // Calculate button
859
+ if (btnStep5Calculate) {
860
+ btnStep5Calculate.addEventListener('click', () => {
861
+ if (!formData.vehicleType) {
862
+ alert('Veuillez sélectionner un type de véhicule.');
863
+ return;
864
+ }
865
+
866
+ showLoading();
867
+
868
+ // Calculate
869
+ calculateResults();
870
+
871
+ // Simulate loading delay
872
+ setTimeout(() => {
873
+ displayResults();
874
+ showResults();
875
+ }, 1000);
876
+ });
877
+ }
878
+
879
+ // Discover score button
880
+ const btnDiscoverScore = getElement('btnDiscoverScore');
881
+ if (btnDiscoverScore) {
882
+ btnDiscoverScore.addEventListener('click', () => {
883
+ showScoreLoading();
884
+
885
+ setTimeout(() => {
886
+ displayScore();
887
+ showScore();
888
+ }, 800);
889
+ });
890
+ }
891
+
892
+ // Reset button
893
+ const btnReset = getElement('btnReset');
894
+ if (btnReset) {
895
+ btnReset.addEventListener('click', () => {
896
+ // Reset form
897
+ formData = {
898
+ coursesPerDay: 0,
899
+ daysPerMonth: 0,
900
+ platformRevenue: 0,
901
+ privateRevenue: 0,
902
+ tipsRevenue: 0,
903
+ vehicleType: ''
904
+ };
905
+
906
+ // Clear inputs
907
+ if (coursesPerDayInput) coursesPerDayInput.value = '';
908
+ if (daysPerMonthInput) daysPerMonthInput.value = '';
909
+ if (platformRevenueInput) platformRevenueInput.value = '';
910
+ if (privateRevenueInput) privateRevenueInput.value = '';
911
+ if (tipsRevenueInput) tipsRevenueInput.value = '';
912
+
913
+ vehicleBtns.forEach(b => b.classList.remove('selected'));
914
+ if (vehicleTypeInput) vehicleTypeInput.value = '';
915
+ if (btnStep5Calculate) btnStep5Calculate.disabled = true;
916
+
917
+ if (totalCoursesPreview) totalCoursesPreview.textContent = '0';
918
+
919
+ // Go back to step 1
920
+ showStep(1);
921
+ });
922
+ }
923
+
924
+ // Enter key shortcuts
925
+ if (coursesPerDayInput) {
926
+ coursesPerDayInput.addEventListener('keypress', (e) => {
927
+ if (e.key === 'Enter') {
928
+ if (daysPerMonthInput) daysPerMonthInput.focus();
929
+ }
930
+ });
931
+ }
932
+
933
+ if (daysPerMonthInput) {
934
+ daysPerMonthInput.addEventListener('keypress', (e) => {
935
+ if (e.key === 'Enter' && btnStep1Next) btnStep1Next.click();
936
+ });
937
+ }
938
+
939
+ if (platformRevenueInput) {
940
+ platformRevenueInput.addEventListener('keypress', (e) => {
941
+ if (e.key === 'Enter' && btnStep2Next) btnStep2Next.click();
942
+ });
943
+ }
944
+
945
+ if (privateRevenueInput) {
946
+ privateRevenueInput.addEventListener('keypress', (e) => {
947
+ if (e.key === 'Enter' && btnStep3Next) btnStep3Next.click();
948
+ });
949
+ }
950
+
951
+ if (tipsRevenueInput) {
952
+ tipsRevenueInput.addEventListener('keypress', (e) => {
953
+ if (e.key === 'Enter' && btnStep4Next) btnStep4Next.click();
954
+ });
955
+ }
956
+
957
+ // Initialize
958
+ updateProgress();
959
+ </script>
960
+
961
+ </body>
962
+ </html>