Tableau de gestion des incidents du poste central de la serre
Dans le contexte du tableau de bord du hall principal de la serre, réalisez un tableau de suivi des incidents : il comprend du contenu réel, des contrôles interactifs, un retour d’état clair et une mise en page adaptative à toutes les tailles.
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 gestion des incidents du poste central de la serre</title>
<style>
:root { --ink:#18332f; --paper:#f4efe4; --accent:#d45f3e; --secondary:#8fc4ad; --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:Baskerville,"Songti SC",serif; background:linear-gradient(90deg,var(--paper) 0 72%,color-mix(in srgb,var(--secondary) 18%,var(--paper)) 72%); }
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(1200px,calc(100% - 38px));margin:auto;padding:76px 0}.mast{display:grid;grid-template-columns:2fr 1fr;gap:7vw;align-items:center;margin-bottom:44px}.mast h1{font-family:Baskerville,"Songti SC",serif;font-weight:800;font-size:clamp(48px,11vw,112px);line-height:.86;letter-spacing:-.06em;margin:0}.eyebrow{display:block;margin-bottom:22px;color:var(--accent);font:800 11px/1 ui-monospace,monospace;letter-spacing:.26em}.intro{max-width:46ch;margin-top:26px;font-size:17px;line-height:1.85}.scenario{align-self:end;padding-bottom:14px;border-bottom:5px solid var(--accent);font-weight:800}.demo{border-radius:0 60px 0 0;box-shadow:-16px 18px 0 color-mix(in srgb,var(--accent) 22%,transparent);position:relative;min-height:460px;overflow:hidden;padding:clamp(30px,6vw,72px);background:color-mix(in srgb,var(--paper) 92%,#fff)}@media(max-width:700px){.page{width:calc(100% - 22px);padding:30px 0}.mast{grid-template-columns:1fr}.demo{padding:20px}}
.panel{padding:20px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:18px;background:color-mix(in srgb,var(--paper) 88%,transparent);box-shadow:inset 0 0 24px color-mix(in srgb,var(--accent) 7%,transparent)}.stack{display:grid;gap:16px}.row{display:flex;flex-wrap:wrap;gap:9px}.action{padding:11px 16px;border:1px solid var(--accent);border-radius:6px;color:var(--accent);background:transparent;box-shadow:0 0 14px color-mix(in srgb,var(--accent) 10%,transparent)}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.status{min-height:24px;color:var(--secondary);text-shadow:0 0 10px currentColor}.metric{font-size:clamp(30px,7vw,64px);font-weight:900;text-shadow:0 0 18px color-mix(in srgb,var(--accent) 40%,transparent)}.muted{opacity:.7}.chip{padding:6px 9px;border:1px solid var(--secondary);border-radius:4px}.meter{height:7px;background:color-mix(in srgb,var(--accent) 15%,transparent)}.meter>i{display:block;height:100%;box-shadow:0 0 12px var(--accent);background:var(--accent)}
.composition-studio{display:grid;gap:14px}.studio-ruler{display:flex;justify-content:space-between;padding:0 4px;color:color-mix(in srgb,var(--ink) 55%,transparent);font:700 11px/1 ui-monospace,monospace;letter-spacing:.14em}.studio-ruler::before{content:"01 / WORKING PROTOTYPE"}.studio-ruler::after{content:"360 · 768 · 1440"}.composition-studio .demo::after{content:"";position:absolute;right:18px;bottom:18px;width:24px;height:24px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);pointer-events:none}
.incident-console{display:grid;gap:14px;padding:18px;color:#e8fff7;background:#071713;border-radius:22px}.incident-console>header{display:flex;justify-content:space-between;gap:18px;align-items:end}.incident-console h2{margin:.25em 0}.incident-console dl{display:flex;gap:9px;margin:0}.incident-console dl div{min-width:92px;padding:11px;border:1px solid #355f52;border-radius:10px}.incident-console dt{font-size:11px}.incident-console dd{margin:5px 0 0;font-size:24px;font-weight:900}.incident-workspace{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(250px,.7fr);gap:12px}.incident-workspace>ol{display:grid;align-content:start;padding:0;margin:0;border:1px solid #355f52;border-radius:14px;list-style:none}.incident-workspace li+li{border-top:1px solid #355f52}.incident-workspace li>button{display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:center;width:100%;padding:15px;border:0;color:inherit;background:transparent;text-align:left}.incident-workspace li[aria-current="true"]>button{background:#173b32}.incident-workspace li.is-acknowledged{opacity:.52}.incident-workspace li i{width:10px;height:10px;border-radius:50%;background:#71d7ad}.incident-workspace li[data-severity="critical"] i{background:#ff6f61}.incident-workspace li[data-severity="warning"] i{background:#ffbf57}.incident-workspace li span{display:grid;gap:4px}.incident-workspace li em{font-size:11px;font-style:normal}.incident-workspace aside{display:grid;align-content:start;gap:13px;padding:20px;border-radius:14px;color:var(--ink);background:var(--paper)}.incident-workspace aside h3{margin:0;font-size:26px}.incident-workspace aside ol{display:grid;gap:7px;padding-left:20px}.incident-workspace output{min-height:22px;color:var(--accent);font-weight:900}@media(max-width:720px){.incident-console>header,.incident-workspace{grid-template-columns:1fr;display:grid}.incident-console dl{flex-wrap:wrap}}.workflow-compare{display:grid;grid-template-columns:minmax(230px,.55fr) minmax(0,1.45fr);gap:18px}.compare-stage{display:grid;gap:12px;min-width:0}.compare-stage>header{display:flex;justify-content:space-between;gap:16px;align-items:end}.compare-stage h2{margin:.2em 0}.compare-core{--compare-split:50%;min-width:0;padding:14px;clip-path:inset(0 calc(100% - var(--compare-split)) 0 0);outline:1px dashed var(--accent);outline-offset:-8px;transition:clip-path .25s,filter .25s}.compare-core[data-compare-channel="B"]{filter:hue-rotate(32deg) saturate(1.15)}.compare-controls{display:grid;align-content:start;gap:16px;padding:20px;border:1px solid var(--line);border-radius:24px 4px 24px 4px;background:var(--paper)}.compare-controls fieldset,.compare-controls>label{display:grid;gap:8px}.compare-controls input[type="range"]{width:100%}#workflowCompareShelf{display:grid;gap:6px;padding:0;margin:0;list-style:none}#workflowCompareShelf li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:9px;border-top:1px solid var(--line);font-size:12px}@media(max-width:900px){.workflow-compare{grid-template-columns:1fr}.compare-stage{order:-1}.compare-core{clip-path:none;border-left:8px solid var(--accent)}}.evidence-shell{--evidence-zoom:100;display:grid;gap:18px;padding:clamp(16px,4vw,26px);border:1px solid var(--line);border-radius:30px;background:linear-gradient(180deg,color-mix(in srgb,var(--secondary) 8%,transparent),color-mix(in srgb,var(--paper) 94%,transparent));box-shadow:var(--shadow)}.evidence-head{display:flex;justify-content:space-between;gap:18px;align-items:end}.evidence-head h2{margin:.2em 0}.evidence-tools{display:grid;gap:10px;justify-items:end}.evidence-tools output{padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-weight:900}.evidence-body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(230px,.55fr);gap:16px}.evidence-stage{display:grid;gap:12px;min-width:0}.evidence-ribbon{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.evidence-ribbon button{display:grid;gap:6px;min-height:110px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--paper);text-align:left}.evidence-ribbon button[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}.evidence-ribbon span{font:800 11px/1 ui-monospace,monospace;letter-spacing:.14em}.evidence-ribbon small{opacity:.72;line-height:1.5}.evidence-core-shell{min-width:0;padding:clamp(12px,3vw,20px);overflow:auto;border:1px solid var(--line);border-radius:24px;background:color-mix(in srgb,var(--paper) 92%,transparent)}.evidence-core-shell>*{display:block;width:calc(10000%/var(--evidence-zoom));max-width:none;transform:scale(calc(var(--evidence-zoom)/100));transform-origin:top left}.evidence-rail{display:grid;align-content:start;gap:14px;padding:18px;border-radius:22px;color:var(--paper);background:var(--ink)}.evidence-rail label{display:grid;gap:8px}.evidence-rail input,.evidence-rail select{width:100%;padding:10px;border:1px solid #ffffff2e;border-radius:10px;color:inherit;background:#ffffff12}.evidence-checklist,.evidence-log{display:grid;gap:8px;padding-left:18px;margin:0}.evidence-checklist li.is-active{color:var(--secondary);font-weight:900}.evidence-checklist li.is-done{color:var(--accent);font-weight:900}.evidence-log li{line-height:1.55}.evidence-shell[data-board-mode="proof"] .evidence-core-shell{outline:4px solid color-mix(in srgb,var(--accent) 32%,transparent);outline-offset:2px}.evidence-shell[data-board-mode="handoff"] .evidence-rail{background:color-mix(in srgb,var(--ink) 82%,#0a1512)}@media(max-width:920px){.evidence-body{grid-template-columns:1fr}.evidence-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.evidence-head{align-items:stretch;flex-direction:column}.evidence-tools{justify-items:start}.evidence-ribbon{grid-template-columns:1fr}.evidence-core-shell>*{width:100%;transform:none}}
</style>
</head>
<body data-aesthetic="magazine" data-composition="studio">
<main class="page">
<header class="mast"><div><span class="eyebrow">magazine / Tableau de traitement des incidents / BEGINNER</span><h1>Tableau de gestion des incidents du poste central de la serre</h1><p class="intro">Dans le contexte du tableau de bord du hall principal de la serre, réalisez un tableau de suivi des incidents : il comprend du contenu réel, des contrôles interactifs, un retour d’état clair et une mise en page adaptative à toutes les tailles.</p></div><span class="scenario">Console principale de la serre</span></header>
<div class="composition-studio"><div class="studio-ruler" aria-hidden="true"></div><section class="demo" aria-label="Zone interactive du tableau de bord de traitement des incidents du poste central des serres"><section id="evidenceShell" class="evidence-shell" data-board-mode="scan"><header class="evidence-head"><div><span class="eyebrow">Accueil de la serre / EVIDENCE BOARD</span><h2>Tableau de suivi de gestion des incidents</h2><p>Placer le cas principal dans le tableau de preuves, avec des cartes d’observation distinctes, des journaux et des changements de mode pour consigner le résultat actuel.</p></div><div class="evidence-tools"><div class="row"><button class="action primary" type="button" data-board-mode="scan">Scanner</button><button class="action" type="button" data-board-mode="proof">Vérification</button><button class="action" type="button" data-board-mode="handoff">Transfert</button></div><output id="evidenceStatus">En attente d’échantillonnage</output></div></header><div class="evidence-body"><section class="evidence-stage"><div class="evidence-ribbon"><button type="button" data-evidence-card="0" aria-pressed="true"><span>01</span><strong>Vue d’ensemble du poste principal de la serre</strong><small>Vérifier si les changements d’état sont visibles</small></button><button type="button" data-evidence-card="1" aria-pressed="false"><span>02</span><strong>Plan du comptoir principal de la serre</strong><small>Confirmer la cohérence entre l’entrée au clavier et le clic</small></button><button type="button" data-evidence-card="2" aria-pressed="false"><span>03</span><strong>Inspiration du poste principal de la serre</strong><small>Vérifiez si la disposition se replie sur les écrans étroits</small></button><button type="button" data-evidence-card="3" aria-pressed="false"><span>04</span><strong>Journal général de la serre</strong><small>Enregistrer la conclusion de la révision en cours</small></button></div><div id="evidenceCoreShell" class="evidence-core-shell"><div class="workflow-compare"><form id="workflowCompareControls" class="compare-controls"><fieldset><legend>Canal de comparaison</legend><label><input type="radio" name="workflowChannel" value="A" checked>A · Vue de surveillance du poste principal de la serre</label><label><input type="radio" name="workflowChannel" value="B">B · Vue de traitement du poste de serre</label></fieldset><label>pondération des seuils d’alerte<input id="workflowCompareWeight" type="range" min="10" max="90" value="50"><output id="workflowCompareWeightValue">50 point</output></label><label><input id="workflowCompareFreeze" type="checkbox">Geler la version actuelle</label><button id="workflowCompareCapture" class="action primary" type="button">panneau d’échantillonnage et d’application</button><ol id="workflowCompareShelf" aria-label="Enregistrement de version"></ol></form><section class="compare-stage"><header><span class="eyebrow">Poste central de serre COMPARE</span><h2>Comparaison de deux versions du poste de commandement de la serre</h2><output id="workflowCompareLive">Version A en attente d’échantillonnage</output></header><section id="workflowCore" class="workflow-core compare-core" data-compare-channel="A" style="--compare-split:50%"><!-- 11DZ_CORE_START:dashboards-admin-incident-board --><section class="incident-console"><header><div><span class="eyebrow">INCIDENT RESPONSE</span><h2>Table de commandement des interventions de confirmation clinique</h2></div><dl><div><dt>À confirmer</dt><dd id="incidentOpenCount">5</dd></div><div><dt>Confirmé</dt><dd id="incidentAckCount">0</dd></div></dl></header><div class="incident-workspace"><ol id="incidentQueue"><li data-incident-index="0" data-severity="critical" aria-current="true"><button type="button"><i aria-hidden="true"></i><span><b>Vue d’ensemble du poste principal de la serre</b><small>Groupe de garde de service</small></span><em>Critique</em></button></li><li data-incident-index="1" data-severity="warning"><button type="button"><i aria-hidden="true"></i><span><b>Plan du comptoir principal de la serre</b><small>Équipe de la plateforme</small></span><em>Avertissement</em></button></li><li data-incident-index="2" data-severity="notice"><button type="button"><i aria-hidden="true"></i><span><b>Inspiration du poste principal de la serre</b><small>Support sur site</small></span><em>Conseil</em></button></li><li data-incident-index="3" data-severity="critical"><button type="button"><i aria-hidden="true"></i><span><b>Journal général de la serre</b><small>Groupe de garde de service</small></span><em>Critique</em></button></li><li data-incident-index="4" data-severity="warning"><button type="button"><i aria-hidden="true"></i><span><b>Collaboration du poste principal de la serre</b><small>Équipe de la plateforme</small></span><em>Avertissement</em></button></li></ol><aside><span class="eyebrow">RESPONSE PLAYBOOK</span><h3 id="incidentTitle">Vue d’ensemble du poste principal de la serre</h3><p id="incidentOwner">Responsable : équipe de garde 1</p><ol><li>Confirmer l’étendue de l’impact</li><li>Responsable des mesures prises</li><li>Récupération synchronisée de l’état</li></ol><button id="incidentAcknowledge" class="action primary" type="button" data-core-bridge="dashboards-admin-incident-board">Confirmer et prendre en charge</button><output id="incidentResult">En attente de confirmation du personnel de service</output></aside></div></section><!-- 11DZ_CORE_END --></section></section></div></div></section><aside class="evidence-rail"><label>Zoom du canevas<input id="evidenceZoom" type="range" min="88" max="128" value="100"><output id="evidenceZoomValue">100%</output></label><label>Prélèvement actuel<select id="evidenceStep"><option value="0">Vue d’ensemble du poste principal de la serre</option><option value="1">Plan du comptoir principal de la serre</option><option value="2">Inspiration du poste principal de la serre</option><option value="3">Journal général de la serre</option></select></label><ul id="evidenceChecklist" class="evidence-checklist"><li>Vue d’ensemble du poste principal de la serre</li><li>Plan du comptoir principal de la serre</li><li>Inspiration du poste principal de la serre</li><li>Journal général de la serre</li></ul><button id="evidenceCapture" class="action primary" type="button">preuve d’écriture</button><ol id="evidenceLog" class="evidence-log"><li>Preuve non encore enregistrée</li></ol></aside></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:dashboards-admin-incident-board */
const incidentData=[{"label":"Vue d’ensemble du poste principal de la serre","severity":"critical","owner":"Groupe de garde de service"},{"label":"Plan du comptoir principal de la serre","severity":"warning","owner":"Équipe de la plateforme"},{"label":"Inspiration du poste principal de la serre","severity":"notice","owner":"Support sur site"},{"label":"Journal général de la serre","severity":"critical","owner":"Groupe de garde de service"},{"label":"Collaboration du poste principal de la serre","severity":"warning","owner":"Équipe de la plateforme"}];const incidentItems=[...document.querySelectorAll('[data-incident-index]')];let incidentActive=0;const incidentAcknowledged=new Set();function selectIncident(index){incidentActive=index;incidentItems.forEach((item,itemIndex)=>{if(itemIndex===index)item.setAttribute('aria-current','true');else item.removeAttribute('aria-current');});document.querySelector('#incidentTitle').textContent=incidentData[index].label;document.querySelector('#incidentOwner').textContent='Responsable :'+incidentData[index].owner;document.querySelector('#incidentAcknowledge').disabled=incidentAcknowledged.has(index);document.querySelector('#incidentAcknowledge').textContent=incidentAcknowledged.has(index)?'Confirmé':'Confirmer et prendre en charge';announce('Événement sélectionné '+incidentData[index].label);}incidentItems.forEach((item,index)=>item.querySelector('button').addEventListener('click',()=>selectIncident(index)));document.querySelector('#incidentAcknowledge').addEventListener('click',()=>{incidentAcknowledged.add(incidentActive);incidentItems[incidentActive].classList.add('is-acknowledged');document.querySelector('#incidentOpenCount').textContent=incidentItems.length-incidentAcknowledged.size;document.querySelector('#incidentAckCount').textContent=incidentAcknowledged.size;document.querySelector('#incidentResult').textContent='Pris en charge · '+incidentData[incidentActive].owner;selectIncident(incidentActive);});
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"dashboards-admin-incident-board","selector":"[data-core-bridge=\"dashboards-admin-incident-board\"]","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 workflowCompareCore=document.querySelector('#workflowCore');const workflowCompareWeight=document.querySelector('#workflowCompareWeight');const workflowCompareState={channel:'A',weight:50,frozen:false,snapshots:[]};function workflowCompareFingerprint(){const controls=[...workflowCompareCore.querySelectorAll('input,select,textarea')];const outputs=[...workflowCompareCore.querySelectorAll('output,[role="status"],strong')].map(node=>node.textContent.trim()).filter(Boolean);return {controlValues:controls.map(control=>control.type==='checkbox'||control.type==='radio'?control.checked:control.value),summary:outputs.slice(0,4).join(' / '),nodes:workflowCompareCore.querySelectorAll('*').length};}function workflowCompareDrive(){workflowCompareCore.dataset.compareChannel=workflowCompareState.channel;workflowCompareCore.style.setProperty('--compare-split',workflowCompareState.weight+'%');document.querySelector('#workflowCompareWeightValue').textContent=workflowCompareState.weight+' point';document.querySelector('#workflowCompareLive').textContent=workflowCompareState.channel+' Version · '+workflowCompareState.weight+' point'+(workflowCompareState.frozen?' · figé':'');announce('Le poste central de la serre est en cours de consultation '+workflowCompareState.channel+' Version');}function workflowCompareCapture(source){const bridge=workflowBridgeActivate();const snapshot={...workflowCompareFingerprint(),channel:workflowCompareState.channel,weight:workflowCompareState.weight,source,bridge:bridge.summary};workflowCompareState.snapshots.push(snapshot);const item=document.createElement('li');item.innerHTML='<b>'+snapshot.channel+'</b><span>'+(snapshot.summary||snapshot.bridge)+'</span><small>'+snapshot.weight+' point · '+snapshot.bridge+'</small>';document.querySelector('#workflowCompareShelf').prepend(item);announce('échantillonné '+snapshot.channel+' Version et application du panneau · '+bridge.summary);}document.querySelectorAll('[name="workflowChannel"]').forEach(input=>input.addEventListener('change',()=>{workflowCompareState.channel=input.value;workflowCompareDrive();}));workflowCompareWeight.addEventListener('input',()=>{workflowCompareState.weight=Number(workflowCompareWeight.value);workflowCompareDrive();});document.querySelector('#workflowCompareFreeze').addEventListener('change',event=>{workflowCompareState.frozen=event.currentTarget.checked;workflowCompareDrive();});document.querySelector('#workflowCompareCapture').addEventListener('click',()=>workflowCompareCapture('Échantillonnage du bouton'));workflowCompareCore.addEventListener('dblclick',()=>workflowCompareCapture('Double-clic sur la vue principale'));workflowCompareDrive();
workflowBridgeReset();
const evidenceShell=document.querySelector('#evidenceShell');const evidenceStatus=document.querySelector('#evidenceStatus');const evidenceZoom=document.querySelector('#evidenceZoom');const evidenceZoomValue=document.querySelector('#evidenceZoomValue');const evidenceStep=document.querySelector('#evidenceStep');const evidenceChecklistItems=[...document.querySelectorAll('#evidenceChecklist li')];const evidenceCards=[...document.querySelectorAll('[data-evidence-card]')];const evidenceLog=document.querySelector('#evidenceLog');const evidenceModeButtons=[...evidenceShell.querySelectorAll('button[data-board-mode]')];const evidenceNotes=["Vue d’ensemble du poste principal de la serre","Plan du comptoir principal de la serre","Inspiration du poste principal de la serre","Journal général de la serre"];const evidenceCore=document.querySelector('#workflowCore');let evidenceCaptures=0;function evidenceSetCard(index){evidenceCards.forEach((card,cardIndex)=>{const active=cardIndex===index;card.setAttribute('aria-pressed',String(active));});evidenceChecklistItems.forEach((item,itemIndex)=>{item.classList.toggle('is-active',itemIndex===index);item.classList.toggle('is-done',itemIndex<evidenceCaptures);});}function evidenceRender(reason){const version=evidenceCore?.dataset.workflowVersion||'0';const zoom=Number(evidenceZoom.value);const active=Math.min(evidenceNotes.length-1,Number(evidenceStep.value)||0);evidenceShell.style.setProperty('--evidence-zoom',String(zoom));evidenceZoomValue.textContent=zoom+'%';evidenceSetCard(active);evidenceStatus.textContent=reason+' · Version de base '+version;}evidenceModeButtons.forEach(button=>button.addEventListener('click',()=>{evidenceModeButtons.forEach(item=>item.classList.toggle('primary',item===button));evidenceShell.dataset.boardMode=button.dataset.boardMode;evidenceRender('Basculé vers'+button.textContent);announce('Mode preuve :'+button.textContent);}));evidenceCards.forEach((card,index)=>card.addEventListener('click',()=>{evidenceStep.value=String(index);evidenceRender('Carte d’observation basculée');announce('Carte d’observation :'+evidenceNotes[index]);}));evidenceZoom.addEventListener('input',()=>{evidenceRender('Le zoom du canevas a été mis à jour');announce('Observation de l’échelle '+evidenceZoom.value+'%');});evidenceStep.addEventListener('change',()=>{const index=Number(evidenceStep.value)||0;evidenceRender('Échantillonnage activé');announce('Échantillon actuel :'+evidenceNotes[index]);});document.querySelector('#evidenceCapture').addEventListener('click',()=>{const index=Math.min(evidenceNotes.length-1,Number(evidenceStep.value)||0);const note=evidenceNotes[index];const version=evidenceCore?.dataset.workflowVersion||'0';evidenceCaptures+=1;const item=document.createElement('li');item.textContent='preuve '+evidenceCaptures+' · '+note+' · Version de base '+version;const empty=evidenceLog.querySelector('li')?.textContent==='Preuve non encore enregistrée';if(empty)evidenceLog.replaceChildren(item);else evidenceLog.prepend(item);while(evidenceLog.children.length>6)evidenceLog.lastElementChild.remove();evidenceRender('Preuve enregistrée '+evidenceCaptures);announce('Preuve enregistrée '+evidenceCaptures+' · '+note);});evidenceCore?.addEventListener('focusin',()=>evidenceRender('L’élément principal a le focus'));evidenceCore?.addEventListener('click',()=>evidenceRender('Interaction de l’exemple principal'));evidenceRender('En attente d’échantillonnage');
</script>
</body>
</html>