Docfile commited on
Commit
78bf8a4
·
verified ·
1 Parent(s): 4393455

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +179 -387
templates/index.html CHANGED
@@ -24,7 +24,6 @@
24
  --gray-800: #1f2937;
25
  --success: #10b981;
26
  --error: #ef4444;
27
- --warning: #f59e0b;
28
  --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
29
  --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
30
  }
@@ -238,7 +237,7 @@
238
  margin-top: 24px;
239
  }
240
 
241
- /* Flashcards */
242
  .flashcard {
243
  background: var(--white);
244
  border-radius: 20px;
@@ -246,65 +245,61 @@
246
  margin-bottom: 16px;
247
  box-shadow: var(--shadow);
248
  border-left: 4px solid var(--primary-blue);
249
- transition: transform 0.3s ease;
250
  cursor: pointer;
 
251
  position: relative;
252
  min-height: 120px;
 
253
  }
254
 
255
  .flashcard:hover {
256
- transform: translateX(4px);
 
257
  }
258
 
259
- .flashcard.flipped .card-front {
260
- opacity: 0;
261
- transform: rotateY(90deg);
 
 
 
262
  }
263
 
264
- .flashcard.flipped .card-back {
265
- opacity: 1;
266
- transform: rotateY(0deg);
267
  }
268
 
269
- .card-front, .card-back {
270
  position: absolute;
271
- top: 0;
272
- left: 0;
273
- right: 0;
274
- bottom: 0;
275
- padding: 24px;
276
- transition: all 0.6s ease;
277
  backface-visibility: hidden;
278
- display: flex;
279
- align-items: center;
280
- justify-content: center;
281
- text-align: center;
282
  }
283
 
284
- .card-back {
285
- opacity: 0;
286
- transform: rotateY(-90deg);
287
  background: var(--gray-50);
288
- border-radius: 20px;
289
- color: var(--gray-600);
 
290
  }
291
 
292
  .flashcard h3 {
293
  color: var(--primary-blue);
 
294
  font-size: 1.1rem;
295
  font-weight: 600;
296
- margin: 0;
297
  }
298
 
299
- .flip-indicator {
300
  position: absolute;
301
- top: 10px;
302
- right: 15px;
303
- color: var(--gray-400);
304
  font-size: 0.8rem;
 
 
305
  }
306
 
307
- /* Quiz Questions */
308
  .quiz-question {
309
  background: var(--white);
310
  border-radius: 20px;
@@ -341,9 +336,10 @@
341
  position: relative;
342
  }
343
 
344
- .quiz-option:hover {
345
  border-color: var(--light-blue);
346
  background: var(--extra-light-blue);
 
347
  }
348
 
349
  .quiz-option.selected {
@@ -351,27 +347,29 @@
351
  background: var(--extra-light-blue);
352
  }
353
 
354
- .quiz-option.correct-answer {
355
  border-color: var(--success);
356
  background: #f0fdf4;
357
  }
358
 
359
- .quiz-option.incorrect-answer {
360
  border-color: var(--error);
361
  background: #fef2f2;
362
  }
363
 
364
- .quiz-option .option-icon {
365
- position: absolute;
366
- right: 16px;
367
- top: 50%;
368
- transform: translateY(-50%);
 
 
369
  opacity: 0;
370
  transition: opacity 0.3s ease;
371
  }
372
 
373
- .quiz-option.correct-answer .option-icon,
374
- .quiz-option.incorrect-answer .option-icon {
375
  opacity: 1;
376
  }
377
 
@@ -386,7 +384,7 @@
386
 
387
  .quiz-explanation.show {
388
  display: block;
389
- animation: slideDown 0.3s ease;
390
  }
391
 
392
  @keyframes slideDown {
@@ -400,34 +398,26 @@
400
  }
401
  }
402
 
403
- .quiz-score {
404
- background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
405
- color: var(--white);
406
- padding: 16px 20px;
407
- border-radius: 12px;
408
- text-align: center;
409
- font-weight: 600;
410
- margin-bottom: 16px;
411
- }
412
-
413
- .message {
414
- padding: 16px 20px;
415
- border-radius: 12px;
416
- margin-bottom: 16px;
417
- text-align: center;
418
- font-weight: 500;
419
- }
420
-
421
  .error-message {
422
  background: #fef2f2;
423
  color: var(--error);
 
 
424
  border: 1px solid #fecaca;
 
 
 
425
  }
426
 
