One open question. Three linked records.
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>One open question. Three linked records.</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}}.strip{display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap}.inline{flex-wrap:wrap}.metric{font-size:clamp(28px,4vw,43px);font-weight:750;line-height:1.2;letter-spacing:-.025em;font-variant-numeric:tabular-nums}.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.caption{font-size:13px;color:#59686a}.gameBoard{display:grid;gap:2px;background:#bbc9c3;border:8px solid #213e3a;border-radius:8px;overflow:hidden}.cell{aspect-ratio:1;background:#f2f6ee;text-align:center;display:grid;place-items:center;font-size:clamp(10px,2vw,17px);line-height:1}.cell.head{background:#233f39;color:white}.cell.body{background:#608c71;color:#fff}.cell.food{background:#f0c17b;color:#54370d}.cell.active{background:#e6b677;color:#342510}.cell.fixed{background:#53798a;color:white}.gameArea{max-width:700px;margin:auto}.scorebar{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:15px}.scorebar strong{font-size:26px;display:block}.gameControls{display:grid;gap:8px;align-content:start}.gameControls button{padding:9px 8px}.boardSplit{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:18px;align-items:start}.state{font-weight:700;min-height:26px}button[aria-pressed=true]{background:#243f3c;color:white}.gameArena:focus-visible{outline-offset:8px}svg{max-width:100%;height:auto}.paper{aspect-ratio:3/4;width:min(100%,250px);margin:auto;background:#fff;border:1px solid #b6bfb8;box-shadow:0 5px 18px #20352e12}.paperCaption{text-align:center;font-size:13px}.sectionline{border-top:1px solid #c8d2cb;padding-top:18px}.warn{background:#fbecd2;color:#76521e;padding:12px 15px;border-radius:6px}.docGrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px}.readout{font-family:ui-monospace,monospace}.sourceLinks{font-size:13px;margin-top:18px}.sourceLinks a{margin-right:12px}.answerLine{font-size:21px;font-weight:700}.keypad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.keypad button{min-height:43px;padding:8px 5px}textarea{overflow-wrap:anywhere}@media(max-width:720px){.docGrid{grid-template-columns:1fr}.three{grid-template-columns:1fr}.gameArea{max-width:540px}.boardSplit{gap:12px;grid-template-columns:minmax(0,1fr) 112px}}@media(max-width:400px){.boardSplit{grid-template-columns:minmax(0,1fr) 96px;gap:9px}.gameControls button{font-size:13px}.gameBoard{border-width:5px;gap:1px}.keypad{gap:5px}.scorebar{gap:16px}.scorebar strong{font-size:22px}}</style></head><body><main><header><div class="eyebrow">Construction coordination / Fictional review packet</div><h1>One open question. Three linked records.</h1></header>
<section class="result"><div class="strip"><div><span class="eyebrow">RFI01 / Room label R12</span><h2>Which supplied finish reference applies?</h2></div><span class="tag" id="scenarioTag">Baseline: response missing</span></div><div class="three"><div><strong>RFI01</strong><p id="rfiStatus">Open; response missing</p></div><div><strong>S01</strong><p>Sent for review; awaiting design representative response</p></div><div><strong>CP01</strong><p>Proposed; cost and schedule unknown</p></div></div><p class="caption">Record receipt and next questions without treating a response as approval or work authorization.</p></section>
<section class="panel below"><div class="strip"><h2>30-minute coordination agenda</h2><label for="scenario">Review snapshot <select id="scenario"><option value="baseline">Original: missing response</option><option value="received">Separate A01 receipt scenario</option></select></label></div><table><thead><tr><th>Elapsed</th><th>Discussion / output to record</th></tr></thead><tbody><tr><td>00–05</td><td>Previous open items / retain missing evidence</td></tr><tr><td>05–15</td><td>RFI01 / supplied references and exact question</td></tr><tr><td>15–23</td><td>S01 and CP01 / review and authorization boundaries</td></tr><tr><td>23–30</td><td>Owners, route and next check / confirm rather than infer</td></tr></tbody></table><p id="receipt" class="record">Baseline retained: no response reference supplied.</p></section>
<div class="docGrid below"><section class="panel"><h2>Trace a record</h2><div class="buttons" role="group" aria-label="Record selection"><button id="rfi" aria-pressed="true">RFI01</button><button id="sub" aria-pressed="false">S01</button><button id="change" aria-pressed="false">CP01</button></div><h3 id="recordTitle" class="below"></h3><div id="detail" class="record"></div></section><form id="form" class="panel"><h2>Prepare an unsent action note</h2><label for="owner">Responsible party / routing reference</label><input id="owner" placeholder="TO CONFIRM"><label for="source">Actual source / response reference</label><input id="source" placeholder="TO CONFIRM"><label for="requested">Actual requested date / reference</label><input id="requested" placeholder="TO CONFIRM"><label for="response">Actual response reference / verified receipt date</label><input id="response" placeholder="TO CONFIRM"><label for="review">Actual review status / supporting record</label><input id="review" placeholder="TO CONFIRM"><label for="authorization">Actual authorization status / supporting record</label><input id="authorization" placeholder="TO CONFIRM"><label for="next">Next-check reference</label><input id="next" placeholder="TO CONFIRM"><label for="note">Question or missing evidence to request</label><textarea id="note"></textarea><label for="followup">Proposed follow-up</label><textarea id="followup" placeholder="Proposed only; not sent"></textarea><label for="discussion">Actual discussion / decision</label><textarea id="discussion"></textarea><button class="primary below">Prepare local note</button><p id="prepared" class="record" role="status">No action note prepared.</p></form></div>
<section class="panel below"><h2>Unchanged decision boundaries</h2><p>Baseline remains open. In the separate A01 scenario, receipt means only that a response reference was recorded. Its technical content is not supplied. RFI01 is not automatically resolved, S01 is not approved, and CP01 is not an authorized change. Unknown cost or schedule is not zero.</p><p>Actual source reference, requested date, response, responsible party, routing and next check must be supplied by the project parties. This local packet sends no request and supplies no construction or safety direction.</p><a href="https://facilities.umd.edu/info-resources/call-general-contractor-specs/division-1-general-requirements">Progress-meeting record categories reference</a></section><footer class="below muted">Local working example. Edits last only while this page is open.</footer></main><script data-app>
(()=>{
const $=id=>document.getElementById(id),text=(id,v)=>$(id).textContent=String(v),on=(id,e,f)=>$(id).addEventListener(e,f);const esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));function download(name,content,type='text/plain'){const u=URL.createObjectURL(new Blob([content],{type})),a=document.createElement('a');a.href=u;a.download=name;document.body.append(a);a.click();a.remove();setTimeout(()=>URL.revokeObjectURL(u),1000)};
const records={rfi:['RFI01 / clarification','Which supplied finish reference applies to room label R12?\nMissing: supplied finish source, requested date, responsible party, routing and next check.\nOpen until an authorized review records an actual resolution.'],sub:['S01 / review','Linked to RFI01. Sent for review; awaiting design representative response.\nMissing: actual submittal/source and reviewer response references.\nNo approval is recorded.'],change:['CP01 / proposed change','Linked to RFI01 and S01. Proposed only.\nCost: UNKNOWN. Schedule: UNKNOWN.\nNo authorized change or permission to perform work is recorded.']};let selected='rfi';const fields=['owner','source','requested','response','review','authorization','next','note','followup','discussion'],drafts={};const draftKey=()=>$('scenario').value+':'+selected;
function snapshot(received){return {rfi:'Open; '+(received?'A01 receipt only, resolution unconfirmed':'response missing'),submittalApproved:false,changeAuthorized:false,cost:null,schedule:null}}
function render(){const draft=drafts[draftKey()]||{};fields.forEach(id=>$(id).value=draft[id]||'');const received=$('scenario').value==='received',s=snapshot(received);text('scenarioTag',received?'Separate scenario: A01 received':'Baseline: response missing');text('rfiStatus',s.rfi);text('receipt',received?'A01 / Fictional response reference recorded. Contents not supplied. Baseline remains preserved; no resolution or approval inferred.':'Baseline retained: no response reference supplied.');text('recordTitle',records[selected][0]);text('detail',records[selected][1]+(received?'\nA01 scenario: receipt recorded only.':''));Object.keys(records).forEach(id=>$(id).setAttribute('aria-pressed',id===selected));text('prepared','Snapshot or record selected. Prepare a fresh local note.');}
Object.keys(records).forEach(id=>on(id,'click',()=>{selected=id;render()}));on('scenario','change',render);on('form','input',()=>{drafts[draftKey()]=Object.fromEntries(fields.map(id=>[id,$(id).value]));text('prepared','Edits changed. Prepare a fresh local note.')});on('form','submit',e=>{e.preventDefault();const v=id=>$(id).value.trim()||'TO CONFIRM';text('prepared','UNSENT / '+records[selected][0]+' / '+$('scenario').selectedOptions[0].textContent+'\nResponsible party / route: '+v('owner')+'\nActual reference: '+v('source')+'\nRequested date: '+v('requested')+'\nResponse / receipt: '+v('response')+'\nActual review: '+v('review')+'\nActual authorization: '+v('authorization')+'\nNext check: '+v('next')+'\nQuestion: '+v('note')+'\nProposed follow-up: '+v('followup')+'\nActual discussion: '+v('discussion')+'\nSupplied notes do not independently verify resolution, approval or work authorization.');});window.app={snapshot,records};render();
})();
</script>
<script>
// Local calculation controls: no native form submission or sandbox permissions required.
(()=>{const form=document.getElementById('form');if(!form)throw Error('Calculation form missing');const dispatch=()=>form.dispatchEvent(new Event('submit',{bubbles:true,cancelable:true}));const buttons=[...form.querySelectorAll('button')].filter(button=>button.type==='submit');if(buttons.length!==1)throw Error('Expected one calculation control');for(const button of buttons){button.type='button';button.addEventListener('click',dispatch);}form.addEventListener('keydown',event=>{if(event.key==='Enter'&&!event.isComposing&&['INPUT','SELECT'].includes(event.target.tagName)){event.preventDefault();dispatch();}});})();
</script>
</body></html>