ben/ben.de-roo.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update index.php

Browse Source
This commit is contained in:
Ben de Roo
2025-12-30 11:29:21 +01:00
parent 7d9b21409d
commit 76408f6e35
1 changed files with 31 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
index.php
View File

@@ -1,3 +1,16 @@
<?php
// PHP: theme onthouden via cookie
$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), "/"); // 30 dagen bewaren
header("Location: ".$_SERVER['PHP_SELF']);
exit();
}
?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="nl"> <html lang="nl">
<head> <head>
@@ -33,18 +46,18 @@ h1 {
#themeToggle { #themeToggle {
position: fixed; position: fixed;
top: 10px; top: 10px;
left: 50%; left: 10px;
transform: translateX(-50%); padding: 5px 10px;
padding: 10px 20px;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
background: rgba(0,255,255,0.2); background: rgba(0,255,255,0.2);
color: #00ffff; color: #00ffff;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 12px;
backdrop-filter: blur(5px); backdrop-filter: blur(3px);
box-shadow: 0 4px 10px rgba(0,0,0,0.3); box-shadow: 0 2px 5px rgba(0,0,0,0.3);
transition: all 0.3s; transition: all 0.3s;
z-index: 999;
} }
#themeToggle:hover { #themeToggle:hover {
@@ -117,7 +130,7 @@ body.hacker li:hover {
} }
</style> </style>
</head> </head>
<body> <body class="<?= $theme === 'hacker' ? 'hacker' : '' ?>">
<canvas id="matrix"></canvas> <canvas id="matrix"></canvas>
<button id="themeToggle">Hackertheme aan/uit</button> <button id="themeToggle">Hackertheme aan/uit</button>
<h1>voor alle dieren in de dierentuin</h1> <h1>voor alle dieren in de dierentuin</h1>
@@ -145,10 +158,12 @@ body.hacker li:hover {
<script> <script>
// Hackertheme toggle // Hackertheme toggle
const btn = document.getElementById('themeToggle'); const btn = document.getElementById('themeToggle');
const body = document.body;
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
body.classList.toggle('hacker'); if(document.body.classList.contains('hacker')) {
matrixToggle(body.classList.contains('hacker')); window.location.href = "?theme=normal";
} else {
window.location.href = "?theme=hacker";
}
}); });
// Matrix rain effect // Matrix rain effect
@@ -163,7 +178,7 @@ const columns = Math.floor(width / fontSize);
const drops = Array(columns).fill(1); const drops = Array(columns).fill(1);
function drawMatrix() { function drawMatrix() {
ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; ctx.fillStyle = "rgba(0, 0, 0, 0.08)"; // beetje langzaam vervagen
ctx.fillRect(0, 0, width, height); ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "#00ff00"; ctx.fillStyle = "#00ff00";
@@ -178,22 +193,14 @@ function drawMatrix() {
} }
drops[i]++; drops[i]++;
} }
if(document.body.classList.contains('hacker')){
requestAnimationFrame(drawMatrix); requestAnimationFrame(drawMatrix);
} }
}
let matrixActive = false; if(document.body.classList.contains('hacker')){
function matrixToggle(active) {
if(active && !matrixActive) {
canvas.style.display = "block";
matrixActive = true;
drawMatrix(); drawMatrix();
} else if(!active) {
canvas.style.display = "none";
matrixActive = false;
} }
}
canvas.style.display = "none";
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
width = canvas.width = window.innerWidth; width = canvas.width = window.innerWidth;