427
  .success-message {
428
  background: #f0fdf4;
429
  color: var(--success);
 
 
430
  border: 1px solid #bbf7d0;
 
 
 
431
  }
432
 
433
  .floating-elements {
@@ -476,6 +466,7 @@
476
  50% { transform: translateY(-20px) rotate(180deg); }
477
  }
478
 
 
479
  .fade-in {
480
  animation: fadeIn 0.5s ease-out;
481
  }
@@ -491,6 +482,7 @@
491
  }
492
  }
493
 
 
494
  @media (min-width: 640px) {
495
  .container {
496
  max-width: 640px;
@@ -507,6 +499,7 @@
507
  }
508
  }
509
 
 
510
  @media (prefers-reduced-motion: reduce) {
511
  *, *::before, *::after {
512
  animation-duration: 0.01ms !important;
@@ -517,6 +510,7 @@
517
  </style>
518
  </head>
519
  <body>
 
520
  <div class="floating-elements">
521
  <div class="floating-circle"></div>
522
  <div class="floating-circle"></div>
@@ -579,79 +573,53 @@
579
  </div>
580
 
581
  <script>
582
- // Données de démonstration
583
- const DEMO_DATA = {
584
- flashcards: {
585
- "histoire": [
586
- { question: "Quand a eu lieu la Révolution française ?", answer: "La Révolution française a eu lieu de 1789 à 1799." },
587
- { question: "Qui était le roi de France au début de la Révolution ?", answer: "Louis XVI était le roi de France au début de la Révolution française." },
588
- { question: "Qu'est-ce que la Déclaration des droits de l'homme et du citoyen ?", answer: "Document fondamental adopté en 1789, proclamant les droits naturels et inaliénables de l'homme." },
589
- { question: "Que s'est-il passé le 14 juillet 1789 ?", answer: "Prise de la Bastille par le peuple parisien, symbole du début de la Révolution." },
590
- { question: "Qu'est-ce que la Terreur ?", answer: "Période de la Révolution française (1793-1794) marquée par la répression violente des opposants." }
591
- ],
592
- "python": [
593
- { question: "Comment déclarer une liste en Python ?", answer: "ma_liste = [] ou ma_liste = [1, 2, 3]" },
594
- { question: "Quelle est la différence entre une liste et un tuple ?", answer: "Les listes sont mutables (modifiables) alors que les tuples sont immutables." },
595
- { question: "Comment créer une fonction en Python ?", answer: "def ma_fonction(): suivi du code indenté" },
596
- { question: "Qu'est-ce qu'une boucle for ?", answer: "Structure qui permet de répéter des instructions pour chaque élément d'une séquence." },
597
- { question: "Comment gérer les exceptions ?", answer: "Avec try/except : try: code_risque except Exception: gestion_erreur" }
598
- ]
599
- },
600
- quiz: {
601
- "histoire": [
602
  {
603
- question: "En quelle année a commencé la Révolution française ?",
604
- options: ["1789", "1799", "1792", "1794"],
605
- correctAnswer: "1789",
606
- explanation: "La Révolution française a commencé en 1789 avec la convocation des États généraux et la prise de la Bastille."
607
  },
608
  {
609
- question: "Qui était surnommé 'l'Incorruptible' ?",
610
- options: ["Danton", "Robespierre", "Marat", "Saint-Just"],
611
- correctAnswer: "Robespierre",
612
- explanation: "Maximilien de Robespierre était surnommé 'l'Incorruptible' pour son intégrité morale supposée."
613
  },
614
  {
615
- question: "Quel événement marque la fin de la Révolution française ?",
616
- options: ["Coup d'État du 18 Brumaire", "Mort de Robespierre", "Concordat", "Bataille de Waterloo"],
617
- correctAnswer: "Coup d'État du 18 Brumaire",
618
- explanation: "Le coup d'État du 18 Brumaire (1799) par Napoléon Bonaparte marque traditionnellement la fin de la Révolution française."
619
  }
620
  ],
621
- "python": [
622
  {
623
- question: "Quel est le type de données de '123' en Python ?",
624
- options: ["int", "float", "str", "bool"],
625
- correctAnswer: "str",
626
- explanation: "Les guillemets indiquent que '123' est une chaîne de caractères (string), pas un nombre."
627
  },
628
  {
629
- question: "Comment obtenir la longueur d'une liste ?",
630
- options: ["list.length()", "len(list)", "size(list)", "length(list)"],
631
- correctAnswer: "len(list)",
632
- explanation: "La fonction len() retourne le nombre d'éléments dans une séquence."
633
  },
634
  {
635
- question: "Que fait l'opérateur % en Python ?",
636
- options: ["Division", "Modulo", "Pourcentage", "Multiplication"],
637
- correctAnswer: "Modulo",
638
- explanation: "L'opérateur % retourne le reste de la division euclidienne."
639
  }
640
  ]
641
- }
642
- };
643
-
644
- let currentQuizAnswers = {};
645
-
646
- document.addEventListener('DOMContentLoaded', function() {
647
- const form = document.getElementById('generateForm');
648
- const generateBtn = document.getElementById('generateBtn');
649
- const resultsContainer = document.getElementById('results');
650
 
651
- form.addEventListener('submit', function(e) {
652
  e.preventDefault();
653
 
654
- const topic = document.getElementById('topic').value.trim().toLowerCase();
655
  const type = document.querySelector('input[name="type"]:checked').value;
656
 
657
  if (!topic) {
@@ -659,199 +627,124 @@
659
  return;
660
  }
661
 
 
662
  generateBtn.classList.add('loading');
663
  generateBtn.disabled = true;
664
  resultsContainer.innerHTML = '';
665
 
666
- // Simulation d'un délai de génération
667
  setTimeout(() => {
668
- const data = window.generateContent(topic, type);
669
- if (data) {
670
- displayResults(data, type, topic);
671
  showMessage(`${type === 'flashcards' ? 'Flashcards' : 'Quiz'} généré avec succès !`, 'success');
672
- } else {
673
- showMessage('Sujet non reconnu. Essayez "histoire", "python", "mathématiques" ou "sciences" pour une démonstration.', 'error');
 
 
 
 
 
674
  }
675
-
676
- generateBtn.classList.remove('loading');
677
- generateBtn.disabled = false;
678
  }, 1500);
679
  });
680
 
681
- function generateContent(topic, type) {
682
- // Recherche par mots-clés
683
- const keywords = {
684
- 'histoire': ['histoire', 'révolution', 'française', 'france', 'roi', 'louis'],
685
- 'python': ['python', 'programmation', 'code', 'langage', 'développement']
686
- };
687
-
688
- for (const [key, words] of Object.entries(keywords)) {
689
- if (words.some(word => topic.includes(word))) {
690
- return DEMO_DATA[type][key];
691
- }
692
- }
693
-
694
- return null;
695
- }
696
-
697
- function displayResults(data, type, topic) {
698
  resultsContainer.innerHTML = '';
699
- currentQuizAnswers = {};
700
 
701
  if (type === 'flashcards') {
702
- displayFlashcards(data);
703
- } else {
704
- displayQuiz(data);
705
- }
706
- }
707
-
708
- function displayFlashcards(flashcards) {
709
- flashcards.forEach((item, index) => {
710
- const flashcardEl = document.createElement('div');
711
- flashcardEl.className = 'flashcard fade-in';
712
- flashcardEl.style.animationDelay = `${index * 0.1}s`;
713
- flashcardEl.innerHTML = `
714
- <div class="flip-indicator">
715
- <i class="fas fa-redo"></i> Cliquez pour retourner
716
- </div>
717
- <div class="card-front">
718
- <h3><i class="fas fa-question"></i> ${item.question}</h3>
719
- </div>
720
- <div class="card-back">
721
- <div>
722
- <i class="fas fa-lightbulb"></i>
723
- <p style="margin-top: 10px;">${item.answer}</p>
724
  </div>
725
- </div>
726
- `;
727
-
728
- flashcardEl.addEventListener('click', function() {
729
- this.classList.toggle('flipped');
730
- });
731
-
732
- resultsContainer.appendChild(flashcardEl);
733
- });
734
- }
735
-
736
- function displayQuiz(questions) {
737
- questions.forEach((item, questionIndex) => {
738
- const quizEl = document.createElement('div');
739
- quizEl.className = 'quiz-question fade-in';
740
- quizEl.style.animationDelay = `${questionIndex * 0.1}s`;
741
-
742
- const optionsHtml = item.options.map((option, optionIndex) => `
743
- <div class="quiz-option" data-question="${questionIndex}" data-option="${option}">
744
- ${option}
745
- <i class="fas fa-check option-icon" style="color: var(--success);"></i>
746
- <i class="fas fa-times option-icon" style="color: var(--error);"></i>
747
- </div>
748
- `).join('');
749
-
750
- quizEl.innerHTML = `
751
- <h3><i class="fas fa-question-circle"></i> ${item.question}</h3>
752
- <div class="quiz-options">${optionsHtml}</div>
753
- <div class="quiz-explanation">
754
- <i class="fas fa-info-circle"></i> <strong>Explication :</strong> ${item.explanation}
755
- </div>
756
- `;
757
-
758
- // Ajouter les événements aux options
759
- const options = quizEl.querySelectorAll('.quiz-option');
760
- options.forEach(option => {
761
- option.addEventListener('click', function() {
762
- handleQuizAnswer(this, item, questionIndex);
763
  });
 
 
764
  });
765
-
766
- resultsContainer.appendChild(quizEl);
767
- });
768
-
769
- // Ajouter le score à la fin
770
- setTimeout(() => {
771
- addQuizScore(questions.length);
772
- }, questions.length * 100 + 500);
773
- }
774
-
775
- function handleQuizAnswer(selectedOption, question, questionIndex) {
776
- const allOptions = selectedOption.parentNode.querySelectorAll('.quiz-option');
777
- const explanation = selectedOption.closest('.quiz-question').querySelector('.quiz-explanation');
778
-
779
- // Empêcher de répondre plusieurs fois à la même question
780
- if (currentQuizAnswers[questionIndex]) {
781
- return;
782
- }
783
-
784
- currentQuizAnswers[questionIndex] = {
785
- selected: selectedOption.dataset.option,
786
- correct: question.correctAnswer,
787
- isCorrect: selectedOption.dataset.option === question.correctAnswer
788
- };
789
-
790
- // Marquer la réponse sélectionnée
791
- selectedOption.classList.add('selected');
792
-
793
- // Révéler les bonnes et mauvaises réponses
794
- allOptions.forEach(option => {
795
- const isCorrect = option.dataset.option === question.correctAnswer;
796
- const isSelected = option === selectedOption;
797
-
798
- if (isCorrect) {
799
- option.classList.add('correct-answer');
800
- } else if (isSelected) {
801
- option.classList.add('incorrect-answer');
802
- }
803
-
804
- // Désactiver toutes les options
805
- option.style.pointerEvents = 'none';
806
- });
807
-
808
- // Afficher l'explication
809
- explanation.classList.add('show');
810
-
811
- updateQuizScore();
812
- }
813
-
814
- function addQuizScore(totalQuestions) {
815
- const scoreEl = document.createElement('div');
816
- scoreEl.className = 'quiz-score fade-in';
817
- scoreEl.innerHTML = `
818
- <h3><i class="fas fa-chart-bar"></i> Score Final</h3>
819
- <div id="score-display">Répondez aux questions pour voir votre score</div>
820
- `;
821
- resultsContainer.insertBefore(scoreEl, resultsContainer.firstChild);
822
- updateQuizScore();
823
- }
824
-
825
- function updateQuizScore() {
826
- const scoreDisplay = document.getElementById('score-display');
827
- if (!scoreDisplay) return;
828
-
829
- const totalAnswered = Object.keys(currentQuizAnswers).length;
830
- const correctAnswers = Object.values(currentQuizAnswers).filter(answer => answer.isCorrect).length;
831
- const totalQuestions = Object.keys(currentQuizAnswers).length > 0 ?
832
- Math.max(...Object.keys(currentQuizAnswers).map(Number)) + 1 : 0;
833
-
834
- if (totalAnswered === 0) {
835
- scoreDisplay.innerHTML = 'Répondez aux questions pour voir votre score';
836
  } else {
837
- const percentage = Math.round((correctAnswers / totalAnswered) * 100);
838
- scoreDisplay.innerHTML = `
839
- ${correctAnswers}/${totalAnswered} bonnes réponses (${percentage}%)
840
- ${totalAnswered < totalQuestions ? '<br><small>Continuez à répondre...</small>' : ''}
841
- `;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
842
  }
843
  }
844
 
845
  function showMessage(message, type) {
846
  const messageEl = document.createElement('div');
847
- messageEl.className = `message ${type}-message fade-in`;
848
  messageEl.innerHTML = `
849
  <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
850
  ${message}
851
  `;
852
 
853
  // Supprimer les anciens messages
854
- const oldMessages = document.querySelectorAll('.message');
855
  oldMessages.forEach(msg => msg.remove());
856
 
857
  resultsContainer.insertBefore(messageEl, resultsContainer.firstChild);
@@ -873,108 +766,7 @@
873
  this.closest('.form-group').style.transform = 'scale(1)';
874
  });
875
  });
876
-
877
- // Animation des cartes au scroll
878
- const observerOptions = {
879
- threshold: 0.1,
880
- rootMargin: '0px 0px -50px 0px'
881
- };
882
-
883
- const observer = new IntersectionObserver(function(entries) {
884
- entries.forEach(entry => {
885
- if (entry.isIntersecting) {
886
- entry.target.classList.add('fade-in');
887
- }
888
- });
889
- }, observerOptions);
890
-
891
- // Ajouter des sujets supplémentaires pour la démonstration
892
- const additionalTopics = {
893
- flashcards: {
894
- "mathématiques": [
895
- { question: "Qu'est-ce qu'une fonction linéaire ?", answer: "Une fonction de la forme f(x) = ax + b où a et b sont des constantes." },
896
- { question: "Comment calcule-t-on l'aire d'un cercle ?", answer: "Aire = π × r² où r est le rayon du cercle." },
897
- { question: "Qu'est-ce que le théorème de Pythagore ?", answer: "Dans un triangle rectangle : a² + b² = c² où c est l'hypoténuse." },
898
- { question: "Combien vaut π (pi) approximativement ?", answer: "π ≈ 3,14159..." },
899
- { question: "Qu'est-ce qu'un nombre premier ?", answer: "Un nombre entier supérieur à 1 qui n'a que deux diviseurs : 1 et lui-même." }
900
- ],
901
- "sciences": [
902
- { question: "Quelle est la vitesse de la lumière ?", answer: "La vitesse de la lumière est d'environ 300 000 km/s dans le vide." },
903
- { question: "Qu'est-ce que la photosynthèse ?", answer: "Processus par lequel les plantes convertissent la lumière solaire en énergie chimique." },
904
- { question: "Combien y a-t-il d'éléments dans le tableau périodique ?", answer: "Il y a 118 éléments chimiques connus dans le tableau périodique." },
905
- { question: "Qu'est-ce que l'ADN ?", answer: "L'acide désoxyribonucléique, molécule qui contient l'information génétique." },
906
- { question: "Quelle est la température d'ébullition de l'eau ?", answer: "L'eau bout à 100°C (373 K) sous pression atmosphérique normale." }
907
- ]
908
- },
909
- quiz: {
910
- "mathématiques": [
911
- {
912
- question: "Combien font 2³ (2 puissance 3) ?",
913
- options: ["6", "8", "9", "12"],
914
- correctAnswer: "8",
915
- explanation: "2³ = 2 × 2 × 2 = 8"
916
- },
917
- {
918
- question: "Dans un triangle, la somme des angles fait :",
919
- options: ["90°", "180°", "270°", "360°"],
920
- correctAnswer: "180°",
921
- explanation: "La somme des angles intérieurs d'un triangle fait toujours 180°."
922
- },
923
- {
924
- question: "Qu'est-ce que √16 ?",
925
- options: ["2", "4", "6", "8"],
926
- correctAnswer: "4",
927
- explanation: "√16 = 4 car 4 × 4 = 16"
928
- }
929
- ],
930
- "sciences": [
931
- {
932
- question: "Quel gaz représente environ 78% de l'atmosphère terrestre ?",
933
- options: ["Oxygène", "Azote", "Argon", "Dioxyde de carbone"],
934
- correctAnswer: "Azote",
935
- explanation: "L'azote (N₂) compose environ 78% de l'atmosphère terrestre."
936
- },
937
- {
938
- question: "Combien de chromosomes possède l'être humain ?",
939
- options: ["44", "46", "48", "50"],
940
- correctAnswer: "46",
941
- explanation: "L'être humain possède 46 chromosomes (23 paires)."
942
- },
943
- {
944
- question: "Quelle planète est la plus proche du Soleil ?",
945
- options: ["Vénus", "Terre", "Mercure", "Mars"],
946
- correctAnswer: "Mercure",
947
- explanation: "Mercure est la planète la plus proche du Soleil dans notre système solaire."
948
- }
949
- ]
950
- }
951
- };
952
-
953
- // Fusionner avec les données existantes
954
- Object.keys(additionalTopics.flashcards).forEach(topic => {
955
- DEMO_DATA.flashcards[topic] = additionalTopics.flashcards[topic];
956
- });
957
- Object.keys(additionalTopics.quiz).forEach(topic => {
958
- DEMO_DATA.quiz[topic] = additionalTopics.quiz[topic];
959
- });
960
-
961
- // Mise à jour de la fonction generateContent pour inclure plus de sujets
962
- function generateContentUpdated(topic, type) {
963
- const keywords = {
964
- 'histoire': ['histoire', 'révolution', 'française', 'france', 'roi', 'louis', 'historique'],
965
- 'python': ['python', 'programmation', 'code', 'langage', 'développement', 'informatique'],
966
- 'mathématiques': ['math', 'mathématiques', 'calcul', 'géométrie', 'algèbre', 'nombre'],
967
- 'sciences': ['science', 'physique', 'chimie', 'biologie', 'nature', 'expérience']
968
- };
969
-
970
- for (const [key, words] of Object.entries(keywords)) {
971
- if (words.some(word => topic.includes(word))) {
972
- return DEMO_DATA[type][key];
973
- }
974
- }
975
-
976
- return null;
977
- }
978
-
979
- // Remplacer la fonction generateContent originale
980
- window.generateContent = generateContentUpdated;
 
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
  }
 
