Meeting evidence checklist

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>Meeting evidence checklist</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">M01 · Preparation desk · Fictional snapshot</div><h1>What is actually confirmed?</h1><p class="lede">Review supplied evidence and the next action for each meeting prerequisite.</p><section class="panel hero"><div class="row"><div style="flex:1"><div class="big" id="count">2 confirmed</div><p class="muted" id="remaining">3 unresolved · October 13, 2026</p></div><span class="badge warn">Decision still unrecorded</span></div></section><div class="row"><div style="flex:1;min-width:220px"><label for="scope">Pre-read required for this review</label><select id="scope"><option value="v2">Version 2 · supplied baseline</option><option value="v3">Version 3 · change scenario</option></select></div><div><label for="filter">Show checks</label><select id="filter"><option value="all">All five</option><option value="unresolved">Unresolved only</option></select></div></div><section class="panel" id="checks"></section><section class="split"><div class="panel"><h2>Note-taker request</h2><span class="badge warn">Unsent draft</span><p>Please confirm whether you can take notes for M01 and acknowledge the agreed recordkeeping role. The preparation log currently records the role as proposed, with acceptance not yet supplied.</p><label for="invite">Invitation record</label><select id="invite"><option value="draft">Draft exists; sending not evidenced</option><option value="sent">Hypothetical sent record</option></select><p id="inviteState">No sending evidence or participant acceptance supplied.</p><p class="small">Actual sender, contact route, recipient, sending time and response reference: to confirm. A scenario selection does not send a message.</p></div><div class="panel"><h2>Decision record</h2><p class="small">Blank actual record. These fields do not approve the meeting.</p><div class="grid"><div><label for="reviewer">Reviewer</label><input id="reviewer"></div><div><label for="reviewDate">Review date</label><input type="date" id="reviewDate"></div></div><label for="gaps">Unresolved gaps</label><textarea id="gaps"></textarea><label for="decision">Organization's decision</label><input id="decision"><label for="followup">Follow-up owner and outcome</label><textarea id="followup"></textarea><button id="clear">Clear decision fields</button></div></section><details><summary>Evidence boundaries and revision history</summary><p>E01 supports date/location only; actual timing and location details remain to confirm. E04 is a supplied version 2 pre-read. Requiring version 3 retains E04 in history but makes the current C04 unresolved. No version 3 evidence, date or reviewer is supplied. Proposed role holders have not accepted an assignment. Counts are evidence counts, not a quality score or permission to proceed. Edits stay in this page until reload.</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 rows=[['C01','Date and location','Organizer','E01 supplied','Confirm actual timing and location details.'],['C02','Participant confirmations','Organizer','No participant responses supplied','Obtain actual confirmations and references.'],['C03','Note-taker acceptance','Organizer','Role proposed; acceptance missing','Request acceptance of the recordkeeping role.'],['C04','Required pre-read','Material owner','E04 · version 2 supplied','Match supplied material to the required version.'],['C05','Display check','Actual check owner: to confirm','Not performed','Identify the owner and record the actual check.']];
function snapshot(version){if(!['v2','v3'].includes(version))throw Error('Unknown version');return rows.map((r,i)=>({id:r[0],title:r[1],role:r[2],evidence:i===3&&version==='v3'?'Current v3 evidence missing; E04 v2 retained in history':r[3],next:r[4],confirmed:i===0||(i===3&&version==='v2')}))}
function render(){const a=snapshot($('scope').value),n=a.filter(r=>r.confirmed).length;put('count',n+' confirmed');put('remaining',(5-n)+' unresolved · October 13, 2026');$('checks').innerHTML=a.filter(r=>$('filter').value==='all'||!r.confirmed).map(r=>'<article class="rule"><div class="row"><h3 style="flex:1">'+r.id+' · '+r.title+'</h3><span class="badge '+(r.confirmed?'':'warn')+'">'+(r.confirmed?'Confirmed':'Unresolved')+'</span></div><p>'+r.evidence+'</p><p class="small">Role: '+r.role+' · Next: '+r.next+'</p></article>').join('')}
$('scope').addEventListener('change',render);$('filter').addEventListener('change',render);$('invite').addEventListener('change',()=>put('inviteState',$('invite').value==='draft'?'No sending evidence or participant acceptance supplied.':'Scenario only: sent does not mean accepted; participant responses remain missing.'));$('clear').addEventListener('click',()=>{for(const id of ['reviewer','reviewDate','gaps','decision','followup'])$(id).value='';$('reviewer').focus()});globalThis.Tool={snapshot};render();</script></body></html>