Bedankpagina offerte · Installatiebedrijf Kamphuis, Deventer Nieuw
Bedankpagina na een offerte-aanvraag bij een installateur: de warmtepomp waar je om vroeg groot op een kleurvlak, wie je belt en wanneer, een agenda waarin je meteen een moment voor de opname kiest, een afvinklijst van wat je alvast kunt klaarzetten met foto-upload, en hoe de installatiedag gaat.
Bedankt, Sanne
Je aanvraag voor een hybride warmtepomp in jullie tussenwoning aan de Rielerweg is binnen. Erik belt je morgenochtend om de opname af te spreken.
We stuurden een bevestiging naar s.dekker@voorbeeld.nl. Niks gekregen? Kijk even in je ongewenste mail, of bel ons.
Kies alvast een moment
Erik belt je morgen
Woensdag 21 oktober tussen 9:00 en 12:00, vanaf 0570 123 456. Neem je niet op, dan spreekt hij in en probeert hij het om 14:00 nog een keer. Hij wil vooral weten hoe warm jullie het thuis willen hebben en waar de buitenunit zou kunnen staan.
Daarna komt hij langs voor de opname. Dat duurt ongeveer drie kwartier. Binnen vijf werkdagen na de opname staat de offerte in je mail, met de ISDE-subsidie al uitgerekend.
Kies alvast een moment voor de opname
Dan hoeft Erik morgen alleen nog te bevestigen.
Donderdag 22 oktober
Vrijdag 23 oktober
Maandag 26 oktober
Dinsdag 27 oktober
Nog geen moment gekozen. Past niets? Dan zoekt Erik er morgen samen met je een.
Wat je alvast kunt doen
Hoeft niet, maar dan kan Erik de offerte bij de opname al bijna afmaken. Vink af wat je gedaan hebt.
Nog niets afgevinkt.
Als je ja zegt
De installatie duurt één dag. Twee monteurs staan om 7:30 voor de deur. De buitenunit komt op een tegel of aan een beugel, de binnenunit naast de ketel. Water en stroom zijn hooguit twee uur uit.
Aan het eind van de dag laat de monteur zien hoe de thermostaat werkt. Na drie weken bellen we om te horen of het huis warm genoeg is.
“Ze waren om vier uur klaar en de tuin lag er netter bij dan ’s ochtends.”Annemiek, Rielerenk, Deventer
We werken in Deventer en tot 25 kilometer eromheen.
Installatiebedrijf Kamphuis B.V. · Hanzeweg 9, 7418 AW Deventer · 0570 123 456 · info@voorbeeld.nl
KvK 08123456 · BTW NL001234567B01 · Erkend installateur InstallQ · F-gassencertificaat · Privacy · Voorwaarden
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.
<!-- Bedankpagina offerte · Installatiebedrijf Kamphuis, Deventer · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="kmp">
<div class="kmp__head" role="banner"><div class="kmp__in kmp__head-in">
<a href="#" class="kmp__logo" aria-label="Installatiebedrijf Kamphuis, naar home">Kamphuis</a>
<nav class="kmp__nav" aria-label="Hoofdmenu">
<a href="#">Warmtepompen</a><a href="#">Cv-ketels</a><a href="#">Zonnepanelen</a><a href="#">Onderhoud</a><a href="#">Over ons</a>
</nav>
<a href="tel:0570123456" class="kmp__tel">0570 123 456</a>
<button class="kmp__menu-knop" type="button" aria-expanded="false" aria-controls="kmp-menu" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="kmp__menu" id="kmp-menu" hidden>
<a href="#">Warmtepompen</a><a href="#">Cv-ketels</a><a href="#">Zonnepanelen</a><a href="#">Onderhoud</a><a href="#">Over ons</a><a href="tel:0570123456">Bel 0570 123 456</a>
</div>
</div>
<div class="kmp__hero">
<div class="kmp__hero-txt">
<h1 class="kmp__h1">Bedankt, Sanne</h1>
<p class="kmp__lead">Je aanvraag voor een hybride warmtepomp in jullie tussenwoning aan de Rielerweg is binnen. Erik belt je morgenochtend om de opname af te spreken.</p>
<p class="kmp__klein">We stuurden een bevestiging naar s.dekker@voorbeeld.nl. Niks gekregen? Kijk even in je ongewenste mail, of bel ons.</p>
<a href="#kmp-agenda" class="kmp__btn">Kies alvast een moment</a>
</div>
<div class="kmp__vlak">
<img src="https://neddev.com/lab-media/page-bedankt-offerte-1.webp" alt="Witte buitenunit van een hybride warmtepomp op een betonnen tegel" width="1408" height="768">
</div>
</div>
<div class="kmp__nu" id="kmp-agenda"><div class="kmp__in kmp__nu-in">
<figure class="kmp__erik">
<img src="https://neddev.com/lab-media/page-bedankt-offerte-2.webp" alt="Erik Bosman, adviseur bij Kamphuis, in de werkplaats tussen de koperen leidingen" width="768" height="1376" loading="lazy">
<figcaption>Erik Bosman doet al je contact tot de monteur voor de deur staat. Hij is zelf twaalf jaar monteur geweest.</figcaption>
</figure>
<div class="kmp__nu-txt">
<h2 class="kmp__h2">Erik belt je morgen</h2>
<p>Woensdag 21 oktober tussen 9:00 en 12:00, vanaf 0570 123 456. Neem je niet op, dan spreekt hij in en probeert hij het om 14:00 nog een keer. Hij wil vooral weten hoe warm jullie het thuis willen hebben en waar de buitenunit zou kunnen staan.</p>
<p>Daarna komt hij langs voor de opname. Dat duurt ongeveer drie kwartier. Binnen vijf werkdagen na de opname staat de offerte in je mail, met de ISDE-subsidie al uitgerekend.</p>
<div class="kmp__agenda">
<h3 class="kmp__h3">Kies alvast een moment voor de opname</h3>
<p class="kmp__agenda-uitleg">Dan hoeft Erik morgen alleen nog te bevestigen.</p>
<div class="kmp__dagen" role="group" aria-label="Beschikbare momenten">
<div class="kmp__dag"><p class="kmp__dag-naam">Donderdag 22 oktober</p><div class="kmp__tijden"><button type="button" class="kmp__tijd" aria-pressed="false">13:00</button><button type="button" class="kmp__tijd" aria-pressed="false">15:30</button></div></div>
<div class="kmp__dag"><p class="kmp__dag-naam">Vrijdag 23 oktober</p><div class="kmp__tijden"><button type="button" class="kmp__tijd" aria-pressed="false">8:30</button><button type="button" class="kmp__tijd" aria-pressed="false">10:30</button></div></div>
<div class="kmp__dag"><p class="kmp__dag-naam">Maandag 26 oktober</p><div class="kmp__tijden"><button type="button" class="kmp__tijd" aria-pressed="false">10:00</button><button type="button" class="kmp__tijd" aria-pressed="false">13:00</button><button type="button" class="kmp__tijd" aria-pressed="false">15:30</button></div></div>
<div class="kmp__dag"><p class="kmp__dag-naam">Dinsdag 27 oktober</p><div class="kmp__tijden"><button type="button" class="kmp__tijd" aria-pressed="false">8:30</button><button type="button" class="kmp__tijd" aria-pressed="false">16:00</button></div></div>
</div>
<p class="kmp__keuze" aria-live="polite">Nog geen moment gekozen. Past niets? Dan zoekt Erik er morgen samen met je een.</p>
<button type="button" class="kmp__btn kmp__vast" disabled>Dit moment vastleggen</button>
</div>
</div>
</div></div>
<div class="kmp__klaar"><div class="kmp__in">
<div class="kmp__klaar-kop">
<h2 class="kmp__h2">Wat je alvast kunt doen</h2>
<p>Hoeft niet, maar dan kan Erik de offerte bij de opname al bijna afmaken. Vink af wat je gedaan hebt.</p>
</div>
<ul class="kmp__lijst">
<li class="kmp__punt"><label class="kmp__vink"><input type="checkbox"><span class="kmp__vink-txt"><strong>Maak een foto van je cv-ketel</strong>Het liefst ook van het typeplaatje aan de onderkant of zijkant. Dan weten we of je ketel geschikt is om mee samen te werken.</span></label><img src="https://neddev.com/lab-media/page-bedankt-offerte-3.webp" alt="Cv-ketel aan de muur op een zolder met houten balken" width="900" height="491" loading="lazy"></li>
<li class="kmp__punt"><label class="kmp__vink"><input type="checkbox"><span class="kmp__vink-txt"><strong>Fotografeer de meterkast</strong>Met de deur open, zodat we de groepen zien. Een warmtepomp krijgt meestal een eigen groep; soms is er nog een vrije plek.</span></label><img src="https://neddev.com/lab-media/page-bedankt-offerte-4.webp" alt="Open meterkast in de gang met de groepenkast" width="900" height="491" loading="lazy"></li>
<li class="kmp__punt"><label class="kmp__vink"><input type="checkbox"><span class="kmp__vink-txt"><strong>Kijk waar de buitenunit kan staan</strong>Aan de achtergevel of in de tuin, met een meter vrije ruimte ervoor en het liefst niet onder het slaapkamerraam van de buren.</span></label><img src="https://neddev.com/lab-media/page-bedankt-offerte-5.webp" alt="Buitenunit tegen de bakstenen achtergevel van een rijtjeshuis met planten ervoor" width="900" height="491" loading="lazy"></li>
<li class="kmp__punt"><label class="kmp__vink"><input type="checkbox"><span class="kmp__vink-txt"><strong>Zoek je gasverbruik op</strong>Het staat op de jaarafrekening van je energieleverancier. Bij een tussenwoning uit de jaren zeventig is het vaak tussen 1.100 en 1.500 kuub.</span></label><img src="https://neddev.com/lab-media/page-bedankt-offerte-9.webp" alt="Bewoonster laat de installateur de thermostaat in de gang zien" width="900" height="491" loading="lazy"></li>
</ul>
<p class="kmp__teller" aria-live="polite">Nog niets afgevinkt.</p>
<form class="kmp__upload" novalidate>
<label class="kmp__drop">
<input type="file" class="kmp__file" accept="image/*" multiple>
<span class="kmp__drop-kop">Stuur je foto's alvast mee</span>
<span class="kmp__drop-sub">Sleep ze hierheen of tik om te kiezen. Ze komen bij je aanvraag OF-26-1184.</span>
</label>
<ul class="kmp__files" hidden></ul>
<p class="kmp__fout" aria-live="polite"></p>
<button type="submit" class="kmp__btn">Foto's versturen</button>
</form>
</div></div>
<div class="kmp__dagbeeld"><div class="kmp__in kmp__dagbeeld-in">
<img class="kmp__d1" src="https://neddev.com/lab-media/page-bedankt-offerte-6.webp" alt="Monteur sluit koperen leidingen aan op de buitenunit in een achtertuin" width="900" height="491" loading="lazy">
<div class="kmp__dagbeeld-txt">
<h2 class="kmp__h2">Als je ja zegt</h2>
<p>De installatie duurt één dag. Twee monteurs staan om 7:30 voor de deur. De buitenunit komt op een tegel of aan een beugel, de binnenunit naast de ketel. Water en stroom zijn hooguit twee uur uit.</p>
<p>Aan het eind van de dag laat de monteur zien hoe de thermostaat werkt. Na drie weken bellen we om te horen of het huis warm genoeg is.</p>
<blockquote class="kmp__quote">“Ze waren om vier uur klaar en de tuin lag er netter bij dan ’s ochtends.”<span>Annemiek, Rielerenk, Deventer</span></blockquote>
</div>
<img class="kmp__d2" src="https://neddev.com/lab-media/page-bedankt-offerte-8.webp" alt="Binnenunit en ketel in een opgeruimde bijkeuken naast de wasmachine" width="900" height="491" loading="lazy">
</div></div>
<div class="kmp__voet" role="contentinfo">
<img class="kmp__voet-foto" src="https://neddev.com/lab-media/page-bedankt-offerte-7.webp" alt="Straat met bakstenen rijtjeshuizen in Deventer in de herfst" width="900" height="491" loading="lazy">
<div class="kmp__in kmp__voet-in">
<p class="kmp__voet-groot">We werken in Deventer en tot 25 kilometer eromheen.</p>
<p>Installatiebedrijf Kamphuis B.V. · Hanzeweg 9, 7418 AW Deventer · <a href="tel:0570123456">0570 123 456</a> · <a href="mailto:info@voorbeeld.nl">info@voorbeeld.nl</a></p>
<p>KvK 08123456 · BTW NL001234567B01 · Erkend installateur InstallQ · F-gassencertificaat · <a href="#">Privacy</a> · <a href="#">Voorwaarden</a></p>
</div>
</div>
</div>
</div>/* Bedankpagina offerte · Installatiebedrijf Kamphuis, Deventer · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
/* fonts (Fontshare): cabinet-grotesk@800 + switzer@400,500 */
.kmp{--bg:#E8EDF2;--opp:#F7F9FB;--tekst:#0F1720;--gedempt:#465366;--lijn:#CBD3DD;--accent:#B4232A;--op-accent:#FFFFFF;--r:8px;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:48px;--fs6:84px;--sectie:clamp(72px,9vw,140px);--kader:1660px;--lees:720px;--zij:20px;--kop:'Cabinet Grotesk',sans-serif;
container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Switzer',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.6}
.kmp *{box-sizing:border-box}
.kmp [hidden]{display:none!important}
.kmp a{color:inherit}
.kmp img{display:block;max-width:100%;height:auto}
.kmp figure,.kmp blockquote{margin:0}
.kmp__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,56px)}
.kmp__head-in{display:flex;align-items:center;gap:32px;height:80px}
.kmp__logo{font-family:var(--kop);font-weight:800;font-size:var(--fs4);text-decoration:none;letter-spacing:-.01em}
.kmp__nav{display:flex;gap:26px;margin-left:auto}
.kmp__nav a{text-decoration:none;color:var(--gedempt);transition:color .18s}
.kmp__nav a:hover{color:var(--tekst)}
.kmp__tel{font-weight:500;text-decoration:none;padding:10px 0}
.kmp__btn{display:inline-block;background:var(--accent);color:var(--op-accent)!important;text-decoration:none;font-family:inherit;font-weight:500;font-size:var(--fs2);padding:14px 24px;border-radius:var(--r);border:0;cursor:pointer;transition:background-color .18s,opacity .18s}
.kmp__btn:hover{background:#931C22}
.kmp__btn:disabled{opacity:.4;cursor:not-allowed}
.kmp__menu-knop{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--lijn);border-radius:var(--r);background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.kmp__menu-knop span{display:block;width:20px;height:2px;background:var(--tekst)}
.kmp__menu{display:flex;flex-direction:column;padding:8px var(--zij) 20px;border-bottom:1px solid var(--lijn)}
.kmp__menu a{padding:12px 0;text-decoration:none;font-size:var(--fs3);border-bottom:1px solid var(--lijn)}
.kmp__hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch;min-height:clamp(480px,46vw,680px)}
.kmp__hero-txt{padding:clamp(48px,6vw,96px) clamp(32px,5vw,80px) clamp(48px,6vw,96px) max(clamp(var(--zij),4vw,56px),calc((100cqw - var(--kader))/2 + 56px));align-self:center}
.kmp__h1{font-family:var(--kop);font-weight:800;font-size:var(--fs6);line-height:.98;letter-spacing:-.02em;margin:0}
.kmp__lead{font-size:var(--fs3);line-height:1.5;margin:24px 0 16px;max-width:42ch}
.kmp__klein{color:var(--gedempt);margin:0 0 32px;max-width:48ch}
.kmp__vlak{background:linear-gradient(#87A3B5,#9AB5C5);display:flex;align-items:center;justify-content:center;overflow:hidden}
.kmp__vlak img{width:118%;max-width:none;margin-left:-4%;animation:kmp-land 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes kmp-land{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.kmp__nu{padding:var(--sectie) 0}
.kmp__nu-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,6vw,112px);align-items:start}
.kmp__erik img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:var(--r)}
.kmp__erik figcaption{margin-top:12px;color:var(--gedempt);max-width:40ch}
.kmp__h2{font-family:var(--kop);font-weight:800;font-size:var(--fs5);line-height:1.04;letter-spacing:-.015em;margin:0 0 24px}
.kmp__h3{font-family:var(--kop);font-weight:800;font-size:var(--fs4);line-height:1.15;margin:0}
.kmp__nu-txt>p{font-size:var(--fs3);line-height:1.55;margin:0 0 18px;max-width:var(--lees)}
.kmp__agenda{margin-top:40px;background:var(--opp);border-radius:var(--r);padding:clamp(20px,3vw,36px)}
.kmp__agenda-uitleg{margin:6px 0 20px;color:var(--gedempt)}
.kmp__dag{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--lijn)}
.kmp__dag-naam{margin:0;font-weight:500;min-width:200px}
.kmp__tijden{display:flex;gap:8px;flex-wrap:wrap}
.kmp__tijd{font:inherit;font-variant-numeric:tabular-nums;min-width:76px;padding:10px 14px;border:1px solid var(--lijn);border-radius:var(--r);background:#fff;color:var(--tekst);cursor:pointer;transition:border-color .18s,background-color .18s,color .18s}
.kmp__tijd:hover{border-color:var(--tekst)}
.kmp__tijd[aria-pressed="true"]{background:var(--tekst);border-color:var(--tekst);color:#fff}
.kmp__keuze{margin:20px 0 16px;padding-top:16px;border-top:1px solid var(--lijn);font-size:var(--fs3)}
.kmp__vastgelegd{margin:20px 0 0;padding:16px 18px;background:#fff;border-left:4px solid var(--accent);border-radius:var(--r);font-size:var(--fs3)}
.kmp__klaar{background:var(--opp);padding:var(--sectie) 0}
.kmp__klaar-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:32px}
.kmp__klaar-kop .kmp__h2{margin:0}
.kmp__klaar-kop p{margin:0;font-size:var(--fs3);color:var(--gedempt);max-width:44ch}
.kmp__lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--tekst)}
.kmp__punt{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:center;padding:20px 0;border-bottom:1px solid var(--lijn)}
.kmp__punt img{width:260px;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r);transition:filter .3s}
.kmp__vink{display:flex;gap:18px;align-items:flex-start;cursor:pointer}
.kmp__vink input{flex:0 0 auto;width:28px;height:28px;margin:2px 0 0;accent-color:var(--accent)}
.kmp__vink-txt{max-width:62ch;color:var(--gedempt)}
.kmp__vink-txt strong{display:block;font-family:var(--kop);font-weight:800;font-size:var(--fs4);line-height:1.2;color:var(--tekst);margin-bottom:6px}
.kmp__punt.is-af strong{text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:3px}
.kmp__punt.is-af img{filter:grayscale(1) opacity(.6)}
.kmp__teller{margin:16px 0 40px;color:var(--gedempt)}
.kmp__upload{display:grid;gap:16px;max-width:var(--lees)}
.kmp__drop{position:relative;display:grid;gap:4px;padding:28px;border:2px dashed var(--lijn);border-radius:var(--r);background:#fff;cursor:pointer;transition:border-color .18s}
.kmp__drop:hover,.kmp__drop.is-over{border-color:var(--accent)}
.kmp__file{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.kmp__drop-kop{font-family:var(--kop);font-weight:800;font-size:var(--fs4);line-height:1.2}
.kmp__drop-sub{color:var(--gedempt)}
.kmp__files{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.kmp__files li{padding:8px 12px;background:var(--bg);border-radius:var(--r);overflow-wrap:anywhere}
.kmp__fout{margin:0;color:var(--accent);font-weight:500}
.kmp__fout:empty{display:none}
.kmp__upload .kmp__btn{justify-self:start}
.kmp__dagbeeld{padding:var(--sectie) 0}
.kmp__dagbeeld-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"d1 txt" "d2 txt";gap:24px clamp(32px,5vw,96px);align-items:start}
.kmp__d1{grid-area:d1;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.kmp__d2{grid-area:d2;width:58%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);justify-self:end}
.kmp__dagbeeld-txt{grid-area:txt;position:sticky;top:24px}
.kmp__dagbeeld-txt p{margin:0 0 16px;max-width:46ch}
.kmp__quote{margin-top:32px!important;font-family:var(--kop);font-weight:800;font-size:var(--fs4);line-height:1.2}
.kmp__quote span{display:block;margin-top:12px;font-family:'Switzer',sans-serif;font-weight:400;font-size:var(--fs2);color:var(--gedempt)}
.kmp__voet{background:#141414;color:#CFCFCF;font-size:var(--fs1)}
.kmp .kmp__voet-foto{width:100%;height:clamp(200px,22vw,320px);object-fit:cover;filter:grayscale(.3)}
.kmp__voet-in{padding-top:40px;padding-bottom:40px;display:grid;gap:8px}
.kmp__voet-groot{font-family:var(--kop);font-weight:800;font-size:var(--fs4);color:#fff;margin:0 0 12px;line-height:1.2}
.kmp__voet p{margin:0}
@container (max-width:1000px){
.kmp__nav{display:none}
.kmp__tel{margin-left:auto}
.kmp__menu-knop{display:flex;margin-left:0}
.kmp__hero{grid-template-columns:minmax(0,1fr)}
.kmp__hero-txt{padding:48px clamp(var(--zij),4vw,56px)}
.kmp__vlak{order:-1;height:clamp(240px,60cqw,420px)}
.kmp__vlak img{width:100%;margin:0;height:100%;object-fit:cover}
.kmp__nu-in,.kmp__klaar-kop{grid-template-columns:minmax(0,1fr)}
.kmp__erik{display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px;align-items:end}
.kmp__dagbeeld-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"d1" "txt" "d2"}
.kmp__dagbeeld-txt{position:static}
}
@container (max-width:640px){
.kmp>*{--fs3:18px;--fs4:22px;--fs5:34px;--fs6:52px}
.kmp__head-in{gap:16px}
.kmp__tel{font-size:var(--fs1)}
.kmp__erik{grid-template-columns:110px minmax(0,1fr)}
.kmp__punt{grid-template-columns:minmax(0,1fr);gap:14px}
.kmp__punt img{width:100%;order:-1}
.kmp__dag-naam{min-width:0;width:100%}
.kmp__d2{width:100%}
}
@media (prefers-reduced-motion:reduce){.kmp *{transition:none!important;animation:none!important}}// Bedankpagina offerte · Installatiebedrijf Kamphuis, Deventer · © 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 s=root.querySelector('.kmp');if(!s)return;
var knop=s.querySelector('.kmp__menu-knop'),menu=s.querySelector('.kmp__menu');
knop.addEventListener('click',function(){var open=menu.hidden;menu.hidden=!open;knop.setAttribute('aria-expanded',String(open));knop.setAttribute('aria-label',open?'Menu sluiten':'Menu openen');});
menu.addEventListener('click',function(e){if(e.target.closest('a')){menu.hidden=true;knop.setAttribute('aria-expanded','false');}});
var tijden=[].slice.call(s.querySelectorAll('.kmp__tijd')),keuze=s.querySelector('.kmp__keuze'),vast=s.querySelector('.kmp__vast'),gekozen='';
tijden.forEach(function(t){t.addEventListener('click',function(){tijden.forEach(function(x){x.setAttribute('aria-pressed',String(x===t));});
var dag=t.closest('.kmp__dag').querySelector('.kmp__dag-naam').textContent.toLowerCase();var h=t.textContent.split(':'),m=+h[0]*60+(+h[1])+45;var eind=Math.floor(m/60)+':'+String(m%60).padStart(2,'0');
gekozen=dag+' om '+t.textContent;keuze.textContent='Erik komt '+gekozen+'. Hij is rond '+eind+' weer weg.';vast.disabled=false;});});
vast.addEventListener('click',function(){if(!gekozen)return;var p=document.createElement('p');p.className='kmp__vastgelegd';p.setAttribute('tabindex','-1');
p.textContent='Vastgelegd: '+gekozen+'. Je krijgt er een mail met een agenda-uitnodiging van. Erik belt morgen nog kort om het te bevestigen.';
s.querySelector('.kmp__dagen').hidden=true;keuze.hidden=true;s.querySelector('.kmp__agenda-uitleg').hidden=true;vast.replaceWith(p);p.focus();});
var punten=[].slice.call(s.querySelectorAll('.kmp__punt')),teller=s.querySelector('.kmp__teller');
var tw=['Nog niets afgevinkt.','Eén van de vier gedaan.','Twee van de vier gedaan.','Drie van de vier gedaan. Nog één.','Alles klaar. Erik kan bij de opname meteen door.'];
punten.forEach(function(li){li.querySelector('input').addEventListener('change',function(e){li.classList.toggle('is-af',e.target.checked);teller.textContent=tw[s.querySelectorAll('.kmp__punt.is-af').length];});});
var form=s.querySelector('.kmp__upload'),file=s.querySelector('.kmp__file'),lijst=s.querySelector('.kmp__files'),drop=s.querySelector('.kmp__drop'),fout=form.querySelector('.kmp__fout');
function toonFiles(){lijst.innerHTML='';var f=[].slice.call(file.files||[]);f.forEach(function(x){var li=document.createElement('li');li.textContent=x.name+' ('+Math.max(1,Math.round(x.size/1024))+' kB)';lijst.appendChild(li);});lijst.hidden=!f.length;if(f.length)fout.textContent='';}
file.addEventListener('change',toonFiles);
['dragenter','dragover'].forEach(function(n){drop.addEventListener(n,function(){drop.classList.add('is-over');});});
['dragleave','drop'].forEach(function(n){drop.addEventListener(n,function(){drop.classList.remove('is-over');});});
form.addEventListener('submit',function(e){e.preventDefault();var n=(file.files||[]).length;if(!n){fout.textContent='Kies eerst een of meer foto\'s.';return;}
var p=document.createElement('p');p.className='kmp__vastgelegd';p.setAttribute('tabindex','-1');p.textContent=(n===1?'Je foto staat':'Je '+n+' foto\'s staan')+' bij aanvraag OF-26-1184. Erik bekijkt ze voor hij je belt.';form.replaceWith(p);p.focus();});
}
init(document.querySelector('.jouw-container'));
Meer uit pagina-voorbeelden
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 →