237
  margin-top: 24px;
238
  }
239
 
240
+ /* Styles pour les flashcards */
241
  .flashcard {
242
  background: var(--white);
243
  border-radius: 20px;
 
245
  margin-bottom: 16px;
246
  box-shadow: var(--shadow);
247
  border-left: 4px solid var(--primary-blue);
 
248
  cursor: pointer;
249
+ transition: all 0.3s ease;
250
  position: relative;
251
  min-height: 120px;
252
+ perspective: 1000px;
253
  }
254
 
255
  .flashcard:hover {
256
+ transform: translateY(-2px);
257
+ box-shadow: var(--shadow-lg);
258
  }
259
 
260
+ .flashcard-content {
261
+ position: relative;
262
+ width: 100%;
263
+ height: 100%;
264
+ transition: transform 0.6s;
265
+ transform-style: preserve-3d;
266
  }
267
 
268
+ .flashcard.flipped .flashcard-content {
269
+ transform: rotateY(180deg);
 
270
  }
271
 
272
+ .flashcard-front, .flashcard-back {
273
  position: absolute;
274
+ width: 100%;
 
 
 
 
 
275
  backface-visibility: hidden;
 
 
 
 
276
  }
277
 
278
+ .flashcard-back {
279
+ transform: rotateY(180deg);
 
280
  background: var(--gray-50);
281
+ border-radius: 12px;
282
+ padding: 16px;
283
+ border: 1px solid var(--gray-100);
284
  }
285
 
286
  .flashcard h3 {
287
  color: var(--primary-blue);
288
+ margin-bottom: 12px;
289
  font-size: 1.1rem;
290
  font-weight: 600;
 
291
  }
292
 
293
+ .flip-hint {
294
  position: absolute;
295
+ bottom: 8px;
296
+ right: 12px;
 
297
  font-size: 0.8rem;
298
+ color: var(--gray-600);
299
+ opacity: 0.7;
300
  }
301
 
302
+ /* Styles pour les quiz */
303
  .quiz-question {
304
  background: var(--white);
305
  border-radius: 20px;
 
336
  position: relative;
337
  }
338
 
339
+ .quiz-option:hover:not(.disabled) {
340
  border-color: var(--light-blue);
341
  background: var(--extra-light-blue);
342
+ transform: translateX(4px);
343
  }
344
 
345
  .quiz-option.selected {
 
347
  background: var(--extra-light-blue);
348
  }
349
 
350
+ .quiz-option.correct {
351
  border-color: var(--success);
352
  background: #f0fdf4;
353
  }
354
 
355
+ .quiz-option.incorrect {
356
  border-color: var(--error);
357
  background: #fef2f2;
358
  }
359
 
360
+ .quiz-option.disabled {
361
+ cursor: not-allowed;
362
+ opacity: 0.7;
363
+ }
364
+
365
+ .quiz-option i {
366
+ margin-right: 8px;
367
  opacity: 0;
368
  transition: opacity 0.3s ease;
369
  }
