POŁĄCZENIE — planer stref czasowych

<main><header><h1>Ta sama chwila.<br>Cztery miasta.</h1><label for="meeting">Termin w UTC<input id="meeting" type="datetime-local" value="2026-01-15T12:00"></label></header><div class="departures"><div class="table-head"><span>Miasto</span><span>Czas lokalny</span><span>Dzień</span></div><div id="cities"></div></div><p id="zone-status" class="status" role="status"></p><footer>Przedział 09:00–18:00 jest orientacyjny. Zmiany czasu uwzględnia przeglądarka.</footer></main>

*{box-sizing:border-box}body{margin:0;font:16px/1.5 Arial,sans-serif}h1,h2,h3,p{margin:0}button,input,textarea,select{font:inherit;border-radius:0}button{cursor:pointer;min-height:44px}input,select{min-height:44px}button:disabled{cursor:default;opacity:.5}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--focus,#1457d9);outline-offset:3px}label{display:block}textarea{resize:vertical;width:100%;max-width:100%}main{min-height:100vh}button:active:not(:disabled){filter:brightness(.9)}[hidden]{display:none!important}.status{min-height:1.5em;font-size:14px}footer{font-size:12px;margin-top:24px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}input,textarea,select{color:inherit}h1{line-height:1.05;letter-spacing:-.04em}button{transition:background-color .15s,color .15s}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#202722;color:#edf3dd;--focus:#fbc64c}main{max-width:1050px;margin:auto;padding:35px 5%}header{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:38px}h1{font:46px/1.12 Arial,sans-serif;letter-spacing:-2px}header label{font-size:13px;min-width:220px}input{display:block;width:100%;margin-top:10px;background:#fbc64c;color:#202722;border:0;padding:12px;font-family:monospace}.departures{border-top:1px solid #73816b}.table-head,.city{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:15px;align-items:center;padding:18px 0;border-bottom:1px solid #63745e}.table-head{font-size:12px;color:#c9d6bd}.city h2{font-size:22px;font-weight:400}.city strong{font:42px monospace;letter-spacing:2px;color:#fbc64c}.city time{font:14px monospace}.work-state{display:block;margin-top:5px;font-size:12px;color:#c9d6bd}#zone-status{padding-top:22px;color:#fbc64c}@media(max-width:650px){main{padding:24px 16px}header{display:block}header label{margin-top:24px;max-width:300px}h1{font-size:37px}.city{grid-template-columns:1fr 1fr}.city time{grid-column:1/-1}.city strong{font-size:35px}.table-head span:last-child{display:none}.table-head{grid-template-columns:1fr 1fr}.city h2{font-size:20px}}

function zoneRows(value){if(!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(value))throw new Error('Wybierz datę i godzinę.');const date=new Date(value+':00Z');if(!Number.isFinite(date.getTime())||date.toISOString().slice(0,16)!==value)throw new Error('Wybierz poprawną datę.');return [['Warszawa','Europe/Warsaw'],['Nowy Jork','America/New_York'],['Londyn','Europe/London'],['Tokio','Asia/Tokyo']].map(([city,zone])=>{const parts=new Intl.DateTimeFormat('en-GB',{timeZone:zone,hour:'2-digit',minute:'2-digit',hourCycle:'h23'}).formatToParts(date);const hour=Number(parts.find(p=>p.type==='hour').value);return {city,time:parts.map(p=>p.value).join(''),day:new Intl.DateTimeFormat('pl-PL',{timeZone:zone,day:'2-digit',month:'2-digit',year:'numeric'}).format(date),working:hour>=9&&hour<18};});}
$(function(){function render(){try{const rows=zoneRows($('#meeting').val());$('#cities').empty();for(const row of rows){const item=$('<article class="city">');item.append($('<h2>').text(row.city),$('<strong>').text(row.time),$('<time>').text(row.day).append($('<span class="work-state">').text(row.working?'W godzinach pracy':'Poza godzinami pracy')));$('#cities').append(item);}const count=rows.filter(r=>r.working).length;$('#zone-status').text('Godziny pracy: '+count+' z 4 miast.');$('#meeting').attr('aria-invalid','false');}catch(e){$('#zone-status').text(e.message);$('#meeting').attr('aria-invalid','true');}}$('#meeting').on('input change',render);render();});