a5a8ecdb20
Import initial de la documentation : statut, roadmap, plans V1/V2, specs verticales (creche, sport), audits securite, plan de test, analyse concurrentielle et maquettes de design. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
469 lines
31 KiB
HTML
469 lines
31 KiB
HTML
<!doctype html><html lang="fr"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<!-- Maquette rapatriee depuis l'artifact c43fe02d-3283-48c2-992f-d687e18acdfa le 2026-08-11.
|
||
Source de verite du design : ce fichier. L'artifact ne sert qu'a la diffusion.
|
||
Specification : DOCS/v2/guide-ia-screen-plan.md -->
|
||
<title>Écran Guide IA — maquette manager-app</title>
|
||
|
||
<style>
|
||
:root {
|
||
--ground: #EDF0F4;
|
||
--surface: #FFFFFF;
|
||
--surface-2: #F3F5F8;
|
||
--surface-3: #E7EBF1;
|
||
--ink: #14202B;
|
||
--ink-2: #4A5A6B;
|
||
--ink-3: #7C8B9A;
|
||
--line: #D6DDE5;
|
||
--line-soft: #E6EBF1;
|
||
--brand: #264863;
|
||
--brand-2: #3C6C90;
|
||
--brand-soft: #C2C9D6;
|
||
--on-brand: #FFFFFF;
|
||
--warning: #9A6608;
|
||
--serious: #A8322A;
|
||
--good: #1F6B4D;
|
||
--shadow: 0 1px 2px rgba(20,32,43,.05), 0 4px 14px rgba(20,32,43,.05);
|
||
--sans: ui-sans-serif, -apple-system, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
|
||
--mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--ground:#0E141B; --surface:#18222C; --surface-2:#1E2A35; --surface-3:#26333F;
|
||
--ink:#E6ECF2; --ink-2:#A3B2C0; --ink-3:#74879A;
|
||
--line:#2C3A48; --line-soft:#243140;
|
||
--brand:#7FA8C9; --brand-2:#A3C4DD; --brand-soft:#35506B; --on-brand:#0E141B;
|
||
--warning:#D6A343; --serious:#E08078; --good:#6FBF97;
|
||
--shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.22);
|
||
}
|
||
}
|
||
:root[data-theme="dark"] {
|
||
--ground:#0E141B; --surface:#18222C; --surface-2:#1E2A35; --surface-3:#26333F;
|
||
--ink:#E6ECF2; --ink-2:#A3B2C0; --ink-3:#74879A;
|
||
--line:#2C3A48; --line-soft:#243140;
|
||
--brand:#7FA8C9; --brand-2:#A3C4DD; --brand-soft:#35506B; --on-brand:#0E141B;
|
||
--warning:#D6A343; --serious:#E08078; --good:#6FBF97;
|
||
--shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.22);
|
||
}
|
||
:root[data-theme="light"] {
|
||
--ground:#EDF0F4; --surface:#FFFFFF; --surface-2:#F3F5F8; --surface-3:#E7EBF1;
|
||
--ink:#14202B; --ink-2:#4A5A6B; --ink-3:#7C8B9A;
|
||
--line:#D6DDE5; --line-soft:#E6EBF1;
|
||
--brand:#264863; --brand-2:#3C6C90; --brand-soft:#C2C9D6; --on-brand:#FFFFFF;
|
||
--warning:#9A6608; --serious:#A8322A; --good:#1F6B4D;
|
||
--shadow: 0 1px 2px rgba(20,32,43,.05), 0 4px 14px rgba(20,32,43,.05);
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; }
|
||
.page { max-width:1240px; margin:0 auto; padding:32px 22px 64px; }
|
||
|
||
.note { display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:6px; padding:13px 16px; margin-bottom:26px; }
|
||
.note strong { display:block; font-size:13.5px; margin-bottom:2px; }
|
||
.note span { font-size:13px; color:var(--ink-2); }
|
||
|
||
/* app chrome */
|
||
.app { display:grid; grid-template-columns:212px 1fr; background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:var(--shadow); }
|
||
.rail { background:var(--surface-2); border-right:1px solid var(--line); padding:18px 0; }
|
||
.rail .brandline { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:0 18px 14px; }
|
||
.rail a { display:block; padding:9px 18px; font-size:13.5px; color:var(--ink-2); text-decoration:none; border-left:3px solid transparent; }
|
||
.rail a.on { color:var(--ink); font-weight:600; background:var(--surface-3); border-left-color:var(--brand); }
|
||
.main { min-width:0; }
|
||
|
||
.head { padding:24px 28px 0; }
|
||
.head h1 { margin:0; font-size:23px; font-weight:700; letter-spacing:-.018em; }
|
||
.head p { margin:5px 0 0; font-size:13.5px; color:var(--ink-2); max-width:64ch; }
|
||
|
||
.tabs { display:flex; gap:2px; padding:18px 28px 0; border-bottom:1px solid var(--line); }
|
||
.tab { appearance:none; background:none; border:none; border-bottom:2px solid transparent; padding:9px 14px; font-family:inherit; font-size:14px; color:var(--ink-3); cursor:pointer; }
|
||
.tab:hover { color:var(--ink); }
|
||
.tab:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
|
||
.tab[aria-selected="true"] { color:var(--ink); font-weight:650; border-bottom-color:var(--brand); }
|
||
|
||
.panel { padding:24px 28px 30px; }
|
||
.panel[hidden] { display:none; }
|
||
|
||
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
|
||
@media (max-width:900px){ .grid2 { grid-template-columns:1fr; } .app { grid-template-columns:1fr; } .rail { display:none; } }
|
||
|
||
.card { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:17px 18px 19px; }
|
||
.card + .card { margin-top:18px; }
|
||
.card > h2 { margin:0 0 3px; font-size:14px; font-weight:700; letter-spacing:.01em; }
|
||
.card > .sub { margin:0 0 15px; font-size:12.5px; color:var(--ink-3); }
|
||
|
||
label.f { display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin:0 0 5px; }
|
||
.hint { font-size:12px; color:var(--ink-3); margin:5px 0 0; }
|
||
.inp, .ta { width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:9px 11px; font-family:inherit; font-size:13.5px; color:var(--ink); }
|
||
.ta { min-height:88px; resize:vertical; line-height:1.55; }
|
||
.fieldset + .fieldset { margin-top:16px; }
|
||
|
||
/* quota meter */
|
||
.meterwrap { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; }
|
||
.meterval { font-family:var(--mono); font-size:26px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
|
||
.meterside { font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
|
||
|
||
/* mise en avant du bloc vocal */
|
||
.feature { border-color:var(--brand); box-shadow:inset 3px 0 0 var(--brand); }
|
||
.eyebrow { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--on-brand); background:var(--brand); border-radius:3px; padding:3px 8px; margin-bottom:9px; }
|
||
|
||
/* exemples de personnalité */
|
||
.egs { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
|
||
.eg { font-size:12px; font-family:inherit; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px 11px; cursor:pointer; }
|
||
.eg:hover { border-color:var(--brand); color:var(--ink); }
|
||
.eg:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
|
||
|
||
.grid3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; align-items:start; }
|
||
@media (max-width:1000px){ .grid3 { grid-template-columns:1fr; } }
|
||
.meter { height:8px; background:var(--surface-3); border-radius:4px; overflow:hidden; }
|
||
.meter i { display:block; height:100%; background:var(--brand); border-radius:4px; }
|
||
|
||
/* channels */
|
||
.chan { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line-soft); }
|
||
.chan:first-of-type { border-top:none; }
|
||
.chan .who { font-size:13.5px; }
|
||
.chan .who small { display:block; color:var(--ink-3); font-size:12px; }
|
||
.sw { width:38px; height:21px; border-radius:11px; background:var(--surface-3); position:relative; flex:0 0 auto; }
|
||
.sw::after { content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.2); }
|
||
.sw.on { background:var(--brand); }
|
||
.sw.on::after { left:19px; }
|
||
|
||
/* voice options */
|
||
.voices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
|
||
.voice { border:1px solid var(--line); border-radius:6px; padding:12px 13px; background:var(--surface-2); }
|
||
.voice.sel { border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
|
||
.voice b { display:block; font-size:14px; }
|
||
.voice span { font-size:12.5px; color:var(--ink-3); }
|
||
.voice code { display:inline-block; margin-top:7px; font-family:var(--mono); font-size:11px; color:var(--ink-2); background:var(--surface-3); border-radius:3px; padding:2px 6px; }
|
||
|
||
.info { display:flex; gap:9px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:5px; padding:10px 12px; font-size:12.5px; color:var(--ink-2); margin-top:10px; }
|
||
.info .i { flex:0 0 auto; width:16px; height:16px; border-radius:50%; background:var(--brand); color:var(--on-brand); font-size:11px; font-weight:700; display:grid; place-items:center; margin-top:1px; }
|
||
|
||
/* fallback list */
|
||
.fbrow { display:grid; grid-template-columns:16px 1fr 28px; gap:8px; align-items:center; margin-bottom:7px; }
|
||
.fbrow .n { font-family:var(--mono); font-size:11px; color:var(--ink-3); text-align:right; }
|
||
.del { width:28px; height:28px; border:1px solid var(--line); background:var(--surface-2); border-radius:5px; color:var(--ink-3); font-size:15px; line-height:1; cursor:pointer; font-family:inherit; }
|
||
.del:hover { border-color:var(--serious); color:var(--serious); }
|
||
.del:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
|
||
.addbtn { margin-top:3px; background:none; border:1px dashed var(--line); border-radius:5px; padding:7px 12px; font-family:inherit; font-size:12.5px; color:var(--ink-2); cursor:pointer; width:100%; }
|
||
.addbtn:hover { border-color:var(--brand); color:var(--ink); }
|
||
.addbtn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
|
||
|
||
/* icônes */
|
||
.ico { width:18px; height:18px; flex:0 0 auto; }
|
||
.featurehead { display:flex; align-items:center; gap:10px; margin-bottom:3px; }
|
||
.icowrap { display:flex; gap:6px; align-items:center; color:var(--brand); }
|
||
|
||
/* sources readonly */
|
||
.kv { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid var(--line-soft); font-size:13.5px; }
|
||
.kv:first-of-type { border-top:none; }
|
||
.kv b { font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; }
|
||
|
||
/* chat preview */
|
||
.chat { background:var(--surface-2); border:1px solid var(--line); border-radius:7px; padding:14px; }
|
||
.bub { max-width:86%; padding:9px 12px; border-radius:12px; font-size:13.5px; line-height:1.5; }
|
||
.bub.v { background:var(--brand); color:var(--on-brand); margin-left:auto; border-bottom-right-radius:4px; }
|
||
.bub.g { background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:4px; }
|
||
.chatrow { display:flex; margin-bottom:9px; }
|
||
.srcline { display:flex; align-items:center; gap:7px; margin-top:8px; font-size:12px; color:var(--ink-3); }
|
||
.ibtn { width:16px; height:16px; border-radius:50%; border:1px solid var(--brand); color:var(--brand); background:none; font-size:10px; font-weight:700; display:grid; place-items:center; cursor:pointer; padding:0; font-family:inherit; }
|
||
.srcbox { margin-top:7px; padding:9px 11px; background:var(--surface-3); border-radius:5px; font-size:12.5px; color:var(--ink-2); }
|
||
.srcbox code { font-family:var(--mono); font-size:11.5px; }
|
||
|
||
/* ---- tab 2 ---- */
|
||
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:18px; }
|
||
.tile { background:var(--surface); padding:14px 16px 15px; }
|
||
.tile .n { display:block; font-family:var(--mono); font-size:27px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1.1; }
|
||
.tile .k { display:block; margin-top:5px; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
|
||
.tile .n.warn { color:var(--warning); }
|
||
|
||
.gap { border-color:var(--warning); }
|
||
.gaphead { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
|
||
.gaphead .dot { width:8px; height:8px; border-radius:50%; background:var(--warning); flex:0 0 auto; }
|
||
.q { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:baseline; padding:9px 0; border-top:1px solid var(--line-soft); }
|
||
.q:first-of-type { border-top:none; }
|
||
.q span { font-size:13.5px; }
|
||
.q b { font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; color:var(--warning); }
|
||
|
||
/* bars — single hue, magnitude of one measure */
|
||
.bars { display:flex; flex-direction:column; gap:9px; }
|
||
.bar { display:grid; grid-template-columns:132px 1fr 46px; gap:11px; align-items:center; }
|
||
.bar .lab { font-size:13px; color:var(--ink-2); }
|
||
.bar .track { height:9px; background:var(--surface-3); border-radius:4px; }
|
||
.bar .fill { height:100%; background:var(--brand); border-radius:0 4px 4px 0; }
|
||
.bar .val { font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--ink-2); text-align:right; }
|
||
.bar:hover .fill { background:var(--brand-2); }
|
||
|
||
.foot { margin-top:26px; font-size:12.5px; color:var(--ink-3); }
|
||
@media (prefers-reduced-motion: reduce){ * { transition:none !important; } }
|
||
</style>
|
||
|
||
<div class="page">
|
||
|
||
<div class="note">
|
||
<div>
|
||
<strong>Maquette — écran Guide IA de manager-app</strong>
|
||
<span>Données d'exemple (Fort Saint Héribert). Sert à valider la structure et le vocabulaire, pas le pixel. Toutes les chaînes de l'écran passent par <code>AppLocalizations</code> — l'interface suit la langue du gestionnaire (FR / NL / EN), indépendamment de la langue des contenus. Spécification : <code>DOCS/v2/guide-ia-screen-plan.md</code>.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="app">
|
||
|
||
<nav class="rail" aria-label="Navigation manager-app">
|
||
<div class="brandline">MyInfoMate</div>
|
||
<a href="#">Configurations</a>
|
||
<a href="#">Sections</a>
|
||
<a href="#">Médiathèque</a>
|
||
<a href="#">Agenda</a>
|
||
<a href="#" class="on">Guide IA</a>
|
||
<a href="#">Statistiques</a>
|
||
<a href="#">Utilisateurs</a>
|
||
<a href="#">Abonnement</a>
|
||
</nav>
|
||
|
||
<div class="main">
|
||
<div class="head">
|
||
<h1>Guide IA</h1>
|
||
<p>Votre guide répond aux questions des visiteurs à partir de vos propres contenus. Il ne répond jamais à partir d'autre chose.</p>
|
||
</div>
|
||
|
||
<div class="tabs" role="tablist">
|
||
<button class="tab" role="tab" id="t1" aria-controls="p1" aria-selected="true" type="button">Configuration</button>
|
||
<button class="tab" role="tab" id="t2" aria-controls="p2" aria-selected="false" type="button">Ce que demandent vos visiteurs</button>
|
||
</div>
|
||
|
||
<!-- ================= TAB 1 ================= -->
|
||
<div class="panel" id="p1" role="tabpanel" aria-labelledby="t1">
|
||
<div class="grid2">
|
||
|
||
<div>
|
||
<div class="card">
|
||
<h2>Consommation du mois</h2>
|
||
<p class="sub">Remise à zéro le 1<sup>er</sup> septembre</p>
|
||
<div class="meterwrap">
|
||
<span class="meterval">62 %</span>
|
||
<span class="meterside">1 240 questions posées</span>
|
||
</div>
|
||
<div class="meter"><i style="width:62%"></i></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>Où le guide est disponible</h2>
|
||
<p class="sub">Activable canal par canal</p>
|
||
<div class="chan"><span class="who">Site web visiteurs<small>app.myinfomate.be/fort-saint-heribert</small></span><span class="sw on" role="img" aria-label="Activé"></span></div>
|
||
<div class="chan"><span class="who">Application mobile<small>iOS et Android</small></span><span class="sw on" role="img" aria-label="Activé"></span></div>
|
||
<div class="chan"><span class="who">Borne tablette<small>Accueil du fort</small></span><span class="sw" role="img" aria-label="Désactivé"></span></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>Identité du guide</h2>
|
||
<p class="sub">C'est ce qui donne son ton aux réponses</p>
|
||
|
||
<div class="fieldset">
|
||
<label class="f" for="nom">Nom du guide</label>
|
||
<input class="inp" id="nom" value="Léon" readonly>
|
||
<p class="hint">Le nom que le visiteur voit et entend.</p>
|
||
</div>
|
||
|
||
<div class="fieldset">
|
||
<label class="f" for="perso">Personnalité</label>
|
||
<textarea class="ta" id="perso">Tu t'appelles Léon, tu es l'ancien gardien du fort. Tu parles simplement, avec un accent belge chaleureux, et tu glisses volontiers une anecdote. Tu es passionné par la Seconde Guerre mondiale et par la vie quotidienne des soldats dans les casemates. Tu vouvoies les visiteurs.</textarea>
|
||
<p class="hint">Décrivez-le comme vous présenteriez un guide à un nouveau collègue. Pour démarrer, partez d'un exemple :</p>
|
||
<div class="egs">
|
||
<button class="eg" type="button" data-eg="Tu t'appelles Léon, tu es l'ancien gardien du fort. Tu parles simplement, avec un accent belge chaleureux, et tu glisses volontiers une anecdote. Tu es passionné par la Seconde Guerre mondiale et par la vie quotidienne des soldats dans les casemates. Tu vouvoies les visiteurs.">Gardien passionné</button>
|
||
<button class="eg" type="button" data-eg="Tu es un médiateur culturel calme et précis. Tu réponds en deux ou trois phrases, sans familiarité, en citant les faits établis. Si une information n'est pas certaine, tu le dis. Tu vouvoies les visiteurs.">Médiateur sobre</button>
|
||
<button class="eg" type="button" data-eg="Tu es Zoé, une exploratrice enthousiaste qui s'adresse à des enfants de 7 à 12 ans. Tu tutoies, tu poses des questions, tu utilises des comparaisons simples et des mots courts. Tu évites les dates compliquées et tu racontes des histoires.">Pour les enfants</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fieldset">
|
||
<label class="f">Quand Léon ne sait pas répondre</label>
|
||
<div id="fblist">
|
||
<div class="fbrow"><span class="n">1</span><input class="inp" value="Ah, ça je ne saurais pas vous dire. Demandez donc à l'accueil, ils sauront mieux que moi !"><button class="del" type="button" aria-label="Supprimer cette formulation">×</button></div>
|
||
<div class="fbrow"><span class="n">2</span><input class="inp" value="Alors là, vous me posez une colle. Passez à l'accueil, on vous renseignera."><button class="del" type="button" aria-label="Supprimer cette formulation">×</button></div>
|
||
<div class="fbrow"><span class="n">3</span><input class="inp" value="Je n'ai pas cette information-là, désolé. L'équipe de l'accueil pourra vous aider."><button class="del" type="button" aria-label="Supprimer cette formulation">×</button></div>
|
||
</div>
|
||
<button class="addbtn" type="button" id="addfb">+ Ajouter une formulation</button>
|
||
<p class="hint">Léon en choisit une au hasard. Avec une seule phrase, il la répète à l'identique et ça se remarque tout de suite. Pour vous inspirer :</p>
|
||
<div class="egs">
|
||
<button class="eg" type="button" data-fb="Je ne connais pas la réponse à celle-là. L'équipe de l'accueil pourra sûrement vous aider.">Renvoi à l'accueil</button>
|
||
<button class="eg" type="button" data-fb="Ça, ce n'est pas dans mes souvenirs. Vous trouverez peut-être l'information sur les panneaux à l'entrée.">Renvoi sur place</button>
|
||
<button class="eg" type="button" data-fb="Je préfère ne pas inventer. Je n'ai pas cette information.">Honnête et bref</button>
|
||
</div>
|
||
<div class="info"><span class="i">i</span><span>Ces phrases sont vues par vos visiteurs : elles seront traduites dans leur langue, comme le reste de vos contenus.</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="card">
|
||
<h2>Essayer votre guide</h2>
|
||
<p class="sub">Testez le ton et les réponses sans passer par un téléphone</p>
|
||
<div class="chat">
|
||
<div class="chatrow"><div class="bub v">Pourquoi les murs sont aussi épais ?</div></div>
|
||
<div class="chatrow"><div class="bub g">Ah, ça c'est du sérieux ! Les casemates ont jusqu'à trois mètres de béton armé. Il fallait tenir sous les obus de 1914 — et croyez-moi, à l'intérieur on n'entendait qu'un grondement sourd.
|
||
<div class="srcline"><button class="ibtn" id="ibtn" type="button" aria-expanded="false" aria-controls="srcbox">i</button> D'où vient cette réponse ?</div>
|
||
<div class="srcbox" id="srcbox" hidden>
|
||
<code>Histoire du fort</code> — section Article<br>
|
||
<code>Parcours des casemates</code> — étape 3
|
||
</div>
|
||
</div></div>
|
||
</div>
|
||
<div class="info"><span class="i">i</span><span>Cet indicateur de sources n'apparaît que sur cet écran. Vos visiteurs, eux, ne voient que la réponse.</span></div>
|
||
</div>
|
||
|
||
<div class="card feature">
|
||
<span class="eyebrow">Mains libres</span>
|
||
<div class="featurehead">
|
||
<span class="icowrap" aria-hidden="true">
|
||
<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><circle cx="6" cy="14" r="3.4"/><circle cx="18" cy="14" r="3.4"/><path d="M9.4 14h5.2"/><path d="M2.6 14V11.4A1.4 1.4 0 0 1 4 10h1.2"/><path d="M21.4 14V11.4A1.4 1.4 0 0 0 20 10h-1.2"/></svg>
|
||
<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="M4 10v4"/><path d="M8.5 6.5v11"/><path d="M13 3.5v17"/><path d="M17.5 7.5v9"/><path d="M22 10.5v3"/></svg>
|
||
</span>
|
||
<h2 style="margin:0">Votre guide à voix haute</h2>
|
||
</div>
|
||
<p class="sub">Le visiteur pose sa question à voix haute et entend la réponse — dans l'application, ou dans ses lunettes connectées, sans sortir son téléphone.</p>
|
||
<div class="voices">
|
||
<div class="voice sel"><b>Viva</b><span>Voix féminine, chaleureuse</span><br><code>Réveil : « Viva »</code></div>
|
||
<div class="voice"><b>Marco</b><span>Voix masculine, posée</span><br><code>Réveil : « Marco »</code></div>
|
||
</div>
|
||
<div class="info"><span class="i">i</span><span>Le visiteur dit « Viva » pour réveiller le guide, même s'il s'appelle Léon. Une voix et un mot de réveil à votre nom sont possibles en option.</span></div>
|
||
<div class="info"><span class="i">i</span><span>Les lunettes connectées fonctionnent avec l'application mobile MyInfoMate installée sur le téléphone du visiteur.</span></div>
|
||
<p class="hint">La même voix parle toutes vos langues : votre guide garde la même identité en français comme en néerlandais.</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>Ce que connaît votre guide</h2>
|
||
<p class="sub">Tout ce qui est publié pour vos visiteurs, et rien d'autre</p>
|
||
<div class="kv"><span>Sections publiées et indexées</span><b>47</b></div>
|
||
<div class="kv"><span>Points d'intérêt</span><b>112</b></div>
|
||
<div class="kv"><span>Langues couvertes</span><b>FR · NL · EN · DE</b></div>
|
||
<div class="kv"><span>Dernière mise à jour</span><b>il y a 2 h</b></div>
|
||
<p class="hint">Une section dépubliée disparaît des réponses de Léon dans la minute.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= TAB 2 ================= -->
|
||
<div class="panel" id="p2" role="tabpanel" aria-labelledby="t2" hidden>
|
||
|
||
<div class="tiles">
|
||
<div class="tile"><span class="n">1 240</span><span class="k">Questions ce mois</span></div>
|
||
<div class="tile"><span class="n warn">87</span><span class="k">Sans réponse</span></div>
|
||
<div class="tile"><span class="n">6</span><span class="k">Thèmes</span></div>
|
||
<div class="tile"><span class="n">4</span><span class="k">Langues</span></div>
|
||
</div>
|
||
|
||
<div class="card gap">
|
||
<div class="gaphead"><span class="dot"></span><h2 style="margin:0">Ce que vos visiteurs cherchent sans le trouver</h2></div>
|
||
<p class="sub">87 questions n'ont trouvé aucune réponse dans vos contenus. Ajoutez-les et Léon saura répondre dès la prochaine visite.</p>
|
||
<div class="q"><span>Y a-t-il un parking à proximité ?</span><b>23 ×</b></div>
|
||
<div class="q"><span>Est-ce accessible en fauteuil roulant ?</span><b>19 ×</b></div>
|
||
<div class="q"><span>Les chiens sont-ils admis sur le site ?</span><b>14 ×</b></div>
|
||
<div class="q"><span>Combien de temps dure la visite complète ?</span><b>11 ×</b></div>
|
||
<div class="q"><span>Peut-on pique-niquer sur le site ?</span><b>8 ×</b></div>
|
||
</div>
|
||
|
||
<div class="grid3" style="margin-top:18px">
|
||
<div>
|
||
<div class="card">
|
||
<h2>Sujets des questions</h2>
|
||
<p class="sub">Nombre de questions, août 2026</p>
|
||
<div class="bars">
|
||
<div class="bar" title="Horaires et accès — 224 questions"><span class="lab">Horaires et accès</span><span class="track"><span class="fill" style="width:100%"></span></span><span class="val">224</span></div>
|
||
<div class="bar" title="Accessibilité — 149 questions"><span class="lab">Accessibilité</span><span class="track"><span class="fill" style="width:66.5%"></span></span><span class="val">149</span></div>
|
||
<div class="bar" title="Tarifs et billetterie — 137 questions"><span class="lab">Tarifs et billetterie</span><span class="track"><span class="fill" style="width:61.2%"></span></span><span class="val">137</span></div>
|
||
<div class="bar" title="Histoire du fort — 112 questions"><span class="lab">Histoire du fort</span><span class="track"><span class="fill" style="width:50%"></span></span><span class="val">112</span></div>
|
||
<div class="bar" title="Activités enfants — 74 questions"><span class="lab">Activités enfants</span><span class="track"><span class="fill" style="width:33%"></span></span><span class="val">74</span></div>
|
||
<div class="bar" title="Restauration — 41 questions"><span class="lab">Restauration</span><span class="track"><span class="fill" style="width:18.3%"></span></span><span class="val">41</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="card">
|
||
<h2>Langues des questions</h2>
|
||
<p class="sub">Nombre de questions, août 2026</p>
|
||
<div class="bars">
|
||
<div class="bar" title="Français — 892 questions"><span class="lab">Français</span><span class="track"><span class="fill" style="width:100%"></span></span><span class="val">892</span></div>
|
||
<div class="bar" title="Néerlandais — 241 questions"><span class="lab">Néerlandais</span><span class="track"><span class="fill" style="width:27%"></span></span><span class="val">241</span></div>
|
||
<div class="bar" title="Anglais — 87 questions"><span class="lab">Anglais</span><span class="track"><span class="fill" style="width:9.8%"></span></span><span class="val">87</span></div>
|
||
<div class="bar" title="Allemand — 20 questions"><span class="lab">Allemand</span><span class="track"><span class="fill" style="width:2.2%"></span></span><span class="val">20</span></div>
|
||
</div>
|
||
<p class="hint">Vos contenus sont traduits en 4 langues. L'allemand représente 1,6 % des questions.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="card">
|
||
<h2>Contenus les plus utilisés</h2>
|
||
<p class="sub">Sections citées dans les réponses</p>
|
||
<div class="bars">
|
||
<div class="bar" title="Histoire du fort — cité 312 fois"><span class="lab">Histoire du fort</span><span class="track"><span class="fill" style="width:100%"></span></span><span class="val">312</span></div>
|
||
<div class="bar" title="Parcours des casemates — cité 198 fois"><span class="lab">Parcours casemates</span><span class="track"><span class="fill" style="width:63.5%"></span></span><span class="val">198</span></div>
|
||
<div class="bar" title="Agenda — cité 141 fois"><span class="lab">Agenda</span><span class="track"><span class="fill" style="width:45.2%"></span></span><span class="val">141</span></div>
|
||
<div class="bar" title="Plan du site — cité 96 fois"><span class="lab">Plan du site</span><span class="track"><span class="fill" style="width:30.8%"></span></span><span class="val">96</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info" style="margin-top:18px"><span class="i">i</span><span>Les questions sont conservées 90 jours puis supprimées. Seuls les regroupements par sujet sont gardés au-delà. Aucune donnée permettant d'identifier un visiteur n'est enregistrée.</span></div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="foot">Barres : une seule mesure (nombre de questions), donc une seule teinte — la longueur porte l'information, pas la couleur. L'ambre est réservé à l'état « sans réponse » et n'est jamais réutilisé comme couleur de série.</p>
|
||
</div>
|
||
|
||
<script>
|
||
(function(){
|
||
var tabs = [document.getElementById('t1'), document.getElementById('t2')];
|
||
var panels = [document.getElementById('p1'), document.getElementById('p2')];
|
||
tabs.forEach(function(tab, i){
|
||
tab.addEventListener('click', function(){
|
||
tabs.forEach(function(t, j){
|
||
t.setAttribute('aria-selected', String(i === j));
|
||
panels[j].hidden = (i !== j);
|
||
});
|
||
});
|
||
});
|
||
var ibtn = document.getElementById('ibtn'), srcbox = document.getElementById('srcbox');
|
||
ibtn.addEventListener('click', function(){
|
||
var open = srcbox.hidden;
|
||
srcbox.hidden = !open;
|
||
ibtn.setAttribute('aria-expanded', String(open));
|
||
});
|
||
|
||
var perso = document.getElementById('perso');
|
||
var fblist = document.getElementById('fblist');
|
||
|
||
function renumber(){
|
||
fblist.querySelectorAll('.fbrow .n').forEach(function(n, i){ n.textContent = String(i + 1); });
|
||
}
|
||
function addRow(value){
|
||
var row = document.createElement('div');
|
||
row.className = 'fbrow';
|
||
row.innerHTML = '<span class="n"></span><input class="inp"><button class="del" type="button" aria-label="Supprimer cette formulation">×</button>';
|
||
row.querySelector('.inp').value = value || '';
|
||
fblist.appendChild(row);
|
||
renumber();
|
||
return row;
|
||
}
|
||
|
||
fblist.addEventListener('click', function(e){
|
||
if (e.target.classList.contains('del')) { e.target.closest('.fbrow').remove(); renumber(); }
|
||
});
|
||
document.getElementById('addfb').addEventListener('click', function(){ addRow('').querySelector('.inp').focus(); });
|
||
|
||
document.querySelectorAll('.eg').forEach(function(b){
|
||
b.addEventListener('click', function(){
|
||
if (b.hasAttribute('data-eg')) { perso.value = b.getAttribute('data-eg'); perso.focus(); }
|
||
else { addRow(b.getAttribute('data-fb')).querySelector('.inp').focus(); }
|
||
});
|
||
});
|
||
})();
|
||
</script>
|
||
|
||
</body></html>
|