Kolażowe zgłoszenie plakatu

<main class='poster-board' data-state='idle'>
  <div class='shape shape-a' aria-hidden='true'></div><div class='shape shape-b' aria-hidden='true'></div><div class='shape shape-c' aria-hidden='true'></div>
  <header><span>NABÓR 2026</span><h1>Zgłoś<br>plakat</h1><p>Podaj dane pracy. Przyjmujemy projekty cyfrowe i drukowane.</p></header>
  <form id='poster-form' novalidate>
    <div class='field'><label for='poster-title'>Tytuł pracy</label><input id='poster-title' name='title' required autocomplete='off' aria-describedby='poster-title-error'><span class='error' id='poster-title-error'></span></div>
    <div class='field'><label for='poster-email'>E-mail autora</label><input id='poster-email' name='email' type='email' required autocomplete='email' aria-describedby='poster-email-error'><span class='error' id='poster-email-error'></span></div>
    <div class='field'><label for='poster-format'>Format plakatu</label><select id='poster-format' name='format' required aria-describedby='poster-format-error'><option value=''>Wybierz format</option><option value='b1'>B1 / 707 × 1000 mm</option><option value='a1'>A1 / 594 × 841 mm</option><option value='screen'>Ekran / 1080 × 1350 px</option></select><span class='error' id='poster-format-error'></span></div>
    <fieldset aria-describedby='poster-kind-error'><legend>Temat pracy</legend><label><input id='poster-cultural' type='radio' name='poster-kind' value='culture'> Kultura</label><label><input type='radio' name='poster-kind' value='city'> Miasto</label><label><input type='radio' name='poster-kind' value='climate'> Klimat</label><span class='error' id='poster-kind-error'></span></fieldset>
    <div class='actions'><button class='primary' id='poster-send' type='submit'>Zgłoś plakat</button><button class='secondary' type='reset'>Wyczyść</button><button type='button' disabled>Wysyłanie pliku</button></div>
    <p class='status' id='poster-status' role='status' aria-live='polite'>Formularz jest gotowy.</p>
  </form>
  <aside aria-hidden='true'><b id='poster-mark'>A1</b><span>OPEN CALL</span></aside>
</main>

