Dolna nawigacja aplikacji audio

<main class="audio-app"><header><span>Biblioteka dźwięku</span><h1 id="audio-title">Dzisiaj</h1><p id="audio-description">Przykładowa biblioteka nagrań.</p></header><section id="audio-items" aria-label="Nagrania"><article><div class="cover sea" aria-hidden="true"><i></i></div><div><h2>Nad brzegiem</h2><span>Nagranie terenowe / 12 min</span></div><button data-track="Nad brzegiem" aria-label="Wybierz Nad brzegiem">▷</button></article><article><div class="cover forest" aria-hidden="true"><i></i></div><div><h2>Między drzewami</h2><span>Nagranie terenowe / 18 min</span></div><button data-track="Między drzewami" aria-label="Wybierz Między drzewami">▷</button></article></section><p id="audio-status" class="status" aria-live="polite">Przykład odtwarzacza bez dźwięku.</p><nav aria-label="Sekcje biblioteki"><button data-audio-page="Dzisiaj" aria-current="page"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 11 12 4 20 11V20H4Z"/></svg>Dzisiaj</button><button data-audio-page="Kolekcja"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5H9V20H4ZM15 4 20 6 17 20 12 18Z"/></svg>Kolekcja</button><button data-audio-page="Ulubione"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20 4 12Q-1 5 6 4Q10 4 12 8Q14 4 18 4Q25 5 20 12Z"/></svg>Ulubione</button></nav></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:#e9e1ec;--ink:#4a3557;--focus:#99612b}.audio-app{max-width:580px;margin:auto;min-height:100vh;padding:28px 30px 0;display:flex;flex-direction:column}header>span{font-size:13px;color:#6f5b7c}h1{font-family:Georgia,serif;font-size:44px;margin:14px 0 6px}header p{font-size:14px;margin-bottom:24px}article{display:flex;align-items:center;gap:17px;padding:17px 0;border-top:1px solid #bba8c2}article h2{font-size:18px;margin:0 0 4px}article span{font-size:12px;color:#715d7e}article>button{margin-left:auto;background:none;border:1px solid #a48aae;width:44px;color:#4a3557;font-size:24px}.cover{width:66px;height:70px;flex-shrink:0;overflow:hidden;position:relative;background:#bfb0cf}.cover i{position:absolute;inset:25px -10px -5px;display:block;transform:rotate(-12deg);border-top:5px solid #efe8ef;border-bottom:8px solid #856f9a}.forest{background:#9cae9c}.forest i{inset:10px 20px 0;transform:rotate(10deg);background:#597260;border:0;box-shadow:18px 0 0 #718b71,-20px 10px 0 #718b71}.status{font-size:12px;padding-top:13px;border-top:1px solid #bba8c2;min-height:50px;margin:0 0 14px}nav{margin-top:auto;display:flex;background:#4a3557;padding:10px 8px}nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;color:#d8c9df;background:none;border:0;border-top:3px solid transparent;font-size:12px;padding:9px 3px}nav button[aria-current]{color:white;border-color:#dfbf95}nav svg{height:22px;width:22px;fill:none;stroke:currentColor;stroke-width:1.7}@media(max-width:400px){.audio-app{padding:22px 20px 0}h1{font-size:39px}article{gap:12px}article h2{font-size:16px}.cover{width:53px;height:60px}article span{font-size:11px}}

(()=>{
const pages={Dzisiaj:['Dzisiaj','Przykładowa biblioteka nagrań.'],Kolekcja:['Kolekcja','Dwa przykładowe nagrania.'],Ulubione:['Ulubione','Jedno przykładowe nagranie.']};document.querySelectorAll('[data-audio-page]').forEach(button=>button.addEventListener('click',()=>{const page=button.dataset.audioPage;document.querySelectorAll('[data-audio-page]').forEach(b=>b.removeAttribute('aria-current'));button.setAttribute('aria-current','page');document.querySelector('#audio-title').textContent=pages[page][0];document.querySelector('#audio-description').textContent=pages[page][1];document.querySelector('#audio-items article:nth-child(2)').hidden=page==='Ulubione';document.querySelector('#audio-status').textContent='Sekcja: '+page+'. Przykład odtwarzacza bez dźwięku.';}));document.querySelectorAll('[data-track]').forEach(button=>button.addEventListener('click',()=>document.querySelector('#audio-status').textContent='Wybrano: '+button.dataset.track+'. Przykład odtwarzacza bez dźwięku.'));
})();