Attaque2

Running

App Files Files Community

Docfile commited on 4 days ago

Commit

feed3c1

verified ·

1 Parent(s): f87d6d7

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +568 -495

templates/index.html CHANGED Viewed

@@ -3,562 +3,635 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Générateur de Flashcards et Quiz | Apprentissage Amélioré</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
         body {
-            font-family: 'Poppins', sans-serif;
-            background-color: #f8fafc; /* Fallback */
-            background-image: linear-gradient(to bottom, #f0f9ff, #ffffff);
-            scroll-behavior: smooth;
         }
-        /* --- Styles Flashcards --- */
-        .flashcard {
-            perspective: 1000px;
-            height: 240px;
-            cursor: pointer;
         }
-        .flashcard-inner {
-            position: relative;
-            width: 100%;
-            height: 100%;
-            transition: transform 0.7s;
-            transform-style: preserve-3d;
         }
-        .flashcard.flipped .flashcard-inner {
-            transform: rotateY(180deg);
         }
-        .flashcard-front, .flashcard-back {
-            position: absolute;
             width: 100%;
-            height: 100%;
-            -webkit-backface-visibility: hidden;
-            backface-visibility: hidden;
             display: flex;
             align-items: center;
-            justify-content: center;
-            border-radius: 0.75rem;
-            padding: 1.5rem;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
             text-align: center;
         }
-        .flashcard-front {
-            background-color: #ffffff;
-            border: 1px solid #e2e8f0;
-            color: #1f2937;
         }
-        .flashcard-back {
-            background-color: #0ea5e9;
-            color: white;
-            transform: rotateY(180deg);
         }
-        /* --- Styles Quiz --- */
-        .quiz-option label {
-            transition: all 0.3s ease;
-            border: 2px solid #e5e7eb;
-            padding: 1rem 1.5rem;
-            border-radius: 0.5rem;
             cursor: pointer;
-            display: block;
         }
-        .quiz-option input[type="radio"]:checked + label {
-            border-color: #0ea5e9;
-            background-color: #e0f2fe;
-            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
         }
-        .quiz-option.correct label {
-            border-color: #10b981;
-            background-color: #d1fae5;
         }
-        .quiz-option.incorrect label {
-            border-color: #ef4444;
-            background-color: #fee2e2;
         }
-        /* --- Animations --- */
-        .shake {
-            animation: shake 0.5s ease-in-out;
         }
-        @keyframes shake {
-            0%, 100% { transform: translateX(0); }
-            25% { transform: translateX(-5px); }
-            75% { transform: translateX(5px); }
         }
-        .confetti {
-            position: fixed;
-            width: 10px;
-            height: 10px;
-            background-color: #f00;
             opacity: 0;
-            animation: confetti-fall 3s linear forwards;
         }
-        @keyframes confetti-fall {
-            0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
-            100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
         }
-        /* --- Classes Utilitaires Tailwind via @apply --- */
-        .btn-primary {
-            @apply bg-sky-600 text-white px-6 py-3 rounded-lg shadow-md hover:bg-sky-700 transition duration-300 ease-in-out transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-opacity-50 flex items-center justify-center disabled:bg-sky-300 disabled:cursor-not-allowed;
         }
-        .btn-secondary {
-            @apply bg-white text-sky-600 border border-sky-600 px-6 py-3 rounded-lg shadow-md hover:bg-sky-50 transition duration-300 ease-in-out transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-opacity-50 flex items-center justify-center;
         }
-    </style>
-</head>
-<body class="text-slate-800">
-    <div class="min-h-screen">
-        <header class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm">
-            <div class="container mx-auto px-4 py-4">
-                <div class="flex items-center justify-between">
-                    <a href="#" class="text-2xl font-bold text-sky-700 flex items-center">
-                        <i class="fas fa-brain mr-3 text-sky-500"></i>
-                        <span>Mariam Quizz</span>
-                    </a>
-                </div>
-            </div>
-        </header>
-        <main class="container mx-auto px-4 py-8 md:py-12">
-            <div id="configSection" class="max-w-3xl mx-auto">
-                <!-- Introduction -->
-                <div class="text-center mb-10">
-                    <h1 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-4">Apprenez plus vite, retenez plus longtemps.</h1>
-                    <p class="text-lg text-slate-600">Transformez n'importe quel sujet en flashcards ou en quiz interactifs en quelques secondes.</p>
-                </div>
-                <!-- Section de configuration -->
-                <div class="bg-white rounded-xl shadow-lg p-6 md:p-8">
-                    <div class="relative z-10">
-                        <h2 class="text-2xl font-semibold text-slate-800 mb-6 text-center md:text-left">1. De quoi voulez-vous parler ?</h2>
-                        <div class="space-y-6">
-                            <div class="relative">
-                                <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
-                                <input type="text" id="topic" class="w-full px-4 py-3 border-2 border-slate-300 rounded-lg focus:border-sky-500 focus:ring-sky-200 focus:ring transition-colors duration-300 pl-12" placeholder="Ex: Les capitales du monde, la photosynthèse...">
-                                <div id="topicError" class="text-red-500 text-sm mt-1 ml-2 hidden">Veuillez entrer un sujet.</div>
-                            </div>
-                            <div>
-                                <h2 class="text-2xl font-semibold text-slate-800 mb-4 text-center md:text-left">2. Comment voulez-vous apprendre ?</h2>
-                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                    <div class="relative">
-                                        <input type="radio" id="typeFlashcards" name="contentType" value="flashcards" checked class="peer absolute opacity-0">
-                                        <label for="typeFlashcards" class="flex flex-col items-center justify-center p-5 border-2 border-slate-200 rounded-lg cursor-pointer transition-all duration-300 hover:shadow-md peer-checked:border-sky-500 peer-checked:bg-sky-50 peer-checked:shadow-lg">
-                                            <div class="w-16 h-16 rounded-full bg-sky-100 flex items-center justify-center mb-3">
-                                                <i class="fas fa-clone text-2xl text-sky-600"></i>
-                                            </div>
-                                            <h3 class="font-semibold text-slate-800">Flashcards</h3>
-                                            <p class="text-sm text-slate-600 text-center mt-1">Idéal pour mémoriser des faits et définitions.</p>
-                                        </label>
-                                    </div>
-                                    <div class="relative">
-                                        <input type="radio" id="typeQuiz" name="contentType" value="quiz" class="peer absolute opacity-0">
-                                        <label for="typeQuiz" class="flex flex-col items-center justify-center p-5 border-2 border-slate-200 rounded-lg cursor-pointer transition-all duration-300 hover:shadow-md peer-checked:border-sky-500 peer-checked:bg-sky-50 peer-checked:shadow-lg">
-                                            <div class="w-16 h-16 rounded-full bg-sky-100 flex items-center justify-center mb-3">
-                                                <i class="fas fa-question-circle text-2xl text-sky-600"></i>
-                                            </div>
-                                            <h3 class="font-semibold text-slate-800">Quiz</h3>
-                                            <p class="text-sm text-slate-600 text-center mt-1">Parfait pour tester et valider vos connaissances.</p>
-                                        </label>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="flex flex-col sm:flex-row items-center justify-between pt-4 gap-4">
-                                <div class="text-sm text-slate-500 italic">
-                                    <i class="fas fa-info-circle mr-1"></i> La génération peut prendre jusqu'à 1 minute.
-                                </div>
-                                <button id="generateBtn" class="btn-primary w-full sm:w-auto">
-                                    <span class="mr-2">Lancer la magie</span>
-                                    <i class="fas fa-wand-magic-sparkles"></i>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- Indicateur de chargement amélioré -->
-            <div id="loading" class="hidden max-w-3xl mx-auto">
-                <div class="bg-white rounded-xl shadow-lg p-8 text-center">
-                    <div class="flex flex-col items-center justify-center space-y-4">
-                        <div class="relative w-24 h-24">
-                            <div class="absolute inset-0 border-4 border-sky-100 rounded-full"></div>
-                            <div class="absolute inset-0 border-4 border-t-sky-500 rounded-full animate-spin"></div>
-                            <div class="absolute inset-0 flex items-center justify-center">
-                                <i class="fas fa-lightbulb text-3xl text-sky-500 animate-pulse"></i>
-                            </div>
-                        </div>
-                        <h3 class="text-2xl font-semibold text-slate-800">Création en cours...</h3>
-                        <p class="text-slate-600">Notre IA prépare votre contenu d'apprentissage personnalisé.</p>
-                        <div class="w-full max-w-md mt-6 pt-4 border-t border-slate-200">
-                             <div id="loadingSteps" class="text-left space-y-3">
-                                <div id="step1" class="flex items-center text-slate-500 transition-all duration-500">
-                                    <div class="w-6 h-6 rounded-full flex items-center justify-center mr-3 bg-sky-500 text-white"><i class="fas fa-check text-xs"></i></div>
-                                    <span class="font-medium">Analyse du sujet</span>
-                                </div>
-                                <div id="step2" class="flex items-center text-slate-500 transition-all duration-500 opacity-50">
-                                    <div class="w-6 h-6 rounded-full flex items-center justify-center mr-3 bg-slate-300 text-white"><i class="fas fa-spinner fa-spin text-xs"></i></div>
-                                    <span>Recherche des informations clés</span>
-                                </div>
-                                <div id="step3" class="flex items-center text-slate-500 transition-all duration-500 opacity-50">
-                                    <div class="w-6 h-6 rounded-full flex items-center justify-center mr-3 bg-slate-300 text-white"><i class="fas fa-hourglass-half text-xs"></i></div>
-                                    <span>Génération des questions/réponses</span>
-                                </div>
-                                <div id="step4" class="flex items-center text-slate-500 transition-all duration-500 opacity-50">
-                                    <div class="w-6 h-6 rounded-full flex items-center justify-center mr-3 bg-slate-300 text-white"><i class="fas fa-paper-plane text-xs"></i></div>
-                                    <span>Finalisation</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- Conteneur pour les résultats (Flashcards ou Quiz) -->
-            <div id="resultsContainer" class="mt-12 max-w-4xl mx-auto hidden">
-                <!-- Le contenu sera injecté ici -->
-            </div>
-            <!-- Conteneur pour les erreurs -->
-            <div id="errorContainer" class="mt-8 max-w-3xl mx-auto"></div>
-        </main>
-    </div>
-<script>
-    document.addEventListener('DOMContentLoaded', () => {
-        const generateBtn = document.getElementById('generateBtn');
-        const configSection = document.getElementById('configSection');
-        const loadingIndicator = document.getElementById('loading');
-        const resultsContainer = document.getElementById('resultsContainer');
-        const errorContainer = document.getElementById('errorContainer');
-        const topicInput = document.getElementById('topic');
-        const topicError = document.getElementById('topicError');
-        // Focus sur le champ de saisie au chargement
-        topicInput.focus();
-        const steps = [
-            document.getElementById('step2'),
-            document.getElementById('step3'),
-            document.getElementById('step4')
-        ];
-        let loadingInterval;
-        function simulateLoading() {
-            let currentStep = 0;
-            const stepDurations = [2500, 3000, 1500]; // Durées en ms pour chaque étape
-            function nextStep() {
-                if (currentStep < steps.length) {
-                    const stepEl = steps[currentStep];
-                    stepEl.classList.remove('opacity-50');
-                    stepEl.querySelector('div').classList.remove('bg-slate-300');
-                    stepEl.querySelector('div').classList.add('bg-sky-500');
-                    stepEl.querySelector('i').className = 'fas fa-check text-xs';
-                    if(currentStep + 1 < steps.length) {
-                        const nextStepEl = steps[currentStep + 1];
-                        nextStepEl.querySelector('div').querySelector('i').className = 'fas fa-spinner fa-spin text-xs';
-                    }
-                    currentStep++;
-                    loadingInterval = setTimeout(nextStep, stepDurations[currentStep]);
-                }
-            }
-            loadingInterval = setTimeout(nextStep, stepDurations[0]);
-        }
-        function createConfetti() {
-            const confettiCount = 100;
-            const colors = ['#0ea5e9', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
-            const container = document.body;
-            for (let i = 0; i < confettiCount; i++) {
-                const confetti = document.createElement('div');
-                confetti.className = 'confetti';
-                confetti.style.left = `${Math.random() * 100}vw`;
-                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
-                confetti.style.width = `${Math.random() * 8 + 5}px`;
-                confetti.style.height = confetti.style.width;
-                confetti.style.animationDuration = `${Math.random() * 3 + 2}s`;
-                confetti.style.animationDelay = `${Math.random() * 0.2}s`;
-                container.appendChild(confetti);
-                setTimeout(() => confetti.remove(), 5000);
-            }
         }
-        function flipCard(card) {
-            card.classList.toggle('flipped');
         }
-        function showError(message) {
-            loadingIndicator.classList.add('hidden');
-            configSection.classList.remove('hidden');
-            generateBtn.disabled = false;
-            errorContainer.innerHTML = `
-                <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-md">
-                    <div class="flex">
-                        <div class="flex-shrink-0">
-                            <i class="fas fa-exclamation-circle text-red-500 mt-0.5"></i>
-                        </div>
-                        <div class="ml-3">
-                            <p class="text-sm text-red-700">${message}</p>
-                        </div>
-                    </div>
-                </div>
-            `;
         }
-        generateBtn.addEventListener('click', function() {
-            const topic = topicInput.value.trim();
-            if (!topic) {
-                topicInput.classList.add('shake', 'border-red-500');
-                topicError.classList.remove('hidden');
-                setTimeout(() => {
-                    topicInput.classList.remove('shake', 'border-red-500');
-                    topicError.classList.add('hidden');
-                }, 2000);
-                return;
             }
-            const contentType = document.querySelector('input[name="contentType"]:checked').value;
-            generateBtn.disabled = true;
-            configSection.classList.add('hidden');
-            loadingIndicator.classList.remove('hidden');
-            resultsContainer.innerHTML = '';
-            resultsContainer.classList.add('hidden');
-            errorContainer.innerHTML = '';
-            simulateLoading();
-            // --- SIMULATION DE L'APPEL API ---
-            // Remplacez cette partie par votre vrai appel fetch
-            // Je simule une attente de 7 secondes pour que l'animation soit visible
-            setTimeout(() => {
-                clearTimeout(loadingInterval);
-                const isSuccess = Math.random() > 0.1; // 90% de chance de succès
-                if (!isSuccess) {
-                     showError("Désolé, une erreur est survenue lors de la communication avec le serveur. Veuillez réessayer.");
-                     return;
-                }
-                // Données de simulation
-                const mockData = {
-                    flashcards: Array.from({ length: 9 }, (_, i) => ({
-                        question: `Quelle est la question numéro ${i + 1} sur "${topic}" ?`,
-                        answer: `Ceci est la réponse détaillée pour la question ${i + 1}.`
-                    })),
-                    quiz: Array.from({ length: 5 }, (_, i) => ({
-                        question: `Question de quiz n°${i + 1} sur "${topic}" ?`,
-                        options: ['Option A', 'Option B (correcte)', 'Option C', 'Option D'],
-                        correctAnswer: 'Option B (correcte)',
-                        explanation: `L'option B est correcte car elle représente la meilleure réponse possible pour la question ${i + 1}.`
-                    }))
-                };
-                loadingIndicator.classList.add('hidden');
-                resultsContainer.classList.remove('hidden');
-                createConfetti();
-                if (contentType === 'flashcards') {
-                    displayFlashcards(mockData.flashcards, topic);
-                } else {
-                    displayQuiz(mockData.quiz, topic);
-                }
-            }, 7000); // 2500 + 3000 + 1500 = 7000ms
-        });
-        function displayFlashcards(flashcards, topic) {
-            resultsContainer.innerHTML = `
-                <div class="text-center mb-8">
-                    <h2 class="text-3xl font-bold text-slate-800">Flashcards sur : <span class="text-sky-600">${topic}</span></h2>
-                    <p class="text-slate-600 mt-2">Cliquez sur une carte pour voir la réponse. Répétez jusqu'à maîtriser le sujet !</p>
-                </div>
-                <div id="flashcardsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
-                <div class="mt-12 flex justify-center">
-                    <button id="newTopicBtn" class="btn-primary">
-                        <i class="fas fa-plus mr-2"></i> Créer un nouveau jeu
-                    </button>
                 </div>
-            `;
-            const flashcardsGrid = document.getElementById('flashcardsGrid');
-            flashcards.forEach((card, index) => {
-                const cardElement = document.createElement('div');
-                cardElement.className = 'flashcard';
-                cardElement.onclick = () => flipCard(cardElement);
-                cardElement.innerHTML = `
-                    <div class="flashcard-inner">
-                        <div class="flashcard-front">
-                             <div>
-                                <div class="absolute top-3 left-3 text-xs font-bold text-slate-400">#${index + 1}</div>
-                                <h3 class="text-lg font-semibold">${card.question}</h3>
-                            </div>
                         </div>
-                        <div class="flashcard-back">
-                            <div>
-                                <div class="absolute top-3 left-3 text-xs font-bold text-white/70">#${index + 1}</div>
-                                <p class="font-medium">${card.answer}</p>
-                            </div>
                         </div>
                     </div>
-                `;
-                flashcardsGrid.appendChild(cardElement);
-            });
-            document.getElementById('newTopicBtn').addEventListener('click', backToTop);
-        }
-        function displayQuiz(quizQuestions, topic) {
-            let currentScore = 0;
-            let answeredQuestions = 0;
-            resultsContainer.innerHTML = `
-                <div class="text-center mb-8">
-                    <h2 class="text-3xl font-bold text-slate-800">Quiz sur : <span class="text-sky-600">${topic}</span></h2>
-                    <p class="text-slate-600 mt-2">Testez vos connaissances et apprenez de vos erreurs.</p>
-                </div>
-                <div class="sticky top-20 z-40 mb-8 flex justify-center">
-                    <div class="bg-white/80 backdrop-blur-sm px-6 py-3 rounded-full shadow-lg flex items-center">
-                        <span class="text-slate-700 font-medium">Score: </span>
-                        <span id="score" class="ml-2 text-sky-700 font-bold text-lg">0 / ${quizQuestions.length}</span>
-                    </div>
                 </div>
-                <div id="questionsContainer" class="space-y-8"></div>
-                <div id="quizResultContainer" class="mt-12"></div>
-            `;
-            const questionsContainer = document.getElementById('questionsContainer');
-            quizQuestions.forEach((q, qIndex) => {
-                const questionElement = document.createElement('div');
-                questionElement.className = 'bg-white rounded-xl shadow-md p-6 transition-all duration-300';
-                questionElement.id = `question-${qIndex}`;
-                const optionsHtml = q.options.map((option, oIndex) => `
-                    <div class="quiz-option">
-                        <input type="radio" id="q${qIndex}-o${oIndex}" name="question-${qIndex}" value="${option}" class="absolute opacity-0">
-                        <label for="q${qIndex}-o${oIndex}">
-                            ${option}
-                        </label>
-                    </div>
-                `).join('');
-                questionElement.innerHTML = `
-                    <p class="text-sm font-semibold text-sky-600 mb-2">Question ${qIndex + 1} sur ${quizQuestions.length}</p>
-                    <h3 class="text-xl font-medium text-slate-800">${q.question}</h3>
-                    <div class="mt-4 space-y-3">${optionsHtml}</div>
-                    <div class="explanation hidden mt-4 p-4 bg-sky-50 border border-sky-200 rounded-lg">
-                        <p class="font-semibold text-sky-800">💡 Explication</p>
-                        <p class="mt-1 text-sky-700 text-sm">${q.explanation}</p>
-                    </div>
-                `;
-                questionsContainer.appendChild(questionElement);
-                const radios = questionElement.querySelectorAll('input[type="radio"]');
-                radios.forEach(radio => {
-                    radio.addEventListener('change', (e) => handleAnswer(e, q, qIndex));
-                });
             });
-            function handleAnswer(event, questionData, qIndex) {
-                answeredQuestions++;
-                const selectedValue = event.target.value;
-                const parentDiv = event.target.parentElement;
-                // Désactiver tous les inputs pour cette question
-                const allRadios = document.querySelectorAll(`input[name="question-${qIndex}"]`);
-                allRadios.forEach(r => r.disabled = true);
-                if (selectedValue === questionData.correctAnswer) {
-                    currentScore++;
-                    parentDiv.classList.add('correct');
                 } else {
-                    parentDiv.classList.add('incorrect');
-                    // Montrer la bonne réponse
-                    allRadios.forEach(r => {
-                        if (r.value === questionData.correctAnswer) {
-                            r.parentElement.classList.add('correct');
-                        }
                     });
                 }
-                document.getElementById('score').textContent = `${currentScore} / ${quizQuestions.length}`;
-                parentDiv.closest('.bg-white').querySelector('.explanation').classList.remove('hidden');
-                // Scroll à la prochaine question ou aux résultats
                 setTimeout(() => {
-                    if (qIndex < quizQuestions.length - 1) {
-                        document.getElementById(`question-${qIndex + 1}`).scrollIntoView({ behavior: 'smooth', block: 'center' });
-                    } else if (answeredQuestions === quizQuestions.length) {
-                        displayQuizResults(currentScore, quizQuestions.length);
-                    }
-                }, 2000);
-            }
-        }
-        function displayQuizResults(score, total) {
-            const percentage = Math.round((score / total) * 100);
-            let resultMessage, resultClass, resultIcon;
-            if (percentage >= 80) {
-                resultMessage = 'Excellent travail ! Vous êtes un expert !';
-                resultClass = 'bg-green-500';
-                resultIcon = 'fas fa-trophy';
-                createConfetti();
-            } else if (percentage >= 50) {
-                resultMessage = 'Pas mal ! Continuez comme ça.';
-                resultClass = 'bg-sky-500';
-                resultIcon = 'fas fa-medal';
-            } else {
-                resultMessage = 'Continuez à étudier, vous allez y arriver !';
-                resultClass = 'bg-amber-500';
-                resultIcon = 'fas fa-book-open';
             }
-            const resultsElement = document.getElementById('quizResultContainer');
-            resultsElement.innerHTML = `
-                <div class="bg-white rounded-xl shadow-lg p-8 text-center">
-                    <i class="${resultIcon} text-5xl text-yellow-400 mb-4"></i>
-                    <h3 class="text-2xl font-bold">Quiz Terminé !</h3>
-                    <p class="text-slate-600 mt-2 mb-4">${resultMessage}</p>
-                    <p class="text-4xl font-bold my-4">${score} / ${total}</p>
-                    <div class="w-full bg-slate-200 rounded-full h-4">
-                        <div class="${resultClass} h-4 rounded-full" style="width: ${percentage}%"></div>
-                    </div>
-                    <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
-                        <button id="newQuizBtn" class="btn-primary">
-                            <i class="fas fa-plus mr-2"></i> Nouveau Quiz
-                        </button>
-                    </div>
-                </div>
-            `;
-            resultsElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            document.getElementById('newQuizBtn').addEventListener('click', backToTop);
-        }
-        function backToTop() {
-            resultsContainer.classList.add('hidden');
-            configSection.classList.remove('hidden');
-            generateBtn.disabled = false;
-            topicInput.value = '';
-            window.scrollTo(0, 0);
-            topicInput.focus();
-        }
-    });
-</script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>StudyGen - Générateur de Flashcards & Quiz</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --primary-blue: #2563eb;
+            --light-blue: #3b82f6;
+            --extra-light-blue: #eff6ff;
+            --white: #ffffff;
+            --gray-50: #f9fafb;
+            --gray-100: #f3f4f6;
+            --gray-300: #d1d5db;
+            --gray-600: #4b5563;
+            --gray-800: #1f2937;
+            --success: #10b981;
+            --error: #ef4444;
+            --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);
+        }
         body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, var(--extra-light-blue) 0%, var(--white) 50%, var(--gray-50) 100%);
