Landingspagina 30 dagen gratis · Planbord roostersoftware, Eindhoven New
Landing page for a free trial of rostering software for small teams: the working app screen sits large on an orange plane (pick a day, swap a shift), followed by the businesses using it in photos, what is included, a price calculator for after the 30 days, FAQ and the sign-up field again.
Het rooster staat in tien minuten
Voor horeca, bakkerijen en winkels met 3 tot 40 mensen. Uw team ziet het rooster op de telefoon, ruilt zelf diensten en klokt in met één tik.
Lunchroom Boterham
week 42
4 van 4 diensten gevuld
Tik op Ruilen bij een dienst om hem aan te bieden.
Zo ziet uw team het rooster. Probeer het: kies een dag en ruil een dienst.
Fleur kan zaterdag niet. Ze biedt haar dienst aan, de collega's die vrij zijn krijgen een melding, en wie het eerst tikt neemt hem over. U hoeft alleen goed te keuren.
Ze roosteren er al mee

Ik maakte het rooster op zondagavond in Excel en stuurde een foto in de groepsapp. Nu kost het me een kwartier en vraagt niemand meer wanneer hij moet werken.




Servers in Nederland · verwerkersovereenkomst standaard bij elk account · 4,7 gemiddeld uit 214 beoordelingen · 1.380 zaken roosteren met Planbord

Wat er in de proef zit
Alles. Er is geen kale proefversie.
Rooster maken
Sleep diensten in de week, of zet een vaste week als sjabloon neer en pas alleen aan wat afwijkt.
Beschikbaarheid en ruilen
Medewerkers geven zelf aan wanneer ze kunnen en ruilen diensten onderling. U keurt goed.
Klokken en uren
Inklokken op de telefoon of de tablet bij de deur. De uren gaan als bestand naar uw salarisadministratie.
Verlof en ziekte
Aanvragen komen op één plek binnen en het rooster laat meteen zien waar een gat valt.
En na 30 dagen?
Dan kiest u. Wilt u door, dan betaalt u per medewerker die in het rooster staat. Maandelijks opzegbaar. Doet u niets, dan stopt het account en verwijderen we uw gegevens na 60 dagen.
U betaalt dan 20 euro per maand, exclusief btw.


