Mini-widgets: agenda, stappen, omzet Nieuw

<!-- Mini-widgets: agenda, stappen, omzet · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="wdg">
<a class="wdg__w wdg__ag" href="#agenda" aria-label="Agenda donderdag 9 oktober, 3 afspraken"><p class="wdg__dag">Donderdag</p><p class="wdg__dt">9</p><ul class="wdg__ev"><li><b>10:30</b>Intake mevr. Bakker</li><li><b>14:00</b>Opname in Delft</li><li><b>16:15</b>Aannemer bellen</li></ul></a>
<div class="wdg__col">
<a class="wdg__w wdg__st" href="#stappen"><span class="wdg__row"><svg class="wdg__ring" viewBox="0 0 40 40" aria-hidden="true"><circle cx="20" cy="20" r="16" class="wdg__rt"/><circle cx="20" cy="20" r="16" class="wdg__rv" pathLength="100"/></svg><span class="wdg__num"><b class="wdg__n">7.412</b><span>stappen</span></span></span><span class="wdg__sub"><span class="wdg__pc">74</span>% van 10.000</span></a>
<a class="wdg__w wdg__om" href="#omzet"><span class="wdg__lab">Omzet vandaag</span><span class="wdg__eur"><b>€ 3.284</b> <span class="wdg__up">+12%</span></span><svg class="wdg__sp" viewBox="0 0 100 24" preserveAspectRatio="none" aria-hidden="true"><path class="wdg__spa" d="M0 22 L10 21 L20 19 L30 20 L40 15 L50 16 L60 11 L70 12 L80 7 L90 8 L100 3 L100 24 L0 24Z"/><path class="wdg__spl" d="M0 22 L10 21 L20 19 L30 20 L40 15 L50 16 L60 11 L70 12 L80 7 L90 8 L100 3"/></svg></a>
</div>
</div>
</div>

/* Mini-widgets: agenda, stappen, omzet · NedDev · eigen werk. */
.wdg{position:absolute;inset:0;box-sizing:border-box;padding:12px;background:#dcd9d4;font-family:'Switzer',sans-serif;color:#0a0a0a;display:flex;gap:8px;justify-content:center;align-items:center;container-type:size}
.wdg__w{box-sizing:border-box;display:flex;flex-direction:column;border-radius:8px;background:#fff;color:inherit;text-decoration:none;padding:10px;min-width:0;overflow:hidden;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.wdg__w:hover{transform:translateY(-2px)}
.wdg__w:active{transform:scale(.97)}
.wdg__w:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.wdg__w p{margin:0}
.wdg__ag{height:min(100%,236px);aspect-ratio:1;flex:none}
.wdg__dag{font-size:12px;font-weight:600;color:#F5480F}
.wdg__dt{font-size:30px;font-weight:600;line-height:1;margin-bottom:6px!important}
.wdg__ev{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:12px;line-height:1.25;color:#3d3c39}
.wdg__ev li{padding-left:7px;border-left:2px solid #F5480F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wdg__ev b{display:block;color:#0a0a0a;font-weight:600}
.wdg__col{flex:1 1 0;min-width:0;max-width:170px;height:min(100%,236px);display:flex;flex-direction:column;gap:8px}
.wdg__col .wdg__w{flex:1 1 0;min-height:0}
.wdg__col .wdg__om{flex-grow:1.25}
.wdg__st{background:#0a0a0a;color:#fff;justify-content:space-between}
.wdg__row{display:flex;align-items:center;gap:8px}
.wdg__ring{width:38px;height:38px;flex:none;transform:rotate(-90deg)}
.wdg__rt{fill:none;stroke:#333331;stroke-width:5}
.wdg__rv{fill:none;stroke:#F5480F;stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s cubic-bezier(.3,.7,.2,1)}
.wdg__num{display:flex;flex-direction:column;font-size:12px;color:#bdbab5;line-height:1.2;min-width:0}
.wdg__n{font-size:17px;color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.wdg__sub{font-size:12px;color:#bdbab5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wdg__lab{font-size:12px;color:#5f5e5a}
.wdg__eur{font-size:12px;white-space:nowrap}
.wdg__eur b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.wdg__up{color:#c23a0b;font-weight:600}
.wdg__sp{flex:1;min-height:12px;width:100%;margin-top:4px}
.wdg__spa{fill:#fde3d8;opacity:0;transition:opacity .5s .8s}
.wdg__spl{fill:none;stroke:#F5480F;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.wdg__sp{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.4,0,.2,1)}
.wdg.is-in .wdg__sp{clip-path:inset(0 0 0 0)}.wdg.is-in .wdg__spa{opacity:1}
@container (max-height:230px){.wdg__w{padding:8px}.wdg__ring{width:32px;height:32px}.wdg__n,.wdg__eur b{font-size:15px}.wdg__dt{font-size:26px}}
@media(prefers-reduced-motion:reduce){.wdg__w,.wdg__rv,.wdg__spa,.wdg__sp{transition:none}.wdg__w:hover,.wdg__w:active{transform:none}}

// Mini-widgets: agenda, stappen, omzet · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.wdg');if(!w)return;
var rv=w.querySelector('.wdg__rv'),n=w.querySelector('.wdg__n'),pc=w.querySelector('.wdg__pc'),st=w.querySelector('.wdg__st'),steps=7412,goal=10000,timer=null;
w.querySelectorAll('.wdg__w').forEach(function(a){a.addEventListener('click',function(e){e.preventDefault();});});
function upd(){n.textContent=steps.toLocaleString('nl-NL');var p=Math.min(100,steps/goal*100);pc.textContent=Math.floor(p);rv.style.strokeDashoffset=100-p;st.setAttribute('aria-label','Stappen vandaag: '+n.textContent+', '+Math.floor(p)+' procent van je doel van 10.000');}
var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;
function go(){w.classList.add('is-in');upd();if(reduce)return;(function loop(){timer=setTimeout(function(){if(!w.isConnected)return;steps+=1+Math.floor(Math.random()*4);upd();loop();},3200);})();}
st.setAttribute('aria-label','Stappen vandaag');
if(reduce||!('IntersectionObserver' in window)){go();return;}
var io=new IntersectionObserver(function(es){if(es[0].isIntersecting){io.disconnect();go();}},{threshold:.35});io.observe(w);
}
init(document.querySelector('.jouw-container'));