A successful job is not a verified restore
HTML for this example
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>A successful job is not a verified restore</title><style>*{box-sizing:border-box}body{margin:0;background:#f3f4f2;color:#202c32;font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1120px;margin:auto;padding:30px 28px 60px}header{margin-bottom:22px}.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:750;color:#59676b}h1{font-size:clamp(25px,4vw,36px);line-height:1.15;letter-spacing:-.035em;margin:7px 0 10px}h2{font-size:21px;line-height:1.3;margin:0 0 16px}h3{font-size:17px;margin:0 0 10px}p{margin:8px 0 16px}label{display:block;font-size:14px;font-weight:650;margin:12px 0 5px}input,select,textarea,button{font:inherit}input,select,textarea{width:100%;min-width:0;border:1px solid #b6c0bf;border-radius:7px;background:#fff;color:#202c32;padding:10px 12px}textarea{resize:vertical;min-height:88px}input[type=checkbox]{width:18px;height:18px;vertical-align:middle;margin-right:8px}button{border:1px solid #b8c3c1;border-radius:7px;padding:10px 15px;background:#fff;color:#203632;font-weight:650;cursor:pointer}button.primary{background:#243f3c;color:white;border-color:#243f3c}button:hover{filter:brightness(.95)}button:disabled{opacity:.48;cursor:not-allowed}:focus-visible{outline:3px solid #b05814;outline-offset:3px}.buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.panel{background:#fff;border:1px solid #d7ddda;border-radius:12px;padding:24px}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px}.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.result{background:#e4eee8;border:1px solid #c5d6ca;border-radius:12px;padding:28px}.big{font-size:clamp(32px,5vw,56px);font-weight:740;line-height:1.14;letter-spacing:-.04em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.muted{color:#59686a;font-size:14px}.tag{display:inline-block;background:#edf0ed;border-radius:4px;padding:3px 8px;font-size:12px;font-weight:700}.error{color:#9d301b;font-weight:650;min-height:24px;margin-top:10px}.note{border-left:3px solid #9a794a;padding:10px 15px;background:#faf5e9;margin:18px 0}.below{margin-top:28px}.record{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;background:#f2f4f1;padding:18px;border-radius:8px}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;vertical-align:top;border-bottom:1px solid #dce1dd;padding:12px 10px;overflow-wrap:anywhere}th{color:#59686a;font-size:12px}a{color:#2c5a6a;overflow-wrap:anywhere}details{margin-top:20px}summary{cursor:pointer;font-weight:650}hr{border:0;border-top:1px solid #d6dcd6;margin:22px 0}[hidden]{display:none!important}ol,ul{padding-left:23px}.statline{display:flex;gap:20px;flex-wrap:wrap;margin:18px 0}.statline strong{display:block;font-size:24px}.inline{display:flex;align-items:center;gap:8px}.inline label{margin:0} .blank{min-height:36px;border-bottom:1px dashed #aebbb5;color:#66736d;font-size:13px;padding:8px 0}@media(max-width:720px){main{padding:22px 18px 45px}.split{grid-template-columns:1fr}.panel,.result{padding:20px}.row{gap:12px}th,td{padding:10px 6px}}@media(max-width:400px){main{padding:18px 14px 40px}.big{font-size:34px}button{padding:10px 12px}.row{grid-template-columns:1fr}.panel,.result{padding:17px}}.inline{flex-wrap:wrap}.metric{font-size:clamp(29px,4vw,44px);font-weight:750;line-height:1.2;letter-spacing:-.025em;font-variant-numeric:tabular-nums}.strip{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}.caption{font-size:13px;color:#5d6b6f}.tag.warn{background:#f7e9ce;color:#795323}.tag.good{background:#e4ebe4;color:#344f3e}pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}button[aria-pressed=true]{background:#304b51;color:white}.fieldNote{font-size:13px;color:#5e6a6d;margin:5px 0}.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.docHeader{display:flex;gap:24px;justify-content:space-between;align-items:start;flex-wrap:wrap;border-bottom:2px solid #445a58;padding-bottom:20px}.docHeader h2{margin:0}.money{font-variant-numeric:tabular-nums;white-space:nowrap}.statusBand{padding:17px 22px;border-radius:8px;background:#f5ead5;color:#654c2c;font-weight:650}.statusBand p{font-size:14px;font-weight:400;margin:5px 0 0}.blankLine{border-bottom:1px dashed #b6bfb8;min-height:38px}.evidenceRow{display:grid;grid-template-columns:1fr 1fr;gap:18px;border-top:1px solid #dce1dc;padding:18px 0}.checklabel{font-weight:400;margin:10px 0}.subtle{background:#f4f6f3}.downloadStatus{font-size:13px;min-height:22px;color:#49645a}@media(max-width:650px){.three{grid-template-columns:1fr}.evidenceRow{grid-template-columns:1fr}.metric{font-size:32px}}.manifestSummary{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:26px;padding:24px;background:#f1e8d5;border:1px solid #daceb4;border-radius:12px}.manifestSummary .metric{margin-top:10px}.manifestSummary p{margin:8px 0}.fileEntry{border-top:1px solid #d7ddd5;padding:18px 0}.fileEntry>strong{font:700 16px ui-monospace,Consolas,monospace}@media(max-width:650px){.manifestSummary{grid-template-columns:1fr;gap:18px}.manifestSummary h2{font-size:22px}}</style></head><body><main><header><div class="eyebrow">M01 manifest · R01 / T01 proposed · Fictional file exercise</div><h1>A successful job is not a verified restore</h1></header>
<section class="manifestSummary"><div><span class="eyebrow">O01 · Illustrative presence list</span><div class="metric">2 of 3 files listed</div></div><div><h2>lesson.pdf is missing</h2><p>Presence, readability and content are separate checks.</p></div></section><section class="panel below"><label for="observation">Inspect an observation</label><select id="observation"><option value="O01">O01 · Original illustrative observation</option></select><div id="manifest" class="below"></div><p id="status" class="statusBand"></p><p class="muted">R01 and T01 are proposed references. Actual authorization, restore execution and owner approval are not supplied.</p></section>
<section class="panel below"><h2>Add a separate supplied observation</h2><p class="muted">This records entries in the local review only. It does not inspect files or perform a restore.</p><div class="row"><div><label for="observationId">New observation ID</label><input id="observationId" placeholder="e.g., O02"></div><div><label for="source">Restore-point / destination reference</label><input id="source" placeholder="Actual supplied references"></div><div><label for="checker">Checker reference</label><input id="checker"></div><div><label for="date">Observation date</label><input id="date" type="date"></div></div><div id="entryRows" class="below"></div><label for="evidence">Open/content criteria and evidence reference</label><input id="evidence" placeholder="Required when recording a completed check"><div class="buttons"><button id="add" class="primary">Add observation record</button></div><p id="feedback" class="error" role="status"></p></section>
<section class="panel below"><h2>Procedure to confirm with the owner</h2><ol><li>Confirm scope, owner and actual test authorization.</li><li>Bind restore reference and expected M01 version.</li><li>Confirm an isolated destination protecting existing originals.</li><li>Use the organization's approved procedure; no command is supplied here.</li><li>Record presence, open/readability and expected-content comparison for each file.</li><li>Route exceptions and retain later retest evidence separately.</li></ol><div class="row"><div><label for="authorization">Actual scope / authorization reference</label><input id="authorization" placeholder="TO CONFIRM"></div><div><label for="owner">Exception owner and next decision</label><input id="owner" placeholder="TO CONFIRM"></div></div><label for="decision">Actual verification decision / approval reference</label><input id="decision"><p class="muted">Keep credentials out of this copy. Schedule, retention and recovery targets require actual policy. No live connection, restore, notification or approval action is available.</p><a href="https://firsthr.app/templates/training/sop-template">Scope, staging and verification reference</a></section><footer class="muted below">Local review copy · Edits last only while this page is open.</footer></main><script data-app>
(()=>{
const $=id=>document.getElementById(id);const text=(id,v)=>$(id).textContent=String(v);const on=(id,type,fn)=>$(id).addEventListener(type,fn);const escapeHTML=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));const money=n=>'$'+(n/100).toFixed(2);const quantity=(s,integer=false)=>{s=String(s).trim();if(!(integer?/^[0-9]+$/:/^[0-9]+(?:[.][0-9]{1,2})?$/).test(s)||!Number.isFinite(+s)||+s>100000)throw Error('Enter a nonnegative '+(integer?'whole number':'number with at most two decimals')+' up to 100,000. Blank is missing.');return +s};const cents=s=>Math.round(quantity(s)*100);const download=(filename,content,type='text/plain')=>{const url=URL.createObjectURL(new Blob([content],{type})),a=document.createElement('a');a.href=url;a.download=filename;document.body.append(a);a.click();a.remove();setTimeout(()=>URL.revokeObjectURL(url),1000)};
const files=['index.html','styles.css','lesson.pdf'],original={id:'O01',source:'R01 / T01 proposed',checker:'Not supplied',date:'Not supplied',evidence:'Illustrative list only',rows:[{file:files[0],presence:'present',read:'untested',content:'untested'},{file:files[1],presence:'present',read:'untested',content:'untested'},{file:files[2],presence:'missing',read:'untested',content:'untested'}]};let observations=[structuredClone(original)];
function summarize(o){const present=o.rows.filter(r=>r.presence==='present').length,missing=o.rows.filter(r=>r.presence==='missing').map(r=>r.file),passed=o.rows.filter(r=>r.presence==='present'&&r.read==='pass'&&r.content==='pass').length;return {present,missing,passed,allFileChecks:passed===files.length}}
function render(){const o=observations.find(o=>o.id===$('observation').value)||original,r=summarize(o);$('manifest').innerHTML='<table><thead><tr><th>M01 expected file</th><th>Presence</th><th>Readability</th><th>Content</th></tr></thead><tbody>'+o.rows.map(row=>'<tr><th>'+row.file+'</th><td>'+escapeHTML(row.presence)+'</td><td>'+escapeHTML(row.read)+'</td><td>'+escapeHTML(row.content)+'</td></tr>').join('')+'</tbody></table><div class="record below">'+escapeHTML(o.id+' | '+o.source+'\nChecker: '+o.checker+' | Date: '+o.date+'\nEvidence: '+o.evidence)+'</div>';text('status',r.allFileChecks?'All supplied file checks marked pass; owner authorization and decision remain unverified.':'Verification incomplete: '+r.present+' listed present; '+r.passed+' have all three supplied checks. '+(r.missing.length?'Missing: '+r.missing.join(', ')+'.':'Unperformed or failed checks remain.'))}
function add(){const id=$('observationId').value.trim();if(!id||observations.some(o=>o.id===id))throw Error('Use a new, unique observation ID; O01 must remain intact.');if(!$('source').value.trim()||!$('checker').value.trim()||!$('date').value)throw Error('Supply references, checker and date for the separate observation.');const rows=files.map((file,i)=>({file,presence:$('presence'+i).value,read:$('read'+i).value,content:$('content'+i).value}));for(const row of rows){if(row.presence!=='present'&&(row.read!=='untested'||row.content!=='untested'))throw Error('A missing or unknown file cannot have a performed readability/content check.')}if(rows.some(r=>r.read!=='untested'||r.content!=='untested')&&!$('evidence').value.trim())throw Error('Supply criteria and evidence for the performed checks.');const record={id,source:$('source').value.trim(),checker:$('checker').value.trim(),date:$('date').value,evidence:$('evidence').value.trim()||'Presence list only; remaining checks untested',rows};observations.push(record);const option=document.createElement('option');option.value=id;option.textContent=id+' · Supplied local observation';$('observation').append(option);$('observation').value=id;render();text('feedback','Separate observation added. O01 is preserved; no real operation or approval is inferred.');return record}
$('entryRows').innerHTML=files.map((file,i)=>'<div class="fileEntry"><strong>'+file+'</strong><div class="three"><div><label for="presence'+i+'">Presence</label><select id="presence'+i+'"><option value="unknown">Unknown</option><option value="present">Present in supplied list</option><option value="missing">Missing</option></select></div><div><label for="read'+i+'">Open/readability check</label><select id="read'+i+'"><option value="untested">Not checked</option><option value="pass">Pass, evidence supplied</option><option value="fail">Fail, evidence supplied</option></select></div><div><label for="content'+i+'">Content comparison</label><select id="content'+i+'"><option value="untested">Not checked</option><option value="pass">Pass, evidence supplied</option><option value="fail">Fail, evidence supplied</option></select></div></div></div>').join('');on('observation','change',render);on('add','click',()=>{try{add()}catch(e){text('feedback',e.message)}});window.app={summarize,add,getObservations:()=>observations};render();
})();
</script></body></html>