Hugging Face's logo

Spaces:
docto41
/
assistant-ia
Running

App Files Community
docto41 commited on
Commit
af9f353
·
verified ·
1 Parent(s): 79696b0

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +416 -507
  2. prompts.txt +6 -1
index.html CHANGED
@@ -3,45 +3,36 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AI Assistants Marketplace - 9,898,989 Assistants Prêts à l'Emploi</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, #6e8efb, #a777e3);
12
  }
13
- .assistant-card:hover {
14
- transform: translateY(-5px);
15
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
- }
17
- .category-chip {
18
  transition: all 0.3s ease;
 
19
  }
20
- .category-chip:hover {
21
- background-color: #4f46e5;
22
- color: white;
23
- }
24
- .pulse-animation {
25
- animation: pulse 2s infinite;
26
  }
27
- @keyframes pulse {
28
- 0% { transform: scale(1); }
29
- 50% { transform: scale(1.05); }
30
- 100% { transform: scale(1); }
31
  }
32
- .typing-demo {
33
- width: 22ch;
34
- animation: typing 2s steps(22), blink .5s step-end infinite alternate;
35
- white-space: nowrap;
36
- overflow: hidden;
37
- border-right: 3px solid;
38
- font-family: monospace;
39
  }
40
- @keyframes typing {
41
- from { width: 0 }
42
  }
43
- @keyframes blink {
44
- 50% { border-color: transparent }
 
 
45
  }
46
  </style>
47
  </head>
@@ -50,560 +41,478 @@
50
  <header class="gradient-bg text-white">
51
  <div class="container mx-auto px-4 py-6">
52
  <div class="flex justify-between items-center">
53
- <div class="flex items-center space-x-2">
54
  <i class="fas fa-robot text-3xl"></i>
55
- <h1 class="text-2xl font-bold">AI Assistants</h1>
56
- </div>
57
- <div class="hidden md:flex space-x-6 items-center">
58
- <a href="#" class="hover:text-gray-200">Explorer</a>
59
- <a href="#" class="hover:text-gray-200">Créer</a>
60
- <a href="#" class="hover:text-gray-200">Entreprise</a>
61
- <a href="#" class="hover:text-gray-200">Prix</a>
62
- <button class="bg-white text-indigo-600 px-4 py-2 rounded-full font-medium hover:bg-gray-100">Se connecter</button>
63
  </div>
64
- <button class="md:hidden text-2xl">
65
- <i class="fas fa-bars"></i>
66
- </button>
67
- </div>
68
-
69
- <div class="mt-16 mb-20 text-center">
70
- <div class="max-w-4xl mx-auto">
71
- <span class="bg-white text-indigo-600 px-4 py-1 rounded-full text-sm font-medium mb-4 inline-block">9,898,989 ASSISTANTS DISPONIBLES</span>
72
- <h1 class="text-4xl md:text-6xl font-bold mb-6">Trouvez l'Assistant IA Parfait pour Vos Besoins</h1>
73
- <p class="text-xl mb-8 opacity-90">Des assistants IA spécialisés prêts à l'emploi pour automatiser vos tâches et booster votre productivité</p>
74
-
75
- <div class="relative max-w-2xl mx-auto">
76
- <input type="text" placeholder="Rechercher par compétence, industrie ou tâche..." class="w-full px-6 py-4 rounded-full shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-800">
77
- <button class="absolute right-2 top-2 bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700">
78
- <i class="fas fa-search"></i> Rechercher
79
  </button>
80
  </div>
81
-
82
- <div class="mt-6 flex flex-wrap justify-center gap-2">
83
- <span class="text-sm opacity-80">Populaire:</span>
84
- <a href="#" class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full hover:bg-opacity-30">Service client</a>
85
- <a href="#" class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full hover:bg-opacity-30">Marketing</a>
86
- <a href="#" class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full hover:bg-opacity-30">Développement</a>
87
- <a href="#" class="text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full hover:bg-opacity-30">RH</a>
88
- </div>
89
- </div>
90
  </div>
91
  </div>
92
  </header>
93
 
94
- <!-- Stats Section -->
95
- <section class="bg-white py-12">
96
- <div class="container mx-auto px-4">
97
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
98
- <div>
99
- <div class="text-4xl font-bold text-indigo-600 mb-2">9.8M+</div>
100
- <div class="text-gray-600">Assistants IA</div>
101
- </div>
102
- <div>
103
- <div class="text-4xl font-bold text-indigo-600 mb-2">120+</div>
104
- <div class="text-gray-600">Catégories</div>
105
- </div>
106
- <div>
107
- <div class="text-4xl font-bold text-indigo-600 mb-2">500K+</div>
108
- <div class="text-gray-600">Entreprises</div>
109
- </div>
110
- <div>
111
- <div class="text-4xl font-bold text-indigo-600 mb-2">24/7</div>
112
- <div class="text-gray-600">Disponibilité</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
113
  </div>
114
  </div>
