209 lines
8.1 KiB
HTML
209 lines
8.1 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="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 class="nav-header">
|
|
<a href="../../index.html" class="header-logo">
|
|
<span>NextGN</span> Formation
|
|
</a>
|
|
<nav class="header-nav">
|
|
<a href="../../index.html">Accueil</a>
|
|
<a href="../../index.html#formations">Formations</a>
|
|
<a href="../../index.html#contact">Contact</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- PROGRESS BAR -->
|
|
<div class="progress">
|
|
<div class="progress-fill" id="progress-fill"></div>
|
|
</div>
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<main class="game-container">
|
|
<!-- INTRO SECTION -->
|
|
<section class="intro-section">
|
|
<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>
|
|
|
|
<!-- 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-label">Facile</span>
|
|
<span class="btn-desc">4 paires</span>
|
|
</button>
|
|
<button class="btn btn-difficulty active" data-difficulty="normal">
|
|
<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-label">Difficile</span>
|
|
<span class="btn-desc">2 min chrono</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- GAME SECTION -->
|
|
<section class="game-section">
|
|
<!-- 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="progress-bar" 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>
|
|
</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>
|