Hugging Face's logo

Spaces:
Docfile
/
Attaque2
Sleeping

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

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +568 -495
templates/index.html CHANGED
@@ -3,562 +3,635 @@
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>
223
- </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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>StudyGen - Générateur de Flashcards & Quiz</title>
7
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
 
8
  <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ :root {
16
+ --primary-blue: #2563eb;
17
+ --light-blue: #3b82f6;
18
+ --extra-light-blue: #eff6ff;
19
+ --white: #ffffff;
20
+ --gray-50: #f9fafb;
21
+ --gray-100: #f3f4f6;
22
+ --gray-300: #d1d5db;
23
+ --gray-600: #4b5563;
24
+ --gray-800: #1f2937;
25
+ --success: #10b981;
26
+ --error: #ef4444;
27
+ --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
28
+ --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
29
+ }
30
 
31
  body {
32
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
33
+ background: linear-gradient(135deg, var(--extra-light-blue) 0%, var(--white) 50%, var(--gray-50) 100%);
34
+ min-height: 100vh;
35
+ padding: 0;
36
+ color: var(--gray-800);
37
+ line-height: 1.6;
38
  }
39
 
40
+ .container {
41
+ max-width: 100%;
42
+ padding: 20px 16px;
43
+ min-height: 100vh;
 
44
  }
45
+
46
+ .header {
47
+ text-align: center;
48
+ margin-bottom: 32px;
49
+ padding: 20px 0;
 
50
  }
51
+
52
+ .header h1 {
53
+ font-size: 2.5rem;
54
+ font-weight: 800;
55
+ background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
56
+ -webkit-background-clip: text;
57
+ -webkit-text-fill-color: transparent;
58
+ background-clip: text;
59
+ margin-bottom: 8px;
60
  }
61
+
62
+ .header p {
63
+ color: var(--gray-600);
64
+ font-size: 1.1rem;
65
+ font-weight: 500;
66
+ }
67
+
68
+ .main-card {
69
+ background: var(--white);
70
+ border-radius: 24px;
71
+ padding: 24px;
72
+ box-shadow: var(--shadow);
73
+ backdrop-filter: blur(10px);
74
+ border: 1px solid rgba(255, 255, 255, 0.2);
75
+ margin-bottom: 20px;
76
+ transform: translateY(0);
77
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
78
+ }
79
+
80
+ .main-card:hover {
81
+ transform: translateY(-2px);
82
+ box-shadow: var(--shadow-lg);
83
+ }
84
+
85
+ .form-group {
86
+ margin-bottom: 24px;
87
+ }
88
+
89
+ label {
90
+ display: block;
91
+ margin-bottom: 8px;
92
+ font-weight: 600;
93
+ color: var(--gray-800);
94
+ font-size: 0.95rem;
95
+ }
96
+
97
+ input[type="text"] {
98
  width: 100%;
99
+ padding: 16px 20px;
100
+ border: 2px solid var(--gray-100);
101
+ border-radius: 16px;
102
+ font-size: 1rem;
103
+ transition: all 0.3s ease;
104
+ background: var(--gray-50);
105
+ color: var(--gray-800);
106
+ outline: none;
107
+ }
108
+
109
+ input[type="text"]:focus {
110
+ border-color: var(--primary-blue);
111
+ background: var(--white);
112
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
113
+ transform: translateY(-1px);
114
+ }
115
+
116
+ .type-selector {
117
+ display: flex;
118
+ gap: 12px;
119
+ margin-bottom: 24px;
120
+ }
121
+
122
+ .type-option {
123
+ flex: 1;
124
+ position: relative;
125
+ }
126
+
127
+ .type-option input[type="radio"] {
128
+ display: none;
129
+ }
130
+
131
+ .type-option label {
132
  display: flex;
133
+ flex-direction: column;
134
  align-items: center;
135
+ padding: 20px 16px;
136
+ border: 2px solid var(--gray-200);
137
+ border-radius: 16px;
138
+ cursor: pointer;
139
+ transition: all 0.3s ease;
140
+ background: var(--white);
141
  text-align: center;
142
+ margin-bottom: 0;
143
  }
144
+
145
+ .type-option label:hover {
146
+ border-color: var(--light-blue);
147
+ transform: translateY(-2px);
148
  }
149
+
150
+ .type-option input[type="radio"]:checked + label {
151
+ border-color: var(--primary-blue);
152
+ background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
153
+ color: var(--white);
154
+ box-shadow: var(--shadow);
155
  }
156
+
157
+ .type-option i {
158
+ font-size: 2rem;
159
+ margin-bottom: 8px;
160
+ transition: transform 0.3s ease;
161
+ }
162
+
163
+ .type-option input[type="radio"]:checked + label i {
164
+ transform: scale(1.1);
165
+ }
166
+
167
+ .type-option span {
168
+ font-weight: 600;
169
+ font-size: 0.9rem;
170
+ }
171
+
172
+ .generate-btn {
173
+ width: 100%;
174
+ background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
175
+ color: var(--white);
176
+ border: none;
177
+ padding: 18px 24px;
178
+ border-radius: 16px;
179
+ font-size: 1.1rem;
180
+ font-weight: 600;
181
  cursor: pointer;
182
+ transition: all 0.3s ease;
183
+ position: relative;
184
+ overflow: hidden;
185
  }
186
+
187
+ .generate-btn:hover {
188
+ transform: translateY(-2px);
189
+ box-shadow: var(--shadow-lg);
190
  }
191
+
192
+ .generate-btn:active {
193
+ transform: translateY(0);
194
  }
195
+
196
+ .generate-btn:disabled {
197
+ opacity: 0.7;
198
+ cursor: not-allowed;
199
+ transform: none;
200
  }
201
+
202
+ .generate-btn .btn-text {
203
+ transition: opacity 0.3s ease;
 
204
  }
205
+
206
+ .generate-btn .spinner {
207
+ position: absolute;
208
+ top: 50%;
209
+ left: 50%;
210
+ transform: translate(-50%, -50%);
211
+ opacity: 0;
212
+ transition: opacity 0.3s ease;
213
  }
214
+
215
+ .generate-btn.loading .btn-text {
 
 
 
 
216
  opacity: 0;
 
217
  }
218
+
219
+ .generate-btn.loading .spinner {
220
+ opacity: 1;
221
  }
222
 
223
+ .spinner {
224
+ width: 24px;
225
+ height: 24px;
226
+ border: 3px solid rgba(255, 255, 255, 0.3);
227
+ border-radius: 50%;
228
+ border-top-color: var(--white);
229
+ animation: spin 1s ease-in-out infinite;
230
  }
