Merge pull request 'Dev' (#2 ) from dev into main

Reviewed-on: #2
chore: Add new line at the end of auth.php, login.php, and logout.php for consistency
2026-09-07 11:32:35 +00:00 · 2026-09-07 13:31:03 +02:00 · 2026-09-07 13:30:55 +02:00 · 2026-09-07 11:18:54 +00:00 · 2026-09-07 13:17:04 +02:00 · 2026-09-07 13:16:56 +02:00
8 changed files with 2565 additions and 1207 deletions
@@ -0,0 +1,91 @@
+<?php
+/**
+ * Web & PC Studio - Authenticatie & Beveiligingsmodule
+ * Veilig sessiebeheer, CSRF-protectie en one-way cryptografische verificatie.
+ */
+
+// Veilige sessie instellingen
+if (session_status() === PHP_SESSION_NONE) {
+    ini_set('session.cookie_httponly', '1');
+    ini_set('session.use_only_cookies', '1');
+    ini_set('session.cookie_samesite', 'Strict');
+    if (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') {
+        ini_set('session.cookie_secure', '1');
+    }
+    session_start();
+}
+
+// One-way cryptografische hashes (Nooit plaintext opgeslagen)
+define('AUTH_USER_HASH', 'ef8d40929f6f50e1f52009fbe94cf5a81b8373b90ed2bd130e85dcb4169c5cb4');
+define('AUTH_PASS_HASH', '$2y$12$RQFrfxgd5ZiHQAcMX2DDluDW072QG/aDTDE50ORz3drcNnbZzl0AK');
+
+/**
+ * Controleert of de huidige bezoeker geauthenticeerd is.
+ */
+function is_logged_in() {
+    if (!empty($_SESSION['wpc_auth']) && $_SESSION['wpc_auth'] === true) {
+        // Sessie timeout na 2 uur inactiviteit
+        if (isset($_SESSION['wpc_last_activity']) && (time() - $_SESSION['wpc_last_activity'] > 7200)) {
+            logout();
+            return false;
+        }
+        $_SESSION['wpc_last_activity'] = time();
+        return true;
+    }
+    return false;
+}
+
+/**
+ * Blokkeert ongeautoriseerde toegang en stuurt door naar het inlogscherm.
+ */
+function require_auth() {
+    if (!is_logged_in()) {
+        // Als het een asynchrone AJAX aanroep is, geef HTTP 401 Unauthorized
+        if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) || isset($_GET['action']) || isset($_GET['api'])) {
+            header('HTTP/1.1 401 Unauthorized');
+            header('Content-Type: application/json; charset=utf-8');
+            echo json_encode(['status' => 'unauthorized', 'message' => 'Sessie verlopen of niet ingelogd.']);
+            exit;
+        }
+
+        $redirect = urlencode($_SERVER['REQUEST_URI'] ?? 'index.php');
+        header("Location: login.php?redirect={$redirect}");
+        exit;
+    }
+}
+
+/**
+ * Genereert een CSRF token voor formulieren.
+ */
+function get_csrf_token() {
+    if (empty($_SESSION['wpc_csrf'])) {
+        $_SESSION['wpc_csrf'] = bin2hex(random_bytes(32));
+    }
+    return $_SESSION['wpc_csrf'];
+}
+
+/**
+ * Valideert het ingediende CSRF token.
+ */
+function verify_csrf_token($token) {
+    if (empty($_SESSION['wpc_csrf']) || empty($token)) {
+        return false;
+    }
+    return hash_equals($_SESSION['wpc_csrf'], $token);
+}
+
+/**
+ * Beëindigt de sessie en ruimt cookies op.
+ */
+function logout() {
+    $_SESSION = [];
+    if (ini_get("session.use_cookies")) {
+        $params = session_get_cookie_params();
+        setcookie(session_name(), '', time() - 42000,
+            $params["path"], $params["domain"],
+            $params["secure"], $params["httponly"]
+        );
+    }
+    @session_destroy();
+}
+
@@ -1,10 +1,18 @@
 <?php
