Statustijdlijn van een aanvraag Nieuw

<!-- Statustijdlijn van een aanvraag · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bst"><div class="bst__hd"><div><p class="bst__k"></p><p class="bst__t"></p></div><div class="bst__sw" role="group" aria-label="Voorbeeld"><button type="button" data-s="0" aria-pressed="true">Reparatie</button><button type="button" data-s="1" aria-pressed="false">Bestelling</button><button type="button" data-s="2" aria-pressed="false">Aanvraag</button></div></div><ol class="bst__steps"></ol><div class="bst__now" aria-live="polite"></div><div class="bst__ft"><details class="bst__log"><summary>Activiteit</summary><ul class="bst__ul"></ul></details><button type="button" class="bst__next">Volgende status</button></div></div>
</div>

/* Statustijdlijn van een aanvraag · NedDev · eigen werk. */
.bst{position:absolute;inset:0;padding:10px 14px;background:#fff;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;overflow:auto;display:flex;flex-direction:column;gap:8px;container-type:inline-size}
.bst__hd{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.bst__k{margin:0;font:500 9.5px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.07em;color:#5c5a56}
.bst__t{margin:1px 0 0;font-size:14px;font-weight:700;line-height:1.2}
.bst__sw{display:flex;flex:none;border:1px solid rgba(10,10,10,.18);border-radius:4px;overflow:hidden}
.bst__sw button{padding:3px 6px;border:0;background:#fff;font:600 10.5px 'Switzer',system-ui,sans-serif;color:#5c5a56;cursor:pointer;transition:background-color .15s,color .15s}
.bst__sw button+button{border-left:1px solid rgba(10,10,10,.18)}
.bst__sw button:hover{color:#0a0a0a;background:#f4f3f1}
.bst__sw button:focus-visible{outline:2px solid #0a0a0a;outline-offset:-2px}
.bst__sw button[aria-pressed="true"]{background:#0a0a0a;color:#fff}
.bst__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:2px 0 0;padding:0;list-style:none;counter-reset:bst}
.bst__s{position:relative;padding-top:24px;font-size:11.5px;line-height:1.3;min-width:0}
.bst__s::before{content:'';position:absolute;top:9px;left:0;right:0;height:2px;background:#e4e1dc}
.bst__s:first-child::before{left:9px}
.bst__s:last-child::before{right:auto;width:9px}
.bst__s.is-done::before,.bst__s.is-cur::before{background:#0a0a0a}
.bst__s.is-cur::before{background:linear-gradient(90deg,#0a0a0a 0 12px,#e4e1dc 12px)}
.bst__dot{position:absolute;top:2px;left:0;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid #cfcbc4;background:#fff;display:grid;place-items:center}
.bst__s.is-done .bst__dot{border-color:#0a0a0a;background:#0a0a0a}
.bst__s.is-done .bst__dot::after{content:'';width:6px;height:3px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.bst__s.is-cur .bst__dot{border-color:#F5480F;background:#F5480F;box-shadow:0 0 0 3px #fde3d8}
@media (prefers-reduced-motion:no-preference){.bst__s.is-cur .bst__dot{animation:bst-p 2s ease-in-out infinite}}
@keyframes bst-p{50%{box-shadow:0 0 0 6px rgba(245,72,15,.12)}}
.bst__s b{display:block;font-size:12px;font-weight:700;padding-right:6px}
.bst__s span{display:block;color:#5c5a56;font-size:10.5px;font-variant-numeric:tabular-nums;padding-right:6px}
.bst__s.is-todo b{color:#76736d;font-weight:600}
.bst__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bst__now{padding:7px 10px;border-radius:4px;background:#f4f3f1;font-size:12px;line-height:1.4}
.bst__now b{font-weight:700}
.bst__now.is-fin{background:#e8f3ec;color:#14532d}
.bst__ft{display:flex;align-items:flex-start;gap:8px;margin-top:auto}
.bst__log{flex:1;min-width:0;font-size:11.5px}
.bst__log summary{display:inline-flex;align-items:center;gap:6px;padding:2px 0;font-weight:600;cursor:pointer;list-style:none;border-radius:3px}
.bst__log summary::-webkit-details-marker{display:none}
.bst__log summary::before{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.bst__log[open] summary::before{transform:rotate(45deg)}
.bst__log summary:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px}
.bst__ul{margin:4px 0 0;padding:0;list-style:none;color:#3d3b37}
.bst__ul li{display:grid;grid-template-columns:86px 1fr;gap:6px;padding:2px 0;border-top:1px solid rgba(10,10,10,.08)}
.bst__ul time{font:500 10px/1.6 'JetBrains Mono',monospace;color:#5c5a56}
@supports (interpolate-size:allow-keywords){.bst__log{interpolate-size:allow-keywords}.bst__log::details-content{height:0;overflow:hidden;transition:height .25s ease,content-visibility .25s allow-discrete}.bst__log[open]::details-content{height:auto}}
.bst__next{flex:none;height:28px;padding:0 10px;border:1px solid #0a0a0a;border-radius:4px;background:#fff;font:600 11.5px 'Switzer',system-ui,sans-serif;color:#0a0a0a;cursor:pointer;transition:background-color .15s,color .15s}
.bst__next:hover{background:#0a0a0a;color:#fff}
.bst__next:active{transform:translateY(1px)}
.bst__next:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px}
@container (max-width:370px){.bst__hd{flex-direction:column}.bst__steps{grid-template-columns:1fr;gap:0}.bst__s{padding:0 0 10px 26px}.bst__s::before{top:16px;bottom:-2px;left:7px;right:auto;width:2px;height:auto}.bst__s:first-child::before{left:7px}.bst__s:last-child::before{display:none}.bst__s.is-cur::before{background:#e4e1dc}.bst__dot{top:0}}
@media (prefers-reduced-motion:reduce){.bst *{transition:none!important}}

// Statustijdlijn van een aanvraag · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.bst');if(!w)return;
var stepsEl=w.querySelector('.bst__steps'),now=w.querySelector('.bst__now'),ul=w.querySelector('.bst__ul'),k=w.querySelector('.bst__k'),t=w.querySelector('.bst__t'),nextB=w.querySelector('.bst__next');
var DAG=['zo','ma','di','wo','do','vr','za'],MK=['jan','feb','mrt','apr','mei','jun','jul','aug','sep','okt','nov','dec'];
function d(n){var x=new Date();x.setHours(0,0,0,0);x.setDate(x.getDate()+n);return DAG[x.getDay()]+' '+x.getDate()+' '+MK[x.getMonth()]}
/* statussen: in productie uit je planning- of ordersysteem */
var S=[
 {k:'Dossier R-30418',t:'Reparatie wasmachine, voorlader 8 kg',cur:2,steps:[['Ontvangen',d(-3)+' 09:12','We hebben je melding ontvangen.'],['Ingepland',d(-2),'Monteur Ahmed komt '+d(0)+' tussen 13:00 en 15:00.'],['Onderweg',d(0)+' 13:20','Ahmed is onderweg en is er rond 13:45. Zorg dat de machine leeg is.'],['Klaar',d(0)+', verwacht','De reparatie is klaar. De factuur staat in je account.']],
  log:[[d(-3)+' 09:12','Melding ontvangen via de website'],[d(-2)+' 11:40','Onderdeel besteld: deurrubber'],[d(-2)+' 16:05','Afspraak ingepland met Ahmed'],[d(0)+' 13:20','Monteur vertrokken uit Schiedam']]},
 {k:'Bestelling HA-108233',t:'3 artikelen, Het Anker Haarlem',cur:1,steps:[['Besteld',d(-1)+' 21:47','Je betaling is binnen.'],['Ingepakt',d(0)+' 08:30','Vers gebrand en ingepakt. Gaat vandaag mee met PostNL.'],['Onderweg',d(1)+', verwacht','Je pakket is onderweg. Volg het met je track-en-tracecode.'],['Bezorgd',d(1)+' 18:00 tot 22:00','Bezorgd. Veel koffieplezier.']],
  log:[[d(-1)+' 21:47','Betaald met iDEAL'],[d(0)+' 07:15','Bonen gebrand, batch 4412'],[d(0)+' 08:30','Ingepakt en klaar voor PostNL']]},
 {k:'Aanvraag Q-2291',t:'Offerte dakkapel, 4 m, antraciet',cur:0,steps:[['Ontvangen',d(0)+' 10:02','We bekijken je aanvraag en bellen binnen 2 werkdagen.'],['Inmeten',d(3)+', voorstel','We meten bij je thuis in, duurt ongeveer 30 minuten.'],['Offerte',d(5)+', verwacht','Je offerte staat klaar in je mail, 30 dagen geldig.'],['Akkoord',d(12)+', streefdatum','Akkoord ontvangen. We plannen de montage in.']],
  log:[[d(0)+' 10:02','Aanvraag ontvangen via de configurator']]}];
var si=0,cur=S[0].cur;
function render(){var s=S[si];k.textContent=s.k;t.textContent=s.t;var fin=cur>=s.steps.length;
  stepsEl.innerHTML=s.steps.map(function(st,i){var c=i<cur||fin&&i===s.steps.length-1?'is-done':(i===cur?'is-cur':'is-todo');if(fin)c='is-done';return '<li class="bst__s '+c+'"'+(c==='is-cur'?' aria-current="step"':'')+'><span class="bst__dot" aria-hidden="true"></span><b>'+st[0]+'</b><span>'+st[1]+'</span><span class="bst__vh">'+(c==='is-done'?'afgerond':c==='is-cur'?'huidige stap':'nog niet')+'</span></li>'}).join('');
  var last=s.steps[Math.min(cur,s.steps.length-1)];now.className='bst__now'+(fin?' is-fin':'');now.innerHTML='<b>'+(fin?'Afgerond: ':'Nu: ')+last[0].toLowerCase()+'.</b> '+last[2];
  ul.innerHTML=s.log.slice().reverse().map(function(l){return '<li><time>'+l[0]+'</time><span>'+l[1]+'</span></li>'}).join('');
  nextB.textContent=fin?'Opnieuw':'Volgende status'}
w.querySelector('.bst__sw').addEventListener('click',function(e){var b=e.target.closest('button[data-s]');if(!b)return;si=+b.dataset.s;cur=S[si].cur;w.querySelectorAll('.bst__sw button').forEach(function(x){x.setAttribute('aria-pressed',x===b)});render()});
nextB.addEventListener('click',function(){var s=S[si];if(cur>=s.steps.length){cur=0;s.log=s.log.slice(0,1)}else{cur++;var st=s.steps[Math.min(cur,s.steps.length-1)];if(cur<=s.steps.length)s.log.push([st[1].replace(/, (verwacht|voorstel|streefdatum)$/,''),cur>=s.steps.length?s.steps[s.steps.length-1][0]+': afgerond':'Status: '+st[0].toLowerCase()])}render()});
render();
}
init(document.querySelector('.jouw-container'));