DEMO-I01 · service incident review — Coordinate a service interruption from initial report through assigned investigation, checked recovery and unresolved closure conditions,…

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>DEMO-I01 · service incident review</title><style>
*{box-sizing:border-box}body{margin:0;background:#f3f5f8;color:#273b50;font:15px/1.55 system-ui,sans-serif}main{max-width:1120px;padding:30px;margin:auto}h1{font-size:clamp(28px,4vw,40px);letter-spacing:-.035em;line-height:1.15;margin:5px 0 10px}h2{font-size:22px;margin:0 0 14px}h3{font-size:16px;margin:0 0 9px}p{margin:0 0 12px}.eyebrow{font-size:11px;letter-spacing:.13em;font-weight:750;text-transform:uppercase;color:#59728b}.small{font-size:13px;color:#5e7286}.banner{display:grid;grid-template-columns:1.7fr 1fr;gap:22px;padding:25px;background:#fff;border:1px solid #d5dfe9;border-left:6px solid #c38226;border-radius:10px;margin:24px 0}.status{font-size:31px;line-height:1.25;font-weight:750;color:#856021;margin:7px 0}.checks{display:flex;gap:10px;margin:13px 0}.check{flex:1;border:1px solid #ccd9df;background:#f0f6f4;border-radius:6px;padding:12px;font-size:13px}.check.pending{background:#fff3df;border-color:#e3c89b}.check strong{display:block}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}button{font:650 14px system-ui;min-height:44px;border:1px solid #446a8d;border-radius:6px;padding:10px 16px;background:#446a8d;color:#fff;cursor:pointer}button.secondary{background:white;color:#446a8d}button[aria-pressed=true]{background:#244d73;color:white}:focus-visible{outline:3px solid #c38226;outline-offset:3px}button:disabled{opacity:.5;cursor:default}.layout{display:grid;grid-template-columns:1.45fr 1fr;gap:24px}.paper{background:white;border:1px solid #d5dfe9;border-radius:9px;padding:24px}.timeline{list-style:none;padding:0;margin:0}.timeline li{display:grid;grid-template-columns:60px 1fr;gap:14px;border-top:1px solid #e0e7ee;padding:16px 0}.timeline time{font-weight:750;color:#3b6387}.badge{display:inline-block;padding:3px 7px;border-radius:4px;background:#e9eff5;color:#496b88;font-size:11px;letter-spacing:.04em;font-weight:750;text-transform:uppercase}.badge.proposed{background:#fff1d9;color:#876329}.timeline p{font-size:14px;margin:6px 0 0}.role{padding:12px 0;border-bottom:1px solid #e0e7ee}.role strong{display:block}.role span{font-size:14px}.gate{border-top:1px solid #e0e7ee;padding:14px 0;font-size:14px}.gate strong{display:block;margin-bottom:5px}.note{background:#eff4f8;padding:18px;border-radius:6px}.note p{font-size:14px}.request{margin-top:24px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{font-size:13px;font-weight:650;display:block}input,textarea{font:15px/1.5 system-ui;display:block;width:100%;padding:11px;border:1px solid #9dafc0;border-radius:5px;color:#273b50;background:white;margin:6px 0 14px}textarea{min-height:115px;resize:vertical}.preview{background:#f9fbfd;padding:19px;border:1px solid #d5dfe9;border-radius:6px;margin-top:16px}.preview h3{color:#315b80}.preview textarea{min-height:230px;font:13px/1.65 ui-monospace,Consolas,monospace}.error{color:#a12e26;font-size:14px;min-height:23px}.row{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}footer{font-size:13px;color:#5e7286;margin:25px 0;max-width:100ch}[hidden]{display:none!important}@media(max-width:750px){main{padding:23px 16px}.banner,.layout,.fields{grid-template-columns:1fr}.banner,.paper{padding:21px}.banner{gap:12px}.status{font-size:27px}.checks{margin-bottom:0}}@media(max-width:380px){main{padding:20px 12px}.tabs button{flex:1;padding:10px}.checks{flex-direction:column}}
</style></head><body><main><p class="eyebrow">DEMO-I01 · original fictional coordination record</p><h1>Internal booking page interruption</h1><p>Review the observed recovery evidence before a closure decision.</p><section class="banner"><div><p class="eyebrow">Record at 09:35 · America/New_York</p><div id="incident-state" class="status">Recovery check pending</div><p>Two test attempts failed at 09:10. One designated path later passed; the second remains untested.</p><div class="checks"><div class="check"><strong>Path 1 · passed</strong>09:35 successful test</div><div class="check pending"><strong id="path-two-state">Path 2 · NOT TESTED</strong>Recovery evidence missing</div></div></div><div><p class="eyebrow">Closure rule for this fictional team</p><p><strong id="recovery-count">1 of 2 path checks passed</strong><br>Both paths must pass, then the incident lead reviews the evidence.</p><p class="small">Lead review: pending<br>Cause: UNKNOWN<br>Severity: unassigned</p></div></section><div class="tabs"><button type="button" id="view-timeline" aria-pressed="true">Timeline</button><button type="button" id="view-roles" class="secondary" aria-pressed="false">Coordination roles</button><button type="button" id="view-recovery" class="secondary" aria-pressed="false">Recovery & closure</button></div><div class="layout"><section class="paper"><div id="timeline-view"><h2>Keep the record types distinct</h2><ol class="timeline"><li><time>09:10</time><div><span class="badge">Observed</span><p>Two designated booking-path attempts failed. Scope and cause need investigation.</p></div></li><li><time>09:15</time><div><span class="badge">Assigned</span><p>Sam coordinates; Jo investigates; Rae handles communications.</p></div></li><li><time>09:25</time><div><span class="badge proposed">Proposed</span><p>Configuration correction proposed. Approval and application are not supplied.</p></div></li><li><time>09:35</time><div><span class="badge">Observed</span><p>One path passed. Second required path NOT TESTED; incident lead review pending.</p></div></li><li><time>09:45</time><div><span class="badge proposed">Planned</span><p>Next update planned. No sent-update evidence is supplied.</p></div></li></ol></div><div id="roles-view" hidden><h2>Named coordination roles</h2><div class="role"><strong>Sam</strong><span>Coordinate the incident and keep the operating record coherent.</span></div><div class="role"><strong>Jo</strong><span>Investigate supplied failures and record hypotheses as hypotheses.</span></div><div class="role"><strong>Rae</strong><span>Use the approved communications process; record actual sent evidence.</span></div><div class="role"><strong>Incident lead · identity not supplied</strong><span>Review both required path results and record the actual closure decision.</span></div><p class="small" style="margin-top:16px">Actual second-path check owner, observation recorder and source references still need to be supplied in the operating record.</p></div><div id="recovery-view" hidden><h2>Evidence needed for closure</h2><div class="gate"><strong>Required path 1</strong>Passed at 09:35. Actual source reference and recorder belong in the operating record.</div><div class="gate"><strong>Required path 2</strong>NOT TESTED. Request the actual test result and evidence reference.</div><div class="gate"><strong>Lead review</strong>Pending. A viewed panel cannot supply the decision.</div><div class="gate"><strong>Configuration proposal</strong>Still proposed; no application evidence. Do not attribute the successful test to this unconfirmed change.</div></div></section><aside class="paper"><h2>Response gates</h2><div class="gate"><strong>1 · Report and coordinate</strong>Record observed impact, time zone and actual ownership. Follow the organization's escalation rules.</div><div class="gate"><strong>2 · Investigate</strong>Keep symptoms and hypotheses separate. Cause remains unknown.</div><div class="gate"><strong>3 · Authorize the change</strong>Use the actual approval/change procedure. This record supplies no applied fix.</div><div class="gate"><strong>4 · Validate recovery</strong>Retain both designated path results; one passing path is insufficient.</div><div class="gate"><strong>5 · Review closure</strong>Present results and exceptions to the incident lead; record the actual decision.</div></aside></div><section class="paper request"><h2>Prepare the next evidence request</h2><p class="small">These editable fields prepare a local review draft. They do not alter the supplied timeline, send an update, assign work, or close the incident.</p><div class="fields"><label for="request">Draft request<textarea id="request">Request the second designated booking-path test result and evidence reference. Ask the incident lead to review both recovery results.</textarea></label><div><label for="recipient">Intended review recipient<input id="recipient" value="Incident lead · identity to confirm"></label><label for="update-time">Planned next-update time · HH:MM<input id="update-time" value="09:45" inputmode="numeric" maxlength="5"></label></div></div><p id="draft-error" class="error" role="alert"></p><div class="preview"><div class="row"><h3>Fictional review note · not sent</h3><button id="select-note" type="button" class="secondary">Select text</button></div><p id="draft-preview">One booking path passed a test. The second designated path has not been tested, and closure review is pending. Cause remains unknown. Next update planned for 09:45 America/New_York.</p><label for="note-text">Exact draft text · copy manually<textarea id="note-text" readonly></textarea></label><p id="select-status" class="small" role="status"></p></div></section><footer>This is a fictional service-coordination SOP and review companion, not production instructions, a security-breach remediation process, an SLA, severity classification or an actual incident system. No fix, notification, approval, test, closure or persistence occurs here. Keep actual observations, source references, decisions and communications in the authorized operating record.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);let view='timeline';function closure(results,leadReview){return results.length===2&&results.every(x=>x==='passed')&&leadReview==='reviewed'?'Evidence conditions supplied; actual decision still required':'Recovery check pending';}
function draft(request,recipient,time){if(!request.trim()||!recipient.trim()||!/^([01]\d|2[0-3]):[0-5]\d$/.test(time.trim()))return{error:'Supply a request, intended recipient and valid 24-hour HH:MM planned update time.'};const note='One booking path passed a test. The second designated path has not been tested, and closure review is pending. Cause remains unknown. Next update planned for '+time.trim()+' America/New_York.';return{note,text:['DEMO-I01 · FICTIONAL REVIEW DRAFT · NOT SENT','Source observation: 09:35 America/New_York',note,'Intended recipient: '+recipient.trim(),'Draft evidence request: '+request.trim(),'Configuration correction: proposed only; approval/application not supplied.','Actual sent-update evidence / closure decision: not supplied.'].join('\n')};}
function update(){const r=draft($('request').value,$('recipient').value,$('update-time').value);$('draft-error').textContent=r.error||'';$('draft-preview').textContent=r.error?'Draft pending: correct the fields above.':r.note;$('note-text').value=r.text||'';$('select-note').disabled=!!r.error;$('select-status').textContent='';}
for(const v of['timeline','roles','recovery'])$('view-'+v).addEventListener('click',()=>{view=v;for(const key of['timeline','roles','recovery']){$(key+'-view').hidden=key!==view;$('view-'+key).setAttribute('aria-pressed',String(key===view));}});for(const id of['request','recipient','update-time'])$(id).addEventListener('input',update);$('select-note').addEventListener('click',()=>{$('note-text').focus();$('note-text').select();$('select-status').textContent='Draft text selected. Use your device’s copy command, then paste into the authorized working record.';});$('incident-state').textContent=closure(['passed','not tested'],'pending');update();
</script></body></html>