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
+
+
- -
- -
+ +
+
+
- -
- - + +
+ +
+ + +
+ + +