docto41 commited on
Commit
0c6c92f
·
verified ·
1 Parent(s): e071553

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +121 -817
  2. prompts.txt +3 -1
index.html CHANGED
@@ -3,11 +3,9 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Marketplace IA Puissante</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
- <script src="https://www.paypal.com/sdk/js?client-id=VOTRE_ID_CLIENT_PAYPAL&currency=EUR"></script>
11
  <style>
12
  @keyframes float {
13
  0%, 100% { transform: translateY(0); }
@@ -26,18 +24,6 @@
26
  transform: translateY(-5px);
27
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
28
  }
29
- .pulse {
30
- animation: pulse 2s infinite;
31
- }
32
- @keyframes pulse {
33
- 0% { transform: scale(1); }
34
- 50% { transform: scale(1.05); }
35
- 100% { transform: scale(1); }
36
- }
37
- .blur-bg {
38
- backdrop-filter: blur(10px);
39
- background-color: rgba(255, 255, 255, 0.1);
40
- }
41
  .admin-badge {
42
  position: absolute;
43
  top: 10px;
@@ -49,23 +35,20 @@
49
  font-size: 0.75rem;
50
  font-weight: bold;
51
  }
52
- .loading-spinner {
53
- display: inline-block;
54
- width: 20px;
55
- height: 20px;
56
- border: 3px solid rgba(255,255,255,.3);
57
- border-radius: 50%;
58
- border-top-color: #fff;
59
- animation: spin 1s ease-in-out infinite;
60
  }
61
- @keyframes spin {
62
- to { transform: rotate(360deg); }
 
 
63
  }
64
  </style>
65
  </head>
66
  <body class="gradient-bg min-h-screen text-white">
67
  <!-- Navigation -->
68
- <nav class="blur-bg fixed w-full z-50">
69
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
70
  <div class="flex items-center justify-between h-16">
71
  <div class="flex items-center">
@@ -95,17 +78,9 @@
95
  </nav>
96
 
97
  <!-- Hero Section -->
98
- <div class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 text-center">
99
  <h1 class="text-5xl font-extrabold mb-6">986200 Boutons IA Puissants</h1>
100
- <p class="text-xl mb-8 max-w-3xl mx-auto">Accédez à notre collection exclusive de boutons IA pour automatiser et optimiser tous vos processus métiers.</p>
101
- <div class="flex justify-center space-x-4">
102
- <button id="subscribe-btn" class="bg-white text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-opacity-90 transition transform hover:scale-105 pulse">
103
- <i class="fas fa-gem mr-2"></i> S'abonner
104
- </button>
105
- <a href="#marketplace" class="bg-transparent border-2 border-white px-6 py-3 rounded-full font-bold hover:bg-white hover:bg-opacity-20 transition transform hover:scale-105">
106
- Explorer les Boutons <i class="fas fa-arrow-down ml-2"></i>
107
- </a>
108
- </div>
109
  <div class="mt-16">
110
  <div class="floating inline-block">
111
  <img src="https://cdn-icons-png.flaticon.com/512/2491/2491905.png" alt="IA" class="h-40">
@@ -113,116 +88,8 @@
113
  </div>
114
  </div>
115
 
116
- <!-- Modal de connexion -->
117
- <div id="login-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
118
- <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
119
- <div class="fixed inset-0 transition-opacity" aria-hidden="true">
120
- <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
121
- </div>
122
- <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
123
- <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
124
- <div class="sm:flex sm:items-start">
125
- <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
126
- <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4" id="modal-title">Connexion</h3>
127
- <div id="login-form">
128
- <div class="mb-4">
129
- <label for="login-email" class="block text-sm font-medium text-gray-700">Email</label>
130
- <input type="email" id="login-email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500">
131
- </div>
132
-
133
- <div class="mb-4">
134
- <label for="login-password" class="block text-sm font-medium text-gray-700">Mot de passe</label>
135
- <input type="password" id="login-password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500">
136
- </div>
137
- </div>
138
- </div>
139
- </div>
140
- </div>
141
- <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
142
- <button id="confirm-login" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">
143
- Se connecter
144
- </button>
145
- <button id="cancel-login" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
146
- Annuler
147
- </button>
148
- </div>
149
- </div>
150
- </div>
151
- </div>
152
-
153
- <!-- Tableau de bord -->
154
- <section id="dashboard" class="hidden py-16 px-4 sm:px-6 lg:px-8 bg-white bg-opacity-10 rounded-xl max-w-7xl mx-auto my-10 blur-bg">
155
- <h2 class="text-3xl font-bold mb-8 text-center"><i class="fas fa-tachometer-alt mr-2"></i>Tableau de Bord</h2>
156
-
157
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
158
- <div class="bg-white bg-opacity-20 p-6 rounded-lg card-hover">
159
- <h3 class="text-xl font-semibold mb-4"><i class="fas fa-wallet mr-2"></i>Solde</h3>
160
- <p class="text-2xl font-bold">€<span id="balance-amount">0.00</span></p>
161
- <p class="text-sm opacity-75 mt-2">Votre solde disponible</p>
162
- </div>
163
-
164
- <div class="bg-white bg-opacity-20 p-6 rounded-lg card-hover">
165
- <h3 class="text-xl font-semibold mb-4"><i class="fas fa-shopping-cart mr-2"></i>Commandes</h3>
166
- <p class="text-2xl font-bold"><span id="orders-count">0</span></p>
167
- <p class="text-sm opacity-75 mt-2">Boutons achetés</p>
168
- </div>
169
-
170
- <div class="bg-white bg-opacity-20 p-6 rounded-lg card-hover">
171
- <h3 class="text-xl font-semibold mb-4"><i class="fas fa-star mr-2"></i>Abonnement</h3>
172
- <p class="text-2xl font-bold"><span id="subscription-status">Gratuit</span></p>
173
- <button id="upgrade-btn" class="mt-2 bg-purple-600 text-white px-4 py-2 rounded-md text-sm hover:bg-purple-700 transition">
174
- Mettre à niveau
175
- </button>
176
- </div>
177
- </div>
178
-
179
- <div class="bg-white bg-opacity-20 p-6 rounded-lg mb-6">
180
- <h3 class="text-xl font-semibold mb-4"><i class="fas fa-credit-card mr-2"></i>Méthodes de Paiement</h3>
181
-
182
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
183
- <div class="p-4 border border-white border-opacity-30 rounded-lg">
184
- <h4 class="font-medium mb-2"><i class="fab fa-paypal mr-2"></i>PayPal</h4>
185
- <p class="text-sm opacity-75 mb-3">Connectez votre compte PayPal pour recevoir des paiements</p>
186
- <div id="paypal-button-container" class="mt-2"></div>
187
- </div>
188
-
189
- <div class="p-4 border border-white border-opacity-30 rounded-lg">
190
- <h4 class="font-medium mb-2"><i class="fab fa-stripe mr-2"></i>Stripe</h4>
191
- <p class="text-sm opacity-75 mb-3">Configurez votre compte Stripe pour accepter les paiements</p>
192
- <button id="stripe-connect" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition">
193
- <i class="fab fa-stripe mr-1"></i> Connecter Stripe
194
- </button>
195
- </div>
196
- </div>
197
- </div>
198
-
199
- <div class="bg-white bg-opacity-20 p-6 rounded-lg">
200
- <h3 class="text-xl font-semibold mb-4"><i class="fas fa-history mr-2"></i>Historique des Transactions</h3>
201
- <div class="overflow-x-auto">
202
- <table class="min-w-full divide-y divide-white divide-opacity-20">
203
- <thead>
204
- <tr>
205
- <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Date</th>
206
- <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Description</th>
207
- <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Montant</th>
208
- <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Statut</th>
209
- </tr>
210
- </thead>
211
- <tbody class="divide-y divide-white divide-opacity-10" id="transactions-body">
212
- <tr>
213
- <td colspan="4" class="px-6 py-4 text-center text-sm">Aucune transaction pour le moment</td>
214
- </tr>
215
- </tbody>
216
- </table>
217
- </div>
218
- </div>
219
- </section>
220
-
221
  <!-- Marketplace -->