+            min-height: 100vh;
+            padding: 0;
+            color: var(--gray-800);
+            line-height: 1.6;
         }
+        .container {
+            max-width: 100%;
+            padding: 20px 16px;
+            min-height: 100vh;
         }
+        .header {
+            text-align: center;
+            margin-bottom: 32px;
+            padding: 20px 0;
         }
+        .header h1 {
+            font-size: 2.5rem;
+            font-weight: 800;
+            background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 8px;
         }
+        .header p {
+            color: var(--gray-600);
+            font-size: 1.1rem;
+            font-weight: 500;
+        }
+        .main-card {
+            background: var(--white);
+            border-radius: 24px;
+            padding: 24px;
+            box-shadow: var(--shadow);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            margin-bottom: 20px;
+            transform: translateY(0);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .main-card:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-lg);
+        }
+        .form-group {
+            margin-bottom: 24px;
+        }
+        label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: var(--gray-800);
+            font-size: 0.95rem;
+        }
+        input[type="text"] {
             width: 100%;
+            padding: 16px 20px;
+            border: 2px solid var(--gray-100);
+            border-radius: 16px;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            background: var(--gray-50);
+            color: var(--gray-800);
+            outline: none;
+        }
+        input[type="text"]:focus {
+            border-color: var(--primary-blue);
+            background: var(--white);
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+            transform: translateY(-1px);
+        }
+        .type-selector {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 24px;
+        }
+        .type-option {
+            flex: 1;
+            position: relative;
+        }
+        .type-option input[type="radio"] {
+            display: none;
+        }
+        .type-option label {
             display: flex;
+            flex-direction: column;
             align-items: center;
+            padding: 20px 16px;
+            border: 2px solid var(--gray-200);
+            border-radius: 16px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: var(--white);
             text-align: center;
+            margin-bottom: 0;
         }
+        .type-option label:hover {
+            border-color: var(--light-blue);
+            transform: translateY(-2px);
         }
+        .type-option input[type="radio"]:checked + label {
+            border-color: var(--primary-blue);
+            background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
+            color: var(--white);
+            box-shadow: var(--shadow);
         }
+        .type-option i {
+            font-size: 2rem;
+            margin-bottom: 8px;
+            transition: transform 0.3s ease;
+        }
+        .type-option input[type="radio"]:checked + label i {
+            transform: scale(1.1);
+        }
+        .type-option span {
+            font-weight: 600;
+            font-size: 0.9rem;
+        }
+        .generate-btn {
+            width: 100%;
+            background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
+            color: var(--white);
+            border: none;
+            padding: 18px 24px;
+            border-radius: 16px;
+            font-size: 1.1rem;
+            font-weight: 600;
             cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
         }
+        .generate-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-lg);
         }
+        .generate-btn:active {
+            transform: translateY(0);
         }
+        .generate-btn:disabled {
+            opacity: 0.7;
+            cursor: not-allowed;
+            transform: none;
         }
+        .generate-btn .btn-text {
+            transition: opacity 0.3s ease;
         }
+        .generate-btn .spinner {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
         }
+        .generate-btn.loading .btn-text {
             opacity: 0;
         }
