Checklist naar je offerte Nieuw

<!-- Checklist naar je offerte · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="vcl"><div class="vcl__in">
<div class="vcl__head">
<div class="vcl__ring" role="img" aria-label="0 van 4 stappen afgerond"><svg viewBox="0 0 44 44" aria-hidden="true"><circle class="vcl__trk" cx="22" cy="22" r="19"/><circle class="vcl__arc" cx="22" cy="22" r="19"/></svg><span class="vcl__frac" aria-hidden="true"><b>0</b>/4</span></div>
<div class="vcl__ht"><p class="vcl__eye">Dakkapel · Bouwbedrijf Molenaar</p><h3 class="vcl__h">4 stappen naar je offerte</h3><p class="vcl__st" aria-live="polite">Begin bij stap 1. Samen ongeveer 12 minuten.</p></div>
</div>
<ol class="vcl__list">
<li class="vcl__item"><input type="checkbox" class="vcl__cb" aria-labelledby="vcl-t1"><details class="vcl__d" name="vcl-uitleg"><summary class="vcl__sum"><span class="vcl__t" id="vcl-t1">Stuur 3 foto's van je dak</span><span class="vcl__min">2 min</span></summary><div class="vcl__body"><p>Eén van de voorgevel, één van het dakvlak aan de binnenkant en één van de plek waar de dakkapel komt. Een telefoonfoto is genoeg.</p><button type="button" class="vcl__do">Markeer als gedaan</button></div></details></li>
<li class="vcl__item"><input type="checkbox" class="vcl__cb" aria-labelledby="vcl-t2"><details class="vcl__d" name="vcl-uitleg"><summary class="vcl__sum"><span class="vcl__t" id="vcl-t2">Meet de breedte van het dakvlak</span><span class="vcl__min">5 min</span></summary><div class="vcl__body"><p>Meet binnen van muur tot muur, op vloerhoogte. Op 10 cm nauwkeurig is prima, wij meten later precies in.</p><button type="button" class="vcl__do">Markeer als gedaan</button></div></details></li>
<li class="vcl__item"><input type="checkbox" class="vcl__cb" aria-labelledby="vcl-t3"><details class="vcl__d" name="vcl-uitleg"><summary class="vcl__sum"><span class="vcl__t" id="vcl-t3">Kies kozijn en kleur</span><span class="vcl__min">3 min</span></summary><div class="vcl__body"><p>Kunststof of hout, en een kleur voor de boeidelen. Twijfel je? Kies "weet ik nog niet", dan nemen we het samen door.</p><button type="button" class="vcl__do">Markeer als gedaan</button></div></details></li>
<li class="vcl__item"><input type="checkbox" class="vcl__cb" aria-labelledby="vcl-t4"><details class="vcl__d" name="vcl-uitleg"><summary class="vcl__sum"><span class="vcl__t" id="vcl-t4">Plan de inmeting</span><span class="vcl__min">2 min</span></summary><div class="vcl__body"><p>Kies een moment op werkdagen tussen 8:00 en 17:00. De inmeting duurt ongeveer een half uur en is gratis.</p><button type="button" class="vcl__do">Markeer als gedaan</button></div></details></li>
</ol>
<div class="vcl__end"><p>Klaar. Molenaar stuurt je offerte binnen 2 werkdagen.</p><button type="button" class="vcl__reset">Opnieuw (demo)</button></div>
</div></div>
</div>

