Menu radialne w pracowni astronomicznej

<main class="orbit-console"><header><h1>Menu pracowni</h1><p>Wybierz dział w menu.</p></header><div class="radial"><div class="rings" aria-hidden="true"></div><button id="radial-toggle" aria-expanded="true" aria-controls="radial-options">Menu</button><nav id="radial-options" aria-label="Obszary pracowni"><button data-tool="Szkice" style="--x:0px;--y:-110px" aria-pressed="true">Szkice</button><button data-tool="Kolory" style="--x:95px;--y:-55px" aria-pressed="false">Kolory</button><button data-tool="Warstwy" style="--x:95px;--y:55px" aria-pressed="false">Warstwy</button><button data-tool="Siatka" style="--x:0px;--y:110px" aria-pressed="false">Siatka</button><button data-tool="Eksport" style="--x:-95px;--y:55px" aria-pressed="false">Eksport</button><button data-tool="Pomoc" style="--x:-95px;--y:-55px" aria-pressed="false">Pomoc</button></nav></div><p id="radial-status" class="status" aria-live="polite">Aktywny obszar: Szkice</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:#1b2935;--ink:#edf4f7;--focus:#eed195}.orbit-console{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:26px 20px}header{text-align:center}h1{font-family:Georgia,serif;font-size:36px;margin:0 0 7px}header p{font-size:14px;color:#b9cbd3;margin-bottom:10px}.radial{width:280px;height:280px;position:relative;margin:15px 0 8px}.rings{position:absolute;inset:28px;border:1px solid #566f7c;border-radius:50%}.rings:before{content:'';position:absolute;inset:28px;border:1px dashed #566f7c;border-radius:50%}.rings:after{content:'';position:absolute;top:50%;left:-20px;right:-20px;height:1px;background:#344b5a;transform:rotate(-30deg)}#radial-toggle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;border:1px solid #d0a760;background:#eed195;color:#1b2935;font-size:17px;font-weight:600;z-index:2}nav button{position:absolute;left:50%;top:50%;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)));width:74px;height:44px;background:#243c4c;color:#edf4f7;border:1px solid #778f9b;font-size:12px;transition:background .15s,border-color .15s}nav button[aria-pressed=true]{background:#315c68;border:2px solid #7dd1cc}.status{text-align:center;margin:10px 0;color:#d0e0e5;font-size:14px}@media(max-width:350px){h1{font-size:31px}.orbit-console{padding-left:12px;padding-right:12px}.radial{transform:scale(.94);margin-top:5px}}

(()=>{
const toggle=document.querySelector('#radial-toggle'),nav=document.querySelector('#radial-options');function close(){nav.hidden=true;toggle.setAttribute('aria-expanded','false');toggle.focus();}toggle.addEventListener('click',()=>{nav.hidden=!nav.hidden;toggle.setAttribute('aria-expanded',String(!nav.hidden));});document.querySelectorAll('[data-tool]').forEach(button=>button.addEventListener('click',()=>{document.querySelectorAll('[data-tool]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));document.querySelector('#radial-status').textContent='Aktywny obszar: '+button.dataset.tool;}));document.addEventListener('keydown',e=>{if(e.key==='Escape'&&!nav.hidden){e.preventDefault();close();}});
})();