+        .generate-btn.loading .spinner {
+            opacity: 1;
         }
+        .spinner {
+            width: 24px;
+            height: 24px;
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: var(--white);
+            animation: spin 1s ease-in-out infinite;
         }
+        @keyframes spin {
+            to { transform: translate(-50%, -50%) rotate(360deg); }
         }
+        .results-container {
+            margin-top: 24px;
+        }
+        .flashcard, .quiz-question {
+            background: var(--white);
+            border-radius: 20px;
+            padding: 24px;
+            margin-bottom: 16px;
+            box-shadow: var(--shadow);
+            border-left: 4px solid var(--primary-blue);
+            transition: transform 0.3s ease;
+        }
+        .flashcard:hover, .quiz-question:hover {
+            transform: translateX(4px);
+        }
+        .flashcard h3 {
+            color: var(--primary-blue);
+            margin-bottom: 12px;
+            font-size: 1.1rem;
+            font-weight: 600;
         }
+        .flashcard .answer {
+            color: var(--gray-600);
+            padding: 16px;
+            background: var(--gray-50);
+            border-radius: 12px;
+            margin-top: 12px;
+            border: 1px solid var(--gray-100);
         }
+        .quiz-options {
+            margin: 16px 0;
         }
+        .quiz-option {
+            padding: 12px 16px;
+            margin: 8px 0;
+            border: 2px solid var(--gray-100);
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: var(--white);
+        }
+        .quiz-option:hover {
+            border-color: var(--light-blue);
+            background: var(--extra-light-blue);
+        }
+        .quiz-option.correct {
+            border-color: var(--success);
+            background: #f0fdf4;
+        }
+        .quiz-option.incorrect {
+            border-color: var(--error);
+            background: #fef2f2;
+        }
+        .quiz-explanation {
+            margin-top: 16px;
+            padding: 16px;
+            background: var(--extra-light-blue);
+            border-radius: 12px;
+            border-left: 4px solid var(--primary-blue);
+        }
+        .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 {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: -1;
+        }
+        .floating-circle {
+            position: absolute;
+            border-radius: 50%;
+            background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.05));
+            animation: float 6s ease-in-out infinite;
+        }
+        .floating-circle:nth-child(1) {
+            width: 80px;
+            height: 80px;
+            top: 10%;
+            left: 10%;
+            animation-delay: 0s;
+        }
+        .floating-circle:nth-child(2) {
+            width: 120px;
+            height: 120px;
+            top: 60%;
+            right: 10%;
+            animation-delay: 2s;
+        }
+        .floating-circle:nth-child(3) {
+            width: 100px;
+            height: 100px;
+            bottom: 20%;
+            left: 20%;
+            animation-delay: 4s;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0px) rotate(0deg); }
+            50% { transform: translateY(-20px) rotate(180deg); }
+        }
+        /* Animations d'entrée */
+        .fade-in {
+            animation: fadeIn 0.5s ease-out;
+        }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
             }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        /* Responsive optimizations */
