Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>TIE - Combien vous perdez par mois</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; | |
| } | |
| input[type=number]::-webkit-inner-spin-button, | |
| input[type=number]::-webkit-outer-spin-button { | |
| -webkit-appearance: none; | |
| margin: 0; | |
| } | |
| input[type=number] { | |
| -moz-appearance: textfield; | |
| } | |
| .step-container, | |
| .loading-container, | |
| .result-container, | |
| .score-container { | |
| display: none; | |
| animation: fadeIn 0.35s ease-out; | |
| } | |
| .step-container.active, | |
| .loading-container.active, | |
| .result-container.active, | |
| .score-container.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .vehicle-btn.selected, | |
| .category-btn.selected { | |
| background-color: white; | |
| color: black; | |
| border-color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-[#0b0b0f] text-white antialiased min-h-screen"> | |
| <header class="sticky top-0 z-50 bg-[#0b0b0f]/90 backdrop-blur-xl border-b border-white/5"> | |
| <div class="max-w-3xl mx-auto px-5 py-4 flex items-center justify-between"> | |
| <a href="index.html" class="text-sm text-white/60 hover:text-white transition flex items-center gap-2"> | |
| <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> | |
| Retour | |
| </a> | |
| <div class="text-lg font-semibold tracking-tight text-white">TIE</div> | |
| <div class="w-18"></div> | |
| </div> | |
| </header> | |
| <main class="max-w-3xl mx-auto px-5 pt-6 pb-28"> | |
| <div id="pageHeader"> | |
| <div class="text-[11px] text-white/50 mb-3 uppercase tracking-wide">Simulateur mensuel</div> | |
| <h1 class="text-[26px] leading-tight font-semibold text-white mb-3">Combien vous perdez par mois</h1> | |
| <p class="text-sm text-white/60 mb-6">Découvrez votre rentabilité réelle et votre score TIE en 6 étapes.</p> | |
| </div> | |
| <div id="progressBarContainer" class="mb-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-xs text-white/45">Étape <span id="stepLabel">1</span> sur 6</span> | |
| </div> | |
| <div class="w-full h-1.5 bg-white/10 rounded-full overflow-hidden"> | |
| <div id="progressFill" class="h-full bg-emerald-500 rounded-full transition-all duration-300 ease-out" style="width: 16.6667%"></div> | |
| </div> | |
| </div> | |
| <!-- Step 1 --> | |
| <div id="step1" class="step-container active"> | |
| <div class="bg-[#151821] border border-white/10 rounded-2xl p-5"> | |
| <h2 class="text-lg font-medium text-white mb-4">Votre activité mensuelle</h2> | |
| <div class="space-y-4 mb-6"> | |
| <div> | |
| <label class="block text-sm text-white/80 mb-2">Courses par jour</label> | |
| <input type="number" id="coursesPerDay" placeholder="Ex : 8" | |
| 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"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-white/80 mb-2">Jours travaillés par mois</label> | |
| <input type="number" id="daysPerMonth" placeholder="Ex : 22" | |
| 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"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-white/80 mb-2">Heures travaillées dans le mois</label> | |
| <input type="number" id="hoursPerMonth" placeholder="Ex : 180" | |
| 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"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-white/80 mb-2">Distance mensuelle estimée (km)</label> | |
| <input type="number" id="distancePerMonth" placeholder="Ex : 2500" | |
| 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"> | |
| </div> | |
| </div> | |
| <div class="text-xs text-white/50 mb-4 bg-white/5 rounded-lg p-3"> | |
| Total courses estimées : <span id="totalCoursesPreview" class="text-emerald-400 font-medium">0</span> | |
| </div> | |
| <button id="btnStep1Next" class="w-full py-3 rounded-xl bg-emerald-500 text-black font-medium text-sm hover:opacity-90 transition"> | |
| Suivant | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div id="step2" class="step-container"> | |
| <div class="bg-[#151821] border border-white/10 rounded-2xl p-5"> | |
| <h2 class="text-lg font-medium text-white mb-4">Revenus via plateformes</h2> | |
| <div class="mb-4"> | |
| <label class="block text-sm text-white/80 mb-2">Revenu mensuel net (Uber / Bolt / Heetch)</label> | |
| <input type="number" id="platformRevenue" placeholder="Ex : 2500" | |
| 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"> | |
| </div> | |
| <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"> | |
| <span class="font-medium">Important :</span> Utilisez votre récapitulatif fiscal mensuel. Cette valeur est déjà nette après commissions. | |
| </div> | |
| <div class="flex gap-3 mt-6"> | |
| <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"> | |
| Retour | |
| </button> | |
| <button id="btnStep2Next" class="w-2/3 py-3 rounded-xl bg-emerald-500 text-black font-medium text-sm hover:opacity-90 transition"> | |
| Suivant | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div id="step3" class="step-container"> | |
| <div class="bg-[#151821] border border-white/10 rounded-2xl p-5"> | |
| <h2 class="text-lg font-medium text-white mb-4">Courses privées</h2> | |
| <div class="mb-4"> | |
| <label class="block text-sm text-white/80 mb-2">Revenu mensuel privé (hors plateformes)</label> | |
| <input type="number" id="privateRevenue" placeholder="Ex : 800" | |
| 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"> | |
| <p class="text-xs text-white/40 mt-2">Laissez 0 si vous n'avez pas encore de clients privés.</p> | |
| </div> | |
| <div class="flex gap-3 mt-6"> | |
| <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"> | |
| Retour | |
| </button> | |
| <button id="btnStep3Next" class="w-2/3 py-3 rounded-xl bg-emerald-500 text-black font-medium text-sm hover:opacity-90 transition"> | |
| Suivant | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 4 --> | |
| <div id="step4" class="step-container"> | |
| <div class="bg-[#151821] border border-white/10 rounded-2xl p-5"> | |
| <h2 class="text-lg font-medium text-white mb-4">Bonus & pourboires</h2> | |
| <div class="mb-4"> | |
| <label class="block text-sm text-white/80 mb-2">Pourboires mensuels estimés (optionnel)</label> | |
| <input type="number" id="tipsRevenue" placeholder="Ex : 150" | |
| 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"> | |
| <p class="text-xs text-white/40 mt-2">Laissez vide ou 0 si aucun.</p> | |
| </div> | |
| <div class="flex gap-3 mt-6"> | |
| <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"> | |
| Retour | |
| </button> | |
| <button id="btnStep4Next" class="w-2/3 py-3 rounded-xl bg-emerald-500 text-black font-medium text-sm hover:opacity-90 transition"> | |
| Suivant | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 5 --> | |
| <div id="step5" class="step-container"> | |
| <div class="bg-[#151821] border border-white/10 rounded-2xl p-5"> | |
| <h2 class="text-lg font-medium text-white mb-4">Catégorie du véhicule</h2> | |
| <div class="grid grid-cols-3 gap-2 mb-2" id="vehicleCategoryButtons"> | |
| <div class="flex flex-col gap-1"> | |
| <button type="button" data-value="entry" class="category-btn py-3 rounded-xl border border-white/10 text-white/60 bg-transparent transition text-sm font-medium"> | |
| Entrée de gamme | |
| </button> | |
| <span class="text-xs text-white/40 text-center">Citadine, compacte</span> | |
| </div> | |
| <div class="flex flex-col gap-1"> | |
| <button type="button" data-value="mid" class="category-btn py-3 rounded-xl border border-white/10 text-white/60 bg-transparent transition text-sm font-medium"> | |
| Moyenne gamme | |
| </button> | |
| <span class="text-xs text-white/40 text-center">SUV compact, monospace</span> | |
| </div> | |
| <div class="flex flex-col gap-1"> | |
| <button type="button" data-value="high" class="category-btn py-3 rounded-xl border border-white/10 text-white/60 bg-transparent transition text-sm font-medium"> | |
| Haut de gamme | |
| </button> | |
| <span class="text-xs text-white/40 text-center">Berline luxe, prestige</span> | |
| </div> | |
| </div> | |
| <input type="hidden" id="vehicleCategory" value=""> | |
| <div class="flex gap-3 mt-6"> | |
| <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"> | |
| Retour | |
| </button> | |
| <button id="btnStep5Next" 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> | |
| Suivant | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 6 --> | |
| <div id="step6" class="step-container"> | |
| <div class="bg-[#151821] border border-white/10 rounded-2xl p-5"> | |
| <h2 class="text-lg font-medium text-white mb-4">Motorisation</h2> | |
| <div class="grid grid-cols-3 gap-2 mb-4" id="vehicleButtons"> | |
| <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"> | |
| Thermique | |
| </button> | |
| <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"> | |
| Hybride | |
| </button> | |
| <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"> | |
| Électrique | |
| </button> | |
| </div> | |
| <input type="hidden" id="vehicleType" value=""> | |
| <div class="mb-4"> | |
| <label class="block text-sm text-white/80 mb-2">Mensualité crédit / leasing (€)</label> | |
| <input type="number" id="vehiclePayment" placeholder="Ex : 350" | |
| 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"> | |
| <p class="text-xs text-white/40 mt-2">Mettre 0 si véhicule déjà payé</p> | |
| </div> | |
| <div class="flex gap-3"> | |
| <button id="btnStep6Back" 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"> | |
| Retour | |
| </button> | |
| <button id="btnStep6Calculate" 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> | |
| Analyser mon activité | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Loading --> | |
| <div id="loadingScreen" class="loading-container"> | |
| <div class="bg-[#151821] border border-white/10 rounded-2xl p-8 text-center"> | |
| <div class="w-16 h-16 mx-auto mb-6 rounded-full border-2 border-white/10 border-t-emerald-500 animate-spin"></div> | |
| <div class="text-base font-medium text-white mb-2">Analyse de votre activité...</div> | |
| <div class="text-sm text-white/50">TIE calcule votre rentabilité...</div> | |
| </div> | |
| </div> | |
| <!-- Results --> | |
| <div id="resultScreen" class="result-container"> | |
| <div class="bg-[#151821] border border-white/10 rounded-2xl p-6 mb-4"> | |
| <div id="resultIcon" class="text-4xl mb-3">💸</div> | |
| <h2 id="resultTitle" class="text-xl font-semibold text-white mb-2">Vous perdez de l'argent</h2> | |
| <p id="resultSubtitle" class="text-sm text-white/60 mb-6">Votre activité n'est pas rentable actuellement.</p> | |
| <div class="bg-emerald-500/10 border border-emerald-500/20 rounded-xl p-4 mb-4"> | |
| <div class="text-xs text-emerald-400/80 mb-1">Profit mensuel estimé</div> | |
| <div id="profitAmount" class="text-3xl font-bold text-white">0 €</div> | |
| </div> | |
| <div class="space-y-2 mb-6"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-white/60">Chiffre d'affaires total</span> | |
| <span id="caTotal" class="text-white font-medium">0 €</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-white/60">Charges sociales (22%)</span> | |
| <span id="chargesAmount" class="text-red-400">-0 €</span> | |
| </div> | |
| <div class="flex justify-between text-sm items-center"> | |
| <span class="text-white/60 flex items-center gap-2"> | |
| Coût d'usage estimé | |
| <button class="info-btn w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-white/60 hover:text-white hover:bg-white/20 transition flex-shrink-0" data-info="usage" type="button"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg> | |
| </button> | |
| </span> | |
| <span id="kmCost" class="text-red-400">-0 €</span> | |
| </div> | |
| </div> | |
| <div class="border-t border-white/10 pt-4 mb-4"> | |
| <div class="text-xs text-white/50 mb-3 uppercase tracking-wide">Répartition de votre activité</div> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-white/60">Plateformes</span> | |
| <span id="pctPlatform" class="text-white">0%</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-white/60">Privé</span> | |
| <span id="pctPrivate" class="text-emerald-400">0%</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-white/60">Pourboires</span> | |
| <span id="pctTips" class="text-white">0%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="privateProjection" class="bg-emerald-500/10 border border-emerald-500/20 rounded-xl p-4 mb-6 hidden"> | |
| <div class="flex items-center gap-2 text-emerald-400 font-medium text-sm mb-2"> | |
| <span>💸</span> | |
| <span>Manque à gagner mensuel estimé</span> | |
| <button class="info-btn w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-white/60 hover:text-white hover:bg-white/20 transition ml-1" data-info="private" type="button"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg> | |
| </button> | |
| </div> | |
| <div id="projectionText" class="space-y-2 text-sm text-white/80"> | |
| <p> | |
| Vous passez actuellement à côté d'environ | |
| <span id="gainAmount" class="text-emerald-400 font-medium">+0 € / mois.</span> | |
| </p> | |
| <p> | |
| Ce montant correspond à ce que vous pourriez générer en développant vos courses privées. | |
| </p> | |
| <p class="text-white/65"> | |
| Hypothèse utilisée : | |
| <span id="projectionTargetRatio" class="text-emerald-400 font-medium">30%</span> | |
| d’activité privée, valorisée en moyenne à | |
| <span class="text-emerald-400 font-medium">2 €/km</span>. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <button id="btnDiscoverScore" class="flex-1 py-3 rounded-xl bg-emerald-500 text-black font-medium text-sm hover:opacity-90 transition"> | |
| Découvrir mon score TIE | |
| </button> | |
| <button class="info-btn w-10 h-10 rounded-xl bg-emerald-500/90 flex items-center justify-center text-black/70 hover:text-black hover:bg-emerald-400 transition flex-shrink-0" data-info="score" type="button"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg> | |
| </button> | |
| </div> | |
| <button id="btnShowDetails" 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 mb-2"> | |
| Voir le détail des coûts | |
| </button> | |
| <button id="btnReset" class="w-full py-2 mt-3 text-xs text-white/60 hover:text-white transition"> | |
| Refaire le calcul | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Details --> | |
| <div id="detailsSection" class="step-container"> | |
| <div class="bg-[#151821] border border-white/10 rounded-2xl p-5 mb-4"> | |
| <h3 class="text-base font-medium text-white mb-4">Détail de votre activité</h3> | |
| <div class="space-y-3 mb-4 text-sm"> | |
| <div class="flex justify-between text-white/60"> | |
| <span>Chiffre d'affaires total</span> | |
| <span id="detailCA" class="text-white font-medium">0 €</span> | |
| </div> | |
| <div class="flex justify-between text-white/60"> | |
| <span>Charges sociales (22%)</span> | |
| <span id="detailSocial" class="text-red-400">-0 €</span> | |
| </div> | |
| <div class="flex justify-between text-white/60 items-center"> | |
| <span class="flex items-center gap-2"> | |
| Coût d'usage estimé | |
| <button class="info-btn w-4 h-4 rounded-full bg-white/10 flex items-center justify-center text-white/60 hover:text-white hover:bg-white/20 transition flex-shrink-0" data-info="usage" type="button"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg> | |
| </button> | |
| </span> | |
| <span id="detailVariable" class="text-red-400">-0 €</span> | |
| </div> | |
| <div class="flex justify-between text-white/60 items-center"> | |
| <span>Assurance mensuelle estimée</span> | |
| <span id="detailInsurance" class="text-red-400">-0 €</span> | |
| </div> | |
| <div class="flex justify-between text-white/60"> | |
| <span>Mensualité crédit / leasing</span> | |
| <span id="detailPayment" class="text-red-400">-0 €</span> | |
| </div> | |
| <div class="border-t border-white/10 pt-3 flex justify-between text-white font-medium"> | |
| <span>BÉNÉFICE NET</span> | |
| <span id="detailProfit" class="text-emerald-400">0 €</span> | |
| </div> | |
| </div> | |
| <div class="bg-black/40 rounded-lg p-3 mb-4"> | |
| <div class="flex justify-between text-sm mb-1 items-center"> | |
| <span class="text-white/60 flex items-center gap-2"> | |
| Taux horaire réel | |
| <button class="info-btn w-4 h-4 rounded-full bg-white/10 flex items-center justify-center text-white/60 hover:text-white hover:bg-white/20 transition flex-shrink-0" data-info="hourly" type="button"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg> | |
| </button> | |
| </span> | |
| <span id="detailHourly" class="text-white font-medium">0 €/h</span> | |
| </div> | |
| </div> | |
| <button id="btnBackFromDetails" 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"> | |
| Retour aux résultats | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Score Loading --> | |
| <div id="scoreLoading" class="loading-container"> | |
| <div class="bg-[#151821] border border-white/10 rounded-2xl p-8 text-center"> | |
| <div class="w-16 h-16 mx-auto mb-6 rounded-full border-2 border-white/10 border-t-emerald-500 animate-spin"></div> | |
| <div class="text-base font-medium text-white mb-2">Calcul de votre score TIE...</div> | |
| </div> | |
| </div> | |
| <!-- Score --> | |
| <div id="scoreScreen" class="score-container"> | |
| <div class="bg-[#151821] border border-white/10 rounded-2xl p-6 mb-4"> | |
| <div class="text-center mb-6"> | |
| <div class="text-5xl mb-4">⭐</div> | |
| <div class="text-sm text-white/60 mb-2">Score TIE</div> | |
| <div id="tieScore" class="text-5xl font-bold text-white mb-2">0<span class="text-2xl text-white/40">/100</span></div> | |
| <div id="scoreLabel" class="text-lg text-emerald-400 font-medium">Chauffeur expert</div> | |
| </div> | |
| <div class="bg-black/40 rounded-xl p-4 mb-4"> | |
| <div id="scoreInterpretation" class="text-sm text-white/80 text-center leading-relaxed"> | |
| Votre activité est rentable et bien optimisée. | |
| </div> | |
| </div> | |
| <div class="space-y-3 mb-6"> | |
| <div> | |
| <div class="flex justify-between text-xs text-white/60 mb-1"> | |
| <span>Rentabilité</span> | |
| <span id="scoreProfit">0/40</span> | |
| </div> | |
| <div class="w-full h-1.5 bg-white/10 rounded-full"> | |
| <div id="barProfit" class="h-full bg-emerald-500 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs text-white/60 mb-1"> | |
| <span>Mix privé/plateforme</span> | |
| <span id="scoreMix">0/20</span> | |
| </div> | |
| <div class="w-full h-1.5 bg-white/10 rounded-full"> | |
| <div id="barMix" class="h-full bg-emerald-500 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs text-white/60 mb-1"> | |
| <span>Qualité d'activité</span> | |
| <span id="scoreQuality">0/25</span> | |
| </div> | |
| <div class="w-full h-1.5 bg-white/10 rounded-full"> | |
| <div id="barQuality" class="h-full bg-emerald-500 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs text-white/60 mb-1"> | |
| <span>Efficience</span> | |
| <span id="scoreEfficiency">0/15</span> | |
| </div> | |
| <div class="w-full h-1.5 bg-white/10 rounded-full"> | |
| <div id="barEfficiency" class="h-full bg-emerald-500 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="scoreProjection" class="bg-emerald-500/10 border border-emerald-500/20 rounded-xl p-4 mb-6 text-center"> | |
| <div class="text-sm text-emerald-400 font-medium" id="scoreProjectionText"> | |
| +12 points possibles en développant vos courses privées | |
| </div> | |
| </div> | |
| <div class="space-y-3 mb-6"> | |
| <button id="btnBackFromScore" 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"> | |
| Retour à mes résultats | |
| </button> | |
| <button class="w-full py-3 rounded-xl bg-emerald-500 text-black font-medium text-sm hover:opacity-90 transition"> | |
| Développer mes clients privés | |
| </button> | |
| </div> | |
| <div class="text-center pt-4 border-t border-white/10"> | |
| <p class="text-xs text-white/40"> | |
| Les meilleurs chauffeurs sont au-dessus de 80 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| let currentStep = 1; | |
| const totalSteps = 6; | |
| const PRIVATE_TARGET_RATIO = 30; | |
| let formData = { | |
| coursesPerDay: 0, | |
| daysPerMonth: 0, | |
| hoursPerMonth: 0, | |
| distancePerMonth: 0, | |
| platformRevenue: 0, | |
| privateRevenue: 0, | |
| tipsRevenue: 0, | |
| vehicleType: '', | |
| vehicleCategory: '', | |
| vehiclePayment: 0 | |
| }; | |
| let calculationResults = {}; | |
| let tieProjection = {}; | |
| let tieScoreData = {}; | |
| function getElement(id) { | |
| return document.getElementById(id); | |
| } | |
| function formatMoney(value) { | |
| if (isNaN(value)) return '0 €'; | |
| return Math.round(value).toLocaleString('fr-FR') + ' €'; | |
| } | |
| function updateProgress() { | |
| const progressBar = getElement('progressFill'); | |
| const stepLabel = getElement('stepLabel'); | |
| if (!progressBar || !stepLabel) return; | |
| const progress = (currentStep / totalSteps) * 100; | |
| progressBar.style.width = progress + '%'; | |
| stepLabel.textContent = currentStep; | |
| } | |
| function hideAllSections() { | |
| document.querySelectorAll('.step-container').forEach(el => el.classList.remove('active')); | |
| document.querySelectorAll('.loading-container').forEach(el => el.classList.remove('active')); | |
| document.querySelectorAll('.result-container').forEach(el => el.classList.remove('active')); | |
| document.querySelectorAll('.score-container').forEach(el => el.classList.remove('active')); | |
| } | |
| function showStep(step) { | |
| hideAllSections(); | |
| const stepEl = getElement('step' + step); | |
| if (stepEl) { | |
| stepEl.classList.add('active'); | |
| currentStep = step; | |
| updateProgress(); | |
| } | |
| const progressContainer = getElement('progressBarContainer'); | |
| const pageHeader = getElement('pageHeader'); | |
| if (progressContainer) progressContainer.style.display = 'block'; | |
| if (pageHeader) pageHeader.style.display = 'block'; | |
| } | |
| function showLoading() { | |
| hideAllSections(); | |
| const loading = getElement('loadingScreen'); | |
| const progressContainer = getElement('progressBarContainer'); | |
| if (loading) loading.classList.add('active'); | |
| if (progressContainer) progressContainer.style.display = 'none'; | |
| } | |
| function showResults() { | |
| hideAllSections(); | |
| const result = getElement('resultScreen'); | |
| const progressContainer = getElement('progressBarContainer'); | |
| const pageHeader = getElement('pageHeader'); | |
| if (result) result.classList.add('active'); | |
| if (progressContainer) progressContainer.style.display = 'none'; | |
| if (pageHeader) pageHeader.style.display = 'none'; | |
| } | |
| function showScoreLoading() { | |
| hideAllSections(); | |
| const loading = getElement('scoreLoading'); | |
| if (loading) loading.classList.add('active'); | |
| } | |
| function showScore() { | |
| hideAllSections(); | |
| const score = getElement('scoreScreen'); | |
| if (score) score.classList.add('active'); | |
| } | |
| function getCostPerKm(type, category) { | |
| const grid = { | |
| electrique: { entry: 0.12, mid: 0.15, high: 0.20 }, | |
| hybride: { entry: 0.18, mid: 0.22, high: 0.28 }, | |
| thermique: { entry: 0.22, mid: 0.28, high: 0.35 } | |
| }; | |
| return grid[type]?.[category] || 0.25; | |
| } | |
| function getInsuranceCost(category) { | |
| const costs = { entry: 160, mid: 220, high: 300 }; | |
| return costs[category] || 200; | |
| } | |
| function calculateResults() { | |
| const caTotal = formData.platformRevenue + formData.privateRevenue + formData.tipsRevenue; | |
| const costPerKm = getCostPerKm(formData.vehicleType, formData.vehicleCategory); | |
| const variableCost = formData.distancePerMonth * costPerKm; | |
| const insuranceFixed = getInsuranceCost(formData.vehicleCategory); | |
| const vehiclePayment = formData.vehiclePayment || 0; | |
| const fixedCharges = insuranceFixed + vehiclePayment; | |
| const socialCharges = caTotal * 0.22; | |
| const profit = caTotal - socialCharges - variableCost - fixedCharges; | |
| const hourlyRate = formData.hoursPerMonth > 0 ? profit / formData.hoursPerMonth : 0; | |
| const pctPlatform = caTotal > 0 ? (formData.platformRevenue / caTotal) * 100 : 0; | |
| const pctPrivate = caTotal > 0 ? (formData.privateRevenue / caTotal) * 100 : 0; | |
| const pctTips = caTotal > 0 ? (formData.tipsRevenue / caTotal) * 100 : 0; | |
| calculationResults = { | |
| caTotal, | |
| variableCost, | |
| fixedCharges, | |
| socialCharges, | |
| insuranceFixed, | |
| vehiclePayment, | |
| profit, | |
| hourlyRate, | |
| pctPlatform, | |
| pctPrivate, | |
| pctTips, | |
| costPerKm | |
| }; | |
| return calculationResults; | |
| } | |
| function calculateTIEProjection() { | |
| const currentPrivateRatio = calculationResults.pctPrivate; | |
| const caTotal = calculationResults.caTotal; | |
| const platformRevenue = formData.platformRevenue; | |
| const privateRevenue = formData.privateRevenue; | |
| const distancePerMonth = formData.distancePerMonth; | |
| if (currentPrivateRatio < PRIVATE_TARGET_RATIO && caTotal > 0) { | |
| const currentPrivateKmEstimate = privateRevenue / 2; | |
| const currentPlatformKmEstimate = Math.max(1, distancePerMonth - currentPrivateKmEstimate); | |
| const currentPlatformRevenuePerKm = platformRevenue / currentPlatformKmEstimate; | |
| const targetPrivateKm = distancePerMonth * (PRIVATE_TARGET_RATIO / 100); | |
| const additionalPrivateKm = Math.max(0, targetPrivateKm - currentPrivateKmEstimate); | |
| const newPrivateRevenueEquivalent = additionalPrivateKm * 2; | |
| const replacedPlatformRevenueEquivalent = additionalPrivateKm * currentPlatformRevenuePerKm; | |
| const grossRevenueGain = newPrivateRevenueEquivalent - replacedPlatformRevenueEquivalent; | |
| const netRevenueGain = Math.max(0, grossRevenueGain * 0.78); | |
| tieProjection = { | |
| hasPotential: true, | |
| currentPrivateRatio, | |
| targetPrivateRatio: PRIVATE_TARGET_RATIO, | |
| monthlyGain: netRevenueGain, | |
| additionalPrivateKm, | |
| message: `Cette projection se base sur un objectif de ${PRIVATE_TARGET_RATIO}% d'activité privée, avec une valorisation moyenne des courses privées à 2 €/km.` | |
| }; | |
| } else { | |
| tieProjection = { | |
| hasPotential: false, | |
| currentPrivateRatio, | |
| targetPrivateRatio: PRIVATE_TARGET_RATIO, | |
| monthlyGain: 0, | |
| additionalPrivateKm: 0, | |
| message: "Votre activité privée est déjà bien développée. Vos prochains leviers concernent surtout votre taux horaire, vos coûts d'usage ou la sélection de vos courses." | |
| }; | |
| } | |
| return tieProjection; | |
| } | |
| function calculateTIEScore() { | |
| let score = 0; | |
| let scoreProfit = 0; | |
| let scoreMix = 0; | |
| let scoreQuality = 0; | |
| let scoreEfficiency = 0; | |
| const results = calculationResults; | |
| if (results.profit > 3000) scoreProfit = 40; | |
| else if (results.profit > 2000) scoreProfit = 30; | |
| else if (results.profit > 1500) scoreProfit = 20; | |
| else if (results.profit > 800) scoreProfit = 10; | |
| else scoreProfit = 5; | |
| score += scoreProfit; | |
| if (results.pctPrivate >= 50) scoreMix = 20; | |
| else if (results.pctPrivate >= 30) scoreMix = 15; | |
| else if (results.pctPrivate >= 15) scoreMix = 10; | |
| else if (results.pctPrivate >= 5) scoreMix = 5; | |
| score += scoreMix; | |
| if (results.hourlyRate > 25) scoreQuality = 25; | |
| else if (results.hourlyRate > 18) scoreQuality = 20; | |
| else if (results.hourlyRate > 12) scoreQuality = 15; | |
| else if (results.hourlyRate > 8) scoreQuality = 10; | |
| else scoreQuality = 5; | |
| score += scoreQuality; | |
| if (formData.vehicleType === 'electrique') scoreEfficiency = 15; | |
| else if (formData.vehicleType === 'hybride') scoreEfficiency = 10; | |
| else scoreEfficiency = 5; | |
| score += scoreEfficiency; | |
| tieScoreData = { | |
| total: score, | |
| profit: scoreProfit, | |
| mix: scoreMix, | |
| quality: scoreQuality, | |
| efficiency: scoreEfficiency, | |
| label: getScoreLabel(score), | |
| interpretation: getScoreInterpretation(score), | |
| pointsToGain: results.pctPrivate < PRIVATE_TARGET_RATIO | |
| ? Math.round((PRIVATE_TARGET_RATIO - results.pctPrivate) / 2) | |
| : 0 | |
| }; | |
| return tieScoreData; | |
| } | |
| function getScoreLabel(score) { | |
| if (score >= 80) return "Chauffeur Expert"; | |
| if (score >= 65) return "Bon niveau"; | |
| if (score >= 45) return "Activité stable"; | |
| if (score >= 25) return "À optimiser"; | |
| return "Activité à risque"; | |
| } | |
| function getScoreInterpretation(score) { | |
| if (score >= 80) return "🏆 Excellent ! Votre activité est bien optimisée et rentable."; | |
| if (score >= 65) return "🚀 Très bien. Votre activité est rentable mais peut encore s'améliorer."; | |
| if (score >= 45) return "⚖️ Correct. Votre activité est viable mais pourrait être plus optimisée."; | |
| if (score >= 25) return "⚠️ Fragile. Vous devriez développer vos revenus privés et réduire les coûts."; | |
| return "🚨 Alerte. Votre rentabilité est faible. Développez vos clients privés rapidement."; | |
| } | |
| function displayResults() { | |
| const results = calculationResults; | |
| const projection = calculateTIEProjection(); | |
| const profitAmount = getElement('profitAmount'); | |
| const caTotal = getElement('caTotal'); | |
| const chargesAmount = getElement('chargesAmount'); | |
| const kmCost = getElement('kmCost'); | |
| const pctPlatform = getElement('pctPlatform'); | |
| const pctPrivate = getElement('pctPrivate'); | |
| const pctTips = getElement('pctTips'); | |
| const resultIcon = getElement('resultIcon'); | |
| const resultTitle = getElement('resultTitle'); | |
| const resultSubtitle = getElement('resultSubtitle'); | |
| const privateProjection = getElement('privateProjection'); | |
| const gainAmount = getElement('gainAmount'); | |
| const projectionTargetRatio = getElement('projectionTargetRatio'); | |
| if (profitAmount) profitAmount.textContent = formatMoney(results.profit); | |
| if (caTotal) caTotal.textContent = formatMoney(results.caTotal); | |
| if (chargesAmount) chargesAmount.textContent = '-' + formatMoney(results.socialCharges); | |
| if (kmCost) kmCost.textContent = '-' + formatMoney(results.variableCost); | |
| if (pctPlatform) pctPlatform.textContent = Math.round(results.pctPlatform) + '%'; | |
| if (pctPrivate) pctPrivate.textContent = Math.round(results.pctPrivate) + '%'; | |
| if (pctTips) pctTips.textContent = Math.round(results.pctTips) + '%'; | |
| if (results.profit < 800) { | |
| if (resultIcon) resultIcon.textContent = '💸'; | |
| if (resultTitle) resultTitle.textContent = 'Activité non rentable'; | |
| if (resultSubtitle) resultSubtitle.textContent = `Bénéfice mensuel : ${formatMoney(results.profit)} · Taux horaire : ${formatMoney(results.hourlyRate)}/h`; | |
| } else if (results.profit < 2000) { | |
| if (resultIcon) resultIcon.textContent = '⚖️'; | |
| if (resultTitle) resultTitle.textContent = 'Activité viable mais fragile'; | |
| if (resultSubtitle) resultSubtitle.textContent = `Bénéfice : ${formatMoney(results.profit)}/mois · ${formatMoney(results.hourlyRate)}/h`; | |
| } else { | |
| if (resultIcon) resultIcon.textContent = '🚀'; | |
| if (resultTitle) resultTitle.textContent = 'Activité rentable et solide'; | |
| if (resultSubtitle) resultSubtitle.textContent = `Bénéfice : ${formatMoney(results.profit)}/mois · ${formatMoney(results.hourlyRate)}/h`; | |
| } | |
| if (privateProjection) { | |
| if (projection.hasPotential && projection.monthlyGain >= 50) { | |
| privateProjection.classList.remove('hidden'); | |
| if (gainAmount) gainAmount.textContent = `+${Math.round(projection.monthlyGain)} € / mois.`; | |
| if (projectionTargetRatio) projectionTargetRatio.textContent = `${projection.targetPrivateRatio}%`; | |
| } else { | |
| privateProjection.classList.add('hidden'); | |
| } | |
| } | |
| window.currentTIEScore = calculateTIEScore(); | |
| } | |
| function displayScore() { | |
| const score = window.currentTIEScore || calculateTIEScore(); | |
| const tieScore = getElement('tieScore'); | |
| const scoreLabel = getElement('scoreLabel'); | |
| const scoreInterpretation = getElement('scoreInterpretation'); | |
| const scoreProfit = getElement('scoreProfit'); | |
| const scoreMix = getElement('scoreMix'); | |
| const scoreQuality = getElement('scoreQuality'); | |
| const scoreEfficiency = getElement('scoreEfficiency'); | |
| const barProfit = getElement('barProfit'); | |
| const barMix = getElement('barMix'); | |
| const barQuality = getElement('barQuality'); | |
| const barEfficiency = getElement('barEfficiency'); | |
| const scoreProjectionText = getElement('scoreProjectionText'); | |
| if (tieScore) tieScore.innerHTML = `${score.total}<span class="text-2xl text-white/40">/100</span>`; | |
| if (scoreLabel) scoreLabel.textContent = score.label; | |
| if (scoreInterpretation) scoreInterpretation.textContent = score.interpretation; | |
| if (scoreProfit) scoreProfit.textContent = `${score.profit}/40`; | |
| if (scoreMix) scoreMix.textContent = `${score.mix}/20`; | |
| if (scoreQuality) scoreQuality.textContent = `${score.quality}/25`; | |
| if (scoreEfficiency) scoreEfficiency.textContent = `${score.efficiency}/15`; | |
| if (barProfit) barProfit.style.width = (score.profit / 40 * 100) + '%'; | |
| if (barMix) barMix.style.width = (score.mix / 20 * 100) + '%'; | |
| if (barQuality) barQuality.style.width = (score.quality / 25 * 100) + '%'; | |
| if (barEfficiency) barEfficiency.style.width = (score.efficiency / 15 * 100) + '%'; | |
| if (scoreProjectionText) { | |
| scoreProjectionText.textContent = score.pointsToGain > 0 | |
| ? `+${score.pointsToGain} points possibles en développant vos courses privées` | |
| : "Votre profil est bien optimisé"; | |
| } | |
| } | |
| function showDetails() { | |
| const results = calculationResults; | |
| const detailCA = getElement('detailCA'); | |
| const detailSocial = getElement('detailSocial'); | |
| const detailVariable = getElement('detailVariable'); | |
| const detailInsurance = getElement('detailInsurance'); | |
| const detailPayment = getElement('detailPayment'); | |
| const detailProfit = getElement('detailProfit'); | |
| const detailHourly = getElement('detailHourly'); | |
| const detailsSection = getElement('detailsSection'); | |
| const resultScreen = getElement('resultScreen'); | |
| if (detailCA) detailCA.textContent = formatMoney(results.caTotal); | |
| if (detailSocial) detailSocial.textContent = '-' + formatMoney(results.socialCharges); | |
| if (detailVariable) detailVariable.textContent = '-' + formatMoney(results.variableCost); | |
| if (detailInsurance) detailInsurance.textContent = '-' + formatMoney(results.insuranceFixed); | |
| if (detailPayment) detailPayment.textContent = '-' + formatMoney(results.vehiclePayment); | |
| if (detailProfit) detailProfit.textContent = formatMoney(results.profit); | |
| if (detailHourly) detailHourly.textContent = formatMoney(results.hourlyRate) + '/h'; | |
| if (resultScreen) resultScreen.classList.remove('active'); | |
| if (detailsSection) detailsSection.classList.add('active'); | |
| } | |
| function hideDetails() { | |
| const detailsSection = getElement('detailsSection'); | |
| const resultScreen = getElement('resultScreen'); | |
| if (detailsSection) detailsSection.classList.remove('active'); | |
| if (resultScreen) resultScreen.classList.add('active'); | |
| } | |
| function resetAll() { | |
| formData = { | |
| coursesPerDay: 0, | |
| daysPerMonth: 0, | |
| hoursPerMonth: 0, | |
| distancePerMonth: 0, | |
| platformRevenue: 0, | |
| privateRevenue: 0, | |
| tipsRevenue: 0, | |
| vehicleType: '', | |
| vehicleCategory: '', | |
| vehiclePayment: 0 | |
| }; | |
| calculationResults = {}; | |
| tieProjection = {}; | |
| tieScoreData = {}; | |
| window.currentTIEScore = null; | |
| [ | |
| 'coursesPerDay', | |
| 'daysPerMonth', | |
| 'hoursPerMonth', | |
| 'distancePerMonth', | |
| 'platformRevenue', | |
| 'privateRevenue', | |
| 'tipsRevenue', | |
| 'vehiclePayment', | |
| 'vehicleCategory', | |
| 'vehicleType' | |
| ].forEach(id => { | |
| const el = getElement(id); | |
| if (el) el.value = ''; | |
| }); | |
| document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('selected')); | |
| document.querySelectorAll('.vehicle-btn').forEach(b => b.classList.remove('selected')); | |
| const btnStep5Next = getElement('btnStep5Next'); | |
| const btnStep6Calculate = getElement('btnStep6Calculate'); | |
| const totalCoursesPreview = getElement('totalCoursesPreview'); | |
| if (btnStep5Next) btnStep5Next.disabled = true; | |
| if (btnStep6Calculate) btnStep6Calculate.disabled = true; | |
| if (totalCoursesPreview) totalCoursesPreview.textContent = '0'; | |
| showStep(1); | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| } | |
| const infoContent = { | |
| usage: "Ce coût inclut carburant/électricité, entretien, usure et amortissement du véhicule. Plus vous roulez, plus ce coût augmente.", | |
| hourly: "Votre revenu réel par heure après toutes charges. C'est l'indicateur le plus fiable pour évaluer votre rentabilité.", | |
| private: `Cette estimation projette votre activité avec un objectif de ${PRIVATE_TARGET_RATIO}% de chiffre d’affaires privé. Elle compare votre situation actuelle à un scénario où une partie de vos courses plateformes est remplacée par des courses privées valorisées en moyenne à 2 €/km.`, | |
| score: "Le score TIE mesure la rentabilité globale de votre activité selon vos revenus, votre efficacité et votre dépendance aux plateformes." | |
| }; | |
| function openInfoModal(infoType) { | |
| let content = infoContent[infoType]; | |
| if (infoType === 'private' && tieProjection.currentPrivateRatio !== undefined) { | |
| content = `Cette estimation projette votre activité avec un objectif de ${tieProjection.targetPrivateRatio}% de chiffre d’affaires privé. Aujourd’hui, votre part privée estimée est d’environ ${Math.round(tieProjection.currentPrivateRatio)}%. Le manque à gagner affiché correspond à l’écart entre votre situation actuelle et ce scénario cible, sur la base d’une valorisation moyenne des courses privées à 2 €/km.`; | |
| } | |
| if (!content) return; | |
| const tooltip = document.createElement('div'); | |
| tooltip.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4'; | |
| tooltip.innerHTML = ` | |
| <div class="bg-[#1a1f2b] border border-white/20 rounded-2xl p-5 max-w-sm w-full shadow-2xl"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div class="text-sm font-medium text-white">Information</div> | |
| <button class="close-tooltip text-white/40 hover:text-white transition" type="button"> | |
| <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg> | |
| </button> | |
| </div> | |
| <div class="text-xs text-white/70 leading-relaxed">${content}</div> | |
| <button class="close-tooltip w-full mt-4 py-2.5 rounded-xl bg-emerald-500 text-black text-xs font-medium hover:opacity-90 transition" type="button"> | |
| Compris | |
| </button> | |
| </div> | |
| `; | |
| document.body.appendChild(tooltip); | |
| tooltip.querySelectorAll('.close-tooltip').forEach(btn => { | |
| btn.addEventListener('click', () => tooltip.remove()); | |
| }); | |
| tooltip.addEventListener('click', (e) => { | |
| if (e.target === tooltip) tooltip.remove(); | |
| }); | |
| } | |
| // Init listeners | |
| const coursesPerDayInput = getElement('coursesPerDay'); | |
| const daysPerMonthInput = getElement('daysPerMonth'); | |
| const hoursPerMonthInput = getElement('hoursPerMonth'); | |
| const distancePerMonthInput = getElement('distancePerMonth'); | |
| const totalCoursesPreview = getElement('totalCoursesPreview'); | |
| const platformRevenueInput = getElement('platformRevenue'); | |
| const privateRevenueInput = getElement('privateRevenue'); | |
| const tipsRevenueInput = getElement('tipsRevenue'); | |
| const vehiclePaymentInput = getElement('vehiclePayment'); | |
| const vehicleCategoryInput = getElement('vehicleCategory'); | |
| const vehicleTypeInput = getElement('vehicleType'); | |
| function updateTotalCourses() { | |
| const courses = parseFloat(coursesPerDayInput?.value) || 0; | |
| const days = parseFloat(daysPerMonthInput?.value) || 0; | |
| if (totalCoursesPreview) totalCoursesPreview.textContent = courses * days; | |
| } | |
| coursesPerDayInput?.addEventListener('input', updateTotalCourses); | |
| daysPerMonthInput?.addEventListener('input', updateTotalCourses); | |
| getElement('btnStep1Next')?.addEventListener('click', () => { | |
| const courses = parseFloat(coursesPerDayInput?.value); | |
| const days = parseFloat(daysPerMonthInput?.value); | |
| const hours = parseFloat(hoursPerMonthInput?.value); | |
| const distance = parseFloat(distancePerMonthInput?.value); | |
| if (!courses || courses <= 0) return alert('Veuillez entrer un nombre de courses valide.'); | |
| if (!days || days <= 0 || days > 31) return alert('Veuillez entrer un nombre de jours valide (1-31).'); | |
| if (!hours || hours <= 0) return alert("Veuillez entrer un nombre d'heures valide."); | |
| if (!distance || distance <= 0) return alert('Veuillez entrer une distance valide.'); | |
| formData.coursesPerDay = courses; | |
| formData.daysPerMonth = days; | |
| formData.hoursPerMonth = hours; | |
| formData.distancePerMonth = distance; | |
| showStep(2); | |
| }); | |
| getElement('btnStep2Back')?.addEventListener('click', () => showStep(1)); | |
| getElement('btnStep2Next')?.addEventListener('click', () => { | |
| const revenue = parseFloat(platformRevenueInput?.value); | |
| if (revenue === undefined || revenue < 0 || isNaN(revenue)) { | |
| return alert('Veuillez entrer un montant valide.'); | |
| } | |
| formData.platformRevenue = revenue; | |
| showStep(3); | |
| }); | |
| getElement('btnStep3Back')?.addEventListener('click', () => showStep(2)); | |
| getElement('btnStep3Next')?.addEventListener('click', () => { | |
| formData.privateRevenue = parseFloat(privateRevenueInput?.value) || 0; | |
| showStep(4); | |
| }); | |
| getElement('btnStep4Back')?.addEventListener('click', () => showStep(3)); | |
| getElement('btnStep4Next')?.addEventListener('click', () => { | |
| formData.tipsRevenue = parseFloat(tipsRevenueInput?.value) || 0; | |
| showStep(5); | |
| }); | |
| const btnStep5Next = getElement('btnStep5Next'); | |
| document.querySelectorAll('.category-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('selected')); | |
| btn.classList.add('selected'); | |
| const value = btn.dataset.value; | |
| if (vehicleCategoryInput) vehicleCategoryInput.value = value; | |
| formData.vehicleCategory = value; | |
| if (btnStep5Next) btnStep5Next.disabled = false; | |
| }); | |
| }); | |
| getElement('btnStep5Back')?.addEventListener('click', () => showStep(4)); | |
| btnStep5Next?.addEventListener('click', () => { | |
| if (!formData.vehicleCategory) return alert('Veuillez sélectionner une catégorie de véhicule.'); | |
| showStep(6); | |
| }); | |
| const btnStep6Calculate = getElement('btnStep6Calculate'); | |
| document.querySelectorAll('.vehicle-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| document.querySelectorAll('.vehicle-btn').forEach(b => b.classList.remove('selected')); | |
| btn.classList.add('selected'); | |
| const value = btn.dataset.value; | |
| if (vehicleTypeInput) vehicleTypeInput.value = value; | |
| formData.vehicleType = value; | |
| if (btnStep6Calculate) btnStep6Calculate.disabled = false; | |
| }); | |
| }); | |
| getElement('btnStep6Back')?.addEventListener('click', () => showStep(5)); | |
| btnStep6Calculate?.addEventListener('click', () => { | |
| if (!formData.vehicleType) return alert('Veuillez sélectionner un type de véhicule.'); | |
| if (!formData.vehicleCategory) return alert('Veuillez sélectionner une catégorie de véhicule.'); | |
| formData.vehiclePayment = parseFloat(vehiclePaymentInput?.value) || 0; | |
| showLoading(); | |
| calculateResults(); | |
| setTimeout(() => { | |
| displayResults(); | |
| showResults(); | |
| }, 900); | |
| }); | |
| getElement('btnShowDetails')?.addEventListener('click', showDetails); | |
| getElement('btnBackFromDetails')?.addEventListener('click', hideDetails); | |
| getElement('btnDiscoverScore')?.addEventListener('click', () => { | |
| showScoreLoading(); | |
| setTimeout(() => { | |
| displayScore(); | |
| showScore(); | |
| }, 700); | |
| }); | |
| getElement('btnBackFromScore')?.addEventListener('click', () => { | |
| showResults(); | |
| }); | |
| getElement('btnReset')?.addEventListener('click', resetAll); | |
| document.addEventListener('click', (e) => { | |
| const btn = e.target.closest('.info-btn'); | |
| if (!btn) return; | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| openInfoModal(btn.dataset.info); | |
| }); | |
| coursesPerDayInput?.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') daysPerMonthInput?.focus(); | |
| }); | |
| daysPerMonthInput?.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') hoursPerMonthInput?.focus(); | |
| }); | |
| hoursPerMonthInput?.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') distancePerMonthInput?.focus(); | |
| }); | |
| distancePerMonthInput?.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') getElement('btnStep1Next')?.click(); | |
| }); | |
| platformRevenueInput?.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') getElement('btnStep2Next')?.click(); | |
| }); | |
| privateRevenueInput?.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') getElement('btnStep3Next')?.click(); | |
| }); | |
| tipsRevenueInput?.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') getElement('btnStep4Next')?.click(); | |
| }); | |
| updateProgress(); | |
| </script> | |
| </body> | |
| </html> |