sucupira
9b867243fd
- Layout app-style 100dvh : zéro scroll desktop (accueil, jeu, bilan, explorer), zéro superposition mobile (sauts sortis de la carte, badges consolidés en une puce, barre d'actions opaque z-indexée, indices en panneau interne, sheet explorer dégagé) - CSS jeu mutualisé (jeu.css) + partager() factorisé (lib/partage.ts) - Motion gwoka : reveals syncopés, révélation designée (ligne de distance animée, score en count-up, marqueur qui tombe), transitions d'état, bilan en cascade - SEO : Seo.svelte (canonical, OG, Twitter), robots.txt, sitemap.xml - Sécurité : hooks.server.ts (CSP, nosniff, DENY, Referrer-Policy, Permissions-Policy) - Dette : 4 clés i18n mortes, zip debug ignoré - Vérifié puppeteer : mobile 390x844 (0 overlap, 0 scroll), desktop 1440x900 (0 scroll même +2 indices), révélation complète, zéro erreur console/CSP
84 lines
1.6 KiB
Svelte
84 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import '$lib/styles/oki.css';
|
|
import LangSwitch from '$lib/components/LangSwitch.svelte';
|
|
import { initLang, t } from '$lib/i18n/store.svelte';
|
|
|
|
let { children } = $props();
|
|
|
|
onMount(() => {
|
|
initLang();
|
|
});
|
|
</script>
|
|
|
|
<div class="app">
|
|
<header class="entete">
|
|
<a href="/" class="logo" aria-label="JWE — accueil">
|
|
<svg viewBox="0 0 32 32" width="30" height="30" aria-hidden="true">
|
|
<circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="2.5" />
|
|
<path d="M16 7 L21 22 L16 18.5 L11 22 Z" fill="currentColor" />
|
|
</svg>
|
|
<span>{t().app.titre}</span>
|
|
</a>
|
|
<nav class="nav-lang">
|
|
<a href="/explorer" class="lien-explorer">{t().modes.explorer}</a>
|
|
<LangSwitch />
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
{@render children()}
|
|
</main>
|
|
</div>
|
|
|
|
<style>
|
|
.app {
|
|
height: 100dvh; /* layout « app » verrouillé : chaque écran gère son overflow interne */
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.entete {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.6rem 1rem;
|
|
background: var(--oki-vert);
|
|
color: #fff;
|
|
}
|
|
|
|
.logo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
font-size: 1.4rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.nav-lang {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.lien-explorer {
|
|
color: var(--oki-vert-doux);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.lien-explorer:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|