gauthier.chombart
44be41b2b2
Header, footer, titres et balises meta de toutes les pages actives : remplace NextGN Formation par Gauthier Chombart & Nathan Chauwin. Nouveau pied de page uniforme mentionnant les droits reserves et le statut de formateurs independants (dossier archives/ laisse inchange). Integre aussi la refonte du jeu Memory (CSS/JS/HUD/leaderboard) et ajoute le rapport de veille Certibiocide semaine 28.
244 lines
9.9 KiB
HTML
244 lines
9.9 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 - Gauthier Chombart & Nathan Chauwin</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 Gauthier Chombart & Nathan Chauwin -->
|
|
<header>
|
|
<div class="logo">Gauthier Chombart & Nathan Chauwin</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>
|
|
|
|
<!-- TOP BAR (niveau + stats en temps réel) -->
|
|
<div class="game-top-bar">
|
|
<!-- 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>
|
|
</div>
|
|
|
|
<!-- GAME LAYOUT (classement / jeu / statistiques) -->
|
|
<div class="game-layout">
|
|
<!-- LEADERBOARD PANEL (gauche) -->
|
|
<aside class="leaderboard-panel">
|
|
<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>
|
|
</aside>
|
|
|
|
<!-- GAME SECTION (centre) -->
|
|
<section class="game-section">
|
|
<div class="game-panel">
|
|
<!-- 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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PLAYER STATS PANEL (droite) -->
|
|
<aside class="stats-panel">
|
|
<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>
|
|
</aside>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- PLAYER NAME MODAL (1ère partie) -->
|
|
<div class="victory-modal hidden" id="player-name-modal">
|
|
<div class="modal-content name-modal-content">
|
|
<h2>Bienvenue ! 👋</h2>
|
|
<p class="name-modal-text">
|
|
Entrez votre nom ou un pseudo pour apparaître dans le classement général.
|
|
</p>
|
|
<input
|
|
type="text"
|
|
id="player-name-input"
|
|
class="name-input"
|
|
maxlength="20"
|
|
placeholder="Votre nom ou pseudo"
|
|
autocomplete="off"
|
|
>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-primary" id="player-name-confirm">
|
|
🎮 Commencer à jouer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>© 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</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>
|