96 lines
3.5 KiB
HTML
96 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Phikipathia</title>
|
|
<link id="favicon" rel="icon" href="./images/wikipedia_edit.png">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<img src="images/wikipedia_edit.png" alt="The Wikipedia Logo but rotated" id="logo">
|
|
<div class="header-content">
|
|
<h1>Phikipathia</h1>
|
|
<p><b>Phi</b>losophy Wi<b>ki</b>pedia <b>Path</b> <i>(ia)</i> visualisatie</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Controls Panel (Top Sticky Box) -->
|
|
<div class="box">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="taal">Taal: </label>
|
|
<select id="taal">
|
|
<option value="en" selected>en (English)</option>
|
|
<option value="nl">nl (Nederlands)</option>
|
|
<option value="fr">fr (Français)</option>
|
|
<option value="de">de (Deutsch)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="start">Startpagina: </label>
|
|
<input type="text" id="start" placeholder="Special:Random" autocomplete="off" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="einde">Eindpunt: </label>
|
|
<input type="text" id="einde" placeholder="Philosophy" autocomplete="off" />
|
|
</div>
|
|
<button type="button" id="toevoegKnop">voeg toe</button>
|
|
</div>
|
|
|
|
<div id="waarschuwing" hidden>
|
|
<b>Waarschuwing:</b> De huidige boom zal overschreven worden bij een nieuwe toevoeging.
|
|
</div>
|
|
|
|
<div id="errorBanner" class="error-banner" hidden role="alert" aria-live="polite">
|
|
<span id="errorMessage" class="error-message"></span>
|
|
<button type="button" id="errorDismiss" class="error-dismiss" aria-label="Sluiten">×</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tree Visualization -->
|
|
<div id="visualisatie" aria-live="polite">
|
|
</div>
|
|
|
|
<!-- Full-Width Statistics Box at Bottom -->
|
|
<div id="statistieken" class="box stats-box" hidden>
|
|
<div class="stats-row">
|
|
<div class="stat-item">
|
|
<span class="stat-label">Status:</span>
|
|
<span id="statStatusText" class="stat-val">Bereikt</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Stappen:</span>
|
|
<span id="statHops" class="stat-val">0</span>
|
|
</div>
|
|
<div class="stat-item" id="statReroutesRow" hidden>
|
|
<span class="stat-label">Omleidingen:</span>
|
|
<span id="statReroutes" class="stat-val">0</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Paden verkend:</span>
|
|
<span id="statTotalPaths" class="stat-val">0</span>
|
|
</div>
|
|
<button type="button" id="wisKnop" class="wiki-btn-link">Boom wissen</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<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" target="_blank" rel="noopener">filosofie</a> uitkomt. Lees er
|
|
<a href="https://en.wikipedia.org/wiki/Wikipedia:Getting_to_Philosophy" target="_blank" rel="noopener">hier</a> meer over.
|
|
</p>
|
|
<p class="footer-meta">
|
|
Code bijgewerkt in 2026. Originele baseline:
|
|
<a href="https://git.depeuter.dev/tdpeuter/2022ST-project-Phikipathia/src/commit/5ed9fdf2c1eb71068a08256fd4bc46f47b7f1889" target="_blank" rel="noopener">bekijk originele code (commit 5ed9fdf)</a>.
|
|
</p>
|
|
<small>© 2022 Tibo De Peuter</small>
|
|
</footer>
|
|
|
|
<script src="index.js"></script>
|
|
</body>
|
|
</html>
|