Hugging Face's logo

Spaces:
infowebsi
/
recettes
Running

App Files Community
infowebsi commited on
Commit
ecfe9d8
·
verified ·
1 Parent(s): 7b82820

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +467 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Recettes
3
- emoji: 🏃
4
- colorFrom: pink
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: recettes
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,467 @@
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>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Chef's Companion - Vos recettes de cuisine</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
+ .recipe-card:hover .recipe-image {
11
+ transform: scale(1.05);
12
+ transition: transform 0.3s ease;
13
+ }
14
+ .recipe-image {
15
+ transition: transform 0.3s ease;
16
+ }
17
+ .category-btn.active {
18
+ background-color: #f59e0b;
19
+ color: white;
20
+ }
21
+ .drawer {
22
+ transition: transform 0.3s ease-in-out;
23
+ }
24
+ .drawer.closed {
25
+ transform: translateX(100%);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="bg-gray-50 font-sans">
30
+ <!-- Header -->
31
+ <header class="bg-white shadow-md sticky top-0 z-10">
32
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
33
+ <div class="flex items-center space-x-2">
34
+ <i class="fas fa-utensils text-2xl text-orange-500"></i>
35
+ <h1 class="text-xl font-bold text-gray-800">Chef's Companion</h1>
36
+ </div>
37
+ <div class="flex items-center space-x-4">
38
+ <button id="searchBtn" class="p-2 rounded-full hover:bg-gray-100">
39
+ <i class="fas fa-search text-gray-600"></i>
40
+ </button>
41
+ <button id="filterBtn" class="p-2 rounded-full hover:bg-gray-100">
42
+ <i class="fas fa-sliders-h text-gray-600"></i>
43
+ </button>
44
+ <button id="addRecipeBtn" class="bg-orange-500 text-white px-4 py-2 rounded-full hover:bg-orange-600 transition">
45
+ <i class="fas fa-plus mr-1"></i> Ajouter
46
+ </button>
47
+ </div>
48
+ </div>
49
+ </header>
50
+
51
+ <!-- Search Modal -->
52
+ <div id="searchModal" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden flex items-center justify-center">
53
+ <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
54
+ <div class="flex justify-between items-center mb-4">
55
+ <h2 class="text-xl font-bold">Rechercher une recette</h2>
56
+ <button id="closeSearchModal" class="text-gray-500 hover:text-gray-700">
57
+ <i class="fas fa-times"></i>
58
+ </button>
59
+ </div>
60
+ <div class="relative">
61
+ <input type="text" placeholder="Pâtes carbonara, tarte aux pommes..."
62
+ class="w-full px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-orange-500">
63
+ <button class="absolute right-3 top-2 text-gray-500">
64
+ <i class="fas fa-search"></i>
65
+ </button>
66
+ </div>
67
+ <div class="mt-4">
68
+ <h3 class="font-medium mb-2">Suggestions :</h3>
69
+ <div class="flex flex-wrap gap-2">
70
+ <span class="bg-gray-100 px-3 py-1 rounded-full text-sm cursor-pointer hover:bg-orange-100">Végétarien</span>
71
+ <span class="bg-gray-100 px-3 py-1 rounded-full text-sm cursor-pointer hover:bg-orange-100">Rapide</span>
72
+ <span class="bg-gray-100 px-3 py-1 rounded-full text-sm cursor-pointer hover:bg-orange-100">Dessert</span>
73
+ <span class="bg-gray-100 px-3 py-1 rounded-full text-sm cursor-pointer hover:bg-orange-100">Asiatique</span>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
79
+ <!-- Main Content -->
80
+ <main class="container mx-auto px-4 py-6">
81
+ <!-- Hero Section -->
82
+ <section class="mb-8 bg-gradient-to-r from-orange-400 to-orange-600 rounded-xl p-6 text-white">
83
+ <div class="max-w-xl">
84
+ <h2 class="text-3xl font-bold mb-2">Découvrez de nouvelles saveurs</h2>
85
+ <p class="mb-4">Plus de 1000 recettes à explorer pour toutes les occasions et tous les niveaux de cuisine.</p>
86
+ <button class="bg-white text-orange-600 px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition">
87
+ Explorer les recettes
88
+ </button>
89
+ </div>
90
+ </section>
91
+
92
+ <!-- Categories -->
93
+ <section class="mb-8">
94
+ <h2 class="text-xl font-bold mb-4">Catégories</h2>
95
+ <div class="flex space-x-3 overflow-x-auto pb-2">
96
+ <button class="category-btn active px-4 py-2 bg-orange-100 text-orange-800 rounded-full whitespace-nowrap">
97
+ <i class="fas fa-fire mr-1"></i> Toutes
98
+ </button>
99
+ <button class="category-btn px-4 py-2 bg-gray-100 text-gray-800 rounded-full whitespace-nowrap">
100
+ <i class="fas fa-leaf mr-1"></i> Végétarien
101
+ </button>
102
+ <button class="category-btn px-4 py-2 bg-gray-100 text-gray-800 rounded-full whitespace-nowrap">
103
+ <i class="fas fa-bolt mr-1"></i> Rapide
104
+ </button>
105
+ <button class="category-btn px-4 py-2 bg-gray-100 text-gray-800 rounded-full whitespace-nowrap">
106
+ <i class="fas fa-ice-cream mr-1"></i> Dessert
107
+ </button>
108
+ <button class="category-btn px-4 py-2 bg-gray-100 text-gray-800 rounded-full whitespace-nowrap">
109
+ <i class="fas fa-drumstick-bite mr-1"></i> Viande
110
+ </button>
111
+ </div>
112
+ </section>
113
+
114
+ <!-- Popular Recipes -->
115
+ <section class="mb-8">
116
+ <div class="flex justify-between items-center mb-4">
117
+ <h2 class="text-xl font-bold">Recettes populaires</h2>
118
+ <a href="#" class="text-orange-500 hover:underline">Voir tout</a>
119
+ </div>
120
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
121
+ <!-- Recipe Card 1 -->
122
+ <div class="recipe-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer">
123
+ <div class="relative h-48 overflow-hidden">
124
+ <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
125
+ alt="Salade healthy" class="recipe-image w-full h-full object-cover">
126
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow">
127
+ <i class="fas fa-heart text-gray-400 hover:text-red-500"></i>
128
+ </div>
129
+ <div class="absolute bottom-2 left-2 bg-orange-500 text-white px-2 py-1 rounded-full text-xs">
130
+ <i class="fas fa-clock mr-1"></i> 20 min
131
+ </div>
132
+ </div>
133
+ <div class="p-4">
134
+ <h3 class="font-bold text-lg mb-1">Salade healthy avocat</h3>
135
+ <div class="flex items-center text-gray-600 text-sm mb-2">
136
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
137
+ <span>4.8 (124)</span>
138
+ </div>
139
+ <p class="text-gray-600 text-sm mb-3">Une salade fraîche et équilibrée avec avocat, quinoa et vinaigrette citronnée.</p>
140
+ <div class="flex justify-between items-center">
141
+ <div class="flex space-x-1">
142
+ <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">Végétarien</span>
143
+ <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">Healthy</span>
144
+ </div>
145
+ <button class="text-orange-500 hover:text-orange-600">
146
+ <i class="fas fa-ellipsis-v"></i>
147
+ </button>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Recipe Card 2 -->
153
+ <div class="recipe-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer">
154
+ <div class="relative h-48 overflow-hidden">
155
+ <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
156
+ alt="Pâtes carbonara" class="recipe-image w-full h-full object-cover">
157
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow">
158
+ <i class="fas fa-heart text-red-500"></i>
159
+ </div>
160
+ <div class="absolute bottom-2 left-2 bg-orange-500 text-white px-2 py-1 rounded-full text-xs">
161
+ <i class="fas fa-clock mr-1"></i> 35 min
162
+ </div>
163
+ </div>
164
+ <div class="p-4">
165
+ <h3 class="font-bold text-lg mb-1">Pâtes carbonara</h3>
166
+ <div class="flex items-center text-gray-600 text-sm mb-2">
167
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
168
+ <span>4.9 (256)</span>
169
+ </div>
170
+ <p class="text-gray-600 text-sm mb-3">La recette authentique des pâtes carbonara italiennes avec guanciale et pecorino.</p>
171
+ <div class="flex justify-between items-center">
172
+ <div class="flex space-x-1">
173
+ <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">Italien</span>
174
+ <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">Classique</span>
175
+ </div>
176
+ <button class="text-orange-500 hover:text-orange-600">
177
+ <i class="fas fa-ellipsis-v"></i>
178
+ </button>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Recipe Card 3 -->
184
+ <div class="recipe-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer">
185
+ <div class="relative h-48 overflow-hidden">
186
+ <img src="https://images.unsplash.com/photo-1565557623262-b51c2513a641?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8NXx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
187
+ alt="Tarte aux pommes" class="recipe-image w-full h-full object-cover">
188
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow">
189
+ <i class="fas fa-heart text-gray-400 hover:text-red-500"></i>
190
+ </div>
191
+ <div class="absolute bottom-2 left-2 bg-orange-500 text-white px-2 py-1 rounded-full text-xs">
192
+ <i class="fas fa-clock mr-1"></i> 50 min
193
+ </div>
194
+ </div>
195
+ <div class="p-4">
196
+ <h3 class="font-bold text-lg mb-1">Tarte aux pommes</h3>
197
+ <div class="flex items-center text-gray-600 text-sm mb-2">
198
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
199
+ <span>4.7 (189)</span>
200
+ </div>
201
+ <p class="text-gray-600 text-sm mb-3">Tarte aux pommes traditionnelle avec une pâte sablée maison et cannelle.</p>
202
+ <div class="flex justify-between items-center">
203
+ <div class="flex space-x-1">
204
+ <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">Dessert</span>
205
+ <span class="bg-gray-100 px-2 py-1 rounded-full text-xs">Classique</span>
206
+ </div>
207
+ <button class="text-orange-500 hover:text-orange-600">
208
+ <i class="fas fa-ellipsis-v"></i>
209
+ </button>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </section>
215
+
216
+ <!-- Recent Recipes -->
217
+ <section>
218
+ <div class="flex justify-between items-center mb-4">
219
+ <h2 class="text-xl font-bold">Ajouts récents</h2>
220
+ <a href="#" class="text-orange-500 hover:underline">Voir tout</a>
221
+ </div>
222
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
223
+ <!-- Mini Recipe Card 1 -->
224
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer">
225
+ <div class="relative h-32">
226
+ <img src="https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTB8fHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
227
+ alt="Bowl poke" class="w-full h-full object-cover">
228
+ </div>
229
+ <div class="p-3">
230
+ <h3 class="font-medium text-sm mb-1">Bowl poke saumon</h3>
231
+ <div class="flex items-center text-gray-600 text-xs">
232
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
233
+ <span>4.5 (87)</span>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Mini Recipe Card 2 -->
239
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer">
240
+ <div class="relative h-32">
241
+ <img src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTF8fHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
242
+ alt="Pizza" class="w-full h-full object-cover">
243
+ </div>
244
+ <div class="p-3">
245
+ <h3 class="font-medium text-sm mb-1">Pizza margherita</h3>
246
+ <div class="flex items-center text-gray-600 text-xs">
247
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
248
+ <span>4.7 (142)</span>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Mini Recipe Card 3 -->
254
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer">
255
+ <div class="relative h-32">
256
+ <img src="https://images.unsplash.com/photo-1546069901-d5bfd2cbfb1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTh8fHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
257
+ alt="Risotto" class="w-full h-full object-cover">
258
+ </div>
259
+ <div class="p-3">
260
+ <h3 class="font-medium text-sm mb-1">Risotto aux champignons</h3>
261
+ <div class="flex items-center text-gray-600 text-xs">
262
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
263
+ <span>4.6 (93)</span>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- Mini Recipe Card 4 -->
269
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer">
270
+ <div class="relative h-32">
271
+ <img src="https://images.unsplash.com/photo-1518779578993-ec3579fee39f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MjB8fHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
272
+ alt="Brownies" class="w-full h-full object-cover">
273
+ </div>
274
+ <div class="p-3">
275
+ <h3 class="font-medium text-sm mb-1">Brownies chocolat</h3>
276
+ <div class="flex items-center text-gray-600 text-xs">
277
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
278
+ <span>4.9 (201)</span>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </section>
284
+ </main>
285
+
286
+ <!-- Add Recipe Drawer -->
287
+ <div id="addRecipeDrawer" class="drawer fixed inset-y-0 right-0 w-full max-w-md bg-white shadow-xl z-30 p-6 overflow-y-auto closed">
288
+ <div class="flex justify-between items-center mb-6">
289
+ <h2 class="text-2xl font-bold">Ajouter une recette</h2>
290
+ <button id="closeDrawer" class="text-gray-500 hover:text-gray-700">
291
+ <i class="fas fa-times text-xl"></i>
292
+ </button>
293
+ </div>
294
+
295
+ <form id="recipeForm">
296
+ <div class="mb-4">
297
+ <label class="block text-gray-700 mb-2">Nom de la recette</label>
298
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500">
299
+ </div>
300
+
301
+ <div class="mb-4">
302
+ <label class="block text-gray-700 mb-2">Description</label>
303
+ <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" rows="3"></textarea>
304
+ </div>
305
+
306
+ <div class="mb-4">
307
+ <label class="block text-gray-700 mb-2">Temps de préparation (min)</label>
308
+ <input type="number" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500">
309
+ </div>
310
+
311
+ <div class="mb-4">
312
+ <label class="block text-gray-700 mb-2">Catégories</label>
313
+ <div class="flex flex-wrap gap-2">
314
+ <label class="flex items-center space-x-2 bg-gray-100 px-3 py-1 rounded-full cursor-pointer">
315
+ <input type="checkbox" class="hidden">
316
+ <span>Végétarien</span>
317
+ </label>
318
+ <label class="flex items-center space-x-2 bg-gray-100 px-3 py-1 rounded-full cursor-pointer">
319
+ <input type="checkbox" class="hidden">
320
+ <span>Rapide</span>
321
+ </label>
322
+ <label class="flex items-center space-x-2 bg-gray-100 px-3 py-1 rounded-full cursor-pointer">
323
+ <input type="checkbox" class="hidden">
324
+ <span>Dessert</span>
325
+ </label>
326
+ <label class="flex items-center space-x-2 bg-gray-100 px-3 py-1 rounded-full cursor-pointer">
327
+ <input type="checkbox" class="hidden">
328
+ <span>Healthy</span>
329
+ </label>
330
+ </div>
331
+ </div>
332
+
333
+ <div class="mb-4">
334
+ <label class="block text-gray-700 mb-2">Ingrédients</label>
335
+ <div id="ingredientsContainer">
336
+ <div class="flex mb-2">
337
+ <input type="text" placeholder="Ingrédient" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none">
338
+ <button type="button" class="px-3 bg-gray-100 border-t border-r border-b border-gray-300 text-gray-500 hover:bg-gray-200">
339
+ <i class="fas fa-times"></i>
340
+ </button>
341
+ </div>
342
+ </div>
343
+ <button type="button" id="addIngredient" class="mt-2 text-orange-500 hover:text-orange-600 flex items-center">
344
+ <i class="fas fa-plus mr-1"></i> Ajouter un ingrédient
345
+ </button>
346
+ </div>
347
+
348
+ <div class="mb-6">
349
+ <label class="block text-gray-700 mb-2">Instructions</label>
350
+ <div id="instructionsContainer">
351
+ <div class="flex mb-2">
352
+ <span class="bg-gray-100 px-3 py-2 border border-gray-300 rounded-l-lg">1</span>
353
+ <textarea class="flex-1 px-4 py-2 border-t border-r border-b border-gray-300 rounded-r-lg focus:outline-none" rows="2" placeholder="Étape..."></textarea>
354
+ </div>
355
+ </div>
356
+ <button type="button" id="addInstruction" class="mt-2 text-orange-500 hover:text-orange-600 flex items-center">
357
+ <i class="fas fa-plus mr-1"></i> Ajouter une étape
358
+ </button>
359
+ </div>
360
+
361
+ <div class="mb-6">
362
+ <label class="block text-gray-700 mb-2">Photo de la recette</label>
363
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
364
+ <i class="fas fa-camera text-3xl text-gray-400 mb-2"></i>
365
+ <p class="text-gray-500">Glissez-déposez une image ou cliquez pour sélectionner</p>
366
+ <input type="file" class="hidden">
367
+ </div>
368
+ </div>
369
+
370
+ <button type="submit" class="w-full bg-orange-500 text-white py-3 rounded-lg font-medium hover:bg-orange-600 transition">
371
+ Enregistrer la recette
372
+ </button>
373
+ </form>
374
+ </div>
375
+
376
+ <!-- Bottom Navigation -->
377
+ <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg z-10 md:hidden">
378
+ <div class="flex justify-around items-center py-3">
379
+ <a href="#" class="flex flex-col items-center text-orange-500">
380
+ <i class="fas fa-home text-xl"></i>
381
+ <span class="text-xs mt-1">Accueil</span>
382
+ </a>
383
+ <a href="#" class="flex flex-col items-center text-gray-500">
384
+ <i class="fas fa-compass text-xl"></i>
385
+ <span class="text-xs mt-1">Explorer</span>
386
+ </a>
387
+ <a href="#" class="flex flex-col items-center text-gray-500">
388
+ <i class="fas fa-bookmark text-xl"></i>
389
+ <span class="text-xs mt-1">Favoris</span>
390
+ </a>
391
+ <a href="#" class="flex flex-col items-center text-gray-500">
392
+ <i class="fas fa-user text-xl"></i>
393
+ <span class="text-xs mt-1">Profil</span>
394
+ </a>
395
+ </div>
396
+ </nav>
397
+
398
+ <script>
399
+ // Gestion des modals et drawers
400
+ document.getElementById('searchBtn').addEventListener('click', () => {
401
+ document.getElementById('searchModal').classList.remove('hidden');
402
+ });
403
+
404
+ document.getElementById('closeSearchModal').addEventListener('click', () => {
405
+ document.getElementById('searchModal').classList.add('hidden');
406
+ });
407
+
408
+ document.getElementById('addRecipeBtn').addEventListener('click', () => {
409
+ document.getElementById('addRecipeDrawer').classList.remove('closed');
410
+ });
411
+
412
+ document.getElementById('closeDrawer').addEventListener('click', () => {
413
+ document.getElementById('addRecipeDrawer').classList.add('closed');
414
+ });
415
+
416
+ // Gestion des catégories
417
+ const categoryBtns = document.querySelectorAll('.category-btn');
418
+ categoryBtns.forEach(btn => {
419
+ btn.addEventListener('click', () => {
420
+ categoryBtns.forEach(b => b.classList.remove('active'));
421
+ btn.classList.add('active');
422
+ });
423
+ });
424
+
425
+ // Gestion des ingrédients et instructions dynamiques
426
+ let ingredientCount = 1;
427
+ document.getElementById('addIngredient').addEventListener('click', () => {
428
+ ingredientCount++;
429
+ const div = document.createElement('div');
430
+ div.className = 'flex mb-2';
431
+ div.innerHTML = `
432
+ <input type="text" placeholder="Ingrédient" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none">
433
+ <button type="button" class="px-3 bg-gray-100 border-t border-r border-b border-gray-300 text-gray-500 hover:bg-gray-200">
434
+ <i class="fas fa-times"></i>
435
+ </button>
436
+ `;
437
+ div.querySelector('button').addEventListener('click', () => {
438
+ div.remove();
439
+ });
440
+ document.getElementById('ingredientsContainer').appendChild(div);
441
+ });
442
+
443
+ let instructionCount = 1;
444
+ document.getElementById('addInstruction').addEventListener('click', () => {
445
+ instructionCount++;
446
+ const div = document.createElement('div');
447
+ div.className = 'flex mb-2';
448
+ div.innerHTML = `
449
+ <span class="bg-gray-100 px-3 py-2 border border-gray-300 rounded-l-lg">${instructionCount}</span>
450
+ <textarea class="flex-1 px-4 py-2 border-t border-r border-b border-gray-300 rounded-r-lg focus:outline-none" rows="2" placeholder="Étape..."></textarea>
451
+ `;
452
+ document.getElementById('instructionsContainer').appendChild(div);
453
+ });
454
+
455
+ // Animation des cartes de recettes
456
+ const recipeCards = document.querySelectorAll('.recipe-card');
457
+ recipeCards.forEach(card => {
458
+ card.addEventListener('mouseenter', () => {
459
+ card.querySelector('.recipe-image').style.transform = 'scale(1.05)';
460
+ });
461
+ card.addEventListener('mouseleave', () => {
462
+ card.querySelector('.recipe-image').style.transform = 'scale(1)';
463
+ });
464
+ });
465
+ </script>
466
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=infowebsi/recettes" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
467
+ </html>