Hugging Face's logo

Spaces:
Docfile
/
Attaque2
Running

App Files Community
Docfile commited on
Commit
f87d6d7
·
verified ·
1 Parent(s): 4404e58

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +465 -835
templates/index.html CHANGED
@@ -1,350 +1,222 @@
1
-
2
  <!DOCTYPE html>
3
-
4
  <html lang="fr">
5
  <head>
6
  <meta charset="UTF-8">
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
- <title>Générateur de Flashcards et Quiz</title>
9
  <script src="https://cdn.tailwindcss.com"></script>
10
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
11
- <script>
12
- tailwind.config = {
13
- theme: {
14
- extend: {
15
- colors: {
16
- primary: {
17
- 50: '#f0f9ff',
18
- 100: '#e0f2fe',
19
- 200: '#bae6fd',
20
- 300: '#7dd3fc',
21
- 400: '#38bdf8',
22
- 500: '#0ea5e9',
23
- 600: '#0284c7',
24
- 700: '#0369a1',
25
- 800: '#075985',
26
- 900: '#0c4a6e',
27
- }
28
- },
29
- animation: {
30
- 'bounce-slow': 'bounce 3s linear infinite',
31
- }
32
- }
33
- }
34
- }
35
- </script>
36
  <style>
37
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
38
 
39
- body {
40
- font-family: 'Poppins', sans-serif;
41
- background-color: #f8fafc;
42
- }
43
-
44
- .flashcard {
45
- perspective: 1000px;
46
- height: 220px;
47
- }
48
-
49
- .flashcard-inner {
50
- position: relative;
51
- width: 100%;
52
- height: 100%;
53
- transition: transform 0.8s;
54
- transform-style: preserve-3d;
55
- }
56
-
57
- .flashcard.flipped .flashcard-inner {
58
- transform: rotateY(180deg);
59
- }
60
-
61
- .flashcard-front, .flashcard-back {
62
- position: absolute;
63
- width: 100%;
64
- height: 100%;
65
- -webkit-backface-visibility: hidden;
66
- backface-visibility: hidden;
67
- display: flex;
68
- align-items: center;
69
- justify-content: center;
70
- border-radius: 0.5rem;
71
- padding: 1.5rem;
72
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
73
- }
74
-
75
- .flashcard-front {
76
- background-color: #ffffff;
77
- color: #1e293b;
78
- border-left: 5px solid #0ea5e9;
79
- }
80
-
81
- .flashcard-back {
82
- background-color: #0ea5e9;
83
- color: white;
84
- transform: rotateY(180deg);
85
- }
86
-
87
- .quiz-option {
88
- position: relative;
89
- padding-left: 2.5rem;
90
- }
91
-
92
- .quiz-option input[type="radio"] {
93
- position: absolute;
94
- opacity: 0;
95
- }
96
-
97
- .quiz-option label {
98
- display: block;
99
- position: relative;
100
- padding: 1rem 1.5rem 1rem 2.5rem;
101
- cursor: pointer;
102
- border: 1px solid #e2e8f0;
103
- border-radius: 0.5rem;
104
- transition: all 0.3s ease;
105
- }
106
-
107
- .quiz-option label:before {
108
- content: '';
109
- position: absolute;
110
- left: 1rem;
111
- top: 50%;
112
- transform: translateY(-50%);
113
- width: 1.25rem;
114
- height: 1.25rem;
115
- border-radius: 50%;
116
- border: 2px solid #cbd5e1;
117
- transition: all 0.3s ease;
118
- }
119
-
120
- .quiz-option input[type="radio"]:checked + label {
121
- background-color: #e0f2fe;
122
- border-color: #0ea5e9;
123
- }
124
-
125
- .quiz-option input[type="radio"]:checked + label:before {
126
- border-color: #0ea5e9;
127
- background-color: #0ea5e9;
128
- box-shadow: inset 0 0 0 4px #e0f2fe;
129
- }
130
-
131
- .quiz-option.correct input[type="radio"]:checked + label {
132
- background-color: #d1fae5;
133
- border-color: #10b981;
134
- }
135
-
136
- .quiz-option.correct input[type="radio"]:checked + label:before {
137
- border-color: #10b981;
138
- background-color: #10b981;
139
- box-shadow: inset 0 0 0 4px #d1fae5;
140
- }
141
-
142
- .quiz-option.incorrect input[type="radio"]:checked + label {
143
- background-color: #fee2e2;
144
- border-color: #ef4444;
145
- }
146
-
147
- .quiz-option.incorrect input[type="radio"]:checked + label:before {
148
- border-color: #ef4444;
149
- background-color: #ef4444;
150
- box-shadow: inset 0 0 0 4px #fee2e2;
151
- }
152
-
153
- .progress-bar-container {
154
- width: 100%;
155
- height: 8px;
156
- background-color: #e2e8f0;
157
- border-radius: 4px;
158
- overflow: hidden;
159
- }
160
-
161
- .progress-bar {
162
- height: 100%;
163
- background-color: #0ea5e9;
164
- transition: width 0.5s ease;
165
- }
166
-
167
- .floating-label {
168
- position: absolute;
169
- top: -10px;
170
- left: 10px;
171
- padding: 0 5px;
172
- background-color: white;
173
- transition: all 0.3s ease;
174
- pointer-events: none;
175
- }
176
-
177
- .pulse-animation {
178
- animation: pulse 2s infinite;
179
- }
180
-
181
- @keyframes pulse {
182
- 0% {
183
- box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4);
184
  }
185
- 70% {
186
- box-shadow: 0 0 0 10px rgba(14, 165, 233, 0);
 
 
187
  }
188
- 100% {
189
- box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
 
 
 
 
 
 
 
 
 
 
 
 
190
  }
191
- }
192
-
193
- .confetti {
194
- position: fixed;
195
- width: 10px;
196
- height: 10px;
197
- background-color: #f00;
198
- opacity: 0;
199
- animation: confetti-fall 3s linear forwards;
200
- }
201
-
202
- @keyframes confetti-fall {
203
- 0% {
204
- transform: translateY(0) rotate(0deg);
205
- opacity: 1;
206
  }
207
- 100% {
208
- transform: translateY(100vh) rotate(360deg);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
209
  opacity: 0;
 
 
 
 
 
210
  }
211
- }
212
-
213
- .btn-primary {
214
- @apply bg-primary-600 text-white px-6 py-3 rounded-lg shadow-md hover:bg-primary-700 transition duration-300 ease-in-out transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-opacity-50;
215
- }
216
-
217
- .btn-secondary {
218
- @apply bg-white text-primary-600 border border-primary-600 px-6 py-3 rounded-lg shadow-md hover:bg-primary-50 transition duration-300 ease-in-out transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-opacity-50;
219
- }
220
- </style>
221
 
 
 
 
 
 
 
 
 
222
  </head>
223
- <body>
224
- <div class="min-h-screen bg-gradient-to-b from-primary-50 to-white">
225
- <header class="bg-white shadow-sm py-6">
226
- <div class="container mx-auto px-4">
227
  <div class="flex items-center justify-between">
228
- <a href="#" class="text-3xl font-bold text-primary-700 flex items-center">
229
- <i class="fas fa-home mr-3 text-primary-500"></i>
230
- Mariam Quizz
231
  </a>
232
- <div class="flex space-x-2">
233
- <button id="themeToggle" class="p-2 rounded-full hover:bg-gray-100">
234
- <i class="fas fa-moon text-gray-600"></i>
235
- </button>
236
- <button class="p-2 rounded-full hover:bg-gray-100">
237
- <i class="fas fa-question-circle text-gray-600"></i>
238
- </button>
239
- </div>
240
  </div>
241
  </div>
242
  </header>
243
 
