Dashboard and Admin Interfaces
Greenhouse Disposal Pipeline Board

Complete a workflow pipeline board in a greenhouse operations scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts.
Dashboard and Admin Interfacesprocess pipeline panelHTMLCSS GridJavaScript
With JavaScript enabled, you can edit, run, and save this example. The fixed source is as follows:
<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Greenhouse Disposal Pipeline Board</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:18px;border:3px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--ink)}.stack{display:grid;gap:12px}.row{display:flex;flex-wrap:wrap;gap:8px}.action{min-height:42px;padding:8px 13px;border:3px solid var(--ink);background:var(--paper);font-weight:900}.action.primary,.action.is-active{color:var(--paper);background:var(--ink)}.status{min-height:24px;padding:8px;color:var(--paper);background:var(--ink);font-weight:900}.metric{font-size:clamp(34px,8vw,76px);font-weight:900;letter-spacing:-.08em}.muted{font-weight:600}.chip{padding:5px 8px;border:2px solid var(--ink);font-weight:900}.meter{height:14px;border:3px solid var(--ink)}.meter>i{display:block;height:100%;background:var(--ink)}
    .composition-index{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px}.index-mark{display:grid;align-content:space-between;width:76px;padding:16px 10px;border:1px solid var(--line);color:var(--accent);background:color-mix(in srgb,var(--paper) 82%,transparent);text-align:center}.index-mark strong{font:900 34px/1 ui-monospace,monospace}.index-mark span{writing-mode:vertical-rl;font:800 10px/1.2 ui-monospace,monospace;letter-spacing:.18em}.composition-index .demo{grid-column:1;grid-row:1}.composition-index::before{content:"";position:absolute;left:-12px;top:38px;width:5px;height:45%;background:linear-gradient(var(--accent),var(--secondary))}@media(max-width:700px){.composition-index{grid-template-columns:1fr}.index-mark{grid-row:1;width:auto;grid-template-columns:auto 1fr}.index-mark span{writing-mode:horizontal-tb}.composition-index .demo{grid-row:2}}
    .pipeline-console{display:grid;gap:16px}.pipeline-console>header,.pipeline-console>footer{display:flex;justify-content:space-between;gap:16px;align-items:end}.pipeline-console h2{margin:.25em 0}.pipeline-console>header>output{font:800 13px/1.4 ui-monospace,monospace}.pipeline-stages{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:8px;overflow:auto}.pipeline-stages>section{min-height:310px;border-top:7px solid var(--stage-color,var(--accent));background:color-mix(in srgb,var(--secondary) 10%,var(--paper))}.pipeline-stages>section:nth-child(2){--stage-color:#4c72b0}.pipeline-stages>section:nth-child(3){--stage-color:#b8792f}.pipeline-stages>section:nth-child(4){--stage-color:#3e8c63}.pipeline-stages section>header{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:13px}.pipeline-stages h3{margin:0;font-size:14px}.pipeline-stages section>div{display:grid;gap:8px;padding:0 9px 12px}.pipeline-stages [data-pipeline-card]{display:grid;grid-template-columns:1fr auto;gap:6px;width:100%;padding:13px;border:1px solid var(--line);border-radius:4px;background:var(--paper);text-align:left}.pipeline-stages [data-pipeline-card][aria-pressed="true"]{outline:3px solid var(--accent);outline-offset:1px}.pipeline-stages [data-pipeline-card] small{grid-column:1}.pipeline-stages [data-pipeline-card] i{grid-column:2;grid-row:1/3;align-self:center;font-style:normal}.pipeline-console>footer{padding:15px;border-left:6px solid var(--accent);background:var(--paper)}.pipeline-console>footer div{display:grid;gap:4px}.pipeline-console>footer .action{flex:none}@media(max-width:720px){.pipeline-console>header,.pipeline-console>footer{align-items:stretch;flex-direction:column}.pipeline-stages{grid-template-columns:repeat(4,230px)}}.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="monochrome" data-composition="field-index">
  <main class="page">
    <header class="mast"><div><span class="eyebrow">monochrome / Pipeline Board / INTERMEDIATE</span><h1>Greenhouse Disposal Pipeline Board</h1><p class="intro">Complete a workflow pipeline board in a greenhouse operations scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts.</p></div><span class="scenario">Greenhouse Disposition Line</span></header>
    <div class="composition-index"><section class="demo" aria-label="Greenhouse Response Pipeline Panel Interactive Area"><section id="evidenceShell" class="evidence-shell" data-board-mode="scan"><header class="evidence-head"><div><span class="eyebrow">Greenhouse Triage Line / EVIDENCE BOARD</span><h2>Pipeline Board Observation Board</h2><p>Place the main case into an evidence board, using separate observation cards, logs, and mode-switch records to track the current result.</p></div><div class="evidence-tools"><div class="row"><button class="action primary" type="button" data-board-mode="scan">Scan</button><button class="action" type="button" data-board-mode="proof">Verify</button><button class="action" type="button" data-board-mode="handoff">Handoff</button></div><output id="evidenceStatus">Awaiting Sampling</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>Greenhouse response line inspiration</strong><small>Check whether the status change is visible</small></button><button type="button" data-evidence-card="1" aria-pressed="false"><span>02</span><strong>Greenhouse Response Line Record</strong><small>Confirm keyboard and click entry points are consistent</small></button><button type="button" data-evidence-card="2" aria-pressed="false"><span>03</span><strong>Greenhouse response line collaboration</strong><small>Check whether the layout falls back on narrow screens</small></button><button type="button" data-evidence-card="3" aria-pressed="false"><span>04</span><strong>Greenhouse Response Line Progress</strong><small>Record current review conclusion</small></button></div><div id="evidenceCoreShell" class="evidence-core-shell"><div class="workflow-compare"><form id="workflowCompareControls" class="compare-controls"><fieldset><legend>Reference Channel</legend><label><input type="radio" name="workflowChannel" value="A" checked>A · Greenhouse disposal line monitoring view</label><label><input type="radio" name="workflowChannel" value="B">B · Greenhouse Handling Line Handling View</label></fieldset><label>Alert threshold weight<input id="workflowCompareWeight" type="range" min="10" max="90" value="50"><output id="workflowCompareWeightValue">50 points</output></label><label><input id="workflowCompareFreeze" type="checkbox">Freeze current version</label><button id="workflowCompareCapture" class="action primary" type="button">Sampling and Apply Panel</button><ol id="workflowCompareShelf" aria-label="Version Sampling Record"></ol></form><section class="compare-stage"><header><span class="eyebrow">Greenhouse Handling Line COMPARE</span><h2>Dual-version comparison of greenhouse response workflow</h2><output id="workflowCompareLive">Version A waiting for sampling</output></header><section id="workflowCore" class="workflow-core compare-core" data-compare-channel="A" style="--compare-split:50%"><!-- 11DZ_CORE_START:dashboards-admin-pipeline-board --><section class="pipeline-console"><header><div><span class="eyebrow">STAGE PIPELINE</span><h2>Greenhouse response line pipeline</h2></div><output id="pipelineSummary">Total 0 · 4 workflows</output></header><div id="pipelineStages" class="pipeline-stages"><section data-pipeline-stage="0"><header><span>01</span><h3>Lead</h3><output>0</output></header><div><button type="button" data-pipeline-card="1" aria-pressed="true"><b>Greenhouse Response Line Record</b><small>Weight 31</small><i aria-hidden="true">→</i></button><button type="button" data-pipeline-card="2" aria-pressed="false"><b>Greenhouse response line collaboration</b><small>Weight 44</small><i aria-hidden="true">→</i></button><button type="button" data-pipeline-card="3" aria-pressed="false"><b>Greenhouse Response Line Progress</b><small>Weight 57</small><i aria-hidden="true">→</i></button></div></section><section data-pipeline-stage="1"><header><span>02</span><h3>Assessment</h3><output>0</output></header><div><button type="button" data-pipeline-card="0" aria-pressed="false"><b>Greenhouse response line inspiration</b><small>Weight 18</small><i aria-hidden="true">→</i></button></div></section><section data-pipeline-stage="2"><header><span>03</span><h3>Plan</h3><output>0</output></header><div></div></section><section data-pipeline-stage="3"><header><span>04</span><h3>Completed</h3><output>0</output></header><div></div></section></div><footer><div><span>Current workflow</span><strong id="pipelineActive">Greenhouse response line inspiration</strong></div><button id="pipelineAdvance" class="action primary" type="button" data-core-bridge="dashboards-admin-pipeline-board">Advance to the next stage</button><button id="pipelineRestart" class="action" type="button">Reset pipeline</button></footer></section><!-- 11DZ_CORE_END --></section></section></div></div></section><aside class="evidence-rail"><label>Canvas Zoom<input id="evidenceZoom" type="range" min="88" max="128" value="100"><output id="evidenceZoomValue">100%</output></label><label>Current sample<select id="evidenceStep"><option value="0">Greenhouse response line inspiration</option><option value="1">Greenhouse Response Line Record</option><option value="2">Greenhouse response line collaboration</option><option value="3">Greenhouse Response Line Progress</option></select></label><ul id="evidenceChecklist" class="evidence-checklist"><li>Greenhouse response line inspiration</li><li>Greenhouse Response Line Record</li><li>Greenhouse response line collaboration</li><li>Greenhouse Response Line Progress</li></ul><button id="evidenceCapture" class="action primary" type="button">Write evidence</button><ol id="evidenceLog" class="evidence-log"><li>Evidence not yet entered</li></ol></aside></div></section><p id="status" class="status" role="status" aria-live="polite"></p></section><aside class="index-mark" aria-hidden="true"><strong>05</strong><span>Greenhouse Dispatch Line FIELD INDEX</span></aside></div>
  </main>
  <script>
    'use strict';
    const statusOutput = document.querySelector('#status');
    const announce = message => { statusOutput.textContent = message; };
    /* 11DZ_CORE_SCRIPT_START:dashboards-admin-pipeline-board */
const pipelineCards=[{"label":"Greenhouse response line inspiration","value":18,"stage":1},{"label":"Greenhouse Response Line Record","value":31,"stage":0},{"label":"Greenhouse response line collaboration","value":44,"stage":0},{"label":"Greenhouse Response Line Progress","value":57,"stage":0}];const pipelineStageLabels=["Lead","Assessment","Plan","Completed"];let pipelineActive=0;const pipelineStages=[...document.querySelectorAll('[data-pipeline-stage]')];function renderPipeline(){pipelineStages.forEach(stage=>stage.querySelector(':scope>div').replaceChildren());pipelineCards.forEach((card,index)=>{const button=document.createElement('button');button.type='button';button.dataset.pipelineCard=String(index);button.setAttribute('aria-pressed',String(index===pipelineActive));button.innerHTML='<b>'+card.label+'</b><small>Weight '+card.value+'</small><i aria-hidden="true">→</i>';button.addEventListener('click',()=>{pipelineActive=index;renderPipeline();});pipelineStages[card.stage].querySelector(':scope>div').append(button);});pipelineStages.forEach((stage,index)=>{stage.querySelector('output').textContent=pipelineCards.filter(card=>card.stage===index).length;});const active=pipelineCards[pipelineActive];document.querySelector('#pipelineActive').textContent=active.label+' · '+pipelineStageLabels[active.stage];document.querySelector('#pipelineSummary').textContent='Total Value '+pipelineCards.reduce((sum,card)=>sum+card.value,0)+' · '+pipelineCards.length+' processes';document.querySelector('#pipelineAdvance').disabled=active.stage===pipelineStages.length-1;announce(active.label+' Current location '+pipelineStageLabels[active.stage]);}document.querySelector('#pipelineAdvance').addEventListener('click',()=>{const active=pipelineCards[pipelineActive];active.stage=Math.min(pipelineStages.length-1,active.stage+1);renderPipeline();});document.querySelector('#pipelineRestart').addEventListener('click',()=>{pipelineCards.forEach((card,index)=>{card.stage=index===0?1:0;});pipelineActive=0;renderPipeline();});renderPipeline();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"dashboards-admin-pipeline-board","selector":"[data-core-bridge=\"dashboards-admin-pipeline-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+' · Core Version '+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?' · Frozen':'');announce('Greenhouse Response Line is Viewing '+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('sampled '+snapshot.channel+' Version and apply panel · '+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('Button Sampling'));workflowCompareCore.addEventListener('dblclick',()=>workflowCompareCapture('Main view double-click'));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=["Greenhouse response line inspiration","Greenhouse Response Line Record","Greenhouse response line collaboration","Greenhouse Response Line Progress"];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+' · Core Version '+version;}evidenceModeButtons.forEach(button=>button.addEventListener('click',()=>{evidenceModeButtons.forEach(item=>item.classList.toggle('primary',item===button));evidenceShell.dataset.boardMode=button.dataset.boardMode;evidenceRender('Switched to'+button.textContent);announce('Evidence mode:'+button.textContent);}));evidenceCards.forEach((card,index)=>card.addEventListener('click',()=>{evidenceStep.value=String(index);evidenceRender('Switched to observation card');announce('Observation card:'+evidenceNotes[index]);}));evidenceZoom.addEventListener('input',()=>{evidenceRender('Canvas zoom updated');announce('Observe scaling '+evidenceZoom.value+'%');});evidenceStep.addEventListener('change',()=>{const index=Number(evidenceStep.value)||0;evidenceRender('Sampling switched');announce('Current sample:'+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='Evidence '+evidenceCaptures+' · '+note+' · Core Version '+version;const empty=evidenceLog.querySelector('li')?.textContent==='Evidence not yet entered';if(empty)evidenceLog.replaceChildren(item);else evidenceLog.prepend(item);while(evidenceLog.children.length>6)evidenceLog.lastElementChild.remove();evidenceRender('Evidence written '+evidenceCaptures);announce('Evidence written '+evidenceCaptures+' · '+note);});evidenceCore?.addEventListener('focusin',()=>evidenceRender('Main Case Gets Focus'));evidenceCore?.addEventListener('click',()=>evidenceRender('Primary example interaction'));evidenceRender('Awaiting Sampling');
  </script>
</body>
</html>