ORGANISATION-KA-INTERNATIONALE/JWE
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): enhance region maps contrast in dark/light & desktop single-screen layout

Browse Source
This commit is contained in:
cyber-mawonaj
2026-08-16 22:46:25 -04:00
parent 2c0d5ea229
commit e4d9920ac9
2 changed files with 338 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/lib/components/CarteRegions.svelte
+89 -12
View File
@@ -202,6 +202,14 @@
style:--d={cascadeBase === null ? undefined : `${syncopatedDelay(cascadeBase + i)}ms`} style:--d={cascadeBase === null ? undefined : `${syncopatedDelay(cascadeBase + i)}ms`}
use:reveal={cascadeBase !== null} use:reveal={cascadeBase !== null}
> >
<rect
class="fond-cellule"
x={ins.colonne * CELLULE_L + 6}
y={ins.rang * CELLULE_H + 6}
width={CELLULE_L - 12}
height={CELLULE_H - 12}
rx="12"
/>
{#each ins.chemins as d (d)} {#each ins.chemins as d (d)}
<path {d} /> <path {d} />
{/each} {/each}
@@ -267,39 +275,108 @@
height: auto; height: auto;
} }
/* — Régions : tokens OKI — */ /* — Fonds de cellules des 4 insets régionaux — */
.fond-cellule {
fill: #1a131c;
stroke: #2e2233;
stroke-width: 1.5;
transition:
fill var(--dur-tanbou) var(--ease-ka),
stroke var(--dur-tanbou) var(--ease-ka);
}
:global(html.light-theme) .fond-cellule {
fill: #f4ead4;
stroke: #ded0b8;
}
/* — Régions : Formes territoriales nettes et contrastées — */
.region path { .region path {
fill: var(--card-bg); fill: #22382d;
stroke: var(--line); stroke: #00d66c;
stroke-width: 1; stroke-width: 1.2;
transition: fill var(--dur-tanbou) var(--ease-ka), stroke var(--dur-tanbou) var(--ease-ka); stroke-linejoin: round;
transition:
fill var(--dur-tanbou) var(--ease-ka),
stroke var(--dur-tanbou) var(--ease-ka);
}
:global(html.light-theme) .region path {
fill: #d3e8dc;
stroke: #006b3d;
stroke-width: 1.2;
}
/* Survol */
.region.survolee .fond-cellule {
fill: #261a2b;
stroke: var(--or-oki);
stroke-width: 2;
}
:global(html.light-theme) .region.survolee .fond-cellule {
fill: #ebdcbD;
stroke: var(--or-oki);
} }
.region.survolee path { .region.survolee path {
fill: var(--card-bg-hover); fill: #2f4d3e;
stroke: var(--or-oki);
stroke-width: 1.6;
}
:global(html.light-theme) .region.survolee path {
fill: #c3dfcd;
stroke: var(--or-oki); stroke: var(--or-oki);
} }
.region.choisie path { /* Sélection */
fill: rgba(253, 184, 19, 0.18); .region.choisie .fond-cellule {
fill: rgba(253, 184, 19, 0.12);
stroke: var(--or-oki);
stroke-width: 2.5;
}
:global(html.light-theme) .region.choisie .fond-cellule {
fill: #fff2d1;
stroke: var(--or-oki);
stroke-width: 2.5;
}
.region.choisie path {
fill: #4b3a13;
stroke: var(--or-oki);
stroke-width: 1.8;
}
:global(html.light-theme) .region.choisie path {
fill: #fde2a2;
stroke: var(--or-oki); stroke: var(--or-oki);
stroke-width: 1.5;
} }
.nom-region { .nom-region {
fill: var(--blanc-creme); fill: var(--blanc-creme);
font-size: 15px; font-size: 15px;
font-weight: 700; font-weight: 800;
font-family: var(--font-display); font-family: var(--font-display);
text-anchor: middle; text-anchor: middle;
letter-spacing: 0.02em; letter-spacing: 0.03em;
transition: fill var(--dur-tanbou) var(--ease-ka); transition: fill var(--dur-tanbou) var(--ease-ka);
pointer-events: none;
}
:global(html.light-theme) .nom-region {
fill: #0d0d0d;
} }
.nom-region.choisie { .nom-region.choisie {
fill: var(--or-oki); fill: var(--or-oki);
} }
:global(html.light-theme) .nom-region.choisie {
fill: var(--or-oki);
}
/* — Marqueurs du récap (guess = rouge OKI, réel = vert OKI) — */ /* — Marqueurs du récap (guess = rouge OKI, réel = vert OKI) — */
.lien-paire { .lien-paire {
stroke: var(--muted); stroke: var(--muted);
@@ -338,7 +415,7 @@
padding: 0; padding: 0;
border: none; border: none;
background: transparent; background: transparent;
border-radius: var(--oki-radius); border-radius: var(--radius-md);
cursor: pointer; cursor: pointer;
} }
app/src/routes/+page.svelte
+249 -177
View File
@@ -41,89 +41,96 @@
<Seo title={t().app.sousTitre} description={t().app.sousTitre} path="/" /> <Seo title={t().app.sousTitre} description={t().app.sousTitre} path="/" />
<div class="accueil"> <div class="accueil">
<section class="hero" aria-label="Présentation"> <div class="panneau-gauche">
<div class="flag-chip-hero" aria-hidden="true"> <section class="hero" aria-label="Présentation">
<span class="flag-chip"></span> <div class="flag-chip-hero" aria-hidden="true">
</div> <span class="flag-chip"></span>
<h1> </div>
<span class="masque"><span class="ligne">{t().app.titre}</span></span> <div class="titres-hero">
</h1> <h1>
<p class="accroche"> <span class="masque"><span class="ligne">{t().app.titre}</span></span>
<span class="masque"><span class="ligne ligne-retard">{t().micro.kiteSaYe}</span></span> </h1>
</p> <p class="accroche">
<p class="sous-titre">{t().app.sousTitre}</p> <span class="masque"><span class="ligne ligne-retard">{t().micro.kiteSaYe}</span></span>
</section> </p>
</div>
<p class="sous-titre">{t().app.sousTitre}</p>
</section>
<section class="sec-regions" aria-labelledby="titre-regions"> <section class="sec-modes" aria-labelledby="titre-modes">
<h2 id="titre-regions">{t().accueil.choixRegion}</h2> <h2 id="titre-modes">{t().accueil.choixMode}</h2>
<div class="carte-accueil"> <div class="grille modes">
<CarteRegions bind:selection={region} cascadeBase={5} /> {#each modes as m, i (m.id)}
<button <button
type="button" type="button"
class="btn btn-secondaire toutes" class="carte-mode"
class:choisi={region === 'TOUTES'} class:choisi={mode === m.id}
aria-pressed={region === 'TOUTES'} aria-pressed={mode === m.id}
onclick={() => (region = 'TOUTES')} data-reveal
> style:--d="{syncopatedDelay(i)}ms"
{t().regions.TOUTES} use:reveal
</button> onclick={() => (mode = m.id)}
</div> >
</section> <span class="emoji" aria-hidden="true">{m.emoji}</span>
<span class="nom">{t().modes[m.id]}</span>
<span class="desc">{t().modes[`${m.id}Desc`]}</span>
</button>
{/each}
<a
href="/explorer"
class="carte-mode explorer"
data-reveal
style:--d="{syncopatedDelay(4)}ms"
use:reveal
>
<span class="emoji" aria-hidden="true">🧭</span>
<span class="nom">{t().modes.explorer}</span>
<span class="desc">{t().modes.explorerDesc}</span>
</a>
</div>
{#if mode === 'defi'}
<button type="button" class="btn btn-secondaire lien-defi" onclick={creerLienDefi}>
{t().accueil.creerLienDefi}
</button>
{/if}
</section>
<section class="sec-modes" aria-labelledby="titre-modes"> <div class="actions-bloc">
<h2 id="titre-modes">{t().accueil.choixMode}</h2> <section class="options" aria-label={t().accueil.options}>
<div class="grille modes"> <label class="option-timer">
{#each modes as m, i (m.id)} <input type="checkbox" bind:checked={timer} />
<span>{t().accueil.timer}</span>
</label>
</section>
<div class="zone-pouce">
<button type="button" class="btn btn-primaire jouer" onclick={jouer}>
{t().accueil.jouer}
</button>
</div>
</div>
</div>
<div class="panneau-droite">
<section class="sec-regions" aria-labelledby="titre-regions">
<h2 id="titre-regions">{t().accueil.choixRegion}</h2>
<div class="carte-accueil">
<CarteRegions bind:selection={region} cascadeBase={5} />
<button <button
type="button" type="button"
class="carte-mode" class="btn btn-secondaire toutes"
class:choisi={mode === m.id} class:choisi={region === 'TOUTES'}
aria-pressed={mode === m.id} aria-pressed={region === 'TOUTES'}
data-reveal onclick={() => (region = 'TOUTES')}
style:--d="{syncopatedDelay(i)}ms"
use:reveal
onclick={() => (mode = m.id)}
> >
<span class="emoji" aria-hidden="true">{m.emoji}</span> {t().regions.TOUTES}
<span class="nom">{t().modes[m.id]}</span>
<span class="desc">{t().modes[`${m.id}Desc`]}</span>
</button> </button>
{/each} </div>
<a </section>
href="/explorer"
class="carte-mode explorer"
data-reveal
style:--d="{syncopatedDelay(4)}ms"
use:reveal
>
<span class="emoji" aria-hidden="true">🧭</span>
<span class="nom">{t().modes.explorer}</span>
<span class="desc">{t().modes.explorerDesc}</span>
</a>
</div>
{#if mode === 'defi'}
<button type="button" class="btn btn-secondaire lien-defi" onclick={creerLienDefi}>
{t().accueil.creerLienDefi}
</button>
{/if}
</section>
<section class="options" aria-labelledby="titre-options">
<h2 id="titre-options">{t().accueil.options}</h2>
<label class="option-timer">
<input type="checkbox" bind:checked={timer} />
<span>{t().accueil.timer}</span>
</label>
</section>
<div class="zone-pouce">
<button type="button" class="btn btn-primaire jouer" onclick={jouer}>
{t().accueil.jouer}
</button>
</div> </div>
<footer class="accueil-footer"> <footer class="accueil-footer">
<FlagBar hauteur={4} /> <FlagBar hauteur={3} />
<div class="footer-contenu"> <div class="footer-contenu">
<p class="mention-oki">{t().footer.texteFederation}</p> <p class="mention-oki">{t().footer.texteFederation}</p>
<div class="liens-footer"> <div class="liens-footer">
@@ -145,10 +152,21 @@
width: 100%; width: 100%;
max-width: 860px; max-width: 860px;
margin: 0 auto; margin: 0 auto;
padding: 1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); padding: 1rem 1rem calc(1.2rem + env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.panneau-gauche {
display: flex;
flex-direction: column;
gap: 1rem;
}
.panneau-droite {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.4rem;
} }
.hero { .hero {
@@ -159,7 +177,15 @@
} }
.flag-chip-hero { .flag-chip-hero {
margin-bottom: 0.4rem; margin-bottom: 0.2rem;
}
.titres-hero {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.8rem;
flex-wrap: wrap;
} }
.masque { .masque {
@@ -195,73 +221,84 @@
.hero h1 { .hero h1 {
margin: 0; margin: 0;
font-size: 3.2rem; font-size: 2.8rem;
font-weight: 900; font-weight: 900;
font-family: var(--font-display); font-family: var(--font-display);
color: var(--blanc-creme); color: var(--blanc-creme);
letter-spacing: 0.04em; letter-spacing: 0.04em;
line-height: 1;
} }
.accroche { .accroche {
margin: 0.2rem 0 0; margin: 0;
font-size: 1.25rem; font-size: 1.15rem;
font-weight: 700; font-weight: 700;
color: var(--or-oki); color: var(--or-oki);
font-style: italic; font-style: italic;
} }
.sous-titre { .sous-titre {
margin: 0.4rem 0 0; margin: 0.3rem 0 0;
color: var(--muted); color: var(--muted);
font-size: 0.95rem; font-size: 0.9rem;
max-width: 520px; max-width: 520px;
} }
h2 { h2 {
font-size: 1.05rem; font-size: 0.95rem;
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--blanc-creme); color: var(--blanc-creme);
margin: 0 0 0.6rem; margin: 0 0 0.5rem;
border-left: 3px solid var(--or-oki); border-left: 3px solid var(--or-oki);
padding-left: 0.5rem; padding-left: 0.5rem;
} }
.grille { .grille {
display: grid; display: grid;
gap: 0.7rem; gap: 0.5rem;
} }
.modes { .modes {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
} }
.carte-accueil { .carte-accueil {
max-width: 560px; width: 100%;
max-width: 500px;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0.6rem; gap: 0.5rem;
} }
.toutes { .toutes {
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
width: 100%;
padding: 0.55rem 1rem;
font-size: 0.88rem;
} }
.toutes.choisi { .toutes.choisi {
border-color: var(--or-oki); border-color: var(--or-oki);
background: var(--card-bg-hover); background: var(--card-bg-hover);
color: var(--or-oki); color: var(--or-oki);
font-weight: 800;
} }
.lien-defi { .lien-defi {
display: block; display: block;
margin: 0.8rem auto 0; margin: 0.5rem auto 0;
padding: 0.45rem 0.9rem;
font-size: 0.85rem;
} }
.carte-mode { .carte-mode {
border: 1px solid var(--line); border: 1px solid var(--line);
border-left: 4px solid var(--line); border-left: 3px solid var(--line);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--noir-profond); background: var(--noir-profond);
box-shadow: var(--oki-ombre); box-shadow: var(--oki-ombre);
@@ -272,8 +309,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0.35rem; justify-content: center;
padding: 1.1rem 0.9rem; gap: 0.2rem;
padding: 0.65rem 0.6rem;
transition: transition:
transform var(--dur-tanbou) var(--ease-ka), transform var(--dur-tanbou) var(--ease-ka),
border-color var(--dur-tanbou) var(--ease-ka), border-color var(--dur-tanbou) var(--ease-ka),
@@ -281,24 +319,26 @@
} }
.carte-mode .emoji { .carte-mode .emoji {
font-size: 1.6rem; font-size: 1.35rem;
} }
.carte-mode .nom { .carte-mode .nom {
font-weight: 750; font-weight: 750;
font-family: var(--font-display); font-family: var(--font-display);
text-transform: uppercase; text-transform: uppercase;
font-size: 0.95rem; font-size: 0.85rem;
color: var(--blanc-creme); color: var(--blanc-creme);
letter-spacing: 0.02em;
} }
.carte-mode .desc { .carte-mode .desc {
font-size: 0.82rem; font-size: 0.72rem;
color: var(--muted); color: var(--muted);
line-height: 1.25;
} }
.carte-mode:hover { .carte-mode:hover {
transform: translateY(-3px); transform: translateY(-2px);
border-color: var(--or-oki); border-color: var(--or-oki);
border-left-color: var(--or-oki); border-left-color: var(--or-oki);
background: var(--card-bg-hover); background: var(--card-bg-hover);
@@ -314,160 +354,192 @@
color: var(--or-oki); color: var(--or-oki);
} }
.actions-bloc {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: 0.2rem;
}
.options { .options {
display: flex; display: flex;
flex-direction: column; align-items: center;
gap: 0.4rem;
} }
.option-timer { .option-timer {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.6rem; gap: 0.5rem;
font-size: 0.95rem; font-size: 0.9rem;
color: var(--blanc-creme); color: var(--blanc-creme);
cursor: pointer; cursor: pointer;
font-weight: 600;
} }
.option-timer input { .option-timer input {
width: 1.2rem; width: 1.15rem;
height: 1.2rem; height: 1.15rem;
accent-color: var(--or-oki); accent-color: var(--or-oki);
} }
.zone-pouce { .zone-pouce {
display: flex; display: flex;
justify-content: center; flex: 1;
padding: 0.5rem 0; min-width: 180px;
justify-content: flex-end;
} }
.jouer { .jouer {
width: min(420px, 100%); width: 100%;
min-height: 48px; max-width: 320px;
padding: 1rem; min-height: 44px;
font-size: 1.15rem; padding: 0.75rem 1.4rem;
font-size: 1.1rem;
letter-spacing: 0.04em;
} }
.accueil-footer { .accueil-footer {
margin-top: 1.5rem; margin-top: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.8rem; gap: 0.5rem;
padding-top: 0.4rem;
} }
.footer-contenu { .footer-contenu {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.4rem; gap: 0.4rem;
text-align: center; font-size: 0.75rem;
padding: 0.5rem 0;
} }
.mention-oki { .mention-oki {
margin: 0; margin: 0;
font-size: 0.8rem;
color: var(--muted); color: var(--muted);
} }
.liens-footer { .liens-footer {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.6rem; gap: 0.5rem;
font-size: 0.8rem;
color: var(--muted); color: var(--muted);
} }
.liens-footer a { .liens-footer a {
color: var(--or-oki); color: var(--or-oki);
text-decoration: none; text-decoration: none;
font-weight: 600;
} }
.liens-footer a:hover { .liens-footer a:hover {
text-decoration: underline; text-decoration: underline;
} }
@media (min-width: 768px) { /* — Desktop Single-Screen Layout (Sans Scroll) — */
.hero h1 {
font-size: 3.6rem;
}
}
@media (min-width: 1024px) { @media (min-width: 1024px) {
.accueil { .accueil {
max-width: 1120px; max-width: 1180px;
height: 100%;
max-height: calc(100dvh - 56px);
overflow: hidden;
padding: 0.6rem 1.4rem 0.4rem;
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
column-gap: 2.5rem; grid-template-rows: minmax(0, 1fr) auto;
row-gap: 1.1rem; column-gap: 2.2rem;
align-content: start; row-gap: 0.3rem;
align-items: center;
}
.panneau-gauche {
grid-column: 1;
grid-row: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
gap: 0.4rem;
min-height: 0;
} }
.hero { .hero {
grid-column: 1;
text-align: left; text-align: left;
align-items: flex-start; align-items: flex-start;
} }
.sec-regions { .titres-hero {
grid-column: 2; justify-content: flex-start;
grid-row: 1 / span 5; gap: 0.7rem;
align-self: start;
} }
.sec-modes, .hero h1 {
.options, font-size: 2.7rem;
.zone-pouce { }
grid-column: 1;
.accroche {
font-size: 1.15rem;
}
.sous-titre {
margin-top: 0.15rem;
font-size: 0.88rem;
}
.modes {
grid-template-columns: repeat(3, 1fr);
}
.panneau-droite {
grid-column: 2;
grid-row: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 0;
}
.sec-regions {
width: 100%;
max-width: 440px;
display: flex;
flex-direction: column;
align-items: stretch;
}
.carte-accueil {
max-width: 100%;
gap: 0.4rem;
}
.carte-accueil :global(.carte-regions) {
max-height: 52dvh;
display: flex;
justify-content: center;
}
.carte-accueil :global(svg) {
max-height: 48dvh;
width: auto;
} }
.accueil-footer { .accueil-footer {
grid-column: 1 / -1; grid-column: 1 / -1;
} grid-row: 2;
margin-top: 0;
.zone-pouce { padding-top: 0.15rem;
justify-content: flex-start;
}
.carte-accueil {
max-width: min(560px, calc(clamp(240px, 42dvh, 560px) * 0.94));
} }
} }
@media (min-width: 1024px) and (max-height: 999px) { /* Fallback pour petits écrans desktop / hauteurs réduites */
@media (min-width: 1024px) and (max-height: 640px) {
.accueil { .accueil {
row-gap: 0.8rem; overflow-y: auto;
padding-top: 0.8rem;
}
.hero h1 {
font-size: 2.6rem;
}
.accroche {
font-size: 1.05rem;
}
h2 {
margin-bottom: 0.4rem;
}
.carte-mode {
padding: 0.7rem 0.8rem;
gap: 0.2rem;
}
.carte-mode .emoji {
font-size: 1.3rem;
}
.carte-mode .desc {
font-size: 0.8rem;
}
.jouer {
padding: 0.7rem 1rem;
font-size: 1.05rem;
} }
} }
</style> </style>