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

---
 index.php | 187 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 96 insertions(+), 91 deletions(-)

diff --git a/index.php b/index.php
index d0559dd..0a53457 100644
--- a/index.php
+++ b/index.php
@@ -1,14 +1,12 @@
 <?php
 $theme = "normal";
-
-if (isset($_COOKIE['theme'])) {
+if(isset($_COOKIE['theme'])) {
     $theme = $_COOKIE['theme'];
 }
-
-if (isset($_GET['theme'])) {
+if(isset($_GET['theme'])) {
     $theme = $_GET['theme'] === "hacker" ? "hacker" : "normal";
-    setcookie('theme', $theme, time() + (86400 * 30), "/");
-    header("Location: " . $_SERVER['PHP_SELF']);
+    setcookie('theme', $theme, time() + (86400 * 30), "/"); 
+    header("Location: ".$_SERVER['PHP_SELF']);
     exit();
 }
 ?>
@@ -18,18 +16,19 @@ if (isset($_GET['theme'])) {
 <meta charset="UTF-8">
 <meta name="robots" content="noindex">
 <title>betere homesite</title>
-
 <style>
+/* Algemene styles */
 html, body {
     margin: 0;
     padding: 0;
-    min-height: 100%;
-    overflow-y: auto;
-    font-family: monospace;
+    height: 100%;
+    overflow: auto; /* scrollen altijd mogelijk */
+    font-family: monospace, monospace;
     color: #a9b594b3;
-    background: linear-gradient(120deg, #245da4, #291451, #1e0f27, #b71b8d);
+    background: linear-gradient(120deg, #245da4, #291451, #1e0f27, #b71b8dff);
     background-size: 400% 400%;
-    animation: bgFade 10s ease infinite;
+    animation: bgFade 7s ease infinite;
+    transition: background 0.3s, color 0.3s;
 }
 
 @keyframes bgFade {
@@ -38,64 +37,39 @@ html, body {
     100% { background-position: 0% 50%; }
 }
 
-/* Hacker theme */
-body.hacker {
-    background: black;
-    color: #00ff00;
+h1 {
+    text-align: center;
+    margin: 40px 0;
+    color: #ffffff;
 }
 
-/* Matrix canvas */
-#matrix {
-    position: fixed;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    pointer-events: none;
-}
-
-/* Toggle knop */
+/* Theme toggle knop */
 #themeToggle {
     position: fixed;
-    top: 8px;
-    left: 8px;
+    top: 10px;
+    left: 10px;
     padding: 4px 8px;
-    font-size: 11px;
-    border-radius: 5px;
+    font-size: 10px;
     border: none;
-    cursor: pointer;
+    border-radius: 5px;
     background: rgba(0,255,255,0.2);
     color: #00ffff;
+    cursor: pointer;
+    backdrop-filter: blur(3px);
+    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
     z-index: 999;
 }
 
-body.hacker #themeToggle {
-    background: rgba(0,255,0,0.2);
-    color: #00ff00;
-}
-
 #themeToggle:hover {
     background: rgba(0,255,255,0.4);
     color: #000;
 }
 
 /* Content */
-h1 {
-    text-align: center;
-    margin: 40px 0;
-    color: white;
-    position: relative;
-    z-index: 2;
-}
-
-body.hacker h1 {
-    color: #00ff00;
-}
-
 ul {
     list-style: none;
     padding: 0;
-    margin: 0 auto 80px;
+    margin: 0 auto;
     max-width: 500px;
     position: relative;
     z-index: 2;
@@ -103,6 +77,12 @@ ul {
 
 li {
     margin: 10px 0;
+    transition: all 0.2s ease;
+}
+
+li:hover {
+    transform: scale(1.05) translateY(-5px);
+    background: rgba(0, 255, 255, 0.4);
 }
 
 a {
@@ -111,35 +91,50 @@ a {
     border-radius: 10px;
     background: rgba(0, 255, 255, 0.2);
     color: #00ffff;
-    text-decoration: none;
     font-size: 18px;
-    transition: 0.2s;
+    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 {
-    transform: scale(1.05);
-    background: rgba(0,255,255,0.4);
-    color: #000;
+    color: #000000;
 }
 
-body.hacker a {
-    background: rgba(0,255,0,0.1);
+/* Hackertheme */
+body.hacker {
+    background: black;
     color: #00ff00;
 }
 
-body.hacker a:hover {
+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);
+}
+
+/* Matrix canvas */
+#matrix {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    pointer-events: none;
 }
 </style>
 </head>
-
 <body class="<?= $theme === 'hacker' ? 'hacker' : '' ?>">
 <canvas id="matrix"></canvas>
-
-<button id="themeToggle">Theme</button>
-
+<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>
@@ -148,60 +143,70 @@ body.hacker a:hover {
     <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>
-const btn = document.getElementById("themeToggle");
-btn.onclick = () => {
-    location.href = document.body.classList.contains("hacker")
-        ? "?theme=normal"
-        : "?theme=hacker";
-};
+// Hackertheme toggle
+const btn = document.getElementById('themeToggle');
+btn.addEventListener('click', () => {
+    if(document.body.classList.contains('hacker')) {
+        window.location.href = "?theme=normal";
+    } else {
+        window.location.href = "?theme=hacker";
+    }
+});
 
-/* Matrix rain */
-const canvas = document.getElementById("matrix");
-const ctx = canvas.getContext("2d");
+// 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;
 
-function resize() {
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-}
-resize();
-window.addEventListener("resize", resize);
-
-const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789アカサタナ".split("");
+const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789あいうえおかきくけこ".split("");
 const fontSize = 16;
-let columns = Math.floor(canvas.width / fontSize);
-let drops = Array(columns).fill(1);
+const columns = Math.floor(width / fontSize);
+const drops = Array(columns).fill(1);
 
 function drawMatrix() {
-    if (!document.body.classList.contains("hacker")) return;
-
-    ctx.fillStyle = "rgba(0,0,0,0.12)";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    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 = chars[Math.floor(Math.random() * chars.length)];
+    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 > canvas.height && Math.random() > 0.98) {
+        if(drops[i] * fontSize > height && Math.random() > 0.975) {
             drops[i] = 0;
         }
         drops[i]++;
     }
-    setTimeout(() => requestAnimationFrame(drawMatrix), 60);
+    if(document.body.classList.contains('hacker')){
+        requestAnimationFrame(drawMatrix);
+    }
 }
 
-if (document.body.classList.contains("hacker")) {
+if(document.body.classList.contains('hacker')){
     drawMatrix();
 }
+
+window.addEventListener('resize', () => {
+    width = canvas.width = window.innerWidth;
+    height = canvas.height = window.innerHeight;
+});
 </script>
 </body>
 </html>