Differences

This shows you the differences between two versions of the page.

--- handleiding_nieuw:sub_spacematrix [2025/05/07 09:04] – support
+++ handleiding_nieuw:sub_spacematrix [2026/01/31 10:06] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
 <html>
-<style>
+<html lang="nl">
-    .inputrow {
+<head>
-        display: flex;
+<script src="https://unpkg.com/pizzip@3.1.5/dist/pizzip.min.js"></script>
-        align-items: center;
+<script src="https://unpkg.com/docxtemplater@3.29.1/build/docxtemplater.js"></script>
-        gap: 10px;
+<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
-        margin-bottom: 8px;
+  <meta charset="UTF-8">
-    }
+  <title>Spacematrix Rekenblok + Voorzieningen + Parkeren</title>
-    .inputrow label {
-        width: 200px;
+  <style>
-    }
+/* ========== Tabs ========== */
-    .inputrow input {
-        width: 80px;
+.tabs{
-    }
+  display:flex;
-    .resultblock {
+  gap:6px;
-        margin-left: 40px;
+  margin: 12px 0 0 0;
-        font-size: 0.9em;
+  padding: 0;
-        min-width: 200px;
+  flex-wrap:wrap;
-        text-align: right;
+}
-    }
-    table.rekenblok {
+.tab{
-        border-collapse: collapse;
+  padding:8px 12px;
-        margin-top: 25px;
+  background:#e7e7e7;
-        font-size: 0.9em;
+  cursor:pointer;
-    }
+  border:1px solid #cfcfcf;
-    table.rekenblok td, table.rekenblok th {
+  border-bottom:none;
-        padding: 4px 6px;
+  border-radius:8px 8px 0 0;
-        border: 1px solid #ccc;
+  color:#222;
-        text-align: right;
+  font-weight:600;
-    }
+  user-select:none;
-    table.rekenblok th {
+}
-        background-color: #f0f0f0;
-    }
+.tab:hover{ background:#dddddd; }
-    .scheiding td {
-        background-color: #fafafa;
+.tab.active{
-        border-top: 2px solid #666;
+  background:#ffffff;
-    }
+  position:relative;
-    .kaartcontainer {
+  top:1px;
-        position: absolute;
+  font-weight:700;
-        top: 0;
+}
-        right: 0;
-        width: 320px;
+.tabcontent{
-    }
+  display:none;
-    .kaartcontainer img {
+  border:1px solid #cfcfcf;
-        width: 100%;
+  padding:15px;
-        display: block;
+  border-radius:0 8px 8px 8px;
-    }
+  background:#fff;
-    .stipje {
+}
-        position: absolute;
-        width: 14px;
+.tabcontent.active{ display:block; }
-        height: 14px;
-        background: red;
+@media (max-width: 900px){
-        border-radius: 50%;
+  .tabs{ gap:6px; }
-        transform: translate(-50%, -50%);
+}
-        border: 2px solid white;
-    }
+  body { font-family: sans-serif; margin: 20px; }
+  .inputrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+  .inputrow label { width: 240px; }
+  .inputrow input { width: 80px; }
+  table { border-collapse: collapse; width: 100%; margin-top: 10px; }
+  th, td { border: 1px solid #ccc; padding: 5px; text-align: right; }
+  th { background: #f0f0f0; }
+  td:first-child, th:first-child { text-align: left; }
+  .kaartcontainer { position: relative; max-width: 350px; margin-top: 20px; }
+  .kaartcontainer img { width: 100%; display: block; }
+  .stipje { position: absolute; width: 14px; height: 14px; background: red; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid white; }
+  .perc-warning{ color: #b00020; font-weight: 700; }
+  /* ========== Header + Scenario bar ========== */
+  .pageheader{
+    display:flex;
+    align-items:flex-end;
+    justify-content:space-between;
+    gap:16px;
+    margin-bottom:10px;
+  }
+  .pageheader h1{
+    margin:0;
+    line-height:1.05;
+  }
+  .scenario-bar{
+  display:flex;
+  align-items:flex-start;
+  justify-content:flex-end;
+  gap:12px;
+  flex-wrap:wrap;
+}
+.scenario-left{
+  display:flex;
+  flex-direction:column;
+  gap:4px;
+  min-width:360px;
+  flex:1;
+}
+.scenario-left select{
+  height:34px;
+  padding:0 10px;
+  border-radius:6px;
+  border:1px solid #c9d6d6;
+  background:#fff;
+}
+.scenario-right{
+  display:flex;
+  align-items:center;
+  gap:8px;
+  flex-wrap:wrap;
+  justify-content:flex-end;
+}
+.scenario-right .btn{
+  height:34px;
+  padding:0 10px;
+  border-radius:6px;
+  border:1px solid #c9d6d6;
+  background:#f4f7f7;
+  color:#113333;
+  font-weight:700;
+  cursor:pointer;
+}
+.scenario-right .btn:hover{
+  background:#e9f1f1;
+  border-color:#9fbcbc;
+}
+.scenario-right .btn.primary{
+  background:#3aa39a;
+  border-color:#2e8f86;
+  color:#fff;
+}
+.scenario-right .btn.primary:hover{
+  background:#2e8f86;
+}
+.scenario-right .btn.danger{
+  background:#f7eaea;
+  border-color:#e2bcbc;
+  color:#7a1f1f;
+}
+.scenario-right .btn.danger:hover{
+  background:#f2dcdc;
+}
+#sm_loaded_label{ color:#2b4a4a; font-size:0.92em; }
+#sm_save_status{ color:#2b4a4a; font-size:0.9em; white-space:nowrap; margin-left:6px; }
+/* ====== Spacematrix legenda (onder invoervelden, links) + hover-tooltips ====== */
+.sm-legend{
+  margin-top: 14px;
+  border: 1px solid #c9d6d6;
+  border-radius: 8px;
+  background: #fff;
+  padding: 6px 8px;
+  max-width: 250px;
+  min-height: 118px;
+  margin-bottom: 14px;
+}
+.sm-legend-title{
+  margin: 0 0 6px 0;
+  font-size: 0.84rem;
+  font-weight: 700;
+  color: #113333;
+}
+.sm-legend-grid{
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 5px;
+}
+.sm-legend-item{
+  display: grid;
+  grid-template-columns: 22px auto;
+  gap: 6px;
+  align-items: start;
+  font-size: 0.80rem;
+  line-height: 1.15;
+  color: #1f3e3e;
+}
+.sm-zone-badge{
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  font-size: 0.68rem;
+  font-weight: 800;
+  background: #e9f1f1;
+  border: 1px solid #c9d6d6;
+  color: #113333;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.sm-legend-short{
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+/* Info-icoon (klein en rustig) */
+.sm-legend-i{
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.72rem;
+  font-weight: 800;
+  border: 1px solid #c9d6d6;
+  background: #f4f7f7;
+  color: #2b4a4a;
+  cursor: help;
+  user-select: none;
+}
+/* ====== Tooltip mechaniek ======*/
+.sm-tip{
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+/* Tooltip bubble */
+.sm-tip::after{
+  content: attr(data-tip);
+  position: absolute;
+  left: 0;
+  top: calc(100% + 8px);
+  width: 260px;
+  max-width: 70vw;
+  background: #113333;
+  color: #fff;
+  padding: 8px 10px;
+  border-radius: 8px;
+  font-size: 0.8rem;
+  line-height: 1.25;
+  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
+  opacity: 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+  transition: opacity 120ms ease, transform 120ms ease;
+  z-index: 50;
+  white-space: normal;
+}
+/* Tooltip pijltje */
+.sm-tip::before{
+  content: "";
+  position: absolute;
+  left: 10px;
+  top: calc(100% + 2px);
+  border: 6px solid transparent;
+  border-bottom-color: #113333;
+  opacity: 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+  transition: opacity 120ms ease, transform 120ms ease;
+  z-index: 51;
+}
+/* Toon tooltip bij hover/focus */
+.sm-tip:hover::after,
+.sm-tip:focus-within::after,
+.sm-tip:hover::before,
+.sm-tip:focus-within::before{
+  opacity: 1;
+  transform: translateY(0);
+}
+/* Toegankelijk: focus-ring op i */
+.sm-legend-i:focus{
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.18);
+  border-color: #9fbfe6;
+}
+/* Mobiel: iets breder tooltip */
+@media (max-width: 600px){
+  .sm-tip::after{ width: 240px; }
+}
 </style>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
-<div style="position: relative;">
-    <div class="kaartcontainer">
-        <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:SPACEMATE1.png" alt="Spacematrix kaart">
-        <div class="stipje" id="stipje"></div>
-    </div>
-</div>
-<h2>Spacematrix Rekenblok</h2>
+<div class="pageheader">
+  <h1>Stedelijke Dichtheidsrekenmachine</h1>
-<div class="inputrow">
+ <div class="scenario-bar">
-    <label for="opp">Oppervlak projectgebied (m²):</label>
+  <div class="scenario-left">
-    <input id="opp" type="number" value="10000" oninput="updateLaadvermogen()">
+    <select id="sm_scenario_select" title="Kies een opgeslagen scenario" onchange="smUI_onScenarioChange()"></select>
-    <div class="resultblock" id="lv1"></div>
+    <span id="sm_loaded_label"></span>
+  </div>
+  <div class="scenario-right">
+    <button class="btn primary" type="button" onclick="smUI_save()">Opslaan…</button>
+    <button class="btn primary" type="button" onclick="smUI_loadSelected()">Openen</button>
+    <button class="btn danger" type="button" onclick="smUI_deleteSelected()">Verwijderen</button>
+    <button class="btn" type="button" onclick="smUI_openHelp()">Handleiding</button>
+    <button class="btn" type="button" onclick="smUI_resetAll()">Reset</button>
+    <span id="sm_save_status"></span>
+  </div>
 </div>
-<div class="inputrow">
-    <label for="fsi">FSI:</label>
-    <input id="fsi" type="number" step="0.01" value="1.6" oninput="updateLaadvermogen()">
-    <div class="resultblock" id="lv2"></div>
 </div>
-<div class="inputrow">
-    <label for="gsi">GSI:</label>
+<!-- RESPONSIVE VOOR MOBIELE TELEFOONS -->
-    <input id="gsi" type="number" step="0.01" value="0.3" oninput="updateLaadvermogen()">
+<div class="mobile-hint">
-    <div class="resultblock" id="lv3"></div>
+  <strong>Let op (mobiele weergave)</strong><br>
-</div>
+  Deze pagina bevat interactieve grafieken en tabellen die zijn ontworpen voor gebruik op een groter scherm.
-<div class="inputrow">
+  Voor een beter overzicht kun je je telefoon liggend houden of deze pagina openen op een tablet of laptop.
-    <label for="voorziening">% BVO voor voorzieningen:</label>
-    <input id="voorziening" type="number" step="1" value="10" oninput="updateLaadvermogen()">
-    <div class="resultblock" id="lv4"></div>
 </div>
-<div style="margin-top: 30px;">
-<table class="rekenblok">
+<div class="tabs">
-    <thead>
-        <tr>
+  <div class="tab active" onclick="switchTab('rekenblok')">Spacematrix Rekenblok</div>
-            <th>Type</th>
+  <div class="tab" onclick="switchTab('voorzieningen')">Voorzieningen</div>
-            <th style="width: 60px;">%</th>
+  <div class="tab" onclick="switchTab('parkeren')">Parkeren</div>
-            <th style="width: 70px;">m²/won</th>
+  <div class="tab" onclick="switchTab('openbareruimte')">Openbare Ruimte</div>
-            <th>Aantal</th>
-            <th>Tot. BVO</th>
-        </tr>
-    </thead>
-    <tbody id="woningtypes"></tbody>
-    <tfoot>
-        <tr class="scheiding">
-            <td><b>Totaal</b></td>
-            <td id="totaal_perc">-</td>
-            <td id="totaal_gewbvo">-</td>
-            <td id="totaal_won">-</td>
-            <td id="totaal_bvo">-</td>
-        </tr>
-    </tfoot>
-</table>
 </div>
-<h3>Resultaat</h3>
+<div id="rekenblok" class="tabcontent active">
-<div id="output"></div>
+  <div class="bovenblok" style="display: flex; gap: 20px; align-items: flex-start;">
+    <div class="inputvelden" style="flex: 1;">
+      <div class="inputrow">
+        <label for="opp">Oppervlak projectgebied (m²):</label>
+        <input id="opp" type="number" value="10000" oninput="updateLaadvermogen()">
+      </div>
+      <div class="inputrow">
+        <label for="fsi">FSI:</label>
+        <input id="fsi" type="number" step="0.01" value="1.6" oninput="updateLaadvermogen()">
+      </div>
+      <div class="inputrow">
+        <label for="gsi">GSI:</label>
+        <input id="gsi" type="number" step="0.01" value="0.3" oninput="updateLaadvermogen()">
+      </div>
+      <div class="inputrow">
+        <label>Voorzieningenruimte per woning (m²):</label>
+        <span id="voorzieningenruimte_display">-</span>
+        <input type="hidden" id="voorzieningenruimte_waarde" value="0">
+	  </div>
+	<!-- legenda Spacematrix -->
-<script>
+<div class="sm-legend">
-    const types = [
+  <div class="sm-legend-title">Legenda zones (A–H)</div>
-        "egw sociaal", "egw goedkoop", "egw midden", "egw duur", "egw top",
-        "mgw sociaal", "mgw goedkoop", "mgw midden", "mgw duur", "mgw top"
-    ];
-    function formatGetal(n) {
+  <div class="sm-legend-grid">
-        return n.toLocaleString("nl-NL");
-    }
-    function updateStipje(fsi, gsi) {
+    <div class="sm-legend-item">
-        const stip = document.getElementById("stipje");
+      <span class="sm-zone-badge">A</span>
-        const x = Math.min(100, Math.max(0, gsi * 190));
+      <div class="sm-legend-short">
-        const y = Math.max(0, Math.min(100, (3 - fsi) * 35));
+        Low-rise spacious blocks
-        stip.style.left = `${x}%`;
+        <span class="sm-tip" data-tip="Lage bouwhoogte met veel open ruimte. Past bij tuinstedelijke of ruime woonmilieus.">
-        stip.style.top = `${y}%`;
+          <span class="sm-legend-i" tabindex="0">i</span>
-    }
+        </span>
+      </div>
+    </div>
-    function renderWoningtypes() {
+    <div class="sm-legend-item">
-    const tbody = document.getElementById("woningtypes");
+      <span class="sm-zone-badge">B</span>
-    types.forEach((type, i) => {
+      <div class="sm-legend-short">
-        const row = document.createElement("tr");
+        Low-rise compact blocks
-        if (i === 5) row.className = "scheiding";
+        <span class="sm-tip" data-tip="Lage bouwhoogte met compacte verkaveling. Veelal grondgebonden woningen.">
-        row.innerHTML = `
+          <span class="sm-legend-i" tabindex="0">i</span>
-            <td style="text-align: left;">${type}</td>
+        </span>
-            <td><input type="number" id="perc_${i}" value="10" step="0.1" oninput="updateLaadvermogen()"></td>
+      </div>
-            <td><input type="number" id="bvo_${i}" value="${i < 5 ? 130 : 90}" step="1" oninput="updateLaadvermogen()"></td>
+    </div>
-            <td id="aantal_${i}">-</td>
-            <td id="totbvo_${i}">-</td>
-        `;
-        tbody.appendChild(row);
-    });
-    }
-    function updateLaadvermogen() {
+    <div class="sm-legend-item">
-        const opp = parseFloat(document.getElementById("opp").value);
+      <span class="sm-zone-badge">C</span>
-        const fsi = parseFloat(document.getElementById("fsi").value);
+      <div class="sm-legend-short">
-        const gsi = parseFloat(document.getElementById("gsi").value);
+        Mid-rise open blocks
-        const voorzieningPerc = parseFloat(document.getElementById("voorziening").value) / 100;
+        <span class="sm-tip" data-tip="Middelhoge bebouwing met relatief open opzet en duidelijke openbare ruimte.">
+          <span class="sm-legend-i" tabindex="0">i</span>
+        </span>
+      </div>
+    </div>
-        const laadvermogen = Math.round(opp * fsi);
+    <div class="sm-legend-item">
-        const bvoVoorzieningen = Math.round(laadvermogen * voorzieningPerc);
+      <span class="sm-zone-badge">D</span>
-        const bvoWonen = laadvermogen - bvoVoorzieningen;
+      <div class="sm-legend-short">
+        Mid-rise spacious blocks
+        <span class="sm-tip" data-tip="Middelhoge bebouwing met meer lagen, maar nog steeds een ruimtelijk karakter.">
+          <span class="sm-legend-i" tabindex="0">i</span>
+        </span>
+      </div>
+    </div>
-        document.getElementById("lv2").innerText = `Laadvermogen: ${formatGetal(laadvermogen)} m² BVO`;
+    <div class="sm-legend-item">
-        document.getElementById("lv3").innerText = `Voorzieningen: ${formatGetal(bvoVoorzieningen)} m²`;
+      <span class="sm-zone-badge">E</span>
-        document.getElementById("lv4").innerText = `Wonen: ${formatGetal(bvoWonen)} m²`;
+      <div class="sm-legend-short">
+        Mid-rise compact blocks
+        <span class="sm-tip" data-tip="Compact stedelijk woonmilieu met hogere dichtheid en beperkte open ruimte.">
+          <span class="sm-legend-i" tabindex="0">i</span>
+        </span>
+      </div>
+    </div>
-        updateStipje(fsi, gsi);
+    <div class="sm-legend-item">
-        bereken(opp, fsi, voorzieningPerc);
+      <span class="sm-zone-badge">F</span>
-    }
+      <div class="sm-legend-short">
+        Mid-rise closed blocks
+        <span class="sm-tip" data-tip="Gesloten bouwblokken met duidelijke straatwanden en hogere stedelijkheid.">
+          <span class="sm-legend-i" tabindex="0">i</span>
+        </span>
+      </div>
+    </div>
-    function bereken(opp, fsi, voorzieningPerc) {
+    <div class="sm-legend-item">
-        const laadvermogen = opp * fsi;
+      <span class="sm-zone-badge">G</span>
-        const woonBVO = laadvermogen * (1 - voorzieningPerc);
+      <div class="sm-legend-short">
+        Mid-rise super-blocks
+        <span class="sm-tip" data-tip="Zeer intensieve stedelijke blokken met hoge FSI en multifunctioneel gebruik.">
+          <span class="sm-legend-i" tabindex="0">i</span>
+        </span>
+      </div>
+    </div>
-        let gewogenBVO = 0;
+    <div class="sm-legend-item">
-        let totalPerc = 0;
+      <span class="sm-zone-badge">H</span>
-        const details = [];
+      <div class="sm-legend-short">
+        High-rise developments
+        <span class="sm-tip" data-tip="Hoogbouwontwikkelingen met veel lagen, vaak gecombineerd met open ruimte op maaiveld.">
+          <span class="sm-legend-i" tabindex="0">i</span>
+        </span>
+      </div>
+    </div>
-        for (let i = 0; i < types.length; i++) {
+  </div>
-            const perc = parseFloat(document.getElementById(`perc_${i}`).value) || 0;
+</div>
-            const bvo = parseFloat(document.getElementById(`bvo_${i}`).value) || 0;
-            gewogenBVO += (perc / 100) * bvo;
-            totalPerc += perc;
-            details.push({ i, perc, bvo });
-        }
-        if (gewogenBVO === 0) return;
+	<!-- Einde Legenda en Tooltip -->
+	</div>
-        const totaalWoningenExact = woonBVO / gewogenBVO;
-        let sumWon = 0;
+	<div class="kaartcontainer" style="max-width: 500px;">
-        let sumBVO = 0;
+      <img src="/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:SPACEMATE1.png" alt="Spacematrix kaart">
-        let wonPerType = [];
+      <div class="stipje" id="stipje"></div>
+    </div>
+  </div>
-        let restant = Math.round(totaalWoningenExact);
+  <div class="onderblok">
-        for (let i = 0; i < details.length; i++) {
+    <table>
-            const { perc } = details[i];
+      <thead>
-            let aant = (perc / 100) * totaalWoningenExact;
+        <tr><th>Type</th><th>%</th><th>m²/won</th><th>Aantal</th><th>Tot. BVO</th></tr>
-            let afgerond = Math.floor(aant);
+      </thead>
-            wonPerType.push(afgerond);
+      <tbody id="woningtypes"></tbody>
-            restant -= afgerond;
+      <tfoot>
-        }
+        <tr><th>Totaal</th><th id="totaal_perc">-</th><th id="totaal_gewbvo">-</th><th id="totaal_won">-</th><th id="totaal_bvo">-</th></tr>
+      </tfoot>
+    </table>
-        const decimaalSort = details.map((d, i) => ({
+    <div style="margin-top: 10px; font-size: 0.9em; color: #555;">
-            i, rest: ((d.perc / 100) * totaalWoningenExact) % 1
+  <strong>Let op:</strong> de voorzieningenruimte zoals weergegeven in deze samenvatting kan iets afwijken van de berekening op het tabblad <em>Voorzieningen</em>.
-        })).sort((a, b) => b.rest - a.rest);
+  Dit komt doordat het aantal woningen iteratief wordt bepaald op basis van de beschikbare ruimte, inclusief ruimte voor voorzieningen en parkeren.
+  Bij het toepassen van voorzieningen wordt eerst een schatting gemaakt op basis van een voorlopig aantal woningen. Daarna wordt het aantal woningen opnieuw berekend met de benodigde ruimte per woning.
+  Hierdoor ontstaat een klein verschil tussen het oorspronkelijk berekende totaal en de daadwerkelijk ingepaste voorzieningenruimte.
+</div>
-        for (let j = 0; j < restant; j++) {
+    <div id="output"></div>
-            wonPerType[decimaalSort[j].i]++;
+    <div id="summary">
-        }
+      <h3>Samenvatting</h3>
+      <table>
+        <tr><td><strong>Totaal laadvermogen (BVO)</strong></td><td id="summary_bvo_tot">-</td></tr>
+        <tr><td>Woonruimte (BVO)</td><td id="summary_wonen_bvo">-</td></tr>
+        <tr><td>Voorzieningenruimte (BVO)</td><td id="summary_voorz_tot">-</td></tr>
+        <tr><td>Parkeerruimte bovengronds (BVO)</td><td id="summary_parkeren_tot">-</td></tr>
+		<tr>
+          <td colspan="2" style="background: #e0e0e0; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.9rem; border-top: 2px solid #999; border-bottom: 1px solid #ccc; color: #333;">
+          Kengetallen
+          </td>
+        </tr>
+        <tr><td>Voorzieningenruimte per woning (m²)</td><td id="summary_voorz_per_won">-</td></tr>
+        <tr><td>Parkeerruimte per woning (m²)</td><td id="summary_parkeren_per_won">-</td></tr>
+        <tr><td>Totaal aantal parkeerplaatsen</td><td id="summary_pp_tot">-</td></tr>
+        <tr><td>Totale woonruimte incl. voorzieningen en parkeren</td><td id="summary_wonen">-</td></tr>
+        <tr><td>Totaal aantal woningen</td><td id="summary_woningen">-</td></tr>
+      </table>
+    </div>
+  </div>
+  <div style="margin-top: 20px;">
+  <button onclick="downloadKickstartDump()" style="padding: 10px 20px; font-size: 1rem; background-color: #0074d9; color: black; border: none; border-radius: 5px; cursor: pointer;">
+    📄 Kickstart Dump downloaden
+  </button>
+</div>
+</div>
-        for (let i = 0; i < details.length; i++) {
+<div id="voorzieningen" class="tabcontent">
-            const aant = wonPerType[i];
+  <div class="inputrow">
-            const bvoTot = aant * details[i].bvo;
+    <label>Aantal bewoners per woning:</label>
-            document.getElementById(`aantal_${i}`).innerText = formatGetal(aant);
+    <input id="bewoners_per_woning" type="number" step="0.1" value="2.2">
-            document.getElementById(`totbvo_${i}`).innerText = formatGetal(bvoTot);
+  </div>
-            sumWon += aant;
+  <table>
-            sumBVO += bvoTot;
+    <thead>
-        }
+      <tr><th>Voorziening</th><th>Norm (m² per 1000)</th><th>Selecteer</th></tr>
+    </thead>
+    <tbody id="voorzieningentabel"></tbody>
+  </table>
+  <div class="inputrow">
+    <button id="btn_voorzieningen" onclick="berekenVoorzieningenruimte()">Toepassen in rekenblok</button>
+    <div id="voorziening_resultaat" style="margin-left: 10px;"></div>
+  </div>
+  <h3>Overzicht geselecteerde voorzieningen</h3>
+<table id="voorzieningen_totaal">
+  <thead>
+    <tr><th>Voorziening</th><th>Berekend m²</th></tr>
+  </thead>
+  <tbody id="voorziening_summary_tabel"></tbody>
+  <tfoot>
+    <tr><th>Totaal</th><th id="voorziening_summary_totaal">-</th></tr>
+  </tfoot>
+</table>
+<div style="margin-top: 10px; font-size: 0.9em; color: #555;">
+  <strong>Toelichting:</strong> het weergegeven totaal van de voorzieningenruimte is gebaseerd op een schatting op basis van het huidige aantal woningen.
+  Nadat dit oppervlak per woning is berekend, wordt het aantal woningen in het rekenblok opnieuw doorgerekend. Hierdoor kan het werkelijke totaal afwijken.
+  Deze iteratieve aanpak is nodig omdat de benodigde ruimte per woning invloed heeft op hoeveel woningen uiteindelijk in het plan passen.
+ </div>
+</div>
+<div id="parkeren" class="tabcontent">
+  <h3>Parkeren</h3>
+  <div class="inputrow">
+    <label>Parkeerplaatsen per woning:</label>
+    <input id="pp_per_woning" type="number" step="0.1" value="1.0">
+  </div>
+  <div class="inputrow">
+    <label>BVO per parkeerplaats (m²):</label>
+    <input id="bvo_per_pp" type="number" step="1" value="25">
+  </div>
+  <div class="inputrow">
+    <label>% Ondergronds:</label>
+    <input id="pp_ondergronds" type="number" step="1" value="50">
+  </div>
+  <div class="inputrow">
+    <label>% Bovengronds:</label>
+    <input id="pp_bovengronds" type="number" step="1" value="50">
+  </div>
+  <div class="inputrow">
+    <button id="btn_parkeren" onclick="berekenParkeerruimte()">Toepassen in rekenblok</button>
+    <div id="parkeer_resultaat" style="margin-left: 10px;"></div>
+  </div>
+  <h3>Overzicht parkeerplaatsen</h3>
+<table>
+  <tbody>
+    <tr><td>Aantal parkeerplaatsen totaal</td><td id="pp_totaal">-</td></tr>
+    <tr><td>Bovengronds (% / aantal)</td><td id="pp_boven">-</td></tr>
+    <tr><td>Ondergronds (% / aantal)</td><td id="pp_onder">-</td></tr>
+  </tbody>
+</table>
+</div>
+<div id="openbareruimte" class="tabcontent">
+  <h3>Openbare Ruimte</h3>
+  <p>Verdeling van de onbebouwde ruimte (oppervlak projectgebied minus bebouwde oppervlak volgens GSI):</p>
+  <table>
+    <label>Stedelijkheidstype:</label>
+    <select id="stedelijkheidstype" onchange="setVerdelingStedelijkheid()">
+      <option value="auto">Afhankelijk van FSI/GSI</option>
+      <option value="centrum">Centrumstedelijk</option>
+      <option value="gemengd">Gemengd</option>
+      <option value="suburbaan">Suburbaan</option>
+    </select>
+	<thead>
+      <tr>
+        <th>Oppervlaktetype</th>
+        <th>Standaard (%)</th>
+        <th>Aanpassing (%)</th>
+        <th>Oppervlak (m²)</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr><td>Groen</td><td>30</td><td><input type="number" id="perc_groen" value="30" oninput="updateOpenbareRuimte()"></td><td id="m2_groen">-</td></tr>
+      <tr><td>Water</td><td>10</td><td><input type="number" id="perc_water" value="10" oninput="updateOpenbareRuimte()"></td><td id="m2_water">-</td></tr>
+      <tr><td>Tuinen</td><td>15</td><td><input type="number" id="perc_tuinen" value="15" oninput="updateOpenbareRuimte()"></td><td id="m2_tuinen">-</td></tr>
+      <tr><td>Rijbanen</td><td>15</td><td><input type="number" id="perc_rijbanen" value="15" oninput="updateOpenbareRuimte()"></td><td id="m2_rijbanen">-</td></tr>
+      <tr><td>Trottoirs</td><td>10</td><td><input type="number" id="perc_trottoirs" value="10" oninput="updateOpenbareRuimte()"></td><td id="m2_trottoirs">-</td></tr>
+      <tr><td>Parkeren (bovengronds)</td><td>10</td><td><input type="number" id="perc_parkeren" value="10" oninput="updateOpenbareRuimte()"></td><td id="m2_parkeren">-</td></tr>
+      <tr><td>Pleinen</td><td>10</td><td><input type="number" id="perc_pleinen" value="10" oninput="updateOpenbareRuimte()"></td><td id="m2_pleinen">-</td></tr>
+    </tbody>
+	<tfoot>
+     <tr><th colspan="3">Totaal</th><th id="m2_totaal_onbebouwd">-</th></tr>
+    </tfoot>
+  </table>
+  <p style="margin-top:10px;"><button onclick="updateOpenbareRuimte()">Herbereken verdeling</button></p>
+  <div id="warning_openbareruimte" style="color: red; font-weight: bold;"></div>
+  <canvas id="openbareRuimteChart" width="150" height="150" style="margin-top:20px;"></canvas>
+</div>
-        document.getElementById("totaal_perc").innerText = `${totalPerc.toFixed(1)}%`;
-        document.getElementById("totaal_gewbvo").innerText = `${gewogenBVO.toFixed(1)} m²`;
-        document.getElementById("totaal_won").innerText = formatGetal(sumWon);
-        document.getElementById("totaal_bvo").innerText = formatGetal(sumBVO);
-        let waarschuwing = '';
+<script src="/wiki/tools/dichtheidsrekenmachine/sm_rekenmachine_v1.js?v=1"></script>
-        if (Math.abs(totalPerc - 100) > 0.5) {
-            waarschuwing = `<p style="color:red;"><b>Let op:</b> het totaalpercentage is ${totalPerc.toFixed(1)}%, dat wijkt af van 100%.</p>`;
-        }
-        document.getElementById("output").innerHTML = `
-            ${waarschuwing}
-            <p><b>Gewogen BVO/ehd:</b> ${gewogenBVO.toFixed(1)} m²<br>
-            <b>Totaal aantal woningen:</b> ${formatGetal(sumWon)}</p>
-        `;
-    }
-    function init() {
-        renderWoningtypes();
-        updateLaadvermogen();
-    }
-    window.onload = init;
+</body>
-</script>
 </html>