Hugging Face's logo

Spaces:
docto41
/
courses-gen
Running

App Files Community
docto41 commited on
Commit
ec33b5a
·
verified ·
1 Parent(s): fc99ae4

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +134 -1029
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,1111 +3,216 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>MegaMarket IA - La plus grande collection d'outils 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
  .gradient-bg {
12
  background: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%);
13
  }
14
- .tool-card:hover {
15
- transform: translateY(-5px);
16
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
17
- }
18
- .category-chip {
19
- transition: all 0.3s ease;
20
- }
21
- .category-chip:hover {
22
- transform: scale(1.05);
23
- background-color: #7e3af2;
24
- }
25
- .stats-bubble {
26
- background: rgba(255, 255, 255, 0.1);
27
- backdrop-filter: blur(10px);
28
- }
29
- .search-bar:focus {
30
- box-shadow: 0 0 0 3px rgba(126, 58, 242, 0.3);
31
- }
32
- .payment-method {
33
- transition: all 0.3s ease;
34
- }
35
- .payment-method:hover {
36
- transform: scale(1.03);
37
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
38
- }
39
- .cart-item {
40
- transition: all 0.2s ease;
41
- }
42
- .cart-item:hover {
43
- background-color: #f9fafb;
44
- }
45
- .tab-content {
46
- display: none;
47
- }
48
- .tab-content.active {
49
- display: block;
50
- }
51
- .category-grid {
52
- display: grid;
53
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
54
- gap: 1rem;
55
  }
56
  </style>
57
  </head>
58
  <body class="font-sans bg-gray-50">
59
- <!-- Login/Signup Modal -->
60
- <div id="authModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
61
  <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
62
  <div class="p-6">
63
  <div class="flex justify-center mb-6">
64
- <div class="bg-purple-100 p-4 rounded-full">
65
- <i class="fas fa-user text-purple-600 text-2xl"></i>
66
  </div>
67
  </div>
68
- <h3 class="text-xl font-bold text-center mb-2">Accéder à MegaMarket IA</h3>
69
- <p class="text-gray-600 text-center mb-6">Vous devez vous connecter ou créer un compte pour accéder aux outils IA.</p>
70
 
71
- <div class="border-b border-gray-200 mb-6">
72
- <div class="flex">
73
- <button onclick="switchAuthTab('login')" class="auth-tab login-tab flex-1 py-2 font-medium border-b-2 border-purple-500 text-purple-600">Connexion</button>
74
- <button onclick="switchAuthTab('signup')" class="auth-tab signup-tab flex-1 py-2 font-medium border-b-2 border-transparent text-gray-500">Inscription</button>
75
  </div>
76
- </div>
77
-
78
- <div id="loginTab" class="tab-content active">
79
- <form id="loginForm" class="space-y-4">
80
- <div>
81
- <label for="loginEmail" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
82
- <input type="email" id="loginEmail" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
83
- </div>
84
- <div>
85
- <label for="loginPassword" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>
86
- <input type="password" id="loginPassword" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
87
- </div>
88
- <div class="flex items-center">
89
- <input id="rememberMe" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500">
90
- <label for="rememberMe" class="ml-2 text-sm text-gray-700">Se souvenir de moi</label>
91
- </div>
92
- <button type="submit" class="w-full bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
93
- Se connecter
94
- </button>
95
- </form>
96
- </div>
97
-
98
- <div id="signupTab" class="tab-content">
99
- <form id="signupForm" class="space-y-4">
100
- <div>
101
- <label for="signupName" class="block text-sm font-medium text-gray-700 mb-1">Nom complet</label>
102
- <input type="text" id="signupName" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
103
- </div>
104
- <div>
105
- <label for="signupEmail" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
106
- <input type="email" id="signupEmail" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
107
- </div>
108
- <div>
109
- <label for="signupPassword" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>
110
- <input type="password" id="signupPassword" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
111
- </div>
112
- <div>
113
- <label for="signupConfirmPassword" class="block text-sm font-medium text-gray-700 mb-1">Confirmer le mot de passe</label>
114
- <input type="password" id="signupConfirmPassword" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
115
- </div>
116
- <div class="flex items-center">
117
- <input id="acceptTerms" type="checkbox" required class="h-4 w-4 text-purple-600 focus:ring-purple-500">
118
- <label for="acceptTerms" class="ml-2 text-sm text-gray-700">J'accepte les <a href="#" class="text-purple-600 hover:underline">conditions d'utilisation</a></label>
119
- </div>
120
- <button type="submit" class="w-full bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
121
- S'inscrire
122
- </button>
123
- </form>
124
- </div>
125
- </div>
126
- </div>
127
- </div>
128
-
129
- <!-- Cart Sidebar -->
130
- <div id="cartSidebar" class="fixed inset-y-0 right-0 z-40 w-96 bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out">
131
- <div class="flex flex-col h-full">
132
- <div class="flex items-center justify-between p-4 border-b">
133
- <h3 class="text-lg font-medium text-gray-900">Votre Panier</h3>
134
- <button onclick="toggleCart()" class="text-gray-400 hover:text-gray-500">
135
- <i class="fas fa-times"></i>
136
- </button>
137
- </div>
138
- <div class="flex-1 overflow-y-auto p-4">
139
- <div id="cartItems">
140
- <!-- Cart items will be added here dynamically -->
141
- <div class="text-center py-8 text-gray-500">
142
- <i class="fas fa-shopping-cart text-4xl mb-2"></i>
143
- <p>Votre panier est vide</p>
144
  </div>
145
- </div>
146
- </div>
147
- <div class="border-t p-4">
148
- <div class="flex justify-between mb-2">
149
- <span class="text-sm text-gray-600">Sous-total</span>
150
- <span id="cartSubtotal" class="text-sm font-medium">€0.00</span>
151
- </div>
152
- <div class="flex justify-between mb-4">
153
- <span class="text-sm text-gray-600">Taxes</span>
154
- <span id="cartTaxes" class="text-sm font-medium">€0.00</span>
155
- </div>
156
- <div class="flex justify-between text-lg font-bold mb-4">
157
- <span>Total</span>
158
- <span id="cartTotal">€0.00</span>
159
- </div>
160
- <button onclick="checkout()" class="w-full bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
161
- Payer maintenant
162
- </button>
163
- <div class="mt-4 flex justify-center space-x-4">
164
- <button onclick="showPaymentMethod('paypal')" class="payment-btn">
165
- <i class="fab fa-paypal text-blue-500 text-2xl"></i>
166
- </button>
167
- <button onclick="showPaymentMethod('stripe')" class="payment-btn">
168
- <i class="fab fa-stripe text-purple-500 text-2xl"></i>
169
  </button>
170
- </div>
171
  </div>
172
  </div>
173
  </div>
174
 
175
- <!-- Payment Methods Modal -->
176
- <div id="paymentModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
177
- <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
178
- <div class="fixed inset-0 transition-opacity" aria-hidden="true">
179
- <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
180
- </div>
181
- <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
182
- <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
183
- <div>
184
- <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-purple-100">
185
- <i class="fas fa-credit-card text-purple-600"></i>
186
- </div>
187
- <div class="mt-3 text-center sm:mt-5">
188
- <h3 class="text-lg leading-6 font-medium text-gray-900" id="paymentModalTitle">Méthode de paiement</h3>
189
- </div>
190
- </div>
191
-
192
- <div id="paypalMethod" class="tab-content mt-4">
193
- <div class="bg-gray-50 p-4 rounded-md">
194
- <div class="flex items-center justify-center mb-4">
195
- <i class="fab fa-paypal text-blue-500 text-4xl"></i>
196
- </div>
197
- <p class="text-sm text-gray-600 mb-4">Vous serez redirigé vers PayPal pour compléter votre paiement.</p>
198
- <div id="paypal-button-container" class="mt-4"></div>
199
- </div>
200
- </div>
201
-
202
- <div id="stripeMethod" class="tab-content mt-4">
203
- <div class="bg-gray-50 p-4 rounded-md">
204
- <div class="flex items-center justify-center mb-4">
205
- <i class="fab fa-stripe text-purple-500 text-4xl"></i>
206
- </div>
207
- <form id="payment-form">
208
- <div id="card-element" class="border border-gray-300 p-3 rounded-md"></div>
209
- <div id="card-errors" role="alert" class="text-red-500 text-sm mt-2"></div>
210
- <button id="submit-stripe" class="w-full mt-4 bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
211
- Payer avec Stripe
212
- </button>
213
- </form>
214
- </div>
215
- </div>
216
-
217
- <div class="mt-5 sm:mt-6">
218
- <button onclick="hidePaymentModal()" type="button" class="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:text-sm">
219
- Retour
220
- </button>
221
- </div>
222
  </div>
 
 
