Hugging Face's logo

Spaces:
docto41
/
courses-gen
Running

App Files Community
docto41 commited on
Commit
45981ea
·
verified ·
1 Parent(s): d719624

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +699 -19
  3. prompts.txt +4 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Courses Gen
3
- emoji: 📊
4
- colorFrom: gray
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: courses-gen
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,699 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CourseGen - Générateur de Site de Cours en Ligne</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ }
13
+ .course-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .loading-spinner {
18
+ border: 4px solid rgba(0, 0, 0, 0.1);
19
+ border-radius: 50%;
20
+ border-top: 4px solid #3498db;
21
+ width: 40px;
22
+ height: 40px;
23
+ animation: spin 1s linear infinite;
24
+ margin: 20px auto;
25
+ }
26
+ @keyframes spin {
27
+ 0% { transform: rotate(0deg); }
28
+ 100% { transform: rotate(360deg); }
29
+ }
30
+ .course-image {
31
+ height: 200px;
32
+ object-fit: cover;
33
+ width: 100%;
34
+ }
35
+ .lazy-load {
36
+ opacity: 0;
37
+ transition: opacity 0.3s ease-in-out;
38
+ }
39
+ .lazy-load.loaded {
40
+ opacity: 1;
41
+ }
42
+ .animate-pulse {
43
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
44
+ }
45
+ @keyframes pulse {
46
+ 0%, 100% { opacity: 1; }
47
+ 50% { opacity: 0.5; }
48
+ }
49
+ </style>
50
+ </head>
51
+ <body class="font-sans bg-gray-50">
52
+ <!-- Navigation -->
53
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
54
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
55
+ <div class="flex justify-between h-16">
56
+ <div class="flex items-center">
57
+ <div class="flex-shrink-0 flex items-center">
58
+ <i class="fas fa-robot text-purple-600 text-2xl mr-2"></i>
59
+ <span class="text-xl font-bold text-gray-900">CourseGen</span>
60
+ </div>
61
+ </div>
62
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
63
+ <button id="generateBtn" class="px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-md hover:bg-purple-700 flex items-center">
64
+ <i class="fas fa-magic mr-2"></i> Générer mon site
65
+ </button>
66
+ </div>
67
+ <div class="-mr-2 flex items-center sm:hidden">
68
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500" aria-controls="mobile-menu" aria-expanded="false">
69
+ <span class="sr-only">Open main menu</span>
70
+ <i class="fas fa-bars"></i>
71
+ </button>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </nav>
76
+
77
+ <!-- Generator Section -->
78
+ <div class="gradient-bg text-white">
79
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
80
+ <div class="text-center">
81
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
82
+ Générateur Automatique de Site de Cours
83
+ </h1>
84
+ <p class="mt-6 max-w-lg mx-auto text-xl">
85
+ Créez votre plateforme d'e-learning en quelques clics sans aucune compétence technique
86
+ </p>
87
+ <div class="mt-10">
88
+ <div class="max-w-3xl mx-auto bg-white bg-opacity-10 rounded-xl p-6 backdrop-blur-sm">
89
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
90
+ <div>
91
+ <label for="siteName" class="block text-sm font-medium text-white">Nom de votre site</label>
92
+ <input type="text" id="siteName" class="mt-1 block w-full px-3 py-2 border border-white border-opacity-30 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 bg-white bg-opacity-10 text-white placeholder-white placeholder-opacity-70" placeholder="Ex: MaFormationPro">
93
+ </div>
94
+ <div>
95
+ <label for="siteCategory" class="block text-sm font-medium text-white">Thème principal</label>
96
+ <select id="siteCategory" class="mt-1 block w-full pl-3 pr-10 py-2 border border-white border-opacity-30 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 bg-white bg-opacity-10 text-white">
97
+ <option>Développement</option>
98
+ <option>Business</option>
99
+ <option>Design</option>
100
+ <option>Marketing</option>
101
+ <option>Langues</option>
102
+ <option>Santé</option>
103
+ <option>Autre</option>
104
+ </select>
105
+ </div>
106
+ <div>
107
+ <label for="courseCount" class="block text-sm font-medium text-white">Nombre de cours</label>
108
+ <select id="courseCount" class="mt-1 block w-full pl-3 pr-10 py-2 border border-white border-opacity-30 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 bg-white bg-opacity-10 text-white">
109
+ <option>10-50</option>
110
+ <option>50-100</option>
111
+ <option>100-200</option>
112
+ <option>200-500</option>
113
+ <option>500+</option>
114
+ </select>
115
+ </div>
116
+ <div>
117
+ <label for="colorScheme" class="block text-sm font-medium text-white">Couleur principale</label>
118
+ <div class="mt-1 flex space-x-2">
119
+ <button data-color="purple" class="w-8 h-8 rounded-full bg-purple-600 border-2 border-white"></button>
120
+ <button data-color="blue" class="w-8 h-8 rounded-full bg-blue-600"></button>
121
+ <button data-color="green" class="w-8 h-8 rounded-full bg-green-600"></button>
122
+ <button data-color="red" class="w-8 h-8 rounded-full bg-red-600"></button>
123
+ <button data-color="indigo" class="w-8 h-8 rounded-full bg-indigo-600"></button>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ <div class="mt-6">
128
+ <label class="flex items-center">
129
+ <input type="checkbox" id="enableEcommerce" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
130
+ <span class="ml-2 text-sm text-white">Activer la vente de cours</span>
131
+ </label>
132
+ </div>
133
+ <div class="mt-6">
134
+ <button id="previewBtn" class="w-full px-4 py-2 border border-transparent text-base font-medium rounded-md text-purple-700 bg-white hover:bg-gray-100">
135
+ <i class="fas fa-eye mr-2"></i> Prévisualiser
136
+ </button>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Features Section -->
145
+ <div class="py-12 bg-white">
146
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
147
+ <div class="lg:text-center">
148
+ <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Fonctionnalités incluses</h2>
149
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
150
+ Tout ce dont vous avez besoin pour réussir
151
+ </p>
152
+ </div>
153
+
154
+ <div class="mt-10">
155
+ <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
156
+ <div class="bg-white overflow-hidden shadow rounded-lg">
157
+ <div class="px-4 py-5 sm:p-6">
158
+ <div class="flex items-center">
159
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
160
+ <i class="fas fa-bolt text-white text-xl"></i>
161
+ </div>
162
+ <div class="ml-5 w-0 flex-1">
163
+ <h3 class="text-lg font-medium text-gray-900">Génération Automatique</h3>
164
+ <p class="mt-1 text-sm text-gray-500">
165
+ Créez un site complet avec des centaines de cours en quelques minutes
166
+ </p>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="bg-white overflow-hidden shadow rounded-lg">
173
+ <div class="px-4 py-5 sm:p-6">
174
+ <div class="flex items-center">
175
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
176
+ <i class="fas fa-images text-white text-xl"></i>
177
+ </div>
178
+ <div class="ml-5 w-0 flex-1">
179
+ <h3 class="text-lg font-medium text-gray-900">Images de Cours</h3>
180
+ <p class="mt-1 text-sm text-gray-500">
181
+ Des images uniques générées automatiquement pour chaque cours
182
+ </p>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <div class="bg-white overflow-hidden shadow rounded-lg">
189
+ <div class="px-4 py-5 sm:p-6">
190
+ <div class="flex items-center">
191
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
192
+ <i class="fas fa-shopping-cart text-white text-xl"></i>
193
+ </div>
194
+ <div class="ml-5 w-0 flex-1">
195
+ <h3 class="text-lg font-medium text-gray-900">E-commerce Intégré</h3>
196
+ <p class="mt-1 text-sm text-gray-500">
197
+ Système de paiement prêt à l'emploi pour vendre vos cours
198
+ </p>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <div class="bg-white overflow-hidden shadow rounded-lg">
205
+ <div class="px-4 py-5 sm:p-6">
206
+ <div class="flex items-center">
207
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
208
+ <i class="fas fa-mobile-alt text-white text-xl"></i>
209
+ </div>
210
+ <div class="ml-5 w-0 flex-1">
211
+ <h3 class="text-lg font-medium text-gray-900">Responsive Design</h3>
212
+ <p class="mt-1 text-sm text-gray-500">
213
+ Site optimisé pour mobile, tablette et ordinateur
214
+ </p>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="bg-white overflow-hidden shadow rounded-lg">
221
+ <div class="px-4 py-5 sm:p-6">
222
+ <div class="flex items-center">
223
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
224
+ <i class="fas fa-chart-line text-white text-xl"></i>
225
+ </div>
226
+ <div class="ml-5 w-0 flex-1">
227
+ <h3 class="text-lg font-medium text-gray-900">Analytiques</h3>
228
+ <p class="mt-1 text-sm text-gray-500">
229
+ Statistiques détaillées sur vos étudiants et vos ventes
230
+ </p>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <div class="bg-white overflow-hidden shadow rounded-lg">
237
+ <div class="px-4 py-5 sm:p-6">
238
+ <div class="flex items-center">
239
+ <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
240
+ <i class="fas fa-server text-white text-xl"></i>
241
+ </div>
242
+ <div class="ml-5 w-0 flex-1">
243
+ <h3 class="text-lg font-medium text-gray-900">Hébergement Inclus</h3>
244
+ <p class="mt-1 text-sm text-gray-500">
245
+ Pas besoin de serveur, nous hébergeons tout pour vous
246
+ </p>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Preview Section -->
257
+ <div id="previewSection" class="hidden py-12 bg-gray-50">
258
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
259
+ <div class="text-center mb-12">
260
+ <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
261
+ Prévisualisation de votre site
262
+ </h2>
263
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
264
+ Voici à quoi ressemblera votre plateforme de cours en ligne
265
+ </p>
266
+ </div>
267
+
268
+ <div class="bg-white p-6 rounded-lg shadow-xl">
269
+ <!-- Preview Navbar -->
270
+ <div class="bg-white shadow-sm mb-6">
271
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
272
+ <div class="flex justify-between h-16">
273
+ <div class="flex items-center">
274
+ <div class="flex-shrink-0 flex items-center">
275
+ <i class="fas fa-graduation-cap text-purple-600 text-2xl mr-2"></i>
276
+ <span id="previewSiteName" class="text-xl font-bold text-gray-900">MaFormationPro</span>
277
+ </div>
278
+ </div>
279
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
280
+ <button class="px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-md hover:bg-purple-700">
281
+ S'inscrire
282
+ </button>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Preview Hero -->
289
+ <div class="gradient-bg text-white rounded-lg mb-6">
290
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
291
+ <div class="text-center">
292
+ <h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl">
293
+ Apprenez avec <span id="previewCourseCount">50+</span> cours en ligne
294
+ </h1>
295
+ <p class="mt-4 max-w-lg mx-auto text-lg">
296
+ Découvrez notre collection complète de cours sur <span id="previewCategory">le développement</span>
297
+ </p>
298
+ </div>
299
+ </div>
300
+ </div>
301
+
302
+ <!-- Preview Courses -->
303
+ <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-6">
304
+ <!-- Course 1 -->
305
+ <div class="course-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
306
+ <div class="relative h-48 overflow-hidden bg-gray-200 animate-pulse">
307
+ <div class="absolute inset-0 flex items-center justify-center">
308
+ <i class="fas fa-image text-gray-400 text-4xl"></i>
309
+ </div>
310
+ </div>
311
+ <div class="p-6">
312
+ <div class="h-4 bg-gray-200 rounded w-3/4 mb-2 animate-pulse"></div>
313
+ <div class="h-3 bg-gray-200 rounded w-full mb-4 animate-pulse"></div>
314
+ <div class="h-3 bg-gray-200 rounded w-5/6 mb-6 animate-pulse"></div>
315
+ <div class="flex justify-between">
316
+ <div class="h-8 w-8 bg-gray-200 rounded-full animate-pulse"></div>
317
+ <div class="h-6 bg-gray-200 rounded w-16 animate-pulse"></div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+
322
+ <!-- Course 2 -->
323
+ <div class="course-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
324
+ <div class="relative h-48 overflow-hidden bg-gray-200 animate-pulse">
325
+ <div class="absolute inset-0 flex items-center justify-center">
326
+ <i class="fas fa-image text-gray-400 text-4xl"></i>
327
+ </div>
328
+ </div>
329
+ <div class="p-6">
330
+ <div class="h-4 bg-gray-200 rounded w-3/4 mb-2 animate-pulse"></div>
331
+ <div class="h-3 bg-gray-200 rounded w-full mb-4 animate-pulse"></div>
332
+ <div class="h-3 bg-gray-200 rounded w-5/6 mb-6 animate-pulse"></div>
333
+ <div class="flex justify-between">
334
+ <div class="h-8 w-8 bg-gray-200 rounded-full animate-pulse"></div>
335
+ <div class="h-6 bg-gray-200 rounded w-16 animate-pulse"></div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+
340
+ <!-- Course 3 -->
341
+ <div class="course-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
342
+ <div class="relative h-48 overflow-hidden bg-gray-200 animate-pulse">
343
+ <div class="absolute inset-0 flex items-center justify-center">
344
+ <i class="fas fa-image text-gray-400 text-4xl"></i>
345
+ </div>
346
+ </div>
347
+ <div class="p-6">
348
+ <div class="h-4 bg-gray-200 rounded w-3/4 mb-2 animate-pulse"></div>
349
+ <div class="h-3 bg-gray-200 rounded w-full mb-4 animate-pulse"></div>
350
+ <div class="h-3 bg-gray-200 rounded w-5/6 mb-6 animate-pulse"></div>
351
+ <div class="flex justify-between">
352
+ <div class="h-8 w-8 bg-gray-200 rounded-full animate-pulse"></div>
353
+ <div class="h-6 bg-gray-200 rounded w-16 animate-pulse"></div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <!-- Preview Features -->
360
+ <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
361
+ <div class="bg-purple-50 p-4 rounded-lg">
362
+ <div class="flex items-center">
363
+ <div class="flex-shrink-0 bg-purple-100 p-2 rounded-md">
364
+ <i class="fas fa-check-circle text-purple-600"></i>
365
+ </div>
366
+ <div class="ml-3">
367
+ <h3 class="text-sm font-medium text-purple-900">Certificats</h3>
368
+ <p class="mt-1 text-sm text-purple-700">Délivrés automatiquement</p>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ <div class="bg-purple-50 p-4 rounded-lg">
373
+ <div class="flex items-center">
374
+ <div class="flex-shrink-0 bg-purple-100 p-2 rounded-md">
375
+ <i class="fas fa-check-circle text-purple-600"></i>
376
+ </div>
377
+ <div class="ml-3">
378
+ <h3 class="text-sm font-medium text-purple-900">Support</h3>
379
+ <p class="mt-1 text-sm text-purple-700">24/7 pour vos étudiants</p>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ <div class="bg-purple-50 p-4 rounded-lg">
384
+ <div class="flex items-center">
385
+ <div class="flex-shrink-0 bg-purple-100 p-2 rounded-md">
386
+ <i class="fas fa-check-circle text-purple-600"></i>
387
+ </div>
388
+ <div class="ml-3">
389
+ <h3 class="text-sm font-medium text-purple-900">Mobile</h3>
390
+ <p class="mt-1 text-sm text-purple-700">Application incluse</p>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <!-- Preview CTA -->
397
+ <div class="bg-purple-600 text-white p-6 rounded-lg text-center">
398
+ <h3 class="text-xl font-bold">Prêt à lancer votre plateforme?</h3>
399
+ <p class="mt-2">Générez votre site maintenant et commencez à vendre vos cours</p>
400
+ <button id="finalGenerateBtn" class="mt-4 px-6 py-3 bg-white text-purple-600 font-medium rounded-md hover:bg-gray-100">
401
+ <i class="fas fa-rocket mr-2"></i> Générer mon site
402
+ </button>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+
408
+ <!-- Loading Modal -->
409
+ <div id="loadingModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
410
+ <div class="bg-white rounded-lg p-8 max-w-md w-full text-center">
411
+ <div class="loading-spinner mx-auto"></div>
412
+ <h3 class="mt-4 text-lg font-medium text-gray-900">Génération en cours</h3>
413
+ <p class="mt-2 text-sm text-gray-600">Votre site de cours est en train d'être créé automatiquement...</p>
414
+ <div class="mt-4 h-2 bg-gray-200 rounded-full overflow-hidden">
415
+ <div id="progressBar" class="h-full bg-purple-600 rounded-full" style="width: 0%"></div>
416
+ </div>
417
+ <p id="progressText" class="mt-2 text-xs text-gray-500">0% complété</p>
418
+ </div>
419
+ </div>
420
+
421
+ <!-- Success Modal -->
422
+ <div id="successModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
423
+ <div class="bg-white rounded-lg p-8 max-w-md w-full text-center">
424
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
425
+ <i class="fas fa-check text-green-600"></i>
426
+ </div>
427
+ <h3 class="mt-4 text-lg font-medium text-gray-900">Génération réussie!</h3>
428
+ <p class="mt-2 text-sm text-gray-600">Votre site de cours est prêt à être déployé.</p>
429
+ <div class="mt-6">
430
+ <a href="#" class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 mr-2">
431
+ <i class="fas fa-external-link-alt mr-2"></i>Voir mon site
432
+ </a>
433
+ <button id="closeModalBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
434
+ Fermer
435
+ </button>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <!-- Footer -->
441
+ <footer class="bg-gray-800">
442
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
443
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
444
+ <div>
445
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase">CourseGen</h3>
446
+ <p class="mt-4 text-gray-400 text-sm">
447
+ Le générateur automatique de sites de cours en ligne le plus simple.
448
+ </p>
449
+ </div>
450
+ <div>
451
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Ressources</h3>
452
+ <ul class="mt-4 space-y-2">
453
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Documentation</a></li>
454
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Tutoriels</a></li>
455
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">API</a></li>
456
+ </ul>
457
+ </div>
458
+ <div>
459
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Support</h3>
460
+ <ul class="mt-4 space-y-2">
461
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Centre d'aide</a></li>
462
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Contact</a></li>
463
+ </ul>
464
+ </div>
465
+ <div>
466
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Légal</h3>
467
+ <ul class="mt-4 space-y-2">
468
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Confidentialité</a></li>
469
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Conditions</a></li>
470
+ </ul>
471
+ </div>
472
+ </div>
473
+ <div class="mt-8 border-t border-gray-700 pt-8 flex justify-between items-center">
474
+ <p class="text-gray-400 text-sm">
475
+ &copy; 2023 CourseGen. Tous droits réservés.
476
+ </p>
477
+ <div class="flex space-x-6">
478
+ <a href="#" class="text-gray-400 hover:text-white">
479
+ <i class="fab fa-facebook-f"></i>
480
+ </a>
481
+ <a href="#" class="text-gray-400 hover:text-white">
482
+ <i class="fab fa-twitter"></i>
483
+ </a>
484
+ <a href="#" class="text-gray-400 hover:text-white">
485
+ <i class="fab fa-linkedin-in"></i>
486
+ </a>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </footer>
491
+
492
+ <script>
493
+ // DOM Elements
494
+ const siteNameInput = document.getElementById('siteName');
495
+ const siteCategorySelect = document.getElementById('siteCategory');
496
+ const courseCountSelect = document.getElementById('courseCount');
497
+ const colorButtons = document.querySelectorAll('[data-color]');
498
+ const enableEcommerceCheckbox = document.getElementById('enableEcommerce');
499
+ const previewBtn = document.getElementById('previewBtn');
500
+ const generateBtn = document.getElementById('generateBtn');
501
+ const finalGenerateBtn = document.getElementById('finalGenerateBtn');
502
+ const closeModalBtn = document.getElementById('closeModalBtn');
503
+ const previewSection = document.getElementById('previewSection');
504
+ const loadingModal = document.getElementById('loadingModal');
505
+ const successModal = document.getElementById('successModal');
506
+ const progressBar = document.getElementById('progressBar');
507
+ const progressText = document.getElementById('progressText');
508
+
509
+ // Preview elements
510
+ const previewSiteName = document.getElementById('previewSiteName');
511
+ const previewCourseCount = document.getElementById('previewCourseCount');
512
+ const previewCategory = document.getElementById('previewCategory');
513
+
514
+ // Color scheme
515
+ let selectedColor = 'purple';
516
+
517
+ // Event Listeners
518
+ previewBtn.addEventListener('click', showPreview);
519
+ generateBtn.addEventListener('click', showPreview);
520
+ finalGenerateBtn.addEventListener('click', generateSite);
521
+ closeModalBtn.addEventListener('click', closeSuccessModal);
522
+
523
+ // Color selection
524
+ colorButtons.forEach(button => {
525
+ button.addEventListener('click', () => {
526
+ // Remove border from all buttons
527
+ colorButtons.forEach(btn => btn.classList.remove('border-2', 'border-white'));
528
+
529
+ // Add border to selected button
530
+ button.classList.add('border-2', 'border-white');
531
+
532
+ // Set selected color
533
+ selectedColor = button.dataset.color;
534
+
535
+ // Update preview if visible
536
+ if (!previewSection.classList.contains('hidden')) {
537
+ updatePreview();
538
+ }
539
+ });
540
+ });
541
+
542
+ // Show preview
543
+ function showPreview() {
544
+ updatePreview();
545
+ previewSection.classList.remove('hidden');
546
+ window.scrollTo({
547
+ top: previewSection.offsetTop,
548
+ behavior: 'smooth'
549
+ });
550
+ }
551
+
552
+ // Update preview with current settings
553
+ function updatePreview() {
554
+ // Site name
555
+ const name = siteNameInput.value || 'MaFormationPro';
556
+ previewSiteName.textContent = name;
557
+
558
+ // Course count
559
+ const count = courseCountSelect.value;
560
+ previewCourseCount.textContent = count.replace('-', '+');
561
+
562
+ // Category
563
+ const category = siteCategorySelect.value.toLowerCase();
564
+ previewCategory.textContent = category === 'autre' ? 'divers sujets' : `le ${category}`;
565
+
566
+ // Update color scheme in preview
567
+ const previewHero = document.querySelector('#previewSection .gradient-bg');
568
+ const previewButtons = document.querySelectorAll('#previewSection .bg-purple-600');
569
+ const previewAccents = document.querySelectorAll('#previewSection .text-purple-600, #previewSection .bg-purple-50, #previewSection .bg-purple-100');
570
+
571
+ // Remove all color classes
572
+ previewHero.classList.remove(
573
+ 'bg-purple-600', 'bg-blue-600', 'bg-green-600', 'bg-red-600', 'bg-indigo-600',
574
+ 'from-purple-500', 'to-purple-700', 'from-blue-500', 'to-blue-700', 'from-green-500', 'to-green-700',
575
+ 'from-red-500', 'to-red-700', 'from-indigo-500', 'to-indigo-700'
576
+ );
577
+
578
+ previewButtons.forEach(btn => {
579
+ btn.classList.remove(
580
+ 'bg-purple-600', 'hover:bg-purple-700',
581
+ 'bg-blue-600', 'hover:bg-blue-700',
582
+ 'bg-green-600', 'hover:bg-green-700',
583
+ 'bg-red-600', 'hover:bg-red-700',
584
+ 'bg-indigo-600', 'hover:bg-indigo-700'
585
+ );
586
+ });
587
+
588
+ previewAccents.forEach(el => {
589
+ el.classList.remove(
590
+ 'text-purple-600', 'bg-purple-50', 'bg-purple-100', 'text-purple-900', 'text-purple-700',
591
+ 'text-blue-600', 'bg-blue-50', 'bg-blue-100', 'text-blue-900', 'text-blue-700',
592
+ 'text-green-600', 'bg-green-50', 'bg-green-100', 'text-green-900', 'text-green-700',
593
+ 'text-red-600', 'bg-red-50', 'bg-red-100', 'text-red-900', 'text-red-700',
594
+ 'text-indigo-600', 'bg-indigo-50', 'bg-indigo-100', 'text-indigo-900', 'text-indigo-700'
595
+ );
596
+ });
597
+
598
+ // Add new color classes based on selection
599
+ let fromColor, toColor;
600
+ switch(selectedColor) {
601
+ case 'blue':
602
+ fromColor = 'from-blue-500';
603
+ toColor = 'to-blue-700';
604
+ previewHero.classList.add('bg-blue-600', fromColor, toColor);
605
+ previewButtons.forEach(btn => btn.classList.add('bg-blue-600', 'hover:bg-blue-700'));
606
+ previewAccents.forEach(el => {
607
+ if (el.classList.contains('text-purple-600')) el.classList.add('text-blue-600');
608
+ if (el.classList.contains('bg-purple-50')) el.classList.add('bg-blue-50');
609
+ if (el.classList.contains('bg-purple-100')) el.classList.add('bg-blue-100');
610
+ if (el.classList.contains('text-purple-900')) el.classList.add('text-blue-900');
611
+ if (el.classList.contains('text-purple-700')) el.classList.add('text-blue-700');
612
+ });
613
+ break;
614
+ case 'green':
615
+ fromColor = 'from-green-500';
616
+ toColor = 'to-green-700';
617
+ previewHero.classList.add('bg-green-600', fromColor, toColor);
618
+ previewButtons.forEach(btn => btn.classList.add('bg-green-600', 'hover:bg-green-700'));
619
+ previewAccents.forEach(el => {
620
+ if (el.classList.contains('text-purple-600')) el.classList.add('text-green-600');
621
+ if (el.classList.contains('bg-purple-50')) el.classList.add('bg-green-50');
622
+ if (el.classList.contains('bg-purple-100')) el.classList.add('bg-green-100');
623
+ if (el.classList.contains('text-purple-900')) el.classList.add('text-green-900');
624
+ if (el.classList.contains('text-purple-700')) el.classList.add('text-green-700');
625
+ });
626
+ break;
627
+ case 'red':
628
+ fromColor = 'from-red-500';
629
+ toColor = 'to-red-700';
630
+ previewHero.classList.add('bg-red-600', fromColor, toColor);
631
+ previewButtons.forEach(btn => btn.classList.add('bg-red-600', 'hover:bg-red-700'));
632
+ previewAccents.forEach(el => {
633
+ if (el.classList.contains('text-purple-600')) el.classList.add('text-red-600');
634
+ if (el.classList.contains('bg-purple-50')) el.classList.add('bg-red-50');
635
+ if (el.classList.contains('bg-purple-100')) el.classList.add('bg-red-100');
636
+ if (el.classList.contains('text-purple-900')) el.classList.add('text-red-900');
637
+ if (el.classList.contains('text-purple-700')) el.classList.add('text-red-700');
638
+ });
639
+ break;
640
+ case 'indigo':
641
+ fromColor = 'from-indigo-500';
642
+ toColor = 'to-indigo-700';
643
+ previewHero.classList.add('bg-indigo-600', fromColor, toColor);
644
+ previewButtons.forEach(btn => btn.classList.add('bg-indigo-600', 'hover:bg-indigo-700'));
645
+ previewAccents.forEach(el => {
646
+ if (el.classList.contains('text-purple-600')) el.classList.add('text-indigo-600');
647
+ if (el.classList.contains('bg-purple-50')) el.classList.add('bg-indigo-50');
648
+ if (el.classList.contains('bg-purple-100')) el.classList.add('bg-indigo-100');
649
+ if (el.classList.contains('text-purple-900')) el.classList.add('text-indigo-900');
650
+ if (el.classList.contains('text-purple-700')) el.classList.add('text-indigo-700');
651
+ });
652
+ break;
653
+ default: // purple
654
+ fromColor = 'from-purple-500';
655
+ toColor = 'to-purple-700';
656
+ previewHero.classList.add('bg-purple-600', fromColor, toColor);
657
+ previewButtons.forEach(btn => btn.classList.add('bg-purple-600', 'hover:bg-purple-700'));
658
+ previewAccents.forEach(el => {
659
+ if (el.classList.contains('text-purple-600')) el.classList.add('text-purple-600');
660
+ if (el.classList.contains('bg-purple-50')) el.classList.add('bg-purple-50');
661
+ if (el.classList.contains('bg-purple-100')) el.classList.add('bg-purple-100');
662
+ if (el.classList.contains('text-purple-900')) el.classList.add('text-purple-900');
663
+ if (el.classList.contains('text-purple-700')) el.classList.add('text-purple-700');
664
+ });
665
+ }
666
+ }
667
+
668
+ // Generate site with progress simulation
669
+ function generateSite() {
670
+ loadingModal.classList.remove('hidden');
671
+ let progress = 0;
672
+
673
+ const interval = setInterval(() => {
674
+ progress += Math.random() * 10;
675
+ if (progress > 100) progress = 100;
676
+
677
+ progressBar.style.width = `${progress}%`;
678
+ progressText.textContent = `${Math.round(progress)}% complété`;
679
+
680
+ if (progress === 100) {
681
+ clearInterval(interval);
682
+ setTimeout(() => {
683
+ loadingModal.classList.add('hidden');
684
+ successModal.classList.remove('hidden');
685
+ }, 500);
686
+ }
687
+ }, 300);
688
+ }
689
+
690
+ // Close success modal
691
+ function closeSuccessModal() {
692
+ successModal.classList.add('hidden');
693
+ }
694
+
695
+ // Initialize color selection
696
+ document.querySelector('[data-color="purple"]').classList.add('border-2', 'border-white');
697
+ </script>
698
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/courses-gen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
699
+ </html>
prompts.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ Créez votre plateforme de cours en ligne Notre intelligence artificielle construit pour vous un site complet de formation en ligne, avec gestion des élèves, paiements et contenu interactif.
2
+ ajouter plus de 156889 cours reel en vrai
3
+ aficher toutes les images des cours
4
+ générateur de site de cours en ligne en automatique