Tableau de bord d’informations de vue pour tablette ambulatoire
Dans un contexte de tablette de consultation, concevez un tableau de bord de fenêtre d’affichage : contenu réaliste, contrôles utilisables, retours d’état clairs et mise en page adaptative selon les tailles d’écran.
Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :
<!doctype html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tableau de bord d’informations de vue pour tablette ambulatoire</title>
<style>
:root { --ink:#111111; --paper:#f8f8f4; --accent:#111111; --secondary:#8d8d88; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:Helvetica,"PingFang SC",sans-serif; background:repeating-linear-gradient(0deg,transparent 0 31px,color-mix(in srgb,var(--ink) 7%,transparent) 32px),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.page{width:min(1120px,calc(100% - 30px));margin:auto;padding:48px 0 80px}.mast{display:grid;grid-template-columns:1fr auto;border-top:10px solid var(--ink);padding-top:20px;gap:20px;align-items:end;margin-bottom:26px}.mast h1{font-family:Helvetica,"PingFang SC",sans-serif;font-weight:900;font-size:clamp(44px,10vw,106px);letter-spacing:-.075em;margin:0;line-height:.82}.eyebrow{display:inline-block;margin-bottom:12px;padding:5px 8px;color:var(--paper);background:var(--ink);font:900 10px/1 ui-monospace,monospace;letter-spacing:.14em}.intro{max-width:700px;line-height:1.55}.scenario{padding:9px 12px;border:3px solid var(--ink);font-weight:900}.demo{border:3px solid var(--ink);border-radius:0;box-shadow:12px 12px 0 var(--ink);position:relative;min-height:410px;overflow:hidden;padding:clamp(22px,4vw,46px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 18px);padding:20px 0}.mast{grid-template-columns:1fr}.demo{padding:15px}}
.panel{padding:22px;border:1px solid var(--line);background:color-mix(in srgb,#fff 58%,transparent)}.stack{display:grid;gap:15px}.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.action{min-height:44px;padding:10px 17px;border:1px solid var(--ink);border-radius:999px;background:transparent}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.muted{opacity:.68}.status{min-height:24px;margin-top:15px;color:var(--accent);font-weight:800}.metric{font-size:clamp(30px,6vw,58px);font-weight:900}.meter{height:9px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--ink) 12%,transparent)}.meter>i{display:block;height:100%;background:var(--accent)}.chip{padding:6px 9px;border:1px solid var(--line);border-radius:999px;font-size:12px}
.composition-deck{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:color-mix(in srgb,var(--ink) 4%,var(--paper))}.deck-bar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:12px 18px;color:var(--paper);background:var(--ink);font:700 12px/1 ui-monospace,monospace}.deck-lights{display:flex;gap:7px}.deck-lights i{width:10px;height:10px;border-radius:50%;background:var(--accent)}.deck-lights i:nth-child(2){background:var(--secondary)}.deck-lights i:nth-child(3){background:color-mix(in srgb,var(--paper) 55%,transparent)}.composition-deck .demo{border:0;border-radius:0;box-shadow:none}
.viewport-lab{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(180px,.65fr);gap:16px}.viewport-lab>header{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:8px 18px;align-items:end;padding-bottom:16px;border-bottom:5px solid var(--ink)}.viewport-lab h2{margin:.2em 0}.viewport-lab header output{grid-column:2;grid-row:1/3;font:900 clamp(32px,7vw,66px)/1 ui-monospace,monospace}.viewport-board{position:relative;min-height:300px;padding:28px;border:1px solid var(--line);background:repeating-linear-gradient(90deg,transparent 0 39px,color-mix(in srgb,var(--line) 35%,transparent) 40px)}.viewport-board>i{position:absolute;background:var(--accent);transition:width .2s,height .2s}.viewport-board>i:first-child{left:0;top:0;height:8px}.viewport-board>i:nth-child(2){right:0;top:0;width:8px}.viewport-board dl{display:grid;grid-template-columns:1fr 1fr;gap:12px}.viewport-board dl div{padding:16px;background:var(--paper);border:1px solid var(--line)}.viewport-board dt{font-size:12px}.viewport-board dd{margin:7px 0 0;font-weight:900}.viewport-lab>aside{padding:20px;border:1px solid var(--line)}.viewport-lab ol{display:grid;gap:8px;padding-left:22px}@media(max-width:680px){.viewport-lab{grid-template-columns:1fr}.viewport-lab>header{grid-template-columns:1fr}.viewport-lab header output{grid-area:auto}.viewport-board dl{grid-template-columns:1fr}}.workflow-session{display:grid;gap:14px}.session-command{display:grid;grid-template-columns:1fr auto minmax(170px,.45fr) auto;gap:16px;align-items:end;padding:18px;border-block:4px double var(--ink)}.session-command h2{margin:.2em 0}.session-command output{font:900 clamp(28px,5vw,54px)/1 ui-monospace,monospace}.session-command label{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:12px}.session-command input{grid-column:1/-1;width:100%}#workflowSessionProgress{height:12px;overflow:hidden;border-radius:2px;background:var(--line)}#workflowSessionProgress i{display:block;width:0;height:100%;background:var(--accent)}.session-stage{min-width:0;transition:filter .25s,transform .25s}.session-stage[data-session-phase="running"]{transform:translateY(-3px)}.session-stage[data-session-phase="paused"]{filter:grayscale(.65)}.session-stage[data-session-phase="complete"]{filter:contrast(.78);opacity:.72}.session-log{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}.session-log ol{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;list-style:none}.session-log li{padding:5px 8px;border:1px solid var(--line);font-size:12px}@media(max-width:900px){.session-stage{order:-1}.session-command{grid-template-columns:1fr auto}.session-command label{grid-column:1/-1}.session-log{grid-template-columns:1fr}}.atlas-shell{--atlas-zoom:100;display:grid;gap:18px;padding:clamp(18px,4vw,30px);border:1px solid var(--line);border-radius:34px;background:linear-gradient(165deg,color-mix(in srgb,var(--secondary) 10%,transparent),color-mix(in srgb,var(--paper) 96%,transparent));box-shadow:var(--shadow)}.atlas-head{display:flex;justify-content:space-between;gap:20px;align-items:end}.atlas-head h2{margin:.18em 0}.atlas-controls{display:grid;gap:10px;justify-items:end}.atlas-modes{display:flex;flex-wrap:wrap;gap:8px;justify-content:end}.atlas-controls output{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-weight:900}.atlas-body{display:grid;grid-template-columns:minmax(240px,.56fr) minmax(0,1.44fr);gap:16px}.atlas-index{display:grid;align-content:start;gap:14px;padding:18px;border-radius:26px;color:var(--paper);background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 88%,#071310),color-mix(in srgb,var(--ink) 72%,#21110f))}.atlas-index label{display:grid;gap:8px}.atlas-index input,.atlas-index select{width:100%;padding:10px;border:1px solid #ffffff2e;border-radius:10px;color:inherit;background:#ffffff12}.atlas-chapters{display:grid;gap:10px;margin:0;padding:0;list-style:none}.atlas-chapters button{display:grid;gap:6px;width:100%;padding:14px;border:1px solid #ffffff24;border-radius:18px;color:inherit;background:#ffffff0e;text-align:left}.atlas-chapters button[aria-pressed="true"]{border-color:var(--secondary);background:#ffffff18;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--secondary) 28%,transparent)}.atlas-chapters span{font:800 11px/1 ui-monospace,monospace;letter-spacing:.16em}.atlas-chapters small{line-height:1.5;opacity:.76}.atlas-meta{display:grid;gap:10px;margin:0}.atlas-meta div{display:grid;gap:4px;padding:12px;border:1px solid #ffffff1f;border-radius:14px;background:#ffffff10}.atlas-meta dt{font:700 11px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.72}.atlas-meta dd{margin:0;font-weight:900}.atlas-stage{display:grid;gap:14px;min-width:0}.atlas-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.atlas-summary article{display:grid;gap:6px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.atlas-summary article[data-active="true"]{background:color-mix(in srgb,var(--secondary) 14%,var(--paper));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}.atlas-summary span{font:800 11px/1 ui-monospace,monospace;letter-spacing:.16em}.atlas-core-shell{min-width:0;padding:clamp(14px,3vw,22px);overflow:auto;border:1px solid var(--line);border-radius:26px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--accent) 8%,transparent),transparent 35%),color-mix(in srgb,var(--paper) 94%,transparent)}.atlas-core-shell>*{display:block;width:calc(10000%/var(--atlas-zoom));max-width:none;transform:scale(calc(var(--atlas-zoom)/100));transform-origin:top left}.atlas-log{display:grid;gap:8px;margin:0;padding-left:18px}.atlas-log li{line-height:1.55}.atlas-shell[data-atlas-mode="trace"] .atlas-core-shell{outline:4px solid color-mix(in srgb,var(--accent) 24%,transparent);outline-offset:3px}.atlas-shell[data-atlas-mode="handoff"] .atlas-index{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 82%,#28120f),color-mix(in srgb,var(--ink) 68%,#11201d))}@media(max-width:960px){.atlas-body{grid-template-columns:1fr}.atlas-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.atlas-head{align-items:stretch;flex-direction:column}.atlas-controls{justify-items:start}.atlas-modes{justify-content:start}.atlas-summary{grid-template-columns:1fr}.atlas-core-shell>*{width:100%;transform:none}}
</style>
</head>
<body data-aesthetic="monochrome" data-composition="control-deck">
<main class="page">
<header class="mast"><div><span class="eyebrow">monochrome / panneau d’informations de la zone d’affichage / INTERMEDIATE</span><h1>Tableau de bord d’informations de vue pour tablette ambulatoire</h1><p class="intro">Dans un contexte de tablette de consultation, concevez un tableau de bord de fenêtre d’affichage : contenu réaliste, contrôles utilisables, retours d’état clairs et mise en page adaptative selon les tailles d’écran.</p></div><span class="scenario">Tablette de consultation externe</span></header>
<div class="composition-deck"><div class="deck-bar"><span>CONTROL DECK · 04</span><span>Panneau d’informations sur la zone d’affichage</span><span class="deck-lights" aria-hidden="true"><i></i><i></i><i></i></span></div><section class="demo" aria-label="Zone interactive du panneau d’informations de la vue de la tablette de l’ambulatoire"><section id="atlasShell" class="atlas-shell" data-atlas-mode="brief"><header class="atlas-head"><div><span class="eyebrow">Consultation ambulatoire / ATLAS DOSSIER</span><h2>Échantillon d’atlas du panneau d’informations de la vue</h2><p>Réencapsuler le cas principal dans une page d’exemple de type atlas, en séparant l’index des exemples, la vue de suivi, les annotations de passation et les notes de terrain.</p></div><div class="atlas-controls"><div class="atlas-modes"><button class="action primary" type="button" data-atlas-mode="brief">Briefing</button><button class="action" type="button" data-atlas-mode="trace">Suivi</button><button class="action" type="button" data-atlas-mode="handoff">Transfert</button></div><output id="atlasState">En attente de création d’échantillon</output></div></header><div class="atlas-body"><aside class="atlas-index"><ol class="atlas-chapters"><li><button type="button" data-atlas-card="0" aria-pressed="true"><span>01</span><strong>Rappel pour tablette ambulatoire</strong><small>Vérifier si les changements d’état sont visibles</small></button></li><li><button type="button" data-atlas-card="1" aria-pressed="false"><span>02</span><strong>Favoris de la tablette de consultation</strong><small>Confirmer la cohérence entre l’entrée au clavier et le clic</small></button></li><li><button type="button" data-atlas-card="2" aria-pressed="false"><span>03</span><strong>Vue d’ensemble de la tablette de consultation</strong><small>Vérifiez si la disposition se replie sur les écrans étroits</small></button></li><li><button type="button" data-atlas-card="3" aria-pressed="false"><span>04</span><strong>Plan de la tablette de consultation</strong><small>Enregistrer la conclusion de la révision en cours</small></button></li></ol><label>Ratio de mise en page<input id="atlasZoom" type="range" min="82" max="132" value="100"><output id="atlasZoomValue">100%</output></label><label>focus de l’échantillonnage<select id="atlasFocus"><option value="0">Rappel pour tablette ambulatoire</option><option value="1">Favoris de la tablette de consultation</option><option value="2">Vue d’ensemble de la tablette de consultation</option><option value="3">Plan de la tablette de consultation</option></select></label><button id="atlasCapture" class="action primary" type="button">Échantillon inclus</button><dl class="atlas-meta"><div><dt>Nombre de contenus</dt><dd id="atlasCount">0</dd></div><div><dt>Focus actuel</dt><dd id="atlasCurrent">Rappel pour tablette ambulatoire</dd></div><div><dt>Mode de relecture</dt><dd id="atlasModeLabel">Briefing</dd></div></dl></aside><section class="atlas-stage"><div class="atlas-summary"><article data-active="true"><span>Sample</span><strong>Rappel pour tablette ambulatoire</strong><p>Vérifier si les changements d’état sont visibles</p></article><article><span>Trace</span><strong>Favoris de la tablette de consultation</strong><p>Confirmer la cohérence entre l’entrée au clavier et le clic</p></article><article><span>Signal</span><strong>Vue d’ensemble de la tablette de consultation</strong><p>Vérifiez si la disposition se replie sur les écrans étroits</p></article><article><span>Handoff</span><strong>Plan de la tablette de consultation</strong><p>Enregistrer la conclusion de la révision en cours</p></article></div><div id="atlasCoreShell" class="atlas-core-shell"><div class="workflow-session"><header class="session-command"><div><span class="eyebrow">Tablette de consultation SESSION</span><h2>Tablette de chronométrage de consultation</h2></div><output id="workflowSessionClock">00:45</output><label>Durée du tour<input id="workflowSessionLength" type="range" min="15" max="90" step="15" value="45"><span>s</span></label><button id="workflowSessionToggle" class="action primary" type="button">Commencer l’enregistrement des capacités</button></header><div id="workflowSessionProgress" role="progressbar" aria-label="Progression de la tablette de consultation" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></div><section id="workflowCore" class="workflow-core session-stage" data-session-phase="ready" tabindex="-1"><!-- 11DZ_CORE_START:browser-media-device-viewport-inspector --><div class="viewport-lab"><header><span class="eyebrow">VIEWPORT RULER</span><h2>Tablette de clinique pour inspection de la zone d’affichage</h2><output id="viewportReading">—</output><button id="viewportCapture" class="action primary" type="button" data-core-bridge="browser-media-device-viewport-inspector">Enregistrer les dimensions actuelles</button></header><section class="viewport-board" aria-label="Schéma des dimensions de la fenêtre d’affichage"><i id="viewportWidthBar"></i><i id="viewportHeightBar"></i><dl><div><dt>Zone de contenu</dt><dd id="viewportInner">—</dd></div><div><dt>Zone utilisable de l’écran</dt><dd id="viewportScreen">—</dd></div><div><dt>Densité de pixels</dt><dd id="viewportDpr">—</dd></div><div><dt>Orientation de l’écran</dt><dd id="viewportOrientation">—</dd></div></dl></section><aside><h3>Instantané de taille</h3><ol id="viewportHistory"><li>Enregistrez la comparaison après redimensionnement de la fenêtre</li></ol></aside></div><!-- 11DZ_CORE_END --></section><footer class="session-log"><strong id="workflowSessionScore">0 points de contrôle interactifs</strong><ol id="workflowSessionLaps" aria-label="Journal de ronde"></ol></footer></div></div><ol id="atlasLog" class="atlas-log"><li>En attente du premier échantillon du graphe</li></ol></section></div></section><p id="status" class="status" role="status" aria-live="polite"></p></section></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:browser-media-device-viewport-inspector */
const viewportHistory=[];const viewportReading=document.querySelector('#viewportReading');function measureViewport(){const width=innerWidth;const height=innerHeight;const orientation=width>=height?'horizontal':'vertical';viewportReading.textContent=width+' × '+height;document.querySelector('#viewportInner').textContent=document.documentElement.clientWidth+' × '+document.documentElement.clientHeight;document.querySelector('#viewportScreen').textContent=screen.availWidth+' × '+screen.availHeight;document.querySelector('#viewportDpr').textContent=(devicePixelRatio||1).toFixed(2)+' dppx';document.querySelector('#viewportOrientation').textContent=orientation;document.querySelector('#viewportWidthBar').style.width=Math.min(100,width/16)+'%';document.querySelector('#viewportHeightBar').style.height=Math.min(100,height/10)+'%';}function captureViewport(){viewportHistory.unshift({width:innerWidth,height:innerHeight,dpr:devicePixelRatio||1,at:new Date()});viewportHistory.splice(5);document.querySelector('#viewportHistory').replaceChildren(...viewportHistory.map(entry=>{const item=document.createElement('li');item.textContent=entry.width+' × '+entry.height+' · '+entry.dpr.toFixed(1)+'x';return item;}));announce('Enregistré n° '+viewportHistory.length+' instantanés de viewport');}addEventListener('resize',measureViewport,{passive:true});document.querySelector('#viewportCapture').addEventListener('click',captureViewport);measureViewport();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"browser-media-device-viewport-inspector","selector":"[data-core-bridge=\"browser-media-device-viewport-inspector\"]","mode":"click","key":"Enter"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Version de base '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("click",workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();workflowBridgeControl.click();const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowSessionCore=document.querySelector('#workflowCore');const workflowSessionToggle=document.querySelector('#workflowSessionToggle');const workflowSessionLength=document.querySelector('#workflowSessionLength');const workflowSessionState={phase:'ready',elapsed:0,limit:Number(workflowSessionLength.value),checkpoints:[],timer:null};function workflowSessionFormat(seconds){return String(Math.floor(seconds/60)).padStart(2,'0')+':'+String(seconds%60).padStart(2,'0');}function workflowSessionDrive(){const percent=Math.min(100,Math.round(workflowSessionState.elapsed/workflowSessionState.limit*100));document.querySelector('#workflowSessionClock').textContent=workflowSessionFormat(Math.max(0,workflowSessionState.limit-workflowSessionState.elapsed));const progress=document.querySelector('#workflowSessionProgress');progress.setAttribute('aria-valuenow',String(percent));progress.querySelector('i').style.width=percent+'%';workflowSessionCore.dataset.sessionPhase=workflowSessionState.phase;document.querySelector('#workflowSessionScore').textContent=workflowSessionState.checkpoints.length+' points de contrôle d’interaction';}function workflowSessionLap(label){workflowSessionState.checkpoints.push({label,at:workflowSessionState.elapsed});const item=document.createElement('li');item.textContent=label+' · '+workflowSessionFormat(workflowSessionState.elapsed);document.querySelector('#workflowSessionLaps').append(item);workflowSessionDrive();}function workflowSessionStop(complete=false){clearInterval(workflowSessionState.timer);workflowSessionState.timer=null;workflowSessionState.phase=complete?'complete':'paused';workflowSessionToggle.textContent=complete?'Recommencer':'Tour suivant';workflowSessionToggle.setAttribute('aria-pressed','false');workflowSessionDrive();announce(complete?'Fin de session sur tablette de consultation':'La ronde est suspendue');}function workflowSessionStart(){if(workflowSessionState.phase==='complete'){workflowSessionState.elapsed=0;workflowSessionState.checkpoints=[];document.querySelector('#workflowSessionLaps').replaceChildren();}workflowSessionState.phase='running';workflowSessionToggle.textContent='Tour de pause';workflowSessionToggle.setAttribute('aria-pressed','true');const bridge=workflowBridgeActivate();workflowSessionLap(bridge.summary);clearInterval(workflowSessionState.timer);workflowSessionState.timer=setInterval(()=>{workflowSessionState.elapsed+=1;if(workflowSessionState.elapsed>=workflowSessionState.limit){workflowSessionStop(true);return;}workflowSessionDrive();},1000);workflowSessionDrive();announce('Tour de tablette de clinique démarré · '+bridge.summary);}workflowSessionToggle.addEventListener('click',()=>workflowSessionState.phase==='running'?workflowSessionStop():workflowSessionStart());workflowSessionLength.addEventListener('input',()=>{workflowSessionState.limit=Number(workflowSessionLength.value);workflowSessionState.elapsed=Math.min(workflowSessionState.elapsed,workflowSessionState.limit);workflowSessionDrive();});workflowSessionCore.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){workflowSessionLap('Opérations au clavier');}});workflowSessionCore.addEventListener('click',event=>{if(event.target.closest('[data-core-bridge]'))workflowSessionLap('Opération principale · '+workflowBridgeSummary());});document.addEventListener('visibilitychange',()=>{if(document.hidden&&workflowSessionState.phase==='running')workflowSessionStop();});workflowSessionDrive();
workflowBridgeReset();
const atlasShell=document.querySelector('#atlasShell');const atlasState=document.querySelector('#atlasState');const atlasZoom=document.querySelector('#atlasZoom');const atlasZoomValue=document.querySelector('#atlasZoomValue');const atlasFocus=document.querySelector('#atlasFocus');const atlasCurrent=document.querySelector('#atlasCurrent');const atlasCount=document.querySelector('#atlasCount');const atlasModeLabel=document.querySelector('#atlasModeLabel');const atlasCards=[...document.querySelectorAll('[data-atlas-card]')];const atlasSummary=[...document.querySelectorAll('.atlas-summary article')];const atlasLog=document.querySelector('#atlasLog');const atlasModeButtons=[...atlasShell.querySelectorAll('[data-atlas-mode]')];const atlasNotes=["Rappel pour tablette ambulatoire","Favoris de la tablette de consultation","Vue d’ensemble de la tablette de consultation","Plan de la tablette de consultation"];const atlasCore=document.querySelector('#workflowCore');let atlasCaptures=0;function atlasSetActive(index){atlasCards.forEach((button,buttonIndex)=>button.setAttribute('aria-pressed',String(buttonIndex===index)));atlasSummary.forEach((card,cardIndex)=>{if(cardIndex===index)card.setAttribute('data-active','true');else card.removeAttribute('data-active');});atlasCurrent.textContent=atlasNotes[index]||atlasNotes[0]||'Sans titre - focalisation';}function atlasRender(reason){const version=atlasCore?.dataset.workflowVersion||'0';const zoom=Number(atlasZoom.value);const active=Math.min(atlasNotes.length-1,Number(atlasFocus.value)||0);atlasShell.style.setProperty('--atlas-zoom',String(zoom));atlasZoomValue.textContent=zoom+'%';atlasCount.textContent=String(atlasCaptures);atlasSetActive(active);atlasModeLabel.textContent={brief:'Briefing',trace:'Suivi',handoff:'Transfert'}[atlasShell.dataset.atlasMode]||'Briefing';atlasState.textContent=reason+' · Version de base '+version;}atlasModeButtons.forEach(button=>button.addEventListener('click',()=>{atlasModeButtons.forEach(item=>item.classList.toggle('primary',item===button));atlasShell.dataset.atlasMode=button.dataset.atlasMode;atlasRender('Basculé vers'+button.textContent);announce('Mode graphe :'+button.textContent);}));atlasCards.forEach((button,index)=>button.addEventListener('click',()=>{atlasFocus.value=String(index);atlasRender('Focalisation de l’échantillon changée');announce('Focus du graphe :'+atlasNotes[index]);}));atlasZoom.addEventListener('input',()=>{atlasRender('Le niveau de zoom de la mise en page a été mis à jour');announce('Échelle du graphe '+atlasZoom.value+'%');});atlasFocus.addEventListener('change',()=>{atlasRender('Focus d’échantillonnage changé');announce('Point d’échantillonnage :'+atlasNotes[Number(atlasFocus.value)||0]);});document.querySelector('#atlasCapture').addEventListener('click',()=>{const index=Math.min(atlasNotes.length-1,Number(atlasFocus.value)||0);const note=atlasNotes[index]||atlasNotes[0]||'Sans titre - focalisation';const version=atlasCore?.dataset.workflowVersion||'0';atlasCaptures+=1;const item=document.createElement('li');item.textContent='échantillon '+atlasCaptures+' · '+note+' · Version de base '+version;const empty=atlasLog.querySelector('li')?.textContent==='En attente du premier échantillon du graphe';if(empty)atlasLog.replaceChildren(item);else atlasLog.prepend(item);while(atlasLog.children.length>6)atlasLog.lastElementChild.remove();atlasRender('Échantillon inclus '+atlasCaptures);announce('Échantillon inclus '+atlasCaptures+' · '+note);});atlasCore?.addEventListener('focusin',()=>atlasRender('L’élément principal a le focus'));atlasCore?.addEventListener('click',()=>atlasRender('Interaction de l’exemple principal'));atlasRender('En attente de création d’échantillon');
</script>
</body>
</html>