Actiebalk met feitelijke deadline Nieuw

Aankondigingsbalk met een echte deadline (einde salderingsregeling) en het aantal dagen dat nog rest, zonder tikkende klok. Wegklikbaar en onthouden met localStorage in try/catch; kortingscode kopiëren met succes- en foutstaat. Ingeklapt via grid-template-rows 1fr naar 0fr; demoknoppen tonen de staten vlak vóór en na de deadline.

Code BATTERIJ26 Plan installatie

Deventer · Apeldoorn · Zutphen

Uw zonnestroom zelf gebruiken, ook na 2027.

Een thuisbatterij slaat overdag op wat u ’s avonds verbruikt. Wij rekenen eerst uit of het voor uw dak loont, met uw eigen jaarverbruik.

Thuisbatterij 10 kWh: vanaf € 5.490,00
Installatie: 1 dag, inclusief aanmelding
Garantie: 10 jaar op de batterij

Demo, bekijk de balk op

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.

<!-- Actiebalk met feitelijke deadline · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="adl">
  <div class="adl__wrap" aria-hidden="false">
    <div class="adl__clip">
      <div class="adl__bar" role="region" aria-label="Aankondiging">
        <p class="adl__txt"><span class="adl__days"></span> <span class="adl__msg"></span></p>
        <div class="adl__acts">
          <span class="adl__code">Code <b>BATTERIJ26</b><button type="button" class="adl__copy">Kopieer</button></span>
          <a class="adl__link" href="#">Plan installatie</a>
          <button type="button" class="adl__x" aria-label="Melding sluiten"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 3l10 10M13 3L3 13"/></svg></button>
        </div>
      </div>
    </div>
  </div>
  <div class="adl__nav"><span class="adl__logo"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/></svg>Zonwerk Energie</span><span class="adl__links"><a href="#">Zonnepanelen</a><a href="#">Thuisbatterij</a><a href="#">Laadpaal</a><a href="#">Over ons</a></span><a class="adl__tel" href="tel:0570123456">0570 12 34 56</a></div>
  <div class="adl__hero">
    <div><p class="adl__eyebrow">Deventer · Apeldoorn · Zutphen</p><h2 class="adl__h">Uw zonnestroom zelf gebruiken, ook na 2027.</h2><p class="adl__lead">Een thuisbatterij slaat overdag op wat u ’s avonds verbruikt. Wij rekenen eerst uit of het voor uw dak loont, met uw eigen jaarverbruik.</p></div>
    <dl class="adl__facts"><div><dt>Thuisbatterij 10 kWh</dt><dd>vanaf € 5.490,00</dd></div><div><dt>Installatie</dt><dd>1 dag, inclusief aanmelding</dd></div><div><dt>Garantie</dt><dd>10 jaar op de batterij</dd></div></dl>
  </div>
  <div class="adl__demo" role="group" aria-label="Demo: datum van vandaag">
    <span>Demo, bekijk de balk op</span>
    <button type="button" class="adl__d" data-day="" aria-pressed="true">Vandaag</button>
    <button type="button" class="adl__d" data-day="2026-12-01" aria-pressed="false">di 1 dec</button>
    <button type="button" class="adl__d" data-day="2026-12-05" aria-pressed="false">za 5 dec (na deadline)</button>
    <button type="button" class="adl__d adl__d--re">Balk opnieuw tonen</button>
  </div>
  <p class="adl__live" aria-live="polite"></p>
</div>
</div>

