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 - Relation directe chauffeur et client privé</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"> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <style> | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; | |
| } | |
| .hide-scrollbar::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .hide-scrollbar { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| @keyframes scan { | |
| 0% { top: 0%; opacity: 0; } | |
| 10% { opacity: 1; } | |
| 90% { opacity: 1; } | |
| 100% { top: 100%; opacity: 0; } | |
| } | |
| .client-screen { | |
| transition: opacity 0.35s ease, transform 0.35s ease; | |
| } | |
| .client-screen.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| position: absolute; | |
| inset: 0; | |
| transform: translateY(8px); | |
| } | |
| .client-screen.active { | |
| opacity: 1; | |
| pointer-events: auto; | |
| position: relative; | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-[#0b0b0f] text-white antialiased"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 bg-black/40 backdrop-blur-xl border-b border-white/5"> | |
| <div class="max-w-3xl mx-auto px-5 py-4 flex items-center justify-between relative"> | |
| <div class="flex items-center gap-3"> | |
| <div class="text-lg font-semibold tracking-tight text-white">TIE</div> | |
| <!-- Simulateurs desktop --> | |
| <div class="relative hidden sm:block" id="simulatorsMenuWrapper"> | |
| <button | |
| id="simulatorsMenuButton" | |
| type="button" | |
| class="inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-white/75 transition hover:bg-white/5 hover:text-white" | |
| aria-expanded="false" | |
| aria-controls="simulatorsMegaMenu" | |
| > | |
| <span>Simulateurs</span> | |
| <svg | |
| id="simulatorsChevron" | |
| 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" | |
| class="transition-transform duration-200" | |
| > | |
| <path d="m6 9 6 6 6-6"></path> | |
| </svg> | |
| </button> | |
| <div | |
| id="simulatorsMegaMenu" | |
| class="hidden absolute left-0 top-[calc(100%+12px)] z-[70] w-[720px] max-w-[92vw] rounded-3xl border border-white/10 bg-[#151821] p-5 shadow-2xl shadow-black/40" | |
| > | |
| <div class="mb-4"> | |
| <div class="text-sm font-semibold text-white">Les simulateurs TIE</div> | |
| <p class="mt-1 text-xs leading-relaxed text-white/50"> | |
| Choisissez rapidement l’outil le plus utile selon votre situation. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <a href="simulateur.html" class="group rounded-2xl border border-white/10 bg-black/20 p-4 transition hover:-translate-y-0.5 hover:border-emerald-500/40 hover:bg-black/30"> | |
| <div class="mb-2 flex items-center justify-between gap-2"> | |
| <div class="text-sm font-semibold text-white">Combien gagnez-vous vraiment ?</div> | |
| <span class="rounded-full bg-emerald-500/10 px-2 py-1 text-[10px] font-medium text-emerald-400">Rapide</span> | |
| </div> | |
| <p class="text-xs leading-relaxed text-white/55"> | |
| Vérifiez la rentabilité réelle d’une course en quelques secondes. | |
| </p> | |
| </a> | |
| <a href="simulateur-pertes.html" class="group rounded-2xl border border-white/10 bg-black/20 p-4 transition hover:-translate-y-0.5 hover:border-emerald-500/40 hover:bg-black/30"> | |
| <div class="mb-2 flex items-center justify-between gap-2"> | |
| <div class="text-sm font-semibold text-white">Combien vous perdez par mois ?</div> | |
| <span class="rounded-full bg-white/5 px-2 py-1 text-[10px] font-medium text-white/55">Impact</span> | |
| </div> | |
| <p class="text-xs leading-relaxed text-white/55"> | |
| Mesurez l’impact mensuel des commissions et du mix d’activité. | |
| </p> | |
| </a> | |
| <a href="objectif-reel.html" class="group rounded-2xl border border-white/10 bg-black/20 p-4 transition hover:-translate-y-0.5 hover:border-emerald-500/40 hover:bg-black/30"> | |
| <div class="mb-2 flex items-center justify-between gap-2"> | |
| <div class="text-sm font-semibold text-white">Combien devez-vous gagner par jour ?</div> | |
| <span class="rounded-full bg-white/5 px-2 py-1 text-[10px] font-medium text-white/55">Objectif</span> | |
| </div> | |
| <p class="text-xs leading-relaxed text-white/55"> | |
| Transformez votre objectif mensuel en cible journalière claire. | |
| </p> | |
| </a> | |
| <a href="profil-chauffeur.html" class="group rounded-2xl border border-white/10 bg-black/20 p-4 transition hover:-translate-y-0.5 hover:border-emerald-500/40 hover:bg-black/30"> | |
| <div class="mb-2 flex items-center justify-between gap-2"> | |
| <div class="text-sm font-semibold text-white">Quel type de chauffeur êtes-vous ?</div> | |
| <span class="rounded-full bg-white/5 px-2 py-1 text-[10px] font-medium text-white/55">Profil</span> | |
| </div> | |
| <p class="text-xs leading-relaxed text-white/55"> | |
| Identifiez votre profil d’activité et vos leviers d’amélioration. | |
| </p> | |
| </a> | |
| <a href="voiture-optimale.html" class="group col-span-2 rounded-2xl border border-emerald-500/30 bg-emerald-500/5 p-4 transition hover:-translate-y-0.5 hover:border-emerald-500/50 hover:bg-emerald-500/10"> | |
| <div class="mb-2 flex items-center justify-between gap-2"> | |
| <div class="text-sm font-semibold text-white">Quelle voiture est faite pour vous ?</div> | |
| <span class="rounded-full bg-emerald-500/10 px-2 py-1 text-[10px] font-medium text-emerald-400">Décision</span> | |
| </div> | |
| <p class="text-xs leading-relaxed text-white/55"> | |
| Trouvez le véhicule le plus cohérent selon votre activité, votre marché et vos objectifs. | |
| </p> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings --> | |
| <div class="relative"> | |
| <button id="settingsBtn" class="w-5 h-5 text-white/70 hover:text-white cursor-pointer transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.1a2 2 0 0 1-1-1.72v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg> | |
| </button> | |
| <div id="settingsDropdown" class="hidden absolute right-0 top-10 rounded-xl bg-[#151821] border border-white/10 shadow-lg p-3 w-44 z-50"> | |
| <div class="text-sm text-white/70 hover:text-white py-1.5 cursor-pointer">Connexion</div> | |
| <a href="onboarding-chauffeur.html" class="block text-sm text-white/70 hover:text-white py-1.5 cursor-pointer no-underline">Espace chauffeur</a> | |
| <div class="text-sm text-white/70 hover:text-white py-1.5 cursor-pointer">Espace client</div> | |
| <div class="text-sm text-white/70 hover:text-white py-1.5 cursor-pointer">Aide</div> | |
| <div class="text-sm text-white/70 hover:text-white py-1.5 cursor-pointer">À propos de TIE</div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero --> | |
| <section class="max-w-3xl mx-auto px-5 pt-8 pb-8"> | |
| <div class="inline-flex items-center px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-[11px] tracking-wide text-white/55 mb-5"> | |
| Relation directe chauffeur ↔ client privé | |
| </div> | |
| <h1 class="text-[32px] md:text-[44px] leading-[1.05] font-semibold tracking-tight text-white max-w-2xl mb-4"> | |
| Le lien de confiance<br>entre chauffeurs VTC<br>et clients privés | |
| </h1> | |
| <p class="max-w-xl text-sm md:text-base leading-relaxed text-white/65 mb-4"> | |
| Gardez vos meilleurs clients.<br>Retrouvez votre chauffeur de confiance. | |
| </p> | |
| <p class="text-xs text-emerald-400/90 font-medium mb-8"> | |
| Sans commission pour les chauffeurs.<br>100% gratuit pour les clients. | |
| </p> | |
| </section> | |
| <!-- Guided Entry --> | |
| <div class="max-w-3xl mx-auto px-5 pb-4"> | |
| <div class="flex flex-col gap-2"> | |
| <a href="onboarding-chauffeur.html" class="text-sm text-white/60 hover:text-white transition cursor-pointer font-medium">→ Je suis chauffeur VTC</a> | |
| <a href="#section-client" class="text-sm text-white/60 hover:text-white transition cursor-pointer font-medium">→ Je suis client privé</a> | |
| </div> | |
| </div> | |
| <!-- Section Chauffeur --> | |
| <section id="section-chauffeur" class="max-w-3xl mx-auto px-5 py-4"> | |
| <h2 class="text-[24px] font-semibold tracking-tight text-white mb-4">Je suis chauffeur VTC</h2> | |
| <div class="flex gap-4 overflow-x-auto pb-2 snap-x snap-mandatory hide-scrollbar"> | |
| <a href="onboarding-chauffeur.html" class="snap-start min-w-[240px] max-w-[240px] rounded-2xl border border-emerald-500/30 bg-[#1a1f2b] p-5 shadow-sm transition-all duration-200 hover:bg-[#181c26] hover:border-emerald-500/50 cursor-pointer group block no-underline"> | |
| <div class="flex flex-col justify-between min-h-[220px]"> | |
| <div> | |
| <div class="text-[10px] uppercase tracking-wide text-emerald-400/80 bg-emerald-500/10 px-2 py-1 rounded-full inline-block mb-2">À commencer</div> | |
| <div class="w-11 h-11 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4 text-emerald-400"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 16H9m10 0h3v-3.15a1 1 0 0 0-.84-.99L16 11l-2.7-3.6a1 1 0 0 0-.8-.4H5.24a2 2 0 0 0-1.8 1.1l-.8 1.63A6 6 0 0 0 2 12.42V16h2"/><circle cx="6.5" cy="16.5" r="2.5"/><circle cx="16.5" cy="16.5" r="2.5"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-2">Créer mon espace chauffeur</h3> | |
| <p class="text-sm leading-relaxed text-white/65">Commencer à utiliser TIE pour garder vos meilleurs clients privés.</p> | |
| </div> | |
| <div class="mt-5 text-sm font-medium text-emerald-400 flex items-center gap-1 group-hover:gap-2 transition-all"> | |
| Accéder | |
| <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> | |
| </div> | |
| </div> | |
| </a> | |
| <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"> | |
| <div class="flex flex-col justify-between min-h-[220px]"> | |
| <div> | |
| <div class="text-[11px] uppercase tracking-wide text-white/35 mb-2">Relation client</div> | |
| <div class="w-11 h-11 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4 text-emerald-400"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-2">Garder mes meilleurs clients</h3> | |
| <p class="text-sm leading-relaxed text-white/65">Transformez vos bonnes courses en relation durable et directe.</p> | |
| </div> | |
| <div class="mt-5 text-sm font-medium text-emerald-400 flex items-center gap-1 group-hover:gap-2 transition-all"> | |
| Découvrir | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex flex-col justify-between min-h-[220px]"> | |
| <div> | |
| <div class="text-[11px] uppercase tracking-wide text-white/35 mb-2">Revenus</div> | |
| <div class="w-11 h-11 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4 text-emerald-400"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-2">Sans commission</h3> | |
| <p class="text-sm leading-relaxed text-white/65">Travaillez directement avec vos clients privés sans dépendre des plateformes.</p> | |
| </div> | |
| <div class="mt-5 text-sm font-medium text-emerald-400 flex items-center gap-1 group-hover:gap-2 transition-all"> | |
| Voir les avantages | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <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"> | |
| <div class="flex flex-col justify-between min-h-[220px]"> | |
| <div> | |
| <div class="text-[11px] uppercase tracking-wide text-white/35 mb-2">Abonnement</div> | |
| <div class="w-11 h-11 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4 text-emerald-400"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-2">Un abonnement simple</h3> | |
| <p class="text-sm leading-relaxed text-white/65">14,99€/mois · 1 mois offert pour commencer.</p> | |
| </div> | |
| <div class="mt-5 text-sm font-medium text-emerald-400 flex items-center gap-1 group-hover:gap-2 transition-all"> | |
| Démarrer l'essai | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="simulateur.html" class="snap-start min-w-[240px] max-w-[240px] rounded-2xl border border-emerald-500/30 bg-[#1a1f2b] p-5 shadow-sm transition-all duration-200 hover:bg-[#181c26] hover:border-emerald-500/50 cursor-pointer group block no-underline"> | |
| <div class="flex flex-col justify-between min-h-[220px]"> | |
| <div> | |
| <div class="text-[10px] uppercase tracking-wide text-emerald-400/80 bg-emerald-500/10 px-2 py-1 rounded-full inline-block mb-2">Simulateur</div> | |
| <div class="w-11 h-11 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4 text-emerald-400"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="20" x="4" y="2" rx="2"/><line x1="8" y1="6" x2="16" y2="6"/><line x1="16" y1="14" x2="16" y2="18"/><path d="M16 10h.01"/><path d="M12 10h.01"/><path d="M8 10h.01"/><path d="M12 14h.01"/><path d="M8 14h.01"/><path d="M12 18h.01"/><path d="M8 18h.01"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-2">Combien gagnez-vous vraiment ?</h3> | |
| <p class="text-sm leading-relaxed text-white/65">Comparez vos revenus plateforme avec vos revenus en direct.</p> | |
| </div> | |
| <div class="mt-5 text-sm font-medium text-emerald-400 flex items-center gap-1 group-hover:gap-2 transition-all"> | |
| Lancer le simulateur | |
| <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> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Section Client --> | |
| <section id="section-client" class="max-w-3xl mx-auto px-5 py-4"> | |
| <h2 class="text-[24px] font-semibold tracking-tight text-white mb-4">Je suis client privé</h2> | |
| <div class="flex gap-4 overflow-x-auto pb-2 snap-x snap-mandatory hide-scrollbar"> | |
| <div class="snap-start min-w-[240px] max-w-[240px] rounded-2xl border border-emerald-500/30 bg-[#1a1f2b] p-5 shadow-sm transition-all duration-200 hover:bg-[#181c26] hover:border-emerald-500/50 cursor-pointer group" onclick="showClientView()"> | |
| <div class="flex flex-col justify-between min-h-[220px]"> | |
| <div> | |
| <div class="text-[10px] uppercase tracking-wide text-emerald-400/80 bg-emerald-500/10 px-2 py-1 rounded-full inline-block mb-2">Réservation</div> | |
| <div class="w-11 h-11 rounded-xl bg-white/6 flex items-center justify-center mb-4 text-slate-300"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-2">Réserver mon chauffeur</h3> | |
| <p class="text-sm leading-relaxed text-white/65">Envoyez une demande directement à un chauffeur de confiance.</p> | |
| </div> | |
| <div class="mt-5 text-sm font-medium text-emerald-400 flex items-center gap-1 group-hover:gap-2 transition-all"> | |
| Réserver | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <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-white/15 cursor-pointer group"> | |
| <div class="flex flex-col justify-between min-h-[220px]"> | |
| <div> | |
| <div class="text-[11px] uppercase tracking-wide text-white/35 mb-2">Confiance</div> | |
| <div class="w-11 h-11 rounded-xl bg-white/6 flex items-center justify-center mb-4 text-slate-300"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-2">Retrouver mon chauffeur</h3> | |
| <p class="text-sm leading-relaxed text-white/65">Gardez le contact avec un chauffeur déjà connu et rassurant.</p> | |
| </div> | |
| <div class="mt-5 text-sm font-medium text-emerald-400 flex items-center gap-1 group-hover:gap-2 transition-all"> | |
| Accéder | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <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-white/15 cursor-pointer group"> | |
| <div class="flex flex-col justify-between min-h-[220px]"> | |
| <div> | |
| <div class="text-[11px] uppercase tracking-wide text-white/35 mb-2">Organisation</div> | |
| <div class="w-11 h-11 rounded-xl bg-white/6 flex items-center justify-center mb-4 text-slate-300"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-2">Reprogrammer un trajet</h3> | |
| <p class="text-sm leading-relaxed text-white/65">Replanifiez un trajet récurrent facilement depuis votre espace.</p> | |
| </div> | |
| <div class="mt-5 text-sm font-medium text-emerald-400 flex items-center gap-1 group-hover:gap-2 transition-all"> | |
| Voir comment | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="snap-start min-w-[240px] max-w-[240px] rounded-2xl border border-emerald-500/30 bg-[#1a1f2b] p-5 shadow-sm transition-all duration-200 hover:bg-[#181c26] hover:border-emerald-500/50 cursor-pointer group"> | |
| <div class="flex flex-col justify-between min-h-[220px]"> | |
| <div> | |
| <div class="text-[10px] uppercase tracking-wide text-emerald-400/80 bg-emerald-500/10 px-2 py-1 rounded-full inline-block mb-2">Gratuit</div> | |
| <div class="w-11 h-11 rounded-xl bg-white/6 flex items-center justify-center mb-4 text-slate-300"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 12 20 22 4 22 4 12"/><rect width="20" height="5" x="2" y="7" rx="2"/><line x1="12" y1="22" x2="12" y2="7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-2">TIE est gratuit</h3> | |
| <p class="text-sm leading-relaxed text-white/65">Créez votre espace et retrouvez facilement votre chauffeur de confiance.</p> | |
| </div> | |
| <div class="mt-5 text-sm font-medium text-emerald-400 flex items-center gap-1 group-hover:gap-2 transition-all"> | |
| Créer mon espace | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <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-white/15 cursor-pointer group"> | |
| <div class="flex flex-col justify-between min-h-[220px]"> | |
| <div> | |
| <div class="text-[11px] uppercase tracking-wide text-white/35 mb-2">Mobilité familiale</div> | |
| <div class="w-11 h-11 rounded-xl bg-white/6 flex items-center justify-center mb-4 text-slate-300"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-2">Réserver pour un proche</h3> | |
| <p class="text-sm leading-relaxed text-white/65">Organisez facilement les trajets d'un enfant, d'un parent ou d'un proche en toute confiance.</p> | |
| </div> | |
| <div class="mt-5 text-sm font-medium text-emerald-400 flex items-center gap-1 group-hover:gap-2 transition-all"> | |
| Découvrir | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section Optimisation --> | |
| <section class="max-w-3xl mx-auto px-5 py-4"> | |
| <h2 class="text-[24px] font-semibold tracking-tight text-white mb-1">Gagner plus, travailler mieux</h2> | |
| <p class="text-sm text-white/50 mb-4">Profitez de vos temps morts pour comprendre, optimiser et améliorer votre activité</p> | |
| <div class="flex gap-4 overflow-x-auto pb-2 snap-x snap-mandatory hide-scrollbar"> | |
| <a href="simulateur.html" class="snap-start min-w-[240px] max-w-[240px] rounded-2xl border border-emerald-500/30 bg-[#1a1f2b] p-5 shadow-sm transition-all duration-200 hover:bg-[#181c26] hover:border-emerald-500/50 cursor-pointer group block no-underline"> | |
| <div class="flex flex-col justify-between min-h-[220px]"> | |
| <div> | |
| <div class="text-[10px] uppercase tracking-wide text-emerald-400/80 bg-emerald-500/10 px-2 py-1 rounded-full inline-block mb-2">Analyse</div> | |
| <div class="w-11 h-11 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4 text-emerald-400"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="20" x="4" y="2" rx="2"/><line x1="8" y1="6" x2="16" y2="6"/><line x1="16" y1="14" x2="16" y2="18"/><path d="M16 10h.01"/><path d="M12 10h.01"/><path d="M8 10h.01"/><path d="M12 14h.01"/><path d="M8 14h.01"/><path d="M12 18h.01"/><path d="M8 18h.01"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-2">Combien gagnez-vous vraiment ?</h3> | |
| <p class="text-sm leading-relaxed text-white/65">Calculez votre rentabilité réelle sur une course en quelques secondes.</p> | |
| </div> | |
| <div class="mt-5 text-sm font-medium text-emerald-400 flex items-center gap-1 group-hover:gap-2 transition-all"> | |
| Calculer | |
| <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> | |
| </div> | |
| </div> | |
| </a> | |
| <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"> | |
| <div class="flex flex-col justify-between min-h-[220px]"> | |
| <div> | |
| <div class="text-[11px] uppercase tracking-wide text-white/35 mb-2">Impact</div> | |
| <div class="w-11 h-11 rounded-xl bg-white/6 flex items-center justify-center mb-4 text-slate-300"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 18 13.5 8.5 8.5 13.5 2 7"/><polyline points="17 18 23 18 23 12"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-2">Combien vous perdez par mois ?</h3> | |
| <p class="text-sm leading-relaxed text-white/65">Visualisez ce que les commissions vous coûtent réellement chaque mois.</p> | |
| </div> | |
| <div class="mt-5 text-sm font-medium text-emerald-400 flex items-center gap-1 group-hover:gap-2 transition-all"> | |
| Voir mon estimation | |
| <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> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="objectif-reel.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"> | |
| <div class="flex flex-col justify-between min-h-[220px]"> | |
| <div> | |
| <div class="text-[11px] uppercase tracking-wide text-white/35 mb-2">Objectif</div> | |
| <div class="w-11 h-11 rounded-xl bg-white/6 flex items-center justify-center mb-4 text-slate-300"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/><line x1="12" y1="2" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="20" y1="12" x2="22" y2="12"/><line x1="2" y1="12" x2="4" y2="12"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-2">Combien devez-vous gagner par jour ?</h3> | |
| <p class="text-sm leading-relaxed text-white/65">Définissez un objectif clair pour atteindre vos revenus mensuels.</p> | |
| </div> | |
| <div class="mt-5 text-sm font-medium text-emerald-400 flex items-center gap-1 group-hover:gap-2 transition-all"> | |
| Calculer | |
| <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> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="profil-chauffeur.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"> | |
| <div class="flex flex-col justify-between min-h-[220px]"> | |
| <div> | |
| <div class="text-[11px] uppercase tracking-wide text-white/35 mb-2">Profil</div> | |
| <div class="w-11 h-11 rounded-xl bg-white/6 flex items-center justify-center mb-4 text-slate-300"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-2">Quel type de chauffeur êtes-vous ?</h3> | |
| <p class="text-sm leading-relaxed text-white/65">Découvrez votre profil et les axes pour améliorer votre activité.</p> | |
| </div> | |
| <div class="mt-5 text-sm font-medium text-emerald-400 flex items-center gap-1 group-hover:gap-2 transition-all"> | |
| Faire le test | |
| <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> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="voiture-optimale.html" class="snap-start min-w-[240px] max-w-[240px] rounded-2xl border border-emerald-500/30 bg-[#1a1f2b] p-5 shadow-sm transition-all duration-200 hover:bg-[#181c26] hover:border-emerald-500/50 cursor-pointer group block no-underline hover:scale-[1.02] hover:shadow-lg hover:shadow-emerald-500/10"> | |
| <div class="flex flex-col justify-between min-h-[220px]"> | |
| <div> | |
| <div class="text-[10px] uppercase tracking-wide text-emerald-400/80 bg-emerald-500/10 px-2 py-1 rounded-full inline-block mb-2">Décision</div> | |
| <div class="w-11 h-11 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-4 text-emerald-400"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 16H9m10 0h3v-3.15a1 1 0 0 0-.84-.99L16 11l-2.7-3.6a1 1 0 0 0-.8-.4H5.24a2 2 0 0 0-1.8 1.1l-.8 1.63A6 6 0 0 0 2 12.42V16h2"/><circle cx="6.5" cy="16.5" r="2.5"/><circle cx="16.5" cy="16.5" r="2.5"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-2">Quelle voiture est faite pour vous ?</h3> | |
| <p class="text-sm leading-relaxed text-white/65">Trouvez le véhicule adapté à votre activité et vos objectifs.</p> | |
| </div> | |
| <div class="mt-5 text-sm font-medium text-emerald-400 flex items-center gap-1 group-hover:gap-2 transition-all"> | |
| Découvrir | |
| <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> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Trust Row --> | |
| <section class="max-w-3xl mx-auto px-5 pt-8 pb-28"> | |
| <div class="flex flex-wrap gap-x-5 gap-y-3 items-center"> | |
| <div class="flex items-center gap-2 text-[12px] text-white/45"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/35"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><polyline points="16 11 18 13 22 9"/></svg> | |
| Chauffeurs identifiés | |
| </div> | |
| <div class="flex items-center gap-2 text-[12px] text-white/45"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/35"><rect width="18" height="18" x="3" y="4" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><path d="m9 16 2 2 4-4"/></svg> | |
| Réservation simple | |
| </div> | |
| <div class="flex items-center gap-2 text-[12px] text-white/45"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/35"><rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> | |
| Données sécurisées | |
| </div> | |
| <div class="flex items-center gap-2 text-[12px] text-white/45"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/35"><path d="M8 3 4 7l4 4"/><path d="M16 21 20 17l-4-4"/><path d="M3 7h18"/><path d="M21 17H3"/></svg> | |
| Relation directe | |
| </div> | |
| </div> | |
| </section> | |
| <!-- View Client Private --> | |
| <div id="view-client-private" class="hidden fixed inset-0 z-[60] bg-[#0b0b0f] overflow-y-auto hide-scrollbar"> | |
| <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 gap-3"> | |
| <button id="btnCloseClientView" type="button" class="w-9 h-9 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center text-white/70 hover:text-white transition"> | |
| <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> | |
| </button> | |
| <div> | |
| <h2 class="text-lg font-semibold text-white">Mon espace client</h2> | |
| <p class="text-xs text-white/45">Retrouvez vos chauffeurs de confiance.</p> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="max-w-3xl mx-auto px-5 pt-4 pb-28 space-y-6"> | |
| <!-- Intro --> | |
| <div class="bg-[#151821] border border-white/10 rounded-2xl p-5"> | |
| <div class="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-400 mb-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-2">Réservez avec un chauffeur que vous connaissez déjà</h3> | |
| <p class="text-sm text-white/65 leading-relaxed">TIE vous permet de garder le lien avec vos chauffeurs habituels. Pas de chauffeurs inconnus, pas de mise en concurrence.</p> | |
| </div> | |
| <!-- Create space --> | |
| <div id="client-create-space" class="bg-[#151821] border border-white/10 rounded-2xl p-5 space-y-4"> | |
| <div> | |
| <h3 class="text-base font-medium text-white mb-1">Créer votre espace personnel</h3> | |
| <p class="text-sm text-white/55">Identifiez-vous en quelques secondes pour retrouver vos chauffeurs.</p> | |
| </div> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-xs text-white/45 mb-1.5">Téléphone</label> | |
| <input type="tel" id="clientPhone" placeholder="06 12 34 56 78" 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 placeholder-white/30"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-white/45 mb-1.5">Email</label> | |
| <input type="email" id="clientEmail" placeholder="jean.dupont@email.com" 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 placeholder-white/30"> | |
| </div> | |
| </div> | |
| <button id="btnCreateClientSpace" disabled class="w-full py-3.5 rounded-xl bg-emerald-500 text-black text-sm font-semibold hover:opacity-90 transition disabled:opacity-40 disabled:cursor-not-allowed">Créer mon espace</button> | |
| </div> | |
| <!-- Reassurance --> | |
| <div class="bg-[#1a1f2b] border border-white/10 rounded-2xl p-5 space-y-3"> | |
| <div class="flex items-center gap-3 text-sm text-white/80"> | |
| <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 shrink-0"></span> | |
| Gratuit pour les clients | |
| </div> | |
| <div class="flex items-center gap-3 text-sm text-white/80"> | |
| <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 shrink-0"></span> | |
| Aucune carte bancaire demandée | |
| </div> | |
| <div class="flex items-center gap-3 text-sm text-white/80"> | |
| <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 shrink-0"></span> | |
| Aucune application à télécharger | |
| </div> | |
| <p class="text-xs text-white/45 pt-2 border-t border-white/10">Vous pourrez supprimer votre espace à tout moment.</p> | |
| </div> | |
| <!-- Empty state --> | |
| <div id="client-empty-state" class="hidden bg-[#151821] border border-white/10 rounded-2xl p-5 text-center"> | |
| <div class="w-12 h-12 mx-auto rounded-xl bg-white/5 flex items-center justify-center text-white/25 mb-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> | |
| </div> | |
| <h3 class="text-base font-medium text-white mb-1">Vous n'avez pas encore de chauffeur enregistré</h3> | |
| <p class="text-sm text-white/55 mb-5 leading-relaxed">Ajoutez un chauffeur via son QR code ou son numéro professionnel pour pouvoir réserver une course.</p> | |
| <div class="space-y-3"> | |
| <button id="btnScanQr" class="w-full py-3 rounded-xl bg-emerald-500 text-black text-sm font-semibold hover:opacity-90 transition">Scanner un QR chauffeur</button> | |
| <button id="btnEnterDriverNumber" class="w-full py-3 rounded-xl bg-white/5 border border-white/10 text-white text-sm font-medium hover:bg-white/10 transition">Entrer un numéro chauffeur</button> | |
| <div id="driverNumberInputWrap" class="hidden text-left space-y-3"> | |
| <div> | |
| <label class="block text-xs text-white/45 mb-1.5">Code ou numéro chauffeur</label> | |
| <input | |
| type="text" | |
| id="driverNumberInput" | |
| placeholder="Ex : TIE-2048 ou 06 12 34 56 78" | |
| 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 placeholder-white/30" | |
| > | |
| </div> | |
| <button | |
| id="btnValidateDriverNumber" | |
| disabled | |
| class="w-full py-3 rounded-xl bg-emerald-500 text-black text-sm font-semibold hover:opacity-90 transition disabled:opacity-40 disabled:cursor-not-allowed" | |
| > | |
| Continuer | |
| </button> | |
| <p class="text-xs text-white/40 leading-relaxed"> | |
| Ce code permet d’ajouter un chauffeur que vous connaissez déjà. | |
| </p> | |
| </div> | |
| <button id="btnInviteDriver" class="text-xs text-white/45 hover:text-white/70 transition">Inviter mon chauffeur habituel sur TIE</button> | |
| </div> | |
| </div> | |
| <!-- Demo state with driver --> | |
| <div id="client-driver-state" class="hidden bg-[#151821] border border-white/10 rounded-2xl p-5"> | |
| <div class="flex items-center gap-3 mb-4"> | |
| <div class="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-400 text-sm font-bold border border-emerald-500/20">J</div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="text-sm font-medium text-white">Jean</div> | |
| <div class="text-xs text-white/55">Chauffeur VTC</div> | |
| </div> | |
| <span class="px-2 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-[10px] text-emerald-400 font-semibold">Disponible</span> | |
| </div> | |
| <div class="text-xs text-white/45 mb-4">Dernière course : Aujourd'hui</div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="py-3 rounded-xl bg-emerald-500 text-black text-sm font-semibold hover:opacity-90 transition">Demander une course</button> | |
| <button class="py-3 rounded-xl bg-white/5 border border-white/10 text-white text-sm font-medium hover:bg-white/10 transition flex items-center justify-center gap-2"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2A19.86 19.86 0 0 1 3.11 5.18 2 2 0 0 1 5.1 3h3a2 2 0 0 1 2 1.72c.12.9.33 1.77.63 2.61a2 2 0 0 1-.45 2.11L9 10.73a16 16 0 0 0 4.27 4.27l1.29-1.28a2 2 0 0 1 2.11-.45c.84.3 1.71.51 2.61.63A2 2 0 0 1 22 16.92z"/></svg> | |
| Appeler | |
| </button> | |
| </div> | |
| <button class="w-full mt-3 text-xs text-white/45 hover:text-white/70 transition">Recommander ce chauffeur</button> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Bottom Navigation --> | |
| <nav class="fixed bottom-0 left-0 right-0 z-50 bg-black/55 backdrop-blur-2xl border-t border-white/8"> | |
| <div class="max-w-3xl mx-auto px-6 py-3 flex justify-around items-center"> | |
| <button class="flex flex-col items-center gap-1 text-[11px] text-white transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg> | |
| Accueil | |
| </button> | |
| <button id="simulatorsMobileButton" class="flex flex-col items-center gap-1 text-[11px] text-white/45 hover:text-white/70 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="20" x="4" y="2" rx="2"/><line x1="8" y1="6" x2="16" y2="6"/><line x1="16" y1="14" x2="16" y2="18"/><path d="M16 10h.01"/><path d="M12 10h.01"/><path d="M8 10h.01"/><path d="M12 14h.01"/><path d="M8 14h.01"/><path d="M12 18h.01"/><path d="M8 18h.01"/></svg> | |
| Simulateurs | |
| </button> | |
| <button id="monEspaceBtn" class="flex flex-col items-center gap-1 text-[11px] text-white/45 hover:text-white/70 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> | |
| Mon espace | |
| </button> | |
| <button id="installBtn" class="flex flex-col items-center gap-1 text-[11px] text-white/45 hover:text-white/70 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg> | |
| Installer TIE | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Install Modal --> | |
| <div id="installModal" class="hidden fixed inset-0 z-[60] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"> | |
| <div class="w-full max-w-sm rounded-2xl bg-[#151821] border border-white/10 p-6 shadow-2xl"> | |
| <h3 class="text-lg font-semibold text-white mb-3">Installer TIE sur votre téléphone</h3> | |
| <p class="text-sm text-white/65 mb-4">Accédez à TIE comme une application directement depuis votre écran d'accueil.</p> | |
| <div class="space-y-3 mb-6"> | |
| <div class="flex items-start gap-3"> | |
| <div class="w-6 h-6 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium text-white">Android</div> | |
| <div class="text-xs text-white/55">Appuyez sur "Ajouter à l'écran d'accueil".</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <div class="w-6 h-6 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0 mt-0.5"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium text-white">iPhone</div> | |
| <div class="text-xs text-white/55">Appuyez sur le bouton partager puis "Ajouter à l'écran d'accueil".</div> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="closeModal" class="w-full py-3 rounded-xl bg-white/10 hover:bg-white/20 text-sm font-medium text-white transition">Fermer</button> | |
| </div> | |
| </div> | |
| <!-- Mon Espace Action Sheet --> | |
| <div id="monEspaceSheet" class="hidden fixed bottom-[84px] left-1/2 -translate-x-1/2 w-[calc(100%-2rem)] max-w-sm rounded-2xl bg-[#151821] border border-white/10 shadow-2xl p-3 z-[60]"> | |
| <button class="w-full rounded-xl px-4 py-3 text-left bg-white/5 hover:bg-white/10 border border-white/5 transition mb-2"> | |
| <div class="text-sm font-medium text-white">Créer un espace chauffeur</div> | |
| <div class="text-xs text-white/50 mt-0.5">Pour développer votre clientèle privée</div> | |
| </button> | |
| <button class="w-full rounded-xl px-4 py-3 text-left bg-white/5 hover:bg-white/10 border border-white/5 transition mb-2"> | |
| <div class="text-sm font-medium text-white">Créer un espace client</div> | |
| <div class="text-xs text-white/50 mt-0.5">Pour retrouver votre chauffeur de confiance</div> | |
| </button> | |
| <div id="closeMonEspace" class="text-xs text-white/45 hover:text-white/70 text-center pt-2 cursor-pointer">Fermer</div> | |
| </div> | |
| <!-- Simulateurs Mobile Sheet --> | |
| <div id="simulatorsMobilePanel" class="hidden fixed inset-0 z-[70] bg-black/70 backdrop-blur-sm"> | |
| <div class="absolute inset-x-0 bottom-0 rounded-t-3xl border-t border-white/10 bg-[#151821] p-5 shadow-2xl"> | |
| <div class="mb-4 flex items-start justify-between gap-4"> | |
| <div> | |
| <div class="text-base font-semibold text-white">Les simulateurs TIE</div> | |
| <p class="mt-1 text-xs leading-relaxed text-white/50"> | |
| Accédez rapidement au simulateur qui vous intéresse. | |
| </p> | |
| </div> | |
| <button id="closeSimulatorsMobilePanel" type="button" class="rounded-xl border border-white/10 bg-white/5 p-2 text-white/70 transition hover:bg-white/10 hover:text-white"> | |
| <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="space-y-3 pb-2"> | |
| <a href="simulateur.html" class="block rounded-2xl border border-white/10 bg-black/20 p-4"> | |
| <div class="mb-1 text-sm font-semibold text-white">Combien gagnez-vous vraiment ?</div> | |
| <p class="text-xs leading-relaxed text-white/55">Tester la rentabilité d’une course rapidement.</p> | |
| </a> | |
| <a href="simulateur-pertes.html" class="block rounded-2xl border border-white/10 bg-black/20 p-4"> | |
| <div class="mb-1 text-sm font-semibold text-white">Combien vous perdez par mois ?</div> | |
| <p class="text-xs leading-relaxed text-white/55">Mesurer l’impact des commissions sur votre activité.</p> | |
| </a> | |
| <a href="objectif-reel.html" class="block rounded-2xl border border-white/10 bg-black/20 p-4"> | |
| <div class="mb-1 text-sm font-semibold text-white">Combien devez-vous gagner par jour ?</div> | |
| <p class="text-xs leading-relaxed text-white/55">Définir votre vrai objectif quotidien.</p> | |
| </a> | |
| <a href="profil-chauffeur.html" class="block rounded-2xl border border-white/10 bg-black/20 p-4"> | |
| <div class="mb-1 text-sm font-semibold text-white">Quel type de chauffeur êtes-vous ?</div> | |
| <p class="text-xs leading-relaxed text-white/55">Mieux comprendre votre profil et vos leviers.</p> | |
| </a> | |
| <a href="voiture-optimale.html" class="block rounded-2xl border border-emerald-500/30 bg-emerald-500/5 p-4"> | |
| <div class="mb-1 text-sm font-semibold text-white">Quelle voiture est faite pour vous ?</div> | |
| <p class="text-xs leading-relaxed text-white/55">Trouver le véhicule le plus cohérent avec votre activité.</p> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const settingsBtn = document.getElementById('settingsBtn'); | |
| const settingsDropdown = document.getElementById('settingsDropdown'); | |
| const installBtn = document.getElementById('installBtn'); | |
| const installModal = document.getElementById('installModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const monEspaceBtn = document.getElementById('monEspaceBtn'); | |
| const monEspaceSheet = document.getElementById('monEspaceSheet'); | |
| const closeMonEspace = document.getElementById('closeMonEspace'); | |
| const simulatorsMenuWrapper = document.getElementById('simulatorsMenuWrapper'); | |
| const simulatorsMenuButton = document.getElementById('simulatorsMenuButton'); | |
| const simulatorsMegaMenu = document.getElementById('simulatorsMegaMenu'); | |
| const simulatorsChevron = document.getElementById('simulatorsChevron'); | |
| const simulatorsMobileButton = document.getElementById('simulatorsMobileButton'); | |
| const simulatorsMobilePanel = document.getElementById('simulatorsMobilePanel'); | |
| const closeSimulatorsMobilePanel = document.getElementById('closeSimulatorsMobilePanel'); | |
| function closeAllFloatingUI() { | |
| settingsDropdown.classList.add('hidden'); | |
| if (simulatorsMegaMenu) simulatorsMegaMenu.classList.add('hidden'); | |
| if (simulatorsMenuButton) simulatorsMenuButton.setAttribute('aria-expanded', 'false'); | |
| if (simulatorsChevron) simulatorsChevron.classList.remove('rotate-180'); | |
| if (monEspaceSheet) monEspaceSheet.classList.add('hidden'); | |
| } | |
| function openDesktopSimulatorsMenu() { | |
| simulatorsMegaMenu.classList.remove('hidden'); | |
| simulatorsMenuButton.setAttribute('aria-expanded', 'true'); | |
| simulatorsChevron.classList.add('rotate-180'); | |
| } | |
| function closeDesktopSimulatorsMenu() { | |
| simulatorsMegaMenu.classList.add('hidden'); | |
| simulatorsMenuButton.setAttribute('aria-expanded', 'false'); | |
| simulatorsChevron.classList.remove('rotate-180'); | |
| } | |
| settingsBtn.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| const isHidden = settingsDropdown.classList.contains('hidden'); | |
| closeAllFloatingUI(); | |
| if (isHidden) { | |
| settingsDropdown.classList.remove('hidden'); | |
| } | |
| }); | |
| installBtn.addEventListener('click', () => { | |
| installModal.classList.remove('hidden'); | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| installModal.classList.add('hidden'); | |
| }); | |
| installModal.addEventListener('click', (e) => { | |
| if (e.target === installModal) { | |
| installModal.classList.add('hidden'); | |
| } | |
| }); | |
| monEspaceBtn.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| const isHidden = monEspaceSheet.classList.contains('hidden'); | |
| closeAllFloatingUI(); | |
| if (isHidden) { | |
| monEspaceSheet.classList.remove('hidden'); | |
| } | |
| }); | |
| closeMonEspace.addEventListener('click', () => { | |
| monEspaceSheet.classList.add('hidden'); | |
| }); | |
| if (simulatorsMenuButton) { | |
| simulatorsMenuButton.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| const isHidden = simulatorsMegaMenu.classList.contains('hidden'); | |
| closeAllFloatingUI(); | |
| if (isHidden) { | |
| openDesktopSimulatorsMenu(); | |
| } | |
| }); | |
| } | |
| simulatorsMobileButton.addEventListener('click', () => { | |
| simulatorsMobilePanel.classList.remove('hidden'); | |
| }); | |
| closeSimulatorsMobilePanel.addEventListener('click', () => { | |
| simulatorsMobilePanel.classList.add('hidden'); | |
| }); | |
| simulatorsMobilePanel.addEventListener('click', (e) => { | |
| if (e.target === simulatorsMobilePanel) { | |
| simulatorsMobilePanel.classList.add('hidden'); | |
| } | |
| }); | |
| simulatorsMobilePanel.querySelectorAll('a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| simulatorsMobilePanel.classList.add('hidden'); | |
| }); | |
| }); | |
| document.addEventListener('click', (e) => { | |
| if (simulatorsMenuWrapper && simulatorsMenuWrapper.contains(e.target)) return; | |
| if (monEspaceSheet && monEspaceSheet.contains(e.target)) return; | |
| closeAllFloatingUI(); | |
| }); | |
| </script> | |
| <!-- Toast client --> | |
| <div id="clientToast" class="fixed bottom-24 left-4 right-4 z-[100] translate-y-24 opacity-0 transition-all pointer-events-none"> | |
| <div class="bg-[#1a1f2b] border border-white/10 rounded-xl px-4 py-3.5 shadow-2xl flex items-center gap-3"> | |
| <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> | |
| <span id="clientToastMessage" class="text-sm text-white/90 font-medium"></span> | |
| </div> | |
| </div> | |
| <script> | |
| const hasTrustedDriver = false; | |
| function showClientToast(message) { | |
| const toast = document.getElementById('clientToast'); | |
| const msg = document.getElementById('clientToastMessage'); | |
| if (!toast || !msg) return; | |
| msg.textContent = message; | |
| toast.classList.remove('translate-y-24', 'opacity-0', 'pointer-events-none'); | |
| toast.classList.add('translate-y-0', 'opacity-100'); | |
| setTimeout(() => { | |
| toast.classList.add('translate-y-24', 'opacity-0', 'pointer-events-none'); | |
| toast.classList.remove('translate-y-0', 'opacity-100'); | |
| }, 2500); | |
| } | |
| function showClientView() { | |
| const view = document.getElementById('view-client-private'); | |
| if (view) view.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function hideClientView() { | |
| const view = document.getElementById('view-client-private'); | |
| if (view) view.classList.add('hidden'); | |
| document.body.style.overflow = ''; | |
| } | |
| document.getElementById('btnCloseClientView')?.addEventListener('click', hideClientView); | |
| const clientPhoneInput = document.getElementById('clientPhone'); | |
| const clientEmailInput = document.getElementById('clientEmail'); | |
| const btnCreateClientSpace = document.getElementById('btnCreateClientSpace'); | |
| function checkClientInputs() { | |
| if (!btnCreateClientSpace) return; | |
| const phone = clientPhoneInput?.value.trim() || ''; | |
| const email = clientEmailInput?.value.trim() || ''; | |
| btnCreateClientSpace.disabled = !(phone || email); | |
| } | |
| if (clientPhoneInput) clientPhoneInput.addEventListener('input', checkClientInputs); | |
| if (clientEmailInput) clientEmailInput.addEventListener('input', checkClientInputs); | |
| btnCreateClientSpace?.addEventListener('click', () => { | |
| const createBlock = document.getElementById('client-create-space'); | |
| if (createBlock) createBlock.classList.add('hidden'); | |
| if (hasTrustedDriver) { | |
| document.getElementById('client-driver-state')?.classList.remove('hidden'); | |
| } else { | |
| document.getElementById('client-empty-state')?.classList.remove('hidden'); | |
| } | |
| }); | |
| document.getElementById('btnScanQr')?.addEventListener('click', () => { | |
| document.getElementById('client-empty-state')?.classList.add('hidden'); | |
| document.getElementById('client-driver-state')?.classList.remove('hidden'); | |
| showClientToast('Chauffeur ajouté via QR code'); | |
| }); | |
| document.getElementById('btnEnterDriverNumber')?.addEventListener('click', () => { | |
| const wrap = document.getElementById('driverNumberInputWrap'); | |
| if (wrap) wrap.classList.toggle('hidden'); | |
| }); | |
| const driverNumberInput = document.getElementById('driverNumberInput'); | |
| const btnValidateDriverNumber = document.getElementById('btnValidateDriverNumber'); | |
| driverNumberInput?.addEventListener('input', () => { | |
| const value = driverNumberInput.value.trim(); | |
| if (btnValidateDriverNumber) { | |
| btnValidateDriverNumber.disabled = value.length < 3; | |
| } | |
| }); | |
| btnValidateDriverNumber?.addEventListener('click', () => { | |
| document.getElementById('client-empty-state')?.classList.add('hidden'); | |
| document.getElementById('client-driver-state')?.classList.remove('hidden'); | |
| showClientToast('Chauffeur ajouté à votre espace'); | |
| }); | |
| document.getElementById('btnInviteDriver')?.addEventListener('click', () => { | |
| showClientToast('Lien d’invitation préparé'); | |
| }); | |
| </script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |