Substitute handoff · R1

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>Substitute handoff · R1</title><style>*{box-sizing:border-box}body{margin:0;background:#f3f1eb;color:#202e35;font:16px/1.5 system-ui,sans-serif}main{max-width:1160px;margin:auto;padding:32px 28px 70px}h1{font-size:clamp(26px,4vw,42px);line-height:1.12;margin:8px 0 12px;letter-spacing:-.04em}h2{font-size:22px;margin:0 0 16px}h3{font-size:17px;margin:0 0 8px}p{margin:8px 0 16px}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:750;color:#45665e}.lede{color:#55636a;max-width:780px}.panel{background:#fff;border:1px solid #d9dfd9;border-radius:16px;padding:24px;margin:20px 0}.hero{background:#193f38;color:white}.hero .muted{color:#bfd6cb}.split{display:grid;grid-template-columns:1.1fr 1fr;gap:24px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.big{font-size:clamp(32px,5vw,58px);line-height:1.15;font-weight:750;letter-spacing:-.04em}.muted,small{color:#61716e}.badge{display:inline-block;padding:4px 9px;border-radius:20px;background:#e5efe8;color:#284e40;font-size:13px;font-weight:650}.warn{background:#fff2d2;color:#795213}.rule{border-top:1px solid #dce2dd;padding-top:16px;margin-top: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%;border:1px solid #aebbb5;border-radius:7px;background:white;color:#20332c;padding:10px;min-height:44px}textarea{min-height:96px;resize:vertical}button{min-height:44px;border:1px solid #80968c;border-radius:7px;padding:9px 14px;background:white;color:#1c4637;cursor:pointer}button.primary{background:#245d47;color:white;border-color:#245d47}button:disabled{opacity:.5;cursor:default}button[aria-pressed=true]{background:#d8eb90;color:#1c3d29;border-color:#536a2d}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #d5782a;outline-offset:3px}.error{color:#913920;min-height:24px}pre,.record{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 ui-monospace,monospace;background:#eef2ec;border-radius:8px;padding:16px}table{border-collapse:collapse;width:100%;font-size:14px}th,td{border-bottom:1px solid #dce2dd;text-align:left;padding:12px 8px;vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.06em}.scroll{overflow:auto}details{margin:24px 0}summary{cursor:pointer;min-height:44px;font-weight:650}svg{max-width:100%;height:auto}.small{font-size:13px}.stack>*+*{margin-top:12px}@media(max-width:720px){main{padding:22px 16px 48px}.split{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:18px;margin:16px 0}h1{font-size:32px}.desktop-table{min-width:680px}}@media(max-width:400px){.grid{grid-template-columns:1fr}main{padding:18px 14px}.panel{padding:16px}.row>button{flex:1}h1{font-size:29px}}</style></head><body><main><div class="eyebrow">R1 · Fictional teacher packet</div><h1>A clear 30-minute handoff</h1><p class="lede">Use the supplied materials in order, then leave an accurate stopping point for the teacher.</p><section class="panel"><div class="row"><h2 style="flex:1">09:00–09:30</h2><span class="badge">Planned · date to confirm</span></div><div id="timeline"></div></section><section class="split"><div class="panel"><h2>Material check</h2><label for="scenario">Record to inspect</label><select id="scenario"><option value="actual">Actual check · not recorded</option><option value="walkthrough">Fictional missing-material walkthrough</option></select><div id="materials"></div><p id="coverage" class="record"></p><label for="materialId">Actual material being checked</label><select id="materialId"><option value="">Choose material ID</option><option value="W01">W01 · warm-up</option><option value="P01">P01 · practice</option><option value="K01">K01 · teacher-only key</option><option value="F01">F01 · fallback</option></select><label for="expectedLocation">Expected location to verify</label><input id="expectedLocation" placeholder="Confirm against the authoritative packet"><label for="checker">Actual checker and check time</label><input id="checker" placeholder="Not yet recorded"><label for="availability">Actual availability and unresolved issue</label><textarea id="availability"></textarea></div><div class="panel"><h2>Fallback decision rehearsal</h2><p>F01 is a teacher-preapproved fallback only when all three conditions below are confirmed.</p><label for="preapproved">Teacher preapproval</label><select id="preapproved"><option value="">Unconfirmed</option><option value="yes">Confirmed in authoritative packet</option></select><label for="available">F01 availability</label><select id="available"><option value="">Unknown</option><option value="yes">Confirmed present</option></select><label for="permission">Permission for this situation</label><select id="permission"><option value="">Unconfirmed</option><option value="yes">Confirmed</option></select><p id="fallback" role="status" class="record"></p><p class="small">Rehearsal only. Actual school office contact route is to confirm. Follow the school's authoritative procedures; no replacement work is supplied here.</p></div></section><section class="panel"><h2>Return note · blank actual record</h2><div class="grid"><div><label for="date">Date</label><input id="date" type="date"></div><div><label for="class">Class / revision</label><input id="class"></div><div><label for="block">Planned block</label><select id="block"><option value="">Choose block</option><option>09:00–09:05 · W01</option><option>09:05–09:20 · P01</option><option>09:20–09:25 · K01 teacher only</option><option>09:25–09:30 · Collection</option></select></div></div><label for="used">Material actually used</label><input id="used"><label for="stop">Stopping point and incomplete portion</label><textarea id="stop"></textarea><label for="where">Where work was left</label><input id="where"><label for="question">Question for the returning teacher</label><textarea id="question"></textarea><label for="recorded">Recorded by / time</label><input id="recorded"><button id="clear">Clear return note</button></section><details><summary>Walkthrough question and packet boundaries</summary><p>Fictional unresolved question: “P01 was unavailable and F01 permission was unconfirmed; which material and starting point should be used next?”</p><p>Presence is not completion. No exercise, answer key, pupil information, attendance policy or emergency procedure is supplied. K01 stays teacher-only. Printed materials are expected in the blue folder at the front desk; the collection tray label and actual location must be confirmed. The actual private school packet is authoritative. Changes are temporary in this page.</p></details></main><script>const $=id=>document.getElementById(id),put=(id,v)=>$(id).textContent=String(v),esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
const blocks=[{start:540,end:545,id:'W01',task:'Teacher-provided warm-up',where:'Printed blue folder · front desk'},{start:545,end:560,id:'P01',task:'Supplied practice',where:'Same blue folder'},{start:560,end:565,id:'K01',task:'Teacher-only key review',where:'Same blue folder · not learner work'},{start:565,end:570,id:'Collection',task:'Collect work',where:'Labeled tray · actual label and location to confirm'}];const time=n=>String(Math.floor(n/60)).padStart(2,'0')+':'+String(n%60).padStart(2,'0');
function fallback(a,b,c){return a==='yes'&&b==='yes'&&c==='yes'?'All rehearsal conditions confirmed: use only the teacher-preapproved F01 for its approved scope.':'Practice coverage unresolved. Confirm F01 conditions or use the actual school office route and authoritative procedures.'}
function show(){const fictional=$('scenario').value==='walkthrough';$('materials').innerHTML=['W01','P01','K01','F01'].map(id=>'<p><strong>'+id+'</strong> · '+(fictional?({W01:'Present in fictional walkthrough',P01:'Missing in fictional walkthrough',K01:'Present · teacher-only',F01:'Availability unknown; permission unconfirmed'}[id]):'Actual availability not recorded')+'</p>').join('');put('coverage',fictional?'Walkthrough: P01 practice coverage is unresolved. No actual completion recorded.':'Actual material checker, check time and availability remain blank.');put('fallback',fallback($('preapproved').value,$('available').value,$('permission').value))}
$('timeline').innerHTML=blocks.map(b=>'<article class="rule"><div class="row"><strong>'+time(b.start)+'–'+time(b.end)+'</strong><span class="badge">'+(b.end-b.start)+' min</span><h3>'+b.id+' · '+b.task+'</h3></div><p class="small">'+b.where+'</p></article>').join('');for(const id of ['scenario','preapproved','available','permission'])$(id).addEventListener('change',show);$('clear').addEventListener('click',()=>{for(const id of ['date','class','block','used','stop','where','question','recorded'])$(id).value='';$('date').focus()});globalThis.Tool={blocks,fallback};show();</script></body></html>