Konfigurator lampy z podglądem SVG

<main class="configurator"><section class="drawing" aria-label="Podgląd lampy"><svg viewBox="0 0 350 330" role="img" aria-labelledby="lamp-title"><title id="lamp-title">Lampa w wybranym kolorze</title><path d="M60 301H290" stroke="#bbb8ad" stroke-width="2"/><g id="lamp-body"><path d="M175 115V278" stroke="#3f4d66" stroke-width="8"/><path id="shade" d="M175 48 100 133Q175 167 250 133Z" fill="#c34831"/><ellipse cx="175" cy="134" rx="75" ry="17" fill="#f5d394"/><ellipse cx="175" cy="282" rx="65" ry="12" fill="#3f4d66"/></g></svg><span>Model L-01 / szkic produktu</span></section><section class="choices"><h1>Konfigurator<br>lampy.</h1><p>Przykładowy model lampy.</p><fieldset><legend>Kolor klosza</legend><div class="swatches"><button data-color="#c34831" data-name="Cegła" aria-label="Kolor Cegła" aria-pressed="true" style="--swatch:#c34831">Cegła</button><button data-color="#2f6989" data-name="Ocean" aria-label="Kolor Ocean" aria-pressed="false" style="--swatch:#2f6989">Ocean</button><button data-color="#66805e" data-name="Szałwia" aria-label="Kolor Szałwia" aria-pressed="false" style="--swatch:#66805e">Szałwia</button></div></fieldset><label for="lamp-height">Wysokość <output id="height-value">55 cm</output></label><input id="lamp-height" type="range" min="40" max="70" value="55"><p id="lamp-summary" class="status" aria-live="polite">Cegła / 55 cm</p></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:#f1eee4;--ink:#30405a;--focus:#c34831}.configurator{display:grid;grid-template-columns:1.15fr 1fr;max-width:850px;margin:auto;padding:35px;gap:40px}.drawing{background:#e3e0d4;display:flex;flex-direction:column;justify-content:center;align-items:center}.drawing svg{width:100%;max-width:360px}.drawing span{font:12px monospace;padding:12px;color:#596271}h1{font-family:Georgia,serif;font-size:46px;line-height:1.07;margin:12px 0 18px}.choices>p{font-size:14px;max-width:300px}fieldset{padding:0;border:0;margin:26px 0}legend,label{font-weight:600;font-size:14px}.swatches{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}.swatches button{border:1px solid #a8acaf;background:transparent;padding:0 10px 0 0;display:flex;align-items:center;gap:8px;font-size:13px}.swatches button:before{content:'';width:25px;height:42px;background:var(--swatch);display:block}.swatches button[aria-pressed=true]{outline:2px solid #30405a;outline-offset:2px}label{display:flex;justify-content:space-between}output{font-weight:400}input[type=range]{width:100%;min-height:44px;margin:8px 0;accent-color:#30405a}.status{font-size:13px;padding-top:10px;border-top:1px solid #b5b8b8}@media(max-width:560px){.configurator{grid-template-columns:1fr;padding:22px;gap:16px}.drawing svg{height:240px;width:auto}h1{font-size:35px;margin:5px 0 10px}.choices>p{max-width:none}fieldset{margin:18px 0}}

(()=>{
let colorName='Cegła';const height=document.querySelector('#lamp-height');function summary(){document.querySelector('#height-value').value=height.value+' cm';document.querySelector('#lamp-summary').textContent=colorName+' / '+height.value+' cm';document.querySelector('#lamp-body').setAttribute('transform','translate(0 '+((55-Number(height.value))*1.4)+')');document.querySelector('#lamp-title').textContent='Lampa: '+colorName+', '+height.value+' cm';}document.querySelectorAll('[data-color]').forEach(button=>button.addEventListener('click',()=>{colorName=button.dataset.name;document.querySelector('#shade').setAttribute('fill',button.dataset.color);document.querySelectorAll('[data-color]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));summary();}));height.addEventListener('input',summary);
})();