<!-- Landingspagina open dag · Kinderopvang De Boomgaard, Utrecht · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kbg">
<div class="kbg__kop" role="banner"><div class="kbg__in kbg__kop-in">
  <a href="#" class="kbg__logo" aria-label="Kinderopvang De Boomgaard, naar home"><svg viewBox="0 0 32 32" width="30" height="30" aria-hidden="true"><path d="M16 29V15" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/><path d="M16 17c-6 0-10-3.6-10-8.4C6 4.6 9.8 2 16 2s10 2.6 10 6.6C26 13.4 22 17 16 17z" fill="currentColor"/><circle cx="12" cy="9" r="1.8" fill="#A51D2D"/><circle cx="19.5" cy="7.5" r="1.8" fill="#A51D2D"/><circle cx="17" cy="12" r="1.8" fill="#A51D2D"/></svg><span>De Boomgaard<small>kinderopvang in Utrecht West</small></span></a>
  <a href="tel:0301234567" class="kbg__bel">030 123 4567</a>
</div></div>

<div class="kbg__hero"><div class="kbg__in kbg__hero-in">
  <div class="kbg__hero-txt">
    <h1 class="kbg__h1">Kom kijken op 14 november</h1>
    <p class="kbg__lead">Open dag op zaterdag van 10:00 tot 13:00, op alle drie onze locaties. Loop binnen, of kies hieronder een tijd voor een rondleiding van twintig minuten met de pedagogisch medewerker van de groep. Uw kind mag mee.</p>
    <div class="kbg__locs" role="radiogroup" aria-label="Kies een locatie">
      <button type="button" role="radio" aria-checked="true" class="kbg__loc" data-loc="lombok"><strong>De Peren</strong><span>Damstraat 14, Lombok</span></button>
      <button type="button" role="radio" aria-checked="false" class="kbg__loc" data-loc="oog"><strong>De Kersen</strong><span>Thomas à Kempisweg 40, Oog in Al</span></button>
      <button type="button" role="radio" aria-checked="false" class="kbg__loc" data-loc="lr"><strong>De Appels</strong><span>Grauwaartsingel 21, Leidsche Rijn</span></button>
    </div>
  </div>
  <div class="kbg__kaart">
    <svg viewBox="0 0 640 520" role="img" aria-labelledby="kbg-kaart-t">
      <title id="kbg-kaart-t">Kaart van Utrecht West met de drie locaties van De Boomgaard</title>
      <rect width="640" height="520" fill="#E4F5EE"/>
      <path d="M40 120c70 10 120 70 150 70s60-30 110-24" fill="none" stroke="#B0D9C8" stroke-width="2"/>
      <path d="M0 400c120-20 210 10 330-20" fill="none" stroke="#B0D9C8" stroke-width="2"/>
      <ellipse cx="110" cy="250" rx="78" ry="52" fill="#B0D9C8" opacity=".6"/>
      <path d="M232 0c-10 90 14 170 4 260s-26 170-12 260" fill="none" stroke="#8FC7B2" stroke-width="18" stroke-linecap="round"/>
      <path d="M0 300c90-6 180 6 236-2s120-10 196 2 120 0 208-6" fill="none" stroke="#8FC7B2" stroke-width="9" stroke-linecap="round"/>
      <path d="M430 300c4 70-8 140 0 220" fill="none" stroke="#8FC7B2" stroke-width="9" stroke-linecap="round"/>
      <path d="M520 150c60-20 110 20 110 80s-40 110-100 104-90-48-86-96 20-76 76-88z" fill="none" stroke="#8FC7B2" stroke-width="7"/>
      <path d="M300 300l40-130M360 300l60 140M470 280l-30-150" stroke="#B0D9C8" stroke-width="3"/>
      <text x="72" y="254" class="kbg__kt">Máximapark</text>
      <g class="kbg__lbl"><text x="426" y="246" class="kbg__kn">De Peren</text><text x="426" y="268" class="kbg__kt">Lombok</text></g>
      <g class="kbg__lbl"><text x="378" y="356" class="kbg__kn">De Kersen</text><text x="378" y="378" class="kbg__kt">Oog in Al</text></g>
      <g class="kbg__lbl"><text x="152" y="376" class="kbg__kn">De Appels</text><text x="152" y="398" class="kbg__kt">Leidsche Rijn</text></g>
      <text x="540" y="246" class="kbg__kt">Centrum</text>
      <g class="kbg__pin" data-loc="lombok" transform="translate(400 250)" tabindex="0" role="button" aria-label="De Peren in Lombok"><title>De Peren in Lombok</title><circle r="28" class="kbg__pin-h"/><circle r="12"/></g>
      <g class="kbg__pin" data-loc="oog" transform="translate(352 360)" tabindex="0" role="button" aria-label="De Kersen in Oog in Al"><title>De Kersen in Oog in Al</title><circle r="28" class="kbg__pin-h"/><circle r="12"/></g>
      <g class="kbg__pin" data-loc="lr" transform="translate(126 380)" tabindex="0" role="button" aria-label="De Appels in Leidsche Rijn"><title>De Appels in Leidsche Rijn</title><circle r="28" class="kbg__pin-h"/><circle r="12"/></g>
    </svg>
  </div>
</div></div>

<div class="kbg__boek" id="kbg-boek"><div class="kbg__in kbg__boek-in">
  <figure class="kbg__locfoto"><img src="https://neddev.com/lab-media/page-landing-open-dag-7c.webp" alt="" width="640" height="491" data-foto><figcaption data-u="groepen">Twee baby- en dreumesgroepen en een peutergroep, open van 7:30 tot 18:30.</figcaption></figure>
  <div class="kbg__boek-r">
    <h2 class="kbg__h2" data-u="titel">Rondleiding bij De Peren</h2>
    <div class="kbg__tabs" role="tablist" aria-label="Wanneer">
      <button type="button" role="tab" aria-selected="true" data-w="open">Zaterdag 14 november</button>
      <button type="button" role="tab" aria-selected="false" data-w="week">Liever doordeweeks</button>
    </div>
    <div class="kbg__tijden" role="radiogroup" aria-label="Kies een tijd"></div>
    <form class="kbg__form" novalidate>
      <label class="kbg__f"><span>Uw naam</span><input name="naam" autocomplete="name" required></label>
      <label class="kbg__f"><span>E-mailadres</span><input name="mail" type="email" autocomplete="email" required></label>
      <label class="kbg__f"><span>Leeftijd van uw kind</span><select name="leeftijd"><option>nog niet geboren</option><option>jonger dan 1 jaar</option><option>1 tot 2 jaar</option><option>2 tot 4 jaar</option></select></label>
      <button type="submit" class="kbg__knop">Reserveer deze tijd</button>
      <p class="kbg__fout" hidden></p>
    </form>
    <p class="kbg__klaar" hidden></p>
  </div>
</div></div>

<div class="kbg__zien"><div class="kbg__in">
  <h2 class="kbg__h2">Wat u ziet tijdens de rondleiding</h2>
  <div class="kbg__mozaiek">
    <figure class="kbg__m kbg__m1"><img src="https://neddev.com/lab-media/page-landing-open-dag-1.webp" alt="Groepsruimte met lage tafels en een poppenkeuken, de tuindeuren open" width="1408" height="768" loading="lazy"><figcaption>De groepsruimte van De Appels. De tuindeuren staan open zodra het droog is.</figcaption></figure>
    <figure class="kbg__m kbg__m2"><img src="https://neddev.com/lab-media/page-landing-open-dag-3.webp" alt="Slaapkamer met witte bedjes" width="900" height="491" loading="lazy"><figcaption>Elk kind slaapt in een eigen bedje, op het ritme van thuis.</figcaption></figure>
    <figure class="kbg__m kbg__m3"><img src="https://neddev.com/lab-media/page-landing-open-dag-11.webp" alt="Pedagogisch medewerker leest voor aan drie peuters" width="900" height="491" loading="lazy"><figcaption>Voorlezen na de lunch, elke dag.</figcaption></figure>
    <figure class="kbg__m kbg__m4"><img src="https://neddev.com/lab-media/page-landing-open-dag-9.webp" alt="Lunch met bruin brood, kaas, komkommer en appel" width="900" height="491" loading="lazy"><figcaption>We koken en smeren zelf. Geen pakjes.</figcaption></figure>
    <figure class="kbg__m kbg__m5"><img src="https://neddev.com/lab-media/page-landing-open-dag-12.webp" alt="Regenlaarsjes onder een bank in de gang" width="900" height="491" loading="lazy"><figcaption>Laarzen aan, ook als het regent.</figcaption></figure>
    <figure class="kbg__m kbg__m6"><img src="https://neddev.com/lab-media/page-landing-open-dag-8.webp" alt="Peuterhanden schilderen met verf op groot papier" width="900" height="491" loading="lazy"><figcaption>Verven op de grond of aan de lage tafel.</figcaption></figure>
    <figure class="kbg__m kbg__m7"><img src="https://neddev.com/lab-media/page-landing-open-dag-10.webp" alt="Pedagogisch medewerker trekt een bolderkar met vier peuters door het park" width="900" height="491" loading="lazy"><figcaption>Met de bolderkar naar het Máximapark.</figcaption></figure>
  </div>
