Geometryczny Bauhaus — zapis do warsztatu

<main class="bauhaus-page"><section class="shape-board" aria-labelledby="bauhaus-title"><div class="board-copy"><p>Pracownia formy / seria 06</p><h1 id="bauhaus-title">Punkt.<br>Linia.<br>Warsztat.</h1><span>Ćwiczenia z koloru, kompozycji i materiału.</span></div><svg class="bauhaus-art" viewBox="0 0 560 420" role="img" aria-label="Kompozycja z czerwonego koła, żółtego trójkąta i niebieskich prostokątów"><rect x="8" y="190" width="210" height="210" fill="#084c9e"/><circle cx="390" cy="126" r="112" fill="#d93525"/><path d="M300 390 426 182 552 390Z" fill="#f2c311"/><rect x="235" y="40" width="36" height="350" fill="#11100d"/></svg><div class="board-index" aria-hidden="true"><span>A</span><span>06</span><span>WAW</span></div></section><section class="workshop-panel"><form id="bauhaus-form" novalidate><header><p>Formularz zgłoszeniowy</p><strong>12 miejsc</strong></header><div class="module-grid"><div class="field module-name"><label for="bauhaus-name">Imię i nazwisko</label><input id="bauhaus-name" name="name" autocomplete="name" required minlength="2" placeholder="Jan Nowak"></div><div class="field module-email"><label for="bauhaus-email">E-mail</label><input id="bauhaus-email" name="email" type="email" autocomplete="email" required placeholder="jan@example.com"></div><div class="field module-level"><label for="bauhaus-level">Poziom</label><select id="bauhaus-level" name="level" required><option value="" selected disabled>Wybierz poziom</option><option value="Pierwsze kroki">Pierwsze kroki</option><option value="Średniozaawansowany">Średniozaawansowany</option><option value="Praktyka zawodowa">Praktyka zawodowa</option></select></div></div><fieldset><legend>Materiał przewodni</legend><div class="material-options"><label class="red"><input type="radio" name="material" value="Papier" required checked><span>Papier</span></label><label class="blue"><input type="radio" name="material" value="Drewno"><span>Drewno</span></label><label class="yellow"><input type="radio" name="material" value="Tkanina"><span>Tkanina</span></label></div></fieldset><div class="bauhaus-actions"><button id="bauhaus-submit" class="primary" type="submit">Zapisz mnie</button><button class="secondary" type="reset">Od nowa</button><button type="button" disabled>Brak miejsc</button></div><p id="bauhaus-status" class="status" role="alert" aria-live="polite"></p></form><section id="bauhaus-success" class="bauhaus-success" tabindex="-1" hidden><svg viewBox="0 0 160 160" aria-hidden="true"><rect x="4" y="4" width="152" height="152" fill="#f2c311" stroke="#11100d" stroke-width="8"/><path d="m35 82 28 29 64-70" fill="none" stroke="#084c9e" stroke-width="15"/></svg><div><p>Zgłoszenie przyjęte</p><h2 id="bauhaus-person">Do zobaczenia.</h2><p id="bauhaus-summary"></p><button id="bauhaus-again" class="secondary" type="button">Nowe zgłoszenie</button></div></section></section></main>