244
- <main class="container mx-auto px-4 py-8">
245
- <div class="max-w-3xl mx-auto">
246
- <!-- Introduction -->
247
- <div class="text-center mb-8">
248
- <h2 class="text-4xl font-bold text-gray-800 mb-4">Apprenez plus efficacement</h2>
249
- <p class="text-lg text-gray-600 mb-6">Créez des flashcards ou des quiz pour mémoriser n'importe quel sujet</p>
250
- </div>
251
-
252
- <!-- Section de configuration -->
253
- <div class="bg-white rounded-xl shadow-lg p-8 mb-10 relative overflow-hidden">
254
- <div class="absolute top-0 right-0 w-40 h-40 bg-primary-100 rounded-full -mr-20 -mt-20 z-0"></div>
255
- <div class="absolute bottom-0 left-0 w-24 h-24 bg-primary-100 rounded-full -ml-12 -mb-12 z-0"></div>
256
 
257
- <div class="relative z-10">
258
- <h3 class="text-2xl font-semibold text-gray-800 mb-6">Que souhaitez-vous apprendre aujourd'hui ?</h3>
259
-
260
- <div class="space-y-6">
261
- <div class="relative">
262
- <input type="text" id="topic" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-primary-500 focus:ring focus:ring-primary-200 focus:ring-opacity-50 transition-all duration-300 pl-10" placeholder="Entrez un sujet...">
263
- <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
264
- <div class="text-xs text-gray-500 mt-1 ml-2">Exemples: "Capitales du monde", "Photosynthèse", "Verbes irréguliers en anglais"</div>
265
- </div>
266
 
267
- <div>
268
- <p class="text-gray-700 font-medium mb-3">Choisissez votre méthode d'apprentissage :</p>
269
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
270
- <div class="relative">
271
- <input type="radio" id="typeFlashcards" name="contentType" value="flashcards" checked class="peer absolute opacity-0">
272
- <label for="typeFlashcards" class="flex flex-col items-center justify-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all duration-300 hover:bg-gray-50 peer-checked:border-primary-500 peer-checked:bg-primary-50">
273
- <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center mb-3">
274
- <i class="fas fa-clone text-xl text-primary-600"></i>
275
- </div>
276
- <h4 class="font-semibold text-gray-800">Flashcards</h4>
277
- <p class="text-sm text-gray-600 text-center mt-2">Pour mémoriser des informations par répétition</p>
278
- </label>
279
- </div>
280
-
281
- <div class="relative">
282
- <input type="radio" id="typeQuiz" name="contentType" value="quiz" class="peer absolute opacity-0">
283
- <label for="typeQuiz" class="flex flex-col items-center justify-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer transition-all duration-300 hover:bg-gray-50 peer-checked:border-primary-500 peer-checked:bg-primary-50">
284
- <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center mb-3">
285
- <i class="fas fa-question text-xl text-primary-600"></i>
286
- </div>
287
- <h4 class="font-semibold text-gray-800">Quiz</h4>
288
- <p class="text-sm text-gray-600 text-center mt-2">Pour tester vos connaissances avec des QCM</p>
289
- </label>
 
 
 
 
 
 
 
 
290
  </div>
291
  </div>
292
- </div>
293
-
294
- <div class="flex items-center justify-between pt-2">
295
- <div class="text-sm text-gray-500 italic">
296
- <i class="fas fa-info-circle mr-1"></i> La génération peut prendre jusqu'à 1 minute
 
 
 
 
297
  </div>
298
- <button id="generateBtn" class="btn-primary flex items-center">
299
- <span class="mr-2">Générer</span>
300
- <i class="fas fa-chevron-right"></i>
301
- </button>
302
  </div>
303
  </div>
304
  </div>
305
  </div>
306
 
307
- <!-- Indicateur de chargement -->
308
- <div id="loading" class="hidden">
309
  <div class="bg-white rounded-xl shadow-lg p-8 text-center">
310
  <div class="flex flex-col items-center justify-center space-y-4">
311
  <div class="relative w-24 h-24">
312
- <div class="absolute inset-0 border-4 border-primary-100 border-t-primary-500 rounded-full animate-spin"></div>
 
313
  <div class="absolute inset-0 flex items-center justify-center">
314
- <i class="fas fa-lightbulb text-2xl text-primary-500 animate-pulse"></i>
315
  </div>
316
  </div>
317
- <h3 class="text-xl font-semibold text-gray-800">Création en cours...</h3>
318
- <p class="text-gray-600">Nous élaborons votre contenu d'apprentissage personnalisé</p>
319
 
320
- <div class="w-full max-w-md mt-4">
321
- <div class="progress-bar-container">
322
- <div id="progressBar" class="progress-bar" style="width: 0%"></div>
323
- </div>
324
- <div id="loadingSteps" class="mt-8 text-left">
325
- <div class="flex items-center mb-3">
326
- <div class="w-6 h-6 rounded-full bg-primary-500 flex items-center justify-center mr-3">
327
- <i class="fas fa-check text-white text-xs"></i>
328
- </div>
329
- <span class="text-sm text-gray-700">Analyse du sujet</span>
330
  </div>
331
- <div class="flex items-center mb-3">
332
- <div id="step2" class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center mr-3">
333
- <i class="fas fa-spinner text-white text-xs animate-spin"></i>
334
- </div>
335
- <span class="text-sm text-gray-500">Recherche d'informations</span>
336
  </div>
337
- <div class="flex items-center mb-3">
338
- <div id="step3" class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center mr-3">
339
- <i class="fas fa-hourglass text-white text-xs"></i>
340
- </div>
341
- <span class="text-sm text-gray-500">Création du contenu</span>
342
  </div>
343
- <div class="flex items-center">
344
- <div id="step4" class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center mr-3">
345
- <i class="fas fa-hourglass text-white text-xs"></i>
346
- </div>
347
- <span class="text-sm text-gray-500">Finalisation</span>
348
  </div>
349
  </div>
350
  </div>
