gauthier.chombart
2227aa89d5
Corrige les pictogrammes cassés (mauvais noms de fichiers dans utils.js) et le conflit de classe CSS .progress-bar avec le header qui cassait la barre de progression du jeu. Réorganise l'interface dans un panneau de jeu unifié, ajoute des icônes aux statistiques et au sélecteur de difficulté, et rend le dos des cartes plus ludique.
217 lines
8.8 KiB
HTML
217 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Memory Pictogrammes GHS - NextGN Formation</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
|
|
|
|
<!-- Styles -->
|
|
<link rel="stylesheet" href="../../header-style.css"/>
|
|
<link rel="stylesheet" href="assets/css/memory-game.css">
|
|
<link rel="stylesheet" href="assets/css/hud.css">
|
|
<link rel="stylesheet" href="assets/css/animations.css">
|
|
<link rel="stylesheet" href="assets/css/leaderboard.css">
|
|
</head>
|
|
<body>
|
|
<!-- HEADER NextGN Formation -->
|
|
<header>
|
|
<div class="logo">NextGN Formation</div>
|
|
<nav>
|
|
<a href="../../index.html">Accueil</a>
|
|
<a href="../../index.html#formations">Exercices</a>
|
|
<a href="../../index.html#documentation">Documentation</a>
|
|
<a href="../../index.html#rapports">Rapports</a>
|
|
<a href="../../index.html#about">À propos</a>
|
|
<a href="../../index.html#contact">Contact</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- PROGRESS BAR -->
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progress-fill"></div>
|
|
</div>
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<main class="game-container">
|
|
<!-- INTRO SECTION -->
|
|
<section class="intro-section">
|
|
<div class="intro-badge">🎮</div>
|
|
<h1>Memory Pictogrammes GHS</h1>
|
|
<p class="subtitle">Maîtrisez les 9 symboles de danger</p>
|
|
|
|
<div class="intro-box">
|
|
<p>
|
|
<strong>Objectif :</strong> Retrouvez les paires en associant chaque pictogramme à sa signification.
|
|
Plus rapide vous êtes, plus de points vous gagnez! 🏆
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- GAME SECTION -->
|
|
<section class="game-section">
|
|
<div class="game-panel">
|
|
<!-- DIFFICULTY SELECTOR -->
|
|
<div class="difficulty-selector">
|
|
<label>Choisir le niveau</label>
|
|
<div class="btn-group">
|
|
<button class="btn btn-difficulty" data-difficulty="easy">
|
|
<span class="btn-icon">🌱</span>
|
|
<span class="btn-label">Facile</span>
|
|
<span class="btn-desc">4 paires</span>
|
|
</button>
|
|
<button class="btn btn-difficulty active" data-difficulty="normal">
|
|
<span class="btn-icon">🎯</span>
|
|
<span class="btn-label">Normal</span>
|
|
<span class="btn-desc">9 paires</span>
|
|
</button>
|
|
<button class="btn btn-difficulty" data-difficulty="hard">
|
|
<span class="btn-icon">🔥</span>
|
|
<span class="btn-label">Difficile</span>
|
|
<span class="btn-desc">2 min chrono</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HUD (Stats en temps réel) -->
|
|
<div class="game-hud">
|
|
<div class="stat-box">
|
|
<div class="label">🏆 Score</div>
|
|
<div class="value" id="score-display">0</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="label">👆 Mouvements</div>
|
|
<div class="value" id="moves-display">0</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="label">⏱ Temps</div>
|
|
<div class="value" id="timer-display">00:00</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="label">🧩 Paires</div>
|
|
<div class="value" id="pairs-display">0/9</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PROGRESS BAR -->
|
|
<div class="progress-container">
|
|
<div class="game-progress-fill" id="progress-bar"></div>
|
|
</div>
|
|
|
|
<!-- GAME GRID -->
|
|
<div class="game-grid" id="game-grid">
|
|
<!-- Cartes générées par JS -->
|
|
</div>
|
|
|
|
<!-- CONTROLS -->
|
|
<div class="game-controls">
|
|
<button class="btn btn-primary" id="restart-btn">
|
|
🔄 Recommencer
|
|
</button>
|
|
<button class="btn btn-secondary" id="pause-btn">
|
|
⏸ Pause
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- LEADERBOARD SECTION -->
|
|
<section class="leaderboard-section">
|
|
<h2>🏆 Classement</h2>
|
|
|
|
<div class="tabs">
|
|
<button class="tab-btn active" data-filter="all">Tous</button>
|
|
<button class="tab-btn" data-filter="easy">Facile</button>
|
|
<button class="tab-btn" data-filter="normal">Normal</button>
|
|
<button class="tab-btn" data-filter="hard">Difficile</button>
|
|
</div>
|
|
|
|
<div class="leaderboard">
|
|
<div class="leaderboard-list" id="leaderboard-list">
|
|
<!-- Rempli par JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PLAYER STATS -->
|
|
<div class="player-stats">
|
|
<h3>Vos statistiques</h3>
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-icon">🎮</div>
|
|
<div class="stat-label">Jeux joués</div>
|
|
<div class="stat-value" id="total-games">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">⭐</div>
|
|
<div class="stat-label">Meilleur score</div>
|
|
<div class="stat-value" id="best-score">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">⚡</div>
|
|
<div class="stat-label">Temps record</div>
|
|
<div class="stat-value" id="best-time">--</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">🏅</div>
|
|
<div class="stat-label">Taux de réussite</div>
|
|
<div class="stat-value" id="win-rate">0%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- VICTORY MODAL -->
|
|
<div class="victory-modal hidden" id="victory-modal">
|
|
<div class="modal-content">
|
|
<h2 id="victory-title">Bravo! 🎉</h2>
|
|
<div class="score-display" id="final-score">0</div>
|
|
|
|
<div class="stats-summary">
|
|
<div class="stat">
|
|
<div class="stat-label">Mouvements</div>
|
|
<div class="stat-value" id="modal-moves">0</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-label">Temps</div>
|
|
<div class="stat-value" id="modal-time">00:00</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-label">Difficulté</div>
|
|
<div class="stat-value" id="modal-difficulty">Normal</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-label">Bonus temps</div>
|
|
<div class="stat-value" id="modal-bonus">+0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ACHIEVEMENTS -->
|
|
<div class="achievements-list" id="achievements-list"></div>
|
|
|
|
<div class="modal-actions">
|
|
<button class="btn btn-primary" id="play-again-btn">
|
|
🎮 Rejouer
|
|
</button>
|
|
<button class="btn btn-secondary" id="view-leaderboard-btn">
|
|
🏆 Voir Classement
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<p>© 2024 NextGN Formation - Memory Pictogrammes GHS</p>
|
|
<p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés - Formateurs indépendants</p>
|
|
</footer>
|
|
|
|
<!-- SCRIPTS -->
|
|
<script src="assets/js/utils.js"></script>
|
|
<script src="assets/js/game-state.js"></script>
|
|
<script src="assets/js/analytics.js"></script>
|
|
<script src="assets/js/leaderboard.js"></script>
|
|
<script src="assets/js/memory-game.js"></script>
|
|
</body>
|
|
</html>
|