Swiss Signal — odprawa wydarzenia

<main class="signal-shell"><header class="signal-top"><div class="signal-brand"><span class="signal-mark">S/26</span><span>Forum projektowe<br>Warszawa</span></div><p>18.10.2026<br>Hala 02</p></header><section class="signal-grid"><aside class="signal-intro"><p class="route">WEJŚCIE / SEKTOR A</p><h1>Odprawa<br>uczestnika</h1><dl><div><dt>Otwarcie</dt><dd>08:30</dd></div><div><dt>Start</dt><dd>09:15</dd></div><div><dt>Miejsce</dt><dd>Poziom +1</dd></div></dl><div class="signal-bars" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></aside><div class="signal-form-bay"><form id="signal-form" novalidate><div class="form-heading"><span>Karta uczestnika</span><strong>01 / 01</strong></div><div class="field-pair"><div class="field"><label for="signal-name">Imię i nazwisko</label><input id="signal-name" name="name" autocomplete="name" required minlength="2" placeholder="np. Lena Kowalska"></div><div class="field"><label for="signal-email">E-mail</label><input id="signal-email" name="email" type="email" autocomplete="email" required placeholder="lena@example.com"></div></div><div class="field"><label for="signal-session">Pierwsza sesja</label><select id="signal-session" name="session" required><option value="" selected disabled>Wybierz sesję</option><option value="Systemy informacji">Systemy informacji</option><option value="Projektowanie usług">Projektowanie usług</option><option value="Typografia w ruchu">Typografia w ruchu</option></select></div><fieldset><legend>Tryb udziału</legend><div class="radio-line"><label><input type="radio" name="attendance" value="Na miejscu" required checked><span>Na miejscu</span></label><label><input type="radio" name="attendance" value="Transmisja"><span>Transmisja</span></label></div></fieldset><div class="actions"><button class="primary" id="signal-submit" type="submit">Potwierdź odprawę</button><button class="secondary" type="reset">Wyczyść kartę</button><button type="button" disabled>Lista zamknięta</button></div><p id="signal-status" class="form-status" role="alert" aria-live="polite"></p></form><section id="signal-success" class="signal-success" tabindex="-1" hidden><span class="admit">WEJŚCIE POTWIERDZONE</span><h2 id="signal-person">Gotowe</h2><p id="signal-summary"></p><button id="signal-again" class="secondary" type="button">Odpraw inną osobę</button></section></div></section></main>

