1 files changed, 51 insertions, 4 deletions

diff --git a/web/index.html b/web/index.html
index 877da14..42a61ff 100644
--- a/web/index.html
+++ b/web/index.html
@@ -14,11 +14,57 @@
 
     <form name="gpx-upload-form" class="box">
       <div>
-        <label for="gpx-file">Upload een GPX-bestand:</label>
-        <input type="file" id="gpx-file-input" name="gpx-file" accept="application/gpx+xml,.gpx" autofocus />
+        <label for="gpx-file">GPX-bestand:</label>
+        <input type="file" id="gpx-file-input" name="gpx-file" accept="application/gpx+xml,.gpx" required autofocus />
       </div>
+      <fieldset>
+        <legend>Controleer werkzaamheden gepland in periode</legend>
+        <table class="borderless">
+          <tr>
+            <td>
+              <label for="check-period-begin-preset">Vanaf (incl.):</label>
+            </td>
+            <td>
+              <select name="check-period-begin-preset" id="check-period-begin-preset-select">
+                <option value="-1m">1 maand geleden</option>
+                <option value="-2w">2 weken geleden</option>
+                <option value="-1w" selected>1 week geleden</option>
+                <option value="0">nu</option>
+                <option value="+1w">over 1 week</option>
+                <option value="+2w">over 2 weken</option>
+                <option value="+1m">over 1 maand</option>
+                <option value="custom">een ander moment</option>
+              </select>
+            </td>
+            <td>
+              <input type="datetime-local" id="check-period-begin-input" name="check-period-begin" class="hidden" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="check-period-end-preset">Tot (excl.):</label>
+            </td>
+            <td>
+              <select name="check-period-end-preset" id="check-period-end-preset-select">
+                <option value="">aanpassen naar…</option>
+                <option value="-1m">1 maand geleden</option>
+                <option value="+2w">2 weken geleden</option>
+                <option value="-1w">1 week geleden</option>
+                <option value="0">nu</option>
+                <option value="+1w" selected>over 1 week</option>
+                <option value="+2w">over 2 weken</option>
+                <option value="+1m">over 1 maand</option>
+                <option value="custom">een ander moment</option>
+              </select>
+            </td>
+            <td>
+              <input type="datetime-local" id="check-period-end-input" name="check-period-end" class="hidden" />
+            </td>
+          </tr>
+        </table>
+      </fieldset>
       <div>
-        <input type="submit" value="Opsturen" />
+        <input type="submit" value="Aanvraag versturen" />
       </div>
     </form>
 
@@ -38,7 +84,7 @@
     <dialog class="box">
       <h3 id="dialog-title"></h3>
       <p id="dialog-message"></p>
-      <details>
+      <details id="dialog-more-info-container">
         <summary>Meer informatie</summary>
         <small id="dialog-more-info"></small>
       </details>
@@ -46,6 +92,7 @@
     </dialog>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/global.min.js"></script>
     <script src="index.js"></script>
   </body>
 </html>