From 7d9b21409de6986fc7897d5d6963f09bb97fdc1c Mon Sep 17 00:00:00 2001
From: Ben de Roo <ben@de-roo.org>
Date: Tue, 30 Dec 2025 11:26:31 +0100
Subject: [PATCH] Update index.php

---
 index.php | 307 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 183 insertions(+), 124 deletions(-)
diff --git a/index.php b/index.php
index 5280142..a7fb799 100644
--- a/index.php
+++ b/index.php
@@ -1,145 +1,204 @@
 <!DOCTYPE html>
 <html lang="nl">
 <head>
-    <meta charset="UTF-8">
-    <meta name="robots" content="noindex">
-    <title>betere homesite</title>
-    <style>
-        html, body {
-            margin: 0;
-            padding: 0;
-            height: 100%;
-            overflow: auto;
-            font-family: monospace, monospace;
-            color: #a9b594b3;
-            background: linear-gradient(120deg, #245da4, #291451, #1e0f27, #1c0917);
-            background-size: 400% 400%;
-            animation: bgFade 10s ease infinite; /* sneller */
-            background-attachment: fixed;
-            transition: background 0.3s, color 0.3s;
-        }
+<meta charset="UTF-8">
+<meta name="robots" content="noindex">
+<title>betere homesite</title>
+<style>
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: auto;
+    font-family: monospace, monospace;
+    color: #a9b594b3;
+    background: linear-gradient(120deg, #245da4, #291451, #1e0f27, #1c0917);
+    background-size: 400% 400%;
+    animation: bgFade 10s ease infinite;
+    transition: background 0.3s, color 0.3s;
+}
 
-        @keyframes bgFade {
-            0%   { background-position: 0% 50%; }
-            50%  { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-        }
+@keyframes bgFade {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
 
-        h1 {
-            text-align: center;
-            margin: 40px 0;
-            color: #ffffff;
-        }
+h1 {
+    text-align: center;
+    margin: 40px 0;
+    color: #ffffff;
+}
 
-        #themeToggle {
-            position: fixed;
-            top: 10px;
-            left: 50%;
-            transform: translateX(-50%);
-            padding: 10px 20px;
-            border: none;
-            border-radius: 5px;
-            background: rgba(0,255,255,0.2);
-            color: #00ffff;
-            cursor: pointer;
-            font-size: 16px;
-            backdrop-filter: blur(5px);
-            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
-            transition: all 0.3s;
-        }
+#themeToggle {
+    position: fixed;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    background: rgba(0,255,255,0.2);
+    color: #00ffff;
+    cursor: pointer;
+    font-size: 16px;
+    backdrop-filter: blur(5px);
+    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+    transition: all 0.3s;
+}
 
-        #themeToggle:hover {
-            background: rgba(0,255,255,0.4);
-            color: #000;
-        }
+#themeToggle:hover {
+    background: rgba(0,255,255,0.4);
+    color: #000;
+}
 
-        ul {
-            list-style: none;
-            padding: 0;
-            margin: 0 auto;
-            max-width: 500px;
-        }
+ul {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    max-width: 500px;
+    position: relative;
+    z-index: 2;
+}
 
-        li {
-            margin: 10px 0;
-            transition: all 0.2s ease; /* sneller */
-        }
+li {
+    margin: 10px 0;
+    transition: all 0.2s ease;
+}
 
-        li:hover {
-            transform: scale(1.05) translateY(-5px);
-            background: rgba(0, 255, 255, 0.4);
-        }
+li:hover {
+    transform: scale(1.05) translateY(-5px);
+    background: rgba(0, 255, 255, 0.4);
+}
 
-        a {
-            display: block;
-            padding: 15px 20px;
-            border-radius: 10px;
-            background: rgba(0, 255, 255, 0.2);
-            color: #00ffff;
-            font-size: 18px;
-            text-decoration: none;
-            transition: all 0.2s ease; /* sneller */
-            backdrop-filter: blur(5px);
-            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
-        }
+a {
+    display: block;
+    padding: 15px 20px;
+    border-radius: 10px;
+    background: rgba(0, 255, 255, 0.2);
+    color: #00ffff;
+    font-size: 18px;
+    text-decoration: none;
+    transition: all 0.2s ease;
+    backdrop-filter: blur(5px);
+    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+}
 
-        a:hover {
-            color: #000000;
-        }
+a:hover {
+    color: #000000;
+}
 
-        /* Hackertheme */
-        body.hacker {
-            background: #000000;
-            color: #00ff00;
-        }
+/* Hackertheme */
+body.hacker {
+    background: black;
+    color: #00ff00;
+    overflow: hidden;
+}
 
-        body.hacker a {
-            background: rgba(0, 255, 0, 0.1);
-            color: #00ff00;
-            box-shadow: 0 4px 10px rgba(0,255,0,0.3);
-        }
+body.hacker a {
+    background: rgba(0, 255, 0, 0.1);
+    color: #00ff00;
+    box-shadow: 0 4px 10px rgba(0,255,0,0.3);
+}
 
-        body.hacker li:hover {
-            background: rgba(0,255,0,0.3);
-            transform: scale(1.05) translateY(-5px);
-        }
+body.hacker li:hover {
+    background: rgba(0,255,0,0.3);
+    transform: scale(1.05) translateY(-5px);
+}
 
-        ::-webkit-scrollbar {
-            width: 0px;
-            background: transparent;
-        }
-    </style>
+/* Matrix rain canvas */
+#matrix {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+</style>
 </head>
 <body>
