Hugging Face's logo

Spaces:
FRENCHIIE
/
collection-dition-limit-e
Running

App Files Community
FRENCHIIE commited on
Commit
00f8b0c
·
verified ·
1 Parent(s): 759cfae

non - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +1051 -17
index.html CHANGED
@@ -1,20 +1,1054 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- </head>
9
- <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
10
- <div class="w-full">
11
- <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
12
- <h1 class="text-4xl lg:text-6xl font-bold font-sans">
13
- <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
14
- Ask me anything.
15
- </h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  </div>
17
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
18
- <script></script>
19
- <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=FRENCHIIE/collection-dition-limit-e" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
20
- </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>Produits Vedettes Distributeurs</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
+ <script src="https://gradio.s3-us-west-2.amazonaws.com/3.50.2/gradio.js"></script>
10
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#6366f1',
17
+ secondary: '#8b5cf6',
18
+ accent: '#ec4899',
19
+ dark: '#0f172a',
20
+ light: '#f8fafc'
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ body {
28
+ font-family: 'Poppins', sans-serif;
29
+ background-color: #f1f5f9;
30
+ }
31
+
32
+ .gradient-bg {
33
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
34
+ }
35
+
36
+ .product-card {
37
+ transition: all 0.3s ease;
38
+ border-radius: 16px;
39
+ overflow: hidden;
40
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
41
+ }
42
+
43
+ .product-card:hover {
44
+ transform: translateY(-8px);
45
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
46
+ }
47
+
48
+ .animated-check {
49
+ animation: checkmark 0.5s ease;
50
+ }
51
+
52
+ @keyframes checkmark {
53
+ 0% { transform: scale(0); }
54
+ 50% { transform: scale(1.2); }
55
+ 100% { transform: scale(1); }
56
+ }
57
+
58
+ .tag {
59
+ position: absolute;
60
+ top: 12px;
61
+ right: 12px;
62
+ padding: 4px 12px;
63
+ border-radius: 20px;
64
+ font-weight: 600;
65
+ font-size: 0.75rem;
66
+ text-transform: uppercase;
67
+ letter-spacing: 0.5px;
68
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
69
+ }
70
+
71
+ .trend-tag {
72
+ background: linear-gradient(135deg, #3b82f6, #60a5fa);
73
+ color: white;
74
+ }
75
+
76
+ .bestseller-tag {
77
+ background: linear-gradient(135deg, #10b981, #34d399);
78
+ color: white;
79
+ }
80
+
81
+ .new-tag {
82
+ background: linear-gradient(135deg, #f59e0b, #fbbf24);
83
+ color: white;
84
+ }
85
+
86
+ .seasonal-tag {
87
+ background: linear-gradient(135deg, #ef4444, #f87171);
88
+ color: white;
89
+ }
90
+
91
+ .stats-card {
92
+ transition: all 0.3s ease;
93
+ border-radius: 16px;
94
+ overflow: hidden;
95
+ }
96
+
97
+ .stats-card:hover {
98
+ transform: translateY(-5px);
99
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
100
+ }
101
+
102
+ .floating-btn {
103
+ position: fixed;
104
+ bottom: 24px;
105
+ right: 24px;
106
+ width: 60px;
107
+ height: 60px;
108
+ border-radius: 50%;
109
+ display: flex;
110
+ align-items: center;
111
+ justify-content: center;
112
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
113
+ z-index: 50;
114
+ transition: all 0.3s ease;
115
+ }
116
+
117
+ .floating-btn:hover {
118
+ transform: scale(1.1);
119
+ }
120
+
121
+ .modal-overlay {
122
+ position: fixed;
123
+ top: 0;
124
+ left: 0;
125
+ right: 0;
126
+ bottom: 0;
127
+ background-color: rgba(0, 0, 0, 0.7);
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ z-index: 100;
132
+ opacity: 0;
133
+ visibility: hidden;
134
+ transition: all 0.3s ease;
135
+ }
136
+
137
+ .modal-overlay.active {
138
+ opacity: 1;
139
+ visibility: visible;
140
+ }
141
+
142
+ .modal-content {
143
+ background-color: white;
144
+ border-radius: 20px;
145
+ width: 90%;
146
+ max-width: 500px;
147
+ max-height: 80vh;
148
+ overflow-y: auto;
149
+ transform: translateY(20px);
150
+ transition: transform 0.3s ease;
151
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
152
+ }
153
+
154
+ .modal-overlay.active .modal-content {
155
+ transform: translateY(0);
156
+ }
157
+
158
+ .product-image {
159
+ height: 180px;
160
+ object-fit: cover;
161
+ transition: transform 0.3s ease;
162
+ }
163
+
164
+ .product-card:hover .product-image {
165
+ transform: scale(1.05);
166
+ }
167
+
168
+ .rating-stars {
169
+ color: #fbbf24;
170
+ }
171
+
172
+ .price-old {
173
+ text-decoration: line-through;
174
+ color: #94a3b8;
175
+ }
176
+
177
+ .price-new {
178
+ font-weight: 700;
179
+ font-size: 1.25rem;
180
+ color: #6366f1;
181
+ }
182
+
183
+ .stats-icon {
184
+ width: 50px;
185
+ height: 50px;
186
+ border-radius: 12px;
187
+ display: flex;
188
+ align-items: center;
189
+ justify-content: center;
190
+ font-size: 1.25rem;
191
+ }
192
+
193
+ .top-product-card {
194
+ transition: all 0.3s ease;
195
+ border-radius: 16px;
196
+ overflow: hidden;
197
+ }
198
+
199
+ .top-product-card:hover {
200
+ transform: translateY(-5px);
201
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
202
+ }
203
+
204
+ .top-product-image {
205
+ height: 160px;
206
+ object-fit: cover;
207
+ }
208
+
209
+ .platform-tag {
210
+ position: absolute;
211
+ bottom: 12px;
212
+ left: 12px;
213
+ padding: 4px 12px;
214
+ border-radius: 20px;
215
+ font-weight: 600;
216
+ font-size: 0.75rem;
217
+ text-transform: uppercase;
218
+ letter-spacing: 0.5px;
219
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
220
+ }
221
+
222
+ .amazon-tag {
223
+ background: linear-gradient(135deg, #ff9900, #ffad33);
224
+ color: white;
225
+ }
226
+
227
+ .ebay-tag {
228
+ background: linear-gradient(135deg, #0064d2, #3385db);
229
+ color: white;
230
+ }
231
+
232
+ .etsy-tag {
233
+ background: linear-gradient(135deg, #f16521, #f48a5b);
234
+ color: white;
235
+ }
236
+
237
+ .tip-card {
238
+ transition: all 0.3s ease;
239
+ border-radius: 16px;
240
+ overflow: hidden;
241
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
242
+ }
243
+
244
+ .tip-card:hover {
245
+ transform: translateY(-5px);
246
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
247
+ }
248
+
249
+ .tip-icon {
250
+ width: 60px;
251
+ height: 60px;
252
+ border-radius: 16px;
253
+ display: flex;
254
+ align-items: center;
255
+ justify-content: center;
256
+ font-size: 1.5rem;
257
+ }
258
+
259
+ .newsletter-input {
260
+ border-radius: 12px 0 0 12px;
261
+ border: none;
262
+ padding: 16px 20px;
263
+ width: 100%;
264
+ font-size: 1rem;
265
+ }
266
+
267
+ .newsletter-btn {
268
+ border-radius: 0 12px 12px 0;
269
+ padding: 16px 24px;
270
+ font-weight: 600;
271
+ transition: all 0.3s ease;
272
+ }
273
+
274
+ .newsletter-btn:hover {
275
+ opacity: 0.9;
276
+ }
277
+
278
+ .footer-link {
279
+ transition: all 0.2s ease;
280
+ display: block;
281
+ padding: 4px 0;
282
+ }
283
+
284
+ .footer-link:hover {
285
+ color: white;
286
+ transform: translateX(5px);
287
+ }
288
+
289
+ .filter-select {
290
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
291
+ background-position: right 0.5rem center;
292
+ background-repeat: no-repeat;
293
+ background-size: 1.5em 1.5em;
294
+ padding-right: 2.5rem;
295
+ -webkit-print-color-adjust: exact;
296
+ print-color-adjust: exact;
297
+ }
298
+
299
+ .sort-select {
300
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
301
+ background-position: right 0.5rem center;
302
+ background-repeat: no-repeat;
303
+ background-size: 1.5em 1.5em;
304
+ padding-right: 2.5rem;
305
+ -webkit-print-color-adjust: exact;
306
+ print-color-adjust: exact;
307
+ }
308
+
309
+ .progress-bar {
310
+ height: 8px;
311
+ border-radius: 4px;
312
+ background-color: #e2e8f0;
313
+ overflow: hidden;
314
+ }
315
+
316
+ .progress-fill {
317
+ height: 100%;
318
+ border-radius: 4px;
319
+ background: linear-gradient(90deg, #6366f1, #8b5cf6);
320
+ }
321
+ </style>
322
+ </head>
323
+ <body class="bg-gray-50">
324
+ <!-- Header -->
325
+ <header class="gradient-bg text-white py-8 px-4 relative overflow-hidden">
326
+ <div class="absolute top-0 left-0 w-full h-full opacity-10">
327
+ <div class="absolute top-10 left-10 w-32 h-32 bg-white rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
328
+ <div class="absolute top-0 right-10 w-32 h-32 bg-white rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
329
+ <div class="absolute bottom-10 left-1/2 w-32 h-32 bg-white rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
330
+ </div>
331
+ <div class="container mx-auto relative z-10">
332
+ <div class="flex flex-col md:flex-row justify-between items-center">
333
+ <div class="mb-6 md:mb-0 text-center md:text-left">
334
+ <h1 class="text-3xl md:text-4xl font-bold mb-2">Produits Vedettes des Distributeurs</h1>
335
+ <p class="text-lg opacity-90 max-w-2xl">Découvrez les produits les plus vendus de la semaine provenant de nos distributeurs partenaires</p>
336
+ </div>
337
+ <div class="bg-white rounded-xl p-4 shadow-xl w-full md:w-64">
338
+ <div class="flex items-center">
339
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
340
+ <i class="fas fa-chart-line text-indigo-600 text-2xl"></i>
341
+ </div>
342
+ <div>
343
+ <p class="text-gray-500 text-sm">Potentiel de profit</p>
344
+ <p class="text-xl font-bold text-gray-800">Élevé</p>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </header>
351
+
352
+ <!-- Main Content -->
353
+ <main class="container mx-auto px-4 py-8">
354
+ <!-- Filter Section -->
355
+ <section class="bg-white rounded-2xl shadow-lg p-6 mb-8">
356
+ <h2 class="text-2xl font-bold mb-6 text-gray-800">Filtrez par Distributeurs</h2>
357
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
358
+ <div>
359
+ <label class="block text-gray-700 font-medium mb-2">Distributeur</label>
360
+ <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 filter-select">
361
+ <option>Tous les distributeurs</option>
362
+ <option>Amazon</option>
363
+ <option>eBay</option>
364
+ <option>Etsy</option>
365
+ <option>AliExpress</option>
366
+ <option>Cdiscount</option>
367
+ </select>
368
+ </div>
369
+ <div>
370
+ <label class="block text-gray-700 font-medium mb-2">Catégorie</label>
371
+ <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 filter-select">
372
+ <option>Toutes catégories</option>
373
+ <option>Mode & Accessoires</option>
374
+ <option>Électronique</option>
375
+ <option>Maison & Jardin</option>
376
+ <option>Beauté & Santé</option>
377
+ <option>Sports & Loisirs</option>
378
+ </select>
379
+ </div>
380
+ <div>
381
+ <label class="block text-gray-700 font-medium mb-2">Tendance</label>
382
+ <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 filter-select">
383
+ <option>Toutes tendances</option>
384
+ <option>En forte croissance</option>
385
+ <option>Produits saisonniers</option>
386
+ <option>Classiques durables</option>
387
+ </select>
388
+ </div>
389
+ </div>
390
+ <div class="mt-6 flex justify-end">
391
+ <button class="gradient-bg text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition shadow-lg">Voir les produits</button>
392
+ </div>
393
+ </section>
394
+
395
+ <!-- Recommended Products -->
396
+ <section>
397
+ <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
398
+ <h2 class="text-2xl font-bold text-gray-800">Produits Vedettes de la Semaine</h2>
399
+ <div class="flex items-center bg-white rounded-lg px-3 py-2 shadow">
400
+ <span class="text-gray-600 mr-2 whitespace-nowrap">Trier par:</span>
401
+ <select class="p-2 border-0 focus:ring-0 sort-select">
402
+ <option>Ventes cette semaine</option>
403
+ <option>Tendance croissante</option>
404
+ <option>Prix croissant</option>
405
+ <option>Prix décroissant</option>
406
+ </select>
407
+ </div>
408
+ </div>
409
+
410
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
411
+ <!-- Product 1 -->
412
+ <div class="product-card bg-white">
413
+ <div class="relative">
414
+ <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Montre intelligente" class="w-full product-image">
415
+ <div class="tag trend-tag">Tendance</div>
416
+ </div>
417
+ <div class="p-4">
418
+ <h3 class="font-bold text-lg mb-1">Montre Intelligente Fitness</h3>
419
+ <div class="flex items-center mb-2">
420
+ <div class="flex rating-stars">
421
+ <i class="fas fa-star"></i>
422
+ <i class="fas fa-star"></i>
423
+ <i class="fas fa-star"></i>
424
+ <i class="fas fa-star"></i>
425
+ <i class="fas fa-star-half-alt"></i>
426
+ </div>
427
+ <span class="text-gray-600 text-sm ml-2">(124 avis)</span>
428
+ </div>
429
+ <div class="flex justify-between items-center mb-3">
430
+ <span class="price-old">89€</span>
431
+ <span class="price-new">59€</span>
432
+ </div>
433
+ <div class="flex justify-between items-center text-sm text-gray-600 mb-3">
434
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
435
+ <i class="fas fa-store mr-1"></i> Amazon
436
+ </span>
437
+ <div>
438
+ <span class="mr-3"><i class="fas fa-shopping-cart mr-1 text-indigo-500"></i> 1,240/sem</span>
439
+ <span><i class="fas fa-percentage mr-1 text-indigo-500"></i> 35%</span>
440
+ </div>
441
+ </div>
442
+ <button class="w-full gradient-bg text-white py-2 rounded-lg font-medium hover:opacity-90 transition">Ajouter à ma sélection</button>
443
+ </div>
444
+ </div>
445
+
446
+ <!-- Product 2 -->
447
+ <div class="product-card bg-white">
448
+ <div class="relative">
449
+ <img src="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Oreillers ergonomiques" class="w-full product-image">
450
+ <div class="tag bestseller-tag">Best-seller</div>
451
+ </div>
452
+ <div class="p-4">
453
+ <h3 class="font-bold text-lg mb-1">Oreiller Ergonomique Mémoire</h3>
454
+ <div class="flex items-center mb-2">
455
+ <div class="flex rating-stars">
456
+ <i class="fas fa-star"></i>
457
+ <i class="fas fa-star"></i>
458
+ <i class="fas fa-star"></i>
459
+ <i class="fas fa-star"></i>
460
+ <i class="fas fa-star"></i>
461
+ </div>
462
+ <span class="text-gray-600 text-sm ml-2">(217 avis)</span>
463
+ </div>
464
+ <div class="flex justify-between items-center mb-3">
465
+ <span class="price-old">65€</span>
466
+ <span class="price-new">49€</span>
467
+ </div>
468
+ <div class="flex justify-between items-center text-sm text-gray-600 mb-3">
469
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
470
+ <i class="fas fa-store mr-1"></i> eBay
471
+ </span>
472
+ <div>
473
+ <span class="mr-3"><i class="fas fa-shopping-cart mr-1 text-indigo-500"></i> 2,170/sem</span>
474
+ <span><i class="fas fa-percentage mr-1 text-indigo-500"></i> 40%</span>
475
+ </div>
476
+ </div>
477
+ <button class="w-full gradient-bg text-white py-2 rounded-lg font-medium hover:opacity-90 transition">Ajouter à ma sélection</button>
478
+ </div>
479
+ </div>
480
+
481
+ <!-- Product 3 -->
482
+ <div class="product-card bg-white">
483
+ <div class="relative">
484
+ <img src="https://images.unsplash.com/photo-1595341595379-cf2a0a90821e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Brosse nettoyante visage" class="w-full product-image">
485
+ <div class="tag new-tag">Nouveauté</div>
486
+ </div>
487
+ <div class="p-4">
488
+ <h3 class="font-bold text-lg mb-1">Brosse Nettoyante Visage</h3>
489
+ <div class="flex items-center mb-2">
490
+ <div class="flex rating-stars">
491
+ <i class="fas fa-star"></i>
492
+ <i class="fas fa-star"></i>
493
+ <i class="fas fa-star"></i>
494
+ <i class="fas fa-star"></i>
495
+ <i class="far fa-star"></i>
496
+ </div>
497
+ <span class="text-gray-600 text-sm ml-2">(89 avis)</span>
498
+ </div>
499
+ <div class="flex justify-between items-center mb-3">
500
+ <span class="price-old">39€</span>
501
+ <span class="price-new">29€</span>
502
+ </div>
503
+ <div class="flex justify-between items-center text-sm text-gray-600 mb-3">
504
+ <span class="bg-orange-100 text-orange-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
505
+ <i class="fas fa-store mr-1"></i> Etsy
506
+ </span>
507
+ <div>
508
+ <span class="mr-3"><i class="fas fa-shopping-cart mr-1 text-indigo-500"></i> 890/sem</span>
509
+ <span><i class="fas fa-percentage mr-1 text-indigo-500"></i> 50%</span>
510
+ </div>
511
+ </div>
512
+ <button class="w-full gradient-bg text-white py-2 rounded-lg font-medium hover:opacity-90 transition">Ajouter à ma sélection</button>
513
+ </div>
514
+ </div>
515
+
516
+ <!-- Product 4 -->
517
+ <div class="product-card bg-white">
518
+ <div class="relative">
519
+ <img src="https://images.unsplash.com/photo-1572635196188-84cd0aaad1d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Lunettes de soleil" class="w-full product-image">
520
+ <div class="tag seasonal-tag">Saisonnier</div>
521
+ </div>
522
+ <div class="p-4">
523
+ <h3 class="font-bold text-lg mb-1">Lunettes de Soleil Polarisees</h3>
524
+ <div class="flex items-center mb-2">
525
+ <div class="flex rating-stars">
526
+ <i class="fas fa-star"></i>
527
+ <i class="fas fa-star"></i>
528
+ <i class="fas fa-star"></i>
529
+ <i class="fas fa-star"></i>
530
+ <i class="far fa-star"></i>
531
+ </div>
532
+ <span class="text-gray-600 text-sm ml-2">(156 avis)</span>
533
+ </div>
534
+ <div class="flex justify-between items-center mb-3">
535
+ <span class="price-old">45€</span>
536
+ <span class="price-new">32€</span>
537
+ </div>
538
+ <div class="flex justify-between items-center text-sm text-gray-600 mb-3">
539
+ <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
540
+ <i class="fas fa-store mr-1"></i> Cdiscount
541
+ </span>
542
+ <div>
543
+ <span class="mr-3"><i class="fas fa-shopping-cart mr-1 text-indigo-500"></i> 1,560/sem</span>
544
+ <span><i class="fas fa-percentage mr-1 text-indigo-500"></i> 45%</span>
545
+ </div>
546
+ </div>
547
+ <button class="w-full gradient-bg text-white py-2 rounded-lg font-medium hover:opacity-90 transition">Ajouter à ma sélection</button>
548
+ </div>
549
+ </div>
550
+ </div>
551
+ </section>
552
+
553
+ <!-- AI Product Recommender -->
554
+ <section class="bg-white rounded-2xl shadow-lg p-6 mt-12">
555
+ <h2 class="text-2xl font-bold mb-6 text-gray-800">Recommandations IA de Produits Cosmiques</h2>
556
+ <div id="gradio-container" class="min-h-[500px] py-4">
557
+ <!-- Gradio interface will load here -->
558
+ <script>
559
+ function charger_produits() {
560
+ // This would be replaced with your actual JSON endpoint
561
+ const data = [
562
+ {
563
+ "nom": "Montre connectée NebulaPulse",
564
+ "description": "Synchronisation cosmique et suivi galactique de santé.",
565
+ "prix": "129,99€",
566
+ "fournisseur": "Amazon",
567
+ "lien": "https://amazon.ca/nebula-pulse",
568
+ "image": "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
569
+ "popularite": "⭐⭐⭐⭐⭐"
570
+ },
571
+ {
572
+ "nom": "Lampe stellaire 3D",
573
+ "description": "Éclaire ton espace comme une supernova personnelle.",
574
+ "prix": "39,99€",
575
+ "fournisseur": "Etsy",
576
+ "lien": "https://etsy.com/star-lamp",
577
+ "image": "https://images.unsplash.com/photo-1519861531473-9200262188bf",
578
+ "popularite": "⭐⭐⭐⭐"
579
+ }
580
+ ];
581
+
582
+ let html = "<div class='space-y-6'>";
583
+ data.forEach(produit => {
584
+ html += `
585
+ <div class='p-6 bg-gray-50 rounded-lg border border-gray-200'>
586
+ <div class='flex flex-col md:flex-row gap-6'>
587
+ <div class='flex-shrink-0'>
588
+ <img src='${produit.image}' class='w-48 rounded-lg object-cover h-48'/>
589
+ </div>
590
+ <div>
591
+ <h3 class='text-xl font-bold mb-2'>${produit.nom}</h3>
592
+ <p class='text-gray-600 mb-3'>${produit.description}</p>
593
+ <div class='flex flex-wrap gap-4 text-sm'>
594
+ <div><span class='font-semibold'>💰 Prix:</span> ${produit.prix}</div>
595
+ <div><span class='font-semibold'>🏢 Fournisseur:</span> ${produit.fournisseur}</div>
596
+ <div><span class='font-semibold'>🔥 Popularité:</span> ${produit.popularite}</div>
597
+ </div>
598
+ <a href='${produit.lien}' target='_blank' class='mt-4 inline-block gradient-bg text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition'>Acheter maintenant</a>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ `;
603
+ });
604
+ html += "</div>";
605
+
606
+ document.getElementById('gradio-container').innerHTML = html;
607
+ }
608
+
609
+ charger_produits();
610
+ </script>
611
+ </div>
612
+ </section>
613
+
614
+ <!-- Profit Calculator -->
615
+ <section class="bg-white rounded-2xl shadow-lg p-6 mt-12">
616
+ <h2 class="text-2xl font-bold mb-6 text-gray-800">Calculateur de Profit sur Distributeurs</h2>
617
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
618
+ <div>
619
+ <div class="mb-6">
620
+ <label class="block text-gray-700 font-medium mb-2">Prix d'achat chez le distributeur (€)</label>
621
+ <input type="number" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="20">
622
+ </div>
623
+ <div class="mb-6">
624
+ <label class="block text-gray-700 font-medium mb-2">Votre prix de revente (€)</label>
625
+ <input type="number" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="50">
626
+ </div>
627
+ <div>
628
+ <label class="block text-gray-700 font-medium mb-2">Volume estimé/semaine</label>
629
+ <input type="number" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="100">
630
+ </div>
631
+ </div>
632
+ <div class="bg-gray-50 rounded-xl p-6">
633
+ <h3 class="text-lg font-bold mb-4 text-gray-800">Projection de Vos Profits</h3>
634
+ <div class="space-y-4">
635
+ <div class="flex justify-between">
636
+ <span class="text-gray-600">Marge unitaire:</span>
637
+ <span class="font-bold">30€</span>
638
+ </div>
639
+ <div class="flex justify-between">
640
+ <span class="text-gray-600">Profit hebdomadaire:</span>
641
+ <span class="font-bold text-green-600">3,000€</span>
642
+ </div>
643
+ <div class="flex justify-between">
644
+ <span class="text-gray-600">Profit mensuel:</span>
645
+ <span class="font-bold text-green-600">12,000€</span>
646
+ </div>
647
+ <div class="pt-4 border-t border-gray-200">
648
+ <div class="flex justify-between items-center">
649
+ <span class="text-gray-600">Retour sur investissement:</span>
650
+ <span class="font-bold text-indigo-600">150%</span>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ <button class="w-full mt-6 gradient-bg text-white py-3 rounded-lg font-medium hover:opacity-90 transition">Calculer mes profits</button>
655
+ </div>
656
+ </div>
657
+ </section>
658
+
659
+ <!-- Weekly Top Products -->
660
+ <section class="mt-12 bg-gradient-to-br from-gray-900 to-indigo-900 rounded-2xl shadow-xl p-6 border border-indigo-500/20">
661
+ <h2 class="text-2xl font-bold mb-6 text-white flex items-center">
662
+ <span class="bg-gradient-to-r from-indigo-500 to-purple-500 p-2 rounded-lg mr-3">
663
+ <i class="fas fa-rocket"></i>
664
+ </span>
665
+ Produits Vedettes de la Semaine
666
+ </h2>
667
+ <p class="text-indigo-200 mb-6">Découvrez les produits les plus vendus cette semaine chez nos distributeurs partenaires</p>
668
+
669
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
670
+ <!-- Product 1 -->
671
+ <div class="top-product-card bg-gray-800 border border-indigo-500/20">
672
+ <div class="relative">
673
+ <img src="https://m.media-amazon.com/images/I/71zny7BTRlL._AC_UL320_.jpg" alt="Produit" class="w-full top-product-image">
674
+ <div class="platform-tag amazon-tag">Amazon</div>
675
+ </div>
676
+ <div class="p-4">
677
+ <h3 class="font-bold text-white mb-2">Écouteurs Sans Fil Bluetooth</h3>
678
+ <p class="text-indigo-200 text-sm mb-3">Écouteurs avec réduction de bruit et 30h d'autonomie</p>
679
+ <div class="flex justify-between items-center">
680
+ <span class="text-white font-bold">49€</span>
681
+ <a href="#" class="text-indigo-300 hover:text-indigo-100 text-sm flex items-center">
682
+ Voir produit <i class="fas fa-external-link-alt ml-1"></i>
683
+ </a>
684
+ </div>
685
+ <div class="mt-3">
686
+ <span class="inline-block bg-gray-700 text-indigo-200 text-xs px-2 py-1 rounded">Tech</span>
687
+ </div>
688
+ </div>
689
+ </div>
690
+
691
+ <!-- Product 2 -->
692
+ <div class="top-product-card bg-gray-800 border border-indigo-500/20">
693
+ <div class="relative">
694
+ <img src="https://m.media-amazon.com/images/I/71OZY035QCL._AC_UL320_.jpg" alt="Produit" class="w-full top-product-image">
695
+ <div class="platform-tag ebay-tag">eBay</div>
696
+ </div>
697
+ <div class="p-4">
698
+ <h3 class="font-bold text-white mb-2">Tapis de Yoga Premium</h3>
699
+ <p class="text-indigo-200 text-sm mb-3">Tapis antidérapant extra épais (6mm) pour yoga et fitness</p>
700
+ <div class="flex justify-between items-center">
701
+ <span class="text-white font-bold">29€</span>
702
+ <a href="#" class="text-indigo-300 hover:text-indigo-100 text-sm flex items-center">
703
+ Voir produit <i class="fas fa-external-link-alt ml-1"></i>
704
+ </a>
705
+ </div>
706
+ <div class="mt-3">
707
+ <span class="inline-block bg-gray-700 text-indigo-200 text-xs px-2 py-1 rounded">Sport</span>
708
+ </div>
709
+ </div>
710
+ </div>
711
+
712
+ <!-- Product 3 -->
713
+ <div class="top-product-card bg-gray-800 border border-indigo-500/20">
714
+ <div class="relative">
715
+ <img src="https://m.media-amazon.com/images/I/61OZrSLf2GL._AC_UL320_.jpg" alt="Produit" class="w-full top-product-image">
716
+ <div class="platform-tag etsy-tag">Etsy</div>
717
+ </div>
718
+ <div class="p-4">
719
+ <h3 class="font-bold text-white mb-2">Bracelet en Pierre Naturelle</h3>
720
+ <p class="text-indigo-200 text-sm mb-3">Bracelet artisanal en pierres semi-précieuses</p>
721
+ <div class="flex justify-between items-center">
722
+ <span class="text-white font-bold">22€</span>
723
+ <a href="#" class="text-indigo-300 hover:text-indigo-100 text-sm flex items-center">
724
+ Voir produit <i class="fas fa-external-link-alt ml-1"></i>
725
+ </a>
726
+ </div>
727
+ <div class="mt-3">
728
+ <span class="inline-block bg-gray-700 text-indigo-200 text-xs px-2 py-1 rounded">Mode</span>
729
+ </div>
730
+ </div>
731
+ </div>
732
+ </div>
733
+
734
+ <div class="mt-8 text-center">
735
+ <button class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition flex items-center mx-auto shadow-lg">
736
+ <i class="fas fa-sync-alt mr-2"></i> Voir plus de produits
737
+ </button>
738
+ </div>
739
+ </section>
740
+
741
+ <!-- Tips Section -->
742
+ <section class="mt-12">
743
+ <h2 class="text-2xl font-bold mb-6 text-gray-800">Conseils pour Choisir les Meilleurs Produits Distributeurs</h2>
744
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
745
+ <div class="tip-card bg-white p-6">
746
+ <div class="tip-icon bg-indigo-100 text-indigo-600 mb-4">
747
+ <i class="fas fa-fire"></i>
748
+ </div>
749
+ <h3 class="font-bold text-lg mb-2">Produits Tendance</h3>
750
+ <p class="text-gray-600">Sélectionnez des produits déjà populaires chez les distributeurs. Ces articles ont fait leurs preuves et ont une demande établie.</p>
751
+ </div>
752
+ <div class="tip-card bg-white p-6">
753
+ <div class="tip-icon bg-indigo-100 text-indigo-600 mb-4">
754
+ <i class="fas fa-percentage"></i>
755
+ </div>
756
+ <h3 class="font-bold text-lg mb-2">Marge de Revente</h3>
757
+ <p class="text-gray-600">Ciblez des produits avec au moins 30% de marge. Les produits entre 20€ et 100€ offrent souvent le meilleur équilibre entre volume et profit.</p>
758
+ </div>
759
+ <div class="tip-card bg-white p-6">
760
+ <div class="tip-icon bg-indigo-100 text-indigo-600 mb-4">
761
+ <i class="fas fa-box-open"></i>
762
+ </div>
763
+ <h3 class="font-bold text-lg mb-2">Qualité du Distributeur</h3>
764
+ <p class="text-gray-600">Travaillez avec des distributeurs fiables ayant de bons retours clients. Cela protège votre réputation et réduit les retours.</p>
765
+ </div>
766
+ </div>
767
+ </section>
768
+ </main>
769
+
770
+ <!-- Newsletter -->
771
+ <section class="gradient-bg text-white py-12 px-4 mt-12 relative overflow-hidden">
772
+ <div class="absolute top-0 left-0 w-full h-full opacity-10">
773
+ <div class="absolute top-10 left-10 w-32 h-32 bg-white rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
774
+ <div class="absolute top-0 right-10 w-32 h-32 bg-white rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
775
+ <div class="absolute bottom-10 left-1/2 w-32 h-32 bg-white rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
776
+ </div>
777
+ <div class="container mx-auto max-w-4xl text-center relative z-10">
778
+ <h2 class="text-2xl md:text-3xl font-bold mb-4">Recevez des Idées de Produits Directement</h2>
779
+ <p class="mb-6 text-lg opacity-90 max-w-2xl mx-auto">Abonnez-vous à notre newsletter hebdomadaire pour recevoir les dernières tendances et produits à fort potentiel.</p>
780
+ <div class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
781
+ <input type="email" placeholder="Votre email" class="newsletter-input">
782
+ <button class="newsletter-btn gradient-bg text-white font-bold hover:opacity-90 transition">S'abonner</button>
783
+ </div>
784
+ </div>
785
+ </section>
786
+
787
+ <!-- Footer -->
788
+ <footer class="bg-gray-900 text-white py-12 px-4">
789
+ <div class="container mx-auto">
790
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
791
+ <div>
792
+ <h3 class="font-bold text-xl mb-4">Produits Lucratifs</h3>
793
+ <p class="text-gray-400 mb-4">Notre plateforme vous aide à identifier les meilleurs produits e-commerce pour maximiser vos profits.</p>
794
+ <div class="flex space-x-4">
795
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
796
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
797
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
798
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
799
+ </div>
800
+ </div>
801
+ <div>
802
+ <h3 class="font-bold text-lg mb-4">Catégories</h3>
803
+ <ul class="space-y-2">
804
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Mode & Accessoires</a></li>
805
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Électronique</a></li>
806
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Maison & Jardin</a></li>
807
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Beauté & Santé</a></li>
808
+ </ul>
809
+ </div>
810
+ <div>
811
+ <h3 class="font-bold text-lg mb-4">Ressources</h3>
812
+ <ul class="space-y-2">
813
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Blog</a></li>
814
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Guides</a></li>
815
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">Outils</a></li>
816
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white">FAQ</a></li>
817
+ </ul>
818
+ </div>
819
+ <div>
820
+ <h3 class="font-bold text-lg mb-4">Contact</h3>
821
+ <ul class="space-y-3">
822
+ <li class="flex items-start">
823
+ <i class="fas fa-envelope mr-3 text-indigo-400 mt-1"></i>
824
+ <a href="mailto:contact@produits-lucratifs.com" class="text-gray-400 hover:text-white">contact@produits-lucratifs.com</a>
825
+ </li>
826
+ <li class="flex items-start">
827
+ <i class="fas fa-phone mr-3 text-indigo-400 mt-1"></i>
828
+ <span class="text-gray-400">+33 1 23 45 67 89</span>
829
+ </li>
830
+ <li class="flex items-start">
831
+ <i class="fas fa-map-marker-alt mr-3 text-indigo-400 mt-1"></i>
832
+ <span class="text-gray-400">Paris, France</span>
833
+ </li>
834
+ </ul>
835
+ </div>
836
+ </div>
837
+ <div class="border-t border-gray-800 mt-10 pt-8 text-center text-gray-500">
838
+ <p>© 2023 Produits Lucratifs. Tous droits réservés.</p>
839
+ </div>
840
+ </div>
841
+ </footer>
842
+
843
+ <!-- Selected Products Modal -->
844
+ <div id="modal-overlay" class="modal-overlay">
845
+ <div class="modal-content">
846
+ <div class="p-6">
847
+ <div class="flex justify-between items-center mb-4">
848
+ <h3 class="text-xl font-bold">Ma Sélection</h3>
849
+ <button id="close-modal" class="text-gray-500 hover:text-gray-700">
850
+ <i class="fas fa-times text-xl"></i>
851
+ </button>
852
+ </div>
853
+ <div id="selected-products" class="space-y-4">
854
+ <!-- Selected products will appear here -->
855
+ <p class="text-gray-500 text-center py-8">Aucun produit sélectionné pour le moment</p>
856
+ </div>
857
+ <div class="mt-6 pt-4 border-t border-gray-200">
858
+ <button class="w-full gradient-bg text-white py-3 rounded-lg font-medium hover:opacity-90 transition">Exporter ma sélection</button>
859
+ </div>
860
+ </div>
861
+ </div>
862
  </div>
863
+
864
+ <!-- Floating Action Button -->
865
+ <button id="fab" class="floating-btn gradient-bg text-white text-xl">
866
+ <i class="fas fa-truck"></i>
867
+ <span id="item-count" class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center hidden">0</span>
868
+ </button>
869
+
870
+ <script>
871
+ // Sample product data
872
+ const products = [
873
+ {
874
+ id: 1,
875
+ name: "Montre Intelligente Fitness",
876
+ price: 59,
877
+ originalPrice: 89,
878
+ margin: 35,
879
+ demand: 45,
880
+ image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80",
881
+ rating: 4.5,
882
+ reviews: 124,
883
+ tag: "Tendance"
884
+ },
885
+ {
886
+ id: 2,
887
+ name: "Oreiller Ergonomique Mémoire",
888
+ price: 49,
889
+ originalPrice: 65,
890
+ margin: 40,
891
+ demand: 32,
892
+ image: "https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80",
893
+ rating: 5,
894
+ reviews: 217,
895
+ tag: "Best-seller"
896
+ },
897
+ {
898
+ id: 3,
899
+ name: "Brosse Nettoyante Visage",
900
+ price: 29,
901
+ originalPrice: 39,
902
+ margin: 50,
903
+ demand: 68,
904
+ image: "https://images.unsplash.com/photo-1595341595379-cf2a0a90821e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80",
905
+ rating: 4,
906
+ reviews: 89,
907
+ tag: "Nouveauté"
908
+ },
909
+ {
910
+ id: 4,
911
+ name: "Lunettes de Soleil Polarisees",
912
+ price: 32,
913
+ originalPrice: 45,
914
+ margin: 45,
915
+ demand: 55,
916
+ image: "https://images.unsplash.com/photo-1572635196188-84cd0aaad1d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80",
917
+ rating: 4,
918
+ reviews: 156,
919
+ tag: "Saisonnier"
920
+ }
921
+ ];
922
+
923
+ // Selected products array
924
+ let selectedProducts = [];
925
+
926
+ // DOM elements
927
+ const modalOverlay = document.getElementById('modal-overlay');
928
+ const closeModal = document.getElementById('close-modal');
929
+ const fab = document.getElementById('fab');
930
+ const selectedProductsContainer = document.getElementById('selected-products');
931
+ const itemCount = document.getElementById('item-count');
932
+
933
+ // Add event listeners to all "Add to selection" buttons
934
+ document.querySelectorAll('.product-card button').forEach((button, index) => {
935
+ button.addEventListener('click', () => {
936
+ const product = products[index];
937
+
938
+ // Check if product is already selected
939
+ const isSelected = selectedProducts.some(p => p.id === product.id);
940
+
941
+ if (!isSelected) {
942
+ selectedProducts.push(product);
943
+ updateSelection();
944
+
945
+ // Show checkmark animation
946
+ const icon = document.createElement('i');
947
+ icon.className = 'fas fa-check absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-2xl animated-check';
948
+
949
+ const overlay = document.createElement('div');
950
+ overlay.className = 'absolute inset-0 bg-green-500 bg-opacity-80 flex items-center justify-center';
951
+ overlay.appendChild(icon);
952
+
953
+ const card = button.closest('.product-card');
954
+ card.appendChild(overlay);
955
+
956
+ setTimeout(() => {
957
+ card.removeChild(overlay);
958
+ }, 1000);
959
+ }
960
+ });
961
+ });
962
+
963
+ // Update selection UI
964
+ function updateSelection() {
965
+ // Update item count
966
+ itemCount.textContent = selectedProducts.length;
967
+
968
+ if (selectedProducts.length > 0) {
969
+ itemCount.classList.remove('hidden');
970
+ } else {
971
+ itemCount.classList.add('hidden');
972
+ }
973
+
974
+ // Update modal content if open
975
+ if (modalOverlay.classList.contains('active')) {
976
+ renderSelectedProducts();
977
+ }
978
+ }
979
+
980
+ // Render selected products in modal
981
+ function renderSelectedProducts() {
982
+ if (selectedProducts.length === 0) {
983
+ selectedProductsContainer.innerHTML = '<p class="text-gray-500 text-center py-8">Aucun produit sélectionné pour le moment</p>';
984
+ return;
985
+ }
986
+
987
+ let html = '';
988
+ selectedProducts.forEach(product => {
989
+ html += `
990
+ <div class="flex items-center border-b border-gray-100 pb-4">
991
+ <img src="${product.image}" alt="${product.name}" class="w-16 h-16 object-cover rounded-lg">
992
+ <div class="ml-4 flex-grow">
993
+ <h4 class="font-medium">${product.name}</h4>
994
+ <p class="text-sm text-gray-600">${product.price}€ (${product.margin}% marge)</p>
995
+ </div>
996
+ <button class="text-red-500 hover:text-red-700 remove-product" data-id="${product.id}">
997
+ <i class="fas fa-trash"></i>
998
+ </button>
999
+ </div>
1000
+ `;
1001
+ });
1002
+
1003
+ selectedProductsContainer.innerHTML = html;
1004
+
1005
+ // Add event listeners to remove buttons
1006
+ document.querySelectorAll('.remove-product').forEach(button => {
1007
+ button.addEventListener('click', (e) => {
1008
+ const productId = parseInt(e.currentTarget.getAttribute('data-id'));
1009
+ selectedProducts = selectedProducts.filter(p => p.id !== productId);
1010
+ updateSelection();
1011
+ renderSelectedProducts();
1012
+ });
1013
+ });
1014
+ }
1015
+
1016
+ // Toggle modal
1017
+ fab.addEventListener('click', () => {
1018
+ modalOverlay.classList.add('active');
1019
+ renderSelectedProducts();
1020
+ });
1021
+
1022
+ closeModal.addEventListener('click', () => {
1023
+ modalOverlay.classList.remove('active');
1024
+ });
1025
+
1026
+ // Close modal when clicking outside
1027
+ modalOverlay.addEventListener('click', (e) => {
1028
+ if (e.target === modalOverlay) {
1029
+ modalOverlay.classList.remove('active');
1030
+ }
1031
+ });
1032
+
1033
+ // Profit calculator functionality
1034
+ const calculateBtn = document.querySelector('.bg-gray-50 button');
1035
+ if (calculateBtn) {
1036
+ calculateBtn.addEventListener('click', () => {
1037
+ const purchasePrice = parseFloat(document.querySelector('input[placeholder="20"]').value) || 20;
1038
+ const salePrice = parseFloat(document.querySelector('input[placeholder="50"]').value) || 50;
1039
+ const quantity = parseFloat(document.querySelector('input[placeholder="100"]').value) || 100;
1040
+
1041
+ const unitMargin = salePrice - purchasePrice;
1042
+ const monthlyProfit = unitMargin * quantity;
1043
+ const annualProfit = monthlyProfit * 12;
1044
+ const roi = ((salePrice - purchasePrice) / purchasePrice) * 100;
1045
+
1046
+ document.querySelector('.bg-gray-50 .flex.justify-between:nth-child(1) span:nth-child(2)').textContent = unitMargin.toFixed(2) + '€';
1047
+ document.querySelector('.bg-gray-50 .flex.justify-between:nth-child(2) span:nth-child(2)').textContent = monthlyProfit.toFixed(2) + '€';
1048
+ document.querySelector('.bg-gray-50 .flex.justify-between:nth-child(3) span:nth-child(2)').textContent = annualProfit.toFixed(2) + '€';
1049
+ document.querySelector('.bg-gray-50 .flex.justify-between.items-center span:nth-child(2)').textContent = roi.toFixed(0) + '%';
1050
+ });
1051
+ }
1052
+ </script>
1053
+ <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=FRENCHIIE/collection-dition-limit-e" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1054
+ </html>