Chromowany profil twórcy

<main class='chrome-shell' data-state='idle'>
  <header class='chrome-header'>
    <div><span class='serial'>CREATOR SYSTEM / 06</span><h1>Profil twórcy</h1></div>
    <svg viewBox='0 0 120 44' aria-hidden='true'><path d='M2 22h30l8-12h38l9 12h31M2 34h48l7-8h61' fill='none' stroke='currentColor' stroke-width='2'/></svg>
  </header>
  <div class='chrome-grid'>
    <aside aria-label='Podgląd identyfikatora'>
      <span class='port'>STUDIO PORT 07</span>
      <strong id='chrome-preview-name'>Nowy twórca</strong>
      <span id='chrome-preview-role'>Obraz i typografia</span>
      <div class='signal'><i></i><i></i><i></i><i></i></div>
      <p>Ustaw dane widoczne przy publikowanych pracach.</p>
    </aside>
    <form id='chrome-form' novalidate>
      <div class='field-pair'>
        <div class='field'><label for='chrome-name'>Nazwa wyświetlana</label><input id='chrome-name' name='name' autocomplete='name' required aria-describedby='chrome-name-error'><span class='error' id='chrome-name-error'></span></div>
        <div class='field'><label for='chrome-handle'>Identyfikator</label><input id='chrome-handle' name='handle' autocomplete='username' required minlength='3' placeholder='np. studio-07' aria-describedby='chrome-handle-error'><span class='error' id='chrome-handle-error'></span></div>
      </div>
      <div class='field'><label for='chrome-role'>Główna dziedzina</label><select id='chrome-role' name='role' required aria-describedby='chrome-role-error'><option value=''>Wybierz dziedzinę</option><option>Obraz i typografia</option><option>Ruch i interakcja</option><option>Dźwięk i instalacje</option></select><span class='error' id='chrome-role-error'></span></div>
      <fieldset aria-describedby='chrome-visibility-error'><legend>Widoczność profilu</legend><label><input id='chrome-public' type='radio' name='visibility' value='public'> Publiczny</label><label><input type='radio' name='visibility' value='invite'> Na zaproszenie</label><label><input type='radio' name='visibility' value='private'> Prywatny</label><span class='error' id='chrome-visibility-error'></span></fieldset>
      <div class='actions'><button class='primary' id='chrome-save' type='submit'>Zapisz profil</button><button class='secondary' type='reset'>Wyczyść</button><button class='disabled-demo' type='button' disabled>Zapisywanie…</button></div>
      <p class='status' id='chrome-status' role='status' aria-live='polite'>Profil nie został jeszcze zapisany.</p>
    </form>
  </div>
</main>

*{box-sizing:border-box}html,body{margin:0;min-width:280px}body{min-height:100vh;background:#0b1015;color:#e9f0f4;font:16px/1.45 Arial,sans-serif;padding:clamp(14px,3vw,28px)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}button,input,select{min-height:44px}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #35e6ff;outline-offset:3px}h1,p{margin-top:0}.chrome-shell{width:min(100%,980px);margin:auto;border:2px solid #80909b;background:#151d24;box-shadow:8px 8px 0 #05080a}.chrome-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 20px;border-bottom:1px solid #80909b;background:#d5dde2;color:#111a20;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}.chrome-header h1{margin:2px 0 0;font:800 clamp(28px,5vw,50px)/.96 'Arial Narrow',Arial,sans-serif;letter-spacing:-.04em}.serial,.port{font:700 12px/1.2 Consolas,monospace;letter-spacing:.08em}.chrome-header svg{width:120px;color:#24798a}.chrome-grid{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.4fr);gap:0}.chrome-grid aside{padding:24px;border-right:1px solid #80909b;background:#202b33;min-width:0}.chrome-grid aside strong{display:block;margin:48px 0 5px;font:800 clamp(26px,4vw,46px)/1 'Arial Narrow',Arial,sans-serif;overflow-wrap:anywhere}.chrome-grid aside p{margin:42px 0 0;color:#b9c5cb;font-size:14px;max-width:29ch}.signal{display:flex;gap:5px;margin-top:18px}.signal i{display:block;width:24px;height:5px;background:#35e6ff}.signal i:nth-child(3),.signal i:nth-child(4){background:#697780}form{padding:22px}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{margin-bottom:14px}label,legend{font-weight:700}label{display:block;margin-bottom:6px}input:not([type=radio]),select{width:100%;padding:9px 12px;border:1px solid #9aa8b1;border-radius:0;background:#e7edf0;color:#10181e;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}input::placeholder{color:#58666d}fieldset{border:1px solid #70808a;margin:0 0 16px;padding:11px 13px}legend{padding:0 7px}fieldset label{display:inline-flex;align-items:center;gap:8px;margin:0 18px 5px 0;min-height:44px}input[type=radio]{width:21px;height:21px;accent-color:#35e6ff}.error{display:block;min-height:18px;margin-top:4px;color:#ff9f93;font-size:12px}[aria-invalid=true]{border-color:#ff7163!important}.actions{display:flex;gap:9px;flex-wrap:wrap}.actions button{padding:8px 15px;border:1px solid #b9c5cb;border-radius:0;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}.primary{background:#35e6ff;color:#061114;font-weight:800}.secondary{background:transparent;color:#e9f0f4}.disabled-demo{background:#3d4850;color:#aeb8be}.status{min-height:24px;margin:13px 0 0;font-weight:700}.chrome-shell[data-state=success]{border-color:#35e6ff}.chrome-shell[data-state=success] .signal i{background:#35e6ff}@media(max-width:650px){body{padding:10px}.chrome-header svg{display:none}.chrome-grid{grid-template-columns:1fr}.chrome-grid aside{border-right:0;border-bottom:1px solid #80909b;padding:18px}.chrome-grid aside strong{margin:18px 0 4px}.chrome-grid aside p{margin:14px 0 0}.field-pair{grid-template-columns:1fr}form{padding:18px}fieldset label{display:flex;margin-right:0}.actions button{flex:1 1 130px}}@media(max-width:340px){.chrome-header{padding:14px}.chrome-header h1{font-size:29px}form,.chrome-grid aside{padding:14px}.actions{display:grid;grid-template-columns:1fr}.actions button{width:100%}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

(()=>{const form=$('#chrome-form'),shell=$('.chrome-shell'),status=$('#chrome-status');const clear=el=>{const id=el.id;$(el).removeAttr('aria-invalid');if(id)$('#'+id+'-error').text('')};const fail=(el,message)=>{$(el).attr('aria-invalid','true');$('#'+el.id+'-error').text(message)};form.on('input change','input,select',function(){clear(this);if(this.name==='visibility')$('#chrome-visibility-error').text('')});$('#chrome-name').on('input',function(){$('#chrome-preview-name').text(this.value.trim()||'Nowy twórca')});$('#chrome-role').on('change',function(){$('#chrome-preview-role').text(this.value||'Obraz i typografia')});form.on('submit',function(event){event.preventDefault();form.find('[aria-invalid]').removeAttr('aria-invalid');form.find('.error').text('');let first=null;const name=$('#chrome-name')[0],handle=$('#chrome-handle')[0],role=$('#chrome-role')[0];if(!name.value.trim()){fail(name,'Wpisz nazwę wyświetlaną.');first=first||name}if(handle.value.trim().length<3){fail(handle,'Identyfikator musi mieć co najmniej 3 znaki.');first=first||handle}if(!role.value){fail(role,'Wybierz główną dziedzinę.');first=first||role}if(!form.find('[name=visibility]:checked').length){$('#chrome-visibility-error').text('Wybierz widoczność profilu.');first=first||form.find('[name=visibility]')[0]}if(first){shell.attr('data-state','error');status.text('Sprawdź oznaczone pola.');first.focus();return}shell.attr('data-state','success');status.text('Profil zapisany dla '+name.value.trim()+'.')});form.on('reset',()=>setTimeout(()=>{form.find('[aria-invalid]').removeAttr('aria-invalid');form.find('.error').text('');shell.attr('data-state','idle');$('#chrome-preview-name').text('Nowy twórca');$('#chrome-preview-role').text('Obraz i typografia');status.text('Wyczyszczono ustawienia profilu.')},0));const activate=event=>{event.preventDefault();form.triggerHandler('submit')};$('#chrome-save').on('click',activate);form.on('keydown','input:not([type=radio]):not([type=range])',event=>{if(event.key==='Enter')activate(event)})})();