WG1 · steering committee preparation packet — Route an escalated issue to the right decision body, distinguish a study item from a decision-ready request, verify authority and missing…
HTML for this example
Select the code and use your copy shortcut. Changes in this preview are temporary.
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>WG1 · steering committee preparation packet</title><style>
*{box-sizing:border-box}body{margin:0;background:#f4f2ee;color:#26384c;font:15px/1.55 system-ui,sans-serif}main{max-width:1140px;padding:30px;margin:auto}h1{font:clamp(31px,4vw,44px)/1.15 Georgia,serif;letter-spacing:-.02em;margin:5px 0 12px}h2{font:26px/1.2 Georgia,serif;margin:0 0 15px}h3{font-size:17px;margin:0 0 10px}p{margin:0 0 12px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:#6f7b87}.small{font-size:13px;color:#687a8c}.packet{background:#fffefb;border:1px solid #d8d6d0;border-radius:6px;box-shadow:0 7px 22px #27394d08;padding:27px;margin-top:25px}.packet-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:1px solid #d8d6d0;padding-bottom:18px;margin-bottom:22px}.tabs,.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}button{font:700 14px system-ui;min-height:44px;padding:10px 17px;border:1px solid #35556f;border-radius:5px;background:#35556f;color:white;cursor:pointer}button.secondary{background:#fffefb;color:#35556f}button[aria-pressed=true]{background:#203e57;color:#fff}:focus-visible{outline:3px solid #b88431;outline-offset:3px}button:disabled{opacity:.5;cursor:default}.layout{display:grid;grid-template-columns:1.35fr 1fr;gap:27px}.datecompare{display:grid;grid-template-columns:1fr 35px 1fr;gap:10px;align-items:center;padding:20px;background:#eef2f6;border-radius:6px;margin:18px 0}.date{font-size:29px;font-weight:750;line-height:1.2;margin:7px 0}.delta{font-weight:700;color:#365c7b}.status{background:#fff1d5;border-left:4px solid #c69a45;padding:16px;margin-top:18px;font-size:14px}.status strong{font-size:17px}.missing{padding-left:20px;font-size:14px;margin:9px 0}.study{background:#eef2f6;padding:20px;border-radius:6px;margin-top:18px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin-top:22px}label{font-size:13px;font-weight:650;display:block}input,textarea{display:block;width:100%;font:15px/1.5 system-ui;color:#26384c;padding:10px;border:1px solid #a9b6c2;border-radius:4px;background:white;margin:6px 0 14px}textarea{min-height:86px;resize:vertical}.section{margin-top:27px}.time-row{display:grid;grid-template-columns:70px 1fr 70px;gap:15px;border-top:1px solid #deded7;padding:15px 0}.time-row p{font-size:14px;margin:5px 0}.time-row input{margin:0;text-align:center}.range{font-size:13px;font-weight:700;color:#627a8d}.total{font-size:28px;font-weight:750}.error{color:#9e3427;font-size:14px;min-height:23px}.preview{background:#f6f7f9;padding:22px;border:1px solid #d4dbe2;border-radius:5px;margin-top:18px}.preview textarea{font:13px/1.7 ui-monospace,Consolas,monospace;min-height:350px;background:white}.outcome{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.stamp{font-size:12px;background:#e8edf1;color:#456276;padding:7px 11px;border-radius:3px;font-weight:700}footer{color:#687a8c;font-size:13px;margin:25px 0;max-width:100ch}[hidden]{display:none!important}@media(max-width:760px){main{padding:23px 16px}.packet{padding:21px}.layout,.fields,.outcome{grid-template-columns:1fr}.datecompare{padding:16px}.date{font-size:27px}.time-row{grid-template-columns:60px 1fr 65px;gap:11px}}@media(max-width:380px){main{padding:20px 12px}.packet{padding:17px}.datecompare{gap:5px;grid-template-columns:1fr 20px 1fr;padding:12px}.date{font-size:23px}.tabs button{flex:1;padding:10px}.time-row{grid-template-columns:1fr 65px}.range{grid-column:1/-1}}
</style></head><body><main><p class="eyebrow">WG1 · shared knowledge-base project</p><h1>Prepare the decision request.</h1><p>Keep the baseline, proposal, evidence gaps and governing authority together.</p><article class="packet"><div class="packet-head"><div><p class="eyebrow">Original fictional steering packet</p><h2 style="margin:0">Study and decision-readiness agenda</h2></div><span class="stamp">No meeting, vote or approval recorded</span></div><div class="tabs"><button id="item-d1" type="button" aria-pressed="true">D1 · Review-date request</button><button id="item-s1" type="button" class="secondary" aria-pressed="false">S1 · Navigation study</button></div><div class="layout" style="margin-top:22px"><section><div id="decision-view"><p class="eyebrow">D1 · originates with WG1</p><h2>One extra review week?</h2><div class="datecompare"><div><p class="small">Maintained baseline</p><div class="date">November 6</div></div><span style="font-size:24px" aria-hidden="true">→</span><div><p class="small">Proposed review date</p><div id="proposal-display" class="date">November 13</div></div></div><p id="date-delta" class="delta">7 calendar days later · content review only</p><p id="decision-ask">Should the authorized decision body move content review from November 6 to November 13, subject to the documented launch and dependency impact?</p><p class="small">Compare retaining November 6 with the requested date. Launch does not automatically move; additional staffing is not assumed.</p></div><div id="study-view" hidden><p class="eyebrow">S1 · originates with WG1</p><h2>Navigation options</h2><div class="study"><h3>Topic-based navigation</h3><p>Organize the knowledge base by subject matter.</p><h3>Team-based navigation</h3><p>Organize the knowledge base by the team responsible.</p></div><p id="study-state" class="delta" style="margin-top:18px">Study; no decision requested.</p><p class="small">Ask WG1 for evidence about how people seek content. An agenda slot does not turn this study into an approved choice.</p></div></section><aside><h3>Preparation status</h3><div class="status"><strong id="readiness">Evidence requests remain</strong><ul id="missing" class="missing"></ul><p class="small" style="margin:8px 0 0">Supplying fields does not establish authority, attendance, a decision or approval.</p></div><label for="proposal-day" style="margin-top:18px">Draft proposed day in November · 1–30<input id="proposal-day" value="13" inputmode="numeric" maxlength="2"></label><p id="proposal-provenance" class="small">Original WG1 proposal: November 13. Baseline November 6 remains unchanged.</p><p id="proposal-error" class="error" role="alert"></p></aside></div><section class="section"><h2>Authority and impact inputs · to confirm</h2><p class="small">Use the organization's actual charter or delegation. No quorum, voting threshold or decision body is borrowed from another institution.</p><div class="fields"><label for="authority">Charter / delegation reference<input id="authority" placeholder="To confirm"></label><label for="body">Authorized decision body / approver<input id="body" placeholder="To confirm"></label><label for="rules">Applicable attendance and decision rules<textarea id="rules" placeholder="To confirm from the governing reference"></textarea></label><label for="launch-impact">Documented launch impact<textarea id="launch-impact" placeholder="To confirm"></textarea></label><label for="dependencies">Review-work dependencies and evidence<textarea id="dependencies" placeholder="Request from WG1"></textarea></label></div></section><section class="section"><div class="row" style="justify-content:space-between"><h2>Editable facilitation sequence</h2><div id="total" class="total">45 minutes</div></div><div id="time-rows"></div><p id="time-error" class="error" role="alert"></p><button id="restore-times" type="button" class="secondary">Restore original agenda times</button></section><section class="section"><h2>Actual outcome record · blank before the meeting</h2><p class="small">Record actual evidence after the meeting. Entries here are user-supplied notes, not verified decisions or sent communications.</p><div class="outcome"><label for="outcome-item">Item ID for this actual outcome<input id="outcome-item" placeholder="Enter S1 or D1 when recording an outcome"></label><label for="outcome">Actual decision or unresolved status<textarea id="outcome"></textarea></label><label for="conditions">Conditions / outstanding requests<textarea id="conditions"></textarea></label><label for="decided-by">Actual decision-maker/body<input id="decided-by"></label><label for="decision-reference">Actual authority reference<input id="decision-reference"></label><label for="decision-date">Decision date<input id="decision-date" type="date"></label><label for="owner">Follow-up owner<input id="owner"></label></div><p class="small">Planned communication recipient: WG1. Actual route and sent evidence must be recorded in the maintained process.</p></section><section class="preview"><div class="row" style="justify-content:space-between"><h2>Current preparation packet</h2><button id="select-packet" type="button" class="secondary">Select text</button></div><p class="small">Copy the exact plain text manually into the required agenda or working record. Invalid dates or phase times clear this preview.</p><label for="packet-text">Full packet · both S1 and D1 included<textarea id="packet-text" readonly></textarea></label><p id="select-status" class="small" role="status"></p></section></article><footer>Original fictional preparation companion. The proposed date concerns content review, not an approved launch change. No meeting, vote, approval, staffing availability, authority, notification, confidentiality guarantee, native document export or persistence is created by these controls. Keep actual agenda/minutes/decision logs in the authorized organizational workflow.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);let selected='d1';const required=[['authority','Charter or delegation reference'],['body','Authorized body or approver'],['rules','Applicable attendance/decision rules'],['launch-impact','Launch-impact evidence'],['dependencies','Review-work dependency evidence']];const blocks=[['Previous actions','Review maintained records of what followed actual previous decisions.',5],['Status changes','Present relevant scope, schedule, dependency and escalation changes.',8],['S1 study','Compare navigation options and request user evidence; no immediate decision requested.',10],['D1 readiness and discussion','Check the date-change ask, authority, launch impact and missing dependencies.',15],['Record and route','Read back actual outcomes, outstanding requests, owners and route to WG1.',7]];
function dateChange(raw){if(!/^\d{1,2}$/.test(raw.trim())||+raw<1||+raw>30)return{error:'Enter a whole proposed day from 1 to 30 in November.'};return{day:+raw,delta:+raw-6};}
function agenda(values){if(values.some(v=>!/^\d+$/.test(v.trim())||!Number.isSafeInteger(+v)||+v<1||+v>180))return{error:'Enter whole positive minutes from 1 to 180 for every agenda block.'};let elapsed=0;return{ranges:values.map(v=>{let start=elapsed;elapsed+=+v;return start+'–'+elapsed+' min';}),total:values.reduce((a,b)=>a+(+b),0)};}
function readiness(values){return required.filter(([id])=>!values[id].trim()).map(([,label])=>label);}
function update(){const d=dateChange($('proposal-day').value),a=agenda(blocks.map((_,i)=>$('minutes-'+i).value));$('proposal-display').textContent=d.error?'Pending':'November '+d.day;$('date-delta').textContent=d.error?'No current date comparison':Math.abs(d.delta)+' calendar days '+(d.delta<0?'earlier':d.delta>0?'later':'difference')+' · content review only';$('decision-ask').textContent=d.error?'Correct the proposed day before preparing the date-change request.':'Should the authorized decision body move content review from November 6 to November '+d.day+', subject to the documented launch and dependency impact?';$('proposal-error').textContent=d.error||'';$('total').textContent=a.error?'Pending':a.total+' minutes';$('time-error').textContent=a.error||(a.total===45?'':'Current agenda differs from the original 45 minutes by '+Math.abs(a.total-45)+' minutes. Review the meeting length.');blocks.forEach((_,i)=>$('range-'+i).textContent=a.error?'Not calculated':a.ranges[i]);const values=Object.fromEntries(required.map(([id])=>[id,$(id).value]));const gaps=readiness(values);$('missing').replaceChildren();for(const gap of gaps){const li=document.createElement('li');li.textContent=gap+' · to confirm';$('missing').appendChild(li);}$('readiness').textContent=gaps.length?'Evidence requests remain':'Inputs supplied · human authority review required';const invalid=!!d.error||!!a.error;$('packet-text').value=invalid?'':['WG1 · SHARED KNOWLEDGE-BASE PREPARATION PACKET','Fictional source; no meeting, vote or approval recorded.','S1: STUDY; NO DECISION REQUESTED. Compare topic-based versus team-based navigation. Missing user-seeking evidence.','D1: Baseline November 6; proposed November '+d.day+'; '+Math.abs(d.delta)+' calendar days '+(d.delta<0?'earlier':d.delta>0?'later':'difference')+'. Content review only; launch impact is not inferred.',$('decision-ask').textContent,'Options: retain November 6; propose November '+d.day+'. No staffing availability is assumed.','AUTHORITY / IMPACT INPUTS',...required.map(([id,label])=>label+': '+(values[id].trim()||'TO CONFIRM')),'PREPARATION STATUS: '+$('readiness').textContent,'AGENDA · '+a.total+' MINUTES',...blocks.map((b,i)=>a.ranges[i]+' · '+b[0]+': '+b[1]),'ACTUAL OUTCOME RECORD · USER-SUPPLIED, UNVERIFIED',...['outcome-item','outcome','conditions','decided-by','decision-reference','decision-date','owner'].map(id=>id+': '+($(id).value.trim()||'[not supplied]')),'Planned recipient: WG1. Actual communication route/sent evidence: not supplied.','This preparation copy does not approve the proposal or change the maintained baseline.'].join('\n');$('select-packet').disabled=invalid;$('select-status').textContent='';}
blocks.forEach((b,i)=>{const row=document.createElement('div');row.className='time-row';const range=document.createElement('span');range.id='range-'+i;range.className='range';row.appendChild(range);const div=document.createElement('div'),strong=document.createElement('strong'),p=document.createElement('p');strong.textContent=b[0];p.textContent=b[1];div.appendChild(strong);div.appendChild(p);row.appendChild(div);const label=document.createElement('label');label.textContent='Minutes';label.setAttribute('for','minutes-'+i);const input=document.createElement('input');input.id='minutes-'+i;input.value=String(b[2]);input.setAttribute('inputmode','numeric');input.setAttribute('aria-label',b[0]+' minutes');input.addEventListener('input',update);label.appendChild(input);row.appendChild(label);$('time-rows').appendChild(row);});for(const id of['d1','s1'])$('item-'+id).addEventListener('click',()=>{selected=id;$('decision-view').hidden=id!=='d1';$('study-view').hidden=id!=='s1';for(const key of['d1','s1'])$('item-'+key).setAttribute('aria-pressed',String(key===id));});for(const id of['proposal-day',...required.map(([id])=>id),'outcome-item','outcome','conditions','decided-by','decision-reference','decision-date','owner'])$(id).addEventListener('input',update);$('restore-times').addEventListener('click',()=>{blocks.forEach((b,i)=>$('minutes-'+i).value=String(b[2]));update();});$('select-packet').addEventListener('click',()=>{$('packet-text').focus();$('packet-text').select();$('select-status').textContent='Packet text selected. Use your device’s copy command; no approval or communication has occurred.';});update();
</script></body></html>