Hugging Face's logo

Spaces:
docto41
/
ai-marketplace
Running

App Files Community
docto41 commited on
Commit
960a7a3
·
verified ·
1 Parent(s): ea3d5a7

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +322 -367
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,37 +3,28 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AI Marketplace - Boutons d'Assistance IA</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://js.stripe.com/v3/"></script>
10
  <style>
11
  @keyframes float {
12
  0%, 100% { transform: translateY(0); }
13
- 50% { transform: translateY(-20px); }
14
- }
15
- @keyframes pulse {
16
- 0%, 100% { transform: scale(1); }
17
- 50% { transform: scale(1.05); }
18
  }
19
  .floating { animation: float 6s ease-in-out infinite; }
20
- .pulse { animation: pulse 2s infinite; }
21
- .gradient-bg {
22
- background: linear-gradient(135deg, #6e8efb, #a777e3);
23
- }
24
- .btn-ai {
25
- transition: all 0.3s ease;
26
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
27
- }
28
- .btn-ai:hover {
29
- transform: translateY(-3px);
30
- box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
31
- }
32
  .glass-effect {
33
  background: rgba(255, 255, 255, 0.1);
34
  backdrop-filter: blur(10px);
35
  border: 1px solid rgba(255, 255, 255, 0.2);
36
  }
 
 
 
 
 
 
 
 
37
  .locked-feature {
38
  position: relative;
39
  overflow: hidden;
@@ -45,13 +36,12 @@
45
  left: 0;
46
  right: 0;
47
  bottom: 0;
48
- background: rgba(0, 0, 0, 0.7);
49
  display: flex;
50
  align-items: center;
51
  justify-content: center;
52
  color: white;
53
  font-weight: bold;
54
- font-size: 1.2rem;
55
  }
56
  .locked-feature::before {
57
  content: '\f023';
@@ -61,10 +51,20 @@
61
  top: 50%;
62
  left: 50%;
63
  transform: translate(-50%, -50%);
64
- font-size: 2rem;
65
  color: white;
66
  z-index: 2;
67
  }
 
 
 
 
 
 
 
 
 
 
68
  </style>
69
  </head>
70
  <body class="min-h-screen bg-gray-900 text-white">
@@ -75,23 +75,22 @@
75
  <div class="absolute top-10 left-20 w-32 h-32 rounded-full bg-purple-600 opacity-20 floating" style="animation-delay: 0s;"></div>
76
  <div class="absolute top-1/3 right-20 w-40 h-40 rounded-full bg-blue-600 opacity-20 floating" style="animation-delay: 1s;"></div>
77
  <div class="absolute bottom-20 left-1/4 w-24 h-24 rounded-full bg-indigo-600 opacity-20 floating" style="animation-delay: 2s;"></div>
78
- <div class="absolute bottom-1/3 right-1/3 w-28 h-28 rounded-full bg-pink-600 opacity-20 floating" style="animation-delay: 3s;"></div>
79
  </div>
80
  </div>
81
 
82
  <!-- Header -->
83
  <header class="relative z-10 glass-effect shadow-lg">
84
- <div class="container mx-auto px-4 py-6 flex justify-between items-center">
85
  <div class="flex items-center space-x-2">
86
  <i class="fas fa-robot text-3xl text-purple-400"></i>
87
  <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-400">
88
- AI Marketplace
89
  </h1>
90
  </div>
91
  <div class="flex items-center space-x-4">
92
  <button id="cartBtn" class="relative p-2 rounded-full hover:bg-gray-800 transition">
93
  <i class="fas fa-shopping-cart text-xl"></i>
94
- <span id="cartCount" class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">0</span>
95
  </button>
96
  <button id="loginBtn" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition">
97
  <i class="fas fa-user mr-2"></i>Connexion
@@ -103,232 +102,143 @@
103
  <!-- Main Content -->
104
  <main class="relative z-10 container mx-auto px-4 py-8">
105
  <!-- Hero Section -->
106
- <section class="mb-16 text-center">
107
  <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-400">
108
- 986,200 Boutons d'Assistance IA
109
  </h2>
110
- <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8">
111
- Accédez à notre collection massive de boutons d'assistance IA ultra-puissants pour tous vos besoins.
112
  </p>
113
  <div class="flex justify-center space-x-4">
114
  <button id="subscribeBtn" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 rounded-lg font-semibold text-lg transition transform hover:scale-105">
115
- <i class="fas fa-crown mr-2"></i>S'abonner Gratuitement
116
- </button>
117
- <button id="exploreBtn" class="px-6 py-3 glass-effect hover:bg-gray-800 rounded-lg font-semibold text-lg transition transform hover:scale-105">
118
- <i class="fas fa-compass mr-2"></i>Explorer
119
  </button>
120
  </div>
121
  </section>
122
 
123
- <!-- AI Buttons Grid -->
124
- <section class="mb-16">
125
- <h3 class="text-2xl font-bold mb-6 flex items-center">
126
- <i class="fas fa-star mr-2 text-yellow-400"></i>Boutons IA Populaires
127
- </h3>
128
- <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
129
- <!-- AI Button 1 -->
130
- <div id="ai-button-1" class="bg-gray-800 rounded-xl overflow-hidden glass-effect hover:bg-gray-700 transition transform hover:-translate-y-1">
131
- <div class="p-4">
132
- <div class="w-full h-32 bg-gradient-to-br from-purple-500 to-blue-500 rounded-lg mb-3 flex items-center justify-center">
133
- <i class="fas fa-brain text-5xl text-white opacity-80"></i>
134
- </div>
135
- <h4 class="font-semibold mb-1">Générateur de Contenu IA</h4>
136
- <p class="text-sm text-gray-400 mb-3">Créez du contenu unique en quelques secondes</p>
137
- <div class="flex justify-between items-center">
138
- <span class="text-purple-400 font-bold">9.99€</span>
139
- <button class="add-to-cart px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm transition" data-id="1" data-name="Générateur de Contenu IA" data-price="9.99">
140
- <i class="fas fa-cart-plus"></i>
141
- </button>
142
- </div>
143
- </div>
144
- </div>
145
-
146
- <!-- AI Button 2 -->
147
- <div id="ai-button-2" class="bg-gray-800 rounded-xl overflow-hidden glass-effect hover:bg-gray-700 transition transform hover:-translate-y-1">
148
- <div class="p-4">
149
- <div class="w-full h-32 bg-gradient-to-br from-pink-500 to-red-500 rounded-lg mb-3 flex items-center justify-center">
150
- <i class="fas fa-image text-5xl text-white opacity-80"></i>
151
- </div>
152
- <h4 class="font-semibold mb-1">Générateur d'Images IA</h4>
153
- <p class="text-sm text-gray-400 mb-3">Créez des images à partir de descriptions</p>
154
- <div class="flex justify-between items-center">
155
- <span class="text-purple-400 font-bold">14.99€</span>
156
- <button class="add-to-cart px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm transition" data-id="2" data-name="Générateur d'Images IA" data-price="14.99">
157
- <i class="fas fa-cart-plus"></i>
158
- </button>
159
- </div>
160
- </div>
161
- </div>
162
-
163
- <!-- AI Button 3 -->
164
- <div id="ai-button-3" class="bg-gray-800 rounded-xl overflow-hidden glass-effect hover:bg-gray-700 transition transform hover:-translate-y-1">
165
- <div class="p-4">
166
- <div class="w-full h-32 bg-gradient-to-br from-green-500 to-teal-500 rounded-lg mb-3 flex items-center justify-center">
167
- <i class="fas fa-code text-5xl text-white opacity-80"></i>
168
- </div>
169
- <h4 class="font-semibold mb-1">Assistant Code IA</h4>
170
- <p class="text-sm text-gray-400 mb-3">Générez et optimisez du code automatiquement</p>
171
- <div class="flex justify-between items-center">
172
- <span class="text-purple-400 font-bold">19.99€</span>
173
- <button class="add-to-cart px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm transition" data-id="3" data-name="Assistant Code IA" data-price="19.99">
174
- <i class="fas fa-cart-plus"></i>
175
- </button>
176
- </div>
177
- </div>
178
- </div>
179
-
180
- <!-- AI Button 4 -->
181
- <div id="ai-button-4" class="bg-gray-800 rounded-xl overflow-hidden glass-effect hover:bg-gray-700 transition transform hover:-translate-y-1">
182
- <div class="p-4">
183
- <div class="w-full h-32 bg-gradient-to-br from-yellow-500 to-orange-500 rounded-lg mb-3 flex items-center justify-center">
184
- <i class="fas fa-chart-line text-5xl text-white opacity-80"></i>
185
- </div>
186
- <h4 class="font-semibold mb-1">Analyse de Marché IA</h4>
187
- <p class="text-sm text-gray-400 mb-3">Analysez les tendances du marché en temps réel</p>
188
- <div class="flex justify-between items-center">
189
- <span class="text-purple-400 font-bold">24.99€</span>
190
- <button class="add-to-cart px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm transition" data-id="4" data-name="Analyse de Marché IA" data-price="24.99">
191
- <i class="fas fa-cart-plus"></i>
192
- </button>
193
- </div>
194
- </div>
195
- </div>
196
-
197
- <!-- AI Button 5 -->
198
- <div id="ai-button-5" class="bg-gray-800 rounded-xl overflow-hidden glass-effect hover:bg-gray-700 transition transform hover:-translate-y-1">
199
- <div class="p-4">
200
- <div class="w-full h-32 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-lg mb-3 flex items-center justify-center">
201
- <i class="fas fa-language text-5xl text-white opacity-80"></i>
202
- </div>
203
- <h4 class="font-semibold mb-1">Traducteur IA Avancé</h4>
204
- <p class="text-sm text-gray-400 mb-3">Traduisez avec précision dans 50+ langues</p>
205
- <div class="flex justify-between items-center">
206
- <span class="text-purple-400 font-bold">12.99€</span>
207
- <button class="add-to-cart px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm transition" data-id="5" data-name="Traducteur IA Avancé" data-price="12.99">
208
- <i class="fas fa-cart-plus"></i>
209
- </button>
210
- </div>
211
- </div>
212
- </div>
213
  </div>
214
- </section>
215
-
216
- <!-- More AI Buttons Section -->
217
- <section>
218
- <h3 class="text-2xl font-bold mb-6 flex items-center">
219
- <i class="fas fa-bolt mr-2 text-yellow-400"></i>Autres Boutons IA Puissants
220
- </h3>
221
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
222
- <!-- 6 more AI buttons -->
223
- <div id="ai-button-6" class="bg-gray-800 rounded-lg p-4 glass-effect hover:bg-gray-700 transition">
224
- <div class="flex items-start">
225
- <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mr-3">
226
- <i class="fas fa-microphone text-xl"></i>
227
- </div>
228
- <div>
229
- <h4 class="font-semibold">Assistant Vocal IA</h4>
230
- <p class="text-sm text-gray-400">Contrôle vocal avancé pour vos applications</p>
231
- <div class="flex justify-between items-center mt-2">
232
- <span class="text-purple-400 font-bold">8.99€</span>
233
- <button class="add-to-cart px-2 py-1 bg-purple-600 hover:bg-purple-700 rounded text-xs transition" data-id="6" data-name="Assistant Vocal IA" data-price="8.99">
234
- <i class="fas fa-cart-plus"></i>
235
- </button>
236
- </div>
237
- </div>
238
- </div>
239
- </div>
240
-
241
- <div id="ai-button-7" class="bg-gray-800 rounded-lg p-4 glass-effect hover:bg-gray-700 transition">
242
- <div class="flex items-start">
243
- <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mr-3">
244
- <i class="fas fa-video text-xl"></i>
245
- </div>
246
- <div>
247
- <h4 class="font-semibold">Éditeur Vidéo IA</h4>
248
- <p class="text-sm text-gray-400">Montage vidéo automatisé avec intelligence</p>
249
- <div class="flex justify-between items-center mt-2">
250
- <span class="text-purple-400 font-bold">17.99€</span>
251
- <button class="add-to-cart px-2 py-1 bg-purple-600 hover:bg-purple-700 rounded text-xs transition" data-id="7" data-name="Éditeur Vidéo IA" data-price="17.99">
252
- <i class="fas fa-cart-plus"></i>
253
- </button>
254
- </div>
255
- </div>
256
- </div>
257
- </div>
258
-
259
- <div id="ai-button-8" class="bg-gray-800 rounded-lg p-4 glass-effect hover:bg-gray-700 transition">
260
- <div class="flex items-start">
261
- <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center mr-3">
262
- <i class="fas fa-music text-xl"></i>
263
- </div>
264
- <div>
265
- <h4 class="font-semibold">Compositeur Musical IA</h4>
266
- <p class="text-sm text-gray-400">Créez des musiques originales en quelques clics</p>
267
- <div class="flex justify-between items-center mt-2">
268
- <span class="text-purple-400 font-bold">21.99€</span>
269
- <button class="add-to-cart px-2 py-1 bg-purple-600 hover:bg-purple-700 rounded text-xs transition" data-id="8" data-name="Compositeur Musical IA" data-price="21.99">
270
- <i class="fas fa-cart-plus"></i>
271
- </button>
272
- </div>
273
- </div>
274
- </div>
275
- </div>
276
-
277
- <div id="ai-button-9" class="bg-gray-800 rounded-lg p-4 glass-effect hover:bg-gray-700 transition">
278
- <div class="flex items-start">
279
- <div class="w-12 h-12 bg-red-500 rounded-lg flex items-center justify-center mr-3">
280
- <i class="fas fa-robot text-xl"></i>
281
- </div>
282
- <div>
283
- <h4 class="font-semibold">Chatbot IA Avancé</h4>
284
- <p class="text-sm text-gray-400">Solution de chatbot conversationnel intelligent</p>
285
- <div class="flex justify-between items-center mt-2">
286
- <span class="text-purple-400 font-bold">15.99€</span>
287
- <button class="add-to-cart px-2 py-1 bg-purple-600 hover:bg-purple-700 rounded text-xs transition" data-id="9" data-name="Chatbot IA Avancé" data-price="15.99">
288
- <i class="fas fa-cart-plus"></i>
289
- </button>
290
- </div>
291
- </div>
292
- </div>
293
- </div>
294
 
295
- <div id="ai-button-10" class="bg-gray-800 rounded-lg p-4 glass-effect hover:bg-gray-700 transition">
296
- <div class="flex items-start">
297
- <div class="w-12 h-12 bg-indigo-500 rounded-lg flex items-center justify-center mr-3">
298
- <i class="fas fa-chart-pie text-xl"></i>
299
- </div>
300
- <div>
301
- <h4 class="font-semibold">Analyse de Données IA</h4>
302
- <p class="text-sm text-gray-400">Découvrez des insights cachés dans vos données</p>
303
- <div class="flex justify-between items-center mt-2">
304
- <span class="text-purple-400 font-bold">22.99€</span>
305
- <button class="add-to-cart px-2 py-1 bg-purple-600 hover:bg-purple-700 rounded text-xs transition" data-id="10" data-name="Analyse de Données IA" data-price="22.99">
306
- <i class="fas fa-cart-plus"></i>
307
- </button>
308
- </div>
309
- </div>
310
- </div>
311
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
312
 
313
- <div id="ai-button-11" class="bg-gray-800 rounded-lg p-4 glass-effect hover:bg-gray-700 transition">
314
- <div class="flex items-start">
315
- <div class="w-12 h-12 bg-yellow-500 rounded-lg flex items-center justify-center mr-3">
316
- <i class="fas fa-search-dollar text-xl"></i>
317
- </div>
318
- <div>
319
- <h4 class="font-semibold">Optimisation SEO IA</h4>
320
- <p class="text-sm text-gray-400">Améliorez votre référencement automatiquement</p>
321
- <div class="flex justify-between items-center mt-2">
322
- <span class="text-purple-400 font-bold">11.99€</span>
323
- <button class="add-to-cart px-2 py-1 bg-purple-600 hover:bg-purple-700 rounded text-xs transition" data-id="11" data-name="Optimisation SEO IA" data-price="11.99">
324
- <i class="fas fa-cart-plus"></i>
325
- </button>
326
- </div>
327
- </div>
328
- </div>
329
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
330
  </div>
331
  </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
332
  </main>
333
 
334
  <!-- Footer -->
@@ -336,25 +246,25 @@
336
  <div class="container mx-auto px-4 py-8">
337
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
338
  <div>
339
- <h4 class="text-lg font-semibold mb-4">AI Marketplace</h4>
340
- <p class="text-gray-400">La plus grande collection de boutons d'assistance IA pour tous vos besoins professionnels et personnels.</p>
341
  </div>
342
  <div>
343
  <h4 class="text-lg font-semibold mb-4">Navigation</h4>
344
  <ul class="space-y-2">
345
  <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
346
- <li><a href="#" class="text-gray-400 hover:text-white transition">Boutons IA</a></li>
347
  <li><a href="#" class="text-gray-400 hover:text-white transition">Abonnements</a></li>
348
- <li><a href="#" class="text-gray-400 hover:text-white transition">Tableau de bord</a></li>
349
  </ul>
350
  </div>
351
  <div>
352
  <h4 class="text-lg font-semibold mb-4">Support</h4>
353
  <ul class="space-y-2">
354
- <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
355
  <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
356
  <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li>
357
- <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions d'utilisation</a></li>
 
358
  </ul>
359
  </div>
360
  <div>
@@ -369,12 +279,15 @@
369
  <div class="p-2 bg-gray-700 rounded">
370
  <i class="fab fa-cc-visa text-2xl text-blue-600"></i>
371
  </div>
 
 
 
372
  </div>
373
- <p class="text-gray-400 text-sm">Tous les paiements sont sécurisés et cryptés.</p>
374
  </div>
375
  </div>
376
  <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
377
- <p>&copy; 2023 AI Marketplace. Tous droits réservés.</p>
378
  </div>
379
  </div>
380
  </footer>
@@ -441,15 +354,16 @@
441
  <button id="closeSubscribeModal" class="absolute top-4 right-4 text-gray-400 hover:text-white">
442
  <i class="fas fa-times text-xl"></i>
443
  </button>
444
- <h3 class="text-2xl font-bold mb-6 text-center">Abonnement Gratuit</h3>
445
  <div class="grid md:grid-cols-2 gap-6 mb-8">
446
  <div class="bg-gray-700 rounded-lg p-6 hover:bg-gray-600 transition">
447
  <h4 class="text-xl font-semibold mb-2">Gratuit</h4>
448
  <p class="text-3xl font-bold mb-4">0€<span class="text-sm font-normal text-gray-400">/mois</span></p>
449
  <ul class="space-y-2 mb-6">
450
- <li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> Accès à 10 boutons IA</li>
451
- <li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> Support de base</li>
452
- <li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> 100 requêtes/mois</li>
 
453
  </ul>
454
  <button id="selectFreeBtn" class="w-full py-2 bg-gray-600 hover:bg-gray-500 rounded-lg font-medium transition">
455
  Sélectionner
@@ -459,10 +373,10 @@
459
  <h4 class="text-xl font-semibold mb-2">Premium</h4>
460
  <p class="text-3xl font-bold mb-4">29.99€<span class="text-sm font-normal text-gray-200">/mois</span></p>
461
  <ul class="space-y-2 mb-6">
462
- <li class="flex items-center"><i class="fas fa-check text-white mr-2"></i> Accès illimité à tous les boutons IA</li>
463
  <li class="flex items-center"><i class="fas fa-check text-white mr-2"></i> Support prioritaire</li>
464
  <li class="flex items-center"><i class="fas fa-check text-white mr-2"></i> Requêtes illimitées</li>
465
- <li class="flex items-center"><i class="fas fa-check text-white mr-2"></i> Fonctionnalités avancées</li>
466
  </ul>
467
  <button id="selectPremiumBtn" class="w-full py-2 bg-white hover:bg-gray-100 text-purple-600 rounded-lg font-medium transition">
468
  Sélectionner
@@ -524,7 +438,6 @@
524
  <i class="fas fa-shopping-cart mr-2"></i>Votre Panier
525
  </h3>
526
  <div id="cartItems" class="max-h-96 overflow-y-auto mb-4">
527
- <!-- Cart items will be added here dynamically -->
528
  <p class="text-gray-400 text-center py-8">Votre panier est vide</p>
529
  </div>
530
  <div class="border-t border-gray-700 pt-4">
@@ -610,6 +523,49 @@
610
  </div>
611
  </div>
612
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
613
  <div class="bg-gray-700 rounded-lg p-6 mb-8">
614
  <h4 class="text-xl font-semibold mb-4 flex items-center">
615
  <i class="fas fa-history mr-2 text-purple-400"></i>Historique des paiements
@@ -622,6 +578,7 @@
622
  <th class="pb-2">Montant</th>
623
  <th class="pb-2">Méthode</th>
624
  <th class="pb-2">Statut</th>
 
625
  </tr>
626
  </thead>
627
  <tbody>
@@ -632,6 +589,11 @@
632
  <i class="fab fa-cc-paypal text-blue-400 mr-2"></i> PayPal
633
  </td>
634
  <td><span class="px-2 py-1 bg-green-900 text-green-300 rounded text-sm">Complété</span></td>
 
 
 
 
 
635
  </tr>
636
  <tr class="border-b border-gray-600">
637
  <td class="py-3">15/02/2023</td>
@@ -640,6 +602,11 @@
640
  <i class="fab fa-cc-paypal text-blue-400 mr-2"></i> PayPal
641
  </td>
642
  <td><span class="px-2 py-1 bg-green-900 text-green-300 rounded text-sm">Complété</span></td>
 
 
 
 
 
643
  </tr>
644
  <tr>
645
  <td class="py-3">15/01/2023</td>
@@ -648,6 +615,11 @@
648
  <i class="fab fa-cc-stripe text-purple-400 mr-2"></i> Stripe
649
  </td>
650
  <td><span class="px-2 py-1 bg-green-900 text-green-300 rounded text-sm">Complété</span></td>
 
 
 
 
 
651
  </tr>
652
  </tbody>
653
  </table>
@@ -709,9 +681,9 @@
709
  <h4 class="text-xl font-semibold mb-4 flex items-center">
710
  <i class="fas fa-robot mr-2"></i>Produits IA
711
  </h4>
712
- <p class="text-3xl font-bold mb-4">986,200</p>
713
  <div class="flex justify-between text-sm">
714
- <span>Actifs: <span class="font-bold">986,200</span></span>
715
  <span>Populaires: <span class="font-bold">12</span></span>
716
  </div>
717
  <button id="manageProductsBtn" class="mt-4 w-full py-2 bg-white hover:bg-gray-100 text-red-600 rounded-lg transition">
@@ -720,6 +692,53 @@
720
  </div>
721
  </div>
722
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
723
  <div class="bg-gray-700 rounded-lg p-6 mb-8">
724
  <h4 class="text-xl font-semibold mb-4 flex items-center">
725
  <i class="fas fa-chart-line mr-2 text-blue-400"></i>Statistiques
@@ -827,7 +846,6 @@
827
  const clearCartBtn = document.getElementById('clearCartBtn');
828
  const checkoutBtn = document.getElementById('checkoutBtn');
829
  const cartCount = document.getElementById('cartCount');
830
- const addToCartButtons = document.querySelectorAll('.add-to-cart');
831
  const loginBtn = document.getElementById('loginBtn');
832
  const loginModal = document.getElementById('loginModal');
833
  const closeLoginModal = document.getElementById('closeLoginModal');
@@ -896,6 +914,11 @@
896
  btn.disabled = false;
897
  btn.classList.remove('opacity-50', 'cursor-not-allowed');
898
  });
 
 
 
 
 
899
  } else {
900
  loginBtn.innerHTML = '<i class="fas fa-user mr-2"></i>Mon compte';
901
  loginBtn.removeEventListener('click', loginBtnClickHandler);
@@ -1027,17 +1050,22 @@
1027
  paymentModal.classList.remove('hidden');
1028
  });
1029
 
1030
- addToCartButtons.forEach(button => {
1031
- button.addEventListener('click', () => {
 
 
 
1032
  if (!isSubscribed && !isAdmin) {
1033
  showSuccess('Veuillez vous abonner pour ajouter des articles');
1034
  subscribeModal.classList.remove('hidden');
1035
  return;
1036
  }
1037
 
1038
- const id = button.getAttribute('data-id');
1039
- const name = button.getAttribute('data-name');
1040
- const price = parseFloat(button.getAttribute('data-price'));
 
 
1041
 
1042
  // Check if item already in cart
1043
  const existingItem = cart.find(item => item.id === id);
@@ -1061,7 +1089,7 @@
1061
  setTimeout(() => {
1062
  cartBtn.classList.remove('pulse');
1063
  }, 1000);
1064
- });
1065
  });
1066
 
1067
  // Login/Register functionality
@@ -1120,44 +1148,45 @@
1120
  paymentModal.classList.add('hidden');
