Hugging Face's logo

Spaces:
KEXEL
/
git
Running

App Files Community
KEXEL commited on
Commit
d167267
·
verified ·
1 Parent(s): c40bfa2

1.1

Browse files
Files changed (2) hide show
  1. foodexpress.html +1001 -0
  2. index.html +0 -19
foodexpress.html ADDED
@@ -0,0 +1,1001 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Connexion
95
+ </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 maintenant
121
+ </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 restaurants
124
+ </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>Ajouter
161
+ </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>Ajouter
183
+ </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>Ajouter
206
+ </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>Ajouter
228
+ </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-22h
264
+ </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-23h
291
+ </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-22h
318
+ </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 commande
550
+ </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 connecter
591
+ </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'inscrire
619
+ </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éconnexion
639
+ </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 bord
653
+ </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> Restaurants
656
+ </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> Plats
659
+ </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> Commandes
662
+ </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> Utilisateurs
665
+ </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ètres
668
+ </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 restaurant
786
+ </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 plat
895
+ </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
+ <td
1001
+ </html>
index.html DELETED
@@ -1,19 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>