Paginacja kolekcji z numerami stron

<main class="journal"><header><h1>Notatnik<br>terenowy.</h1><p>Krótkie obserwacje<br>z przykładowej kolekcji.</p></header><section id="notes" aria-label="Notatki"><article><span>01</span><h2>Deszcz na bruku</h2><p>Miasto odbija światło w drobnych kałużach.</p></article><article><span>02</span><h2>Linia lasu</h2><p>Ciemne pnie porządkują jasny skraj polany.</p></article><article><span>03</span><h2>Poranny tramwaj</h2><p>Puste siedzenia i rytm pierwszego kursu.</p></article></section><nav aria-label="Strony notatnika"><button id="page-prev" aria-label="Poprzednia strona" disabled>←</button><button data-page="1" aria-current="page">1</button><button data-page="2">2</button><button data-page="3">3</button><button id="page-next" aria-label="Następna strona">→</button></nav><p id="page-status" class="status" aria-live="polite">Strona 1 z 3 · notatki 1–3 z 8</p></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:#fcfcf8;--ink:#2344a4;--focus:#9c4a25}.journal{max-width:840px;padding:35px;margin:auto}header{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;border-bottom:4px solid;padding-bottom:18px}h1{font-family:Georgia,serif;font-size:43px;line-height:1.02;margin:0}header p{font-size:14px;margin:0}#notes{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin:24px 0 25px;min-height:140px}article{border-left:1px solid #a4b0d0;padding-left:16px}article span{font:14px monospace}article h2{font-size:20px;line-height:1.15;margin:16px 0 10px}article p{font-size:13px;color:#56689c;margin:0}nav{display:flex;gap:8px;justify-content:center;border-top:1px solid #a4b0d0;padding-top:18px}nav button{width:44px;background:transparent;color:#2344a4;border:1px solid #a4b0d0;font-weight:600}nav button[aria-current]{background:#2344a4;color:white}.status{font-size:12px;text-align:center;margin-top:12px}@media(max-width:500px){.journal{padding:24px}header{align-items:flex-start}h1{font-size:34px}header p{font-size:12px;max-width:100px}#notes{grid-template-columns:1fr;gap:15px;min-height:0}article h2{margin:3px 0 5px}article{position:relative;padding-left:40px}article span{position:absolute;left:12px;top:4px}}

(()=>{
const notes=[['Deszcz na bruku','Miasto odbija światło w drobnych kałużach.'],['Linia lasu','Ciemne pnie porządkują jasny skraj polany.'],['Poranny tramwaj','Puste siedzenia i rytm pierwszego kursu.'],['Zapach pracowni','Papier, farba i świeżo ostrzony ołówek.'],['Brzeg jeziora','Woda wyznacza granicę między trzciną a niebem.'],['Cień na ścianie','Późne słońce rysuje prostą geometrię okna.'],['Nocny dworzec','Tablica odjazdów zamyka rytm dnia.'],['Ostatnia strona','Krótka notatka zostawia miejsce na ciąg dalszy.']];let page=1;function render(number){page=Math.max(1,Math.min(3,number));const container=document.querySelector('#notes');container.replaceChildren();notes.slice((page-1)*3,page*3).forEach((note,i)=>{const article=document.createElement('article');[['span',String((page-1)*3+i+1).padStart(2,'0')],['h2',note[0]],['p',note[1]]].forEach(([tag,text])=>{const el=document.createElement(tag);el.textContent=text;article.append(el);});container.append(article);});document.querySelectorAll('[data-page]').forEach(b=>{b.removeAttribute('aria-current');if(Number(b.dataset.page)===page)b.setAttribute('aria-current','page');});document.querySelector('#page-prev').disabled=page===1;document.querySelector('#page-next').disabled=page===3;document.querySelector('#page-status').textContent='Strona '+page+' z 3 · notatki '+((page-1)*3+1)+'–'+Math.min(page*3,8)+' z 8';}document.querySelectorAll('[data-page]').forEach(b=>b.addEventListener('click',()=>render(Number(b.dataset.page))));document.querySelector('#page-prev').addEventListener('click',()=>render(page-1));document.querySelector('#page-next').addEventListener('click',()=>render(page+1));
})();