KEXEL/git
0
1<!DOCTYPE html>2<html lang="pt">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>FoodExpress - Livraison de repas à domicile</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">9 <style>10 /* Custom CSS for animations and specific elements */11 .dish-card:hover {12 transform: translateY(-5px);13 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);14 }15 16 .restaurant-card:hover img {17 transform: scale(1.05);18 }19 20 .cart-item-enter {21 animation: slideIn 0.3s forwards;22 }23 24 .cart-item-exit {25 animation: slideOut 0.3s forwards;26 }27 28 @keyframes slideIn {29 from { transform: translateX(100%); opacity: 0; }30 to { transform: translateX(0); opacity: 1; }31 }32 33 @keyframes slideOut {34 from { transform: translateX(0); opacity: 1; }35 to { transform: translateX(100%); opacity: 0; }36 }37 38 .tab-content {39 display: none;40 }41 42 .tab-content.active {43 display: block;44 animation: fadeIn 0.5s;45 }46 47 @keyframes fadeIn {48 from { opacity: 0; }49 to { opacity: 1; }50 }51 52 /* Custom scrollbar */53 ::-webkit-scrollbar {54 width: 8px;55 }56 57 ::-webkit-scrollbar-track {58 background: #f1f1f1;59 }60 61 ::-webkit-scrollbar-thumb {62 background: #888;63 border-radius: 4px;64 }65 66 ::-webkit-scrollbar-thumb:hover {67 background: #555;68 }69 </style>70</head>71<body class="bg-gray-50 font-sans">72 <!-- Header -->73 <header class="bg-white shadow-md sticky top-0 z-50">74 <div class="container mx-auto px-4 py-3 flex justify-between items-center">75 <div class="flex items-center">76 <i class="fas fa-utensils text-orange-500 text-2xl mr-2"></i>77 <h1 class="text-xl font-bold text-gray-800">Food<span class="text-orange-500">Express</span></h1>78 </div>79 80 <div class="hidden md:flex space-x-6">81 <a href="#home" class="text-gray-700 hover:text-orange-500 transition">Accueil</a>82 <a href="#restaurants" class="text-gray-700 hover:text-orange-500 transition">Restaurants</a>83 <a href="#popular" class="text-gray-700 hover:text-orange-500 transition">Plats populaires</a>84 <a href="#categories" class="text-gray-700 hover:text-orange-500 transition">Catégories</a>85 </div>86 87 <div class="flex items-center space-x-4">88 <button id="cart-btn" class="relative text-gray-700 hover:text-orange-500">89 <i class="fas fa-shopping-cart text-xl"></i>90 <span id="cart-count" class="absolute -top-2 -right-2 bg-orange-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>91 </button>92 93 <button id="auth-btn" class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-full transition">94 <i class="fas fa-user mr-2"></i>Connexion95 </button>96 97 <button id="mobile-menu-btn" class="md:hidden text-gray-700">98 <i class="fas fa-bars text-xl"></i>99 </button>100 </div>101 </div>102 103 <!-- Mobile menu -->104 <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg absolute w-full px-4 py-2">105 <a href="#home" class="block py-2 text-gray-700 hover:text-orange-500 transition">Accueil</a>106 <a href="#restaurants" class="block py-2 text-gray-700 hover:text-orange-500 transition">Restaurants</a>107 <a href="#popular" class="block py-2 text-gray-700 hover:text-orange-500 transition">Plats populaires</a>108 <a href="#categories" class="block py-2 text-gray-700 hover:text-orange-500 transition">Catégories</a>109 </div>110 </header>111 112 <!-- Hero Section -->113 <section id="home" class="bg-gradient-to-r from-orange-400 to-orange-600 text-white py-16">114 <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">115 <div class="md:w-1/2 mb-8 md:mb-0">116 <h2 class="text-4xl md:text-5xl font-bold mb-4">Vos plats préférés, livrés chez vous</h2>117 <p class="text-xl mb-6">Commandez en quelques clics parmi des centaines de restaurants locaux.</p>118 <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">119 <button class="bg-white text-orange-500 hover:bg-gray-100 px-6 py-3 rounded-full font-semibold transition">120 <i class="fas fa-utensils mr-2"></i>Commander maintenant121 </button>122 <button class="border-2 border-white text-white hover:bg-white hover:text-orange-500 px-6 py-3 rounded-full font-semibold transition">123 <i class="fas fa-store mr-2"></i>Découvrir les restaurants124 </button>125 </div>126 </div>127 <div class="md:w-1/2 flex justify-center">128 <img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 129 alt="Plats de nourriture" class="rounded-lg shadow-xl w-full max-w-md">130 </div>131 </div>132 </section>133 134 <!-- Popular Dishes Section -->135 <section id="popular" class="py-12 bg-white">136 <div class="container mx-auto px-4">137 <div class="flex justify-between items-center mb-8">138 <h2 class="text-3xl font-bold text-gray-800">Plats <span class="text-orange-500">Populaires</span></h2>139 <a href="#" class="text-orange-500 hover:text-orange-600 font-medium">Voir tout <i class="fas fa-arrow-right ml-1"></i></a>140 </div>141 142 <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">143 <!-- Dish 1 -->144 <div class="dish-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">145 <div class="relative">146 <img src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1398&q=80" 147 alt="Burger" class="w-full h-48 object-cover">148 <span class="absolute top-2 right-2 bg-orange-500 text-white text-xs px-2 py-1 rounded-full">Populaire</span>149 </div>150 <div class="p-4">151 <div class="flex justify-between items-start mb-2">152 <h3 class="font-bold text-lg text-gray-800">Burger Gourmet</h3>153 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">4.8 <i class="fas fa-star"></i></span>154 </div>155 <p class="text-gray-600 text-sm mb-3">Pain brioché, steak haché 180g, cheddar, oignons caramélisés</p>156 <div class="flex justify-between items-center">157 <span class="font-bold text-orange-500">12,90€</span>158 <button class="add-to-cart bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded-full text-sm transition" 159 data-id="1" data-name="Burger Gourmet" data-price="12.90" data-restaurant="Burger House">160 <i class="fas fa-plus mr-1"></i>Ajouter161 </button>162 </div>163 </div>164 </div>165 166 <!-- Dish 2 -->167 <div class="dish-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">168 <div class="relative">169 <img src="https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 170 alt="Pizza" class="w-full h-48 object-cover">171 </div>172 <div class="p-4">173 <div class="flex justify-between items-start mb-2">174 <h3 class="font-bold text-lg text-gray-800">Pizza Margherita</h3>175 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">4.6 <i class="fas fa-star"></i></span>176 </div>177 <p class="text-gray-600 text-sm mb-3">Sauce tomate, mozzarella, basilic frais, pâte fine</p>178 <div class="flex justify-between items-center">179 <span class="font-bold text-orange-500">14,50€</span>180 <button class="add-to-cart bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded-full text-sm transition" 181 data-id="2" data-name="Pizza Margherita" data-price="14.50" data-restaurant="Pizza Napoli">182 <i class="fas fa-plus mr-1"></i>Ajouter183 </button>184 </div>185 </div>186 </div>187 188 <!-- Dish 3 -->189 <div class="dish-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">190 <div class="relative">191 <img src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1398&q=80" 192 alt="Sushi" class="w-full h-48 object-cover">193 <span class="absolute top-2 right-2 bg-orange-500 text-white text-xs px-2 py-1 rounded">Nouveau</span>194 </div>195 <div class="p-4">196 <div class="flex justify-between items-start mb-2">197 <h3 class="font-bold text-lg text-gray-800">Assortiment Sushi</h3>198 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">4.9 <i class="fas fa-star"></i></span>199 </div>200 <p class="text-gray-600 text-sm mb-3">12 pièces: 4 nigiri, 4 maki, 4 sashimi, accompagnement</p>201 <div class="flex justify-between items-center">202 <span class="font-bold text-orange-500">18,90€</span>203 <button class="add-to-cart bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded-full text-sm transition" 204 data-id="3" data-name="Assortiment Sushi" data-price="18.90" data-restaurant="Sushi Palace">205 <i class="fas fa-plus mr-1"></i>Ajouter206 </button>207 </div>208 </div>209 </div>210 211 <!-- Dish 4 -->212 <div class="dish-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">213 <div class="relative">214 <img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" 215 alt="Poulet" class="w-full h-48 object-cover">216 </div>217 <div class="p-4">218 <div class="flex justify-between items-start mb-2">219 <h3 class="font-bold text-lg text-gray-800">Poulet rôti</h3>220 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">4.7 <i class="fas fa-star"></i></span>221 </div>222 <p class="text-gray-600 text-sm mb-3">Poulet fermier rôti, accompagnement au choix, sauce</p>223 <div class="flex justify-between items-center">224 <span class="font-bold text-orange-500">15,50€</span>225 <button class="add-to-cart bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded-full text-sm transition" 226 data-id="4" data-name="Poulet rôti" data-price="15.50" data-restaurant="Le Poulet Doré">227 <i class="fas fa-plus mr-1"></i>Ajouter228 </button>229 </div>230 </div>231 </div>232 </div>233 </div>234 </section>235 236 <!-- Restaurants Section -->237 <section id="restaurants" class="py-12 bg-gray-50">238 <div class="container mx-auto px-4">239 <div class="flex justify-between items-center mb-8">240 <h2 class="text-3xl font-bold text-gray-800">Nos <span class="text-orange-500">Restaurants</span></h2>241 <a href="#" class="text-orange-500 hover:text-orange-600 font-medium">Voir tout <i class="fas fa-arrow-right ml-1"></i></a>242 </div>243 244 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">245 <!-- Restaurant 1 -->246 <div class="restaurant-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">247 <div class="relative overflow-hidden h-48">248 <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" 249 alt="Burger House" class="w-full h-full object-cover transition duration-500">250 <span class="absolute top-2 left-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">Ouvert</span>251 </div>252 <div class="p-4">253 <div class="flex justify-between items-start mb-2">254 <h3 class="font-bold text-lg text-gray-800">Burger House</h3>255 <div class="flex items-center">256 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">4.8 <i class="fas fa-star"></i></span>257 <span class="text-gray-500 text-sm ml-2">(124 avis)</span>258 </div>259 </div>260 <p class="text-gray-600 text-sm mb-3">Spécialités de burgers gourmets avec des ingrédients frais</p>261 <div class="flex justify-between items-center">262 <div class="flex items-center text-sm text-gray-500">263 <i class="fas fa-clock mr-1"></i> 10-22h264 </div>265 <a href="#restaurant-burger-house" class="text-orange-500 hover:text-orange-600 font-medium text-sm">266 Voir le menu <i class="fas fa-arrow-right ml-1"></i>267 </a>268 </div>269 </div>270 </div>271 272 <!-- Restaurant 2 -->273 <div class="restaurant-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">274 <div class="relative overflow-hidden h-48">275 <img src="https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 276 alt="Pizza Napoli" class="w-full h-full object-cover transition duration-500">277 <span class="absolute top-2 left-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">Ouvert</span>278 </div>279 <div class="p-4">280 <div class="flex justify-between items-start mb-2">281 <h3 class="font-bold text-lg text-gray-800">Pizza Napoli</h3>282 <div class="flex items-center">283 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">4.6 <i class="fas fa-star"></i></span>284 <span class="text-gray-500 text-sm ml-2">(98 avis)</span>285 </div>286 </div>287 <p class="text-gray-600 text-sm mb-3">Pizzas traditionnelles napolitaines au feu de bois</p>288 <div class="flex justify-between items-center">289 <div class="flex items-center text-sm text-gray-500">290 <i class="fas fa-clock mr-1"></i> 11-23h291 </div>292 <a href="#restaurant-pizza-napoli" class="text-orange-500 hover:text-orange-600 font-medium text-sm">293 Voir le menu <i class="fas fa-arrow-right ml-1"></i>294 </a>295 </div>296 </div>297 </div>298 299 <!-- Restaurant 3 -->300 <div class="restaurant-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">301 <div class="relative overflow-hidden h-48">302 <img src="https://images.unsplash.com/photo-1579871494447-9811cf80d66c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 303 alt="Sushi Palace" class="w-full h-full object-cover transition duration-500">304 <span class="absolute top-2 left-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">Ouvert</span>305 </div>306 <div class="p-4">307 <div class="flex justify-between items-start mb-2">308 <h3 class="font-bold text-lg text-gray-800">Sushi Palace</h3>309 <div class="flex items-center">310 <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">4.9 <i class="fas fa-star"></i></span>311 <span class="text-gray-500 text-sm ml-2">(156 avis)</span>312 </div>313 </div>314 <p class="text-gray-600 text-sm mb-3">Spécialités japonaises et sushis préparés à la commande</p>315 <div class="flex justify-between items-center">316 <div class="flex items-center text-sm text-gray-500">317 <i class="fas fa-clock mr-1"></i> 12-22h318 </div>319 <a href="#restaurant-sushi-palace" class="text-orange-500 hover:text-orange-600 font-medium text-sm">320 Voir le menu <i class="fas fa-arrow-right ml-1"></i>321 </a>322 </div>323 </div>324 </div>325 </div>326 </div>327 </section>328 329 <!-- Categories Section -->330 <section id="categories" class="py-12 bg-white">331 <div class="container mx-auto px-4">332 <h2 class="text-3xl font-bold text-gray-800 mb-8">Parcourir par <span class="text-orange-500">Catégories</span></h2>333 334 <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">335 <!-- Category 1 -->336 <a href="#" class="category-card bg-gray-50 rounded-lg p-4 text-center hover:bg-orange-50 transition duration-300 border border-gray-200 hover:border-orange-200">337 <div class="bg-orange-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">338 <i class="fas fa-hamburger text-orange-500 text-2xl"></i>339 </div>340 <h3 class="font-medium text-gray-800">Burgers</h3>341 <p class="text-xs text-gray-500">56 plats</p>342 </a>343 344 <!-- Category 2 -->345 <a href="#" class="category-card bg-gray-50 rounded-lg p-4 text-center hover:bg-orange-50 transition duration-300 border border-gray-200 hover:border-orange-200">346 <div class="bg-orange-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">347 <i class="fas fa-pizza-slice text-orange-500 text-2xl"></i>348 </div>349 <h3 class="font-medium text-gray-800">Pizzas</h3>350 <p class="text-xs text-gray-500">42 plats</p>351 </a>352 353 <!-- Category 3 -->354 <a href="#" class="category-card bg-gray-50 rounded-lg p-4 text-center hover:bg-orange-50 transition duration-300 border border-gray-200 hover:border-orange-200">355 <div class="bg-orange-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">356 <i class="fas fa-fish text-orange-500 text-2xl"></i>357 </div>358 <h3 class="font-medium text-gray-800">Sushi</h3>359 <p class="text-xs text-gray-500">38 plats</p>360 </a>361 362 <!-- Category 4 -->363 <a href="#" class="category-card bg-gray-50 rounded-lg p-4 text-center hover:bg-orange-50 transition duration-300 border border-gray-200 hover:border-orange-200">364 <div class="bg-orange-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">365 <i class="fas fa-drumstick-bite text-orange-500 text-2xl"></i>366 </div>367 <h3 class="font-medium text-gray-800">Poulet</h3>368 <p class="text-xs text-gray-500">27 plats</p>369 </a>370 371 <!-- Category 5 -->372 <a href="#" class="category-card bg-gray-50 rounded-lg p-4 text-center hover:bg-orange-50 transition duration-300 border border-gray-200 hover:border-orange-200">373 <div class="bg-orange-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">374 <i class="fas fa-ice-cream text-orange-500 text-2xl"></i>375 </div>376 <h3 class="font-medium text-gray-800">Desserts</h3>377 <p class="text-xs text-gray-500">35 plats</p>378 </a>379 380 <!-- Category 6 -->381 <a href="#" class="category-card bg-gray-50 rounded-lg p-4 text-center hover:bg-orange-50 transition duration-300 border border-gray-200 hover:border-orange-200">382 <div class="bg-orange-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">383 <i class="fas fa-coffee text-orange-500 text-2xl"></i>384 </div>385 <h3 class="font-medium text-gray-800">Boissons</h3>386 <p class="text-xs text-gray-500">48 plats</p>387 </a>388 </div>389 </div>390 </section>391 392 <!-- How It Works Section -->393 <section class="py-12 bg-gray-50">394 <div class="container mx-auto px-4">395 <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Comment <span class="text-orange-500">ça marche</span></h2>396 397 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">398 <!-- Step 1 -->399 <div class="text-center">400 <div class="bg-orange-500 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-4 text-white text-2xl font-bold">1</div>401 <h3 class="font-bold text-xl text-gray-800 mb-2">Choisissez un restaurant</h3>402 <p class="text-gray-600">Parcourez notre sélection de restaurants locaux et choisissez celui qui vous fait envie.</p>403 </div>404 405 <!-- Step 2 -->406 <div class="text-center">407 <div class="bg-orange-500 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-4 text-white text-2xl font-bold">2</div>408 <h3 class="font-bold text-xl text-gray-800 mb-2">Composez votre menu</h3>409 <p class="text-gray-600">Sélectionnez vos plats préférés et ajoutez-les à votre panier.</p>410 </div>411 412 <!-- Step 3 -->413 <div class="text-center">414 <div class="bg-orange-500 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-4 text-white text-2xl font-bold">3</div>415 <h3 class="font-bold text-xl text-gray-800 mb-2">Livraison ou à emporter</h3>416 <p class="text-gray-600">Choisissez la livraison à domicile ou le retrait sur place et régalez-vous !</p>417 </div>418 </div>419 </div>420 </section>421 422 <!-- Download App Section -->423 <section class="py-12 bg-orange-500 text-white">424 <div class="container mx-auto px-4">425 <div class="flex flex-col md:flex-row items-center">426 <div class="md:w-1/2 mb-8 md:mb-0">427 <h2 class="text-3xl font-bold mb-4">Téléchargez notre application</h2>428 <p class="text-xl mb-6">Commandez encore plus facilement avec l'application FoodExpress. Disponible sur iOS et Android.</p>429 <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">430 <button class="bg-black hover:bg-gray-800 text-white px-6 py-3 rounded-lg font-semibold transition flex items-center justify-center">431 <i class="fab fa-apple text-2xl mr-2"></i>432 <div class="text-left">433 <div class="text-xs">Télécharger sur</div>434 <div class="text-lg">App Store</div>435 </div>436 </button>437 <button class="bg-black hover:bg-gray-800 text-white px-6 py-3 rounded-lg font-semibold transition flex items-center justify-center">438 <i class="fab fa-google-play text-2xl mr-2"></i>439 <div class="text-left">440 <div class="text-xs">Disponible sur</div>441 <div class="text-lg">Google Play</div>442 </div>443 </button>444 </div>445 </div>446 <div class="md:w-1/2 flex justify-center">447 <img src="https://cdn.pixabay.com/photo/2017/01/22/12/07/imac-1999636_1280.png" 448 alt="Application mobile" class="w-full max-w-md">449 </div>450 </div>451 </div>452 </section>453 454 <!-- Footer -->455 <footer class="bg-gray-800 text-white py-12">456 <div class="container mx-auto px-4">457 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">458 <div>459 <div class="flex items-center mb-4">460 <i class="fas fa-utensils text-orange-500 text-2xl mr-2"></i>461 <h3 class="text-xl font-bold">Food<span class="text-orange-500">Express</span></h3>462 </div>463 <p class="text-gray-400 mb-4">Vos plats préférés, livrés chez vous en un clin d'œil.</p>464 <div class="flex space-x-4">465 <a href="#" class="text-gray-400 hover:text-orange-500 transition"><i class="fab fa-facebook-f"></i></a>466 <a href="#" class="text-gray-400 hover:text-orange-500 transition"><i class="fab fa-twitter"></i></a>467 <a href="#" class="text-gray-400 hover:text-orange-500 transition"><i class="fab fa-instagram"></i></a>468 <a href="#" class="text-gray-400 hover:text-orange-500 transition"><i class="fab fa-linkedin-in"></i></a>469 </div>470 </div>471 472 <div>473 <h4 class="text-lg font-semibold mb-4">Liens utiles</h4>474 <ul class="space-y-2">475 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">Accueil</a></li>476 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">Restaurants</a></li>477 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">Plats populaires</a></li>478 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">Catégories</a></li>479 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">Mon compte</a></li>480 </ul>481 </div>482 483 <div>484 <h4 class="text-lg font-semibold mb-4">Informations</h4>485 <ul class="space-y-2">486 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">À propos</a></li>487 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">Contact</a></li>488 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">Blog</a></li>489 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">Carrières</a></li>490 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition">Presse</a></li>491 </ul>492 </div>493 494 <div>495 <h4 class="text-lg font-semibold mb-4">Contact</h4>496 <ul class="space-y-2">497 <li class="flex items-center text-gray-400"><i class="fas fa-map-marker-alt mr-2 text-orange-500"></i> 123 Rue de la Gastronomie, Paris</li>498 <li class="flex items-center text-gray-400"><i class="fas fa-phone-alt mr-2 text-orange-500"></i> +33 1 23 45 67 89</li>499 <li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2 text-orange-500"></i> contact@foodexpress.com</li>500 </ul>501 </div>502 </div>503 504 <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">505 <p class="text-gray-400 mb-4 md:mb-0">© 2023 FoodExpress. Tous droits réservés.</p>506 <div class="flex space-x-6">507 <a href="#" class="text-gray-400 hover:text-orange-500 transition">Conditions générales</a>508 <a href="#" class="text-gray-400 hover:text-orange-500 transition">Politique de confidentialité</a>509 <a href="#" class="text-gray-400 hover:text-orange-500 transition">Cookies</a>510 </div>511 </div>512 </div>513 </footer>514 515 <!-- Shopping Cart Sidebar -->516 <div id="cart-sidebar" class="fixed top-0 right-0 w-full sm:w-96 h-full bg-white shadow-lg transform translate-x-full transition-transform duration-300 z-50 overflow-y-auto">517 <div class="p-6">518 <div class="flex justify-between items-center mb-6">519 <h3 class="text-xl font-bold text-gray-800">Votre panier</h3>520 <button id="close-cart" class="text-gray-500 hover:text-orange-500">521 <i class="fas fa-times text-xl"></i>522 </button>523 </div>524 525 <div id="cart-items" class="space-y-4 mb-6">526 <!-- Cart items will be added here dynamically -->527 <div class="text-center py-8 text-gray-500">528 <i class="fas fa-shopping-cart text-4xl mb-2"></i>529 <p>Votre panier est vide</p>530 </div>531 </div>532 533 <div class="border-t border-gray-200 pt-4 mb-4">534 <div class="flex justify-between mb-2">535 <span class="text-gray-600">Sous-total</span>536 <span id="cart-subtotal" class="font-medium">0,00€</span>537 </div>538 <div class="flex justify-between mb-2">539 <span class="text-gray-600">Frais de livraison</span>540 <span id="delivery-fee" class="font-medium">2,99€</span>541 </div>542 <div class="flex justify-between text-lg font-bold">543 <span>Total</span>544 <span id="cart-total">2,99€</span>545 </div>546 </div>547 548 <button id="checkout-btn" class="w-full bg-orange-500 hover:bg-orange-600 text-white py-3 rounded-lg font-semibold transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>549 Valider la commande550 </button>551 </div>552 </div>553 554 <!-- Overlay for cart and modals -->555 <div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>556 557 <!-- Auth Modal -->558 <div id="auth-modal" class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-xl z-50 w-full max-w-md hidden">559 <div class="p-6">560 <div class="flex justify-between items-center mb-6">561 <h3 class="text-xl font-bold text-gray-800">Connexion / Inscription</h3>562 <button id="close-auth" class="text-gray-500 hover:text-orange-500">563 <i class="fas fa-times text-xl"></i>564 </button>565 </div>566 567 <div class="flex border-b mb-6">568 <button id="login-tab" class="tab-btn py-2 px-4 font-medium text-orange-500 border-b-2 border-orange-500">Connexion</button>569 <button id="register-tab" class="tab-btn py-2 px-4 font-medium text-gray-500">Inscription</button>570 </div>571 572 <div id="login-content" class="tab-content active">573 <form id="login-form" class="space-y-4">574 <div>575 <label for="login-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>576 <input type="email" id="login-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-orange-500 focus:border-orange-500" required>577 </div>578 <div>579 <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>580 <input type="password" id="login-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-orange-500 focus:border-orange-500" required>581 </div>582 <div class="flex items-center justify-between">583 <div class="flex items-center">584 <input type="checkbox" id="remember-me" class="h-4 w-4 text-orange-500 focus:ring-orange-500 border-gray-300 rounded">585 <label for="remember-me" class="ml-2 block text-sm text-gray-700">Se souvenir de moi</label>586 </div>587 <a href="#" class="text-sm text-orange-500 hover:text-orange-600">Mot de passe oublié?</a>588 </div>589 <button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded-lg font-medium transition">590 Se connecter591 </button>592 </form>593 </div>594 595 <div id="register-content" class="tab-content">596 <form id="register-form" class="space-y-4">597 <div>598 <label for="register-name" class="block text-sm font-medium text-gray-700 mb-1">Nom complet</label>599 <input type="text" id="register-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-orange-500 focus:border-orange-500" required>600 </div>601 <div>602 <label for="register-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>603 <input type="email" id="register-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-orange-500 focus:border-orange-500" required>604 </div>605 <div>606 <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>607 <input type="password" id="register-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-orange-500 focus:border-orange-500" required>608 </div>609 <div>610 <label for="register-confirm" class="block text-sm font-medium text-gray-700 mb-1">Confirmer le mot de passe</label>611 <input type="password" id="register-confirm" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-orange-500 focus:border-orange-500" required>612 </div>613 <div class="flex items-center">614 <input type="checkbox" id="terms" class="h-4 w-4 text-orange-500 focus:ring-orange-500 border-gray-300 rounded" required>615 <label for="terms" class="ml-2 block text-sm text-gray-700">J'accepte les <a href="#" class="text-orange-500 hover:text-orange-600">conditions générales</a></label>616 </div>617 <button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded-lg font-medium transition">618 S'inscrire619 </button>620 </form>621 </div>622 </div>623 </div>624 625 <!-- Admin Panel (hidden by default) -->626 <div id="admin-panel" class="fixed inset-0 bg-gray-100 z-50 hidden overflow-y-auto">627 <div class="min-h-screen">628 <!-- Admin Header -->629 <header class="bg-gray-800 text-white shadow">630 <div class="container mx-auto px-4 py-3 flex justify-between items-center">631 <div class="flex items-center">632 <i class="fas fa-user-shield text-orange-500 text-2xl mr-2"></i>633 <h1 class="text-xl font-bold">Admin <span class="text-orange-500">Panel</span></h1>634 </div>635 636 <div class="flex items-center space-x-4">637 <button id="admin-logout" class="text-white hover:text-orange-300 transition">638 <i class="fas fa-sign-out-alt mr-1"></i> Déconnexion639 </button>640 <button id="close-admin" class="text-white hover:text-orange-300">641 <i class="fas fa-times text-xl"></i>642 </button>643 </div>644 </div>645 </header>646 647 <!-- Admin Navigation -->648 <nav class="bg-white shadow-md">649 <div class="container mx-auto px-4">650 <div class="flex overflow-x-auto">651 <button data-tab="dashboard" class="admin-tab px-4 py-3 font-medium text-gray-700 hover:text-orange-500 border-b-2 border-transparent hover:border-orange-500 transition whitespace-nowrap">652 <i class="fas fa-tachometer-alt mr-2"></i> Tableau de bord653 </button>654 <button data-tab="restaurants" class="admin-tab px-4 py-3 font-medium text-gray-700 hover:text-orange-500 border-b-2 border-transparent hover:border-orange-500 transition whitespace-nowrap">655 <i class="fas fa-store mr-2"></i> Restaurants656 </button>657 <button data-tab="dishes" class="admin-tab px-4 py-3 font-medium text-gray-700 hover:text-orange-500 border-b-2 border-transparent hover:border-orange-500 transition whitespace-nowrap">658 <i class="fas fa-utensils mr-2"></i> Plats659 </button>660 <button data-tab="orders" class="admin-tab px-4 py-3 font-medium text-gray-700 hover:text-orange-500 border-b-2 border-transparent hover:border-orange-500 transition whitespace-nowrap">661 <i class="fas fa-clipboard-list mr-2"></i> Commandes662 </button>663 <button data-tab="users" class="admin-tab px-4 py-3 font-medium text-gray-700 hover:text-orange-500 border-b-2 border-transparent hover:border-orange-500 transition whitespace-nowrap">664 <i class="fas fa-users mr-2"></i> Utilisateurs665 </button>666 <button data-tab="settings" class="admin-tab px-4 py-3 font-medium text-gray-700 hover:text-orange-500 border-b-2 border-transparent hover:border-orange-500 transition whitespace-nowrap">667 <i class="fas fa-cog mr-2"></i> Paramètres668 </button>669 </div>670 </div>671 </nav>672 673 <!-- Admin Content -->674 <main class="container mx-auto px-4 py-6">675 <!-- Dashboard Tab -->676 <div id="dashboard-content" class="admin-tab-content active">677 <h2 class="text-2xl font-bold text-gray-800 mb-6">Tableau de bord</h2>678 679 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">680 <div class="bg-white rounded-lg shadow p-6">681 <div class="flex items-center">682 <div class="p-3 rounded-full bg-orange-100 text-orange-500 mr-4">683 <i class="fas fa-store text-xl"></i>684 </div>685 <div>686 <p class="text-gray-500">Restaurants</p>687 <p class="text-2xl font-bold">24</p>688 </div>689 </div>690 </div>691 692 <div class="bg-white rounded-lg shadow p-6">693 <div class="flex items-center">694 <div class="p-3 rounded-full bg-blue-100 text-blue-500 mr-4">695 <i class="fas fa-utensils text-xl"></i>696 </div>697 <div>698 <p class="text-gray-500">Plats</p>699 <p class="text-2xl font-bold">156</p>700 </div>701 </div>702 </div>703 704 <div class="bg-white rounded-lg shadow p-6">705 <div class="flex items-center">706 <div class="p-3 rounded-full bg-green-100 text-green-500 mr-4">707 <i class="fas fa-clipboard-list text-xl"></i>708 </div>709 <div>710 <p class="text-gray-500">Commandes (30j)</p>711 <p class="text-2xl font-bold">1,248</p>712 </div>713 </div>714 </div>715 716 <div class="bg-white rounded-lg shadow p-6">717 <div class="flex items-center">718 <div class="p-3 rounded-full bg-purple-100 text-purple-500 mr-4">719 <i class="fas fa-users text-xl"></i>720 </div>721 <div>722 <p class="text-gray-500">Utilisateurs</p>723 <p class="text-2xl font-bold">3,456</p>724 </div>725 </div>726 </div>727 </div>728 729 <div class="bg-white rounded-lg shadow p-6 mb-8">730 <h3 class="text-lg font-semibold text-gray-800 mb-4">Commandes récentes</h3>731 <div class="overflow-x-auto">732 <table class="min-w-full divide-y divide-gray-200">733 <thead class="bg-gray-50">734 <tr>735 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">N° Commande</th>736 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>737 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Restaurant</th>738 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th>739 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>740 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>741 </tr>742 </thead>743 <tbody class="bg-white divide-y divide-gray-200">744 <tr>745 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-78945</td>746 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jean Dupont</td>747 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Burger House</td>748 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25,90€</td>749 <td class="px-6 py-4 whitespace-nowrap">750 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Livré</span>751 </td>752 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12/06/2023</td>753 </tr>754 <tr>755 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-78944</td>756 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Marie Martin</td>757 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Pizza Napoli</td>758 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">32,50€</td>759 <td class="px-6 py-4 whitespace-nowrap">760 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">En cours</span>761 </td>762 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12/06/2023</td>763 </tr>764 <tr>765 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-78943</td>766 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Thomas Leroy</td>767 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sushi Palace</td>768 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">45,20€</td>769 <td class="px-6 py-4 whitespace-nowrap">770 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">En préparation</span>771 </td>772 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">11/06/2023</td>773 </tr>774 </tbody>775 </table>776 </div>777 </div>778 </div>779 780 <!-- Restaurants Tab -->781 <div id="restaurants-content" class="admin-tab-content">782 <div class="flex justify-between items-center mb-6">783 <h2 class="text-2xl font-bold text-gray-800">Gestion des restaurants</h2>784 <button id="add-restaurant" class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-lg transition">785 <i class="fas fa-plus mr-2"></i> Ajouter un restaurant786 </button>787 </div>788 789 <div class="bg-white rounded-lg shadow overflow-hidden mb-8">790 <div class="overflow-x-auto">791 <table class="min-w-full divide-y divide-gray-200">792 <thead class="bg-gray-50">793 <tr>794 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th>795 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Catégorie</th>796 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Note</th>797 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>798 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>799 </tr>800 </thead>801 <tbody class="bg-white divide-y divide-gray-200">802 <tr>803 <td class="px-6 py-4 whitespace-nowrap">804 <div class="flex items-center">805 <div class="flex-shrink-0 h-10 w-10">806 <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="">807 </div>808 <div class="ml-4">809 <div class="text-sm font-medium text-gray-900">Burger House</div>810 <div class="text-sm text-gray-500">123 Rue des Burgers</div>811 </div>812 </div>813 </td>814 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Fast-food</td>815 <td class="px-6 py-4 whitespace-nowrap">816 <div class="flex items-center">817 <i class="fas fa-star text-yellow-400 mr-1"></i>818 <span>4.8</span>819 </div>820 </td>821 <td class="px-6 py-4 whitespace-nowrap">822 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Actif</span>823 </td>824 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">825 <button class="text-orange-600 hover:text-orange-900 mr-3"><i class="fas fa-edit"></i></button>826 <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button>827 </td>828 </tr>829 <tr>830 <td class="px-6 py-4 whitespace-nowrap">831 <div class="flex items-center">832 <div class="flex-shrink-0 h-10 w-10">833 <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="">834 </div>835 <div class="ml-4">836 <div class="text-sm font-medium text-gray-900">Pizza Napoli</div>837 <div class="text-sm text-gray-500">456 Avenue des Pizzas</div>838 </div>839 </div>840 </td>841 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Italien</td>842 <td class="px-6 py-4 whitespace-nowrap">843 <div class="flex items-center">844 <i class="fas fa-star text-yellow-400 mr-1"></i>845 <span>4.6</span>846 </div>847 </td>848 <td class="px-6 py-4 whitespace-nowrap">849 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Actif</span>850 </td>851 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">852 <button class="text-orange-600 hover:text-orange-900 mr-3"><i class="fas fa-edit"></i></button>853 <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button>854 </td>855 </tr>856 <tr>857 <td class="px-6 py-4 whitespace-nowrap">858 <div class="flex items-center">859 <div class="flex-shrink-0 h-10 w-10">860 <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1579871494447-9811cf80d66c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="">861 </div>862 <div class="ml-4">863 <div class="text-sm font-medium text-gray-900">Sushi Palace</div>864 <div class="text-sm text-gray-500">789 Boulevard des Sushis</div>865 </div>866 </div>867 </td>868 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Japonais</td>869 <td class="px-6 py-4 whitespace-nowrap">870 <div class="flex items-center">871 <i class="fas fa-star text-yellow-400 mr-1"></i>872 <span>4.9</span>873 </div>874 </td>875 <td class="px-6 py-4 whitespace-nowrap">876 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">En maintenance</span>877 </td>878 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">879 <button class="text-orange-600 hover:text-orange-900 mr-3"><i class="fas fa-edit"></i></button>880 <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button>881 </td>882 </tr>883 </tbody>884 </table>885 </div>886 </div>887 </div>888 889 <!-- Dishes Tab -->890 <div id="dishes-content" class="admin-tab-content">891 <div class="flex justify-between items-center mb-6">892 <h2 class="text-2xl font-bold text-gray-800">Gestion des plats</h2>893 <button id="add-dish" class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-lg transition">894 <i class="fas fa-plus mr-2"></i> Ajouter un plat895 </button>896 </div>897 898 <div class="bg-white rounded-lg shadow overflow-hidden mb-8">899 <div class="overflow-x-auto">900 <table class="min-w-full divide-y divide-gray-200">901 <thead class="bg-gray-50">902 <tr>903 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Image</th>904 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th>905 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Restaurant</th>906 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Catégorie</th>907 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prix</th>908 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>909 </tr>910 </thead>911 <tbody class="bg-white divide-y divide-gray-200">912 <tr>913 <td class="px-6 py-4 whitespace-nowrap">914 <img class="h-12 w-12 rounded object-cover" src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1398&q=80" alt="">915 </td>916 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Burger Gourmet</td>917 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Burger House</td>918 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Burgers</td>919 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12,90€</td>920 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">921 <button class="text-orange-600 hover:text-orange-900 mr-3"><i class="fas fa-edit"></i></button>922 <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button>923 </td>924 </tr>925 <tr>926 <td class="px-6 py-4 whitespace-nowrap">927 <img class="h-12 w-12 rounded object-cover" src="https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="">928 </td>929 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Pizza Margherita</td>930 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Pizza Napoli</td>931 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Pizzas</td>932 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">14,50€</td>933 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">934 <button class="text-orange-600 hover:text-orange-900 mr-3"><i class="fas fa-edit"></i></button>935 <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button>936 </td>937 </tr>938 <tr>939 <td class="px-6 py-4 whitespace-nowrap">940 <img class="h-12 w-12 rounded object-cover" src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1398&q=80" alt="">941 </td>942 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Assortiment Sushi</td>943 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sushi Palace</td>944 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sushi</td>945 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">18,90€</td>946 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">947 <button class="text-orange-600 hover:text-orange-900 mr-3"><i class="fas fa-edit"></i></button>948 <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button>949 </td>950 </tr>951 </tbody>952 </table>953 </div>954 </div>955 </div>956 957 <!-- Orders Tab -->958 <div id="orders-content" class="admin-tab-content">959 <h2 class="text-2xl font-bold text-gray-800 mb-6">Gestion des commandes</h2>960 961 <div class="bg-white rounded-lg shadow overflow-hidden mb-8">962 <div class="overflow-x-auto">963 <table class="min-w-full divide-y divide-gray-200">964 <thead class="bg-gray-50">965 <tr>966 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">N° Commande</th>967 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>968 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Restaurant</th>969 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th>970 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>971 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>972 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>973 </tr>974 </thead>975 <tbody class="bg-white divide-y divide-gray-200">976 <tr>977 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-78945</td>978 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jean Dupont</td>979 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Burger House</td>980 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25,90€</td>981 <td class="px-6 py-4 whitespace-nowrap">982 <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500 text-sm">983 <option selected>Livré</option>984 <option>En cours</option>985 <option>En préparation</option>986 <option>Annulé</option>987 </select>988 </td>989 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12/06/2023</td>990 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">991 <button class="text-orange-600 hover:text-orange-900 mr-3"><i class="fas fa-eye"></i></button>992 <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button>993 </td>994 </tr>995 <tr>996 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-78944</td>997 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Marie Martin</td>998 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Pizza Napoli</td>999 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">32,50€</td>1000 <td1001</html>1002