Bestelling bevestigd met kassabon Nieuw

<!-- Bestelling bevestigd met kassabon · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="k7k">
  <div class="k7k__scene">
    <span class="k7k__slot" aria-hidden="true"></span>
    <div class="k7k__clip">
      <div class="k7k__bon" tabindex="0" role="group" aria-label="Kassabon, klik of druk op Enter om opnieuw te printen">
        <p class="k7k__shop">Bonte Boon, Utrecht</p>
        <table class="k7k__tab"><tbody>
          <tr><td>Molen M2</td><td>€ 249,00</td></tr>
          <tr><td>Bonen 1 kg</td><td>€ 24,50</td></tr>
          <tr><td>Bezorgen</td><td>€ 0,00</td></tr>
          <tr class="k7k__tot"><td>Totaal</td><td>€ 273,50</td></tr>
        </tbody></table>
        <p class="k7k__paid"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Betaald met iDEAL</p>
      </div>
    </div>
  </div>
  <div class="k7k__txt">
    <p class="k7k__h">Bestelling geplaatst</p>
    <p class="k7k__p">De bevestiging staat in je mail. Voor 22:00 besteld, dus morgen in huis.</p>
    <p class="k7k__nr">Bestelnummer 20481</p>
  </div>
</div>
</div>

/* Bestelling bevestigd met kassabon · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.k7k{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;text-align:left;gap:14px;padding:10px 12px}
.k7k *{box-sizing:border-box}
.k7k__scene{position:relative;flex:none;width:152px;height:184px}
.k7k__slot{position:absolute;left:0;right:0;top:0;height:12px;background:#0a0a0a;border-radius:4px;z-index:2}
.k7k__slot::after{content:'';position:absolute;left:10px;right:10px;bottom:3px;height:2px;background:#555}
.k7k__clip{position:absolute;left:6px;right:6px;top:9px;bottom:0;overflow:hidden}
.k7k__bon{position:relative;padding:8px 8px 16px;background:#fff;border:1px solid rgba(10,10,10,.18);border-top:0;font-size:12px;line-height:1.35;color:#0a0a0a;cursor:pointer;clip-path:polygon(0 0,100% 0,100% 100%,92% 96%,83% 100%,75% 96%,67% 100%,58% 96%,50% 100%,42% 96%,33% 100%,25% 96%,17% 100%,8% 96%,0 100%)}
.k7k__bon:focus-visible{outline:2px solid #F5480F;outline-offset:-3px}
.k7k__shop{margin:0 0 5px;padding-bottom:5px;white-space:nowrap;border-bottom:1px dashed rgba(10,10,10,.35);font-weight:700;text-align:center}
.k7k__tab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.k7k__tab td{padding:1px 0;white-space:nowrap}
.k7k__tab td+td{text-align:right}
.k7k__tot td{padding-top:5px;border-top:1px dashed rgba(10,10,10,.35);font-weight:700}
.k7k__paid{display:flex;align-items:center;gap:4px;margin:6px 0 0;white-space:nowrap;color:#b8360a;font-weight:600}
.k7k__paid svg{width:14px;height:14px;flex:none}
.k7k__txt{flex:1;min-width:0;max-width:200px}
.k7k__h{margin:0 0 4px;font-size:15px;font-weight:700;line-height:1.3}
.k7k__p{margin:0 0 8px;font-size:13px;line-height:1.45;color:#3d3d3d}
.k7k__nr{margin:0;font-size:12px;color:#4d4d4d}

// Bestelling bevestigd met kassabon · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.k7k'); if (!w) return;
    var bon = w.querySelector('.k7k__bon'), rm = matchMedia('(prefers-reduced-motion: reduce)').matches, an = null;
    function print() {
      if (!bon.animate || rm) return;
      if (an) an.cancel();
      var h = bon.offsetHeight, steps = 9, kf = [{ transform: 'translateY(' + (-h) + 'px)', offset: 0 }];
      for (var i = 1; i <= steps; i++) {
        var y = -h + h * i / steps, o = i / steps * .92;
        kf.push({ transform: 'translateY(' + y.toFixed(1) + 'px)', offset: Math.max(0, o - .05), easing: 'linear' });
        kf.push({ transform: 'translateY(' + y.toFixed(1) + 'px)', offset: o });
      }
      kf.push({ transform: 'translateY(4px)', offset: .96 }); kf.push({ transform: 'translateY(0)', offset: 1 });
      an = bon.animate(kf, { duration: 2200, fill: 'both', easing: 'linear' });
    }
    bon.addEventListener('click', print);
    bon.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); print(); } });
    if (rm) return;
    if ('IntersectionObserver' in window) {
      bon.style.transform = 'translateY(-110%)';
      var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting) { bon.style.transform = ''; print(); io.disconnect(); } }); }, { threshold: .5 });
      io.observe(w);
    } else print();
}
init(document.querySelector('.jouw-container'));