Filter three search records and inspect their submitted materials and next actions

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>Job search · next action desk</title><style>*{box-sizing:border-box}body{margin:0;background:#eff2f7;color:#28384e;font:16px/1.55 system-ui,sans-serif}main{max-width:1000px;margin:auto;padding:24px}h1{font-size:34px;line-height:1.15}h2{font-size:24px}h3{font-size:19px}.eyebrow{letter-spacing:.06em;color:#586e8d}.card{padding:20px;background:#fff;border:1px solid #c7d1df;border-radius:8px;margin:18px 0}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,input,textarea,select{font:inherit;color:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #567090;border-radius:5px;background:white;cursor:pointer}button[aria-pressed=true]{background:#315a85;color:#fff}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #ba7629;outline-offset:3px}.desk{display:grid;grid-template-columns:1fr 1.3fr;gap:18px}.records{display:grid;align-content:start;gap:12px}.records button{text-align:left;background:#fff}.records button[aria-pressed=true]{background:#315a85;color:#fff}.records strong{display:block}.packet{border-left:6px solid #557e9b;background:#eff6fc;padding:14px}.missing{background:#fff5df;border-left:5px solid #bd8a38;padding:12px}label{display:block;font-weight:650;margin:14px 0 6px}input,textarea,select{width:100%;max-width:100%;min-width:0;padding:10px;border:1px solid #899bb1;background:white;border-radius:4px}textarea{min-height:90px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status,#edit-status{font-weight:650;color:#73501d}footer{margin:24px 0;color:#526982}[hidden]{display:none!important}@media(max-width:600px){main{padding:12px}h1{font-size:28px}.desk{grid-template-columns:1fr}.card{padding:14px}}</style></head><body><main><p class="eyebrow">FICTIONAL SEARCH SNAPSHOT · OCTOBER 23, 2026</p><h1>Which application needs your next action?</h1><p id="counts">2 submitted applications · 1 saved prospect</p><p>Submitted packets and actual contact stay separate from your local plans. Text references below are not download links.</p><div class="toolbar" aria-label="Opportunity filter"><button id="all" type="button" aria-pressed="true">All records</button><button id="submitted" type="button" aria-pressed="false">Submitted</button><button id="prospect" type="button" aria-pressed="false">Prospects</button><button id="today" type="button" aria-pressed="false">Next actions for October 23</button></div><p id="filter-summary" role="status">All records · 3 shown</p><div class="desk"><nav id="records" class="records" aria-label="Opportunity records"></nav><section id="detail" class="card" aria-live="polite"><h2 id="role"></h2><p id="actual"></p><div class="packet"><h3>Submitted packet</h3><p id="packet"></p></div><h3>Latest actual contact</h3><p id="contact"></p><p id="missing" class="missing"></p><label for="local-note">My next planned action · temporary</label><textarea id="local-note"></textarea><label for="local-date">My chosen action date · not an employer deadline</label><input id="local-date" type="date"><button id="apply" type="button">Apply local plan and refresh filter</button><p id="edit-status" role="status"></p></section></div><section class="card"><h2>Blank opportunity scaffold</h2><p>Build a separate local record from your own words. The three fictional source records above stay unchanged.</p><div id="fields"></div><div class="toolbar"><button id="build" type="button">Build local opportunity review</button><button id="reset" type="button">Reset typed work</button></div><p id="status" role="status"></p><section id="confirm" hidden><h3>Clear the blank scaffold and local plan edits?</h3><div class="toolbar"><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 opportunity</h3><div id="copy"></div><p>This review does not submit an application or establish an employer response.</p></section></section><footer>Temporary notes in this open page only. No messages, reminders, hiring-system connection or saved applicant record. Silence is not a rejection.</footer></main><script>'use strict';const $=id=>document.getElementById(id),records=[{id:'a1',employer:'Cedar Exhibits',role:'Program Assistant',state:'submitted',actual:'Applied October 20, 2026.',packet:'Resume R3 / Letter L2',contact:'Acknowledgement received. No further contact supplied.',missing:'An acknowledgement is not an interview invitation.',note:'Follow up, subject to the employer’s instructions.',date:'2026-10-27'},{id:'a2',employer:'North Archive',role:'Visitor Coordinator',state:'prospect',actual:'Saved prospect. No application has been sent.',packet:'No submitted packet.',contact:'No employer contact supplied.',missing:'Required writing sample still to check.',note:'Check the writing-sample requirement.',date:'2026-10-23'},{id:'a3',employer:'River Studio',role:'Operations Assistant',state:'submitted',actual:'Applied October 18, 2026.',packet:'Resume R2 / Letter L1',contact:'Interview invitation: October 25, 2026, 14:00 America/New_York. Joining route absent.',missing:'Obtain the joining route; the original invitation time zone stays visible.',note:'Confirm the joining route.',date:'2026-10-23'}];let selected='a1',filter='all';const plans=Object.fromEntries(records.map(r=>[r.id,{note:r.note,date:r.date}])),drafts=Object.fromEntries(records.map(r=>[r.id,{note:r.note,date:r.date}]));function shown(){return records.filter(r=>filter==='all'||filter==='today'&&plans[r.id].date==='2026-10-23'||r.state===filter);}function list(){const rows=shown();$('records').replaceChildren();for(const r of rows){const b=document.createElement('button');b.type='button';b.id='record-'+r.id;b.setAttribute('aria-pressed',String(selected===r.id));const h=document.createElement('strong');h.textContent=r.id.toUpperCase()+' · '+r.employer;const p=document.createElement('span');p.textContent=r.role+' · '+(r.state==='submitted'?'Submitted':'Prospect')+' · My action '+(plans[r.id].date||'date not supplied');b.append(h,p);b.addEventListener('click',()=>{selected=r.id;detail();list();});$('records').append(b);}if(!rows.length){const p=document.createElement('p');p.textContent='No records match this filter.';$('records').append(p);}$('filter-summary').textContent=({'all':'All records',submitted:'Submitted',prospect:'Prospects',today:'Next actions for October 23'})[filter]+' · '+rows.length+' shown';for(const id of ['all','submitted','prospect','today'])$(id).setAttribute('aria-pressed',String(id===filter));}function detail(){const r=records.find(r=>r.id===selected);$('role').textContent=r.id.toUpperCase()+' · '+r.employer+' · '+r.role;for(const id of ['actual','packet','contact','missing'])$(id).textContent=r[id];$('local-note').value=drafts[selected].note;$('local-date').value=drafts[selected].date;$('edit-status').textContent='This record remains open when a filter changes. Only the left-hand list is filtered.';}for(const id of ['all','submitted','prospect','today'])$(id).addEventListener('click',()=>{filter=id;list();});for(const[id,key]of [['local-note','note'],['local-date','date']])$(id).addEventListener('input',()=>{drafts[selected][key]=$(id).value;$('edit-status').textContent='Draft changed. Apply the local plan to refresh the filter list.';});$('apply').addEventListener('click',()=>{plans[selected]={...drafts[selected]};list();$('edit-status').textContent='Local plan applied; filter results refreshed. Actual submission and contact records are unchanged.';});list();detail();const fields=[['employer','Employer'],['role-input','Role'],['source','Saved posting or source reference'],['application','Actual application date, if submitted'],['materials','Submitted document versions'],['latest','Latest actual contact'],['event','Event date, time and original time zone'],['evidence','Contact or submission evidence reference'],['next','My next planned action'],['planned','My chosen action date'],['gaps','Missing details to check']];for(const[id,label]of fields){const l=document.createElement('label'),t=document.createElement('textarea');l.htmlFor=id;l.textContent=label;t.id=id;$('fields').append(l,t);}const label=document.createElement('label');label.htmlFor='own-state';label.textContent='Actual application state · required';const select=document.createElement('select');select.id='own-state';for(const text of ['Choose a state','Prospect · not sent','Submitted · application actually sent']){const o=document.createElement('option');o.value=text==='Choose a state'?'':text;o.textContent=text;select.append(o);}$('fields').append(label,select);const ids=fields.map(x=>x[0]).concat('own-state');for(const id of ids)$(id).addEventListener('input',()=>{$('review').hidden=true;$('status').textContent='Scaffold changed. Build again to review current words.';});$('build').addEventListener('click',()=>{const missing=['employer','role-input','own-state'].filter(id=>!$(id).value.trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete: '+missing.map(id=>({employer:'employer','role-input':'role','own-state':'actual state'})[id]).join(', ')+'.';return;}$('copy').replaceChildren();for(const[id,title]of fields.concat([['own-state','Actual state']])){const h=document.createElement('h3'),p=document.createElement('p');h.textContent=title;p.textContent=$(id).value.trim()||'Not supplied.';$('copy').append(h,p);}$('review').hidden=false;$('status').textContent='Local opportunity review built. Fictional submission counts remain 2 submitted / 1 prospect.';});$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirm').hidden=true;$('reset').focus();});$('clear').addEventListener('click',()=>{for(const id of ids)$(id).value='';for(const r of records){plans[r.id]={note:r.note,date:r.date};drafts[r.id]={note:r.note,date:r.date};}list();detail();$('review').hidden=true;$('confirm').hidden=true;$('status').textContent='Blank fields cleared and fictional local plans restored.';$('employer').focus();});</script></body></html>