Attaque2

Sleeping

App Files Files Community

Docfile commited on Apr 7

Commit

5331cbc

verified ·

1 Parent(s): 4f72684

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +245 -297

templates/index.html CHANGED Viewed

@@ -1,322 +1,270 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Flashcards et Quiz</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-        body {
-            background: linear-gradient(135deg, #1e3a8a, #6b7280);
-            min-height: 100vh;
-        }
-        .container {
-            background: rgba(255, 255, 255, 0.95);
-            border-radius: 15px;
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
-            padding: 2rem;
-        }
-        .progress-bar {
-            height: 10px;
-            background: #e5e7eb;
-            border-radius: 5px;
-            overflow: hidden;
-        }
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(to right, #10b981, #3b82f6);
-            transition: width 0.5s ease-in-out;
-        }
-        .question-card {
-            transform: scale(0.9);
-            opacity: 0;
-            animation: slideIn 0.5s forwards;
-        }
-        @keyframes slideIn {
-            to { transform: scale(1); opacity: 1; }
-        }
-        .correct-answer {
-            animation: correctFlash 0.8s;
-        }
-        .wrong-answer {
-            animation: wrongShake 0.5s;
-        }
-        @keyframes correctFlash {
-            0% { background-color: #10b981; transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { background-color: #d1fae5; transform: scale(1); }
-        }
-        @keyframes wrongShake {
-            0%, 100% { transform: translateX(0); }
-            25% { transform: translateX(-10px); }
-            75% { transform: translateX(10px); }
-        }
-        .explanation-container {
-            display: none;
-            margin-top: 1rem;
-            padding: 1rem;
-            background: #f8fafc;
-            border-left: 4px solid #ef4444;
-            border-radius: 5px;
-            animation: slideFromRight 0.5s ease-in-out;
-        }
-        @keyframes slideFromRight {
-            from { transform: translateX(100%); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
-        }
-        .character {
-            width: 100px;
-            height: 100px;
-            background: url('chemin/vers/professeur.png') center/contain no-repeat;
-            margin-right: 1rem;
-        }
-        .popup {
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%) scale(0);
-            background: linear-gradient(135deg, #ffd700, #ff6347);
-            padding: 2rem;
-            border-radius: 15px;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
-            z-index: 1000;
-            animation: popupIn 0.5s forwards;
-            border: 4px solid #ffd700;
-            color: #fff;
-        }
-        @keyframes popupIn {
-            to { transform: translate(-50%, -50%) scale(1); }
-        }
-        .overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.7);
-            z-index: 999;
-        }
-        .popup h2 {
-            font-size: 2.5rem;
-            font-weight: bold;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-        }
-        .popup p {
-            font-size: 1.2rem;
-            margin-top: 1rem;
-        }
-        .popup button {
-            background: #ff4500;
-            border: none;
-            padding: 0.75rem 1.5rem;
-            font-size: 1.1rem;
-            font-weight: bold;
-            border-radius: 10px;
-            transition: transform 0.2s;
-        }
-        .popup button:hover {
-            transform: scale(1.05);
-        }
-    </style>
 </head>
-<body class="font-sans">
-    <div class="container mx-auto mt-8 px-4">
-        <h1 class="text-4xl font-bold text-center text-gray-800 mb-6">Révisons un peu</h1>
-        <!-- Section de configuration -->
-        <div class="max-w-2xl mx-auto mb-8">
-            <div class="bg-white rounded-lg shadow-md p-6">
-                <div class="mb-4">
-                    <label for="topic" class="block text-sm font-medium text-gray-700 mb-1">Sujet</label>
-                    <input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2" id="topic" placeholder="Balance ton sujet...">
-                </div>
-                <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Type</label>
-                    <div class="flex items-center space-x-4">
-                        <div class="flex items-center">
-                            <input id="typeFlashcards" name="contentType" type="radio" value="flashcards" checked class="h-4 w-4 text-indigo-600">
-                            <label for="typeFlashcards" class="ml-2 block text-sm text-gray-900">Flashcards</label>
-                        </div>
-                        <div class="flex items-center">
-                            <input id="typeQuiz" name="contentType" type="radio" value="quiz" class="h-4 w-4 text-indigo-600">
-                            <label for="typeQuiz" class="ml-2 block text-sm text-gray-900">Quiz</label>
-                        </div>
-                    </div>
-                </div>
-                <button id="generateBtn" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
-                    GO !
-                </button>
-            </div>
         </div>
-        <!-- Indicateur de chargement -->
-        <div id="loading" class="hidden text-center my-10">
-            <svg class="animate-spin h-8 w-8 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
-            <p class="mt-2 text-gray-600">Ça charge, attends deux secs...</p>
         </div>
-        <!-- Conteneur Quiz -->
-        <div id="quizContainer" class="mt-6 max-w-3xl mx-auto hidden">
-            <div class="progress-bar mb-6">
-                <div class="progress-fill" id="progressFill"></div>
-            </div>
-            <div id="currentQuestion"></div>
-        </div>
-    </div>
-    <script>
-        const generateBtn = document.getElementById('generateBtn');
-        const loadingIndicator = document.getElementById('loading');
-        const quizContainer = document.getElementById('quizContainer');
-        const topicInput = document.getElementById('topic');
-        let quizQuestions = [];
-        let currentQuestionIndex = 0;
-        let score = 0;
-        generateBtn.addEventListener('click', function() {
-            const topic = topicInput.value.trim();
-            if (!topic) {
-                alert('Rentre un sujet, bordel !');
-                return;
-            }
-            const contentType = document.querySelector('input[name="contentType"]:checked').value;
-            loadingIndicator.classList.remove('hidden');
-            quizContainer.innerHTML = '';
-            quizContainer.classList.add('hidden');
-            fetch('/generate', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ topic, type: contentType }),
-            })
-            .then(response => {
-                if (!response.ok) throw new Error(`HTTP ${response.status}`);
-                return response.json();
-            })
-            .then(data => {
-                loadingIndicator.classList.add('hidden');
-                if (data.error) {
-                    alert('Erreur: ' + data.error);
-                    return;
-                }
-                if (contentType === 'quiz' && data.quiz) {
-                    quizQuestions = data.quiz;
-                    currentQuestionIndex = 0;
-                    score = 0;
-                    quizContainer.classList.remove('hidden');
-                    displayCurrentQuestion();
-                }
-            })
-            .catch(error => {
-                loadingIndicator.classList.add('hidden');
-                alert('Ça a merdé: ' + error.message);
-            });
-        });
-        function displayCurrentQuestion() {
-            if (currentQuestionIndex >= quizQuestions.length) {
-                showResults();
-                return;
-            }
-            const question = quizQuestions[currentQuestionIndex];
-            const progress = (currentQuestionIndex / 10) * 100;
-            quizContainer.innerHTML = `
-                <div class="progress-bar mb-6">
-                    <div class="progress-fill" id="progressFill" style="width: ${progress}%"></div>
-                </div>
-                <div class="question-card bg-white rounded-lg shadow-lg p-6">
-                    <h5 class="font-semibold text-xl mb-4 text-gray-800">${currentQuestionIndex + 1}. ${question.question}</h5>
-                    <div class="options mt-3"></div>
-                    <div class="explanation-container" id="explanation-${currentQuestionIndex}"></div>
-                </div>
-            `;
-            const optionsContainer = quizContainer.querySelector('.options');
-            question.options.forEach((option, oIndex) => {
-                const optionElement = document.createElement('div');
-                optionElement.className = 'option block p-3 my-2 border border-gray-200 rounded-md cursor-pointer hover:bg-gray-100 text-gray-800';
-                optionElement.textContent = option;
-                optionElement.onclick = () => selectOption(option, question.correctAnswer, oIndex);
-                optionsContainer.appendChild(optionElement);
-            });
         }
-        function selectOption(selectedOption, correctAnswer, optionIndex) {
-            const options = quizContainer.querySelectorAll('.option');
-            options.forEach(option => {
-                option.onclick = null;
-                option.classList.remove('cursor-pointer', 'hover:bg-gray-100');
-            });
-            const selectedElement = options[optionIndex];
-            const question = quizQuestions[currentQuestionIndex];
-            const explanationContainer = document.getElementById(`explanation-${currentQuestionIndex}`);
-            if (selectedOption === correctAnswer) {
-                selectedElement.classList.add('correct-answer', 'text-white', 'border-green-500');
-                score++;
-                setTimeout(() => {
-                    currentQuestionIndex++;
-                    displayCurrentQuestion();
-                }, 1000);
-            } else {
-                selectedElement.classList.add('wrong-answer', 'text-white', 'border-red-500');
-                options.forEach(opt => {
-                    if (opt.textContent === correctAnswer) {
-                        opt.classList.add('correct-answer', 'text-white', 'border-green-500');
-                    }
-                });
-                explanationContainer.innerHTML = `
-                    <div class="flex items-center">
-                        <div class="character"></div>
-                        <div>
-                            <h3 class="text-lg font-semibold mb-2">Explication</h3>
-                            <p class="text-sm text-gray-700">${question.explanation}</p>
-                        </div>
-                    </div>
-                `;
-                explanationContainer.style.display = 'block';
-                document.body.addEventListener('click', proceedToNextQuestion);
-            }
-        }
-        function proceedToNextQuestion() {
-            document.body.removeEventListener('click', proceedToNextQuestion);
-            currentQuestionIndex++;
-            displayCurrentQuestion();
         }