370
 
371
+ .quiz-option.correct i.fa-check,
372
+ .quiz-option.incorrect i.fa-times {
373
  opacity: 1;
374
  }
375
 
 
384
 
385
  .quiz-explanation.show {
386
  display: block;
387
+ animation: slideDown 0.3s ease-out;
388
  }
389
 
390
  @keyframes slideDown {
 
398
  }
399
  }
400
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
401
  .error-message {
402
  background: #fef2f2;
403
  color: var(--error);
404
+ padding: 16px 20px;
405
+ border-radius: 12px;
406
  border: 1px solid #fecaca;
407
+ margin-top: 16px;
408
+ text-align: center;
409
+ font-weight: 500;
410
  }
411
 
412
  .success-message {
413
  background: #f0fdf4;
414
  color: var(--success);
415
+ padding: 16px 20px;
416
+ border-radius: 12px;
417
  border: 1px solid #bbf7d0;
418
+ margin-top: 16px;
419
+ text-align: center;
420
+ font-weight: 500;
421
  }
422
 
423
  .floating-elements {
 
466
  50% { transform: translateY(-20px) rotate(180deg); }
467
  }
468
 
469
+ /* Animations d'entrée */
470
  .fade-in {
471
  animation: fadeIn 0.5s ease-out;
472
  }
 