231
+
232
+ @keyframes spin {
233
+ to { transform: translate(-50%, -50%) rotate(360deg); }
234
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
235
 
236
+ .results-container {
237
+ margin-top: 24px;
238
+ }
 
239
 
240
+ .flashcard, .quiz-question {
241
+ background: var(--white);
242
+ border-radius: 20px;
243
+ padding: 24px;
244
+ margin-bottom: 16px;
245
+ box-shadow: var(--shadow);
246
+ border-left: 4px solid var(--primary-blue);
247
+ transition: transform 0.3s ease;
248
+ }
249
 
250
+ .flashcard:hover, .quiz-question:hover {
251
+ transform: translateX(4px);
252
+ }
253
 
254
+ .flashcard h3 {
255
+ color: var(--primary-blue);
256
+ margin-bottom: 12px;
257
+ font-size: 1.1rem;
258
+ font-weight: 600;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
259
  }
260
 
261
+ .flashcard .answer {
262
+ color: var(--gray-600);
263
+ padding: 16px;
264
+ background: var(--gray-50);
265
+ border-radius: 12px;
266
+ margin-top: 12px;
267
+ border: 1px solid var(--gray-100);
268
  }
269
+
270
+ .quiz-options {
271
+ margin: 16px 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
272
  }
273
 
274
+ .quiz-option {
275
+ padding: 12px 16px;
276
+ margin: 8px 0;
277
+ border: 2px solid var(--gray-100);
278
+ border-radius: 12px;
279
+ cursor: pointer;
280
+ transition: all 0.3s ease;
281
+ background: var(--white);
282
+ }
283
+
284
+ .quiz-option:hover {
285
+ border-color: var(--light-blue);
286
+ background: var(--extra-light-blue);
287
+ }
288
+
289
+ .quiz-option.correct {
290
+ border-color: var(--success);
291
+ background: #f0fdf4;
292
+ }
293
+
294
+ .quiz-option.incorrect {
295
+ border-color: var(--error);
296
+ background: #fef2f2;
297
+ }
298
+
299
+ .quiz-explanation {
300
+ margin-top: 16px;
301
+ padding: 16px;
302
+ background: var(--extra-light-blue);
303
+ border-radius: 12px;
304
+ border-left: 4px solid var(--primary-blue);
305
+ }
306
+
307
+ .error-message {
308
+ background: #fef2f2;
309
+ color: var(--error);
310
+ padding: 16px 20px;
311
+ border-radius: 12px;
312
+ border: 1px solid #fecaca;
313
+ margin-top: 16px;
314
+ text-align: center;
315
+ font-weight: 500;
316
+ }
317
+
318
+ .success-message {
319
+ background: #f0fdf4;
320
+ color: var(--success);
321
+ padding: 16px 20px;
322
+ border-radius: 12px;
323
+ border: 1px solid #bbf7d0;
324
+ margin-top: 16px;
325
+ text-align: center;
326
+ font-weight: 500;
327
+ }
328
+
329
+ .floating-elements {
330
+ position: fixed;
331
+ top: 0;
332
+ left: 0;
333
+ width: 100%;
334
+ height: 100%;
335
+ pointer-events: none;
336
+ z-index: -1;
337
+ }
338
+
339
+ .floating-circle {
340
+ position: absolute;
341
+ border-radius: 50%;
342
+ background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.05));
343
+ animation: float 6s ease-in-out infinite;
344
+ }
345
+
346
+ .floating-circle:nth-child(1) {
347
+ width: 80px;
348
+ height: 80px;
349
+ top: 10%;
350
+ left: 10%;
351
+ animation-delay: 0s;
352
+ }
353
+
354
+ .floating-circle:nth-child(2) {
355
+ width: 120px;
356
+ height: 120px;
357
+ top: 60%;
358
+ right: 10%;
359
+ animation-delay: 2s;
360
+ }
361
+
362
+ .floating-circle:nth-child(3) {
363
+ width: 100px;
364
+ height: 100px;
365
+ bottom: 20%;
366
+ left: 20%;
367
+ animation-delay: 4s;
368
+ }
369
+
370
+ @keyframes float {
371
+ 0%, 100% { transform: translateY(0px) rotate(0deg); }
372
+ 50% { transform: translateY(-20px) rotate(180deg); }
373
+ }
374
+
375
+ /* Animations d'entrée */
376
+ .fade-in {
377
+ animation: fadeIn 0.5s ease-out;
378
+ }
379
+
380
+ @keyframes fadeIn {
381
+ from {
382
+ opacity: 0;
383
+ transform: translateY(20px);
384
  }
385
+ to {
386
+ opacity: 1;
387
+ transform: translateY(0);
388
+ }
389
+ }
390
 
391
+ /* Responsive optimizations */
392
+ @media (min-width: 640px) {
393
+ .container {
394
+ max-width: 640px;
395
+ margin: 0 auto;
396
+ padding: 40px 24px;
397
+ }
398
 
399
+ .type-selector {
400
+ gap: 16px;
401
+ }
 
 
 
 
 
402
 
403
+ .main-card {
404
+ padding: 32px;
405
+ }
406
+ }
 
 
 
 
 
 
 
407
 
408
+ /* Accessibilité et focus states améliorés */
409
+ @media (prefers-reduced-motion: reduce) {
410
+ *, *::before, *::after {
411
+ animation-duration: 0.01ms !important;
412
+ animation-iteration-count: 1 !important;
413
+ transition-duration: 0.01ms !important;
414
+ }
415
+ }
416
+ </style>
417
+ </head>
418
+ <body>
419
+ <!-- Éléments flottants décoratifs -->
420
+ <div class="floating-elements">
421
+ <div class="floating-circle"></div>
422
+ <div class="floating-circle"></div>
423
+ <div class="floating-circle"></div>
424
+ </div>
 
 
 
 
 
 
 
 
425
 
