New: AR-3D model weergave gemaakt

.gitignore

@@ -1,2 +1,3 @@
 /public/
-/resources/
+/resources/
+/static/3d/

content/bedrijf-aanmelden-bedankt/_index.nl.md

@@ -0,0 +1,22 @@
+---
+title: "Bedankt voor het aanmelden"
+description: "Maak uw bedrijf beter zichtbaar door opgenomen te worden in onze lijst."
+draft: false
+layout: faq
+ignoreSearch: true
+build:
+    list: never
+    render: always
+---
+
+De ingediende gegevens worden zo spoedig mogelijk verwerkt. Het streven is dat deze binnen een week zichtbaar zijn op de site. Voor vragen is het mogelijk contact op te nemen via [info@mantelzorgwoning.info](mailto:info@mantelzorgwoning.info).
+
+## Haal meer uit uw website met StartIT
+
+Specifiek voor de bouw van mantelzorgwoningen zijn diverse tools ontwikkeld die de online presentatie versterken. Deze kunnen op de meeste websites direct worden geplaatst, zonder dat daar aanvullende plugins of licenties voor nodig zijn. Hieronder volgen enkele voorbeelden:
+
+### Augmented Reality 
+
+Hieronder is een 3D-model van de ‘Luxe Suite’ weergegeven. Door op een mobiel apparaat op het AR-icoon te klikken, kan de woning direct virtueel in de eigen tuin worden geplaatst. Dit geeft uw klant een uitstekende indruk van de woning die geplaatst gaat worden. 
+
+{{< 3d model="demo3.glb" >}}

content/bedrijf-aanmelden/_index.nl.md

@@ -4,11 +4,12 @@ description: "Maak uw bedrijf beter zichtbaar door opgenomen te worden in onze l
 layout: "bedrijf-aanmelden"
 draft: false
 ignoreSearch: true
+build:
+    list: never
+    render: always
 ---
 
