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 - Chauffeur</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <style> | |
| body { background-color: #0b0b0f; color: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-tap-highlight-color: transparent; } | |
| .glass { background: rgba(255,255,255,0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.1); } | |
| .glass-dark { background: rgba(11,11,15,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,0.1); } | |
| .card-bg { background-color: #151821; } | |
| .card-bg-secondary { background-color: #1a1f2b; } | |
| .hide-scrollbar::-webkit-scrollbar { display: none; } | |
| .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } | |
| .modal-content { animation: modalIn 0.25s ease-out; } | |
| @keyframes modalIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } | |
| .toast-enter { transform: translate(-50%, 0); opacity: 1; } | |
| .progress-bar { transition: width 1s linear; } | |
| .status-dot { animation: pulse-dot 2s infinite; } | |
| @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); } 70% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } } | |
| </style> | |
| </head> | |
| <body class="bg-[#0b0b0f] text-white antialiased overscroll-none"> | |
| <div id="toast-container" class="fixed top-4 left-1/2 -translate-x-1/2 z-[70] transition-all duration-300 -translate-y-[150%] opacity-0 pointer-events-none"> | |
| <div class="glass px-4 py-3 rounded-2xl flex items-center gap-3 shadow-2xl bg-[#151821]"> | |
| <span id="toast-icon"></span> | |
| <span id="toast-message" class="text-sm font-medium"></span> | |
| </div> | |
| </div> | |
| <header class="fixed top-0 left-0 right-0 z-40 glass"> | |
| <div class="flex items-center justify-between px-4 h-16"> | |
| <div class="flex flex-col"> | |
| <span class="text-xs text-white/45">Bonjour</span> | |
| <span class="text-sm font-semibold">Jean</span> | |
| </div> | |
| <div class="text-center"> | |
| <span class="text-sm font-semibold tracking-wide">Vos courses privées</span> | |
| </div> | |
| <div class="relative"> | |
| <button id="status-btn" class="flex items-center gap-2 bg-[#1a1f2b] hover:bg-[#252b3a] transition rounded-full px-3 py-1.5 border border-white/10"> | |
| <span id="status-dot" class="w-2 h-2 rounded-full bg-emerald-500 status-dot"></span> | |
| <span id="status-text" class="text-xs font-medium">En ligne</span> | |
| <i data-lucide="chevron-down" class="w-3 h-3 text-white/45"></i> | |
| </button> | |
| <div id="status-dropdown" class="absolute right-0 top-full mt-2 w-40 bg-[#151821] border border-white/10 rounded-2xl shadow-2xl overflow-hidden hidden origin-top-right z-50"> | |
| <button onclick="setStatus('online')" class="w-full text-left px-4 py-3 text-xs hover:bg-white/5 flex items-center gap-2"> | |
| <span class="w-2 h-2 rounded-full bg-emerald-500"></span> En ligne | |
| </button> | |
| <button onclick="setStatus('busy')" class="w-full text-left px-4 py-3 text-xs hover:bg-white/5 flex items-center gap-2"> | |
| <span class="w-2 h-2 rounded-full bg-red-400"></span> Non disponible | |
| </button> | |
| <button onclick="setStatus('holiday')" class="w-full text-left px-4 py-3 text-xs hover:bg-white/5 flex items-center gap-2"> | |
| <span class="w-2 h-2 rounded-full bg-orange-400"></span> Vacances | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main id="main-content" class="pt-20 pb-24 px-4 min-h-screen"> | |
| <div id="view-home" class="view space-y-6"> | |
| <div class="flex gap-3 overflow-x-auto hide-scrollbar snap-x snap-mandatory"> | |
| <button onclick="openModal('revenues')" class="snap-start flex items-center gap-2 h-10 bg-[#151821] border border-white/10 rounded-full px-4 whitespace-nowrap hover:bg-[#1a1f2b] transition active:scale-95"> | |
| <span class="w-2 h-2 rounded-full bg-emerald-400"></span> | |
| <span class="text-xs text-white/90">Revenus TIE</span> | |
| <span class="text-xs font-bold text-emerald-400">428 €</span> | |
| </button> | |
| <button onclick="showView('view-demandes')" class="snap-start flex items-center gap-2 h-10 bg-[#151821] border border-white/10 rounded-full px-4 whitespace-nowrap hover:bg-[#1a1f2b] transition active:scale-95"> | |
| <span class="w-2 h-2 rounded-full bg-orange-400"></span> | |
| <span class="text-xs text-white/90">3 en attente</span> | |
| </button> | |
| <button class="snap-start flex items-center gap-2 h-10 bg-[#151821] border border-white/10 rounded-full px-4 whitespace-nowrap hover:bg-[#1a1f2b] transition active:scale-95"> | |
| <span class="w-2 h-2 rounded-full bg-blue-400"></span> | |
| <span class="text-xs text-white/90">2 aujourd'hui</span> | |
| </button> | |
| <button onclick="showView('view-clients')" class="snap-start flex items-center gap-2 h-10 bg-[#151821] border border-white/10 rounded-full px-4 whitespace-nowrap hover:bg-[#1a1f2b] transition active:scale-95"> | |
| <span class="w-2 h-2 rounded-full bg-purple-400"></span> | |
| <span class="text-xs text-white/90">4 clients actifs</span> | |
| </button> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h2 class="text-sm font-semibold text-white/90">Demandes en attente</h2> | |
| <span class="text-xs text-white/45">Carousel</span> | |
| </div> | |
| <div class="flex gap-4 overflow-x-auto hide-scrollbar snap-x snap-mandatory pb-4"> | |
| <div id="req-card-0" class="snap-start min-w-[85vw] card-bg rounded-2xl p-4 border border-white/5 relative"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center gap-2"> | |
| <span class="relative flex h-2 w-2"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-2 w-2 bg-red-400"></span> | |
| </span> | |
| <span class="text-xs font-bold text-white/90">Nouvelle demande</span> | |
| </div> | |
| <span class="text-[10px] bg-red-400/10 text-red-400 px-2 py-0.5 rounded-full border border-red-400/20">À vérifier</span> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-lg font-semibold">Marie</span> | |
| <span class="text-xs text-white/45">Aujourd'hui · 18:30</span> | |
| </div> | |
| <div class="space-y-1.5 mt-2"> | |
| <div class="flex items-start gap-2 text-xs text-white/65"> | |
| <i data-lucide="map-pin" class="w-3.5 h-3.5 mt-0.5 text-emerald-400 shrink-0"></i> | |
| <span class="truncate">12 rue de la Colombette, 31000 Toulouse</span> | |
| </div> | |
| <div class="flex items-start gap-2 text-xs text-white/65"> | |
| <i data-lucide="flag" class="w-3.5 h-3.5 mt-0.5 text-orange-400 shrink-0"></i> | |
| <span class="truncate">6 avenue Latécoère, 31700 Blagnac</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-xl font-bold">35 €</span> | |
| <span class="text-xs text-white/45">Reste 12 min</span> | |
| </div> | |
| <div class="w-full h-1 bg-white/10 rounded-full mb-4 overflow-hidden"> | |
| <div class="h-full bg-emerald-500 rounded-full progress-bar" style="width: 65%"></div> | |
| </div> | |
| <div class="flex gap-2 mb-3"> | |
| <button onclick="openCallModal('Marie', '06 12 34 56 78')" class="flex-1 flex items-center justify-center gap-1.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl py-2.5 transition"> | |
| <i data-lucide="phone" class="w-4 h-4 text-emerald-400"></i> | |
| <span class="text-xs font-medium">Appeler</span> | |
| </button> | |
| <button onclick="acceptRequest(0)" class="flex-1 flex items-center justify-center gap-1.5 bg-emerald-500/20 hover:bg-emerald-500/30 border border-emerald-500/30 rounded-xl py-2.5 transition"> | |
| <i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> | |
| <span class="text-xs font-medium text-emerald-400">Accepter</span> | |
| </button> | |
| <button onclick="refuseRequest(0)" class="flex-1 flex items-center justify-center gap-1.5 bg-white/5 hover:bg-red-400/10 border border-white/10 rounded-xl py-2.5 transition"> | |
| <i data-lucide="x" class="w-4 h-4 text-red-400"></i> | |
| <span class="text-xs font-medium text-red-400">Refuser</span> | |
| </button> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button onclick="openConfrereSheet()" class="flex-1 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl py-2 text-xs transition">Confrère</button> | |
| <button onclick="openDetailsSheet(0)" class="flex-1 bg-orange-400/10 hover:bg-orange-400/20 border border-orange-400/20 rounded-xl py-2 text-xs text-orange-400 flex items-center justify-center gap-1.5 transition"> | |
| Détails & options | |
| <span class="w-1.5 h-1.5 rounded-full bg-orange-400"></span> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="req-card-1" class="snap-start min-w-[85vw] card-bg rounded-2xl p-4 border border-white/5 relative"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center gap-2"> | |
| <span class="w-2 h-2 rounded-full bg-emerald-400"></span> | |
| <span class="text-xs font-bold text-white/90">Nouvelle demande</span> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-lg font-semibold">Karim</span> | |
| <span class="text-xs text-white/45">Aujourd'hui · 19:15</span> | |
| </div> | |
| <div class="space-y-1.5 mt-2"> | |
| <div class="flex items-start gap-2 text-xs text-white/65"> | |
| <i data-lucide="map-pin" class="w-3.5 h-3.5 mt-0.5 text-emerald-400 shrink-0"></i> | |
| <span class="truncate">48 boulevard Lazare Carnot, 31000 Toulouse</span> | |
| </div> | |
| <div class="flex items-start gap-2 text-xs text-white/65"> | |
| <i data-lucide="flag" class="w-3.5 h-3.5 mt-0.5 text-orange-400 shrink-0"></i> | |
| <span class="truncate">21 avenue Didier Daurat, 31700 Blagnac</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-xl font-bold">28 €</span> | |
| <span class="text-xs text-white/45">Reste 45 min</span> | |
| </div> | |
| <div class="w-full h-1 bg-white/10 rounded-full mb-4 overflow-hidden"> | |
| <div class="h-full bg-emerald-500 rounded-full progress-bar" style="width: 30%"></div> | |
| </div> | |
| <div class="flex gap-2 mb-3"> | |
| <button onclick="openCallModal('Karim', '06 23 45 67 89')" class="flex-1 flex items-center justify-center gap-1.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl py-2.5 transition"> | |
| <i data-lucide="phone" class="w-4 h-4 text-emerald-400"></i> | |
| <span class="text-xs font-medium">Appeler</span> | |
| </button> | |
| <button onclick="acceptRequest(1)" class="flex-1 flex items-center justify-center gap-1.5 bg-emerald-500/20 hover:bg-emerald-500/30 border border-emerald-500/30 rounded-xl py-2.5 transition"> | |
| <i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> | |
| <span class="text-xs font-medium text-emerald-400">Accepter</span> | |
| </button> | |
| <button onclick="refuseRequest(1)" class="flex-1 flex items-center justify-center gap-1.5 bg-white/5 hover:bg-red-400/10 border border-white/10 rounded-xl py-2.5 transition"> | |
| <i data-lucide="x" class="w-4 h-4 text-red-400"></i> | |
| <span class="text-xs font-medium text-red-400">Refuser</span> | |
| </button> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button onclick="openConfrereSheet()" class="flex-1 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl py-2 text-xs transition">Confrère</button> | |
| <button onclick="openDetailsSheet(1)" class="flex-1 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl py-2 text-xs text-white/65 transition">Détails</button> | |
| </div> | |
| </div> | |
| <div id="req-card-2" class="snap-start min-w-[85vw] card-bg rounded-2xl p-4 border border-white/5 relative"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center gap-2"> | |
| <span class="relative flex h-2 w-2"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-2 w-2 bg-orange-400"></span> | |
| </span> | |
| <span class="text-xs font-bold text-white/90">Nouvelle demande</span> | |
| </div> | |
| <span class="text-[10px] bg-orange-400/10 text-orange-400 px-2 py-0.5 rounded-full border border-orange-400/20">À vérifier</span> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-lg font-semibold">Mme Jourdan</span> | |
| <span class="text-xs text-white/45">Demain · 09:00</span> | |
| </div> | |
| <div class="space-y-1.5 mt-2"> | |
| <div class="flex items-start gap-2 text-xs text-white/65"> | |
| <i data-lucide="map-pin" class="w-3.5 h-3.5 mt-0.5 text-emerald-400 shrink-0"></i> | |
| <span class="truncate">18 chemin de Nicol, 31200 Toulouse</span> | |
| </div> | |
| <div class="flex items-start gap-2 text-xs text-white/65"> | |
| <i data-lucide="flag" class="w-3.5 h-3.5 mt-0.5 text-orange-400 shrink-0"></i> | |
| <span class="truncate">Clinique Pasteur, 45 avenue de Lombez, 31300 Toulouse</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-xl font-bold">32 €</span> | |
| <span class="text-xs text-white/45">Reste 14h</span> | |
| </div> | |
| <div class="w-full h-1 bg-white/10 rounded-full mb-4 overflow-hidden"> | |
| <div class="h-full bg-emerald-500 rounded-full progress-bar" style="width: 10%"></div> | |
| </div> | |
| <div class="flex gap-2 mb-3"> | |
| <button onclick="openCallModal('Mme Jourdan', '06 34 56 78 90')" class="flex-1 flex items | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |