246 lines
11 KiB
HTML
246 lines
11 KiB
HTML
{{ define "main" }}
|
|
<section class="model-section py-4">
|
|
<div class="container">
|
|
<div class="row g-5">
|
|
{{ partial "hero-model.html" . }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{ with .Params.gallery }}
|
|
<div id="gallery-splide" class="splide my-5" aria-label="Afbeeldingen van model {{ $.Title }}">
|
|
<div class="splide__track">
|
|
<ul class="splide__list">
|
|
{{ range . }}
|
|
<li class="splide__slide text-center">
|
|
<img src="{{ .image | relURL }}"
|
|
alt="{{ .alt }}"
|
|
class="img-fluid rounded-4 shadow-sm gallery-trigger"
|
|
style="height: 400px; object-fit: cover; cursor: pointer;"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#lightboxModal"
|
|
onclick="const bigImg = this.src.replace('800x', '3200x'); document.getElementById('lightboxImage').src = bigImg;">
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
<div class="modal fade" id="lightboxModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-xl">
|
|
<div class="modal-content bg-transparent border-0">
|
|
<div class="modal-body p-0">
|
|
<button type="button" class="btn-lightbox-close" data-bs-dismiss="modal">
|
|
<i class="bi bi-x-lg"></i>
|
|
</button>
|
|
|
|
<div id="lightbox-splide" class="splide">
|
|
<div class="splide__track">
|
|
<ul class="splide__list">
|
|
{{ range .Params.gallery }}
|
|
<li class="splide__slide text-center">
|
|
{{ $bigImg := replace .image "800x" "3200x" }}
|
|
<img data-splide-lazy="{{ $bigImg | relURL }}" class="img-fluid rounded-4" alt="{{ .alt }}">
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="splide__arrows">
|
|
<button class="splide__arrow splide__arrow--prev"><i class="bi bi-chevron-left"></i></button>
|
|
<button class="splide__arrow splide__arrow--next"><i class="bi bi-chevron-right"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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">
|
|
{{ .Content }}
|
|
</div>
|
|
<div class="col-md-4">
|
|
<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>
|
|
<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');
|
|
|
|
if (mainGallery && lightboxEl) {
|
|
const primarySplide = new Splide(mainGallery, {
|
|
type : 'loop',
|
|
perPage: 4,
|
|
focus : 'center',
|
|
perMove: 1,
|
|
padding: '1rem',
|
|
gap : '2rem',
|
|
autoplay: true,
|
|
interval: 4000,
|
|
arrows : false,
|
|
pagination: true,
|
|
breakpoints: {
|
|
1200: { perPage: 2, padding: '1rem' },
|
|
768: { perPage: 1, padding: '2rem', gap: '1rem' }
|
|
}
|
|
}).mount();
|
|
|
|
const lightboxSplide = new Splide(lightboxEl, {
|
|
type: 'fade',
|
|
rewind: true,
|
|
pagination: false,
|
|
lazyLoad: 'nearby'
|
|
}).mount();
|
|
|
|
const modal = document.getElementById('lightboxModal');
|
|
const triggers = document.querySelectorAll('.gallery-trigger');
|
|
|
|
triggers.forEach((trigger, index) => {
|
|
trigger.addEventListener('click', (e) => {
|
|
primarySplide.Components.Autoplay.pause();
|
|
lightboxSplide.go(index);
|
|
});
|
|
});
|
|
|
|
modal.addEventListener('shown.bs.modal', function () {
|
|
lightboxSplide.refresh();
|
|
});
|
|
|
|
modal.addEventListener('hidden.bs.modal', function () {
|
|
primarySplide.Components.Autoplay.play();
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{{ end }} |