Gauthier/Site_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refonte visuelle du jeu Memory Pictogrammes GHS

Browse Source 
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.
This commit is contained in:
gauthier.chombart
2026-07-07 16:58:40 +02:00
parent 954c7d2b1a
commit 2227aa89d5
5 changed files with 152 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
exercices/memory-pictogrammes/assets/css/animations.css
View File

@@ -108,7 +108,7 @@
}
}
.progress-bar.pulse {
.game-progress-fill.pulse {
animation: progressPulse 0.6s ease-out;
}

4
exercices/memory-pictogrammes/assets/css/hud.css
View File

@@ -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;
}

117
exercices/memory-pictogrammes/assets/css/memory-game.css
View File

@@ -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;
}

18
exercices/memory-pictogrammes/assets/js/utils.js
View File

@@ -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"