Compare eleven hours of recommendations with a three-hour proposal and inspect what completion evidence establishes
HTML for this example
Select the code and use your copy shortcut. Changes in this preview are temporary.
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Mailbox improvement · decide within the capacity</title><style>*{box-sizing:border-box}body{margin:0;background:#f0f3ee;color:#384b36;font:16px/1.55 system-ui,sans-serif}main{max-width:960px;margin:auto;padding:24px}h1{font-size:34px;line-height:1.16}h2{font-size:24px}h3{font-size:19px}.eyebrow{color:#718567;letter-spacing:.06em}.card{padding:20px;margin:18px 0;background:white;border:1px solid #c8d3bf;border-radius:6px}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,textarea,select{font:inherit;color:inherit}button{min-height:44px;padding:10px 14px;background:white;border:1px solid #748d64;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#5b7846;color:white}button:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b97c29;outline-offset:3px}.totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.totals>p{padding:16px;background:#eaf3e4}.totals strong{display:block;font-size:24px}.actions{display:grid;gap:12px}.actions button{text-align:left;background:#f5f8ef}.actions strong{display:block}.gap{background:#fff7e3;border-left:6px solid #b78d35}label{display:block;font-weight:650;margin:14px 0 6px}textarea,select{width:100%;max-width:100%;min-width:0;padding:10px;border:1px solid #99ac8d;border-radius:4px;background:white}textarea{min-height:95px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#7c541c}footer{margin:24px 0;color:#6d8163}[hidden]{display:none!important}@media(max-width:560px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.totals{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">FICTIONAL SUPPORT-MAILBOX REVIEW · THREE-HOUR PLANNING LIMIT</p><h1>Keep the recommendation you have not adopted</h1><section class="card"><h2>O1 · observation and objective</h2><p>Supplied sample handoff notes use two labels for the same request type, confusing the reviewer. Objective: make request classification clearer during handoff.</p><div class="totals"><p>All recommendations<strong id="all-total">11 hours</strong>2 + 8 + 1</p><p>Proposed adopted work<strong id="adopted-total">3 hours</strong>A1 + A3 = 2 + 1</p><p>Available capacity<strong>3 hours</strong>Illustrative planning limit</p></div><p>Estimates are exercise inputs, not staff commitments or evidence of approved, achievable work.</p></section><div class="tabs" aria-label="Recommendation view"><button id="all" type="button" aria-pressed="true">All recommendations</button><button id="adopted" type="button" aria-pressed="false">Proposed adopted plan</button><button id="deferred" type="button" aria-pressed="false">Deferred</button></div><p id="view-count" role="status">3 recommendations shown</p><nav id="actions" class="actions" aria-label="Recommendation records"></nav><section class="card" aria-live="polite"><h2 id="action-title">A1 · agree one label and update routing reference</h2><p id="decision-out">Proposed Adopt · 2 hours.</p><p id="reason-out">Clarifies the reference within the supplied capacity.</p><p id="dependency-out">Actual owner, wording and date need agreement.</p></section><section class="card gap"><h2>Two different checkpoints</h2><div class="tabs"><button id="implementation" type="button" aria-pressed="true">Implementation</button><button id="effectiveness" type="button" aria-pressed="false">Effectiveness</button></div><h3 id="checkpoint-title">Model implementation evidence · R2</h3><p id="checkpoint">Routing-reference version R2 exists as the model checkpoint. Inspect whether it contains the intended label.</p><p id="checkpoint-limit">A revised document exists. No evidence of correct later use is supplied.</p><p>Owner and timing of the later review remain to agree. No effectiveness result, rollout or external agreement is created here.</p></section><section class="card"><h2>Your decision and evidence questions</h2><div id="fields"></div><label for="decision">Proposed local decision · required</label><select id="decision"><option value="">Choose a proposal</option><option>Adopt</option><option>Adapt</option><option>Defer</option></select><div class="tabs"><button id="build" type="button">Build plan review</button><button id="reset" type="button">Reset typed work</button></div><p id="status" role="status"></p><section id="confirm" hidden><h3>Clear all eleven planning fields?</h3><div class="tabs"><button id="keep" type="button">Keep my plan</button><button id="clear" type="button">Clear typed work</button></div></section><section id="review" class="card copy" hidden><h3 id="own-decision"></h3><div id="copy"></div><p>User-proposed decision only. No other person's adoption, owner agreement or effectiveness is established.</p></section></section><footer>Temporary plan review only. No live mailbox, task assignment, saved project record or approval action. Retain deferred work and its reason for reconsideration.</footer></main><script>'use strict';const $=id=>document.getElementById(id),items=[{id:'a1',title:'A1 · agree one label and update routing reference',effort:2,decision:'Adopt',reason:'Clarifies the reference within the supplied capacity.',dependency:'Actual owner, wording and date need agreement.'},{id:'a2',title:'A2 · automate routing',effort:8,decision:'Defer',reason:'Eight hours exceeds the current three-hour allocation. Feasibility remains unresolved.',dependency:'Retain for feasibility review and additional capacity; no automation commitment.'},{id:'a3',title:'A3 · refresh examples explaining the label',effort:1,decision:'Adopt after A1',reason:'Examples need to use the agreed label.',dependency:'Depends on A1’s wording first. Actual owner and date still need agreement.'}];let view='all';function list(){const rows=items.filter(x=>view==='all'||view==='adopted'&&x.decision.startsWith('Adopt')||view==='deferred'&&x.decision==='Defer');$('actions').replaceChildren();for(const item of rows){const b=document.createElement('button');b.type='button';b.id=item.id;const h=document.createElement('strong');h.textContent=item.title;b.append(h,document.createTextNode('Proposed '+item.decision+' · '+item.effort+' hours'));b.addEventListener('click',()=>{for(const[key,value]of [['action-title',item.title],['decision-out','Proposed '+item.decision+' · '+item.effort+' hours.'],['reason-out',item.reason],['dependency-out',item.dependency]])$(key).textContent=value;});$('actions').append(b);}$('view-count').textContent=rows.length+' recommendations shown';for(const id of ['all','adopted','deferred'])$(id).setAttribute('aria-pressed',String(id===view));}for(const id of ['all','adopted','deferred'])$(id).addEventListener('click',()=>{view=id;list();});list();for(const id of ['implementation','effectiveness'])$(id).addEventListener('click',()=>{const impl=id==='implementation';$('implementation').setAttribute('aria-pressed',String(impl));$('effectiveness').setAttribute('aria-pressed',String(!impl));$('checkpoint-title').textContent=impl?'Model implementation evidence · R2':'Proposed effectiveness check · no result';$('checkpoint').textContent=impl?'Routing-reference version R2 exists as the model checkpoint. Inspect whether it contains the intended label.':'After rollout, examine whether reviewers classify a new permitted sample consistently using the revised reference.';$('checkpoint-limit').textContent=impl?'A revised document exists. No evidence of correct later use is supplied.':'Later-use evidence and sample results are absent. Document completion alone does not establish effectiveness.';});const fields=[['objective','Observation and objective · required'],['recommendations','Recommendations and effort estimates'],['capacity','Available capacity and unit'],['reason','Decision rationale'],['dependency','Dependencies and deferred work'],['owner','Actual owner agreement, if supplied'],['date','Actual agreed timing, if supplied'],['implementation-note','Implementation check and evidence'],['effectiveness-note','Effectiveness question and later evidence, if supplied'],['notes','Review notes']];for(const[id,label]of fields){const l=document.createElement('label'),t=document.createElement('textarea');l.htmlFor=id;l.textContent=label;t.id=id;$('fields').append(l,t);}const ids=fields.map(x=>x[0]).concat('decision');for(const id of ids)$(id).addEventListener('input',()=>{$('review').hidden=true;$('status').textContent='Planning notes changed. Build again to review current wording.';});$('build').addEventListener('click',()=>{const missing=['objective','decision'].filter(id=>!$(id).value.trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete: '+missing.map(id=>id==='objective'?'observation/objective':'proposed decision').join(', ')+'.';return;}$('own-decision').textContent='Proposed '+$('decision').value;$('copy').replaceChildren();for(const[id,title]of fields){const h=document.createElement('h3'),p=document.createElement('p');h.textContent=title;p.textContent=$(id).value.trim()||'Not supplied.';$('copy').append(h,p);}$('review').hidden=false;$('status').textContent='Plan review assembled from supplied words.';});$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirm').hidden=true;$('reset').focus();});$('clear').addEventListener('click',()=>{for(const id of ids)$(id).value='';$('review').hidden=true;$('confirm').hidden=true;$('status').textContent='Eleven planning fields cleared; original recommendations and checkpoints unchanged.';$('objective').focus();});</script></body></html>