| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>TIE - Réservez votre chauffeur</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #f8f9fa; |
| } |
| .card-shadow { |
| box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05); |
| } |
| .driver-status-available { |
| color: #10b981; |
| } |
| .driver-status-busy { |
| color: #f59e0b; |
| } |
| .driver-status-unavailable { |
| color: #ef4444; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen pb-20"> |
| |
| <header class="bg-white p-4 flex justify-between items-center"> |
| <div> |
| <h1 class="text-xl font-medium">Bonjour Marie</h1> |
| <p class="text-sm text-gray-500">1 chauffeur disponible</p> |
| </div> |
| <div class="w-10 h-10 rounded-full bg-gray-200"></div> |
| </header> |
|
|
| <main class="container mx-auto px-4 mt-4"> |
| |
| <div class="bg-white rounded-xl p-6 card-shadow mb-6"> |
| <h2 class="text-lg font-medium mb-6">Planifier une course</h2> |
| |
| <div class="space-y-4"> |
| <div class="border-b pb-2"> |
| <p class="text-xs text-gray-500 mb-1">Départ</p> |
| <input type="text" placeholder="Adresse de départ" class="w-full text-lg focus:outline-none"> |
| </div> |
| |
| <div class="border-b pb-2"> |
| <p class="text-xs text-gray-500 mb-1">Arrivée</p> |
| <input type="text" placeholder="Adresse d'arrivée" class="w-full text-lg focus:outline-none"> |
| </div> |
| |
| <div class="flex justify-between items-center border-b pb-2"> |
| <div> |
| <p class="text-xs text-gray-500 mb-1">Quand ?</p> |
| <p class="text-lg">Flexible (au plus tôt)</p> |
| <p class="text-xs text-gray-500 mt-1">Heure confirmée après validation par le chauffeur</p> |
| </div> |
| <i data-lucide="chevron-right" class="text-gray-400"></i> |
| </div> |
| </div> |
| |
| <button class="w-full bg-emerald-600 text-white py-4 rounded-lg mt-6 font-medium"> |
| Continuer |
| </button> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl p-6 card-shadow"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-lg font-medium">Votre chauffeur</h2> |
| <button class="text-emerald-600 text-sm font-medium">Changer</button> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="w-16 h-16 rounded-full bg-gray-200 mr-4"></div> |
| <div class="flex-1"> |
| <p class="font-medium">Jean Dupont</p> |
| <p class="driver-status-available text-sm">Disponible</p> |
| </div> |
| <button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center"> |
| <i data-lucide="phone" class="text-emerald-600"></i> |
| </button> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <nav class="fixed bottom-0 left-0 right-0 bg-white border-t flex justify-around py-3"> |
| <button class="flex flex-col items-center text-emerald-600"> |
| <i data-lucide="home" class="w-6 h-6"></i> |
| <span class="text-xs mt-1">Accueil</span> |
| </button> |
| <button class="flex flex-col items-center text-gray-400"> |
| <i data-lucide="calendar" class="w-6 h-6"></i> |
| <span class="text-xs mt-1">Réservations</span> |
| </button> |
| <button class="flex flex-col items-center text-gray-400"> |
| <i data-lucide="users" class="w-6 h-6"></i> |
| <span class="text-xs mt-1">Chauffeurs</span> |
| </button> |
| <button class="flex flex-col items-center text-gray-400"> |
| <i data-lucide="menu" class="w-6 h-6"></i> |
| <span class="text-xs mt-1">Menu</span> |
| </button> |
| </nav> |
|
|
| <script> |
| lucide.createIcons(); |
| </script> |
| </body> |
| </html> |
