Spaces:

Docfile
/

Attaque2

Sleeping

App Files Files Community

Docfile commited on Apr 6, 2025

Commit

1d80589

verified ·

1 Parent(s): 57b6ed4

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +131 -432

templates/index.html CHANGED Viewed

@@ -3,51 +3,44 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Générateur de Quiz IA</title>
     <style>
-        /* Styles généraux */
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
             line-height: 1.6;
             padding: 20px;
             max-width: 800px;
             margin: 40px auto;
-            background-color: #f4f7f9; /* Couleur de fond légèrement différente */
             color: #333;
         }
         .container {
             background-color: #fff;
-            padding: 30px 40px; /* Plus de padding horizontal */
             border-radius: 8px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Ombre plus douce */
         }
         h1 {
             text-align: center;
             color: #2c3e50;
-            margin-bottom: 35px; /* Plus d'espace sous le titre */
         }
-        /* Section d'entrée */
-        .input-section {
-            display: flex;
-            flex-wrap: wrap; /* Permet au bouton de passer en dessous sur petit écran */
-            gap: 10px; /* Espace entre l'input et le bouton */
-            margin-bottom: 25px;
-        }
-        .input-section label {
-            flex-basis: 100%; /* Le label prend toute la largeur */
             margin-bottom: 8px;
             font-weight: bold;
             color: #555;
         }
-        .input-section input[type="text"] {
-            flex-grow: 1; /* L'input prend l'espace restant */
-            padding: 12px 15px;
             border: 1px solid #ccc;
             border-radius: 4px;
             font-size: 1rem;
-            box-sizing: border-box;
         }
-        .input-section button {
             padding: 12px 20px;
             background-color: #3498db;
             color: white;
@@ -56,512 +49,218 @@
             cursor: pointer;
             font-size: 1rem;
             transition: background-color 0.3s ease;
-            white-space: nowrap; /* Empêche le texte du bouton de se casser */
         }
-        .input-section button:hover {
             background-color: #2980b9;
         }
-        .input-section button:disabled {
             background-color: #bdc3c7;
             cursor: not-allowed;
         }
-        /* Styles pour les messages de statut */
-         #statusMessage {
             margin-top: 20px;
-            margin-bottom: 20px; /* Espace après le message */
-            padding: 12px 15px; /* Padding un peu plus grand */
             border-radius: 4px;
             text-align: center;
             font-weight: bold;
-            display: none; /* Caché par défaut */
-            border-left: 5px solid; /* Barre latérale pour accentuer */
         }
-        #statusMessage.loading { background-color: #eaf2f8; color: #3498db; border-left-color: #3498db;}
-        #statusMessage.error { background-color: #fdedec; color: #c0392b; border-left-color: #c0392b;} /* Rouge plus doux */
-        #statusMessage.success { background-color: #e8f6f3; color: #1abc9c; border-left-color: #1abc9c;}
-        #statusMessage.info { background-color: #fef9e7; color: #f39c12; border-left-color: #f39c12;} /* Jaune/Orange doux */
-        /* Styles pour le Quiz */
-        #quizContainer {
-            margin-top: 30px;
-            border-top: 1px solid #eee;
-            padding-top: 25px;
         }
-        .quiz-question {
-            background-color: #ffffff; /* Fond blanc pour les questions */
-            border: 1px solid #e0e0e0; /* Bordure plus légère */
-            border-radius: 6px; /* Coins légèrement plus arrondis */
-            padding: 20px 25px;
-            margin-bottom: 25px; /* Plus d'espace entre les questions */
-            box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Légère ombre portée */
         }
-        .quiz-question p.question-text { /* Classe spécifique pour le texte de la question */
-             font-weight: 600; /* Semi-bold */
-             margin: 0 0 18px 0; /* Ajustement des marges */
-             color: #34495e;
-             font-size: 1.1em;
-             line-height: 1.4;
         }
-        .options-list {
-            list-style: none;
-            padding: 0;
-            margin: 0;
         }
