Powiadomienie z działającym Cofnij

<main class="desk"><header><h1>Szkice</h1><span id="count">3 dokumenty</span></header><p>Usunięty szkic można przywrócić.</p><ul id="drafts"><li data-name="Mapa wystawy"><span><b>Mapa wystawy</b><small>Zmieniono dzisiaj</small></span><button class="delete" aria-label="Usuń Mapę wystawy">Usuń</button></li><li data-name="Projekt okładki"><span><b>Projekt okładki</b><small>Zmieniono wczoraj</small></span><button class="delete" aria-label="Usuń Projekt okładki">Usuń</button></li><li data-name="Lista materiałów"><span><b>Lista materiałów</b><small>Zmieniono w poniedziałek</small></span><button class="delete" aria-label="Usuń Listę materiałów">Usuń</button></li></ul><div id="toast" role="status" hidden><span id="message"></span><button id="undo">Cofnij</button></div></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Arial,sans-serif;color:var(--ink,#15202b);background:var(--paper,#fff);line-height:1.5}button,input,select{font:inherit}button{cursor:pointer;min-height:44px}button:disabled{cursor:not-allowed;opacity:.55}button,input,select,a{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--focus,#1368ce);outline-offset:4px}button{border-radius:0}h1,h2,p{margin-top:0}svg{display:block;max-width:100%}[hidden]{display:none!important}.status{min-height:24px;font-size:14px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body{--paper:#f8d94a;--ink:#27271e;--focus:#3a4bbc}.desk{max-width:760px;margin:auto;padding:36px}header{display:flex;align-items:baseline;justify-content:space-between;border-bottom:3px solid;padding-bottom:12px}h1{font-size:48px;line-height:1;margin:0;font-family:'Trebuchet MS',sans-serif}header span{font:15px monospace}.desk>p{margin:16px 0 24px}ul{list-style:none;padding:0;margin:0;background:#fffef4}li{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 22px;border-bottom:1px solid #dbd6ae}li b{font-size:19px}small{display:block;font-size:13px;color:#666247}.delete{border:1px solid #9b9372;background:transparent;padding:8px 15px}.delete:hover{background:#fff5c2}#toast{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;background:#27271e;color:#fffef4;padding:12px 18px}#undo{background:#f8d94a;color:#27271e;border:0;padding:8px 14px}@media(max-width:480px){.desk{padding:24px}h1{font-size:40px}li{padding:16px}li b{font-size:16px}#toast{align-items:flex-start;flex-wrap:wrap}header span{font-size:12px}}

(()=>{
let last=null;const update=()=>$('#count').text($('#drafts li').length+' dokumenty');$('.delete').on('click',function(){if(last)last.row.remove();const row=$(this).closest('li');last={row,index:row.index()};row.detach();$('#message').text('Usunięto: '+row.data('name'));$('#toast').prop('hidden',false);$('#undo').prop('hidden',false);update();$('#undo').trigger('focus');});$('#undo').on('click',()=>{if(!last)return;const rows=$('#drafts li');last.index<rows.length?rows.eq(last.index).before(last.row):$('#drafts').append(last.row);const name=last.row.data('name');last.row.find('button').trigger('focus');last=null;$('#message').text('Przywrócono: '+name);$('#undo').prop('hidden',true);update();});
})();