222
- <section id="marketplace" class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
223
- <h2 class="text-3xl font-bold mb-2 text-center">Boutons IA</h2>
224
- <p class="text-center mb-12 max-w-3xl mx-auto">Parcourez notre collection de 986200 boutons IA spécialement conçus pour automatiser vos tâches.</p>
225
-
226
  <div class="mb-8 flex justify-center">
227
  <div class="relative w-full max-w-md">
228
  <input type="text" placeholder="Rechercher un bouton IA..." class="w-full pl-10 pr-4 py-3 rounded-full bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
@@ -230,149 +97,15 @@
230
  </div>
231
  </div>
232
 
233
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="products-container">
234
- <!-- Les produits seront ajoutés dynamiquement ici -->
235
- </div>
236
-
237
- <div class="mt-12 text-center">
238
- <button id="load-more-btn" class="bg-white text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-opacity-90 transition transform hover:scale-105">
239
- <i class="fas fa-sync-alt mr-2"></i> <span id="load-more-text">Charger plus de boutons</span>
240
- </button>
241
- </div>
242
- </section>
243
-
244
- <!-- Modal d'abonnement -->
245
- <div id="subscription-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
246
- <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
247
- <div class="fixed inset-0 transition-opacity" aria-hidden="true">
248
- <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
249
- </div>
250
- <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
251
- <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
252
- <div class="sm:flex sm:items-start">
253
- <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
254
- <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Abonnement Premium</h3>
255
- <p class="text-sm text-gray-500 mb-6">Pour accéder à tous les boutons IA, vous devez souscrire à un abonnement premium.</p>
256
-
257
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
258
- <div class="border-2 border-purple-500 rounded-lg p-4">
259
- <h4 class="font-bold text-lg mb-2">Mensuel</h4>
260
- <p class="text-2xl font-bold mb-2">€29.99<span class="text-sm font-normal">/mois</span></p>
261
- <button class="w-full bg-purple-600 text-white px-4 py-2 rounded-md text-sm hover:bg-purple-700 transition">
262
- Choisir
263
- </button>
264
- </div>
265
- <div class="border-2 border-gray-200 rounded-lg p-4">
266
- <h4 class="font-bold text-lg mb-2">Annuel</h4>
267
- <p class="text-2xl font-bold mb-2">€299.99<span class="text-sm font-normal">/an</span></p>
268
- <p class="text-xs text-gray-500 mb-2">Économisez 20%</p>
269
- <button class="w-full bg-purple-600 text-white px-4 py-2 rounded-md text-sm hover:bg-purple-700 transition">
270
- Choisir
271
- </button>
272
- </div>
273
- </div>
274
- </div>
275
- </div>
276
- </div>
277
- <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
278
- <button id="cancel-subscription" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
279
- Plus tard
280
- </button>
281
- </div>
282
- </div>
283
- </div>
284
- </div>
285
-
286
- <!-- Panier d'achat (Modal) -->
287
- <div id="cart-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
288
- <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
289
- <div class="fixed inset-0 transition-opacity" aria-hidden="true">
290
- <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
291
- </div>
292
- <div class="inline-block align-bottom bg-white rounded-t-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" style="position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto;">
293
- <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
294
- <div class="sm:flex sm:items-start">
295
- <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
296
- <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
297
- <i class="fas fa-shopping-cart mr-2"></i> Votre Panier
298
- </h3>
299
-
300
- <div id="cart-items" class="mb-4 max-h-64 overflow-y-auto">
301
- <!-- Les éléments du panier seront ajoutés ici dynamiquement -->
302
- <p class="text-center text-gray-500 py-4">Votre panier est vide</p>
303
- </div>
304
-
305
- <div class="border-t border-gray-200 pt-4">
306
- <div class="flex justify-between mb-2">
307
- <span class="font-medium">Total:</span>
308
- <span id="cart-total" class="font-bold">€0.00</span>
309
- </div>
310
- </div>
311
- </div>
312
- </div>
313
- </div>
314
- <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
315
- <button id="checkout-btn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50" disabled>
316
- <i class="fas fa-credit-card mr-2"></i> Payer maintenant
317
- </button>
318
- <button id="close-cart" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
319
- Continuer mes achats
320
- </button>
321
- </div>
322
- </div>
323
- </div>
324
- </div>
325
-
326
- <!-- Modal de paiement -->
327
- <div id="payment-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
328
- <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
329
- <div class="fixed inset-0 transition-opacity" aria-hidden="true">
330
- <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
331
- </div>
332
- <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
333
- <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
334
- <div class="sm:flex sm:items-start">
335
- <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
336
- <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
337
- <i class="fas fa-credit-card mr-2"></i> Paiement
338
- </h3>
339
-
340
- <div class="mb-6">
341
- <p class="text-sm text-gray-500 mb-2">Montant à payer:</p>
342
- <p id="payment-amount" class="text-2xl font-bold text-purple-600">€0.00</p>
343
- </div>
344
-
345
- <div class="mb-6">
346
- <p class="text-sm font-medium text-gray-700 mb-2">Méthode de paiement:</p>
347
- <div class="grid grid-cols-2 gap-4">
348
- <button id="pay-with-paypal" class="border-2 border-gray-200 rounded-md p-3 hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
349
- <i class="fab fa-paypal text-blue-500 text-2xl"></i>
350
- <p class="text-sm mt-1">PayPal</p>
351
- </button>
352
- <button id="pay-with-stripe" class="border-2 border-gray-200 rounded-md p-3 hover:border-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-500">
353
- <i class="fab fa-stripe text-purple-500 text-2xl"></i>
354
- <p class="text-sm mt-1">Stripe</p>
355
- </button>
356
- </div>
357
- </div>
358
-
359
- <div class="border-t border-gray-200 pt-4">
360
- <p class="text-xs text-gray-500">En cliquant sur Payer, vous acceptez nos <a href="#" class="text-purple-600 hover:text-purple-500">conditions générales</a>.</p>
361
- </div>
362
- </div>
363
- </div>
364
- </div>
365
- <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
366
- <button id="cancel-payment" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
367
- Annuler
368
- </button>
369
- </div>
370
  </div>
