Differences

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

--- handleiding_nieuw:spacematrix:g1 [2025/04/14 11:58] – created support
+++ handleiding_nieuw:spacematrix:g1 [2025/04/14 13:08] (current) – support
@@ Line 11: / Line 11: @@
     padding-bottom: 0.25em;
   }
-  .voorbeeldblok .grid {
+  .filters {
+    background-color: #eef;
+    padding: 1em;
+    margin-bottom: 2em;
+    border-radius: 6px;
+  }
+  .filters label {
+    display: block;
+    margin: 0.5em 0 0.2em;
+  }
+  .filters input {
+    width: 100%;
+  }
+  .grid {
     display: flex;
     flex-wrap: wrap;
@@ Line 17: / Line 30: @@
     margin-bottom: 1.5em;
   }
-  .voorbeeldblok .grid img {
+  .grid img {
     width: 100%;
     max-width: 400px;
@@ Line 42: / Line 55: @@
 <div class="voorbeeldblok">
   <h2>Voorbeeld: Shoreditch, Londen</h2>
+  <div class="filters">
+    <label for="fsi">Filter op FSI</label>
+    <input type="range" id="fsi" name="fsi" min="0" max="4" step="0.1">
+    <label for="gsi">Filter op GSI</label>
+    <input type="range" id="gsi" name="gsi" min="0" max="1" step="0.01">
+    <label for="osr">Filter op OSR</label>
+    <input type="range" id="osr" name="osr" min="0" max="4" step="0.1">
+  </div>
   <div class="grid">
-    <img src="/path/to/shoreditch_img1.jpg" alt="Shoreditch overzicht" />
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:g1:shoreditch_overzicht.jpg" alt="Shoreditch overzicht" />
-    <img src="/path/to/shoreditch_img2.jpg" alt="Straatbeeld Shoreditch" />
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:g1:shoreditch_straat1.jpg" alt="Straatbeeld Shoreditch 1" />
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:g1:shoreditch_straat2.jpg" alt="Straatbeeld Shoreditch 2" />
+    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:g1:shoreditch_straat3.jpg" alt="Straatbeeld Shoreditch 3" />
   </div>
   <div class="kengetallen">
     <strong>Kengetallen:</strong>