Aankondigingsbalk met live openingsstatus New

Bar that uses the real clock (Amsterdam time) to show "Open now until 22:00" or "Open again tomorrow at 11:00", with week overview and dismiss button. For restaurants and shops.

Openingstijden laden Reserveer

KUMOramen · Rotterdam

Tonkotsu die achttien uur trekt

Nieuwe Binnenweg 212, Rotterdam · bel 010 765 4321

Demo, bekijk als:

How to use it

Paste the HTML where the page sections should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- 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'));

More page sections

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →