DOC01 dated revision review — Check a document register's approval and effective dates, select the revision actually in effect at a dated point of use, and prepare…

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>DOC01 dated revision review</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.55 system-ui,sans-serif;color:var(--ink);background:var(--bg)}main{max-width:1120px;margin:auto;padding:30px}h1{font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-.035em;margin:5px 0 12px}h2{font-size:23px;line-height:1.3;margin:0 0 15px}h3{font-size:17px;margin:0 0 8px}p{margin:0 0 12px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:750;color:var(--accent)}.small,footer{font-size:13px;color:var(--muted)}footer{margin:27px 0}.panel{background:white;border:1px solid var(--line);padding:23px;border-radius:9px;margin-top:22px}.two{display:grid;grid-template-columns:1.35fr 1fr;gap:23px}.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}button{font:700 14px system-ui;min-height:44px;padding:10px 16px;border:1px solid var(--accent);background:var(--accent);color:white;border-radius:5px;cursor:pointer}button.secondary{color:var(--accent);background:white}button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}button:disabled{opacity:.45;cursor:default}:focus-visible{outline:3px solid #d28b25;outline-offset:3px}label{display:block;font-size:13px;font-weight:650}input,textarea,select{display:block;width:100%;padding:11px;font:16px/1.5 system-ui;color:var(--ink);background:white;border:1px solid #9baab6;border-radius:4px;margin:6px 0 15px}textarea{min-height:100px;resize:vertical}.error{color:#a02b20;font-size:14px;min-height:23px}.result{font-size:40px;line-height:1.25;letter-spacing:-.04em;font-weight:750}.notice{padding:15px;background:#fff3db;border-left:4px solid #cf9d3e;font-size:14px;margin:16px 0}details{margin-top:23px;border-top:1px solid var(--line);padding-top:15px}summary{cursor:pointer;min-height:44px;font-weight:700}.time-row{display:grid;grid-template-columns:75px 1fr 70px;gap:14px;padding:15px 0;border-top:1px solid var(--line)}.time-row p{font-size:14px;margin:5px 0}.time-row input{margin:0;text-align:center}.range{font-size:13px;font-weight:700;color:var(--accent)}[hidden]{display:none!important}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,Consolas,monospace} @media(max-width:740px){main{padding:23px 16px}.two{grid-template-columns:1fr;gap:0}.panel{padding:20px}}@media(max-width:380px){main{padding:20px 12px}.panel{padding:17px}.time-row{grid-template-columns:1fr 65px}.range{grid-column:1/-1}.row button{flex:1}}:root{--ink:#233b54;--bg:#f2f4f7;--accent:#385f8b;--muted:#66778c;--line:#d4dce6}.document{background:#fff;padding:27px;border:1px solid var(--line);border-top:6px solid #385f8b;margin-top:24px}.current{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;padding-bottom:21px;border-bottom:1px solid var(--line);margin-bottom:20px}.revision{display:grid;grid-template-columns:65px 1fr 1fr;gap:15px;padding:18px 0;border-bottom:1px solid var(--line)}.revision strong{font-size:22px}.stamp{font-size:14px;font-weight:750;color:var(--accent)}.steps{padding-left:23px}.steps li{padding:8px 0}@media(max-width:550px){.revision{grid-template-columns:55px 1fr}.revision p:last-child{grid-column:2}.document{padding:20px}}</style></head><body><main><p class="eyebrow">DOC01 · fictional internal guide</p><h1>Which revision is in effect?</h1><p>Approval and the effective date answer different questions.</p><article class="document"><div class="current"><div><p class="small">Expected active revision</p><div id="active" class="result">v1</div><p id="active-reason">October 13, 2026 · approved and already effective</p></div><div class="row"><button id="date-13" type="button" aria-pressed="true">October 13</button><button id="date-20" type="button" class="secondary" aria-pressed="false">October 20</button></div></div><div class="revision"><strong>v1</strong><p>Approved September 30, 2026<br>Effective October 1, 2026</p><p id="v1-status" class="stamp">Active</p></div><div class="revision"><strong>v2</strong><p>Approved October 13, 2026<br>Effective October 20, 2026</p><p id="v2-status" class="stamp">Approved for future use</p></div><p class="small" style="margin-top:17px">Example rule: approved and effective on or before the review date. Superseded copies remain historical records; expected activation does not prove distribution.</p></article><div class="two"><section class="panel"><h2>Point-of-use procedure</h2><ol class="steps"><li>Match document ID and revision to the maintained register.</li><li>Verify approval evidence and effective date for the dated inquiry.</li><li>Confirm the accountable owner, controlled-copy locations and transition steps.</li><li>At each location, record what was actually found, by whom and when.</li><li>Prevent superseded operating use under the confirmed process; retain history.</li></ol><p class="small">Owner, approval reference, controlled-copy locations, archive, access, retention and authorized disposal: to confirm.</p></section><section class="panel"><h2>Prepare a location-check note</h2><p class="small">Actual check fields start blank. Edits prepare an unverified note; they do not replace a file.</p><label for="location">Actual controlled-copy location<input id="location"></label><label for="observed">Observed revision<input id="observed" placeholder="For example: v1"></label><label for="verified-date">Actual verification date<input id="verified-date" type="date"></label><label for="verifier">Actual verifier<input id="verifier"></label><label for="follow-up">Discrepancy / follow-up<textarea id="follow-up"></textarea></label><p id="check-state" role="status">No actual location check supplied.</p></section></div><section class="panel"><h2>Exact review note</h2><label for="note">Plain text · copy manually<textarea id="note" readonly></textarea></label><button id="select-note" type="button">Select text</button><p id="select-status" class="small" role="status"></p></section><footer>HTML walkthrough and local note only, not a maintained Word/PDF register. No approval, distribution, acknowledgment, notification, deletion, saved edits or compliance claim. The date rule is fictional; confirm the organization's actual policy.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);
function dateValue(s){if(!/^\d{4}-\d{2}-\d{2}$/.test(s))return null;const n=Date.parse(s+'T00:00:00Z');return Number.isFinite(n)&&new Date(n).toISOString().slice(0,10)===s?n:null;}function days(a,b){const x=dateValue(a),y=dateValue(b);return x===null||y===null?null:(y-x)/86400000;}const revisions=[{id:'v1',approved:'2026-09-30',effective:'2026-10-01'},{id:'v2',approved:'2026-10-13',effective:'2026-10-20'}];let review='2026-10-13';function effective(records,at){if(dateValue(at)===null)return{error:'Invalid review date.'};if(records.some(r=>!r.approved||!r.effective||dateValue(r.approved)===null||dateValue(r.effective)===null||r.effective<r.approved))return{error:'Approval or effective-date evidence needs owner review.'};const eligible=records.filter(r=>r.approved<=at&&r.effective<=at).sort((a,b)=>a.effective.localeCompare(b.effective));if(eligible.length>1&&eligible[eligible.length-1].effective===eligible[eligible.length-2].effective)return{error:'Ambiguous effective sequence; confirm with owner.'};return{active:eligible.length?eligible[eligible.length-1].id:null};}function update(){const r=effective(revisions,review);$('active').textContent=r.active||'None established';$('active-reason').textContent=(review==='2026-10-13'?'October 13':'October 20')+', 2026 · approved and already effective';$('v1-status').textContent=r.active==='v1'?'Active':'Superseded · historical copy retained';$('v2-status').textContent=r.active==='v2'?'Active':'Approved for future use';for(const n of['13','20'])$('date-'+n).setAttribute('aria-pressed',review.endsWith(n)?'true':'false');const fields=['location','observed','verified-date','verifier'];const filled=fields.filter(id=>$(id).value.trim());$('check-state').textContent=filled.length===0?'No actual location check supplied.':filled.length<4?'Actual check incomplete; do not claim distribution verified.':'User-supplied check notes only; verify against the maintained record.';$('note').value=['DOC01 · FICTIONAL DATED REVIEW','Review date: '+review,'Expected active revision under example rule: '+r.active,'Expected revision is not proof of actual distribution.',...fields.map(id=>id+': '+($(id).value.trim()||'[not supplied]')),'Discrepancy / follow-up: '+($('follow-up').value.trim()||'[not supplied]'),'Archive / retention / owner / source references: TO CONFIRM.','Local unsaved note; no copies replaced or notifications sent.'].join('\n');$('select-status').textContent='';}for(const n of['13','20'])$('date-'+n).addEventListener('click',()=>{review='2026-10-'+n;update();});for(const id of['location','observed','verified-date','verifier','follow-up'])$(id).addEventListener('input',update);$('select-note').addEventListener('click',()=>{$('note').focus();$('note').select();$('select-status').textContent='Text selected. Use your device’s copy command manually.';});update();
</script></body></html>