diff --git a/exercices/memory-pictogrammes/assets/css/leaderboard.css b/exercices/memory-pictogrammes/assets/css/leaderboard.css index bebea3a..80cd9c8 100644 --- a/exercices/memory-pictogrammes/assets/css/leaderboard.css +++ b/exercices/memory-pictogrammes/assets/css/leaderboard.css @@ -154,7 +154,7 @@ font-size: 14px; } -.player-stats { +.rank-meta { font-size: 12px; color: var(--text-muted); display: flex; @@ -162,7 +162,7 @@ flex-wrap: wrap; } -.player-stats span { +.rank-meta span { display: inline-flex; align-items: center; gap: 4px; @@ -233,31 +233,31 @@ ============================================ */ .player-stats { background: linear-gradient(135deg, rgba(15, 110, 86, 0.05), transparent); - border-radius: 16px; - padding: 32px; + border-radius: 12px; + padding: 24px; border: 2px solid var(--teal-light); } .player-stats h3 { font-family: 'Syne', sans-serif; - font-size: 24px; + font-size: 18px; font-weight: 700; color: var(--teal); - margin-bottom: 24px; + margin-bottom: 16px; text-align: center; } .stats-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - gap: 16px; + grid-template-columns: repeat(4, 1fr); + gap: 12px; } .stat-card { background: var(--white); border: 2px solid var(--teal-light); - border-radius: 12px; - padding: 20px; + border-radius: 10px; + padding: 14px 8px; text-align: center; transition: all 0.3s ease; display: flex; @@ -272,21 +272,21 @@ } .stat-icon { - font-size: 32px; - margin-bottom: 12px; + font-size: 22px; + margin-bottom: 6px; } .stat-label { - font-size: 11px; + font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); - margin-bottom: 8px; + margin-bottom: 4px; } .stat-value { - font-size: 28px; + font-size: 20px; font-weight: 800; background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark)); -webkit-background-clip: text; @@ -296,7 +296,7 @@ } .stat-card.high-value .stat-value { - font-size: 32px; + font-size: 22px; animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @@ -360,29 +360,29 @@ } .player-stats { - padding: 24px; + padding: 20px; } - + .player-stats h3 { - font-size: 20px; + font-size: 18px; } - + .stats-grid { grid-template-columns: repeat(2, 1fr); - gap: 12px; + gap: 10px; } - + .stat-card { - padding: 16px; + padding: 14px 10px; } - + .stat-icon { - font-size: 28px; - margin-bottom: 8px; - } - - .stat-value { font-size: 24px; + margin-bottom: 6px; + } + + .stat-value { + font-size: 22px; } } @@ -424,24 +424,25 @@ .player-stats { padding: 16px; } - + .player-stats h3 { + font-size: 16px; + } + + .stats-grid { + grid-template-columns: repeat(2, 1fr); + gap: 8px; + } + + .stat-card { + padding: 12px 8px; + } + + .stat-icon { + font-size: 22px; + } + + .stat-value { font-size: 18px; } - - .stats-grid { - grid-template-columns: 1fr; - } - - .stat-card { - padding: 12px; - } - - .stat-icon { - font-size: 24px; - } - - .stat-value { - font-size: 20px; - } } diff --git a/exercices/memory-pictogrammes/assets/js/leaderboard.js b/exercices/memory-pictogrammes/assets/js/leaderboard.js index 38dc458..3960f8f 100644 --- a/exercices/memory-pictogrammes/assets/js/leaderboard.js +++ b/exercices/memory-pictogrammes/assets/js/leaderboard.js @@ -195,7 +195,7 @@ class LeaderboardManager {
${rankNumber}
${this.escapeHTML(score.playerName)}
-
+
⏱ ${formatTime(score.timeSeconds)} 🎯 ${score.moves} mouvements ${score.isPerfect ? '✨ Parfait' : ''}