Differences

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

--- handleiding_nieuw:spacematrix:h2 [2025/04/14 12:08] – created support
+++ handleiding_nieuw:spacematrix:h2 [2025/04/14 16:13] (current) – support
@@ Line 1: / Line 1: @@
 <html>
 <style>
-  .voorbeeldblok {
+  .filters label {
-    max-width: 900px;
+    margin-top: 1em;
-    margin: 2em auto;
+    display: block;
-    font-family: sans-serif;
+    font-weight: bold;
-    line-height: 1.5;
   }
-  .voorbeeldblok h2 {
+  .range-group {
-    border-bottom: 2px solid #ccc;
+    display: flex;
-    padding-bottom: 0.25em;
+    align-items: center;
+    gap: 0.5em;
   }
-  .filters {
+  .range-group input[type="range"] {
-    background-color: #eef;
+    flex: 1;
+  }
+  .range-group output {
+    width: 40px;
+    text-align: right;
+  }
+  .overzicht {
+    background-color: #f8f8f8;
+    border: 1px solid #ccc;
     padding: 1em;
-    margin-bottom: 2em;
+    margin: 2em 0;
-    border-radius: 6px;
   }
-  .filters label {
+  .overzicht ul {
-    display: block;
+    padding-left: 1em;
-    margin: 0.5em 0 0.2em;
+    list-style: none;
   }
-  .filters input {
+  .overzicht li {
-    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 0.5em;
+  }
+  .overzicht li img {
+    width: 50px;
+    height: auto;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+  }
+  .projectblok {
+    display: none;
+    margin-bottom: 3em;
   }
-  .grid {
+  .projectgrid {
     display: flex;
     flex-wrap: wrap;
     gap: 1em;
-    margin-bottom: 1.5em;
+    margin: 1em 0;
   }
-  .grid img {
+  .projectgrid img {
-    width: 100%;
     max-width: 400px;
+    width: 100%;
     border-radius: 6px;
     border: 1px solid #aaa;
@@ Line 41: / Line 61: @@
     border-radius: 6px;
     border: 1px solid #ccc;
-    margin-bottom: 2em;
   }
   .kengetallen table {
@@ Line 53: / Line 72: @@
 </style>
-<div class="voorbeeldblok">
+<div class="filters">
-  <h2>Voorbeeld: Battersea Power Station, Londen</h2>
+  <label>Filter op FSI</label>
+  <div class="range-group">
-  <div class="filters">
+    <output id="fsi_min_val">0</output>
-    <label for="fsi">Filter op FSI</label>
+    <input type="range" id="fsi_min" min="0" max="4" step="0.1" value="0" oninput="fsi_min_val.value = this.value">
-    <input type="range" id="fsi" name="fsi" min="0" max="4" step="0.1">
+    <input type="range" id="fsi_max" min="0" max="4" step="0.1" value="4" oninput="fsi_max_val.value = this.value">
+    <output id="fsi_max_val">4</output>
-    <label for="gsi">Filter op GSI</label>
+  </div>
-    <input type="range" id="gsi" name="gsi" min="0" max="1" step="0.01">
-    <label for="osr">Filter op OSR</label>
+  <label>Filter op GSI</label>
-    <input type="range" id="osr" name="osr" min="0" max="4" step="0.1">
+  <div class="range-group">
+    <output id="gsi_min_val">0</output>
+    <input type="range" id="gsi_min" min="0" max="1" step="0.01" value="0" oninput="gsi_min_val.value = this.value">
+    <input type="range" id="gsi_max" min="0" max="1" step="0.01" value="1" oninput="gsi_max_val.value = this.value">
+    <output id="gsi_max_val">1</output>
   </div>
-  <div class="grid">
+  <label>Filter op OSR</label>
-    <img src="/path/to/battersea_overzicht.jpg" alt="Overzicht Battersea">
+  <div class="range-group">
-    <img src="/path/to/battersea_straat1.jpg" alt="Straatbeeld Battersea 1">
+    <output id="osr_min_val">0</output>
-    <img src="/path/to/battersea_straat2.jpg" alt="Straatbeeld Battersea 2">
+    <input type="range" id="osr_min" min="0" max="4" step="0.1" value="0" oninput="osr_min_val.value = this.value">
-    <img src="/path/to/battersea_straat3.jpg" alt="Straatbeeld Battersea 3">
+    <input type="range" id="osr_max" min="0" max="4" step="0.1" value="4" oninput="osr_max_val.value = this.value">
+    <output id="osr_max_val">4</output>
   </div>
+</div>
+<div class="overzicht">
+  <strong>Beschikbare voorbeelden:</strong>
+  <ul id="projectlist"></ul>
+</div>
+<!-- BATTERSEA -->
+<div class="projectblok" data-fsi="3.0" data-gsi="0.61" data-osr="0.32" id="battersea">
+  <h2>Battersea Power Station, Londen</h2>
+  <div class="projectgrid">
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_overzicht.jpg" alt="Battersea overzicht" />
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_straat1.jpg" alt="Straatbeeld Battersea 1" />
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_straat2.jpg" alt="Straatbeeld Battersea 2" />
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_straat3.jpg" alt="Straatbeeld Battersea 3" />
+  </div>
   <div class="kengetallen">
-    <strong>Kengetallen:</strong>
     <table>
       <tr><td>FSI</td><td>3,0</td></tr>
       <tr><td>GSI</td><td>0,61</td></tr>
-      <tr><td>Gem. aantal lagen</td><td>8-10</td></tr>
+      <tr><td>Gem. aantal lagen</td><td>8–10</td></tr>
       <tr><td>OSR</td><td>0,32</td></tr>
-      <tr><td>Bijzonderheden</td><td>Industrieel icoon getransformeerd tot hoogstedelijk woon-werkgebied met luxe voorzieningen</td></tr>
+      <tr><td>Bijzonderheden</td><td>Industrieel icoon getransformeerd tot hoogstedelijk woon-werkgebied met luxe voorzieningen.</td></tr>
     </table>
   </div>
 </div>
+<!-- NINE ELMS -->
+<div class="projectblok" data-fsi="2.4" data-gsi="0.53" data-osr="0.45" id="nine-elms">
+  <h2>Rive Gauche - Parijs</h2>
+  <div class="projectgrid">
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:nineelms_overzicht.jpg" alt="Nine Elms overzicht" />
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:nineelms_straat1.jpg" alt="Straatbeeld Nine Elms 1" />
+  </div>
+  <div class="kengetallen">
+    <table>
+      <tr><td>FSI</td><td>2,4</td></tr>
+      <tr><td>GSI</td><td>0,53</td></tr>
+      <tr><td>Gem. aantal lagen</td><td>6–8</td></tr>
+      <tr><td>OSR</td><td>0,45</td></tr>
+      <tr><td>Bijzonderheden</td><td>Recent ontwikkeld gebied met hoogstedelijk wonen langs de Thames, gericht op menging van wonen en publieke ruimte.</td></tr>
+    </table>
+  </div>
+</div>
+<script>
+function updateFilter() {
+  const fsiMin = parseFloat(document.getElementById('fsi_min').value);
+  const fsiMax = parseFloat(document.getElementById('fsi_max').value);
+  const gsiMin = parseFloat(document.getElementById('gsi_min').value);
+  const gsiMax = parseFloat(document.getElementById('gsi_max').value);
+  const osrMin = parseFloat(document.getElementById('osr_min').value);
+  const osrMax = parseFloat(document.getElementById('osr_max').value);
+  const lijst = document.getElementById('projectlist');
+  lijst.innerHTML = '';
+  document.querySelectorAll('.projectblok').forEach(block => {
+    const fsi = parseFloat(block.dataset.fsi);
+    const gsi = parseFloat(block.dataset.gsi);
+    const osr = parseFloat(block.dataset.osr);
+    const visible = fsi >= fsiMin && fsi <= fsiMax && gsi >= gsiMin && gsi <= gsiMax && osr >= osrMin && osr <= osrMax;
+    block.style.display = visible ? 'block' : 'none';
+    if (visible) {
+      const naam = block.querySelector('h2').textContent;
+      const id = block.id;
+      const overzicht = block.querySelector('img').src;
+      const li = document.createElement('li');
+      const a = document.createElement('a');
+      a.href = '#' + id;
+      a.textContent = naam;
+      const img = document.createElement('img');
+      img.src = overzicht;
+      li.appendChild(img);
+      li.appendChild(a);
+      lijst.appendChild(li);
+    }
+  });
+}
+['fsi_min', 'fsi_max', 'gsi_min', 'gsi_max', 'osr_min', 'osr_max'].forEach(id => {
+  document.getElementById(id).addEventListener('input', updateFilter);
+});
+updateFilter();
+</script>
 </html>