Wybór terminu z podsumowaniem

<main class="booking"><header><p>Pracownia / konsultacje</p><h1>Wybierz<br>termin.</h1><p class="muted">Przykładowy harmonogram<br>wizyt.</p><div class="date-preview"><b id="day-number">18</b><span id="month-label">listopada</span></div></header><form id="booking-form"><div class="field"><label for="date">Data spotkania</label><input id="date" type="date" value="2026-11-18" required></div><fieldset><legend>Godzina</legend><div class="slots"><label><input type="radio" name="time" value="09:00" checked> 09:00</label><label><input type="radio" name="time" value="10:30"> 10:30</label><label class="occupied"><input type="radio" name="time" value="12:00" disabled> 12:00 — zajęte</label><label><input type="radio" name="time" value="14:00"> 14:00</label></div></fieldset><div class="field"><label for="duration">Czas trwania</label><select id="duration"><option value="30">30 minut</option><option value="60">60 minut</option><option value="90">90 minut</option></select></div><button type="button" data-demo-submit>Pokaż termin</button><output id="status" class="status" aria-live="polite"></output></form></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;font:16px/1.45 system-ui,sans-serif;display:grid;align-content:center;color:#17212e;background:#f5f7fb}main{width:min(100%,850px);margin:auto}h1,h2,p{margin:0 0 16px}h1{font-size:clamp(26px,4vw,42px);line-height:1.1}h2{font-size:21px}label{display:block;font-weight:600;margin-bottom:6px}input,select,textarea,button{font:inherit;max-width:100%}input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]),select,textarea{width:100%;padding:10px 12px;background:#fff;color:#17212e;border:1px solid #748091;min-height:44px;border-radius:0}textarea{resize:vertical}button{min-height:44px;padding:10px 18px;border:1px solid currentColor;background:#17212e;color:white;cursor:pointer;border-radius:0}button:hover{filter:brightness(1.15)}button:disabled{cursor:default;opacity:.55}button.secondary{background:transparent;color:inherit}input[type=radio],input[type=checkbox]{width:20px;height:20px;vertical-align:middle;accent-color:var(--accent,#3155c7)}input[type=range]{width:100%;accent-color:var(--accent,#3155c7);min-height:32px}input[type=color]{width:100%;min-height:52px;cursor:pointer;background:transparent;border:1px solid currentColor}fieldset{border:0;padding:0;margin:0}legend{font-weight:600;margin-bottom:12px}output{display:block}small,.note{font-size:13px}p.note{margin:10px 0 0}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent,#3155c7);outline-offset:3px}[hidden]{display:none!important}.field{margin-bottom:16px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.status{min-height:24px;margin-top:14px;font-weight:600;overflow-wrap:anywhere}.muted{color:#4b5868}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:560px){body{padding:18px}.two{grid-template-columns:1fr}h1{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#f5d6cc;color:#542e2b;--accent:#9a3e34}.booking{display:grid;grid-template-columns:1fr 1fr;gap:40px}.booking h1{font-family:Georgia,serif}.booking .muted{color:#754942}.date-preview{display:flex;align-items:baseline;gap:14px;border-top:1px solid #ae796c;margin-top:24px;padding-top:12px}.date-preview b{font:90px/.95 Georgia,serif}.slots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}.slots label{border:1px solid #9e7165;background:#fff3ef;padding:10px;font-size:14px}.slots label:has(input:checked){background:#542e2b;color:#fff3ef}.slots .occupied{color:#76544b;font-size:12px}.booking button{background:#9a3e34}@media(max-width:560px){.booking{grid-template-columns:1fr;gap:25px}.date-preview{margin-top:12px}.date-preview b{font-size:55px}}

(()=>{const q=s=>document.querySelector(s);const all=s=>[...document.querySelectorAll(s)];const update=()=>{if(!q('#date').value)return;const d=new Date(q('#date').value+'T12:00:00');if(!Number.isNaN(d.getTime())){q('#day-number').textContent=d.getDate();q('#month-label').textContent=new Intl.DateTimeFormat('pl-PL',{month:'long'}).format(d)}q('#status').textContent=''};q('#date').oninput=update;q('#booking-form').onsubmit=e=>{e.preventDefault();if(!q('#date').reportValidity())return;q('#status').textContent=`Wybrano: ${q('#date').value}, godz. ${q('input[name=time]:checked').value}, ${q('#duration').value} minut.`;};update();all('form').forEach(form=>{const submit=form.querySelector('[data-demo-submit]');if(!submit)return;submit.addEventListener('click',()=>form.dispatchEvent(new Event('submit',{cancelable:true})));form.addEventListener('keydown',event=>{if(event.key==='Enter'&&!event.defaultPrevented&&event.target.matches('input:not([type=radio]):not([type=checkbox])')){event.preventDefault();submit.click();}})});})();