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

Update: Maps

Browse Source
This commit is contained in:
Machiel Heinen
2026-02-24 19:10:47 +01:00
parent 75c2b3dfcd
commit 22aa67d406
12 changed files with 208 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -1,4 +1,5 @@
public/
resources/_gen/
.hugo_build.lock
node_modules/
node_modules/
static/tiles/

6
assets/js/main.js Normal file
View File

@@ -0,0 +1,6 @@
AOS.init({
once: true,
offset: 100,
easing: 'ease',
duration: 1200
});

78
assets/scss/main.scss
View File

@@ -1,12 +1,12 @@
// Globals
$container-max-widths: (
/* $container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1520px
);
); */
// Imports
@import "node_modules/bootstrap/scss/bootstrap";
@@ -131,8 +131,13 @@ p {
margin-block-start: 0;
margin-block-end: 0;
padding-bottom: 20px;
a {
color:$van-emous-orange;
}
}
.panel {
border-radius: 40px;
}
@@ -159,6 +164,10 @@ p {
font-weight: 400;
}
.rounded-img {
border-radius: 20px;;
}
// Menu
.top-bar {
background-color: #a8bbd5;
@@ -189,9 +198,20 @@ p {
backdrop-filter: blur(4px);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
// Animation
[data-aos^="fade"][data-aos^="fade"] {
transition-property: opacity, transform;
}
[data-aos="fade-up"] { transform: translateY(30px) !important; }
[data-aos="fade-down"] { transform: translateY(-30px) !important; }
[data-aos="fade-left"] { transform: translateX(30px) !important; }
[data-aos="fade-right"] { transform: translateX(-30px) !important; }
[data-aos].aos-animate {
transform: translate(0) !important;
opacity: 1;
}
.dropdown-menu {
@@ -444,6 +464,11 @@ p {
}
}
// Forms
.form-control {
padding: 16px 22px;
}
// Map
#col-map {
transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
@@ -462,6 +487,49 @@ p {
transform: translateX(0) !important;
}
.ol-control {
background: none !important;
}
.ol-zoom {
display: none;
}
.custom-zoom {
bottom: 20px;
right: 20px;
top: auto;
left: auto;
position: absolute;
display: flex;
flex-direction: column;
background: none;
}
.custom-zoom button {
background-color: #fff !important;
color: $van-emous-orange !important;
border: none !important;
border-radius: 5px !important;
margin-bottom: 5px !important;
width: 30px !important;
height: 30px !important;
font-size: 1.2rem !important;
cursor: pointer;
box-shadow: none;
}
.custom-zoom button:hover {
background-color: $van-emous-orange !important;
color: #fff !important;
}
.ol-attribution {
right: 20px !important;
bottom: 10px !important;
display: none !important;
}
// Footer
.footer-main {
.footer-inner {

28
hugo.toml
View File

@@ -1,6 +1,8 @@
baseURL = 'https://vanemous.start-it.nl/'
languageCode = 'nl-nl'
defaultContentLanguage = 'nl'
title = 'Van Emous Mantelzorgwoningen'
paginate = 10
[build]
writeStats = true
@@ -37,6 +39,18 @@ title = 'Van Emous Mantelzorgwoningen'
url = "/mantelzorgwoningen/type-a/"
weight = 1
[[menus.main]]
parent = "mantelzorgwoningen"
name = "Type B"
url = "/mantelzorgwoningen/type-a/"
weight = 1
[[menus.main]]
parent = "mantelzorgwoningen"
name = "Type C"
url = "/mantelzorgwoningen/type-a/"
weight = 1
[[menus.main]]
name = "Over Ons"
url = "/over-ons/"
@@ -64,10 +78,14 @@ title = 'Van Emous Mantelzorgwoningen'
## Params
[params]
description = "Van Emous bouwt hoogwaardige mantelzorgwoningen op maat."
description = "Van Emous bouwt hoogwaardige mantelzorgwoningen op maat. Duurzaam, comfortabel en volledig ontzorgd."
telefoon = "+31 6 15116762"
telefoon_link = "+31615116762"
email = "info@vanemousmantelzorgwoningen.nl"
google_rating = 5
address = "Adresgegevens hier..."
# SEO & Socials
author = "Van Emous"
logo = "img/logo.svg"
favicon = "favicon.ico"
og_image = "img/og-image.jpg"
@@ -76,5 +94,7 @@ title = 'Van Emous Mantelzorgwoningen'
facebook = "https://facebook.com/vanemous"
instagram = "https://instagram.com/vanemous"
[params.seo]
og_image = "img/og-share-image.jpg"
[sitemap]
changefreq = 'monthly'
priority = 0.5
filename = 'sitemap.xml'

14
hugo_stats.json
View File

@@ -56,6 +56,7 @@
"btn-cta",
"col-12",
"col-6",
"col-8",
"col-auto",
"col-lg-3",
"col-lg-4",
@@ -83,6 +84,8 @@
"dropdown-item",
"dropdown-menu",
"dropdown-toggle",
"fade-left",
"fade-up",
"flex-column",
"flex-nowrap",
"footer-inner",
@@ -94,11 +97,11 @@
"form-select",
"fs-6",
"fw-bold",
"g-2",
"g-3",
"g-4",
"g-5",
"g-lg-4",
"google-reviews",
"h-100",
"h4",
"h5",
@@ -124,7 +127,6 @@
"mb-4",
"mb-5",
"mb-lg-5",
"me-1",
"me-2",
"me-3",
"me-lg-5",
@@ -142,7 +144,6 @@
"mt-auto",
"mt-lg-5",
"mx-auto",
"mx-lg-5",
"my-5",
"my-lg-5",
"nav-item",
@@ -159,7 +160,6 @@
"opacity-10",
"overflow-hidden",
"p-4",
"p-5",
"panel",
"pb-3",
"pb-lg-5",
@@ -170,14 +170,17 @@
"pt-5",
"px-3",
"px-4",
"px-lg-4",
"px-5",
"px-lg-5",
"py-2",
"py-3",
"py-4",
"py-5",
"py-lg-4",
"rounded-img",
"rounded-pill",
"row",
"shadow",
"shadow-sm",
"small",
"sticky-top",
@@ -190,7 +193,6 @@
"text-primary",
"text-secondary",
"text-uppercase",
"text-warning",
"text-white",
"text-white-50",
"top-bar",

8
layouts/index.html
View File

@@ -3,8 +3,8 @@
{{ partial "usps.html" . }}
{{ if .Params.info_section }}
<section class="info-section py-5 my-lg-5 mx-lg-5">
<div class="container px-lg-5">
<section class="info-section py-5 my-lg-5">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-5 pe-lg-5">
@@ -12,7 +12,7 @@
{{ with .Params.info_section.image }}
<img src="{{ . | relURL }}"
alt="{{ $.Params.info_section.image_alt | default "Van Emous Mantelzorgwoningen" }}"
class="img-fluid hero-rounded-img shadow-sm">
class="img-fluid rounded-img shadow fade-left">
{{ end }}
</div>
</div>
@@ -43,7 +43,7 @@
{{ end }}
{{ if .Content }}
<div class="container my-5 px-lg-10">
<div class="container my-5">
{{ .Content }}
</div>
{{ end }}

52
layouts/partials/head.html
View File

@@ -1,23 +1,43 @@
<link rel="icon" href="/img/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ block "title" . }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
{{ $opts := dict "transpiler" "libsass" "targetPath" "css/main.css" "enableSourceMap" true }}
{{ $style := resources.Get "scss/main.scss" | css.Sass $opts | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">
<meta property="og:type" content="website">
<link rel="icon" href="{{ "img/favicon.ico" | relURL }}" sizes="any">
<link rel="apple-touch-icon" href="{{ "img/apple-touch-icon.png" | relURL }}">
<link rel="manifest" href="{{ "site.webmanifest" | relURL }}">
<title>
{{- if .IsHome -}}
{{ .Site.Title }} | {{ .Site.Params.description }}
{{- else -}}
{{ .Title }} | {{ .Site.Title }}
{{- end -}}
</title>
{{- $description := .Description | default .Summary | default .Site.Params.description -}}
<meta name="description" content="{{ $description }}">
<link rel="canonical" href="{{ .Permalink }}">
{{ $opts := dict "transpiler" "libsass" "targetPath" "css/main.css" "enableSourceMap" true }}
{{ with resources.Get "scss/main.scss" | css.Sass $opts | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}">
{{ end }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
{{ with resources.Get "js/main.js" | resources.Minify | resources.Fingerprint }}
<script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" defer></script>
{{ end }}
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
<meta property="og:url" content="{{ .Permalink }}">
<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}">
<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
<meta property="og:image" content="{{ .Site.Params.seo.og_image | absURL }}">
<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
<meta property="og:description" content="{{ $description }}">
<meta property="og:image" content="{{ .Params.image | default .Site.Params.og_image | absURL }}">
<meta property="og:site_name" content="{{ .Site.Title }}">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="{{ .Permalink }}">
<meta property="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}">
<meta property="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
<meta property="twitter:image" content="{{ .Site.Params.seo.og_image | absURL }}">
<meta property="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
<meta property="twitter:description" content="{{ $description }}">
<meta property="twitter:image" content="{{ .Params.image | default .Site.Params.og_image | absURL }}">

2
layouts/partials/header.html
View File

@@ -1,6 +1,6 @@
<header>
<div class="top-bar py-2">
<div class="container d-flex justify-content-between align-items-center px-lg-5">
<div class="container d-flex justify-content-between align-items-center">
<nav class="contact-info" aria-label="Contactinformatie">
{{ if .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 }}">

8
layouts/partials/hero.html
View File

@@ -1,11 +1,11 @@
<section class="hero-section py-5 my-lg-5">
<div class="container">
<div class="row align-items-end mx-lg-5 px-lg-4">
<div class="row align-items-end">
<div class="col-lg-7">
<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">
<a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta" data-aos="fade-up" data-aos-delay="300">
{{ .Params.hero.cta_text }}
</a>
</div>
@@ -17,7 +17,7 @@
</p>
<div class="d-lg-none mt-4">
<a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta">
<a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta fade-left">
{{ .Params.hero.cta_text }}
</a>
</div>
@@ -27,7 +27,7 @@
<div class="row mt-4 mt-lg-5">
<div class="col-12">
{{ with .Params.hero.image }}
<div class="hero-image-dynamic"
<div class="hero-image-dynamic" data-aos="fade-in" data-aos-delay="100"
style="background-image: url('{{ . | relURL }}');">
</div>
{{ end }}

81
layouts/partials/map.html
View File

@@ -1,17 +1,21 @@
<section class="info-section py-5 my-lg-5">
<div class="container overflow-hidden">
<div class="mb-5">
<div class="row">
<div class="mb-4 col-8">
<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>Liever <a href="/contact">persoonlijk advies?</a> Dat kunt uiteraard ook.</p>
</div>
</div>
<div class="row flex-nowrap g-5" style="min-height: 650px;">
<div class="row flex-nowrap g-5 h-100" style="min-height: 600px;" data-aos="fade-in" data-aos-delay="100">
<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)">
<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;">
<div id="panel" class="bg-white p-4" style="position: absolute; left: 20px; top: 20px; z-index: 1000; width: 300px; border-radius: 20px; max-height: 90%;">
<div class="">
<input type="text" id="pc-input" class="form-control mb-2 rounded-pill" placeholder="Postcode">
<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>
@@ -20,43 +24,47 @@
</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 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 panel px-5 py-4 pt-5">
<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>Vrije meters:</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>
</div>
<div class="p-4">
<p>Ontvang een volledig rapport over alle mogelijkheden binnen 5 minuten in uw email.</p>
<form id="lead-form">
<div class="row">
<div class="row g-2">
<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>
<select class="form-select form-control 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>
<input type="text" id="f-achternaam" class="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>
<input type="email" id="f-email" class="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>
<input type="tel" id="f-telefoon" class="form-control rounded-pill" placeholder="Telefoonnummer" required>
</div>
<button type="submit" class="btn btn-cta">Rapport Aanvragen</button>
<div class="col-12">
<button type="submit" class="btn btn-cta">Rapport Aanvragen</button>
</div>
</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>
@@ -68,14 +76,23 @@
<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',
controls: [
new ol.control.Zoom({
className: 'custom-zoom'
}),
new ol.control.Attribution({
collapsible: true
})
],
layers: [
new ol.layer.Tile({ source: new ol.source.OSM() }),
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: perceelSource,
style: new ol.style.Style({
@@ -91,10 +108,12 @@ document.addEventListener('DOMContentLoaded', function() {
})
})
],
view: new ol.View({ center: ol.proj.fromLonLat([5.594, 52.285]), zoom: 12 })
view: new ol.View({
center: ol.proj.fromLonLat([5.5846253, 52.2690304]),
zoom: 11
})
});
// 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;
@@ -108,7 +127,6 @@ document.addEventListener('DOMContentLoaded', function() {
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²';
@@ -116,25 +134,20 @@ document.addEventListener('DOMContentLoaded', function() {
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();

2
layouts/partials/usps.html
View File

@@ -2,7 +2,7 @@
<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="col-auto mx-auto fade-up">
<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"/>

2
static/robots.txt Normal file
View File

@@ -0,0 +1,2 @@
User-agent: *
Disallow: /