+        @media (min-width: 640px) {
+            .container {
+                max-width: 640px;
+                margin: 0 auto;
+                padding: 40px 24px;
+            }
+            .type-selector {
+                gap: 16px;
+            }
+            .main-card {
+                padding: 32px;
+            }
+        }
+        /* Accessibilité et focus states améliorés */
+        @media (prefers-reduced-motion: reduce) {
+            *, *::before, *::after {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Éléments flottants décoratifs -->
+    <div class="floating-elements">
+        <div class="floating-circle"></div>
+        <div class="floating-circle"></div>
+        <div class="floating-circle"></div>
+    </div>
+    <div class="container">
+        <div class="header">
+            <h1><i class="fas fa-graduation-cap"></i> StudyGen</h1>
+            <p>Créez des flashcards et quiz personnalisés en quelques secondes</p>
+        </div>
+        <div class="main-card">
+            <form id="generateForm">
+                <div class="form-group">
+                    <label for="topic">
+                        <i class="fas fa-lightbulb"></i> Sujet d'étude
+                    </label>
+                    <input
+                        type="text"
+                        id="topic"
+                        name="topic"
+                        placeholder="Ex: Les révolutions françaises, Python, Anatomie..."
+                        required
+                    >
                 </div>
+                <div class="form-group">
+                    <label>
+                        <i class="fas fa-tools"></i> Type de contenu
+                    </label>
+                    <div class="type-selector">
+                        <div class="type-option">
+                            <input type="radio" id="flashcards" name="type" value="flashcards" checked>
+                            <label for="flashcards">
+                                <i class="fas fa-clone"></i>
+                                <span>Flashcards</span>
+                            </label>
                         </div>
+                        <div class="type-option">
+                            <input type="radio" id="quiz" name="type" value="quiz">
+                            <label for="quiz">
+                                <i class="fas fa-question-circle"></i>
+                                <span>Quiz</span>
+                            </label>
                         </div>
                     </div>
                 </div>
+                <button type="submit" class="generate-btn" id="generateBtn">
+                    <span class="btn-text">
+                        <i class="fas fa-magic"></i> Générer le contenu
+                    </span>
+                    <div class="spinner"></div>
+                </button>
+            </form>
+        </div>
+        <div id="results" class="results-container"></div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const form = document.getElementById('generateForm');
+            const generateBtn = document.getElementById('generateBtn');
+            const resultsContainer = document.getElementById('results');
+            form.addEventListener('submit', async function(e) {
+                e.preventDefault();
+                const topic = document.getElementById('topic').value.trim();
+                const type = document.querySelector('input[name="type"]:checked').value;
+                if (!topic) {
+                    showMessage('Veuillez entrer un sujet d\'étude.', 'error');
+                    return;
+                }
+                // Animation du bouton
+                generateBtn.classList.add('loading');
+                generateBtn.disabled = true;
+                resultsContainer.innerHTML = '';
+                try {
+                    const response = await fetch('/generate', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({ topic, type })
+                    });
+                    const data = await response.json();
+                    if (data.success) {
+                        displayResults(data[type], type);
+                        showMessage(`${type === 'flashcards' ? 'Flashcards' : 'Quiz'} généré avec succès !`, 'success');
+                    } else {
+                        showMessage(data.error || 'Une erreur est survenue lors de la génération.', 'error');
+                    }
+                } catch (error) {
+                    console.error('Erreur:', error);
+                    showMessage('Erreur de connexion. Veuillez réessayer.', 'error');
+                } finally {
+                    // Restaurer le bouton
+                    generateBtn.classList.remove('loading');
+                    generateBtn.disabled = false;
+                }
             });
+            function displayResults(data, type) {
+                resultsContainer.innerHTML = '';
+                if (type === 'flashcards') {
+                    data.forEach((item, index) => {
+                        const flashcardEl = document.createElement('div');
+                        flashcardEl.className = 'flashcard fade-in';
+                        flashcardEl.style.animationDelay = `${index * 0.1}s`;
+                        flashcardEl.innerHTML = `
+                            <h3><i class="fas fa-question"></i> ${item.question}</h3>
+                            <div class="answer">
+                                <i class="fas fa-lightbulb"></i> ${item.answer}
+                            </div>
+                        `;
+                        resultsContainer.appendChild(flashcardEl);
+                    });
                 } else {
+                    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 ${option === item.correctAnswer ? 'correct' : ''}"
+                                 onclick="toggleExplanation(this)">
+                                <i class="fas ${option === item.correctAnswer ? 'fa-check' : '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" style="display: none;">
+                                <i class="fas fa-info-circle"></i> <strong>Explication :</strong> ${item.explanation}
+                            </div>
+                        `;
+                        resultsContainer.appendChild(quizEl);
                     });
                 }
+            }
+            function showMessage(message, type) {
+                const messageEl = document.createElement('div');
+                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('.error-message, .success-message');
+                oldMessages.forEach(msg => msg.remove());
+                resultsContainer.insertBefore(messageEl, resultsContainer.firstChild);
+                // Supprimer le message après 5 secondes
                 setTimeout(() => {
+                    messageEl.remove();
+                }, 5000);
             }
+            // Fonction globale pour l'interaction avec les quiz
+            window.toggleExplanation = function(optionEl) {
+                const quizQuestion = optionEl.closest('.quiz-question');
+                const explanation = quizQuestion.querySelector('.quiz-explanation');
+                // Marquer toutes les options comme incorrectes visuellement
+                const options = quizQuestion.querySelectorAll('.quiz-option');
+                options.forEach(opt => {
+                    if (!opt.classList.contains('correct')) {
+                        opt.classList.add('incorrect');
+                    }
+                });
+                // Afficher l'explication
+                explanation.style.display = 'block';
+                explanation.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            };
+            // Animation au focus des inputs
+            const inputs = document.querySelectorAll('input[type="text"]');
+            inputs.forEach(input => {
+                input.addEventListener('focus', function() {
+                    this.closest('.form-group').style.transform = 'scale(1.02)';
+                });
+                input.addEventListener('blur', function() {
+                    this.closest('.form-group').style.transform = 'scale(1)';
+                });
+            });
+            // Animation des cartes au scroll (pour les écrans plus grands)
+            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);
+        });
+    </script>
 </body>
 </html>