99 lines
4.7 KiB
HTML
99 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Tectum
|
|
Copyright © 2026 Machiel Heinen.
|
|
Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
|
|
Zie LICENTIE.md.
|
|
-->
|
|
<!-- Light-versie (modelpagina's), voorlopig los: light.html?model=amstel. Op een modelpagina is alleen het
|
|
<div class="tectum-light" data-model="…"> plus de stylesheets en scripts hieronder nodig. -->
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Woning samenstellen — Van Emous Mantelzorgwoningen</title>
|
|
<link rel="stylesheet" href="css/vendor/bootstrap-icons.min.css">
|
|
<link rel="stylesheet" href="css/light.css">
|
|
<style>
|
|
body { margin: 0; padding: 24px; background: #f9faf5; color: #212121; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
|
|
.page { max-width: 1400px; margin: 0 auto; }
|
|
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
|
|
.page-head img { height: 34px; }
|
|
.page-head select, .page-head button { font: inherit; padding: 6px 10px; border: 1px solid #c5ced9; border-radius: 8px; background: #fff; }
|
|
@media (max-width: 820px) { body { padding: 12px; } }
|
|
</style>
|
|
<script src="js/vendor/three.min.js"></script>
|
|
<script src="js/vendor/OrbitControls.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<div class="page-head">
|
|
<img src="assets/logo.svg" alt="Van Emous Mantelzorgwoningen">
|
|
<!-- Alleen voor het losse testen: op een modelpagina staat het model vast. -->
|
|
<div>
|
|
<select id="model-pick" aria-label="Model"></select>
|
|
<!-- Alleen voor het testen: de GLB die op een telefoon in AR wordt getoond (bijv. in Blender of een glTF-viewer). -->
|
|
<button type="button" id="glb-dl" title="De GLB die AR gebruikt downloaden">GLB</button>
|
|
</div>
|
|
</div>
|
|
<div id="configurator" class="tectum-light"></div>
|
|
</div>
|
|
|
|
<script src="js/core/logo-data.js"></script>
|
|
<script src="js/core/geometry.js"></script>
|
|
<script src="js/core/view-layers.js"></script>
|
|
<script src="js/core/ui-kit.js"></script>
|
|
<script src="js/core/skybox.js"></script>
|
|
<script src="js/core/glb-writer.js"></script>
|
|
<script src="js/vendor/jspdf.umd.min.js"></script>
|
|
<script src="js/vendor/qrcode.js"></script>
|
|
<script src="js/core/pdf-sheet.js"></script>
|
|
<script src="js/wall/kozijn-model.js"></script>
|
|
<script src="js/wall/wall-model.js"></script>
|
|
<script src="js/wall/wall-pdf.js"></script>
|
|
<script src="js/floor/floor-model.js"></script>
|
|
<script src="js/floor/floor-pdf.js"></script>
|
|
<script src="js/roof/roof-model.js"></script>
|
|
<script src="js/roof/post-model.js"></script>
|
|
<script src="js/lighting/lighting-model.js"></script>
|
|
<script src="js/elektra/elektra-model.js"></script>
|
|
<script src="js/sandwich/sandwich-model.js"></script>
|
|
<script src="js/wall/wall.js"></script>
|
|
<script src="js/floor/floor.js"></script>
|
|
<script src="js/unit/unit-model.js"></script>
|
|
<script src="js/room/room-model.js"></script>
|
|
<script src="js/interior/fixture-model.js"></script>
|
|
<script src="js/house/chimney-model.js"></script>
|
|
<script src="js/house/house-model.js"></script>
|
|
<script src="js/cost/cost-defaults.js"></script>
|
|
<script src="js/cost/cost-csv.js"></script>
|
|
<script src="js/cost/cost-model.js"></script>
|
|
<script src="js/elektra/elektra-pdf.js"></script>
|
|
<script src="js/house/house-pdf.js"></script>
|
|
<script src="js/light/light-model.js"></script>
|
|
<script src="js/light/light-pdf.js"></script>
|
|
<script>
|
|
// Model uit de URL (?model=amstel); de keuzelijst herlaadt de pagina met een ander model.
|
|
(function () {
|
|
const key = new URLSearchParams(location.search).get('model');
|
|
const model = HouseModel.MODELS[key] ? key : Object.keys(HouseModel.MODELS)[0];
|
|
const pick = document.getElementById('model-pick');
|
|
pick.innerHTML = Object.entries(HouseModel.MODELS).map(([k, m]) => `<option value="${k}"${k === model ? ' selected' : ''}>${m.label}</option>`).join('');
|
|
pick.addEventListener('change', () => { location.search = '?model=' + pick.value; });
|
|
const el = document.getElementById('configurator'), btn = document.getElementById('glb-dl');
|
|
el.dataset.model = model;
|
|
btn.addEventListener('click', () => {
|
|
const g = el.tectumLight && el.tectumLight.glb();
|
|
if (!g) return;
|
|
const a = document.createElement('a');
|
|
a.href = g.url;
|
|
a.download = `${model}.glb`;
|
|
a.click();
|
|
btn.textContent = `GLB · ${(g.stats.bytes / 1e6).toLocaleString('nl-NL', { maximumFractionDigits: 1 })} MB · ${g.stats.triangles.toLocaleString('nl-NL')} driehoeken`;
|
|
});
|
|
})();
|
|
</script>
|
|
<script src="js/light/light.js"></script>
|
|
</body>
|
|
</html>
|