371
  </div>
372
- </div>
373
 
374
  <!-- Footer -->
375
- <footer class="bg-black bg-opacity-20 py-12 px-4 sm:px-6 lg:px-8 mt-20">
376
  <div class="max-w-7xl mx-auto">
377
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
378
  <div>
@@ -427,125 +160,36 @@
427
  "doctorblog.fr@gmail.com": "Admin270574@"
428
  };
429
 
430
- // Données des produits (initiale)
431
- const INITIAL_PRODUCTS = [
432
- {
433
- id: 1,
434
- name: "IA Marketing Automatisé",
435
- description: "Générez des campagnes marketing performantes en un clic.",
436
- price: 49.99,
437
- image: "https://cdn-icons-png.flaticon.com/512/2103/2103633.png"
438
- },
439
- {
440
- id: 2,
441
- name: "IA Analyse de Données",
442
- description: "Analysez des volumes massifs de données en temps réel.",
443
- price: 79.99,
444
- image: "https://cdn-icons-png.flaticon.com/512/2933/2933245.png"
445
- },
446
- {
447
- id: 3,
448
- name: "IA Chat Avancé",
449
- description: "Assistant conversationnel ultra-performant.",
450
- price: 59.99,
451
- image: "https://cdn-icons-png.flaticon.com/512/1995/1995515.png"
452
- },
453
- {
454
- id: 4,
455
- name: "IA Design Graphique",
456
- description: "Créez des designs professionnels automatiquement.",
457
- price: 69.99,
458
- image: "https://cdn-icons-png.flaticon.com/512/3069/3069172.png"
459
- },
460
- {
461
- id: 5,
462
- name: "IA Optimisation SEO",
463
- description: "Boostez votre référencement naturel automatiquement.",
464
- price: 89.99,
465
- image: "https://cdn-icons-png.flaticon.com/512/2936/2936886.png"
466
- },
467
- {
468
- id: 6,
469
- name: "IA Génération de Code",
470
- description: "Générez du code optimisé en plusieurs langages.",
471
- price: 99.99,
472
- image: "https://cdn-icons-png.flaticon.com/512/1055/1055687.png"
473
- },
474
- {
475
- id: 7,
476
- name: "IA Édition Vidéo",
477
- description: "Montez et optimisez vos vidéos automatiquement.",
478
- price: 119.99,
479
- image: "https://cdn-icons-png.flaticon.com/512/3059/3059518.png"
480
- },
481
- {
482
- id: 8,
483
- name: "IA Traitement Audio",
484
- description: "Améliorez et transformez vos fichiers audio.",
485
- price: 79.99,
486
- image: "https://cdn-icons-png.flaticon.com/512/3059/3059534.png"
487
- }
488
  ];
489
 
