From 631378579df49611618fd843b288d8e5e535abe2 Mon Sep 17 00:00:00 2001
From: Tibo De Peuter <tibo.depeuter@ugent.be>
Date: Thu, 19 May 2022 21:32:32 +0200
Subject: [PATCH] Waarschijnlijk laatste push ongeveer

---
 cgi-bin/scraper.py |  3 +++
 index.html         | 15 ++++++++++-----
 index.js           |  3 ---
 style.css          | 19 ++++++++++++++++---
 4 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/cgi-bin/scraper.py b/cgi-bin/scraper.py
index 03026be..3ad7418 100644
--- a/cgi-bin/scraper.py
+++ b/cgi-bin/scraper.py
@@ -11,6 +11,9 @@ import requests
 
 def converteer(tekst, gebruiker=True):
     """
+    Ik blijf bewust case sensitive werken omdat dit héél soms wel nog belangrijk is om een verschl
+    te maken tussen twee linkjes.
+
     >>> converteer('Northwestern Europe')
     'Northwestern Europe'
     >>> converteer('Northwestern_Europe', False)
diff --git a/index.html b/index.html
index c72e9c5..f449a56 100644
--- a/index.html
+++ b/index.html
@@ -10,19 +10,24 @@
 <div class="header">
   <img src="images/wikipedia_edit.png" alt="The Wikipedia Logo but rotated" id="logo">
   <h1>Phikipathia</h1>
-  <p>From Philosophy Wikipedia Path visualiser</p>
+  <p><b>Phi</b>losophy Wi<b>ki</b>pedia <b>Path</b> <i>(ia)</i> visualisatie</p>
 </div>
-<div id="bar">
-  <label for="taal">Taal: </label><input type="text" id="taal" placeholder="en"/>
+<div class="box">
+  <label for="taal">Taal: </label><input type="text" id="taal" placeholder="en" oninput="inputWaarschuwing()"/>
   <label for="start">Startpagina: </label><input type="text" id="start" placeholder="Special:Random"/>
-  <label for="einde">Eindpunt: </label><input type="text" id="einde" placeholder="Philosophy"/>
-  <button type="button" id="toevoegKnop">voeg toe</button>
+  <label for="einde">Eindpunt: </label><input type="text" id="einde" placeholder="Philosophy" oninput="inputWaarschuwing()"/>
+  <button type="button" id="toevoegKnop" onclick="zoek()">voeg toe</button>
   <label id="waarschuwing" hidden="hidden">
     <b>Waarschuwing:</b> De huidige boom zal overschreven worden bij een nieuwe toevoeging.
   </label>
 </div>
 <div id="visualisatie">
 </div>
+<footer class="box">
+  <p>Deze pagina visualiseert een fenomeen waarbij je door steeds op de eerste link van een Wikipedia-pagina te klikken, bij <a href="https://en.wikipedia.org/wiki/Philosophy">filosofie</a> uitkomt. Lees er <a href="https://en.wikipedia.org/wiki/Wikipedia:Getting_to_Philosophy">hier</a> meer over.</p>
+  <p>© 2022 Tibo De Peuter</p>
+</footer>
+
 <script src="index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
index 0c82bae..f7e32ba 100644
--- a/index.js
+++ b/index.js
@@ -16,9 +16,6 @@ let huidigeTaal;
 let huidigeDoel;
 
 refreshTree();
-toevoegKnop.addEventListener('click', () => zoek());
-taal.addEventListener('input', () => inputWaarschuwing())
-einde.addEventListener('input', () => inputWaarschuwing());
 
 /**
  * Zoek een pad met python backend en voeg deze toe in de lijst.
diff --git a/style.css b/style.css
index 9c10515..e1c1039 100644
--- a/style.css
+++ b/style.css
@@ -19,8 +19,8 @@ li ul {
 }
 
 ul {
-    /* alternatieven "↪" */
-    list-style-type: symbols("⬉");
+    /* alternatieven "↪" "⬉" */
+    list-style-type: symbols("⬑");
 }
 
 ul#wortel {
@@ -41,7 +41,7 @@ ul#wortel {
     font-family: sans-serif;
 }
 
-#bar {
+.box {
     font-family: sans-serif;
     font-size: 95%;
 
@@ -54,6 +54,15 @@ ul#wortel {
     top: 7px;
 }
 
+.box p {
+    padding: 0;
+    margin: 0;
+}
+
+#waarschuwing b {
+    color: #ba0000;
+}
+
 #visualisatie {
     margin: 0.5em 0;
     font-size: calc(1em * 0.875);
@@ -85,3 +94,7 @@ button:after {
     margin-left: 0.25em;
     content: "]";
 }
+
+footer {
+    text-align: center;
+}