223
  </div>
224
- </div>
225
 
226
- <!-- Navigation -->
227
- <nav class="bg-white shadow-sm sticky top-0 z-30">
228
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
229
- <div class="flex justify-between h-16">
230
- <div class="flex items-center">
231
- <div class="flex-shrink-0 flex items-center">
232
- <i class="fas fa-robot text-purple-600 text-2xl mr-2"></i>
233
- <span class="text-xl font-bold text-gray-900">MegaMarket IA</span>
234
  </div>
 
235
  </div>
236
- <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-4">
237
- <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-purple-600">Explorer</a>
238
- <a href="#" onclick="showCategories()" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-purple-600">Catégories</a>
239
- <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-purple-600">Nouveautés</a>
240
- <a href="#" onclick="showDashboard()" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-purple-600">Tableau de bord</a>
241
- <button onclick="toggleCart()" class="relative p-2 text-gray-400 hover:text-gray-500">
242
- <i class="fas fa-shopping-cart text-xl"></i>
243
- <span id="cartCount" class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-purple-600 rounded-full">0</span>
244
- </button>
245
- <button id="userMenuButton" class="flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
246
- <span class="sr-only">Ouvrir le menu utilisateur</span>
247
- <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
248
- </button>
249
- </div>
250
- <div class="-mr-2 flex items-center sm:hidden">
251
- <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500">
252
- <span class="sr-only">Menu</span>
253
- <i class="fas fa-bars"></i>
254
- </button>
255
- </div>
256
  </div>
257
- </div>
258
- </nav>
259
 
260
- <!-- Dashboard -->
261
- <div id="dashboard" class="hidden max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
262
- <div class="mb-8">
263
- <h1 class="text-3xl font-bold text-gray-900">Tableau de bord</h1>
264
- <p class="mt-2 text-sm text-gray-600">Gérez vos abonnements et paiements</p>
265
- </div>
266
-
267
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
268
- <div class="bg-white shadow rounded-lg p-6">
269
- <h3 class="text-lg font-medium text-gray-900 mb-4">Statut de l'abonnement</h3>
270
- <div class="flex items-center">
271
- <div class="flex-shrink-0 bg-green-100 p-3 rounded-full">
272
- <i class="fas fa-check-circle text-green-600"></i>
273
- </div>
274
- <div class="ml-4">
275
- <p class="text-sm font-medium text-gray-900">Abonnement actif</p>
276
- <p class="text-sm text-gray-500">Prochain paiement: 15/12/2023</p>
277
- </div>
278
- </div>
279
- </div>
280
-
281
- <div class="bg-white shadow rounded-lg p-6">
282
- <h3 class="text-lg font-medium text-gray-900 mb-4">Méthodes de paiement</h3>
283
- <div class="space-y-4">
284
- <div class="flex items-center justify-between">
285
- <div class="flex items-center">
286
- <i class="fab fa-paypal text-blue-500 text-xl mr-3"></i>
287
- <span class="text-sm font-medium">PayPal</span>
288
- </div>
289
- <button class="text-sm text-purple-600 hover:text-purple-800">Modifier</button>
290
- </div>
291
- <div class="flex items-center justify-between">
292
- <div class="flex items-center">
293
- <i class="fab fa-cc-visa text-blue-900 text-xl mr-3"></i>
294
- <span class="text-sm font-medium">•••• •••• •••• 4242</span>
295
- </div>
296
- <button class="text-sm text-purple-600 hover:text-purple-800">Modifier</button>
297
- </div>
298
- </div>
299
- </div>
300
-
301
- <div class="bg-white shadow rounded-lg p-6">
302
- <h3 class="text-lg font-medium text-gray-900 mb-4">Prochain paiement</h3>
303
- <div class="flex items-center justify-between">
304
- <div>
305
- <p class="text-2xl font-bold text-gray-900">€29.99</p>
306
- <p class="text-sm text-gray-500">Le 15/12/2023</p>
307
- </div>
308
- <button class="px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-md hover:bg-purple-700">
309
- Payer maintenant
310
- </button>
311
- </div>
312
- </div>
313
- </div>
314
-
315
- <div class="bg-white shadow rounded-lg overflow-hidden">
316
- <div class="border-b border-gray-200">
317
- <nav class="-mb-px flex">
318
- <button onclick="switchDashboardTab('payments')" class="dashboard-tab payments-tab whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm border-purple-500 text-purple-600">Historique des paiements</button>
319
- <button onclick="switchDashboardTab('invoices')" class="dashboard-tab invoices-tab whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Factures</button>
320
- <button onclick="switchDashboardTab('settings')" class="dashboard-tab settings-tab whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Paramètres</button>
321
- </nav>
322
- </div>
323
-
324
- <div id="paymentsTab" class="tab-content active p-6">
325
- <div class="overflow-x-auto">
326
- <table class="min-w-full divide-y divide-gray-200">
327
- <thead class="bg-gray-50">
328
- <tr>
329
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
330
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Méthode</th>
331
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th>
332
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
333
- </tr>
334
- </thead>
335
- <tbody class="bg-white divide-y divide-gray-200">
336
- <tr>
337
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/11/2023</td>
338
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
339
- <div class="flex items-center">
340
- <i class="fab fa-paypal text-blue-500 mr-2"></i> PayPal
341
- </div>
342
- </td>
343
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€29.99</td>
344
- <td class="px-6 py-4 whitespace-nowrap">
345
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Complété</span>
346
- </td>
347
- </tr>
348
- <tr>
349
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/10/2023</td>
350
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
351
- <div class="flex items-center">
352
- <i class="fab fa-cc-stripe text-purple-500 mr-2"></i> Stripe
353
- </div>
354
- </td>
355
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€29.99</td>
356
- <td class="px-6 py-4 whitespace-nowrap">
357
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Complété</span>
358
- </td>
359
- </tr>
360
- </tbody>
361
- </table>
362
- </div>
363
- </div>
364
-
365
- <div id="invoicesTab" class="tab-content p-6">
366
- <div class="space-y-4">
367
- <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
368
- <div>
369
- <p class="text-sm font-medium text-gray-900">Facture #MM-2023-11</p>
370
- <p class="text-sm text-gray-500">15/11/2023</p>
371
- </div>
372
- <div>
373
- <p class="text-sm font-medium text-gray-900">€29.99</p>
374
- </div>
375
- <button class="text-sm text-purple-600 hover:text-purple-800">
376
- <i class="fas fa-download mr-1"></i> Télécharger
377
- </button>
378
- </div>
379
- <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
380
- <div>
381
- <p class="text-sm font-medium text-gray-900">Facture #MM-2023-10</p>
382
- <p class="text-sm text-gray-500">15/10/2023</p>
383
- </div>
384
- <div>
385
- <p class="text-sm font-medium text-gray-900">€29.99</p>
386
- </div>
387
- <button class="text-sm text-purple-600 hover:text-purple-800">
388
- <i class="fas fa-download mr-1"></i> Télécharger
389
- </button>
390
  </div>
 
391
  </div>
 
392
  </div>
393
-
394
- <div id="settingsTab" class="tab-content p-6">
395
- <div class="space-y-6">
396
- <div>
397
- <h4 class="text-md font-medium text-gray-900 mb-4">Informations du compte</h4>
398
- <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
399
- <div>
400
- <label for="firstName" class="block text-sm font-medium text-gray-700">Prénom</label>
401
- <input type="text" id="firstName" value="Jean" 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 sm:text-sm">
402
- </div>
403
- <div>
404
- <label for="lastName" class="block text-sm font-medium text-gray-700">Nom</label>
405
- <input type="text" id="lastName" value="Dupont" 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 sm:text-sm">
406
- </div>
407
- <div>
408
- <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
409
- <input type="email" id="email" value="jean.dupont@example.com" 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 sm:text-sm">
410
- </div>
411
- </div>
412
- </div>
413
-
414
- <div>
415
- <h4 class="text-md font-medium text-gray-900 mb-4">Méthodes de paiement</h4>
416
- <div class="space-y-4">
417
- <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
418
- <div class="flex items-center">
419
- <i class="fab fa-paypal text-blue-500 text-xl mr-4"></i>
420
- <div>
421
- <p class="text-sm font-medium text-gray-900">PayPal</p>
422
- <p class="text-sm text-gray-500">jean.dupont@example.com</p>
423
- </div>
424
- </div>
425
- <button class="text-sm text-purple-600 hover:text-purple-800">Modifier</button>
426
- </div>
427
- <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
428
- <div class="flex items-center">
429
- <i class="fab fa-cc-stripe text-purple-500 text-xl mr-4"></i>
430
- <div>
431
- <p class="text-sm font-medium text-gray-900">Carte de crédit</p>
432
- <p class="text-sm text-gray-500">•••• •••• •••• 4242</p>
433
- </div>
434
- </div>
435
- <button class="text-sm text-purple-600 hover:text-purple-800">Modifier</button>
436
- </div>
437
- </div>
438
- </div>
439
-
440
- <div class="flex justify-end">
441
- <button class="bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
442
- Enregistrer les modifications
443
- </button>
444
  </div>
 
