handleiding_nieuw:sub_spacematrix [Sumsonite]

This is an old revision of the document!

<meta charset="UTF-8">
<title>Spacematrix Tool</title>
<style>
  body { font-family: sans-serif; margin: 20px; }
  .tabs { display: flex; border-bottom: 2px solid #ccc; margin-bottom: 10px; }
  .tab { padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; background: #f9f9f9; margin-right: 5px; border-radius: 5px 5px 0 0; }
  .tab.active { background: white; border-bottom: 2px solid white; font-weight: bold; }
  .tabcontent { display: none; border: 1px solid #ccc; padding: 20px; border-radius: 0 5px 5px 5px; background: white; }
  .tabcontent.active { display: block; }
  .inputrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .inputrow label { width: 220px; }
  .inputrow input { width: 80px; }
  table.rekenblok { border-collapse: collapse; margin-top: 20px; width: 100%; font-size: 0.9em; }
  table.rekenblok th, table.rekenblok td { border: 1px solid #ccc; padding: 4px 6px; text-align: right; }
  table.rekenblok th { background: #f0f0f0; }
  .scheiding td { border-top: 2px solid #666; background: #fafafa; }
  .resultblock { margin-left: 40px; min-width: 200px; text-align: right; font-size: 0.9em; }
  .kaartcontainer { position: relative; width: 320px; 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; }
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  function switchTab(tabId) {
    document.querySelectorAll(".tabcontent").forEach(el => el.classList.remove("active"));
    document.querySelectorAll(".tab").forEach(el => el.classList.remove("active"));
    document.getElementById(tabId).classList.add("active");
    document.querySelector(`.tab[onclick*='${tabId}']`).classList.add("active");
  }
</script>

</head> <body>

<h1>Spacematrix Rekenhulp</h1> <div class=“tabs”>

<div class="tab active" onclick="switchTab('spacematrix')">Spacematrix</div>
<div class="tab" onclick="switchTab('voorzieningen')">Voorzieningen</div>
<div class="tab" onclick="switchTab('parkeren')">Parkeren</div>
<div class="tab" onclick="switchTab('openbareruimte')">Openbare ruimte</div>

</div>

<h2>Spacematrix</h2>
<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 class="inputrow">
  <label for="opp">Oppervlak projectgebied (m²):</label>
  <input id="opp" type="number" value="10000" oninput="updateAll()">
  <div class="resultblock" id="lv1"></div>
</div>
<div class="inputrow">
  <label for="fsi">FSI:</label>
  <input id="fsi" type="number" step="0.01" value="1.6" oninput="updateAll()">
  <div class="resultblock" id="lv2"></div>
</div>
<div class="inputrow">
  <label for="gsi">GSI:</label>
  <input id="gsi" type="number" step="0.01" value="0.3" oninput="updateAll()">
  <div class="resultblock" id="lv3"></div>
</div>
<div class="inputrow">
  <label for="voorziening">% BVO voor voorzieningen:</label>
  <input id="voorziening" type="number" step="1" value="10" oninput="updateAll()">
  <div class="resultblock" id="lv4"></div>
</div>

<table class="rekenblok">
  <thead>
    <tr>
      <th>Type</th>
      <th>%</th>
      <th>m²/won</th>
      <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>

<h3>Resultaat</h3>
<div id="output"></div>

</div>