490
- // Produits supplémentaires pour le chargement
491
- const ADDITIONAL_PRODUCTS = [
492
- {
493
- id: 9,
494
- name: "IA Traduction Automatique",
495
- description: "Traduisez instantanément dans plus de 100 langues.",
496
- price: 59.99,
497
- image: "https://cdn-icons-png.flaticon.com/512/3898/3898082.png"
498
- },
499
- {
500
- id: 10,
501
- name: "IA Reconnaissance Vocale",
502
- description: "Convertissez la parole en texte avec une précision inégalée.",
503
- price: 89.99,
504
- image: "https://cdn-icons-png.flaticon.com/512/2936/2936886.png"
505
- },
506
- {
507
- id: 11,
508
- name: "IA Analyse Sentimentale",
509
- description: "Analysez les émotions et opinions dans les textes.",
510
- price: 69.99,
511
- image: "https://cdn-icons-png.flaticon.com/512/1995/1995515.png"
512
- },
513
- {
514
- id: 12,
515
- name: "IA Génération de Contenu",
516
- description: "Créez du contenu original et optimisé automatiquement.",
517
- price: 79.99,
518
- image: "https://cdn-icons-png.flaticon.com/512/3069/3069172.png"
519
- },
520
- {
521
- id: 13,
522
- name: "IA Détection d'Anomalies",
523
- description: "Détectez les comportements anormaux dans vos données.",
524
- price: 99.99,
525
- image: "https://cdn-icons-png.flaticon.com/512/2103/2103633.png"
526
- },
527
- {
528
- id: 14,
529
- name: "IA Prédiction de Tendance",
530
- description: "Anticipez les tendances futures avec une précision élevée.",
531
- price: 109.99,
532
- image: "https://cdn-icons-png.flaticon.com/512/2933/2933245.png"
533
- },
534
- {
535
- id: 15,
536
- name: "IA Gestion de Projet",
537
- description: "Optimisez et automatisez la gestion de vos projets.",
538
- price: 89.99,
539
- image: "https://cdn-icons-png.flaticon.com/512/3059/3059518.png"
540
- },
541
- {
542
- id: 16,
543
- name: "IA Assistance Client",
544
- description: "Offrez un support client 24/7 avec notre IA conversationnelle.",
545
- price: 69.99,
546
- image: "https://cdn-icons-png.flaticon.com/512/3059/3059534.png"
547
- }
548
- ];
549
 
550
  // État de l'application
551
  let state = {
@@ -553,108 +197,31 @@
553
  user: null,
554
  isAdmin: false,
555
  isSubscribed: false,
556
- loadedProducts: [],
557
- totalProducts: 986200,
558
- productsPerLoad: 8,
559
- currentLoad: 0
560
  };
561
 
562
  // Éléments du DOM
563
- const cartModal = document.getElementById('cart-modal');
564
- const cartItemsContainer = document.getElementById('cart-items');
565
- const cartTotalElement = document.getElementById('cart-total');
566
- const cartCountElement = document.getElementById('cart-count');
567
- const checkoutBtn = document.getElementById('checkout-btn');
568
- const closeCartBtn = document.getElementById('close-cart');
569
  const productsContainer = document.getElementById('products-container');
570
- const paymentModal = document.getElementById('payment-modal');
571
- const paymentAmountElement = document.getElementById('payment-amount');
572
- const cancelPaymentBtn = document.getElementById('cancel-payment');
573
- const payWithPaypalBtn = document.getElementById('pay-with-paypal');
574
- const payWithStripeBtn = document.getElementById('pay-with-stripe');
575
- const loginModal = document.getElementById('login-modal');
576
  const loginBtn = document.getElementById('login-btn');
577
  const loginText = document.getElementById('login-text');
578
- const subscribeBtn = document.getElementById('subscribe-btn');
579
- const confirmLoginBtn = document.getElementById('confirm-login');
580
- const cancelLoginBtn = document.getElementById('cancel-login');
581
- const loginEmailInput = document.getElementById('login-email');
582
- const loginPasswordInput = document.getElementById('login-password');
583
- const dashboardSection = document.getElementById('dashboard');
584
- const subscriptionModal = document.getElementById('subscription-modal');
585
- const cancelSubscriptionBtn = document.getElementById('cancel-subscription');
586
- const upgradeBtn = document.getElementById('upgrade-btn');
587
- const balanceAmount = document.getElementById('balance-amount');
588
- const ordersCount = document.getElementById('orders-count');
589
- const subscriptionStatus = document.getElementById('subscription-status');
590
- const loadMoreBtn = document.getElementById('load-more-btn');
591
- const loadMoreText = document.getElementById('load-more-text');
592
-
593
- // Initialisation de l'application
594
- function init() {
595
- // Charger les premiers produits
596
- state.loadedProducts = [...INITIAL_PRODUCTS];
597
- state.currentLoad = 1;
598
-
599
- renderProducts();
600
- setupEventListeners();
601
- checkSession();
602
-
603
- // Mettre à jour le texte du bouton "Charger plus"
604
- updateLoadMoreButton();
605
- }
606
-
607
- // Vérifier la session utilisateur
608
- function checkSession() {
609
- const user = localStorage.getItem('user');
610
- if (user) {
611
- state.user = JSON.parse(user);
612
- state.isAdmin = ADMIN_ACCOUNTS.hasOwnProperty(state.user.email);
613
- state.isSubscribed = state.isAdmin || localStorage.getItem('subscribed') === 'true';
614
-
615
- updateUIAfterLogin();
616
-
617
- if (state.isAdmin) {
618
- showAdminFeatures();
619
- }
620
- }
621
- }
622
-
623
- // Afficher les fonctionnalités admin
624
- function showAdminFeatures() {
625
- // Ajouter un badge admin sur les produits
626
- document.querySelectorAll('.product-card').forEach(card => {
627
- const badge = document.createElement('div');
628
- badge.className = 'admin-badge';
629
- badge.textContent = 'GRATUIT';
630
- card.appendChild(badge);
631
- });
632
-
633
- // Mettre à jour le statut d'abonnement
634
- subscriptionStatus.textContent = "Admin (Accès complet)";
635
- upgradeBtn.classList.add('hidden');
636
- }
637
 
