Aankondigingsbalk met live openingsstatus Nieuw

<!-- Aankondigingsbalk met live openingsstatus · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bls">
  <div class="bls__bar" role="status">
    <div class="bls__in">
      <span class="bls__dot" aria-hidden="true"></span>
      <span class="bls__txt">Openingstijden laden</span>
      <button class="bls__more" type="button" aria-expanded="false">Openingstijden</button>
      <a href="#" class="bls__res">Reserveer</a>
      <button class="bls__x" type="button" aria-label="Melding sluiten">×</button>
    </div>
    <ul class="bls__week" aria-label="Openingstijden per dag"></ul>
  </div>
  <div class="bls__head"><a href="#" class="bls__logo">KUMO<span>ramen · Rotterdam</span></a><ul class="bls__nav"><li><a href="#">Menu</a></li><li><a href="#">Afhalen</a></li><li><a href="#">Contact</a></li></ul></div>
  <div class="bls__hero">
    <p class="bls__title">Tonkotsu die achttien uur trekt</p>
    <p class="bls__lead">Nieuwe Binnenweg 212, Rotterdam · bel 010 765 4321</p>
    <div class="bls__demo"><span>Demo, bekijk als:</span>
      <button type="button" data-sim="">Echte tijd</button>
      <button type="button" data-sim="0,1410">Zondag 23:30</button>
      <button type="button" data-sim="2,615">Dinsdag 10:15</button>
      <button type="button" data-sim="3,1360">Woensdag 22:40</button>
      <button type="button" data-sim="5,1350">Vrijdag 22:30</button>
      <button type="button" class="bls__reset" hidden>Balk terugzetten</button>
    </div>
  </div>
</div>
</div>