-## Over deze website
-Dit is een website onafhankelijk van een commercieel partner. Dit is een vrijwillig project gemaakt door Machiel Heinen van het Barnevelds IT-bedrijf [StartIT](https://start-it.nl). 
-
-Als u contact opneemt worden uw gegevens niet aan een derde partij doorgegeven, zonder dat u daarvoor eerst expliciet toestemming geeft, bijvoorbeeld als u wilt overgaan tot kopen of huren van een woning.
+## Val op tussen de rest
+Presenteer uw bedrijf optimaal door uw specialismen aan te vinken. Denk aan maatwerk, eigen transport of unieke service-garanties. Bezoekers gebruiken deze eigenschappen om gericht te filteren; hoe vollediger uw profiel, hoe groter de kans op een perfecte match.
 
 Direct een email sturen is ook mogelijk middels: [info@mantelzorgwoning.info](mailto:info@mantelzorgwoning.info)

content/faq/index.nl.md

@@ -7,6 +7,7 @@ ignoreSearch: true
 build:
   render: 
   list: never
+
 ---
 {{< faq "Wat is een mantelzorgwoning?" >}}
 Het is een speciaal aangepaste of maatwerk woning voor mensen die een vorm van zorg krijgen van hun naasten. Dit kan gaan over audio-/visuele aanpassingen, alles gelijkvloers en drempelvrij maken en plaatsing van (medische) apparatuur.

hugo_stats.json

@@ -14,6 +14,7 @@
       "h2",
       "h3",
       "h4",
+      "h5",
       "head",
       "header",
       "hr",
@@ -25,6 +26,7 @@
       "li",
       "link",
       "meta",
+      "model-viewer",
       "nav",
       "ol",
       "option",
@@ -71,6 +73,7 @@
       "btn-lg",
       "btn-outline",
       "btn-outline-primary",
+      "btn-outline-secondary",
       "btn-primary",
       "btn-secondary",
       "btn-sm",
@@ -151,7 +154,6 @@
       "flex-grow-1",
       "flex-sm-row",
       "flex-wrap",
-      "font-italic",
       "font-small",
       "footer-menu",
       "footnote-backref",
@@ -165,6 +167,7 @@
       "form-control-sm",
       "form-group",
       "form-inline",
+      "fst-italic",
       "fw-bold",
       "g-2",
       "gap-2",
@@ -205,12 +208,14 @@
       "modal-content",
       "modal-dialog",
       "modal-header",
+      "model-container",
       "ms-0",
       "ms-2",
       "ms-auto",
       "ms-lg-4",
       "ms-md-4",
       "ms-sm-2",
+      "mt-1",
       "mt-2",
       "mt-3",
       "mt-4",
@@ -220,6 +225,7 @@
       "mx-2",
       "mx-lg-0",
       "my-3",
+      "my-4",
       "my-md-2",
       "nav",
       "nav-item",
@@ -246,6 +252,7 @@
       "order-2",
       "order-md-1",
       "order-md-2",
+      "p-2",
       "p-3",
       "p-4",
       "p-sm-5",
@@ -271,6 +278,7 @@
       "px-0",
       "px-1",
       "px-4",
+      "px-5",
       "px-lg-5",
       "px-sm-4",
       "py-2",
@@ -294,6 +302,7 @@
       "sidelist",
       "sidenav",
       "small",
+      "spinner-border",
       "start-100",
       "status-label",
       "step",
@@ -349,6 +358,8 @@
       "afwijkingen-en-lokale-regelingen",
       "alternatieve-bewijsvoering",
       "alternative-evidence",
+      "ar-button",
+      "augmented-reality",
       "belangrijke-fiscale-en-financiële-aandachtspunten",
       "belangrijke-overwegingen-per-type",
       "benefits-of-an-informal-care-dwelling",
@@ -426,6 +437,7 @@
       "gegevens-van-de-sitebeheerder",
       "gemeentelijke-eisen-controleren",
       "goed-verblijven",
+      "haal-meer-uit-uw-website-met-startit",
       "het-bewijs-van-zorgbehoefte",
       "het-proces-van-fabriek-naar-tuin",
       "huurkoop",
@@ -445,6 +457,7 @@
       "key-considerations-per-type",
       "key-features-in-the-nl",
       "kvk",
+      "lazy-load-poster",
       "lease",
       "legal-definition-in-the-netherlands",
       "lname",
@@ -512,11 +525,18 @@
       "step-4",
       "step-5",
       "submit-btn",
+      "summary-address",
       "summary-build",
       "summary-custom",
+      "summary-email",
+      "summary-factory",
+      "summary-finance",
       "summary-intro",
+      "summary-kvk",
       "summary-name",
+      "summary-options",
       "summary-slogan",
+      "summary-web",
       "telephone",
       "temporary-and-modular-units",
       "termination-of-informal-care",
@@ -536,6 +556,7 @@
       "typen-mantelzorgwoning",
       "types-of-informal-care-dwellings",
       "utility-connections",
+      "val-op-tussen-de-rest",
       "verbouw-van-bestaande-bebouwing",
       "vergunning",
       "vergunningsplichtig-bouwen",
@@ -563,6 +584,7 @@
       "who-is-it-for",
       "why-the-gp-often-refuses",
       "wipe",
+      "woning-viewer",
       "zoning-plan-and-location",
       "zorgindicatie-en-documentatie-verzamelen"
     ]

layouts/_default/bedrijf-aanmelden.html

@@ -152,20 +152,47 @@
             <div class="step d-none" id="step-5">
               <div class="row gy-3">
                 <div class="col-md-12">
-                  <div class="p-3 bg-light rounded border">
-                    <p><strong>Bedrijf:</strong> <span id="summary-name"></span></p>
-                    <p><strong>Slogan:</strong> <span id="summary-slogan"></span></p>
-                    <p><strong>Bouwmethode:</strong> <span id="summary-build"></span></p>
-                    <p><strong>Maatwerk:</strong> <span id="summary-custom"></span></p>
-                    <hr>
-                    <p><strong>Introductie:</strong></p>
-                    <p class="font-italic" id="summary-intro" style="white-space: pre-wrap;"></p>
+                  <div class="p-4 bg-light rounded border">
+                    <h3 class="mb-4 text-primary">Controleer uw gegevens</h3>
+                    
+                    <div class="row">
+                      <div class="col-md-6">
+                        <h5>Bedrijf & Contact</h5>
+                        <p class="mb-1"><strong>Naam:</strong> <span id="summary-name"></span></p>
+                        <p class="mb-1"><strong>KvK:</strong> <span id="summary-kvk"></span></p>
+                        <p class="mb-1"><strong>Website:</strong> <span id="summary-web"></span></p>
+                        <p class="mb-1"><strong>E-mail:</strong> <span id="summary-email"></span></p>
+                        <p class="mb-1"><strong>Adres:</strong> <span id="summary-address"></span></p>
+                      </div>
+
+                      <div class="col-md-6">
+                        <h5>Productie & Aanbod</h5>
+                        <p class="mb-1"><strong>Fabriek:</strong> <span id="summary-factory"></span></p>
+                        <p class="mb-1"><strong>Bouwmethode:</strong> <span id="summary-build"></span></p>
+                        <p class="mb-1"><strong>Maatwerk:</strong> <span id="summary-custom"></span></p>
+                        <p class="mb-1"><strong>Extra opties:</strong> <span id="summary-options"></span></p>
+                        <p class="mb-1"><strong>Financiering:</strong> <span id="summary-finance"></span></p>
+                      </div>
+                    </div>
+
+                    <hr class="my-4">
+
+                    <div class="row">
+                      <div class="col-md-12">
+                        <h5>Presentatie</h5>
+                        <p class="mb-2"><strong>Slogan:</strong> <br><span id="summary-slogan" class="fst-italic"></span></p>
+                        <p class="mb-0"><strong>Bedrijfsintroductie:</strong></p>
+                        <div class="p-2 border rounded bg-white mt-1">
+                          <span id="summary-intro" style="white-space: pre-wrap;"></span>
+                        </div>
+                      </div>
+                    </div>
                   </div>
                 </div>
 
