PIKSEL — pracownia małych obrazów

<main><header><span>Pracownia 6 × 6</span><h1>Mały format.<br>Własny znak.</h1></header><div class="workspace"><section class="paper" aria-label="Rysunek pikselowy"><div id="pixels" role="group" aria-label="Siatka pikseli; strzałki przenoszą fokus, spacja maluje"></div><p class="status" id="pixel-status" role="status">Wybierz kolor i narysuj znak.</p></section><aside><h2>Kolor pędzla</h2><div class="palette" role="group" aria-label="Kolory pędzla"><button type="button" data-color="#353078" aria-pressed="true" style="background:#353078;color:white">Fiolet</button><button type="button" data-color="#27b48b" aria-pressed="false" style="background:#27b48b;color:#092b22">Mięta</button><button type="button" data-color="#ed784e" aria-pressed="false" style="background:#ed784e;color:#33190b">Koral</button><button type="button" data-color="#ffffff" aria-pressed="false" style="background:white;color:#353078">Gumka</button></div><div class="row"><button type="button" id="undo" disabled>Cofnij</button><button type="button" id="clear">Wyczyść</button></div><button type="button" id="export">Pokaż SVG</button><label for="svg-code">Kod do skopiowania</label><textarea id="svg-code" readonly rows="4" spellcheck="false"></textarea><footer>Zmiany pozostają w tym podglądzie.</footer></aside></div></main>

*{box-sizing:border-box}body{margin:0;font:16px/1.5 Arial,sans-serif}h1,h2,h3,p{margin:0}button,input,textarea,select{font:inherit;border-radius:0}button{cursor:pointer;min-height:44px}input,select{min-height:44px}button:disabled{cursor:default;opacity:.5}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--focus,#1457d9);outline-offset:3px}label{display:block}textarea{resize:vertical;width:100%;max-width:100%}main{min-height:100vh}button:active:not(:disabled){filter:brightness(.9)}[hidden]{display:none!important}.status{min-height:1.5em;font-size:14px}footer{font-size:12px;margin-top:24px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}input,textarea,select{color:inherit}h1{line-height:1.05;letter-spacing:-.04em}button{transition:background-color .15s,color .15s}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#eee9ff;color:#29245b;--focus:#a32169}main{padding:32px 5%;max-width:1050px;margin:auto}header{display:flex;justify-content:space-between;gap:20px;align-items:start;border-bottom:2px solid #353078;padding-bottom:28px}header span{font-family:monospace}h1{font-size:clamp(35px,5vw,60px)}h2{font-size:18px}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:35px}.paper{align-self:start;background:#d5ccf4;padding:20px}.paper p{margin-top:18px}#pixels{display:grid;grid-template-columns:repeat(6,1fr);border:2px solid #353078;width:100%;max-width:360px;margin:auto}.pixel{aspect-ratio:1;min-height:0;padding:0;border:1px solid #aba1cd}.palette{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}.palette button{border:2px solid transparent}.palette button[aria-pressed="true"]{outline:3px solid #29245b;outline-offset:2px}.row button,#export{background:#353078;color:white;border:0;padding:10px 20px}#export{margin:18px 0;width:100%}textarea{background:#faf8ff;border:1px solid #897bb9;padding:12px;font:12px/1.5 monospace}aside{min-width:0}@media(max-width:640px){main{padding:24px 16px}header{display:block}header span{display:block;margin-bottom:15px}.workspace{grid-template-columns:1fr;gap:25px}.paper{padding:8px}#pixels{max-width:340px}}

function pixelSvg(cells){return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6" shape-rendering="crispEdges">'+cells.map((c,i)=>'<rect x="'+i%6+'" y="'+Math.floor(i/6)+'" width="1" height="1" fill="'+(/^#[0-9a-f]{6}$/i.test(c)?c:'#ffffff')+'"/>').join('')+'</svg>';}
$(function(){let color='#353078',history=[];let cells=Array.from({length:36},(_,i)=>[1,4,6,7,8,9,10,11,12,13,14,15,16,17,19,20,21,22,26,27].includes(i)?'#ed784e':'#ffffff');const grid=$('#pixels');cells.forEach((c,i)=>grid.append($('<button type="button" class="pixel">').attr({'data-index':i,'aria-label':'Piksel '+(i+1),tabindex:i===0?0:-1})));function render(){grid.children().each(function(i){$(this).css('background-color',cells[i]).attr('aria-label','Piksel '+(i+1)+', kolor '+cells[i]);});$('#undo').prop('disabled',history.length===0);$('#svg-code').val('');}function save(){history.push([...cells]);if(history.length>50)history.shift();}grid.on('click','.pixel',function(){const i=Number(this.dataset.index);if(cells[i]===color)return;save();cells[i]=color;render();$('#pixel-status').text('Zamalowano piksel '+(i+1)+'.');});grid.on('keydown','.pixel',function(e){const i=Number(this.dataset.index),steps={ArrowLeft:-1,ArrowRight:1,ArrowUp:-6,ArrowDown:6};if(!(e.key in steps))return;e.preventDefault();const next=Math.max(0,Math.min(35,i+steps[e.key]));grid.children().attr('tabindex',-1).eq(next).attr('tabindex',0).trigger('focus');});$('[data-color]').on('click',function(){color=this.dataset.color;$('[data-color]').attr('aria-pressed','false');$(this).attr('aria-pressed','true');});$('#undo').on('click',function(){if(history.length){cells=history.pop();render();$('#pixel-status').text('Cofnięto zmianę.');}});$('#clear').on('click',function(){save();cells.fill('#ffffff');render();$('#pixel-status').text('Płótno jest czyste.');});$('#export').on('click',function(){$('#svg-code').val(pixelSvg(cells));$('#pixel-status').text('Kod SVG jest gotowy do skopiowania.');});render();});