/* Aankondigingsbalk met live openingsstatus · NedDev · eigen werk. */
.bls{position:relative;width:100%;align-self:flex-start;flex:none;min-height:440px;background:#141414;color:#f4efe6;font-family:'Switzer',sans-serif;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}
.bls *{box-sizing:border-box}
.bls__bar{background:#c8322b;color:#fff;overflow:hidden}
.bls.is-gone .bls__bar{display:none}
.bls__in{display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 48px;position:relative;font-size:14px}
.bls__dot{width:9px;height:9px;border-radius:50%;background:#9be29b;box-shadow:0 0 0 0 rgba(155,226,155,.7);animation:bls-pulse 2s ease-out infinite;flex:none}
.bls.is-closed .bls__dot{background:#f4c9c6;animation:none}
@keyframes bls-pulse{0%{box-shadow:0 0 0 0 rgba(155,226,155,.7)}100%{box-shadow:0 0 0 9px rgba(155,226,155,0)}}
.bls__txt{font-weight:600}
.bls__more{background:transparent;border:0;color:#fff;font:14px 'Switzer',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:2px}
.bls__res{color:#141414;background:#fff;font-weight:600;font-size:13px;padding:5px 12px;border-radius:999px;text-decoration:none}
.bls__x{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.bls__x:hover,.bls__x:focus-visible{background:rgba(0,0,0,.18)}
.bls__week{list-style:none;margin:0;padding:0 16px;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;font-size:13px;max-height:0;transition:max-height .3s ease,padding .3s ease}
.bls.is-week .bls__week{max-height:120px;padding:4px 16px 12px}
.bls__week li{opacity:.85}.bls__week li.is-today{opacity:1;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.bls__head{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;border-bottom:1px solid rgba(244,239,230,.12)}
.bls__logo{font-weight:900;font-size:24px;letter-spacing:.12em;color:#f4efe6;text-decoration:none;display:flex;align-items:baseline;gap:10px}
.bls__logo span{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.08em;color:#c8322b}
.bls__nav{list-style:none;display:flex;gap:22px;margin:0;padding:0}
.bls__nav a{color:#f4efe6;text-decoration:none;font-size:15px}
.bls__hero{flex:1;padding:48px 32px;display:flex;flex-direction:column;justify-content:flex-end;background:radial-gradient(ellipse at 75% 40%,rgba(200,50,43,.35),transparent 55%),radial-gradient(circle at 75% 40%,#2a2420 0 22%,transparent 22.5%),#141414}
.bls__title{font-size:clamp(30px,4.6vw,54px);font-weight:800;line-height:1;letter-spacing:-.02em;margin:0 0 12px;max-width:16ch}
.bls__lead{margin:0 0 26px;color:rgba(244,239,230,.7);font-size:15px}
.bls__demo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(244,239,230,.6)}
.bls__demo button{font:11px 'JetBrains Mono',monospace;color:#f4efe6;background:transparent;border:1px solid rgba(244,239,230,.3);border-radius:999px;padding:6px 10px;cursor:pointer}
.bls__demo button:hover,.bls__demo button.is-on{background:#f4efe6;color:#141414}
@media(max-width:640px){
.bls__in{flex-wrap:wrap;justify-content:flex-start;padding:10px 44px 10px 14px;gap:6px 12px;font-size:13px}
.bls__head{padding:14px 16px}.bls__nav{gap:14px}.bls__nav li:nth-child(n+2){display:none}
.bls__hero{padding:32px 16px}}
@media(prefers-reduced-motion:reduce){.bls__dot{animation:none}.bls__week{transition:none}}

// Aankondigingsbalk met live openingsstatus · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.bls');if(!w)return;
var H={0:[12,22],1:null,2:[11,22],3:[11,22],4:[11,22],5:[11,23],6:[11,23]};
var D=['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag'];
var txt=w.querySelector('.bls__txt'),wk=w.querySelector('.bls__week'),more=w.querySelector('.bls__more'),sim=null;
function pad(n){return (n<10?'0':'')+n;}
function cap(s){return s.charAt(0).toUpperCase()+s.slice(1);}
function now(){
  if(sim)return sim;
  try{var parts=new Intl.DateTimeFormat('en-US',{timeZone:'Europe/Amsterdam',weekday:'short',hour:'2-digit',minute:'2-digit',hourCycle:'h23'}).formatToParts(new Date());
    var o={};parts.forEach(function(p){o[p.type]=p.value;});
    return {d:['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].indexOf(o.weekday),m:(parseInt(o.hour,10)%24)*60+parseInt(o.minute,10)};
  }catch(e){var n=new Date();return {d:n.getDay(),m:n.getHours()*60+n.getMinutes()};}
}
function status(d,m){
  var t=H[d];
  if(t&&m>=t[0]*60&&m<t[1]*60){var left=t[1]*60-m;return {open:true,text:left<=45?'Nog '+left+' minuten open, laatste bestelling nu':'Nu open tot '+pad(t[1])+':00'};}
  if(t&&m<t[0]*60)return {open:false,text:'Nu gesloten · vandaag open vanaf '+pad(t[0])+':00'};
  for(var i=1;i<=7;i++){var nd=(d+i)%7;if(H[nd])return {open:false,text:(i===1?'Morgen':cap(D[nd]))+' weer open om '+pad(H[nd][0])+':00'};}
  return {open:false,text:'Tijdelijk gesloten'};
}
function render(){
  var n=now(),s=status(n.d,n.m);
  txt.textContent=s.text;w.classList.toggle('is-closed',!s.open);
  wk.innerHTML='';
  [1,2,3,4,5,6,0].forEach(function(d){var li=document.createElement('li');var t=H[d];
    li.textContent=cap(D[d]).slice(0,2)+' '+(t?pad(t[0])+':00 tot '+pad(t[1])+':00':'gesloten');
    if(d===n.d)li.className='is-today';wk.appendChild(li);});
}
render();var iv=setInterval(function(){if(!document.body.contains(w)){clearInterval(iv);return;}render();},30000);
more.addEventListener('click',function(){var o=!w.classList.contains('is-week');w.classList.toggle('is-week',o);more.setAttribute('aria-expanded',o?'true':'false');});
var reset=w.querySelector('.bls__reset');
w.querySelector('.bls__x').addEventListener('click',function(){w.classList.add('is-gone');reset.hidden=false;reset.focus({preventScroll:true});});
reset.addEventListener('click',function(){w.classList.remove('is-gone');reset.hidden=true;});
w.querySelectorAll('[data-sim]').forEach(function(b){b.addEventListener('click',function(){
  var v=b.getAttribute('data-sim');sim=v?{d:+v.split(',')[0],m:+v.split(',')[1]}:null;
  w.querySelectorAll('[data-sim]').forEach(function(x){x.classList.toggle('is-on',x===b);});render();});});
w.addEventListener('click',function(e){var a=e.target.closest('a[href="#"]');if(a)e.preventDefault();});
}
init(document.querySelector('.jouw-container'));