Hugging Face's logo

Spaces:
docto41
/
course-gen
Running

App Files Community
docto41 commited on
Commit
4e3b587
·
verified ·
1 Parent(s): cc54850

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +297 -740
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,878 +3,435 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mega AI Course Generator - Futuriste</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
- :root {
11
- --primary: #6e48aa;
12
- --secondary: #9d50bb;
13
- --accent: #4776E6;
14
- --dark: #1a1a2e;
15
- --light: #f8f9fa;
16
- }
17
-
18
  body {
19
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
20
- background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
21
- color: white;
22
- overflow-x: hidden;
23
- }
24
-
25
- .neon-text {
26
- text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff00de, 0 0 20px #ff00de;
27
  }
28
 
29
- .glow-box {
30
- box-shadow: 0 0 15px rgba(110, 72, 170, 0.7);
31
  transition: all 0.3s ease;
 
32
  }
33
 
34
- .glow-box:hover {
35
- box-shadow: 0 0 25px rgba(110, 72, 170, 0.9);
36
  transform: translateY(-5px);
 
37
  }
38
 
39
- .course-btn {
40
- background: linear-gradient(45deg, var(--primary), var(--secondary));
41
- border: none;
42
- color: white;
43
- padding: 12px 20px;
44
- margin: 5px;
45
- border-radius: 50px;
46
- cursor: pointer;
47
- transition: all 0.3s ease;
48
- font-weight: bold;
49
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
50
- }
51
-
52
- .course-btn:hover {
53
- transform: scale(1.05);
54
- box-shadow: 0 0 15px rgba(110, 72, 170, 0.7);
55
- }
56
-
57
- .grid-container {
58
- display: grid;
59
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
60
- gap: 15px;
61
- }
62
-
63
- .dashboard-card {
64
- background: rgba(255, 255, 255, 0.05);
65
- backdrop-filter: blur(10px);
66
- border: 1px solid rgba(255, 255, 255, 0.1);
67
- }
68
-
69
- .holographic-effect {
70
- position: relative;
71
- overflow: hidden;
72
- }
73
-
74
- .holographic-effect::before {
75
- content: '';
76
- position: absolute;
77
- top: -50%;
78
- left: -50%;
79
- width: 200%;
80
- height: 200%;
81
- background: linear-gradient(
82
- to bottom right,
83
- rgba(255, 255, 255, 0) 0%,
84
- rgba(255, 255, 255, 0.1) 50%,
85
- rgba(255, 255, 255, 0) 100%
86
- );
87
- transform: rotate(30deg);
88
- animation: shine 3s infinite;
89
- }
90
-
91
- @keyframes shine {
92
- 0% { transform: translateX(-100%) rotate(30deg); }
93
- 100% { transform: translateX(100%) rotate(30deg); }
94
- }
95
-
96
- .payment-btn {
97
- padding: 15px 30px;
98
- font-size: 18px;
99
  border-radius: 10px;
100
- font-weight: bold;
 
101
  transition: all 0.3s;
102
  }
103
 
104
- .paypal-btn {
 
 
 
 
105
  background: linear-gradient(135deg, #253B80 0%, #179BD7 100%);
106
  color: white;
107
  }
108
 
109
- .stripe-btn {
110
  background: linear-gradient(135deg, #6772E5 0%, #00A4EF 100%);
111
  color: white;
112
  }
113
 
114
- .payment-btn:hover {
115
- transform: translateY(-3px);
116
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
117
- }
118
-
119
- .cart-item {
120
- background: rgba(255, 255, 255, 0.05);
121
- border-radius: 10px;
122
- padding: 15px;
123
- margin-bottom: 10px;
124
- }
125
-
126
- .scrollbar-hide::-webkit-scrollbar {
127
- display: none;
128
- }
129
-
130
- .scrollbar-hide {
131
- -ms-overflow-style: none;
132
- scrollbar-width: none;
133
- }
134
-
135
- .tab-content {
136
- display: none;
137
- }
138
-
139
- .tab-content.active {
140
- display: block;
141
- }
142
-
143
- .tab-button {
144
- background: transparent;
145
- border: none;
146
  color: white;
147
- padding: 10px 20px;
148
- cursor: pointer;
149
- position: relative;
150
- }
151
-
152
- .tab-button.active {
153
- color: #9d50bb;
154
- }
155
-
156
- .tab-button.active::after {
157
- content: '';
158
- position: absolute;
159
- bottom: 0;
160
- left: 0;
161
- width: 100%;
162
- height: 3px;
163
- background: linear-gradient(90deg, #6e48aa, #9d50bb);
164
  }
165
  </style>
166
  </head>
167
- <body class="min-h-screen">
168
- <!-- Navigation Futuriste -->
169
- <nav class="bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-purple-900 fixed w-full z-50">
170
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
171
  <div class="flex items-center justify-between h-16">
172
  <div class="flex items-center">
173
  <div class="flex-shrink-0">
174
- <span class="text-2xl font-bold neon-text">AI<span class="text-purple-400">COURSE</span>GEN</span>
175
  </div>
176
  <div class="hidden md:block">
177
  <div class="ml-10 flex items-baseline space-x-4">
178
- <a href="#" class="text-purple-400 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Accueil</a>
179
- <a href="#dashboard" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
180
- <a href="#courses" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Cours IA</a>
181
- <a href="#payment" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Paiements</a>
182
  </div>
183
  </div>
184
  </div>
185
  <div class="flex items-center">
186
- <div class="relative">
187
- <button id="cartBtn" class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
188
- <span class="sr-only">Panier</span>
189
- <i class="fas fa-shopping-cart text-xl"></i>
190
- <span id="cartCount" class="absolute -top-2 -right-2 bg-purple-600 text-white text-xs font-bold rounded-full h-6 w-6 flex items-center justify-center">0</span>
191
- </button>
192
- </div>
193
  <div class="ml-4 relative">
194
- <button id="userMenuBtn" class="flex items-center text-sm rounded-full focus:outline-none">
195
- <span class="sr-only">Menu utilisateur</span>
196
- <div class="h-8 w-8 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
197
- <i class="fas fa-user text-white"></i>
198
- </div>
199
- </button>
200
  </div>
201
  </div>
202
  </div>
203
  </div>
204
  </nav>
205
 
206
- <!-- Overlay Panier -->
207
- <div id="cartOverlay" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden">
208
- <div class="absolute top-0 right-0 h-full w-96 bg-gray-900 shadow-xl transform transition-transform duration-300 ease-in-out">
209
- <div class="p-6 h-full flex flex-col">
210
- <div class="flex justify-between items-center mb-6">
211
- <h2 class="text-xl font-bold text-white">Votre Panier</h2>
212
- <button id="closeCartBtn" class="text-gray-400 hover:text-white">
213
- <i class="fas fa-times text-xl"></i>
214
- </button>
215
- </div>
216
- <div id="cartItems" class="flex-1 overflow-y-auto scrollbar-hide mb-4">
217
- <!-- Les éléments du panier seront ajoutés ici dynamiquement -->
218
- <p class="text-gray-400 text-center py-10">Votre panier est vide</p>
219
- </div>
220
- <div class="border-t border-gray-700 pt-4">
221
- <div class="flex justify-between mb-4">
222
- <span class="text-gray-300">Total:</span>
223
- <span id="cartTotal" class="text-xl font-bold">0.00 €</span>
224
- </div>
225
- <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-bold transition duration-200">
226
- Payer maintenant
227
- </button>
228
- </div>
229
- </div>
230
- </div>
231
- </div>
232
-
233
- <!-- Overlay Connexion -->
234
- <div id="loginOverlay" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden flex items-center justify-center">
235
- <div class="bg-gray-900 rounded-xl p-8 w-full max-w-md glow-box">
236
- <div class="text-center mb-8">
237
- <h2 class="text-2xl font-bold text-white mb-2">Connexion</h2>
238
- <p class="text-gray-400">Accédez à votre tableau de bord</p>
239
- </div>
240
- <form id="loginForm" class="space-y-6">
241
- <div>
242
- <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label>
243
- <input type="email" id="email" name="email" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-white">
244
- </div>
245
- <div>
246
- <label for="password" class="block text-sm font-medium text-gray-300 mb-1">Mot de passe</label>
247
- <input type="password" id="password" name="password" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-white">
248
- </div>
249
- <div class="flex items-center justify-between">
250
- <div class="flex items-center">
251
- <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-700 rounded">
252
- <label for="remember-me" class="ml-2 block text-sm text-gray-300">Se souvenir de moi</label>
253
- </div>
254
- <a href="#" class="text-sm text-purple-400 hover:text-purple-300">Mot de passe oublié?</a>
255
- </div>
256
- <div>
257
- <button type="submit" class="w-full bg-gradient-to-r from-purple-600 to-blue-500 text-white py-3 px-4 rounded-lg font-bold hover:opacity-90 transition duration-200">
258
- Se connecter
259
- </button>
260
- </div>
261
- </form>
262
- <div class="mt-6 text-center">
263
- <p class="text-gray-400">Pas encore de compte? <a href="#" class="text-purple-400 hover:text-purple-300 font-medium">S'abonner</a></p>
264
- </div>
265
- </div>
266
- </div>
267
-
268
  <!-- Contenu Principal -->
269
- <main class="pt-20 pb-16">
270
- <!-- Hero Section -->
271
- <section class="relative overflow-hidden">
272
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
273
- <div class="text-center">
274
- <h1 class="text-5xl md:text-6xl font-extrabold tracking-tight text-white mb-6">
275
- <span class="block neon-text">GÉNÉRATEUR DE COURS IA</span>
276
- <span class="block bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600">990099 Assistants IA</span>
277
- </h1>
278
- <p class="mt-6 max-w-lg mx-auto text-xl text-gray-300">
279
- La plus grande plateforme de cours en ligne alimentée par l'IA. Accédez à des milliers de cours dans tous les domaines.
280
- </p>
281
- <div class="mt-10 flex justify-center space-x-4">
282
- <button class="payment-btn paypal-btn" onclick="showPaymentOverlay('paypal')">
283
- <i class="fab fa-paypal mr-2"></i> S'abonner avec PayPal
284
- </button>
285
- <button class="payment-btn stripe-btn" onclick="showPaymentOverlay('stripe')">
286
- <i class="fab fa-stripe mr-2"></i> S'abonner avec Stripe
287
- </button>
288
- </div>
289
- </div>
290
- </div>
291
- <div class="absolute inset-0 -z-10">
292
- <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-90"></div>
293
- <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop')] bg-cover bg-center opacity-20"></div>
294
  </div>
295
- </section>
296
-
297
- <!-- Section Tableau de Bord (Admin) -->
298
- <section id="dashboard" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
299
- <h2 class="text-3xl font-bold text-white mb-8 text-center glow-box inline-block px-6 py-3 rounded-lg">Tableau de Bord Admin</h2>
300
 
 
301
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
302
- <div class="dashboard-card rounded-xl p-6 holographic-effect">
303
  <div class="flex items-center">
304
- <div class="p-3 rounded-full bg-purple-600 bg-opacity-20 mr-4">
305
- <i class="fas fa-users text-purple-400 text-xl"></i>
306
  </div>
307
  <div>
308
- <p class="text-gray-400 text-sm">Utilisateurs</p>
309
- <h3 class="text-2xl font-bold text-white">1,248</h3>
310
  </div>
311
  </div>
312
  </div>
313
- <div class="dashboard-card rounded-xl p-6 holographic-effect">
 
314
  <div class="flex items-center">
315
- <div class="p-3 rounded-full bg-blue-600 bg-opacity-20 mr-4">
316
- <i class="fas fa-money-bill-wave text-blue-400 text-xl"></i>
317
  </div>
318
  <div>
319
- <p class="text-gray-400 text-sm">Revenus</p>
320
- <h3 class="text-2xl font-bold text-white">24,850 €</h3>
321
  </div>
322
  </div>
323
  </div>
324
- <div class="dashboard-card rounded-xl p-6 holographic-effect">
 
325
  <div class="flex items-center">
326
- <div class="p-3 rounded-full bg-green-600 bg-opacity-20 mr-4">
327
- <i class="fas fa-graduation-cap text-green-400 text-xl"></i>
328
  </div>
329
  <div>
330
- <p class="text-gray-400 text-sm">Cours vendus</p>
331
- <h3 class="text-2xl font-bold text-white">3,742</h3>
332
  </div>
333
  </div>
334
  </div>
335
  </div>
336
-
337
- <!-- Onglets du Dashboard -->
338
- <div class="bg-gray-900 rounded-xl overflow-hidden mb-8">
339
- <div class="border-b border-gray-800">
340
- <div class="flex">
341
- <button class="tab-button active" onclick="openTab(event, 'payments')">Paiements</button>
342
- <button class="tab-button" onclick="openTab(event, 'subscriptions')">Abonnements</button>
343
- <button class="tab-button" onclick="openTab(event, 'settings')">Paramètres</button>
344
- </div>
345
- </div>
346
 
347
- <!-- Contenu des onglets -->
348
- <div id="payments" class="tab-content active p-6">
349
- <h3 class="text-xl font-bold text-white mb-6">Gestion des Paiements</h3>
350
-
351
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
352
- <!-- Configuration PayPal -->
353
- <div class="dashboard-card rounded-xl p-6">
354
- <div class="flex items-center mb-4">
355
- <i class="fab fa-paypal text-2xl text-blue-400 mr-3"></i>
356
- <h4 class="text-lg font-bold">Configuration PayPal</h4>
357
- </div>
358
- <form>
359
- <div class="mb-4">
360
- <label class="block text-gray-400 text-sm mb-2">Email PayPal</label>
361
- <input type="email" value="[email protected]" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white">
362
- </div>
363
- <div class="mb-4">
364
- <label class="block text-gray-400 text-sm mb-2">ID Marchand</label>
365
- <input type="text" value="MERCHANT123456" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white">
366
- </div>
367
- <div class="mb-4">
368
- <label class="block text-gray-400 text-sm mb-2">Clé API</label>
369
- <input type="password" value="************" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white">
370
- </div>
371
- <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg">
372
- Enregistrer
373
- </button>
374
- </form>
375
- </div>
376
-
377
- <!-- Configuration Stripe -->
378
- <div class="dashboard-card rounded-xl p-6">
379
- <div class="flex items-center mb-4">
380
- <i class="fab fa-stripe text-2xl text-purple-400 mr-3"></i>
381
- <h4 class="text-lg font-bold">Configuration Stripe</h4>
382
- </div>
383
- <form>
384
- <div class="mb-4">
385
- <label class="block text-gray-400 text-sm mb-2">Clé Publique</label>
386
- <input type="text" value="pk_test_51Hx..." class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white">
387
- </div>
388
- <div class="mb-4">
389
- <label class="block text-gray-400 text-sm mb-2">Clé Secrète</label>
390
- <input type="password" value="sk_test_51Hx..." class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white">
391
- </div>
392
- <div class="mb-4">
393
- <label class="block text-gray-400 text-sm mb-2">Webhook Secret</label>
394
- <input type="password" value="whsec_..." class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white">
395
- </div>
396
- <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg">
397
- Enregistrer
398
- </button>
399
- </form>
400
  </div>
 
 
 
 
401
  </div>
402
 
403
- <!-- Historique des Paiements -->
404
- <div class="dashboard-card rounded-xl p-6">
405
- <h4 class="text-lg font-bold mb-4">Historique des Paiements</h4>
406
- <div class="overflow-x-auto">
407
- <table class="w-full">
408
- <thead>
409
- <tr class="text-left text-gray-400 border-b border-gray-800">
410
- <th class="pb-3">Date</th>
411
- <th class="pb-3">Utilisateur</th>
412
- <th class="pb-3">Montant</th>
413
- <th class="pb-3">Méthode</th>
414
- <th class="pb-3">Statut</th>
415
- </tr>
416
- </thead>
417
- <tbody>
418
- <tr class="border-b border-gray-800">
419
- <td class="py-3">15/06/2023</td>
420
- <td>[email protected]</td>
421
- <td>49.99 €</td>
422
- <td><span class="text-blue-400">PayPal</span></td>
423
- <td><span class="text-green-400">Complété</span></td>
424
- </tr>
425
- <tr class="border-b border-gray-800">
426
- <td class="py-3">14/06/2023</td>
427
- <td>[email protected]</td>
428
- <td>29.99 €</td>
429
- <td><span class="text-purple-400">Stripe</span></td>
430
- <td><span class="text-green-400">Complété</span></td>
431
- </tr>
432
- <tr class="border-b border-gray-800">
433
- <td class="py-3">13/06/2023</td>
434
- <td>[email protected]</td>
435
- <td>99.99 €</td>
436
- <td><span class="text-blue-400">PayPal</span></td>
437
- <td><span class="text-yellow-400">En attente</span></td>
438
- </tr>
439
- </tbody>
440
- </table>
441
  </div>
 
 
 
 
442
  </div>
443
- </div>
444
-
445
- <div id="subscriptions" class="tab-content p-6">
446
- <h3 class="text-xl font-bold text-white mb-6">Gestion des Abonnements</h3>
447
 
448
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
449
- <div class="dashboard-card rounded-xl p-6">
450
- <h4 class="text-lg font-bold mb-3">Abonnement Gratuit</h4>
451
- <p class="text-gray-400 mb-4">Accès limité aux cours</p>
452
- <p class="text-3xl font-bold mb-4">0 €<span class="text-sm text-gray-400">/mois</span></p>
453
- <ul class="text-gray-300 mb-6">
454
- <li class="mb-2"><i class="fas fa-check text-green-400 mr-2"></i> 3 cours/mois</li>
455
- <li class="mb-2"><i class="fas fa-check text-green-400 mr-2"></i> Support de base</li>
456
- <li class="mb-2"><i class="fas fa-times text-red-400 mr-2"></i> Accès aux nouveaux cours</li>
457
- </ul>
458
- <button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg">
459
- Configurer
460
- </button>
461
- </div>
462
-
463
- <div class="dashboard-card rounded-xl p-6 glow-box">
464
- <h4 class="text-lg font-bold mb-3">Abonnement Premium</h4>
465
- <p class="text-gray-400 mb-4">Accès complet aux cours</p>
466
- <p class="text-3xl font-bold mb-4">29.99 €<span class="text-sm text-gray-400">/mois</span></p>
467
- <ul class="text-gray-300 mb-6">
468
- <li class="mb-2"><i class="fas fa-check text-green-400 mr-2"></i> Cours illimités</li>
469
- <li class="mb-2"><i class="fas fa-check text-green-400 mr-2"></i> Support prioritaire</li>
470
- <li class="mb-2"><i class="fas fa-check text-green-400 mr-2"></i> Accès aux nouveaux cours</li>
471
- </ul>
472
- <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg">
473
- Configurer
474
- </button>
475
- </div>
476
-
477
- <div class="dashboard-card rounded-xl p-6">
478
- <h4 class="text-lg font-bold mb-3">Abonnement Entreprise</h4>
479
- <p class="text-gray-400 mb-4">Pour les équipes</p>
480
- <p class="text-3xl font-bold mb-4">99.99 €<span class="text-sm text-gray-400">/mois</span></p>
481
- <ul class="text-gray-300 mb-6">
482
- <li class="mb-2"><i class="fas fa-check text-green-400 mr-2"></i> Jusqu'à 10 utilisateurs</li>
483
- <li class="mb-2"><i class="fas fa-check text-green-400 mr-2"></i> Statistiques avancées</li>
484
- <li class="mb-2"><i class="fas fa-check text-green-400 mr-2"></i> Support dédié</li>
485
- </ul>
486
- <button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-lg">
487
- Configurer
488
- </button>
489
  </div>
 
 
 
 
490
  </div>
491
 
492
- <div class="dashboard-card rounded-xl p-6">
493
- <h4 class="text-lg font-bold mb-4">Utilisateurs Abonnés</h4>
494
- <div class="overflow-x-auto">
495
- <table class="w-full">
496
- <thead>
497
- <tr class="text-left text-gray-400 border-b border-gray-800">
498
- <th class="pb-3">Email</th>
499
- <th class="pb-3">Abonnement</th>
500
- <th class="pb-3">Date d'expiration</th>
501
- <th class="pb-3">Statut</th>
502
- </tr>
503
- </thead>
504
- <tbody>
505
- <tr class="border-b border-gray-800">
506
- <td class="py-3">[email protected]</td>
507
- <td>Premium</td>
508
- <td>15/07/2023</td>
509
- <td><span class="text-green-400">Actif</span></td>
510
- </tr>
511
- <tr class="border-b border-gray-800">
512
- <td class="py-3">[email protected]</td>
513
- <td>Entreprise</td>
514
- <td>30/06/2023</td>
515
- <td><span class="text-green-400">Actif</span></td>
516
- </tr>
517
- <tr class="border-b border-gray-800">
518
- <td class="py-3">[email protected]</td>
519
- <td>Gratuit</td>
520
- <td>-</td>
521
- <td><span class="text-yellow-400">Limité</span></td>
522
- </tr>
523
- </tbody>
524
- </table>
525
  </div>
 
 
 
 
526
  </div>
527
  </div>
 
 
 
 
 
528
 
529
- <div id="settings" class="tab-content p-6">
530
- <h3 class="text-xl font-bold text-white mb-6">Paramètres du Compte Admin</h3>
531
-
532
- <div class="dashboard-card rounded-xl p-6 mb-6">
533
- <h4 class="text-lg font-bold mb-4">Informations Administrateur</h4>
534
- <form>
535
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
536
  <div>
537
- <label class="block text-gray-400 text-sm mb-2">Nom</label>
538
- <input type="text" value="Admin" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white">
539
  </div>
540
  <div>
541
- <label class="block text-gray-400 text-sm mb-2">Email</label>
542
- <input type="email" value="[email protected]" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white">
543
  </div>
544
- </div>
545
- <div class="mb-4">
546
- <label class="block text-gray-400 text-sm mb-2">Email Secondaire</label>
547
- <input type="email" value="[email protected]" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white">
548
- </div>
549
- <div class="mb-4">
550
- <label class="block text-gray-400 text-sm mb-2">Mot de passe</label>
551
- <input type="password" value="Admin270574@" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white">
552
- </div>
553
- <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg">
554
- Mettre à jour
555
- </button>
556
- </form>
557
- </div>
558
-
559
- <div class="dashboard-card rounded-xl p-6">
560
- <h4 class="text-lg font-bold mb-4">Paramètres de Sécurité</h4>
561
- <div class="space-y-4">
562
- <div class="flex items-center justify-between">
563
  <div>
564
- <p class="font-medium">Authentification à deux facteurs</p>
565
- <p class="text-sm text-gray-400">Ajoutez une couche de sécurité supplémentaire</p>
566
  </div>
567
- <label class="relative inline-flex items-center cursor-pointer">
568
- <input type="checkbox" class="sr-only peer" checked>
569
- <div class="w-11 h-6 bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
570
- </label>
571
  </div>
572
- <div class="flex items-center justify-between">
573
- <div>
574
- <p class="font-medium">Notifications par email</p>
575
- <p class="text-sm text-gray-400">Recevez des alertes importantes</p>
 
 
 
 
 
 
 
 
 
 
 
576
  </div>
577
- <label class="relative inline-flex items-center cursor-pointer">
578
- <input type="checkbox" class="sr-only peer" checked>
579
- <div class="w-11 h-6 bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
580
- </label>
581
- </div>
582
- <div class="flex items-center justify-between">
583
- <div>
584
- <p class="font-medium">Journal d'activité</p>
585
- <p class="text-sm text-gray-400">Conservez un historique des actions</p>
 
 
 
 
 
 
 
 
 
 
586
  </div>
587
- <label class="relative inline-flex items-center cursor-pointer">
588
- <input type="checkbox" class="sr-only peer" checked>
589
- <div class="w-11 h-6 bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
590
- </label>
591
  </div>
592
  </div>
593
  </div>
594
  </div>
595
  </div>
596
- </section>
597
-
598
- <!-- Section Cours IA -->
599
- <section id="courses" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
600
- <h2 class="text-3xl font-bold text-white mb-8 text-center glow-box inline-block px-6 py-3 rounded-lg">990099 Assistants IA de Cours</h2>
601
-
602
- <div class="mb-8">
603
- <div class="relative">
604
- <input type="text" placeholder="Rechercher un cours..." class="w-full px-6 py-4 bg-gray-900 border border-gray-800 rounded-full text-white focus:outline-none focus:ring-2 focus:ring-purple-500">
605
- <button class="absolute right-3 top-3 bg-purple-600 text-white p-2 rounded-full">
606
- <i class="fas fa-search"></i>
607
- </button>
608
- </div>
609
- </div>
610
-
611
- <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
612
- <!-- Les boutons de cours seront générés ici -->
613
- </div>
614
- </section>
615
 
616
- <!-- Section Paiement -->
617
- <section id="payment" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
618
- <h2 class="text-3xl font-bold text-white mb-8 text-center glow-box inline-block px-6 py-3 rounded-lg">Options de Paiement</h2>
619
-
620
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
621
- <div class="dashboard-card rounded-xl p-8">
622
- <div class="flex items-center mb-6">
623
- <i class="fab fa-paypal text-4xl text-blue-400 mr-4"></i>
624
- <h3 class="text-2xl font-bold">Paiement PayPal</h3>
625
- </div>
626
- <p class="text-gray-400 mb-6">Effectuez des paiements sécurisés via PayPal. Acceptez les cartes de crédit sans avoir besoin d'un compte PayPal.</p>
627
- <button onclick="showPaymentOverlay('paypal')" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-bold">
628
- Configurer PayPal
629
- </button>
630
  </div>
631
-
632
- <div class="dashboard-card rounded-xl p-8">
633
- <div class="flex items-center mb-6">
634
- <i class="fab fa-stripe text-4xl text-purple-400 mr-4"></i>
635
- <h3 class="text-2xl font-bold">Paiement Stripe</h3>
636
- </div>
637
- <p class="text-gray-400 mb-6">Acceptez les paiements par carte de crédit avec Stripe. Solution de paiement complète avec gestion des abonnements.</p>
638
- <button onclick="showPaymentOverlay('stripe')" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 px-6 rounded-lg font-bold">
639
- Configurer Stripe
640
- </button>
641
  </div>
642
  </div>
643
- </section>
644
- </main>
 
 
 
645
 
646
- <!-- Overlay de Paiement -->
647
- <div id="paymentOverlay" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden flex items-center justify-center">
648
- <div class="bg-gray-900 rounded-xl p-8 w-full max-w-md glow-box">
649
- <div class="text-center mb-6">
650
- <h2 id="paymentTitle" class="text-2xl font-bold text-white mb-2">Paiement PayPal</h2>
651
- <p class="text-gray-400">Complétez votre abonnement</p>
 
 
652
  </div>
653
-
654
- <form id="paymentForm" class="space-y-4">
655
  <div>
656
- <label class="block text-gray-400 text-sm mb-1">Montant</label>
657
- <select class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white">
658
- <option>29.99 € / mois (Premium)</option>
659
- <option>99.99 € / mois (Entreprise)</option>
660
- <option>199.99 € / an (Premium)</option>
661
- </select>
662
  </div>
663
-
664
- <div id="paypalFields">
665
- <div class="mb-4">
666
- <label class="block text-gray-400 text-sm mb-1">Email PayPal</label>
667
- <input type="email" placeholder="[email protected]" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white">
668
- </div>
669
  </div>
670
-
671
- <div id="stripeFields" class="hidden">
672
- <div class="mb-4">
673
- <label class="block text-gray-400 text-sm mb-1">Numéro de carte</label>
674
- <input type="text" placeholder="4242 4242 4242 4242" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white">
675
- </div>
676
- <div class="grid grid-cols-2 gap-4 mb-4">
677
- <div>
678
- <label class="block text-gray-400 text-sm mb-1">Date d'expiration</label>
679
- <input type="text" placeholder="MM/AA" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white">
680
- </div>
681
- <div>
682
- <label class="block text-gray-400 text-sm mb-1">CVC</label>
683
- <input type="text" placeholder="123" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white">
684
- </div>
685
- </div>
686
  </div>
687
-
688
- <div class="pt-4">
689
- <button type="submit" class="w-full bg-gradient-to-r from-purple-600 to-blue-500 text-white py-3 px-4 rounded-lg font-bold hover:opacity-90 transition duration-200">
690
- Payer maintenant
691
- </button>
692
  </div>
693
- </form>
694
-
695
- <div class="mt-6 text-center">
696
- <button id="closePaymentBtn" class="text-gray-400 hover:text-white text-sm">
697
- <i class="fas fa-times mr-1"></i> Annuler
698
  </button>
699
  </div>
700
  </div>
701
  </div>
702
 
703
- <!-- Footer -->
704
- <footer class="bg-black bg-opacity-50 border-t border-gray-800 py-8">
705
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
706
- <div class="flex flex-col md:flex-row justify-between items-center">
707
- <div class="mb-4 md:mb-0">
708
- <span class="text-xl font-bold neon-text">AI<span class="text-purple-400">COURSE</span>GEN</span>
709
- </div>
710
- <div class="flex space-x-6">
711
- <a href="#" class="text-gray-400 hover:text-white">
712
- <i class="fab fa-facebook-f"></i>
713
- </a>
714
- <a href="#" class="text-gray-400 hover:text-white">
715
- <i class="fab fa-twitter"></i>
716
- </a>
717
- <a href="#" class="text-gray-400 hover:text-white">
718
- <i class="fab fa-instagram"></i>
719
- </a>
720
- <a href="#" class="text-gray-400 hover:text-white">
721
- <i class="fab fa-linkedin-in"></i>
722
- </a>
723
- </div>
724
  </div>
725
- <div class="mt-8 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between">
726
- <div class="mb-6 md:mb-0">
727
- <h3 class="text-sm font-semibold text-white uppercase tracking-wider">Contact</h3>
728
- <p class="mt-2 text-sm text-gray-400">
729
- Email: [email protected]<br>
730
- Téléphone: +33 1 23 45 67 89
731
- </p>
732
  </div>
733
- <div class="grid grid-cols-2 gap-8">
734
  <div>
735
- <h3 class="text-sm font-semibold text-white uppercase tracking-wider">Navigation</h3>
736
- <ul class="mt-2 space-y-2">
737
- <li><a href="#" class="text-sm text-gray-400 hover:text-white">Accueil</a></li>
738
- <li><a href="#courses" class="text-sm text-gray-400 hover:text-white">Cours</a></li>
739
- <li><a href="#dashboard" class="text-sm text-gray-400 hover:text-white">Dashboard</a></li>
740
- </ul>
741
  </div>
742
  <div>
743
- <h3 class="text-sm font-semibold text-white uppercase tracking-wider">Légal</h3>
744
- <ul class="mt-2 space-y-2">
745
- <li><a href="#" class="text-sm text-gray-400 hover:text-white">Confidentialité</a></li>
746
- <li><a href="#" class="text-sm text-gray-400 hover:text-white">Conditions</a></li>
747
- <li><a href="#" class="text-sm text-gray-400 hover:text-white">Cookies</a></li>
748
- </ul>
749
  </div>
750
  </div>
751
- </div>
752
- <div class="mt-8 text-center text-sm text-gray-500">
753
- <p>&copy; 2023 AI Course Generator. Tous droits réservés.</p>
754
- </div>
 
 
 
 
 
 
755
  </div>
756
- </footer>
757
 
758
  <script>
759
- // Gestion des onglets
760
- function openTab(evt, tabName) {
761
- const tabContents = document.getElementsByClassName("tab-content");
762
- for (let i = 0; i < tabContents.length; i++) {
763
- tabContents[i].classList.remove("active");
764
- }
765
-
766
- const tabButtons = document.getElementsByClassName("tab-button");
767
- for (let i = 0; i < tabButtons.length; i++) {
768
- tabButtons[i].classList.remove("active");
769
- }
770
-
771
- document.getElementById(tabName).classList.add("active");
772
- evt.currentTarget.classList.add("active");
773
  }
774
-
775
- // Gestion du panier
776
- const cartBtn = document.getElementById("cartBtn");
777
- const closeCartBtn = document.getElementById("closeCartBtn");
778
- const cartOverlay = document.getElementById("cartOverlay");
779
 
780
- cartBtn.addEventListener("click", () => {
781
- cartOverlay.classList.remove("hidden");
782
- });
783
 
784
- closeCartBtn.addEventListener("click", () => {
785
- cartOverlay.classList.add("hidden");
786
- });
787
-
788
- // Gestion de la connexion
789
- const userMenuBtn = document.getElementById("userMenuBtn");
790
- const loginOverlay = document.getElementById("loginOverlay");
791
 
792
- userMenuBtn.addEventListener("click", () => {
793
- loginOverlay.classList.remove("hidden");
794
- });
795
-
796
- // Fermer les overlays en cliquant à l'extérieur
797
- [cartOverlay, loginOverlay].forEach(overlay => {
798
- overlay.addEventListener("click", (e) => {
799
- if (e.target === overlay) {
800
- overlay.classList.add("hidden");
801
  }
802
  });
803
  });
804
-
805
- // Gestion des paiements
806
- const paymentOverlay = document.getElementById("paymentOverlay");
807
- const closePaymentBtn = document.getElementById("closePaymentBtn");
808
- const paypalFields = document.getElementById("paypalFields");
809
- const stripeFields = document.getElementById("stripeFields");
810
- const paymentTitle = document.getElementById("paymentTitle");
811
 
812
- function showPaymentOverlay(type) {
813
- if (type === 'paypal') {
814
- paymentTitle.textContent = "Paiement PayPal";
815
- paypalFields.classList.remove("hidden");
816
- stripeFields.classList.add("hidden");
817
- } else {
818
- paymentTitle.textContent = "Paiement Stripe";
819
- paypalFields.classList.add("hidden");
820
- stripeFields.classList.remove("hidden");
821
- }
822
- paymentOverlay.classList.remove("hidden");
823
- }
824
-
825
- closePaymentBtn.addEventListener("click", () => {
826
- paymentOverlay.classList.add("hidden");
827
- });
828
-
829
- paymentOverlay.addEventListener("click", (e) => {
830
- if (e.target === paymentOverlay) {
831
- paymentOverlay.classList.add("hidden");
832
- }
833
- });
834
-
835
- // Génération des boutons de cours
836
- const courseCategories = [
837
- "Développement Web", "Data Science", "Intelligence Artificielle",
838
- "Machine Learning", "Cybersécurité", "Blockchain",
839
- "Cloud Computing", "DevOps", "Mobile", "Jeux Vidéo",
840
- "Design UI/UX", "Marketing Digital", "Finance",
841
- "Entrepreneuriat", "Photographie", "Musique",
842
- "Santé", "Langues", "Préparation aux examens", "Écriture"
843
- ];
844
-
845
- const coursesContainer = document.querySelector("#courses .grid");
846
-
847
- // Générer 100 boutons de cours (vous pouvez augmenter ce nombre)
848
- for (let i = 0; i < 100; i++) {
849
- const category = courseCategories[Math.floor(Math.random() * courseCategories.length)];
850
- const courseName = `Assistant IA ${category} #${Math.floor(Math.random() * 1000)}`;
851
-
852
- const courseBtn = document.createElement("button");
853
- courseBtn.className = "course-btn glow-box";
854
- courseBtn.textContent = courseName;
855
- courseBtn.onclick = function() {
856
- window.open(`https://aicoursegen.com/course/${i}`, '_blank');
857
- };
858
-
859
- coursesContainer.appendChild(courseBtn);
860
- }
861
-
862
- // Connexion automatique pour les admins
863
- const loginForm = document.getElementById("loginForm");
864
- loginForm.addEventListener("submit", function(e) {
865
- e.preventDefault();
866
-
867
- const email = document.getElementById("email").value;
868
- const password = document.getElementById("password").value;
869
-
870
- // Vérifier les identifiants admin
871
- if ((email === "[email protected]" && password === "Admin270574@") ||
872
- (email === "[email protected]" && password === "Admin270574@")) {
873
- alert("Connexion admin réussie ! Accès complet activé.");
874
- loginOverlay.classList.add("hidden");
875
- } else {
876
- alert("Identifiants incorrects. Seuls les admins peuvent accéder.");
877
- }
878
  });
879
  </script>
880
  <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/course-gen" 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>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
  <style>
 
 
 
 
 
 
 
 
10
  body {
11
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
12
+ background-color: #f3f4f6;
 
 
 
 
 
 
13
  }
14
 
15
+ .dashboard-card {
 
16
  transition: all 0.3s ease;
17
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
18
  }
19
 
20
+ .dashboard-card:hover {
 
21
  transform: translateY(-5px);
22
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
23
  }
24
 
25
+ .payment-method {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  border-radius: 10px;
27
+ padding: 20px;
28
+ margin-bottom: 20px;
29
  transition: all 0.3s;
30
  }
31
 
32
+ .payment-method:hover {
33
+ transform: scale(1.02);
34
+ }
35
+
36
+ .paypal {
37
  background: linear-gradient(135deg, #253B80 0%, #179BD7 100%);
38
  color: white;
39
  }
40
 
41
+ .stripe {
42
  background: linear-gradient(135deg, #6772E5 0%, #00A4EF 100%);
43
  color: white;
44
  }
45
 
46
+ .bank-transfer {
47
+ background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  color: white;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  }
50
  </style>
51
  </head>
52
+ <body class="min-h-screen bg-gray-100">
53
+ <!-- Navigation -->
54
+ <nav class="bg-white shadow-md">
55
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
56
  <div class="flex items-center justify-between h-16">
57
  <div class="flex items-center">
58
  <div class="flex-shrink-0">
59
+ <span class="text-xl font-bold text-blue-600">PAYMENT<span class="text-blue-800">DASH</span></span>
60
  </div>
61
  <div class="hidden md:block">
62
  <div class="ml-10 flex items-baseline space-x-4">
63
+ <a href="#" class="bg-blue-600 text-white px-3 py-2 rounded-md text-sm font-medium">Tableau de Bord</a>
64
+ <a href="#historique" class="text-gray-600 hover:bg-gray-200 px-3 py-2 rounded-md text-sm font-medium">Historique</a>
65
+ <a href="#parametres" class="text-gray-600 hover:bg-gray-200 px-3 py-2 rounded-md text-sm font-medium">Paramètres</a>
 
66
  </div>
67
  </div>
68
  </div>
69
  <div class="flex items-center">
 
 
 
 
 
 
 
70
  <div class="ml-4 relative">
71
+ <div class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
72
+ <i class="fas fa-user"></i>
73
+ </div>
 
 
 
74
  </div>
75
  </div>
76
  </div>
77
  </div>
78
  </nav>
79
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
80
  <!-- Contenu Principal -->
81
+ <main class="py-8">
82
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
83
+ <!-- Titre et Stats -->
84
+ <div class="mb-8">
85
+ <h1 class="text-3xl font-bold text-gray-800 mb-2">Tableau de Bord Paiements</h1>
86
+ <p class="text-gray-600">Gérez vos paiements et transactions en temps réel</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
87
  </div>
 
 
 
 
 
88
 
89
+ <!-- Cartes Statistiques -->
90
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
91
+ <div class="dashboard-card bg-white rounded-lg p-6">
92
  <div class="flex items-center">
93
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
94
+ <i class="fas fa-money-bill-wave text-xl"></i>
95
  </div>
96
  <div>
97
+ <p class="text-gray-500 text-sm">Solde Actuel</p>
98
+ <h3 class="text-2xl font-bold text-gray-800">2,450.00 €</h3>
99
  </div>
100
  </div>
101
  </div>
102
+
103
+ <div class="dashboard-card bg-white rounded-lg p-6">
104
  <div class="flex items-center">
105
+ <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
106
+ <i class="fas fa-arrow-up text-xl"></i>
107
  </div>
108
  <div>
109
+ <p class="text-gray-500 text-sm">Revenus ce mois</p>
110
+ <h3 class="text-2xl font-bold text-gray-800">1,850.00 €</h3>
111
  </div>
112
  </div>
113
  </div>
114
+
115
+ <div class="dashboard-card bg-white rounded-lg p-6">
116
  <div class="flex items-center">
117
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
118
+ <i class="fas fa-users text-xl"></i>
119
  </div>
120
  <div>
121
+ <p class="text-gray-500 text-sm">Transactions</p>
122
+ <h3 class="text-2xl font-bold text-gray-800">42</h3>
123
  </div>
124
  </div>
125
  </div>
126
  </div>
127
+
128
+ <!-- Méthodes de Paiement -->
129
+ <div class="mb-8">
130
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Effectuer un Paiement</h2>
 
 
 
 
 
 
131
 
132
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
133
+ <!-- PayPal -->
134
+ <div class="payment-method paypal">
135
+ <div class="flex items-center mb-4">
136
+ <i class="fab fa-paypal text-4xl mr-4"></i>
137
+ <h3 class="text-xl font-bold">Payer avec PayPal</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138
  </div>
139
+ <p class="mb-6">Paiement sécurisé via PayPal. Accepte les cartes même sans compte PayPal.</p>
140
+ <button onclick="window.open('https://www.paypal.com/fr/home', '_blank')" class="w-full bg-white text-blue-600 py-2 px-4 rounded-lg font-bold hover:bg-gray-100 transition duration-200">
141
+ Payer avec PayPal
142
+ </button>
143
  </div>
144
 
145
+ <!-- Stripe -->
146
+ <div class="payment-method stripe">
147
+ <div class="flex items-center mb-4">
148
+ <i class="fab fa-stripe text-4xl mr-4"></i>
149
+ <h3 class="text-xl font-bold">Payer avec Stripe</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
150
  </div>
151
+ <p class="mb-6">Solution de paiement complète avec gestion des abonnements.</p>
152
+ <button onclick="window.open('https://stripe.com/fr', '_blank')" class="w-full bg-white text-purple-600 py-2 px-4 rounded-lg font-bold hover:bg-gray-100 transition duration-200">
153
+ Payer avec Stripe
154
+ </button>
155
  </div>
 
 
 
 
156
 
157
+ <!-- Virement Bancaire -->
158
+ <div class="payment-method bank-transfer">
159
+ <div class="flex items-center mb-4">
160
+ <i class="fas fa-university text-4xl mr-4"></i>
161
+ <h3 class="text-xl font-bold">Virement Bancaire</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
162
  </div>
163
+ <p class="mb-6">Effectuez un virement directement sur notre compte bancaire.</p>
164
+ <button onclick="showBankDetails()" class="w-full bg-white text-green-600 py-2 px-4 rounded-lg font-bold hover:bg-gray-100 transition duration-200">
165
+ Voir les Coordonnées
166
+ </button>
167
  </div>
168
 
169
+ <!-- Carte Bancaire -->
170
+ <div class="bg-white rounded-lg p-6">
171
+ <div class="flex items-center mb-4">
172
+ <i class="far fa-credit-card text-4xl text-gray-700 mr-4"></i>
173
+ <h3 class="text-xl font-bold text-gray-800">Carte Bancaire</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
174
  </div>
175
+ <p class="mb-6 text-gray-600">Paiement direct par carte de crédit/débit.</p>
176
+ <button onclick="showCardForm()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg font-bold transition duration-200">
177
+ Ajouter une Carte
178
+ </button>
179
  </div>
180
  </div>
181
+ </div>
182
+
183
+ <!-- Historique des Paiements -->
184
+ <div id="historique" class="mb-8">
185
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Historique des Paiements</h2>
186
 
187
+ <div class="bg-white rounded-lg shadow overflow-hidden">
188
+ <div class="overflow-x-auto">
189
+ <table class="min-w-full divide-y divide-gray-200">
190
+ <thead class="bg-gray-50">
191
+ <tr>
192
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
193
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
194
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th>
195
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
196
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
197
+ </tr>
198
+ </thead>
199
+ <tbody class="bg-white divide-y divide-gray-200">
200
+ <tr>
201
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/06/2023</td>
202
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Abonnement Premium</td>
203
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">29.99 €</td>
204
+ <td class="px-6 py-4 whitespace-nowrap">
205
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span>
206
+ </td>
207
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
208
+ <a href="#" class="text-blue-600 hover:text-blue-900">Facture</a>
209
+ </td>
210
+ </tr>
211
+ <tr>
212
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/06/2023</td>
213
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Formation IA</td>
214
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">99.99 €</td>
215
+ <td class="px-6 py-4 whitespace-nowrap">
216
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span>
217
+ </td>
218
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
219
+ <a href="#" class="text-blue-600 hover:text-blue-900">Facture</a>
220
+ </td>
221
+ </tr>
222
+ <tr>
223
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">05/06/2023</td>
224
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Abonnement Entreprise</td>
225
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">99.99 €</td>
226
+ <td class="px-6 py-4 whitespace-nowrap">
227
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">En attente</span>
228
+ </td>
229
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
230
+ <a href="#" class="text-blue-600 hover:text-blue-900">Payer</a>
231
+ </td>
232
+ </tr>
233
+ </tbody>
234
+ </table>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Paramètres -->
240
+ <div id="parametres" class="mb-8">
241
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Paramètres de Paiement</h2>
242
+
243
+ <div class="bg-white rounded-lg shadow overflow-hidden p-6">
244
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
245
+ <!-- Compte Bancaire -->
246
+ <div>
247
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Compte Bancaire</h3>
248
+ <div class="space-y-4">
249
  <div>
250
+ <label class="block text-sm font-medium text-gray-700 mb-1">Nom de la Banque</label>
251
+ <input type="text" value="BNP Paribas" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
252
  </div>
253
  <div>
254
+ <label class="block text-sm font-medium text-gray-700 mb-1">IBAN</label>
255
+ <input type="text" value="FR76 3000 4000 0100 1234 5678 900" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
256
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
257
  <div>
258
+ <label class="block text-sm font-medium text-gray-700 mb-1">BIC/SWIFT</label>
259
+ <input type="text" value="BNPAFRPP" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
260
  </div>
261
+ <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md font-medium">
262
+ Enregistrer
263
+ </button>
 
264
  </div>
265
+ </div>
266
+
267
+ <!-- Notifications -->
268
+ <div>
269
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Notifications</h3>
270
+ <div class="space-y-4">
271
+ <div class="flex items-center justify-between">
272
+ <div>
273
+ <p class="font-medium text-gray-700">Email pour les paiements</p>
274
+ <p class="text-sm text-gray-500">Recevoir une notification à chaque paiement</p>
275
+ </div>
276
+ <label class="relative inline-flex items-center cursor-pointer">
277
+ <input type="checkbox" class="sr-only peer" checked>
278
+ <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
279
+ </label>
280
  </div>
281
+ <div class="flex items-center justify-between">
282
+ <div>
283
+ <p class="font-medium text-gray-700">SMS pour les paiements</p>
284
+ <p class="text-sm text-gray-500">Recevoir un SMS pour les paiements importants</p>
285
+ </div>
286
+ <label class="relative inline-flex items-center cursor-pointer">
287
+ <input type="checkbox" class="sr-only peer">
288
+ <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
289
+ </label>
290
+ </div>
291
+ <div class="flex items-center justify-between">
292
+ <div>
293
+ <p class="font-medium text-gray-700">Alertes de sécurité</p>
294
+ <p class="text-sm text-gray-500">Recevoir des alertes pour activités suspectes</p>
295
+ </div>
296
+ <label class="relative inline-flex items-center cursor-pointer">
297
+ <input type="checkbox" class="sr-only peer" checked>
298
+ <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
299
+ </label>
300
  </div>
 
 
 
 
301
  </div>
302
  </div>
303
  </div>
304
  </div>
305
  </div>
306
+ </div>
307
+ </main>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
308
 
309
+ <!-- Footer -->
310
+ <footer class="bg-white border-t border-gray-200 py-8">
311
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
312
+ <div class="flex flex-col md:flex-row justify-between items-center">
313
+ <div class="mb-4 md:mb-0">
314
+ <span class="text-xl font-bold text-blue-600">PAYMENT<span class="text-blue-800">DASH</span></span>
 
 
 
 
 
 
 
 
315
  </div>
316
+ <div class="flex space-x-6">
317
+ <a href="#" class="text-gray-500 hover:text-gray-700">
318
+ <i class="fab fa-facebook-f"></i>
319
+ </a>
320
+ <a href="#" class="text-gray-500 hover:text-gray-700">
321
+ <i class="fab fa-twitter"></i>
322
+ </a>
323
+ <a href="#" class="text-gray-500 hover:text-gray-700">
324
+ <i class="fab fa-linkedin-in"></i>
325
+ </a>
326
  </div>
327
  </div>
328
+ <div class="mt-8 pt-8 border-t border-gray-200 text-center text-sm text-gray-500">
329
+ <p>&copy; 2023 PaymentDash. Tous droits réservés.</p>
330
+ </div>
331
+ </div>
332
+ </footer>
333
 
334
+ <!-- Modal Coordonnées Bancaires -->
335
+ <div id="bankDetailsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
336
+ <div class="bg-white rounded-lg p-6 max-w-md w-full">
337
+ <div class="flex justify-between items-center mb-4">
338
+ <h3 class="text-lg font-bold text-gray-800">Coordonnées Bancaires</h3>
339
+ <button onclick="closeModal('bankDetailsModal')" class="text-gray-500 hover:text-gray-700">
340
+ <i class="fas fa-times"></i>
341
+ </button>
342
  </div>
343
+ <div class="space-y-4">
 
344
  <div>
345
+ <p class="text-sm font-medium text-gray-500">Nom de la Banque</p>
346
+ <p class="text-gray-800">BNP Paribas</p>
 
 
 
 
347
  </div>
348
+ <div>
349
+ <p class="text-sm font-medium text-gray-500">Titulaire du Compte</p>
350
+ <p class="text-gray-800">VOTRE ENTREPRISE</p>
 
 
 
351
  </div>
352
+ <div>
353
+ <p class="text-sm font-medium text-gray-500">IBAN</p>
354
+ <p class="text-gray-800">FR76 3000 4000 0100 1234 5678 900</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
355
  </div>
356
+ <div>
357
+ <p class="text-sm font-medium text-gray-500">BIC/SWIFT</p>
358
+ <p class="text-gray-800">BNPAFRPP</p>
 
 
359
  </div>
360
+ </div>
361
+ <div class="mt-6">
362
+ <button onclick="closeModal('bankDetailsModal')" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md font-medium">
363
+ Fermer
 
364
  </button>
365
  </div>
366
  </div>
367
  </div>
368
 
369
+ <!-- Modal Ajout Carte -->
370
+ <div id="cardFormModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
371
+ <div class="bg-white rounded-lg p-6 max-w-md w-full">
372
+ <div class="flex justify-between items-center mb-4">
373
+ <h3 class="text-lg font-bold text-gray-800">Ajouter une Carte</h3>
374
+ <button onclick="closeModal('cardFormModal')" class="text-gray-500 hover:text-gray-700">
375
+ <i class="fas fa-times"></i>
376
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
377
  </div>
378
+ <form class="space-y-4">
379
+ <div>
380
+ <label class="block text-sm font-medium text-gray-700 mb-1">Numéro de Carte</label>
381
+ <input type="text" placeholder="4242 4242 4242 4242" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
 
 
 
382
  </div>
383
+ <div class="grid grid-cols-2 gap-4">
384
  <div>
385
+ <label class="block text-sm font-medium text-gray-700 mb-1">Date d'Expiration</label>
386
+ <input type="text" placeholder="MM/AA" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
 
 
 
 
387
  </div>
388
  <div>
389
+ <label class="block text-sm font-medium text-gray-700 mb-1">CVV</label>
390
+ <input type="text" placeholder="123" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
 
 
 
 
391
  </div>
392
  </div>
393
+ <div>
394
+ <label class="block text-sm font-medium text-gray-700 mb-1">Nom sur la Carte</label>
395
+ <input type="text" placeholder="VOTRE NOM" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
396
+ </div>
397
+ <div class="mt-6">
398
+ <button type="button" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md font-medium">
399
+ Enregistrer la Carte
400
+ </button>
401
+ </div>
402
+ </form>
403
  </div>
404
+ </div>
405
 
406
  <script>
407
+ // Fonctions pour les modals
408
+ function showBankDetails() {
409
+ document.getElementById('bankDetailsModal').classList.remove('hidden');
 
 
 
 
 
 
 
 
 
 
 
410
  }
 
 
 
 
 
411
 
412
+ function showCardForm() {
413
+ document.getElementById('cardFormModal').classList.remove('hidden');
414
+ }
415
 
416
+ function closeModal(id) {
417
+ document.getElementById(id).classList.add('hidden');
418
+ }
 
 
 
 
419
 
420
+ // Fermer les modals en cliquant à l'extérieur
421
+ document.querySelectorAll('[id$="Modal"]').forEach(modal => {
422
+ modal.addEventListener('click', function(e) {
423
+ if (e.target === modal) {
424
+ modal.classList.add('hidden');
 
 
 
 
425
  }
426
  });
427
  });
 
 
 
 
 
 
 
428
 
429
+ // Simulation de paiement
430
+ document.querySelectorAll('[onclick^="window.open"]').forEach(button => {
431
+ button.addEventListener('click', function() {
432
+ // Vous pouvez ajouter ici un suivi ou une confirmation
433
+ console.log('Redirection vers le site de paiement');
434
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
435
  });
436
  </script>
437
  <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/course-gen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -1,2 +1,3 @@
1
  je veux creer le plus gigantesque générateur de site de cours en ligne marché de INTELIGENCES ARTIFICIEL AVEC PLUS DE 990099 BOUTONS D ASSISANT IA dans toutes les domaine de courses en ligne, je veux q'uon affiche toutes les boutons directement et que chaque boutons cliqué s'ouvre dans une nouvel fenetre je veux que toi soit gré en automatique et aussi ,: je veux un tableau de bord gigantesque ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paement je veux acces et toute produit pour moi seul les autre devront payer un abonnement : [email protected] : Admin270574@ et [email protected] : Admin270574@ avec une interface futiriste
2
- aucun bouton fonctionnne , je veux un tableau de bord pour entrees toutes mes information de paiement pour etre payer
 
 
1
  je veux creer le plus gigantesque générateur de site de cours en ligne marché de INTELIGENCES ARTIFICIEL AVEC PLUS DE 990099 BOUTONS D ASSISANT IA dans toutes les domaine de courses en ligne, je veux q'uon affiche toutes les boutons directement et que chaque boutons cliqué s'ouvre dans une nouvel fenetre je veux que toi soit gré en automatique et aussi ,: je veux un tableau de bord gigantesque ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paement je veux acces et toute produit pour moi seul les autre devront payer un abonnement : [email protected] : Admin270574@ et [email protected] : Admin270574@ avec une interface futiriste
2
+ aucun bouton fonctionnne , je veux un tableau de bord pour entrees toutes mes information de paiement pour etre payer
3
+ je veux des vrais site qui fonctione reelement quand on clique sur les bouton quil souvre en automatique