From 2227aa89d545287ccfabe5dd55f2482ba7fbcc77 Mon Sep 17 00:00:00 2001 From: "gauthier.chombart" Date: Tue, 7 Jul 2026 16:58:40 +0200 Subject: [PATCH] Refonte visuelle du jeu Memory Pictogrammes GHS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../assets/css/animations.css | 2 +- .../memory-pictogrammes/assets/css/hud.css | 4 +- .../assets/css/memory-game.css | 117 ++++++++++++------ .../memory-pictogrammes/assets/js/utils.js | 18 +-- exercices/memory-pictogrammes/memory.html | 116 +++++++++-------- 5 files changed, 152 insertions(+), 105 deletions(-) diff --git a/exercices/memory-pictogrammes/assets/css/animations.css b/exercices/memory-pictogrammes/assets/css/animations.css index dd253dd..f8e8856 100644 --- a/exercices/memory-pictogrammes/assets/css/animations.css +++ b/exercices/memory-pictogrammes/assets/css/animations.css @@ -108,7 +108,7 @@ } } -.progress-bar.pulse { +.game-progress-fill.pulse { animation: progressPulse 0.6s ease-out; } diff --git a/exercices/memory-pictogrammes/assets/css/hud.css b/exercices/memory-pictogrammes/assets/css/hud.css index 626987f..3d3e847 100644 --- a/exercices/memory-pictogrammes/assets/css/hud.css +++ b/exercices/memory-pictogrammes/assets/css/hud.css @@ -82,14 +82,14 @@ box-shadow: var(--shadow-sm); } -.progress-bar { +.game-progress-fill { height: 100%; background: linear-gradient(90deg, var(--teal-mid), var(--teal-dark)); width: 0%; transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } -.progress-container.pulse .progress-bar { +.progress-container.pulse .game-progress-fill { animation: progressPulse 0.6s ease-out; } diff --git a/exercices/memory-pictogrammes/assets/css/memory-game.css b/exercices/memory-pictogrammes/assets/css/memory-game.css index 99cdc8c..3abee6a 100644 --- a/exercices/memory-pictogrammes/assets/css/memory-game.css +++ b/exercices/memory-pictogrammes/assets/css/memory-game.css @@ -21,7 +21,7 @@ ============================================ */ main { margin-top: 70px; - padding: 40px; + padding: 56px 40px 40px; min-height: calc(100vh - 70px); } @@ -34,13 +34,29 @@ main { INTRO SECTION ============================================ */ .intro-section { - margin-bottom: 60px; + margin-bottom: 48px; animation: fadeInDown 0.6s ease-out; + text-align: center; +} + +.intro-badge { + display: inline-flex; + align-items: center; + justify-content: center; + width: 64px; + height: 64px; + border-radius: 50%; + background: linear-gradient(135deg, var(--teal-light), var(--white)); + border: 2px solid var(--teal-mid); + font-size: 30px; + margin-bottom: 16px; + box-shadow: var(--shadow-sm); + animation: bounce 2.4s ease-in-out infinite; } .intro-section h1 { font-family: 'Syne', sans-serif; - font-size: clamp(28px, 5vw, 48px); + font-size: clamp(28px, 5vw, 44px); font-weight: 800; color: var(--teal); margin-bottom: 8px; @@ -60,7 +76,6 @@ main { border-left: 4px solid var(--teal-mid); border-radius: 8px; padding: 20px; - margin-bottom: 32px; font-size: 0.95em; color: var(--text-muted); line-height: 1.6; @@ -70,57 +85,84 @@ main { text-align: center; } +/* ============================================ + GAME SECTION / PANEL + ============================================ */ +.game-section { + margin-bottom: 80px; + animation: fadeInUp 0.6s ease-out 0.3s both; +} + +.game-panel { + background: var(--white); + border: 1px solid var(--teal-light); + border-radius: 24px; + padding: clamp(20px, 4vw, 40px); + box-shadow: var(--shadow-md); +} + /* ============================================ DIFFICULTY SELECTOR ============================================ */ .difficulty-selector { - margin-bottom: 48px; + margin-bottom: 32px; text-align: center; - animation: fadeInUp 0.6s ease-out 0.2s both; } .difficulty-selector label { display: block; - font-size: 14px; - font-weight: 600; + font-size: 12px; + font-weight: 700; text-transform: uppercase; - letter-spacing: 0.08em; + letter-spacing: 0.1em; color: var(--text-muted); - margin-bottom: 16px; + margin-bottom: 14px; } .btn-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; - max-width: 500px; + max-width: 520px; margin: 0 auto; } .btn-difficulty { - background: var(--white); - border: 2px solid var(--teal-light); - border-radius: 8px; - padding: 16px 12px; + background: var(--teal-light); + background: linear-gradient(135deg, rgba(225, 245, 238, 0.5), transparent); + border: 2px solid transparent; + border-radius: 12px; + padding: 14px 12px; font-family: 'Syne', sans-serif; cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; - gap: 4px; + gap: 2px; } .btn-difficulty:hover { border-color: var(--teal-mid); - transform: translateY(-4px); + transform: translateY(-3px); box-shadow: var(--shadow-md); } .btn-difficulty.active { - background: linear-gradient(135deg, var(--teal-light), var(--white)); - border-color: var(--teal-mid); - color: var(--teal); + background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark)); + border-color: var(--teal-dark); + box-shadow: var(--shadow-md); +} + +.btn-difficulty.active .btn-label, +.btn-difficulty.active .btn-desc { + color: var(--white); +} + +.btn-icon { + font-size: 20px; + line-height: 1; + margin-bottom: 2px; } .btn-label { @@ -130,20 +172,12 @@ main { } .btn-desc { - font-size: 12px; + font-size: 11px; font-family: 'DM Sans', sans-serif; color: var(--text-muted); font-weight: 400; } -/* ============================================ - GAME SECTION - ============================================ */ -.game-section { - margin-bottom: 80px; - animation: fadeInUp 0.6s ease-out 0.3s both; -} - /* ============================================ GAME GRID & CARDS ============================================ */ @@ -152,7 +186,7 @@ main { grid-template-columns: repeat(auto-fit, minmax(clamp(70px, 15vw, 140px), 1fr)); gap: clamp(12px, 2vw, 20px); max-width: 900px; - margin: 0 auto 40px; + margin: 0 auto 32px; padding: 20px; background: linear-gradient(135deg, rgba(225, 245, 238, 0.4), transparent); border-radius: 16px; @@ -188,10 +222,13 @@ main { } .card-face.front { - background: linear-gradient(135deg, var(--teal-light), var(--teal-light)); - border: 2px solid var(--teal-mid); - color: var(--teal-dark); + background: + radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.6), transparent 60%), + linear-gradient(135deg, var(--teal-mid), var(--teal-dark)); + border: 2px solid var(--teal-dark); + color: var(--white); box-shadow: var(--shadow-sm); + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } .card-face.back { @@ -315,13 +352,17 @@ footer { ============================================ */ @media (max-width: 768px) { main { - padding: 20px; + padding: 32px 20px 20px; } - + .intro-section h1 { font-size: 28px; } - + + .game-panel { + border-radius: 16px; + } + .game-grid { gap: 12px; padding: 16px; @@ -345,9 +386,9 @@ footer { @media (max-width: 480px) { main { - padding: 16px; + padding: 24px 16px 16px; } - + .intro-section h1 { font-size: 24px; } diff --git a/exercices/memory-pictogrammes/assets/js/utils.js b/exercices/memory-pictogrammes/assets/js/utils.js index af08c84..2bb63f2 100644 --- a/exercices/memory-pictogrammes/assets/js/utils.js +++ b/exercices/memory-pictogrammes/assets/js/utils.js @@ -9,7 +9,7 @@ const PICTOGRAMMES = [ { id: 1, nom: "Gaz comprimé", - filename: "1-gaz-comprime.png", + filename: "sous_pression.jpg", texte: "Je suis sous pression", danger: "Danger physique", couleur: "teal" @@ -17,7 +17,7 @@ const PICTOGRAMMES = [ { id: 2, nom: "Exclamation", - filename: "2-exclamation.png", + filename: "nocif_irritant_ozone.jpg", texte: "Je nuis gravement à la santé", danger: "Danger pour la santé", couleur: "teal" @@ -25,7 +25,7 @@ const PICTOGRAMMES = [ { id: 3, nom: "Explosion", - filename: "3-explosion.png", + filename: "explosif.jpg", texte: "J'explose", danger: "Danger physique", couleur: "teal" @@ -33,7 +33,7 @@ const PICTOGRAMMES = [ { id: 4, nom: "Crâne", - filename: "4-crane.png", + filename: "toxicite_aigue.jpg", texte: "Je tue", danger: "Danger physique", couleur: "teal" @@ -41,7 +41,7 @@ const PICTOGRAMMES = [ { id: 5, nom: "Flamme", - filename: "5-flamme.png", + filename: "inflammable.jpg", texte: "Je flambe", danger: "Danger physique", couleur: "teal" @@ -49,7 +49,7 @@ const PICTOGRAMMES = [ { id: 6, nom: "Comburant", - filename: "6-comburant.png", + filename: "comburant.jpg", texte: "Je fais flamber", danger: "Danger physique", couleur: "teal" @@ -57,7 +57,7 @@ const PICTOGRAMMES = [ { id: 7, nom: "Environnement", - filename: "7-environnement.png", + filename: "pollution.jpg", texte: "Je pollue", danger: "Danger pour l'environnement", couleur: "teal" @@ -65,7 +65,7 @@ const PICTOGRAMMES = [ { id: 8, nom: "Corrosion", - filename: "8-corrosion.png", + filename: "corrosif.jpg", texte: "Je ronge", danger: "Danger physique", couleur: "teal" @@ -73,7 +73,7 @@ const PICTOGRAMMES = [ { id: 9, nom: "Santé/Environnement", - filename: "9-sante-environnement.png", + filename: "cmr.jpg", texte: "J'altère la santé ou la couche d'ozone", danger: "Danger pour la santé/Environnement", couleur: "teal" diff --git a/exercices/memory-pictogrammes/memory.html b/exercices/memory-pictogrammes/memory.html index edcaa9e..bd0e3dc 100644 --- a/exercices/memory-pictogrammes/memory.html +++ b/exercices/memory-pictogrammes/memory.html @@ -36,76 +36,82 @@
-

🎮 Memory Pictogrammes GHS

+
🎮
+

Memory Pictogrammes GHS

Maîtrisez les 9 symboles de danger

- +

Objectif : Retrouvez les paires en associant chaque pictogramme à sa signification. Plus rapide vous êtes, plus de points vous gagnez! 🏆

- - -
- -
- - - -
-
- -
-
-
Score
-
0
+
+ +
+ +
+ + + +
-
-
Mouvements
-
0
-
-
-
Temps
-
00:00
-
-
-
Paires
-
0/9
-
-
- -
-
-
+ +
+
+
🏆 Score
+
0
+
+
+
👆 Mouvements
+
0
+
+
+
⏱ Temps
+
00:00
+
+
+
🧩 Paires
+
0/9
+
+
- -
- -
+ +
+
+
- -
- - + +
+ +
+ + +
+ + +