@@ -352,583 +224,341 @@ body {
352
  </div>
353
  </div>
354
 
355
- <!-- Conteneur pour les Flashcards -->
356
- <div id="flashcardsContainer" class="mt-8 hidden">
357
- <!-- Les flashcards seront injectées ici -->
358
  </div>
359
 
360
- <!-- Conteneur pour le Quiz -->
361
- <div id="quizContainer" class="mt-8 hidden">
362
- <!-- Les questions du quiz seront injectées ici -->
363
- </div>
364
- </div>
365
- </main>
366
 
367
- <footer class="bg-gray-900 text-white py-8 mt-20 hidden md:block">
368
- <div class="container mx-auto px-4">
369
- <div class="flex flex-col md:flex-row justify-between items-center">
370
- <div class="mb-4 md:mb-0">
371
- <h2 class="text-xl font-bold flex items-center">
372
- <i class="fas fa-brain mr-2"></i> Mémorisation Facile
373
- </h2>
374
- <p class="text-gray-400 text-sm mt-2">Votre outil d'apprentissage intelligent</p>
375
- </div>
376
- <div class="flex space-x-4">
377
- <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fab fa-twitter"></i></a>
378
- <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fab fa-facebook"></i></a>
379
- <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fab fa-instagram"></i></a>
380
- <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fab fa-youtube"></i></a>
381
- </div>
382
- </div>
383
- <div class="mt-8 border-t border-gray-800 pt-6 text-sm text-gray-400 text-center">
384
- © 2025 Mémorisation Facile. Tous droits réservés.
385
- </div>
386
  </div>
387
- </footer>
388
-
389
-
390
- </div>
391
 
392
  <script>
393
- const generateBtn = document.getElementById('generateBtn');
394
- const loadingIndicator = document.getElementById('loading');
395
- const flashcardsContainer = document.getElementById('flashcardsContainer');
396
- const quizContainer = document.getElementById('quizContainer');
397
- const topicInput = document.getElementById('topic');
398
- const progressBar = document.getElementById('progressBar');
399
- const themeToggle = document.getElementById('themeToggle');
400
- const step2 = document.getElementById('step2');
401
- const step3 = document.getElementById('step3');
402
- const step4 = document.getElementById('step4');
403
-
404
- // Gestion du thème clair/sombre
405
- themeToggle.addEventListener('click', function() {
406
- document.body.classList.toggle('dark-mode');
407
- const icon = this.querySelector('i');
408
- if (icon.classList.contains('fa-moon')) {
409
- icon.classList.remove('fa-moon');
410
- icon.classList.add('fa-sun');
411
- } else {
412
- icon.classList.remove('fa-sun');
413
- icon.classList.add('fa-moon');
414
- }
415
- });
416
-
417
- // Animation de chargement
418
- function simulateLoading() {
419
- let progress = 0;
420
- const interval = setInterval(() => {
421
- progress += 1;
422
- progressBar.style.width = `${progress}%`;
423
-
424
- if (progress === 25) {
425
- step2.classList.remove('bg-gray-200');
426
- step2.classList.add('bg-primary-500');
427
- step2.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
428
- } else if (progress === 60) {
429
- step3.classList.remove('bg-gray-200');
430
- step3.classList.add('bg-primary-500');
431
- step3.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
432
- step4.innerHTML = '<i class="fas fa-spinner text-white text-xs animate-spin"></i>';
433
- } else if (progress === 95) {
434
- step4.classList.remove('bg-gray-200');
435
- step4.classList.add('bg-primary-500');
436
- step4.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
437
- }
438
-
439
- if (progress >= 100) {
440
- clearInterval(interval);
441
- }
442
- }, 50);
443
-
444
- return interval;
445
- }
446
-
447
- // Fonction pour créer des confettis
448
- function createConfetti() {
449
- const confettiCount = 100;
450
- const colors = ['#0ea5e9', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
451
-
452
- for (let i = 0; i < confettiCount; i++) {
453
- const confetti = document.createElement('div');
454
- confetti.className = 'confetti';
455
- confetti.style.left = `${Math.random() * 100}vw`;
456
- confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
457
- confetti.style.width = `${Math.random() * 10 + 5}px`;
458
- confetti.style.height = `${Math.random() * 10 + 5}px`;
459
- confetti.style.animationDuration = `${Math.random() * 3 + 2}s`;
460
- document.body.appendChild(confetti);
461
-
462
- setTimeout(() => {
463
- confetti.remove();
464
- }, 5000);
465
- }
466
- }
467
 
468
- // Gestion des flashcards
469
- function flipCard(card) {
470
- card.classList.toggle('flipped');
471
- }
472
-
473
- generateBtn.addEventListener('click', function() {
474
- const topic = topicInput.value.trim();
475
- if (!topic) {
476
- // Animation de secouement sur l'input
477
- topicInput.classList.add('border-red-500');
478
- topicInput.classList.add('animate-bounce');
479
- setTimeout(() => {
480
- topicInput.classList.remove('animate-bounce');
481
- topicInput.classList.remove('border-red-500');
482
- }, 1000);
483
-
484
- // Afficher un message d'erreur
485
- const errorMsg = document.createElement('div');
486
- errorMsg.className = 'text-red-500 text-sm mt-1 ml-2';
487
- errorMsg.textContent = 'Veuillez entrer un sujet';
488
- topicInput.parentElement.appendChild(errorMsg);
489
- setTimeout(() => {
490
- errorMsg.remove();
491
- }, 3000);
492
-
493
- return;
494
- }
495
-
496
- const contentType = document.querySelector('input[name="contentType"]:checked').value;
497
 
498
- // Afficher le chargement et cacher les anciens résultats
499
- loadingIndicator.classList.remove('hidden');
500
- flashcardsContainer.classList.add('hidden');
501
- quizContainer.classList.add('hidden');
502
- flashcardsContainer.innerHTML = '';
503
- quizContainer.innerHTML = '';
504
 
505
- // Simuler l'animation de chargement
506
- const loadingInterval = simulateLoading();
507
 
508
- // Envoi de la requête
509
- fetch('/generate', {
510
- method: 'POST',
511
- headers: {
512
- 'Content-Type': 'application/json',
513
- },
514
- body: JSON.stringify({ topic, type: contentType }),
515
- })
516
- .then(response => {
517
- if (!response.ok) {
518
- throw new Error(`Erreur HTTP: ${response.status}`);
519
- }
520
- return response.json();
521
- })
522
- .then(data => {
523
- // Assurons-nous que l'animation montre au moins 2 secondes
524
- setTimeout(() => {
525
- clearInterval(loadingInterval);
526
- progressBar.style.width = '100%';
527
-
528
- setTimeout(() => {
529
- loadingIndicator.classList.add('hidden');
530
 
531
- if (data.error) {
532
- // Afficher une erreur élégante
533
- const errorContainer = document.createElement('div');
534
- errorContainer.className = 'bg-red-50 border-l-4 border-red-500 p-4 rounded-md mt-4';
535
- errorContainer.innerHTML = `
536
- <div class="flex">
537
- <div class="flex-shrink-0">
538
- <i class="fas fa-exclamation-circle text-red-500"></i>
539
- </div>
540
- <div class="ml-3">
541
- <p class="text-sm text-red-700">
542
- ${data.error}
543
- </p>
544
- </div>
545
- </div>
546
- `;
547
- document.querySelector('.max-w-3xl').appendChild(errorContainer);
548
- return;
549
  }
 
 
 
 
 
 
 
550
 
551
- if (contentType === 'flashcards' && data.flashcards) {
552
- flashcardsContainer.classList.remove('hidden');
553
- displayFlashcards(data.flashcards);
554
- // Créer un effet de confettis
555
- createConfetti();
556
- } else if (contentType === 'quiz' && data.quiz) {
557
- quizContainer.classList.remove('hidden');
558
- displayQuiz(data.quiz);
559
- // Créer un effet de confettis
560
- createConfetti();
561
- } else {
562
- // Afficher une erreur élégante
563
- const errorContainer = document.createElement('div');
564
- errorContainer.className = 'bg-red-50 border-l-4 border-red-500 p-4 rounded-md mt-4';
565
- errorContainer.innerHTML = `
566
- <div class="flex">
567
- <div class="flex-shrink-0">
568
- <i class="fas fa-exclamation-circle text-red-500"></i>
569
- </div>
570
- <div class="ml-3">
571
- <p class="text-sm text-red-700">
572
- Aucune donnée reçue ou format incorrect.
573
- </p>
574
- </div>
575
- </div>
576
- `;
577
- document.querySelector('.max-w-3xl').appendChild(errorContainer);
578
- }
579
- }, 500);
580
- }, 2000);
581
- })
582
- .catch(error => {
583
- clearInterval(loadingInterval);
584
  loadingIndicator.classList.add('hidden');
585
- console.error('Erreur lors de la génération:', error);
 
586
 
587
- // Afficher une erreur élégante
588
- const errorContainer = document.createElement('div');
589
- errorContainer.className = 'bg-red-50 border-l-4 border-red-500 p-4 rounded-md mt-4';
590
  errorContainer.innerHTML = `
591
- <div class="flex">
592
- <div class="flex-shrink-0">
593
- <i class="fas fa-exclamation-circle text-red-500"></i>
594
- </div>
595
- <div class="ml-3">
596
- <p class="text-sm text-red-700">
597
- Erreur lors de la génération: ${error.message}.
598
- </p>
599
  </div>
600
  </div>
601
  `;
602
- document.querySelector('.max-w-3xl').appendChild(errorContainer);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
603
  });
604
- });
605
 
606
- function displayFlashcards(flashcards) {
607
- const header = document.createElement('div');
608
- header.className = 'mb-8 text-center';
609
- header.innerHTML = `
610
- <h2 class="text-3xl font-bold text-gray-800 mb-2">Vos Flashcards (${flashcards.length})</h2>
611
- <p >Cliquez sur une carte pour la retourner et voir la réponse.</p>
612
- <p class="text-gray-600">
613
- <i class="far fa-lightbulb mr-1"></i> Astuce : Essayez de répondre mentalement avant de retourner la carte
614
- </p>
615
- <p><div class="flex items-center justify-center space-x-4 mt-6">
616
- </div></p>
 
 
617
 
618
- `;
619
- flashcardsContainer.appendChild(header);
620
-
621
- const flashcardsGrid = document.createElement('div');
622
- flashcardsGrid.className = 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6';
623
- flashcardsContainer.appendChild(flashcardsGrid);
624
-
625
- flashcards.forEach((card, index) => {
626
- const cardElement = document.createElement('div');
627
- cardElement.className = 'flashcard cursor-pointer';
628
- cardElement.onclick = function() { flipCard(this); };
629
- cardElement.innerHTML = `
630
- <div class="flashcard-inner">
631
- <div class="flashcard-front">
632
- <div class="w-full">
633
- <div class="absolute top-2 left-2 text-xs text-gray-400">#${index + 1}</div>
634
- <h3 class="text-lg font-semibold mb-2 text-center">${card.question}</h3>
635
- <div class="text-center mt-4">
636
- <span class="text-xs text-gray-500">Cliquez pour voir la réponse</span>
637
  </div>
638
  </div>
639
- </div>
640
-
641
- <div class="flashcard-back">
642
- <div class="w-full">
643
- <div class="absolute top-2 right-2 text-xs text-white opacity-70">#${index + 1}</div>
644
- <div class="text-center">
645
  <p class="font-medium">${card.answer}</p>
646
  </div>
647
- <div class="absolute bottom-2 right-2">
648
- <span class="text-xs text-white opacity-70">Cliquez pour retourner</span>
649
- </div>
650
  </div>
651
  </div>
652
- </div>
653
- `;
654
- flashcardsGrid.appendChild(cardElement);
655
- });
656
-
657
- // Ajouter des boutons de navigation et de contrôle
658
- const controls = document.createElement('div');
659
- controls.className = 'mt-10 flex flex-col items-center justify-center';
660
- controls.innerHTML = `
661
- <div class="flex items-center space-x-4 mb-6">
662
- <button class="px-4 py-2 bg-primary-100 hover:bg-primary-200 text-primary-700 rounded-md transition duration-300 flex items-center">
663
- <i class="fas fa-redo-alt mr-2"></i> Recommencer
664
- </button>
665
- <button id="newTopicBtn" class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-md transition duration-300 flex items-center">
666
- <i class="fas fa-plus mr-2"></i> Nouveau sujet
667
- </button>
668
- </div>
669
-
670
- `;
671
- flashcardsContainer.appendChild(controls);
672
-
673
- // Ajouter des interactions aux boutons
674
- document.getElementById('printBtn').addEventListener('click', function() {
675
- window.print();
676
- });
677
-
678
- document.getElementById('saveBtn').addEventListener('click', function() {
679
- alert('Flashcards sauvegardées !');
680
- });
681
-
682
- document.getElementById('shareBtn').addEventListener('click', function() {
683
- alert('Lien de partage copié dans le presse-papiers !');
684
- });
685
-
686
- document.getElementById('newTopicBtn').addEventListener('click', function() {
687
- window.scrollTo({
688
- top: 0,
689
- behavior: 'smooth'
690
- });
691
- topicInput.focus();
692
- });
693
- }
694
-
695
- function displayQuiz(quizQuestions) {
696
- const header = document.createElement('div');
697
- header.className = 'mb-8 text-center';
698
- header.innerHTML = `
699
- <h2 class="text-3xl font-bold text-gray-800 mb-2">Votre Quiz (${quizQuestions.length} questions)</h2>
700
- <p class="text-gray-600">Testez vos connaissances en répondant aux questions</p>
701
- <div class="flex items-center justify-center mt-6">
702
- <div class="bg-white px-4 py-2 rounded-full shadow-sm flex items-center">
703
- <span class="text-primary-700 font-medium">Score: </span>
704
- <span id="score" class="ml-1 text-primary-700 font-bold">0</span>
705
- <span class="mx-1 text-gray-400">/</span>
706
- <span class="text-gray-600">${quizQuestions.length}</span>
707
- </div>
708
- </div>
709
- `;
710
- quizContainer.appendChild(header);
711
-
712
- // Créer un conteneur pour les questions
713
- const questionsContainer = document.createElement('div');
714
- questionsContainer.className = 'space-y-8';
715
- quizContainer.appendChild(questionsContainer);
716
-
717
- // Variable pour suivre le score
718
- let currentScore = 0;
719
-
720
- quizQuestions.forEach((question, qIndex) => {
721
- const questionElement = document.createElement('div');
722
- questionElement.className = 'bg-white rounded-xl shadow-md p-6 transition-all duration-300';
723
- questionElement.setAttribute('id', `question-${qIndex}`);
724
-
725
- let optionsHtml = '';
726
- const safeCorrectAnswer = question.correctAnswer.replace(/"/g, '"');
727
-
728
- question.options.forEach((option, oIndex) => {
729
- optionsHtml += `
730
- <div class="quiz-option mb-3" id="option-${qIndex}-${oIndex}">
731
- <input type="radio" id="q${qIndex}-o${oIndex}" name="question-${qIndex}" value="${option}" data-correct="${safeCorrectAnswer}">
732
- <label for="q${qIndex}-o${oIndex}" class="group">
733
- ${option}
734
- <span class="hidden success-icon absolute right-4 text-green-500">
735
- <i class="fas fa-check-circle"></i>
736
- </span>
737
- <span class="hidden error-icon absolute right-4 text-red-500">
738
- <i class="fas fa-times-circle"></i>
739
- </span>
740
- </label>
741
- </div>
742
  `;
 
743
  });
744
 
745
- questionElement.innerHTML = `
746
- <div class="flex items-center justify-between mb-4">
747
- <span class="bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded">Question ${qIndex + 1}/${quizQuestions.length}</span>
748
- <span class="text-gray-400 text-sm">
749
- <i class="far fa-lightbulb"></i>
750
- </span>
751
- </div>
752
- <h3 class="text-xl font-medium text-gray-800 mb-4">${question.question}</h3>
753
- <div class="options mt-5">
754
- ${optionsHtml}
 
755
  </div>
756
- <div class="explanation hidden mt-6 p-4 bg-blue-50 border border-blue-100 rounded-lg" id="explanation-${qIndex}">
757
- <div class="flex items-start">
758
- <div class="flex-shrink-0 mt-0.5">
759
- <i class="fas fa-info-circle text-blue-500"></i>
760
- </div>
761
- <div class="ml-3">
762
- <h4 class="text-sm font-medium text-blue-800">Explication</h4>
763
- <div class="mt-1 text-sm text-blue-700">${question.explanation}</div>
764
- </div>
765
  </div>
766
  </div>
 
 
767
  `;
768
- questionsContainer.appendChild(questionElement);
769
-
770
- // Ajouter des gestionnaires d'événements pour les options
771
- const options = questionElement.querySelectorAll('input[type="radio"]');
772
- options.forEach((option) => {
773
- option.addEventListener('change', function() {
774
- const optionId = this.id;
775
- const [_, qIdx, oIdx] = optionId.match(/q(\d+)-o(\d+)/);
776
- const selected = this.value;
777
- const correct = this.getAttribute('data-correct');
778
- const explanationElement = document.getElementById(`explanation-${qIdx}`);
779
-
780
- // Vérifier la réponse
781
- let delay = 0; // Initialiser le délai
782
- if (selected === correct) {
783
- // Réponse correcte
784
- document.getElementById(`option-${qIdx}-${oIdx}`).classList.add('correct');
785
- currentScore++;
786
- document.getElementById('score').textContent = currentScore;
787
-
788
- // Afficher une animation de succès
789
- const successIcon = this.nextElementSibling.querySelector('.success-icon');
790
- successIcon.classList.remove('hidden');
791
- delay = 2000; // 2 secondes pour une réponse correcte
792
- } else {
793
- // Réponse incorrecte
794
- document.getElementById(`option-${qIdx}-${oIdx}`).classList.add('incorrect');
795
 
796
- // Afficher une animation d'erreur
797
- const errorIcon = this.nextElementSibling.querySelector('.error-icon');
798
- errorIcon.classList.remove('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
799
 
800
- // Mettre en évidence la bonne réponse
801
- options.forEach((opt, idx) => {
802
- if (opt.value === correct) {
803
- document.getElementById(`option-${qIdx}-${idx}`).classList.add('correct');
804
- const successIcon = opt.nextElementSibling.querySelector('.success-icon');
805
- successIcon.classList.remove('hidden');
806
- }
807
- });
808
- delay = 5000; // 5 secondes pour une réponse incorrecte
809
- }
810
 
811
- // Désactiver toutes les autres options
812
- options.forEach((opt) => {
813
- if (opt !== this) {
814
- opt.disabled = true;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
815
  }
816
  });
 
 
 
 
817
 
818
- // Afficher l'explication
819
- explanationElement.classList.remove('hidden');
820
-
821
- // Animer le passage à la question suivante
822
- setTimeout(() => {
823
- const nextQuestion = document.getElementById(`question-${parseInt(qIdx) + 1}`);
824
- if (nextQuestion) {
825
- window.scrollTo({
826
- top: nextQuestion.offsetTop - 20,
827
- behavior: 'smooth'
828
- });
829
- } else {
830
- // C'était la dernière question, afficher un récapitulatif
831
- if (parseInt(qIdx) === quizQuestions.length - 1) {
832
- displayQuizResults(currentScore, quizQuestions.length);
833
- }
834
- }
835
- }, delay);
836
- });
837
- });
838
- });
839
- }
840
-
841
- function displayQuizResults(score, total) {
842
- const percentage = (score / total) * 100;
843
- let resultClass, resultIcon, resultMessage;
844
-
845
- if (percentage >= 80) {
846
- resultClass = 'bg-green-50 border-green-500 text-green-800';
847
- resultIcon = '<i class="fas fa-trophy text-3xl text-yellow-500 mb-3"></i>';
848
- resultMessage = 'Excellent ! Vous maîtrisez ce sujet.';
849
- } else if (percentage >= 60) {
850
- resultClass = 'bg-blue-50 border-blue-500 text-blue-800';
851
- resultIcon = '<i class="fas fa-medal text-3xl text-blue-500 mb-3"></i>';
852
- resultMessage = 'Bon travail ! Continuez vos efforts.';
853
- } else {
854
- resultClass = 'bg-red-50 border-red-500 text-red-800';
855
- resultIcon = '<i class="fas fa-book-open text-3xl text-red-500 mb-3"></i>';
856
- resultMessage = 'Continuez à étudier pour améliorer vos connaissances.';
857
  }
858
 
859
- const resultsElement = document.createElement('div');
860
- resultsElement.className = `mt-10 p-6 rounded-xl shadow-lg border-l-4 ${resultClass} text-center`;
861
- resultsElement.innerHTML = `
862
- <div class="flex flex-col items-center">
863
- ${resultIcon}
864
- <h3 class="text-2xl font-bold mb-2">Résultat final: ${score}/${total}</h3>
865
- <p class="mb-4">${resultMessage}</p>
866
- <div class="w-full max-w-xs bg-gray-200 rounded-full h-4 mb-4">
867
- <div class="h-4 rounded-full ${percentage >= 80 ? 'bg-green-500' : percentage >= 60 ? 'bg-blue-500' : 'bg-red-500'}" style="width: ${percentage}%"></div>
868
- </div>
869
- <div class="flex space-x-4 mt-6">
870
- <button id="retryQuizBtn" class="btn-secondary text-sm">
871
- <i class="fas fa-redo mr-2"></i> Réessayer
872
- </button>
873
- <button id="newQuizBtn" class="btn-primary text-sm">
874
- <i class="fas fa-plus mr-2"></i> Nouveau quiz
875
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
876
  </div>
877
- </div>
878
- `;
879
- quizContainer.appendChild(resultsElement);
880
-
881
- // Animation de confettis si le score est bon
882
- if (percentage >= 70) {
883
- createConfetti();
884
  }
885
-
886
- // Ajouter des interactions aux boutons
887
- document.getElementById('retryQuizBtn').addEventListener('click', function() {
888
- const radios = document.querySelectorAll('input[type="radio"]');
889
- radios.forEach(radio => {
890
- radio.checked = false;
891
- radio.disabled = false;
892
- });
893
-
894
- const options = document.querySelectorAll('.quiz-option');
895
- options.forEach(option => {
896
- option.classList.remove('correct', 'incorrect');
897
- });
898
-
899
- const explanations = document.querySelectorAll('.explanation');
900
- explanations.forEach(exp => {
901
- exp.classList.add('hidden');
902
- });
903
-
904
- const icons = document.querySelectorAll('.success-icon, .error-icon');
905
- icons.forEach(icon => {
906
- icon.classList.add('hidden');
907
- });
908
-
909
- resultsElement.remove();
910
- document.getElementById('score').textContent = '0';
911
-
912
- window.scrollTo({
913
- top: quizContainer.offsetTop,
914
- behavior: 'smooth'
915
- });
916
- });
917
-
918
- document.getElementById('newQuizBtn').addEventListener('click', function() {
919
- window.scrollTo({
920
- top: 0,
921
- behavior: 'smooth'
922
- });
923
  topicInput.focus();
924
- });
925
- }
926
-
927
- // Focus sur le champ de saisie au chargement
928
- window.addEventListener('load', () => {
929
- topicInput.focus();
930
  });
931
  </script>
932
-
933
  </body>
934
- </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>Générateur de Flashcards et Quiz | Apprentissage Amélioré</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
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
 
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8fafc; /* Fallback */
15
+ background-image: linear-gradient(to bottom, #f0f9ff, #ffffff);
16
+ scroll-behavior: smooth;
17
+ }
18
+
19
+ /* --- Styles Flashcards --- */
20
+ .flashcard {
21
+ perspective: 1000px;
22
+ height: 240px;
23
+ cursor: pointer;
24
+ }
25
+ .flashcard-inner {
26
+ position: relative;
27
+ width: 100%;
28
+ height: 100%;
29
+ transition: transform 0.7s;
30
+ transform-style: preserve-3d;
31
+ }
32
+ .flashcard.flipped .flashcard-inner {
33
+ transform: rotateY(180deg);
34
+ }
35
+ .flashcard-front, .flashcard-back {
36
+ position: absolute;
37
+ width: 100%;
38
+ height: 100%;
39
+ -webkit-backface-visibility: hidden;
40
+ backface-visibility: hidden;
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: center;
44
+ border-radius: 0.75rem;
45
+ padding: 1.5rem;
46
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
47
+ text-align: center;
48
+ }
49
+ .flashcard-front {
50
+ background-color: #ffffff;
51
+ border: 1px solid #e2e8f0;
52
+ color: #1f2937;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  }
54
+ .flashcard-back {
55
+ background-color: #0ea5e9;
56
+ color: white;
57
+ transform: rotateY(180deg);
58
  }
59
+
60
+ /* --- Styles Quiz --- */
61
+ .quiz-option label {
62
+ transition: all 0.3s ease;
63
+ border: 2px solid #e5e7eb;
64
+ padding: 1rem 1.5rem;
65
+ border-radius: 0.5rem;
66
+ cursor: pointer;
67
+ display: block;
68
+ }
69
+ .quiz-option input[type="radio"]:checked + label {
70
+ border-color: #0ea5e9;
71
+ background-color: #e0f2fe;
72
+ box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
73
  }
74
+ .quiz-option.correct label {
75
+ border-color: #10b981;
76
+ background-color: #d1fae5;
 
 
 
 
 
 
 
 
 
 
 
 
77
  }
78
+ .quiz-option.incorrect label {
79
+ border-color: #ef4444;
80
+ background-color: #fee2e2;
81
+ }
82
+
83
+ /* --- Animations --- */
84
+ .shake {
85
+ animation: shake 0.5s ease-in-out;
86
+ }
87
+ @keyframes shake {
88
+ 0%, 100% { transform: translateX(0); }
89
+ 25% { transform: translateX(-5px); }
90
+ 75% { transform: translateX(5px); }
91
+ }
92
+
93
+ .confetti {
94
+ position: fixed;
95
+ width: 10px;
96
+ height: 10px;
97
+ background-color: #f00;
98
  opacity: 0;
99
+ animation: confetti-fall 3s linear forwards;
100
+ }
101
+ @keyframes confetti-fall {
102
+ 0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
103
+ 100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
104
  }
 
 
 
 
 
 
 
 
 
 
105
 
106
+ /* --- Classes Utilitaires Tailwind via @apply --- */
107
+ .btn-primary {
108
+ @apply bg-sky-600 text-white px-6 py-3 rounded-lg shadow-md hover:bg-sky-700 transition duration-300 ease-in-out transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-opacity-50 flex items-center justify-center disabled:bg-sky-300 disabled:cursor-not-allowed;
109
+ }
110
+ .btn-secondary {
111
+ @apply bg-white text-sky-600 border border-sky-600 px-6 py-3 rounded-lg shadow-md hover:bg-sky-50 transition duration-300 ease-in-out transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-opacity-50 flex items-center justify-center;
112
+ }
113
+ </style>
114
  </head>
115
+ <body class="text-slate-800">
116
+ <div class="min-h-screen">
117
+ <header class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm">
118
+ <div class="container mx-auto px-4 py-4">
119
  <div class="flex items-center justify-between">
120
+ <a href="#" class="text-2xl font-bold text-sky-700 flex items-center">
121
+ <i class="fas fa-brain mr-3 text-sky-500"></i>
122
+ <span>Mariam Quizz</span>
123
  </a>
 
 
 
 
 
 
 
 
124
  </div>
125
  </div>
126
  </header>
127
 
128
+ <main class="container mx-auto px-4 py-8 md:py-12">
129
+ <div id="configSection" class="max-w-3xl mx-auto">
130
+ <!-- Introduction -->
131
+ <div class="text-center mb-10">
132
+ <h1 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-4">Apprenez plus vite, retenez plus longtemps.</h1>
133
+ <p class="text-lg text-slate-600">Transformez n'importe quel sujet en flashcards ou en quiz interactifs en quelques secondes.</p>
134
+ </div>
 
 
 
 
 
135
 
136
+ <!-- Section de configuration -->
137
+ <div class="bg-white rounded-xl shadow-lg p-6 md:p-8">
138
+ <div class="relative z-10">
139
+ <h2 class="text-2xl font-semibold text-slate-800 mb-6 text-center md:text-left">1. De quoi voulez-vous parler ?</h2>
 
 
 
 
 
140
 
141
+ <div class="space-y-6">
142
+ <div class="relative">
143
+ <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
144
+ <input type="text" id="topic" class="w-full px-4 py-3 border-2 border-slate-300 rounded-lg focus:border-sky-500 focus:ring-sky-200 focus:ring transition-colors duration-300 pl-12" placeholder="Ex: Les capitales du monde, la photosynthèse...">
145
+ <div id="topicError" class="text-red-500 text-sm mt-1 ml-2 hidden">Veuillez entrer un sujet.</div>
146
+ </div>
147
+
148
+ <div>
149
+ <h2 class="text-2xl font-semibold text-slate-800 mb-4 text-center md:text-left">2. Comment voulez-vous apprendre ?</h2>
150
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
151
+ <div class="relative">
152
+ <input type="radio" id="typeFlashcards" name="contentType" value="flashcards" checked class="peer absolute opacity-0">
153
+ <label for="typeFlashcards" class="flex flex-col items-center justify-center p-5 border-2 border-slate-200 rounded-lg cursor-pointer transition-all duration-300 hover:shadow-md peer-checked:border-sky-500 peer-checked:bg-sky-50 peer-checked:shadow-lg">
154
+ <div class="w-16 h-16 rounded-full bg-sky-100 flex items-center justify-center mb-3">
155
+ <i class="fas fa-clone text-2xl text-sky-600"></i>
156
+ </div>
157
+ <h3 class="font-semibold text-slate-800">Flashcards</h3>
158
+ <p class="text-sm text-slate-600 text-center mt-1">Idéal pour mémoriser des faits et définitions.</p>
159
+ </label>
160
+ </div>
161
+
162
+ <div class="relative">
163
+ <input type="radio" id="typeQuiz" name="contentType" value="quiz" class="peer absolute opacity-0">
164
+ <label for="typeQuiz" class="flex flex-col items-center justify-center p-5 border-2 border-slate-200 rounded-lg cursor-pointer transition-all duration-300 hover:shadow-md peer-checked:border-sky-500 peer-checked:bg-sky-50 peer-checked:shadow-lg">
165
+ <div class="w-16 h-16 rounded-full bg-sky-100 flex items-center justify-center mb-3">
166
+ <i class="fas fa-question-circle text-2xl text-sky-600"></i>
167
+ </div>
168
+ <h3 class="font-semibold text-slate-800">Quiz</h3>
169
+ <p class="text-sm text-slate-600 text-center mt-1">Parfait pour tester et valider vos connaissances.</p>
170
+ </label>
171
+ </div>
172
  </div>
173
  </div>
174
+
175
+ <div class="flex flex-col sm:flex-row items-center justify-between pt-4 gap-4">
176
+ <div class="text-sm text-slate-500 italic">
177
+ <i class="fas fa-info-circle mr-1"></i> La génération peut prendre jusqu'à 1 minute.
178
+ </div>
179
+ <button id="generateBtn" class="btn-primary w-full sm:w-auto">
180
+ <span class="mr-2">Lancer la magie</span>
181
+ <i class="fas fa-wand-magic-sparkles"></i>
182
+ </button>
183
  </div>
 
 
 
 
184
  </div>
185
  </div>
186
  </div>
187
  </div>
188
 
189
+ <!-- Indicateur de chargement amélioré -->
190
+ <div id="loading" class="hidden max-w-3xl mx-auto">
191
  <div class="bg-white rounded-xl shadow-lg p-8 text-center">
192
  <div class="flex flex-col items-center justify-center space-y-4">
193
  <div class="relative w-24 h-24">
194
+ <div class="absolute inset-0 border-4 border-sky-100 rounded-full"></div>
195
+ <div class="absolute inset-0 border-4 border-t-sky-500 rounded-full animate-spin"></div>
196
  <div class="absolute inset-0 flex items-center justify-center">
197
+ <i class="fas fa-lightbulb text-3xl text-sky-500 animate-pulse"></i>
198
  </div>
199
  </div>
200
+ <h3 class="text-2xl font-semibold text-slate-800">Création en cours...</h3>
201
+ <p class="text-slate-600">Notre IA prépare votre contenu d'apprentissage personnalisé.</p>
202
 
203
+ <div class="w-full max-w-md mt-6 pt-4 border-t border-slate-200">
204
+ <div id="loadingSteps" class="text-left space-y-3">
205
+ <div id="step1" class="flex items-center text-slate-500 transition-all duration-500">
206
+ <div class="w-6 h-6 rounded-full flex items-center justify-center mr-3 bg-sky-500 text-white"><i class="fas fa-check text-xs"></i></div>
207
+ <span class="font-medium">Analyse du sujet</span>
 
 
 
 
 
208
  </div>
209
+ <div id="step2" class="flex items-center text-slate-500 transition-all duration-500 opacity-50">
210
+ <div class="w-6 h-6 rounded-full flex items-center justify-center mr-3 bg-slate-300 text-white"><i class="fas fa-spinner fa-spin text-xs"></i></div>
211
+ <span>Recherche des informations clés</span>
 
 
212
  </div>
213
+ <div id="step3" class="flex items-center text-slate-500 transition-all duration-500 opacity-50">
214
+ <div class="w-6 h-6 rounded-full flex items-center justify-center mr-3 bg-slate-300 text-white"><i class="fas fa-hourglass-half text-xs"></i></div>
215
+ <span>Génération des questions/réponses</span>
 
 
216
  </div>
217
+ <div id="step4" class="flex items-center text-slate-500 transition-all duration-500 opacity-50">
218
+ <div class="w-6 h-6 rounded-full flex items-center justify-center mr-3 bg-slate-300 text-white"><i class="fas fa-paper-plane text-xs"></i></div>
219
+ <span>Finalisation</span>
 
 
220
  </div>
221
  </div>
222
  </div>
 
224
  </div>
225
  </div>
226
 
227
+ <!-- Conteneur pour les résultats (Flashcards ou Quiz) -->
228
+ <div id="resultsContainer" class="mt-12 max-w-4xl mx-auto hidden">
229
+ <!-- Le contenu sera injecté ici -->
230
  </div>
231
 
232
+ <!-- Conteneur pour les erreurs -->
233
+ <div id="errorContainer" class="mt-8 max-w-3xl mx-auto"></div>
 
 
 
 
234
 
235
+ </main>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
236
  </div>
 
 
 
 
237
 
238
  <script>
239
+ document.addEventListener('DOMContentLoaded', () => {
240
+ const generateBtn = document.getElementById('generateBtn');
241
+ const configSection = document.getElementById('configSection');
242
+ const loadingIndicator = document.getElementById('loading');
243
+ const resultsContainer = document.getElementById('resultsContainer');
244
+ const errorContainer = document.getElementById('errorContainer');
245
+ const topicInput = document.getElementById('topic');
246
+ const topicError = document.getElementById('topicError');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
247
 
248
+ // Focus sur le champ de saisie au chargement
249
+ topicInput.focus();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
250
 
251
+ const steps = [
252
+ document.getElementById('step2'),
253
+ document.getElementById('step3'),
254
+ document.getElementById('step4')
255
+ ];
 
256
 
257
+ let loadingInterval;
 
258
 
259
+ function simulateLoading() {
260
+ let currentStep = 0;
261
+ const stepDurations = [2500, 3000, 1500]; // Durées en ms pour chaque étape
262
+
263
+ function nextStep() {
264
+ if (currentStep < steps.length) {
265
+ const stepEl = steps[currentStep];
266
+ stepEl.classList.remove('opacity-50');
267
+ stepEl.querySelector('div').classList.remove('bg-slate-300');
268
+ stepEl.querySelector('div').classList.add('bg-sky-500');
269
+ stepEl.querySelector('i').className = 'fas fa-check text-xs';
 
 
 
 
 
 
 
 
 
 
 
270
 
271
+ if(currentStep + 1 < steps.length) {
272
+ const nextStepEl = steps[currentStep + 1];
273
+ nextStepEl.querySelector('div').querySelector('i').className = 'fas fa-spinner fa-spin text-xs';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
274
  }
275
+
276
+ currentStep++;
277
+ loadingInterval = setTimeout(nextStep, stepDurations[currentStep]);
278
+ }
279
+ }
280
+ loadingInterval = setTimeout(nextStep, stepDurations[0]);
281
+ }
282
 
283
+ function createConfetti() {
284
+ const confettiCount = 100;
285
+ const colors = ['#0ea5e9', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
286
+ const container = document.body;
287
+ for (let i = 0; i < confettiCount; i++) {
288
+ const confetti = document.createElement('div');
289
+ confetti.className = 'confetti';
290
+ confetti.style.left = `${Math.random() * 100}vw`;
291
+ confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
292
+ confetti.style.width = `${Math.random() * 8 + 5}px`;
293
+ confetti.style.height = confetti.style.width;
294
+ confetti.style.animationDuration = `${Math.random() * 3 + 2}s`;
295
+ confetti.style.animationDelay = `${Math.random() * 0.2}s`;
296
+ container.appendChild(confetti);
297
+ setTimeout(() => confetti.remove(), 5000);
298
+ }
299
+ }
300
+
301
+ function flipCard(card) {
302
+ card.classList.toggle('flipped');
303
+ }
304
+
305
+ function showError(message) {
 
 
 
 
 
 
 
 
 
 
306
  loadingIndicator.classList.add('hidden');
307
+ configSection.classList.remove('hidden');
308
+ generateBtn.disabled = false;
309
 
 
 
 
310
  errorContainer.innerHTML = `
311
+ <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-md">
312
+ <div class="flex">
313
+ <div class="flex-shrink-0">
314
+ <i class="fas fa-exclamation-circle text-red-500 mt-0.5"></i>
315
+ </div>
316
+ <div class="ml-3">
317
+ <p class="text-sm text-red-700">${message}</p>
318
+ </div>
319
  </div>
320
  </div>
321
  `;
322
+ }
323
+
324
+ generateBtn.addEventListener('click', function() {
325
+ const topic = topicInput.value.trim();
326
+ if (!topic) {
327
+ topicInput.classList.add('shake', 'border-red-500');
328
+ topicError.classList.remove('hidden');
329
+ setTimeout(() => {
330
+ topicInput.classList.remove('shake', 'border-red-500');
331
+ topicError.classList.add('hidden');
332
+ }, 2000);
333
+ return;
334
+ }
335
+
336
+ const contentType = document.querySelector('input[name="contentType"]:checked').value;
337
+
338
+ generateBtn.disabled = true;
339
+ configSection.classList.add('hidden');
340
+ loadingIndicator.classList.remove('hidden');
341
+ resultsContainer.innerHTML = '';
342
+ resultsContainer.classList.add('hidden');
343
+ errorContainer.innerHTML = '';
344
+
345
+ simulateLoading();
346
+
347
+ // --- SIMULATION DE L'APPEL API ---
348
+ // Remplacez cette partie par votre vrai appel fetch
349
+ // Je simule une attente de 7 secondes pour que l'animation soit visible
350
+ setTimeout(() => {
351
+ clearTimeout(loadingInterval);
352
+ const isSuccess = Math.random() > 0.1; // 90% de chance de succès
353
+
354
+ if (!isSuccess) {
355
+ showError("Désolé, une erreur est survenue lors de la communication avec le serveur. Veuillez réessayer.");
356
+ return;
357
+ }
358
+
359
+ // Données de simulation
360
+ const mockData = {
361
+ flashcards: Array.from({ length: 9 }, (_, i) => ({
362
+ question: `Quelle est la question numéro ${i + 1} sur "${topic}" ?`,
363
+ answer: `Ceci est la réponse détaillée pour la question ${i + 1}.`
364
+ })),
365
+ quiz: Array.from({ length: 5 }, (_, i) => ({
366
+ question: `Question de quiz n°${i + 1} sur "${topic}" ?`,
367
+ options: ['Option A', 'Option B (correcte)', 'Option C', 'Option D'],
368
+ correctAnswer: 'Option B (correcte)',
369
+ explanation: `L'option B est correcte car elle représente la meilleure réponse possible pour la question ${i + 1}.`
370
+ }))
371
+ };
372
+
373
+ loadingIndicator.classList.add('hidden');
374
+ resultsContainer.classList.remove('hidden');
375
+ createConfetti();
376
+
377
+ if (contentType === 'flashcards') {
378
+ displayFlashcards(mockData.flashcards, topic);
379
+ } else {
380
+ displayQuiz(mockData.quiz, topic);
381
+ }
382
+ }, 7000); // 2500 + 3000 + 1500 = 7000ms
383
  });
 
384
 
385
+ function displayFlashcards(flashcards, topic) {
386
+ resultsContainer.innerHTML = `
387
+ <div class="text-center mb-8">
388
+ <h2 class="text-3xl font-bold text-slate-800">Flashcards sur : <span class="text-sky-600">${topic}</span></h2>
389
+ <p class="text-slate-600 mt-2">Cliquez sur une carte pour voir la réponse. Répétez jusqu'à maîtriser le sujet !</p>
390
+ </div>
391
+ <div id="flashcardsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
392
+ <div class="mt-12 flex justify-center">
393
+ <button id="newTopicBtn" class="btn-primary">
394
+ <i class="fas fa-plus mr-2"></i> Créer un nouveau jeu
395
+ </button>
396
+ </div>
397
+ `;
398
 
399
+ const flashcardsGrid = document.getElementById('flashcardsGrid');
400
+ flashcards.forEach((card, index) => {
401
+ const cardElement = document.createElement('div');
402
+ cardElement.className = 'flashcard';
403
+ cardElement.onclick = () => flipCard(cardElement);
404
+ cardElement.innerHTML = `
405
+ <div class="flashcard-inner">
406
+ <div class="flashcard-front">
407
+ <div>
408
+ <div class="absolute top-3 left-3 text-xs font-bold text-slate-400">#${index + 1}</div>
409
+ <h3 class="text-lg font-semibold">${card.question}</h3>
 
 
 
 
 
 
 
 
410
  </div>
411
  </div>
412
+ <div class="flashcard-back">
413
+ <div>
414
+ <div class="absolute top-3 left-3 text-xs font-bold text-white/70">#${index + 1}</div>
 
 
 
415
  <p class="font-medium">${card.answer}</p>
416
  </div>
 
 
 
417
  </div>
418
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
419
  `;
420
+ flashcardsGrid.appendChild(cardElement);
421
  });
422
 
423
+ document.getElementById('newTopicBtn').addEventListener('click', backToTop);
424
+ }
425
+
426
+ function displayQuiz(quizQuestions, topic) {
427
+ let currentScore = 0;
428
+ let answeredQuestions = 0;
429
+
430
+ resultsContainer.innerHTML = `
431
+ <div class="text-center mb-8">
432
+ <h2 class="text-3xl font-bold text-slate-800">Quiz sur : <span class="text-sky-600">${topic}</span></h2>
433
+ <p class="text-slate-600 mt-2">Testez vos connaissances et apprenez de vos erreurs.</p>
434
  </div>
435
+ <div class="sticky top-20 z-40 mb-8 flex justify-center">
436
+ <div class="bg-white/80 backdrop-blur-sm px-6 py-3 rounded-full shadow-lg flex items-center">
437
+ <span class="text-slate-700 font-medium">Score: </span>
438
+ <span id="score" class="ml-2 text-sky-700 font-bold text-lg">0 / ${quizQuestions.length}</span>
 
 
 
 
 
439
  </div>
440
  </div>
441
+ <div id="questionsContainer" class="space-y-8"></div>
442
+ <div id="quizResultContainer" class="mt-12"></div>
443
  `;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
444
 
445
+ const questionsContainer = document.getElementById('questionsContainer');
446
+ quizQuestions.forEach((q, qIndex) => {
447
+ const questionElement = document.createElement('div');
448
+ questionElement.className = 'bg-white rounded-xl shadow-md p-6 transition-all duration-300';
449
+ questionElement.id = `question-${qIndex}`;
450
+
451
+ const optionsHtml = q.options.map((option, oIndex) => `
452
+ <div class="quiz-option">
453
+ <input type="radio" id="q${qIndex}-o${oIndex}" name="question-${qIndex}" value="${option}" class="absolute opacity-0">
454
+ <label for="q${qIndex}-o${oIndex}">
455
+ ${option}
456
+ </label>
457
+ </div>
458
+ `).join('');
459
+
460
+ questionElement.innerHTML = `
461
+ <p class="text-sm font-semibold text-sky-600 mb-2">Question ${qIndex + 1} sur ${quizQuestions.length}</p>
462
+ <h3 class="text-xl font-medium text-slate-800">${q.question}</h3>
463
+ <div class="mt-4 space-y-3">${optionsHtml}</div>
464
+ <div class="explanation hidden mt-4 p-4 bg-sky-50 border border-sky-200 rounded-lg">
465
+ <p class="font-semibold text-sky-800">💡 Explication</p>
466
+ <p class="mt-1 text-sky-700 text-sm">${q.explanation}</p>
467
+ </div>
468
+ `;
469
+ questionsContainer.appendChild(questionElement);
470
 
471
+ const radios = questionElement.querySelectorAll('input[type="radio"]');
472
+ radios.forEach(radio => {
473
+ radio.addEventListener('change', (e) => handleAnswer(e, q, qIndex));
474
+ });
475
+ });
 
 
 
 
 
476
 
477
+ function handleAnswer(event, questionData, qIndex) {
478
+ answeredQuestions++;
479
+ const selectedValue = event.target.value;
480
+ const parentDiv = event.target.parentElement;
481
+
482
+ // Désactiver tous les inputs pour cette question
483
+ const allRadios = document.querySelectorAll(`input[name="question-${qIndex}"]`);
484
+ allRadios.forEach(r => r.disabled = true);
485
+
486
+ if (selectedValue === questionData.correctAnswer) {
487
+ currentScore++;
488
+ parentDiv.classList.add('correct');
489
+ } else {
490
+ parentDiv.classList.add('incorrect');
491
+ // Montrer la bonne réponse
492
+ allRadios.forEach(r => {
493
+ if (r.value === questionData.correctAnswer) {
494
+ r.parentElement.classList.add('correct');
495
  }
496
  });
497
+ }
498
+
499
+ document.getElementById('score').textContent = `${currentScore} / ${quizQuestions.length}`;
500
+ parentDiv.closest('.bg-white').querySelector('.explanation').classList.remove('hidden');
501
 
502
+ // Scroll à la prochaine question ou aux résultats
503
+ setTimeout(() => {
504
+ if (qIndex < quizQuestions.length - 1) {
505
+ document.getElementById(`question-${qIndex + 1}`).scrollIntoView({ behavior: 'smooth', block: 'center' });
506
+ } else if (answeredQuestions === quizQuestions.length) {
507
+ displayQuizResults(currentScore, quizQuestions.length);
508
+ }
509
+ }, 2000);
510
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
511
  }
512
 
513
+ function displayQuizResults(score, total) {
514
+ const percentage = Math.round((score / total) * 100);
515
+ let resultMessage, resultClass, resultIcon;
516
+
517
+ if (percentage >= 80) {
518
+ resultMessage = 'Excellent travail ! Vous êtes un expert !';
519
+ resultClass = 'bg-green-500';
520
+ resultIcon = 'fas fa-trophy';
521
+ createConfetti();
522
+ } else if (percentage >= 50) {
523
+ resultMessage = 'Pas mal ! Continuez comme ça.';
524
+ resultClass = 'bg-sky-500';
525
+ resultIcon = 'fas fa-medal';
526
+ } else {
527
+ resultMessage = 'Continuez à étudier, vous allez y arriver !';
528
+ resultClass = 'bg-amber-500';
529
+ resultIcon = 'fas fa-book-open';
530
+ }
531
+
532
+ const resultsElement = document.getElementById('quizResultContainer');
533
+ resultsElement.innerHTML = `
534
+ <div class="bg-white rounded-xl shadow-lg p-8 text-center">
535
+ <i class="${resultIcon} text-5xl text-yellow-400 mb-4"></i>
536
+ <h3 class="text-2xl font-bold">Quiz Terminé !</h3>
537
+ <p class="text-slate-600 mt-2 mb-4">${resultMessage}</p>
538
+ <p class="text-4xl font-bold my-4">${score} / ${total}</p>
539
+ <div class="w-full bg-slate-200 rounded-full h-4">
540
+ <div class="${resultClass} h-4 rounded-full" style="width: ${percentage}%"></div>
541
+ </div>
542
+ <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
543
+ <button id="newQuizBtn" class="btn-primary">
544
+ <i class="fas fa-plus mr-2"></i> Nouveau Quiz
545
+ </button>
546
+ </div>
547
  </div>
548
+ `;
549
+ resultsElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
550
+ document.getElementById('newQuizBtn').addEventListener('click', backToTop);
 
 
 
 
551
  }
552
+
553
+ function backToTop() {
554
+ resultsContainer.classList.add('hidden');
555
+ configSection.classList.remove('hidden');
556
+ generateBtn.disabled = false;
557
+ topicInput.value = '';
558
+ window.scrollTo(0, 0);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
559
  topicInput.focus();
560
+ }
 
 
 
 
 
561
  });
562
  </script>
 
563
  </body>
564
+ </html>