445
  </div>
 
446
  </div>
447
  </div>
448
- </div>
449
-
450
- <!-- Categories Section -->
451
- <div id="categoriesSection" class="hidden max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
452
- <div class="mb-8">
453
- <h1 class="text-3xl font-bold text-gray-900">Toutes les catégories d'IA</h1>
454
- <p class="mt-2 text-sm text-gray-600">247 catégories spécialisées d'outils d'intelligence artificielle</p>
455
- </div>
456
 
457
- <div class="category-grid">
458
- <!-- Catégories IA réelles -->
459
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
460
- <div class="flex items-center">
 
461
  <div class="bg-purple-100 p-2 rounded-md mr-3">
462
- <i class="fas fa-comments text-purple-600"></i>
463
  </div>
464
  <div>
465
- <h3 class="font-medium">Chatbots</h3>
466
- <p class="text-sm text-gray-500">1,245 outils</p>
467
  </div>
468
  </div>
469
- </div>
470
-
471
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
472
- <div class="flex items-center">
473
  <div class="bg-blue-100 p-2 rounded-md mr-3">
474
  <i class="fas fa-image text-blue-600"></i>
475
  </div>
476
  <div>
477
- <h3 class="font-medium">Génération d'images</h3>
478
- <p class="text-sm text-gray-500">980 outils</p>
479
- </div>
480
- </div>
481
- </div>
482
-
483
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
484
- <div class="flex items-center">
485
- <div class="bg-green-100 p-2 rounded-md mr-3">
486
- <i class="fas fa-microphone text-green-600"></i>
487
- </div>
488
- <div>
489
- <h3 class="font-medium">Reconnaissance vocale</h3>
490
- <p class="text-sm text-gray-500">654 outils</p>
491
- </div>
492
- </div>
493
- </div>
494
-
495
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
496
- <div class="flex items-center">
497
- <div class="bg-yellow-100 p-2 rounded-md mr-3">
498
- <i class="fas fa-code text-yellow-600"></i>
499
- </div>
500
- <div>
501
- <h3 class="font-medium">Génération de code</h3>
502
- <p class="text-sm text-gray-500">765 outils</p>
503
- </div>
504
- </div>
505
- </div>
506
-
507
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
508
- <div class="flex items-center">
509
- <div class="bg-red-100 p-2 rounded-md mr-3">
510
- <i class="fas fa-chart-line text-red-600"></i>
511
- </div>
512
- <div>
513
- <h3 class="font-medium">Analyse prédictive</h3>
514
- <p class="text-sm text-gray-500">432 outils</p>
515
- </div>
516
- </div>
517
- </div>
518
-
519
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
520
- <div class="flex items-center">
521
- <div class="bg-indigo-100 p-2 rounded-md mr-3">
522
- <i class="fas fa-video text-indigo-600"></i>
523
- </div>
524
- <div>
525
- <h3 class="font-medium">Génération vidéo</h3>
526
- <p class="text-sm text-gray-500">321 outils</p>
527
- </div>
528
- </div>
529
- </div>
530
-
531
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
532
- <div class="flex items-center">
533
- <div class="bg-purple-100 p-2 rounded-md mr-3">
534
- <i class="fas fa-language text-purple-600"></i>
535
- </div>
536
- <div>
537
- <h3 class="font-medium">Traduction automatique</h3>
538
- <p class="text-sm text-gray-500">543 outils</p>
539
- </div>
540
- </div>
541
- </div>
542
-
543
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
544
- <div class="flex items-center">
545
- <div class="bg-blue-100 p-2 rounded-md mr-3">
546
- <i class="fas fa-robot text-blue-600"></i>
547
- </div>
548
- <div>
549
- <h3 class="font-medium">Robots autonomes</h3>
550
- <p class="text-sm text-gray-500">210 outils</p>
551
- </div>
552
- </div>
553
- </div>
554
-
555
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
556
- <div class="flex items-center">
557
- <div class="bg-green-100 p-2 rounded-md mr-3">
558
- <i class="fas fa-brain text-green-600"></i>
559
- </div>
560
- <div>
561
- <h3 class="font-medium">Réseaux neuronaux</h3>
562
- <p class="text-sm text-gray-500">187 outils</p>
563
- </div>
564
- </div>
565
- </div>
566
-
567
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
568
- <div class="flex items-center">
569
- <div class="bg-yellow-100 p-2 rounded-md mr-3">
570
- <i class="fas fa-music text-yellow-600"></i>
571
- </div>
572
- <div>
573
- <h3 class="font-medium">Génération musicale</h3>
574
- <p class="text-sm text-gray-500">154 outils</p>
575
- </div>
576
- </div>
577
- </div>
578
-
579
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
580
- <div class="flex items-center">
581
- <div class="bg-red-100 p-2 rounded-md mr-3">
582
- <i class="fas fa-flask text-red-600"></i>
583
- </div>
584
- <div>
585
- <h3 class="font-medium">Recherche scientifique</h3>
586
- <p class="text-sm text-gray-500">98 outils</p>
587
- </div>
588
- </div>
589
- </div>
590
-
591
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
592
- <div class="flex items-center">
593
- <div class="bg-indigo-100 p-2 rounded-md mr-3">
594
- <i class="fas fa-car text-indigo-600"></i>
595
- </div>
596
- <div>
597
- <h3 class="font-medium">Véhicules autonomes</h3>
598
- <p class="text-sm text-gray-500">76 outils</p>
599
- </div>
600
- </div>
601
- </div>
602
-
603
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
604
- <div class="flex items-center">
605
- <div class="bg-purple-100 p-2 rounded-md mr-3">
606
- <i class="fas fa-stethoscope text-purple-600"></i>
607
- </div>
608
- <div>
609
- <h3 class="font-medium">Diagnostic médical</h3>
610
- <p class="text-sm text-gray-500">143 outils</p>
611
- </div>
612
- </div>
613
- </div>
614
-
615
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
616
- <div class="flex items-center">
617
- <div class="bg-blue-100 p-2 rounded-md mr-3">
618
- <i class="fas fa-shopping-cart text-blue-600"></i>
619
- </div>
620
- <div>
621
- <h3 class="font-medium">Recommandations e-commerce</h3>
622
- <p class="text-sm text-gray-500">287 outils</p>
623
  </div>
624
  </div>
625
- </div>
626
-
627
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
628
- <div class="flex items-center">
629
  <div class="bg-green-100 p-2 rounded-md mr-3">
630
- <i class="fas fa-chart-bar text-green-600"></i>
631
  </div>
632
  <div>
633
- <h3 class="font-medium">Analyse de données</h3>
634
- <p class="text-sm text-gray-500">421 outils</p>
635
  </div>
636
  </div>
637
- </div>
638
-
639
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
640
- <div class="flex items-center">
641
  <div class="bg-yellow-100 p-2 rounded-md mr-3">
642
- <i class="fas fa-camera text-yellow-600"></i>
643
  </div>
644
  <div>
645
- <h3 class="font-medium">Reconnaissance faciale</h3>
646
- <p class="text-sm text-gray-500">332 outils</p>
647
  </div>
648
  </div>
649
- </div>
650
-
651
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
652
- <div class="flex items-center">
653
  <div class="bg-red-100 p-2 rounded-md mr-3">
654
- <i class="fas fa-file-alt text-red-600"></i>
655
  </div>
656
  <div>
657
- <h3 class="font-medium">Traitement de documents</h3>
658
- <p class="text-sm text-gray-500">276 outils</p>
659
  </div>
660
  </div>
661
- </div>
662
-
663
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
664
- <div class="flex items-center">
665
  <div class="bg-indigo-100 p-2 rounded-md mr-3">
666
- <i class="fas fa-chess text-indigo-600"></i>
667
- </div>
668
- <div>
669
- <h3 class="font-medium">Jeux intelligents</h3>
670
- <p class="text-sm text-gray-500">87 outils</p>
671
- </div>
672
- </div>
673
- </div>
674
-
675
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
676
- <div class="flex items-center">
677
- <div class="bg-purple-100 p-2 rounded-md mr-3">
678
- <i class="fas fa-lock text-purple-600"></i>
679
  </div>
680
  <div>
681
- <h3 class="font-medium">Cybersécurité</h3>
682
- <p class="text-sm text-gray-500">198 outils</p>
683
  </div>
684
  </div>
685
  </div>
686
-
687
- <div class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow">
688
- <div class="flex items-center">
689
- <div class="bg-blue-100 p-2 rounded-md mr-3">
690
- <i class="fas fa-graduation-cap text-blue-600"></i>
691
- </div>
692
- <div>
693
- <h3 class="font-medium">Éducation adaptative</h3>
694
- <p class="text-sm text-gray-500">154 outils</p>
695
- </div>
696
- </div>
697
- </div>
698
-
699
- <!-- Ajoutez les 227 autres catégories ici... -->
700
- <!-- Pour des raisons de concision, je montre seulement 20 catégories -->
701
- <!-- Dans un vrai site, vous auriez toutes les 247 catégories listées -->
702
  </div>
703
- </div>
704
 
705
- <!-- Hero Section -->
706
- <div class="gradient-bg text-white">
707
- <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
708
- <div class="text-center">
709
- <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
710
- La plus grande collection d'outils IA
711
- </h1>
712
- <p class="mt-6 max-w-lg mx-auto text-xl">
713
- Recherchez parmi 9,898,989 outils IA 100% fonctionnels et prêts à l'emploi
714
- </p>
715
-
716
- <!-- Search Bar -->
717
- <div class="mt-10 max-w-2xl mx-auto">
718
- <div class="relative">
719
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
720
- <i class="fas fa-search text-gray-400"></i>
721
- </div>
722
- <input type="text" class="block w-full pl-10 pr-3 py-4 border border-transparent rounded-md leading-5 bg-white bg-opacity-20 placeholder-white placeholder-opacity-70 focus:outline-none focus:bg-white focus:ring-2 focus:ring-purple-500 focus:border-transparent search-bar" placeholder="Rechercher parmi 9,898,989 outils IA...">
723
- <div class="absolute inset-y-0 right-0 flex items-center pr-3">
724
- <button class="px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-md hover:bg-purple-700">
725
- Rechercher
726
- </button>
727
- </div>
728
- </div>
729
- </div>
730
-
731
- <!-- Stats -->
732
- <div class="mt-8 flex flex-wrap justify-center gap-4">
733
- <div class="px-4 py-2 rounded-full stats-bubble">
734
- <span class="font-medium">9,898,989</span> Outils IA
735
- </div>
736
- <div class="px-4 py-2 rounded-full stats-bubble">
737
- <span class="font-medium">247</span> Catégories
738
- </div>
739
- <div class="px-4 py-2 rounded-full stats-bubble">
740
- <span class="font-medium">24/7</span> Disponibilité
741
- </div>
742
- <div class="px-4 py-2 rounded-full stats-bubble">
743
- <span class="font-medium">∞</span> Possibilités
744
- </div>
745
- </div>
746
- </div>
747
  </div>
748
  </div>
749
 