482
  }
483
  }
484
 
485
+ /* Responsive optimizations */
486
  @media (min-width: 640px) {
487
  .container {
488
  max-width: 640px;
 
499
  }
500
  }
501
 
502
+ /* Accessibilité et focus states améliorés */
503
  @media (prefers-reduced-motion: reduce) {
504
  *, *::before, *::after {
505
  animation-duration: 0.01ms !important;
 
510
  </style>
511
  </head>
512
  <body>
513
+ <!-- Éléments flottants décoratifs -->
514
  <div class="floating-elements">
515
  <div class="floating-circle"></div>
516
  <div class="floating-circle"></div>
 
573
  </div>
574
 
575
  <script>
576
+ document.addEventListener('DOMContentLoaded', function() {
577
+ const form = document.getElementById('generateForm');
578
+ const generateBtn = document.getElementById('generateBtn');
579
+ const resultsContainer = document.getElementById('results');
580
+
581
+ // Données d'exemple pour la démonstration
582
+ const sampleData = {
583
+ flashcards: [
 
 
 
 
 
 
 
 
 
 
 
 
584
  {
585
+ question: "Qu'est-ce que la photosynthèse ?",
586
+ answer: "La photosynthèse est le processus par lequel les plantes vertes utilisent la lumière du soleil pour convertir le dioxyde de carbone et l'eau en glucose et en oxygène."
 
 
587
  },
588
  {
589
+ question: "Quelle est la formule chimique de l'eau ?",
590
+ answer: "H2O - deux atomes d'hydrogène liés à un atome d'oxygène."
 
 
591
  },
592
  {
593
+ question: "Qui a développé la théorie de la relativité ?",
594
+ answer: "Albert Einstein a développé la théorie de la relativité restreinte (1905) et générale (1915)."
 
 
595
  }
596
  ],
597
+ quiz: [
598
  {
599
+ question: "Quelle est la capitale de la France ?",
600
+ options: ["Lyon", "Paris", "Marseille", "Bordeaux"],
601
+ correctAnswer: "Paris",
602
+ explanation: "Paris est la capitale et la plus grande ville de France, située sur la Seine au cœur de la région Île-de-France."
603
  },
604
  {
605
+ question: "Combien de chromosomes possède l'être humain ?",
606
+ options: ["44", "46", "48", "50"],
607
+ correctAnswer: "46",
608
+ explanation: "L'être humain possède 46 chromosomes organisés en 23 paires dans chaque cellule somatique."
609
  },
610
  {
611
+ question: "Quel est l'élément chimique le plus abondant dans l'univers ?",
612
+ options: ["Oxygène", "Carbone", "Hydrogène", "Hélium"],
613
+ correctAnswer: "Hydrogène",
614
+ explanation: "L'hydrogène représente environ 75% de la masse normale de l'univers et constitue le carburant principal des étoiles."
615
  }
616
  ]
617
+ };
 
 
 
 
 
 
 
 
618
 
619
+ form.addEventListener('submit', async function(e) {
620
  e.preventDefault();
621
 
622
+ const topic = document.getElementById('topic').value.trim();
623
  const type = document.querySelector('input[name="type"]:checked').value;
624
 
625
  if (!topic) {
 
627
  return;
628
  }
629
 
630
+ // Animation du bouton
631
  generateBtn.classList.add('loading');
632
  generateBtn.disabled = true;
633
  resultsContainer.innerHTML = '';
634
 
635
+ // Simulation d'une requête (remplacez par votre API)
636
  setTimeout(() => {
637
+ try {
638
+ displayResults(sampleData[type], type);
 
639
  showMessage(`${type === 'flashcards' ? 'Flashcards' : 'Quiz'} généré avec succès !`, 'success');
640
+ } catch (error) {
641
+ console.error('Erreur:', error);
642
+ showMessage('Une erreur est survenue lors de la génération.', 'error');
643
+ } finally {
644
+ // Restaurer le bouton
645
+ generateBtn.classList.remove('loading');
646
+ generateBtn.disabled = false;
647
  }
 
 
 
648
  }, 1500);
649
  });
650
 
651
+ function displayResults(data, type) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
652
  resultsContainer.innerHTML = '';
 
653
 
654
  if (type === 'flashcards') {
655
+ data.forEach((item, index) => {
656
+ const flashcardEl = document.createElement('div');
657
+ flashcardEl.className = 'flashcard fade-in';
658
+ flashcardEl.style.animationDelay = `${index * 0.1}s`;
659
+ flashcardEl.innerHTML = `
660
+ <div class="flashcard-content">
661
+ <div class="flashcard-front">
662
+ <h3><i class="fas fa-question"></i> ${item.question}</h3>
663
+ <div class="flip-hint">
664
+ <i class="fas fa-sync-alt"></i> Cliquez pour retourner
665
+ </div>
666
+ </div>
667
+ <div class="flashcard-back">
668
+ <i class="fas fa-lightbulb"></i> ${item.answer}
669
+ </div>
 
 
 
 
 
 
 
670
  </div>
671
+ `;
672
+
673
+ // Ajouter l'événement de retournement
674
+ flashcardEl.addEventListener('click', function() {
675
+ this.classList.toggle('flipped');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
676
  });
677
+
678
+ resultsContainer.appendChild(flashcardEl);
679
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
680
  } else {
681
+ data.forEach((item, index) => {
682
+ const quizEl = document.createElement('div');
683
+ quizEl.className = 'quiz-question fade-in';
684
+ quizEl.style.animationDelay = `${index * 0.1}s`;
685
+
686
+ const optionsHtml = item.options.map(option => `
687
+ <div class="quiz-option" data-option="${option}">
688
+ <i class="fas fa-check"></i>
689
+ <i class="fas fa-times"></i>
690
+ ${option}
691
+ </div>
692
+ `).join('');
693
+
694
+ quizEl.innerHTML = `
695
+ <h3><i class="fas fa-question-circle"></i> ${item.question}</h3>
696
+ <div class="quiz-options">${optionsHtml}</div>
697
+ <div class="quiz-explanation">
698
+ <i class="fas fa-info-circle"></i> <strong>Explication :</strong> ${item.explanation}
699
+ </div>
700
+ `;
701
+
702
+ // Ajouter les événements de clic pour les options
703
+ const options = quizEl.querySelectorAll('.quiz-option');
704
+ const explanation = quizEl.querySelector('.quiz-explanation');
705
+
706
+ options.forEach(option => {
707
+ option.addEventListener('click', function() {
708
+ if (this.classList.contains('disabled')) return;
709
+
710
+ const selectedAnswer = this.dataset.option;
711
+
712
+ // Désactiver toutes les options
713
+ options.forEach(opt => opt.classList.add('disabled'));
714
+
715
+ // Marquer la réponse sélectionnée
716
+ this.classList.add('selected');
717
+
718
+ // Révéler les bonnes et mauvaises réponses
719
+ options.forEach(opt => {
720
+ if (opt.dataset.option === item.correctAnswer) {
721
+ opt.classList.add('correct');
722
+ } else {
723
+ opt.classList.add('incorrect');
724
+ }
725
+ });
726
+
727
+ // Afficher l'explication
728
+ explanation.classList.add('show');
729
+ explanation.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
730
+ });
731
+ });
732
+
733
+ resultsContainer.appendChild(quizEl);
734
+ });
735
  }
736
  }
737
 
738
  function showMessage(message, type) {
739
  const messageEl = document.createElement('div');
740
+ messageEl.className = `${type}-message fade-in`;
741
  messageEl.innerHTML = `
742
  <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
743
  ${message}
744
  `;
745
 
746
  // Supprimer les anciens messages
747
+ const oldMessages = document.querySelectorAll('.error-message, .success-message');
748
  oldMessages.forEach(msg => msg.remove());
749
 
750
  resultsContainer.insertBefore(messageEl, resultsContainer.firstChild);
 
766
  this.closest('.form-group').style.transform = 'scale(1)';
767
  });
768
  });
769
+ });
770
+ </script>
771
+ </body>
772
+ </html>