<!DOCTYPE html>
<html lang="fr">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="ressources/script.js"></script>
	<script src="ressources/css.js"></script>
	<script src="ressources/quiz.js"></script>
    <link rel="shortcut icon" href="ressources/images/cadeau.ico" type="image/x-icon">
    <title>Le quiz de Noël</title>
</head>


<body>

    <header>
        <h1>🎄🎁❄ - Le quiz de Noël - ❄🎁🎄</h1>
        <!-- Cases pour les lettres -->
        <div id="letters-container"> </div>
        <!-- Conteneur pour la neige -->
        <div id="snow-container"></div>
    </header>


    <main>
        <!-- Section pour le pseudonyme -->
        <section id="pseudonyme-section">
            <div class="card">
                <h2>Entrez votre Nom et Prénom pour commencer :</h2>
                <input type="text" id="username" placeholder="Votre nom et prénom">
                <button onclick="startGame()">Valider</button>
            </div>
        </section>


        <!-- Grille en forme de sapin -->
        <section id="tree-section" class="hidden">
            <div id="question-tree">
                <!-- Grille du sapin injectée ici par le script -->
            </div>
        </section>


        <!-- Question en cours -->
        <section id="current-question-section" class="hidden">
            <div class="card">
                <h2 id="current-question-title"></h2>
                <input type="text" id="current-answer" placeholder="Votre réponse">
                <button onclick="validateAnswer()">Valider</button>
            </div>
        </section>

        <!-- Image cadeau gauche de l'écran -->
        <div id="gift-container">
            <img src="ressources/images/gift.png" alt="Cadeau">
        </div>
            <!-- Image sapin droite de l'écran -->
        <div id="tree-container">
            <img src="ressources/images/christmas_tree.png" alt="Sapin">
        </div>

        <!-- Compte à rebours  -->

    </main>

    <!-- Pied de page -->
    <footer>
        <p>&copy; Lycée Paul Langevin - 2024 - Quiz de Noël - STI2D</p>
    </footer>
    
        <!-- Pop-up de félicitations -->
    <div id="congratulations-modal" class="hidden">
        <div class="modal-content">
            <h2>🎉 Félicitations ! 🎉</h2>
            <p>BONNES FÊTES DE FIN D'ANNÉE À TOUS !</p>
            <button onclick="closeModal()">Fermer</button>
        </div>
    </div>
</body>
</html>