Update templates/index.html

templates/index.html

@@ -24,7 +24,6 @@
             --gray-800: #1f2937;
             --success: #10b981;
             --error: #ef4444;
-            --warning: #f59e0b;
             --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
             --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
         }
@@ -238,7 +237,7 @@
             margin-top: 24px;
         }
 
-        /* Flashcards */
+        /* Styles pour les flashcards */
         .flashcard {
             background: var(--white);
             border-radius: 20px;
@@ -246,65 +245,61 @@
             margin-bottom: 16px;
             box-shadow: var(--shadow);
             border-left: 4px solid var(--primary-blue);
-            transition: transform 0.3s ease;
             cursor: pointer;
+            transition: all 0.3s ease;
             position: relative;
             min-height: 120px;
+            perspective: 1000px;
         }
 
         .flashcard:hover {
-            transform: translateX(4px);
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-lg);
         }
 
-        .flashcard.flipped .card-front {
-            opacity: 0;
-            transform: rotateY(90deg);
+        .flashcard-content {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            transition: transform 0.6s;
+            transform-style: preserve-3d;
         }
 
-        .flashcard.flipped .card-back {
-            opacity: 1;
-            transform: rotateY(0deg);
+        .flashcard.flipped .flashcard-content {
+            transform: rotateY(180deg);
         }
 
-        .card-front, .card-back {
+        .flashcard-front, .flashcard-back {
             position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            padding: 24px;
-            transition: all 0.6s ease;
+            width: 100%;
             backface-visibility: hidden;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
         }
 
-        .card-back {
-            opacity: 0;
-            transform: rotateY(-90deg);
+        .flashcard-back {
+            transform: rotateY(180deg);
             background: var(--gray-50);
-            border-radius: 20px;
-            color: var(--gray-600);
+            border-radius: 12px;
+            padding: 16px;
+            border: 1px solid var(--gray-100);
         }
 
         .flashcard h3 {
             color: var(--primary-blue);
+            margin-bottom: 12px;
             font-size: 1.1rem;
             font-weight: 600;
-            margin: 0;
         }
 
-        .flip-indicator {
+        .flip-hint {
             position: absolute;
-            top: 10px;
-            right: 15px;
-            color: var(--gray-400);
+            bottom: 8px;
+            right: 12px;
             font-size: 0.8rem;
+            color: var(--gray-600);
+            opacity: 0.7;
         }
 
-        /* Quiz Questions */
+        /* Styles pour les quiz */
         .quiz-question {
             background: var(--white);
             border-radius: 20px;
@@ -341,9 +336,10 @@
             position: relative;
         }
 
-        .quiz-option:hover {
+        .quiz-option:hover:not(.disabled) {
             border-color: var(--light-blue);
             background: var(--extra-light-blue);
+            transform: translateX(4px);
         }
 
         .quiz-option.selected {
@@ -351,27 +347,29 @@
             background: var(--extra-light-blue);
         }
 
-        .quiz-option.correct-answer {
+        .quiz-option.correct {
             border-color: var(--success);
             background: #f0fdf4;
         }
 
-        .quiz-option.incorrect-answer {
+        .quiz-option.incorrect {
             border-color: var(--error);
             background: #fef2f2;
         }
 
-        .quiz-option .option-icon {
-            position: absolute;
-            right: 16px;
-            top: 50%;
-            transform: translateY(-50%);
+        .quiz-option.disabled {
+            cursor: not-allowed;
+            opacity: 0.7;
+        }
+
+        .quiz-option i {
+            margin-right: 8px;
             opacity: 0;
             transition: opacity 0.3s ease;
         }
 
-        .quiz-option.correct-answer .option-icon,
-        .quiz-option.incorrect-answer .option-icon {
+        .quiz-option.correct i.fa-check,
+        .quiz-option.incorrect i.fa-times {
             opacity: 1;
         }
 
@@ -386,7 +384,7 @@
 
         .quiz-explanation.show {
             display: block;
-            animation: slideDown 0.3s ease;
+            animation: slideDown 0.3s ease-out;
         }
 
         @keyframes slideDown {
@@ -400,34 +398,26 @@
             }
         }
 
-        .quiz-score {
-            background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
-            color: var(--white);
-            padding: 16px 20px;
-            border-radius: 12px;
-            text-align: center;
-            font-weight: 600;
-            margin-bottom: 16px;
-        }
-
-        .message {
-            padding: 16px 20px;
-            border-radius: 12px;
-            margin-bottom: 16px;
-            text-align: center;
-            font-weight: 500;
-        }
-
         .error-message {
             background: #fef2f2;
             color: var(--error);
+            padding: 16px 20px;
+            border-radius: 12px;
             border: 1px solid #fecaca;
+            margin-top: 16px;
+            text-align: center;
+            font-weight: 500;
         }
 
         .success-message {
             background: #f0fdf4;
             color: var(--success);
+            padding: 16px 20px;
+            border-radius: 12px;
             border: 1px solid #bbf7d0;
+            margin-top: 16px;
+            text-align: center;
+            font-weight: 500;
         }
 
         .floating-elements {
@@ -476,6 +466,7 @@
             50% { transform: translateY(-20px) rotate(180deg); }
         }
 
+        /* Animations d'entrée */
         .fade-in {
             animation: fadeIn 0.5s ease-out;
         }
@@ -491,6 +482,7 @@
             }
         }
 
+        /* Responsive optimizations */
         @media (min-width: 640px) {
             .container {
                 max-width: 640px;
@@ -507,6 +499,7 @@
             }
         }
 
+        /* Accessibilité et focus states améliorés */
         @media (prefers-reduced-motion: reduce) {
             *, *::before, *::after {
                 animation-duration: 0.01ms !important;
@@ -517,6 +510,7 @@
     </style>
 </head>
 <body>
+    <!-- Éléments flottants décoratifs -->
     <div class="floating-elements">
         <div class="floating-circle"></div>
         <div class="floating-circle"></div>
@@ -579,79 +573,53 @@
     </div>
 
     <script>
-        // Données de démonstration
-        const DEMO_DATA = {
-            flashcards: {
-                "histoire": [
-                    { question: "Quand a eu lieu la Révolution française ?", answer: "La Révolution française a eu lieu de 1789 à 1799." },
-                    { 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." },
-                    { 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." },
-                    { 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." },
-                    { 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." }
-                ],
-                "python": [
-                    { question: "Comment déclarer une liste en Python ?", answer: "ma_liste = [] ou ma_liste = [1, 2, 3]" },
-                    { question: "Quelle est la différence entre une liste et un tuple ?", answer: "Les listes sont mutables (modifiables) alors que les tuples sont immutables." },
-                    { question: "Comment créer une fonction en Python ?", answer: "def ma_fonction(): suivi du code indenté" },
-                    { 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." },
-                    { question: "Comment gérer les exceptions ?", answer: "Avec try/except : try: code_risque except Exception: gestion_erreur" }
-                ]
-            },
-            quiz: {
-                "histoire": [
+        document.addEventListener('DOMContentLoaded', function() {
+            const form = document.getElementById('generateForm');
+            const generateBtn = document.getElementById('generateBtn');
+            const resultsContainer = document.getElementById('results');
+
+            // Données d'exemple pour la démonstration
+            const sampleData = {
+                flashcards: [
                     {
-                        question: "En quelle année a commencé la Révolution française ?",
-                        options: ["1789", "1799", "1792", "1794"],
-                        correctAnswer: "1789",
-                        explanation: "La Révolution française a commencé en 1789 avec la convocation des États généraux et la prise de la Bastille."
+                        question: "Qu'est-ce que la photosynthèse ?",
+                        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."
                     },
                     {
-                        question: "Qui était surnommé 'l'Incorruptible' ?",
-                        options: ["Danton", "Robespierre", "Marat", "Saint-Just"],
-                        correctAnswer: "Robespierre",
-                        explanation: "Maximilien de Robespierre était surnommé 'l'Incorruptible' pour son intégrité morale supposée."
+                        question: "Quelle est la formule chimique de l'eau ?",
+                        answer: "H2O - deux atomes d'hydrogène liés à un atome d'oxygène."
                     },
                     {
-                        question: "Quel événement marque la fin de la Révolution française ?",
-                        options: ["Coup d'État du 18 Brumaire", "Mort de Robespierre", "Concordat", "Bataille de Waterloo"],
-                        correctAnswer: "Coup d'État du 18 Brumaire",
-                        explanation: "Le coup d'État du 18 Brumaire (1799) par Napoléon Bonaparte marque traditionnellement la fin de la Révolution française."
+                        question: "Qui a développé la théorie de la relativité ?",
+                        answer: "Albert Einstein a développé la théorie de la relativité restreinte (1905) et générale (1915)."
                     }
                 ],
-                "python": [
+                quiz: [
                     {
-                        question: "Quel est le type de données de '123' en Python ?",
-                        options: ["int", "float", "str", "bool"],
-                        correctAnswer: "str",
-                        explanation: "Les guillemets indiquent que '123' est une chaîne de caractères (string), pas un nombre."
+                        question: "Quelle est la capitale de la France ?",
+                        options: ["Lyon", "Paris", "Marseille", "Bordeaux"],
+                        correctAnswer: "Paris",
+                        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."
                     },
                     {
-                        question: "Comment obtenir la longueur d'une liste ?",
-                        options: ["list.length()", "len(list)", "size(list)", "length(list)"],
-                        correctAnswer: "len(list)",
-                        explanation: "La fonction len() retourne le nombre d'éléments dans une séquence."
+                        question: "Combien de chromosomes possède l'être humain ?",
+                        options: ["44", "46", "48", "50"],
+                        correctAnswer: "46",
+                        explanation: "L'être humain possède 46 chromosomes organisés en 23 paires dans chaque cellule somatique."
                     },
                     {
-                        question: "Que fait l'opérateur % en Python ?",
-                        options: ["Division", "Modulo", "Pourcentage", "Multiplication"],
-                        correctAnswer: "Modulo",
-                        explanation: "L'opérateur % retourne le reste de la division euclidienne."
+                        question: "Quel est l'élément chimique le plus abondant dans l'univers ?",
+                        options: ["Oxygène", "Carbone", "Hydrogène", "Hélium"],
+                        correctAnswer: "Hydrogène",
+                        explanation: "L'hydrogène représente environ 75% de la masse normale de l'univers et constitue le carburant principal des étoiles."
                     }
                 ]
-            }
-        };
-
-        let currentQuizAnswers = {};
-
-        document.addEventListener('DOMContentLoaded', function() {
-            const form = document.getElementById('generateForm');
-            const generateBtn = document.getElementById('generateBtn');
-            const resultsContainer = document.getElementById('results');
+            };
 
-            form.addEventListener('submit', function(e) {
+            form.addEventListener('submit', async function(e) {
                 e.preventDefault();
                 
-                const topic = document.getElementById('topic').value.trim().toLowerCase();
+                const topic = document.getElementById('topic').value.trim();
                 const type = document.querySelector('input[name="type"]:checked').value;
                 
                 if (!topic) {
@@ -659,199 +627,124 @@
                     return;
                 }
 
+                // Animation du bouton
                 generateBtn.classList.add('loading');
                 generateBtn.disabled = true;
                 resultsContainer.innerHTML = '';
 
-                // Simulation d'un délai de génération
+                // Simulation d'une requête (remplacez par votre API)
                 setTimeout(() => {
-                    const data = window.generateContent(topic, type);
-                    if (data) {
-                        displayResults(data, type, topic);
+                    try {
+                        displayResults(sampleData[type], type);
                         showMessage(`${type === 'flashcards' ? 'Flashcards' : 'Quiz'} généré avec succès !`, 'success');
-                    } else {
-                        showMessage('Sujet non reconnu. Essayez "histoire", "python", "mathématiques" ou "sciences" pour une démonstration.', 'error');
+                    } catch (error) {
+                        console.error('Erreur:', error);
+                        showMessage('Une erreur est survenue lors de la génération.', 'error');
+                    } finally {
+                        // Restaurer le bouton
+                        generateBtn.classList.remove('loading');
+                        generateBtn.disabled = false;
                     }
-                    
-                    generateBtn.classList.remove('loading');
-                    generateBtn.disabled = false;
                 }, 1500);
             });
 
-            function generateContent(topic, type) {
-                // Recherche par mots-clés
-                const keywords = {
-                    'histoire': ['histoire', 'révolution', 'française', 'france', 'roi', 'louis'],
-                    'python': ['python', 'programmation', 'code', 'langage', 'développement']
-                };
-
-                for (const [key, words] of Object.entries(keywords)) {
-                    if (words.some(word => topic.includes(word))) {
-                        return DEMO_DATA[type][key];
-                    }
-                }
-                
-                return null;
-            }
-
-            function displayResults(data, type, topic) {
+            function displayResults(data, type) {
                 resultsContainer.innerHTML = '';
-                currentQuizAnswers = {};
                 
                 if (type === 'flashcards') {
-                    displayFlashcards(data);
-                } else {
-                    displayQuiz(data);
-                }
-            }
-
-            function displayFlashcards(flashcards) {
-                flashcards.forEach((item, index) => {
-                    const flashcardEl = document.createElement('div');
-                    flashcardEl.className = 'flashcard fade-in';
-                    flashcardEl.style.animationDelay = `${index * 0.1}s`;
-                    flashcardEl.innerHTML = `
-                        <div class="flip-indicator">
-                            <i class="fas fa-redo"></i> Cliquez pour retourner
-                        </div>
-                        <div class="card-front">
-                            <h3><i class="fas fa-question"></i> ${item.question}</h3>
-                        </div>
-                        <div class="card-back">
-                            <div>
-                                <i class="fas fa-lightbulb"></i>
-                                <p style="margin-top: 10px;">${item.answer}</p>
+                    data.forEach((item, index) => {
+                        const flashcardEl = document.createElement('div');
+                        flashcardEl.className = 'flashcard fade-in';
+                        flashcardEl.style.animationDelay = `${index * 0.1}s`;
+                        flashcardEl.innerHTML = `
+                            <div class="flashcard-content">
+                                <div class="flashcard-front">
+                                    <h3><i class="fas fa-question"></i> ${item.question}</h3>
+                                    <div class="flip-hint">
+                                        <i class="fas fa-sync-alt"></i> Cliquez pour retourner
+                                    </div>
+                                </div>
+                                <div class="flashcard-back">
+                                    <i class="fas fa-lightbulb"></i> ${item.answer}
+                                </div>
                             </div>
-                        </div>
-                    `;
-                    
-                    flashcardEl.addEventListener('click', function() {
-                        this.classList.toggle('flipped');
-                    });
-                    
-                    resultsContainer.appendChild(flashcardEl);
-                });
-            }
-
-            function displayQuiz(questions) {
-                questions.forEach((item, questionIndex) => {
-                    const quizEl = document.createElement('div');
-                    quizEl.className = 'quiz-question fade-in';
-                    quizEl.style.animationDelay = `${questionIndex * 0.1}s`;
-                    
-                    const optionsHtml = item.options.map((option, optionIndex) => `
-                        <div class="quiz-option" data-question="${questionIndex}" data-option="${option}">
-                            ${option}
-                            <i class="fas fa-check option-icon" style="color: var(--success);"></i>
-                            <i class="fas fa-times option-icon" style="color: var(--error);"></i>
-                        </div>
-                    `).join('');
-                    
-                    quizEl.innerHTML = `
-                        <h3><i class="fas fa-question-circle"></i> ${item.question}</h3>
-                        <div class="quiz-options">${optionsHtml}</div>
-                        <div class="quiz-explanation">
-                            <i class="fas fa-info-circle"></i> <strong>Explication :</strong> ${item.explanation}
-                        </div>
-                    `;
-                    
-                    // Ajouter les événements aux options
-                    const options = quizEl.querySelectorAll('.quiz-option');
-                    options.forEach(option => {
-                        option.addEventListener('click', function() {
-                            handleQuizAnswer(this, item, questionIndex);
+                        `;
+                        
+                        // Ajouter l'événement de retournement
+                        flashcardEl.addEventListener('click', function() {
+                            this.classList.toggle('flipped');
                         });
+                        
+                        resultsContainer.appendChild(flashcardEl);
                     });
-                    
-                    resultsContainer.appendChild(quizEl);
-                });
-
-                // Ajouter le score à la fin
-                setTimeout(() => {
-                    addQuizScore(questions.length);
-                }, questions.length * 100 + 500);
-            }
-
-            function handleQuizAnswer(selectedOption, question, questionIndex) {
-                const allOptions = selectedOption.parentNode.querySelectorAll('.quiz-option');
-                const explanation = selectedOption.closest('.quiz-question').querySelector('.quiz-explanation');
-                
-                // Empêcher de répondre plusieurs fois à la même question
-                if (currentQuizAnswers[questionIndex]) {
-                    return;
-                }
-
-                currentQuizAnswers[questionIndex] = {
-                    selected: selectedOption.dataset.option,
-                    correct: question.correctAnswer,
-                    isCorrect: selectedOption.dataset.option === question.correctAnswer
-                };
-
-                // Marquer la réponse sélectionnée
-                selectedOption.classList.add('selected');
-
-                // Révéler les bonnes et mauvaises réponses
-                allOptions.forEach(option => {
-                    const isCorrect = option.dataset.option === question.correctAnswer;
-                    const isSelected = option === selectedOption;
-                    
-                    if (isCorrect) {
-                        option.classList.add('correct-answer');
-                    } else if (isSelected) {
-                        option.classList.add('incorrect-answer');
-                    }
-                    
-                    // Désactiver toutes les options
-                    option.style.pointerEvents = 'none';
-                });
-
-                // Afficher l'explication
-                explanation.classList.add('show');
-
-                updateQuizScore();
-            }
-
-            function addQuizScore(totalQuestions) {
-                const scoreEl = document.createElement('div');
-                scoreEl.className = 'quiz-score fade-in';
-                scoreEl.innerHTML = `
-                    <h3><i class="fas fa-chart-bar"></i> Score Final</h3>
-                    <div id="score-display">Répondez aux questions pour voir votre score</div>
-                `;
-                resultsContainer.insertBefore(scoreEl, resultsContainer.firstChild);
-                updateQuizScore();
-            }
-
-            function updateQuizScore() {
-                const scoreDisplay = document.getElementById('score-display');
-                if (!scoreDisplay) return;
-
-                const totalAnswered = Object.keys(currentQuizAnswers).length;
-                const correctAnswers = Object.values(currentQuizAnswers).filter(answer => answer.isCorrect).length;
-                const totalQuestions = Object.keys(currentQuizAnswers).length > 0 ? 
-                    Math.max(...Object.keys(currentQuizAnswers).map(Number)) + 1 : 0;
-
-                if (totalAnswered === 0) {
-                    scoreDisplay.innerHTML = 'Répondez aux questions pour voir votre score';
                 } else {
-                    const percentage = Math.round((correctAnswers / totalAnswered) * 100);
-                    scoreDisplay.innerHTML = `
-                        ${correctAnswers}/${totalAnswered} bonnes réponses (${percentage}%)
-                        ${totalAnswered < totalQuestions ? '<br><small>Continuez à répondre...</small>' : ''}
-                    `;
+                    data.forEach((item, index) => {
+                        const quizEl = document.createElement('div');
+                        quizEl.className = 'quiz-question fade-in';
+                        quizEl.style.animationDelay = `${index * 0.1}s`;
+                        
+                        const optionsHtml = item.options.map(option => `
+                            <div class="quiz-option" data-option="${option}">
+                                <i class="fas fa-check"></i>
+                                <i class="fas fa-times"></i>
+                                ${option}
+                            </div>
+                        `).join('');
+                        
+                        quizEl.innerHTML = `
+                            <h3><i class="fas fa-question-circle"></i> ${item.question}</h3>
+                            <div class="quiz-options">${optionsHtml}</div>
+                            <div class="quiz-explanation">
+                                <i class="fas fa-info-circle"></i> <strong>Explication :</strong> ${item.explanation}
+                            </div>
+                        `;
+                        
+                        // Ajouter les événements de clic pour les options
+                        const options = quizEl.querySelectorAll('.quiz-option');
+                        const explanation = quizEl.querySelector('.quiz-explanation');
+                        
+                        options.forEach(option => {
+                            option.addEventListener('click', function() {
+                                if (this.classList.contains('disabled')) return;
+                                
+                                const selectedAnswer = this.dataset.option;
+                                
+                                // Désactiver toutes les options
+                                options.forEach(opt => opt.classList.add('disabled'));
+                                
+                                // Marquer la réponse sélectionnée
+                                this.classList.add('selected');
+                                
+                                // Révéler les bonnes et mauvaises réponses
+                                options.forEach(opt => {
+                                    if (opt.dataset.option === item.correctAnswer) {
+                                        opt.classList.add('correct');
+                                    } else {
+                                        opt.classList.add('incorrect');
+                                    }
+                                });
+                                
+                                // Afficher l'explication
+                                explanation.classList.add('show');
+                                explanation.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                            });
+                        });
+                        
+                        resultsContainer.appendChild(quizEl);
+                    });
                 }
             }
 
             function showMessage(message, type) {
                 const messageEl = document.createElement('div');
-                messageEl.className = `message ${type}-message fade-in`;
+                messageEl.className = `${type}-message fade-in`;
                 messageEl.innerHTML = `
                     <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
                     ${message}
                 `;
                 
                 // Supprimer les anciens messages
-                const oldMessages = document.querySelectorAll('.message');
+                const oldMessages = document.querySelectorAll('.error-message, .success-message');
                 oldMessages.forEach(msg => msg.remove());
                 
                 resultsContainer.insertBefore(messageEl, resultsContainer.firstChild);
@@ -873,108 +766,7 @@
                     this.closest('.form-group').style.transform = 'scale(1)';
                 });
             });
-
-            // Animation des cartes au scroll
-            const observerOptions = {
-                threshold: 0.1,
-                rootMargin: '0px 0px -50px 0px'
-            };
-
-            const observer = new IntersectionObserver(function(entries) {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        entry.target.classList.add('fade-in');
-                    }
-                });
-            }, observerOptions);
-
-            // Ajouter des sujets supplémentaires pour la démonstration
-            const additionalTopics = {
-                flashcards: {
-                    "mathématiques": [
-                        { 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." },
-                        { question: "Comment calcule-t-on l'aire d'un cercle ?", answer: "Aire = π × r² où r est le rayon du cercle." },
-                        { 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." },
-                        { question: "Combien vaut π (pi) approximativement ?", answer: "π ≈ 3,14159..." },
-                        { 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." }
-                    ],
-                    "sciences": [
-                        { 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." },
-                        { question: "Qu'est-ce que la photosynthèse ?", answer: "Processus par lequel les plantes convertissent la lumière solaire en énergie chimique." },
-                        { 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." },
-                        { question: "Qu'est-ce que l'ADN ?", answer: "L'acide désoxyribonucléique, molécule qui contient l'information génétique." },
-                        { question: "Quelle est la température d'ébullition de l'eau ?", answer: "L'eau bout à 100°C (373 K) sous pression atmosphérique normale." }
-                    ]
-                },
-                quiz: {
-                    "mathématiques": [
-                        {
-                            question: "Combien font 2³ (2 puissance 3) ?",
-                            options: ["6", "8", "9", "12"],
-                            correctAnswer: "8",
-                            explanation: "2³ = 2 × 2 × 2 = 8"
-                        },
-                        {
-                            question: "Dans un triangle, la somme des angles fait :",
-                            options: ["90°", "180°", "270°", "360°"],
-                            correctAnswer: "180°",
-                            explanation: "La somme des angles intérieurs d'un triangle fait toujours 180°."
-                        },
-                        {
-                            question: "Qu'est-ce que √16 ?",
-                            options: ["2", "4", "6", "8"],
-                            correctAnswer: "4",
-                            explanation: "√16 = 4 car 4 × 4 = 16"
-                        }
-                    ],
-                    "sciences": [
-                        {
-                            question: "Quel gaz représente environ 78% de l'atmosphère terrestre ?",
-                            options: ["Oxygène", "Azote", "Argon", "Dioxyde de carbone"],
-                            correctAnswer: "Azote",
-                            explanation: "L'azote (N₂) compose environ 78% de l'atmosphère terrestre."
-                        },
-                        {
-                            question: "Combien de chromosomes possède l'être humain ?",
-                            options: ["44", "46", "48", "50"],
-                            correctAnswer: "46",
-                            explanation: "L'être humain possède 46 chromosomes (23 paires)."
-                        },
-                        {
-                            question: "Quelle planète est la plus proche du Soleil ?",
-                            options: ["Vénus", "Terre", "Mercure", "Mars"],
-                            correctAnswer: "Mercure",
-                            explanation: "Mercure est la planète la plus proche du Soleil dans notre système solaire."
-                        }
-                    ]
-                }
-            };
-
-            // Fusionner avec les données existantes
-            Object.keys(additionalTopics.flashcards).forEach(topic => {
-                DEMO_DATA.flashcards[topic] = additionalTopics.flashcards[topic];
-            });
-            Object.keys(additionalTopics.quiz).forEach(topic => {
-                DEMO_DATA.quiz[topic] = additionalTopics.quiz[topic];
-            });
-
-            // Mise à jour de la fonction generateContent pour inclure plus de sujets
-            function generateContentUpdated(topic, type) {
-                const keywords = {
-                    'histoire': ['histoire', 'révolution', 'française', 'france', 'roi', 'louis', 'historique'],
-                    'python': ['python', 'programmation', 'code', 'langage', 'développement', 'informatique'],
-                    'mathématiques': ['math', 'mathématiques', 'calcul', 'géométrie', 'algèbre', 'nombre'],
-                    'sciences': ['science', 'physique', 'chimie', 'biologie', 'nature', 'expérience']
-                };
-
-                for (const [key, words] of Object.entries(keywords)) {
-                    if (words.some(word => topic.includes(word))) {
-                        return DEMO_DATA[type][key];
-                    }
-                }
-                
-                return null;
-            }
-
-            // Remplacer la fonction generateContent originale
-            window.generateContent = generateContentUpdated;
+        });
+    </script>
+</body>
+</html>