1121
  });
1122
 
1123
- paypalBtn.addEventListener('click', () => {
1124
- // In a real app, this would redirect to PayPal
1125
- showSuccess('Redirection vers PayPal...');
1126
- setTimeout(() => {
1127
- if (currentUser) {
1128
- currentUser.subscribed = true;
1129
- isSubscribed = true;
1130
- localStorage.setItem('aiMarketplaceUser', JSON.stringify(currentUser));
1131
-
1132
- updateUIAfterLogin();
1133
- paymentModal.classList.add('hidden');
1134
- showSuccess('Paiement réussi via PayPal! Abonnement Premium activé!');
1135
- }
1136
- }, 2000);
1137
  });
1138
 
1139
- stripeBtn.addEventListener('click', () => {
1140
- // In a real app, this would process via Stripe
1141
- showSuccess('Traitement du paiement Stripe...');
1142
- setTimeout(() => {
1143
- if (currentUser) {
1144
- currentUser.subscribed = true;
1145
- isSubscribed = true;
1146
- localStorage.setItem('aiMarketplaceUser', JSON.stringify(currentUser));
1147
-
1148
- updateUIAfterLogin();
1149
- paymentModal.classList.add('hidden');
1150
- showSuccess('Paiement réussi via Stripe! Abonnement Premium activé!');
1151
- }
1152
- }, 2000);
1153
  });
