Slide to Confirm Nieuw

<!-- Slide to Confirm · Bron: SmoothUI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="stc"><div class="stc__card"><div class="stc__row"><span class="stc__lbl">Factuur 2026-0412</span><b class="stc__amt">€ 249,00</b></div><p class="stc__sub">Hoveniersbedrijf De Linde · Haarlem</p><div class="stc__track"><span class="stc__fill"></span><span class="stc__txt">Schuif om te betalen</span><span class="stc__ok">Betaald</span><button class="stc__thumb" type="button" aria-label="Schuif om te betalen, of druk op Enter"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button></div><button class="stc__reset" type="button">Opnieuw</button></div></div>
</div>

/* Slide to Confirm · Bron: SmoothUI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.stc{font-family:'Switzer',system-ui,sans-serif;width:300px;max-width:88%}
.stc__card{background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:6px;padding:16px;position:relative}
.stc__row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.stc__lbl{font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(10,10,10,.55)}
.stc__amt{font-size:20px;font-weight:700;color:#0a0a0a;letter-spacing:-.01em}
.stc__sub{margin:4px 0 14px;font-size:12px;color:rgba(10,10,10,.6)}
.stc__track{position:relative;height:48px;border-radius:999px;background:#f4f3f1;border:1px solid rgba(10,10,10,.1);overflow:hidden;user-select:none;-webkit-user-select:none}
.stc__fill{position:absolute;left:0;top:0;bottom:0;width:48px;background:#F5480F;border-radius:999px}
.stc__txt,.stc__ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-left:40px;font-size:13px;font-weight:600;color:#0a0a0a;pointer-events:none}
.stc__txt{background:linear-gradient(90deg,#0a0a0a 0,#0a0a0a 40%,rgba(10,10,10,.35) 50%,#0a0a0a 60%,#0a0a0a 100%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:stc-shine 2.4s linear infinite}
.stc__ok{color:#fff;opacity:0;padding-left:0;transition:opacity .3s}
@keyframes stc-shine{to{background-position:-200% 0}}
.stc__thumb{position:absolute;left:3px;top:3px;width:40px;height:40px;border-radius:50%;border:0;background:#0a0a0a;color:#fff;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;z-index:2}
.stc__thumb:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.stc.is-drag .stc__thumb{cursor:grabbing}
.stc:not(.is-drag) .stc__thumb,.stc:not(.is-drag) .stc__fill{transition:transform .45s cubic-bezier(.3,1.4,.5,1),width .45s cubic-bezier(.3,1.4,.5,1)}
.stc.is-done .stc__txt{opacity:0}.stc.is-done .stc__ok{opacity:1}.stc.is-done .stc__fill{background:#0a0a0a}.stc.is-done .stc__thumb{background:#F5480F}
.stc__reset{position:absolute;right:16px;top:14px;opacity:0;pointer-events:none;font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;background:none;border:0;color:#F5480F;cursor:pointer;padding:2px}
.stc.is-done .stc__reset{opacity:1;pointer-events:auto}.stc.is-done .stc__amt{visibility:hidden}
@media(prefers-reduced-motion:reduce){.stc__txt{animation:none;background:none;color:#0a0a0a}}

// Slide to Confirm · Bron: SmoothUI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.stc'); if (!w) return;
    var tr = w.querySelector('.stc__track'), th = w.querySelector('.stc__thumb'), fill = w.querySelector('.stc__fill'), txt = w.querySelector('.stc__txt');
    var x0 = 0, dx = 0, max = 0, on = false;
    function set(v) { dx = v; th.style.transform = 'translateX(' + v + 'px)'; fill.style.width = (v + 46) + 'px'; txt.style.opacity = String(1 - v / max * 1.2); }
    function done() { max = tr.clientWidth - 46; set(max); w.classList.add('is-done'); th.setAttribute('aria-label', 'Betaald'); }
    th.addEventListener('pointerdown', function (e) { if (w.classList.contains('is-done')) return; on = true; max = tr.clientWidth - 46; x0 = e.clientX - dx; th.setPointerCapture(e.pointerId); w.classList.add('is-drag'); });
    th.addEventListener('pointermove', function (e) { if (on) set(Math.max(0, Math.min(max, e.clientX - x0))); });
    function up() { if (!on) return; on = false; w.classList.remove('is-drag'); if (dx > max * .9) done(); else { set(0); txt.style.opacity = ''; } }
    th.addEventListener('pointerup', up); th.addEventListener('pointercancel', up);
    th.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); if (!w.classList.contains('is-done')) done(); } });
    w.querySelector('.stc__reset').addEventListener('click', function () { w.classList.remove('is-done'); set(0); txt.style.opacity = ''; th.setAttribute('aria-label', 'Schuif om te betalen, of druk op Enter'); th.focus(); });
}
init(document.querySelector('.jouw-container'));