426
+ <div class="container">
427
+ <div class="header">
428
+ <h1><i class="fas fa-graduation-cap"></i> StudyGen</h1>
429
+ <p>Créez des flashcards et quiz personnalisés en quelques secondes</p>
430
+ </div>
431
+
432
+ <div class="main-card">
433
+ <form id="generateForm">
434
+ <div class="form-group">
435
+ <label for="topic">
436
+ <i class="fas fa-lightbulb"></i> Sujet d'étude
437
+ </label>
438
+ <input
439
+ type="text"
440
+ id="topic"
441
+ name="topic"
442
+ placeholder="Ex: Les révolutions françaises, Python, Anatomie..."
443
+ required
444
+ >
445
  </div>
446
+
447
+ <div class="form-group">
448
+ <label>
449
+ <i class="fas fa-tools"></i> Type de contenu
450
+ </label>
451
+ <div class="type-selector">
452
+ <div class="type-option">
453
+ <input type="radio" id="flashcards" name="type" value="flashcards" checked>
454
+ <label for="flashcards">
455
+ <i class="fas fa-clone"></i>
456
+ <span>Flashcards</span>
457
+ </label>
 
 
458
  </div>
459
+ <div class="type-option">
460
+ <input type="radio" id="quiz" name="type" value="quiz">
461
+ <label for="quiz">
462
+ <i class="fas fa-question-circle"></i>
463
+ <span>Quiz</span>
464
+ </label>
465
  </div>
466
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
467
  </div>
