Map: Init
This commit is contained in:
@@ -1,4 +1,78 @@
|
||||
{{ $js := resources.Get "node_modules/bootstrap/dist/js/bootstrap.bundle.js" }} {{/* Gebruik de NIET-minified versie als bron */}}
|
||||
<footer class="footer-main mt-5 bg-secondary">
|
||||
<div class="footer-inner pt-5 pb-3">
|
||||
<div class="container px-lg-5">
|
||||
<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%;">
|
||||
<h5 class="fw-bold mb-3">Gratis brochure aanvragen</h5>
|
||||
<form action="#" class="brochure-form">
|
||||
<div class="mb-3">
|
||||
<input type="email" class="form-control rounded-pill border-0 px-4 py-2" placeholder="Vul uw emailadres in">
|
||||
</div>
|
||||
<div class="form-check mb-3 small text-muted">
|
||||
<input class="form-check-input" type="checkbox" id="privacyCheck">
|
||||
<label class="form-check-label" for="privacyCheck">
|
||||
Ik ga akkoord met het privacybeleid.
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-cta">Aanvragen</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-lg-3 offset-lg-1">
|
||||
<h5 class="fw-bold mb-4">Navigatie</h5>
|
||||
<ul class="list-unstyled">
|
||||
{{ range .Site.Menus.footer }}
|
||||
<li class="mb-2">
|
||||
<a href="{{ .URL | relURL }}" class="text-decoration-none text-dark">{{ .Name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<h5 class="fw-bold mb-4">Contactgegevens</h5>
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="icon-circle me-3"><i class="bi bi-telephone-fill"></i></div>
|
||||
<div>
|
||||
<span class="d-block small text-muted">Telefoon</span>
|
||||
<a href="tel:{{ .Site.Params.telefoon }}" class="text-decoration-none text-dark fw-bold">{{ .Site.Params.telefoon }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="icon-circle me-3"><i class="bi bi-envelope-fill"></i></div>
|
||||
<div>
|
||||
<span class="d-block small text-muted">E-mail</span>
|
||||
<a href="mailto:{{ .Site.Params.email }}" class="text-decoration-none text-dark fw-bold">{{ .Site.Params.email }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="icon-circle me-3"><i class="bi bi-geo-alt-fill"></i></div>
|
||||
<div>
|
||||
<span class="d-block small text-muted">Adres</span>
|
||||
<span class="text-dark fw-bold">{{ .Site.Params.adres }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mt-5 mb-4 opacity-10">
|
||||
|
||||
<div class="row small text-muted">
|
||||
<div class="col-md-8">
|
||||
Copyright © {{ now.Format "2006" }} | Van Emous Mantelzorgwoningen | kvk: {{ .Site.Params.kvk }}
|
||||
</div>
|
||||
<div class="col-md-4 text-md-end">
|
||||
<a href="/sitemap" class="text-decoration-none text-muted me-3">Sitemap</a>
|
||||
<a href="/privacybeleid" class="text-decoration-none text-muted">Privacybeleid</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{{ $js := resources.Get "node_modules/bootstrap/dist/js/bootstrap.bundle.js" }}
|
||||
{{ if $js }}
|
||||
{{ $js = $js | resources.Minify | resources.Fingerprint }}
|
||||
<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
|
||||
|
||||
@@ -1,23 +1,25 @@
|
||||
<header>
|
||||
<div class="top-bar py-2">
|
||||
<div class="container d-flex justify-content-between align-items-center">
|
||||
<div class="container d-flex justify-content-between align-items-center px-lg-5">
|
||||
<nav class="contact-info" aria-label="Contactinformatie">
|
||||
{{ if .Site.Params.telefoon }}
|
||||
<a href="tel:{{ .Site.Params.telefoon | urlize }}" class="me-3 text-white text-decoration-none" aria-label="Bel ons op {{ .Site.Params.telefoon }}">
|
||||
<i class="bi bi-telephone" aria-hidden="true"></i> {{ .Site.Params.telefoon }}
|
||||
<a href="tel:{{ .Site.Params.telefoon | urlize }}" class="me-lg-5 text-white text-decoration-none" aria-label="Bel ons op {{ .Site.Params.telefoon }}">
|
||||
<i class="bi bi-telephone-fill fs-6 align-middle" aria-hidden="true"></i>
|
||||
<span class="ms-1">{{ .Site.Params.telefoon }}</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.email }}
|
||||
<a href="mailto:{{ .Site.Params.email }}" class="text-white text-decoration-none" aria-label="Stuur een e-mail naar {{ .Site.Params.email }}">
|
||||
<i class="bi bi-envelope" aria-hidden="true"></i> {{ .Site.Params.email }}
|
||||
<a href="mailto:{{ .Site.Params.email }}" class="text-white text-decoration-none d-none d-lg-inline-block" aria-label="Stuur een e-mail naar {{ .Site.Params.email }}">
|
||||
<i class="bi bi-envelope-fill fs-6 align-middle" aria-hidden="true"></i>
|
||||
<span class="ms-1">{{ .Site.Params.email }}</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</nav>
|
||||
|
||||
{{ if .Site.Params.google_rating }}
|
||||
<div class="google-reviews d-none d-md-block" aria-label="Google beoordeling: {{ .Site.Params.google_rating }} van de 5 sterren">
|
||||
<span class="fw-bold" aria-hidden="true">G {{ .Site.Params.google_rating }}</span>
|
||||
<div class="google-reviews d-flex align-items-center" aria-label="Google beoordeling: {{ .Site.Params.google_rating }} van de 5 sterren">
|
||||
<span class="fw-bold me-1 text-white" aria-hidden="true">G {{ .Site.Params.google_rating }}</span>
|
||||
<span class="text-warning" aria-hidden="true">
|
||||
{{ range (seq (int .Site.Params.google_rating)) }}★{{ end }}
|
||||
</span>
|
||||
|
||||
@@ -1,17 +1,36 @@
|
||||
<section class="hero-section py-5 my-lg-5">
|
||||
<div class="container">
|
||||
<div class="row align-items-end">
|
||||
<div class="row align-items-end mx-lg-5 px-lg-4">
|
||||
<div class="col-lg-7">
|
||||
<h1 class="display-3 mb-5">{{ .Params.hero.title }}</h1>
|
||||
<a href="{{ .Params.hero.cta_link }}" class="btn btn-cta">
|
||||
{{ .Params.hero.cta_text }}
|
||||
</a>
|
||||
<h1 class="display-3 mb-4 mb-lg-5">{{ .Params.hero.title | markdownify }}</h1>
|
||||
|
||||
<div class="d-none d-lg-block">
|
||||
<a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta">
|
||||
{{ .Params.hero.cta_text }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-5">
|
||||
<p class="lead mb-2">
|
||||
{{ .Params.hero.subtitle }}
|
||||
{{ .Params.hero.subtitle | markdownify }}
|
||||
</p>
|
||||
|
||||
<div class="d-lg-none mt-4">
|
||||
<a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta">
|
||||
{{ .Params.hero.cta_text }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4 mt-lg-5">
|
||||
<div class="col-12">
|
||||
{{ with .Params.hero.image }}
|
||||
<div class="hero-image-dynamic"
|
||||
style="background-image: url('{{ . | relURL }}');">
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
165
layouts/partials/map.html
Normal file
165
layouts/partials/map.html
Normal file
@@ -0,0 +1,165 @@
|
||||
<section class="info-section py-5 my-lg-5">
|
||||
<div class="container overflow-hidden">
|
||||
<div class="mb-5">
|
||||
<h6 class="text-primary">Doe een vooronderzoek</h6>
|
||||
<h2 class="display-5 fw-bold">Toets uw kavel</h2>
|
||||
</div>
|
||||
<div class="row flex-nowrap g-5" style="min-height: 650px;">
|
||||
|
||||
<div id="col-map" class="col-12" style="transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0;">
|
||||
<div class="panel overflow-hidden" style="height: 650px; position: relative;">
|
||||
<div id="panel" class="bg-white p-4" style="position: absolute; left: 20px; top: 20px; z-index: 1000; width: 350px; border-radius: 20px; max-height: 90%;">
|
||||
<div class="mb-3">
|
||||
<p class="text-dark">Voer uw (plaatsing-)adres in.</p>
|
||||
<input type="text" id="pc-input" class="form-control mb-2 rounded-pill" placeholder="Postcode (3771VH)">
|
||||
<input type="number" id="hn-input" class="form-control mb-2 rounded-pill" placeholder="Huisnummer">
|
||||
<button id="btnSearch" class="btn btn-cta">Analyseer Kavel</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="map" style="width: 100%; height: 100%; background: #eee;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="col-results" class="col-md-5 " style="display: none; opacity: 0; transform: translateX(50px); transition: all 0.6s ease-out; flex-shrink: 0;">
|
||||
<div class="bg-light p-4 panel p-5">
|
||||
<h3 class="fw-bold mb-4">Resultaten</h3>
|
||||
<div class="d-flex justify-content-between mb-2"><span>Kavelnummer:</span><strong id="res-kavelnummer"></strong></div>
|
||||
<div class="d-flex justify-content-between mb-2"><span>Bouwjaar hoofdgebouw:</span><strong id="res-bouwjaar"></strong></div>
|
||||
<hr>
|
||||
<div class="d-flex justify-content-between mb-2"><span>Formaat kavel:</span><strong id="res-kavelformaat"></strong></div>
|
||||
<div class="d-flex justify-content-between mb-2"><span>Formaat kavel:</span><strong id="res-kavelvrij"></strong></div>
|
||||
<div class="d-flex justify-content-between mb-2"><span class="text-primary h5">Max. Mantelzorgwoning</span><strong class="text-primary h5" style="filter: blur(7px);" id="res-max"></strong></div>
|
||||
<hr>
|
||||
<p>Ontvang een volledig rapport over alle mogelijkheden binnen 5 minuten in uw email.</p>
|
||||
<form id="lead-form">
|
||||
|
||||
<div class="row">
|
||||
<div class="mb-2 col-md-4">
|
||||
<select class="form-select form-select rounded-pill" id="f-aanhef" required>
|
||||
<option value="" selected disabled>Aanhef</option>
|
||||
<option value="Dhr.">Dhr.</option>
|
||||
<option value="Mevr.">Mevr.</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-2 col-md-8">
|
||||
<input type="text" id="f-achternaam" class="form-control form-control rounded-pill" placeholder="Achternaam" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input type="email" id="f-email" class="form-control form-control rounded-pill" placeholder="E-mailadres" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<input type="tel" id="f-telefoon" class="form-control form-control rounded-pill" placeholder="Telefoonnummer" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-cta">Rapport Aanvragen</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<div id="form-success" class="mt-3 text-center d-none">
|
||||
<p class="fw-bold mb-0">✓ Je rapport is onderweg!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@9.2.4/ol.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/ol@9.2.4/dist/ol.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 1. Bronnen initialiseren
|
||||
const perceelSource = new ol.source.Vector();
|
||||
const gebouwSource = new ol.source.Vector();
|
||||
|
||||
const map = new ol.Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new ol.layer.Tile({ source: new ol.source.OSM() }),
|
||||
new ol.layer.Vector({
|
||||
source: perceelSource,
|
||||
style: new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({ color: '#B95913', width: 4 }),
|
||||
fill: new ol.style.Fill({ color: 'rgba(185, 89, 19, 0.2)' })
|
||||
})
|
||||
}),
|
||||
new ol.layer.Vector({
|
||||
source: gebouwSource,
|
||||
style: new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({ color: '#ffffff', width: 2 }),
|
||||
fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.4)' })
|
||||
})
|
||||
})
|
||||
],
|
||||
view: new ol.View({ center: ol.proj.fromLonLat([5.594, 52.285]), zoom: 12 })
|
||||
});
|
||||
|
||||
// 2. Click Handler
|
||||
document.getElementById('btnSearch').addEventListener('click', async function() {
|
||||
const pc = document.getElementById('pc-input').value.replace(/\s+/g, "").toUpperCase();
|
||||
const hn = document.getElementById('hn-input').value;
|
||||
|
||||
if (!pc || !hn) return alert("Vul postcode en huisnummer in.");
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://maps.start-it.nl/api/analyse?postcode=${pc}&huisnummer=${hn}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.results && data.results.length > 0) {
|
||||
const r = data.results[0];
|
||||
|
||||
// A. Data invullen
|
||||
// document.getElementById('res-adres').innerText = r.adres || '—';
|
||||
document.getElementById('res-bouwjaar').innerText = r.hoofdgebouw_bouwjaar || '—';
|
||||
document.getElementById('res-max').innerText = (r.max_mantelzorgwoning_m2 || 0) + ' m²';
|
||||
document.getElementById("res-kavelnummer").innerText = r.kavelnummer || "—";
|
||||
document.getElementById("res-kavelformaat").innerText = (r.kavel_m2 || 0) + ' m²';
|
||||
document.getElementById("res-kavelvrij").innerText = (r.vrije_m2 || 0) + ' m²';
|
||||
|
||||
// B. Animatie Logica
|
||||
const colMap = document.getElementById('col-map');
|
||||
const colRes = document.getElementById('col-results');
|
||||
|
||||
// Stap 1: Krimp de kaart-kolom
|
||||
colMap.classList.remove('col-12');
|
||||
colMap.classList.add('col-md-7');
|
||||
|
||||
// Stap 2: Toon zijpaneel met fade-in
|
||||
setTimeout(() => {
|
||||
colRes.style.display = "block";
|
||||
// Kleine delay voor de browser om display:block te verwerken voor de transitie
|
||||
setTimeout(() => {
|
||||
colRes.style.opacity = "1";
|
||||
colRes.style.transform = "translateX(0)";
|
||||
}, 50);
|
||||
}, 100);
|
||||
|
||||
// C. Kaart tekenen
|
||||
setTimeout(() => {
|
||||
map.updateSize();
|
||||
perceelSource.clear();
|
||||
gebouwSource.clear();
|
||||
|
||||
const format = new ol.format.GeoJSON();
|
||||
if (r.perceel_geojson) {
|
||||
perceelSource.addFeatures(format.readFeatures(JSON.parse(r.perceel_geojson), {
|
||||
dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857'
|
||||
}));
|
||||
}
|
||||
if (r.gebouw_geojson) {
|
||||
gebouwSource.addFeatures(format.readFeatures(JSON.parse(r.gebouw_geojson), {
|
||||
dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857'
|
||||
}));
|
||||
}
|
||||
|
||||
if (perceelSource.getFeatures().length > 0) {
|
||||
map.getView().fit(perceelSource.getExtent(), {
|
||||
padding: [50, 50, 50, 50], duration: 1000
|
||||
});
|
||||
}
|
||||
}, 400);
|
||||
}
|
||||
} catch (e) { console.error(e); }
|
||||
});
|
||||
});
|
||||
</script>
|
||||
36
layouts/partials/modellen.html
Normal file
36
layouts/partials/modellen.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<section class="modellen-sectie py-5 bg-secondary w-100">
|
||||
<div class="container px-lg-5">
|
||||
<div class="mb-5">
|
||||
<h6 class="text-primary">{{ .Params.modellen_subtitle | default "Onze mantelzorgwoningen" }}</h6>
|
||||
<h2 class="display-5 fw-bold">{{ .Params.modellen_title | default "Samen leven, zelfstandig wonen" }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 justify-content-center">
|
||||
{{ $modellen := (where .Site.RegularPages "Section" "modellen") }}
|
||||
{{ range $modellen.ByWeight }}
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="model-card position-relative shadow-sm overflow-hidden hero-rounded-img h-100">
|
||||
|
||||
{{ with .Params.image }}
|
||||
<div class="model-card-bg" style="background-image: url('{{ . | relURL }}');"></div>
|
||||
{{ end }}
|
||||
|
||||
<div class="model-card-overlay d-flex flex-column justify-content-between p-4">
|
||||
<div class="price-badge">
|
||||
<span class="d-block small text-uppercase">Vanaf</span>
|
||||
<span class="h4 fw-bold">€ {{ lang.FormatNumber 0 .Params.price }}</span>
|
||||
</div>
|
||||
|
||||
<div class="model-info mt-auto">
|
||||
<h3 class="h4 fw-bold text-white mb-1">{{ .Title }}</h3>
|
||||
<p class="text-white-50 small mb-0">{{ .Params.subtitle }}</p>
|
||||
|
||||
<a href="{{ .RelPermalink }}" class="stretched-link" aria-label="Bekijk {{ .Title }}"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
16
layouts/partials/usps.html
Normal file
16
layouts/partials/usps.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<section class="usp-bar py-3 py-lg-4 bg-white">
|
||||
<div class="container px-lg-5">
|
||||
<div class="row g-3 g-lg-4 justify-content-center">
|
||||
{{ range .Params.usps }}
|
||||
<div class="col-auto mx-auto">
|
||||
<div class="usp-item d-flex align-items-center">
|
||||
<svg class="me-2" width="26" height="22" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.5 7.5L6.5 12.5L16.5 1.5" stroke="#B95913" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="usp-text">{{ . }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user