Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TIE - Mes chauffeurs</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| tie: { | |
| beige: '#F5F1E8', | |
| gray: '#E8E6E1', | |
| anthracite: '#2C2C2C', | |
| green: '#28665A', | |
| lightgreen: '#E8F3F1' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-tie-beige min-h-screen"> | |
| <!-- Header Component --> | |
| <custom-header></custom-header> | |
| <main class="container mx-auto px-4 py-8 max-w-md"> | |
| <!-- Page Title Section --> | |
| <div class="mb-12"> | |
| <h1 class="text-3xl font-light text-tie-anthracite">Votre chauffeur</h1> | |
| <p class="text-tie-anthracite/60 mt-2">Un bon feeling, ça se garde.</p> | |
| </div> | |
| <!-- Single Driver Card --> | |
| <div class="bg-white p-8 rounded-2xl shadow-sm border border-tie-gray/30"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <div class="flex items-center"> | |
| <h2 class="text-2xl font-light text-tie-anthracite">Jean Dupont</h2> | |
| <span class="ml-3 px-2.5 py-1 bg-tie-lightgreen text-tie-green text-xs rounded-full">🟢 En ligne</span> | |
| </div> | |
| <p class="text-tie-anthracite/60 mt-2">Chauffeur VTC</p> | |
| <p class="text-tie-anthracite/40 text-sm mt-3">Répond généralement en moins de 2 minutes</p> | |
| </div> | |
| <button class="p-2.5 text-tie-anthracite/50 hover:text-tie-anthracite rounded-full hover:bg-tie-gray/20 transition"> | |
| <i data-feather="phone"></i> | |
| </button> | |
| </div> | |
| <button class="mt-6 w-full bg-tie-anthracite text-white py-3.5 rounded-lg hover:bg-tie-anthracite/90 transition text-lg font-light"> | |
| Demander une course | |
| </button> | |
| </div> | |
| <!-- Secondary CTA --> | |
| <div class="mt-6 text-center"> | |
| <a href="#" class="inline-block text-tie-anthracite/60 hover:text-tie-anthracite text-sm font-light"> | |
| + New feeling | |
| </a> | |
| </div> | |
| </main> | |
| <style> | |
| .container { | |
| max-width: 420px; | |
| } | |
| </style> | |
| <!-- Components --> | |
| <script src="components/header.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |