Hugging Face's logo

Spaces:
docto41
/
course-gen
Running

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

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +372 -381
  2. prompts.txt +7 -1
index.html CHANGED
@@ -3,436 +3,427 @@
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>
438
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>UNIVERSAL PORTAL - 9,696,987,456,321 Services</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
+ .portal-grid {
11
+ display: grid;
12
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
13
+ gap: 15px;
14
+ overflow-y: auto;
15
+ max-height: 70vh;
16
  }
17
+ .portal-button {
18
+ transition: all 0.3s;
19
+ height: 120px;
20
+ position: relative;
21
+ overflow: hidden;
22
  }
23
+ .portal-button::before {
24
+ content: '';
25
+ position: absolute;
26
+ top: -50%;
27
+ left: -50%;
28
+ width: 200%;
29
+ height: 200%;
30
+ background: linear-gradient(
31
+ to bottom right,
32
+ rgba(255,255,255,0.3) 0%,
33
+ rgba(255,255,255,0) 60%
34
+ );
35
+ transform: rotate(30deg);
36
+ transition: all 0.7s;
37
  }
38
+ .portal-button:hover::before {
39
+ transform: translateX(100%) rotate(30deg);
 
 
 
 
40
  }
41
+ .universe-bg {
42
+ background: radial-gradient(ellipse at bottom, #0F2027 0%, #203A43 50%, #2C5364 100%);
 
43
  }
44
+ .service-counter {
45
+ font-size: 2.5rem;
46
+ background: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
47
+ -webkit-background-clip: text;
48
+ background-clip: text;
49
+ color: transparent;
50
+ animation: counterFlow 8s ease infinite;
51
+ background-size: 300% 300%;
52
  }
53
+ @keyframes counterFlow {
54
+ 0% { background-position: 0% 50%; }
55
+ 50% { background-position: 100% 50%; }
56
+ 100% { background-position: 0% 50%; }
57
  }
58
+ .dimension-selector {
59
+ -webkit-appearance: none;
60
+ -moz-appearance: none;
61
+ appearance: none;
62
+ background: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat;
63
+ background-position: right 1rem center;
64
+ background-size: 1em;
65
+ }
66
+ .loading-bar {
67
+ width: 0%;
68
+ transition: width 0.5s ease;
69
+ }
70
+ .portal-loader {
71
+ border: 3px solid rgba(255,255,255,0.3);
72
+ border-radius: 50%;
73
+ border-top: 3px solid #fff;
74
+ width: 30px;
75
+ height: 30px;
76
+ animation: spin 1s linear infinite;
77
+ }
78
+ @keyframes spin {
79
+ 0% { transform: rotate(0deg); }
80
+ 100% { transform: rotate(360deg); }
81
  }
82
  </style>
83
  </head>
84
+ <body class="universe-bg text-white min-h-screen">
85
+ <div class="container mx-auto px-4 py-8">
86
+ <!-- Header -->
87
+ <header class="text-center mb-12">
88
+ <h1 class="text-5xl md:text-7xl font-bold mb-6">
89
+ <span class="bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500">UNIVERSAL PORTAL</span>
90
+ </h1>
91
+ <p class="text-xl md:text-2xl mb-8">
92
+ Accès instantané à <span class="service-counter font-mono">9,696,987,456,321</span> services intergalactiques
93
+ </p>
94
+ </header>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
95
 
96
+ <!-- Control Panel -->
97
+ <div class="bg-black bg-opacity-30 rounded-xl p-6 mb-8 border border-gray-700 backdrop-blur-md">
98
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
99
+ <div>
100
+ <label class="block text-sm font-medium mb-2">Dimension actuelle</label>
101
+ <select id="dimensionSelect" class="dimension-selector w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 text-white">
102
+ <option value="milky-way">Voie Lactée</option>
103
+ <option value="andromeda">Andromède</option>
104
+ <option value="triangulum">Triangulum</option>
105
+ <option value="whirlpool">Whirlpool</option>
106
+ <option value="pinwheel">Pinwheel</option>
107
+ </select>
 
 
 
 
 
 
 
 
 
108
  </div>
109
+ <div>
110
+ <label class="block text-sm font-medium mb-2">Secteur spatial</label>
111
+ <div class="flex">
112
+ <input type="number" id="sectorInput" placeholder="Coordonnées sectorielles"
113
+ class="flex-grow px-4 py-3 rounded-l-lg bg-gray-800 border border-gray-700 text-white">
114
+ <button id="locateBtn" class="px-4 bg-blue-600 rounded-r-lg hover:bg-blue-700 transition">
115
+ <i class="fas fa-crosshairs"></i>
116
+ </button>
 
 
117
  </div>
118
  </div>
119
+ <div>
120
+ <label class="block text-sm font-medium mb-2">Génération automatique</label>
121
  <div class="flex items-center">
122
+ <button id="autoGenBtn" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 rounded-lg font-medium hover:opacity-90 transition flex items-center">
123
+ <i class="fas fa-bolt mr-2"></i> Activer
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
124
  </button>
125
+ <div id="genStatus" class="ml-4 text-sm text-green-400 hidden">
126
+ <i class="fas fa-circle-notch fa-spin mr-1"></i> En cours...
 
 
 
 
 
127
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
128
  </div>
129
  </div>
130
  </div>
131
 
132
+ <div class="mt-6">
133
+ <div class="flex justify-between text-sm mb-1">
134
+ <span>Services chargés:</span>
135
+ <span id="loadedCount">0</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
136
  </div>
137
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
138
+ <div id="loadingBar" class="loading-bar bg-gradient-to-r from-blue-500 to-purple-600 h-2.5 rounded-full"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
139
  </div>
140
  </div>
141
  </div>
 
142
 
143
+ <!-- Portal Grid -->
144
+ <div class="relative">
145
+ <div id="portalGrid" class="portal-grid"></div>
146
+
147
+ <div id="loadingOverlay" class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center flex-col">
148
+ <div class="portal-loader mb-4"></div>
149
+ <p>Chargement des portails dimensionnels...</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
150
  </div>
151
  </div>
 
152
 
153
+ <!-- Pagination -->
154
+ <div class="flex justify-center mt-8">
155
+ <nav class="inline-flex rounded-md shadow">
156
+ <button id="prevPage" class="px-5 py-2.5 rounded-l-md bg-gray-800 border border-gray-700 hover:bg-gray-700">
157
+ <i class="fas fa-chevron-left mr-2"></i> Précédent
 
 
158
  </button>
159
+ <div class="flex items-center px-4 bg-gray-900 border-t border-b border-gray-700">
160
+ Page <span id="currentPage" class="mx-2 font-bold">1</span> sur <span id="totalPages">∞</span>
 
 
 
 
 
 
 
 
 
 
 
161
  </div>
162
+ <button id="nextPage" class="px-5 py-2.5 rounded-r-md bg-gray-800 border border-gray-700 hover:bg-gray-700">
163
+ Suivant <i class="fas fa-chevron-right ml-2"></i>
 
 
 
 
 
 
164
  </button>
165
+ </nav>
166
  </div>
167
  </div>
168
 
169
+ <script>
170
+ // Configuration
171
+ const TOTAL_SERVICES = 9696987456321;
172
+ const SERVICES_PER_PAGE = 1000;
173
+ const AUTO_GEN_INTERVAL = 100; // ms
174
+ const MAX_AUTO_GEN = 100000; // Nombre max de services à générer automatiquement
175
+
176
+ // Variables d'état
177
+ let currentPage = 1;
178
+ let totalPages = Math.ceil(TOTAL_SERVICES / SERVICES_PER_PAGE);
179
+ let autoGenActive = false;
180
+ let autoGenCount = 0;
181
+ let servicesGenerated = 0;
182
+ let autoGenInterval;
183
+
184
+ // Éléments DOM
185
+ const portalGrid = document.getElementById('portalGrid');
186
+ const loadingOverlay = document.getElementById('loadingOverlay');
187
+ const loadedCount = document.getElementById('loadedCount');
188
+ const loadingBar = document.getElementById('loadingBar');
189
+ const currentPageEl = document.getElementById('currentPage');
190
+ const totalPagesEl = document.getElementById('totalPages');
191
+ const genStatus = document.getElementById('genStatus');
192
+
193
+ // Initialisation
194
+ document.addEventListener('DOMContentLoaded', function() {
195
+ totalPagesEl.textContent = "∞";
196
+ loadPage(currentPage);
197
+
198
+ // Écouteurs d'événements
199
+ document.getElementById('prevPage').addEventListener('click', prevPage);
200
+ document.getElementById('nextPage').addEventListener('click', nextPage);
201
+ document.getElementById('autoGenBtn').addEventListener('click', toggleAutoGen);
202
+ document.getElementById('locateBtn').addEventListener('click', locateSector);
203
+
204
+ // Animation du compteur
205
+ animateCounter();
206
+ });
207
+
208
+ // Fonctions principales
209
+ function loadPage(page) {
210
+ loadingOverlay.classList.remove('hidden');
211
+ portalGrid.innerHTML = '';
212
+
213
+ // Simuler un chargement
214
+ setTimeout(() => {
215
+ generateServices(page);
216
+ loadingOverlay.classList.add('hidden');
217
+ updatePagination();
218
+ }, 500);
219
+ }
220
+
221
+ function generateServices(page) {
222
+ const startIdx = (page - 1) * SERVICES_PER_PAGE + 1;
223
+ const endIdx = Math.min(startIdx + SERVICES_PER_PAGE - 1, TOTAL_SERVICES);
224
+
225
+ // Pour la démo, nous limitons à 1000 services affichés
226
+ const displayCount = Math.min(1000, endIdx - startIdx + 1);
227
+
228
+ for (let i = 0; i < displayCount; i++) {
229
+ const serviceId = startIdx + i;
230
+ const service = generateServiceData(serviceId);
231
+ createServiceButton(service);
232
+ }
233
+
234
+ servicesGenerated = endIdx;
235
+ updateLoadedCount();
236
+ }
237
+
238
+ function generateServiceData(id) {
239
+ // Catégories et données aléatoires
240
+ const categories = [
241
+ "Transport", "Communication", "Énergie", "Biotech",
242
+ "IA", "Construction", "Divertissement", "Recherche"
243
+ ];
244
+ const galaxies = [
245
+ "Voie Lactée", "Andromède", "Triangulum", "Messier 87",
246
+ "Sombrero", "Whirlpool", "Pinwheel", "Centaurus A"
247
+ ];
248
+ const prefixes = [
249
+ "Quantum", "Nova", "Hyper", "Omni", "Inter",
250
+ "Multi", "Trans", "Ultra", "Mega", "Alpha"
251
+ ];
252
+ const suffixes = [
253
+ "Tech", "Systems", "Solutions", "Corp", "Dynamics",
254
+ "Networks", "Industries", "Labs", "Enterprises", "Ventures"
255
+ ];
256
+
257
+ const name = `${prefixes[Math.floor(Math.random() * prefixes.length)]}${suffixes[Math.floor(Math.random() * suffixes.length)]}`;
258
+ const category = categories[Math.floor(Math.random() * categories.length)];
259
+ const galaxy = galaxies[Math.floor(Math.random() * galaxies.length)];
260
+ const rating = (Math.random() * 5).toFixed(1);
261
+
262
+ // Générer une URL aléatoire mais unique
263
+ const domains = ["com", "galaxy", "universe", "space", "cosmos", "xyz"];
264
+ const tld = domains[Math.floor(Math.random() * domains.length)];
265
+ const url = `https://${name.toLowerCase()}.${tld}`;
266
+
267
+ // Couleur aléatoire
268
+ const colors = [
269
+ "from-blue-500 to-blue-600", "from-purple-500 to-purple-600",
270
+ "from-green-500 to-green-600", "from-red-500 to-red-600",
271
+ "from-yellow-500 to-yellow-600", "from-pink-500 to-pink-600",
272
+ "from-indigo-500 to-indigo-600", "from-teal-500 to-teal-600"
273
+ ];
274
+ const color = colors[Math.floor(Math.random() * colors.length)];
275
+
276
+ return {
277
+ id,
278
+ name,
279
+ url,
280
+ category,
281
+ galaxy,
282
+ rating,
283
+ color
284
+ };
285
+ }
286
+
287
+ function createServiceButton(service) {
288
+ const button = document.createElement('div');
289
+ button.className = `portal-button rounded-xl bg-gradient-to-br ${service.color} border border-gray-700 cursor-pointer flex flex-col items-center justify-center p-4`;
290
+
291
+ button.innerHTML = `
292
+ <div class="text-3xl mb-2">
293
+ <i class="fas ${getServiceIcon(service.category)}"></i>
294
  </div>
295
+ <div class="text-center">
296
+ <div class="font-bold truncate w-full">${service.name}</div>
297
+ <div class="text-xs opacity-80 mt-1">${service.category}</div>
298
+ <div class="text-xs mt-2">
299
+ <span class="text-yellow-300">${service.rating}</span>
300
+ <i class="fas fa-star ml-1 text-yellow-300"></i>
301
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
302
  </div>
303
+ `;
304
+
305
+ button.addEventListener('click', () => {
306
+ window.open(service.url, '_blank');
307
+ });
308
+
309
+ portalGrid.appendChild(button);
310
+ }
311
+
312
+ function getServiceIcon(category) {
313
+ const icons = {
314
+ "Transport": "fa-rocket",
315
+ "Communication": "fa-satellite",
316
+ "Énergie": "fa-bolt",
317
+ "Biotech": "fa-dna",
318
+ "IA": "fa-robot",
319
+ "Construction": "fa-hammer",
320
+ "Divertissement": "fa-vr-cardboard",
321
+ "Recherche": "fa-flask"
322
+ };
323
+ return icons[category] || "fa-globe";
324
  }
325
 
326
+ function updatePagination() {
327
+ currentPageEl.textContent = currentPage;
328
  }
329
 
330
+ function updateLoadedCount() {
331
+ loadedCount.textContent = servicesGenerated.toLocaleString();
332
+ const progress = (servicesGenerated / TOTAL_SERVICES) * 100;
333
+ loadingBar.style.width = `${Math.min(100, progress)}%`;
334
  }
335
 
336
+ function animateCounter() {
337
+ let current = 0;
338
+ const increment = Math.floor(TOTAL_SERVICES / 100);
339
+
340
+ const timer = setInterval(() => {
341
+ current += increment;
342
+ if (current >= TOTAL_SERVICES) {
343
+ current = TOTAL_SERVICES;
344
+ clearInterval(timer);
345
  }
346
+ document.querySelector('.service-counter').textContent = current.toLocaleString();
347
+ }, 20);
348
+ }
349
 
350
+ // Navigation
351
+ function nextPage() {
352
+ if (currentPage < totalPages) {
353
+ currentPage++;
354
+ loadPage(currentPage);
355
+ }
356
+ }
357
+
358
+ function prevPage() {
359
+ if (currentPage > 1) {
360
+ currentPage--;
361
+ loadPage(currentPage);
362
+ }
363
+ }
364
+
365
+ // Système automatique
366
+ function toggleAutoGen() {
367
+ const btn = document.getElementById('autoGenBtn');
368
+
369
+ if (autoGenActive) {
370
+ stopAutoGen();
371
+ btn.innerHTML = '<i class="fas fa-bolt mr-2"></i> Activer';
372
+ genStatus.classList.add('hidden');
373
+ } else {
374
+ startAutoGen();
375
+ btn.innerHTML = '<i class="fas fa-stop mr-2"></i> Arrêter';
376
+ genStatus.classList.remove('hidden');
377
+ }
378
+ }
379
+
380
+ function startAutoGen() {
381
+ autoGenActive = true;
382
+ autoGenCount = 0;
383
+
384
+ autoGenInterval = setInterval(() => {
385
+ if (autoGenCount >= MAX_AUTO_GEN) {
386
+ stopAutoGen();
387
+ return;
388
+ }
389
+
390
+ const batchSize = 100;
391
+ for (let i = 0; i < batchSize; i++) {
392
+ const serviceId = servicesGenerated + 1;
393
+ const service = generateServiceData(serviceId);
394
+ createServiceButton(service);
395
+ servicesGenerated++;
396
+ }
397
+
398
+ autoGenCount += batchSize;
399
+ updateLoadedCount();
400
+
401
+ // Faire défiler vers le bas automatiquement
402
+ portalGrid.scrollTop = portalGrid.scrollHeight;
403
+
404
+ }, AUTO_GEN_INTERVAL);
405
+ }
406
+
407
+ function stopAutoGen() {
408
+ autoGenActive = false;
409
+ clearInterval(autoGenInterval);
410
+ document.getElementById('autoGenBtn').innerHTML = '<i class="fas fa-bolt mr-2"></i> Activer';
411
+ genStatus.classList.add('hidden');
412
+ }
413
+
414
+ // Localisation de secteur
415
+ function locateSector() {
416
+ const sectorInput = document.getElementById('sectorInput');
417
+ const sector = parseInt(sectorInput.value);
418
+
419
+ if (!isNaN(sector) && sector > 0 && sector <= TOTAL_SERVICES) {
420
+ currentPage = Math.ceil(sector / SERVICES_PER_PAGE);
421
+ loadPage(currentPage);
422
+ sectorInput.value = '';
423
+ } else {
424
+ alert("Coordonnées sectorielles invalides. Veuillez entrer un nombre entre 1 et 9,696,987,456,321");
425
+ }
426
+ }
427
  </script>
428
  <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>
429
  </html>
prompts.txt CHANGED
@@ -1,3 +1,9 @@
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
 
 
 
 
 
 
 
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
4
+ je veut un générateur le plus puissant au monde capable de creér des gros site de cours en ligne en 10 seconde avec plus de 10page et 1500 2000 ligne les plus puissant génerateur que part descritions que pour des site en ligne avec , un tableau de bord personnel pour entrer mes information de paiement paypal , stripe etc.. pour etre payer je veux que moi seul a acces a se tableau be bors , acces interdit au autres il devront payer un abonnement il auront un autre tableau de bord pour eux , mais pas les mêmes,,
5
+ je veus quil génére plus de 5222 cours : je veux enregistrer les nouveaux domaine personnalisé et enregister directement au bureau des registrat
6
+ activer toutes les boutons et toutes les fonctions en automatique
7
+ je veux creer un site de 4987897 boutons de services reel en automatique avec des vrais site en automatique une fois clicquer sur chaqune des bouton souvre en automatique dans une nouvel fenetre
8
+ je veux un site unique au monde avec 9696987456321 boutons activé en automatique avec ouverture dans une nouvelle fenetre chaque fois qu'on clique sur les bouton
9
+ je veux pas des site en exemple je veux des vrais site active les 9 696 987 456 321 services intergalactiques en systeme automatique