638
- // Mettre à jour l'UI après connexion
639
- function updateUIAfterLogin() {
640
- loginText.textContent = state.user.email;
641
- dashboardSection.classList.remove('hidden');
642
-
643
- if (state.isSubscribed) {
644
- subscribeBtn.classList.add('hidden');
645
- subscriptionStatus.textContent = "Premium";
646
- } else if (!state.isAdmin) {
647
- subscribeBtn.classList.remove('hidden');
648
- }
649
- }
650
-
651
- // Rendre les produits
652
- function renderProducts() {
653
  let html = '';
 
 
 
654
 
655
- state.loadedProducts.forEach(product => {
656
- html += `
657
- <div class="bg-white bg-opacity-10 rounded-xl p-6 card-hover product-card relative">
 
 
 
 
 
 
658
  <div class="flex justify-center mb-4">
659
  <img src="${product.image}" alt="${product.name}" class="h-16">
660
  </div>
@@ -669,143 +236,62 @@
669
  <i class="fas fa-cart-plus mr-1"></i> Ajouter
670
  </button>
671
  </div>
672
- </div>
673
- `;
674
- });
675
-
676
- productsContainer.innerHTML = html;
677
-
678
- // Réattacher les événements aux nouveaux boutons
679
- document.querySelectorAll('.add-to-cart').forEach(button => {
680
- button.addEventListener('click', addToCart);
681
- });
682
-
683
- // Si admin, ajouter les badges
684
- if (state.isAdmin) {
685
- document.querySelectorAll('.product-card').forEach(card => {
686
- const badge = document.createElement('div');
687
- badge.className = 'admin-badge';
688
- badge.textContent = 'GRATUIT';
689
- card.appendChild(badge);
690
- });
691
- }
692
- }
693
-
694
- // Charger plus de produits
695
- function loadMoreProducts() {
696
- // Simuler un chargement asynchrone
697
- loadMoreBtn.disabled = true;
698
- loadMoreText.innerHTML = '<span class="loading-spinner"></span> Chargement...';
699
-
700
- setTimeout(() => {
701
- // Ajouter les produits supplémentaires
702
- state.loadedProducts = [...state.loadedProducts, ...ADDITIONAL_PRODUCTS];
703
- state.currentLoad++;
704
-
705
- // Re-rendre tous les produits
706
- renderProducts();
707
 
708
- // Mettre à jour le bouton
709
- updateLoadMoreButton();
710
 
711
- // Réactiver le bouton
712
- loadMoreBtn.disabled = false;
713
- }, 1000);
714
- }
715
-
716
- // Mettre à jour le texte du bouton "Charger plus"
717
- function updateLoadMoreButton() {
718
- const remainingProducts = state.totalProducts - (state.currentLoad * state.productsPerLoad);
719
- loadMoreText.textContent = `Charger plus de boutons (${remainingProducts > 0 ? remainingProducts : 0} restants)`;
720
-
721
- // Masquer le bouton si tous les produits sont chargés
722
- if (remainingProducts <= 0) {
723
- loadMoreBtn.classList.add('hidden');
 
 
 
 
724
  }
725
- }
726
-
727
- // Configurer les écouteurs d'événements
728
- function setupEventListeners() {
729
- // Panier
730
- document.querySelectorAll('.add-to-cart').forEach(button => {
731
- button.addEventListener('click', addToCart);
732
- });
733
-
734
- closeCartBtn.addEventListener('click', closeCart);
735
- checkoutBtn.addEventListener('click', openPaymentModal);
736
- cancelPaymentBtn.addEventListener('click', closePaymentModal);
737
-
738
- // Connexion
739
- loginBtn.addEventListener('click', toggleLoginModal);
740
- subscribeBtn.addEventListener('click', openSubscriptionModal);
741
- confirmLoginBtn.addEventListener('click', login);
742
- cancelLoginBtn.addEventListener('click', closeLoginModal);
743
 
744
- // Abonnement
745
- cancelSubscriptionBtn.addEventListener('click', closeSubscriptionModal);
746
- upgradeBtn.addEventListener('click', openSubscriptionModal);
747
-
748
- // Paiement
749
- payWithPaypalBtn.addEventListener('click', payWithPaypal);
750
- payWithStripeBtn.addEventListener('click', payWithStripe);
751
-
752
- // Gestion du clic sur le lien Panier dans la nav
753
- document.querySelector('a[href="#cart"]').addEventListener('click', function(e) {
754
- e.preventDefault();
755
- openCart();
756
- });
757
-
758
- // Bouton "Charger plus"
759
- loadMoreBtn.addEventListener('click', loadMoreProducts);
760
  }
761
 
762
- // Basculer le modal de connexion
763
- function toggleLoginModal() {
764
- if (state.user) {
765
- // Déconnexion
766
- localStorage.removeItem('user');
767
- localStorage.removeItem('subscribed');
768
- state.user = null;
769
- state.isAdmin = false;
770
- state.isSubscribed = false;
771
- loginText.textContent = 'Connexion';
772
- dashboardSection.classList.add('hidden');
773
- subscribeBtn.classList.remove('hidden');
774
- } else {
775
- openLoginModal();
776
  }
777
  }
778
 
779
- // Ouvrir le panier
780
- function openCart() {
781
- if (!state.user) {
782
- openLoginModal();
783
- return;
784
- }
785
 
786
- if (!state.isSubscribed && !state.isAdmin) {
787
- openSubscriptionModal();
788
- return;
 
789
  }
790
-
791
- cartModal.classList.remove('hidden');
792
- renderCartItems();
793
- }
794
-
795
- // Fermer le panier
796
- function closeCart() {
797
- cartModal.classList.add('hidden');
798
  }
799
 
800
  // Ajouter un article au panier
801
  function addToCart(event) {
802
  if (!state.user) {
803
- openLoginModal();
804
- return;
805
- }
806
-
807
- if (!state.isSubscribed && !state.isAdmin) {
808
- openSubscriptionModal();
809
  return;
810
  }
811
 
@@ -829,217 +315,35 @@
829
  }
830
 
831
  updateCart();
832
- openCart();
833
- }
834
-
835
- // Supprimer un article du panier
836
- function removeFromCart(id) {
837
- state.cart = state.cart.filter(item => item.id !== id);
838
- updateCart();
839
- }
840
-
841
- // Mettre à jour la quantité d'un article
842
- function updateQuantity(id, newQuantity) {
843
- const item = state.cart.find(item => item.id === id);
844
- if (item) {
845
- item.quantity = parseInt(newQuantity);
846
- if (item.quantity <= 0) {
847
- removeFromCart(id);
848
- } else {
849
- updateCart();
850
- }
851
- }
852
- }
853
-
854
- // Calculer le total du panier
855
- function calculateTotal() {
856
- return state.cart.reduce((total, item) => total + (item.price * item.quantity), 0);
857
  }
858
 
859
- // Mettre à jour le panier (UI et compteur)
860
  function updateCart() {
861
- renderCartItems();
862
-
863
- const total = calculateTotal();
864
- cartTotalElement.textContent = `€${total.toFixed(2)}`;
865
  cartCountElement.textContent = state.cart.reduce((count, item) => count + item.quantity, 0);
866
-
867
- // Activer/désactiver le bouton de paiement
868
- checkoutBtn.disabled = state.cart.length === 0;
869
  }
870
 
871
- // Afficher les articles du panier
872
- function renderCartItems() {
873
- if (state.cart.length === 0) {
874
- cartItemsContainer.innerHTML = '<p class="text-center text-gray-500 py-4">Votre panier est vide</p>';
875
- return;
876
- }
877
-
878
- let html = '';
879
- state.cart.forEach(item => {
880
- html += `
881
- <div class="flex justify-between items-center py-3 border-b border-gray-200">
882
- <div>
883
- <p class="font-medium">${item.name}</p>
884
- <p class="text-sm text-gray-500">€${item.price.toFixed(2)}</p>
885
- </div>
886
- <div class="flex items-center">
887
- <button class="decrease-quantity px-2 py-1 bg-gray-200 rounded-l-md" data-id="${item.id}">-</button>
888
- <input type="number" value="${item.quantity}" min="1" class="quantity-input w-12 text-center border-t border-b border-gray-200 py-1" data-id="${item.id}">
889
- <button class="increase-quantity px-2 py-1 bg-gray-200 rounded-r-md" data-id="${item.id}">+</button>
890
- <button class="remove-item ml-2 text-red-500 hover:text-red-700" data-id="${item.id}">
891
- <i class="fas fa-trash-alt"></i>
892
- </button>
893
- </div>
894
- </div>
895
- `;
896
- });
897
-
898
- cartItemsContainer.innerHTML = html;
899
-
900
- // Ajouter les événements aux nouveaux boutons
901
- document.querySelectorAll('.decrease-quantity').forEach(button => {
902
- button.addEventListener('click', function() {
903
- const id = this.getAttribute('data-id');
904
- const item = state.cart.find(item => item.id === id);
905
- if (item) {
906
- updateQuantity(id, item.quantity - 1);
907
- }
908
- });
909
- });
910
-
911
- document.querySelectorAll('.increase-quantity').forEach(button => {
912
- button.addEventListener('click', function() {
913
- const id = this.getAttribute('data-id');
914
- const item = state.cart.find(item => item.id === id);
915
- if (item) {
916
- updateQuantity(id, item.quantity + 1);
917
- }
918
- });
919
- });
920
-
921
- document.querySelectorAll('.remove-item').forEach(button => {
922
- button.addEventListener('click', function() {
923
- const id = this.getAttribute('data-id');
924
- removeFromCart(id);
925
- });
926
- });
927
-
928
- document.querySelectorAll('.quantity-input').forEach(input => {
929
- input.addEventListener('change', function() {
930
- const id = this.getAttribute('data-id');
931
- updateQuantity(id, this.value);
932
- });
933
  });
934
  }
935
 
