Karuzela planet z autorskimi ilustracjami SVG

<main class="observatory"><header><span>Obserwatorium</span><h1>Galeria<br>planet.</h1></header><section class="carousel" aria-label="Planety" aria-roledescription="karuzela" tabindex="0"><div class="art" aria-hidden="true"><svg viewBox="0 0 340 250"><defs><pattern id="stars" width="73" height="59" patternUnits="userSpaceOnUse"><circle cx="17" cy="22" r="1.2" fill="#bac9db"/><circle cx="53" cy="43" r=".7" fill="#bac9db"/></pattern></defs><rect width="340" height="250" fill="url(#stars)"/><g id="planet" transform="translate(170 125)"><circle r="68" fill="#7196b7"/><path d="M-56-37Q0-15 57-32M-68-4Q0 16 68-1M-56 39Q0 21 56 38" fill="none" stroke="#274465" stroke-width="14"/><ellipse rx="127" ry="29" transform="rotate(-23)" fill="none" stroke="#dabf91" stroke-width="12"/></g></svg></div><div class="planet-copy"><p id="planet-number">01 / 03</p><h2 id="planet-name">Saturn</h2><p id="planet-description">Pierścienie z lodu i skał tworzą najbardziej rozpoznawalną sylwetkę w Układzie Słonecznym.</p><div class="controls"><button id="planet-prev" aria-label="Poprzednia planeta">←</button><button id="planet-next" aria-label="Następna planeta">→</button></div><p id="planet-status" class="status" aria-live="polite">Saturn, slajd 1 z 3</p></div></section></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:#0f223d;--ink:#edf1f6;--focus:#f5c47a}.observatory{max-width:880px;margin:auto;padding:30px}header{display:flex;align-items:flex-start;gap:60px;border-bottom:1px solid #526581;padding-bottom:15px}header span{font:14px monospace;color:#becadb;margin-top:6px}h1{font-family:Georgia,serif;font-size:37px;line-height:1.1;margin:0}.carousel{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:center;padding-top:20px}.art svg{width:100%}.planet-copy h2{font-size:38px;font-weight:400;margin-bottom:8px}#planet-number{font:13px monospace;color:#dabf91;margin-bottom:10px}#planet-description{font-size:14px;max-width:290px;min-height:84px;color:#c4d0df}.controls{display:flex;gap:10px}.controls button{width:48px;border:1px solid #9cabc0;background:transparent;color:#edf1f6;font-size:25px}.controls button:hover{background:#294361}.status{font-size:12px;color:#c4d0df;margin:12px 0 0}@media(max-width:500px){.observatory{padding:22px}header{display:block}header span{display:block;margin:0 0 12px}h1{font-size:32px}.carousel{grid-template-columns:1fr;gap:0}.art svg{max-width:300px;margin:auto}.planet-copy h2{font-size:30px}#planet-description{min-height:0;max-width:none}.planet-copy{display:grid;grid-template-columns:1fr auto}.planet-copy>p,.planet-copy>h2{grid-column:1}.controls{grid-column:2;grid-row:1/4;align-items:center;gap:6px}.controls button{width:44px}}

(()=>{
const worlds=[['Saturn','Pierścienie z lodu i skał tworzą najbardziej rozpoznawalną sylwetkę w Układzie Słonecznym.','#7196b7',true],['Mars','Rdzawy pył, rozległe równiny i ślady dawnej wody. Czerwona planeta w autorskiej ilustracji.','#cc755d',false],['Neptun','Chłodna, odległa planeta o głębokim niebieskim kolorze. To ostatni przystanek tej małej galerii.','#526cd0',false]];let index=0;function show(step){index=(index+step+worlds.length)%worlds.length;const [name,description,color,ring]=worlds[index];document.querySelector('#planet-name').textContent=name;document.querySelector('#planet-description').textContent=description;document.querySelector('#planet-number').textContent=String(index+1).padStart(2,'0')+' / 03';document.querySelector('#planet circle').setAttribute('fill',color);document.querySelector('#planet ellipse').style.display=ring?'':'none';document.querySelector('#planet-status').textContent=name+', slajd '+(index+1)+' z 3';}document.querySelector('#planet-prev').addEventListener('click',()=>show(-1));document.querySelector('#planet-next').addEventListener('click',()=>show(1));document.querySelector('.carousel').addEventListener('keydown',e=>{if(['ArrowLeft','ArrowRight'].includes(e.key)){e.preventDefault();show(e.key==='ArrowRight'?1:-1);}});
})();