StartIT/mantelzorgwoning.info
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New: AR-3D model weergave gemaakt

Browse Source
This commit is contained in:
Machiel Heinen
2026-01-31 12:34:09 +01:00
parent aa98cd394e
commit 75f8e29973
11 changed files with 3499 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
layouts/_default/bedrijf-aanmelden.html
View File

@@ -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 {

94
layouts/shortcodes/3d.html Normal file
View File

@@ -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>