73 lines
26 KiB
HTML
73 lines
26 KiB
HTML
<!doctype html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Trainlog — APP_SHELL_V1 — Maquettes Android</title>
|
||
<style>
|
||
:root{color-scheme:dark;--crust:#11111b;--mantle:#181825;--base:#1e1e2e;--s0:#313244;--s1:#45475a;--text:#cdd6f4;--sub:#bac2de;--accent:#b4befe;--green:#a6e3a1;--yellow:#f9e2af;--red:#f38ba8;--blue:#89b4fa;--phone:360px;--scale:1}
|
||
*{box-sizing:border-box}body{margin:0;background:var(--crust);color:var(--text);font:16px/1.5 system-ui,-apple-system,sans-serif}main{max-width:1240px;margin:auto;padding:32px 36px 64px}h1{font-size:28px;line-height:1.25;margin:8px 0 12px;font-weight:650}h2{font-size:18px;margin:0 0 10px}p{margin:0 0 12px}.intro{max-width:900px}.eyebrow{color:var(--accent);letter-spacing:.12em;font-size:12px;font-weight:650}.sub{color:var(--sub)}.controls{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:24px 0 32px;padding:14px 16px;background:var(--mantle);border-radius:8px}.controls label{font-size:14px}.controls select{margin-left:8px;padding:8px;background:var(--s0);color:var(--text);border:1px solid var(--s1);border-radius:5px}.board{display:flex;flex-wrap:wrap;gap:32px 24px;align-items:start}.study{min-width:0;width:var(--phone);max-width:100%}.caption{font-size:13px;color:var(--sub);max-width:360px;margin-top:10px}.phone{position:relative;width:var(--phone);max-width:100%;height:708px;overflow:hidden;background:var(--base);border:1px solid var(--s1);border-radius:20px;display:flex;flex-direction:column;font-size:calc(16px * var(--scale));box-shadow:0 12px 28px #0002}.status{height:26px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 18px;font-size:12px;background:var(--mantle)}.appbar{min-height:56px;flex-shrink:0;display:flex;align-items:center;gap:6px;background:var(--mantle);padding:0 8px}.appbar .brand{font-size:18px;font-weight:650;letter-spacing:.04em}.appbar .context{line-height:1.2;font-size:16px;font-weight:600}.appbar small{display:block;color:var(--sub);font-size:12px;font-weight:400;margin-top:3px}.spacer{flex:1}.touch{display:inline-flex;min-width:48px;min-height:48px;align-items:center;justify-content:center;flex-shrink:0}.icon{height:22px;width:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.content{padding:18px 16px;overflow-y:auto;flex:1;scrollbar-color:var(--s1) transparent;scrollbar-width:thin}.screen-title{font-size:calc(22px * var(--scale));font-weight:650;line-height:1.3;margin:0 0 18px}.section-label{font-size:calc(14px * var(--scale));font-weight:600;margin:20px 0 8px;color:var(--sub)}.section-label:first-child{margin-top:0}.group{padding:14px 16px;background:var(--s0);border-radius:10px}.group.active{border-left:3px solid var(--accent);padding-left:13px}.title{font-size:calc(16px * var(--scale));font-weight:600;line-height:1.4}.meta{font-size:calc(14px * var(--scale));color:var(--sub);line-height:1.45;margin-top:3px}.badge{font-size:12px;padding:3px 7px;border-radius:5px;background:var(--s0);color:var(--sub);display:inline-block}.accent{color:var(--accent)}.success{color:var(--green)}.warning{color:var(--yellow)}.number{font-variant-numeric:tabular-nums;font-size:24px;font-weight:550;letter-spacing:-.02em}.unit{font-size:14px;color:var(--sub);font-weight:400}.button{min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:8px;font-weight:600;font-size:calc(14px * var(--scale));line-height:1.4;text-align:center;margin-top:12px}.button.primary{background:var(--accent);color:var(--crust)}.button.secondary{background:transparent;color:var(--accent)}.row{display:flex;min-height:60px;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--s0)}.row:last-child{border-bottom:none}.row .main{flex:1;min-width:0}.row .chevron{color:var(--sub);font-size:20px}.row .title{font-weight:500}.info-line{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--sub);padding:16px 0}.bottom{padding:8px 16px 12px;background:var(--mantle);flex-shrink:0}.bottom .button{margin-top:0}.bottom .meta{text-align:center;font-size:12px;margin:7px 0 0}.gesture{height:20px;background:var(--mantle);display:flex;justify-content:center;align-items:center;flex-shrink:0}.gesture:after{content:"";height:4px;width:98px;border-radius:6px;background:var(--sub)}.pair{display:flex;align-items:center;justify-content:space-between;gap:8px}.search{display:flex;gap:10px;align-items:center;min-height:48px;padding:12px;background:var(--s0);border-radius:8px;margin-bottom:8px;font-size:14px;color:var(--sub)}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.chip{padding:9px 12px;min-height:44px;border:1px solid var(--s1);border-radius:8px;display:flex;align-items:center;font-size:14px}.chip.selected{color:var(--accent);background:var(--s0);border-color:var(--accent)}.notice{padding:12px;background:var(--s0);border-left:3px solid var(--yellow);border-radius:0 6px 6px 0;margin:14px 0}.notice .title{color:var(--yellow);font-size:14px}.notice .meta{font-size:14px}.divider{height:1px;background:var(--s1);margin:16px 0}.drawer-backdrop{position:absolute;inset:26px 0 20px;background:#11111b99}.drawer{position:absolute;top:26px;bottom:20px;left:0;width:calc(100% - 56px);max-width:360px;background:var(--mantle);padding:18px 12px;border-radius:0 16px 16px 0;overflow:auto;scrollbar-color:var(--s1) transparent;scrollbar-width:thin}.drawer-brand{font-size:18px;font-weight:650;padding:4px 12px 22px;letter-spacing:.06em}.nav-item{display:flex;gap:12px;align-items:center;min-height:56px;padding:10px 12px;border-radius:8px;margin:3px 0;position:relative;font-size:calc(14px * var(--scale));overflow-wrap:anywhere;hyphens:auto}.large-type .drawer{width:calc(100% - 24px)}.nav-item.selected{background:var(--s0);color:var(--accent)}.nav-item.selected:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--accent);border-radius:4px}.nav-item small{display:block;color:var(--sub);font-size:12px;margin-top:3px}.field{border:1px solid var(--s1);border-radius:7px;padding:8px 10px;min-height:52px;min-width:0}.field.focus{border:2px solid var(--accent);padding:7px 9px}.field label{display:block;font-size:12px;color:var(--sub);margin-bottom:3px}.field .value{font-variant-numeric:tabular-nums;font-size:18px}.set-row{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,1fr) 48px;gap:8px;align-items:center;margin:10px 0}.set-row .touch{min-width:48px;min-height:48px}.set-index{font-size:14px;color:var(--sub)}.inline-link{min-height:48px;display:flex;align-items:center;color:var(--accent);font-size:14px;font-weight:600}.note{background:var(--mantle);padding:18px 20px;border-radius:8px;margin-top:36px;font-size:14px}.note ul{padding-left:20px;margin-bottom:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}a{color:var(--accent)}.mock{cursor:default}.collection{margin-bottom:12px}.collection .row{padding:10px 0}.text-scrim{opacity:.55}.value-inline{font-variant-numeric:tabular-nums;font-weight:550}
|
||
@media(min-width:1400px){main{max-width:1420px}.board{grid-template-columns:repeat(3,minmax(0,1fr))}}
|
||
@media(max-width:1100px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
||
@media(max-width:740px){main{padding:20px 16px}.board{grid-template-columns:1fr}.phone{max-width:100%}h1{font-size:24px}}
|
||
@media print{main{padding:0}.controls{display:none}.phone{box-shadow:none}.study{break-inside:avoid}.board{grid-template-columns:repeat(2,minmax(0,1fr))}.note{break-inside:avoid}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<svg class="svg-defs" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs>
|
||
<symbol id="menu" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></symbol>
|
||
<symbol id="back" viewBox="0 0 24 24"><path d="m12 4-8 8 8 8M4 12h16"/></symbol>
|
||
<symbol id="more" viewBox="0 0 24 24"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></symbol>
|
||
<symbol id="home" viewBox="0 0 24 24"><path d="m3 10 9-7 9 7M5 9v12h5v-7h4v7h5V9"/></symbol>
|
||
<symbol id="sessions" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="16" rx="2"/><path d="M8 3v4M16 3v4M4 10h16M8 14h3M8 17h7"/></symbol>
|
||
<symbol id="exercise" viewBox="0 0 24 24"><circle cx="14" cy="4" r="2"/><path d="m8 8 5-1 3 5 4 1M13 7l-2 6 4 3v5M11 13l-5 3-2 5M8 8l-3 4"/></symbol>
|
||
<symbol id="equipment" viewBox="0 0 24 24"><path d="M7 12h10M3 9v6M6 6v12M18 6v12M21 9v6M3 12h3M18 12h3"/></symbol>
|
||
<symbol id="stats" viewBox="0 0 24 24"><path d="M4 3v18h17M8 17v-5M13 17V7M18 17V4"/></symbol>
|
||
<symbol id="sync" viewBox="0 0 24 24"><path d="M4 10a8 8 0 0 1 14-5l2 2M20 2v5h-5M20 14A8 8 0 0 1 6 19l-2-2M4 22v-5h5"/></symbol>
|
||
<symbol id="settings" viewBox="0 0 24 24"><path d="m9 3 1 3h4l1-3 3 2-1 3 2 3 3 1-1 4-3-1-3 3-1 3h-4l-1-3-3-2-3 1-1-4 3-1 2-3-1-3z"/><circle cx="12" cy="12" r="3"/></symbol>
|
||
<symbol id="search" viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="m15 15 6 6"/></symbol>
|
||
<symbol id="check" viewBox="0 0 24 24"><path d="m4 12 5 5 11-11"/></symbol>
|
||
</defs></svg>
|
||
<main>
|
||
<div class="intro"><div class="eyebrow">APP_SHELL_V1 · DESIGN GATE</div><h1>Trainlog, une seule application.</h1><p class="sub">Mocha / Lavender. Navigation claire, informations utiles, actions à portée de main.</p><p class="sub" style="font-size:14px">Maquettes de conception statiques — données fictives. Les actions dessinées ne modifient aucune donnée. Le document complet propose des contrôles interactifs de largeur et de texte. Police système du navigateur, approximation du rendu Android.</p></div>
|
||
<div class="controls"><label>Largeur du téléphone <select id="width"><option>320</option><option selected>360</option><option>393</option><option>412</option></select> px ≈ dp</label><label>Taille du texte <select id="font"><option value="1">100 %</option><option value="1.3">130 %</option><option value="2">200 %</option></select></label><span class="sub" style="font-size:13px">Chaque écran défile indépendamment.</span></div>
|
||
<div class="board">
|
||
<section class="study"><h2>01 · Accueil avec séance en cours</h2><div class="phone mock">
|
||
<div class="status"><span>05:00</span><span>▰ 82 %</span></div><div class="appbar"><span class="touch"><svg class="icon"><use href="#menu"/></svg></span><span class="brand">TRAINLOG</span></div>
|
||
<div class="content"><h3 class="screen-title">Accueil</h3><div class="group active"><div class="pair"><span class="title">Séance en cours</span><span class="badge">Normal</span></div><div class="meta">3 exercices · conservée sur cet appareil</div><div class="button primary">Reprendre la séance</div></div>
|
||
<div class="section-label">Dernière séance</div><div class="row"><div class="main"><div class="title">Mercredi 9 septembre</div><div class="meta">Entraînement · 6 exercices</div></div><span class="chevron">›</span></div>
|
||
<div class="section-label">Dernier MAX enregistré</div><div class="pair"><div><div class="title">Pec Fly</div><div class="meta">5 septembre</div></div><div class="number">80 <span class="unit">kg</span></div></div><div class="meta">Équipement : Rear Delt / Pec Fly</div>
|
||
<div class="section-label">Accès rapides</div><div class="row"><div class="main"><div class="title">Programmer une séance</div><div class="meta">Préparer une proposition modifiable</div></div><span class="chevron">›</span></div><div class="row"><div class="main"><div class="title">Mensurations</div><div class="meta">Ajouter ou consulter un relevé</div></div><span class="chevron">›</span></div><div class="info-line"><svg class="icon success"><use href="#check"/></svg>Dernière sync réussie · hier</div>
|
||
</div><div class="gesture"></div></div><p class="caption">Une reprise prioritaire ; la dernière séance et le MAX sont des faits enregistrés, sans nouveaux calculs de progression.</p></section>
|
||
|
||
<section class="study"><h2>02 · Drawer, premier niveau</h2><div class="phone mock"><div class="status"><span>05:00</span><span>▰ 82 %</span></div><div class="appbar"><span class="touch"><svg class="icon"><use href="#menu"/></svg></span><span class="brand">TRAINLOG</span></div><div class="content text-scrim"><h3 class="screen-title">Séances</h3><div class="group"><div class="title">Séance en cours</div><div class="meta">3 exercices</div></div></div><div class="gesture"></div><div class="drawer-backdrop"></div><nav class="drawer" aria-label="Maquette du menu"><div class="drawer-brand">TRAINLOG</div>
|
||
<div class="nav-item"><svg class="icon"><use href="#home"/></svg>Accueil</div><div class="nav-item selected"><svg class="icon"><use href="#sessions"/></svg><div>Séances<small>Séance en cours</small></div></div><div class="nav-item"><svg class="icon"><use href="#exercise"/></svg>Exercices</div><div class="nav-item"><svg class="icon"><use href="#equipment"/></svg>Équipements</div><div class="nav-item"><svg class="icon"><use href="#stats"/></svg>Statistiques</div><div class="nav-item"><svg class="icon"><use href="#sync"/></svg>Synchronisation</div><div class="divider"></div><div class="nav-item"><svg class="icon"><use href="#settings"/></svg>Paramètres</div>
|
||
</nav></div><p class="caption">La rubrique courante reste évidente. Les sous-pages appartiennent au contenu ; aucun arbre à déplier sur téléphone.</p></section>
|
||
|
||
<section class="study"><h2>03 · Séances, sans séance active</h2><div class="phone mock"><div class="status"><span>05:00</span><span>▰ 82 %</span></div><div class="appbar"><span class="touch"><svg class="icon"><use href="#menu"/></svg></span><span class="brand">TRAINLOG</span></div><div class="content"><h3 class="screen-title">Séances</h3><div class="section-label">Séance en cours</div><div class="title">Aucune séance en cours</div><div class="meta">Préparez une proposition ou démarrez une saisie manuelle.</div><div class="button primary">Programmer une séance</div><div class="button secondary">Nouvelle séance manuelle</div><div class="section-label">Séances effectuées</div><div class="row"><div class="main"><div class="title">Consulter les séances</div><div class="meta">Entraînements et Tests max enregistrés</div></div><span class="chevron">›</span></div><div class="section-label">Dernière séance</div><div class="row"><div class="main"><div class="title">Mercredi 9 septembre</div><div class="meta">Entraînement · 6 exercices</div></div><span class="chevron">›</span></div></div><div class="gesture"></div></div><p class="caption">L'état vide propose immédiatement deux actions valides. Aucun bouton « Reprendre » inactif ; aucun nouveau calendrier.</p></section>
|
||
|
||
<section class="study"><h2>04 · Proposition et avertissement</h2><div class="phone mock"><div class="status"><span>05:00</span><span>▰ 82 %</span></div><div class="appbar"><span class="touch"><svg class="icon"><use href="#back"/></svg></span><div class="context">Programmer une séance<small>Séances</small></div><div class="spacer"></div><span class="touch"><svg class="icon"><use href="#more"/></svg></span></div><div class="content"><div class="pair"><h3 class="screen-title" style="margin-bottom:4px">Votre proposition</h3><span class="number">30 <span class="unit">min</span></span></div><div class="meta">Corps entier · durée estimée</div><div class="notice"><div class="title">! Exposition récente observée</div><div class="meta">L'historique montre du travail récent. Cela ne mesure pas votre récupération.</div><div class="inline-link">Voir l'exposition et les raisons ›</div><div class="meta">✓ Avertissement pris en compte</div></div><div class="row"><div class="main"><div class="title">1. Pec Fly</div><div class="meta">Équipement : Rear Delt / Pec Fly</div><div class="meta"><span class="value-inline">3 × 10</span> · repos <span class="value-inline">90 s</span></div><div class="meta">Charge cible : non proposée</div></div><span class="touch"><svg class="icon"><use href="#more"/></svg></span></div><div class="row"><div class="main"><div class="title">2. Leg Press</div><div class="meta">Équipement : Leg Press</div><div class="meta"><span class="value-inline">3 × 10</span> · repos <span class="value-inline">90 s</span></div><div class="meta">Charge cible : non proposée</div></div><span class="touch"><svg class="icon"><use href="#more"/></svg></span></div><div class="inline-link">Modifier la proposition / Régénérer</div><div class="meta">Une proposition ne contient aucune série réalisée.</div></div><div class="bottom"><div class="button primary">Accepter la proposition</div><div class="meta">Ouvrir la séance en cours pour saisir le travail réalisé.</div></div><div class="gesture"></div></div><p class="caption">Exemple visuel, pas une prescription. Les éléments importants restent visibles ; les sources et explications détaillées restent consultables.</p></section>
|
||
|
||
<section class="study"><h2>05 · Exercice et équipement distincts</h2><div class="phone mock"><div class="status"><span>05:00</span><span>▰ 82 %</span></div><div class="appbar"><span class="touch"><svg class="icon"><use href="#back"/></svg></span><div class="context">Fiche exercice<small>Exercices / Catalogue</small></div><div class="spacer"></div><span class="touch"><svg class="icon"><use href="#more"/></svg></span></div><div class="content"><div class="section-label">Exercice</div><h3 class="screen-title" style="margin-bottom:6px">Pec Fly</h3><div class="meta">Séries · répétitions</div><div class="inline-link">Modifier l'exercice</div><div class="section-label">Zones du corps enregistrées</div><div class="row"><div class="main"><div class="title">Zone principale</div><div class="meta">Non renseignée</div></div><span class="chevron">›</span></div><div class="section-label">Équipement</div><div class="row"><svg class="icon"><use href="#equipment"/></svg><div class="main"><div class="title">Rear Delt / Pec Fly</div><div class="meta">Catalogue fourni · Basic-Fit</div></div><span class="chevron">›</span></div><div class="section-label">Connaissances</div><div class="row"><div class="main"><div class="title">Consulter les connaissances</div><div class="meta">Rôles, mouvements, confiance et sources</div></div><span class="chevron">›</span></div><div class="row"><div class="main"><div class="title">Voir les derniers MAX</div><div class="meta">Ouvrir la liste dans Statistiques</div></div><span class="chevron">›</span></div></div><div class="gesture"></div></div><p class="caption">Les noms actuels restent affichés. La hiérarchie sépare déjà le mouvement enregistré du matériel ; aucun renommage n'est effectué.</p></section>
|
||
|
||
<section class="study"><h2>06 · Saisie, objectifs et valeurs réelles</h2><div class="phone mock"><div class="status"><span>05:00</span><span>▰ 82 %</span></div><div class="appbar"><span class="touch"><svg class="icon"><use href="#back"/></svg></span><div class="context">Séance en cours<small>Exercice 1 / 3</small></div><div class="spacer"></div><span class="touch"><svg class="icon"><use href="#more"/></svg></span></div><div class="content"><h3 class="screen-title" style="margin-bottom:6px">Pec Fly</h3><div class="meta">Équipement : Rear Delt / Pec Fly</div><div class="inline-link">Changer l'équipement</div><div class="group"><div class="meta" style="margin:0">Objectif prévu</div><div class="title">3 × 10 · repos 90 s</div></div><div class="section-label">Séries réalisées</div><div class="set-row"><span class="set-index">1</span><div class="field"><label>Répétitions</label><span class="value">10</span></div><div class="field"><label>Charge (kg)</label><span class="value">40</span></div><span class="touch">⋮</span></div><div class="set-row"><span class="set-index">2</span><div class="field"><label>Répétitions</label><span class="value">9</span></div><div class="field focus"><label>Charge (kg)</label><span class="value">40,<span class="accent">│</span></span></div><span class="touch">⋮</span></div><div class="inline-link">+ Ajouter une série</div><div class="meta">Chaque série conserve ses propres valeurs.</div><div class="info-line"><svg class="icon success"><use href="#check"/></svg>Brouillon conservé sur cet appareil</div></div><div class="bottom"><div class="button primary">Valider l'exercice</div><div class="meta">La séance se termine depuis son récapitulatif.</div></div><div class="gesture"></div></div><p class="caption">Les cellules vides restent vides. Le texte partiel est conservé. Avec le clavier ouvert, contenu défilant et action remontent au-dessus de l'IME.</p></section>
|
||
|
||
<section class="study"><h2>07 · Statistiques, transition V1</h2><div class="phone mock"><div class="status"><span>05:00</span><span>▰ 82 %</span></div><div class="appbar"><span class="touch"><svg class="icon"><use href="#menu"/></svg></span><span class="brand">TRAINLOG</span></div><div class="content"><h3 class="screen-title">Statistiques</h3><div class="meta">Vos relevés et résultats enregistrés sur cet appareil.</div><div class="section-label">Consulter et compléter</div><div class="row"><div class="main"><div class="title">Mensurations</div><div class="meta">Ajouter un relevé · derniers relevés</div></div><span class="chevron">›</span></div><div class="row"><div class="main"><div class="title">Capacités / MAX</div><div class="meta">Derniers résultats des Tests max</div></div><span class="chevron">›</span></div></div><div class="gesture"></div></div><p class="caption">Deux destinations utiles aujourd'hui sur Android. Les futures analyses ne sont pas affichées comme des boutons vides.</p></section>
|
||
|
||
<section class="study"><h2>08 · Catalogue d'équipements</h2><div class="phone mock"><div class="status"><span>05:00</span><span>▰ 82 %</span></div><div class="appbar"><span class="touch"><svg class="icon"><use href="#menu"/></svg></span><span class="brand">TRAINLOG</span></div><div class="content"><div class="pair"><h3 class="screen-title" style="margin-bottom:12px">Équipements</h3><span class="inline-link">+ Créer</span></div><div class="search"><svg class="icon"><use href="#search"/></svg>Rechercher un équipement</div><div class="collection"><div class="row"><div class="main"><div class="title">Rear Delt / Pec Fly</div><div class="meta">Basic-Fit · Fourni</div></div><span class="chevron">›</span></div><div class="row"><div class="main"><div class="title">Leg Press</div><div class="meta">Basic-Fit · Fourni</div></div><span class="chevron">›</span></div><div class="row"><div class="main"><div class="title">Ma poulie</div><div class="meta">Personnel</div></div><span class="chevron">›</span></div></div><div class="section-label">À propos du catalogue</div><div class="meta">Un équipement est le matériel utilisé. Chaque occurrence d'exercice peut préciser son équipement.</div></div><div class="gesture"></div></div><p class="caption">Une nouvelle entrée de navigation Android réutilise les lectures et créations existantes. Pas d'éditeur de définition fictif.</p></section>
|
||
|
||
<section class="study"><h2>09 · Synchronisation</h2><div class="phone mock"><div class="status"><span>05:00</span><span>▰ 82 %</span></div><div class="appbar"><span class="touch"><svg class="icon"><use href="#menu"/></svg></span><span class="brand">TRAINLOG</span></div><div class="content"><h3 class="screen-title">Synchronisation</h3><div class="group"><div class="pair"><svg class="icon success"><use href="#check"/></svg><div class="main"><div class="title">Dernière sync réussie</div><div class="meta">9 septembre · 18:42</div></div></div><div class="button primary">Synchroniser maintenant</div><div class="meta">Android → PC, puis PC → Android</div></div><div class="section-label">Dossier d'échange</div><div class="title">Téléchargements / Trainlog</div><div class="meta success">Autorisé sur cet appareil</div><div class="inline-link">Gérer le dossier dans Paramètres</div><div class="section-label">En cas de besoin</div><div class="row"><div class="main"><div class="title">Relire le catalogue PC</div><div class="meta">Récupération manuelle</div></div><span class="chevron">›</span></div><div class="meta" style="margin-top:18px">Les données à envoyer sont préparées automatiquement après vos enregistrements.</div></div><div class="gesture"></div></div><p class="caption">Même opération et mêmes états de reçu. Les trois directions restent disponibles sur le PC ; elles ne sont pas inventées sur Android.</p></section>
|
||
</div>
|
||
<div class="note"><strong>Comment juger ces maquettes</strong><ul><li>Ouvrez le fichier localement, puis changez largeur et taille du texte. Le document complet définit le comportement Compose aux grandes tailles de police.</li><li>Les contours externes représentent la fenêtre du téléphone, pas des cadres à reproduire dans l'application.</li><li>Les petits pictogrammes SVG sont des substituts de design. La production utilisera des vecteurs Android cohérents, avec libellés et cibles de 48 dp.</li><li>Aucune donnée de ces exemples ne vient de votre base. Le scénario généré ne constitue pas une recommandation d'entraînement.</li></ul><p style="margin-top:12px"><a href="proposal.md">Proposition et contrats d'interaction</a> · <a href="tui_mockups.txt">Grilles TUI aux quatre dimensions</a></p></div>
|
||
</main>
|
||
<script>
|
||
// Design-board controls only. No storage, network request or workout mutation.
|
||
if(new URLSearchParams(location.search).has('overview')){const style=document.createElement('style');style.textContent='.study:nth-child(n+4),.note,.controls{display:none}.board{margin-top:24px}';document.head.appendChild(style);}
|
||
const params=new URLSearchParams(location.search);
|
||
if(['320','360','393','412'].includes(params.get('width'))){document.documentElement.style.setProperty('--phone',params.get('width')+'px');document.getElementById('width').value=params.get('width');}
|
||
if(['1','1.3','2'].includes(params.get('scale'))){document.documentElement.style.setProperty('--scale',params.get('scale'));document.getElementById('font').value=params.get('scale');document.documentElement.classList.toggle('large-type',Number(params.get('scale'))>1.3);}
|
||
document.getElementById('width').addEventListener('change',e=>document.documentElement.style.setProperty('--phone',e.target.value+'px'));
|
||
document.getElementById('font').addEventListener('change',e=>{document.documentElement.style.setProperty('--scale',e.target.value);document.documentElement.classList.toggle('large-type',Number(e.target.value)>1.3);});
|
||
</script>
|
||
</body>
|
||
</html>
|