-                <div class="col-md-12 mt-4">
-                  <button type="button" class="btn btn-secondary prev-step">Aanpassen</button>
-                  <button type="submit" id="submit-btn" class="btn btn-success btn-lg">Definitief verzenden</button>
+                <div class="col-md-12 mt-4 text-center">
+                  <button type="button" class="btn btn-outline-secondary prev-step me-3">Aanpassen</button>
+                  <button type="submit" id="submit-btn" class="btn btn-success btn-lg px-5">Definitief verzenden</button>
                 </div>
               </div>
             </div>
@@ -202,11 +229,26 @@
     return picked.length ? picked.join(', ') : 'Geen';
   };
 
+  // 1. URL HTTPS Preload helper
+  const websiteEl = document.getElementById('website');
+  if (websiteEl) {
+    websiteEl.addEventListener('focus', function() {
+      if (!this.value) this.value = 'https://';
+    });
+    websiteEl.addEventListener('blur', function() {
+      if (this.value === 'https://') this.value = '';
+    });
+  }
+
   function setFieldValue(fieldId, value) {
     const el = document.getElementById(fieldId);
     if (!el || !value) return false;
-    if (el.value.trim() && el.value !== 'https://') return false; 
-    el.value = value;
+    let finalVal = value;
+    // Forceer https op website veld bij prefill
+    if (fieldId === 'website' && value && !value.startsWith('http')) {
+        finalVal = 'https://' + value;
+    }
+    el.value = finalVal;
     el.dispatchEvent(new Event('input', { bubbles: true }));
     return true;
   }
@@ -216,11 +258,10 @@
     if (box) box.textContent = msg;
   }
 
-  // Formatting helpers
+  // Formatting & Counters
   const kvkEl = document.getElementById('kvk');
   if (kvkEl) kvkEl.addEventListener('input', e => e.target.value = e.target.value.replace(/\D/g, '').slice(0, 8));
 
