gauthier.chombart
9140d2f468
Le jeu utilisait le teal comme couleur dominante (titres, bordures, boutons, cartes) alors que le reste du site n'emploie le teal que ponctuellement (état de succès) et repose sur l'ambre comme couleur principale. Remplace toutes les références teal par l'ambre déjà défini dans header-style.css, et réaffecte le teal à son rôle habituel de couleur de succès (paire trouvée), à la place du vert générique utilisé jusqu'ici. Renomme aussi le titre en "Memory pictogrammes", augmente la marge sous le header pour éviter tout chevauchement, et ajoute un paramètre de version aux feuilles de style du jeu pour éviter les soucis de cache navigateur lors des prochaines mises à jour.
216 lines
8.8 KiB
HTML
216 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?v=3">
|
|
<link rel="stylesheet" href="assets/css/hud.css?v=3">
|
|
<link rel="stylesheet" href="assets/css/animations.css?v=3">
|
|
<link rel="stylesheet" href="assets/css/leaderboard.css?v=3">
|
|
</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">
|
|
<h1>Memory pictogrammes</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>
|