/* Actiebalk met feitelijke deadline · NedDev · eigen werk. */
/* fonts (Fontshare): manrope@400,600,800 */
.adl{--navy:#12263a;--ink:#14202b;--mut:#55626e;--yel:#f7d046;--yel2:#ffe27a;--grn:#1f6b43;--line:#dfe3e7;background:#fff;color:var(--ink);font-family:'Manrope','Switzer',sans-serif;box-sizing:border-box}
.adl *,.adl *::before{box-sizing:border-box}
.adl__wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s ease}
.adl__wrap.is-closed{grid-template-rows:0fr}
.adl__clip{overflow:hidden;min-height:0}
.adl__bar{display:flex;align-items:center;justify-content:space-between;gap:10px 22px;flex-wrap:wrap;padding:10px 24px 10px 32px;background:var(--yel);color:var(--ink)}
.adl.is-urgent .adl__bar{background:#ffcf33}
.adl.is-after .adl__bar{background:#e8eef3}
.adl__txt{margin:0;font-size:14.5px;line-height:1.45;font-weight:600;max-width:72ch}
.adl__days{display:inline-block;font-weight:800;background:var(--ink);color:var(--yel);padding:1px 8px;border-radius:3px;margin-right:4px;font-variant-numeric:tabular-nums}
.adl__days:empty{display:none}
.adl__acts{display:flex;align-items:center;gap:10px}
.adl__code{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.adl__code b{font-family:'JetBrains Mono',monospace;font-weight:700;letter-spacing:.04em;border:1.5px dashed var(--ink);padding:3px 7px;border-radius:3px;user-select:all}
.adl.is-after .adl__code{display:none}
.adl__copy,.adl__x,.adl__d{font:700 13px 'Manrope',sans-serif;color:var(--ink);background:transparent;border:1.5px solid var(--ink);border-radius:3px;padding:5px 9px;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.adl__copy:hover{background:var(--ink);color:var(--yel)}
.adl__copy.is-ok{background:var(--grn);border-color:var(--grn);color:#fff}
.adl__copy.is-err{background:#fff;border-color:#a3271b;color:#a3271b}
.adl__link{font-weight:800;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.adl__link:hover{text-decoration-thickness:2px}
.adl__x{display:grid;place-items:center;width:32px;height:32px;padding:0;border-color:transparent}
.adl__x svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.adl__x:hover{background:rgba(20,32,43,.12)}
.adl__x:active{background:rgba(20,32,43,.2)}
.adl__copy:focus-visible,.adl__x:focus-visible,.adl__link:focus-visible,.adl__d:focus-visible,.adl__nav a:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.adl__nav{display:flex;align-items:center;gap:24px;padding:16px 32px;border-bottom:1px solid var(--line)}
.adl__logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;color:var(--navy)}
.adl__logo svg{width:22px;height:22px;fill:none;stroke:#d9a400;stroke-width:2;stroke-linecap:round}
.adl__links{display:flex;gap:20px;margin-left:auto}
.adl__links a,.adl__tel{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none}
.adl__links a:hover,.adl__tel:hover{text-decoration:underline;text-underline-offset:3px}
.adl__tel{color:var(--grn);font-weight:800}
.adl__hero{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;max-width:1180px;margin:0 auto;padding:38px 32px 30px}
.adl__eyebrow{margin:0 0 10px;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--grn)}
.adl__h{margin:0 0 12px;font-weight:800;font-size:clamp(28px,3.4vw,42px);line-height:1.06;letter-spacing:-.02em;color:var(--navy);max-width:18ch}
.adl__lead{margin:0;font-size:15.5px;line-height:1.55;color:var(--mut);max-width:50ch}
.adl__facts{margin:0;display:grid;gap:0;border-top:2px solid var(--navy)}
.adl__facts div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.adl__facts dt{color:var(--mut)}.adl__facts dd{margin:0;font-weight:700;text-align:right}
.adl__demo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 32px;padding:12px 0 6px;border-top:1px dashed var(--line);font:500 11px 'JetBrains Mono',monospace;color:var(--mut)}
.adl__d{font:500 11px 'JetBrains Mono',monospace;border:1px solid var(--line);color:var(--mut);padding:5px 8px}
.adl__d:hover{border-color:var(--ink);color:var(--ink)}
.adl__d[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.adl__d--re{margin-left:auto}
.adl__live{margin:0 32px 18px;font-size:12.5px;color:var(--mut);min-height:18px}
@media (max-width:760px){
  .adl__bar{padding:10px 12px 10px 14px;align-items:flex-start}
  .adl__txt{font-size:13.5px;flex:1 1 100%}
  .adl__acts{flex-wrap:wrap;width:100%}
  .adl__x{margin-left:auto}
  .adl__nav{padding:12px 14px}
  .adl__links{display:none}
  .adl__tel{margin-left:auto}
  .adl__hero{grid-template-columns:1fr;padding:26px 14px 22px;gap:20px}
  .adl__demo{margin:0 14px}.adl__live{margin:0 14px 14px}
  .adl__d--re{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.adl *,.adl__wrap{transition:none!important}}

// Actiebalk met feitelijke deadline · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w=root.querySelector('.adl'); if(!w) return;
const K='nd-lab-adl-gesloten-saldering2027';
const wrap=w.querySelector('.adl__wrap'), days=w.querySelector('.adl__days'), msg=w.querySelector('.adl__msg'), live=w.querySelector('.adl__live'), x=w.querySelector('.adl__x'), cp=w.querySelector('.adl__copy'), link=w.querySelector('.adl__link');
let today=new Date();
const render=()=>{const t=new Date(today.getFullYear(),today.getMonth(),today.getDate()); const dl=new Date(2026,11,4); const left=Math.round((dl-t)/864e5);
  w.classList.toggle('is-after',left<0); w.classList.toggle('is-urgent',left>=0&&left<=7);
  if(left<0){days.textContent=''; msg.textContent='De salderingsregeling stopt op 1 januari 2027. Installaties die u nu plant, worden in januari geplaatst.'; link.textContent='Bekijk de planning';}
  else{days.textContent=left===0?'Vandaag':'Nog '+left+(left===1?' dag':' dagen'); msg.textContent='De salderingsregeling stopt op 1 januari 2027. Thuisbatterij vóór die tijd werkend? Plan uiterlijk vr 4 december.'; link.textContent='Plan installatie';}
};
const closed=()=>{try{return localStorage.getItem(K)==='1';}catch(e){return false;}};
const setClosed=v=>{wrap.classList.toggle('is-closed',v); wrap.setAttribute('aria-hidden',v?'true':'false'); wrap.querySelectorAll('a,button').forEach(el=>el.tabIndex=v?-1:0);
  try{v?localStorage.setItem(K,'1'):localStorage.removeItem(K);}catch(e){}};
x.addEventListener('click',()=>{setClosed(true); live.textContent='Melding gesloten. Die blijft weg bij uw volgende bezoek.';});
w.addEventListener('keydown',e=>{if(e.key==='Escape'&&wrap.contains(document.activeElement)){setClosed(true); live.textContent='Melding gesloten.';}});
cp.addEventListener('click',async()=>{cp.classList.remove('is-ok','is-err');
  try{if(!navigator.clipboard) throw 0; await navigator.clipboard.writeText('BATTERIJ26'); cp.classList.add('is-ok'); cp.textContent='Gekopieerd'; live.textContent='Code BATTERIJ26 gekopieerd: € 150,00 korting op de installatie.';}
  catch(e){cp.classList.add('is-err'); cp.textContent='Lukt niet'; live.textContent='Kopiëren lukt niet in deze browser. Selecteer de code en kopieer hem zelf.'; const r=document.createRange(); r.selectNodeContents(w.querySelector('.adl__code b')); const s=getSelection(); s.removeAllRanges(); s.addRange(r);}
  setTimeout(()=>{cp.classList.remove('is-ok','is-err'); cp.textContent='Kopieer';},2400);});
const demo=[...w.querySelectorAll('.adl__d[data-day]')];
demo.forEach(b=>b.addEventListener('click',()=>{today=b.dataset.day?new Date(b.dataset.day+'T09:00'):new Date(); demo.forEach(o=>o.setAttribute('aria-pressed',o===b?'true':'false')); render(); live.textContent='Balk zoals hij er uitziet op '+(b.dataset.day?b.textContent:'vandaag')+'.';}));
w.querySelector('.adl__d--re').addEventListener('click',()=>{setClosed(false); live.textContent='Melding staat weer aan.';});
w.querySelectorAll('a[href="#"]').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));
render(); if(closed()) setClosed(true);
}
init(document.querySelector('.jouw-container'));

Meer uit paginasecties

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →