KLAMRA — warsztat JSON

<main><header><h1>{ Klamra }</h1><p>Porządek w danych.</p></header><div class="controls"><label for="indent">Wcięcie <select id="indent"><option value="2">2 spacje</option><option value="4">4 spacje</option></select></label><label class="check"><input id="sort-keys" type="checkbox" checked> Sortuj klucze</label><button type="button" id="format">Uporządkuj JSON</button><button type="button" id="sample">Wstaw przykład</button></div><div class="editors"><section><label for="json-input">Dane wejściowe</label><textarea id="json-input" maxlength="20000" spellcheck="false" rows="12">{"projekt":"Klamra","wersja":1,"tagi":["html","js"],"aktywny":true}</textarea></section><section><label for="json-output">Wynik</label><textarea id="json-output" readonly spellcheck="false" rows="12"></textarea></section></div><p id="json-status" class="status" role="status"></p><footer>Dane są przetwarzane wyłącznie w podglądzie. Limit: 20 000 znaków.</footer></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:#e9eef4;color:#243951;--focus:#b02060}main{padding:30px 4%}header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #243951;padding-bottom:22px}h1{font:700 42px monospace;letter-spacing:-3px}.controls{display:flex;align-items:end;gap:18px;flex-wrap:wrap;margin:24px 0}.controls label{font-size:14px}.controls select{display:block;border:1px solid #617994;background:white;padding:8px}.check{display:flex!important;align-items:center;gap:8px;min-height:44px}.check input{width:20px;accent-color:#21547a}button{background:#245679;color:white;border:1px solid #245679;padding:8px 16px}#sample{background:transparent;color:#243951}.editors{display:grid;grid-template-columns:1fr 1fr;gap:20px}.editors section{min-width:0}.editors label{font:13px monospace;margin-bottom:8px}textarea{background:#fff;border:1px solid #7d8fa3;padding:20px;font:14px/1.6 monospace;white-space:pre}#json-output{background:#21374c;color:#d3f2ef;border-color:#21374c}#json-status{padding:14px 0;font-weight:700}#json-status.error{color:#a01e3d}@media(max-width:650px){main{padding:24px 16px}.editors{grid-template-columns:1fr}.controls{gap:12px}header{display:block}header p{margin-top:10px}textarea{height:210px;min-height:160px}h1{font-size:36px}}

function formatJson(text,indent=2,sort=true){if(text.length>20000)throw new Error('Limit wynosi 20 000 znaków.');const value=JSON.parse(text);function order(v,depth=0){if(depth>60)throw new Error('Za dużo poziomów zagnieżdżenia.');if(Array.isArray(v))return v.map(x=>order(x,depth+1));if(v&&typeof v==='object'){const out=Object.create(null);for(const key of Object.keys(v).sort())out[key]=order(v[key],depth+1);return out;}return v;}return JSON.stringify(sort?order(value):value,null,indent===4?4:2);}
$(function(){function run(){try{const result=formatJson($('#json-input').val(),Number($('#indent').val()),$('#sort-keys').prop('checked'));$('#json-output').val(result);$('#json-status').removeClass('error').text('Poprawny JSON · wiersze: '+result.split('\n').length);$('#json-input').attr('aria-invalid','false');}catch(e){$('#json-output').val('');$('#json-status').addClass('error').text('Nieprawidłowy JSON: '+e.message);$('#json-input').attr('aria-invalid','true');}}$('#format').on('click',run);$('#indent,#sort-keys').on('change',run);$('#sample').on('click',function(){$('#json-input').val('{"nazwa":"Nowy projekt","zadania":[{"id":2,"gotowe":false},{"id":1,"gotowe":true}]}');run();});run();});