*{box-sizing:border-box}html,body{margin:0;min-width:280px}body{min-height:100vh;padding:clamp(12px,3vw,28px);background:#ece8d8;color:#161414;font:16px/1.4 Arial,sans-serif;overflow-x:hidden}.poster-board{position:relative;isolation:isolate;width:min(100%,960px);margin:auto;display:grid;grid-template-columns:minmax(210px,.72fr) minmax(310px,1.2fr) 110px;gap:22px;align-items:start;padding:25px;border:2px solid #161414;background:#f5f0df;box-shadow:10px 10px 0 #161414}.poster-board header,.poster-board form,.poster-board aside{position:relative;z-index:2}.poster-board header span{display:inline-block;background:#f4d62b;padding:5px 9px;font-weight:900;transform:rotate(-2deg)}h1{font:900 clamp(52px,8vw,92px)/.78 'Arial Black',Arial,sans-serif;letter-spacing:-.09em;margin:28px 0 24px;text-transform:uppercase}.poster-board header p{max-width:27ch;margin:0;border-top:4px solid;padding-top:10px}.shape{position:absolute;z-index:1;pointer-events:none}.shape-a{width:180px;height:175px;right:18%;top:-18px;background:#3159bd;clip-path:polygon(17% 0,100% 15%,82% 100%,0 83%)}.shape-b{width:150px;height:95px;left:-20px;bottom:20px;background:#ef6548;clip-path:polygon(8% 12%,100% 0,88% 100%,0 82%)}.shape-c{width:95px;height:130px;right:-18px;bottom:30px;background:#f4d62b;clip-path:polygon(0 8%,100% 0,83% 92%,14% 100%)}form{background:#fffdf5;border:2px solid;padding:18px;transform:rotate(.4deg)}.field{margin-bottom:10px}label,legend{font-weight:800}label{display:block;margin-bottom:4px}input:not([type=radio]),select{width:100%;min-height:44px;padding:8px 10px;border:2px solid #161414;border-radius:0;background:#fffdf5;color:#161414}button,input,select{font:inherit}button{min-height:44px;padding:8px 13px;border:2px solid #161414;border-radius:0;background:#fffdf5;color:#161414;font-weight:900;cursor:pointer}button.primary{background:#3159bd;color:white;box-shadow:4px 4px 0 #161414}button.secondary{background:#f4d62b}button:disabled{cursor:not-allowed;background:#d7d1c2;color:#66615a}button:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid #ef6548;outline-offset:3px}fieldset{margin:0 0 12px;padding:7px 10px;border:2px solid}fieldset label{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-right:15px}input[type=radio]{width:21px;height:21px;accent-color:#3159bd}.error{display:block;min-height:17px;color:#a62019;font-size:12px}[aria-invalid=true]{border-color:#b4201a!important;background:#fff0eb!important}.actions{display:flex;gap:8px;flex-wrap:wrap}.status{min-height:24px;margin:11px 0 0;font-weight:800}.poster-board aside{align-self:end;background:#161414;color:white;min-height:195px;padding:12px;clip-path:polygon(0 8%,100% 0,84% 100%,9% 92%);display:flex;flex-direction:column;justify-content:space-between;align-items:center}.poster-board aside b{font:900 55px/1 'Arial Black',sans-serif;writing-mode:vertical-rl}.poster-board aside span{font-size:12px;font-weight:900}.poster-board[data-state=success] form{transform:rotate(-.6deg)}.poster-board[data-state=success] aside{background:#3159bd}@media(max-width:720px){body{padding:9px}.poster-board{grid-template-columns:1fr;padding:18px}.poster-board header{padding-right:80px}.poster-board header h1{font-size:56px;margin:20px 0 16px}.poster-board header p{max-width:36ch}.poster-board aside{position:absolute;right:10px;top:18px;min-height:140px;width:68px}.poster-board aside b{font-size:38px}.shape-a{width:130px;height:120px;right:8px;top:6px;opacity:.3}.shape-b{width:90px;height:70px;left:0}.shape-c{width:70px;height:100px;right:0}form{transform:none}}@media(max-width:340px){.shape-b,.shape-c{display:none}.poster-board{padding:12px;gap:15px}.poster-board header{padding-right:0}.poster-board aside{display:none}.poster-board header h1{font-size:48px}.actions{display:grid}.actions button{width:100%}fieldset label{display:flex;margin-right:0}form{padding:13px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

(()=>{const form=$('#poster-form'),board=$('.poster-board'),status=$('#poster-status');function mark(el,message){$(el).attr('aria-invalid','true');$('#'+el.id+'-error').text(message)}function clear(el){$(el).removeAttr('aria-invalid');if(el.id)$('#'+el.id+'-error').text('')}form.on('input change','input,select',function(){clear(this);if(this.name==='poster-kind')$('#poster-kind-error').text('')});$('#poster-format').on('change',function(){$('#poster-mark').text(this.value?this.value.toUpperCase():'A1')});form.on('submit',function(event){event.preventDefault();form.find('[aria-invalid]').removeAttr('aria-invalid');form.find('.error').text('');let first=null,title=$('#poster-title')[0],email=$('#poster-email')[0],format=$('#poster-format')[0];if(!title.value.trim()){mark(title,'Wpisz tytuł pracy.');first=first||title}if(!email.validity.valid){mark(email,'Podaj poprawny adres e-mail.');first=first||email}if(!format.value){mark(format,'Wybierz format plakatu.');first=first||format}if(!form.find('[name=poster-kind]:checked').length){$('#poster-kind-error').text('Wybierz temat pracy.');first=first||form.find('[name=poster-kind]')[0]}if(first){board.attr('data-state','error');status.text('Uzupełnij oznaczone pola.');first.focus();return}board.attr('data-state','success');status.text('Plakat gotowy do oceny: '+title.value.trim()+'.')});form.on('reset',()=>setTimeout(()=>{form.find('[aria-invalid]').removeAttr('aria-invalid');form.find('.error').text('');board.attr('data-state','idle');$('#poster-mark').text('A1');status.text('Wyczyszczono zgłoszenie.')},0));const activate=event=>{event.preventDefault();form.triggerHandler('submit')};$('#poster-send').on('click',activate);form.on('keydown','input:not([type=radio]):not([type=range])',event=>{if(event.key==='Enter')activate(event)})})();