</div></div>

<div class="kbg__ouders"><div class="kbg__in kbg__ouders-in">
  <blockquote class="kbg__quote kbg__quote--groot"><p>Bij de rondleiding wist de leidster al hoe onze dochter heette voordat we het hadden gezegd. Het formulier was gelezen. Dat gaf de doorslag.</p><footer>Sanne en Bilal, ouders van Noor, Oog in Al</footer></blockquote>
  <div class="kbg__quotes">
    <blockquote class="kbg__quote"><p>Onze zoon ging de eerste week huilend naar binnen en de tweede week zonder om te kijken. Ze sturen elke middag twee foto's.</p><footer>Maartje de Wit, Lombok</footer></blockquote>
    <blockquote class="kbg__quote"><p>Fijn dat ze zo veel buiten zijn. Hij komt elke dag vies thuis, zoals het hoort.</p><footer>Ruben Hoekstra, Leidsche Rijn</footer></blockquote>
  </div>
  <p class="kbg__keur">Alle drie de locaties staan in het Landelijk Register Kinderopvang · GGD-inspectie 2026 zonder tekortkomingen · vaste gezichten: maximaal drie medewerkers per baby</p>
</div></div>

<div class="kbg__kosten"><div class="kbg__in kbg__kosten-in">
  <div>
    <h2 class="kbg__h2">Wat het kost</h2>
    <p>Dagopvang kost in 2026 bij ons 10,85 euro per uur. Werken beide ouders, dan krijgt u het grootste deel terug via de kinderopvangtoeslag. Een gezin met een inkomen van 60.000 euro betaalt voor twee dagen per week netto ongeveer 170 euro per maand.</p>
    <p>Tijdens de rondleiding rekenen we het voor uw situatie uit. Inschrijven kost niets.</p>
  </div>
  <div class="kbg__faq">
    <details><summary>Is er een wachtlijst?</summary><p>Voor de babygroepen in Lombok wel, ongeveer vier maanden. In Leidsche Rijn is er vanaf januari plek op dinsdag en donderdag.</p></details>
    <details><summary>Wat moet ik meenemen?</summary><p>Niets. Wilt u na afloop inschrijven, dan helpt het als u het BSN van uw kind bij de hand hebt.</p></details>
    <details><summary>Hoe gaat het wennen?</summary><p>Twee ochtenden in de week voor de start, samen met u en daarna alleen. De mentor van uw kind belt na elke wenochtend.</p></details>
    <details><summary>Kan ik later van locatie wisselen?</summary><p>Ja, zonder extra kosten, zodra er op de andere locatie plek is.</p></details>
  </div>
</div></div>

<div class="kbg__slot"><div class="kbg__in kbg__slot-in">
  <p class="kbg__slot-txt">Er zijn nog tijden vrij op zaterdag 14 november.</p>
  <a href="#kbg-boek" class="kbg__knop">Kies een tijd</a>
</div></div>

<div class="kbg__voet" role="contentinfo"><div class="kbg__in kbg__voet-in">
  <p><strong>Kinderopvang De Boomgaard</strong><br>Kantoor: Damstraat 14, 3531 BV Utrecht<br><a href="tel:0301234567">030 123 4567</a> · <a href="mailto:welkom@voorbeeld.nl">welkom@voorbeeld.nl</a></p>
  <p>KvK 30123456 · btw NL853012345B01<br>LRK De Peren 187654321 · De Kersen 187654322 · De Appels 187654323</p>
  <p><a href="#">Privacyverklaring</a> · <a href="#">Pedagogisch beleid</a> · <a href="#">Inspectierapporten</a></p>