Vragen
Moet ik iets installeren?
Nee. U werkt in de browser, uw team gebruikt de app voor iPhone of Android. Uitnodigen gaat met een sms-link.
Kan ik mijn huidige rooster overzetten?
Ja. Stuur ons uw Excel-bestand, dan zetten we de eerste week en de medewerkers er binnen een werkdag voor u in. Gratis, ook in de proef.
Klopt het met de cao?
Planbord waarschuwt bij te lange diensten, te weinig rust tussen twee diensten en jongeren onder de 18. Voor horeca en bakkerijen staan de regels er al in.
Wie kan ik bellen?
Ons team in Eindhoven, op werkdagen van 8:30 tot 18:00. Ook tijdens de proef.
Volgende week al op Planbord
Planbord B.V.
Torenallee 20, 5617 BC Eindhoven
040 123 4567 · hallo@voorbeeld.nl
KvK 74123456 · btw NL859874123B01
How to use it
- Paste the HTML where the page examples should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Landingspagina 30 dagen gratis · Planbord roostersoftware, Eindhoven · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="plb">
<div class="plb__kop" role="banner"><div class="plb__in plb__kop-in">
<a href="#" class="plb__logo" aria-label="Planbord, naar home">planbord</a>
<a href="tel:0401234567" class="plb__bel">040 123 4567</a>
</div></div>
<div class="plb__hero"><div class="plb__in plb__hero-in">
<h1 class="plb__h1">Het rooster staat in tien minuten</h1>
<div class="plb__hero-r">
<p class="plb__lead">Voor horeca, bakkerijen en winkels met 3 tot 40 mensen. Uw team ziet het rooster op de telefoon, ruilt zelf diensten en klokt in met één tik.</p>
<form class="plb__aanmeld" novalidate>
<label class="plb__f"><span>Zakelijk e-mailadres</span><input name="mail" type="email" autocomplete="email" placeholder="naam@uwzaak.nl" required></label>
<button type="submit" class="plb__knop">Probeer 30 dagen gratis</button>
<p class="plb__noot">Geen creditcard nodig. Doet u niets, dan stopt het vanzelf.</p>
<p class="plb__fout" hidden>Dit e-mailadres klopt nog niet.</p>
<p class="plb__klaar" hidden></p>
</form>
</div>
</div></div>
<div class="plb__vlak"><div class="plb__in plb__vlak-in">
<div class="plb__app" aria-label="Voorbeeld van het rooster in de Planbord-app">
<div class="plb__app-kop"><p class="plb__app-zaak">Lunchroom Boterham</p><p class="plb__app-week">week 42</p></div>
<div class="plb__dagen" role="tablist" aria-label="Dag">
<button type="button" role="tab" aria-selected="true" data-d="0">ma</button><button type="button" role="tab" aria-selected="false" data-d="1">di</button><button type="button" role="tab" aria-selected="false" data-d="2">wo</button><button type="button" role="tab" aria-selected="false" data-d="3">do</button><button type="button" role="tab" aria-selected="false" data-d="4">vr</button><button type="button" role="tab" aria-selected="false" data-d="5">za</button><button type="button" role="tab" aria-selected="false" data-d="6">zo</button>
</div>
<p class="plb__bezet" data-u="bezet">4 van 4 diensten gevuld</p>
<ul class="plb__diensten" data-u="lijst"></ul>
<p class="plb__app-voet" data-u="melding">Tik op Ruilen bij een dienst om hem aan te bieden.</p>
</div>
<div class="plb__vlak-txt">
<p class="plb__vlak-groot">Zo ziet uw team het rooster. Probeer het: kies een dag en ruil een dienst.</p>
<p>Fleur kan zaterdag niet. Ze biedt haar dienst aan, de collega's die vrij zijn krijgen een melding, en wie het eerst tikt neemt hem over. U hoeft alleen goed te keuren.</p>
</div>
</div></div>
<div class="plb__zaken"><div class="plb__in">
<h2 class="plb__h2">Ze roosteren er al mee</h2>
<div class="plb__zaken-grid">
<figure class="plb__z plb__z1"><img src="https://neddev.com/lab-media/page-landing-proefperiode-1.webp" alt="Eigenaar van een lunchroom kijkt achter de toonbank op zijn telefoon" width="1408" height="768" loading="lazy"></figure>
<blockquote class="plb__quote plb__z-q"><p>Ik maakte het rooster op zondagavond in Excel en stuurde een foto in de groepsapp. Nu kost het me een kwartier en vraagt niemand meer wanneer hij moet werken.</p><footer>Ruud Peeters, Lunchroom Boterham, Eindhoven, 11 medewerkers</footer></blockquote>
<figure class="plb__z plb__z2"><img src="https://neddev.com/lab-media/page-landing-proefperiode-2.webp" alt="Verkoopster legt brood in de schappen" width="900" height="491" loading="lazy"><figcaption>Bakkerij Van Rooij, Veldhoven. 23 medewerkers, twee winkels.</figcaption></figure>
<figure class="plb__z plb__z3"><img src="https://neddev.com/lab-media/page-landing-proefperiode-3.webp" alt="Monteur repareert een fiets in de werkplaats" width="900" height="491" loading="lazy"><figcaption>Fietsenmaker De Ketting, Best. 5 medewerkers.</figcaption></figure>
<figure class="plb__z plb__z4"><img src="https://neddev.com/lab-media/page-landing-proefperiode-7.webp" alt="Keukenpersoneel snijdt groente tijdens de mise-en-place" width="900" height="491" loading="lazy"><figcaption>Restaurant Wilhelmina, Eindhoven. 18 medewerkers in keuken en zaal.</figcaption></figure>
<figure class="plb__z plb__z5"><img src="https://neddev.com/lab-media/page-landing-proefperiode-6.webp" alt="Eigenaar van een kledingwinkel achter de laptop" width="900" height="491" loading="lazy"><figcaption>Atelier Noor, Helmond. 4 medewerkers.</figcaption></figure>
</div>
<p class="plb__keur">Servers in Nederland · verwerkersovereenkomst standaard bij elk account · 4,7 gemiddeld uit 214 beoordelingen · 1.380 zaken roosteren met Planbord</p>
</div></div>
<div class="plb__in"><div class="plb__wat">
<figure class="plb__wat-foto"><img src="https://neddev.com/lab-media/page-landing-proefperiode-5.webp" alt="Hand met telefoon boven de toonbank van een café" width="900" height="491" loading="lazy"></figure>
<div class="plb__wat-txt">
<h2 class="plb__h2">Wat er in de proef zit</h2>
<p class="plb__p">Alles. Er is geen kale proefversie.</p>
<div class="plb__punten">
<h3>Rooster maken</h3><p>Sleep diensten in de week, of zet een vaste week als sjabloon neer en pas alleen aan wat afwijkt.</p>
<h3>Beschikbaarheid en ruilen</h3><p>Medewerkers geven zelf aan wanneer ze kunnen en ruilen diensten onderling. U keurt goed.</p>
<h3>Klokken en uren</h3><p>Inklokken op de telefoon of de tablet bij de deur. De uren gaan als bestand naar uw salarisadministratie.</p>
<h3>Verlof en ziekte</h3><p>Aanvragen komen op één plek binnen en het rooster laat meteen zien waar een gat valt.</p>
</div>
</div>
</div></div>
<div class="plb__prijs"><div class="plb__in plb__prijs-in">
<div class="plb__prijs-l">
<h2 class="plb__h2">En na 30 dagen?</h2>
<p class="plb__p">Dan kiest u. Wilt u door, dan betaalt u per medewerker die in het rooster staat. Maandelijks opzegbaar. Doet u niets, dan stopt het account en verwijderen we uw gegevens na 60 dagen.</p>
<label class="plb__reken"><span>Mensen in uw rooster: <output name="aantal">8</output></span><input type="range" min="3" max="40" value="8" name="mensen"></label>
<p class="plb__som" aria-live="polite" data-u="som">U betaalt dan 20 euro per maand, exclusief btw.</p>
</div>
<figure class="plb__prijs-foto plb__pf1"><img src="https://neddev.com/lab-media/page-landing-proefperiode-4.webp" alt="Drie medewerkers bespreken de dag aan de toonbank voor opening" width="900" height="491" loading="lazy"></figure>
<figure class="plb__prijs-foto plb__pf2"><img src="https://neddev.com/lab-media/page-landing-proefperiode-8.webp" alt="Een café in een Eindhovense straat bij schemering" width="900" height="491" loading="lazy"></figure>
</div></div>
<div class="plb__faq"><div class="plb__in plb__faq-in">
<h2 class="plb__h2">Vragen</h2>
<div class="plb__vragen">
<details><summary>Moet ik iets installeren?</summary><p>Nee. U werkt in de browser, uw team gebruikt de app voor iPhone of Android. Uitnodigen gaat met een sms-link.</p></details>
<details><summary>Kan ik mijn huidige rooster overzetten?</summary><p>Ja. Stuur ons uw Excel-bestand, dan zetten we de eerste week en de medewerkers er binnen een werkdag voor u in. Gratis, ook in de proef.</p></details>
<details><summary>Klopt het met de cao?</summary><p>Planbord waarschuwt bij te lange diensten, te weinig rust tussen twee diensten en jongeren onder de 18. Voor horeca en bakkerijen staan de regels er al in.</p></details>
<details><summary>Wie kan ik bellen?</summary><p>Ons team in Eindhoven, op werkdagen van 8:30 tot 18:00. Ook tijdens de proef.</p></details>
</div>
</div></div>
<div class="plb__slot"><div class="plb__in plb__slot-in">
<h2 class="plb__h2">Volgende week al op Planbord</h2>
<form class="plb__aanmeld plb__aanmeld--slot" novalidate>
<label class="plb__f"><span>Zakelijk e-mailadres</span><input name="mail" type="email" autocomplete="email" placeholder="naam@uwzaak.nl" required></label>
<button type="submit" class="plb__knop">Probeer 30 dagen gratis</button>
<p class="plb__fout" hidden>Dit e-mailadres klopt nog niet.</p>
<p class="plb__klaar" hidden></p>
</form>
</div></div>
<div class="plb__voet" role="contentinfo"><div class="plb__in plb__voet-in">
<p><strong>Planbord B.V.</strong><br>Torenallee 20, 5617 BC Eindhoven<br><a href="tel:0401234567">040 123 4567</a> · <a href="mailto:hallo@voorbeeld.nl">hallo@voorbeeld.nl</a></p>
<p>KvK 74123456 · btw NL859874123B01</p>
<p><a href="#">Privacy</a> · <a href="#">Verwerkersovereenkomst</a> · <a href="#">Voorwaarden</a></p>
</div></div>
</div>
</div>/* Landingspagina 30 dagen gratis · Planbord roostersoftware, Eindhoven · NedDev · eigen werk. */
/* fonts (Fontshare): stardom@400 + supreme@400 */
.plb{--bg:#FFFFFF;--opp:#F4F4F2;--tekst:#151515;--gedempt:#535353;--lijn:#E0E0DC;--accent:#C24A00;--op-accent:#FFFFFF;--r:0;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:48px;--fs6:84px;--sectie:clamp(56px,7vw,112px);--gat:clamp(20px,3vw,48px);--kader:1660px;--lees:720px;--zij:20px;--kop:'Stardom',serif;
container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Supreme',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.55;-webkit-font-smoothing:antialiased}
.plb *,.plb *::before,.plb *::after{box-sizing:border-box}
.plb [hidden]{display:none!important}
.plb :where(p,h1,h2,h3,figure,blockquote,ul){margin:0}
.plb a{color:inherit}
.plb img{display:block;width:100%;height:auto;object-fit:cover}
.plb__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,64px)}
.plb__kop-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.plb__logo{font-family:var(--kop);font-size:var(--fs4);text-decoration:none;line-height:1;display:inline-block;padding:12px 0}
.plb__bel{font-size:var(--fs3);text-decoration:none;white-space:nowrap;padding:10px 0}
.plb__bel:hover{color:var(--accent)}
.plb__hero{padding:clamp(32px,5vw,72px) 0 clamp(36px,4vw,56px)}
.plb__hero-in{display:grid;grid-template-columns:7fr 5fr;gap:calc(var(--gat)*1.5);align-items:end}
.plb__h1{font-family:var(--kop);font-weight:400;font-size:var(--fs6);line-height:.98;letter-spacing:-.01em;max-width:12ch}
.plb__lead{font-size:var(--fs3);max-width:40ch}
.plb__aanmeld{display:grid;grid-template-columns:1fr auto;gap:10px 8px;margin-top:24px;align-items:end}
.plb__f{display:grid;gap:6px;font-size:var(--fs1);color:var(--gedempt)}
.plb input[type=email]{font:inherit;font-size:var(--fs2);color:var(--tekst);background:var(--bg);border:1px solid var(--tekst);border-radius:var(--r);padding:12px 14px;min-height:52px;width:100%}
.plb input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px}
.plb__knop{min-height:52px;padding:0 24px;border:0;border-radius:var(--r);background:var(--accent);color:var(--op-accent);font:inherit;font-size:var(--fs2);cursor:pointer;white-space:nowrap;transition:background .15s}
.plb__knop:hover{background:var(--tekst)}
.plb__noot,.plb__fout,.plb__klaar{grid-column:1 / -1;font-size:var(--fs1);color:var(--gedempt)}
.plb__fout{color:var(--accent)}
.plb__klaar{font-size:var(--fs3);color:var(--tekst)}
.plb__vlak{background:var(--accent);color:var(--op-accent);padding:clamp(48px,6vw,96px) 0}
.plb__vlak-in{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:clamp(32px,7vw,120px);align-items:center;padding-left:clamp(var(--zij),12vw,220px)}
.plb__app{background:var(--bg);color:var(--tekst);padding:22px 18px 18px;min-height:520px;display:flex;flex-direction:column}
.plb__app-kop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:0 4px}
.plb__app-zaak{font-family:var(--kop);font-size:var(--fs3)}
.plb__app-week{font-size:var(--fs1);color:var(--gedempt)}
.plb__dagen{display:flex;justify-content:space-between;margin-top:16px;border-bottom:1px solid var(--lijn)}
.plb__dagen button{flex:1;font:inherit;font-size:var(--fs1);background:none;border:0;border-bottom:3px solid transparent;color:var(--gedempt);padding:10px 0;min-height:44px;cursor:pointer}
.plb__dagen button[aria-selected=true]{color:var(--tekst);border-color:var(--accent)}
.plb__bezet{font-size:var(--fs1);color:var(--gedempt);padding:12px 4px 4px}
.plb__bezet.is-gat{color:var(--accent)}
.plb__diensten{list-style:none;padding:0}
.plb__diensten li{display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--lijn)}
.plb__tijd{font-size:var(--fs1);color:var(--gedempt)}
.plb__wie{display:flex;flex-direction:column;line-height:1.3}
.plb__wie small{font-size:var(--fs1);color:var(--gedempt)}
.plb__ruil{font:inherit;font-size:var(--fs1);background:var(--opp);border:1px solid var(--lijn);border-radius:var(--r);padding:0 12px;min-height:36px;cursor:pointer;color:var(--tekst)}
.plb__ruil:hover{border-color:var(--tekst)}
.plb__diensten li.is-open .plb__wie{color:var(--accent)}
.plb__app-voet{margin-top:auto;padding:14px 4px 0;font-size:var(--fs1);color:var(--gedempt)}
.plb__vlak-groot{font-family:var(--kop);font-size:var(--fs5);line-height:1.05;max-width:16ch}
.plb__vlak-txt p + p{margin-top:24px;max-width:44ch;font-size:var(--fs3)}
.plb__zaken{padding:var(--sectie) 0}
.plb__h2{font-family:var(--kop);font-weight:400;font-size:var(--fs5);line-height:1.02;max-width:16ch}
.plb__zaken-grid{margin-top:36px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gat)}
.plb__z figcaption{margin-top:10px;font-size:var(--fs1);color:var(--gedempt)}
.plb__z1{grid-column:1 / span 7;grid-row:1 / span 2}
.plb__z1 img{aspect-ratio:16/10}
.plb__z-q{grid-column:8 / span 5;grid-row:1;align-self:start}
.plb__z2{grid-column:1 / span 4}
.plb__z3{grid-column:5 / span 3;margin-top:64px}
.plb__z4{grid-column:8 / span 5}
.plb__z5{grid-column:8 / span 5;grid-row:2;align-self:end}
.plb__z2 img{aspect-ratio:4/5}
.plb__z3 img{aspect-ratio:3/4}
.plb__z4 img{aspect-ratio:4/3}
.plb__z5 img{aspect-ratio:2/1}
.plb__quote p{font-family:var(--kop);font-size:var(--fs4);line-height:1.2}
.plb__quote footer{margin-top:14px;font-size:var(--fs1);color:var(--gedempt)}
.plb__keur{margin-top:40px;padding-top:16px;border-top:1px solid var(--lijn);font-size:var(--fs1);color:var(--gedempt)}
.plb__wat{display:grid;grid-template-columns:5fr 7fr;gap:calc(var(--gat)*1.5);align-items:start;padding:var(--sectie) 0;border-top:1px solid var(--tekst)}
.plb__wat-foto{position:sticky;top:24px}
.plb__wat-foto img{aspect-ratio:4/5}
.plb__p{font-size:var(--fs3);margin-top:16px;max-width:46ch}
.plb__punten{margin-top:28px;max-width:560px;border-top:1px solid var(--lijn)}
.plb__punten h3{font-family:var(--kop);font-weight:400;font-size:var(--fs4);padding-top:18px}
.plb__punten p{padding:6px 0 18px;border-bottom:1px solid var(--lijn);color:var(--gedempt)}
.plb__prijs{background:var(--opp);padding:var(--sectie) 0}
.plb__prijs-in{display:grid;grid-template-columns:6fr 4fr 3fr;gap:var(--gat);align-items:start}
.plb__reken{display:grid;gap:8px;margin-top:28px;font-size:var(--fs2);max-width:440px}
.plb__reken output{font-family:var(--kop);font-size:var(--fs4)}
.plb input[type=range]{width:100%;accent-color:var(--accent);height:44px}
.plb__som{font-family:var(--kop);font-size:var(--fs4);line-height:1.2;margin-top:12px;max-width:22ch}
.plb__pf1 img{aspect-ratio:4/5}
.plb__pf2{margin-top:clamp(0px,10vw,160px)}
.plb__pf2 img{aspect-ratio:3/4}
.plb__faq{padding:var(--sectie) 0}
.plb__faq-in{display:grid;grid-template-columns:5fr 7fr;gap:var(--gat)}
.plb__vragen details{border-bottom:1px solid var(--lijn)}
.plb__vragen details:first-child{border-top:1px solid var(--tekst)}
.plb__vragen summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-size:var(--fs3);position:relative}
.plb__vragen summary::-webkit-details-marker{display:none}
.plb__vragen summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:var(--fs4);color:var(--accent);transition:transform .2s}
.plb__vragen details[open] summary::after{transform:rotate(45deg)}
.plb__vragen summary:hover{color:var(--accent)}
.plb__vragen p{padding:0 0 20px;color:var(--gedempt);max-width:60ch}
.plb__slot{background:var(--accent);color:var(--op-accent);padding:clamp(48px,6vw,88px) 0}
.plb__slot-in{display:grid;grid-template-columns:6fr 5fr;gap:var(--gat);align-items:end}
.plb__aanmeld--slot .plb__f{color:var(--op-accent)}
.plb__aanmeld--slot input[type=email]{border-color:var(--op-accent)}
.plb__aanmeld--slot .plb__knop{background:var(--tekst)}
.plb__aanmeld--slot .plb__knop:hover{background:var(--bg);color:var(--tekst)}
.plb__aanmeld--slot .plb__fout,.plb__aanmeld--slot .plb__klaar{color:var(--op-accent)}
.plb__voet{padding:40px 0 56px;font-size:var(--fs1);color:var(--gedempt)}
.plb__voet-in{display:flex;flex-wrap:wrap;gap:20px 64px}
.plb__voet strong{color:var(--tekst);font-weight:400;font-family:var(--kop);font-size:var(--fs2)}
@container (max-width:960px){
.plb__hero-in,.plb__faq-in,.plb__slot-in{grid-template-columns:1fr}
.plb__vlak-in{grid-template-columns:1fr;padding-left:clamp(var(--zij),4vw,64px)}
.plb__app{max-width:420px;min-height:0}
.plb__wat{grid-template-columns:1fr}
.plb__wat-foto{position:static}
.plb__wat-foto img{aspect-ratio:16/9}
.plb__prijs-in{grid-template-columns:1fr 1fr}
.plb__prijs-l{grid-column:1 / -1}
.plb__pf2{margin-top:48px}
.plb__zaken-grid{grid-template-columns:1fr 1fr}
.plb__zaken-grid > *{grid-column:auto;margin-top:0}
.plb__z1,.plb__z-q{grid-column:1 / -1;grid-row:auto}
.plb__z5{grid-row:auto}
}
@container (max-width:560px){
.plb > *{--fs3:18px;--fs4:22px;--fs5:34px;--fs6:46px}
.plb__aanmeld{grid-template-columns:1fr}
.plb__knop{width:100%}
.plb__diensten li{grid-template-columns:80px 1fr auto}
.plb__z2 img,.plb__z3 img{aspect-ratio:1/1}
.plb__z5,.plb__z4{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){.plb *{transition:none!important}}// Landingspagina 30 dagen gratis · Planbord roostersoftware, Eindhoven · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.plb');if(!s)return;
var W=[
[['7:00 tot 15:00','Sanne','bar'],['7:30 tot 13:30','Joris','keuken'],['11:00 tot 17:00','Fleur','zaal'],['15:00 tot 18:00','Daan','afwas']],
[['7:00 tot 15:00','Sanne','bar'],['7:30 tot 13:30','Mees','keuken'],['11:00 tot 17:00','Ilse','zaal']],
[['7:00 tot 15:00','Joris','bar'],['7:30 tot 13:30','Mees','keuken'],['11:00 tot 17:00','Fleur','zaal'],['15:00 tot 18:00','Daan','afwas']],
[['7:00 tot 15:00','Ilse','bar'],['7:30 tot 13:30','Joris','keuken'],['11:00 tot 17:00','Sanne','zaal'],['15:00 tot 18:00','Daan','afwas']],
[['7:00 tot 15:00','Sanne','bar'],['7:30 tot 15:30','Joris','keuken'],['10:00 tot 17:00','Fleur','zaal'],['12:00 tot 17:00','Ilse','zaal'],['15:00 tot 18:00','Daan','afwas']],
[['8:00 tot 16:00','Mees','bar'],['8:00 tot 15:00','Joris','keuken'],['10:00 tot 17:00','Fleur','zaal'],['11:00 tot 17:00','Ilse','zaal'],['15:00 tot 18:00','','afwas']],
[['9:00 tot 16:00','Sanne','bar'],['9:00 tot 15:00','Mees','keuken'],['10:00 tot 16:00','Ilse','zaal']]
];
var nodig=[4,3,4,4,5,5,3];
var dag=0,lijst=s.querySelector('[data-u=lijst]'),bezet=s.querySelector('[data-u=bezet]'),melding=s.querySelector('[data-u=melding]');
var vrij=['Mees','Ilse','Daan','Sanne','Joris','Fleur'];
function toon(){lijst.innerHTML='';var gevuld=0;
W[dag].forEach(function(r,i){var li=document.createElement('li');if(!r[1])li.className='is-open';else gevuld++;
li.innerHTML='<span class="plb__tijd">'+r[0]+'</span><span class="plb__wie">'+(r[1]||'Open dienst')+'<small>'+r[2]+'</small></span>'+(r[1]?'<button type="button" class="plb__ruil">Ruilen</button>':'');
var b=li.querySelector('button');if(b)b.addEventListener('click',function(){
var wie=r[1],over=vrij.filter(function(n){return W[dag].every(function(x){return x[1]!==n;});})[0]||'Daan';
b.disabled=true;b.textContent='Aangeboden';melding.textContent=wie+' biedt de dienst van '+r[0]+' aan. '+(vrij.length-1)+' collega\'s kregen een melding.';
setTimeout(function(){r[1]=over;toon();melding.textContent=over+' neemt de dienst van '+wie+' over. Wacht op uw goedkeuring.';},1400);});
lijst.appendChild(li);});
bezet.textContent=gevuld+' van '+nodig[dag]+' diensten gevuld'+(gevuld<nodig[dag]?', er staat nog een gat':'');bezet.classList.toggle('is-gat',gevuld<nodig[dag]);}
var tabs=[].slice.call(s.querySelectorAll('.plb__dagen button'));
tabs.forEach(function(t,i){t.addEventListener('click',function(){tabs.forEach(function(x){x.setAttribute('aria-selected',String(x===t));});dag=+t.dataset.d;melding.textContent='Tik op Ruilen bij een dienst om hem aan te bieden.';toon();});
t.addEventListener('keydown',function(e){var n=e.key==='ArrowRight'?1:e.key==='ArrowLeft'?-1:0;if(n){var v=tabs[(i+n+7)%7];v.focus();v.click();}});});
toon();
var r=s.querySelector('input[name=mensen]'),out=s.querySelector('output[name=aantal]'),som=s.querySelector('[data-u=som]');
function prijs(){var n=+r.value,p=Math.max(19,n*2.5);out.textContent=n;som.textContent='U betaalt dan '+(p%1?p.toFixed(2).replace('.',','):p)+' euro per maand, exclusief btw.';}
r.addEventListener('input',prijs);prijs();
s.querySelectorAll('.plb__aanmeld').forEach(function(f){var fout=f.querySelector('.plb__fout'),klaar=f.querySelector('.plb__klaar');
f.addEventListener('submit',function(e){e.preventDefault();var m=f.mail.value.trim(),ok=/^[^@\s]+@[^@\s]+\.[a-z]{2,}$/i.test(m);fout.hidden=ok;if(!ok){f.mail.focus();return;}
[].slice.call(f.querySelectorAll('label,button,.plb__noot')).forEach(function(x){x.hidden=true;});
var eind=new Date();eind.setDate(eind.getDate()+30);var mnd=['januari','februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december'];
klaar.hidden=false;klaar.textContent='Gelukt. De link om in te loggen staat in '+m+'. Uw proef loopt tot '+eind.getDate()+' '+mnd[eind.getMonth()]+'.';});});
}
init(document.querySelector('.jouw-container'));
More page examples
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →