Klok met tijdzones en openingstijd Nieuw

<!-- Klok met tijdzones en openingstijd · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="klk">
<svg class="klk__face" viewBox="0 0 100 100" aria-hidden="true"><circle class="klk__rim" cx="50" cy="50" r="48"/><g class="klk__ticks"></g><line class="klk__hd klk__h" x1="50" y1="55" x2="50" y2="29"/><line class="klk__hd klk__m" x1="50" y1="57" x2="50" y2="14"/><line class="klk__hd klk__s" x1="50" y1="61" x2="50" y2="10"/><circle class="klk__pin" cx="50" cy="50" r="2.6"/></svg>
<div class="klk__info">
<p class="klk__city">Vestiging <span class="klk__cn">Rotterdam</span></p>
<p class="klk__time"><span class="klk__hm">--:--</span><span class="klk__sec">:--</span></p>
<p class="klk__date"></p>
<p class="klk__diff"></p>
<p class="klk__st"><i class="klk__dot"></i><span class="klk__stt"></span></p>
</div>
<div class="klk__tz" role="radiogroup" aria-label="Kies een vestiging">
<button type="button" role="radio" aria-checked="true" data-tz="Europe/Amsterdam" data-c="Rotterdam">Rotterdam</button><button type="button" role="radio" aria-checked="false" tabindex="-1" data-tz="America/New_York" data-c="New York">New York</button><button type="button" role="radio" aria-checked="false" tabindex="-1" data-tz="Asia/Tokyo" data-c="Tokio">Tokio</button><button type="button" role="radio" aria-checked="false" tabindex="-1" data-tz="America/Paramaribo" data-c="Paramaribo">Paramaribo</button>
</div>
<p class="klk__sr" aria-live="polite"></p>
</div>
</div>

/* Klok met tijdzones en openingstijd · NedDev · eigen werk. */
.klk{position:absolute;inset:0;box-sizing:border-box;padding:12px;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;gap:10px 14px;align-items:center;container-type:size}
.klk__face{width:min(150px,40cqw,calc(100cqh - 70px));height:auto;aspect-ratio:1;display:block}
.klk__rim{fill:#fff;stroke:#0a0a0a;stroke-width:1.5}
.klk__tk{stroke:#b9b6b0;stroke-width:.8}
.klk__tk--u{stroke:#0a0a0a;stroke-width:2}
.klk__hd{stroke-linecap:round;transform-box:view-box;transform-origin:50px 50px;transition:transform .45s cubic-bezier(.3,1.35,.5,1)}
.klk__h{stroke:#0a0a0a;stroke-width:4}
.klk__m{stroke:#0a0a0a;stroke-width:2.6}
.klk__s{stroke:#F5480F;stroke-width:1.2}
.klk__pin{fill:#F5480F;stroke:#0a0a0a;stroke-width:1}
.klk__info{min-width:0}
.klk__info p{margin:0}
.klk__city{font-size:13px;color:#3d3c39}
.klk__cn{font-weight:600;color:#0a0a0a}
.klk__time{font-size:34px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.klk__sec{font-size:18px;color:#8a8883;font-weight:500}
.klk__date,.klk__diff{font-size:12px;color:#5f5e5a;line-height:1.45}
.klk__st{margin-top:4px!important;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.klk__dot{width:8px;height:8px;border-radius:50%;background:#8a8883;flex:none}
.klk__st.is-open .klk__dot{background:#F5480F}
.klk__tz{grid-column:1/-1;display:flex;gap:4px}
.klk__tz button{flex:1 1 auto;min-width:0;min-height:28px;padding:0 4px;border:1px solid #d6d3ce;border-radius:4px;background:#fff;color:#0a0a0a;font:500 12px 'Switzer',sans-serif;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .15s,color .15s,border-color .15s}
.klk__tz button:hover{border-color:#0a0a0a}
.klk__tz button[aria-checked="true"]{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.klk__tz button:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.klk__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
@container (max-width:380px){.klk__time{font-size:28px}.klk__sec{font-size:15px}}
@media(prefers-reduced-motion:reduce){.klk__hd,.klk__tz button{transition:none}}

// Klok met tijdzones en openingstijd · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.klk');if(!w)return;var NS='http://www.w3.org/2000/svg';
var tk=w.querySelector('.klk__ticks');for(var t=0;t<60;t++){var u=t%5===0,a=t*6*Math.PI/180,r1=u?39:42,r2=45,l=document.createElementNS(NS,'line');l.setAttribute('x1',50+r1*Math.sin(a));l.setAttribute('y1',50-r1*Math.cos(a));l.setAttribute('x2',50+r2*Math.sin(a));l.setAttribute('y2',50-r2*Math.cos(a));l.setAttribute('class','klk__tk'+(u?' klk__tk--u':''));tk.appendChild(l);}
var H=w.querySelector('.klk__h'),M=w.querySelector('.klk__m'),Sx=w.querySelector('.klk__s'),hm=w.querySelector('.klk__hm'),sec=w.querySelector('.klk__sec'),dt=w.querySelector('.klk__date'),df=w.querySelector('.klk__diff'),st=w.querySelector('.klk__st'),stt=w.querySelector('.klk__stt'),cn=w.querySelector('.klk__cn'),live=w.querySelector('.klk__sr');
var btns=[].slice.call(w.querySelectorAll('.klk__tz button')),tz='Europe/Amsterdam',ang={},timer=null;
function local(z){return new Date(new Date().toLocaleString('en-US',{timeZone:z}));}
function pad(n){return (n<10?'0':'')+n;}
function turn(el,k,tg){var c=ang[k];if(c==null)c=tg;else c+=((tg-c)%360+540)%360-180;ang[k]=c;el.style.transform='rotate('+c+'deg)';}
function status(d){var day=d.getDay(),m=d.getHours()*60+d.getMinutes(),wk=day>=1&&day<=5;
if(wk&&m>=540&&m<1050)return {open:1,t:'Nu bereikbaar, tot 17:30'};
if(wk&&m<540)return {t:'Gesloten, opent om 09:00'};
if(day===5||day===6)return {t:'Gesloten, opent maandag 09:00'};
return {t:day===0?'Gesloten, opent maandag 09:00':'Gesloten, opent morgen 09:00'};}
function diff(){var h=Math.round((local(tz)-local('Europe/Amsterdam'))/36e5);return h===0?'Zelfde tijd als in Nederland':Math.abs(h)+' uur '+(h>0?'later':'eerder')+' dan in Nederland';}
function draw(){var d=local(tz),h=d.getHours(),m=d.getMinutes(),s=d.getSeconds();
turn(H,'h',(h%12)*30+m*.5);turn(M,'m',m*6+s*.1);turn(Sx,'s',s*6);
hm.textContent=pad(h)+':'+pad(m);sec.textContent=':'+pad(s);
dt.textContent=new Intl.DateTimeFormat('nl-NL',{timeZone:tz,weekday:'long',day:'numeric',month:'long'}).format(new Date());
df.textContent=diff();var o=status(d);stt.textContent=o.t;st.classList.toggle('is-open',!!o.open);return o;}
function tick(){draw();timer=setTimeout(tick,1000-Date.now()%1000+5);}
function pick(b,focus){btns.forEach(function(x){var on=x===b;x.setAttribute('aria-checked',on?'true':'false');x.tabIndex=on?0:-1;});if(focus)b.focus();tz=b.dataset.tz;cn.textContent=b.dataset.c;var o=draw();live.textContent=b.dataset.c+', '+hm.textContent+'. '+o.t+'.';}
btns.forEach(function(b,i){b.addEventListener('click',function(){pick(b,false);});b.addEventListener('keydown',function(e){var k=e.key,j=k==='ArrowRight'||k==='ArrowDown'?i+1:k==='ArrowLeft'||k==='ArrowUp'?i-1:k==='Home'?0:k==='End'?btns.length-1:null;if(j===null)return;e.preventDefault();pick(btns[(j+btns.length)%btns.length],true);});});
tick();
}
init(document.querySelector('.jouw-container'));