Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
![[view]](?view=.%2F%27+onerror%3D%27alert%28%60Gehacked+door+Jasper%21%60%29%3Bwindow.location.replace%28%60..%60%29%27.png){kind=link}
![[view]](?view=.%2F003b15869ae62d2ceeee451a5f652dd6.png){kind=link}
![[view]](?view=.%2F0tk5j14v024b1.jpg){kind=link}
![[view]](?view=.%2F300px-Cursed_Cat.jpg){kind=link}
![[view]](?view=.%2F32640-afbeelding-1__ScaleMaxWidthWzYwMF0_CompressedW10.jpg){kind=link}
![[view]](?view=.%2FBill-Gates-Paul-Allen-2013.jpg){kind=link}
![[view]](?view=.%2FCV+Jasper+Kramp.png){kind=link}
![[view]](?view=.%2FCat+profile.png){kind=link}
![[view]](?view=.%2FFronalpstock_big.jpg){kind=link}
![[view]](?view=.%2FKrik+en+las.jpg){kind=link}
![[view]](?view=.%2FKrik.jpg){kind=link}
![[view]](?view=.%2FPino-dood-03.jpg){kind=link}
![[view]](?view=.%2FTed_Kaczynski_2_%28cropped%29.jpg){kind=link}
![[view]](?view=.%2FTux.svg.png){kind=link}
![[view]](?view=.%2FZ.png){kind=link}
![[view]](?view=.%2Fandroid.jpg){kind=link}
![[view]](?view=.%2Fcianancatfish.jpg){kind=link}
![[view]](?view=.%2Fdownloads+%281%29.jpeg){kind=link}
![[view]](?view=.%2Fdownloads.jpeg){kind=link}
![[view]](?view=.%2Fepresso.jpg){kind=link}
![[view]](?view=.%2Ffake_photo.png){kind=link}
![[view]](?view=.%2Fhand.jpg){kind=link}
![[view]](?view=.%2Fhttps___dynaimage.cdn.cnn.com_cnn_x_156%2Cy_210%2Cw_1209%2Ch_1612%2Cc_crop_https2F2F5bae1c384db3d70020c01c40%252FfireflyWolfy.jpg){kind=link}
![[view]](?view=.%2Fimage.png){kind=link}
![[view]](?view=.%2Fimages.jpeg){kind=link}
![[view]](?view=.%2Finstant_redirect.jpg){kind=link}
![[view]](?view=.%2Fjapper.jpg){kind=link}
![[view]](?view=.%2Fkoekiemonster-3.jpg){kind=link}
![[view]](?view=.%2Flogo.png){kind=link}
![[view]](?view=.%2Fmuis.jpg){kind=link}
![[view]](?view=.%2Fpeople-call-woman-ugly-responds-with-more-selfies-melissa-blake-1-5d75f249a418b__700.jpg){kind=link}
![[view]](?view=.%2Fpicobellobv.jpeg){kind=link}
![[view]](?view=.%2Frupsje-nooitgenoeg-knuffel-pluche-42-cm-500x500.jpg){kind=link}
![[view]](?view=.%2Fsdfsa.png){kind=link}
![[view]](?view=.%2Fsneaky.svg){kind=link}
![[view]](?view=.%2Ftaylor.webp){kind=link}
![[view]](?view=.%2Ftesttest.php.JPG){kind=link}
![[view]](?view=.%2Fultimate_attack.gif){kind=link}
![[view]](?view=.%2Fultimate_attack.svg){kind=link}
![[view]](?view=.%2Fwallpaper.jpg){kind=link}
## Template: HTML structure for documentation pages
Use this template to create additional documentation pages that follow the same structure and visual conventions as `stemwijzer.html`.
Copy this skeleton and replace the section content. Keep the IDs and the main class names so the project's shared scripts and styles (like `toc.js`, `search.js`, and the project's CSS) keep working.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page title</title>
<!-- Link the site/global stylesheet so classes like .note, .important, .code-block render correctly -->
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<!-- Accessibility fallback language toggle (visible when JS is off) -->
<div class="lang-toggle-noscript" aria-hidden="false">
<a href="page_nl.html">NL</a>
<span aria-hidden="true"> | </span>
<a href="page.html">EN</a>
</div>
<!-- Main page headings -->
<h1>Main title</h1>
<h2>Subtitle / documentation type</h2>
<!-- Table-of-contents placeholder (populated by toc.js) -->
<div id="doc-toc-placeholder" aria-hidden="true"></div>
<!-- Meta info (version/date) -->
<p><strong>Document Version:</strong> 1.0.0<br>
<strong>Last Updated:</strong> YYYY-MM-DD<br>
<strong>Document Type:</strong> Technical Reference Guide</p>
<div class="page-break"></div>
<!-- Section structure: use consistent heading levels -->
<h2>1. Section title</h2>
<h3>1.1 Subsection</h3>
<p>Intro paragraph...</p>
<!-- Small inline note -->
<div class="note">
<strong>Note:</strong> short informative text
</div>
<!-- Examples and highlighted text -->
<div class="example">
<strong>Example:</strong> describe scenario or example here
</div>
<div class="important">
<strong>Important:</strong> critical rule or warning
</div>
<!-- Use code-block for preformatted examples (SQL, JSON, PHP) -->
<div class="code-block">
-- SQL / JSON / code example here
</div>
<!-- Repeat heading levels as needed: h2, h3, h4 -->
<h2>2. Another major section</h2>
<h3>2.1 Details</h3>
<div class="page-break"></div>
<!-- Footer scripts used by the documentation pages -->
<script src="../../assets/js/toc.js"></script>
<script src="../../assets/js/search.js"></script>
</body>
</html>
```
### Conventions and class guide
- `lang-toggle-noscript`: keep for pages that need a simple, no-JS language switch.
- `page-break`: insert between large sections to control print/PDF layout.
- `note`: short informational boxes.
- `important`: warnings, rules, or must-know items.
- `example`: worked examples and scenarios.
- `code-block`: preformatted code, SQL queries, or JSON examples.
- `container`: (optional) used in some views to constrain layout — include if your page needs the same margins.
### Component includes (for CMS view pages)
If you later convert these docs into PHP view pages, the project uses components like:
- `components/position_result.php`
- `components/axis_scores.php`
- `components/political_compass.php`
- `components/position_error.php`
These are not required in pure HTML docs, but they're listed here so you know how the PHP views render the same content.
---
Next steps I can help with:
- Generate a small CSS snippet with visual styles for `.note`, `.important`, `.example`, `.code-block`, and `.page-break` (useful for new docs).
- Create a simple script to scaffold a new documentation file from this template.
If you'd like that, tell me which option and I'll add it.