*{box-sizing:border-box}html{color-scheme:light}body{margin:0;min-width:320px;min-height:100vh;background:#f3e8c9;color:#11100d;font-family:"Trebuchet MS",Arial,sans-serif;line-height:1.4}.bauhaus-page{width:min(1180px,100%);min-height:100vh;margin:auto;display:grid;grid-template-columns:1.05fr .95fr}.shape-board{position:relative;min-width:0;overflow:hidden;border-right:8px solid #11100d;background:#f3e8c9}.board-copy{position:relative;z-index:2;padding:32px 36px}.board-copy p{margin:0 0 22px;font-size:13px;font-weight:800}.board-copy h1{margin:0;font-family:Arial Black,Arial,sans-serif;font-size:clamp(48px,7vw,92px);letter-spacing:-.075em;line-height:.82}.board-copy>span{display:block;width:240px;margin-top:24px;font-size:15px}.bauhaus-art{position:absolute;inset:auto -72px -40px auto;width:min(92%,610px);height:auto}.board-index{position:absolute;left:36px;bottom:28px;display:flex;gap:5px}.board-index span{display:grid;place-items:center;min-width:48px;height:48px;padding:4px;border:3px solid #11100d;background:#f3e8c9;font-weight:900}.workshop-panel{display:grid;align-items:center;padding:42px;background:#fffdf7}.workshop-panel form,.bauhaus-success{width:min(100%,590px);margin:auto}.workshop-panel form>header{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-bottom:4px solid #11100d;margin-bottom:24px}.workshop-panel form>header p{margin:0 0 10px;font-weight:900}.workshop-panel form>header strong{color:#084c9e}.module-grid{display:grid;grid-template-columns:1fr .72fr;grid-template-areas:"name name" "email level";gap:0;border-top:3px solid #11100d;border-left:3px solid #11100d;margin-bottom:24px}.field{min-width:0;padding:14px;border-right:3px solid #11100d;border-bottom:3px solid #11100d}.module-name{grid-area:name;background:#f2c311}.module-email{grid-area:email}.module-level{grid-area:level;background:#d93525;color:#fff}label,legend{font-weight:900;font-size:14px}label{display:block;margin-bottom:6px}input,select,button{font:inherit;border-radius:0}input,select{width:100%;min-height:48px;padding:9px 10px;border:3px solid #11100d;background:#fffdf7;color:#11100d}.module-level select{border-color:#11100d}fieldset{margin:0 0 24px;padding:0;border:0}legend{margin-bottom:9px}.material-options{display:grid;grid-template-columns:repeat(3,1fr);border:3px solid #11100d}.material-options label{display:flex;align-items:center;gap:10px;min-height:54px;margin:0;padding:8px 12px;cursor:pointer}.material-options label+label{border-left:3px solid #11100d}.material-options .red{background:#d93525;color:#fff}.material-options .blue{background:#084c9e;color:#fff}.material-options .yellow{background:#f2c311}.material-options input{width:21px;height:21px;min-height:0;margin:0;accent-color:#11100d}.bauhaus-actions{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px}button{min-height:48px;padding:10px 14px;border:3px solid #11100d;background:#fffdf7;color:#11100d;font-weight:900;cursor:pointer}button.primary{background:#084c9e;color:#fff;border-color:#084c9e}button.secondary:hover{background:#f2c311}button.primary:hover{background:#063c7d}button:disabled{cursor:not-allowed;background:#dedbd0;color:#6a6860;border-color:#8c8980}.status{min-height:24px;margin:12px 0 0;color:#a31c12;font-weight:900}.bauhaus-success{display:grid;grid-template-columns:160px 1fr;gap:28px;align-items:center;animation:block-in .34s cubic-bezier(.2,.8,.2,1)}.bauhaus-success svg{width:160px}.bauhaus-success>div{border-left:8px solid #d93525;padding-left:24px}.bauhaus-success p{margin:0 0 10px}.bauhaus-success h2{margin:0 0 12px;font-family:Arial Black,Arial,sans-serif;font-size:clamp(34px,5vw,62px);letter-spacing:-.055em;line-height:.9}.bauhaus-success button{margin-top:10px}input:focus-visible,select:focus-visible,button:focus-visible,.bauhaus-success:focus-visible{outline:4px solid #c21474;outline-offset:4px}[aria-invalid=true]{background:#fff0ee;border-color:#a31c12}[hidden]{display:none!important}@keyframes block-in{from{transform:scale(.92) rotate(-1deg);opacity:0}to{transform:none;opacity:1}}@media(max-width:820px){.bauhaus-page{grid-template-columns:1fr}.shape-board{min-height:460px;border-right:0;border-bottom:8px solid #11100d}.bauhaus-art{width:520px;right:-40px}.workshop-panel{padding:34px 24px}}@media(max-width:500px){.shape-board{min-height:410px}.board-copy{padding:24px 18px}.board-copy h1{font-size:56px}.board-copy>span{width:200px}.bauhaus-art{width:390px;right:-92px;bottom:-8px}.board-index{left:18px;bottom:18px}.board-index span{min-width:42px;height:42px}.workshop-panel{padding:28px 14px}.module-grid{grid-template-columns:1fr;grid-template-areas:"name" "email" "level"}.material-options{grid-template-columns:1fr}.material-options label+label{border-left:0;border-top:3px solid #11100d}.bauhaus-actions{grid-template-columns:1fr}.bauhaus-success{grid-template-columns:1fr}.bauhaus-success svg{width:110px}.bauhaus-success>div{border-left-width:5px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

$(function(){const $form=$('#bauhaus-form');const form=$form[0];const $status=$('#bauhaus-status');const $success=$('#bauhaus-success');function clearErrors(){$form.find('[aria-invalid=true]').attr('aria-invalid','false').removeAttr('aria-describedby');$status.text('')}function validate(){clearErrors();const invalid=form.querySelector(':invalid');if(!invalid)return true;$(invalid).attr({'aria-invalid':'true','aria-describedby':'bauhaus-status'}).trigger('focus');$status.text('Sprawdź zaznaczone pole i uzupełnij zgłoszenie.');return false}$form.on('submit',function(event){event.preventDefault();if(!validate())return;const name=String($('#bauhaus-name').val()).trim();const level=$('#bauhaus-level').val();const material=$form.find('input[name=material]:checked').val();$('#bauhaus-person').text(name+', miejsce jest Twoje.');$('#bauhaus-summary').text('Poziom: '+level+'. Materiał przewodni: '+material+'.');$form.prop('hidden',true);$success.prop('hidden',false).trigger('focus')});$form.on('input change','input,select',function(){$(this).attr('aria-invalid','false').removeAttr('aria-describedby');$status.text('')});$form.on('reset',function(){window.setTimeout(clearErrors,0)});$('#bauhaus-again').on('click',function(){form.reset();$success.prop('hidden',true);$form.prop('hidden',false);window.setTimeout(function(){$('#bauhaus-name').trigger('focus')},0)});const activate=event=>{event.preventDefault();$form.triggerHandler('submit')};$('#bauhaus-submit').on('click',activate);$form.on('keydown','input:not([type=radio]):not([type=range])',event=>{if(event.key==='Enter')activate(event)})});