TOK — tablica małych zadań

<main><header><h1>Zrób miejsce<br>na zrobione.</h1><p>Trzy etapy. Jeden dzień.</p></header><form id="task-form"><label for="task-name">Nowe zadanie</label><div class="row"><input id="task-name" maxlength="80" required placeholder="Co chcesz zrobić?"><button type="button" id="add-task">Dodaj</button></div></form><p id="board-status" class="status" role="status">Zadania zapisują się tylko w tym podglądzie.</p><div class="board"><section><h2>Do zrobienia <span id="count-0"></span></h2><ul id="list-0"></ul></section><section><h2>W toku <span id="count-1"></span></h2><ul id="list-1"></ul></section><section><h2>Gotowe <span id="count-2"></span></h2><ul id="list-2"></ul></section></div><button type="button" id="restore" disabled>Cofnij usunięcie</button></main>

*{box-sizing:border-box}body{margin:0;font:16px/1.5 Arial,sans-serif}h1,h2,h3,p{margin:0}button,input,textarea,select{font:inherit;border-radius:0}button{cursor:pointer;min-height:44px}input,select{min-height:44px}button:disabled{cursor:default;opacity:.5}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--focus,#1457d9);outline-offset:3px}label{display:block}textarea{resize:vertical;width:100%;max-width:100%}main{min-height:100vh}button:active:not(:disabled){filter:brightness(.9)}[hidden]{display:none!important}.status{min-height:1.5em;font-size:14px}footer{font-size:12px;margin-top:24px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}input,textarea,select{color:inherit}h1{line-height:1.05;letter-spacing:-.04em}button{transition:background-color .15s,color .15s}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#f9f9f6;color:#293627;--focus:#9b3708}main{padding:36px 5%;max-width:1200px;margin:auto}header{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px;gap:20px}h1{font-size:clamp(36px,5vw,66px)}header p{max-width:140px}form{padding:20px;background:#dde8d7}form label{font-size:14px;margin-bottom:6px}input{flex:1;min-width:140px;background:white;border:1px solid #718569;padding:10px}button{background:#293627;color:white;border:0;padding:9px 15px}#board-status{margin:12px 0}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:25px 0}.board section{min-width:0;border-top:7px solid #9a6745}.board section:nth-child(2){border-color:#dc9f30}.board section:nth-child(3){border-color:#536a43}h2{font-size:20px;display:flex;justify-content:space-between;margin:14px 0}ul{list-style:none;padding:0;margin:0}li{background:white;border:1px solid #cad1c5;margin-bottom:12px;padding:16px}li p{overflow-wrap:anywhere;margin-bottom:15px}li .row{gap:5px}li button{font-size:13px;padding:8px;background:#e8ecdf;color:#293627}li button[data-action="delete"]{color:#943e16;background:#f9ede5}#restore{background:none;color:#293627;border-bottom:1px solid}li.empty{border:1px dashed #8a9785;color:#52624c}@media(max-width:680px){main{padding:24px 16px}.board{grid-template-columns:1fr}header{display:block}header p{max-width:none;margin-top:15px}}

function moveTask(tasks,id,delta){return tasks.map(t=>t.id===id?{...t,stage:Math.max(0,Math.min(2,t.stage+delta))}:t);}
$(function(){let tasks=[{id:1,text:'Zebrać pomysły',stage:0},{id:2,text:'Narysować pierwszy szkic',stage:1},{id:3,text:'Wybrać temat',stage:2}],nextId=4,deleted=null;const labels=['Do zrobienia','W toku','Gotowe'];function render(){for(let s=0;s<3;s++){const list=$('#list-'+s).empty(),items=tasks.filter(t=>t.stage===s);$('#count-'+s).text(items.length);if(!items.length)list.append($('<li class="empty">').text('Tu jest miejsce.'));for(const t of items){const row=$('<li>').attr('data-task',t.id).append($('<p>').text(t.text)),buttons=$('<div class="row">');if(s>0)buttons.append($('<button type="button" data-action="back">').text('Wstecz').attr('aria-label',t.text+': przenieś do '+labels[s-1]));if(s<2)buttons.append($('<button type="button" data-action="next">').text('Dalej').attr('aria-label',t.text+': przenieś do '+labels[s+1]));buttons.append($('<button type="button" data-action="delete">').text('Usuń').attr('aria-label','Usuń: '+t.text));row.append(buttons);list.append(row);}}$('#restore').prop('disabled',!deleted);}function add(e){e.preventDefault();const text=$('#task-name').val().trim();if(!text){$('#board-status').text('Wpisz treść zadania.');return;}if(tasks.length>=20){$('#board-status').text('Na tablicy może być najwyżej 20 zadań.');return;}tasks.push({id:nextId++,text,stage:0});$('#task-name').val('');render();$('#board-status').text('Dodano zadanie: '+text);}$('#task-form').on('submit',add);$('#add-task').on('click',add);$('.board').on('click','button',function(){const id=Number($(this).closest('li').attr('data-task')),action=this.dataset.action,task=tasks.find(t=>t.id===id);if(action==='delete'){deleted={...task};tasks=tasks.filter(t=>t.id!==id);$('#board-status').text('Usunięto: '+task.text);}else{tasks=moveTask(tasks,id,action==='next'?1:-1);$('#board-status').text(task.text+' → '+labels[tasks.find(t=>t.id===id).stage]);}render();if(action==='delete')$('#restore').trigger('focus');else $('.board [data-task="'+id+'"] button').first().trigger('focus');});$('#restore').on('click',function(){if(deleted&&tasks.length<20){tasks.push(deleted);$('#board-status').text('Przywrócono: '+deleted.text);deleted=null;render();}else $('#board-status').text('Najpierw zwolnij miejsce na tablicy.');});render();});