<?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), "/"); 
    header("Location: ".$_SERVER['PHP_SELF']);
    exit();
}
?>
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<title>betere homesite</title>
<link rel="icon" type="image/png" href="https://tse2.mm.bing.net/th/id/OIP.y8Dt5FxBJYFaYhN-PThtzAHaHa?rs=1&pid=ImgDetMain&o=7&rm=3">
<style>
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: auto;
    font-family: monospace, monospace;
    color: #a9b594b3;
    background: linear-gradient(120deg, #245da4, #291451, #1e0f27, #b71b8dff);
    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%; }
}

h1 {
    text-align: center;
    margin: 40px 0;
    color: #ffffff;
}

#themeToggle {
    position: fixed;
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    font-size: 10px;
    border: none;
    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;
}

#themeToggle:hover {
    background: rgba(0,255,255,0.4);
    color: #000;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 500px;
    position: relative;
    z-index: 2;
}

li {
    margin: 10px 0;
    transition: none; /* direct effect bij hover */
}

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: none; /* direct kleuren bij hover */
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

a:hover {
    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 li:hover {
    background: rgba(0,255,0,0.3);
    transform: scale(1.05) translateY(-5px);
}

/* Matrix rain canvas */
#matrix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
</style>
</head>
<body class="<?= $theme === 'hacker' ? 'hacker' : '' ?>">
<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>
    <li><a href="https://ben.de-roo.org/radar/index.php" target="_blank">esp32</a></li>
</ul>

<script>
// 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 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.08)"; 
    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]++;
    }
    if(document.body.classList.contains('hacker')){
        requestAnimationFrame(drawMatrix);
    }
}

if(document.body.classList.contains('hacker')){
    drawMatrix();
}

window.addEventListener('resize', () => {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
});
</script>
</body>
</html>