-  // Counters
   const setupCounter = (fId, cId, max) => {
     const el = document.getElementById(fId), cnt = document.getElementById(cId);
     if (!el || !cnt) return;
@@ -231,7 +272,7 @@
   setupCounter('slogan', 'slogan-count', 30);
   setupCounter('intro', 'char-count', 320);
 
-  // Navigation
+  // Navigation & 2. UITGEBREIDE SUMMARY
   $$('.next-step').forEach(btn => {
     btn.addEventListener('click', () => {
       const curr = btn.closest('.step');
@@ -244,11 +285,25 @@
       const next = curr.nextElementSibling;
       if (next) {
         if (next.id === 'step-5') {
-            document.getElementById('summary-name').innerText = getVal('company_name');
-            document.getElementById('summary-slogan').innerText = getVal('slogan');
-            document.getElementById('summary-custom').innerText = getVal('customization');
-            document.getElementById('summary-intro').innerText = getVal('intro');
-            document.getElementById('summary-build').innerText = getChecked('build_method');
+            // Vullen van alle summary velden
+            const sMap = {
+                'summary-name': getVal('company_name'),
+                'summary-kvk': getVal('kvk'),
+                'summary-web': getVal('website'),
+                'summary-email': getVal('email'),
+                'summary-address': `${getVal('address')}, ${getVal('postal_code')}`,
+                'summary-factory': `${getVal('factory')} (Locaties: ${getVal('factory_count')})`,
+                'summary-build': getChecked('build_method'),
+                'summary-options': getChecked('additional_offerings'),
+                'summary-finance': getChecked('finance_options'),
+                'summary-custom': getVal('customization'),
+                'summary-slogan': getVal('slogan'),
+                'summary-intro': getVal('intro')
+            };
+            for (const [id, val] of Object.entries(sMap)) {
+                const el = document.getElementById(id);
+                if (el) el.innerText = val;
+            }
         }
         curr.classList.add('d-none');
         next.classList.remove('d-none');
@@ -288,16 +343,45 @@
     }
   }
 
+  // 3. SUBMIT MET VOLLEDIGE BESCHRIJVING
   document.getElementById('multi-step-form').addEventListener('submit', async (e) => {
     e.preventDefault();
     const btn = document.getElementById('submit-btn');
     btn.disabled = true; btn.innerText = 'Verzenden...';
 
+    const fullDescription = `
+BEDRIJFSGEGEVENS
+-----------------
+Naam: ${getVal('company_name')}
+KvK: ${getVal('kvk')}
+Adres: ${getVal('address')}
+Postcode: ${getVal('postal_code')}
+Tel: ${getVal('telephone')}
+Email: ${getVal('email')}
+Website: ${getVal('website')}
+
+PRODUCTIE & AANBOD
+-----------------
+Eigen fabriek: ${getVal('factory')} (Aantal: ${getVal('factory_count')})
+Bouwmethode: ${getChecked('build_method')}
+Maatwerk: ${getVal('customization')}
+Financiering: ${getChecked('finance_options')}
+Aanvullend aanbod: ${getChecked('additional_offerings')}
+Tweedehands: ${getVal('second_hand')}
+Servicecontract: ${getVal('service_contract')}
+Voorraad leverbaar: ${getVal('stock')}
+
+MARKETING
+-----------------
+Slogan: ${getVal('slogan')}
+Introductie: ${getVal('intro')}
+`.trim();
+
     const payload = {
       lastName: getVal('company_name'),
       website: getVal('website'),
       emailAddress: getVal('email') !== '-' ? getVal('email') : CFG.fallbackEmail,
-      description: `KVK: ${getVal('kvk')}\nINTRO: ${getVal('intro')}\nBOUW: ${getChecked('build_method')}`
+      description: fullDescription
     };
 
     try {

layouts/shortcodes/3d.html

@@ -0,0 +1,94 @@
+<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
+
+<style>
+  .model-container {
+    width: 100%;
+    height: 500px;
+    background-color: #f8f9fa;
+    border-radius: 15px;
+    overflow: hidden;
+    position: relative;
+    border: 1px solid #dee2e6;
+  }
+
+  model-viewer {
+    width: 100%;
+    height: 100%;
+    background-color: #f8f9fa;
+    --poster-color: transparent;
+  }
+
+  /* De poster/lader wordt door model-viewer zelf verborgen na laden */
+  #lazy-load-poster {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-color: #f8f9fa;
+  }
+
+  #ar-button {
+    background-color: #ffffff;
+    border-radius: 30px; /* Iets ronder voor moderne look */
+    border: 1px solid #007bff;
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%); /* Netjes in het midden onderaan */
+    padding: 12px 24px;
+    font-family: system-ui, -apple-system, sans-serif;
+    font-size: 15px;
+    font-weight: 600;
+    color: #007bff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 100;
+    cursor: pointer;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s ease;
+  }
+
+  #ar-button:active {
+    background-color: #e7f1ff;
+    transform: translateX(-50%) scale(0.95);
+  }
+
+  /* Verbergt de knop op desktop (omdat AR daar niet kan) */
+  /* Maar we laten hem op mobiel altijd staan voor de test */
+  @media (pointer: fine) {
+    #ar-button {
+      display: none;
+    }
+  }
+</style>
+
+<div class="model-container">
+  <model-viewer 
+    id="woning-viewer"
+    src="/3d/{{ .Get "model" }}" 
+    ar 
+    ar-modes="scene-viewer webxr quick-look" 
+    ar-placement="floor"
+    camera-controls 
+    shadow-intensity="1" 
+    auto-rotate 
+    touch-action="pan-y"
+    reveal="auto"
+    scale="0.01 0.01 0.01" 
+    camera-orbit="45deg 75deg auto">
+    
+    <div slot="poster" id="lazy-load-poster">
+       <div class="text-center">
+          <div class="spinner-border text-primary" role="status"></div>
+          <p class="mt-2">Woning wordt op ware grootte geplaatst...</p>
+       </div>
+    </div>
+
+    <button slot="ar-button" id="ar-button">
+        👋 BEKIJK IN UW TUIN
+    </button>
+</model-viewer>
+</div>