Hugging Face's logo

Spaces:
ChristopheDucharme
/
vente-de-divers-articles
Running

App Files Community
ChristopheDucharme commited on
Commit
7fc1d52
·
verified ·
1 Parent(s): 647ad84

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +524 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vente De Divers Articles
3
- emoji: 🐢
4
- colorFrom: yellow
5
- colorTo: red
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: vente-de-divers-articles
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: gray
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,524 @@
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>LuxeShop - Boutique en ligne premium</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
+ .product-card:hover .product-overlay {
11
+ opacity: 1;
12
+ transform: translateY(0);
13
+ }
14
+ .testimonial-card:hover {
15
+ transform: translateY(-5px);
16
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
17
+ }
18
+ .hero-section {
19
+ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80');
20
+ background-size: cover;
21
+ background-position: center;
22
+ }
23
+ .newsletter-input:focus {
24
+ outline: none;
25
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="font-sans bg-gray-50">
30
+ <!-- Header -->
31
+ <header class="bg-white shadow-sm sticky top-0 z-50">
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-gem text-indigo-600 text-2xl"></i>
35
+ <span class="text-xl font-bold text-gray-800">LuxeShop</span>
36
+ </div>
37
+
38
+ <nav class="hidden md:flex space-x-8">
39
+ <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Accueil</a>
40
+ <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Boutique</a>
41
+ <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Nouveautés</a>
42
+ <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Collections</a>
43
+ <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Contact</a>
44
+ </nav>
45
+
46
+ <div class="flex items-center space-x-4">
47
+ <button class="text-gray-700 hover:text-indigo-600">
48
+ <i class="fas fa-search text-lg"></i>
49
+ </button>
50
+ <button class="text-gray-700 hover:text-indigo-600 relative">
51
+ <i class="fas fa-heart text-lg"></i>
52
+ <span class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
53
+ </button>
54
+ <button class="text-gray-700 hover:text-indigo-600 relative">
55
+ <i class="fas fa-shopping-cart text-lg"></i>
56
+ <span class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">5</span>
57
+ </button>
58
+ <button class="md:hidden text-gray-700" id="menu-toggle">
59
+ <i class="fas fa-bars text-xl"></i>
60
+ </button>
61
+ </div>
62
+ </div>
63
+
64
+ <!-- Mobile menu -->
65
+ <div class="md:hidden hidden bg-white py-2 px-4 shadow-md" id="mobile-menu">
66
+ <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Accueil</a>
67
+ <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Boutique</a>
68
+ <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Nouveautés</a>
69
+ <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Collections</a>
70
+ <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600">Contact</a>
71
+ </div>
72
+ </header>
73
+
74
+ <!-- Hero Section -->
75
+ <section class="hero-section text-white py-20 md:py-32">
76
+ <div class="container mx-auto px-4 text-center">
77
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Collection Exclusive 2023</h1>
78
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Découvrez nos produits premium soigneusement sélectionnés pour vous</p>
79
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
80
+ <button class="bg-indigo-600 hover:bg-indigo-700 px-8 py-3 rounded-full font-medium transition duration-300 transform hover:scale-105">
81
+ Acheter maintenant
82
+ </button>
83
+ <button class="bg-white text-gray-800 hover:bg-gray-100 px-8 py-3 rounded-full font-medium transition duration-300 transform hover:scale-105">
84
+ Voir la collection
85
+ </button>
86
+ </div>
87
+ </div>
88
+ </section>
89
+
90
+ <!-- Features -->
91
+ <section class="py-12 bg-white">
92
+ <div class="container mx-auto px-4">
93
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
94
+ <div class="flex flex-col items-center text-center p-6">
95
+ <div class="bg-indigo-100 p-4 rounded-full mb-4">
96
+ <i class="fas fa-truck text-indigo-600 text-2xl"></i>
97
+ </div>
98
+ <h3 class="text-xl font-semibold mb-2">Livraison rapide</h3>
99
+ <p class="text-gray-600">Livraison express en 24-48h partout en France</p>
100
+ </div>
101
+ <div class="flex flex-col items-center text-center p-6">
102
+ <div class="bg-indigo-100 p-4 rounded-full mb-4">
103
+ <i class="fas fa-shield-alt text-indigo-600 text-2xl"></i>
104
+ </div>
105
+ <h3 class="text-xl font-semibold mb-2">Paiement sécurisé</h3>
106
+ <p class="text-gray-600">Transactions 100% sécurisées avec cryptage SSL</p>
107
+ </div>
108
+ <div class="flex flex-col items-center text-center p-6">
109
+ <div class="bg-indigo-100 p-4 rounded-full mb-4">
110
+ <i class="fas fa-undo text-indigo-600 text-2xl"></i>
111
+ </div>
112
+ <h3 class="text-xl font-semibold mb-2">Retours faciles</h3>
113
+ <p class="text-gray-600">Retours gratuits sous 30 jours sans question</p>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </section>
118
+
119
+ <!-- Featured Products -->
120
+ <section class="py-16 bg-gray-50">
121
+ <div class="container mx-auto px-4">
122
+ <div class="text-center mb-12">
123
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Nos Produits Vedettes</h2>
124
+ <p class="text-gray-600 max-w-2xl mx-auto">Découvrez nos meilleurs produits sélectionnés avec soin par notre équipe</p>
125
+ </div>
126
+
127
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
128
+ <!-- Product 1 -->
129
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300 hover:shadow-xl">
130
+ <div class="relative overflow-hidden">
131
+ <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Montre de luxe" class="w-full h-64 object-cover">
132
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center opacity-0 transition duration-300 transform translate-y-4">
133
+ <button class="bg-white text-gray-800 px-6 py-2 rounded-full font-medium mr-2 hover:bg-gray-100">
134
+ <i class="fas fa-eye mr-1"></i> Voir
135
+ </button>
136
+ <button class="bg-indigo-600 text-white px-6 py-2 rounded-full font-medium hover:bg-indigo-700">
137
+ <i class="fas fa-shopping-cart mr-1"></i> Ajouter
138
+ </button>
139
+ </div>
140
+ <span class="absolute top-3 right-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">-20%</span>
141
+ </div>
142
+ <div class="p-4">
143
+ <div class="flex justify-between items-start mb-1">
144
+ <h3 class="font-semibold text-lg text-gray-800">Montre Classique</h3>
145
+ <div class="flex items-center">
146
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
147
+ <span class="text-gray-600 text-sm ml-1">4.8</span>
148
+ </div>
149
+ </div>
150
+ <p class="text-gray-600 text-sm mb-3">Montre en acier inoxydable avec bracelet cuir</p>
151
+ <div class="flex justify-between items-center">
152
+ <div>
153
+ <span class="text-gray-400 line-through text-sm">€299</span>
154
+ <span class="text-indigo-600 font-bold text-lg ml-2">€239</span>
155
+ </div>
156
+ <button class="text-gray-400 hover:text-indigo-600">
157
+ <i class="far fa-heart text-lg"></i>
158
+ </button>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Product 2 -->
164
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300 hover:shadow-xl">
165
+ <div class="relative overflow-hidden">
166
+ <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Bracelet en or" class="w-full h-64 object-cover">
167
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center opacity-0 transition duration-300 transform translate-y-4">
168
+ <button class="bg-white text-gray-800 px-6 py-2 rounded-full font-medium mr-2 hover:bg-gray-100">
169
+ <i class="fas fa-eye mr-1"></i> Voir
170
+ </button>
171
+ <button class="bg-indigo-600 text-white px-6 py-2 rounded-full font-medium hover:bg-indigo-700">
172
+ <i class="fas fa-shopping-cart mr-1"></i> Ajouter
173
+ </button>
174
+ </div>
175
+ </div>
176
+ <div class="p-4">
177
+ <div class="flex justify-between items-start mb-1">
178
+ <h3 class="font-semibold text-lg text-gray-800">Bracelet en Or</h3>
179
+ <div class="flex items-center">
180
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
181
+ <span class="text-gray-600 text-sm ml-1">4.9</span>
182
+ </div>
183
+ </div>
184
+ <p class="text-gray-600 text-sm mb-3">Bracelet en or 18 carats avec fermoir sécurisé</p>
185
+ <div class="flex justify-between items-center">
186
+ <div>
187
+ <span class="text-indigo-600 font-bold text-lg">€599</span>
188
+ </div>
189
+ <button class="text-gray-400 hover:text-indigo-600">
190
+ <i class="far fa-heart text-lg"></i>
191
+ </button>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Product 3 -->
197
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300 hover:shadow-xl">
198
+ <div class="relative overflow-hidden">
199
+ <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Lunettes de soleil" class="w-full h-64 object-cover">
200
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center opacity-0 transition duration-300 transform translate-y-4">
201
+ <button class="bg-white text-gray-800 px-6 py-2 rounded-full font-medium mr-2 hover:bg-gray-100">
202
+ <i class="fas fa-eye mr-1"></i> Voir
203
+ </button>
204
+ <button class="bg-indigo-600 text-white px-6 py-2 rounded-full font-medium hover:bg-indigo-700">
205
+ <i class="fas fa-shopping-cart mr-1"></i> Ajouter
206
+ </button>
207
+ </div>
208
+ <span class="absolute top-3 right-3 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">Nouveau</span>
209
+ </div>
210
+ <div class="p-4">
211
+ <div class="flex justify-between items-start mb-1">
212
+ <h3 class="font-semibold text-lg text-gray-800">Lunettes Premium</h3>
213
+ <div class="flex items-center">
214
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
215
+ <span class="text-gray-600 text-sm ml-1">4.7</span>
216
+ </div>
217
+ </div>
218
+ <p class="text-gray-600 text-sm mb-3">Lunettes de soleil polarisées avec verres UV400</p>
219
+ <div class="flex justify-between items-center">
220
+ <div>
221
+ <span class="text-indigo-600 font-bold text-lg">€179</span>
222
+ </div>
223
+ <button class="text-gray-400 hover:text-indigo-600">
224
+ <i class="far fa-heart text-lg"></i>
225
+ </button>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Product 4 -->
231
+ <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300 hover:shadow-xl">
232
+ <div class="relative overflow-hidden">
233
+ <img src="https://images.unsplash.com/photo-1584917865442-de89df76afd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Portefeuille en cuir" class="w-full h-64 object-cover">
234
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center opacity-0 transition duration-300 transform translate-y-4">
235
+ <button class="bg-white text-gray-800 px-6 py-2 rounded-full font-medium mr-2 hover:bg-gray-100">
236
+ <i class="fas fa-eye mr-1"></i> Voir
237
+ </button>
238
+ <button class="bg-indigo-600 text-white px-6 py-2 rounded-full font-medium hover:bg-indigo-700">
239
+ <i class="fas fa-shopping-cart mr-1"></i> Ajouter
240
+ </button>
241
+ </div>
242
+ </div>
243
+ <div class="p-4">
244
+ <div class="flex justify-between items-start mb-1">
245
+ <h3 class="font-semibold text-lg text-gray-800">Portefeuille Cuir</h3>
246
+ <div class="flex items-center">
247
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
248
+ <span class="text-gray-600 text-sm ml-1">4.6</span>
249
+ </div>
250
+ </div>
251
+ <p class="text-gray-600 text-sm mb-3">Portefeuille en cuir véritable avec 8 compartiments</p>
252
+ <div class="flex justify-between items-center">
253
+ <div>
254
+ <span class="text-indigo-600 font-bold text-lg">€89</span>
255
+ </div>
256
+ <button class="text-gray-400 hover:text-indigo-600">
257
+ <i class="far fa-heart text-lg"></i>
258
+ </button>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <div class="text-center mt-12">
265
+ <button class="border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-600 hover:text-white px-8 py-3 rounded-full font-medium transition duration-300">
266
+ Voir tous les produits
267
+ </button>
268
+ </div>
269
+ </div>
270
+ </section>
271
+
272
+ <!-- Banner -->
273
+ <section class="py-16 bg-indigo-600 text-white">
274
+ <div class="container mx-auto px-4 text-center">
275
+ <h2 class="text-3xl font-bold mb-4">Soldes d'Été</h2>
276
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Profitez de réductions exceptionnelles jusqu'à 40% sur toute la boutique</p>
277
+ <div class="flex justify-center">
278
+ <div class="bg-white text-indigo-600 px-6 py-2 rounded-full font-bold text-lg">
279
+ <span id="days">00</span>j <span id="hours">00</span>h <span id="minutes">00</span>m <span id="seconds">00</span>s
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </section>
284
+
285
+ <!-- Testimonials -->
286
+ <section class="py-16 bg-white">
287
+ <div class="container mx-auto px-4">
288
+ <div class="text-center mb-12">
289
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Ce que disent nos clients</h2>
290
+ <p class="text-gray-600 max-w-2xl mx-auto">Découvrez les avis de nos clients satisfaits</p>
291
+ </div>
292
+
293
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
294
+ <!-- Testimonial 1 -->
295
+ <div class="bg-gray-50 p-8 rounded-lg testimonial-card transition duration-300">
296
+ <div class="flex items-center mb-4">
297
+ <div class="flex items-center">
298
+ <i class="fas fa-star text-yellow-400"></i>
299
+ <i class="fas fa-star text-yellow-400"></i>
300
+ <i class="fas fa-star text-yellow-400"></i>
301
+ <i class="fas fa-star text-yellow-400"></i>
302
+ <i class="fas fa-star text-yellow-400"></i>
303
+ </div>
304
+ </div>
305
+ <p class="text-gray-600 mb-6">"La montre est encore plus belle en vrai que sur les photos. La livraison a été ultra rapide et l'emballage soigné. Je recommande vivement ce site!"</p>
306
+ <div class="flex items-center">
307
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
308
+ <div>
309
+ <h4 class="font-semibold text-gray-800">Sophie Martin</h4>
310
+ <p class="text-gray-500 text-sm">Paris, France</p>
311
+ </div>
312
+ </div>
313
+ </div>
314
+
315
+ <!-- Testimonial 2 -->
316
+ <div class="bg-gray-50 p-8 rounded-lg testimonial-card transition duration-300">
317
+ <div class="flex items-center mb-4">
318
+ <div class="flex items-center">
319
+ <i class="fas fa-star text-yellow-400"></i>
320
+ <i class="fas fa-star text-yellow-400"></i>
321
+ <i class="fas fa-star text-yellow-400"></i>
322
+ <i class="fas fa-star text-yellow-400"></i>
323
+ <i class="fas fa-star text-yellow-400"></i>
324
+ </div>
325
+ </div>
326
+ <p class="text-gray-600 mb-6">"Le bracelet en or est d'une qualité exceptionnelle. Le service client a été très réactif à mes questions avant l'achat. Je reviendrai sans hésiter."</p>
327
+ <div class="flex items-center">
328
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
329
+ <div>
330
+ <h4 class="font-semibold text-gray-800">Thomas Dubois</h4>
331
+ <p class="text-gray-500 text-sm">Lyon, France</p>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Testimonial 3 -->
337
+ <div class="bg-gray-50 p-8 rounded-lg testimonial-card transition duration-300">
338
+ <div class="flex items-center mb-4">
339
+ <div class="flex items-center">
340
+ <i class="fas fa-star text-yellow-400"></i>
341
+ <i class="fas fa-star text-yellow-400"></i>
342
+ <i class="fas fa-star text-yellow-400"></i>
343
+ <i class="fas fa-star text-yellow-400"></i>
344
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
345
+ </div>
346
+ </div>
347
+ <p class="text-gray-600 mb-6">"Les lunettes de soleil sont parfaites, très confortables et élégantes. Le seul petit bémol: le délai de livraison un peu long, mais le produit en vaut la peine."</p>
348
+ <div class="flex items-center">
349
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
350
+ <div>
351
+ <h4 class="font-semibold text-gray-800">Émilie Leroy</h4>
352
+ <p class="text-gray-500 text-sm">Marseille, France</p>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </section>
359
+
360
+ <!-- Newsletter -->
361
+ <section class="py-16 bg-gray-100">
362
+ <div class="container mx-auto px-4">
363
+ <div class="max-w-3xl mx-auto text-center bg-white p-8 rounded-lg shadow-sm">
364
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Abonnez-vous à notre newsletter</h2>
365
+ <p class="text-gray-600 mb-6">Recevez en exclusivité nos offres spéciales, nouveautés et conseils style directement dans votre boîte mail.</p>
366
+ <div class="flex flex-col sm:flex-row gap-2 max-w-md mx-auto">
367
+ <input type="email" placeholder="Votre adresse email" class="flex-grow px-4 py-3 border border-gray-300 rounded-lg newsletter-input focus:border-indigo-500">
368
+ <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 whitespace-nowrap">
369
+ S'abonner
370
+ </button>
371
+ </div>
372
+ <p class="text-gray-400 text-xs mt-3">Nous ne partagerons jamais votre email. Désabonnez-vous à tout moment.</p>
373
+ </div>
374
+ </div>
375
+ </section>
376
+
377
+ <!-- Footer -->
378
+ <footer class="bg-gray-800 text-white pt-16 pb-8">
379
+ <div class="container mx-auto px-4">
380
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
381
+ <div>
382
+ <div class="flex items-center space-x-2 mb-4">
383
+ <i class="fas fa-gem text-indigo-400 text-2xl"></i>
384
+ <span class="text-xl font-bold">LuxeShop</span>
385
+ </div>
386
+ <p class="text-gray-400 mb-4">Votre destination premium pour des accessoires de qualité supérieure.</p>
387
+ <div class="flex space-x-4">
388
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook-f"></i></a>
389
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a>
390
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
391
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-pinterest-p"></i></a>
392
+ </div>
393
+ </div>
394
+
395
+ <div>
396
+ <h3 class="text-lg font-semibold mb-4">Boutique</h3>
397
+ <ul class="space-y-2">
398
+ <li><a href="#" class="text-gray-400 hover:text-white">Montres</a></li>
399
+ <li><a href="#" class="text-gray-400 hover:text-white">Bijoux</a></li>
400
+ <li><a href="#" class="text-gray-400 hover:text-white">Accessoires</a></li>
401
+ <li><a href="#" class="text-gray-400 hover:text-white">Nouveautés</a></li>
402
+ <li><a href="#" class="text-gray-400 hover:text-white">Promotions</a></li>
403
+ </ul>
404
+ </div>
405
+
406
+ <div>
407
+ <h3 class="text-lg font-semibold mb-4">Informations</h3>
408
+ <ul class="space-y-2">
409
+ <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
410
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
411
+ <li><a href="#" class="text-gray-400 hover:text-white">Livraison</a></li>
412
+ <li><a href="#" class="text-gray-400 hover:text-white">Paiement</a></li>
413
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
414
+ </ul>
415
+ </div>
416
+
417
+ <div>
418
+ <h3 class="text-lg font-semibold mb-4">Service Client</h3>
419
+ <ul class="space-y-2">
420
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
421
+ <li><a href="#" class="text-gray-400 hover:text-white">Retours</a></li>
422
+ <li><a href="#" class="text-gray-400 hover:text-white">Garantie</a></li>
423
+ <li><a href="#" class="text-gray-400 hover:text-white">Confidentialité</a></li>
424
+ <li><a href="#" class="text-gray-400 hover:text-white">Conditions</a></li>
425
+ </ul>
426
+ </div>
427
+ </div>
428
+
429
+ <div class="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
430
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 LuxeShop. Tous droits réservés.</p>
431
+ <div class="flex space-x-6">
432
+ <img src="https://via.placeholder.com/40x25?text=VISA" alt="Visa" class="h-6">
433
+ <img src="https://via.placeholder.com/40x25?text=MC" alt="Mastercard" class="h-6">
434
+ <img src="https://via.placeholder.com/40x25?text=PP" alt="PayPal" class="h-6">
435
+ <img src="https://via.placeholder.com/40x25?text=CB" alt="CB" class="h-6">
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </footer>
440
+
441
+ <script>
442
+ // Mobile menu toggle
443
+ document.getElementById('menu-toggle').addEventListener('click', function() {
444
+ const menu = document.getElementById('mobile-menu');
445
+ menu.classList.toggle('hidden');
446
+ });
447
+
448
+ // Countdown timer
449
+ function updateCountdown() {
450
+ const now = new Date();
451
+ const endDate = new Date();
452
+ endDate.setDate(now.getDate() + 7); // 7 days from now
453
+
454
+ const diff = endDate - now;
455
+
456
+ const days = Math.floor(diff / (1000 * 60 * 60 * 24));
457
+ const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
458
+ const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
459
+ const seconds = Math.floor((diff % (1000 * 60)) / 1000);
460
+
461
+ document.getElementById('days').textContent = days.toString().padStart(2, '0');
462
+ document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
463
+ document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
464
+ document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
465
+ }
466
+
467
+ setInterval(updateCountdown, 1000);
468
+ updateCountdown();
469
+
470
+ // Add to cart animation
471
+ const addButtons = document.querySelectorAll('.product-overlay button:last-child');
472
+ addButtons.forEach(button => {
473
+ button.addEventListener('click', function(e) {
474
+ e.preventDefault();
475
+ const cartCount = document.querySelector('.fa-shopping-cart').nextElementSibling;
476
+ let count = parseInt(cartCount.textContent);
477
+ cartCount.textContent = count + 1;
478
+
479
+ // Animation
480
+ cartCount.classList.add('animate-bounce');
481
+ setTimeout(() => {
482
+ cartCount.classList.remove('animate-bounce');
483
+ }, 1000);
484
+
485
+ // Show added notification
486
+ const notification = document.createElement('div');
487
+ notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg';
488
+ notification.textContent = 'Produit ajouté au panier!';
489
+ document.body.appendChild(notification);
490
+
491
+ setTimeout(() => {
492
+ notification.remove();
493
+ }, 3000);
494
+ });
495
+ });
496
+
497
+ // Wishlist toggle
498
+ const wishlistButtons = document.querySelectorAll('.product-card button:last-child');
499
+ wishlistButtons.forEach(button => {
500
+ button.addEventListener('click', function(e) {
501
+ e.preventDefault();
502
+ const icon = this.querySelector('i');
503
+ if (icon.classList.contains('far')) {
504
+ icon.classList.remove('far');
505
+ icon.classList.add('fas', 'text-red-500');
506
+
507
+ // Update wishlist count
508
+ const wishlistCount = document.querySelector('.fa-heart').nextElementSibling;
509
+ let count = parseInt(wishlistCount.textContent);
510
+ wishlistCount.textContent = count + 1;
511
+ } else {
512
+ icon.classList.remove('fas', 'text-red-500');
513
+ icon.classList.add('far');
514
+
515
+ // Update wishlist count
516
+ const wishlistCount = document.querySelector('.fa-heart').nextElementSibling;
517
+ let count = parseInt(wishlistCount.textContent);
518
+ wishlistCount.textContent = count - 1;
519
+ }
520
+ });
521
+ });
522
+ </script>
523
+ <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=ChristopheDucharme/vente-de-divers-articles" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
524
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Crée une page de vente en ligne