-        .option-item {
-            margin-bottom: 12px; /* Espacement des options */
-            padding: 10px 12px; /* Padding interne */
-            border-radius: 4px;
             cursor: pointer;
-            transition: background-color 0.2s ease, border-color 0.2s ease;
-            border: 1px solid #eee; /* Bordure légère par défaut */
-            background-color: #f9fafb; /* Fond très léger pour les options */
-        }
-         .option-item:hover:not(.disabled) { /* Ne pas appliquer le hover si vérifié */
-             background-color: #f0f4f8; /* Hover subtil */
-             border-color: #dbe4f0;
-         }
-        .option-item input[type="radio"] {
-            margin-right: 12px; /* Plus d'espace avant le texte */
-            vertical-align: middle;
-             /* Cacher la radio native pour la personnaliser (plus avancé) */
-             /* appearance: none; -webkit-appearance: none; */
         }
-         .option-item label {
-             font-weight: normal;
-             display: inline;
-             margin-bottom: 0;
-             vertical-align: middle;
-             color: #333;
-             cursor: pointer;
-             width: calc(100% - 30px); /* S'assurer que le label remplit l'espace */
-         }
-        /* Styles pour le feedback (après vérification) */
-        .option-item.correct {
-            background-color: #d4efdf;
-            border-color: #2ecc71;
-            font-weight: 500; /* Medium weight */
-            color: #145a32; /* Texte plus foncé */
-        }
-        .option-item.incorrect {
-            background-color: #fdedec;
-            border-color: #e74c3c;
-            color: #943126; /* Texte plus foncé */
-            /* Ajouter un style pour l'élément sélectionné incorrect */
-            /* text-decoration: line-through; */
-        }
-         /* Style spécifique pour la *bonne* réponse quand une *mauvaise* a été choisie */
-        .option-item.missed-correct {
-             /* Similaire à correct mais peut-être moins prononcé ou juste une bordure */
-             border: 2px solid #2ecc71;
-             box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.3); /* Halo léger */
-        }
-        /* Désactiver le hover et le curseur après vérification */
-        .option-item.disabled {
-             cursor: default;
-             opacity: 0.9; /* Légère transparence */
-         }
-        .option-item.disabled:hover {
-             background-color: inherit; /* Annule le hover */
-             border-color: inherit;
-         }
-        /* Style pour l'explication */
-        .explanation {
-            margin-top: 18px; /* Espace avant l'explication */
-            padding: 12px 15px;
-            background-color: #eaf2f8;
-            border-left: 4px solid #3498db;
-            font-size: 0.95em;
-            color: #2c3e50; /* Couleur de texte pour l'explication */
-            display: none; /* Caché jusqu'à la vérification */
-            border-radius: 0 4px 4px 0; /* Arrondi sur les coins droits */
-        }
-        .explanation strong {
-            color: #2980b9; /* Couleur pour le mot "Explication" */
         }
-        .explanation.visible {
-             display: block;
-         }
-        /* Style pour le bouton de soumission et le score */
-        #submitQuizButton {
-             display: block;
-             margin: 35px auto 15px auto; /* Centré, plus d'espace au-dessus */
-             padding: 12px 30px; /* Bouton plus large */
-             background-color: #2ecc71; /* Vert */
-             color: white;
-             border: none;
-             border-radius: 5px; /* Coins un peu plus arrondis */
-             cursor: pointer;
-             font-size: 1.1rem;
-             font-weight: 500;
-             transition: background-color 0.3s ease, transform 0.1s ease;
-             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
-        #submitQuizButton:hover:not(:disabled) {
-            background-color: #27ae60;
-            transform: translateY(-1px); /* Léger effet de soulèvement */
         }
-        #submitQuizButton:disabled {
-            background-color: #95a5a6; /* Gris quand désactivé */
-            cursor: not-allowed;
-             box-shadow: none;
-             transform: none;
         }
-         #scoreContainer {
-             text-align: center;
-             font-size: 1.3em; /* Score plus grand */
-             font-weight: bold;
-             margin-top: 25px;
-             padding: 18px; /* Plus de padding */
-             background-color: #ecf0f1; /* Fond gris clair */
-             border-radius: 5px;
-             color: #2c3e50;
-             border: 1px solid #dce4ec;
-             display: none; /* Caché initialement */
-         }
-         #scoreContainer .score-value { /* Pour styliser le score lui-même */
-              color: #3498db; /* Score en bleu */
-              font-size: 1.1em; /* Encore plus grand */
-         }
-        /* Responsive */
         @media (max-width: 600px) {
-            .container {
-                padding: 20px; /* Moins de padding sur petit écran */
-            }
-            .input-section {
-                flex-direction: column; /* Input et bouton l'un sous l'autre */
-            }
-            .input-section input[type="text"],
-            .input-section button {
-                width: 100%; /* Pleine largeur */
             }
-            h1 {
-                font-size: 1.8em; /* Titre légèrement plus petit */
             }
-            .quiz-question {
-                padding: 15px;
-            }
-            #submitQuizButton {
-                width: 90%;
-                padding: 12px 20px;
-            }
-             #scoreContainer {
-                 font-size: 1.1em;
-             }
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>Générateur de Quiz IA</h1>
-        <div class="input-section">
-            <label for="topicInput">Entrez un sujet pour le quiz :</label>
-            <input type="text" id="topicInput" placeholder="Ex: La Révolution Française">
-            <button id="generateButton">Générer le Quiz</button>
         </div>
-        <div id="statusMessage"></div> <!-- Zone pour les messages (chargement, erreurs, succès) -->
-        <div id="quizContainer">
-            <!-- Le quiz généré apparaîtra ici -->
         </div>
-        <!-- Bouton pour soumettre/vérifier les réponses (initialement caché) -->
-        <button id="submitQuizButton" style="display: none;">Vérifier mes réponses</button>
-        <!-- Zone pour afficher le score (initialement cachée) -->
-        <div id="scoreContainer" style="display: none;"></div>
     </div>
     <script>
-        // Références aux éléments du DOM
         const topicInput = document.getElementById('topicInput');
         const generateButton = document.getElementById('generateButton');
         const statusMessage = document.getElementById('statusMessage');
-        const quizContainer = document.getElementById('quizContainer');
-        const submitQuizButton = document.getElementById('submitQuizButton');
-        const scoreContainer = document.getElementById('scoreContainer');
-        // Variable pour stocker les données du quiz actuel (questions, réponses, explications)
-        let currentQuizData = [];
-        // --- ÉCOUTEURS D'ÉVÉNEMENTS ---
         generateButton.addEventListener('click', handleGenerateClick);
-        // Permet de lancer la génération avec la touche Entrée
         topicInput.addEventListener('keypress', function(event) {
             if (event.key === 'Enter') {
-                event.preventDefault(); // Empêche le comportement par défaut (qui pourrait être une soumission de formulaire)
                 handleGenerateClick();
             }
         });
-        // Vérification des réponses au clic
-        submitQuizButton.addEventListener('click', checkAnswers);
-        // --- FONCTIONS PRINCIPALES ---
-        /**
-         * Gère le clic sur le bouton "Générer le Quiz".
-         * Lance la requête vers le backend Flask.
-         */
         async function handleGenerateClick() {
             const topic = topicInput.value.trim();
             if (!topic) {
                 displayMessage('Veuillez entrer un sujet.', 'error');
                 return;
             }
-            // Réinitialisation de l'interface et état de chargement
             generateButton.disabled = true;
-            topicInput.disabled = true; // Désactiver aussi l'input pendant le chargement
-            quizContainer.innerHTML = ''; // Vider l'ancien quiz
-            submitQuizButton.style.display = 'none'; // Cacher le bouton de soumission
-            submitQuizButton.disabled = true; // Désactiver au cas où il serait déjà visible
-             submitQuizButton.textContent = 'Vérifier mes réponses'; // Reset text
-            scoreContainer.style.display = 'none'; // Cacher le score précédent
-            displayMessage('Génération du quiz en cours... Cela peut prendre quelques instants.', 'loading');
             try {
-                // Appel à l'API backend
                 const response = await fetch('/generate', {
                     method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ topic: topic }),
                 });
-                const data = await response.json(); // Tenter de parser JSON même si erreur HTTP
                 clearMessage(); // Effacer le message de chargement
                 if (!response.ok) {
-                    // Gérer les erreurs HTTP et les erreurs retournées par le backend
-                    const errorMsg = data?.error || `Erreur serveur ${response.status}.`;
-                    console.error("Erreur backend:", data); // Log l'erreur complète pour le débogage
-                    throw new Error(errorMsg);
                 }
-                // Traitement de la réponse réussie
-                if (data.success && data.quiz && Array.isArray(data.quiz)) {
-                    if (data.quiz.length > 0) {
-                        currentQuizData = data.quiz; // Stocker les données du quiz
-                        displayQuiz(currentQuizData); // Afficher le quiz
-                        displayMessage(`Quiz sur "${topic}" généré ! Répondez aux questions ci-dessous.`, 'success');
-                        submitQuizButton.style.display = 'block'; // Afficher le bouton Vérifier
-                        submitQuizButton.disabled = false; // Activer le bouton
                     } else {
-                        // L'IA a réussi mais n'a retourné aucune question
-                         displayMessage("Aucune question n'a pu être générée pour ce sujet. Essayez d'être plus précis ou un sujet différent.", 'info');
                     }
-                } else {
-                    // Réponse OK mais contenu inattendu ou erreur signalée dans 'data'
-                    throw new Error(data.error || 'Format de réponse inattendu du serveur.');
                 }
             } catch (error) {
-                // Gérer les erreurs réseau ou les erreurs levées pendant le traitement
-                console.error('Erreur lors de la génération du quiz:', error);
-                clearMessage(); // S'assurer que le message de chargement est parti
-                // Afficher un message d'erreur plus générique à l'utilisateur
-                displayMessage(`Erreur: ${error.message}. Veuillez réessayer ou contacter le support si le problème persiste.`, 'error');
             } finally {
-                // Réactiver les contrôles d'entrée dans tous les cas
                 generateButton.disabled = false;
-                topicInput.disabled = false;
             }
         }
-        /**
-         * Affiche les questions du quiz dans le conteneur HTML.
-         * @param {Array} quizData - Le tableau d'objets questions/réponses.
-         */
-        function displayQuiz(quizData) {
-            quizContainer.innerHTML = ''; // Nettoyer avant d'ajouter
-            quizData.forEach((q, index) => {
-                 // Validation robuste de la structure de chaque question
-                if (!q || typeof q.question !== 'string' || !Array.isArray(q.options) || q.options.length < 2 || typeof q.correct_answer !== 'string' || !q.options.includes(q.correct_answer)) {
-                    console.warn("Format de question de quiz invalide ou incomplet ignoré:", q);
-                    // Afficher un message à l'utilisateur pourrait être utile ici
-                    // displayMessage(`Erreur interne: Une des questions reçues est mal formée (index ${index}).`, 'warning'); // Créez un style .warning si besoin
-                    return; // Passer à la question suivante
-                }
-                const questionElement = document.createElement('div');
-                questionElement.classList.add('quiz-question');
-                // Stocker l'index pour une référence facile lors de la vérification
-                questionElement.dataset.questionIndex = index;
-                // Texte de la question
-                const questionText = document.createElement('p');
-                questionText.classList.add('question-text'); // Utiliser la classe spécifique
-                // Sanitize potentially harmful HTML, although usually not needed if source is trusted AI
-                // questionText.textContent = `${index + 1}. ${q.question}`; // Safer option
-                questionText.innerHTML = `${index + 1}. ${q.question}`; // Allows basic formatting if needed
-                questionElement.appendChild(questionText);
-                // Liste des options
-                const optionsList = document.createElement('div');
-                optionsList.classList.add('options-list');
-                // Mélanger les options pour éviter que la bonne réponse soit toujours à la même place
-                const shuffledOptions = [...q.options].sort(() => Math.random() - 0.5);
-                shuffledOptions.forEach((option, optionIndex) => {
-                    const optionId = `q${index}_option${optionIndex}`; // ID unique pour le label et l'input
-                    // Conteneur pour chaque option (radio + label)
-                    const optionItem = document.createElement('div');
-                    optionItem.classList.add('option-item');
-                    const radioInput = document.createElement('input');
-                    radioInput.type = 'radio';
-                    radioInput.id = optionId;
-                    radioInput.name = `question_${index}`; // Nom de groupe unique pour cette question
-                    radioInput.value = option; // La valeur est le texte de l'option (important pour la vérification)
-                    const radioLabel = document.createElement('label');
-                    radioLabel.htmlFor = optionId; // Lie le label à la radio
-                    // radioLabel.textContent = option; // Safer
-                    radioLabel.innerHTML = option; // Allows basic formatting in options
-                    // Ajoute un écouteur pour cliquer sur tout l'item sélectionne la radio
-                    optionItem.addEventListener('click', () => {
-                         if (!radioInput.disabled) { // Ne pas sélectionner si déjà vérifié/désactivé
-                            radioInput.checked = true;
-                         }
-                    });
-                    optionItem.appendChild(radioInput);
-                    optionItem.appendChild(radioLabel);
-                    optionsList.appendChild(optionItem);
-                });
-                questionElement.appendChild(optionsList);
-                 // Ajouter l'élément pour l'explication (caché initialement)
-                 // Vérifier que l'explication existe et n'est pas vide
-                if (q.explanation && typeof q.explanation === 'string' && q.explanation.trim() !== '') {
-                    const explanationElement = document.createElement('div');
-                    explanationElement.classList.add('explanation');
-                    // explanationElement.textContent = `Explication : ${q.explanation}`; // Safer
-                    explanationElement.innerHTML = `<strong>Explication :</strong> ${q.explanation}`; // Permet le gras
-                    questionElement.appendChild(explanationElement);
-                }
-                quizContainer.appendChild(questionElement);
-            });
         }