</div></div>
</div>
</div>

/* Landingspagina open dag · Kinderopvang De Boomgaard, Utrecht · NedDev · eigen werk. */
/* fonts (Fontshare): author@400,600 */
.kbg{--bg:#CDEBDF;--opp:#E4F5EE;--tekst:#0F2019;--gedempt:#3C5A4D;--lijn:#B0D9C8;--accent:#A51D2D;--op-accent:#FFFFFF;--r:8px;--fs1:13px;--fs2:15px;--fs3:18px;--fs4:24px;--fs5:36px;--fs6:60px;--sectie:clamp(48px,5.5vw,84px);--gat:clamp(16px,2vw,28px);--kader:1660px;--lees:720px;--zij:20px;
  container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Author',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.55;-webkit-font-smoothing:antialiased}
.kbg *,.kbg *::before,.kbg *::after{box-sizing:border-box}
.kbg [hidden]{display:none!important}
.kbg :where(p,h1,h2,figure,blockquote){margin:0}
.kbg a{color:inherit}
.kbg__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,64px)}
.kbg__kop-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;border-bottom:1px solid var(--lijn)}
.kbg__logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tekst)}
.kbg__logo span{display:flex;flex-direction:column;font-weight:600;font-size:var(--fs3);line-height:1.15}
.kbg__logo small{font-weight:400;font-size:var(--fs1);color:var(--gedempt)}
.kbg__bel{font-weight:600;font-size:var(--fs3);text-decoration:none;white-space:nowrap;padding:10px 0}
.kbg__bel:hover{color:var(--accent)}
.kbg__hero{padding:clamp(28px,4vw,56px) 0 clamp(28px,3vw,40px)}
.kbg__hero-in{display:grid;grid-template-columns:5fr 7fr;gap:calc(var(--gat)*2);align-items:center}
.kbg__h1{font-weight:600;font-size:var(--fs6);line-height:1.02;letter-spacing:-.02em;max-width:12ch}
.kbg__lead{font-size:var(--fs3);margin-top:20px;max-width:46ch}
.kbg__locs{margin-top:28px;display:grid;border-top:1px solid var(--tekst)}
.kbg__loc{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;text-align:left;font:inherit;color:var(--tekst);background:none;border:0;border-bottom:1px solid var(--lijn);padding:14px 0;cursor:pointer;transition:color .15s}
.kbg__loc strong{font-weight:600;font-size:var(--fs3)}
.kbg__loc span{font-size:var(--fs1);color:var(--gedempt)}
.kbg__loc:hover strong{color:var(--accent)}
.kbg__loc[aria-checked=true] strong{color:var(--accent)}
.kbg__loc[aria-checked=true]{border-bottom-color:var(--tekst)}
.kbg__kaart{border-radius:var(--r);overflow:hidden;border:1px solid var(--lijn)}
.kbg__kaart svg{display:block;width:100%;height:auto}
.kbg__kt,.kbg__kn{font-family:'Author',sans-serif;font-size:15px;fill:#3C5A4D;paint-order:stroke;stroke:#E4F5EE;stroke-width:5px;stroke-linejoin:round}
.kbg__kn{font-weight:600;font-size:17px;fill:#0F2019}
.kbg__pin{cursor:pointer;fill:#0F2019;outline:none}
.kbg__pin .kbg__pin-h{fill:#0F2019;opacity:0;transition:opacity .2s}
.kbg__pin:hover circle:last-child,.kbg__pin:focus-visible circle:last-child{fill:#A51D2D}
.kbg__pin.is-aan circle:last-child{fill:#A51D2D}
.kbg__pin.is-aan .kbg__pin-h{fill:#A51D2D;opacity:.22;animation:kbg-puls 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes kbg-puls{0%{transform:scale(.6);opacity:.35}100%{transform:scale(1.5);opacity:0}}
.kbg__boek{background:var(--opp);padding:var(--sectie) 0}
.kbg__boek-in{display:grid;grid-template-columns:5fr 7fr;gap:calc(var(--gat)*2);align-items:start}
.kbg__locfoto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.kbg__locfoto figcaption{margin-top:10px;font-size:var(--fs1);color:var(--gedempt)}
.kbg__h2{font-weight:600;font-size:var(--fs5);line-height:1.08;letter-spacing:-.015em}
.kbg__tabs{display:flex;gap:4px;margin-top:20px;border-bottom:1px solid var(--lijn)}
.kbg__tabs button{font:inherit;font-size:var(--fs2);color:var(--gedempt);background:none;border:0;border-bottom:3px solid transparent;padding:10px 4px;margin-right:16px;cursor:pointer}
.kbg__tabs button[aria-selected=true]{color:var(--tekst);border-color:var(--accent);font-weight:600}
.kbg__tijden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px}
.kbg__tijd{font:inherit;text-align:left;background:var(--bg);color:var(--tekst);border:1px solid var(--lijn);border-radius:var(--r);padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;min-height:58px;transition:border-color .15s}
.kbg__tijd b{font-weight:600;font-size:var(--fs3)}
.kbg__tijd small{font-size:var(--fs1);color:var(--gedempt)}
.kbg__tijd:hover{border-color:var(--tekst)}
.kbg__tijd[aria-checked=true]{background:var(--accent);border-color:var(--accent);color:var(--op-accent)}
.kbg__tijd[aria-checked=true] small{color:var(--op-accent)}
.kbg__tijd:disabled{cursor:not-allowed;background:transparent;color:var(--gedempt)}
.kbg__tijd:disabled b{text-decoration:line-through;font-weight:400}
.kbg__form{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:24px}
.kbg__f{display:grid;gap:5px;font-size:var(--fs1);color:var(--gedempt)}
.kbg__f:nth-child(3){grid-column:1 / -1}
.kbg input,.kbg select{font:inherit;font-size:var(--fs2);color:var(--tekst);background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:11px 12px;min-height:46px;width:100%}
.kbg input:focus,.kbg select:focus{outline:2px solid var(--tekst);outline-offset:1px}
.kbg__knop{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;background:var(--accent);color:var(--op-accent);border:0;border-radius:var(--r);font:inherit;font-weight:600;font-size:var(--fs2);text-decoration:none;cursor:pointer;transition:background .15s}
.kbg__knop:hover{background:var(--tekst)}
.kbg__form .kbg__knop{grid-column:1 / -1;justify-self:start}
.kbg__fout{grid-column:1 / -1;color:var(--accent);font-weight:600;font-size:var(--fs1)}
.kbg__klaar{margin-top:24px;font-size:var(--fs4);line-height:1.35;max-width:36ch}
.kbg__zien{padding:var(--sectie) 0}
.kbg__mozaiek{margin-top:28px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gat)}
.kbg__m img{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--r)}
.kbg__m figcaption{margin-top:8px;font-size:var(--fs1);color:var(--gedempt)}
.kbg__m1{grid-column:1 / span 7;grid-row:span 2}
.kbg__m1 img{aspect-ratio:7/5}
.kbg__m2{grid-column:8 / span 5}
.kbg__m3{grid-column:8 / span 5}
.kbg__m2 img,.kbg__m3 img{aspect-ratio:16/8}
.kbg__m4{grid-column:1 / span 3}
.kbg__m4 img{aspect-ratio:1/1}
.kbg__m5{grid-column:4 / span 5}
.kbg__m5 img{aspect-ratio:5/3}
.kbg__m6{grid-column:9 / span 4}
.kbg__m6 img{aspect-ratio:4/3}
.kbg__m7{grid-column:3 / span 8}
.kbg__m7 img{aspect-ratio:16/6}
.kbg__ouders{background:var(--tekst);color:var(--opp);padding:var(--sectie) 0}
.kbg__ouders-in{display:grid;grid-template-columns:7fr 5fr;gap:calc(var(--gat)*2)}
.kbg__quote p{font-size:var(--fs3);line-height:1.45}
.kbg__quote footer{margin-top:8px;font-size:var(--fs1);color:var(--lijn)}
.kbg__quote--groot p{font-size:var(--fs5);line-height:1.12;font-weight:600}
.kbg__quotes{display:grid;gap:24px;align-content:end}
.kbg__keur{grid-column:1 / -1;font-size:var(--fs1);color:var(--lijn);border-top:1px solid #24392F;padding-top:14px}
.kbg__kosten{padding:var(--sectie) 0}
.kbg__kosten-in{display:grid;grid-template-columns:5fr 7fr;gap:calc(var(--gat)*2);align-items:start}
.kbg__kosten-in p{margin-top:14px;max-width:50ch}
.kbg__faq details{border-bottom:1px solid var(--gedempt)}
.kbg__faq details:first-child{border-top:1px solid var(--gedempt)}
.kbg__faq summary{cursor:pointer;list-style:none;padding:14px 40px 14px 0;font-weight:600;font-size:var(--fs3);position:relative}
.kbg__faq summary::-webkit-details-marker{display:none}
.kbg__faq summary::after{content:"+";position:absolute;right:6px;top:10px;font-size:var(--fs4);font-weight:400;transition:transform .2s}
.kbg__faq details[open] summary::after{transform:rotate(45deg)}
.kbg__faq summary:hover{color:var(--accent)}
.kbg__faq details p{margin:0;padding:0 0 16px}
.kbg__slot{background:var(--opp);padding:36px 0}
.kbg__slot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.kbg__slot-txt{font-size:var(--fs4);font-weight:600}
.kbg__voet{padding:36px 0 48px;font-size:var(--fs1);color:var(--gedempt)}
.kbg__voet-in{display:flex;flex-wrap:wrap;gap:20px 56px}
.kbg__voet strong{color:var(--tekst)}
@container (max-width:900px){
  .kbg__hero-in,.kbg__boek-in,.kbg__ouders-in,.kbg__kosten-in{grid-template-columns:1fr}
  .kbg__kaart{order:-1}
  .kbg__hero-txt{order:0}
  .kbg__mozaiek{grid-template-columns:1fr 1fr}
  .kbg__mozaiek .kbg__m{grid-column:auto;grid-row:auto}
  .kbg__mozaiek .kbg__m1,.kbg__mozaiek .kbg__m7{grid-column:1 / -1}
  .kbg__mozaiek .kbg__m img{aspect-ratio:4/3}
  .kbg__mozaiek .kbg__m1 img,.kbg__mozaiek .kbg__m7 img{aspect-ratio:16/9}
}
@container (max-width:560px){
  .kbg > *{--fs4:21px;--fs5:28px;--fs6:38px}
  .kbg__logo small{display:none}
  .kbg__kt{font-size:24px}
  .kbg__kn{font-size:26px}
  .kbg__kt[x="72"],.kbg__kt[x="540"]{display:none}
  .kbg__kaart{margin:0 calc(var(--zij) * -1);border-radius:0;border-left:0;border-right:0}
  .kbg__form{grid-template-columns:1fr}
  .kbg__tijden{grid-template-columns:1fr 1fr}
  .kbg__tabs button{margin-right:8px}
  .kbg__knop{width:100%}
}
@media (prefers-reduced-motion:reduce){.kbg *{transition:none!important;animation:none!important}}

// Landingspagina open dag · Kinderopvang De Boomgaard, Utrecht · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.kbg');if(!s)return;
var M='https://neddev.com/lab-media/';
var L={
  lombok:{naam:'De Peren',adres:'Damstraat 14',foto:'page-landing-open-dag-7c.webp',alt:'De Damstraat in Lombok, met de voordeur van De Peren',groepen:'Twee baby- en dreumesgroepen en een peutergroep in een oud winkelpand aan de Damstraat. Open van 7:30 tot 18:30.',vrij:{'10:00':2,'10:30':0,'11:00':3,'11:30':1,'12:00':4,'12:30':0}},
  oog:{naam:'De Kersen',adres:'Thomas à Kempisweg 40',foto:'page-landing-open-dag-6.webp',alt:'Het oude schoolgebouw van De Kersen in Oog in Al',groepen:'Vier groepen in een schoolgebouw uit 1924, met een eigen speelplaats onder de lindes. Open van 7:30 tot 18:30.',vrij:{'10:00':0,'10:30':2,'11:00':0,'11:30':3,'12:00':2,'12:30':4}},
  lr:{naam:'De Appels',adres:'Grauwaartsingel 21',foto:'page-landing-open-dag-2.webp',alt:'Peuters in de zandbak in de tuin van De Appels',groepen:'Drie groepen met een tuin van 600 vierkante meter, tien minuten van het Máximapark. Open van 7:00 tot 19:00.',vrij:{'10:00':4,'10:30':4,'11:00':2,'11:30':0,'12:00':3,'12:30':3}}
};
var nu='lombok',wanneer='open',gekozen=null;
var locs=[].slice.call(s.querySelectorAll('.kbg__loc')),pins=[].slice.call(s.querySelectorAll('.kbg__pin'));
var foto=s.querySelector('[data-foto]'),groepen=s.querySelector('[data-u=groepen]'),titel=s.querySelector('[data-u=titel]'),tijden=s.querySelector('.kbg__tijden');
var dagen=['zo','ma','di','wo','do','vr','za'],mnd=['jan','feb','mrt','apr','mei','jun','jul','aug','sep','okt','nov','dec'];
function weekTijden(){var uit=[],d=new Date();for(var i=1;uit.length<8&&i<40;i++){var x=new Date(d.getFullYear(),d.getMonth(),d.getDate()+i);if(x.getDay()===2||x.getDay()===4){var lbl=dagen[x.getDay()]+' '+x.getDate()+' '+mnd[x.getMonth()];uit.push([lbl+', 9:30',(i*7)%3]);uit.push([lbl+', 15:30',(i*5+1)%3]);}}return uit;}
function toonTijden(){
  tijden.innerHTML='';gekozen=null;
  var lijst=wanneer==='open'?Object.keys(L[nu].vrij).map(function(t){return [t,L[nu].vrij[t]];}):weekTijden();
  lijst.forEach(function(r){var b=document.createElement('button');b.type='button';b.className='kbg__tijd';b.setAttribute('role','radio');b.setAttribute('aria-checked','false');
    b.innerHTML='<b>'+r[0]+'</b><small>'+(r[1]===0?'vol':(wanneer==='open'?'nog '+r[1]+(r[1]===1?' plek':' plekken'):'vrij'))+'</small>';
    if(r[1]===0)b.disabled=true;b.dataset.t=r[0];
    b.addEventListener('click',function(){[].forEach.call(tijden.children,function(x){x.setAttribute('aria-checked','false');});b.setAttribute('aria-checked','true');gekozen=r[0];});
    tijden.appendChild(b);});
}
function kies(k){nu=k;var l=L[k];
  locs.forEach(function(b){b.setAttribute('aria-checked',String(b.dataset.loc===k));});
  pins.forEach(function(p){p.classList.toggle('is-aan',p.dataset.loc===k);});
  foto.src=M+l.foto;foto.alt=l.alt;groepen.textContent=l.groepen;titel.textContent='Rondleiding bij '+l.naam;toonTijden();}
locs.forEach(function(b){b.addEventListener('click',function(){kies(b.dataset.loc);});});
pins.forEach(function(p){p.addEventListener('click',function(){kies(p.dataset.loc);});p.addEventListener('keydown',function(e){if(e.key==='Enter'||e.key===' '){e.preventDefault();kies(p.dataset.loc);}});});
var tabs=[].slice.call(s.querySelectorAll('.kbg__tabs button'));
tabs.forEach(function(t){t.addEventListener('click',function(){tabs.forEach(function(x){x.setAttribute('aria-selected',String(x===t));});wanneer=t.dataset.w;toonTijden();});});
var f=s.querySelector('.kbg__form'),fout=f.querySelector('.kbg__fout'),klaar=s.querySelector('.kbg__klaar');
f.addEventListener('submit',function(e){e.preventDefault();var naam=f.naam.value.trim(),mail=f.mail.value.trim(),msg='';
  if(!gekozen)msg='Kies eerst een tijd.';else if(!naam)msg='Vul uw naam in.';else if(!/^[^@\s]+@[^@\s]+\.[a-z]{2,}$/i.test(mail))msg='Dit e-mailadres klopt nog niet.';
  fout.textContent=msg;fout.hidden=!msg;if(msg)return;
  var l=L[nu];f.hidden=true;tijden.hidden=true;s.querySelector('.kbg__tabs').hidden=true;klaar.hidden=false;
  klaar.textContent='Dank u, '+naam.split(' ')[0]+'. U bent welkom bij '+l.naam+', '+l.adres+', '+(wanneer==='open'?'op zaterdag 14 november om '+gekozen:'op '+gekozen)+'. De bevestiging staat in uw mail ('+mail+').';});
kies('lombok');
}
init(document.querySelector('.jouw-container'));