115
- </div>
116
- </section>
117
-
118
- <!-- Categories -->
119
- <section class="py-16 bg-gray-50">
120
- <div class="container mx-auto px-4">
121
- <h2 class="text-3xl font-bold text-center mb-12">Explorez par Catégorie</h2>
122
-
123
- <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
124
- <a href="#" class="category-chip bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md">
125
- <div class="text-indigo-500 text-3xl mb-3"><i class="fas fa-headset"></i></div>
126
- <h3 class="font-medium">Service Client</h3>
127
- </a>
128
- <a href="#" class="category-chip bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md">
129
- <div class="text-indigo-500 text-3xl mb-3"><i class="fas fa-bullhorn"></i></div>
130
- <h3 class="font-medium">Marketing</h3>
131
- </a>
132
- <a href="#" class="category-chip bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md">
133
- <div class="text-indigo-500 text-3xl mb-3"><i class="fas fa-code"></i></div>
134
- <h3 class="font-medium">Développement</h3>
135
- </a>
136
- <a href="#" class="category-chip bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md">
137
- <div class="text-indigo-500 text-3xl mb-3"><i class="fas fa-chart-line"></i></div>
138
- <h3 class="font-medium">Analyse</h3>
139
- </a>
140
- <a href="#" class="category-chip bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md">
141
- <div class="text-indigo-500 text-3xl mb-3"><i class="fas fa-users"></i></div>
142
- <h3 class="font-medium">Ressources Humaines</h3>
143
- </a>
144
- <a href="#" class="category-chip bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md">
145
- <div class="text-indigo-500 text-3xl mb-3"><i class="fas fa-shopping-cart"></i></div>
146
- <h3 class="font-medium">E-commerce</h3>
147
- </a>
148
- <a href="#" class="category-chip bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md">
149
- <div class="text-indigo-500 text-3xl mb-3"><i class="fas fa-pen-fancy"></i></div>
150
- <h3 class="font-medium">Rédaction</h3>
151
- </a>
152
- <a href="#" class="category-chip bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md">
153
- <div class="text-indigo-500 text-3xl mb-3"><i class="fas fa-language"></i></div>
154
- <h3 class="font-medium">Traduction</h3>
155
- </a>
156
- <a href="#" class="category-chip bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md">
157
- <div class="text-indigo-500 text-3xl mb-3"><i class="fas fa-calculator"></i></div>
158
- <h3 class="font-medium">Finance</h3>
159
- </a>
160
- <a href="#" class="category-chip bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md">
161
- <div class="text-indigo-500 text-3xl mb-3"><i class="fas fa-graduation-cap"></i></div>
162
- <h3 class="font-medium">Éducation</h3>
163
- </a>
164
- <a href="#" class="category-chip bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md">
165
- <div class="text-indigo-500 text-3xl mb-3"><i class="fas fa-heartbeat"></i></div>
166
- <h3 class="font-medium">Santé</h3>
167
- </a>
168
- <a href="#" class="category-chip bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md">
169
- <div class="text-indigo-500 text-3xl mb-3"><i class="fas fa-ellipsis-h"></i></div>
170
- <h3 class="font-medium">Voir plus</h3>
171
- </a>
172
- </div>
173
- </div>
174
- </section>
175
-
176
- <!-- Featured Assistants -->
177
- <section class="py-16 bg-white">
178
- <div class="container mx-auto px-4">
179
- <div class="flex justify-between items-center mb-10">
180
- <h2 class="text-3xl font-bold">Assistants Populaires</h2>
181
- <a href="#" class="text-indigo-600 font-medium hover:underline">Voir tout</a>
182
- </div>
183
 
184
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
185
- <!-- Assistant Card 1 -->
186
- <div class="assistant-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 border border-gray-100">
187
- <div class="p-1 bg-gradient-to-r from-purple-500 to-indigo-500">
188
- <div class="bg-white p-4">
189
- <div class="flex justify-between items-start mb-3">
190
- <div class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Service Client</div>
191
- <div class="text-yellow-400 text-sm"><i class="fas fa-star"></i> 4.9</div>
192
- </div>
193
- <h3 class="font-bold text-lg mb-2">Assistant Support Client VIP</h3>
194
- <p class="text-gray-600 text-sm mb-4">Répond aux requêtes clients 24/7 avec une compréhension contextuelle avancée</p>
195
-
196
- <div class="flex items-center mb-4">
197
- <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
198
- <i class="fas fa-bolt text-indigo-500 text-sm"></i>
199
- </div>
200
- <div>
201
- <div class="text-xs text-gray-500">Temps de réponse</div>
202
- <div class="text-sm font-medium">Instantané</div>
203
- </div>
204
- </div>
205
-
206
- <div class="flex justify-between items-center pt-4 border-t border-gray-100">
207
- <div class="text-indigo-600 font-bold">49€<span class="text-gray-500 font-normal text-sm">/mois</span></div>
208
- <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-700 transition-colors">
209
- Essayer <i class="fas fa-arrow-right ml-1"></i>
210
- </button>
211
- </div>
212
- </div>
213
  </div>
214
  </div>
215
 
216
- <!-- Assistant Card 2 -->
217
- <div class="assistant-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 border border-gray-100">
218
- <div class="p-1 bg-gradient-to-r from-green-400 to-blue-500">
219
- <div class="bg-white p-4">
220
- <div class="flex justify-between items-start mb-3">
221
- <div class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Marketing</div>
222
- <div class="text-yellow-400 text-sm"><i class="fas fa-star"></i> 4.7</div>
223
- </div>
224
- <h3 class="font-bold text-lg mb-2">Générateur de Campagnes Publicitaires</h3>
225
- <p class="text-gray-600 text-sm mb-4">Crée des campagnes publicitaires optimisées pour tous les canaux en quelques secondes</p>
226
-
227
- <div class="flex items-center mb-4">
228
- <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
229
- <i class="fas fa-chart-bar text-green-500 text-sm"></i>
230
- </div>
231
- <div>
232
- <div class="text-xs text-gray-500">ROI moyen</div>
233
- <div class="text-sm font-medium">+320%</div>
234
- </div>
235
- </div>
236
-
237
- <div class="flex justify-between items-center pt-4 border-t border-gray-100">
238
- <div class="text-indigo-600 font-bold">79€<span class="text-gray-500 font-normal text-sm">/mois</span></div>
239
- <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-700 transition-colors">
240
- Essayer <i class="fas fa-arrow-right ml-1"></i>
241
- </button>
242
- </div>
243
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
244
  </div>
245
  </div>
246
 
247
- <!-- Assistant Card 3 -->
248
- <div class="assistant-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 border border-gray-100">
249
- <div class="p-1 bg-gradient-to-r from-red-400 to-pink-500">
250
- <div class="bg-white p-4">
251
- <div class="flex justify-between items-start mb-3">
252
- <div class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Développement</div>
253
- <div class="text-yellow-400 text-sm"><i class="fas fa-star"></i> 4.8</div>
 
 
 
 
 
 
 
 
254
  </div>
255
- <h3 class="font-bold text-lg mb-2">Code Assistant Pro</h3>
256
- <p class="text-gray-600 text-sm mb-4">Génère, debug et optimise du code dans 15+ langages de programmation</p>
257
-
258
- <div class="flex items-center mb-4">
259
- <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-2">
260
- <i class="fas fa-code text-red-500 text-sm"></i>
261
- </div>
262
- <div>
263
- <div class="text-xs text-gray-500">Langages</div>
264
- <div class="text-sm font-medium">15+</div>
265
- </div>
266
  </div>
267
-
268
- <div class="flex justify-between items-center pt-4 border-t border-gray-100">
269
- <div class="text-indigo-600 font-bold">99€<span class="text-gray-500 font-normal text-sm">/mois</span></div>
270
- <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-700 transition-colors">
271
- Essayer <i class="fas fa-arrow-right ml-1"></i>
 
 
 
 
 
 
 
 
 
 
 
272
  </button>
273
  </div>
274
  </div>
275
  </div>
276
- </div>
277
-
278
- <!-- Assistant Card 4 -->
279
- <div class="assistant-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 border border-gray-100">
280
- <div class="p-1 bg-gradient-to-r from-yellow-400 to-orange-500">
281
- <div class="bg-white p-4">
282
- <div class="flex justify-between items-start mb-3">
283
- <div class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Rédaction</div>
284
- <div class="text-yellow-400 text-sm"><i class="fas fa-star"></i> 4.9</div>
285
- </div>
286
- <h3 class="font-bold text-lg mb-2">Rédacteur SEO Ultime</h3>
287
- <p class="text-gray-600 text-sm mb-4">Crée du contenu optimisé SEO, engageant et adapté à votre audience</p>
288
-
289
- <div class="flex items-center mb-4">
290
- <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-2">
291
- <i class="fas fa-search text-yellow-500 text-sm"></i>
292
  </div>
293
- <div>
294
- <div class="text-xs text-gray-500">Mots générés</div>
295
- <div class="text-sm font-medium">5M+/jour</div>
 
 
 
 
 
 
 
 
 
 
 
 
296
  </div>
 
 
 
 
297
  </div>
298
 
299
- <div class="flex justify-between items-center pt-4 border-t border-gray-100">
300
- <div class="text-indigo-600 font-bold">59€<span class="text-gray-500 font-normal text-sm">/mois</span></div>
301
- <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-700 transition-colors">
302
- Essayer <i class="fas fa-arrow-right ml-1"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
303
  </button>
304
  </div>
305
  </div>
306
  </div>
307
  </div>
308
- </div>
309
- </div>
310
- </section>
311
-
312
- <!-- Demo Section -->
313
- <section class="py-16 gradient-bg text-white">
314
- <div class="container mx-auto px-4">
315
- <div class="flex flex-col lg:flex-row items-center">
316
- <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
317
- <h2 class="text-3xl font-bold mb-6">Essayez un Assistant Maintenant</h2>
318
- <p class="text-xl mb-8 opacity-90">Nos assistants IA sont prêts à travailler pour vous immédiatement. Aucune configuration nécessaire.</p>
319
 
320
- <div class="bg-white bg-opacity-10 p-6 rounded-xl mb-6">
321
- <div class="flex mb-4">
322
- <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-3">
323
- <i class="fas fa-robot"></i>
324
- </div>
325
- <div class="flex-1 bg-gray-800 bg-opacity-50 rounded-lg p-4">
326
- <div class="typing-demo">Comment puis-je vous aider aujourd'hui?</div>
327
  </div>
328
- </div>
329
-
330
- <div class="bg-white rounded-lg p-4">
331
- <div class="flex">
332
- <input type="text" placeholder="Posez votre question..." class="flex-1 bg-gray-100 rounded-l-lg px-4 py-2 focus:outline-none text-gray-800">
333
- <button class="bg-indigo-600 text-white px-4 rounded-r-lg hover:bg-indigo-700">
334
- <i class="fas fa-paper-plane"></i>
335
- </button>
336
  </div>
337
  </div>
338
  </div>
339
 
340
- <div class="flex flex-wrap gap-3">
341
- <button class="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-lg">
342
- <i class="fas fa-comment-dots mr-2"></i> Service Client
343
- </button>
344
- <button class="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-lg">
345
- <i class="fas fa-file-alt mr-2"></i> Rédaction
346
- </button>
347
- <button class="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-lg">
348
- <i class="fas fa-code mr-2"></i> Développement
349
- </button>
350
- </div>
351
- </div>
352
-
353
- <div class="lg:w-1/2 bg-white bg-opacity-10 rounded-2xl p-8 border border-white border-opacity-20">
354
- <h3 class="text-2xl font-bold mb-6">Comment ça marche</h3>
355
-
356
  <div class="space-y-6">
357
- <div class="flex">
358
- <div class="text-indigo-200 text-2xl mr-4 font-bold">1</div>
359
- <div>
360
- <h4 class="font-bold mb-2">Choisissez votre Assistant</h4>
361
- <p class="opacity-80">Parcourez notre marketplace de 9.8M+ assistants spécialisés.</p>
362
- </div>
 
363
  </div>
364
 
365
- <div class="flex">
366
- <div class="text-indigo-200 text-2xl mr-4 font-bold">2</div>
367
- <div>
368
- <h4 class="font-bold mb-2">Configurez en 1 clic</h4>
369
- <p class="opacity-80">Aucune installation nécessaire. Fonctionne directement depuis votre navigateur.</p>
370
- </div>
371
  </div>
372
 
373
- <div class="flex">
374
- <div class="text-indigo-200 text-2xl mr-4 font-bold">3</div>
375
- <div>
376
- <h4 class="font-bold mb-2">Commencez à automatiser</h4>
377
- <p class="opacity-80">Votre assistant IA est prêt à travailler pour vous immédiatement.</p>
378
- </div>
 
 
379
  </div>
380
  </div>
381
 
382
- <button class="mt-8 bg-white text-indigo-600 px-6 py-3 rounded-lg font-bold hover:bg-gray-100 transition-colors w-full pulse-animation">
383
- <i class="fas fa-rocket mr-2"></i> Démarrer l'Essai Gratuit
384
- </button>
 
 
 
 
 
385
  </div>
386
  </div>
387
  </div>
388
  </section>
389
 
390
- <!-- Testimonials -->
391
- <section class="py-16 bg-white">
392
- <div class="container mx-auto px-4">
393
- <h2 class="text-3xl font-bold text-center mb-12">Ils nous font confiance</h2>
 
 
 
 
 
394
 
395
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
396
- <div class="bg-gray-50 p-8 rounded-xl">
397
- <div class="flex items-center mb-4">
398
- <div class="text-yellow-400 mr-2">
399
- <i class="fas fa-star"></i>
400
- <i class="fas fa-star"></i>
401
- <i class="fas fa-star"></i>
402
- <i class="fas fa-star"></i>
403
- <i class="fas fa-star"></i>
404
- </div>
405
- <div class="text-gray-500 text-sm">2 mois d'utilisation</div>
406
- </div>
407
- <p class="text-gray-700 mb-6">"L'assistant service client a réduit notre temps de réponse de 80% et augmenté la satisfaction client de 40%. Incroyable!"</p>
408
- <div class="flex items-center">
409
- <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="User" class="w-10 h-10 rounded-full mr-3">
410
- <div>
411
- <div class="font-medium">Sophie Martin</div>
412
- <div class="text-gray-500 text-sm">Directrice CX, RetailCo</div>
413
- </div>
414
- </div>
415
- </div>
416
-
417
- <div class="bg-gray-50 p-8 rounded-xl">
418
- <div class="flex items-center mb-4">
419
- <div class="text-yellow-400 mr-2">
420
- <i class="fas fa-star"></i>
421
- <i class="fas fa-star"></i>
422
- <i class="fas fa-star"></i>
423
- <i class="fas fa-star"></i>
424
- <i class="fas fa-star"></i>
425
- </div>
426
- <div class="text-gray-500 text-sm">5 mois d'utilisation</div>
427
- </div>
428
- <p class="text-gray-700 mb-6">"Notre assistant marketing génère des campagnes plus performantes que nos anciennes agences. Et pour 1/10 du prix!"</p>
429
- <div class="flex items-center">
430
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full mr-3">
431
- <div>
432
- <div class="font-medium">Thomas Leroy</div>
433
- <div class="text-gray-500 text-sm">CMO, TechStartup</div>
434
- </div>
435
- </div>
436
- </div>
437
-
438
- <div class="bg-gray-50 p-8 rounded-xl">
439
- <div class="flex items-center mb-4">
440
- <div class="text-yellow-400 mr-2">
441
- <i class="fas fa-star"></i>
442
- <i class="fas fa-star"></i>
443
- <i class="fas fa-star"></i>
444
- <i class="fas fa-star"></i>
445
- <i class="fas fa-star-half-alt"></i>
446
- </div>
447
- <div class="text-gray-500 text-sm">3 semaines d'utilisation</div>
448
- </div>
449
- <p class="text-gray-700 mb-6">"L'assistant code m'aide à debugger et optimiser mon code. C'est comme avoir un senior dev à mes côtés 24/7."</p>
450
- <div class="flex items-center">
451
- <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User" class="w-10 h-10 rounded-full mr-3">
452
- <div>
453
- <div class="font-medium">Amélie Dubois</div>
454
- <div class="text-gray-500 text-sm">Développeuse Fullstack</div>
455
- </div>
456
- </div>
457
  </div>
458
  </div>
459
 
460
- <div class="mt-12 text-center">
461
- <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition-colors">
462
- <i class="fas fa-comments mr-2"></i> Voir plus de témoignages
 
 
 
 
 
 
 
 
463
  </button>
464
  </div>
465
- </div>
466
- </section>
467
-
468
- <!-- CTA Section -->
469
- <section class="py-16 bg-gray-900 text-white">
470
- <div class="container mx-auto px-4 text-center">
471
- <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à booster votre productivité?</h2>
472
- <p class="text-xl opacity-90 mb-8 max-w-3xl mx-auto">Rejoignez 500,000+ entreprises et professionnels qui automatisent déjà leurs tâches avec nos assistants IA.</p>
473
 
474
- <div class="flex flex-col sm:flex-row justify-center gap-4 max-w-2xl mx-auto">
475
- <button class="bg-indigo-600 text-white px-8 py-4 rounded-lg font-bold hover:bg-indigo-700 transition-colors flex-1">
476
- <i class="fas fa-play mr-2"></i> Essai Gratuit 14 jours
477
- </button>
478
- <button class="bg-white bg-opacity-10 text-white px-8 py-4 rounded-lg font-bold hover:bg-opacity-20 transition-colors flex-1">
479
- <i class="fas fa-comment-alt mr-2"></i> Discuter avec un expert
 
 
 
 
 
480
  </button>
481
  </div>
482
 
483
- <div class="mt-8 flex flex-wrap justify-center gap-4">
484
- <div class="flex items-center">
485
- <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center mr-2">
486
- <i class="fas fa-check text-white text-xs"></i>
487
- </div>
488
- <span class="text-sm">Aucune carte de crédit requise</span>
489
- </div>
490
- <div class="flex items-center">
491
- <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center mr-2">
492
- <i class="fas fa-check text-white text-xs"></i>
493
- </div>
494
- <span class="text-sm">Annulation à tout moment</span>
495
- </div>
496
- <div class="flex items-center">
497
- <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center mr-2">
498
- <i class="fas fa-check text-white text-xs"></i>
499
- </div>
500
- <span class="text-sm">Support 24/7</span>
501
  </div>
502
- </div>
503
- </div>
504
- </section>
505
-
506
- <!-- Footer -->
507
- <footer class="bg-gray-800 text-white pt-16 pb-8">
508
- <div class="container mx-auto px-4">
509
- <div class="grid grid-cols-2 md:grid-cols-5 gap-8 mb-12">
510
- <div class="col-span-2">
511
- <div class="flex items-center mb-4">
512
- <i class="fas fa-robot text-2xl mr-2"></i>
513
- <h3 class="text-xl font-bold">AI Assistants</h3>
514
  </div>
515
- <p class="text-gray-400 mb-4">La plus grande marketplace d'assistants IA prêts à l'emploi pour automatiser vos tâches et booster votre productivité.</p>
516
- <div class="flex space-x-4">
517
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
518
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
519
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook"></i></a>
520
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
521
  </div>
522
  </div>
523
-
524
- <div>
525
- <h4 class="font-bold mb-4">Produit</h4>
526
- <ul class="space-y-2">
527
- <li><a href="#" class="text-gray-400 hover:text-white">Fonctionnalités</a></li>
528
- <li><a href="#" class="text-gray-400 hover:text-white">Tarifs</a></li>
529
- <li><a href="#" class="text-gray-400 hover:text-white">Marketplace</a></li>
530
- <li><a href="#" class="text-gray-400 hover:text-white">Intégrations</a></li>
531
- <li><a href="#" class="text-gray-400 hover:text-white">Changelog</a></li>
532
- </ul>
533
- </div>
534
-
535
- <div>
536
- <h4 class="font-bold mb-4">Ressources</h4>
537
- <ul class="space-y-2">
538
- <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
539
- <li><a href="#" class="text-gray-400 hover:text-white">Tutoriels</a></li>
540
- <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
541
- <li><a href="#" class="text-gray-400 hover:text-white">Webinaires</a></li>
542
- <li><a href="#" class="text-gray-400 hover:text-white">API</a></li>
543
- </ul>
544
- </div>
545
-
546
- <div>
547
- <h4 class="font-bold mb-4">Entreprise</h4>
548
- <ul class="space-y-2">
549
- <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
550
- <li><a href="#" class="text-gray-400 hover:text-white">Carrières</a></li>
551
- <li><a href="#" class="text-gray-400 hover:text-white">Presse</a></li>
552
- <li><a href="#" class="text-gray-400 hover:text-white">Partenaires</a></li>
553
- <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
554
- </ul>
555
- </div>
556
- </div>
557
-
558
- <div class="pt-8 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center">
559
- <div class="text-gray-400 mb-4 md:mb-0">© 2023 AI Assistants. Tous droits réservés.</div>
560
- <div class="flex space-x-6">
561
- <a href="#" class="text-gray-400 hover:text-white">Conditions</a>
562
- <a href="#" class="text-gray-400 hover:text-white">Confidentialité</a>
563
- <a href="#" class="text-gray-400 hover:text-white">Cookies</a>
564
  </div>
 
 
 
565
  </div>
566
  </div>
567
- </footer>
568
 
569
  <script>
570
- // Simple interactive elements
571
- document.addEventListener('DOMContentLoaded', function() {
572
- // Category chips animation
573
- const chips = document.querySelectorAll('.category-chip');
574
- chips.forEach(chip => {
575
- chip.addEventListener('mouseenter', function() {
576
- const icon = this.querySelector('div');
577
- icon.classList.add('animate-bounce');
578
- });
579
-
580
- chip.addEventListener('mouseleave', function() {
581
- const icon = this.querySelector('div');
582
- icon.classList.remove('animate-bounce');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
583
  });
 
584
  });
 
 
 
 
 
 
 
 
585
 
586
- // Assistant cards interaction
587
- const assistantCards = document.querySelectorAll('.assistant-card');
588
- assistantCards.forEach(card => {
589
- card.addEventListener('mouseenter', function() {
590
- const gradientBorder = this.querySelector('div');
591
- gradientBorder.classList.add('bg-gradient-to-br');
592
- });
593
-
594
- card.addEventListener('mouseleave', function() {
595
- const gradientBorder = this.querySelector('div');
596
- gradientBorder.classList.remove('bg-gradient-to-br');
597
- });
598
- });
599
 
600
- // Demo typing animation reset
601
- setInterval(() => {
602
- const typingDemo = document.querySelector('.typing-demo');
603
- typingDemo.style.animation = 'none';
604
- void typingDemo.offsetWidth; // trigger reflow
605
- typingDemo.style.animation = null;
606
- }, 5000);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
607
  });
608
  </script>
609
  <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/assistant-ia" 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>MegaMarket IA - Tableau de bord Paiements</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
+ .payment-card {
 
 
 
 
15
  transition: all 0.3s ease;
16
+ border: 2px solid transparent;
17
  }
18
+ .payment-card:hover {
19
+ transform: translateY(-3px);
20
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 
 
 
21
  }
22
+ .payment-card.selected {
23
+ border-color: #6e48aa;
24
+ background-color: #f9f5ff;
 
25
  }
26
+ .subscription-card {
27
+ background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
 
 
 
 
 
28
  }
