An intake-transition plan with requester/reviewer impacts and three distinct simulated usage records
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>Equipment requests · transition and use review</title><style>*{box-sizing:border-box}body{margin:0;background:#f4f0e9;color:#413b33;font:16px/1.65 system-ui,sans-serif}main{max-width:1040px;margin:auto;padding:28px}h1{font:700 clamp(32px,5vw,48px)/1.15 Georgia,serif}h2{font-size:24px}h3{font-size:19px}.panel{padding:22px;background:#fffdf8;border:1px solid #c5bba9;margin:22px 0}.banner{padding:20px;background:#635645;color:#fff}.columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}.record{padding:16px;background:#efe8db;margin:14px 0;border-left:4px solid #8c7759}.question{background:#e8eee4;border-color:#6e845c}.controls{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,textarea{font:inherit}button{min-height:44px;border:1px solid #8d7f69;background:#fffdf8;color:inherit;border-radius:4px;padding:10px 14px;cursor:pointer}button[aria-pressed=true]{background:#635645;color:#fff}button:focus-visible,textarea:focus-visible{outline:3px solid #a96227;outline-offset:3px}label{display:block;font-weight:650;margin:14px 0 6px}textarea{display:block;width:100%;min-height:115px;padding:10px;border:1px solid #9a8b76;color:inherit;background:#fff;resize:vertical}p,h1,h2,h3,button,label{overflow-wrap:break-word}footer{margin:26px 0}[hidden]{display:none!important}@media(max-width:600px){main{padding:16px}.panel{padding:16px}.columns{grid-template-columns:1fr}.controls button{flex:1 1 160px}}</style></head><body><main><p>ORIGINAL FICTIONAL PROPOSAL · NO ACTUAL ADOPTION FINDINGS</p><h1>What changes in the next equipment request?</h1><p class="banner">Proposed: move unstructured email requests into a shared register with item ID, needed date and request owner before review. Actual business purpose, approval, effective date and access arrangements remain <strong>to confirm</strong>.</p>
<section class="panel"><h2>Task-level impact</h2><div class="controls" role="group" aria-label="Affected group"><button id="requesters" type="button" aria-pressed="true">Requesters</button><button id="reviewers" type="button" aria-pressed="false">Reviewers</button></div><h3 id="group-title"></h3><div class="columns"><article class="record"><h3>Existing work</h3><p id="old-work"></p></article><article class="record"><h3>Proposed work</h3><p id="new-work"></p></article></div><p id="support" class="record question"></p><p>Before introduction, agree the purpose, authorization, timing, access and exception route. Keep or withdraw the previous process according to the actual decision.</p></section>
<section class="panel"><h2>Introduction activity and ordinary use</h2><div class="controls" role="group" aria-label="Review view"><button id="activity" type="button" aria-pressed="true">Activity-only status</button><button id="evidence" type="button" aria-pressed="false">Evidence-of-use review</button></div><div id="activity-view"><article class="record"><h3>Announcement · draft exists</h3><p>Wording is available for review. Sending, reading and agreement are not established.</p></article><article class="record"><h3>Practice exercise · planned</h3><p>An activity is proposed. No attendance or demonstrated use is established.</p></article><article class="record"><h3>Ordinary request use · not observed</h3><p>No actual ordinary-use evidence is supplied.</p></article><p>An announcement or exercise records an activity. Neither automatically establishes use for real requests.</p></div><div id="evidence-view" hidden><h3>Three simulated request records</h3><p>These invented teaching cases are not actual staff findings or a population sample. No organizational adoption rate can be calculated from them.</p><div class="controls" role="group" aria-label="Simulated request case"><button id="case-U1" type="button" aria-pressed="true">U1 · fields present</button><button id="case-U2" type="button" aria-pressed="false">U2 · email only</button><button id="case-U3" type="button" aria-pressed="false">U3 · date blank</button></div><h3 id="case-title"></h3><article class="record"><h3>Supplied simulated record</h3><p id="case-record"></p></article><article class="record question"><h3>Proposed review response</h3><p id="follow-up"></p></article><p id="case-limit"></p><p>Assign an actual follow-up owner and review point through the team's process. After support changes, inspect subsequent permitted records. Transfer ongoing support only after ownership is agreed.</p></div></section>
<section class="panel"><h2>Your impact and follow-up scaffold</h2><p>These fields start blank. Record actual decisions and evidence through your agreed process; this page does not launch a register.</p><div id="fields"></div><p><button id="reset" type="button">Clear my plan notes</button></p><div id="confirmation" hidden><p>Clear all six fields? The proposal, selected group and simulated cases stay unchanged.</p><div class="controls"><button id="clear" type="button">Clear typed notes</button><button id="keep" type="button">Keep typed notes</button></div></div><p id="status" role="status">Six fields start blank; group and case changes preserve your writing.</p></section><footer>Temporary writing disappears on reload. No notifications, register integration, storage, employee rating, launch or automatic completion occurs.</footer></main><script>(()=>{'use strict';const $=id=>document.getElementById(id);const groups={requesters:['Requesters','Send a request by email with varying details.','Enter the item ID, needed date and request owner in the register.','Confirm access; provide a worked request; explain what to do when the item ID cannot be found.'],reviewers:['Reviewers','Read incoming email and ask for missing information.','Check register completeness, then follow the agreed review route.','Agree incomplete-request handling and cover during the handoff.']};function group(key){for(const id of Object.keys(groups))$(id).setAttribute('aria-pressed',String(id===key));const g=groups[key];['group-title','old-work','new-work','support'].forEach((id,i)=>$(id).textContent=g[i]);}const cases={U1:['U1 · Three fields present','New-register request: item ID, needed date and request owner are all present.','Review the request through the agreed process. The three required fields are present.','Field completeness does not establish approval, fulfillment or use by every affected person.'],U2:['U2 · Route needs investigation','Request arrives only by email; no corresponding register entry is supplied.','Ask about access, awareness of the intended route and any agreed exception. If an approved exception explains the email, represent it in the process.','Do not infer resistance or motive from the route used.'],U3:['U3 · Missing-field handling','New-register request: item ID and request owner present; needed date is blank.','Review field guidance and ask the process owner to agree how a genuinely unknown needed date should be handled. Inspect subsequent work after any support change.','Do not invent a date. Using the register with an incomplete field differs from using another route.']};function choose(key){for(const id of Object.keys(cases))$('case-'+id).setAttribute('aria-pressed',String(id===key));cases[key].forEach((v,i)=>$(['case-title','case-record','follow-up','case-limit'][i]).textContent=v);}function view(e){$('activity').setAttribute('aria-pressed',String(!e));$('evidence').setAttribute('aria-pressed',String(e));$('activity-view').hidden=e;$('evidence-view').hidden=!e;}for(const id of Object.keys(groups))$(id).addEventListener('click',()=>group(id));for(const id of Object.keys(cases))$('case-'+id).addEventListener('click',()=>choose(id));$('activity').addEventListener('click',()=>view(false));$('evidence').addEventListener('click',()=>view(true));for(const [id,label]of [['impact','Actual purpose, affected groups and task-level impacts'],['transition','Transition activities · owners and review points'],['decisions','Approval, timing, access and exception decisions'],['evidence','Actual ordinary-use evidence · record and source'],['adaptation','Support adaptation · issue, decision and subsequent review'],['ownership','Ongoing ownership and temporary review notes']]){const l=document.createElement('label');l.htmlFor='own-'+id;l.textContent=label;const t=document.createElement('textarea');t.id=l.htmlFor;$('fields').append(l,t);}$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept all six plan fields.';$('reset').focus();});$('clear').addEventListener('click',()=>{for(const t of document.querySelectorAll('textarea'))t.value='';$('confirmation').hidden=true;$('status').textContent='All six plan fields were cleared. Group, view and case selections are unchanged.';$('own-impact').focus();});group('requesters');choose('U1');})();</script></body></html>