Klok die de tijd in woorden zegt Nieuw

<!-- Klok die de tijd in woorden zegt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="t7k">
<div class="t7k__clock" role="img" aria-label="Het is">
<div class="t7k__grid" aria-hidden="true"></div>
<div class="t7k__dots" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
</div>
<div class="t7k__side">
<h3 class="t7k__h">Koffiebar Mout, Nijmegen</h3>
<p class="t7k__t" aria-hidden="true">00:00</p>
<div class="t7k__acts"><button class="t7k__btn" type="button" data-k="plus" aria-label="Vijf minuten verder">+5 min</button><button class="t7k__btn" type="button" data-k="nu" aria-label="Terug naar de huidige tijd">Nu</button></div>
</div>
</div>
</div>

/* Klok die de tijd in woorden zegt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.t7k{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(12px,4cqi,26px);padding:12px 16px;container-type:size;font-family:'Switzer',sans-serif;background:#0a0a0a;color:#fff;box-sizing:border-box;--c:min(5.2cqi,8.4cqh)}
.t7k__clock{display:flex;flex-direction:column;align-items:center;gap:6px}
.t7k__grid{display:grid;grid-template-columns:repeat(11,var(--c));grid-auto-rows:var(--c)}
.t7k__grid span{display:flex;align-items:center;justify-content:center;font-weight:500;font-size:max(12px,calc(var(--c)*.64));line-height:1;color:#5a5a5a;transition:color .5s ease,font-weight .5s}
.t7k__grid span.is-on{color:#fff;font-weight:700}
.t7k__dots{display:flex;gap:8px}
.t7k__dots i{width:6px;height:6px;border-radius:50%;background:#3a3a3a;transition:background-color .4s}
.t7k__dots i.is-on{background:#F5480F}
.t7k__side{display:flex;flex-direction:column;gap:6px;max-width:150px}
.t7k__h{margin:0;font-weight:600;font-size:clamp(12px,3.3cqi,15px);line-height:1.3;color:#d8d6d2}
.t7k__t{margin:0;font-weight:700;font-size:clamp(22px,7cqi,34px);line-height:1;letter-spacing:-.02em;color:#F5480F;font-variant-numeric:tabular-nums}
.t7k__acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.t7k__btn{min-height:30px;min-width:36px;padding:6px 9px;border:1px solid rgba(255,255,255,.55);border-radius:4px;background:transparent;color:#fff;font:600 13px/1.2 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s,color .16s}
.t7k__btn:hover{background:#fff;color:#0a0a0a}
.t7k__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}

// Klok die de tijd in woorden zegt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.t7k'),grid=w.querySelector('.t7k__grid'),clock=w.querySelector('.t7k__clock'),dig=w.querySelector('.t7k__t'),dots=w.querySelectorAll('.t7k__dots i');
var ROWS=['hetxiszvijf','tienqkwartb','voordoverjl','halfkeensta','tweepdriejo','viervijfzes','zevenachtmo','negentienwl','elftwaalfgo','nukoffieuur'];
var cells=[];ROWS.forEach(function(r){r.split('').forEach(function(ch){var s=document.createElement('span');s.textContent=ch;grid.appendChild(s);cells.push(s);});});
var Wd={het:[0,0,3],is:[0,4,2],vijfm:[0,7,4],tienm:[1,0,4],kwart:[1,5,5],voor:[2,0,4],over:[2,5,4],half:[3,0,4],uur:[9,8,3]};
var HR=[[8,3,6],[3,5,3],[4,0,4],[4,5,4],[5,0,4],[5,4,4],[5,8,3],[6,0,5],[6,5,4],[7,0,5],[7,5,4],[8,0,3]];
var HN=['twaalf','een','twee','drie','vier','vijf','zes','zeven','acht','negen','tien','elf'];
var off=0;
function render(){var d=new Date(Date.now()+off*60000),hh=d.getHours(),mm=d.getMinutes(),r=Math.floor(mm/5),ex=mm%5;
var on=[Wd.het,Wd.is],say=['het is'],H=hh%12,H1=(hh+1)%12;
var plan=[[['uur'],0],[['vijfm','over'],0],[['tienm','over'],0],[['kwart','over'],0],[['tienm','voor','half'],1],[['vijfm','voor','half'],1],[['half'],1],[['vijfm','over','half'],1],[['tienm','over','half'],1],[['kwart','voor'],1],[['tienm','voor'],1],[['vijfm','voor'],1]][r];
var hourIdx=plan[1]?H1:H,words=plan[0];
if(r===0){on.push(HR[hourIdx]);on.push(Wd.uur);say.push(HN[hourIdx]+' uur');}else{words.forEach(function(k){on.push(Wd[k]);say.push(k.replace(/m$/,''));});on.push(HR[hourIdx]);say.push(HN[hourIdx]);}
var lit={};on.forEach(function(p){for(var i=0;i<p[2];i++)lit[p[0]*11+p[1]+i]=1;});cells.forEach(function(c,i){c.classList.toggle('is-on',!!lit[i]);});
dots.forEach(function(dt,i){dt.classList.toggle('is-on',i<ex);});
var s=say.join(' ');s=s.charAt(0).toUpperCase()+s.slice(1);var dg=(hh<10?'0':'')+hh+':'+(mm<10?'0':'')+mm;clock.setAttribute('aria-label',s+' ('+dg+')');
dig.textContent=dg;}
w.querySelectorAll('.t7k__btn').forEach(function(b){b.addEventListener('click',function(){if(b.dataset.k==='nu')off=0;else off+=5;render();});});
render();var iv=setInterval(function(){if(!w.isConnected){clearInterval(iv);return;}render();},10000);
}
init(document.querySelector('.jouw-container'));