1154
 
1155
  confirmPaymentBtn.addEventListener('click', () => {
1156
- // This would confirm the selected payment method
1157
  if (paypalBtn.classList.contains('bg-purple-600')) {
1158
- paypalBtn.click();
 
 
 
 
 
 
 
 
 
 
 
 
1159
  } else if (stripeBtn.classList.contains('bg-purple-600')) {
1160
- stripeBtn.click();
 
 
 
 
 
 
 
 
 
 
 
 
1161
  } else {
1162
  showSuccess('Veuillez sélectionner une méthode de paiement');
1163
  }
@@ -1240,17 +1269,6 @@
1240
  showSuccess('Tableau de bord admin actualisé');
1241
  });
1242
 
1243
- // Payment method selection
1244
- paypalBtn.addEventListener('click', function() {
1245
- this.classList.add('bg-purple-600');
1246
- stripeBtn.classList.remove('bg-purple-600');
1247
- });
1248
-
1249
- stripeBtn.addEventListener('click', function() {
1250
- this.classList.add('bg-purple-600');
1251
- paypalBtn.classList.remove('bg-purple-600');
1252
- });
1253
-
1254
  // Helper functions
1255
  function updateCartCount() {
1256
  const count = cart.reduce((total, item) => total + item.quantity, 0);
@@ -1307,67 +1325,4 @@
1307
  cartTotal.textContent = total.toFixed(2) + '€';
1308
 
1309
  // Add event listeners to new buttons
1310
- document.querySelectorAll('.decrease-quantity').forEach(button => {
1311
- button.addEventListener('click', function() {
1312
- const id = this.getAttribute('data-id');
1313
- const item = cart.find(item => item.id === id);
1314
-
1315
- if (item.quantity > 1) {
1316
- item.quantity -= 1;
1317
- updateCartCount();
1318
- updateCartDisplay();
1319
- }
1320
- });
1321
- });
1322
-
1323
- document.querySelectorAll('.increase-quantity').forEach(button => {
1324
- button.addEventListener('click', function() {
1325
- const id = this.getAttribute('data-id');
1326
- const item = cart.find(item => item.id === id);
1327
-
1328
- item.quantity += 1;
1329
- updateCartCount();
1330
- updateCartDisplay();
1331
- });
1332
- });
1333
-
1334
- document.querySelectorAll('.remove-item').forEach(button => {
1335
- button.addEventListener('click', function() {
1336
- const id = this.getAttribute('data-id');
1337
- cart = cart.filter(item => item.id !== id);
1338
- updateCartCount();
1339
- updateCartDisplay();
1340
- showSuccess('Article supprimé du panier');
1341
- });
1342
- });
1343
- }
1344
-
1345
- function showSuccess(message) {
1346
- const successMessage = document.getElementById('successMessage');
1347
- successMessage.textContent = message;
1348
-
1349
- successNotification.classList.remove('translate-y-10', 'opacity-0');
1350
- successNotification.classList.add('translate-y-0', 'opacity-100');
1351
-
1352
- setTimeout(() => {
1353
- successNotification.classList.remove('translate-y-0', 'opacity-100');
1354
- successNotification.classList.add('translate-y-10', 'opacity-0');
1355
- }, 3000);
1356
- }
1357
-
1358
- // Open external payment links in new window
1359
- paypalBtn.addEventListener('click', function(e) {
1360
- e.preventDefault();
1361
- window.open('https://www.paypal.com/signin', '_blank');
1362
- });
1363
-
1364
- stripeBtn.addEventListener('click', function(e) {
1365
- e.preventDefault();
1366
- window.open('https://dashboard.stripe.com/login', '_blank');
1367
- });
1368
-
1369
- // Initialize the page
1370
- initPage();
1371
- </script>
1372
- <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=docto41/ai-marketplace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1373
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MEGA MARCHÉ IA - 990099 Boutons d'IA</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
  @keyframes float {
11
  0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-10px); }
 
 
 
 
13
  }
14
  .floating { animation: float 6s ease-in-out infinite; }
 
 
 
 
 
 
 
 
 
 
 
 
