<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jeu des Articles Allemands (der, die, das)</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .animate-bounce-short {
            animation: bounce 0.5s ease-in-out 1;
        }
    </style>
</head>
<body class="bg-slate-900 text-slate-100 min-h-screen flex flex-col items-center justify-center p-4">

    <div class="max-w-md w-full bg-slate-800 rounded-2xl shadow-xl p-6 border border-slate-700 flex flex-col items-center text-center">
        <!-- Header -->
        <h1 class="text-2xl font-bold text-amber-400 mb-2">🇩🇪 Deutsch Quiz</h1>
        <p class="text-sm text-slate-400 mb-6">Trouvez le bon article pour chaque nom allemand !</p>

        <!-- Stats Bar -->
        <div class="w-full flex justify-between items-center bg-slate-900/60 rounded-lg p-3 mb-6 border border-slate-700 text-sm">
            <div>Score: <span id="score" class="font-bold text-emerald-400">0</span></div>
            <div>Question: <span id="current-q" class="font-bold text-amber-400">1</span>/<span id="total-q">10</span></div>
            <div>Série: <span id="streak" class="font-bold text-orange-400">0 🔥</span></div>
        </div>

        <!-- Progress Bar -->
        <div class="w-full bg-slate-700 h-2 rounded-full mb-8 overflow-hidden">
            <div id="progress" class="bg-amber-400 h-full w-0 transition-all duration-300"></div>
        </div>

        <!-- Word Card -->
        <div id="quiz-card" class="w-full bg-slate-700/50 rounded-xl p-8 mb-8 border border-slate-600 flex flex-col items-center justify-center min-h-[160px]">
            <span class="text-xs uppercase tracking-wider text-slate-400 mb-2">Quel est l'article ?</span>
            <div id="german-word" class="text-3xl font-extrabold text-white mb-2">...</div>
            <div id="word-translation" class="text-sm text-slate-400 italic">...</div>
        </div>

        <!-- Buttons -->
        <div id="options-container" class="grid grid-cols-3 gap-3 w-full mb-6">
            <button onclick="checkAnswer('der')" class="py-4 bg-blue-600 hover:bg-blue-500 active:scale-95 transition text-white font-bold text-lg rounded-xl shadow-lg border-b-4 border-blue-800">
                der
            </button>
            <button onclick="checkAnswer('die')" class="py-4 bg-rose-600 hover:bg-rose-500 active:scale-95 transition text-white font-bold text-lg rounded-xl shadow-lg border-b-4 border-rose-800">
                die
            </button>
            <button onclick="checkAnswer('das')" class="py-4 bg-amber-600 hover:bg-amber-500 active:scale-95 transition text-white font-bold text-lg rounded-xl shadow-lg border-b-4 border-amber-800">
                das
            </button>
        </div>

        <!-- Feedback Message -->
        <div id="feedback" class="h-8 text-sm font-semibold mb-4"></div>

        <!-- Next Button -->
        <button id="next-btn" onclick="nextQuestion()" class="hidden w-full py-3 bg-emerald-600 hover:bg-emerald-500 active:scale-95 transition text-white font-bold rounded-xl shadow-lg">
            Question suivante ➔
        </button>

        <!-- Result Screen -->
        <div id="result-screen" class="hidden flex-col items-center w-full">
            <h2 class="text-2xl font-bold text-white mb-2">Quiz terminé ! 🎉</h2>
            <p class="text-slate-300 mb-6" id="final-score">Votre score est de 0/10</p>
            <button onclick="restartQuiz()" class="w-full py-3 bg-amber-500 hover:bg-amber-400 text-slate-900 font-bold rounded-xl shadow-lg transition">
                Recommencer une partie
            </button>
        </div>
    </div>

    <script>
        const vocabulary = [
            { word: "Lehrer", article: "der", translation: "l'enseignant" },
            { word: "Füller", article: "der", translation: "le stylo-plume" },
            { word: "Mädchen", article: "das", translation: "la jeune fille" },
            { word: "Zimmer", article: "das", translation: "la chambre" },
            { word: "Koffer", article: "der", translation: "la valise" },
            { word: "Märchen", article: "das", translation: "le conte" },
            { word: "Apfel", article: "der", translation: "la pomme" },
            { word: "Vater", article: "der", translation: "le père" },
            { word: "Mutter", article: "die", translation: "la mère" },
            { word: "Bruder", article: "der", translation: "le frère" },
            { word: "Tochter", article: "die", translation: "la fille" },
            { word: "Vogel", article: "der", translation: "l'oiseau" },
            { word: "Freundin", article: "die", translation: "l'amie" },
            { word: "Frau", article: "die", translation: "la femme" },
            { word: "Übung", article: "die", translation: "l'exercice" },
            { word: "Uhr", article: "die", translation: "l'horloge" },
            { word: "Herr", article: "der", translation: "le monsieur" },
            { word: "Mensch", article: "der", translation: "l'être humain" },
            { word: "Person", article: "die", translation: "la personne" },
            { word: "Banane", article: "die", translation: "la banane" },
            { word: "Straße", article: "die", translation: "la rue" },
            { word: "Blume", article: "die", translation: "la fleur" },
            { word: "Aufgabe", article: "die", translation: "le devoir/l'exercice" },
            { word: "Pause", article: "die", translation: "la pause" },
            { word: "Klasse", article: "die", translation: "la classe" },
            { word: "Brot", article: "das", translation: "le pain" },
            { word: "Tag", article: "der", translation: "le jour" },
            { word: "Heft", article: "das", translation: "le cahier" },
            { word: "Jahr", article: "das", translation: "l'année" },
            { word: "Stift", article: "der", translation: "le crayon" },
            { word: "Film", article: "der", translation: "le film" },
            { word: "Saft", article: "der", translation: "le jus" },
            { word: "Stadt", article: "die", translation: "la ville" },
            { word: "Baum", article: "der", translation: "l'arbre" },
            { word: "Platz", article: "der", translation: "la place" },
            { word: "Fuß", article: "der", translation: "le pied" },
            { word: "Hof", article: "der", translation: "la cour" },
            { word: "Ei", article: "das", translation: "l'œuf" },
            { word: "Kind", article: "das", translation: "l'enfant" },
            { word: "Bild", article: "das", translation: "l'image/le tableau" },
            { word: "Lied", article: "das", translation: "la chanson" },
            { word: "Licht", article: "das", translation: "la lumière" },
            { word: "Feld", article: "das", translation: "le champ" },
            { word: "Buch", article: "das", translation: "le livre" },
            { word: "Land", article: "das", translation: "le pays" },
            { word: "Haus", article: "das", translation: "la maison" },
            { word: "Dorf", article: "das", translation: "le village" },
            { word: "Wald", article: "der", translation: "la forêt" },
            { word: "Blatt", article: "das", translation: "la feuille" },
            { word: "Auto", article: "das", translation: "la voiture" },
            { word: "Foto", article: "das", translation: "la photo" },
            { word: "Pizza", article: "die", translation: "la pizza" },
            { word: "Kino", article: "das", translation: "le cinéma" },
            { word: "Chef", article: "der", translation: "le chef" },
            { word: "Park", article: "der", translation: "le parc" }
        ];

        let questions = [];
        let currentIndex = 0;
        let score = 0;
        let streak = 0;
        const TOTAL_QUESTIONS = 10;

        function shuffle(array) {
            return array.sort(() => Math.random() - 0.5);
        }

        function restartQuiz() {
            questions = shuffle([...vocabulary]).slice(0, TOTAL_QUESTIONS);
            currentIndex = 0;
            score = 0;
            streak = 0;

            document.getElementById('total-q').innerText = TOTAL_QUESTIONS;
            document.getElementById('score').innerText = score;
            document.getElementById('streak').innerText = streak + " 🔥";
            
            document.getElementById('result-screen').classList.add('hidden');
            document.getElementById('result-screen').classList.remove('flex');
            document.getElementById('quiz-card').classList.remove('hidden');
            document.getElementById('options-container').classList.remove('hidden');

            loadQuestion();
        }

        function loadQuestion() {
            const current = questions[currentIndex];
            document.getElementById('current-q').innerText = currentIndex + 1;
            document.getElementById('german-word').innerText = current.word;
            document.getElementById('word-translation').innerText = current.translation;
            document.getElementById('feedback').innerText = '';
            document.getElementById('next-btn').classList.add('hidden');

            const progressPercent = (currentIndex / TOTAL_QUESTIONS) * 100;
            document.getElementById('progress').style.width = `${progressPercent}%`;

            const buttons = document.querySelectorAll('#options-container button');
            buttons.forEach(btn => {
                btn.disabled = false;
                btn.classList.remove('opacity-50', 'cursor-not-allowed');
            });
        }

        function checkAnswer(selectedArticle) {
            const current = questions[currentIndex];
            const isCorrect = selectedArticle === current.article;
            const feedbackEl = document.getElementById('feedback');

            const buttons = document.querySelectorAll('#options-container button');
            buttons.forEach(btn => {
                btn.disabled = true;
                btn.classList.add('opacity-50', 'cursor-not-allowed');
            });

            if (isCorrect) {
                score++;
                streak++;
                feedbackEl.innerText = `Bravo ! C'est bien "${current.article} ${current.word}".`;
                feedbackEl.className = "h-8 text-sm font-semibold mb-4 text-emerald-400";
            } else {
                streak = 0;
                feedbackEl.innerText = `Dommage ! La bonne réponse était "${current.article} ${current.word}".`;
                feedbackEl.className = "h-8 text-sm font-semibold mb-4 text-rose-400";
            }

            document.getElementById('score').innerText = score;
            document.getElementById('streak').innerText = streak + " 🔥";
            document.getElementById('next-btn').classList.remove('hidden');
        }

        function nextQuestion() {
            currentIndex++;
            if (currentIndex < TOTAL_QUESTIONS) {
                loadQuestion();
            } else {
                showResults();
            }
        }

        function showResults() {
            document.getElementById('quiz-card').classList.add('hidden');
            document.getElementById('options-container').classList.add('hidden');
            document.getElementById('next-btn').classList.add('hidden');
            document.getElementById('feedback').innerText = '';
            document.getElementById('progress').style.width = '100%';

            const resultScreen = document.getElementById('result-screen');
            resultScreen.classList.remove('hidden');
            resultScreen.classList.add('flex');

            document.getElementById('final-score').innerText = `Vous avez obtenu un score de ${score} sur ${TOTAL_QUESTIONS} !`;
        }

        restartQuiz();
    </script>
</body>
</html>