-        function showResults() {
-            const overlay = document.createElement('div');
-            overlay.className = 'overlay';
-            document.body.appendChild(overlay);
-            const popup = document.createElement('div');
-            popup.className = 'popup';
-            const percentage = (score / 10) * 100;
-            let suggestion = '';
-            if (percentage < 50) {
-                suggestion = 'Allez du nerf, c’est pas bon.';
-            } else if (percentage < 80) {
-                suggestion = 'Pas mal, mais t’as encore du taf pour tout déchirer.';
-            } else {
-                suggestion = 'WOW ! Tu gères grave, tu veux essayer un autre sujet ?';
-            }
-            popup.innerHTML = `
-                <h2>Résultats</h2>
-                <p>Score: ${score}/10 (${percentage}%)</p>
-                <p class="mt-2">Détails: ${score} bonnes réponses, ${10 - score} ratées.</p>
-                <p class="mt-4 font-semibold">${suggestion}</p>
-                <button onclick="location.reload()">Rejouer</button>
-            `;
-            document.body.appendChild(popup);
-        }
-    </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Générateur de Flashcards & Quiz</title>
+  <!-- Inclusion de Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Inclusion de Google Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+  <style>
+    body {
+      font-family: 'Roboto', sans-serif;
+    }
+    /* Animation de survol pour les cartes et options */
+    .hover-transform {
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
+    .hover-transform:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+    }
+    /* Animation de chargement personnalisée */
+    .spinner {
+      border: 4px solid rgba(0, 0, 0, 0.1);
+      width: 3rem;
+      height: 3rem;
+      border-radius: 50%;
+      border-left-color: #4f46e5;
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+  </style>
 </head>
+<body class="bg-gray-50">
+  <!-- En-tête -->
+  <header class="bg-gradient-to-r from-indigo-600 to-blue-500 py-6 shadow-lg">
+    <h1 class="text-center text-white text-4xl font-bold">Générateur de Flashcards & Quiz</h1>
+  </header>
+  <main class="container mx-auto px-4 py-8">
+    <!-- Section de configuration -->
+    <section class="max-w-2xl mx-auto mb-10">
+      <div class="bg-white rounded-xl shadow-lg p-8">
+        <div class="mb-6">
+          <label for="topic" class="block text-gray-700 text-lg font-medium mb-2">Sujet</label>
+          <input type="text" id="topic" placeholder="Entrez un sujet..."
+                 class="w-full border border-gray-300 rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
         </div>
+        <div class="mb-6">
+          <span class="block text-gray-700 text-lg font-medium mb-2">Type de contenu</span>
+          <div class="flex space-x-6">
+            <label class="flex items-center space-x-2">
+              <input type="radio" name="contentType" value="flashcards" checked
+                     class="form-radio h-5 w-5 text-indigo-600" />
+              <span class="text-gray-800">Flashcards</span>
+            </label>
+            <label class="flex items-center space-x-2">
+              <input type="radio" name="contentType" value="quiz"
+                     class="form-radio h-5 w-5 text-indigo-600" />
+              <span class="text-gray-800">Quiz</span>
+            </label>
+          </div>
         </div>
+        <button id="generateBtn" class="w-full bg-indigo-600 text-white font-semibold py-3 rounded-md shadow hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition">
+          Générer
+        </button>
+      </div>
+    </section>
+    <!-- Indicateur de chargement -->
+    <section id="loading" class="hidden flex flex-col items-center justify-center my-10">
+      <div class="spinner mb-4"></div>
+      <p class="text-gray-600 text-lg">Génération en cours... Patientez quelques instants.</p>
+    </section>
+    <!-- Flashcards -->
+    <section id="flashcardsContainer" class="mt-8 hidden">
+      <div class="mb-6 text-center">
+        <h2 class="text-3xl font-semibold text-gray-800">Flashcards générées</h2>
+        <p class="text-gray-500">Cliquez sur une carte pour révéler la réponse</p>
+      </div>
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"></div>
+    </section>
+    <!-- Quiz -->
+    <section id="quizContainer" class="mt-8 max-w-3xl mx-auto hidden">
+      <div class="mb-6 text-center">
+        <h2 class="text-3xl font-semibold text-gray-800">Quiz généré</h2>
+        <p class="text-gray-500">Sélectionnez une réponse pour chaque question</p>
+      </div>
+    </section>
+  </main>
+  <footer class="bg-gray-100 py-4">
+    <p class="text-center text-gray-500 text-sm">© 2025 Générateur de Flashcards & Quiz. Tous droits réservés.</p>
+  </footer>
+  <script>
+    const generateBtn = document.getElementById('generateBtn');
+    const loadingIndicator = document.getElementById('loading');
+    const flashcardsContainer = document.getElementById('flashcardsContainer');
+    const quizContainer = document.getElementById('quizContainer');
+    const topicInput = document.getElementById('topic');
+    generateBtn.addEventListener('click', () => {
+      const topic = topicInput.value.trim();
+      if (!topic) {
+        alert('Veuillez entrer un sujet.');
+        return;
+      }
+      const contentType = document.querySelector('input[name="contentType"]:checked').value;
+      // Afficher le chargement et réinitialiser les sections
+      loadingIndicator.classList.remove('hidden');
+      flashcardsContainer.querySelector('.grid') && (flashcardsContainer.querySelector('.grid').innerHTML = '');
+      quizContainer.innerHTML = '';
+      flashcardsContainer.classList.add('hidden');
+      quizContainer.classList.add('hidden');
+      // Simulation d'appel API (remplacez par votre fetch)
+      setTimeout(() => {
+        loadingIndicator.classList.add('hidden');
+        // Exemple de données fictives pour le quiz
+        if (contentType === 'quiz') {
+          const data = {
+            quiz: [
+              {
+                question: "When did World War II begin?",
+                options: ["September 1, 1938", "September 2, 1945", "September 1, 1939", "December 7, 1941"],
+                correctAnswer: "September 1, 1939",
+                explanation: "World War II began on September 1, 1939, with the German invasion of Poland."
+              },
+              {
+                question: "Which event led the United States to enter World War II?",
+                options: ["The invasion of Poland", "The fall of France", "The attack on Pearl Harbor", "The Battle of Britain"],
+                correctAnswer: "The attack on Pearl Harbor",
+                explanation: "The Japanese attack on Pearl Harbor on December 7, 1941, prompted the United States to declare war."
+              }
+            ]
+          };
+          quizContainer.classList.remove('hidden');
+          displayQuiz(data.quiz);
+        } else {
+          // Exemple fictif pour les flashcards
+          const data = {
+            flashcards: [
+              { question: "Capital of France?", answer: "Paris" },
+              { question: "Capital of Spain?", answer: "Madrid" },
+              { question: "Capital of Italy?", answer: "Rome" }
+            ]
+          };
+          flashcardsContainer.classList.remove('hidden');
+          displayFlashcards(data.flashcards);
         }
+      }, 1500);
+    });
+    function displayFlashcards(flashcards) {
+      const gridContainer = flashcardsContainer.querySelector('.grid') || document.createElement('div');
+      if (!gridContainer.classList.contains('grid')) {
+        gridContainer.className = 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6';
+        flashcardsContainer.appendChild(gridContainer);
+      }
+      gridContainer.innerHTML = '';
+      flashcards.forEach((card, index) => {
+        const cardElement = document.createElement('div');
+        cardElement.className = 'bg-white rounded-xl shadow-lg p-6 cursor-pointer hover-transform';
+        cardElement.setAttribute('onclick', `toggleAnswer(${index})`);
+        cardElement.innerHTML = `
+          <h3 class="text-xl font-semibold text-gray-800 mb-4">${card.question}</h3>
+          <div id="answer-${index}" class="hidden text-gray-700 border-t border-gray-200 pt-4">
+            <span class="font-bold">Réponse:</span> ${card.answer}
+          </div>
+        `;
+        gridContainer.appendChild(cardElement);
+      });
+    }
+    function toggleAnswer(index) {
+      const answerElement = document.getElementById(`answer-${index}`);
+      answerElement.classList.toggle('hidden');
+    }
+    function displayQuiz(quizQuestions) {
+      quizQuestions.forEach((question, qIndex) => {
+        const questionCard = document.createElement('div');
+        questionCard.className = 'bg-white rounded-xl shadow-lg p-6 mb-6';
+        let optionsHtml = '';
+        // Sécuriser la réponse correcte
+        const safeCorrectAnswer = question.correctAnswer.replace(/"/g, '&quot;');
+        question.options.forEach((option, oIndex) => {
+          optionsHtml += `
+            <div class="option block p-3 my-2 border border-gray-200 rounded-md cursor-pointer hover-transform hover:bg-gray-50 text-gray-800"
+                 id="q${qIndex}-o${oIndex}"
+                 data-correct="${safeCorrectAnswer}"
+                 onclick="selectOption(this, ${qIndex}, ${oIndex})">
+              ${option}
+            </div>
+          `;
+        });
+        questionCard.innerHTML = `
+          <h4 class="text-lg font-semibold text-gray-800 mb-4">${qIndex + 1}. ${question.question}</h4>
+          <div class="options">
+            ${optionsHtml}
+          </div>
+          <div id="explanation-${qIndex}" class="hidden mt-4 p-4 rounded-md bg-blue-50 border border-blue-200 text-blue-700 text-sm">
+            <strong>Explication:</strong> ${question.explanation}
+          </div>
+        `;
+        quizContainer.appendChild(questionCard);
+      });
+    }
+    function selectOption(element, questionIndex, optionIndex) {
+      const correctAnswer = element.dataset.correct;
+      const questionOptions = quizContainer.querySelectorAll(`#q${questionIndex}-o0`)[0].parentElement.querySelectorAll('.option');
+      const explanationElement = document.getElementById(`explanation-${questionIndex}`);
+      // Vérifier si une option a déjà été sélectionnée pour éviter le re-clic
+      let alreadyAnswered = false;
+      questionOptions.forEach(opt => {
+        if (opt.classList.contains('bg-green-100') || opt.classList.contains('bg-red-100')) {
+          alreadyAnswered = true;
         }
+      });
+      if (alreadyAnswered) return;
+      // Réinitialiser les styles pour toutes les options
+      questionOptions.forEach(option => {
+        option.classList.remove('bg-indigo-100', 'border-indigo-300', 'bg-green-100', 'border-green-300', 'text-green-800', 'bg-red-100', 'border-red-300', 'text-red-800');
+        option.classList.add('hover:bg-gray-50');
+      });
+      // Appliquer le style à l'option sélectionnée
+      element.classList.add('bg-indigo-100', 'border-indigo-300');
+      element.classList.remove('hover:bg-gray-50');
+      const selectedText = element.textContent.trim();
+      if (selectedText === correctAnswer) {
+        element.classList.remove('bg-indigo-100', 'border-indigo-300');
+        element.classList.add('bg-green-100', 'border-green-300', 'text-green-800');
+      } else {
+        element.classList.remove('bg-indigo-100', 'border-indigo-300');
+        element.classList.add('bg-red-100', 'border-red-300', 'text-red-800');
+        // Mettre en évidence la bonne réponse
+        questionOptions.forEach(option => {
+          if (option.textContent.trim() === correctAnswer) {
+            option.classList.add('bg-green-100', 'border-green-300', 'text-green-800');
+            option.classList.remove('hover:bg-gray-50');
+          }
+        });
+      }
+      // Désactiver les clics sur toutes les options de cette question
+      questionOptions.forEach(option => {
+        option.onclick = null;
+        option.classList.remove('cursor-pointer');
+        option.style.cursor = 'default';
+      });
+      // Afficher l'explication
+      explanationElement.classList.remove('hidden');
+    }
+  </script>
 </body>
+</html>