-    <button id="themeToggle">Hackertheme aan/uit</button>
-    <h1>voor alle dieren in de dierentuin</h1>
-    <ul>
-        <li><a href="https://mail.de-roo.org">Webmail</a></li>
-        <li><a href="https://cloud.de-roo.org/nextcloud">Nextcloud</a></li>
-        <li><a href="https://agenda.de-roo.org">Agenda</a></li>
-        <li><a href="https://remote.de-roo.org">Remote logon</a></li>
-        <li><a href="https://lnk.de-roo.org/admin">URL shortening</a></li>
-        <li><a href="https://dms.de-roo.org">Document Management System</a></li>
-        <li><a href="https://blog.de-roo.org">Blog</a></li>
-        <li><a href="https://cloud.de-roo.org/nextcloud/apps/phonetrack/publicSessionWatch/c5d522c3a4376e03a0ec0ac9931511de?refresh=15&autozoom=1&nbpoints=1">Tracker</a></li>
-        <li><a href="https://media.de-roo.org">Media speler</a></li>
-        <li><a href="https://code.de-roo.org">VS Code online</a></li>
-        <li><a href="https://radicale.de-roo.org">Radicale CalDav/CardDav</a></li>
-        <li><a href="https://yt.de-roo.org">Internetfilmpjes</a></li>
-        <li><a href="https://dl.de-roo.org">Filmpjes downloaden</a></li>
-        <li><a href="https://transfer.de-roo.org">Filetransfer</a></li>
-        <li><a href="https://bin.de-roo.org">Text paste-bin</a></li>
-        <li><a href="familieberichten.html">Familieberichten</a></li>
-        <li><a href="http://spacedesk.de-roo.org">Desktop uitbreiding</a></li>
-        <li><a href="rekenmachine/index.html" target="_blank">rekenmachine</a></li>
-    </ul>
+<canvas id="matrix"></canvas>
+<button id="themeToggle">Hackertheme aan/uit</button>
+<h1>voor alle dieren in de dierentuin</h1>
+<ul>
+    <li><a href="https://mail.de-roo.org">Webmail</a></li>
+    <li><a href="https://cloud.de-roo.org/nextcloud">Nextcloud</a></li>
+    <li><a href="https://agenda.de-roo.org">Agenda</a></li>
+    <li><a href="https://remote.de-roo.org">Remote logon</a></li>
+    <li><a href="https://lnk.de-roo.org/admin">URL shortening</a></li>
+    <li><a href="https://dms.de-roo.org">Document Management System</a></li>
+    <li><a href="https://blog.de-roo.org">Blog</a></li>
+    <li><a href="https://cloud.de-roo.org/nextcloud/apps/phonetrack/publicSessionWatch/c5d522c3a4376e03a0ec0ac9931511de?refresh=15&autozoom=1&nbpoints=1">Tracker</a></li>
+    <li><a href="https://media.de-roo.org">Media speler</a></li>
+    <li><a href="https://code.de-roo.org">VS Code online</a></li>
+    <li><a href="https://radicale.de-roo.org">Radicale CalDav/CardDav</a></li>
+    <li><a href="https://yt.de-roo.org">Internetfilmpjes</a></li>
+    <li><a href="https://dl.de-roo.org">Filmpjes downloaden</a></li>
+    <li><a href="https://transfer.de-roo.org">Filetransfer</a></li>
+    <li><a href="https://bin.de-roo.org">Text paste-bin</a></li>
+    <li><a href="familieberichten.html">Familieberichten</a></li>
+    <li><a href="http://spacedesk.de-roo.org">Desktop uitbreiding</a></li>
+    <li><a href="rekenmachine/index.html" target="_blank">rekenmachine</a></li>
+</ul>
 
-    <script>
-        // Hackertheme toggle
-        const btn = document.getElementById('themeToggle');
-        btn.addEventListener('click', () => {
-            document.body.classList.toggle('hacker');
-        });
-    </script>
+<script>
+// Hackertheme toggle
+const btn = document.getElementById('themeToggle');
+const body = document.body;
+btn.addEventListener('click', () => {
+    body.classList.toggle('hacker');
+    matrixToggle(body.classList.contains('hacker'));
+});
+
+// Matrix rain effect
+const canvas = document.getElementById('matrix');
+const ctx = canvas.getContext('2d');
+let width = canvas.width = window.innerWidth;
+let height = canvas.height = window.innerHeight;
+
+const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789あいうえおかきくけこ".split("");
+const fontSize = 16;
+const columns = Math.floor(width / fontSize);
+const drops = Array(columns).fill(1);
+
+function drawMatrix() {
+    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
+    ctx.fillRect(0, 0, width, height);
+
+    ctx.fillStyle = "#00ff00";
+    ctx.font = fontSize + "px monospace";
+
+    for(let i = 0; i < drops.length; i++){
+        const text = letters[Math.floor(Math.random() * letters.length)];
+        ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+
+        if(drops[i] * fontSize > height && Math.random() > 0.975) {
+            drops[i] = 0;
+        }
+        drops[i]++;
+    }
+    requestAnimationFrame(drawMatrix);
+}
+
+let matrixActive = false;
+function matrixToggle(active) {
+    if(active && !matrixActive) {
+        canvas.style.display = "block";
+        matrixActive = true;
+        drawMatrix();
+    } else if(!active) {
+        canvas.style.display = "none";
+        matrixActive = false;
+    }
+}
+
+canvas.style.display = "none";
+
+window.addEventListener('resize', () => {
+    width = canvas.width = window.innerWidth;
+    height = canvas.height = window.innerHeight;
+});
+</script>
 </body>
 </html>
