handleiding_nieuw:spacematrix:h2 [Sumsonite]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
<html>
<style>
  .filters label {
    margin-top: 1em;
    display: block;
    font-weight: bold;
  }
  .range-group {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }
  .range-group input[type="range"] {
    flex: 1;
  }
  .range-group output {
    width: 40px;
    text-align: right;
  }
  .overzicht {
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    padding: 1em;
    margin: 2em 0;
  }
  .overzicht ul {
    padding-left: 1em;
    list-style: none;
  }
  .overzicht li {
    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;
  }
  .projectgrid {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin: 1em 0;
  }
  .projectgrid img {
    max-width: 400px;
    width: 100%;
    border-radius: 6px;
    border: 1px solid #aaa;
  }
  .kengetallen {
    background-color: #f2f2f2;
    padding: 1em;
    border-radius: 6px;
    border: 1px solid #ccc;
  }
  .kengetallen table {
    width: 100%;
    border-collapse: collapse;
  }
  .kengetallen td {
    padding: 0.3em 0.6em;
    border-bottom: 1px solid #ddd;
  }
</style>

<div class="filters">
  <label>Filter op FSI</label>
  <div class="range-group">
    <output id="fsi_min_val">0</output>
    <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_max" min="0" max="4" step="0.1" value="4" oninput="fsi_max_val.value = this.value">
    <output id="fsi_max_val">4</output>
  </div>

  <label>Filter op GSI</label>
  <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>

  <label>Filter op OSR</label>
  <div class="range-group">
    <output id="osr_min_val">0</output>
    <input type="range" id="osr_min" min="0" max="4" step="0.1" value="0" oninput="osr_min_val.value = this.value">
    <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">
    <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>OSR</td><td>0,32</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>