*{box-sizing:border-box}html{color-scheme:light}body{margin:0;min-width:320px;min-height:100vh;background:#f2f1ed;color:#111;font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;line-height:1.35}.signal-shell{width:min(1120px,100%);min-height:100vh;margin:auto;padding:24px}.signal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;border-top:12px solid #d52519;border-bottom:2px solid #111;padding:14px 0 18px;font-size:13px}.signal-top p{margin:0;text-align:right;font-weight:700}.signal-brand{display:flex;align-items:center;gap:16px}.signal-mark{display:grid;place-items:center;width:58px;height:58px;background:#d52519;color:#fff;font-size:18px;font-weight:900;letter-spacing:-1px}.signal-grid{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(420px,1.25fr);min-height:calc(100vh - 128px)}.signal-intro{position:relative;padding:42px 38px 42px 0;border-right:2px solid #111;overflow:hidden}.route{margin:0 0 44px;font-size:13px;font-weight:800;letter-spacing:.08em}.signal-intro h1{margin:0 0 56px;font-size:clamp(46px,7vw,90px);font-weight:900;letter-spacing:-.075em;line-height:.82}.signal-intro dl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0}.signal-intro dl div{border-top:5px solid #d52519;padding-top:8px}.signal-intro dt{font-size:12px}.signal-intro dd{margin:3px 0 0;font-weight:800}.signal-bars{position:absolute;right:18px;bottom:28px;display:flex;align-items:flex-end;gap:5px;height:72px}.signal-bars i{display:block;width:5px;height:34px;background:#111}.signal-bars i:nth-child(2),.signal-bars i:nth-child(6){height:72px;background:#d52519}.signal-bars i:nth-child(3){height:48px}.signal-bars i:nth-child(4){height:20px}.signal-bars i:nth-child(5){height:61px}.signal-bars i:nth-child(7){height:43px}.signal-form-bay{display:grid;align-items:center;padding:42px 0 42px 52px}.signal-form-bay form,.signal-success{width:min(100%,650px)}.form-heading{display:flex;justify-content:space-between;gap:20px;border-bottom:8px solid #111;padding-bottom:12px;margin-bottom:26px;font-size:14px;font-weight:800}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{margin-bottom:20px}label,legend{font-weight:800;font-size:14px}label{display:block;margin-bottom:7px}input,select,button{font:inherit;border-radius:0}input,select{width:100%;min-height:50px;padding:11px 12px;border:2px solid #111;background:#fff;color:#111}select{cursor:pointer}fieldset{margin:2px 0 22px;padding:0;border:0}legend{margin-bottom:8px}.radio-line{display:grid;grid-template-columns:1fr 1fr;border:2px solid #111}.radio-line label{display:flex;align-items:center;gap:10px;min-height:52px;margin:0;padding:8px 12px;cursor:pointer}.radio-line label+label{border-left:2px solid #111}.radio-line input{width:20px;height:20px;min-height:0;margin:0;accent-color:#d52519}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;border-top:2px solid #111;padding-top:20px}button{min-height:48px;padding:10px 18px;border:2px solid #111;background:#fff;color:#111;font-weight:800;cursor:pointer}button.primary{background:#d52519;color:#fff;border-color:#d52519}button.secondary{background:#fff}button:not(:disabled):hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #111}button:disabled{cursor:not-allowed;color:#6b6b68;border-color:#92928e;background:#dddcd7}.form-status{min-height:25px;margin:14px 0 0;color:#b3130a;font-weight:800}.signal-success{border:8px solid #111;padding:32px;background:#fff;animation:signal-in .28s ease-out}.signal-success .admit{display:inline-block;background:#d52519;color:#fff;padding:8px 10px;font-size:13px;font-weight:900}.signal-success h2{margin:28px 0 8px;font-size:clamp(38px,6vw,72px);letter-spacing:-.06em;line-height:.9}.signal-success p{font-size:18px;margin:0 0 28px}input:focus-visible,select:focus-visible,button:focus-visible,.signal-success:focus-visible{outline:4px solid #1464f4;outline-offset:3px}[aria-invalid=true]{border-color:#b3130a;background:#fff4f2}[hidden]{display:none!important}@keyframes signal-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}@media(max-width:760px){.signal-shell{padding:16px}.signal-grid{grid-template-columns:1fr;min-height:0}.signal-intro{padding:32px 0 30px;border-right:0;border-bottom:2px solid #111}.signal-intro h1{font-size:clamp(48px,16vw,74px);margin-bottom:36px}.signal-bars{display:none}.signal-form-bay{padding:32px 0}.signal-intro dl{max-width:430px}}@media(max-width:480px){.signal-shell{padding:12px}.signal-top{border-top-width:8px}.signal-mark{width:48px;height:48px}.signal-intro{padding-top:24px}.route{margin-bottom:28px}.signal-intro dl{grid-template-columns:1fr}.signal-intro dl div{display:flex;justify-content:space-between;gap:10px}.field-pair{grid-template-columns:1fr;gap:0}.radio-line{grid-template-columns:1fr}.radio-line label+label{border-left:0;border-top:2px solid #111}.actions button{width:100%}.signal-success{padding:22px;border-width:5px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:not(:disabled):hover{transform:none}}

$(function(){const $form=$('#signal-form');const form=$form[0];const $status=$('#signal-status');const $success=$('#signal-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':'signal-status'}).trigger('focus');$status.text('Uzupełnij zaznaczone pole, aby zakończyć odprawę.');return false}$form.on('submit',function(event){event.preventDefault();if(!validate())return;const name=String($('#signal-name').val()).trim();const session=$('#signal-session').val();const attendance=$form.find('input[name=attendance]:checked').val();$('#signal-person').text('Gotowe, '+name+'.');$('#signal-summary').text(session+' · '+attendance+'. Identyfikator czeka przy wejściu A.');$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)});$('#signal-again').on('click',function(){form.reset();$success.prop('hidden',true);$form.prop('hidden',false);window.setTimeout(function(){$('#signal-name').trigger('focus')},0)});const activate=event=>{event.preventDefault();$form.triggerHandler('submit')};$('#signal-submit').on('click',activate);$form.on('keydown','input:not([type=radio]):not([type=range])',event=>{if(event.key==='Enter')activate(event)})});