VanEmous/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update: Alle modellen

Browse Source
This commit is contained in:
Machiel Heinen
2026-03-03 21:12:13 +01:00
parent b72c6d99ea
commit bfbd320458
176 changed files with 637 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
layouts/_default/model.html
View File

@@ -1,14 +1,14 @@
{{ define "main" }}
<section class="model-section py-4">
<div class="container">
<div class="row">
<div class="row g-5">
{{ partial "hero-model.html" . }}
</div>
</div>
</section>
{{ with .Params.gallery }}
<div id="gallery-splide" class="splide mt-2" aria-label="Afbeeldingen van model {{ $.Title }}">
<div id="gallery-splide" class="splide my-5" aria-label="Afbeeldingen van model {{ $.Title }}">
<div class="splide__track">
<ul class="splide__list">
{{ range . }}
@@ -56,36 +56,144 @@
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-11 mx-auto">
<section class="model-section py-4">
<div class="container">
<div class="col-md-11 mx-auto">
<div class="row g-5">
<div class="col-md-8">
<article>
<div class="content mt-4">
{{ .Content }}
</div>
</article>
{{ .Content }}
</div>
<div class="col-md-4">
<div class="card-secondary">
<h4>Plattegrond bekijken</h4>
<p>Bekijk de standaard indeling van de woning. Het is uiteraard mogelijk om aanpassingen te maken</p>
<div class="bg-white shadow p-4 rounded-4 mb-4">
<img class="img-fluid" src="{{ .Params.plattegrond }}">
</div>
<a class="btn btn-cta">Download plattegrond</a>
<div class="card-primary">
<h3 class="text-white pb-3 fw-bold">Bekijk plattegrond</h3>
<p>U kan <a href="" class="text-white">de plattegrond direct bekijken</a> of een papieren exemplaar op A3 formaat thuis ontvangen.</p>
<a class="btn btn-cta-white" role="button" type="button" data-bs-toggle="modal" data-bs-target="#modelModal">Thuis ontvangen</a>
</div>
</div>
</div>
</div>
<hr class="mt-5">
</div>
</div>
</section>
<div class="modal fade" id="modelModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content rounded-4 border-0 shadow p-lg-5 p-md-4">
<div class="modal-header border-0">
<div class="row">
<h6 class="text-primary d-lg-inline-block">Ontvang de details thuis</h6>
<h5 class="modal-title h3 d-block">Model plattegrond aanvragen (A3)</h5>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
<form action="jouw-verwerkings-url" method="POST">
<div class="row mb-3">
<div class="col-md-6">
<label for="voornaam" class="form-label">Voornaam</label>
<input type="text" class="form-control rounded-pill bg-light border-0" id="voornaam" name="voornaam" required>
</div>
<div class="col-md-6">
<label for="achternaam" class="form-label">Achternaam</label>
<input type="text" class="form-control rounded-pill bg-light border-0" id="achternaam" name="achternaam" required>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="postcode" class="form-label">Postcode</label>
<input type="text" class="form-control rounded-pill bg-light border-0" id="postcode" name="postcode" placeholder="1234 AB" required>
</div>
<div class="col-md-6">
<label for="huisnummer" class="form-label">Huisnummer & toevoeging</label>
<input type="text" class="form-control rounded-pill bg-light border-0" id="huisnummer" name="huisnummer" placeholder="12a" required>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="email" class="form-label">E-mailadres</label>
<input type="email" class="form-control rounded-pill bg-light border-0" id="email" name="email" required>
</div>
<div class="col-md-6">
<label for="telephone" class="form-label">Telefoonnummer</label>
<input type="tel" class="form-control rounded-pill bg-light border-0" id="telephone" name="telephone" required>
</div>
</div>
<hr class="my-4">
<div class="mb-4">
<label class="form-label d-block mb-1"><strong>Van welke modellen wilt u de plattegrond ontvangen?</strong></label>
<p class="small text-muted mb-3">Selecteer maximaal 2 modellen.</p>
<div class="row g-3">
{{ $currentPageTitle := .Title }} {{ range (where .Site.RegularPages "Section" "modellen") }}
<div class="col-6 col-md-4">
<div class="form-check">
<input class="form-check-input model-check"
type="checkbox"
id="model_{{ .File.TranslationBaseName }}"
name="modellen[]"
value="{{ .Params.title }}"
{{ if eq .Title $currentPageTitle }} checked {{ end }}> <label class="form-check-label" for="model_{{ .File.TranslationBaseName }}">
{{ .Params.title }}
</label>
</div>
</div>
{{ end }}
</div>
</div>
<hr class="my-4">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="nieuwsbrief" name="nieuwsbrief" checked>
<label class="form-check-label" for="nieuwsbrief">
Ja, ik meld mij aan voor de nieuwsbrief en blijf graag op de hoogte.
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="callme" name="callme">
<label class="form-check-label" for="callme">
Ik wil graag vrijblijvend & persoonlijk advies ontvangen
</label>
</div>
<div class="">
<button type="submit" class="btn btn-cta my-3">Plattegronden aanvragen</button>
<p class="py-2 small text-muted">U gaat bij verzenden akkoord met de verwerking van uw gegevens zoals beschreven in ons privacybeleid.</p>
</div>
</form>
</div>
</div>
</div>
</div>
{{ partial "map.html" . }}
<script>
const checkboxes = document.querySelectorAll('.model-check');
const maxSelection = 2;
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
const checkedCount = document.querySelectorAll('.model-check:checked').length;
if (checkedCount >= maxSelection) {
checkboxes.forEach(cb => {
if (!cb.checked) {
cb.disabled = true;
}
});
} else {
checkboxes.forEach(cb => {
cb.disabled = false;
});
}
});
});
document.addEventListener('DOMContentLoaded', function () {
const mainGallery = document.querySelector('#gallery-splide');
const lightboxEl = document.querySelector('#lightbox-splide');

4
layouts/index.html
View File

@@ -11,7 +11,7 @@
{{ with .Params.info_section.image }}
<img src="{{ . | relURL }}"
alt="{{ $.Params.info_section.image_alt | default "Van Emous Mantelzorgwoningen" }}"
class="img-fluid rounded-img shadow fade-left">
class="img-fluid rounded-img shadow fade-left" loading="lazy">
{{ end }}
</div>
</div>
@@ -61,7 +61,7 @@
{{ with .Params.about_section.image }}
<img src="{{ . | relURL }}"
alt="{{ $.Params.info_section.image_alt | default "Van Emous Mantelzorgwoningen" }}"
class="img-fluid rounded-img shadow">
class="img-fluid rounded-img shadow" loading="lazy">
{{ end }}
</div>
</div>

1
layouts/partials/faq.html
View File

@@ -5,7 +5,6 @@
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="d-block pb-4 text-center">
<p class="h6 text-primary">{{ .subtitle | default "Een snel overzicht" }}</p>
<h2 class="display-3">{{ .title | default "Veelgestelde vragen" }}</h2>
</div>
<div class="accordion faq-accordion" id="accordionFAQ">

16
layouts/partials/footer-contact.html
View File

@@ -43,27 +43,27 @@
<div class="row g-4">
<div class="col-md-6">
<label for="voornaam" class="form-label">Voornaam</label>
<input type="text" class="form-control rounded-pill bg-light border-0" id="voornaam" name="voornaam" required>
<input type="text" class="form-control rounded-pill bg-light border-0" id="voornaam" name="voornaam" required aria-required="true">
</div>
<div class="col-md-6">
<label for="achternaam" class="form-label">Achternaam</label>
<input type="text" class="form-control rounded-pill bg-light border-0" id="achternaam" name="achternaam" required>
<input type="text" class="form-control rounded-pill bg-light border-0" id="achternaam" name="achternaam" required aria-required="true">
</div>
<div class="col-md-6">
<label for="email" class="form-label">E-mailadres</label>
<input type="email" class="form-control rounded-pill bg-light border-0" id="email" name="email" required>
<input type="email" class="form-control rounded-pill bg-light border-0" id="email" name="email" required aria-required="true">
</div>
<div class="col-md-6">
<label for="telephone" class="form-label">Telefoon</label>
<input type="tel" class="form-control rounded-pill bg-light border-0" id="telephone" name="telephone" required>
<input type="tel" class="form-control rounded-pill bg-light border-0" id="telephone" name="telephone" required aria-required="true">
</div>
<div class="col-12">
<label for="" class="form-label">Uw bericht</label>
<textarea class="form-control bg-light border-0" rows="6"></textarea>
<label for="bericht" class="form-label">Uw bericht</label>
<textarea id="bericht" name="bericht" class="form-control bg-light border-0" rows="6" required aria-required="true"></textarea>
</div>
<div class="col-12">
@@ -75,8 +75,8 @@
</div>
<div class="">
<p class=" py-2 small">U gaat bij verzenden akkoord met de verwerking van gegevens zoals beschreven in het privacybeleid.</p>
<button type="submit" class="btn btn-cta">Verstuur aanvraag</button>
<p id="privacy-notitie" class="py-2 small">U gaat bij verzenden akkoord met de verwerking van uw gegevens zoals beschreven in het privacybeleid.</p>
<button type="submit" class="btn btn-cta" aria-describedby="privacy-notitie">Verstuur aanvraag</button>
</div>
</div>
</div>

2
layouts/partials/footer.html
View File

@@ -4,7 +4,7 @@
<div class="row">
<div class="col-lg-4">
<img src="/img/logo-box.svg" alt="Van Emous Logo" class="mb-4 pb-lg-5" style="height: 240px;max-width:100%;">
<img src="/img/logo-box.svg" alt="Van Emous Logo" class="mb-4 pb-lg-5" style="height: 240px;max-width:100%;" loading="lazy">
<h5 class="fw-bold mb-3">Gratis brochure aanvragen</h5>
<form action="#" class="brochure-form">
<div class="mb-3">

10
layouts/partials/header.html
View File

@@ -1,4 +1,4 @@
<header>
<!-- <header>
<div class="top-bar py-2">
<div class="container d-flex justify-content-between align-items-center">
<nav class="contact-info" aria-label="Contactinformatie">
@@ -27,13 +27,13 @@
{{ end }}
</div>
</div>
</header>
</header> -->
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3 sticky-top" aria-label="Hoofdmenu">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="/" aria-label="Van Emous Mantelzorgwoningen Home">
{{ if .Site.Params.logo }}
<img src="{{ .Site.Params.logo | relURL }}" alt="Van Emous Logo" height="60" class="me-2">
<img src="{{ .Site.Params.logo | relURL }}" alt="Van Emous Logo" height="60" class="me-2" loading="lazy">
{{ end }}
</a>
@@ -77,8 +77,8 @@
{{ end }}
<li class="nav-item ms-lg-3 d-flex align-items-center justify-content-end cta-wrapper">
<a href="/brochure" class="btn btn-cta" role="button" type="button" data-bs-toggle="modal" data-bs-target="#contactModal">
Contact
<a href="/advies" class="btn btn-cta" role="button" type="button" data-bs-toggle="modal" data-bs-target="#contactModal">
Vrijblijvend advies
</a>
</li>
</ul>

2
layouts/partials/hero-model.html
View File

@@ -20,7 +20,7 @@
{{ end }}
{{ if $hero.summary }}
<div id="model-eigenschappen" class="row g-3 mt-2">
<div id="model-eigenschappen" class="row g-3 mt-2 mx-0 px-0">
{{ range $index, $element := $hero.summary }}
{{ $delay := add 200 (mul $index 100) }}

8
layouts/partials/map.html
View File

@@ -1,15 +1,15 @@
<section class="info-section py-5 my-lg-5" id="vergunningscheck">
<section class="info-section py-3" id="vergunningscheck">
<div class="container overflow-hidden">
<div class="row">
<div class="mb-4 col-md-8">
<div class="mb-4 col-md-11 mx-auto">
<h6 class="text-primary">Doe een vooronderzoek</h6>
<h2 class="display-5 fw-bold">Toets uw kavel</h2>
<p>U kunt geheel vrijblijvend een vooronderzoek doen naar uw mogelijkheden. Voer uw (plaatsing-)adres in en krijg direct resultaat en een uitgebreid verslag ontvangt u binnen 5 minuten per email.</p>
<p>U kunt geheel vrijblijvend een vooronderzoek doen naar uw mogelijkheden.</p>
<p>Liever <a href="/contact">persoonlijk advies?</a> Dat kunt uiteraard ook.</p>
</div>
</div>
<div class="row flex-nowrap g-5 h-100" style="min-height: 400px;" data-aos="zoom-in" data-aos-offset="500" data-aos-delay="100">
<div class="row flex-nowrap g-5 h-100" style="min-height: 300px;" data-aos="zoom-in" data-aos-offset="200" data-aos-delay="100">
<div id="col-map" class="col-12 mb-3" style="transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0;">
<div class="panel overflow-hidden shadow" style="height: 600px; position: relative;border:2px solid #fff;">

4
layouts/partials/modellen.html
View File

File diff suppressed because one or more lines are too long

4
layouts/partials/mogelijkheden.html
View File

@@ -34,7 +34,7 @@
</a>
</div>
<div class="col-md-6 h-100">
<img src="{{ .image | relURL }}" alt="{{ .title }}" class="h-100 w-100 object-fit-cover">
<img src="{{ .image | relURL }}" alt="{{ .title }}" class="h-100 w-100 object-fit-cover" loading="lazy">
</div>
</div>
</div>
@@ -50,7 +50,7 @@
{{ .link_text }} <i class="bi bi-chevron-right ms-1 text-primary"></i>
</a>
</div>
<img src="{{ .image | relURL }}" alt="{{ .title }}" class="mt-auto w-100 object-fit-cover" style="height: 200px;">
<img src="{{ .image | relURL }}" alt="{{ .title }}" class="mt-auto w-100 object-fit-cover" style="height: 200px;" loading="lazy">
</div>
</div>
{{ end }}