15
  .glass-effect {
16
  background: rgba(255, 255, 255, 0.1);
17
  backdrop-filter: blur(10px);
18
  border: 1px solid rgba(255, 255, 255, 0.2);
19
  }
20
+ .ai-button {
21
+ transition: all 0.3s ease;
22
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
23
+ }
24
+ .ai-button:hover {
25
+ transform: translateY(-5px);
26
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
27
+ }
28
  .locked-feature {
29
  position: relative;
30
  overflow: hidden;
 
36
  left: 0;
37
  right: 0;
38
  bottom: 0;
39
+ background: rgba(0, 0, 0, 0.5);
40
  display: flex;
41
  align-items: center;
42
  justify-content: center;
43
  color: white;
44
  font-weight: bold;
 
45
  }
46
  .locked-feature::before {
47
  content: '\f023';
 
51
  top: 50%;
52
  left: 50%;
53
  transform: translate(-50%, -50%);
54
+ font-size: 1.5rem;
55
  color: white;
56
  z-index: 2;
57
  }
58
+ .grid-container {
59
+ display: grid;
60
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
61
+ gap: 1rem;
62
+ }
63
+ @media (max-width: 768px) {
64
+ .grid-container {
65
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
66
+ }
67
+ }
68
  </style>
69
  </head>
70
  <body class="min-h-screen bg-gray-900 text-white">
 
75
  <div class="absolute top-10 left-20 w-32 h-32 rounded-full bg-purple-600 opacity-20 floating" style="animation-delay: 0s;"></div>
76
  <div class="absolute top-1/3 right-20 w-40 h-40 rounded-full bg-blue-600 opacity-20 floating" style="animation-delay: 1s;"></div>
77
  <div class="absolute bottom-20 left-1/4 w-24 h-24 rounded-full bg-indigo-600 opacity-20 floating" style="animation-delay: 2s;"></div>
 
78
  </div>
79
  </div>
80
 
81
  <!-- Header -->
82
  <header class="relative z-10 glass-effect shadow-lg">
83
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
84
  <div class="flex items-center space-x-2">
85
  <i class="fas fa-robot text-3xl text-purple-400"></i>
86
  <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-400">
87
+ MEGA MARCHÉ IA
88
  </h1>
89
  </div>
90
  <div class="flex items-center space-x-4">
91
  <button id="cartBtn" class="relative p-2 rounded-full hover:bg-gray-800 transition">
92
  <i class="fas fa-shopping-cart text-xl"></i>
93
+ <span id="cartCount" class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs hidden">0</span>
94
  </button>
95
  <button id="loginBtn" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition">
96
  <i class="fas fa-user mr-2"></i>Connexion
 
102
  <!-- Main Content -->
103
  <main class="relative z-10 container mx-auto px-4 py-8">
104
  <!-- Hero Section -->
105
+ <section class="mb-8 text-center">
106
  <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-400">
107
+ 990099 Boutons d'IA
108
  </h2>
109
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-6">
110
+ Le plus grand marché d'intelligences artificielles au monde pour tous vos besoins.
111
  </p>
112
  <div class="flex justify-center space-x-4">
113
  <button id="subscribeBtn" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 rounded-lg font-semibold text-lg transition transform hover:scale-105">
114
+ <i class="fas fa-crown mr-2"></i>S'abonner
 
 
 
115
  </button>
116
  </div>
117
  </section>
118
 
119
+ <!-- Search and Filters -->
120
+ <div class="mb-8 glass-effect p-4 rounded-lg">
121
+ <div class="flex flex-col md:flex-row gap-4">
122
+ <input type="text" placeholder="Rechercher une IA..." class="flex-grow px-4 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
123
+ <select class="px-4 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
124
+ <option>Toutes catégories</option>
125
+ <option>Rédaction</option>
126
+ <option>Images</option>
127
+ <option>Code</option>
128
+ <option>Marketing</option>
129
+ <option>Analyse</option>
130
+ </select>
131
+ <button class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg">
132
+ <i class="fas fa-filter mr-2"></i>Filtrer
133
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
134
  </div>
135
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
136
 
137
+ <!-- AI Buttons Grid -->
138
+ <section class="mb-12">
139
+ <div class="grid-container">
140
+ <!-- Generate 50 sample AI buttons -->
141
+ <script>
142
+ const aiCategories = [
143
+ {name: "Rédaction SEO", icon: "fa-pen-fancy", color: "from-purple-500 to-blue-500"},
144
+ {name: "Générateur Images", icon: "fa-image", color: "from-pink-500 to-red-500"},
145
+ {name: "Assistant Code", icon: "fa-code", color: "from-green-500 to-teal-500"},
146
+ {name: "Analyse Données", icon: "fa-chart-bar", color: "from-yellow-500 to-orange-500"},
147
+ {name: "Traducteur", icon: "fa-language", color: "from-blue-500 to-indigo-500"},
148
+ {name: "Assistant Vocal", icon: "fa-microphone", color: "from-purple-500 to-pink-500"},
149
+ {name: "Éditeur Vidéo", icon: "fa-video", color: "from-red-500 to-orange-500"},
150
+ {name: "Musique IA", icon: "fa-music", color: "from-green-500 to-blue-500"},
151
+ {name: "Chatbot", icon: "fa-robot", color: "from-indigo-500 to-purple-500"},
152
+ {name: "Analyse SEO", icon: "fa-search-dollar", color: "from-yellow-500 to-green-500"},
153
+ {name: "Assistant Juridique", icon: "fa-gavel", color: "from-gray-500 to-blue-500"},
154
+ {name: "Générateur CV", icon: "fa-file-alt", color: "from-blue-500 to-green-500"},
155
+ {name: "Assistant Médical", icon: "fa-heartbeat", color: "from-red-500 to-pink-500"},
156
+ {name: "Générateur Podcast", icon: "fa-podcast", color: "from-purple-500 to-indigo-500"},
157
+ {name: "Analyse Financière", icon: "fa-chart-line", color: "from-green-500 to-yellow-500"},
158
+ {name: "Assistant RH", icon: "fa-users", color: "from-blue-500 to-teal-500"},
159
+ {name: "Générateur Quiz", icon: "fa-question-circle", color: "from-orange-500 to-red-500"},
160
+ {name: "Assistant Vente", icon: "fa-shopping-cart", color: "from-purple-500 to-red-500"},
161
+ {name: "Analyse Réseaux", icon: "fa-project-diagram", color: "from-indigo-500 to-blue-500"},
162
+ {name: "Générateur Ebook", icon: "fa-book", color: "from-yellow-500 to-orange-500"},
163
+ {name: "Assistant Design", icon: "fa-paint-brush", color: "from-pink-500 to-purple-500"},
164
+ {name: "Analyse Sentiments", icon: "fa-smile", color: "from-blue-500 to-green-500"},
165
+ {name: "Générateur Annonces", icon: "fa-ad", color: "from-red-500 to-yellow-500"},
166
+ {name: "Assistant Éducation", icon: "fa-graduation-cap", color: "from-indigo-500 to-purple-500"},
167
+ {name: "Analyse Marché", icon: "fa-store", color: "from-teal-500 to-blue-500"},
168
+ {name: "Générateur Scripts", icon: "fa-scroll", color: "from-orange-500 to-red-500"},
169
+ {name: "Assistant Social", icon: "fa-share-alt", color: "from-blue-500 to-indigo-500"},
170
+ {name: "Analyse Performances", icon: "fa-tachometer-alt", color: "from-green-500 to-yellow-500"},
171
+ {name: "Générateur Infographies", icon: "fa-chart-pie", color: "from-purple-500 to-pink-500"},
172
+ {name: "Assistant Voyage", icon: "fa-plane", color: "from-blue-500 to-teal-500"},
173
+ {name: "Analyse Textes", icon: "fa-font", color: "from-yellow-500 to-orange-500"},
174
+ {name: "Générateur Recettes", icon: "fa-utensils", color: "from-red-500 to-pink-500"},
175
+ {name: "Assistant Fitness", icon: "fa-dumbbell", color: "from-indigo-500 to-purple-500"},
176
+ {name: "Analyse Comportement", icon: "fa-brain", color: "from-blue-500 to-green-500"},
177
+ {name: "Générateur Noms", icon: "fa-signature", color: "from-orange-500 to-yellow-500"},
178
+ {name: "Assistant Immobilier", icon: "fa-home", color: "from-teal-500 to-blue-500"},
179
+ {name: "Analyse Risques", icon: "fa-shield-alt", color: "from-purple-500 to-red-500"},
180
+ {name: "Générateur Slogans", icon: "fa-comment-alt", color: "from-blue-500 to-indigo-500"},
181
+ {name: "Assistant Nutrition", icon: "fa-apple-alt", color: "from-green-500 to-yellow-500"},
182
+ {name: "Analyse Compétition", icon: "fa-chess", color: "from-pink-500 to-purple-500"},
183
+ {name: "Générateur Citations", icon: "fa-quote-right", color: "from-blue-500 to-teal-500"},
184
+ {name: "Assistant Météo", icon: "fa-cloud-sun", color: "from-orange-500 to-red-500"},
185
+ {name: "Analyse Tendances", icon: "fa-chart-line", color: "from-indigo-500 to-purple-500"},
186
+ {name: "Générateur Poèmes", icon: "fa-pen-nib", color: "from-yellow-500 to-green-500"},
187
+ {name: "Assistant Crypto", icon: "fa-coins", color: "from-blue-500 to-gray-500"},
188
+ {name: "Analyse Réseaux Sociaux", icon: "fa-thumbs-up", color: "from-red-500 to-pink-500"},
189
+ {name: "Générateur Plans", icon: "fa-map-marked-alt", color: "from-purple-500 to-blue-500"},
190
+ {name: "Assistant Jeux", icon: "fa-gamepad", color: "from-green-500 to-yellow-500"},
191
+ {name: "Analyse Produits", icon: "fa-box-open", color: "from-orange-500 to-red-500"},
192
+ {name: "Générateur BD", icon: "fa-book-open", color: "from-indigo-500 to-purple-500"}
193
+ ];
194
 
195
+ document.addEventListener('DOMContentLoaded', function() {
196
+ const gridContainer = document.querySelector('.grid-container');
197
+
198
+ // Generate 990099 buttons (for demo we'll show 50)
199
+ for (let i = 0; i < 50; i++) {
200
+ const category = aiCategories[i % aiCategories.length];
201
+ const button = document.createElement('div');
202
+ button.className = `ai-button bg-gray-800 rounded-lg p-4 cursor-pointer hover:bg-gray-700 transition`;
203
+ button.innerHTML = `
204
+ <div class="w-full h-24 bg-gradient-to-br ${category.color} rounded-lg mb-3 flex items-center justify-center">
205
+ <i class="fas ${category.icon} text-3xl text-white opacity-80"></i>
206
+ </div>
207
+ <h4 class="font-semibold text-center">${category.name} ${Math.floor(Math.random() * 1000)}</h4>
208
+ <div class="flex justify-between items-center mt-3">
209
+ <span class="text-purple-400 font-bold">${(Math.random() * 20 + 5).toFixed(2)}€</span>
210
+ <button class="add-to-cart px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm transition">
211
+ <i class="fas fa-cart-plus"></i>
212
+ </button>
213
+ </div>
214
+ `;
215
+
216
+ // Open in new window when clicked
217
+ button.addEventListener('click', function(e) {
218
+ if (!e.target.closest('.add-to-cart')) {
219
+ window.open(`https://example.com/ai/${encodeURIComponent(category.name)}`, '_blank');
220
+ }
221
+ });
222
+
223
+ gridContainer.appendChild(button);
224
+ }
225
+ });
226
+ </script>
227
  </div>
228
  </section>
229
+
230
+ <!-- Pagination -->
231
+ <div class="flex justify-center mb-12">
232
+ <nav class="inline-flex rounded-md shadow">
233
+ <a href="#" class="px-4 py-2 bg-gray-800 rounded-l-lg hover:bg-gray-700"><i class="fas fa-chevron-left"></i></a>
234
+ <a href="#" class="px-4 py-2 bg-purple-600 text-white">1</a>
235
+ <a href="#" class="px-4 py-2 bg-gray-800 hover:bg-gray-700">2</a>
236
+ <a href="#" class="px-4 py-2 bg-gray-800 hover:bg-gray-700">3</a>
237
+ <a href="#" class="px-4 py-2 bg-gray-800 hover:bg-gray-700">...</a>
238
+ <a href="#" class="px-4 py-2 bg-gray-800 hover:bg-gray-700">99</a>
239
+ <a href="#" class="px-4 py-2 bg-gray-800 rounded-r-lg hover:bg-gray-700"><i class="fas fa-chevron-right"></i></a>
240
+ </nav>
241
+ </div>
242
  </main>
243
 
244
  <!-- Footer -->
 
246
  <div class="container mx-auto px-4 py-8">
247
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
248
  <div>
249
+ <h4 class="text-lg font-semibold mb-4">MEGA MARCHÉ IA</h4>
250
+ <p class="text-gray-400">Le plus grand marché d'intelligences artificielles au monde avec 990099 solutions IA.</p>
251
  </div>
252
  <div>
253
  <h4 class="text-lg font-semibold mb-4">Navigation</h4>
254
  <ul class="space-y-2">
255
  <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
256
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Catégories</a></li>
257
  <li><a href="#" class="text-gray-400 hover:text-white transition">Abonnements</a></li>
258
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
259
  </ul>
260
  </div>
261
  <div>
262
  <h4 class="text-lg font-semibold mb-4">Support</h4>
263
  <ul class="space-y-2">
 
264
  <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
265
  <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li>
266
+ <li><a href="#" class="text-gray-400 hover:text-white transition">CGU</a></li>
267
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a></li>
268
  </ul>
269
  </div>
270
  <div>
 
279
  <div class="p-2 bg-gray-700 rounded">
280
  <i class="fab fa-cc-visa text-2xl text-blue-600"></i>
281
  </div>
282
+ <div class="p-2 bg-gray-700 rounded">
283
+ <i class="fab fa-cc-mastercard text-2xl text-red-600"></i>
284
+ </div>
285
  </div>
286
+ <p class="text-gray-400 text-sm">Paiements 100% sécurisés et cryptés.</p>
287
  </div>
288
  </div>
289
  <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
290
+ <p>&copy; 2023 MEGA MARCHÉ IA. Tous droits réservés.</p>
291
  </div>
292
  </div>
293
  </footer>
 
354
  <button id="closeSubscribeModal" class="absolute top-4 right-4 text-gray-400 hover:text-white">
355
  <i class="fas fa-times text-xl"></i>
356
  </button>
357
+ <h3 class="text-2xl font-bold mb-6 text-center">Choisissez votre abonnement</h3>
358
  <div class="grid md:grid-cols-2 gap-6 mb-8">
359
  <div class="bg-gray-700 rounded-lg p-6 hover:bg-gray-600 transition">
360
  <h4 class="text-xl font-semibold mb-2">Gratuit</h4>
361
  <p class="text-3xl font-bold mb-4">0€<span class="text-sm font-normal text-gray-400">/mois</span></p>
362
  <ul class="space-y-2 mb-6">
363
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> Accès à 5 IA de base</li>
364
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> Support limité</li>
365
+ <li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> 50 requêtes/mois</li>
366
+ <li class="flex items-center"><i class="fas fa-times text-red-400 mr-2"></i> Pas d'accès premium</li>
367
  </ul>
368
  <button id="selectFreeBtn" class="w-full py-2 bg-gray-600 hover:bg-gray-500 rounded-lg font-medium transition">
369
  Sélectionner
 
373
  <h4 class="text-xl font-semibold mb-2">Premium</h4>
374
  <p class="text-3xl font-bold mb-4">29.99€<span class="text-sm font-normal text-gray-200">/mois</span></p>
375
  <ul class="space-y-2 mb-6">
376
+ <li class="flex items-center"><i class="fas fa-check text-white mr-2"></i> Accès à toutes les IA</li>
377
  <li class="flex items-center"><i class="fas fa-check text-white mr-2"></i> Support prioritaire</li>
378
  <li class="flex items-center"><i class="fas fa-check text-white mr-2"></i> Requêtes illimitées</li>
379
+ <li class="flex items-center"><i class="fas fa-check text-white mr-2"></i> Nouveautés en avant-première</li>
380
  </ul>
381
  <button id="selectPremiumBtn" class="w-full py-2 bg-white hover:bg-gray-100 text-purple-600 rounded-lg font-medium transition">
382
  Sélectionner
 
438
  <i class="fas fa-shopping-cart mr-2"></i>Votre Panier
439
  </h3>
440
  <div id="cartItems" class="max-h-96 overflow-y-auto mb-4">
 
441
  <p class="text-gray-400 text-center py-8">Votre panier est vide</p>
442
  </div>
443
  <div class="border-t border-gray-700 pt-4">
 
523
  </div>
524
  </div>
525
 
526
+ <div class="bg-gray-700 rounded-lg p-6 mb-8">
527
+ <h4 class="text-xl font-semibold mb-4 flex items-center">
528
+ <i class="fas fa-credit-card mr-2 text-purple-400"></i>Informations de paiement
529
+ </h4>
530
+ <div class="grid md:grid-cols-2 gap-6">
531
+ <div>
532
+ <h5 class="font-medium mb-3 flex items-center">
533
+ <i class="fab fa-paypal mr-2 text-blue-400"></i> PayPal
534
+ </h5>
535
+ <div class="bg-gray-800 rounded-lg p-4">
536
+ <p class="text-gray-400 text-sm">Email PayPal</p>
537
+ <p class="font-medium">[email protected]</p>
538
+ <div class="mt-3">
539
+ <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm mr-2">
540
+ <i class="fas fa-sync-alt mr-1"></i> Actualiser
541
+ </button>
542
+ <button class="px-3 py-1 bg-gray-600 hover:bg-gray-700 rounded text-sm">
543
+ <i class="fas fa-cog mr-1"></i> Paramètres
544
+ </button>
545
+ </div>
546
+ </div>
547
+ </div>
548
+
549
+ <div>
550
+ <h5 class="font-medium mb-3 flex items-center">
551
+ <i class="fab fa-stripe mr-2 text-purple-400"></i> Stripe
552
+ </h5>
553
+ <div class="bg-gray-800 rounded-lg p-4">
554
+ <p class="text-gray-400 text-sm">Compte Stripe</p>
555
+ <p class="font-medium">[email protected]</p>
556
+ <div class="mt-3">
557
+ <button class="px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm mr-2">
558
+ <i class="fas fa-sync-alt mr-1"></i> Actualiser
559
+ </button>
560
+ <button class="px-3 py-1 bg-gray-600 hover:bg-gray-700 rounded text-sm">
561
+ <i class="fas fa-cog mr-1"></i> Paramètres
562
+ </button>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ </div>
568
+
569
  <div class="bg-gray-700 rounded-lg p-6 mb-8">
570
  <h4 class="text-xl font-semibold mb-4 flex items-center">
571
  <i class="fas fa-history mr-2 text-purple-400"></i>Historique des paiements
 
578
  <th class="pb-2">Montant</th>
579
  <th class="pb-2">Méthode</th>
580
  <th class="pb-2">Statut</th>
581
+ <th class="pb-2">Actions</th>
582
  </tr>
583
  </thead>
584
  <tbody>
 
589
  <i class="fab fa-cc-paypal text-blue-400 mr-2"></i> PayPal
590
  </td>
591
  <td><span class="px-2 py-1 bg-green-900 text-green-300 rounded text-sm">Complété</span></td>
592
+ <td>
593
+ <button class="px-2 py-1 bg-gray-600 hover:bg-gray-500 rounded text-sm">
594
+ <i class="fas fa-download mr-1"></i> Facture
595
+ </button>
596
+ </td>
597
  </tr>
598
  <tr class="border-b border-gray-600">
599
  <td class="py-3">15/02/2023</td>
 
602
  <i class="fab fa-cc-paypal text-blue-400 mr-2"></i> PayPal
603
  </td>
604
  <td><span class="px-2 py-1 bg-green-900 text-green-300 rounded text-sm">Complété</span></td>
605
+ <td>
606
+ <button class="px-2 py-1 bg-gray-600 hover:bg-gray-500 rounded text-sm">
607
+ <i class="fas fa-download mr-1"></i> Facture
608
+ </button>
609
+ </td>
610
  </tr>
611
  <tr>
612
  <td class="py-3">15/01/2023</td>
 
615
  <i class="fab fa-cc-stripe text-purple-400 mr-2"></i> Stripe
616
  </td>
617
  <td><span class="px-2 py-1 bg-green-900 text-green-300 rounded text-sm">Complété</span></td>
618
+ <td>
619
+ <button class="px-2 py-1 bg-gray-600 hover:bg-gray-500 rounded text-sm">
620
+ <i class="fas fa-download mr-1"></i> Facture
621
+ </button>
622
+ </td>
623
  </tr>
624
  </tbody>
625
  </table>
 
681
  <h4 class="text-xl font-semibold mb-4 flex items-center">
682
  <i class="fas fa-robot mr-2"></i>Produits IA
683
  </h4>
684
+ <p class="text-3xl font-bold mb-4">990,099</p>
685
  <div class="flex justify-between text-sm">
686
+ <span>Actifs: <span class="font-bold">990,099</span></span>
687
  <span>Populaires: <span class="font-bold">12</span></span>
688
  </div>
689
  <button id="manageProductsBtn" class="mt-4 w-full py-2 bg-white hover:bg-gray-100 text-red-600 rounded-lg transition">
 
692
  </div>
693
  </div>
694
 
695
+ <div class="bg-gray-700 rounded-lg p-6 mb-8">
696
+ <h4 class="text-xl font-semibold mb-4 flex items-center">
697
+ <i class="fas fa-credit-card mr-2 text-blue-400"></i>Comptes de paiement
698
+ </h4>
699
+ <div class="grid md:grid-cols-2 gap-6">
700
+ <div>
701
+ <h5 class="font-medium mb-3 flex items-center">
702
+ <i class="fab fa-paypal mr-2 text-blue-400"></i> PayPal
703
+ </h5>
704
+ <div class="bg-gray-800 rounded-lg p-4">
705
+ <p class="text-gray-400 text-sm">Email PayPal</p>
706
+ <p class="font-medium">[email protected]</p>
707
+ <p class="text-gray-400 text-sm mt-2">Solde</p>
708
+ <p class="font-medium">3,245.67€</p>
709
+ <div class="mt-3">
710
+ <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm mr-2">
711
+ <i class="fas fa-sync-alt mr-1"></i> Actualiser
712
+ </button>
713
+ <button class="px-3 py-1 bg-gray-600 hover:bg-gray-700 rounded text-sm">
714
+ <i class="fas fa-cog mr-1"></i> Paramètres
715
+ </button>
716
+ </div>
717
+ </div>
718
+ </div>
719
+
720
+ <div>
721
+ <h5 class="font-medium mb-3 flex items-center">
722
+ <i class="fab fa-stripe mr-2 text-purple-400"></i> Stripe
723
+ </h5>
724
+ <div class="bg-gray-800 rounded-lg p-4">
725
+ <p class="text-gray-400 text-sm">Compte Stripe</p>
726
+ <p class="font-medium">[email protected]</p>
727
+ <p class="text-gray-400 text-sm mt-2">Solde</p>
728
+ <p class="font-medium">1,876.32€</p>
729
+ <div class="mt-3">
730
+ <button class="px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm mr-2">
731
+ <i class="fas fa-sync-alt mr-1"></i> Actualiser
732
+ </button>
733
+ <button class="px-3 py-1 bg-gray-600 hover:bg-gray-700 rounded text-sm">
734
+ <i class="fas fa-cog mr-1"></i> Paramètres
735
+ </button>
736
+ </div>
737
+ </div>
738
+ </div>
739
+ </div>
740
+ </div>
741
+
742
  <div class="bg-gray-700 rounded-lg p-6 mb-8">
