SOP revision register

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SOP revision register</title><style>*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:var(--bg,#f3f4f5);color:var(--ink,#192838);font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}main{max-width:1040px;margin:auto;padding:28px 28px 48px}header{margin-bottom:20px}h1{font-size:clamp(25px,4vw,36px);line-height:1.15;letter-spacing:-.035em;margin:6px 0 9px}h2{font-size:21px;line-height:1.25;margin:0 0 16px}h3{font-size:17px;margin:0 0 10px}p{margin:8px 0 16px}.eyebrow{font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.12em;color:var(--accent,#275e86)}.subtle,small{color:#536170}.panel{padding:24px;background:white;border:1px solid var(--line,#d5dce2);border-radius:12px;margin:18px 0}.result{background:var(--result,#132f47);color:white;padding:26px;border-radius:14px;margin:18px 0}.result .subtle,.result small{color:#d7e3ed}.big{font-size:clamp(32px,6vw,56px);font-weight:750;line-height:1.15;letter-spacing:-.035em;margin:8px 0 14px;overflow-wrap:anywhere}.mono,pre,code{font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}.mono{overflow-wrap:anywhere}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.7;margin:0}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.triple{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.fields{display:flex;gap:16px;flex-wrap:wrap;align-items:end}.fields>label{flex:1;min-width:130px}label{display:block;font-size:14px;font-weight:650}input,select,textarea{display:block;width:100%;font:inherit;font-size:16px;color:inherit;background:white;border:1px solid #a9b4bf;border-radius:6px;padding:11px 12px;margin-top:6px;min-width:0}input[type=checkbox]{display:inline;width:auto;margin:0 9px 0 0;accent-color:var(--accent,#275e86)}textarea{min-height:100px;resize:vertical}button{font:inherit;font-weight:650;padding:10px 17px;border:1px solid var(--accent,#275e86);background:var(--accent,#275e86);color:white;border-radius:6px;cursor:pointer;min-height:44px}button.secondary{background:white;color:var(--accent,#275e86)}button:disabled{opacity:.5;cursor:default}button:hover{filter:brightness(.94)}:focus-visible{outline:3px solid #e9a733;outline-offset:3px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.error{color:#a32325;font-weight:650;min-height:0}.error:not(:empty){padding:12px;border-left:4px solid #ae3237;background:#fff2f0;margin:14px 0}[hidden]{display:none!important}fieldset{border:1px solid #ccd4da;border-radius:8px;padding:18px;margin:0;min-width:0}legend{padding:0 7px;font-weight:750}table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#536170}td,th{padding:12px 9px;border-bottom:1px solid #d9dfe4;vertical-align:top;overflow-wrap:anywhere}th:first-child,td:first-child{padding-left:0}dl{margin:0}dl>div{padding:10px 0;border-bottom:1px solid #d9dfe4}dt{font-size:13px;color:#536170}dd{margin:4px 0 0;font-weight:650}details{margin:20px 0;padding:18px 0;border-top:1px solid #cbd2d8}summary{cursor:pointer;font-weight:700}details p{margin-top:16px}a{color:var(--accent,#275e86)}.tag{display:inline-block;font-size:12px;font-weight:750;letter-spacing:.03em;border:1px solid currentColor;border-radius:5px;padding:4px 8px}.rule{border-top:1px solid #d9dfe4;padding-top:20px}.line{height:30px;border-bottom:1px solid #aab4be}.split-stat{display:flex;justify-content:space-between;gap:20px;align-items:baseline;flex-wrap:wrap}.result h2{color:white}.result table td,.result table th{border-color:#ffffff35;color:white}.result .eyebrow{color:#d7e3ed}.readout{padding:16px;background:#f0f4f6;border-radius:6px;margin-top:14px}.empty{padding:22px;border:1px dashed #a6b0ba;border-radius:8px;color:#536170;margin:18px 0}footer{font-size:13px;color:#536170;margin-top:24px}@media(max-width:720px){main{padding:20px}.panel,.result{padding:20px}.grid{gap:14px}.triple{gap:10px}}@media(max-width:540px){main{padding:16px}.grid{grid-template-columns:1fr}.panel,.result{padding:18px;border-radius:9px}.fields{gap:12px}.fields>label{min-width:100px}h1{font-size:27px}th,td{padding:10px 5px;font-size:13px}.triple{grid-template-columns:1fr}.big{font-size:38px}}.register-result{border-top:6px solid #666152;background:#fffdf8;padding:24px;border-bottom:1px solid #ccc5b5}.register-result h2{font-family:Georgia,serif;font-size:30px;margin:12px 0}.register-pair{margin-top:22px;padding-top:18px;border-top:1px solid #ccc5b5}.checks label{padding:13px 0;border-bottom:1px solid #ddd8ca}.history{border-left:4px solid #8e8672;padding-left:18px;margin-bottom:24px}</style></head><body style="--bg:#f2f0e9;--accent:#645e50;--ink:#302f2b;--line:#d4cfc2"><main><header><div class="eyebrow">Working example</div><h1>SOP revision register</h1><p class="subtle">Review the H03 → H04 change without rewriting the version used by earlier work.</p></header><section class="register-result" aria-live="polite"><div class="eyebrow">P07 · Book Packet Packing · Fictional register</div><h2 id="gateTitle"></h2><div id="gateReason"></div><div class="grid register-pair"><div><span class="subtle">Revision 1</span><h3 id="rev1"></h3><small>Original reference A01</small></div><div><span class="subtle">Revision 2</span><h3 id="rev2"></h3><small id="approval"></small></div></div></section><section class="panel"><label for="scenario">Inspect an illustrative lifecycle stage<select id="scenario"><option value="open">Review issues open · checklist still H03</option><option value="ready">References aligned · approval still missing</option><option value="approved">A02 approval · effective condition pending</option><option value="active">Authorized condition confirmed · illustrative activation</option></select></label><h2 style="margin-top:24px">Change-impact checklist</h2><p class="subtle">Draft inspection only: checking a box records a local what-if, not an edit or approval.</p><div class="checks"><label><input id="step" type="checkbox" checked>Step text names H04</label><label><input id="materials" type="checkbox" checked>Materials list names H04</label><label><input id="checklist" type="checkbox">Checklist reference names H04</label></div><p id="referenceState" class="readout"></p></section><div class="grid"><section class="panel"><h2>Historical execution</h2><div class="history"><span class="tag">X01</span><p><strong>P07 · Revision 1</strong></p><p>Retained for historical review in every stage.</p></div><h3>In-flight work</h3><p>Applicable version: <strong>TO CONFIRM</strong> with the actual authority.</p></section><section class="panel"><h2>Copy ledger</h2><dl><div><dt>Current-copy locations</dt><dd id="currentCopies"></dd></div><div><dt>Superseded-copy locations</dt><dd id="oldCopies"></dd></div><div><dt>Owner / actual approval / date</dt><dd>TO CONFIRM</dd></div><div><dt>Review event and evidence / next review basis</dt><dd>TO CONFIRM</dd></div></dl></section></div><details><summary>SOP-on-SOP procedure and record boundaries</summary><ol><li>Register the proposed revision and affected references.</li><li>Review step text, materials, and checklist together.</li><li>Record approval separately from the effective condition.</li><li>Confirm authority, basis, date, and current-copy locations before actual activation.</li><li>Retain earlier revisions and execution references; control superseded copies through the organization’s process.</li></ol><p>These supplied teaching scenarios perform no approval, activation, PDF editing, distribution, or notification. Actual records remain in the native master register. No universal review interval or regulatory certification is asserted.</p><p><a href="https://www.epa.gov/sites/default/files/2015-06/documents/g6-final.pdf">EPA SOP guidance: version control and archival concepts</a></p></details><footer>Local review copy · No data is sent or saved.</footer></main><script>const $=id=>document.getElementById(id);const esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));function round(n,d){return (2n*n+d)/(2n*d)}function dec(n,d,p=6){let x=round(n*10n**BigInt(p),d).toString().padStart(p+1,'0');return p?x.slice(0,-p)+'.'+x.slice(-p):x}function exact(n,d){let a=n/d,r=n%d,s='';for(let i=0;r&&i<36;i++){r*=10n;s+=r/d;r%=d}return a+(s?'.'+s:'')+(r?'…':'')}function num(s,name,max=1000000000,places=9,zero=false){if(!new RegExp('^[0-9]+(?:[.][0-9]{1,'+places+'})?$').test(s)||s.length>35)throw Error(name+': use a '+(zero?'nonnegative':'positive')+' dot-decimal number.');let [a,b='']=s.split('.'),d=10n**BigInt(b.length),n=BigInt(a+b);if((zero?n<0n:n<=0n)||n>BigInt(max)*d)throw Error(name+': value outside the supported range.');return {n,d,v:Number(n)/Number(d)}}function clear(){ $('result').hidden=true;$('trace').textContent='';$('empty').hidden=false;$('error').textContent='';}function reveal(){ $('result').hidden=false;$('empty').hidden=true;$('error').textContent='';}function error(e){clear();$('error').textContent=e.message;}function bindForm(run){$('form').addEventListener('submit',e=>{e.preventDefault();run()});$('form').addEventListener('input',clear);$('form').addEventListener('change',clear);}

function lifecycle(stage,refs){const aligned=refs.every(Boolean),approved=['approved','active'].includes(stage),effective=stage==='active';let state=!aligned?'Review issues open':!approved?'Draft · ready for approval':!effective?'Approved, pending activation':'Active for new runs';return {aligned,approved,effective,active:aligned&&approved&&effective,state,history:'P07 revision 1'}}
function render(){const stage=$('scenario').value,r=lifecycle(stage,[$('step').checked,$('materials').checked,$('checklist').checked]);$('gateTitle').textContent=r.active?'Revision 2 is active in this scenario':r.state;$('gateReason').textContent=!r.aligned?'H04 references do not all agree. Revision 2 is blocked.':!r.approved?'All three references name H04. Approval and the effective condition remain open.':!r.effective?'A02 records illustrative approval; the authorized effective condition is still pending.':'The supplied scenario confirms the authorized condition; retain revision 1 for historical review.';$('rev1').textContent=r.active?'Superseded for new runs':'Active for new runs';$('rev2').textContent=r.state;$('approval').textContent=r.approved?'Illustrative approval A02':'Approval record: TO CONFIRM';$('referenceState').textContent=r.aligned?'3 of 3 references name H04.':'Review '+['step text','materials list','checklist reference'].filter((_,i)=>![$('step').checked,$('materials').checked,$('checklist').checked][i]).join(', ')+': still H03.';$('currentCopies').textContent=(r.active?'Revision 2':'Revision 1')+' locations: TO CONFIRM';$('oldCopies').textContent=r.active?'Revision 1 archive locations: TO CONFIRM; retain a read-only historical copy.':'None established in this scenario; locations TO CONFIRM.';}
$('scenario').onchange=()=>{const aligned=$('scenario').value!=='open';$('step').checked=true;$('materials').checked=true;$('checklist').checked=aligned;render()};['step','materials','checklist'].forEach(x=>$(x).onchange=render);render();</script></body></html>