Update index.php

2025-12-30 11:26:31 +01:00
parent f5748d80a2
commit 7d9b21409d
1 changed files with 183 additions and 124 deletions
--- a/index.php
+++ b/index.php
@@ -14,8 +14,7 @@
    color: #a9b594b3;
    background: linear-gradient(120deg, #245da4, #291451, #1e0f27, #1c0917);
    background-size: 400% 400%;
-            animation: bgFade 10s ease infinite; /* sneller */
-            background-attachment: fixed;
+    animation: bgFade 10s ease infinite;
    transition: background 0.3s, color 0.3s;
 }

@@ -58,11 +57,13 @@
    padding: 0;
    margin: 0 auto;
    max-width: 500px;
+    position: relative;
+    z-index: 2;
 }

 li {
    margin: 10px 0;
-            transition: all 0.2s ease; /* sneller */
+    transition: all 0.2s ease;
 }

 li:hover {
@@ -78,7 +79,7 @@
    color: #00ffff;
    font-size: 18px;
    text-decoration: none;
-            transition: all 0.2s ease; /* sneller */
+    transition: all 0.2s ease;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
 }
@@ -89,8 +90,9 @@

 /* Hackertheme */
 body.hacker {
-            background: #000000;
+    background: black;
    color: #00ff00;
+    overflow: hidden;
 }

 body.hacker a {
@@ -104,13 +106,19 @@
    transform: scale(1.05) translateY(-5px);
 }

-        ::-webkit-scrollbar {
-            width: 0px;
-            background: transparent;
+/* Matrix rain canvas */
+#matrix {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
 }
 </style>
 </head>
 <body>
+<canvas id="matrix"></canvas>
 <button id="themeToggle">Hackertheme aan/uit</button>
 <h1>voor alle dieren in de dierentuin</h1>
 <ul>
@@ -137,8 +145,59 @@
 <script>
 // Hackertheme toggle
 const btn = document.getElementById('themeToggle');
+const body = document.body;
 btn.addEventListener('click', () => {
-            document.body.classList.toggle('hacker');
+    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>