29
+ .premium-card {
30
+ background: linear-gradient(135deg, #fceabb 0%, #f8b500 100%);
31
  }
32
+ .tab-active {
33
+ border-bottom: 3px solid #6e48aa;
34
+ color: #6e48aa;
35
+ font-weight: 600;
36
  }
37
  </style>
38
  </head>
 
41
  <header class="gradient-bg text-white">
42
  <div class="container mx-auto px-4 py-6">
43
  <div class="flex justify-between items-center">
44
+ <div class="flex items-center space-x-3">
45
  <i class="fas fa-robot text-3xl"></i>
46
+ <h1 class="text-2xl font-bold">MegaMarket IA</h1>
 
 
 
 
 
 
 
47
  </div>
48
+ <nav class="hidden md:flex space-x-6 items-center">
49
+ <a href="#" class="hover:text-gray-200">Accueil</a>
50
+ <a href="#" class="hover:text-gray-200">Catégories</a>
51
+ <a href="#" class="hover:text-gray-200">Nouveautés</a>
52
+ <div class="flex items-center space-x-4">
53
+ <button id="userMenuBtn" class="flex items-center space-x-1">
54
+ <img id="userAvatar" src="https://ui-avatars.com/api/?name=Admin&background=6e48aa" alt="User" class="w-8 h-8 rounded-full">
55
+ <span id="userName" class="font-medium">Admin</span>
 
 
 
 
 
 
 
56
  </button>
57
  </div>
58
+ </nav>
 
 
 
 
 
 
 
 
59
  </div>
60
  </div>
61
  </header>
62
 
63
+ <!-- Dashboard Section -->
64
+ <section class="container mx-auto px-4 py-8">
65
+ <div class="flex flex-col md:flex-row gap-8">
66
+ <!-- Sidebar -->
67
+ <div class="w-full md:w-64 flex-shrink-0">
68
+ <div class="bg-white rounded-xl shadow p-4 sticky top-4">
69
+ <div class="flex items-center mb-6">
70
+ <img id="userAvatar" src="https://ui-avatars.com/api/?name=Admin&background=6e48aa" alt="User" class="w-12 h-12 rounded-full mr-3">
71
+ <div>
72
+ <h3 class="font-bold">Admin</h3>
73
+ <p class="text-sm text-gray-500">Propriétaire</p>
74
+ </div>
75
+ </div>
76
+
77
+ <ul class="space-y-1">
78
+ <li>
79
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg bg-purple-50 text-purple-700">
80
+ <i class="fas fa-tachometer-alt mr-3"></i>
81
+ Tableau de bord
82
+ </a>
83
+ </li>
84
+ <li>
85
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-100">
86
+ <i class="fas fa-shopping-cart mr-3"></i>
87
+ Ventes
88
+ </a>
89
+ </li>
90
+ <li>
91
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-100">
92
+ <i class="fas fa-box-open mr-3"></i>
93
+ Produits
94
+ </a>
95
+ </li>
96
+ <li>
97
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-100">
98
+ <i class="fas fa-users mr-3"></i>
99
+ Clients
100
+ </a>
101
+ </li>
102
+ <li>
103
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-100">
104
+ <i class="fas fa-chart-line mr-3"></i>
105
+ Statistiques
106
+ </a>
107
+ </li>
108
+ <li>
109
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-100">
110
+ <i class="fas fa-cog mr-3"></i>
111
+ Paramètres
112
+ </a>
113
+ </li>
114
+ </ul>
115
+
116
+ <div class="mt-6 pt-4 border-t">
117
+ <button class="w-full flex items-center px-3 py-2 rounded-lg text-red-600 hover:bg-red-50">
118
+ <i class="fas fa-sign-out-alt mr-3"></i>
119
+ Déconnexion
120
+ </button>
121
+ </div>
122
  </div>
123
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
124
 
125
+ <!-- Main Content -->
126
+ <div class="flex-1">
127
+ <div class="flex justify-between items-center mb-6">
128
+ <h2 class="text-2xl font-bold">Tableau de bord des paiements</h2>
129
+ <div class="flex items-center space-x-2">
130
+ <span id="userEmail" class="text-gray-600">admin@megamarket-ia.com</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
131
  </div>
132
  </div>
133
 
134
+ <!-- Subscription Status -->
135
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
136
+ <div class="subscription-card bg-white p-6 rounded-xl shadow">
137
+ <div class="flex items-center justify-between mb-4">
138
+ <h3 class="font-bold text-lg">Statut d'abonnement</h3>
139
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Actif</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
140
  </div>
141
+ <p class="text-gray-600 mb-2">Plan: <span class="font-medium">Premium</span></p>
142
+ <p class="text-gray-600 mb-4">Prochaine facturation: <span class="font-medium">15/07/2023</span></p>
143
+ <button class="w-full bg-purple-600 text-white py-2 rounded-lg font-medium hover:bg-purple-700">
144
+ Gérer l'abonnement
145
+ </button>
146
+ </div>
147
+
148
+ <div class="premium-card bg-white p-6 rounded-xl shadow">
149
+ <h3 class="font-bold text-lg mb-4">Revenus du mois</h3>
150
+ <p class="text-3xl font-bold mb-2">€2,450.00</p>
151
+ <p class="text-sm text-gray-600 mb-4">+12% par rapport au mois dernier</p>
152
+ <button class="w-full bg-white text-purple-600 py-2 rounded-lg font-medium hover:bg-gray-100">
153
+ Voir les détails
154
+ </button>
155
+ </div>
156
+
157
+ <div class="bg-white p-6 rounded-xl shadow">
158
+ <h3 class="font-bold text-lg mb-4">Paiements en attente</h3>
159
+ <p class="text-3xl font-bold mb-2">€785.50</p>
160
+ <p class="text-sm text-gray-600 mb-4">3 transactions en attente</p>
161
+ <button class="w-full bg-purple-600 text-white py-2 rounded-lg font-medium hover:bg-purple-700">
162
+ Vérifier les paiements
163
+ </button>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Payment Tabs -->
168
+ <div class="bg-white rounded-xl shadow mb-6">
169
+ <div class="border-b">
170
+ <nav class="flex -mb-px">
171
+ <button class="tab-active mr-8 py-4 px-1 text-center border-b-2 font-medium text-sm">
172
+ Méthodes de paiement
173
+ </button>
174
+ <button class="mr-8 py-4 px-1 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
175
+ Historique des paiements
176
+ </button>
177
+ <button class="mr-8 py-4 px-1 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
178
+ Abonnements
179
+ </button>
180
+ </nav>
181
  </div>
182
  </div>
183
 
184
+ <!-- Payment Methods -->
185
+ <div class="bg-white p-6 rounded-xl shadow mb-8">
186
+ <div class="flex justify-between items-center mb-6">
187
+ <h3 class="font-bold text-lg">Méthodes de paiement</h3>
188
+ <button id="addPaymentMethod" class="text-purple-600 hover:text-purple-800 flex items-center">
189
+ <i class="fas fa-plus-circle mr-2"></i> Ajouter une méthode
190
+ </button>
191
+ </div>
192
+
193
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
194
+ <!-- PayPal Card -->
195
+ <div class="payment-card selected bg-white p-4 rounded-lg border">
196
+ <div class="flex items-start justify-between mb-3">
197
+ <img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/PayPal.svg" alt="PayPal" class="h-8">
198
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Par défaut</span>
199
  </div>
200
+ <p class="text-gray-600 mb-1">admin@megamarket-ia.com</p>
201
+ <p class="text-sm text-gray-500">Ajouté le 15/06/2022</p>
202
+ <div class="flex justify-end mt-4 space-x-2">
203
+ <button class="text-gray-500 hover:text-gray-700">
204
+ <i class="fas fa-edit"></i>
205
+ </button>
206
+ <button class="text-red-500 hover:text-red-700">
207
+ <i class="fas fa-trash-alt"></i>
208
+ </button>
 
 
209
  </div>
210
+ </div>
211
+
212
+ <!-- Stripe Card -->
213
+ <div class="payment-card bg-white p-4 rounded-lg border">
214
+ <div class="flex items-start justify-between mb-3">
215
+ <img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Stripe_logo%2C_revised_2016.svg" alt="Stripe" class="h-8">
216
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Secondaire</span>
217
+ </div>
218
+ <p class="text-gray-600 mb-1">Carte se terminant par 4242</p>
219
+ <p class="text-sm text-gray-500">Expire le 12/24</p>
220
+ <div class="flex justify-end mt-4 space-x-2">
221
+ <button class="text-gray-500 hover:text-gray-700">
222
+ <i class="fas fa-edit"></i>
223
+ </button>
224
+ <button class="text-red-500 hover:text-red-700">
225
+ <i class="fas fa-trash-alt"></i>
226
  </button>
227
  </div>
228
  </div>
229
  </div>
230
+
231
+ <div class="border-t pt-6">
232
+ <h4 class="font-bold text-lg mb-4">Configuration des paiements</h4>
233
+
234
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
235
+ <!-- PayPal Configuration -->
236
+ <div class="bg-gray-50 p-4 rounded-lg">
237
+ <div class="flex items-center mb-3">
238
+ <img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/PayPal.svg" alt="PayPal" class="h-6 mr-2">
239
+ <h5 class="font-medium">PayPal</h5>
 
 
 
 
 
 
240
  </div>
241
+ <p class="text-sm text-gray-600 mb-4">Configurez votre compte PayPal pour recevoir des paiements</p>
242
+
243
+ <div class="space-y-4">
244
+ <div>
245
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email PayPal</label>
246
+ <input type="email" value="admin@megamarket-ia.com" class="w-full px-3 py-2 border rounded-md focus:ring-purple-500 focus:border-purple-500">
247
+ </div>
248
+ <div>
249
+ <label class="block text-sm font-medium text-gray-700 mb-1">ID Marchand</label>
250
+ <input type="text" value="MPL123456789" class="w-full px-3 py-2 border rounded-md focus:ring-purple-500 focus:border-purple-500">
251
+ </div>
252
+ <div class="flex items-center">
253
+ <input type="checkbox" id="paypalActive" checked class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
254
+ <label for="paypalActive" class="ml-2 block text-sm text-gray-700">Activer PayPal</label>
255
+ </div>
256
  </div>
257
+
258
+ <button class="w-full mt-4 bg-purple-600 text-white py-2 rounded-md font-medium hover:bg-purple-700">
259
+ Enregistrer les modifications
260
+ </button>
261
  </div>
262
 
263
+ <!-- Stripe Configuration -->
264
+ <div class="bg-gray-50 p-4 rounded-lg">
265
+ <div class="flex items-center mb-3">
266
+ <img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Stripe_logo%2C_revised_2016.svg" alt="Stripe" class="h-6 mr-2">
267
+ <h5 class="font-medium">Stripe</h5>
268
+ </div>
269
+ <p class="text-sm text-gray-600 mb-4">Configurez votre compte Stripe pour recevoir des paiements</p>
270
+
271
+ <div class="space-y-4">
272
+ <div>
273
+ <label class="block text-sm font-medium text-gray-700 mb-1">Clé publique</label>
274
+ <input type="text" value="pk_test_51JKL123456789abc" class="w-full px-3 py-2 border rounded-md focus:ring-purple-500 focus:border-purple-500">
275
+ </div>
276
+ <div>
277
+ <label class="block text-sm font-medium text-gray-700 mb-1">Clé secrète</label>
278
+ <input type="password" value="sk_test_51JKL123456789abc" class="w-full px-3 py-2 border rounded-md focus:ring-purple-500 focus:border-purple-500">
279
+ </div>
280
+ <div class="flex items-center">
281
+ <input type="checkbox" id="stripeActive" checked class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
282
+ <label for="stripeActive" class="ml-2 block text-sm text-gray-700">Activer Stripe</label>
283
+ </div>
284
+ </div>
285
+
286
+ <button class="w-full mt-4 bg-purple-600 text-white py-2 rounded-md font-medium hover:bg-purple-700">
287
+ Enregistrer les modifications
288
  </button>
289
  </div>
290
  </div>
291
  </div>
292
  </div>
293
+
294
+ <!-- Subscription Requirements -->
295
+ <div class="bg-white p-6 rounded-xl shadow">
296
+ <h3 class="font-bold text-lg mb-4">Configuration des abonnements</h3>
 
 
 
 
 
 
 
297
 
298
+ <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
299
+ <div class="flex">
300
+ <div class="flex-shrink-0">
301
+ <i class="fas fa-exclamation-circle text-yellow-400"></i>
 
 
 
302
  </div>
303
+ <div class="ml-3">
304
+ <p class="text-sm text-yellow-700">
305
+ Les utilisateurs doivent être abonnés pour accéder au contenu gratuit. Configurez les options ci-dessous.
306
+ </p>
 
 
 
 
307
  </div>
308
  </div>
309
  </div>
310
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
311
  <div class="space-y-6">
312
+ <div>
313
+ <label class="block text-sm font-medium text-gray-700 mb-1">Niveau d'abonnement requis</label>
314
+ <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md">
315
+ <option>Gratuit (accès limité)</option>
316
+ <option selected>Premium (accès complet)</option>
317
+ <option>Entreprise (accès illimité)</option>
318
+ </select>
319
  </div>
320
 
321
+ <div>
322
+ <label class="block text-sm font-medium text-gray-700 mb-1">Message d'obligation d'abonnement</label>
323
+ <textarea rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 sm:text-sm">Vous devez vous abonner pour accéder à ce contenu. Choisissez un plan ci-dessous pour continuer.</textarea>
 
 
 
324
  </div>
325
 
326
+ <div class="flex items-center">
327
+ <input type="checkbox" id="forceSubscription" checked class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
328
+ <label for="forceSubscription" class="ml-2 block text-sm text-gray-700">Forcer l'abonnement pour tous les utilisateurs</label>
329
+ </div>
330
+
331
+ <div class="flex items-center">
332
+ <input type="checkbox" id="showPaymentOptions" checked class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
333
+ <label for="showPaymentOptions" class="ml-2 block text-sm text-gray-700">Afficher les options PayPal et Stripe</label>
334
  </div>
335
  </div>
336
 
337
+ <div class="mt-6 pt-4 border-t flex justify-end">
338
+ <button class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
339
+ Annuler
340
+ </button>
341
+ <button class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm 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">
342
+ Enregistrer les modifications
343
+ </button>
344
+ </div>
345
  </div>
346
  </div>
347
  </div>
348
  </section>
349
 
350
+ <!-- Add Payment Method Modal -->
351
+ <div id="paymentMethodModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
352
+ <div class="bg-white rounded-xl p-8 w-full max-w-md">
353
+ <div class="flex justify-between items-center mb-6">
354
+ <h3 class="text-2xl font-bold text-purple-700">Ajouter une méthode de paiement</h3>
355
+ <button id="closePaymentModal" class="text-gray-500 hover:text-gray-700">
356
+ <i class="fas fa-times"></i>
357
+ </button>
358
+ </div>
359
 
360
+ <div class="mb-6">
361
+ <div class="flex border-b">
362
+ <button id="paypalTab" class="flex-1 py-2 font-medium border-b-2 border-purple-600 text-purple-600">PayPal</button>
363
+ <button id="stripeTab" class="flex-1 py-2 font-medium text-gray-500">Stripe</button>
364
+ <button id="cardTab" class="flex-1 py-2 font-medium text-gray-500">Carte</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
365
  </div>
366
  </div>
367
 
368
+ <div id="paypalForm">
369
+ <div class="mb-4">
370
+ <label class="block text-gray-700 mb-2">Email PayPal</label>
371
+ <input type="email" placeholder="votre@email.com" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
372
+ </div>
373
+ <div class="mb-6">
374
+ <label class="block text-gray-700 mb-2">ID Marchand PayPal</label>
375
+ <input type="text" placeholder="Votre ID Marchand" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
376
+ </div>
377
+ <button class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium hover:bg-purple-700 mb-4">
378
+ <i class="fab fa-paypal mr-2"></i> Connecter PayPal
379
  </button>
380
  </div>
 
 
 
 
 
 
 
 
381
 
382
+ <div id="stripeForm" class="hidden">
383
+ <div class="mb-4">
384
+ <label class="block text-gray-700 mb-2">Clé publique Stripe</label>
385
+ <input type="text" placeholder="pk_test_..." class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
386
+ </div>
387
+ <div class="mb-6">
388
+ <label class="block text-gray-700 mb-2">Clé secrète Stripe</label>
389
+ <input type="password" placeholder="sk_test_..." class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
390
+ </div>
391
+ <button class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium hover:bg-purple-700">
392
+ <i class="fab fa-stripe mr-2"></i> Connecter Stripe
393
  </button>
394
  </div>
395
 
396
+ <div id="cardForm" class="hidden">
397
+ <div class="mb-4">
398
+ <label class="block text-gray-700 mb-2">Numéro de carte</label>
399
+ <input type="text" placeholder="4242 4242 4242 4242" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
400
  </div>
401
+ <div class="grid grid-cols-2 gap-4 mb-4">
402
+ <div>
403
+ <label class="block text-gray-700 mb-2">Date d'expiration</label>
404
+ <input type="text" placeholder="MM/AA" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
 
 
 
 
 
 
 
 
405
  </div>
406
+ <div>
407
+ <label class="block text-gray-700 mb-2">CVV</label>
408
+ <input type="text" placeholder="123" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
 
 
 
409
  </div>
410
  </div>
411
+ <div class="mb-6">
412
+ <label class="block text-gray-700 mb-2">Nom sur la carte</label>
413
+ <input type="text" placeholder="Votre nom" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
414
  </div>
415
+ <button class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium hover:bg-purple-700">
416
+ <i class="far fa-credit-card mr-2"></i> Ajouter la carte
417
+ </button>
418
  </div>
419
  </div>
420
+ </div>
421
 
422
  <script>
423
+ // Payment Method Modal
424
+ const paymentMethodModal = document.getElementById('paymentMethodModal');
425
+ const addPaymentMethod = document.getElementById('addPaymentMethod');
426
+ const closePaymentModal = document.getElementById('closePaymentModal');
427
+ const paypalTab = document.getElementById('paypalTab');
428
+ const stripeTab = document.getElementById('stripeTab');
429
+ const cardTab = document.getElementById('cardTab');
430
+ const paypalForm = document.getElementById('paypalForm');
431
+ const stripeForm = document.getElementById('stripeForm');
432
+ const cardForm = document.getElementById('cardForm');
433
+
434
+ addPaymentMethod.addEventListener('click', () => {
435
+ paymentMethodModal.classList.remove('hidden');
436
+ });
437
+
438
+ closePaymentModal.addEventListener('click', () => {
439
+ paymentMethodModal.classList.add('hidden');
440
+ });
441
+
442
+ paypalTab.addEventListener('click', () => {
443
+ paypalTab.classList.add('border-purple-600', 'text-purple-600');
444
+ stripeTab.classList.remove('border-purple-600', 'text-purple-600');
445
+ cardTab.classList.remove('border-purple-600', 'text-purple-600');
446
+ paypalForm.classList.remove('hidden');
447
+ stripeForm.classList.add('hidden');
448
+ cardForm.classList.add('hidden');
449
+ });
450
+
451
+ stripeTab.addEventListener('click', () => {
452
+ stripeTab.classList.add('border-purple-600', 'text-purple-600');
453
+ paypalTab.classList.remove('border-purple-600', 'text-purple-600');
454
+ cardTab.classList.remove('border-purple-600', 'text-purple-600');
455
+ stripeForm.classList.remove('hidden');
456
+ paypalForm.classList.add('hidden');
457
+ cardForm.classList.add('hidden');
458
+ });
459
+
460
+ cardTab.addEventListener('click', () => {
461
+ cardTab.classList.add('border-purple-600', 'text-purple-600');
462
+ paypalTab.classList.remove('border-purple-600', 'text-purple-600');
463
+ stripeTab.classList.remove('border-purple-600', 'text-purple-600');
464
+ cardForm.classList.remove('hidden');
465
+ paypalForm.classList.add('hidden');
466
+ stripeForm.classList.add('hidden');
467
+ });
468
+
469
+ // Payment Card Selection
470
+ document.querySelectorAll('.payment-card').forEach(card => {
471
+ card.addEventListener('click', function() {
472
+ document.querySelectorAll('.payment-card').forEach(c => {
473
+ c.classList.remove('selected');
474
  });
475
+ this.classList.add('selected');
476
  });
477
+ });
478
+
479
+ // Initialize Stripe
480
+ const stripe = Stripe('pk_test_51JKL123456789abc');
481
+
482
+ // Handle Stripe Payment Method
483
+ document.getElementById('stripeForm').addEventListener('submit', async function(e) {
484
+ e.preventDefault();
485
 
486
+ // In a real app, you would create a payment method with Stripe.js
487
+ // This is just a simulation for the demo
488
+ alert('Connexion à Stripe en cours...');
 
 
 
 
 
 
 
 
 
 
489
 
490
+ setTimeout(() => {
491
+ alert('Stripe connecté avec succès!');
492
+ paymentMethodModal.classList.add('hidden');
493
+
494
+ // Add the new Stripe card to the UI
495
+ const stripeCards = document.querySelector('.payment-cards');
496
+ const newCard = document.createElement('div');
497
+ newCard.className = 'payment-card bg-white p-4 rounded-lg border';
498
+ newCard.innerHTML = `
499
+ <div class="flex items-start justify-between mb-3">
500
+ <img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Stripe_logo%2C_revised_2016.svg" alt="Stripe" class="h-8">
501
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Nouveau</span>
502
+ </div>
503
+ <p class="text-gray-600 mb-1">Carte se terminant par 4242</p>
504
+ <p class="text-sm text-gray-500">Expire le 12/24</p>
505
+ <div class="flex justify-end mt-4 space-x-2">
506
+ <button class="text-gray-500 hover:text-gray-700">
507
+ <i class="fas fa-edit"></i>
508
+ </button>
509
+ <button class="text-red-500 hover:text-red-700">
510
+ <i class="fas fa-trash-alt"></i>
511
+ </button>
512
+ </div>
513
+ `;
514
+ stripeCards.appendChild(newCard);
515
+ }, 1500);
516
  });
517
  </script>
518
  <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/assistant-ia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -1 +1,6 @@
1
- creer un marketplace de de 9898989 boutons d'assistant IA de toutes services reel qui fonctionne reelement en automatic avec ses assistant IA PRET A L EMPLOI DE SUITE
 
 
 
 
 
 
1
+ creer un marketplace de de 9898989 boutons d'assistant IA de toutes services reel qui fonctionne reelement en automatic avec ses assistant IA PRET A L EMPLOI DE SUITE
2
+ RIEN FONCTIONNE REPARER TOUT
3
+ Créez votre plateforme de cours en ligne automatiquement Notre IA spécialisée génère des plateformes éducatives complètes en quelques minutes, sans aucune compétence technique requise.:: je veux entrer mes informations de paypal et stripe pour recevoir les paiment , et je veux quil prend un abonnement recurent pour avoir acces au outils
4
+ 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
5
+ 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
6
+ je veux mon tableau de bord pour entrer mes information de paiement paypal et stripe