Review before, day-of, and after-interview tasks while keeping a missing joining route visible

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>Interview preparation · keep the missing route visible</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f0e7;color:#343f36;font:16px/1.55 system-ui,sans-serif}main{max-width:960px;margin:auto;padding:24px}h1{font-size:34px;line-height:1.16}h2{font-size:24px}h3{font-size:19px}.kicker{letter-spacing:.06em;color:#67745d}.card{padding:20px;border:1px solid #cbd0bd;border-radius:7px;background:#fff;margin:18px 0}.missing{padding:16px;border-left:6px solid #b6782d;background:#fff2ce}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,input,textarea,select{font:inherit;color:inherit}button{padding:10px 14px;min-height:44px;border:1px solid #68805a;border-radius:5px;background:white;cursor:pointer}button[aria-pressed=true]{color:white;background:#506c42}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b66b25;outline-offset:3px}.task{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:12px 0;border-bottom:1px solid #d4dbc9}.task input{width:25px;height:25px;margin:10px 0}.task button{text-align:left;width:100%}.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}.notes label{display:block;font-weight:650;margin:14px 0 6px}textarea,select{width:100%;min-width:0;max-width:100%;padding:10px;border:1px solid #8a9980;border-radius:4px;background:white}textarea{min-height:95px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#79511d}footer{margin:24px 0;color:#62725a}[hidden]{display:none!important}@media(max-width:600px){main{padding:12px}h1{font-size:28px}.split{grid-template-columns:1fr}.card{padding:14px}}</style></head><body><main><p class="kicker">FICTIONAL MUSEUM-PROGRAM ASSISTANT · PERSONAL PREPARATION</p><h1>A checked task does not supply a missing instruction</h1><section class="card"><h2>The supplied invitation</h2><p><strong>October 25, 2026 · 14:00 America/New_York · Virtual</strong></p><p>Submitted packet reference: Resume R3. Role needs: visitor scheduling and clear instructions.</p><p id="route" class="missing"><strong>Joining route: Awaiting confirmation.</strong> No joining instructions or employer reply are supplied. Obtain the actual route using the employer's supplied contact method.</p></section><div class="tabs" aria-label="Preparation phase"><button id="before" type="button" aria-pressed="true">Before</button><button id="day" type="button" aria-pressed="false">Day of</button><button id="after" type="button" aria-pressed="false">After</button></div><p id="progress" role="status">0 of 7 local checklist marks. This is not a readiness score.</p><div class="split"><section class="card"><h2 id="phase-title">Before the interview</h2><div id="tasks"></div></section><section class="card" aria-live="polite"><h2 id="task-title"></h2><p><strong>Source:</strong> <span id="task-source"></span></p><p><strong>Evidence needed:</strong> <span id="task-evidence"></span></p><p><strong>Next action:</strong> <span id="task-next"></span></p><p>The local check mark records your selection. It does not confirm an employer response or verify the evidence.</p></section></div><section class="card notes"><h2>Your preparation and actual follow-up notes</h2><p>Examples are blank until you supply your own experience. Keep an employer-stated next step separate from your planned follow-up.</p><div id="notes"></div></section><section class="card notes"><h2>Blank interview checklist header</h2><div id="fields"></div><div class="tabs"><button id="build" type="button">Assemble preparation review</button><button id="reset" type="button">Reset local work</button></div><p id="status" role="status"></p><section id="confirm" hidden><h3>Clear all typed notes, header fields and local marks?</h3><div class="tabs"><button id="keep" type="button">Keep my work</button><button id="clear" type="button">Clear local work</button></div></section><section id="review" class="card copy" hidden><h3>Your supplied preparation review</h3><div id="copy"></div><p>Review copy only. No interview result, employer answer or joining route has been inferred.</p></section></section><footer>Temporary work in this open page. No meeting launch, message sending, reminder or saved applicant record. The invitation's original time zone stays unchanged.</footer></main><script>'use strict';const $=id=>document.getElementById(id),data={before:[['research','Review the employer and role','Supplied role note: visitor scheduling and clear instructions.','Your current employer research notes, with references.','Check the actual job description and employer materials.'],['examples','Practice two relevant examples','Role note and the actual experience you supply.','One real scheduling example and one explanation-of-steps example; your personal actions and supported outcome.','Practice aloud and clarify what you personally did.'],['packet','Review the submitted packet','Resume R3 reference in the supplied preparation record.','The actual resume copy sent with the application.','Find Resume R3 and read it beside the role note.']],day:[['setup','Check the intended audio/video setup','Virtual format in the supplied invitation.','Your own completed equipment check; none is supplied here.','Use the actual intended equipment and instructions.'],['route-task','Locate confirmed joining instructions','The invitation supplies no joining route.','Actual employer-supplied joining instructions.','Obtain the missing route; leave the unresolved detail visible.']],after:[['record','Record topics and answers actually discussed','Actual interview discussion, once it occurs.','Your notes of topics, unanswered questions and supplied contact details.','Record what happened without inventing replies.'],['follow','Separate stated and planned follow-up','Actual employer next-step wording, if provided.','Employer-stated next step/date separately from your chosen follow-up.','Check instructions before planning a follow-up.']]};let phase='before',selected='research';const marked=new Set();function detail(){const row=Object.values(data).flat().find(r=>r[0]===selected);$('task-title').textContent=row[1];for(const[i,id]of ['task-source','task-evidence','task-next'].entries())$(id).textContent=row[i+2];}function progress(){$('progress').textContent=marked.size+' of 7 local checklist marks. This is not a readiness score.';}function render(){const focusId=document.activeElement?.id;$('tasks').replaceChildren();$('phase-title').textContent={before:'Before the interview',day:'Day of the interview',after:'After the interview'}[phase];for(const row of data[phase]){const div=document.createElement('div');div.className='task';const input=document.createElement('input');input.type='checkbox';input.id='mark-'+row[0];input.setAttribute('aria-label','Local mark: '+row[1]);input.checked=marked.has(row[0]);input.addEventListener('change',()=>{if(input.checked)marked.add(row[0]);else marked.delete(row[0]);progress();$('review').hidden=true;});const button=document.createElement('button');button.type='button';button.id='task-'+row[0];button.textContent=row[1];button.setAttribute('aria-pressed',String(row[0]===selected));button.addEventListener('click',()=>{selected=row[0];render();detail();});div.append(input,button);$('tasks').append(div);}for(const id of ['before','day','after'])$(id).setAttribute('aria-pressed',String(phase===id));if(focusId&&focusId.startsWith('task-')&&$(focusId))$(focusId).focus();}for(const id of ['before','day','after'])$(id).addEventListener('click',()=>{phase=id;selected=data[id][0][0];render();detail();});render();detail();const notes=[['scheduling','Real visitor-scheduling example: situation, my actions, supported outcome'],['instructions','Real explanation-of-steps example: what I explained and how I checked understanding'],['questions','Questions to ask about scheduling, instructions or next steps'],['topics','Topics actually discussed'],['unanswered','Questions still open'],['contacts','Contact details actually provided'],['employer-step','Employer-stated next step and date, with wording/reference'],['my-plan','My self-planned follow-up and chosen date']];const fields=[['role','My role and relevant job-description reference'],['invitation','Actual date, time and original time zone'],['format','Interview format'],['joining','Joining instructions, or the unresolved detail'],['packet-reference','Submitted packet reference'],['source','Invitation/contact source reference']];for(const[container,rows]of [['notes',notes],['fields',fields]])for(const[id,label]of rows){const l=document.createElement('label'),t=document.createElement('textarea');l.htmlFor=id;l.textContent=label;t.id=id;t.addEventListener('input',()=>{$('review').hidden=true;$('status').textContent='Notes changed. Assemble again to review current words.';});$(container).append(l,t);}const all=fields.concat(notes);$('build').addEventListener('click',()=>{const missing=['role','invitation','format','joining'].filter(id=>!$(id).value.trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete: '+missing.map(id=>({role:'role',invitation:'date/time/time zone',format:'format',joining:'joining instructions or unresolved detail'})[id]).join(', ')+'.';return;}$('copy').replaceChildren();for(const[id,label]of all){const h=document.createElement('h3'),p=document.createElement('p');h.textContent=label;p.textContent=$(id).value.trim()||'Not supplied.';$('copy').append(h,p);}const p=document.createElement('p');p.textContent='Local checklist marks: '+marked.size+' of 7. These marks do not establish readiness.';$('copy').append(p);$('review').hidden=false;$('status').textContent='Preparation review assembled from your supplied words.';});$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirm').hidden=true;$('reset').focus();});$('clear').addEventListener('click',()=>{for(const[id]of all)$(id).value='';marked.clear();render();progress();$('confirm').hidden=true;$('review').hidden=true;$('status').textContent='Typed work and local marks cleared. Fictional invitation and missing joining route are unchanged.';$('scheduling').focus();});</script></body></html>