468
+
469
+ <button type="submit" class="generate-btn" id="generateBtn">
470
+ <span class="btn-text">
471
+ <i class="fas fa-magic"></i> Générer le contenu
472
+ </span>
473
+ <div class="spinner"></div>
474
+ </button>
475
+ </form>
476
+ </div>
477
+
478
+ <div id="results" class="results-container"></div>
479
+ </div>
480
+
481
+ <script>
482
+ document.addEventListener('DOMContentLoaded', function() {
483
+ const form = document.getElementById('generateForm');
484
+ const generateBtn = document.getElementById('generateBtn');
485
+ const resultsContainer = document.getElementById('results');
486
+
487
+ form.addEventListener('submit', async function(e) {
488
+ e.preventDefault();
489
 
490
+ const topic = document.getElementById('topic').value.trim();
491
+ const type = document.querySelector('input[name="type"]:checked').value;
 
 
 
 
 
 
492
 
493
+ if (!topic) {
494
+ showMessage('Veuillez entrer un sujet d\'étude.', 'error');
495
+ return;
496
+ }
 
 
 
 
 
 
497
 
498
+ // Animation du bouton
499
+ generateBtn.classList.add('loading');
500
+ generateBtn.disabled = true;
501
+ resultsContainer.innerHTML = '';
502
+
503
+ try {
504
+ const response = await fetch('/generate', {
505
+ method: 'POST',
506
+ headers: {
507
+ 'Content-Type': 'application/json',
508
+ },
509
+ body: JSON.stringify({ topic, type })
510
+ });
511
+
512
+ const data = await response.json();
513
+
514
+ if (data.success) {
515
+ displayResults(data[type], type);
516
+ showMessage(`${type === 'flashcards' ? 'Flashcards' : 'Quiz'} généré avec succès !`, 'success');
517
+ } else {
518
+ showMessage(data.error || 'Une erreur est survenue lors de la génération.', 'error');
519
+ }
520
+ } catch (error) {
521
+ console.error('Erreur:', error);
522
+ showMessage('Erreur de connexion. Veuillez réessayer.', 'error');
523
+ } finally {
524
+ // Restaurer le bouton
525
+ generateBtn.classList.remove('loading');
526
+ generateBtn.disabled = false;
527
+ }
528
  });
529
 
530
+ function displayResults(data, type) {
531
+ resultsContainer.innerHTML = '';
 
 
 
 
 
 
532
 
533
+ if (type === 'flashcards') {
534
+ data.forEach((item, index) => {
535
+ const flashcardEl = document.createElement('div');
536
+ flashcardEl.className = 'flashcard fade-in';
537
+ flashcardEl.style.animationDelay = `${index * 0.1}s`;
538
+ flashcardEl.innerHTML = `
539
+ <h3><i class="fas fa-question"></i> ${item.question}</h3>
540
+ <div class="answer">
541
+ <i class="fas fa-lightbulb"></i> ${item.answer}
542
+ </div>
543
+ `;
544
+ resultsContainer.appendChild(flashcardEl);
545
+ });
546
  } else {
547
+ data.forEach((item, index) => {
548
+ const quizEl = document.createElement('div');
549
+ quizEl.className = 'quiz-question fade-in';
550
+ quizEl.style.animationDelay = `${index * 0.1}s`;
551
+
552
+ const optionsHtml = item.options.map(option => `
553
+ <div class="quiz-option ${option === item.correctAnswer ? 'correct' : ''}"
554
+ onclick="toggleExplanation(this)">
555
+ <i class="fas ${option === item.correctAnswer ? 'fa-check' : 'fa-times'}"></i> ${option}
556
+ </div>
557
+ `).join('');
558
+
559
+ quizEl.innerHTML = `
560
+ <h3><i class="fas fa-question-circle"></i> ${item.question}</h3>
561
+ <div class="quiz-options">${optionsHtml}</div>
562
+ <div class="quiz-explanation" style="display: none;">
563
+ <i class="fas fa-info-circle"></i> <strong>Explication :</strong> ${item.explanation}
564
+ </div>
565
+ `;
566
+ resultsContainer.appendChild(quizEl);
567
  });
568
  }
569
+ }
 
 
570
 
571
+ function showMessage(message, type) {
572
+ const messageEl = document.createElement('div');
573
+ messageEl.className = `${type}-message fade-in`;
574
+ messageEl.innerHTML = `
575
+ <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
576
+ ${message}
577
+ `;
578
+
579
+ // Supprimer les anciens messages
580
+ const oldMessages = document.querySelectorAll('.error-message, .success-message');
581
+ oldMessages.forEach(msg => msg.remove());
582
+
583
+ resultsContainer.insertBefore(messageEl, resultsContainer.firstChild);
584
+
585
+ // Supprimer le message après 5 secondes
586
  setTimeout(() => {
587
+ messageEl.remove();
588
+ }, 5000);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
589
  }
590
 
591
+ // Fonction globale pour l'interaction avec les quiz
592
+ window.toggleExplanation = function(optionEl) {
593
+ const quizQuestion = optionEl.closest('.quiz-question');
594
+ const explanation = quizQuestion.querySelector('.quiz-explanation');
595
+
596
+ // Marquer toutes les options comme incorrectes visuellement
597
+ const options = quizQuestion.querySelectorAll('.quiz-option');
598
+ options.forEach(opt => {
599
+ if (!opt.classList.contains('correct')) {
600
+ opt.classList.add('incorrect');
601
+ }
602
+ });
603
+
604
+ // Afficher l'explication
605
+ explanation.style.display = 'block';
606
+ explanation.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
607
+ };
 
 
 
608
 
609
+ // Animation au focus des inputs
610
+ const inputs = document.querySelectorAll('input[type="text"]');
611
+ inputs.forEach(input => {
612
+ input.addEventListener('focus', function() {
613
+ this.closest('.form-group').style.transform = 'scale(1.02)';
614
+ });
615
+
616
+ input.addEventListener('blur', function() {
617
+ this.closest('.form-group').style.transform = 'scale(1)';
618
+ });
619
+ });
620
+
621
+ // Animation des cartes au scroll (pour les écrans plus grands)
622
+ const observerOptions = {
623
+ threshold: 0.1,
624
+ rootMargin: '0px 0px -50px 0px'
625
+ };
626
+
627
+ const observer = new IntersectionObserver(function(entries) {
628
+ entries.forEach(entry => {
629
+ if (entry.isIntersecting) {
630
+ entry.target.classList.add('fade-in');
631
+ }
632
+ });
633
+ }, observerOptions);
634
+ });
635
+ </script>
636
  </body>
637
  </html>