/* Checklist naar je offerte · NedDev · eigen werk. */
.vcl [hidden]{display:none!important}
.vcl{position:absolute;inset:0;overflow:auto;display:flex;padding:14px;box-sizing:border-box;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;container-type:inline-size;scrollbar-width:thin}
.vcl *,.vcl *::before,.vcl *::after{box-sizing:border-box}
.vcl__in{margin:auto;width:100%;max-width:520px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:6px;padding:14px}
.vcl__head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.vcl__ring{position:relative;flex:none;width:58px;height:58px}
.vcl__ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.vcl__trk{fill:none;stroke:#ebe8e3;stroke-width:4}
.vcl__arc{fill:none;stroke:#F5480F;stroke-width:4;stroke-linecap:round;stroke-dasharray:119.38;stroke-dashoffset:119.38;transition:stroke-dashoffset .45s cubic-bezier(.2,.8,.2,1),stroke .2s}
.vcl.is-done .vcl__arc{stroke:#146C43}
.vcl__frac{position:absolute;inset:0;display:grid;place-items:center;font:500 12px 'JetBrains Mono',monospace;color:#5a5a5a}
.vcl__frac b{color:#0a0a0a;font-size:15px}
.vcl__frac{grid-auto-flow:column;place-content:center}
.vcl__eye{margin:0;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#5a5a5a}
.vcl__h{margin:2px 0 2px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.vcl__st{margin:0;font-size:12.5px;color:#3d3d3d}
.vcl__list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(10,10,10,.1)}
.vcl__item{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid rgba(10,10,10,.1)}
.vcl__cb{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;border:1.5px solid #8c8c8c;border-radius:50%;background:#fff;cursor:pointer;display:grid;place-items:center;transition:background .15s,border-color .15s}
.vcl__cb::after{content:'';width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .18s}
.vcl__cb:hover{border-color:#0a0a0a}
.vcl__cb:checked{background:#146C43;border-color:#146C43}
.vcl__cb:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.vcl__cb:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.vcl__d{flex:1;min-width:0}
.vcl__sum{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:14px;font-weight:600;padding:1px 0;border-radius:3px}
.vcl__sum::-webkit-details-marker{display:none}
.vcl__sum::after{content:'';flex:none;width:7px;height:7px;border-right:1.5px solid #0a0a0a;border-bottom:1.5px solid #0a0a0a;transform:rotate(45deg);margin:0 4px 3px 0;transition:transform .2s}
.vcl__d[open] .vcl__sum::after{transform:rotate(-135deg);margin-bottom:-3px}
.vcl__sum:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.vcl__t{flex:1;min-width:0}
.vcl__item:has(.vcl__cb:checked) .vcl__t{color:#5a5a5a;text-decoration:line-through;text-decoration-color:rgba(10,10,10,.35)}
.vcl__item.is-next .vcl__t::after{content:'Volgende';display:inline-block;margin-left:7px;vertical-align:2px;font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;background:#F5480F;color:#0a0a0a;border-radius:100px;padding:2px 6px;text-decoration:none}
.vcl__min{flex:none;font:500 11px 'JetBrains Mono',monospace;color:#5a5a5a}
.vcl__body{padding:6px 0 4px;font-size:13px;line-height:1.5;color:#3d3d3d}
.vcl__body p{margin:0 0 8px}
.vcl__do,.vcl__reset{font:600 12.5px 'Switzer',system-ui,sans-serif;background:#fff;border:1px solid #0a0a0a;color:#0a0a0a;border-radius:4px;padding:6px 12px;cursor:pointer;transition:background .15s,color .15s}
.vcl__do:hover,.vcl__reset:hover{background:#0a0a0a;color:#fff}
.vcl__do:focus-visible,.vcl__reset:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.vcl__end{display:none;margin-top:10px;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;background:#e9f4ee;border-radius:4px;padding:9px 12px;font-size:13px;color:#0f5535;font-weight:600}
.vcl__end p{margin:0}
.vcl.is-done .vcl__end{display:flex}
@supports (interpolate-size:allow-keywords) and selector(::details-content){
.vcl{interpolate-size:allow-keywords}
.vcl__d::details-content{block-size:0;overflow:hidden;transition:block-size .25s ease,content-visibility .25s allow-discrete}
.vcl__d[open]::details-content{block-size:auto}}
@media (prefers-reduced-motion:reduce){.vcl *,.vcl__d::details-content{transition:none!important}}

// Checklist naar je offerte · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.vcl')||root;
var sfx='-'+Math.random().toString(36).slice(2,7);root.querySelectorAll('[id]').forEach(function(el){var o=el.id;el.id=o+sfx;root.querySelectorAll('[aria-labelledby="'+o+'"]').forEach(function(x){x.setAttribute('aria-labelledby',o+sfx);});});
root.querySelectorAll('.vcl__d').forEach(function(d){d.setAttribute('name','vcl-uitleg'+sfx);});
var items=[].slice.call(root.querySelectorAll('.vcl__item')),cbs=items.map(function(i){return i.querySelector('.vcl__cb');}),arc=root.querySelector('.vcl__arc'),ring=root.querySelector('.vcl__ring'),frac=root.querySelector('.vcl__frac b'),st=root.querySelector('.vcl__st'),C=119.38,MIN=[2,5,3,2];
function upd(announce){var n=cbs.filter(function(c){return c.checked;}).length,left=0;cbs.forEach(function(c,i){if(!c.checked)left+=MIN[i];});
 arc.style.strokeDashoffset=String(C*(1-n/4));frac.textContent=n;ring.setAttribute('aria-label',n+' van 4 stappen afgerond');
 var nx=cbs.findIndex(function(c){return !c.checked;});items.forEach(function(it,i){it.classList.toggle('is-next',i===nx&&n>0);});
 root.classList.toggle('is-done',n===4);
 var msg=n===0?'Begin bij stap 1. Samen ongeveer 12 minuten.':n===4?'Alle 4 stappen afgerond.':n+' van 4 klaar, nog ongeveer '+left+' minuten.';if(announce||st.textContent!==msg)st.textContent=msg;}
cbs.forEach(function(c){c.addEventListener('change',function(){upd(true);});});
root.querySelectorAll('.vcl__do').forEach(function(b,i){b.addEventListener('click',function(){cbs[i].checked=true;items[i].querySelector('.vcl__d').open=false;upd(true);var nx=cbs.findIndex(function(c){return !c.checked;});
 if(nx>=0){var d=items[nx].querySelector('.vcl__d');d.open=true;d.querySelector('.vcl__sum').focus();}else cbs[i].focus();});});
root.querySelector('.vcl__reset').addEventListener('click',function(){cbs.forEach(function(c){c.checked=false;});items.forEach(function(it){it.querySelector('.vcl__d').open=false;});upd(true);cbs[0].focus();});
cbs[0].checked=true;upd(false);
}
init(document.querySelector('.jouw-container'));