Hugging Face's logo

Spaces:
RadMann
/
dashboardfuture
Running

App Files Community
RadMann commited on
Commit
cc93ac0
·
verified ·
1 Parent(s): 4537e06

fait moi une dashboard POS futuriste - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +539 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dashboardfuture
3
- emoji: 🌍
4
- colorFrom: indigo
5
  colorTo: blue
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: dashboardfuture
3
+ emoji: 🐳
4
+ colorFrom: purple
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,539 @@
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>NexusPOS - Dashboard Futuriste</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
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap');
11
+
12
+ :root {
13
+ --primary: #6c5ce7;
14
+ --secondary: #00cec9;
15
+ --dark: #2d3436;
16
+ --light: #f5f6fa;
17
+ --accent: #fd79a8;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Roboto', sans-serif;
22
+ background-color: #0f172a;
23
+ color: var(--light);
24
+ overflow-x: hidden;
25
+ }
26
+
27
+ .futuristic-font {
28
+ font-family: 'Orbitron', sans-serif;
29
+ }
30
+
31
+ .glow-effect {
32
+ box-shadow: 0 0 15px rgba(108, 92, 231, 0.5);
33
+ }
34
+
35
+ .glow-text {
36
+ text-shadow: 0 0 8px rgba(108, 92, 231, 0.7);
37
+ }
38
+
39
+ .neumorphic {
40
+ border-radius: 16px;
41
+ background: linear-gradient(145deg, #1e293b, #0f172a);
42
+ box-shadow: 8px 8px 16px #0a101a,
43
+ -8px -8px 16px #141e30;
44
+ }
45
+
46
+ .neumorphic-card {
47
+ border-radius: 12px;
48
+ background: linear-gradient(145deg, #1e293b, #0f172a);
49
+ box-shadow: 5px 5px 10px #0a101a,
50
+ -5px -5px 10px #141e30;
51
+ transition: all 0.3s ease;
52
+ }
53
+
54
+ .neumorphic-card:hover {
55
+ transform: translateY(-5px);
56
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
57
+ }
58
+
59
+ .gradient-text {
60
+ background: linear-gradient(90deg, #6c5ce7, #00cec9);
61
+ -webkit-background-clip: text;
62
+ background-clip: text;
63
+ color: transparent;
64
+ }
65
+
66
+ .sidebar-item:hover {
67
+ background: linear-gradient(90deg, rgba(108, 92, 231, 0.2), transparent);
68
+ border-left: 3px solid var(--primary);
69
+ }
70
+
71
+ .product-card:hover {
72
+ transform: scale(1.03);
73
+ }
74
+
75
+ @keyframes pulse {
76
+ 0%, 100% {
77
+ opacity: 1;
78
+ }
79
+ 50% {
80
+ opacity: 0.5;
81
+ }
82
+ }
83
+
84
+ .animate-pulse {
85
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
86
+ }
87
+
88
+ /* Scrollbar personnalisée */
89
+ ::-webkit-scrollbar {
90
+ width: 8px;
91
+ height: 8px;
92
+ }
93
+
94
+ ::-webkit-scrollbar-track {
95
+ background: #1e293b;
96
+ }
97
+
98
+ ::-webkit-scrollbar-thumb {
99
+ background: #6c5ce7;
100
+ border-radius: 10px;
101
+ }
102
+
103
+ ::-webkit-scrollbar-thumb:hover {
104
+ background: #00cec9;
105
+ }
106
+ </style>
107
+ </head>
108
+ <body class="min-h-screen flex">
109
+ <!-- Sidebar -->
110
+ <div class="w-64 bg-slate-900 border-r border-slate-700 flex flex-col">
111
+ <div class="p-4 flex items-center justify-center border-b border-slate-700">
112
+ <div class="flex items-center space-x-2">
113
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-600 to-cyan-400 flex items-center justify-center">
114
+ <i class="fas fa-cash-register text-white"></i>
115
+ </div>
116
+ <h1 class="text-xl font-bold gradient-text futuristic-font">NexusPOS</h1>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="flex-1 overflow-y-auto p-4 space-y-2">
121
+ <div class="sidebar-item p-3 rounded-lg cursor-pointer flex items-center space-x-3">
122
+ <i class="fas fa-tachometer-alt text-purple-500"></i>
123
+ <span>Tableau de bord</span>
124
+ </div>
125
+
126
+ <div class="sidebar-item p-3 rounded-lg cursor-pointer flex items-center space-x-3 bg-gradient-to-r from-purple-900/30 to-transparent border-l-2 border-purple-500">
127
+ <i class="fas fa-shopping-cart text-cyan-400"></i>
128
+ <span>Point de vente</span>
129
+ </div>
130
+
131
+ <div class="sidebar-item p-3 rounded-lg cursor-pointer flex items-center space-x-3">
132
+ <i class="fas fa-boxes text-yellow-500"></i>
133
+ <span>Inventaire</span>
134
+ </div>
135
+
136
+ <div class="sidebar-item p-3 rounded-lg cursor-pointer flex items-center space-x-3">
137
+ <i class="fas fa-users text-green-500"></i>
138
+ <span>Clients</span>
139
+ </div>
140
+
141
+ <div class="sidebar-item p-3 rounded-lg cursor-pointer flex items-center space-x-3">
142
+ <i class="fas fa-chart-line text-blue-500"></i>
143
+ <span>Rapports</span>
144
+ </div>
145
+
146
+ <div class="sidebar-item p-3 rounded-lg cursor-pointer flex items-center space-x-3">
147
+ <i class="fas fa-cog text-gray-400"></i>
148
+ <span>Paramètres</span>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="p-4 border-t border-slate-700">
153
+ <div class="flex items-center space-x-3">
154
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-600 to-cyan-400 flex items-center justify-center">
155
+ <i class="fas fa-user text-white"></i>
156
+ </div>
157
+ <div>
158
+ <p class="font-medium">Admin</p>
159
+ <p class="text-xs text-slate-400">Administrateur</p>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Main Content -->
166
+ <div class="flex-1 flex flex-col overflow-hidden">
167
+ <!-- Top Bar -->
168
+ <div class="bg-slate-800 border-b border-slate-700 p-4 flex items-center justify-between">
169
+ <div class="flex items-center space-x-4">
170
+ <h2 class="text-xl font-bold gradient-text futuristic-font">POINT DE VENTE</h2>
171
+ <div class="relative">
172
+ <input type="text" placeholder="Rechercher un produit..." class="bg-slate-700 text-white px-4 py-2 rounded-lg pl-10 w-64 focus:outline-none focus:ring-2 focus:ring-purple-500">
173
+ <i class="fas fa-search absolute left-3 top-3 text-slate-400"></i>
174
+ </div>
175
+ </div>
176
+
177
+ <div class="flex items-center space-x-4">
178
+ <div class="relative">
179
+ <i class="fas fa-bell text-slate-300 cursor-pointer hover:text-purple-400"></i>
180
+ <span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs">3</span>
181
+ </div>
182
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-cyan-400 flex items-center justify-center cursor-pointer">
183
+ <i class="fas fa-user text-white text-sm"></i>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Dashboard Content -->
189
+ <div class="flex-1 overflow-y-auto p-6">
190
+ <!-- Stats Cards -->
191
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
192
+ <div class="neumorphic-card p-6">
193
+ <div class="flex items-center justify-between">
194
+ <div>
195
+ <p class="text-slate-400">Ventes aujourd'hui</p>
196
+ <h3 class="text-2xl font-bold mt-2">1,248.50 €</h3>
197
+ <p class="text-green-400 text-sm mt-1 flex items-center">
198
+ <i class="fas fa-arrow-up mr-1"></i> 12% vs hier
199
+ </p>
200
+ </div>
201
+ <div class="w-12 h-12 rounded-full bg-purple-900/30 flex items-center justify-center">
202
+ <i class="fas fa-euro-sign text-purple-400"></i>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <div class="neumorphic-card p-6">
208
+ <div class="flex items-center justify-between">
209
+ <div>
210
+ <p class="text-slate-400">Transactions</p>
211
+ <h3 class="text-2xl font-bold mt-2">48</h3>
212
+ <p class="text-green-400 text-sm mt-1 flex items-center">
213
+ <i class="fas fa-arrow-up mr-1"></i> 8% vs hier
214
+ </p>
215
+ </div>
216
+ <div class="w-12 h-12 rounded-full bg-cyan-900/30 flex items-center justify-center">
217
+ <i class="fas fa-exchange-alt text-cyan-400"></i>
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ <div class="neumorphic-card p-6">
223
+ <div class="flex items-center justify-between">
224
+ <div>
225
+ <p class="text-slate-400">Panier moyen</p>
226
+ <h3 class="text-2xl font-bold mt-2">26.01 €</h3>
227
+ <p class="text-red-400 text-sm mt-1 flex items-center">
228
+ <i class="fas fa-arrow-down mr-1"></i> 3% vs hier
229
+ </p>
230
+ </div>
231
+ <div class="w-12 h-12 rounded-full bg-yellow-900/30 flex items-center justify-center">
232
+ <i class="fas fa-shopping-basket text-yellow-400"></i>
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <div class="neumorphic-card p-6">
238
+ <div class="flex items-center justify-between">
239
+ <div>
240
+ <p class="text-slate-400">Clients</p>
241
+ <h3 class="text-2xl font-bold mt-2">32</h3>
242
+ <p class="text-green-400 text-sm mt-1 flex items-center">
243
+ <i class="fas fa-arrow-up mr-1"></i> 14% vs hier
244
+ </p>
245
+ </div>
246
+ <div class="w-12 h-12 rounded-full bg-green-900/30 flex items-center justify-center">
247
+ <i class="fas fa-users text-green-400"></i>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Main POS Area -->
254
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
255
+ <!-- Products Grid -->
256
+ <div class="lg:col-span-2">
257
+ <div class="flex items-center justify-between mb-4">
258
+ <h3 class="text-lg font-semibold">Produits</h3>
259
+ <div class="flex space-x-2">
260
+ <button class="bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded-lg text-sm flex items-center">
261
+ <i class="fas fa-filter mr-1"></i> Filtres
262
+ </button>
263
+ <button class="bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded-lg text-sm flex items-center">
264
+ <i class="fas fa-plus mr-1"></i> Ajouter
265
+ </button>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
270
+ <!-- Product Cards -->
271
+ <div class="product-card neumorphic-card p-3 cursor-pointer transition-all duration-300">
272
+ <div class="relative">
273
+ <div class="bg-gradient-to-br from-purple-500 to-blue-500 h-32 rounded-lg flex items-center justify-center">
274
+ <i class="fas fa-wine-bottle text-white text-4xl"></i>
275
+ </div>
276
+ <span class="absolute top-2 right-2 bg-slate-900/70 text-white text-xs px-2 py-1 rounded-full">12 en stock</span>
277
+ </div>
278
+ <div class="mt-3">
279
+ <h4 class="font-medium truncate">Vin rouge premium</h4>
280
+ <div class="flex items-center justify-between mt-2">
281
+ <span class="text-purple-400 font-bold">24.99 €</span>
282
+ <button class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-cyan-400 flex items-center justify-center text-white">
283
+ <i class="fas fa-plus text-sm"></i>
284
+ </button>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <div class="product-card neumorphic-card p-3 cursor-pointer transition-all duration-300">
290
+ <div class="relative">
291
+ <div class="bg-gradient-to-br from-amber-500 to-yellow-500 h-32 rounded-lg flex items-center justify-center">
292
+ <i class="fas fa-beer text-white text-4xl"></i>
293
+ </div>
294
+ <span class="absolute top-2 right-2 bg-slate-900/70 text-white text-xs px-2 py-1 rounded-full">24 en stock</span>
295
+ </div>
296
+ <div class="mt-3">
297
+ <h4 class="font-medium truncate">Bière artisanale</h4>
298
+ <div class="flex items-center justify-between mt-2">
299
+ <span class="text-purple-400 font-bold">5.50 €</span>
300
+ <button class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-cyan-400 flex items-center justify-center text-white">
301
+ <i class="fas fa-plus text-sm"></i>
302
+ </button>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="product-card neumorphic-card p-3 cursor-pointer transition-all duration-300">
308
+ <div class="relative">
309
+ <div class="bg-gradient-to-br from-green-500 to-emerald-500 h-32 rounded-lg flex items-center justify-center">
310
+ <i class="fas fa-cocktail text-white text-4xl"></i>
311
+ </div>
312
+ <span class="absolute top-2 right-2 bg-slate-900/70 text-white text-xs px-2 py-1 rounded-full">8 en stock</span>
313
+ </div>
314
+ <div class="mt-3">
315
+ <h4 class="font-medium truncate">Cocktail signature</h4>
316
+ <div class="flex items-center justify-between mt-2">
317
+ <span class="text-purple-400 font-bold">12.99 €</span>
318
+ <button class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-cyan-400 flex items-center justify-center text-white">
319
+ <i class="fas fa-plus text-sm"></i>
320
+ </button>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <div class="product-card neumorphic-card p-3 cursor-pointer transition-all duration-300">
326
+ <div class="relative">
327
+ <div class="bg-gradient-to-br from-red-500 to-pink-500 h-32 rounded-lg flex items-center justify-center">
328
+ <i class="fas fa-glass-whiskey text-white text-4xl"></i>
329
+ </div>
330
+ <span class="absolute top-2 right-2 bg-slate-900/70 text-white text-xs px-2 py-1 rounded-full">15 en stock</span>
331
+ </div>
332
+ <div class="mt-3">
333
+ <h4 class="font-medium truncate">Whisky single malt</h4>
334
+ <div class="flex items-center justify-between mt-2">
335
+ <span class="text-purple-400 font-bold">18.50 €</span>
336
+ <button class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-cyan-400 flex items-center justify-center text-white">
337
+ <i class="fas fa-plus text-sm"></i>
338
+ </button>
339
+ </div>
340
+ </div>
341
+ </div>
342
+
343
+ <div class="product-card neumorphic-card p-3 cursor-pointer transition-all duration-300">
344
+ <div class="relative">
345
+ <div class="bg-gradient-to-br from-blue-500 to-cyan-500 h-32 rounded-lg flex items-center justify-center">
346
+ <i class="fas fa-coffee text-white text-4xl"></i>
347
+ </div>
348
+ <span class="absolute top-2 right-2 bg-slate-900/70 text-white text-xs px-2 py-1 rounded-full">30 en stock</span>
349
+ </div>
350
+ <div class="mt-3">
351
+ <h4 class="font-medium truncate">Café spécial</h4>
352
+ <div class="flex items-center justify-between mt-2">
353
+ <span class="text-purple-400 font-bold">3.50 €</span>
354
+ <button class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-cyan-400 flex items-center justify-center text-white">
355
+ <i class="fas fa-plus text-sm"></i>
356
+ </button>
357
+ </div>
358
+ </div>
359
+ </div>
360
+
361
+ <div class="product-card neumorphic-card p-3 cursor-pointer transition-all duration-300">
362
+ <div class="relative">
363
+ <div class="bg-gradient-to-br from-orange-500 to-amber-500 h-32 rounded-lg flex items-center justify-center">
364
+ <i class="fas fa-ice-cream text-white text-4xl"></i>
365
+ </div>
366
+ <span class="absolute top-2 right-2 bg-slate-900/70 text-white text-xs px-2 py-1 rounded-full">18 en stock</span>
367
+ </div>
368
+ <div class="mt-3">
369
+ <h4 class="font-medium truncate">Dessert glacé</h4>
370
+ <div class="flex items-center justify-between mt-2">
371
+ <span class="text-purple-400 font-bold">6.99 €</span>
372
+ <button class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-cyan-400 flex items-center justify-center text-white">
373
+ <i class="fas fa-plus text-sm"></i>
374
+ </button>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <!-- Cart Section -->
382
+ <div class="neumorphic p-4">
383
+ <div class="flex items-center justify-between mb-4">
384
+ <h3 class="text-lg font-semibold">Panier actuel</h3>
385
+ <span class="text-sm text-slate-400">Transaction #ORD-4829</span>
386
+ </div>
387
+
388
+ <div class="mb-4">
389
+ <div class="flex items-center space-x-2 mb-2">
390
+ <input type="text" placeholder="Code client..." class="bg-slate-700 text-white px-3 py-2 rounded-lg flex-1 focus:outline-none focus:ring-2 focus:ring-purple-500">
391
+ <button class="bg-purple-600 hover:bg-purple-700 px-3 py-2 rounded-lg text-sm">
392
+ <i class="fas fa-user-plus"></i>
393
+ </button>
394
+ </div>
395
+ <div class="flex space-x-2">
396
+ <button class="bg-slate-700 hover:bg-slate-600 px-3 py-2 rounded-lg text-sm flex-1">
397
+ <i class="fas fa-user mr-1"></i> Client occasionnel
398
+ </button>
399
+ <button class="bg-slate-700 hover:bg-slate-600 px-3 py-2 rounded-lg text-sm">
400
+ <i class="fas fa-search"></i>
401
+ </button>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="h-96 overflow-y-auto mb-4">
406
+ <div class="space-y-3">
407
+ <!-- Cart Items -->
408
+ <div class="flex items-center justify-between p-3 bg-slate-800 rounded-lg">
409
+ <div class="flex items-center space-x-3">
410
+ <div class="w-10 h-10 rounded bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center">
411
+ <i class="fas fa-wine-bottle text-white"></i>
412
+ </div>
413
+ <div>
414
+ <h4 class="font-medium">Vin rouge premium</h4>
415
+ <p class="text-xs text-slate-400">24.99 € x 2</p>
416
+ </div>
417
+ </div>
418
+ <div class="flex items-center space-x-3">
419
+ <span class="font-bold">49.98 €</span>
420
+ <button class="text-red-400 hover:text-red-300">
421
+ <i class="fas fa-trash"></i>
422
+ </button>
423
+ </div>
424
+ </div>
425
+
426
+ <div class="flex items-center justify-between p-3 bg-slate-800 rounded-lg">
427
+ <div class="flex items-center space-x-3">
428
+ <div class="w-10 h-10 rounded bg-gradient-to-r from-amber-500 to-yellow-500 flex items-center justify-center">
429
+ <i class="fas fa-beer text-white"></i>
430
+ </div>
431
+ <div>
432
+ <h4 class="font-medium">Bière artisanale</h4>
433
+ <p class="text-xs text-slate-400">5.50 € x 3</p>
434
+ </div>
435
+ </div>
436
+ <div class="flex items-center space-x-3">
437
+ <span class="font-bold">16.50 €</span>
438
+ <button class="text-red-400 hover:text-red-300">
439
+ <i class="fas fa-trash"></i>
440
+ </button>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="flex items-center justify-between p-3 bg-slate-800 rounded-lg">
445
+ <div class="flex items-center space-x-3">
446
+ <div class="w-10 h-10 rounded bg-gradient-to-r from-green-500 to-emerald-500 flex items-center justify-center">
447
+ <i class="fas fa-cocktail text-white"></i>
448
+ </div>
449
+ <div>
450
+ <h4 class="font-medium">Cocktail signature</h4>
451
+ <p class="text-xs text-slate-400">12.99 € x 1</p>
452
+ </div>
453
+ </div>
454
+ <div class="flex items-center space-x-3">
455
+ <span class="font-bold">12.99 €</span>
456
+ <button class="text-red-400 hover:text-red-300">
457
+ <i class="fas fa-trash"></i>
458
+ </button>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+
464
+ <div class="bg-slate-800 rounded-lg p-4 mb-4">
465
+ <div class="flex justify-between items-center mb-2">
466
+ <span>Sous-total</span>
467
+ <span class="font-bold">79.47 €</span>
468
+ </div>
469
+ <div class="flex justify-between items-center mb-2">
470
+ <span>Taxes (10%)</span>
471
+ <span class="font-bold">7.95 €</span>
472
+ </div>
473
+ <div class="flex justify-between items-center border-t border-slate-700 pt-3">
474
+ <span class="font-semibold">Total</span>
475
+ <span class="text-xl font-bold text-purple-400">87.42 €</span>
476
+ </div>
477
+ </div>
478
+
479
+ <div class="grid grid-cols-2 gap-3">
480
+ <button class="bg-slate-700 hover:bg-slate-600 py-3 rounded-lg font-medium flex items-center justify-center space-x-2">
481
+ <i class="fas fa-trash"></i>
482
+ <span>Vider</span>
483
+ </button>
484
+ <button class="bg-gradient-to-r from-purple-600 to-cyan-500 hover:from-purple-700 hover:to-cyan-600 py-3 rounded-lg font-medium flex items-center justify-center space-x-2 glow-effect">
485
+ <i class="fas fa-credit-card"></i>
486
+ <span>Payer</span>
487
+ </button>
488
+ </div>
489
+
490
+ <div class="mt-4 grid grid-cols-3 gap-2">
491
+ <button class="bg-slate-700 hover:bg-slate-600 py-2 rounded-lg">Espèces</button>
492
+ <button class="bg-slate-700 hover:bg-slate-600 py-2 rounded-lg">Carte</button>
493
+ <button class="bg-slate-700 hover:bg-slate-600 py-2 rounded-lg">Mobile</button>
494
+ </div>
495
+ </div>
496
+ </div>
497
+ </div>
498
+ </div>
499
+
500
+ <script>
501
+ // Animation pour les cartes de produits
502
+ document.querySelectorAll('.product-card').forEach(card => {
503
+ card.addEventListener('mouseenter', () => {
504
+ card.classList.add('glow-effect');
505
+ });
506
+
507
+ card.addEventListener('mouseleave', () => {
508
+ card.classList.remove('glow-effect');
509
+ });
510
+ });
511
+
512
+ // Simulation de chargement
513
+ document.addEventListener('DOMContentLoaded', () => {
514
+ const loadingElements = document.querySelectorAll('.animate-pulse');
515
+ setTimeout(() => {
516
+ loadingElements.forEach(el => el.classList.remove('animate-pulse'));
517
+ }, 1500);
518
+ });
519
+
520
+ // Gestion du panier (simplifié)
521
+ document.querySelectorAll('.product-card button').forEach(button => {
522
+ button.addEventListener('click', function() {
523
+ const productCard = this.closest('.product-card');
524
+ const productName = productCard.querySelector('h4').textContent;
525
+ const productPrice = productCard.querySelector('span').textContent;
526
+
527
+ // Ici, vous ajouteriez normalement le produit au panier
528
+ console.log(`Produit ajouté: ${productName} - ${productPrice}`);
529
+
530
+ // Animation de feedback
531
+ this.innerHTML = '<i class="fas fa-check"></i>';
532
+ setTimeout(() => {
533
+ this.innerHTML = '<i class="fas fa-plus text-sm"></i>';
534
+ }, 1000);
535
+ });
536
+ });
537
+ </script>
538
+ <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=RadMann/dashboardfuture" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
539
+ </html>