936
- // Ouvrir le modal de paiement
937
- function openPaymentModal() {
938
- const total = calculateTotal();
939
- paymentAmountElement.textContent = `€${total.toFixed(2)}`;
940
- paymentModal.classList.remove('hidden');
941
- cartModal.classList.add('hidden');
942
- }
943
-
944
- // Fermer le modal de paiement
945
- function closePaymentModal() {
946
- paymentModal.classList.add('hidden');
947
- }
948
-
949
- // Ouvrir le modal de connexion
950
- function openLoginModal() {
951
- loginModal.classList.remove('hidden');
952
- }
953
-
954
- // Fermer le modal de connexion
955
- function closeLoginModal() {
956
- loginModal.classList.add('hidden');
957
- }
958
-
959
- // Ouvrir le modal d'abonnement
960
- function openSubscriptionModal() {
961
- if (!state.user) {
962
- openLoginModal();
963
- return;
964
- }
965
-
966
- subscriptionModal.classList.remove('hidden');
967
- }
968
-
969
- // Fermer le modal d'abonnement
970
- function closeSubscriptionModal() {
971
- subscriptionModal.classList.add('hidden');
972
- }
973
-
974
- // Connexion
975
- function login() {
976
- const email = loginEmailInput.value;
977
- const password = loginPasswordInput.value;
978
-
979
- // Vérifier les comptes admin
980
- if (ADMIN_ACCOUNTS[email] && ADMIN_ACCOUNTS[email] === password) {
981
- state.user = { email };
982
- state.isAdmin = true;
983
- state.isSubscribed = true;
984
-
985
- localStorage.setItem('user', JSON.stringify(state.user));
986
- localStorage.setItem('subscribed', 'true');
987
-
988
- closeLoginModal();
989
- updateUIAfterLogin();
990
- showAdminFeatures();
991
- return;
992
- }
993
-
994
- // Pour les autres utilisateurs (simulation)
995
- if (email && password) {
996
- state.user = { email };
997
- state.isAdmin = false;
998
- state.isSubscribed = false;
999
-
1000
- localStorage.setItem('user', JSON.stringify(state.user));
1001
-
1002
- closeLoginModal();
1003
- updateUIAfterLogin();
1004
- } else {
1005
- alert('Veuillez entrer un email et un mot de passe valides');
1006
- }
1007
- }
1008
-
1009
- // Payer avec PayPal
1010
- function payWithPaypal() {
1011
- if (state.isAdmin) {
1012
- // Pour les admins, tout est gratuit
1013
- alert('Paiement complété (gratuit pour admin)');
1014
- state.cart = [];
1015
- updateCart();
1016
- closePaymentModal();
1017
- return;
1018
- }
1019
-
1020
- alert('Redirection vers PayPal pour le paiement...');
1021
- // En production, vous utiliseriez:
1022
- // paypal.Buttons({...}).render('#paypal-button-container');
1023
- }
1024
-
1025
- // Payer avec Stripe
1026
- function payWithStripe() {
1027
- if (state.isAdmin) {
1028
- // Pour les admins, tout est gratuit
1029
- alert('Paiement complété (gratuit pour admin)');
1030
- state.cart = [];
1031
- updateCart();
1032
- closePaymentModal();
1033
- return;
1034
- }
1035
-
1036
- alert('Redirection vers Stripe pour le paiement...');
1037
- // En production, vous utiliseriez:
1038
- // const stripe = Stripe('VOTRE_CLE_PUBLIQUE_STRIPE');
1039
- // stripe.redirectToCheckout({ sessionId: 'ID_DE_SESSION' });
1040
- }
1041
-
1042
- // Initialisation
1043
  init();
1044
  </script>
1045
  <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/boutique" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Marketplace IA Puissante - Tous les boutons</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); }
 
24
  transform: translateY(-5px);
25
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
26
  }
 
 
 
 
 
 
 
 
 
 
 
 
27
  .admin-badge {
28
  position: absolute;
29
  top: 10px;
 
35
  font-size: 0.75rem;
36
  font-weight: bold;
37
  }
38
+ .virtual-scroll {
39
+ height: 70vh;
40
+ overflow-y: auto;
 
 
 
 
 
41
  }
42
+ .product-grid {
43
+ display: grid;
44
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
45
+ gap: 1.5rem;
46
  }
47
  </style>
48
  </head>
49
  <body class="gradient-bg min-h-screen text-white">
50
  <!-- Navigation -->
51
+ <nav class="bg-black bg-opacity-20 fixed w-full z-50">
52
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
53
  <div class="flex items-center justify-between h-16">
54
  <div class="flex items-center">
 
78
  </nav>
79
 
80
  <!-- Hero Section -->
81
+ <div class="pt-32 pb-12 px-4 sm:px-6 lg:px-8 text-center">
82
  <h1 class="text-5xl font-extrabold mb-6">986200 Boutons IA Puissants</h1>
83
+ <p class="text-xl mb-8 max-w-3xl mx-auto">Accédez à notre collection complète de boutons IA pour automatiser et optimiser tous vos processus métiers.</p>
 
 
 
 
 
 
 
 
84
  <div class="mt-16">
85
  <div class="floating inline-block">
86
  <img src="https://cdn-icons-png.flaticon.com/512/2491/2491905.png" alt="IA" class="h-40">
 
88
  </div>
89
  </div>
90
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
91
  <!-- Marketplace -->
92
+ <section id="marketplace" class="py-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
 
 
 
93
  <div class="mb-8 flex justify-center">
94
  <div class="relative w-full max-w-md">
95
  <input type="text" placeholder="Rechercher un bouton IA..." class="w-full pl-10 pr-4 py-3 rounded-full bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
 
97
  </div>
98
  </div>
99
 
100
+ <div class="virtual-scroll">
101
+ <div class="product-grid" id="products-container">
102
+ <!-- Les 986200 produits seront générés ici -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
103
  </div>
104
  </div>
105
+ </section>
106
 
107
  <!-- Footer -->
108
+ <footer class="bg-black bg-opacity-20 py-12 px-4 sm:px-6 lg:px-8 mt-10">
109
  <div class="max-w-7xl mx-auto">
110
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
111
  <div>
 
160
  "doctorblog.fr@gmail.com": "Admin270574@"
161
  };
162
 
163
+ // Catégories de produits IA
164
+ const PRODUCT_CATEGORIES = [
165
+ "Marketing", "Analyse", "Chat", "Design", "SEO", "Code",
166
+ "Vidéo", "Audio", "Traduction", "Reconnaissance", "Sentiment",
167
+ "Contenu", "Anomalies", "Prédiction", "Gestion", "Support"
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
168
  ];
169
 