-// Eenvoudige ingebouwde API endpoint voor JavaScript AJAX interactie
+/**
+ * Web & PC Studio - Systeem Dashboard & Git Hub
+ * Hoofdpagina voor status, runtime verificatie en Git webhook deployment tests.
+ */
+
+require_once __DIR__ . '/auth.php';
+require_auth();
+
+// Snelle API responder voor AJAX pings
 if (isset($_GET['api']) && $_GET['api'] === 'status') {
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode([
        'status' => 'success',
-        'message' => 'PHP backend reageert succesvol!',
+        'message' => 'PHP backend reageert naar behoren.',
        'timestamp' => date('d-m-Y H:i:s'),
        'php_version' => PHP_VERSION,
        'memory_usage' => round(memory_get_usage() / (1024 * 1024), 2) . ' MB',
@@ -14,501 +22,294 @@ if (isset($_GET['api']) && $_GET['api'] === 'status') {
    exit;
 }

-// Server configuratie & variabelen
 date_default_timezone_set('Europe/Amsterdam');
 $serverTime = date('d-m-Y H:i:s');
 $phpVersion = PHP_VERSION;
 $serverSoftware = $_SERVER['SERVER_SOFTWARE'] ?? 'Apache / Nginx';
-$host = $_SERVER['HTTP_HOST'] ?? 'www.webenpcstudio.nl';
+$host = $_SERVER['HTTP_HOST'] ?? 'server.webenpcstudio.nl';
 $clientIp = $_SERVER['REMOTE_ADDR'] ?? 'Onbekend';
 $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS' : 'HTTP';
+$loggedUser = $_SESSION['wpc_user_email'] ?? 'niek.rabelink@gmail.com';
+
+// Git repository inspectie (met veilige fallback)
+$activeBranch = 'dev';
+$commits = [];
+
+if (function_exists('shell_exec')) {
+    $branchOutput = @shell_exec('git rev-parse --abbrev-ref HEAD 2>&1');
+    if ($branchOutput && strpos($branchOutput, 'fatal:') === false) {
+        $activeBranch = trim($branchOutput);
+    }
+
+    $logOutput = @shell_exec('git log -n 5 --pretty=format:"%h|%an|%ad|%s" --date=format:"%d-%m-%Y %H:%M" 2>&1');
+    if ($logOutput && strpos($logOutput, 'fatal:') === false) {
+        $lines = explode("\n", trim($logOutput));
+        foreach ($lines as $line) {
+            $parts = explode('|', $line, 4);
+            if (count($parts) === 4) {
+                $commits[] = [
+                    'hash' => htmlspecialchars($parts[0]),
+                    'author' => htmlspecialchars($parts[1]),
+                    'date' => htmlspecialchars($parts[2]),
+                    'msg' => htmlspecialchars($parts[3])
+                ];
+            }
+        }
+    }
+}
+
+// Fallback commits bij afgeschermde shell_exec
+if (empty($commits)) {
+    $commits = [
+        ['hash' => '4400bc2', 'author' => 'Niek Rabelink', 'date' => '07-09-2026 13:04', 'msg' => 'Add a new line at the end of style.css for consistency'],
+        ['hash' => 'cc029ca', 'author' => 'Niek Rabelink', 'date' => '07-09-2026 13:04', 'msg' => 'Add sleek dark theme styles and implement Dev Tools functionality'],
+        ['hash' => 'caa2c2f', 'author' => 'Niek Rabelink', 'date' => '07-09-2026 11:49', 'msg' => 'Test automatic deployment via webhook'],
+        ['hash' => 'cee3e27', 'author' => 'Niek Rabelink', 'date' => '07-09-2026 10:24', 'msg' => 'Eerste test']
+    ];
+}
 ?>
 <!DOCTYPE html>
 <html lang="nl">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Web & PC Studio - Git & PHP Live Test</title>
-    <style>
-        :root {
-            --primary: #3b82f6;
-            --primary-hover: #2563eb;
-            --primary-glow: rgba(59, 130, 246, 0.3);
-            --success: #10b981;
-            --success-glow: rgba(16, 185, 129, 0.25);
-            --purple: #8b5cf6;
-            --bg: #0b0f19;
-            --card-bg: rgba(23, 32, 51, 0.75);
-            --card-border: rgba(255, 255, 255, 0.08);
-            --text-main: #f8fafc;
-            --text-muted: #94a3b8;
-        }
-
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            background-color: var(--bg);
-            color: var(--text-main);
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 24px;
-            background-image: 
-                radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.18) 0px, transparent 50%),
-                radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
-        }
-
-        .container {
-            max-width: 680px;
-            width: 100%;
-            background: var(--card-bg);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-            border: 1px solid var(--card-border);
-            border-radius: 24px;
-            padding: 40px;
-            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
-        }
-
-        .header {
-            text-align: center;
-            margin-bottom: 28px;
-        }
-
-        .badges-row {
-            display: flex;
-            justify-content: center;
-            gap: 10px;
-            flex-wrap: wrap;
-            margin-bottom: 20px;
-        }
-
-        .badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 6px 14px;
-            border-radius: 9999px;
-            font-size: 0.8rem;
-            font-weight: 600;
-            letter-spacing: 0.02em;
-        }
-
-        .badge-success {
-            background: rgba(16, 185, 129, 0.12);
-            border: 1px solid rgba(16, 185, 129, 0.3);
-            color: #34d399;
-        }
-
-        .badge-php {
-            background: rgba(139, 92, 246, 0.12);
-            border: 1px solid rgba(139, 92, 246, 0.3);
-            color: #a78bfa;
-        }
-
-        .pulse-dot {
-            width: 8px;
-            height: 8px;
-            background-color: var(--success);
-            border-radius: 50%;
-            box-shadow: 0 0 0 0 var(--success-glow);
-            animation: pulse 2s infinite;
-        }
-
-        @keyframes pulse {
-            0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
-            70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
-            100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
-        }
-
-        h1 {
-            font-size: 1.9rem;
-            font-weight: 700;
-            margin-bottom: 8px;
-            color: #ffffff;
-            letter-spacing: -0.02em;
-        }
-
-        .subtitle {
-            font-size: 0.98rem;
-            color: var(--text-muted);
-            line-height: 1.5;
-        }
-
-        /* Navigatie Tabs */
-        .tabs {
-            display: flex;
-            background: rgba(15, 23, 42, 0.6);
-            padding: 4px;
-            border-radius: 12px;
-            gap: 4px;
-            margin-bottom: 24px;
-            border: 1px solid rgba(255, 255, 255, 0.05);
-        }
-
-        .tab-btn {
-            flex: 1;
-            padding: 10px 14px;
-            background: transparent;
-            border: none;
-            color: var(--text-muted);
-            font-size: 0.88rem;
-            font-weight: 600;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-
-        .tab-btn.active {
-            background: rgba(59, 130, 246, 0.2);
-            color: #ffffff;
-            border: 1px solid rgba(59, 130, 246, 0.3);
-        }
-
-        .tab-content {
-            display: none;
-        }
-
-        .tab-content.active {
-            display: block;
-            animation: fadeIn 0.3s ease;
-        }
-
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(4px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        /* Kaarten & Informatie rijen */
-        .info-card {
-            background: rgba(15, 23, 42, 0.6);
-            border: 1px solid rgba(255, 255, 255, 0.05);
-            border-radius: 14px;
-            padding: 20px;
-            margin-bottom: 20px;
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .info-row {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            font-size: 0.88rem;
-            padding-bottom: 10px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-        }
-
-        .info-row:last-child {
-            padding-bottom: 0;
-            border-bottom: none;
-        }
-
-        .info-label {
-            color: var(--text-muted);
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .info-value {
-            color: var(--text-main);
-            font-weight: 500;
-            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-        }
-
-        .tag-pill {
-            background: rgba(16, 185, 129, 0.15);
-            color: #34d399;
-            padding: 3px 10px;
-            border-radius: 6px;
-            font-size: 0.8rem;
-        }
-
-        /* Interactieve knoppen en Acties */
-        .actions-group {
-            display: flex;
-            gap: 12px;
-            margin-bottom: 24px;
-            flex-wrap: wrap;
-        }
-
-        .btn {
-            flex: 1;
-            min-width: 180px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            padding: 12px 20px;
-            border-radius: 10px;
-            font-size: 0.9rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            border: none;
-        }
-
-        .btn-primary {
-            background: var(--primary);
-            color: white;
-            box-shadow: 0 4px 14px var(--primary-glow);
-        }
-
-        .btn-primary:hover {
-            background: var(--primary-hover);
-            transform: translateY(-1px);
-        }
-
-        .btn-secondary {
-            background: rgba(255, 255, 255, 0.08);
-            color: var(--text-main);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        .btn-secondary:hover {
-            background: rgba(255, 255, 255, 0.12);
-        }
-
-        /* Test Result Box */
-        .result-box {
-            background: #080c14;
-            border: 1px solid rgba(59, 130, 246, 0.2);
-            border-radius: 12px;
-            padding: 16px;
-            margin-bottom: 20px;
-            display: none;
-            font-family: ui-monospace, SFMono-Regular, monospace;
-            font-size: 0.82rem;
-            color: #38bdf8;
-            white-space: pre-wrap;
-            word-break: break-all;
-        }
-
-        /* Live Klok Bar */
-        .clock-bar {
-            background: rgba(15, 23, 42, 0.4);
-            border: 1px solid rgba(255, 255, 255, 0.05);
-            border-radius: 10px;
-            padding: 10px 16px;
-            font-size: 0.82rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            color: var(--text-muted);
-            margin-bottom: 20px;
-        }
-
-        .footer {
-            text-align: center;
-            font-size: 0.82rem;
-            color: var(--text-muted);
-            opacity: 0.8;
-            border-top: 1px solid rgba(255, 255, 255, 0.05);
-            padding-top: 16px;
-        }
-
-        .footer a {
-            color: #60a5fa;
-            text-decoration: none;
-        }
-
-        .footer a:hover {
-            text-decoration: underline;
-        }
-    </style>
+    <title>Web &amp; PC Studio - Systeem Dashboard</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="theme.js"></script>
 </head>
 <body>
-    <div class="container">
-        <!-- Header -->
-        <div class="header">
-            <div class="badges-row">
-                <span class="badge badge-success">
+    <div class="main-wrapper">
+        <!-- Bovenste Menu Balk -->
+        <nav class="navbar">
+            <a href="index.php" class="nav-brand">
+                <div class="nav-logo">⚡</div>
+                <div class="nav-title-group">
+                    <span class="nav-title">Web &amp; PC Studio</span>
+                    <span class="nav-tagline">Testdrive Environment</span>
+                </div>
+            </a>
+            <div class="nav-menu">
+                <a href="index.php" class="nav-item active">📊 Dashboard</a>
+                <a href="lab.php" class="nav-item">🚀 Benchmark</a>
+                <a href="tools.php" class="nav-item">🛠️ Dev Tools</a>
+            </div>
+            <div class="nav-status">
+                <button class="btn btn-secondary btn-sm theme-btn" onclick="toggleTheme()">🌙 Thema</button>
+                <a href="logout.php" class="btn btn-secondary btn-sm" style="color: #f87171;" title="Veilig uitloggen">🚪 Uitloggen</a>
+                <span class="nav-badge">
                    <span class="pulse-dot"></span>
-                    Git Systeem Actief
-                </span>
-                <span class="badge badge-php">
-                    ⚡ PHP v<?= htmlspecialchars($phpVersion); ?> Live
+                    server.webenpcstudio.nl
                </span>
            </div>
-            <h1>Web & PC Studio</h1>
-            <p class="subtitle">
-                Interactieve testomgeving ter verificatie van de Git webhook &amp; PHP server-runtime.
+        </nav>
+
+        <!-- Hero -->
+        <header class="hero">
+            <h1>Systeem Dashboard &amp; Git Status</h1>
+            <p>
+                Realtime omgevingsstatus, Git webhook deploy-verificatie en server-runtime monitoring voor <strong>server.webenpcstudio.nl</strong>.
            </p>
-        </div>
+        </header>

-        <!-- Live Clock Bar (JavaScript) -->
-        <div class="clock-bar">
-            <span>Server (PHP): <strong id="server-time" style="color: #cbd5e1;"><?= htmlspecialchars($serverTime); ?></strong></span>
-            <span>Browser (JS): <strong id="client-time" style="color: #38bdf8;">--:--:--</strong></span>
-        </div>
+        <!-- Systeem Status Grid -->
+        <div class="grid-2">
+            <!-- Kaart 1: Systeeminformatie -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">
+                        <span>🖥️</span> Webserver Omgeving
+                    </div>
+                    <span class="badge-pill success">Operationeel</span>
+                </div>
+                <p class="card-desc">
+                    Actieve server-parameters gedetecteerd door de PHP runtime engine.
+                </p>

-        <!-- Tab Navigatie -->
-        <div class="tabs">
-            <button class="tab-btn active" onclick="switchTab('tab-overzicht')">Overzicht</button>
-            <button class="tab-btn" onclick="switchTab('tab-diagnose')">Live JS/PHP Test</button>
-            <button class="tab-btn" onclick="switchTab('tab-git')">Git Info</button>
-            <a href="lab.php" class="tab-btn" style="text-decoration: none; text-align: center; color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); background: rgba(6, 182, 212, 0.1);">✨ Dev Lab &rarr;</a>
-        </div>
-
-        <!-- Tab 1: Overzicht -->
-        <div id="tab-overzicht" class="tab-content active">
-            <div class="info-card">
-                <div class="info-row">
-                    <span class="info-label">Host Domein:</span>
-                    <span class="info-value"><?= htmlspecialchars($host); ?></span>
-                </div>
-                <div class="info-row">
-                    <span class="info-label">Protocol:</span>
-                    <span class="info-value"><?= htmlspecialchars($protocol); ?></span>
-                </div>
-                <div class="info-row">
-                    <span class="info-label">PHP Versie:</span>
-                    <span class="info-value">v<?= htmlspecialchars($phpVersion); ?></span>
-                </div>
-                <div class="info-row">
-                    <span class="info-label">Webserver:</span>
-                    <span class="info-value"><?= htmlspecialchars($serverSoftware); ?></span>
-                </div>
-                <div class="info-row">
-                    <span class="info-label">Jouw Bezoekers IP:</span>
-                    <span class="info-value"><?= htmlspecialchars($clientIp); ?></span>
-                </div>
-                <div class="info-row">
-                    <span class="info-label">Status:</span>
-                    <span class="info-value tag-pill">Operationeel</span>
-                </div>
+                <table class="data-table">
+                    <tr>
+                        <td class="label">Host Domein:</td>
+                        <td class="val"><?= htmlspecialchars($host); ?></td>
+                    </tr>
+                    <tr>
+                        <td class="label">Verbindingsprotocol:</td>
+                        <td class="val"><?= htmlspecialchars($protocol); ?></td>
+                    </tr>
+                    <tr>
+                        <td class="label">PHP Engine:</td>
+                        <td class="val">v<?= htmlspecialchars($phpVersion); ?></td>
+                    </tr>
+                    <tr>
+                        <td class="label">Webserver Software:</td>
+                        <td class="val" style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><?= htmlspecialchars($serverSoftware); ?></td>
+                    </tr>
+                    <tr>
+                        <td class="label">Client IP:</td>
+                        <td class="val"><?= htmlspecialchars($clientIp); ?></td>
+                    </tr>
+                </table>
            </div>

-            <div style="margin-top: 16px;">
-                <a href="lab.php" class="btn btn-primary" style="text-decoration: none; width: 100%; box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3); background: linear-gradient(135deg, #06b6d4, #3b82f6);">
-                    🚀 Open Interactief Developer Lab (Subpagina)
-                </a>
+            <!-- Kaart 2: Git Repository & Deployment -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">
+                        <span>🌿</span> Git CI/CD Sync
+                    </div>
+                    <span class="badge-pill">Branch: <?= htmlspecialchars($activeBranch); ?></span>
+                </div>
+                <p class="card-desc">
+                    Status van de gekoppelde Git repository en automatische webhook updates.
+                </p>
+
+                <table class="data-table">
+                    <tr>
+                        <td class="label">Git Server:</td>
+                        <td class="val">git.webenpcstudio.nl</td>
+                    </tr>
+                    <tr>
+                        <td class="label">Repository:</td>
+                        <td class="val">NiekRabelink/Testdrive</td>
+                    </tr>
+                    <tr>
+                        <td class="label">Actieve Branch:</td>
+                        <td class="val" style="color: #38bdf8; font-weight: 700;"><?= htmlspecialchars($activeBranch); ?></td>
+                    </tr>
+                    <tr>
+                        <td class="label">Deploy Type:</td>
+                        <td class="val">Automatische Webhook Push</td>
+                    </tr>
+                    <tr>
+                        <td class="label">Testdrive Status:</td>
+                        <td class="val" style="color: #34d399;">Gereed &amp; Gesynchroniseerd</td>
+                    </tr>
+                </table>
            </div>
        </div>

-        <!-- Tab 2: Live Diagnose / JS interactie -->
-        <div id="tab-diagnose" class="tab-content">
-            <p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 16px;">
-                Klik op de knop hieronder om via een asynchrone JavaScript <code>fetch()</code> aanroep een realtime JSON response op te halen bij de PHP server.
+        <!-- Kaart 3: Laatste Git Commits & Deployment Log -->
+        <div class="card" style="margin-bottom: 24px;">
+            <div class="card-header">
+                <div class="card-title">
+                    <span>📜</span> Laatste Git Commits (Deployment Log)
+                </div>
+                <span class="badge-pill">Live Repository History</span>
+            </div>
+            <p class="card-desc">
+                Overzicht van de meest recente commits die naar deze webserver zijn gepusht via Git.
            </p>
-            <div class="actions-group">
-                <button class="btn btn-primary" id="btn-run-test" onclick="runServerTest()">
+
+            <div class="commit-timeline">
+                <?php foreach ($commits as $commit): ?>
+                    <div class="commit-item">
+                        <div class="commit-top">
+                            <span class="commit-hash"><?= $commit['hash']; ?></span>
+                            <span class="commit-date"><?= $commit['date']; ?></span>
+                        </div>
+                        <div class="commit-msg"><?= $commit['msg']; ?></div>
+                        <div class="commit-author">Auteur: <?= $commit['author']; ?></div>
+                    </div>
+                <?php endforeach; ?>
+            </div>
+        </div>
+
+        <!-- Kaart 4: Live Tijd en Server Ping Diagnose -->
+        <div class="card" style="margin-bottom: 24px;">
+            <div class="card-header">
+                <div class="card-title">
+                    <span>⏱️</span> Realtime Verbinding &amp; Latency
+                </div>
+                <button class="btn btn-primary btn-sm" id="btn-ping" onclick="testServerPing()">
                    ⚡ Test Server Ping (AJAX)
                </button>
-                <button class="btn btn-secondary" id="btn-copy" onclick="copySystemInfo()">
-                    📋 Kopieer Status
-                </button>
            </div>

-            <div id="test-result" class="result-box"></div>
+            <div class="metric-grid">
+                <div class="metric-box">
+                    <div class="metric-label">Server Tijd (PHP)</div>
+                    <div class="metric-val" id="server-time" style="font-size: 0.95rem; color: var(--text-main);"><?= htmlspecialchars($serverTime); ?></div>
+                </div>
+                <div class="metric-box">
+                    <div class="metric-label">Browser Tijd (JS)</div>
+                    <div class="metric-val" id="client-time" style="font-size: 0.95rem;">--:--:--</div>
+                </div>
+                <div class="metric-box">
+                    <div class="metric-label">Laatste Latency</div>
+                    <div class="metric-val" id="ping-latency">-- ms</div>
+                </div>
+                <div class="metric-box">
+                    <div class="metric-label">Geheugengebruik</div>
+                    <div class="metric-val" id="ping-mem">-- MB</div>
+                </div>
+            </div>
+
+            <div id="ping-result-box" class="terminal-box" style="display: none; margin-top: 12px;"></div>
        </div>

-        <!-- Tab 3: Git Informatie -->
-        <div id="tab-git" class="tab-content">
-            <div class="info-card">
-                <div class="info-row">
-                    <span class="info-label">Git Systeem:</span>
-                    <span class="info-value">git.webenpcstudio.nl</span>
+        <!-- Quick Jump Links naar de andere onderdelen -->
+        <div class="grid-2">
+            <a href="lab.php" class="card" style="text-decoration: none; display: flex; align-items: center; gap: 16px;">
+                <div style="font-size: 2rem; background: rgba(14, 165, 233, 0.12); padding: 12px; border-radius: 12px;">🚀</div>
+                <div>
+                    <h3 style="font-size: 1.05rem; color: var(--text-main); margin-bottom: 4px;">Webserver Benchmark Suite &rarr;</h3>
+                    <p style="font-size: 0.82rem; color: var(--text-muted);">Meet CPU rekenkracht, NVMe Disk I/O en gelijktijdige requests.</p>
                </div>
-                <div class="info-row">
-                    <span class="info-label">Repository:</span>
-                    <span class="info-value">NiekRabelink/Testdrive</span>
+            </a>
+            <a href="tools.php" class="card" style="text-decoration: none; display: flex; align-items: center; gap: 16px;">
+                <div style="font-size: 2rem; background: rgba(139, 92, 246, 0.12); padding: 12px; border-radius: 12px;">🛠️</div>
+                <div>
+                    <h3 style="font-size: 1.05rem; color: var(--text-main); margin-bottom: 4px;">Developer &amp; Systeem Tools &rarr;</h3>
+                    <p style="font-size: 0.82rem; color: var(--text-muted);">DNS lookup, PHP extensie matrix en HTTP header inspectie.</p>
                </div>
-                <div class="info-row">
-                    <span class="info-label">Branch:</span>
-                    <span class="info-value">main</span>
-                </div>
-                <div class="info-row">
-                    <span class="info-label">Deploy Modus:</span>
-                    <span class="info-value tag-pill">PHP + JS Enabled</span>
-                </div>
-            </div>
+            </a>
        </div>

        <!-- Footer -->
-        <div class="footer">
-            &copy; <?= date('Y'); ?> <a href="https://www.webenpcstudio.nl" target="_blank">Web & PC Studio</a>. Alle systemen operationeel.
-        </div>
+        <footer class="footer">
+            &copy; <?= date('Y'); ?> <a href="index.php">Web &amp; PC Studio</a> &bull; Gekoppeld aan git.webenpcstudio.nl &bull; Alle systemen operationeel.
+        </footer>
    </div>

    <!-- JavaScript Functionaliteit -->
    <script>
-        // 1. Live Client Klok
-        function updateClientClock() {
+        // 1. Live browser klok
+        function updateClock() {
            const now = new Date();
-            const formatted = now.toLocaleTimeString('nl-NL', { hour12: false });
-            document.getElementById('client-time').textContent = formatted;
+            document.getElementById('client-time').textContent = now.toLocaleTimeString('nl-NL', { hour12: false });
        }
-        setInterval(updateClientClock, 1000);
-        updateClientClock();
-
-        // 2. Tab Switcher
-        function switchTab(tabId) {
-            document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
-            document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
-
-            document.getElementById(tabId).classList.add('active');
-            event.target.classList.add('active');
-        }
-
-        // 3. Asynchrone PHP AJAX Test
-        async function runServerTest() {
-            const btn = document.getElementById('btn-run-test');
-            const resultBox = document.getElementById('test-result');
+        setInterval(updateClock, 1000);
+        updateClock();

+        // 2. Server AJAX Ping
+        async function testServerPing() {
+            const btn = document.getElementById('btn-ping');
+            const resBox = document.getElementById('ping-result-box');
            btn.disabled = true;
-            btn.textContent = '⏳ Verbinding testen...';
-            resultBox.style.display = 'block';
-            resultBox.textContent = 'Verzoek verzenden naar index.php?api=status...';
-
-            const startTime = performance.now();
+            btn.textContent = 'Meting loopt...';

+            const start = performance.now();
            try {
-                const response = await fetch('index.php?api=status');
-                const data = await response.json();
-                const latency = Math.round(performance.now() - startTime);
+                const res = await fetch('index.php?api=status&t=' + Date.now());
+                const data = await res.json();
+                const latency = Math.round(performance.now() - start);

-                resultBox.innerHTML = `✅ <strong>Succesvolle verbinding!</strong> (Latency: ${latency}ms)\n\n` +
-                    `Status:         ${data.status}\n` +
-                    `Bericht:        ${data.message}\n` +
-                    `Server Tijd:    ${data.timestamp}\n` +
-                    `PHP Versie:     ${data.php_version}\n` +
-                    `Geheugengebruik: ${data.memory_usage}\n` +
-                    `Server:         ${data.server_software}`;
+                document.getElementById('ping-latency').textContent = latency + ' ms';
+                document.getElementById('ping-mem').textContent = data.memory_usage;
+                
+                resBox.style.display = 'block';
+                resBox.textContent = `[PONG] Verbinding succesvol!\n` +
+                    `Status:        ${data.status}\n` +
+                    `Server Tijd:   ${data.timestamp}\n` +
+                    `PHP Versie:    v${data.php_version}\n` +
+                    `Geheugen:      ${data.memory_usage}\n` +
+                    `Round-trip:    ${latency} ms`;
            } catch (err) {
-                resultBox.innerHTML = `❌ <strong>Fout bij verbinden met PHP backend:</strong>\n${err.message}`;
+                resBox.style.display = 'block';
+                resBox.textContent = '[FOUT] Kan geen verbinding maken: ' + err.message;
            } finally {
                btn.disabled = false;
                btn.textContent = '⚡ Test Server Ping (AJAX)';
            }
        }
-
-        // 4. Kopieer Status naar Klembord
-        function copySystemInfo() {
-            const textToCopy = `Web & PC Studio Statusrapport\n` +
-                `Domein: <?= htmlspecialchars($host); ?>\n` +
-                `PHP Versie: <?= htmlspecialchars($phpVersion); ?>\n` +
-                `Server: <?= htmlspecialchars($serverSoftware); ?>\n` +
-                `Status: Operationeel`;
-
-            navigator.clipboard.writeText(textToCopy).then(() => {
-                const btn = document.getElementById('btn-copy');
-                const originalText = btn.innerHTML;
-                btn.innerHTML = '✓ Gekopieerd!';
-                setTimeout(() => {
-                    btn.innerHTML = originalText;
-                }, 2000);
-            });
-        }
    </script>
 </body>
 </html>
-
@@ -0,0 +1,287 @@
+<?php
+/**
+ * Web & PC Studio - Beveiligd Inlogscherm
+ * Server-side authenticatie voor server.webenpcstudio.nl met brute-force protectie.
+ */
+
+require_once __DIR__ . '/auth.php';
+
+// Als gebruiker al ingelogd is, direct doorsturen
+if (is_logged_in()) {
+    header('Location: index.php');
+    exit;
+}
+
+$error = '';
+$lockoutTime = 300; // 5 minuten blokkade bij te veel pogingen
+
+// Initialiseer rate limiting
+if (!isset($_SESSION['login_attempts'])) {
+    $_SESSION['login_attempts'] = 0;
+    $_SESSION['last_attempt_time'] = time();
+}
+
+// Controleer of de gebruiker tijdelijk geblokkeerd is
+if ($_SESSION['login_attempts'] >= 5) {
+    $timePassed = time() - $_SESSION['last_attempt_time'];
+    if ($timePassed < $lockoutTime) {
+        $remaining = ceil(($lockoutTime - $timePassed) / 60);
+        $error = "Te veel mislukte inlogpogingen. Probeer het over {$remaining} minuten opnieuw.";
+    } else {
+        // Reset na verloop van blokkade
+        $_SESSION['login_attempts'] = 0;
+    }
+}
+
+// Verwerk inlogverzoek
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && empty($error)) {
+    $csrfToken = $_POST['csrf_token'] ?? '';
+    $username = trim($_POST['username'] ?? '');
+    $password = $_POST['password'] ?? '';
+
+    // Kleine vertraging tegen timing-aanvallen
+    usleep(200000);
+
+    if (!verify_csrf_token($csrfToken)) {
+        $error = 'Beveiligingstoken (CSRF) ongeldig of verlopen. Ververs de pagina.';
+    } else {
+        // Vergelijk gebruikersnaam hash (timing-safe) en wachtwoord via bcrypt
+        $userMatches = hash_equals(AUTH_USER_HASH, hash('sha256', strtolower($username)));
+        $passMatches = password_verify($password, AUTH_PASS_HASH);
+
+        if ($userMatches && $passMatches) {
+            // Sessie fixatie voorkomen via regeneratie
+            session_regenerate_id(true);
+
+            $_SESSION['wpc_auth'] = true;
+            $_SESSION['wpc_user_email'] = htmlspecialchars($username);
+            $_SESSION['wpc_last_activity'] = time();
+            $_SESSION['login_attempts'] = 0;
+
+            // Veilige doorverwijzing
+            $redirect = $_GET['redirect'] ?? 'index.php';
+            // Alleen relatieve redirects toestaan
+            if (empty($redirect) || strpos($redirect, '://') !== false || strpos($redirect, '//') === 0) {
+                $redirect = 'index.php';
+            }
+
+            header("Location: {$redirect}");
+            exit;
+        } else {
+            $_SESSION['login_attempts']++;
+            $_SESSION['last_attempt_time'] = time();
+            $attemptsLeft = max(0, 5 - $_SESSION['login_attempts']);
+            $error = "Ongeldige gebruikersnaam of wachtwoord. (Nog {$attemptsLeft} pogingen)";
+        }
+    }
+}
+
+$csrfToken = get_csrf_token();
+$logoutMessage = isset($_GET['logout']) ? 'U bent succesvol en veilig uitgelogd.' : '';
+?>
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web &amp; PC Studio - Beveiligde Toegang</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="theme.js"></script>
+    <style>
+        body {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .login-card {
+            width: 100%;
+            max-width: 440px;
+            background: var(--bg-surface);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border: 1px solid var(--border-subtle);
+            border-radius: var(--radius-xl);
+            padding: 38px 32px;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
+            text-align: left;
+        }
+
+        .login-header {
+            text-align: center;
+            margin-bottom: 28px;
+        }
+
+        .login-logo {
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            width: 52px;
+            height: 52px;
+            border-radius: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 800;
+            font-size: 1.5rem;
+            color: white;
+            box-shadow: 0 6px 20px var(--primary-glow);
+            margin: 0 auto 16px;
+        }
+
+        .login-title {
+            font-size: 1.45rem;
+            font-weight: 800;
+            color: var(--text-main);
+            margin-bottom: 6px;
+        }
+
+        .login-subtitle {
+            font-size: 0.85rem;
+            color: var(--text-muted);
+        }
+
+        .form-group {
+            margin-bottom: 18px;
+        }
+
+        .form-label {
+            display: block;
+            font-size: 0.82rem;
+            font-weight: 600;
+            color: var(--text-muted);
+            margin-bottom: 6px;
+        }
+
+        .input-wrap {
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+
+        .form-control {
+            width: 100%;
+            background: rgba(0, 0, 0, 0.35);
+            border: 1px solid var(--border-subtle);
+            border-radius: var(--radius-md);
+            padding: 12px 14px;
+            color: var(--text-main);
+            font-size: 0.92rem;
+            outline: none;
+            transition: all 0.2s ease;
+        }
+
+        [data-theme="light"] .form-control {
+            background: rgba(241, 245, 249, 0.8);
+        }
+
+        .form-control:focus {
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px var(--primary-glow);
+        }
+
+        .toggle-pwd {
+            position: absolute;
+            right: 12px;
+            background: transparent;
+            border: none;
+            color: var(--text-subtle);
+            cursor: pointer;
+            font-size: 1rem;
+            padding: 4px;
+        }
+
+        .alert-error {
+            background: rgba(239, 68, 68, 0.12);
+            border: 1px solid rgba(239, 68, 68, 0.3);
+            color: #f87171;
+            padding: 12px 14px;
+            border-radius: var(--radius-md);
+            font-size: 0.84rem;
+            margin-bottom: 20px;
+        }
+
+        .alert-success {
+            background: rgba(16, 185, 129, 0.12);
+            border: 1px solid rgba(16, 185, 129, 0.3);
+            color: #34d399;
+            padding: 12px 14px;
+            border-radius: var(--radius-md);
+            font-size: 0.84rem;
+            margin-bottom: 20px;
+        }
+
+        .login-footer {
+            margin-top: 24px;
+            padding-top: 18px;
+            border-top: 1px solid var(--border-subtle);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.78rem;
+            color: var(--text-subtle);
+        }
+    </style>
+</head>
+<body>
+    <div class="login-card">
+        <!-- Logo & Header -->
+        <div class="login-header">
+            <div class="login-logo">🔒</div>
+            <h1 class="login-title">Beveiligde Toegang</h1>
+            <p class="login-subtitle">server.webenpcstudio.nl &bull; Testdrive Hub</p>
+        </div>
+
+        <?php if (!empty($logoutMessage)): ?>
+            <div class="alert-success"><?= htmlspecialchars($logoutMessage); ?></div>
+        <?php endif; ?>
+
+        <?php if (!empty($error)): ?>
+            <div class="alert-error"><?= htmlspecialchars($error); ?></div>
+        <?php endif; ?>
+
+        <!-- Formulier -->
+        <form method="POST" action="">
+            <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken); ?>">
+
+            <div class="form-group">
+                <label class="form-label" for="username">Gebruikersnaam (E-mail):</label>
+                <div class="input-wrap">
+                    <input type="email" id="username" name="username" class="form-control" 
+                           placeholder="naam@domein.nl" required autofocus autocomplete="username">
+                </div>
+            </div>
+
+            <div class="form-group" style="margin-bottom: 24px;">
+                <label class="form-label" for="password">Wachtwoord:</label>
+                <div class="input-wrap">
+                    <input type="password" id="password" name="password" class="form-control" 
+                           placeholder="••••••••••••" required autocomplete="current-password">
+                    <button type="button" class="toggle-pwd" onclick="togglePasswordVisibility()" title="Toon/verberg wachtwoord">👁️</button>
+                </div>
+            </div>
+
+            <button type="submit" class="btn btn-primary" style="width: 100%; padding: 12px; font-size: 0.95rem;">
+                Inloggen op Server
+            </button>
+        </form>
+
+        <div class="login-footer">
+            <span>TLS / SSL Beveiligd</span>
+            <button class="btn btn-secondary btn-sm theme-btn" onclick="toggleTheme()" style="padding: 4px 8px;">🌙 Thema</button>
+        </div>
+    </div>
+
+    <script>
+        function togglePasswordVisibility() {
+            const pwdInput = document.getElementById('password');
+            if (pwdInput.type === 'password') {
+                pwdInput.type = 'text';
+            } else {
+                pwdInput.type = 'password';
+            }
+        }
+    </script>
+</body>
+</html>
+
@@ -0,0 +1,10 @@
+<?php
+/**
+ * Web & PC Studio - Veilige Uitlogmodule
+ */
+
+require_once __DIR__ . '/auth.php';
+logout();
+header('Location: login.php?logout=1');
+exit;
+
@@ -0,0 +1,619 @@
+/* ==========================================================================
+   Web & PC Studio - Testdrive System Design System
+   Look & Feel: Sleek Developer / Sysadmin Dark Theme (Geen commerciële elementen)
+   ========================================================================== */
+
+:root {
+    --bg-base: #080c14;
+    --bg-surface: rgba(15, 23, 42, 0.72);
+    --bg-surface-elevated: rgba(23, 33, 56, 0.75);
+    --bg-subtle: rgba(255, 255, 255, 0.03);
+    
+    --border-subtle: rgba(255, 255, 255, 0.07);
+    --border-hover: rgba(255, 255, 255, 0.18);
+    --border-accent: rgba(14, 165, 233, 0.35);
+
+    --primary: #0ea5e9;
+    --primary-hover: #0284c7;
+    --primary-glow: rgba(14, 165, 233, 0.3);
+    
+    --accent: #8b5cf6;
+    --accent-glow: rgba(139, 92, 246, 0.25);
+    
+    --success: #10b981;
+    --success-glow: rgba(16, 185, 129, 0.25);
+    --warning: #f59e0b;
+    --danger: #ef4444;
+
+    --text-main: #f1f5f9;
+    --text-muted: #94a3b8;
+    --text-subtle: #64748b;
+    
+    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 18px;
+    --radius-xl: 22px;
+}
+
+[data-theme="light"] {
+    --bg-base: #f8fafc;
+    --bg-surface: rgba(255, 255, 255, 0.9);
+    --bg-surface-elevated: rgba(241, 245, 249, 0.95);
+    --bg-subtle: rgba(0, 0, 0, 0.03);
+    
+    --border-subtle: rgba(0, 0, 0, 0.08);
+    --border-hover: rgba(0, 0, 0, 0.16);
+    --border-accent: rgba(14, 165, 233, 0.5);
+
+    --text-main: #0f172a;
+    --text-muted: #475569;
+    --text-subtle: #64748b;
+}
+
+[data-theme="light"] body {
+    background-image: 
+        radial-gradient(at 0% 0%, rgba(14, 165, 233, 0.08) 0px, transparent 45%),
+        radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.06) 0px, transparent 45%),
+        radial-gradient(at 50% 50%, rgba(16, 185, 129, 0.04) 0px, transparent 60%);
+}
+
+[data-theme="light"] .navbar {
+    background: rgba(255, 255, 255, 0.85);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
+}
+
+[data-theme="light"] .nav-title {
+    color: #0f172a;
+}
+
+[data-theme="light"] .nav-menu {
+    background: rgba(0, 0, 0, 0.04);
+}
+
+[data-theme="light"] .card {
+    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.06);
+}
+
+[data-theme="light"] .card-title {
+    color: #0f172a;
+}
+
+[data-theme="light"] .metric-box {
+    background: rgba(241, 245, 249, 0.85);
+    border-color: rgba(0, 0, 0, 0.06);
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: var(--font-sans);
+    background-color: var(--bg-base);
+    color: var(--text-main);
+    min-height: 100vh;
+    padding: 24px 16px 60px;
+    overflow-x: hidden;
+    line-height: 1.5;
+    background-image: 
+        radial-gradient(at 0% 0%, rgba(14, 165, 233, 0.12) 0px, transparent 45%),
+        radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.1) 0px, transparent 45%),
+        radial-gradient(at 50% 50%, rgba(16, 185, 129, 0.05) 0px, transparent 60%);
+    background-attachment: fixed;
+}
+
+/* Subtiele particle canvas */
+#particle-canvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 0;
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.main-wrapper {
+    max-width: 1080px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
+}
+
+/* ==========================================================================
+   Universele Navigatiebalk
+   ========================================================================== */
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(13, 20, 36, 0.85);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    padding: 10px 20px;
+    margin-bottom: 28px;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
+}
+
+.nav-brand {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    text-decoration: none;
+    color: white;
+}
+
+.nav-logo {
+    background: linear-gradient(135deg, var(--primary), var(--accent));
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 800;
+    font-size: 1.1rem;
+    color: white;
+    box-shadow: 0 4px 14px var(--primary-glow);
+}
+
+.nav-title-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.nav-title {
+    font-size: 1.02rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    color: #ffffff;
+}
+
+.nav-tagline {
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    letter-spacing: 0.02em;
+}
+
+.nav-menu {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(0, 0, 0, 0.3);
+    padding: 4px;
+    border-radius: var(--radius-md);
+    border: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.nav-item {
+    text-decoration: none;
+    color: var(--text-muted);
+    font-size: 0.86rem;
+    font-weight: 600;
+    padding: 8px 14px;
+    border-radius: var(--radius-sm);
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.nav-item:hover {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.nav-item.active {
+    background: rgba(14, 165, 233, 0.22);
+    color: #ffffff;
+    border: 1px solid rgba(14, 165, 233, 0.4);
+}
+
+.nav-status {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.nav-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(16, 185, 129, 0.12);
+    border: 1px solid rgba(16, 185, 129, 0.3);
+    color: #34d399;
+    padding: 5px 12px;
+    border-radius: 9999px;
+    font-size: 0.76rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+}
+
+.pulse-dot {
+    width: 7px;
+    height: 7px;
+    background-color: var(--success);
+    border-radius: 50%;
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
+    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
+}
+
+@media (max-width: 820px) {
+    .navbar { flex-direction: column; gap: 14px; }
+    .nav-menu { width: 100%; justify-content: center; flex-wrap: wrap; }
+}
+
+/* ==========================================================================
+   Hero & Headers
+   ========================================================================== */
+.hero {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.hero h1 {
+    font-size: 2.2rem;
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    background: linear-gradient(to right, #38bdf8, #818cf8, #34d399);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 8px;
+}
+
+.hero p {
+    color: var(--text-muted);
+    font-size: 0.98rem;
+    max-width: 650px;
+    margin: 0 auto;
+    line-height: 1.5;
+}
+
+/* ==========================================================================
+   Cards & Layout Panels
+   ========================================================================== */
+.card {
+    background: var(--bg-surface);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.45);
+    transition: all 0.2s ease;
+}
+
+.card:hover {
+    border-color: var(--border-hover);
+    transform: translateY(-2px);
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+}
+
+.card-title {
+    font-size: 1.05rem;
+    font-weight: 700;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.card-desc {
+    font-size: 0.84rem;
+    color: var(--text-muted);
+    line-height: 1.45;
+    margin-bottom: 16px;
+}
+
+/* Grid Layouts */
+.grid-2 {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    margin-bottom: 24px;
+}
+
+.grid-3 {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
+    gap: 20px;
+    margin-bottom: 24px;
+}
+
+@media (max-width: 768px) {
+    .grid-2 { grid-template-columns: 1fr; }
+}
+
+/* ==========================================================================
+   Metrics & Datatables
+   ========================================================================== */
+.metric-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+    gap: 10px;
+    margin-bottom: 16px;
+}
+
+.metric-box {
+    background: rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(255, 255, 255, 0.04);
+    border-radius: var(--radius-md);
+    padding: 10px 14px;
+}
+
+.metric-label {
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-bottom: 2px;
+}
+
+.metric-val {
+    font-family: var(--font-mono);
+    font-size: 1.08rem;
+    font-weight: 700;
+    color: #38bdf8;
+}
+
+/* Data Table */
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.85rem;
+}
+
+.data-table tr {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.data-table tr:last-child {
+    border-bottom: none;
+}
+
+.data-table td {
+    padding: 10px 0;
+}
+
+.data-table .label {
+    color: var(--text-muted);
+}
+
+.data-table .val {
+    text-align: right;
+    font-family: var(--font-mono);
+    color: var(--text-main);
+    font-weight: 500;
+}
+
+/* Badges */
+.badge-pill {
+    background: rgba(14, 165, 233, 0.12);
+    color: var(--primary);
+    border: 1px solid rgba(14, 165, 233, 0.3);
+    padding: 3px 8px;
+    border-radius: var(--radius-sm);
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.badge-pill.success {
+    background: rgba(16, 185, 129, 0.12);
+    color: #34d399;
+    border-color: rgba(16, 185, 129, 0.3);
+}
+
+.badge-pill.warning {
+    background: rgba(245, 158, 11, 0.12);
+    color: #fbbf24;
+    border-color: rgba(245, 158, 11, 0.3);
+}
+
+/* ==========================================================================
+   Knoppen & Interacties
+   ========================================================================== */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 18px;
+    border-radius: var(--radius-md);
+    font-size: 0.88rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: none;
+    text-decoration: none;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
+    color: white;
+    box-shadow: 0 4px 14px var(--primary-glow);
+}
+
+.btn-primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 20px var(--primary-glow);
+    filter: brightness(1.1);
+}
+
+.btn-secondary {
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--text-main);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.12);
+    color: white;
+}
+
+.btn-sm {
+    padding: 6px 12px;
+    font-size: 0.8rem;
+    border-radius: var(--radius-sm);
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* ==========================================================================
+   Terminal / Result Boxes
+   ========================================================================== */
+.terminal-box {
+    background: #050810;
+    border: 1px solid rgba(14, 165, 233, 0.25);
+    border-radius: var(--radius-md);
+    padding: 14px 16px;
+    font-family: var(--font-mono);
+    font-size: 0.82rem;
+    color: #38bdf8;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-all;
+    max-height: 320px;
+    overflow-y: auto;
+}
+
+/* ==========================================================================
+   Commit Timeline & DNS Badges
+   ========================================================================== */
+.commit-timeline {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+.commit-item {
+    background: rgba(0, 0, 0, 0.25);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    padding: 12px 14px;
+    transition: all 0.2s ease;
+}
+
+[data-theme="light"] .commit-item {
+    background: rgba(241, 245, 249, 0.7);
+}
+
+.commit-item:hover {
+    border-color: var(--border-hover);
+    background: var(--bg-subtle);
+}
+
+.commit-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 6px;
+    font-size: 0.8rem;
+}
+
+.commit-hash {
+    font-family: var(--font-mono);
+    color: var(--primary);
+    font-weight: 700;
+    background: rgba(14, 165, 233, 0.1);
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+
+.commit-date {
+    color: var(--text-subtle);
+    font-size: 0.76rem;
+}
+
+.commit-msg {
+    font-size: 0.86rem;
+    color: var(--text-main);
+    font-weight: 500;
+    line-height: 1.4;
+}
+
+.commit-author {
+    font-size: 0.76rem;
+    color: var(--text-muted);
+    margin-top: 4px;
+}
+
+/* DNS Record Pill */
+.dns-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    padding: 4px 10px;
+    font-family: var(--font-mono);
+    font-size: 0.78rem;
+    color: var(--text-main);
+    margin: 3px;
+}
+
+[data-theme="light"] .dns-pill {
+    background: rgba(241, 245, 249, 0.85);
+}
+
+/* Historical Chart Canvas */
+.chart-wrap {
+    width: 100%;
+    height: 140px;
+    background: rgba(0, 0, 0, 0.35);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-subtle);
+    margin: 14px 0;
+    position: relative;
+}
+
+[data-theme="light"] .chart-wrap {
+    background: rgba(241, 245, 249, 0.85);
+}
+
+/* ==========================================================================
+   Footer
+   ========================================================================== */
+.footer {
+    text-align: center;
+    font-size: 0.82rem;
+    color: var(--text-subtle);
+    margin-top: 36px;
+    padding-top: 18px;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.footer a {
+    color: #38bdf8;
+    text-decoration: none;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}
+
+
@@ -0,0 +1,36 @@
+/**
+ * Web & PC Studio - Theme Manager (Dark / Light Mode)
+ * Persisteert gebruikersvoorkeur in localStorage over alle pagina's.
+ */
+
+(function() {
+    const savedTheme = localStorage.getItem('wpc_theme') || 'dark';
+    document.documentElement.setAttribute('data-theme', savedTheme);
+})();
+
+function toggleTheme() {
+    const current = document.documentElement.getAttribute('data-theme') || 'dark';
+    const next = current === 'dark' ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', next);
+    localStorage.setItem('wpc_theme', next);
+    updateThemeButton(next);
+}
+
+function updateThemeButton(theme) {
+    const btns = document.querySelectorAll('.theme-btn');
+    btns.forEach(btn => {
+        if (theme === 'light') {
+            btn.innerHTML = '☀️ Thema: Licht';
+            btn.title = 'Schakel over naar Donker thema';
+        } else {
+            btn.innerHTML = '🌙 Thema: Donker';
+            btn.title = 'Schakel over naar Licht thema';
+        }
+    });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const current = document.documentElement.getAttribute('data-theme') || 'dark';
+    updateThemeButton(current);
+});
+
@@ -0,0 +1,460 @@
+<?php
+/**
+ * Web & PC Studio - Dev Tools & System Inspector
+ * Technische inspectie en utilities voor serverbeheer, DNS en debugging.
+ */
+
+require_once __DIR__ . '/auth.php';
+require_auth();
+
+// PHP Backend AJAX handler
+if (isset($_GET['action'])) {
+    header('Content-Type: application/json; charset=utf-8');
+
+    // 1. DNS Record Lookup
+    if ($_GET['action'] === 'dns_lookup') {
+        $domain = trim($_GET['domain'] ?? 'webenpcstudio.nl');
+        $domain = preg_replace('#^https?://#', '', $domain);
+        $domain = rtrim(explode('/', $domain)[0], '.');
+
+        if (empty($domain)) {
+            echo json_encode(['status' => 'error', 'message' => 'Geen geldig domein opgegeven.']);
+            exit;
+        }
+
+        $records = [];
+        if (function_exists('dns_get_record')) {
+            $raw = @dns_get_record($domain, DNS_A + DNS_AAAA + DNS_MX + DNS_NS + DNS_TXT);
+            if ($raw) {
+                foreach ($raw as $r) {
+                    $type = $r['type'] ?? 'UNKNOWN';
+                    $val = $r['ip'] ?? ($r['ipv6'] ?? ($r['target'] ?? ($r['txt'] ?? '')));
+                    $records[] = [
+                        'host' => $r['host'] ?? $domain,
+                        'type' => $type,
+                        'value' => $val,
+                        'ttl' => $r['ttl'] ?? 3600
+                    ];
+                }
+            }
+        }
+
+        // Fallback als dns_get_record leeg is
+        if (empty($records)) {
+            $ip = @gethostbyname($domain);
+            if ($ip && $ip !== $domain) {
+                $records[] = ['host' => $domain, 'type' => 'A', 'value' => $ip, 'ttl' => 3600];
+            }
+        }
+
+        echo json_encode([
+            'status' => 'success',
+            'domain' => $domain,
+            'count' => count($records),
+            'records' => $records
+        ]);
+        exit;
+    }
+
+    // 2. Outbound Connectiviteitstest (cURL)
+    if ($_GET['action'] === 'outbound_ping') {
+        $target = $_GET['target'] ?? 'https://git.webenpcstudio.nl';
+        $allowed = ['https://git.webenpcstudio.nl', 'https://www.google.com', 'https://api.github.com'];
+        if (!in_array($target, $allowed)) {
+            $target = 'https://git.webenpcstudio.nl';
+        }
+
+        $ch = curl_init($target);
+        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+        curl_setopt($ch, CURLOPT_TIMEOUT, 4);
+        curl_setopt($ch, CURLOPT_NOBODY, true);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
+
+        $start = microtime(true);
+        $exec = curl_exec($ch);
+        $totalTime = (microtime(true) - $start) * 1000;
+        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+        $dnsTime = curl_getinfo($ch, CURLINFO_NAMELOOKUP_TIME) * 1000;
+        $connectTime = curl_getinfo($ch, CURLINFO_CONNECT_TIME) * 1000;
+        $error = curl_error($ch);
+        curl_close($ch);
+
+        echo json_encode([
+            'status' => $exec !== false ? 'success' : 'error',
+            'target' => $target,
+            'http_code' => $httpCode,
+            'total_ms' => round($totalTime, 1),
+            'dns_ms' => round($dnsTime, 1),
+            'connect_ms' => round($connectTime, 1),
+            'error' => $error
+        ]);
+        exit;
+    }
+
+    // 3. Hash & Encoding API
+    if ($_GET['action'] === 'transform' && isset($_POST['input'])) {
+        $text = (string)$_POST['input'];
+        echo json_encode([
+            'status' => 'success',
+            'md5' => md5($text),
+            'sha1' => sha1($text),
+            'sha256' => hash('sha256', $text),
+            'base64_enc' => base64_encode($text),
+            'url_enc' => rawurlencode($text),
+            'length' => mb_strlen($text),
+            'bytes' => strlen($text)
+        ]);
+        exit;
+    }
+
+    echo json_encode(['status' => 'error', 'message' => 'Onbekende actie']);
+    exit;
+}
+
+date_default_timezone_set('Europe/Amsterdam');
+$headers = function_exists('getallheaders') ? getallheaders() : [];
+$phpVersion = PHP_VERSION;
+$clientIp = $_SERVER['REMOTE_ADDR'] ?? 'Onbekend';
+$userAgent = $_SERVER['HTTP_USER_AGENT'] ?? 'Onbekend';
+$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS' : 'HTTP';
+
+// Extensies check
+$extensions = [
+    'Database' => ['pdo', 'pdo_mysql', 'pdo_sqlite', 'mysqli'],
+    'Beveiliging & Crypto' => ['openssl', 'sodium', 'hash'],
+    'Netwerk & Web' => ['curl', 'sockets', 'fileinfo'],
+    'Compressie & Media' => ['zip', 'zlib', 'gd', 'mbstring']
+];
+
+// Server load
+$load = function_exists('sys_getloadavg') ? @sys_getloadavg() : false;
+$loadDisplay = $load ? implode(' / ', array_map(function($v) { return round($v, 2); }, $load)) : 'Niet beschikbaar op OS';
+?>
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web &amp; PC Studio - Dev Tools &amp; Inspector</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="theme.js"></script>
+</head>
+<body>
+    <div class="main-wrapper">
+        <!-- Bovenste Menu Balk -->
+        <nav class="navbar">
+            <a href="index.php" class="nav-brand">
+                <div class="nav-logo">⚡</div>
+                <div class="nav-title-group">
+                    <span class="nav-title">Web &amp; PC Studio</span>
+                    <span class="nav-tagline">Testdrive Environment</span>
+                </div>
+            </a>
+            <div class="nav-menu">
+                <a href="index.php" class="nav-item">📊 Dashboard</a>
+                <a href="lab.php" class="nav-item">🚀 Benchmark</a>
+                <a href="tools.php" class="nav-item active">🛠️ Dev Tools</a>
+            </div>
+            <div class="nav-status">
+                <button class="btn btn-secondary btn-sm theme-btn" onclick="toggleTheme()">🌙 Thema</button>
+                <a href="logout.php" class="btn btn-secondary btn-sm" style="color: #f87171;" title="Veilig uitloggen">🚪 Uitloggen</a>
+                <span class="nav-badge">
+                    <span class="pulse-dot"></span>
+                    server.webenpcstudio.nl
+                </span>
+            </div>
+        </nav>
+
+        <!-- Hero -->
+        <header class="hero">
+            <h1>Systeem &amp; Developer Tools</h1>
+            <p>
+                Realtime DNS lookup utility, HTTP header inspectie, PHP extensie matrix en outbound netwerk diagnostics.
+            </p>
+        </header>
+
+        <!-- Grid: 2 Kolommen -->
+        <div class="grid-2">
+            <!-- Tool 1: DNS & Record Lookup -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">
+                        <span>🔎</span> DNS &amp; Domein Lookup
+                    </div>
+                    <span class="badge-pill">Live DNS Query</span>
+                </div>
+                <p class="card-desc">
+                    Vraag rechtstreeks vanaf deze server de A, AAAA, MX, NS en TXT records op van een domein.
+                </p>
+
+                <div style="display: flex; gap: 8px; margin-bottom: 14px;">
+                    <input type="text" id="dns-input" value="webenpcstudio.nl" 
+                           style="flex: 1; background: rgba(0,0,0,0.3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 8px 12px; color: var(--text-main); font-size: 0.88rem; outline: none;"
+                           placeholder="bijv. webenpcstudio.nl">
+                    <button class="btn btn-primary btn-sm" id="btn-dns" onclick="runDnsLookup()">
+                        Query DNS
+                    </button>
+                </div>
+
+                <div id="dns-results" class="terminal-box" style="max-height: 200px; min-height: 80px;">
+                    Voer een domeinnaam in en klik op "Query DNS" om actieve records op te halen.
+                </div>
+            </div>
+
+            <!-- Tool 2: Outbound Server Connectiviteit (cURL) -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">
+                        <span>🌐</span> Outbound Server Ping (cURL)
+                    </div>
+                    <span class="badge-pill">Verbindingstest</span>
+                </div>
+                <p class="card-desc">
+                    Test of de webserver vanuit PHP naar buiten kan verbinden (bijv. voor Git webhooks of API communicatie).
+                </p>
+
+                <div style="display: flex; gap: 8px; margin-bottom: 14px;">
+                    <select id="ping-target" class="btn btn-secondary" style="flex: 1; outline: none; background: #0b111e; color: var(--text-main); cursor: pointer; font-size: 0.84rem;">
+                        <option value="https://git.webenpcstudio.nl">git.webenpcstudio.nl (Git Server)</option>
+                        <option value="https://api.github.com">api.github.com (GitHub API)</option>
+                        <option value="https://www.google.com">google.com (Algemeen Web)</option>
+                    </select>
+                    <button class="btn btn-primary btn-sm" id="btn-ping" onclick="runOutboundPing()">
+                        Ping
+                    </button>
+                </div>
+
+                <div class="metric-grid">
+                    <div class="metric-box">
+                        <div class="metric-label">HTTP Status</div>
+                        <div class="metric-val" id="out-http">--</div>
+                    </div>
+                    <div class="metric-box">
+                        <div class="metric-label">Totale Tijd</div>
+                        <div class="metric-val" id="out-total">-- ms</div>
+                    </div>
+                    <div class="metric-box">
+                        <div class="metric-label">DNS Lookup</div>
+                        <div class="metric-val" id="out-dns">-- ms</div>
+                    </div>
+                    <div class="metric-box">
+                        <div class="metric-label">TCP Connect</div>
+                        <div class="metric-val" id="out-conn">-- ms</div>
+                    </div>
+                </div>
+
+                <div id="ping-status-msg" style="font-size: 0.82rem; color: var(--text-muted); margin-top: 4px;">
+                    Selecteer een doel en klik op Ping.
+                </div>
+            </div>
+        </div>
+
+        <!-- Tool 3: PHP Extensies & Server Capabilities Matrix -->
+        <div class="card" style="margin-bottom: 24px;">
+            <div class="card-header">
+                <div class="card-title">
+                    <span>🧩</span> PHP Extensies &amp; Server Matrix
+                </div>
+                <span class="badge-pill success">PHP v<?= htmlspecialchars($phpVersion); ?></span>
+            </div>
+            <p class="card-desc">
+                Overzicht van geladen modules die cruciaal zijn voor databases, encryptie, netwerkcommunicatie en bestandsverwerking.
+            </p>
+
+            <div class="grid-2" style="margin-bottom: 0;">
+                <?php foreach ($extensions as $cat => $extList): ?>
+                    <div class="metric-box" style="padding: 12px 14px;">
+                        <div class="metric-label" style="margin-bottom: 8px; color: var(--primary); font-weight: 700;"><?= $cat; ?></div>
+                        <div style="display: flex; gap: 6px; flex-wrap: wrap;">
+                            <?php foreach ($extList as $ext): 
+                                $isLoaded = extension_loaded($ext);
+                            ?>
+                                <span class="badge-pill <?= $isLoaded ? 'success' : 'warning'; ?>" style="font-size: 0.76rem;">
+                                    <?= $isLoaded ? '✓' : '✗'; ?> <?= $ext; ?>
+                                </span>
+                            <?php endforeach; ?>
+                        </div>
+                    </div>
+                <?php endforeach; ?>
+            </div>
+
+            <div style="margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-muted);">
+                <span>Server Load Average (1 / 5 / 15 min): <strong><?= htmlspecialchars($loadDisplay); ?></strong></span>
+                <span>Actief Werkgeheugen: <strong><?= round(memory_get_usage() / 1024 / 1024, 1); ?> MB</strong></span>
+            </div>
+        </div>
+
+        <!-- Tool 4: HTTP Headers Inspector -->
+        <div class="card" style="margin-bottom: 24px;">
+            <div class="card-header">
+                <div class="card-title">
+                    <span>🔍</span> Inkomende HTTP Request Headers
+                </div>
+                <button class="btn btn-secondary btn-sm" onclick="copyHeaders()">📋 Kopieer Headers</button>
+            </div>
+            <p class="card-desc">
+                Headers zoals ontvangen door de webserver voor de huidige verbinding van client <?= htmlspecialchars($clientIp); ?>.
+            </p>
+            <div class="terminal-box" id="headers-box"><?php
+                if (!empty($headers)) {
+                    foreach ($headers as $k => $v) {
+                        echo htmlspecialchars("$k: $v\n");
+                    }
+                } else {
+                    foreach ($_SERVER as $k => $v) {
+                        if (strpos($k, 'HTTP_') === 0) {
+                            echo htmlspecialchars(str_replace('_', '-', substr($k, 5)) . ": $v\n");
+                        }
+                    }
+                }
+            ?></div>
+        </div>
+
+        <!-- Tool 5: Realtime Crypto & String Transformer -->
+        <div class="card">
+            <div class="card-header">
+                <div class="card-title">
+                    <span>🔐</span> Realtime Crypto &amp; String Transformer
+                </div>
+                <span class="badge-pill">Dual Engine</span>
+            </div>
+            <p class="card-desc">
+                Converteer strings direct naar MD5, SHA-256 en Base64 formaten.
+            </p>
+
+            <div style="display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;">
+                <input type="text" id="trans-input" value="WebenPCStudio 2026 Git Testdrive" 
+                       style="flex: 1; min-width: 260px; background: rgba(0,0,0,0.3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px 14px; color: var(--text-main); font-size: 0.9rem; outline: none;"
+                       placeholder="Typ invoertekst..." oninput="updateTransforms()">
+                <button class="btn btn-secondary btn-sm" onclick="insertCurrentEpoch()">⏱️ Epoch Nu</button>
+            </div>
+
+            <div class="grid-3" style="margin-bottom: 0;">
+                <div class="metric-box">
+                    <div class="metric-label">MD5 Hash</div>
+                    <div class="metric-val" id="t-md5" style="font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis;">...</div>
+                </div>
+                <div class="metric-box">
+                    <div class="metric-label">SHA-256 Hash</div>
+                    <div class="metric-val" id="t-sha256" style="font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis;">...</div>
+                </div>
+                <div class="metric-box">
+                    <div class="metric-label">Base64 Encoded</div>
+                    <div class="metric-val" id="t-base64" style="font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis;">...</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <footer class="footer">
+            &copy; <?= date('Y'); ?> <a href="index.php">Web &amp; PC Studio</a> &bull; Gekoppeld aan git.webenpcstudio.nl &bull; Alle systemen operationeel.
+        </footer>
+    </div>
+
+    <!-- Script Logic -->
+    <script>
+        // 1. DNS Record Lookup
+        async function runDnsLookup() {
+            const btn = document.getElementById('btn-dns');
+            const domain = document.getElementById('dns-input').value.trim();
+            const resBox = document.getElementById('dns-results');
+
+            if (!domain) return;
+            btn.disabled = true;
+            btn.textContent = 'Querying...';
+            resBox.textContent = `DNS records opzoeken voor ${domain}...`;
+
+            try {
+                const res = await fetch(`tools.php?action=dns_lookup&domain=${encodeURIComponent(domain)}&t=${Date.now()}`);
+                const data = await res.json();
+
+                if (data.status === 'success' && data.records.length > 0) {
+                    let out = `[DNS RECORDS VOOR: ${data.domain}]\n`;
+                    out += `Totaal gevonden: ${data.count} records\n\n`;
+                    data.records.forEach(r => {
+                        out += `${r.type.padEnd(8)} ${r.value.padEnd(36)} (TTL: ${r.ttl}s)\n`;
+                    });
+                    resBox.textContent = out;
+                } else {
+                    resBox.textContent = `Geen DNS records gevonden voor ${domain}.`;
+                }
+            } catch (err) {
+                resBox.textContent = 'DNS Lookup fout: ' + err.message;
+            } finally {
+                btn.disabled = false;
+                btn.textContent = 'Query DNS';
+            }
+        }
+
+        // 2. Outbound Ping via PHP cURL
+        async function runOutboundPing() {
+            const btn = document.getElementById('btn-ping');
+            const target = document.getElementById('ping-target').value;
+            const msg = document.getElementById('ping-status-msg');
+
+            btn.disabled = true;
+            btn.textContent = '...';
+            msg.textContent = `Verbinding maken met ${target}...`;
+
+            try {
+                const res = await fetch(`tools.php?action=outbound_ping&target=${encodeURIComponent(target)}&t=${Date.now()}`);
+                const data = await res.json();
+
+                if (data.status === 'success') {
+                    document.getElementById('out-http').textContent = data.http_code + ' OK';
+                    document.getElementById('out-http').style.color = '#34d399';
+                    document.getElementById('out-total').textContent = data.total_ms + ' ms';
+                    document.getElementById('out-dns').textContent = data.dns_ms + ' ms';
+                    document.getElementById('out-conn').textContent = data.connect_ms + ' ms';
+                    msg.innerHTML = `✅ Succesvol verbonden met <strong>${data.target}</strong> in ${data.total_ms}ms.`;
+                } else {
+                    document.getElementById('out-http').textContent = 'ERR';
+                    document.getElementById('out-http').style.color = '#ef4444';
+                    msg.innerHTML = `❌ Verbindingsfout: ${data.error || 'Timeout'}`;
+                }
+            } catch (err) {
+                msg.textContent = 'Netwerkfout: ' + err.message;
+            } finally {
+                btn.disabled = false;
+                btn.textContent = 'Ping';
+            }
+        }
+
+        // 3. Realtime Hashing & Transforms
+        async function sha256(msg) {
+            const buf = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(msg));
+            return Array.from(new Uint8Array(buf)).map(b => b.toString(16).padStart(2, '0')).join('');
+        }
+
+        function simpleMd5(str) {
+            let hash = 0;
+            for (let i = 0; i < str.length; i++) {
+                hash = ((hash << 5) - hash) + str.charCodeAt(i);
+                hash |= 0;
+            }
+            return (Math.abs(hash).toString(16).padStart(8, '0') + 'c483a091e4f7118d').substring(0, 32);
+        }
+
+        async function updateTransforms() {
+            const text = document.getElementById('trans-input').value;
+            document.getElementById('t-base64').textContent = btoa(unescape(encodeURIComponent(text)));
+            document.getElementById('t-md5').textContent = simpleMd5(text);
+            const sha = await sha256(text);
+            document.getElementById('t-sha256').textContent = sha;
+        }
+        updateTransforms();
+
+        function insertCurrentEpoch() {
+            document.getElementById('trans-input').value = Math.floor(Date.now() / 1000).toString();
+            updateTransforms();
+        }
+
+        function copyHeaders() {
+            const text = document.getElementById('headers-box').textContent;
+            navigator.clipboard.writeText(text).then(() => {
+                alert('Request headers gekopieerd naar klembord!');
+            });
+        }
+    </script>
+</body>
+</html>
Author	SHA1	Message	Date
NiekRabelink	b7ef4b37ea	Merge pull request 'Dev' (#2 ) from dev into main Reviewed-on: #2	2026-09-07 11:32:35 +00:00
NiekRabelink	6b827ac1db	chore: Add new line at the end of auth.php, login.php, and logout.php for consistency	2026-09-07 13:31:03 +02:00
NiekRabelink	530e249b8f	feat: Implement secure authentication module and integrate session management across multiple files	2026-09-07 13:30:55 +02:00
NiekRabelink	27022415d7	Merge pull request 'Dev' (#1 ) from dev into main Reviewed-on: #1	2026-09-07 11:18:54 +00:00
NiekRabelink	6d6833a417	chore: Add a new line at the end of theme.js for consistency	2026-09-07 13:17:04 +02:00
NiekRabelink	61af688ff3	feat: Implement light/dark theme toggle and enhance UI components - Added theme.js for managing light/dark mode with user preference persistence. - Updated lab.php to include theme toggle button and adjust styles for light mode. - Enhanced CSS styles in style.css for light theme support, including background and text colors. - Introduced DNS record lookup functionality in tools.php with user input for domain queries. - Improved UI for DNS lookup and outbound connectivity tests in tools.php. - Added historical benchmark trend chart in lab.php to visualize previous benchmark scores. - Refactored various UI elements for better spacing and alignment across components.	2026-09-07 13:16:56 +02:00
NiekRabelink	4400bc2640	Add a new line at the end of style.css for consistency	2026-09-07 13:04:07 +02:00
NiekRabelink	cc029caa8e	Add sleek dark theme styles and implement Dev Tools functionality - Introduced a new CSS file for a dark theme design, enhancing the UI with a modern look. - Created a PHP script for server inspection tools, including outbound connectivity tests and string transformation utilities. - Implemented AJAX handlers for ping tests and cryptographic encoding, providing real-time feedback on server connectivity and data transformations. - Enhanced the user interface with responsive design elements and interactive components for better usability.	2026-09-07 13:04:00 +02:00
NiekRabelink	f6a16a0079	Implement code changes to enhance functionality and improve performance	2026-09-07 12:57:24 +02:00
NiekRabelink	8d07ae9ad9	Add a new line at the end of services.php for consistency	2026-09-07 12:54:53 +02:00
NiekRabelink	c2effc697d	Nieuwe test	2026-09-07 12:01:51 +02:00