1<!DOCTYPE html> 2<html lang="nl"> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1"> 6<meta name="theme-color" content="#630D80"> 7<link rel="icon" href="favicon.ico?v=1.19.1" sizes="any"> 8<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png?v=1.19.1"> 9<link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png?v=1.19.1"> 10<link rel="apple-touch-icon" href="apple-touch-icon.png?v=1.19.1"> 11<title>Energieloket · In 3 stappen naar een optimaal energieplan · MDB à NRG</title> 12<link rel="preconnect" href="https://fonts.googleapis.com"> 13<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 14<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap" rel="stylesheet"> 15<link rel="stylesheet" href="assets/loket.css?v=1.19.1"> 16<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"> 17</head> 18<body> 19 20<header> 21 <div class="wrap bar"> 22 <div class="brand"> 23 <a class='logo' href='/'><img class="logo-img" src="assets/logo.png" alt="mdb | TBI"></a> 24 <span class="sep"></span> 25 <span class="loket">Energieloket</span> 26 </div> 27 <div class="navactions"> 28 <a class="btn primary sm" href="#stap1">Doe de check</a> 29 </div> 30 </div> 31</header> 32 33<main> 34 35<!-- ============ HERO ============ --> 36<section class="hero"> 37 <div class="wrap"> 38 <span class="eyebrow">Het energieloket</span> 39 <h1>In 3 stappen naar een optimaal energieplan</h1> 40 <p class="lead">Van een snelle eerste check tot een concreet plan voor je bouwplaats. Zie meteen waar de kansen liggen en waar je aansluiting krap wordt, en laat een expert met je meedenken.</p> 41 42 <div class="flow" id="flow"> 43 <button class="fstep active" onclick="goto('stap1')"> 44 <div class="num">STAP 01</div><h3>Quickscan</h3> 45 <p>Gratis. Beantwoord een paar korte vragen over je project; wij kijken naar net en ERE-kansen.</p> 46 </button> 47 <button class="fstep" onclick="goto('stap2')"> 48 <div class="num">STAP 02</div><h3>Energiescan</h3> 49 <p>Verdiepend: batterij nodig? Hoe verlaag je je energievraag?</p> 50 </button> 51 <button class="fstep" onclick="goto('stap3')"> 52 <div class="num">STAP 03</div><h3>Energieplan</h3> 53 <p>Een concreet plan, klaar voor uitvoering en facturatie.</p> 54 </button> 55 </div> 56 57 <div class="herocta"> 58 <a class="btn primary" href="#stap1">Doe de snelle check</a> 59 <a class="btn ghost" href="#stap2">Bekijk de scan en het plan</a> 60 </div> 61 </div> 62</section> 63 64<!-- ============ STAP 1 â QUICKSCAN ============ --> 65<section class="section" id="stap1"> 66 <div class="wrap"> 67 <div class="stepkicker"><b>Stap 1</b> Quickscan</div> 68 <h2>Doe de quickscan <span class="freebadge">Gratis</span></h2> 69 <p class="deck">Een paar korte vragen over jou en je project. De quickscan is een gratis uitwerking â wij kijken naar de netcapaciteit op je locatie en je ERE-kansen en nemen daarna contact met je op. Aan deze uitwerking zijn geen kosten verbonden.</p> 70 71 <!-- ====== WIZARD ====== --> 72 <div class="qwiz" id="qwiz"> 73 <div class="qwiz-progress"><div class="qwiz-bar" id="qwizBar"></div></div> 74 <div class="qwiz-label" id="qwizLabel">Stap 1 van 10</div> 75 76 <div class="qscreen" data-screen="first"> 77 <h3>Wat is je voornaam?</h3> 78 <input id="wzFirst" class="qwiz-input" placeholder="Voornaam" autocomplete="given-name"> 79 </div> 80 <div class="qscreen" data-screen="last" hidden> 81 <h3>En je achternaam?</h3> 82 <input id="wzLast" class="qwiz-input" placeholder="Achternaam" autocomplete="family-name"> 83 </div> 84 <div class="qscreen" data-screen="email" hidden> 85 <h3>Wat is je e-mailadres?</h3> 86 <input id="wzEmail" class="qwiz-input" type="email" placeholder="[email protected]" autocomplete="email"> 87 <p class="hint">Hierop ontvang je de bevestiging met je projectnummer.</p> 88 </div> 89 <div class="qscreen" data-screen="phone" hidden> 90 <h3>Wat is je telefoonnummer?</h3> 91 <input id="wzPhone" class="qwiz-input" type="tel" placeholder="06 12345678" autocomplete="tel"> 92 <p class="hint">Zodat we je snel kunnen bereiken over je aanvraag.</p> 93 </div> 94 <div class="qscreen" data-screen="company" hidden> 95 <h3>Voor welk bedrijf?</h3> 96 <input id="wzCompany" class="qwiz-input" placeholder="Bedrijfsnaam" autocomplete="organization"> 97 </div> 98 <div class="qscreen" data-screen="project" hidden> 99 <h3>Wat is de naam van het project?</h3> 100 <input id="wzProject" class="qwiz-input" placeholder="Projectnaam"> 101 </div> 102 103 <div class="qscreen" data-screen="net" hidden> 104 <h3>Is al bekend welk type netaansluiting nodig is voor de uitvoering?</h3> 105 <div class="choicegrid two"> 106 <button type="button" class="choicecard sm" data-net="ja" id="netJaBtn">Ja</button> 107 <button type="button" class="choicecard sm" data-net="nee" id="netNeeBtn">Nee</button> 108 </div> 109 <div id="netJa" class="hideblock" style="margin-top:14px"> 110 <label class="qlbl">Wat is de grootte van deze aansluiting?</label> 111 <input id="wzNetSize" class="qwiz-input" placeholder="Bijv. 3Ã80A, 250 kVA of 1Ã35A"> 112 <div id="netAlarm" class="hideblock alarmbox" style="margin-top:12px"> 113 <div class="alarm-h"> 114 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.7 3.86a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg> 115 <b>Aansluiting groter dan 3Ã80A</b> 116 </div> 117 <p>Het verkrijgen van zo'n aansluiting is op dit moment zeer onzeker en kent lange doorlooptijden. Het laten uitvoeren van een energiescan is daarom noodzakelijk. Met een gedetailleerd energieplan kan de benodigde aansluiting vaak worden verkleind.</p> 118 </div> 119 </div> 120 <div id="netNee" class="hideblock netinfo" style="margin-top:14px"> 121 <div class="netinfo-h"> 122 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v5"/><path d="M12 16h.01"/></svg> 123 <b>Nog niet bekend?</b> 124 </div> 125 <p>Een verdiepende scan maakt inzichtelijk welke aansluiting nodig is voor de uitvoering en werkt de meest efficiënte optie uit.</p> 126 <button type="button" class="btn primary sm" id="wzNetAsk">Vraag aan</button> 127 </div> 128 </div> 129 130 <div class="qscreen" data-screen="laad" hidden> 131 <h3>Is al bekend of er laadpalen nodig zijn op het project?</h3> 132 <div class="choicegrid two"> 133 <button type="button" class="choicecard sm" data-laad="ja" id="laadJaBtn">Ja</button> 134 <button type="button" class="choicecard sm" data-laad="nee" id="laadNeeBtn">Nee</button> 135 </div> 136 <div id="laadJa" class="hideblock" style="margin-top:14px"> 137 <label class="qlbl">Hoeveel laadplekken zijn er nodig?</label> 138 <div class="stepper sm"> 139 <button type="button" onclick="wzLaadBump(-1)" aria-label="minder">−</button> 140 <input id="wzLaadAantal" class="mono" value="1" inputmode="numeric"> 141 <button type="button" onclick="wzLaadBump(1)" aria-label="meer">+</button> 142 </div> 143 <p class="hint" style="margin-top:8px">Het aantal plekken waar tegelijk geladen moet kunnen worden.</p> 144 </div> 145 <div id="laadNee" class="hideblock netinfo" style="margin-top:14px"> 146 <div class="netinfo-h"> 147 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v5"/><path d="M12 16h.01"/></svg> 148 <b>Nog niet bekend?</b> 149 </div> 150 <p>Geen probleem â we bepalen samen met je of en hoeveel laadplekken er nodig zijn, en wat dat betekent voor je aansluiting en je ERE-opbrengst.</p> 151 </div> 152 </div> 153 154 <div class="qscreen" data-screen="eisen" hidden> 155 <h3>Spelen er eisen of kansen in de aanbesteding?</h3> 156 <p class="hint">Gelden er vanuit de opdrachtgever eisen, of kun je punten halen op een van deze onderdelen? Meerdere mogelijk.</p> 157 <div class="checkgrid" id="wzEisen"> 158 <label class="checkopt"><input type="checkbox" value="Netbewust bouwen"><span>Netbewust bouwen</span></label> 159 <label class="checkopt"><input type="checkbox" value="Inzet van zero-emissiematerieel"><span>Inzet van zero-emissiematerieel</span></label> 160 <label class="checkopt"><input type="checkbox" value="Eisen rondom COâ-uitstoot of stikstofdepositie"><span>Eisen rondom COâ-uitstoot of stikstofdepositie</span></label> 161 <label class="checkopt"><input type="checkbox" value="Beperking energieverbruik"><span>Beperking energieverbruik</span></label> 162 </div> 163 <p class="hint">Niet van toepassing? Ga gewoon verder.</p> 164 </div> 165 166 <div class="qscreen" data-screen="loc" hidden> 167 <h3>Waar ligt het project?</h3> 168 <div id="locLaten" class="infonote">
169 <span class="infodot" aria-hidden="true">i</span> 170 <div>Wij gaan voor je na of er sprake is van netcongestie voor je project. In de quickscan bepalen we de haalbaarheid van het verkrijgen van de netaansluiting vóór start van de uitvoering.</div> 171 </div> 172 <div class="adresrow"> 173 <input id="wzAddr" class="qwiz-input" placeholder="Adres of plaats" onkeydown="if(event.key==='Enter'){event.preventDefault();window.qwizSearch&&window.qwizSearch();}"> 174 <button class="btn primary" type="button" id="wzAddrBtn">Zoek</button> 175 </div> 176 <p class="hint">Of sleep de speld naar de juiste plek op de kaart.</p> 177 <div id="wzMap" class="qwiz-map"></div> 178 <p class="hint" id="wzCoord"></p> 179 <div class="netinfo"> 180 <div class="netinfo-h"> 181 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4"/><path d="M12 17h.01"/><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.7 3.86a2 2 0 0 0-3.4 0Z"/></svg> 182 <b>Houd rekening met netcongestie</b> 183 </div> 184 <p>De doorlooptijd van een nieuwe aansluiting tot 3Ã80A is op veel plekken meer dan een jaar. In veel gebieden is een grotere aansluiting dan 3Ã80A binnen 3 tot 5 jaar niet te verkrijgen.</p> 185 <p>Ligt je bouwlocatie in een netcongestiegebied? Bekijk dan de capaciteit bij de netbeheerders en houd hier vroeg rekening mee in je planning.</p> 186 <a class="netinfo-link" href="https://data.partnersinenergie.nl/capaciteitskaart/totaal/afname" target="_blank" rel="noopener">Open de capaciteitskaart van de netbeheerders â</a> 187 </div> 188 </div> 189 <div class="qscreen" data-screen="term" hidden> 190 <h3>Wat is de looptijd van het project?</h3> 191 <div class="row2" style="max-width:440px"> 192 <div class="field"><label>Van</label><input type="date" id="wzStart" class="qwiz-input"></div> 193 <div class="field"><label>Tot</label><input type="date" id="wzEnd" class="qwiz-input"></div> 194 </div> 195 </div> 196 197 <div id="wzMsg" class="authmsg" style="display:none"></div> 198 <div class="qwiz-nav"> 199 <button class="btn ghost" type="button" id="wzBack" style="visibility:hidden">Terug</button> 200 <button class="btn primary" type="button" id="wzNext">Volgende</button> 201 </div> 202 </div> 203 204 <!-- bestaande quickscan-stappen, verschijnen na de wizard --> 205 <div id="qrest" style="display:none"> 206 207 <!-- ROUTE: ZELF --> 208 <div class="routepanel show" id="route-zelf"> 209 210 <div class="qcard hideblock" id="q2"> 211 <div class="qh"><span class="qn">VRAAG 2</span><h3>Heb je laadinfra op je project?</h3></div> 212 <p class="ql">Denk aan laadpalen voor auto’s en busjes of laadpunten voor elektrisch materieel zoals kranen.</p> 213 <div class="seg" style="max-width:420px"> 214 <button id="liJa" aria-pressed="false" onclick="setLaadinfra(true)">Ja, of die komt er</button> 215 <button id="liNee" aria-pressed="false" onclick="setLaadinfra(false)">Nee, geen laadinfra</button> 216 </div> 217 <div class="hint" id="liAdvies" style="display:none;margin-top:12px"><b>Geen laadinfra, geen ERE.</b> ERE verdien je door stroom in vervoer en mobiele machines te laden — zonder laadinfra is de indicatie € 0. Komt er later wel materieel? Verstuur je aanvraag hieronder, dan denken we met je mee.</div> 218 </div> 219 220 <div class="hideblock" id="calcwrap" style="margin-top:16px"> 221 <div class="qh" style="margin-bottom:4px"><span class="qn">UITKOMST</span><h3 style="font-family:var(--font-display);font-size:17px;font-weight:600">Jouw ERE-inzicht</h3></div> 222 <p class="ql" style="color:var(--muted);font-size:13.5px;margin-bottom:16px">Stel je laadinfra in en zie direct de opbrengst en of je aansluiting een knelpunt wordt.</p> 223 <div class="check"> 224 <div> 225 <div class="panel"> 226 <p class="ph"><span class="ix">
226<svg class="icn" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 3 6 14h5l-1 7 8-11h-5l0-7z"/></svg></span> Wat staat er op je project?</p> 227 <div class="field"> 228 <label>Type laadpunt <span class="lblhint">â meerdere mogelijk</span></label> 229 <div class="typelist" id="typeList"> 230 <div class="typerow" data-type="auto"> 231 <button type="button" class="typetog on" aria-pressed="true" onclick="toggleType('auto',this)"><span class="tk" aria-hidden="true"></span> Laadpaal auto</button> 232 <div class="typectl"> 233 <div class="stepper sm"> 234 <button type="button" onclick="bumpType('auto',-1)" aria-label="minder">−</button> 235 <input id="cntAuto" class="mono" value="1" inputmode="numeric" onchange="readType('auto')"> 236 <button type="button" onclick="bumpType('auto',1)" aria-label="meer">+</button> 237 </div> 238 <div class="kwhin"><input id="kwhAuto" class="mono" value="300" inputmode="numeric" onchange="readType('auto')"><span>kWh/wk</span></div> 239 </div> 240 </div> 241 <div class="typerow off" data-type="werktuig"> 242 <button type="button" class="typetog" aria-pressed="false" onclick="toggleType('werktuig',this)"><span class="tk" aria-hidden="true"></span> Laadpaal mobiele werktuigen</button> 243 <div class="typectl"> 244 <div class="stepper sm"> 245 <button type="button" onclick="bumpType('werktuig',-1)" aria-label="minder">−</button> 246 <input id="cntWerktuig" class="mono" value="1" inputmode="numeric" onchange="readType('werktuig')"> 247 <button type="button" onclick="bumpType('werktuig',1)" aria-label="meer">+</button> 248 </div> 249 <div class="kwhin"><input id="kwhWerktuig" class="mono" value="1000" inputmode="numeric" onchange="readType('werktuig')"><span>kWh/wk</span></div> 250 </div> 251 </div> 252 <div class="typerow off" data-type="eigen"> 253 <button type="button" class="typetog" aria-pressed="false" onclick="toggleType('eigen',this)"><span class="tk" aria-hidden="true"></span> Eigen invoer</button> 254 <div class="typectl"> 255 <div class="stepper sm"> 256 <button type="button" onclick="bumpType('eigen',-1)" aria-label="minder">−</button> 257 <input id="cntEigen" class="mono" value="1" inputmode="numeric" onchange="readType('eigen')"> 258 <button type="button" onclick="bumpType('eigen',1)" aria-label="meer">+</button> 259 </div> 260 <div class="kwhin"><input id="kwhEigen" class="mono" value="500" inputmode="numeric" onchange="readType('eigen')"><span>kWh/wk</span></div> 261 </div> 262 </div> 263 </div> 264 <div class="hint">Vink de typen aan die op je project staan. Per type stel je het aantal en het weekverbruik per stuk in.</div> 265 </div> 266 <div class="field"> 267 <label>Hoe wordt er geladen?</label> 268 <div class="seg green" id="segStroom"> 269 <button aria-pressed="false" onclick="setStroom('grijs',this)">Netstroom (grijs)</button> 270 <button aria-pressed="true" onclick="setStroom('groen',this)">Groene bron (groen)</button> 271 </div> 272 <div class="hint">Groen tarief geldt met zon, GvO of een groen geladen batterij. Op enkel netstroom boek je grijs in.</div> 273 </div> 274 <div class="field"> 275 <label>Batterij toevoegen?</label> 276 <div class="seg" id="segBat"> 277 <button aria-pressed="true" onclick="setBat(0,this)">Geen</button> 278 <button aria-pressed="false" onclick="setBat(100,this)">100 kWh</button> 279 <button aria-pressed="false" onclick="setBat(300,this)">300 kWh</button> 280 </div> 281 <div class="hint">Vergroent maximaal één lading per nacht en vangt pieken op je aansluiting op.</div> 282 </div> 283 </div> 284 285 <div class="panel"> 286 <p class="ph"><span class="ix">
286<svg class="icn" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3v5M15 3v5M7 8h10v3a5 5 0 0 1-10 0V8zM12 16v5"/></svg></span> Je netaansluiting</p> 287 <div class="row2"> 288 <div class="field"> 289 <label>Type aansluiting</label> 290 <select id="aansl" onchange="readAansl()"> 291 <option value="17">3 à 25A (17 kW)</option> 292 <option value="24">3 à 35A (24 kW)</option> 293 <option value="35">3 à 50A (35 kW)</option> 294 <option value="44" selected>3 à 63A (44 kW)</option> 295 <option value="55">3 à 80A (55 kW)</option> 296 <option value="86">3 à 125A (86 kW)</option> 297 <option value="160">Grootverbruik (160 kW)</option> 298 </select> 299 </div> 300 <div class="field"> 301 <label>Verwacht piekvermogen</label> 302 <div class="sliderrow"> 303 <input type="range" id="piek" min="5" max="200" step="5" value="35" oninput="readPiek()"> 304 <span class="kwhbox" id="pieklab">35 kW</span> 305 </div> 306 </div> 307 </div> 308 <details class="adv"> 309 <summary>Tarieven aanpassen</summary> 310 <div class="advgrid"> 311 <div><label>ERE groen (â¬/kWh)</label><input id="tGroen" class="mono" value="0,12" onchange="readT()"></div> 312 <div><label>ERE grijs (â¬/kWh)</label><input id="tGrijs" class="mono" value="0,05" onchange="readT()"></div> 313 <div><label>Meet- en facturatie (â¬/jaar p.st.)</label><input id="tFee" class="mono" value="456" onchange="readT()"></div> 314 <div><label>Nachten per week</label><input id="tNacht" class="mono" value="5" onchange="readT()"></div> 315 </div> 316 <div class="hint" style="margin-top:10px">Indicatieve tarieven. Bevestig de actuele ERE-koers voor je dit met een project deelt.</div> 317 </details> 318 </div> 319 </div> 320 321 <aside class="cockpit" id="cockpit"> 322 <div class="cockhead"> 323 <span class="t">Kansen · ERE-opbrengst</span> 324 <span class="badge go" id="kansBadge">Kansrijk</span> 325 </div> 326 <div class="bignum mono" id="big">⬠0</div> 327 <p class="sub" id="subline">per jaar</p> 328 <div class="compare"> 329 <div class="crow"><span class="lab">Niets doen</span><div class="track"><div class="fill niets" id="fNiets"></div></div><span class="val">⬠0</span></div> 330 <div class="crow"><span class="lab">Grijs</span><div class="track"><div class="fill grijs" id="fGrijs"></div></div><span class="val mono" id="vGrijs">⬠0</span></div> 331 <div class="crow"><span class="lab">Groen</span><div class="track"><div class="fill groen" id="fGroen"></div></div><span class="val mono" id="vGroen">⬠0</span></div> 332 </div> 333 <div class="batline" id="batline" style="display:none">Met de batterij boek je <b id="batExtra">⬠0</b> extra per jaar groen in.</div> 334 <div class="divider"></div> 335 <div class="cockhead"><span class="t">Knelpunt · aansluiting</span><span class="badge go" id="netBadge">Ruim</span></div> 336 <div class="compare" style="margin-top:12px"> 337 <div class="crow"><span class="lab">Capaciteit</span><div class="track"><div class="fill cap" id="fCap" style="width:100%"></div></div><span class="val mono" id="vCap">44 kW</span></div> 338 <div class="crow"><span class="lab">Piekvraag</span><div class="track"><div class="fill piek" id="fPiek"></div></div><span class="val mono" id="vPiek">35 kW</span></div> 339 </div> 340 <div class="verdict go" id="verdict"></div> 341 <p class="fineprint">Indicatie voor de eerste check. De energiescan rekent met je werkelijke profiel.</p> 342 </aside> 343 </div> 344 </div> 345 346 <div class="qcard hideblock" id="finalSubmit" style="margin-top:16px"> 347 <h3 style="font-size:18px;font-weight:600">Aanvraag afronden</h3> 348 <p class="ql" style="margin:6px 0 14px">Stuur eventueel documenten mee en verstuur je aanvraag. Je ontvangt een bevestiging met je projectnummer.</p> 349 <div class="hp" aria-hidden="true"><label>Laat dit veld leeg<input id="wzHp" type="text" name="website" tabindex="-1" autocomplete="off"></label></div> 350 <div class="field"> 351 <div class="drop" id="drop"><div><b>Sleep bestanden hierheen</b> of klik om te kiezen</div><div class="hint" style="margin-top:5px">Plattegrond, planning, materieellijst, aansluitgegevens</div><input type="file" id="files" multiple hidden></div> 352 <ul class="filelist" id="filelist"></ul> 353 </div> 354 <div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap"> 355 <button class="btn primary" id="btnQuick">Aanvraag versturen</button> 356 <button class="btn ghost sm" onclick="goto('stap2')">Of bekijk de energiescan</button> 357 </div> 358 <div class="success" id="success" style="margin-top:16px"> 359 <h3>Bedankt, je aanvraag staat klaar</h3> 360 <p>Een expert neemt binnen 2 werkdagen contact op.</p> 361 <div class="recap" id="recap"></div> 362 </div> 363 </div> 364 </div> 365 366 </div><!-- /qrest --> 367 </div> 368</section> 369 370<!-- ============ STAP 2 â ENERGIESCAN ============ --> 371<section class="section wash" id="stap2"> 372 <div class="wrap"> 373 <div class="stepkicker"><b>Stap 2</b> Energiescan</div> 374 <h2>De verdiepende energiescan</h2> 375 <p class="deck">De quickscan laat zien dát er iets speelt. De energiescan beantwoordt de vraag erachter, op basis van je werkelijke energieprofiel en planning.</p> 376 <div class="xgrid"> 377 <div class="xcard"><div class="qi">
377<svg class="icn" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="8" width="15" height="9"/><path d="M21 11v3M7 11v3M11 11v3"/></svg></div><h3>Heb ik een batterij nodig?</h3><p>We bepalen of een batterij je pieken opvangt, je aansluiting ontlast en hoeveel extra groene ERE hij realistisch oplevert.</p></div> 378 <div class="xcard"><div class="qi"><svg class="icn" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v15M6 13l6 6 6-6"/></svg></div><h3>Hoe verlaag ik mijn energievraag?</h3><p>Welke maatregelen, fasebalancering en slim laden verlagen je piek en verbruik, zodat een zwaardere aansluiting niet nodig is.</p></div> 379 <div class="xcard"><div class="qi"><svg class="icn" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3.5"/></svg></div><h3>Hoe benut ik de kansen?</h3><p>We vertalen de kansen uit de quickscan naar concrete ERE-opbrengst en de route om groen te kunnen inboeken.</p></div> 380 </div> 381 <div class="herocta" style="margin-top:24px"> 382 <button class="btn primary" onclick="openScanForm()">Vraag de verdiepende energiescan aan</button> 383 </div> 384 385 <div class="qcard hideblock" id="scanwrap" style="margin-top:24px"> 386 <div id="intake2"> 387 <h3 style="font-size:19px;font-weight:600">Aanvraag verdiepende energiescan</h3> 388 <p class="ql" style="margin:6px 0 18px">Hoe meer je meestuurt, hoe scherper de scan. Denk aan je planning, materieellijst, jaarverbruik en aansluitgegevens.</p> 389 <div class="row2"> 390 <div class="field"><label>Projectlocatie *</label><input id="esLoc" placeholder="Plaats of adres van het project"></div> 391 <div class="field"><label>Gewenste startdatum</label><input id="esStart" placeholder="Bijv. zo snel mogelijk, of vanaf augustus"></div> 392 </div> 393 <div class="field"><label>Je vraagstelling *</label><textarea id="esVraag" placeholder="Bijv. heb ik een batterij nodig, kan ik mijn aansluiting verlichten, hoeveel ERE kan ik realistisch inboeken?"></textarea></div> 394 <div class="row2"> 395 <div class="field"><label>Je naam *</label><input id="esNaam" placeholder="Voor- en achternaam"></div> 396 <div class="field"><label>E-mailadres *</label><input id="esMail" type="email" placeholder="[email protected]"></div> 397 </div> 398 <div class="field"> 399 <label>Documenten meesturen</label> 400 <div class="drop" id="drop2"><div><b>Sleep bestanden hierheen</b> of klik om te kiezen</div><div class="hint" style="margin-top:5px">Planning, materieellijst, jaarverbruik, aansluitgegevens</div><input type="file" id="files2" multiple hidden></div> 401 <ul class="filelist" id="filelist2"></ul> 402 <p class="hint">Je bestanden worden veilig met je aanvraag meegestuurd.</p> 403 </div> 404 <div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap"> 405 <button class="btn primary" id="btnScan" onclick="submitLead('energiescan')">Energiescan aanvragen</button> 406 <span class="hint" style="margin:0">We plannen binnen 2 werkdagen een intake. Je ontvangt vooraf een vaste prijs.</span> 407 </div> 408 </div> 409 <div class="success" id="success2"> 410 <h3>Bedankt, je aanvraag is binnen</h3> 411 <p>Een NRG-expert neemt binnen 2 werkdagen contact op om de intake in te plannen.</p> 412 <div class="recap" id="recap2"></div> 413 </div> 414 </div> 415 </div> 416</section> 417 418<!-- ============ STAP 3 â ENERGIEPLAN ============ --> 419<section class="section dark" id="stap3"> 420 <div class="wrap"> 421 <div class="stepkicker"><b>Stap 3</b> Energieplan</div> 422 <h2>Je energieplan, klaar voor uitvoering</h2> 423 <p class="deck">Het resultaat is een concreet plan voor je bouwplaats. MDB regelt de uitvoering en NRG borgt dat je het overzicht behoudt.</p> 424 <div class="planstrip"> 425 <div class="chip"><span class="d"></span> Aansluiting en batterij geregeld</div> 426 <div class="chip"><span class="d"></span> Slim laden ingericht</div> 427 <div class="chip"><span class="d"></span> Meting en MID-meters</div> 428 <div class="chip"><span class="d"></span> ERE inboeken en factureren</div> 429 <div class="chip"><span class="d"></span> Documenten netjes vastgelegd</div> 430 </div> 431 <div class="herocta" style="margin-top:24px"> 432 <a class="btn primary" href="#stap1">Start met de quickscan</a> 433 </div> 434 </div> 435</section> 436 437<!-- ============ FAQ ============ --> 438<section class="section wash">
439 <div class="wrap" style="max-width:820px"> 440 <div class="stepkicker"><b>FAQ</b> Veelgestelde vragen</div> 441 <h2 style="margin-bottom:18px">Goed om te weten</h2> 442 <div id="faq"></div> 443 </div> 444</section> 445 446</main> 447 448<footer> 449 <div class="wrap"> 450 <div class="frow"> 451 <a class='logo' href='/'>MDB · Energieloket</a> 452 </div> 453 <p class="disc">Energieloket als indicatie. Geen aanbod of garantie. Tarieven nog te bevestigen bij de inboekdienstverlener. Deze website wordt mede mogelijk gemaakt door <a class="site" href="https://nrggroup.nl/" target="_blank" rel="noopener">nrggroup.nl</a></p> 454 </div> 455</footer> 456 457<!-- Supabase + scripts -->
458<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
vendor: 1 bytes, line 458
458
459<script src="config.js?v=1.19.1"></script>
vendor: 1 bytes, line 459
459
460<script src="assets/app.js?v=1.19.1"></script>
vendor: 1 bytes, line 460
460
461<script> 462const nf=new Intl.NumberFormat('nl-NL',{style:'currency',currency:'EUR',maximumFractionDigits:0}); 463const S={types:{auto:{on:true,aantal:1,kwh:300},werktuig:{on:false,aantal:1,kwh:1000},eigen:{on:false,aantal:1,kwh:500}},stroom:'groen',bat:0,tGroen:0.12,tGrijs:0.05,fee:456,nacht:5,cap:44,piek:35}; 464const files=[]; // quickscan 465const files2=[]; // energiescan 466 467/* ---- navigatie ---- */ 468function goto(id){ 469 document.getElementById(id).scrollIntoView({behavior:'smooth'}); 470 const map=['stap1','stap2','stap3']; 471 document.querySelectorAll('.fstep').forEach((f,i)=>f.classList.toggle('active',map[i]===id)); 472} 473function setRoute(r){ 474 ['zelf','hulp'].forEach(x=>{ 475 document.getElementById('rc-'+x).classList.toggle('active',x===r); 476 document.getElementById('route-'+x).classList.toggle('show',x===r); 477 }); 478} 479function openScanForm(){document.getElementById('scanwrap').classList.add('show');document.getElementById('scanwrap').scrollIntoView({behavior:'smooth',block:'center'});} 480 481/* ---- Vraag 1: adres via PDOK Locatieserver ---- */ 482async function checkAdres(){ 483 const q=document.getElementById('adres').value.trim(); 484 const st=document.getElementById('locStatus'); 485 if(!q){st.textContent='Vul eerst een adres of plaats in.';return;} 486 st.textContent='Locatie opzoekenâ¦'; 487 let doc=null; 488 try{ 489 const r=await fetch('https://api.pdok.nl/bzk/locatieserver/search/v3/free?rows=1&fq=type:(adres OR weg OR woonplaats)&q='+encodeURIComponent(q)); 490 const d=await r.json(); 491 doc=d.response&&d.response.docs&&d.response.docs[0]; 492 }catch(e){doc=null;} 493 const res=document.getElementById('locres'); 494 if(doc){ 495 st.textContent=''; 496 document.getElementById('locNaam').textContent=doc.weergavenaam||q; 497 const det=[doc.gemeentenaam?('Gemeente '+doc.gemeentenaam):null,doc.provincienaam||null].filter(Boolean).join(' · '); 498 let co=null;const m=(doc.centroide_ll||'').match(/POINT\(([0-9.\-]+) ([0-9.\-]+)\)/); 499 if(m)co={lng:parseFloat(m[1]),lat:parseFloat(m[2])}; 500 document.getElementById('locDetail').textContent=det+(co?(' · '+co.lat.toFixed(4)+', '+co.lng.toFixed(4)):''); 501 document.getElementById('capHint').textContent='Bekijk de actuele afnamecapaciteit rond '+(doc.woonplaatsnaam||doc.gemeentenaam||'je projectlocatie')+'. Oranje of rood? Dan is een batterij, slim laden of een gedeelde aansluiting waarschijnlijk nodig.'; 502 }else{ 503 st.textContent='Live opzoeken lukt nu niet of het adres is niet gevonden. Open de kaart en zoek handmatig.'; 504 document.getElementById('locNaam').textContent=q; 505 document.getElementById('locDetail').textContent='Niet automatisch gevonden'; 506 } 507 res.classList.add('show'); 508 document.getElementById('q2').classList.add('show'); 509} 510 511/* ---- Vraag 2: laadinfra ---- */ 512function setLaadinfra(ja){ 513 document.getElementById('liJa').setAttribute('aria-pressed',ja); 514 document.getElementById('liNee').setAttribute('aria-pressed',!ja); 515 document.getElementById('liJa').classList.toggle('on',ja); 516 document.getElementById('liNee').classList.toggle('on',!ja); 517 document.getElementById('liAdvies').style.display=ja?'none':'block'; 518 const cw=document.getElementById('calcwrap'); 519 if(ja){ 520 cw.classList.add('show'); 521 calc(); 522 }else{ 523 cw.classList.remove('show'); 524 const big=document.getElementById('big'); if(big) big.textContent=nf.format(0); 525 } 526 // verzendblok verschijnt bij beide keuzes, zodat je altijd kunt aanvragen 527 const fs=document.getElementById('finalSubmit'); 528 fs.classList.remove('hideblock'); 529 (ja?cw:fs).scrollIntoView({behavior:'smooth',block:'start'}); 530} 531 532/* ---- ERE-rekenmodule ---- */ 533const TID={auto:'Auto',werktuig:'Werktuig',eigen:'Eigen'}; 534const TLAB={auto:'laadpaal auto',werktuig:'mobiele werktuigen',eigen:'eigen invoer'}; 535function toggleType(k,btn){S.types[k].on=!S.types[k].on;btn.setAttribute('aria-pressed',S.types[k].on);btn.classList.toggle('on',S.types[k].on);btn.closest('.typerow').classList.toggle('off',!S.types[k].on);calc();} 536function bumpType(k,n){const t=S.types[k];t.aantal=Math.max(1,t.aantal+n);document.getElementById('cnt'+TID[k]).value=t.aantal;calc();} 537function readType(k){const t=S.types[k];const a=parseInt(document.getElementById('cnt'+TID[k]).value)||1;t.aantal=Math.max(1,a);document.getElementById('cnt'+TID[k]).value=t.aantal;const w=parseInt(document.getElementById('kwh'+TID[k]).value)||0;t.kwh=Math.max(0,w);calc();} 538function setStroom(s,btn){S.stroom=s;
538[...btn.parentNode.children].forEach(b=>b.setAttribute('aria-pressed',b===btn));calc();} 539function setBat(v,btn){S.bat=v;[...btn.parentNode.children].forEach(b=>b.setAttribute('aria-pressed',b===btn));calc();} 540function readAansl(){S.cap=parseFloat(document.getElementById('aansl').value);document.getElementById('fCap').style.width='100%';calc();} 541function readPiek(){const v=parseInt(document.getElementById('piek').value);S.piek=v;const s=document.getElementById('piek');document.getElementById('pieklab').textContent=v+' kW';s.style.setProperty('--pct',((v-5)/195*100)+'%');calc();} 542function parseNum(id){return parseFloat(document.getElementById(id).value.replace(',','.'))||0;} 543function readT(){S.tGroen=parseNum('tGroen');S.tGrijs=parseNum('tGrijs');S.fee=parseNum('tFee');S.nacht=parseNum('tNacht');calc();} 544 545function animateBig(target){ 546 const el=document.getElementById('big'); 547 if(window.matchMedia('(prefers-reduced-motion: reduce)').matches){el.textContent=nf.format(Math.round(Math.max(0,target)));return;} 548 const start=parseFloat((el.textContent||'0').replace(/[^\d-]/g,''))||0;const t0=performance.now(); 549 function step(t){const k=Math.min(1,(t-t0)/500);const v=start+(target-start)*(1-Math.pow(1-k,3));el.textContent=nf.format(Math.round(Math.max(0,v)));if(k<1)requestAnimationFrame(step);} 550 requestAnimationFrame(step); 551} 552function calc(){ 553 let units=0,jaar=0,usedWeek=0;const parts=[]; 554 for(const k in S.types){const t=S.types[k];if(!t.on)continue;units+=t.aantal;jaar+=t.kwh*t.aantal*52;usedWeek+=t.kwh*t.aantal;parts.push(t.aantal+'à '+TLAB[k]);} 555 const nettoGroen=jaar*S.tGroen-S.fee*units, nettoGrijs=jaar*S.tGrijs-S.fee*units; 556 const capWeek=S.bat*S.nacht, greenWeek=Math.min(usedWeek,capWeek); 557 const batExtra=greenWeek*52*(S.tGroen-S.tGrijs); 558 const chosen=units===0?0:(S.stroom==='groen'?nettoGroen:nettoGrijs+(S.bat>0?batExtra:0)); 559 animateBig(chosen); 560 document.getElementById('subline').innerHTML=units===0?'Kies minimaal één type laadpunt':('per jaar · <b>'+parts.join(' + ')+'</b> · '+jaar.toLocaleString('nl-NL')+' kWh'); 561 document.getElementById('vGrijs').textContent=nf.format(Math.round(Math.max(0,nettoGrijs))); 562 document.getElementById('vGroen').textContent=nf.format(Math.round(Math.max(0,nettoGroen))); 563 const mx=Math.max(nettoGroen,nettoGrijs,1); 564 document.getElementById('fGrijs').style.width=Math.max(0,nettoGrijs)/mx*100+'%'; 565 document.getElementById('fGroen').style.width=Math.max(0,nettoGroen)/mx*100+'%'; 566 document.getElementById('fNiets').style.width='2%'; 567 const bl=document.getElementById('batline'); 568 if(S.bat>0){bl.style.display='block';document.getElementById('batExtra').textContent=nf.format(Math.round(batExtra));}else bl.style.display='none'; 569 const kb=document.getElementById('kansBadge'); 570 if(chosen>=4000){kb.className='badge go';kb.textContent='Zeer kansrijk';} 571 else if(chosen>=800){kb.className='badge go';kb.textContent='Kansrijk';} 572 else{kb.className='badge warn';kb.textContent='Beperkt';} 573 const ratio=S.piek/S.cap; 574 document.getElementById('vCap').textContent=Math.round(S.cap)+' kW'; 575 document.getElementById('vPiek').textContent=S.piek+' kW'; 576 const fp=document.getElementById('fPiek');fp.style.width=Math.min(100,ratio*100)+'%'; 577 const nb=document.getElementById('netBadge');let nstat; 578 if(ratio<=0.7){fp.className='fill piek';nb.className='badge go';nb.textContent='Ruim';nstat='ruim';} 579 else if(ratio<=1.0){fp.className='fill piek warn';nb.className='badge warn';nb.textContent='Krap';nstat='krap';} 580 else{fp.className='fill piek stop';nb.className='badge stop';nb.textContent='Tekort';nstat='tekort';} 581 const v=document.getElementById('verdict'); 582 const kanstxt=chosen>=800?('Er liggen kansen: tot <b>'+nf.format(Math.round(Math.max(nettoGroen,chosen)))+' per jaar</b> aan ERE met groen inboeken.'):'De ERE-kansen zijn hier beperkt; kijk naar meer of zwaarder verbruik.'; 583 let nettxt,cls; 584 if(nstat==='ruim'){nettxt='Je aansluiting heeft ruimte voor deze piek.';cls='go';} 585 else if(nstat==='krap'){nettxt='Je aansluiting wordt krap. Slim laden of een batterij voorkomt een zwaardere aansluiting.';cls='warn';} 586 else{nettxt='Je piekvraag overstijgt de aansluiting. Een batterij of maatregelen om de vraag te verlagen zijn waarschijnlijk nodig.';cls='stop';} 587 v.className='verdict '+cls; 588 v.innerHTML='<b>Eerste indicatie.</b> '+kanstxt+' '+nettxt; 589} 590 591/* ---- uploads (echte bestanden, worden bij de aanvraag meegestuurd) ---- */ 592function wireDrop(dropId,inputId,listId,arr){ 593 const drop=document.getElementById(dropId),inp=document.getElementById(inputId); 594 if(!drop) return; 595 const render=()=>{const ul=document.getElementById(listId);ul.innerHTML='';arr.forEach((f,i)=>{const li=document.createElement('li');li.innerHTML='<span>
595<svg class="icn" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11l-8 8a5 5 0 0 1-7-7l9-9a3.5 3.5 0 0 1 5 5l-9 9a2 2 0 0 1-3-3l8-8"/></svg> '+Loket.escape(f.name)+'</span><span class="x" title="verwijder">×</span>';li.querySelector('.x').onclick=()=>{arr.splice(i,1);render();};ul.appendChild(li);});}; 596 drop.onclick=()=>inp.click(); 597 inp.onchange=e=>{for(const f of e.target.files)arr.push(f);render();inp.value='';}; 598 ['dragover','dragenter'].forEach(ev=>drop.addEventListener(ev,e=>{e.preventDefault();drop.classList.add('over');})); 599 ['dragleave','drop'].forEach(ev=>drop.addEventListener(ev,e=>{e.preventDefault();drop.classList.remove('over');})); 600 drop.addEventListener('drop',e=>{for(const f of e.dataTransfer.files)arr.push(f);render();}); 601} 602wireDrop('drop2','files2','filelist2',files2); 603 604/* ---- aanvraag naar Supabase (accountvrij, met projectnummer) ---- */ 605const EMAIL_RE=/^[^\s@]+@[^\s@]+\.[^\s@]+$/; 606async function submitLead(type){ 607 let payload, arr, recapEl, successEl, intakeEl, btn; 608 if(type==='quickscan'){ 609 const loc=val('iLoc'),plan=val('iPlan'),werk=val('iWerk'),naam=val('iNaam'),mail=val('iMail'); 610 if(!loc||!plan||!werk||!naam||!mail){Loket.toast('Vul locatie, planning, werkzaamheden, naam en e-mail in.','err');return;} 611 if(!EMAIL_RE.test(mail)){Loket.toast('Vul een geldig e-mailadres in.','err');return;} 612 payload={p_type:type,p_location:loc,p_planning:plan,p_description:werk,p_contact_name:naam,p_contact_email:mail, 613 p_ere:document.getElementById('big').textContent+' per jaar'}; 614 arr=files;recapEl='recap';successEl='success';intakeEl='intake';btn=document.getElementById('btnQuick'); 615 }else{ 616 const loc=val('esLoc'),vraag=val('esVraag'),naam=val('esNaam'),mail=val('esMail'); 617 if(!loc||!vraag||!naam||!mail){Loket.toast('Vul locatie, vraagstelling, naam en e-mail in.','err');return;} 618 if(!EMAIL_RE.test(mail)){Loket.toast('Vul een geldig e-mailadres in.','err');return;} 619 payload={p_type:type,p_location:loc,p_planning:val('esStart'),p_description:vraag,p_contact_name:naam,p_contact_email:mail,p_ere:null}; 620 arr=files2;recapEl='recap2';successEl='success2';intakeEl='intake2';btn=document.getElementById('btnScan'); 621 } 622 if(!window.sb){Loket.toast('Supabase nog niet ingesteld.','err');return;} 623 btn.disabled=true;const lbl=btn.textContent;btn.innerHTML='<span class="spinner"></span> Versturenâ¦'; 624 try{ 625 // 1. bijlagen uploaden onder een eigen map 626 const folder=(crypto.randomUUID&&crypto.randomUUID())||('a'+Date.now()+Math.random().toString(36).slice(2)); 627 const attachments=[]; 628 for(const f of arr){ 629 const safe=f.name.replace(/[^\w.\-]+/g,'_'); 630 const path=folder+'/'+safe; 631 const {error:upErr}=await window.sb.storage.from('aanvragen').upload(path,f,{upsert:false}); 632 if(upErr)throw upErr; 633 attachments.push({name:f.name,path,size:f.size}); 634 } 635 // 2. aanvraag opslaan; projectnummer komt terug 636 const {data,error}=await window.sb.rpc('submit_lead',{...payload,p_attachments:attachments}); 637 if(error)throw error; 638 const nr=(data&&data.project_no)||'â'; 639 // 3. bevestiging tonen 640 document.getElementById(intakeEl).style.display='none'; 641 const rec=document.getElementById(recapEl); 642 rec.innerHTML='<div><b>Aanvraagnummer:</b> '+Loket.escape(nr)+'</div>'+ 643 '<div><b>Locatie:</b> '+Loket.escape(payload.p_location)+'</div>'+ 644 (payload.p_planning?'<div><b>Planning:</b> '+Loket.escape(payload.p_planning)+'</div>':'')+ 645 '<div><b>Vraag/werk:</b> '+Loket.escape(payload.p_description)+'</div>'+ 646 '<div><b>Contact:</b> '+Loket.escape(payload.p_contact_name)+' · '+Loket.escape(payload.p_contact_email)+'</div>'+ 647 (payload.p_ere?'<div><b>Indicatie:</b> '+Loket.escape(payload.p_ere)+'</div>':'')+ 648 (attachments.length?'<div><b>Bijlagen:</b> '+attachments.length+'</div>':'')+ 649 '<p class="hint" style="margin-top:10px">Bewaar je aanvraagnummer; je ontvangt ook een bevestiging per e-mail.</p>'; 650 const su=document.getElementById(successEl);su.classList.add('show');su.scrollIntoView({behavior:'smooth',block:'center'}); 651 }catch(err){ 652 Loket.toast('Versturen mislukt: '+(err.message||err),'err'); 653 btn.disabled=false;btn.textContent=lbl; 654 } 655} 656function val(id){return document.getElementById(id).value.trim();} 657 658/* ---- FAQ ---- */ 659const FAQ=[ 660 ['Wat doet de quickscan precies?','Op basis van locatie, planning en een korte omschrijving geeft een expert een eerste indicatie: liggen er ERE-kansen en zijn er knelpunten in de energievoorziening te verwachten? Je kunt documenten meesturen zodat we er meteen mee aan de slag kunnen.'],
661 ['Wat is het verschil met de energiescan?','De quickscan is de snelle eerste check. De energiescan gaat dieper in op de vraagstelling: heb je een batterij nodig, welke maatregelen verlagen je energievraag, en hoe benut je de kansen die er liggen? Die rekent met je werkelijke energieprofiel.'], 662 ['Wat is een ERE-certificaat?','Een Emissiereductie-eenheid staat voor 1 kg vermeden COâ. Sinds 2026 de opvolger van het HBE-systeem onder de NEa. Door groene stroom in vervoer te leveren verdien je EREâs, die brandstofleveranciers opkopen om aan hun COâ-verplichting te voldoen.'], 663 ['Waarom levert groen meer op dan grijs?','Netstroom telt voor ca. 50,5% als hernieuwbaar, groene stroom uit eigen opwek of GvO voor 100%. Daardoor is de ERE-waarde per kWh bij groen ruim het dubbele van grijs.'], 664 ['Verdient een batterij zich terug uit ERE?','Niet op zichzelf. Een batterij vergroent maar één lading per nacht, dus de extra ERE dekt maar een deel van de huur. De batterij verdient zich terug op peakshaving, minder diesel en een kleinere aansluiting. ERE is daar een plus bovenop.'], 665]; 666const faq=document.getElementById('faq'); 667FAQ.forEach(qa=>{const d=document.createElement('div');d.className='qa';d.setAttribute('open-state','0'); 668 d.innerHTML='<button aria-expanded="false"><span>'+qa[0]+'</span><span class="ic">+</span></button><div class="ans"><p>'+qa[1]+'</p></div>'; 669 const btn=d.querySelector('button'),ans=d.querySelector('.ans'),ic=d.querySelector('.ic'); 670 btn.onclick=()=>{const open=d.getAttribute('open-state')==='1';d.setAttribute('open-state',open?'0':'1');btn.setAttribute('aria-expanded',!open);ic.textContent=open?'+':'â';ans.style.maxHeight=open?'0':ans.scrollHeight+'px';}; 671 faq.appendChild(d);}); 672 673/* ---- scroll-spy stappen ---- */ 674const secmap={stap1:0,stap2:1,stap3:2}; 675const obs=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting&&secmap[e.target.id]!=null){document.querySelectorAll('.fstep').forEach((f,i)=>f.classList.toggle('active',i===secmap[e.target.id]));}});},{rootMargin:'-45% 0px -50% 0px'}); 676['stap1','stap2','stap3'].forEach(id=>obs.observe(document.getElementById(id))); 677 678readPiek();calc(); 679</script>
vendor: 1 bytes, line 679
679
680<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
vendor: 1 bytes, line 680
680
681<script src="assets/wizard.js?v=1.19.1"></script>
681 682</body> 683</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.