750
- <!-- Main Content -->
751
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
752
- <!-- Categories -->
753
- <div class="mb-12">
754
- <h2 class="text-2xl font-bold text-gray-900 mb-6">Catégories Populaires</h2>
755
- <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
756
- <a href="#" class="bg-white p-4 rounded-lg shadow-sm text-center category-chip">
757
- <div class="mx-auto h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center mb-2">
758
- <i class="fas fa-comments text-purple-600"></i>
759
- </div>
760
- <span class="text-sm font-medium">Tous (9.8M)</span>
761
- </a>
762
- <a href="#" class="bg-white p-4 rounded-lg shadow-sm text-center category-chip">
763
- <div class="mx-auto h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mb-2">
764
- <i class="fas fa-robot text-blue-600"></i>
765
- </div>
766
- <span class="text-sm font-medium">Chatbots (1.2M)</span>
767
- </a>
768
- <a href="#" class="bg-white p-4 rounded-lg shadow-sm text-center category-chip">
769
- <div class="mx-auto h-10 w-10 rounded-full bg-green-100 flex items-center justify-center mb-2">
770
- <i class="fas fa-image text-green-600"></i>
771
- </div>
772
- <span class="text-sm font-medium">Images (980K)</span>
773
- </a>
774
- <a href="#" class="bg-white p-4 rounded-lg shadow-sm text-center category-chip">
775
- <div class="mx-auto h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center mb-2">
776
- <i class="fas fa-tasks text-yellow-600"></i>
777
- </div>
778
- <span class="text-sm font-medium">Productivité (875K)</span>
779
- </a>
780
- <a href="#" class="bg-white p-4 rounded-lg shadow-sm text-center category-chip">
781
- <div class="mx-auto h-10 w-10 rounded-full bg-red-100 flex items-center justify-center mb-2">
782
- <i class="fas fa-code text-red-600"></i>
783
- </div>
784
- <span class="text-sm font-medium">Développement (765K)</span>
785
- </a>
786
- <a href="#" class="bg-white p-4 rounded-lg shadow-sm text-center category-chip">
787
- <div class="mx-auto h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center mb-2">
788
- <i class="fas fa-microphone text-indigo-600"></i>
789
- </div>
790
- <span class="text-sm font-medium">Audio (654K)</span>
791
- </a>
792
- </div>
793
- </div>
794
-
795
- <!-- Featured Tools -->
796
- <div class="mb-12">
797
- <div class="flex justify-between items-center mb-6">
798
- <h2 class="text-2xl font-bold text-gray-900">Outils en Vedette</h2>
799
- <a href="#" class="text-sm font-medium text-purple-600 hover:text-purple-800">Voir tout <i class="fas fa-arrow-right ml-1"></i></a>
800
- </div>
801
-
802
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
803
- <!-- Tool Card 1 -->
804
- <div class="bg-white rounded-lg shadow-md overflow-hidden tool-card transition duration-300 ease-in-out">
805
- <div class="p-5">
806
- <div class="flex items-start">
807
- <div class="flex-shrink-0 bg-purple-100 p-3 rounded-lg">
808
- <i class="fas fa-graduation-cap text-purple-600 text-xl"></i>
809
- </div>
810
- <div class="ml-4">
811
- <h3 class="text-lg font-medium text-gray-900">Khanmigo</h3>
812
- <p class="mt-1 text-sm text-gray-500">Tuteur IA de Khan Academy - Version 4.6</p>
813
- </div>
814
- </div>
815
- <div class="mt-4 flex justify-between items-center">
816
- <div class="flex items-center">
817
- <div class="flex -space-x-1 overflow-hidden">
818
- <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
819
- <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
820
- <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt="">
821
- </div>
822
- <span class="ml-2 text-xs text-gray-500">+690 utilisateurs</span>
823
- </div>
824
- <button onclick="addToCart('Khanmigo', 29.99, 'Tuteur IA de Khan Academy - Version 4.6')" class="px-3 py-1 bg-purple-600 text-white text-xs font-medium rounded-md hover:bg-purple-700">
825
- <i class="fas fa-cart-plus mr-1"></i> Ajouter
826
- </button>
827
- </div>
828
- </div>
829
- </div>
830
-
831
- <!-- Tool Card 2 -->
832
- <div class="bg-white rounded-lg shadow-md overflow-hidden tool-card transition duration-300 ease-in-out">
833
- <div class="p-5">
834
- <div class="flex items-start">
835
- <div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg">
836
- <i class="fas fa-spell-check text-blue-600 text-xl"></i>
837
- </div>
838
- <div class="ml-4">
839
- <h3 class="text-lg font-medium text-gray-900">Grammarly</h3>
840
- <p class="mt-1 text-sm text-gray-500">Correcteur et assistant d'écriture - Version 8.4</p>
841
- </div>
842
- </div>
843
- <div class="mt-4 flex justify-between items-center">
844
- <div class="flex items-center">
845
- <div class="flex -space-x-1 overflow-hidden">
846
- <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
847
- <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
848
- </div>
849
- <span class="ml-2 text-xs text-gray-500">+438 utilisateurs</span>
850
- </div>
851
- <button onclick="addToCart('Grammarly', 19.99, 'Correcteur et assistant d'écriture - Version 8.4')" class="px-3 py-1 bg-blue-600 text-white text-xs font-medium rounded-md hover:bg-blue-700">
852
- <i class="fas fa-cart-plus mr-1"></i> Ajouter
853
- </button>
854
- </div>
855
- </div>
856
- </div>
857
-
858
- <!-- Tool Card 3 -->
859
- <div class="bg-white rounded-lg shadow-md overflow-hidden tool-card transition duration-300 ease-in-out">
860
- <div class="p-5">
861
- <div class="flex items-start">
862
- <div class="flex-shrink-0 bg-green-100 p-3 rounded-lg">
863
- <i class="fas fa-comment-dots text-green-600 text-xl"></i>
864
- </div>
865
- <div class="ml-4">
866
- <h3 class="text-lg font-medium text-gray-900">Anthropic</h3>
867
- <p class="mt-1 text-sm text-gray-500">IA conversationnelle sécurisée - Version 3.6</p>
868
- </div>
869
- </div>
870
- <div class="mt-4 flex justify-between items-center">
871
- <div class="flex items-center">
872
- <div class="flex -space-x-1 overflow-hidden">
873
- <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
874
- <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
875
- </div>
876
- <span class="ml-2 text-xs text-gray-500">+317 utilisateurs</span>
877
- </div>
878
- <button onclick="addToCart('Anthropic', 39.99, 'IA conversationnelle sécurisée - Version 3.6')" class="px-3 py-1 bg-green-600 text-white text-xs font-medium rounded-md hover:bg-green-700">
879
- <i class="fas fa-cart-plus mr-1"></i> Ajouter
880
- </button>
881
- </div>
882
- </div>
883
- </div>
884
-
885
- <!-- Tool Card 4 -->
886
- <div class="bg-white rounded-lg shadow-md overflow-hidden tool-card transition duration-300 ease-in-out">
887
- <div class="p-5">
888
- <div class="flex items-start">
889
- <div class="flex-shrink-0 bg-yellow-100 p-3 rounded-lg">
890
- <i class="fas fa-edit text-yellow-600 text-xl"></i>
891
- </div>
892
- <div class="ml-4">
893
- <h3 class="text-lg font-medium text-gray-900">Notion AI</h3>
894
- <p class="mt-1 text-sm text-gray-500">Assistant d'écriture intégré à Notion - Version 7.1</p>
895
- </div>
896
- </div>
897
- <div class="mt-4 flex justify-between items-center">
898
- <div class="flex items-center">
899
- <div class="flex -space-x-1 overflow-hidden">
900
- <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
901
- </div>
902
- <span class="ml-2 text-xs text-gray-500">+767 utilisateurs</span>
903
- </div>
904
- <button onclick="addToCart('Notion AI', 24.99, 'Assistant d'écriture intégré à Notion - Version 7.1')" class="px-3 py-1 bg-yellow-600 text-white text-xs font-medium rounded-md hover:bg-yellow-700">
905
- <i class="fas fa-cart-plus mr-1"></i> Ajouter
906
- </button>
907
- </div>
908
- </div>
909
- </div>
910
-
911
- <!-- Tool Card 5 -->
912
- <div class="bg-white rounded-lg shadow-md overflow-hidden tool-card transition duration-300 ease-in-out">
913
- <div class="p-5">
914
- <div class="flex items-start">
915
- <div class="flex-shrink-0 bg-red-100 p-3 rounded-lg">
916
- <i class="fas fa-cogs text-red-600 text-xl"></i>
917
- </div>
918
- <div class="ml-4">
919
- <h3 class="text-lg font-medium text-gray-900">Adept</h3>
920
- <p class="mt-1 text-sm text-gray-500">IA pour automatiser les workflows - Version 3.0</p>
921
- </div>
922
- </div>
923
- <div class="mt-4 flex justify-between items-center">
924
- <div class="flex items-center">
925
- <div class="flex -space-x-1 overflow-hidden">
926
- <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
927
- <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1517365884913-3c33884b06fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
928
- </div>
929
- <span class="ml-2 text-xs text-gray-500">+4 utilisateurs</span>
930
- </div>
931
- <button onclick="addToCart('Adept', 49.99, 'IA pour automatiser les workflows - Version 3.0')" class="px-3 py-1 bg-red-600 text-white text-xs font-medium rounded-md hover:bg-red-700">
932
- <i class="fas fa-cart-plus mr-1"></i> Ajouter
933
- </button>
934
- </div>
935
- </div>
936
- </div>
937
-
938
- <!-- Tool Card 6 -->
939
- <div class="bg-white rounded-lg shadow-md overflow-hidden tool-card transition duration-300 ease-in-out">
940
- <div class="p-5">
941
- <div class="flex items-start">
942
- <div class="flex-shrink-0 bg-indigo-100 p-3 rounded-lg">
943
- <i class="fas fa-film text-indigo-600 text-xl"></i>
944
- </div>
945
- <div class="ml-4">
946
- <h3 class="text-lg font-medium text-gray-900">Runway ML</h3>
947
- <p class="mt-1 text-sm text-gray-500">Génération et édition vidéo - Version 2.5</p>
948
- </div>
949
- </div>
950
- <div class="mt-4 flex justify-between items-center">
951
- <div class="flex items-center">
952
- <div class="flex -space-x-1 overflow-hidden">
953
- <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
954
- </div>
955
- <span class="ml-2 text-xs text-gray-500">+792 utilisateurs</span>
956
- </div>
957
- <button onclick="addToCart('Runway ML', 59.99, 'Génération et édition vidéo - Version 2.5')" class="px-3 py-1 bg-indigo-600 text-white text-xs font-medium rounded-md hover:bg-indigo-700">
958
- <i class="fas fa-cart-plus mr-1"></i> Ajouter
959
- </button>
960
- </div>
961
- </div>
962
- </div>
963
- </div>
964
- </div>
965
-
966
- <!-- New Tools -->
967
- <div class="mb-12">
968
- <div class="flex justify-between items-center mb-6">
969
- <h2 class="text-2xl font-bold text-gray-900">Nouveaux Outils</h2>
970
- <a href="#" class="text-sm font-medium text-purple-600 hover:text-purple-800">Voir tout <i class="fas fa-arrow-right ml-1"></i></a>
971
- </div>
972
-
973
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
974
- <!-- New Tool 1 -->
975
- <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
976
- <div class="flex-shrink-0 bg-purple-100 p-2 rounded-md">
977
- <i class="fas fa-video text-purple-600"></i>
978
- </div>
979
- <div class="ml-3">
980
- <h3 class="text-sm font-medium text-gray-900">Pictory</h3>
981
- <p class="mt-1 text-xs text-gray-500">Création de vidéos à partir de texte</p>
982
- </div>
983
- </div>
984
-
985
- <!-- New Tool 2 -->
986
- <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
987
- <div class="flex-shrink-0 bg-blue-100 p-2 rounded-md">
988
- <i class="fas fa-font text-blue-600"></i>
989
- </div>
990
- <div class="ml-3">
991
- <h3 class="text-sm font-medium text-gray-900">Anyword</h3>
992
- <p class="mt-1 text-xs text-gray-500">Copywriting optimisé</p>
993
- </div>
994
- </div>
995
-
996
- <!-- New Tool 3 -->
997
- <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
998
- <div class="flex-shrink-0 bg-green-100 p-2 rounded-md">
999
- <i class="fas fa-comment text-green-600"></i>
1000
- </div>
1001
- <div class="ml-3">
1002
- <h3 class="text-sm font-medium text-gray-900">Bard</h3>
1003
- <p class="mt-1 text-xs text-gray-500">Assistant IA conversationnel par Google</p>
1004
- </div>
1005
- </div>
1006
-
1007
- <!-- New Tool 4 -->
1008
- <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
1009
- <div class="flex-shrink-0 bg-yellow-100 p-2 rounded-md">
1010
- <i class="fas fa-code text-yellow-600"></i>
1011
- </div>
1012
- <div class="ml-3">
1013
- <h3 class="text-sm font-medium text-gray-900">Tabnine</h3>
1014
- <p class="mt-1 text-xs text-gray-500">Autocomplétion de code</p>
1015
- </div>
1016
- </div>
1017
- </div>
1018
- </div>
1019
- </div>
1020
-
1021
- <!-- Newsletter -->
1022
- <div class="bg-gray-100 py-12">
1023
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1024
- <div class="text-center">
1025
- <h2 class="text-2xl font-bold text-gray-900 mb-2">Recevez les nouveaux outils IA chaque jour</h2>
1026
- <p class="text-gray-600 mb-6">Restez informé des dernières innovations en intelligence artificielle</p>
1027
 
1028
- <div class="max-w-md mx-auto">
1029
- <form class="sm:flex">
1030
- <label for="email" class="sr-only">Votre email</label>
1031
- <input id="email" type="email" required class="w-full px-5 py-3 placeholder-gray-500 focus:ring-purple-500 focus:border-purple-500 sm:max-w-xs border-gray-300 rounded-md" placeholder="Votre email">
1032
- <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
1033
- <button type="submit" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
1034
- S'abonner
1035
- </button>
1036
- </div>
1037
- </form>
1038
- </div>
1039
- </div>
1040
- </div>
1041
- </div>
1042
 
1043
- <!-- Footer -->
1044
- <footer class="bg-gray-800 text-white">
1045
- <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
1046
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
1047
- <div>
1048
- <h3 class="text-sm font-semibold tracking-wider uppercase mb-4">MegaMarket IA</h3>
1049
- <p class="text-sm text-gray-400">
1050
- La plus grande collection d'assistants IA prêts à l'emploi avec 9,898,989 outils réels.
1051
- </p>
1052
- </div>
1053
- <div>
1054
- <h3 class="text-sm font-semibold tracking-wider uppercase mb-4">Catégories</h3>
1055
- <ul class="space-y-2">
1056
- <li><a href="#" class="text-sm text-gray-400 hover:text-white">Tous (9.8M)</a></li>
1057
- <li><a href="#" class="text-sm text-gray-400 hover:text-white">Chatbots (1.2M)</a></li>
1058
- <li><a href="#" class="text-sm text-gray-400 hover:text-white">Génération d'Images (980K)</a></li>
1059
- <li><a href="#" class="text-sm text-gray-400 hover:text-white">Productivité (875K)</a></li>
1060
- </ul>
1061
- </div>
1062
- <div>
1063
- <h3 class="text-sm font-semibold tracking-wider uppercase mb-4">Ressources</h3>
1064
- <ul class="space-y-2">
1065
- <li><a href="#" class="text-sm text-gray-400 hover:text-white">Documentation</a></li>
1066
- <li><a href="#" class="text-sm text-gray-400 hover:text-white">Blog</a></li>
1067
- <li><a href="#" class="text-sm text-gray-400 hover:text-white">Tutoriels</a></li>
1068
- <li><a href="#" class="text-sm text-gray-400 hover:text-white">API</a></li>
1069
- </ul>
1070
- </div>
1071
- <div>
1072
- <h3 class="text-sm font-semibold tracking-wider uppercase mb-4">Légal</h3>
1073
- <ul class="space-y-2">
1074
- <li><a href="#" class="text-sm text-gray-400 hover:text-white">Conditions</a></li>
1075
- <li><a href="#" class="text-sm text-gray-400 hover:text-white">Confidentialité</a></li>
1076
- <li><a href="#" class="text-sm text-gray-400 hover:text-white">CGU</a></li>
1077
- </ul>
1078
- </div>
1079
- </div>
1080
- <div class="mt-8 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
1081
- <p class="text-sm text-gray-400">
1082
- © 2023 MegaMarket IA. Tous droits réservés.
1083
- </p>
1084
- <div class="mt-4 md:mt-0 flex space-x-6">
1085
- <a href="#" class="text-gray-400 hover:text-white">
1086
- <i class="fab fa-facebook-f"></i>
1087
- </a>
1088
- <a href="#" class="text-gray-400 hover:text-white">
1089
- <i class="fab fa-twitter"></i>
1090
- </a>
1091
- <a href="#" class="text-gray-400 hover:text-white">
1092
- <i class="fab fa-linkedin-in"></i>
1093
- </a>
1094
- <a href="#" class="text-gray-400 hover:text-white">
1095
- <i class="fab fa-github"></i>
1096
- </a>
1097
- </div>
1098
- </div>
1099
- </div>
1100
- </footer>
1101
 
1102
- <script>
1103
- // Cart functionality
1104
- let cart = [];
1105
- let isLoggedIn = false;
1106
-
1107
- // Show auth modal when page loads (simulating mandatory login)
1108
- document.addEventListener('DOMContentLoaded', function() {
1109
- showAuthModal();
1110
-
1111
- // Initialize Stripe
1112
- const stripe = Stripe('pk_test_51JfZ3XKvJw9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q9Q
1113
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Accès VIP - MegaMarket 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
  .gradient-bg {
11
  background: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%);
12
  }
13
+ .vip-card {
14
+ border: 2px solid #f59e0b;
15
+ box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.3);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
  </style>
18
  </head>
19
  <body class="font-sans bg-gray-50">
20
+ <!-- VIP Access Modal -->
21
+ <div id="vipModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
22
  <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
23
  <div class="p-6">
24
  <div class="flex justify-center mb-6">
25
+ <div class="bg-yellow-100 p-4 rounded-full">
26
+ <i class="fas fa-crown text-yellow-600 text-2xl"></i>
27
  </div>
28
  </div>
29
+ <h3 class="text-xl font-bold text-center mb-2">Accès VIP MegaMarket IA</h3>
30
+ <p class="text-gray-600 text-center mb-6">Accès gratuit exclusif pour les comptes autorisés</p>
31
 
32
+ <form id="vipForm" class="space-y-4">
33
+ <div>
34
+ <label for="vipEmail" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
35
+ <input type="email" id="vipEmail" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
36
  </div>
37
+ <div>
38
+ <label for="vipPassword" class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>
39
+ <input type="password" id="vipPassword" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  </div>
41
+ <button type="button" onclick="checkVipAccess()" class="w-full bg-yellow-600 text-white py-2 px-4 rounded-md hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2">
42
+ Vérifier l'accès VIP
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  </button>
44
+ </form>
45
  </div>
46
  </div>
47
  </div>
48
 
49
+ <!-- VIP Dashboard (hidden by default) -->
50
+ <div id="vipDashboard" class="hidden max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
51
+ <div class="text-center mb-12">
52
+ <div class="mx-auto h-16 w-16 bg-yellow-100 rounded-full flex items-center justify-center mb-4">
53
+ <i class="fas fa-crown text-yellow-600 text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  </div>
55
+ <h1 class="text-3xl font-bold text-gray-900">Bienvenue dans votre espace VIP</h1>
56
+ <p class="mt-2 text-lg text-gray-600">Accès gratuit à tous les outils IA premium</p>
57
  </div>
 
58
 
59
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
60
+ <!-- VIP Benefit 1 -->
61
+ <div class="bg-white p-6 rounded-lg shadow-md vip-card">
62
+ <div class="flex items-center mb-4">
63
+ <div class="bg-purple-100 p-2 rounded-md mr-3">
64
+ <i class="fas fa-unlock text-purple-600"></i>
 
 
65
  </div>
66
+ <h3 class="text-lg font-medium">Accès complet</h3>
67
  </div>
68
+ <p class="text-gray-600">Accès illimité à tous les outils premium sans frais d'abonnement.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  </div>
 
 
70
 
71
+ <!-- VIP Benefit 2 -->
72
+ <div class="bg-white p-6 rounded-lg shadow-md vip-card">
73
+ <div class="flex items-center mb-4">
74
+ <div class="bg-blue-100 p-2 rounded-md mr-3">
75
+ <i class="fas fa-rocket text-blue-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  </div>
77
+ <h3 class="text-lg font-medium">Nouveautés en avant-première</h3>
78
  </div>
79
+ <p class="text-gray-600">Accès aux nouvelles fonctionnalités avant tout le monde.</p>
80
  </div>
81
+
82
+ <!-- VIP Benefit 3 -->
83
+ <div class="bg-white p-6 rounded-lg shadow-md vip-card">
84
+ <div class="flex items-center mb-4">
85
+ <div class="bg-green-100 p-2 rounded-md mr-3">
86
+ <i class="fas fa-headset text-green-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
87
  </div>
88
+ <h3 class="text-lg font-medium">Support prioritaire</h3>
89
  </div>
90
+ <p class="text-gray-600">Assistance technique dédiée avec temps de réponse garanti.</p>
91
  </div>
92
  </div>
 
 
 
 
 
 
 
 
93
 
94
+ <div class="mt-12 bg-white p-6 rounded-lg shadow-md">
95
+ <h3 class="text-lg font-medium mb-4">Outils Premium disponibles</h3>
96
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
97
+ <!-- Premium Tool 1 -->
98
+ <div class="border border-gray-200 rounded-lg p-4 flex items-center">
99
  <div class="bg-purple-100 p-2 rounded-md mr-3">
100
+ <i class="fas fa-robot text-purple-600"></i>
101
  </div>
102
  <div>
103
+ <h4 class="font-medium">Assistant IA Pro</h4>
104
+ <p class="text-sm text-gray-500">Version complète</p>
105
  </div>
106
  </div>
107
+
108
+ <!-- Premium Tool 2 -->
109
+ <div class="border border-gray-200 rounded-lg p-4 flex items-center">
 
110
  <div class="bg-blue-100 p-2 rounded-md mr-3">
111
  <i class="fas fa-image text-blue-600"></i>
112
  </div>
113
  <div>
114
+ <h4 class="font-medium">Générateur d'images HD</h4>
115
+ <p class="text-sm text-gray-500">Sans limite</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
116
  </div>
117
  </div>
118
+
119
+ <!-- Premium Tool 3 -->
120
+ <div class="border border-gray-200 rounded-lg p-4 flex items-center">
 
121
  <div class="bg-green-100 p-2 rounded-md mr-3">
122
+ <i class="fas fa-code text-green-600"></i>
123
  </div>
124
  <div>
125
+ <h4 class="font-medium">Assistant code</h4>
126
+ <p class="text-sm text-gray-500">Tous langages</p>
127
  </div>
128
  </div>
129
+
130
+ <!-- Premium Tool 4 -->
131
+ <div class="border border-gray-200 rounded-lg p-4 flex items-center">
 
132
  <div class="bg-yellow-100 p-2 rounded-md mr-3">
133
+ <i class="fas fa-video text-yellow-600"></i>
134
  </div>
135
  <div>
136
+ <h4 class="font-medium">Générateur vidéo</h4>
137
+ <p class="text-sm text-gray-500">4K qualité</p>
138
  </div>
139
  </div>
140
+
141
+ <!-- Premium Tool 5 -->
142
+ <div class="border border-gray-200 rounded-lg p-4 flex items-center">
 
143
  <div class="bg-red-100 p-2 rounded-md mr-3">
144
+ <i class="fas fa-microphone text-red-600"></i>
145
  </div>
146
  <div>
147
+ <h4 class="font-medium">Synthèse vocale</h4>
148
+ <p class="text-sm text-gray-500">Voix naturelles</p>
149
  </div>
150
  </div>
151
+
152
+ <!-- Premium Tool 6 -->
153
+ <div class="border border-gray-200 rounded-lg p-4 flex items-center">
 
154
  <div class="bg-indigo-100 p-2 rounded-md mr-3">
155
+ <i class="fas fa-chart-line text-indigo-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
156
  </div>
157
  <div>
158
+ <h4 class="font-medium">Analyse de données</h4>
159
+ <p class="text-sm text-gray-500">Temps réel</p>
160
  </div>
161
  </div>
162
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
163
  </div>
 
164
 
165
+ <div class="mt-8 text-center">
166
+ <button onclick="logoutVip()" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">
167
+ <i class="fas fa-sign-out-alt mr-2"></i> Quitter l'espace VIP
168
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
169
  </div>
170
  </div>
171
 
172
+ <script>
173
+ // Show VIP modal on page load
174
+ document.addEventListener('DOMContentLoaded', function() {
175
+ document.getElementById('vipModal').classList.remove('hidden');
176
+ });
177
+
178
+ // VIP accounts with access
179
+ const vipAccounts = {
180
+ "doctorblog.fr@gmail.com": "Admin270574@",
181
+ "vgp.bavol@gmail.com": "Admin270574@"
182
+ };
183
+
184
+ // Check VIP access
185
+ function checkVipAccess() {
186
+ const email = document.getElementById('vipEmail').value;
187
+ const password = document.getElementById('vipPassword').value;
188
+
189
+ if (vipAccounts[email] && vipAccounts[email] === password) {
190
+ // Successful login
191
+ document.getElementById('vipModal').classList.add('hidden');
192
+ document.getElementById('vipDashboard').classList.remove('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
193
 
194
+ // Store session
195
+ sessionStorage.setItem('vipAccess', 'granted');
196
+ sessionStorage.setItem('vipEmail', email);
197
+ } else {
198
+ alert("Accès refusé. Cet email n'a pas d'accès VIP ou le mot de passe est incorrect.");
199
+ }
200
+ }
 
 
 
 
 
 
 
201
 
202
+ // Check if already logged in
203
+ if (sessionStorage.getItem('vipAccess') === 'granted') {
204
+ document.getElementById('vipModal').classList.add('hidden');
205
+ document.getElementById('vipDashboard').classList.remove('hidden');
206
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
207
 
208
+ // Logout function
209
+ function logoutVip() {
210
+ sessionStorage.removeItem('vipAccess');
211
+ sessionStorage.removeItem('vipEmail');
212
+ document.getElementById('vipDashboard').classList.add('hidden');
213
+ document.getElementById('vipModal').classList.remove('hidden');
214
+ document.getElementById('vipForm').reset();
215
+ }
216
+ </script>
217
+ <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/courses-gen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
218
  </html>
prompts.txt CHANGED
@@ -5,4 +5,5 @@ générateur de site de cours en ligne en automatique
5
  quand on a dployer le site a ete creer exporter le site$
6
  MegaMarket IA Rechercher parmi 9,898,989 outils IA... 9,898,989 Outils IA 100% Fonctionnels Ouverture Automatique Mise à jour en Temps Réel Prêts à l'Emploi 9,898,989 Assistants IA 247 Catégories 24/7 Disponibilité ∞ Possibilités Tous (9 898 989) Chatbots (1 250 000) Génération d'Images (980 000) Productivité (875 000) Développement (765 000) Audio & Voix (654 000) Vidéo (543 000) Marketing (432 000) Recherche (321 000) Business (210 000) Éducation (198 000) Créativité (187 000) Santé (176 000) Finance (165 000) Juridique (154 000) Design (143 000) Rédaction (132 000) Traduction (121 000) SEO (110 000) Réseaux Sociaux (99 000) Nouveautés (25 000) Khanmigo 690 Tuteur IA de Khan Academy - Version 4.6 Utiliser Grammarly 438 Correcteur et assistant d'écriture - Version 8.4 Utiliser Anthropic 317 IA conversationnelle sécurisée - Version 3.6 Utiliser Notion AI 767 Assistant d'écriture intégré à Notion - Version 7.1 Utiliser Adept 4 IA pour automatiser les workflows - Version 3.0 Utiliser Runway ML 792 Génération et édition vidéo - Version 2.5 Utiliser Pictory 275 Création de vidéos à partir de texte - Version 0.8 Utiliser Anyword 50 Copywriting optimisé - Version 7.2 Utiliser Bard 729 Assistant IA conversationnel par Google - Version 8.1 Utiliser Notion AI 552 Assistant d'écriture intégré à Notion - Version 6.6 Utiliser Peppertype 191 Génération de contenu - Version 6.7 Utiliser Tabnine 457 Autocomplétion de code - Version 7.0 Utiliser Anyword 309 Copywriting optimisé - Version 1.5 Utiliser Voicemod 832 Modification de voix en temps réel - Version 4.5 Utiliser Peppertype 688 Génération de contenu - Version 8.1 Utiliser Midjourney 525 Génération d'images par IA - Version 3.1 Utiliser Notion AI 49 Assistant d'écriture intégré à Notion - Version 0.7 Utiliser Murf AI 440 Générateur de voix réalistes - Version 9.8 Utiliser Pictory 837 Création de vidéos à partir de texte - Version 1.0 Utiliser Quillbot 946 Paraphraser et assistant d'écriture - Version 8.9 Utiliser Peppertype 736 Génération de contenu - Version 7.6 Utiliser Adobe Sensei 571 IA créative d'Adobe - Version 1.6 Utiliser Notion AI 973 Assistant d'écriture intégré à Notion - Version 2.0 Utiliser Canva AI 710 Design assisté par IA - Version 5.2 Utiliser Tabnine 273 Autocomplétion de code - Version 4.8 Utiliser Replit Ghostwriter 758 IA pour coder dans le navigateur - Version 1.2 Utiliser NightCafe 475 Génération d'art par IA - Version 4.0 Utiliser Elicit 161 Assistant de recherche académique - Version 4.9 Utiliser Voicemod 793 Modification de voix en temps réel - Version 7.1 Utiliser Murf AI 475 Générateur de voix réalistes - Version 0.7 Utiliser Runway ML 9 Génération et édition vidéo - Version 2.9 Utiliser Khanmigo 255 Tuteur IA de Khan Academy - Version 9.2 Utiliser Stable Diffusion 395 Génération d'images open-source - Version 7.5 Utiliser Cohere 627 IA pour les entreprises - Version 4.2 Utiliser Quillbot 427 Paraphraser et assistant d'écriture - Version 8.4 Utiliser Adept 431 IA pour automatiser les workflows - Version 7.6 Utiliser Adobe Sensei 435 IA créative d'Adobe - Version 7.9 Utiliser Midjourney 563 Génération d'images par IA - Version 1.1 Utiliser HeyGen 33 Création de vidéos avec avatars - Version 8.0 Utiliser ElevenLabs 122 Synthèse vocale avancée - Version 7.2 Utiliser Leonardo.AI 236 Génération et édition d'images - Version 5.7 Utiliser Tabnine 625 Autocomplétion de code - Version 8.3 Utiliser ChatGPT 894 Assistant conversationnel avancé par OpenAI - Version 5.4 Utiliser Adobe Sensei 361 IA créative d'Adobe - Version 9.2 Utiliser Elicit 46 Assistant de recherche académique - Version 6.0 Utiliser Fireflies 958 Assistant de réunion IA - Version 0.1 Utiliser Leonardo.AI 295 Génération et édition d'images - Version 2.0 Utiliser Gong 454 Analyse d'appels commerciaux - Version 0.3 Utiliser Tabnine 720 Autocomplétion de code - Version 0.2 Utiliser Anthropic 593 IA conversationnelle sécurisée - Version 1.9 Utiliser Research Rabbit 154 Cartographie de la recherche - Version 0.6 Utiliser Voicemod 642 Modification de voix en temps réel - Version 8.7 Utiliser Quillbot 12 Paraphraser et assistant d'écriture - Version 0.3 Utiliser Anyword 647 Copywriting optimisé - Version 3.4 Utiliser Claude AI 293 Assistant IA par Anthropic - Version 7.6 Utiliser Scite 362 Analyse de citations scientifiques - Version 5.4 Utiliser Runway 225 Outils créatifs avec IA - Version 3.3 Utiliser Claude AI 154 Assistant IA par Anthropic - Version 2.9 Utiliser Fliki 232 Vidéos avec voix IA et images - Version 8.7 Utiliser Runway ML 922 Génération et édition vidéo - Version 8.7 Utiliser MegaMarket IA La plus grande collection d'assistants IA prêts à l'emploi avec 9,898,989 outils réels. Catégories Populaires Tous (9 898 989) Chatbots (1 250 000) Génération d'Images (980 000) Productivité (875 000) Développement (765 000) Audio & Voix (654 000) Vidéo (543 000) Ressources Documentation Blog Tutoriels API Newsletter Recevez les nouveaux outils IA chaque jour. Votre email © 2023 MegaMarket IA. Tous droits réservés. Conditions Confidentialité CGU Made with DeepSite LogoDeepSite - 🧬 Remix
7
  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
8
- je veux que vous mmontrer les 247 catéégorie activer toutes les bouton je veux ses site reel pas des sites d'exemple
 
 
5
  quand on a dployer le site a ete creer exporter le site$
6
  MegaMarket IA Rechercher parmi 9,898,989 outils IA... 9,898,989 Outils IA 100% Fonctionnels Ouverture Automatique Mise à jour en Temps Réel Prêts à l'Emploi 9,898,989 Assistants IA 247 Catégories 24/7 Disponibilité ∞ Possibilités Tous (9 898 989) Chatbots (1 250 000) Génération d'Images (980 000) Productivité (875 000) Développement (765 000) Audio & Voix (654 000) Vidéo (543 000) Marketing (432 000) Recherche (321 000) Business (210 000) Éducation (198 000) Créativité (187 000) Santé (176 000) Finance (165 000) Juridique (154 000) Design (143 000) Rédaction (132 000) Traduction (121 000) SEO (110 000) Réseaux Sociaux (99 000) Nouveautés (25 000) Khanmigo 690 Tuteur IA de Khan Academy - Version 4.6 Utiliser Grammarly 438 Correcteur et assistant d'écriture - Version 8.4 Utiliser Anthropic 317 IA conversationnelle sécurisée - Version 3.6 Utiliser Notion AI 767 Assistant d'écriture intégré à Notion - Version 7.1 Utiliser Adept 4 IA pour automatiser les workflows - Version 3.0 Utiliser Runway ML 792 Génération et édition vidéo - Version 2.5 Utiliser Pictory 275 Création de vidéos à partir de texte - Version 0.8 Utiliser Anyword 50 Copywriting optimisé - Version 7.2 Utiliser Bard 729 Assistant IA conversationnel par Google - Version 8.1 Utiliser Notion AI 552 Assistant d'écriture intégré à Notion - Version 6.6 Utiliser Peppertype 191 Génération de contenu - Version 6.7 Utiliser Tabnine 457 Autocomplétion de code - Version 7.0 Utiliser Anyword 309 Copywriting optimisé - Version 1.5 Utiliser Voicemod 832 Modification de voix en temps réel - Version 4.5 Utiliser Peppertype 688 Génération de contenu - Version 8.1 Utiliser Midjourney 525 Génération d'images par IA - Version 3.1 Utiliser Notion AI 49 Assistant d'écriture intégré à Notion - Version 0.7 Utiliser Murf AI 440 Générateur de voix réalistes - Version 9.8 Utiliser Pictory 837 Création de vidéos à partir de texte - Version 1.0 Utiliser Quillbot 946 Paraphraser et assistant d'écriture - Version 8.9 Utiliser Peppertype 736 Génération de contenu - Version 7.6 Utiliser Adobe Sensei 571 IA créative d'Adobe - Version 1.6 Utiliser Notion AI 973 Assistant d'écriture intégré à Notion - Version 2.0 Utiliser Canva AI 710 Design assisté par IA - Version 5.2 Utiliser Tabnine 273 Autocomplétion de code - Version 4.8 Utiliser Replit Ghostwriter 758 IA pour coder dans le navigateur - Version 1.2 Utiliser NightCafe 475 Génération d'art par IA - Version 4.0 Utiliser Elicit 161 Assistant de recherche académique - Version 4.9 Utiliser Voicemod 793 Modification de voix en temps réel - Version 7.1 Utiliser Murf AI 475 Générateur de voix réalistes - Version 0.7 Utiliser Runway ML 9 Génération et édition vidéo - Version 2.9 Utiliser Khanmigo 255 Tuteur IA de Khan Academy - Version 9.2 Utiliser Stable Diffusion 395 Génération d'images open-source - Version 7.5 Utiliser Cohere 627 IA pour les entreprises - Version 4.2 Utiliser Quillbot 427 Paraphraser et assistant d'écriture - Version 8.4 Utiliser Adept 431 IA pour automatiser les workflows - Version 7.6 Utiliser Adobe Sensei 435 IA créative d'Adobe - Version 7.9 Utiliser Midjourney 563 Génération d'images par IA - Version 1.1 Utiliser HeyGen 33 Création de vidéos avec avatars - Version 8.0 Utiliser ElevenLabs 122 Synthèse vocale avancée - Version 7.2 Utiliser Leonardo.AI 236 Génération et édition d'images - Version 5.7 Utiliser Tabnine 625 Autocomplétion de code - Version 8.3 Utiliser ChatGPT 894 Assistant conversationnel avancé par OpenAI - Version 5.4 Utiliser Adobe Sensei 361 IA créative d'Adobe - Version 9.2 Utiliser Elicit 46 Assistant de recherche académique - Version 6.0 Utiliser Fireflies 958 Assistant de réunion IA - Version 0.1 Utiliser Leonardo.AI 295 Génération et édition d'images - Version 2.0 Utiliser Gong 454 Analyse d'appels commerciaux - Version 0.3 Utiliser Tabnine 720 Autocomplétion de code - Version 0.2 Utiliser Anthropic 593 IA conversationnelle sécurisée - Version 1.9 Utiliser Research Rabbit 154 Cartographie de la recherche - Version 0.6 Utiliser Voicemod 642 Modification de voix en temps réel - Version 8.7 Utiliser Quillbot 12 Paraphraser et assistant d'écriture - Version 0.3 Utiliser Anyword 647 Copywriting optimisé - Version 3.4 Utiliser Claude AI 293 Assistant IA par Anthropic - Version 7.6 Utiliser Scite 362 Analyse de citations scientifiques - Version 5.4 Utiliser Runway 225 Outils créatifs avec IA - Version 3.3 Utiliser Claude AI 154 Assistant IA par Anthropic - Version 2.9 Utiliser Fliki 232 Vidéos avec voix IA et images - Version 8.7 Utiliser Runway ML 922 Génération et édition vidéo - Version 8.7 Utiliser MegaMarket IA La plus grande collection d'assistants IA prêts à l'emploi avec 9,898,989 outils réels. Catégories Populaires Tous (9 898 989) Chatbots (1 250 000) Génération d'Images (980 000) Productivité (875 000) Développement (765 000) Audio & Voix (654 000) Vidéo (543 000) Ressources Documentation Blog Tutoriels API Newsletter Recevez les nouveaux outils IA chaque jour. Votre email © 2023 MegaMarket IA. Tous droits réservés. Conditions Confidentialité CGU Made with DeepSite LogoDeepSite - 🧬 Remix
7
  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
8
+ je veux que vous mmontrer les 247 catéégorie activer toutes les bouton je veux ses site reel pas des sites d'exemple
9
+ je veux acces gratuite pour moi tout seul , doctorblog.fr@gmail.com : Admin270574@ et vgp.bavol@gmail.com : Admin270574@