Renomme la marque en Gauthier Chombart & Nathan Chauwin et finalise le jeu Memory

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.
This commit is contained in:
2026-07-14 23:02:09 +02:00
parent 9140d2f468
commit 44be41b2b2
22 changed files with 747 additions and 327 deletions

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Pictogrammes GHS - NextGN Formation</title>
<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 -->
@@ -14,9 +14,9 @@
<link rel="stylesheet" href="assets/css/leaderboard.css?v=3">
</head>
<body>
<!-- HEADER NextGN Formation -->
<!-- HEADER Gauthier Chombart & Nathan Chauwin -->
<header>
<div class="logo">NextGN Formation</div>
<div class="logo">Gauthier Chombart & Nathan Chauwin</div>
<nav>
<a href="../../index.html">Accueil</a>
<a href="../../index.html#formations">Exercices</a>
@@ -47,119 +47,147 @@
</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
<!-- 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-secondary" id="pause-btn">
⏸ Pause
<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>
</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 -->
<!-- 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>
<!-- 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>
<!-- 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>
</div>
</section>
</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">
@@ -201,7 +229,7 @@
<!-- FOOTER -->
<footer>
<p>&copy; 2024 NextGN Formation - Memory Pictogrammes GHS</p>
<p>&copy; 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>