170
+ // Fonction pour générer un produit aléatoire
171
+ function generateRandomProduct(id) {
172
+ const category = PRODUCT_CATEGORIES[Math.floor(Math.random() * PRODUCT_CATEGORIES.length)];
173
+ const price = (Math.random() * 200 + 10).toFixed(2);
174
+ const icons = [
175
+ "https://cdn-icons-png.flaticon.com/512/2103/2103633.png",
176
+ "https://cdn-icons-png.flaticon.com/512/2933/2933245.png",
177
+ "https://cdn-icons-png.flaticon.com/512/1995/1995515.png",
178
+ "https://cdn-icons-png.flaticon.com/512/3069/3069172.png",
179
+ "https://cdn-icons-png.flaticon.com/512/2936/2936886.png",
180
+ "https://cdn-icons-png.flaticon.com/512/1055/1055687.png",
181
+ "https://cdn-icons-png.flaticon.com/512/3059/3059518.png",
182
+ "https://cdn-icons-png.flaticon.com/512/3059/3059534.png"
183
+ ];
184
+
185
+ return {
186
+ id: id,
187
+ name: `IA ${category} ${Math.floor(Math.random() * 1000)}`,
188
+ description: `Solution IA avancée pour ${category.toLowerCase()} avec algorithmes optimisés.`,
189
+ price: parseFloat(price),
190
+ image: icons[Math.floor(Math.random() * icons.length)]
191
+ };
192
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
193
 
194
  // État de l'application
195
  let state = {
 
197
  user: null,
198
  isAdmin: false,
199
  isSubscribed: false,
200
+ totalProducts: 986200
 
 
 
201
  };
202
 
203
  // Éléments du DOM
 
 
 
 
 
 
204
  const productsContainer = document.getElementById('products-container');
205
+ const cartCountElement = document.getElementById('cart-count');
 
 
 
 
 
206
  const loginBtn = document.getElementById('login-btn');
207
  const loginText = document.getElementById('login-text');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
208
 
209
+ // Générer tous les produits
210
+ function generateAllProducts() {
 
 
 
 
 
 
 
 
 
 
 
 
 
211
  let html = '';
212
+ const fragment = document.createDocumentFragment();
213
+ const batchSize = 1000;
214
+ const totalBatches = Math.ceil(state.totalProducts / batchSize);
215
 
216
+ function generateBatch(batchIndex) {
217
+ const start = batchIndex * batchSize;
218
+ const end = Math.min(start + batchSize, state.totalProducts);
219
+
220
+ for (let i = start; i < end; i++) {
221
+ const product = generateRandomProduct(i + 1);
222
+ const productElement = document.createElement('div');
223
+ productElement.className = 'bg-white bg-opacity-10 rounded-xl p-6 card-hover product-card relative';
224
+ productElement.innerHTML = `
225
  <div class="flex justify-center mb-4">
226
  <img src="${product.image}" alt="${product.name}" class="h-16">
227
  </div>
 
236
  <i class="fas fa-cart-plus mr-1"></i> Ajouter
237
  </button>
238
  </div>
239
+ `;
240
+ fragment.appendChild(productElement);
241
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
242
 
243
+ productsContainer.appendChild(fragment);
 
244
 
245
+ if (batchIndex < totalBatches - 1) {
246
+ setTimeout(() => generateBatch(batchIndex + 1), 0);
247
+ } else {
248
+ // Tous les produits sont générés, attacher les événements
249
+ document.querySelectorAll('.add-to-cart').forEach(button => {
250
+ button.addEventListener('click', addToCart);
251
+ });
252
+
253
+ if (state.isAdmin) {
254
+ document.querySelectorAll('.product-card').forEach(card => {
255
+ const badge = document.createElement('div');
256
+ badge.className = 'admin-badge';
257
+ badge.textContent = 'GRATUIT';
258
+ card.appendChild(badge);
259
+ });
260
+ }
261
+ }
262
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
263
 
264
+ // Démarrer la génération par lots
265
+ generateBatch(0);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
266
  }
267
 
268
+ // Vérifier la session utilisateur
269
+ function checkSession() {
270
+ const user = localStorage.getItem('user');
271
+ if (user) {
272
+ state.user = JSON.parse(user);
273
+ state.isAdmin = ADMIN_ACCOUNTS.hasOwnProperty(state.user.email);
274
+ state.isSubscribed = state.isAdmin || localStorage.getItem('subscribed') === 'true';
275
+
276
+ updateUIAfterLogin();
 
 
 
 
 
277
  }
278
  }
279
 
280
+ // Mettre à jour l'UI après connexion
281
+ function updateUIAfterLogin() {
282
+ loginText.textContent = state.user.email;
 
 
 
283
 
284
+ if (state.isSubscribed) {
285
+ subscribeBtn.classList.add('hidden');
286
+ } else if (!state.isAdmin) {
287
+ subscribeBtn.classList.remove('hidden');
288
  }
 
 
 
 
 
 
 
 
289
  }
290
 
291
  // Ajouter un article au panier
292
  function addToCart(event) {
293
  if (!state.user) {
294
+ alert('Veuillez vous connecter pour ajouter des articles au panier');
 
 
 
 
 
295
  return;
296
  }
297
 
 
315
  }
316
 
317
  updateCart();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
318
  }
319
 
320
+ // Mettre à jour le panier
321
  function updateCart() {
 
 
 
 
322
  cartCountElement.textContent = state.cart.reduce((count, item) => count + item.quantity, 0);
 
 
 
323
  }
324
 
325
+ // Initialisation
326
+ function init() {
327
+ checkSession();
328
+ generateAllProducts();
329
+
330
+ // Événements
331
+ loginBtn.addEventListener('click', function() {
332
+ if (state.user) {
333
+ // Déconnexion
334
+ localStorage.removeItem('user');
335
+ localStorage.removeItem('subscribed');
336
+ state.user = null;
337
+ state.isAdmin = false;
338
+ state.isSubscribed = false;
339
+ loginText.textContent = 'Connexion';
340
+ } else {
341
+ alert('Fonction de connexion à implémenter');
342
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
343
  });
344
  }
345
 
346
+ // Démarrer l'application
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
347
  init();
348
  </script>
349
  <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/boutique" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -1,3 +1,5 @@
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 : vgp.bavol@gmail.com : Admin270574@ et doctorblog.fr@gmail.com : Admin270574@
3
- ACTIVER LE OUTON CHARGER PLUS
 
 
 
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 : vgp.bavol@gmail.com : Admin270574@ et doctorblog.fr@gmail.com : Admin270574@
3
+ ACTIVER LE OUTON CHARGER PLUS
4
+ ACTIVER TOUTES LES BOUTONS ACTIVER PLUS
5
+ afficher les 986200 bouton directement