743
  <h4 class="text-xl font-semibold mb-4 flex items-center">
744
  <i class="fas fa-chart-line mr-2 text-blue-400"></i>Statistiques
 
846
  const clearCartBtn = document.getElementById('clearCartBtn');
847
  const checkoutBtn = document.getElementById('checkoutBtn');
848
  const cartCount = document.getElementById('cartCount');
 
849
  const loginBtn = document.getElementById('loginBtn');
850
  const loginModal = document.getElementById('loginModal');
851
  const closeLoginModal = document.getElementById('closeLoginModal');
 
914
  btn.disabled = false;
915
  btn.classList.remove('opacity-50', 'cursor-not-allowed');
916
  });
917
+
918
+ // Remove lock icon from products
919
+ document.querySelectorAll('[id^="ai-button-"]').forEach(el => {
920
+ el.classList.remove('locked-feature');
921
+ });
922
  } else {
923
  loginBtn.innerHTML = '<i class="fas fa-user mr-2"></i>Mon compte';
924
  loginBtn.removeEventListener('click', loginBtnClickHandler);
 
1050
  paymentModal.classList.remove('hidden');
1051
  });
1052
 
1053
+ // Add to cart functionality for dynamically generated buttons
1054
+ document.addEventListener('click', function(e) {
1055
+ if (e.target.classList.contains('add-to-cart') || e.target.closest('.add-to-cart')) {
1056
+ const button = e.target.classList.contains('add-to-cart') ? e.target : e.target.closest('.add-to-cart');
1057
+
1058
  if (!isSubscribed && !isAdmin) {
1059
  showSuccess('Veuillez vous abonner pour ajouter des articles');
1060
  subscribeModal.classList.remove('hidden');
1061
  return;
1062
  }
1063
 
1064
+ const aiButton = button.closest('.ai-button');
1065
+ const name = aiButton.querySelector('h4').textContent;
1066
+ const priceText = aiButton.querySelector('span.font-bold').textContent;
1067
+ const price = parseFloat(priceText.replace('€', ''));
1068
+ const id = name.replace(/\s+/g, '-').toLowerCase();
1069
 
1070
  // Check if item already in cart
1071
  const existingItem = cart.find(item => item.id === id);
 
1089
  setTimeout(() => {
1090
  cartBtn.classList.remove('pulse');
1091
  }, 1000);
1092
+ }
1093
  });
1094
 
1095
  // Login/Register functionality
 
1148
  paymentModal.classList.add('hidden');
1149
  });
1150
 
1151
+ paypalBtn.addEventListener('click', function() {
1152
+ this.classList.add('bg-purple-600');
1153
+ stripeBtn.classList.remove('bg-purple-600');
 
 
 
 
 
 
 
 
 
 
 
1154
  });
1155
 
1156
+ stripeBtn.addEventListener('click', function() {
1157
+ this.classList.add('bg-purple-600');
1158
+ paypalBtn.classList.remove('bg-purple-600');
 
 
 
 
 
 
 
 
 
 
 
1159
  });
1160
 
1161
  confirmPaymentBtn.addEventListener('click', () => {
 
1162
  if (paypalBtn.classList.contains('bg-purple-600')) {
1163
+ // PayPal payment
1164
+ showSuccess('Redirection vers PayPal...');
1165
+ setTimeout(() => {
1166
+ if (currentUser) {
1167
+ currentUser.subscribed = true;
1168
+ isSubscribed = true;
1169
+ localStorage.setItem('aiMarketplaceUser', JSON.stringify(currentUser));
1170
+
1171
+ updateUIAfterLogin();
1172
+ paymentModal.classList.add('hidden');
1173
+ showSuccess('Paiement réussi via PayPal! Abonnement Premium activé!');
1174
+ }
1175
+ }, 2000);
1176
  } else if (stripeBtn.classList.contains('bg-purple-600')) {
1177
+ // Stripe payment
1178
+ showSuccess('Traitement du paiement Stripe...');
1179
+ setTimeout(() => {
1180
+ if (currentUser) {
1181
+ currentUser.subscribed = true;
1182
+ isSubscribed = true;
1183
+ localStorage.setItem('aiMarketplaceUser', JSON.stringify(currentUser));
1184
+
1185
+ updateUIAfterLogin();
1186
+ paymentModal.classList.add('hidden');
1187
+ showSuccess('Paiement réussi via Stripe! Abonnement Premium activé!');
1188
+ }
1189
+ }, 2000);
1190
  } else {
1191
  showSuccess('Veuillez sélectionner une méthode de paiement');
1192
  }
 
1269
  showSuccess('Tableau de bord admin actualisé');
1270
  });
1271
 
 
 
 
 
 
 
 
 
 
 
 
1272
  // Helper functions
1273
  function updateCartCount() {
1274
  const count = cart.reduce((total, item) => total + item.quantity, 0);
 
1325
  cartTotal.textContent = total.toFixed(2) + '€';
1326
 
1327
  // Add event listeners to new buttons
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1328
  </html>
prompts.txt CHANGED
@@ -1,2 +1,3 @@
1
  creer un site de marketplace composer de 986200 bouton d'assisat IA TRES puissant avec des vrais bouton reel et actif pas des bouton d'exemple je veux un vrais site avec des bouton reel : ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paiement : le tout en automatique ouvrer chaque bouton cliquéé dans une nouvel fenetre , je veut un tres belle interface tres animer et un jolie arriere plant
2
- je veux acces et toute produit pour moi seul les autre devront payer un abonnement : [email protected] : Admin270574@ et [email protected] : Admin270574@
 
 
1
  creer un site de marketplace composer de 986200 bouton d'assisat IA TRES puissant avec des vrais bouton reel et actif pas des bouton d'exemple je veux un vrais site avec des bouton reel : ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paiement : le tout en automatique ouvrer chaque bouton cliquéé dans une nouvel fenetre , je veut un tres belle interface tres animer et un jolie arriere plant
2
+ je veux acces et toute produit pour moi seul les autre devront payer un abonnement : [email protected] : Admin270574@ et [email protected] : Admin270574@
3
+ je veux creer le plus gigantesque marché de INTELIGENCES ARTIFICIEL AVEC PLUS DE 990099 BOUTONS D ASSISANT IA dans toutes les domaine de services, je veux q'uon affiche toutes les boutons directement et que chaque boutons cliqué s'ouvre dans une nouvel fenetre je veux que toi soit gré en automatique et aussi ,: je veux un tableau de bord gigantesque ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paement je veux acces et toute produit pour moi seul les autre devront payer un abonnement : [email protected] : Admin270574@ et [email protected] : Admin270574@