Update index.php

2025-12-30 11:38:52 +01:00
parent 0ad5719e68
commit 6a5ffc3209
1 changed files with 96 additions and 91 deletions
--- a/index.php
+++ b/index.php
@@ -1,10 +1,8 @@
 <?php
 $theme = "normal";
-
 if(isset($_COOKIE['theme'])) {
    $theme = $_COOKIE['theme'];
 }
-
 if(isset($_GET['theme'])) {
    $theme = $_GET['theme'] === "hacker" ? "hacker" : "normal";
    setcookie('theme', $theme, time() + (86400 * 30), "/"); 
@@ -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;
+}
+
+/* Hackertheme */
+body.hacker {
+    background: black;
+    color: #00ff00;
 }

 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:hover {
+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";
-};
-
-/* Matrix rain */
-const canvas = document.getElementById("matrix");
-const ctx = canvas.getContext("2d");
-
-function resize() {
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
+// 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";
    }
-resize();
-window.addEventListener("resize", resize);
+});

-const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789アカサタナ".split("");
+// 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;
-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)];
+        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>