Interaktywna oś czasu radia

<main class="archive"><div class="heading"><h1>Radio<br>na osi czasu</h1><p>Przykładowe archiwum<br>małej rozgłośni.</p></div><div class="record"><div class="sound" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div><strong id="year">1986</strong><h2 id="event-title">Pierwszy sygnał</h2><p id="event-copy">Nadajnik, kaseta i mikrofon. Pierwsza audycja powstaje w domowej pracowni.</p></div></div><nav aria-label="Wybierz rok"><button data-year="1986" aria-pressed="true">1986</button><button data-year="1998" aria-pressed="false">1998</button><button data-year="2012" aria-pressed="false">2012</button><button data-year="2026" aria-pressed="false">2026</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:#163653;--ink:#f3e8cc;--focus:#f5b565}.archive{max-width:870px;margin:auto;padding:34px}.heading{display:flex;justify-content:space-between;gap:24px}.heading h1{font-family:Georgia,serif;font-size:40px;line-height:1.05}.heading p{font-size:14px;color:#c3d0d8}.record{display:grid;grid-template-columns:1fr 1.4fr;align-items:center;gap:40px;border-top:1px solid #667f91;border-bottom:1px solid #667f91;padding:22px 0}.sound{display:flex;gap:9px;justify-content:center;align-items:center;height:140px}.sound i{display:block;width:10px;height:var(--h,40px);background:#f5b565;transition:height .25s}.sound i:nth-child(2n){background:#df7790}.sound i:nth-child(3n){height:105px}.sound i:nth-child(4n){height:65px}#year{font-size:48px;letter-spacing:-2px;color:#f5b565}h2{font-size:20px;margin:0}#event-copy{font-size:14px;max-width:380px;margin:8px 0 0}nav{display:flex;justify-content:space-between;gap:12px;padding-top:22px}nav button{background:none;border:0;border-top:3px solid #667f91;color:#f3e8cc;padding:8px 15px;flex:1;font:17px monospace}nav button[aria-pressed=true]{border-color:#f5b565;color:#f5b565}@media(max-width:480px){.archive{padding:22px}.heading{display:block}.heading h1{font-size:36px;margin-bottom:12px}.heading p{margin-bottom:18px}.record{grid-template-columns:1fr;gap:12px}.sound{height:100px}.sound i:nth-child(3n){height:85px}#year{font-size:40px}nav{gap:6px}nav button{padding:8px 4px;font-size:14px}}

(()=>{
const events={'1986':['Pierwszy sygnał','Nadajnik, kaseta i mikrofon. Pierwsza audycja powstaje w domowej pracowni.'],'1998':['Studio w mieście','Rozgłośnia przenosi się do studia z małą salą nagrań. Do programu dołączają lokalni muzycy.'],'2012':['Audycje w sieci','Archiwum audycji trafia do internetu. Słuchacze mogą wracać do ulubionych rozmów.'],'2026':['Otwarty mikrofon','Nowa seria spotkań łączy twórców dźwięku z młodymi słuchaczami.']};document.querySelectorAll('[data-year]').forEach(button=>button.addEventListener('click',()=>{document.querySelectorAll('[data-year]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));const year=button.dataset.year;document.querySelector('#year').textContent=year;document.querySelector('#event-title').textContent=events[year][0];document.querySelector('#event-copy').textContent=events[year][1];document.querySelectorAll('.sound i').forEach((bar,i)=>bar.style.height=(20+((Number(year)+i*37)%90))+'px');}));
})();