Student action desk

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>Student action desk</title><style>*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:var(--bg,#eef1f4);color:var(--ink,#233449);font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}main{max-width:1040px;margin:auto;padding:26px 28px 44px}header{margin-bottom:20px}h1{font-size:clamp(26px,4vw,36px);letter-spacing:-.035em;line-height:1.15;margin:5px 0 10px}h2{font-size:21px;line-height:1.3;margin:0 0 15px}h3{font-size:17px;margin:0 0 9px}p{margin:8px 0 16px}.kicker{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:750;color:var(--accent,#315b87)}.muted,small{color:#556473}.panel{margin:20px 0;padding:24px;border:1px solid var(--line,#ccd5df);border-radius:10px;background:#fff}.hero{padding:24px;background:var(--hero,#183b5c);color:#fff;border-radius:12px;margin:18px 0}.hero .kicker,.hero small{color:#d9e5ef}.big{font-size:clamp(32px,5vw,52px);line-height:1.15;font-weight:750;letter-spacing:-.035em;overflow-wrap:anywhere;margin:10px 0 15px}.row{display:flex;flex-wrap:wrap;gap:15px;align-items:end}.row>label{flex:1;min-width:140px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.thirds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}label{display:block;font-size:14px;font-weight:650}input,select,textarea{font:inherit;font-size:16px;color:inherit;display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid #a9b4c1;border-radius:6px;background:white;min-width:0}input[type=checkbox]{display:inline;width:auto;margin:0 8px 0 0;accent-color:var(--accent,#315b87)}textarea{min-height:100px;resize:vertical}button{font:inherit;font-weight:650;min-height:44px;border:1px solid var(--accent,#315b87);border-radius:6px;background:var(--accent,#315b87);color:white;padding:10px 16px;cursor:pointer}button.secondary{background:white;color:var(--accent,#315b87)}button:disabled{opacity:.5;cursor:default}button[aria-pressed=true]{box-shadow:0 0 0 3px #eab655}button:hover:not(:disabled){filter:brightness(.94)}:focus-visible{outline:3px solid #e5a72f;outline-offset:3px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}[hidden]{display:none!important}.error{color:#a3232a;font-weight:650}.error:not(:empty){padding:12px;background:#fff0ed;border-left:4px solid #ab3439;margin:14px 0}.note{padding:14px;background:#edf2f6;border-radius:6px;margin:14px 0}.mono,pre{font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.7;margin:0}.mono{overflow-wrap:anywhere}table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px}th,td{text-align:left;vertical-align:top;overflow-wrap:anywhere;padding:11px 8px;border-bottom:1px solid #d4dce4}th{font-size:12px;text-transform:uppercase;letter-spacing:.035em;color:#536372}th:first-child,td:first-child{padding-left:0}.tag{display:inline-block;padding:4px 8px;border:1px solid currentColor;border-radius:4px;font-size:12px;font-weight:750}.rule{border-top:1px solid #cbd4dd;padding-top:18px}.line{height:30px;border-bottom:1px solid #aab5bf}.stat{font-size:34px;line-height:1.15;font-weight:750}.stat small{font:14px system-ui;display:block;margin-top:8px}details{margin:20px 0;border-top:1px solid #cbd4dd;padding:18px 0}summary{font-weight:700;cursor:pointer}details p{margin-top:15px}a{color:var(--accent,#315b87)}footer{font-size:13px;color:#556473;margin-top:25px}fieldset{min-width:0;border:1px solid #c8d2db;border-radius:7px;padding:18px;margin:15px 0}legend{font-weight:750;padding:0 6px}@media(max-width:720px){main{padding:20px}.panel,.hero{padding:20px}.thirds{gap:10px}}@media(max-width:540px){main{padding:16px}.grid,.thirds{grid-template-columns:1fr}.panel,.hero{padding:18px}.row{gap:12px}.row>label{min-width:100px}h1{font-size:27px}th,td{padding:10px 5px;font-size:13px}.big{font-size:37px}}.surface{background:white;border:1px solid #ccd5df;border-radius:10px;padding:24px;margin:18px 0}.metrics{display:flex;gap:34px;flex-wrap:wrap}.metric b{font-size:clamp(32px,5vw,52px);line-height:1.1;display:block;letter-spacing:-.04em}.metric span{display:block;margin-top:8px;font-size:14px}.strip{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px;margin:22px 0}.unit{padding:10px 3px;text-align:center;background:#e5f0eb;border-bottom:4px solid #327660;font-size:13px;font-weight:700}.unit.rework{background:#fff0d5;border-color:#aa701d}.unit.fail{background:#f9e2e0;border-color:#ab3d35}.ledger-row{display:grid;grid-template-columns:100px 1fr 140px;gap:18px;padding:18px 0;border-bottom:1px solid #d2dbe3;align-items:start}.ledger-row p{margin:5px 0}.amount{text-align:right;font-size:22px;font-weight:750}.pill{display:inline-block;border-radius:20px;background:#e7edf2;padding:5px 10px;font-size:12px;font-weight:700}.timeline{border-left:3px solid #c7d4de;padding:0 0 0 22px;margin:16px 0}.timeline article{padding:10px 0 18px}.timeline h3{margin-bottom:5px}.timeline p{margin:5px 0}.artifact{font-family:Georgia,serif}.warning{background:#fff3db;border-left:4px solid #a66d18;padding:15px}.empty{color:#5d6771;font-style:italic}.check{color:#22694f}.bad{color:#9a332e}button.linklike{padding:8px 12px;min-height:40px;background:white;color:var(--accent,#315b87)}@media(max-width:540px){.surface{padding:18px}.ledger-row{grid-template-columns:65px 1fr;gap:12px}.ledger-row .amount{grid-column:2;text-align:left}.strip{gap:3px}.unit{font-size:11px;padding:8px 0}.metrics{gap:22px}.metric b{font-size:38px}}.hero{background:#404f76}.hero h2{font:clamp(24px,4vw,31px)/1.2 Georgia,serif}.hero .metric b{font-size:34px}.hero .metrics{gap:25px;margin-top:24px}.ledger-row h3{margin:0}</style></head><body style="--bg:#f2f3f9;--accent:#506697"><main><header><div class="kicker">Fictional working example</div><h1>Student action desk</h1><p class="muted">Review what needs attention without losing earlier submission evidence.</p></header><section class="hero"><div class="kicker">Fixed snapshot · October 13, 2026</div><h2>Next: clarify A01’s redo request</h2><p>Keep receipt S01, confirm the new requirements and deadline, then prepare v2.</p><div class="metrics"><div class="metric"><b>1</b><span>Redo pending</span></div><div class="metric"><b>1</b><span>Due today · not submitted</span></div><div class="metric"><b>1</b><span>Draft only</span></div><div class="metric"><b>1</b><span>Source status unknown</span></div></div></section><div class="row"><label for="course">Course<select id="course"><option value="all">All courses</option><option value="C01">C01</option><option value="C02">C02</option></select></label><label for="status">Action state<select id="status"><option value="all">All states</option><option value="redo">Redo pending</option><option value="today">Due today</option><option value="draft">Draft only</option><option value="unknown">Source unknown</option></select></label></div><section class="surface"><h2 id="listTitle"></h2><div id="assignments"></div></section><section class="panel"><label for="assignment">Inspect assignment evidence<select id="assignment"><option value="C01/A01">C01 / A01 · Redo</option><option value="C01/A02">C01 / A02 · Due today</option><option value="C02/A03">C02 / A03 · Draft</option><option value="C02/A04">C02 / A04 · Unknown</option></select></label><div id="evidence" class="timeline"></div><p id="action" class="note"></p></section><section class="panel"><h2>Actual next-action worksheet</h2><p id="noteKey" class="muted"></p><p>All fields start blank. Enter your own observed action and evidence; these local notes do not change the supplied status or establish a submission.</p><div class="grid"><label for="actualOutcome">Actual action and outcome<textarea id="actualOutcome"></textarea></label><label for="actualSource">Actual source or receipt reference<textarea id="actualSource"></textarea></label></div><label for="actualFollowup">Remaining follow-up<textarea id="actualFollowup"></textarea></label><div class="actions"><button type="button" id="previewNote">Preview local note</button></div><pre id="notePreview" class="note" aria-live="polite"></pre></section><details><summary>Dates, receipts, and unknowns</summary><p>These are supplied fictional date-only records, not a live LMS feed. A draft file is not a submission receipt. A prior receipt remains evidence of its original submission after a redo request, but it does not establish a new submission.</p><p>For A01, new file, new receipt, new submission time, feedback details, and revised deadline are blank or unconfirmed. A04’s source export is absent, so its status is unknown rather than missing, late, failed, or a zero grade. No grade, penalty, notification, synchronization, or submission action is performed.</p></details><footer>Local session only. Nothing is sent, saved, approved, or submitted. Keep maintained source records authoritative.</footer></main><script>const $=id=>document.getElementById(id);const esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));const money=n=>'$'+n.toFixed(2);

const assignments=[{key:'C01/A01',course:'C01',id:'A01',title:'Assignment A01',due:'2026-10-12',state:'redo',label:'Redo pending',file:'v1',receipt:'S01',submitted:'2026-10-11',redo:'R01 · 2026-10-13',action:'Confirm redo requirements and revised deadline; prepare v2. New submission evidence is still blank.'},{key:'C01/A02',course:'C01',id:'A02',title:'Assignment A02',due:'2026-10-13',state:'today',label:'Due today · not submitted',file:null,receipt:null,action:'Check the instructions and submit through the approved LMS when ready.'},{key:'C02/A03',course:'C02',id:'A03',title:'Assignment A03',due:'2026-10-14',state:'draft',label:'Upcoming · draft only',file:'F03',receipt:null,action:'Finish draft F03 and check the actual submission requirements.'},{key:'C02/A04',course:'C02',id:'A04',title:'Assignment A04',due:'2026-10-12',state:'unknown',label:'Status unknown',file:null,receipt:null,action:'Check the actual LMS and receipt source; do not infer a missing submission from an absent export.'}];
const localNotes={};
function filtered(course,state){return assignments.filter(a=>(course==='all'||a.course===course)&&(state==='all'||a.state===state))}
function render(){const rows=filtered($('course').value,$('status').value);$('listTitle').textContent=rows.length+' assignment records in view';$('assignments').innerHTML=rows.length?rows.map(a=>'<article class="ledger-row"><b>'+a.course+'<br>'+a.id+'</b><div><h3>'+a.title+'</h3><p>'+a.label+'</p><small>Original due date: '+a.due+(a.state==='redo'?' · revised deadline unconfirmed':'')+'</small></div><span class="pill">'+(a.receipt?'Prior receipt '+a.receipt:a.file?'Draft '+a.file:'No supplied receipt')+'</span></article>').join(''):'<p>No assignments match these filters. Source history is retained.</p>';const a=assignments.find(a=>a.key===$('assignment').value);$('evidence').innerHTML='<article><h3>'+a.key+' · '+a.title+'</h3><p>Original due date: '+a.due+'</p></article>'+(a.state==='redo'?'<article><h3>v1 → S01 · 2026-10-11</h3><p>Supplied original submission receipt. This history is retained.</p></article><article><h3>R01 · 2026-10-13</h3><p>Redo requested. New file, receipt, and submission time: blank. Revised deadline: unconfirmed.</p></article>':a.state==='unknown'?'<article><h3>Source status unknown</h3><p>Source export absent. No submission outcome can be inferred.</p></article>':a.file?'<article><h3>F03 · draft file only</h3><p>No submission receipt supplied; draft presence is not proof of submission.</p></article>':'<article><h3>Explicitly not yet submitted</h3><p>No receipt supplied in this fixture.</p></article>');$('action').textContent='Next action: '+a.action;const n=localNotes[a.key]||{};$('noteKey').textContent='Selected record: '+a.key+' · unverified local notes';['actualOutcome','actualSource','actualFollowup'].forEach(x=>$(x).value=n[x]||'');$('notePreview').textContent='';}
['actualOutcome','actualSource','actualFollowup'].forEach(x=>$(x).addEventListener('input',()=>{const key=$('assignment').value;localNotes[key]??={};localNotes[key][x]=$(x).value;$('notePreview').textContent='Notes changed; rebuild the preview.'}));$('previewNote').onclick=()=>{const key=$('assignment').value,n=localNotes[key]||{};if(![n.actualOutcome,n.actualSource,n.actualFollowup].some(x=>x&&x.trim())){$('notePreview').textContent='No actual action or evidence entered. Source status remains unchanged.';return}$('notePreview').textContent='UNVERIFIED LOCAL NOTE · '+key+'\nAction/outcome: '+(n.actualOutcome||'(blank)')+'\nSource: '+(n.actualSource||'(blank)')+'\nFollow-up: '+(n.actualFollowup||'(blank)')+'\nSupplied status and receipt history remain unchanged.'};
['course','status','assignment'].forEach(x=>$(x).addEventListener('change',render));render();</script></body></html>