<!-- Header -->
<header class="header">
<div class="logo">
<span>🌟</span>
<span>ArabQuest</span>
</div>
<div class="user-stats">
<div class="stat">⭐ Points: <span id="total-points">0</span></div>
<div class="stat">🔥 Série: <span id="streak">0</span></div>
<div class="stat">🎯 Niveau: <span id="level">1</span></div>
</div>
</header>
<!-- Navigation -->
<nav class="nav-container">
<button class="nav-btn active" onclick="showActivity('memory')">🧩 Memory</button>
<button class="nav-btn" onclick="showActivity('flashcard')">🎴 Flashcards</button>
<button class="nav-btn" onclick="showActivity('matching')">🔗 Association</button>
<button class="nav-btn" onclick="showActivity('fillblank')">✏️ Phrases</button>
<button class="nav-btn" onclick="showActivity('intruder')">🕵️ Intruder</button>
<button class="nav-btn" onclick="showActivity('puzzle')">🧩 Puzzle</button>
<button class="nav-btn" onclick="showActivity('listening')">🎧 Écoute</button>
<button class="nav-btn" onclick="showActivity('categories')">📂 Catégories</button>
<button class="nav-btn" onclick="showActivity('dialogue')">💬 Dialogue</button>
<button class="nav-btn" onclick="showActivity('challenge')">🏆 Défi</button>
</nav>
<main class="main-container">
<!-- 1. MEMORY GAME -->
<section id="memory" class="activity-section active">
<div class="activity-header">
<h2>🧩 Jeu de Memory</h2>
<p>Retourne les cartes pour trouver les paires Arabe-Français</p>
</div>
<div class="game-container">
<div style="text-align: center; margin-bottom: 1rem;">
<span>Paires trouvées: <span id="memory-score">0</span>/8</span>
<span style="margin-left: 2rem;">Essais: <span id="memory-tries">0</span></span>
</div>
<div class="memory-grid" id="memory-grid"></div>
</div>
</section>
<!-- 2. FLASHCARD QUIZ -->
<section id="flashcard" class="activity-section">
<div class="activity-header">
<h2>🎴 Flashcards Rapides</h2>
<p>Clique sur la carte pour retourner, évalue ta réponse</p>
</div>
<div class="game-container">
<div class="flashcard" id="flashcard" onclick="flipCard()">
<div class="flashcard-inner">
<div class="flashcard-front">
<div id="flashcard-front-content">كتاب</div>
</div>
<div class="flashcard-back">
<div id="flashcard-back-content">Livre</div>
</div>
</div>
</div>
<div class="quiz-controls">
<button class="btn btn-danger" onclick="nextCard(false)">❌ À réviser</button>
<button class="btn btn-success" onclick="nextCard(true)">✅ Je connais</button>
</div>
<div style="text-align: center; margin-top: 1rem;">
<span id="flashcard-progress">1</span> / <span id="flashcard-total">10</span>
</div>
</div>
</section>
<!-- 3. MATCHING GAME -->
<section id="matching" class="activity-section">
<div class="activity-header">
<h2>🔗 Association de Mots</h2>
<p>Relie chaque mot arabe à sa traduction</p>
</div>
<div class="game-container">
<div class="matching-container" id="matching-container">
<div class="matching-column" id="arabic-words"></div>
<div class="matching-column" id="french-words"></div>
</div>
</div>
</section>
<!-- 4. FILL IN THE BLANKS -->
<section id="fillblank" class="activity-section">
<div class="activity-header">
<h2>✏️ Complète la Phrase</h2>
<p>Choisis le bon mot pour compléter la phrase</p>
</div>
<div class="game-container">
<div class="sentence-container" id="sentence-container">
Je vais à l' <span class="blank" id="blank1">_____</span> pour acheter du pain.
</div>
<div class="word-bank" id="word-bank"></div>
</div>
</section>
<!-- 5. INTRUDER GAME -->
<section id="intruder" class="activity-section">
<div class="activity-header">
<h2>🕵️ Trouve l'Intruder</h2>
<p>Quel mot ne fait pas partie de la famille ?</p>
</div>
<div class="game-container">
<div style="text-align: center; margin-bottom: 1rem; font-size: 1.2rem;">
Thème: <strong>Les fruits</strong>
</div>
<div class="intruder-grid" id="intruder-grid"></div>
</div>
</section>
<!-- 6. WORD PUZZLE -->
<section id="puzzle" class="activity-section">
<div class="activity-header">
<h2>🧩 Puzzle de Mots</h2>
<p>Remets les lettres dans le bon ordre</p>
</div>
<div class="game-container">
<div class="puzzle-container">
<div style="font-size: 1.2rem; margin-bottom: 1rem;">Indice: <span id="puzzle-hint">Animal qui aboie</span></div>
<div class="puzzle-word" id="scrambled-letters"></div>
<div class="drop-zone" id="puzzle-dropzone">
<span style="color: #999;">Glisse les lettres ici</span>
</div>
<button class="btn btn-primary" onclick="checkPuzzle()" style="margin-top: 1rem;">Vérifier</button>
</div>
</div>
</section>
<!-- 7. LISTENING GAME -->
<section id="listening" class="activity-section">
<div class="activity-header">
<h2>🎧 Écoute et Identifie</h2>
<p>Écoute le mot et choisis la bonne image</p>
</div>
<div class="game-container">
<button class="audio-btn" onclick="playAudio()" id="audio-btn">🔊</button>
<div style="text-align: center; color: #666;">Clique sur le haut-parleur pour écouter</div>
<div class="listening-options" id="listening-options"></div>
</div>
</section>
<!-- 8. CATEGORIZATION -->
<section id="categories" class="activity-section">
<div class="activity-header">
<h2>📂 Trie par Catégories</h2>
<p>Glisse les mots dans les bonnes familles</p>
</div>
<div class="game-container">
<div class="categories-container">
<div class="category-box" data-category="animals">
<div class="category-title">Animaux</div>
<div class="category-items"></div>
</div>
<div class="category-box" data-category="food">
<div class="category-title">Nourriture</div>
<div class="category-items"></div>
</div>
<div class="category-box" data-category="objects">
<div class="category-title">Objets</div>
<div class="category-items"></div>
</div>
</div>
<div class="words-pool" id="words-pool"></div>
</div>
</section>
<!-- 9. DIALOGUE GAME -->
<section id="dialogue" class="activity-section">
<div class="activity-header">
<h2>💬 Dialogue Interactif</h2>
<p>Choisis la bonne réponse pour continuer la conversation</p>
</div>
<div class="game-container">
<div class="dialogue-container" id="dialogue-container">
<div class="dialogue-bubble french">
<strong>Marie:</strong> Bonjour ! Comment ça va ?
</div>
<div class="dialogue-bubble arabic">
<strong>Ahmed:</strong> <span id="dialogue-text">_____</span>
</div>
</div>
<div class="dialogue-options" id="dialogue-options"></div>
</div>
</section>
<!-- 10. DAILY CHALLENGE -->
<section id="challenge" class="activity-section">
<div class="activity-header">
<h2>🏆 Défi du Jour</h2>
<p>Enchaîne les 5 activités pour décrocher le badge !</p>
</div>
<div class="game-container">
<div class="challenge-progress">
<div class="challenge-step active">1</div>
<div class="challenge-step">2</div>
<div class="challenge-step">3</div>
<div class="challenge-step">4</div>
<div class="challenge-step">5</div>
</div>
<div id="challenge-content">
<div style="text-align: center; padding: 3rem;">
<h3>Prêt pour le défi ?</h3>
<p style="margin: 1rem 0;">5 mini-jeux, 1 seule vie. Bat ton record !</p>
<button class="btn btn-primary" onclick="startChallenge()">Commencer le Défi</button>
</div>
</div>
</div>
</section>
</main>
<!-- Score Modal -->
<div class="modal" id="score-modal">
<div class="modal-content">
<h2>🎉 Félicitations !</h2>
<div class="score-display" id="modal-score">100</div>
<p id="modal-message">Excellent travail !</p>
<button class="btn btn-primary" onclick="closeModal()" style="margin-top: 1rem;">Continuer</button>
</div>
</div>