Cadeautje met kortingscode Nieuw

<!-- Cadeautje met kortingscode · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="r7cc">
<div class="r7cc__beeld">
<svg class="r7cc__svg" viewBox="0 -12 140 152" aria-hidden="true" focusable="false">
<g class="r7cc__kaart"><rect x="38" y="62" width="64" height="44" rx="3"/><text x="70" y="85">10%</text><text class="r7cc__klein" x="70" y="99">korting</text></g>
<g class="r7cc__doos"><rect class="r7cc__lijf" x="26" y="74" width="88" height="56" rx="3"/><rect class="r7cc__lint" x="64" y="74" width="12" height="56"/></g>
<g class="r7cc__deksel"><rect class="r7cc__dek" x="20" y="60" width="100" height="18" rx="3"/><rect class="r7cc__lint" x="64" y="60" width="12" height="18"/><path class="r7cc__strik" d="M70 60C58 44 44 50 52 58C56 62 64 61 70 60C76 61 84 62 88 58C96 50 82 44 70 60Z"/></g>
</svg>
</div>
<div class="r7cc__txt">
<p class="r7cc__h">Bedankt voor je bestelling bij Koffiebranderij Noord in Groningen</p>
<p class="r7cc__p">Er zit nog iets voor je in het pakket.</p>
<button class="r7cc__open" type="button">Open je cadeau</button>
<div class="r7cc__code" hidden>
<p class="r7cc__uitleg">10% korting op je volgende bestelling, geldig tot 31 december.</p>
<div class="r7cc__rij"><span class="r7cc__c">Noord10</span><button class="r7cc__kopie" type="button">Kopieer</button></div>
</div>
<p class="r7cc__m" aria-live="polite"></p>
</div>
</div>
</div>

/* Cadeautje met kortingscode · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.r7cc{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:14px;padding:14px 18px;background:#fff;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.r7cc *,.r7cc *::before,.r7cc *::after{box-sizing:border-box}
.r7cc__beeld{min-width:0}
.r7cc__svg{display:block;width:100%;max-width:160px;height:auto;margin:0 auto;overflow:visible}
.r7cc__lijf{fill:#F5480F}
.r7cc__dek{fill:#d63c08}
.r7cc__lint{fill:#0a0a0a}
.r7cc__strik{fill:#0a0a0a}
.r7cc__kaart rect{fill:#f4f3f1;stroke:#0a0a0a;stroke-width:1.2}
.r7cc__kaart text{font:700 17px 'Switzer',sans-serif;text-anchor:middle;fill:#0a0a0a}
.r7cc__kaart .r7cc__klein{font:500 12px 'Switzer',sans-serif;fill:#45433f}
.r7cc__kaart{transition:transform .6s cubic-bezier(.3,1.4,.5,1) .25s}
.r7cc__deksel{transform-box:view-box;transform-origin:20px 78px;transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.r7cc__doos,.r7cc__deksel{transform-box:view-box}
.r7cc.is-wiebel .r7cc__beeld{animation:r7cc-wiebel .7s ease}
@keyframes r7cc-wiebel{0%,100%{transform:rotate(0)}20%{transform:rotate(-5deg)}40%{transform:rotate(4deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(1deg)}}
.r7cc.is-open .r7cc__deksel{transform:translate(10px,-50px) rotate(10deg)}
.r7cc.is-open .r7cc__kaart{transform:translateY(-34px)}
.r7cc__txt{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.r7cc__h{margin:0;font:600 clamp(15px,4.4cqi,18px)/1.2 'Switzer',sans-serif;letter-spacing:-.01em;text-wrap:balance}
.r7cc__p,.r7cc__uitleg{margin:0;font:400 13px/1.4 'Switzer',sans-serif;color:#45433f}
.r7cc__open{min-height:36px;padding:9px 16px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 14px/1 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s}
.r7cc__open:hover{background:#2a2826}
.r7cc__code{display:flex;flex-direction:column;gap:7px}
.r7cc__code[hidden]{display:none}
.r7cc__rij{display:flex;align-items:stretch;gap:6px}
.r7cc__c{display:flex;align-items:center;padding:6px 12px;border:1.5px dashed #0a0a0a;border-radius:4px;font:700 16px/1 'Switzer',sans-serif;letter-spacing:.03em;user-select:all}
.r7cc__kopie{min-height:34px;padding:6px 12px;border:1px solid #0a0a0a;border-radius:4px;background:#F5480F;color:#0a0a0a;font:600 13px/1 'Switzer',sans-serif;cursor:pointer}
.r7cc__kopie:hover{background:#ff6a36}
.r7cc__open:focus-visible,.r7cc__kopie:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.r7cc__kopie:focus-visible{outline-color:#0a0a0a}
.r7cc__m{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@container (max-width:360px){.r7cc__p{display:none}}
@media (prefers-reduced-motion:reduce){.r7cc__kaart,.r7cc__deksel{transition:none}.r7cc.is-wiebel .r7cc__beeld{animation:none}}

// Cadeautje met kortingscode · © 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('.r7cc');if(!w)return;
var rm=window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches;
var open=w.querySelector('.r7cc__open'),code=w.querySelector('.r7cc__code'),kopie=w.querySelector('.r7cc__kopie'),m=w.querySelector('.r7cc__m'),p=w.querySelector('.r7cc__p');
var tik=0;
function wiebel(){if(rm||w.classList.contains('is-open'))return;w.classList.remove('is-wiebel');void w.offsetWidth;w.classList.add('is-wiebel');}
if(!rm){setTimeout(wiebel,700);tik=setInterval(wiebel,3800);}
open.addEventListener('click',function(){
  clearInterval(tik);w.classList.remove('is-wiebel');w.classList.add('is-open');
  open.hidden=true;p.hidden=true;
  setTimeout(function(){code.hidden=false;m.textContent='Je kortingscode is Noord10.';kopie.focus();},rm?0:650);
});
kopie.addEventListener('click',function(){
  var klaar=function(){kopie.textContent='Gekopieerd';m.textContent='Code Noord10 staat op je klembord.';setTimeout(function(){kopie.textContent='Kopieer';},2000);};
  if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText('Noord10').then(klaar,function(){m.textContent='Kopiëren lukte niet, selecteer de code zelf.';});}else klaar();
});
}
init(document.querySelector('.jouw-container'));