-        /**
-         * Vérifie les réponses sélectionnées par l'utilisateur, affiche le feedback et le score.
-         */
-        function checkAnswers() {
-            let score = 0;
-            const totalQuestions = currentQuizData.length;
-            if (totalQuestions === 0) return; // Ne rien faire s'il n'y a pas de quiz chargé
-            // Désactiver le bouton pendant la vérification
-            submitQuizButton.disabled = true;
-            submitQuizButton.textContent = 'Vérification...'; // Feedback visuel
-            // Optionnel: Faire défiler la page vers le haut pour voir le début du quiz/score
-            window.scrollTo({ top: quizContainer.offsetTop - 20, behavior: 'smooth' });
-            currentQuizData.forEach((qData, index) => {
-                const questionElement = quizContainer.querySelector(`.quiz-question[data-question-index="${index}"]`);
-                if (!questionElement) return; // Sécurité
-                const optionsItems = questionElement.querySelectorAll('.option-item');
-                // Trouver la radio qui est cochée pour cette question
-                const selectedRadio = questionElement.querySelector(`input[name="question_${index}"]:checked`);
-                const correctAnswerValue = qData.correct_answer;
-                const explanationElement = questionElement.querySelector('.explanation');
-                let questionAnswered = false; // Pour savoir si l'utilisateur a répondu
-                optionsItems.forEach(item => {
-                    const radio = item.querySelector('input[type="radio"]');
-                    item.classList.add('disabled'); // Désactiver visuellement l'item
-                    radio.disabled = true; // Désactiver la radio fonctionnellement
-                    // Retirer les anciens styles de feedback au cas où (ne devrait pas arriver normalement)
-                    item.classList.remove('correct', 'incorrect', 'missed-correct');
-                    // Vérifier si cette option est la bonne réponse
-                    if (radio.value === correctAnswerValue) {
-                        // C'est la bonne réponse
-                        if (selectedRadio && selectedRadio.value === correctAnswerValue) {
-                            // Et l'utilisateur l'a sélectionnée
-                            item.classList.add('correct');
-                            score++;
-                            questionAnswered = true;
-                        } else {
-                            // C'est la bonne réponse, mais l'utilisateur a choisi autre chose ou rien
-                            item.classList.add('missed-correct'); // Mettre en évidence la bonne réponse manquée
-                        }
-                    } else if (selectedRadio && selectedRadio.value === radio.value) {
-                        // C'est une mauvaise réponse, et l'utilisateur l'a sélectionnée
-                        item.classList.add('incorrect');
-                        questionAnswered = true;
-                    }
                 });
-                 // Afficher l'explication s'il y en a une et si la question a été répondue (ou toujours l'afficher ?)
-                // On choisit de toujours l'afficher après vérification
-                if (explanationElement) {
-                     explanationElement.classList.add('visible');
-                 }
-                 // Optionnel : Ajouter un style si la question n'a pas été répondue
-                 // if (!questionAnswered) { questionElement.style.opacity = '0.7'; }
             });
-            // Afficher le score final
-            scoreContainer.innerHTML = `Votre score : <span class="score-value">${score} / ${totalQuestions}</span>`;
-            scoreContainer.style.display = 'block';
-            // Mettre à jour le bouton de soumission (par ex., indiquer que c'est terminé)
-            submitQuizButton.textContent = 'Quiz Terminé !';
-            // Le bouton reste désactivé pour empêcher une nouvelle vérification
         }
-        // --- FONCTIONS UTILITAIRES ---
-        /**
-         * Affiche un message dans la zone de statut.
-         * @param {string} message - Le texte du message.
-         * @param {'info' | 'error' | 'loading' | 'success'} type - Le type de message pour le style CSS.
-         */
-        function displayMessage(message, type = 'info') {
-            statusMessage.textContent = message;
-            // Assigne la classe CSS correspondante (remplace les précédentes)
-            statusMessage.className = type;
-            statusMessage.style.display = 'block'; // Rendre visible
-        }
-        /**
-         * Efface le message de la zone de statut.
-         */
-        function clearMessage() {
-            statusMessage.textContent = '';
-            statusMessage.className = ''; // Retire toutes les classes de type
-            statusMessage.style.display = 'none'; // Cacher la zone
-        }
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Générateur de Flashcards IA</title>
     <style>
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
             line-height: 1.6;
             padding: 20px;
             max-width: 800px;
             margin: 40px auto;
+            background-color: #f4f4f4;
             color: #333;
         }
         .container {
             background-color: #fff;
+            padding: 30px;
             border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         }
         h1 {
             text-align: center;
             color: #2c3e50;
+            margin-bottom: 30px;
         }
+        label {
+            display: block;
             margin-bottom: 8px;
             font-weight: bold;
             color: #555;
         }
+        input[type="text"] {
+            width: calc(100% - 120px); /* Adjust width considering button size */
+            padding: 12px;
+            margin-bottom: 20px;
             border: 1px solid #ccc;
             border-radius: 4px;
             font-size: 1rem;
+            box-sizing: border-box; /* Include padding in width */
         }
+        button {
             padding: 12px 20px;
             background-color: #3498db;
             color: white;
             cursor: pointer;
             font-size: 1rem;
             transition: background-color 0.3s ease;
+            vertical-align: top; /* Align with input field */
         }
+        button:hover {
             background-color: #2980b9;
         }
+        button:disabled {
             background-color: #bdc3c7;
             cursor: not-allowed;
         }
+        #statusMessage {
             margin-top: 20px;
+            padding: 10px;
             border-radius: 4px;
             text-align: center;
             font-weight: bold;
         }
+        #statusMessage.loading {
+            background-color: #eaf2f8;
+            color: #3498db;
         }
+        #statusMessage.error {
+            background-color: #fbeae5;
+            color: #c0392b;
         }
+         #statusMessage.success {
+            background-color: #e8f6f3;
+            color: #1abc9c;
         }
+        #flashcardsContainer {
+            margin-top: 30px;
+            border-top: 1px solid #eee;
+            padding-top: 20px;
         }
+        .flashcard {
+            background-color: #f9f9f9;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            padding: 15px 20px;
+            margin-bottom: 15px;
             cursor: pointer;
+            transition: box-shadow 0.2s ease-in-out;
         }
+        .flashcard:hover {
+             box-shadow: 0 2px 5px rgba(0,0,0,0.1);
         }
+        .flashcard .question {
+            font-weight: bold;
+            margin-bottom: 10px;
+            color: #34495e;
         }
+        .flashcard .answer {
+            display: none; /* Hidden by default */
+            color: #555;
+            margin-top: 10px;
+            padding-top: 10px;
+            border-top: 1px dashed #ccc;
         }
+        .flashcard.flipped .answer {
+            display: block; /* Shown when .flipped class is added */
         }
         @media (max-width: 600px) {
+            input[type="text"] {
+                width: 100%;
+                margin-bottom: 10px;
             }
+            button {
+                width: 100%;
             }
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <h1>Générateur de Flashcards IA</h1>
+        <div>
+            <label for="topicInput">Entrez un sujet :</label>
+            <input type="text" id="topicInput" placeholder="Ex: Histoire de l'intelligence artificielle">
+            <button id="generateButton">Générer</button>
         </div>
+        <div id="statusMessage"></div>
+        <div id="flashcardsContainer">
+            <!-- Les flashcards générées apparaîtront ici -->
         </div>
     </div>
     <script>
         const topicInput = document.getElementById('topicInput');
         const generateButton = document.getElementById('generateButton');
         const statusMessage = document.getElementById('statusMessage');
+        const flashcardsContainer = document.getElementById('flashcardsContainer');
         generateButton.addEventListener('click', handleGenerateClick);
+        // Optionnel : Permettre de lancer la génération avec la touche Entrée dans le champ de texte
         topicInput.addEventListener('keypress', function(event) {
             if (event.key === 'Enter') {
+                event.preventDefault(); // Empêche la soumission de formulaire par défaut si enveloppé dans un <form>
                 handleGenerateClick();
             }
         });
         async function handleGenerateClick() {
             const topic = topicInput.value.trim();
             if (!topic) {
                 displayMessage('Veuillez entrer un sujet.', 'error');
                 return;
             }
+            // Désactiver le bouton et afficher le message de chargement
             generateButton.disabled = true;
+            flashcardsContainer.innerHTML = ''; // Vider les anciennes flashcards
+            displayMessage('Génération des flashcards en cours... Cela peut prendre un moment.', 'loading');
             try {
                 const response = await fetch('/generate', {
                     method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
                     body: JSON.stringify({ topic: topic }),
                 });
+                // Essayer de parser la réponse JSON même si le statut n'est pas OK (pour les messages d'erreur du backend)
+                const data = await response.json();
                 clearMessage(); // Effacer le message de chargement
                 if (!response.ok) {
+                    // Gérer les erreurs HTTP (4xx, 5xx) et les erreurs applicatives renvoyées dans le JSON
+                    const errorMsg = data?.error || `Erreur ${response.status}: ${response.statusText}`;
+                    throw new Error(errorMsg); // Provoque l'entrée dans le bloc catch
                 }
+                if (data.success && data.flashcards && Array.isArray(data.flashcards)) {
+                    if(data.flashcards.length > 0) {
+                        displayFlashcards(data.flashcards);
+                        displayMessage(`Flashcards générées pour "${topic}"! Cliquez sur une carte pour voir la réponse.`, 'success');
                     } else {
+                         displayMessage("Aucune flashcard n'a pu être générée pour ce sujet. Essayez d'être plus spécifique ou de reformuler.", 'info'); // Utiliser 'info' ou une classe dédiée
+                         statusMessage.style.backgroundColor = '#eaf2f8'; // Style pour info
+                         statusMessage.style.color = '#3498db';
                     }
+                } else if (data.error) {
+                    // Gérer les erreurs applicatives spécifiques renvoyées dans data.error
+                     displayMessage(`Erreur: ${data.error}`, 'error');
+                }
+                 else {
+                    // Cas où la réponse est 200 OK mais le format n'est pas celui attendu
+                    displayMessage('Réponse inattendue reçue du serveur.', 'error');
                 }
             } catch (error) {
+                // Gérer les erreurs réseau ou les erreurs levées lors du traitement de la réponse
+                console.error('Erreur lors de la requête de génération:', error);
+                clearMessage(); // Assurez-vous que le message de chargement est parti
+                displayMessage(`Erreur de communication: ${error.message}`, 'error');
             } finally {
+                // Réactiver le bouton dans tous les cas (succès ou échec)
                 generateButton.disabled = false;
             }
         }
+        function displayMessage(message, type = 'info') { // type peut être 'info', 'error', 'loading', 'success'
+            statusMessage.textContent = message;
+            statusMessage.className = type; // Appliquer la classe pour le style CSS
+            statusMessage.style.display = 'block'; // S'assurer que le message est visible
         }
+        function clearMessage() {
+            statusMessage.textContent = '';
+            statusMessage.className = '';
+            statusMessage.style.display = 'none'; // Cacher la zone de message
+        }
+        function displayFlashcards(flashcards) {
+            flashcardsContainer.innerHTML = ''; // Assurer que c'est vide avant d'ajouter
+            flashcards.forEach((card) => {
+                // Vérification simple de la structure attendue
+                if (typeof card.question !== 'string' || typeof card.answer !== 'string') {
+                     console.warn('Format de flashcard inattendu ignoré:', card);
+                     return; // Ignorer cette carte si elle n'a pas le bon format
+                }
+                const cardElement = document.createElement('div');
+                cardElement.classList.add('flashcard');
+                const questionElement = document.createElement('div');
+                questionElement.classList.add('question');
+                questionElement.textContent = `Q: ${card.question}`;
+                const answerElement = document.createElement('div');
+                answerElement.classList.add('answer');
+                answerElement.textContent = `R: ${card.answer}`;
+                cardElement.appendChild(questionElement);
+                cardElement.appendChild(answerElement);
+                // Ajouter l'interactivité: cliquer pour afficher/masquer la réponse
+                cardElement.addEventListener('click', () => {
+                    cardElement.classList.toggle('flipped');
                 });
+                flashcardsContainer.appendChild(cardElement);
             });
         }
     </script>
 </body>
 </html>