From 76764e2995a5b853c28b8a4ad4c6477c5cc123e9 Mon Sep 17 00:00:00 2001
From: Fabian Schieder <fabian.schieder.1010@gmail.com>
Date: Sat, 28 Feb 2026 19:43:58 +0100
Subject: [PATCH] Add initial implementation of mini database management tool
 with environment configuration and server status monitoring

---
 .env.example                              |  10 +
 .gitignore                                |  10 +
 adminer/README.md                         |  18 +
 adminer/adminer.php                       |  19 +
 adminer/auth.php                          |  96 +++++
 adminer/env.php                           |  49 +++
 adminer/index.php                         | 217 ++++++++++
 adminer/views.php                         |  41 ++
 assets/js/main.js                         |  96 +++++
 includes/config/projects.php              |  77 ++++
 includes/config/server_status_targets.php |  35 ++
 includes/lib/server_status.php            | 175 ++++++++
 includes/lib/view_helpers.php             |  14 +
 includes/views/footer.php                 |   4 +
 includes/views/header.php                 |   6 +
 includes/views/layout_foot.php            |   5 +
 includes/views/layout_head.php            |  18 +
 includes/views/projects_section.php       |  91 +++++
 index.php                                 | 475 +---------------------
 19 files changed, 993 insertions(+), 463 deletions(-)
 create mode 100644 .env.example
 create mode 100644 adminer/README.md
 create mode 100644 adminer/adminer.php
 create mode 100644 adminer/auth.php
 create mode 100644 adminer/env.php
 create mode 100644 adminer/index.php
 create mode 100644 adminer/views.php
 create mode 100644 assets/js/main.js
 create mode 100644 includes/config/projects.php
 create mode 100644 includes/config/server_status_targets.php
 create mode 100644 includes/lib/server_status.php
 create mode 100644 includes/lib/view_helpers.php
 create mode 100644 includes/views/footer.php
 create mode 100644 includes/views/header.php
 create mode 100644 includes/views/layout_foot.php
 create mode 100644 includes/views/layout_head.php
 create mode 100644 includes/views/projects_section.php

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..91aeebb
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,10 @@
+# Beispiel für lokale Secrets. NICHT committen: nutze .env
+DB_SERVERNAME=localhost
+DB_PORT=3306
+DB_USERNAME=FSST
+DB_PASSWORD=change-me
+DB_DATABASE=FSS_T
+
+# Optional: Basis-URL (wenn du was dynamisch bauen willst)
+APP_URL=https://fabianschieder.com
+
diff --git a/.gitignore b/.gitignore
index 5706cc7..6aa8296 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,13 @@ Thumbs.db
 !icons/
 !icons/*
 
+# Lokale Secrets
+.env
+.env.*
+
+# lokale Cache/Temp-Dateien
+*.log
+*.tmp
+
+# Adminer: echte Single-File-Download-Version optional lokal
+# adminer/adminer.php
diff --git a/adminer/README.md b/adminer/README.md
new file mode 100644
index 0000000..7343427
--- /dev/null
+++ b/adminer/README.md
@@ -0,0 +1,18 @@
+# DB-Verwaltung (Mini-Admin)
+
+Dieses Projekt enthält eine kleine, selbst implementierte DB-Verwaltung unter `/adminer`.
+
+## Setup
+1. Erstelle eine lokale `.env` im Projekt-Root (siehe `.env.example`).
+2. Trage dort deine DB-Zugangsdaten ein.
+
+> Wichtig: `.env` wird durch `.gitignore` ignoriert.
+
+## Nutzung
+- Öffne im Browser: `/adminer`
+- Login erfolgt über das Formular.
+
+## Hinweise
+- Das Tool ist bewusst minimal (Tabellenliste + Browse + einfache SQL-Query).
+- Für produktive Nutzung bitte zusätzlich absichern (z.B. Basic Auth / IP-Allowlist).
+
diff --git a/adminer/adminer.php b/adminer/adminer.php
new file mode 100644
index 0000000..e9cf603
--- /dev/null
+++ b/adminer/adminer.php
@@ -0,0 +1,19 @@
+<?php
+declare(strict_types=1);
+
+/**
+ * Adminer Loader (ohne Secrets im Repo)
+ *
+ * Damit /adminer funktioniert, brauchst du hier Adminer als Single-File.
+ * Aus Lizenz/Copyright-Gründen wird Adminer nicht automatisch hier eingebettet.
+ *
+ * Vorgehen:
+ * - Lade adminer.php von https://www.adminer.org/ herunter
+ * - Ersetze diese Datei durch die echte Adminer-Datei
+ */
+
+http_response_code(501);
+header('Content-Type: text/plain; charset=utf-8');
+echo "Adminer ist noch nicht installiert.\n";
+echo "Bitte lade die Datei 'adminer.php' von https://www.adminer.org/ herunter und ersetze diese Datei.\n";
+
diff --git a/adminer/auth.php b/adminer/auth.php
new file mode 100644
index 0000000..2819b8c
--- /dev/null
+++ b/adminer/auth.php
@@ -0,0 +1,96 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/env.php';
+
+function admin_session_start()
+{
+    if (session_status() === PHP_SESSION_NONE) {
+        // Better defaults
+        ini_set('session.cookie_httponly', '1');
+        if (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') {
+            ini_set('session.cookie_secure', '1');
+        }
+        session_start();
+    }
+}
+
+function admin_is_logged_in()
+{
+    admin_session_start();
+    return !empty($_SESSION['db_admin']['ok']);
+}
+
+function admin_logout()
+{
+    admin_session_start();
+    unset($_SESSION['db_admin']);
+}
+
+function admin_default_creds(): array
+{
+    $vars = env_load(dirname(__DIR__) . '/.env');
+
+    return [
+        'host' => env_get($vars, 'DB_SERVERNAME', 'localhost') ?? 'localhost',
+        'port' => (int)(env_get($vars, 'DB_PORT', '3306') ?? '3306'),
+        'user' => env_get($vars, 'DB_USERNAME', '') ?? '',
+        'pass' => env_get($vars, 'DB_PASSWORD', '') ?? '',
+        'db'   => env_get($vars, 'DB_DATABASE', '') ?? '',
+    ];
+}
+
+function admin_try_login(string $host, int $port, string $user, string $pass, string $db): array
+{
+    // Basic validation
+    if ($host === '' || $port <= 0 || $user === '' || $db === '') {
+        return ['ok' => false, 'error' => 'Bitte Host, Port, Benutzer und Datenbank angeben.'];
+    }
+
+    $dsn = sprintf('mysql:host=%s;port=%d;dbname=%s;charset=utf8mb4', $host, $port, $db);
+
+    try {
+        $pdo = new PDO($dsn, $user, $pass, [
+            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
+            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+        ]);
+
+        // smoke query
+        $pdo->query('SELECT 1');
+
+        admin_session_start();
+        $_SESSION['db_admin'] = [
+            'ok' => true,
+            'host' => $host,
+            'port' => $port,
+            'user' => $user,
+            'pass' => $pass,
+            'db' => $db,
+        ];
+
+        return ['ok' => true, 'error' => null];
+    } catch (Throwable $e) {
+        return ['ok' => false, 'error' => 'Login fehlgeschlagen: ' . $e->getMessage()];
+    }
+}
+
+function admin_pdo(): PDO
+{
+    admin_session_start();
+    if (empty($_SESSION['db_admin']['ok'])) {
+        throw new RuntimeException('Nicht eingeloggt');
+    }
+
+    $host = (string)$_SESSION['db_admin']['host'];
+    $port = (int)$_SESSION['db_admin']['port'];
+    $db   = (string)$_SESSION['db_admin']['db'];
+    $user = (string)$_SESSION['db_admin']['user'];
+    $pass = (string)$_SESSION['db_admin']['pass'];
+
+    $dsn = sprintf('mysql:host=%s;port=%d;dbname=%s;charset=utf8mb4', $host, $port, $db);
+
+    return new PDO($dsn, $user, $pass, [
+        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
+        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+    ]);
+}
diff --git a/adminer/env.php b/adminer/env.php
new file mode 100644
index 0000000..3c3b418
--- /dev/null
+++ b/adminer/env.php
@@ -0,0 +1,49 @@
+<?php
+declare(strict_types=1);
+
+/**
+ * Mini .env loader (ohne externe Dependencies).
+ * Liest KEY=VALUE aus Projekt-Root .env.
+ */
+
+function env_load($path)
+{
+    if (!is_file($path)) return [];
+
+    $vars = [];
+    $lines = @file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    if (!is_array($lines)) return [];
+
+    foreach ($lines as $line) {
+        $line = trim($line);
+        if ($line === '' || (isset($line[0]) && $line[0] === '#')) continue;
+
+        $pos = strpos($line, '=');
+        if ($pos === false) continue;
+
+        $k = trim(substr($line, 0, $pos));
+        $v = trim(substr($line, $pos + 1));
+
+        // strip simple quotes
+        $len = strlen($v);
+        if ($len >= 2) {
+            $first = $v[0];
+            $last = $v[$len - 1];
+            if (($first === '"' && $last === '"') || ($first === "'" && $last === "'")) {
+                $v = substr($v, 1, -1);
+            }
+        }
+
+        if ($k !== '') $vars[$k] = $v;
+    }
+
+    return $vars;
+}
+
+function env_get(array $vars, $key, $default = null)
+{
+    if (array_key_exists($key, $vars)) return (string)$vars[$key];
+    $v = getenv((string)$key);
+    if ($v !== false) return (string)$v;
+    return $default;
+}
diff --git a/adminer/index.php b/adminer/index.php
new file mode 100644
index 0000000..7fa97b4
--- /dev/null
+++ b/adminer/index.php
@@ -0,0 +1,217 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/auth.php';
+require_once __DIR__ . '/views.php';
+
+admin_session_start();
+
+$action = (string)($_GET['a'] ?? '');
+if ($action === 'logout') {
+    admin_logout();
+    header('Location: /adminer', true, 302);
+    exit;
+}
+
+// Login
+$error = null;
+$success = null;
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && (string)($_POST['action'] ?? '') === 'login') {
+    $host = trim((string)($_POST['host'] ?? ''));
+    $port = (int)($_POST['port'] ?? 3306);
+    $user = trim((string)($_POST['user'] ?? ''));
+    $pass = (string)($_POST['pass'] ?? '');
+    $db   = trim((string)($_POST['db'] ?? ''));
+
+    $res = admin_try_login($host, $port, $user, $pass, $db);
+    if ($res['ok']) {
+        $success = 'Login erfolgreich.';
+        header('Location: /adminer', true, 302);
+        exit;
+    }
+    $error = (string)($res['error'] ?? 'Login fehlgeschlagen.');
+}
+
+$defaults = admin_default_creds();
+
+// UI when not logged in
+if (!admin_is_logged_in()) {
+    $body = "<div class=\"top\"><h1>DB-Verwaltung</h1><span class=\"pill\">Mini-Admin</span></div>";
+    $body .= "<div class=\"card\">";
+    $body .= "<p class=\"muted\">Login-Daten werden nur in der Session gespeichert. Für Defaults wird <code>.env</code> aus dem Projekt-Root gelesen.</p>";
+
+    if ($error) $body .= '<div class="err">' . h($error) . '</div><br>';
+
+    $body .= "<form method=\"post\">";
+    $body .= "<input type=\"hidden\" name=\"action\" value=\"login\">";
+    $body .= "<div class=\"grid\">";
+
+    $body .= "<div>";
+    $body .= "<label>Host<br><input name=\"host\" value=\"" . h((string)$defaults['host']) . "\"></label><br><br>";
+    $body .= "<label>Port<br><input name=\"port\" type=\"number\" value=\"" . h((string)$defaults['port']) . "\"></label><br><br>";
+    $body .= "<label>Benutzer<br><input name=\"user\" value=\"" . h((string)$defaults['user']) . "\"></label><br><br>";
+    $body .= "<label>Passwort<br><input name=\"pass\" type=\"password\" value=\"\"></label><br><br>";
+    $body .= "<label>Datenbank<br><input name=\"db\" value=\"" . h((string)$defaults['db']) . "\"></label><br><br>";
+    $body .= "<button class=\"btn\" type=\"submit\">Login</button>";
+    $body .= "</div>";
+
+    $body .= "<div>";
+    $body .= "<h3>Hinweise</h3>";
+    $body .= "<ul class=\"muted\">";
+    $body .= "<li>Dieses Tool ist bewusst minimal (Tabellenliste, Browse, SQL Query).</li>";
+    $body .= "<li>Für produktive Nutzung bitte zusätzlich absichern (Basic Auth / IP-Allowlist).</li>";
+    $body .= "</ul>";
+    $body .= "</div>";
+
+    $body .= "</div>";
+    $body .= "</form>";
+    $body .= "</div>";
+
+    admin_layout('DB-Verwaltung', $body);
+    exit;
+}
+
+// Logged-in area
+try {
+    $pdo = admin_pdo();
+
+    $table = (string)($_GET['t'] ?? '');
+    $page  = max(1, (int)($_GET['p'] ?? 1));
+    $limit = 50;
+    $offset = ($page - 1) * $limit;
+
+    $msg = null;
+    $queryResultHtml = '';
+
+    if ($_SERVER['REQUEST_METHOD'] === 'POST' && (string)($_POST['action'] ?? '') === 'query') {
+        $sql = trim((string)($_POST['sql'] ?? ''));
+        if ($sql !== '') {
+            // Allow multiple statements? No. Keep minimal & safer.
+            if (preg_match('/;\s*\S/', $sql)) {
+                $msg = ['type' => 'err', 'text' => 'Bitte nur ein Statement ohne zusätzliche Semikolons ausführen.'];
+            } else {
+                try {
+                    $stmt = $pdo->query($sql);
+                    if ($stmt instanceof PDOStatement) {
+                        $rows = $stmt->fetchAll();
+                        $queryResultHtml .= '<h3>Ergebnis</h3>';
+                        $queryResultHtml .= admin_render_table($rows);
+                        $msg = ['type' => 'ok', 'text' => 'Query ausgeführt.'];
+                    } else {
+                        $msg = ['type' => 'ok', 'text' => 'Statement ausgeführt.'];
+                    }
+                } catch (Throwable $e) {
+                    $msg = ['type' => 'err', 'text' => 'Fehler: ' . $e->getMessage()];
+                }
+            }
+        }
+    }
+
+    // Build left nav tables
+    $tables = $pdo->query('SHOW TABLES')->fetchAll(PDO::FETCH_NUM);
+
+    $body = '<div class="top">'
+        . '<div><h1>DB-Verwaltung</h1><div class="muted">eingeloggt</div></div>'
+        . '<div><a class="btn secondary" href="/adminer?a=logout">Logout</a></div>'
+        . '</div>';
+
+    $body .= '<div class="grid">';
+
+    $body .= '<div class="card">'
+        . '<h3>Tabellen</h3>'
+        . '<div class="muted" style="margin-bottom:8px">Klick zum Anzeigen</div>';
+
+    if (empty($tables)) {
+        $body .= '<div class="muted">Keine Tabellen gefunden.</div>';
+    } else {
+        $body .= '<ul style="list-style:none;padding-left:0;margin:0">';
+        foreach ($tables as $row) {
+            $tname = (string)$row[0];
+            $active = ($tname === $table) ? ' style="font-weight:700"' : '';
+            $body .= '<li><a' . $active . ' href="/adminer?t=' . rawurlencode($tname) . '">' . h($tname) . '</a></li>';
+        }
+        $body .= '</ul>';
+    }
+    $body .= '</div>';
+
+    $body .= '<div class="card">';
+
+    if ($msg) {
+        $cls = $msg['type'] === 'ok' ? 'ok' : 'err';
+        $body .= '<div class="' . $cls . '">' . h($msg['text']) . '</div><br>';
+    }
+
+    // Browse table
+    if ($table !== '') {
+        // naive identifier quoting for MySQL
+        if (!preg_match('/^[A-Za-z0-9_]+$/', $table)) {
+            $body .= '<div class="err">Ungültiger Tabellenname.</div>';
+        } else {
+            $body .= '<h3>Tabelle: <code>' . h($table) . '</code></h3>';
+            $stmt = $pdo->query('SELECT * FROM `' . $table . '` LIMIT ' . (int)$limit . ' OFFSET ' . (int)$offset);
+            $rows = $stmt->fetchAll();
+            $body .= admin_render_table($rows);
+
+            $body .= '<div style="margin-top:10px;display:flex;gap:10px">';
+            if ($page > 1) {
+                $body .= '<a class="btn secondary" href="/adminer?t=' . rawurlencode($table) . '&p=' . ($page - 1) . '">← Zurück</a>';
+            }
+            $body .= '<a class="btn secondary" href="/adminer?t=' . rawurlencode($table) . '&p=' . ($page + 1) . '">Weiter →</a>';
+            $body .= '</div>';
+        }
+
+        $body .= '<hr style="border:0;border-top:1px solid rgba(255,255,255,.10);margin:16px 0">';
+    }
+
+    // Query box
+    $body .= '<h3>SQL Query</h3>';
+    $body .= '<form method="post">'
+        . '<input type="hidden" name="action" value="query">'
+        . '<textarea name="sql" rows="6" spellcheck="false" placeholder="SELECT * FROM ..."></textarea>'
+        . '<div style="margin-top:10px"><button class="btn" type="submit">Ausführen</button></div>'
+        . '</form>';
+
+    $body .= $queryResultHtml;
+
+    $body .= '</div>'; // card
+    $body .= '</div>'; // grid
+
+    admin_layout('DB-Verwaltung', $body);
+} catch (Throwable $e) {
+    // Session invalid, force re-login
+    admin_logout();
+    admin_layout('DB-Verwaltung', '<div class="top"><h1>DB-Verwaltung</h1></div><div class="card"><div class="err">' . h($e->getMessage()) . '</div><br><a class="btn" href="/adminer">Zum Login</a></div>');
+}
+
+function admin_render_table(array $rows): string
+{
+    if (empty($rows)) {
+        return '<div class="muted">(keine Zeilen)</div>';
+    }
+
+    $cols = array_keys((array)$rows[0]);
+    $html = '<table><thead><tr>';
+    foreach ($cols as $c) {
+        $html .= '<th>' . h((string)$c) . '</th>';
+    }
+    $html .= '</tr></thead><tbody>';
+
+    foreach ($rows as $r) {
+        $html .= '<tr>';
+        foreach ($cols as $c) {
+            $v = $r[$c] ?? null;
+            if ($v === null) {
+                $cell = '<span class="muted">NULL</span>';
+            } else {
+                $s = (string)$v;
+                $cell = strlen($s) > 500 ? h(substr($s, 0, 500)) . '…' : h($s);
+            }
+            $html .= '<td>' . $cell . '</td>';
+        }
+        $html .= '</tr>';
+    }
+
+    $html .= '</tbody></table>';
+    return $html;
+}
+
diff --git a/adminer/views.php b/adminer/views.php
new file mode 100644
index 0000000..bb2687d
--- /dev/null
+++ b/adminer/views.php
@@ -0,0 +1,41 @@
+<?php
+declare(strict_types=1);
+
+function h($s)
+{
+    return htmlspecialchars((string)$s, ENT_QUOTES);
+}
+
+function admin_layout($title, $bodyHtml)
+{
+    echo "<!doctype html>\n";
+    echo "<html lang=\"de\">\n<head>\n";
+    echo "<meta charset=\"utf-8\">\n";
+    echo "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n";
+    echo '<title>' . h($title) . "</title>\n";
+    echo "<style>
+        body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:#0b1020;color:#e5e7eb;margin:0}
+        .wrap{max-width:1100px;margin:32px auto;padding:0 16px}
+        a{color:#60a5fa;text-decoration:none}
+        a:hover{text-decoration:underline}
+        .top{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}
+        .card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:16px;backdrop-filter: blur(12px)}
+        .grid{display:grid;grid-template-columns:320px 1fr;gap:16px}
+        @media (max-width: 900px){.grid{grid-template-columns:1fr}}
+        table{width:100%;border-collapse:collapse}
+        th,td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.10);vertical-align:top}
+        th{color:#cbd5e1;text-align:left;font-weight:600}
+        code,pre,textarea,input{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}
+        textarea,input{width:100%;box-sizing:border-box;background:rgba(0,0,0,.35);color:#e5e7eb;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px}
+        .btn{display:inline-block;background:#2563eb;color:white;border:0;border-radius:10px;padding:10px 12px;cursor:pointer}
+        .btn.secondary{background:rgba(255,255,255,.10)}
+        .muted{color:#94a3b8}
+        .err{color:#fecaca;background:rgba(220,38,38,.12);border:1px solid rgba(220,38,38,.25);padding:10px 12px;border-radius:10px}
+        .ok{color:#bbf7d0;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);padding:10px 12px;border-radius:10px}
+        .pill{font-size:12px;background:rgba(255,255,255,.10);padding:4px 8px;border-radius:999px}
+    </style>\n";
+    echo "</head>\n<body>\n";
+    echo "<div class=\"wrap\">\n";
+    echo $bodyHtml;
+    echo "</div>\n</body>\n</html>";
+}
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..8d8e886
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,96 @@
+// ── Typewriter ───────────────────────────────────────────
+(function () {
+    const el    = document.getElementById('typewriter');
+    const words = ['Entwickler', 'Schüler', 'Macher', 'Selfhoster', 'Tüftler'];
+    let wi = 0, ci = 0, deleting = false;
+
+    function type() {
+        if (!el) return;
+        const word = words[wi];
+        el.textContent = deleting ? word.slice(0, ci--) : word.slice(0, ci++);
+
+        let delay = deleting ? 60 : 110;
+        if (!deleting && ci > word.length)  { delay = 1400; deleting = true; }
+        if  (deleting && ci < 0)            { deleting = false; wi = (wi + 1) % words.length; ci = 0; delay = 300; }
+        setTimeout(type, delay);
+    }
+    setTimeout(type, 900);
+})();
+
+// ── Particles ────────────────────────────────────────────
+(function () {
+    const canvas = document.getElementById('particle-canvas');
+    if (!canvas) return;
+    const ctx    = canvas.getContext('2d');
+    const COLORS = ['#6366f1', '#0ea5e9', '#a855f7', '#ec4899', '#22d3ee'];
+    let W, H, particles = [];
+
+    function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
+    function rand(a, b) { return Math.random() * (b - a) + a; }
+
+    function mkP() {
+        return { x: rand(0,W), y: rand(0,H), r: rand(0.8,2.2), dx: rand(-0.25,0.25), dy: rand(-0.35,-0.08),
+            alpha: rand(0.2,0.8), fade: rand(0.002,0.006), color: COLORS[Math.floor(Math.random()*COLORS.length)] };
+    }
+
+    function init() { resize(); particles = Array.from({length:90}, mkP); }
+
+    function draw() {
+        ctx.clearRect(0, 0, W, H);
+        for (let p of particles) {
+            ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);
+            ctx.fillStyle = p.color; ctx.globalAlpha = p.alpha; ctx.fill();
+            p.x += p.dx; p.y += p.dy; p.alpha -= p.fade;
+            if (p.alpha <= 0 || p.y < -5) Object.assign(p, mkP(), { y: H+5, alpha: rand(0.2,0.7) });
+        }
+        ctx.globalAlpha = 1;
+        requestAnimationFrame(draw);
+    }
+
+    window.addEventListener('resize', resize);
+    init(); draw();
+})();
+
+// ── 3D Tilt Cards ────────────────────────────────────────
+document.querySelectorAll('.card').forEach(card => {
+    card.addEventListener('mousemove', function (e) {
+        const rect   = this.getBoundingClientRect();
+        const cx     = rect.left + rect.width  / 2;
+        const cy     = rect.top  + rect.height / 2;
+        const dx     = (e.clientX - cx) / (rect.width  / 2);
+        const dy     = (e.clientY - cy) / (rect.height / 2);
+        const rotX   = (-dy * 8).toFixed(2);
+        const rotY   = ( dx * 8).toFixed(2);
+        this.style.transform = `perspective(600px) rotateX(${rotX}deg) rotateY(${rotY}deg) translateY(-3px) scale(1.02)`;
+
+        // glare
+        let glare = this.querySelector('.card-glare');
+        if (!glare) {
+            glare = document.createElement('div');
+            glare.className = 'card-glare';
+            this.appendChild(glare);
+        }
+        const gx = ((e.clientX - rect.left) / rect.width  * 100).toFixed(1);
+        const gy = ((e.clientY - rect.top)  / rect.height * 100).toFixed(1);
+        glare.style.background = `radial-gradient(circle at ${gx}% ${gy}%, rgba(255,255,255,0.12) 0%, transparent 65%)`;
+    });
+
+    card.addEventListener('mouseleave', function () {
+        this.style.transform = '';
+        this.querySelector('.card-glare')?.remove();
+    });
+
+    // Ripple
+    card.addEventListener('click', function (e) {
+        const circle   = document.createElement('span');
+        const diameter = Math.max(this.clientWidth, this.clientHeight);
+        const rect     = this.getBoundingClientRect();
+        circle.classList.add('ripple');
+        circle.style.width = circle.style.height = diameter + 'px';
+        circle.style.left = (e.clientX - rect.left - diameter / 2) + 'px';
+        circle.style.top  = (e.clientY - rect.top  - diameter / 2) + 'px';
+        this.querySelector('.ripple')?.remove();
+        this.appendChild(circle);
+    });
+});
+
diff --git a/includes/config/projects.php b/includes/config/projects.php
new file mode 100644
index 0000000..4cf88eb
--- /dev/null
+++ b/includes/config/projects.php
@@ -0,0 +1,77 @@
+<?php
+declare(strict_types=1);
+
+/**
+ * Zentrale Projekt-/Karten-Definitionen.
+ * Absolute Webpfade verwenden!
+ */
+
+return [
+    'privat' => [
+        [
+            'title' => 'Gitea',
+            'description' => 'Mein privater Gitea - Server',
+            'url' => '/git',
+            'logo' => '/icons/gitea.svg',
+            'color' => '#609926',
+            'external' => true,
+        ],
+        [
+            'title' => 'Nextcloud',
+            'description' => 'Meine persönliche Nextcloud',
+            'url' => '/nextcloud',
+            'logo' => '/icons/nextcloud.svg',
+            'color' => '#0082c9',
+            'external' => true,
+        ],
+        [
+            'title' => 'Server Dashboard',
+            'description' => 'Server-Verwaltung mit Cockpit',
+            'url' => 'https://cockpit.fabianschieder.com',
+            'logo' => '/icons/ubuntu.svg',
+            'color' => '#E95420',
+            'external' => true,
+        ],
+    ],
+    'schule' => [
+        [
+            'title' => 'Geizkragen',
+            'description' => 'Ein Online - Preisvergleichsportal',
+            'url' => 'https://geizkragen.store',
+            'logo' => '/icons/geizkragen.png',
+            'color' => '#0082c9',
+            'external' => true,
+        ],
+    ],
+    'dienste' => [
+        [
+            'title' => 'Home Assistant',
+            'description' => 'Mein privater HomeAssistant Server',
+            'url' => 'http://homeassistant.fabianschieder.com',
+            'logo' => '/icons/homeassistant.svg',
+            'color' => '#18BCF2',
+            'external' => true,
+        ],
+        [
+            'title' => 'NAS',
+            'description' => 'Mein privater Netzwerkspeicher',
+            'url' => 'http://nas.fabianschieder.com',
+            'logo' => '/icons/nas.svg',
+            'color' => '#a855f7',
+            'external' => true,
+        ],
+    ],
+
+    // Neue Kategorie: Admin/Tools
+    'admin' => [
+        [
+            'title' => 'Datenbankverwaltung',
+            'description' => 'Login erfolgt im Tool (keine Credentials im Code).',
+            'url' => '/adminer',
+            'logo' => null,
+            'color' => '#14b8a6',
+            'external' => false,
+        ],
+    ],
+];
+
diff --git a/includes/config/server_status_targets.php b/includes/config/server_status_targets.php
new file mode 100644
index 0000000..1f24991
--- /dev/null
+++ b/includes/config/server_status_targets.php
@@ -0,0 +1,35 @@
+<?php
+declare(strict_types=1);
+
+/**
+ * Allowlist-Targets für den Serverstatus.
+ * Nur feste Ziele, keine User Inputs.
+ */
+
+return [
+    [
+        'title' => 'Gitea',
+        'url' => 'https://fabianschieder.com/git',
+    ],
+    [
+        'title' => 'Nextcloud',
+        'url' => 'https://fabianschieder.com/nextcloud',
+    ],
+    [
+        'title' => 'Home Assistant',
+        'url' => 'http://homeassistant.fabianschieder.com',
+    ],
+    [
+        'title' => 'NAS',
+        'url' => 'http://nas.fabianschieder.com',
+    ],
+    [
+        'title' => 'Cockpit',
+        'url' => 'https://cockpit.fabianschieder.com',
+    ],
+    [
+        'title' => 'Geizkragen',
+        'url' => 'https://geizkragen.store',
+    ],
+];
+
diff --git a/includes/lib/server_status.php b/includes/lib/server_status.php
new file mode 100644
index 0000000..d9cfe65
--- /dev/null
+++ b/includes/lib/server_status.php
@@ -0,0 +1,175 @@
+<?php
+declare(strict_types=1);
+
+/**
+ * Serverstatus (dependency-free, mit Cache & SSRF-Guards)
+ *
+ * Contract:
+ * - Input: allowlist targets (host/url/port)
+ * - Output: array of results with state + latency
+ * - Safety: no user input, no redirects, blocks private/loopback IPs
+ */
+
+/** @return bool true if IP is public-ish */
+function is_public_ip(string $ip): bool
+{
+    // FILTER_FLAG_NO_PRIV_RANGE + NO_RES_RANGE covers most private/reserved ranges.
+    if (filter_var($ip, FILTER_VALIDATE_IP, FILTER_FLAG_NO_PRIV_RANGE | FILTER_FLAG_NO_RES_RANGE)) {
+        return true;
+    }
+
+    // Fallback: treat unknown/invalid as not allowed.
+    return false;
+}
+
+/** Resolve host to IPs (A/AAAA) */
+function resolve_host_ips(string $host): array
+{
+    $ips = [];
+
+    // IPv4
+    $a = @dns_get_record($host, DNS_A);
+    if (is_array($a)) {
+        foreach ($a as $rec) {
+            if (!empty($rec['ip'])) {
+                $ips[] = $rec['ip'];
+            }
+        }
+    }
+
+    // IPv6
+    $aaaa = @dns_get_record($host, DNS_AAAA);
+    if (is_array($aaaa)) {
+        foreach ($aaaa as $rec) {
+            if (!empty($rec['ipv6'])) {
+                $ips[] = $rec['ipv6'];
+            }
+        }
+    }
+
+    // Deduplicate
+    $ips = array_values(array_unique(array_filter($ips)));
+    return $ips;
+}
+
+function is_allowed_http_url(string $url, array $allowedHosts): bool
+{
+    $parts = parse_url($url);
+    if (!is_array($parts) || empty($parts['scheme']) || empty($parts['host'])) {
+        return false;
+    }
+
+    $scheme = strtolower((string)$parts['scheme']);
+    if (!in_array($scheme, ['http', 'https'], true)) {
+        return false;
+    }
+
+    $host = strtolower((string)$parts['host']);
+    if (!in_array($host, $allowedHosts, true)) {
+        return false;
+    }
+
+    // Resolve and ensure all resolved IPs are public.
+    $ips = resolve_host_ips($host);
+    if (empty($ips)) {
+        return false;
+    }
+    foreach ($ips as $ip) {
+        if (!is_public_ip($ip)) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+/**
+ * HTTP HEAD check (no redirects).
+ * @return array{ok:bool, code:int|null, ms:int|null, error:string|null}
+ */
+function check_http_head(string $url, float $timeoutSeconds = 1.6): array
+{
+    $start = microtime(true);
+
+    $ctx = stream_context_create([
+        'http' => [
+            'method' => 'HEAD',
+            'timeout' => $timeoutSeconds,
+            'ignore_errors' => true,
+            'follow_location' => 0,
+            'max_redirects' => 0,
+            'header' => "User-Agent: ServerStatus/1.0\r\n",
+        ],
+        'ssl' => [
+            'verify_peer' => true,
+            'verify_peer_name' => true,
+        ],
+    ]);
+
+    $code = null;
+    $error = null;
+
+    set_error_handler(static function (int $severity, string $message) use (&$error): bool {
+        $error = $message;
+        return true;
+    });
+    $fp = @fopen($url, 'rb', false, $ctx);
+    restore_error_handler();
+
+    if ($fp !== false) {
+        fclose($fp);
+    }
+
+    $ms = (int)round((microtime(true) - $start) * 1000);
+
+    // Parse status code from $http_response_header
+    if (isset($http_response_header) && is_array($http_response_header)) {
+        foreach ($http_response_header as $h) {
+            if (preg_match('#^HTTP/\S+\s+(\d{3})#i', (string)$h, $m)) {
+                $code = (int)$m[1];
+                break;
+            }
+        }
+    }
+
+    $ok = ($code !== null) && ($code >= 200 && $code < 400);
+    if ($code === null && $error === null) {
+        $error = 'Unbekannter Fehler';
+    }
+
+    return ['ok' => $ok, 'code' => $code, 'ms' => $ms, 'error' => $error];
+}
+
+function build_server_status(array $targets): array
+{
+    $allowedHosts = [];
+    foreach ($targets as $t) {
+        if (!empty($t['url'])) {
+            $p = parse_url((string)$t['url']);
+            if (is_array($p) && !empty($p['host'])) {
+                $allowedHosts[] = strtolower((string)$p['host']);
+            }
+        }
+    }
+    $allowedHosts = array_values(array_unique($allowedHosts));
+
+    $results = [];
+    foreach ($targets as $t) {
+        $url = (string)($t['url'] ?? '');
+        if ($url === '' || !is_allowed_http_url($url, $allowedHosts)) {
+            $results[] = ['url' => $url, 'state' => 'unknown', 'ms' => null, 'detail' => 'Nicht erlaubt'];
+            continue;
+        }
+
+        $r = check_http_head($url);
+        $results[] = [
+            'url' => $url,
+            'state' => $r['ok'] ? 'up' : 'down',
+            'ms' => $r['ms'],
+            'detail' => $r['ok'] ? null : ($r['error'] ?? null),
+        ];
+    }
+
+    return $results;
+}
+
diff --git a/includes/lib/view_helpers.php b/includes/lib/view_helpers.php
new file mode 100644
index 0000000..d9494dc
--- /dev/null
+++ b/includes/lib/view_helpers.php
@@ -0,0 +1,14 @@
+<?php
+declare(strict_types=1);
+
+function category_title(string $category): string
+{
+    return match ($category) {
+        'privat' => '🔒 Privat',
+        'schule' => '🎓 Schule',
+        'dienste' => '🔗 Verlinkungen',
+        'admin' => '🛠️ Admin/Tools',
+        default => $category,
+    };
+}
+
diff --git a/includes/views/footer.php b/includes/views/footer.php
new file mode 100644
index 0000000..5743417
--- /dev/null
+++ b/includes/views/footer.php
@@ -0,0 +1,4 @@
+<footer>
+    <p>&copy; <?= date('Y') ?> Fabian Schieder — Alle Rechte vorbehalten.</p>
+</footer>
+
diff --git a/includes/views/header.php b/includes/views/header.php
new file mode 100644
index 0000000..4037e00
--- /dev/null
+++ b/includes/views/header.php
@@ -0,0 +1,6 @@
+<header>
+    <div class="avatar">FS</div>
+    <h1 class="glitch" data-text="Fabian Schieder">Fabian Schieder</h1>
+    <p class="tagline" id="typewriter"></p>
+</header>
+
diff --git a/includes/views/layout_foot.php b/includes/views/layout_foot.php
new file mode 100644
index 0000000..81d7cfb
--- /dev/null
+++ b/includes/views/layout_foot.php
@@ -0,0 +1,5 @@
+<script src="/assets/js/main.js" defer></script>
+
+</body>
+</html>
+
diff --git a/includes/views/layout_head.php b/includes/views/layout_head.php
new file mode 100644
index 0000000..bbe73c4
--- /dev/null
+++ b/includes/views/layout_head.php
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fabian Schieder</title>
+    <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+
+<canvas id="particle-canvas"></canvas>
+<div class="orb orb-1"></div>
+<div class="orb orb-2"></div>
+<div class="orb orb-3"></div>
+<div class="orb orb-4"></div>
+
+<div class="background-blur"></div>
+
diff --git a/includes/views/projects_section.php b/includes/views/projects_section.php
new file mode 100644
index 0000000..4f06ec5
--- /dev/null
+++ b/includes/views/projects_section.php
@@ -0,0 +1,91 @@
+<?php
+/**
+ * Erwartet Variablen:
+ * - $category (string)
+ * - $items (array)
+ * - $serverStatusByUrl (array)
+ */
+?>
+<section>
+    <h2 class="category-title">
+        <?= htmlspecialchars(category_title((string)$category), ENT_QUOTES) ?>
+    </h2>
+
+    <div class="cards">
+        <?php foreach ($items as $project): ?>
+            <?php
+            // Optional: Status für dieses Projekt erkennen
+            $status = null;
+            $statusKey = null;
+
+            // 1) Externe absolute URL direkt matchen
+            if (!empty($project['url']) && isset($serverStatusByUrl[$project['url']])) {
+                $statusKey = $project['url'];
+            }
+
+            // 2) Interne Pfade (/git, /nextcloud) auf Domain mappen
+            if ($statusKey === null && !empty($project['url']) && is_string($project['url']) && substr($project['url'], 0, 1) === '/') {
+                $statusKeyCandidate = 'https://fabianschieder.com' . $project['url'];
+                if (isset($serverStatusByUrl[$statusKeyCandidate])) {
+                    $statusKey = $statusKeyCandidate;
+                }
+            }
+
+            if ($statusKey !== null) {
+                $status = $serverStatusByUrl[$statusKey];
+            }
+
+            $state = $status ? (string)($status['state'] ?? 'unknown') : null;
+            $detail = $status && !empty($status['detail']) ? (string)$status['detail'] : '';
+
+            $badgeText = null;
+            if ($state !== null) {
+                $badgeText = 'Unbekannt';
+                if ($state === 'up') $badgeText = 'Online';
+                elseif ($state === 'down') $badgeText = 'Offline';
+            }
+            ?>
+
+            <a
+                href="<?= htmlspecialchars((string)$project['url'], ENT_QUOTES) ?>"
+                class="card"
+                <?= !empty($project['external']) ? 'target="_blank" rel="noopener noreferrer"' : '' ?>
+                style="--accent: <?= htmlspecialchars((string)($project['color'] ?? '#6366f1'), ENT_QUOTES) ?>;"
+            >
+
+                <div class="card-icon">
+                    <?php if (!empty($project['logo'])): ?>
+                        <img
+                            src="<?= htmlspecialchars((string)$project['logo'], ENT_QUOTES) ?>"
+                            alt="<?= htmlspecialchars((string)$project['title'], ENT_QUOTES) ?> Logo"
+                            class="card-logo"
+                            loading="lazy"
+                            decoding="async"
+                        >
+                    <?php else: ?>
+                        <span aria-hidden="true">📁</span>
+                    <?php endif; ?>
+                </div>
+
+                <div class="card-body">
+                    <h3><?= htmlspecialchars((string)$project['title'], ENT_QUOTES) ?></h3>
+                    <p>
+                        <?= htmlspecialchars((string)$project['description'], ENT_QUOTES) ?>
+                    </p>
+                </div>
+
+                <?php if ($badgeText !== null): ?>
+                    <div class="status-right">
+                        <span class="status-badge status-badge--<?= htmlspecialchars((string)$state, ENT_QUOTES) ?>"
+                              title="<?= htmlspecialchars($detail !== '' ? $detail : (string)$badgeText, ENT_QUOTES) ?>">
+                            <?= htmlspecialchars((string)$badgeText, ENT_QUOTES) ?>
+                        </span>
+                    </div>
+                <?php else: ?>
+                    <div class="card-arrow" aria-hidden="true">→</div>
+                <?php endif; ?>
+            </a>
+        <?php endforeach; ?>
+    </div>
+</section>
+
diff --git a/index.php b/index.php
index 338ad19..61a0f43 100644
--- a/index.php
+++ b/index.php
@@ -8,253 +8,18 @@ declare(strict_types=1);
  * /style.css
  */
 
-$projects = [
-    "privat" => [
-        [
-            "title" => "Gitea",
-            "description" => "Mein privater Gitea - Server",
-            "url" => "/git",
-            "logo" => "/icons/gitea.svg",
-            "color" => "#609926",
-            "external" => true
-        ],
-        [
-            "title" => "Nextcloud",
-            "description" => "Meine persönliche Nextcloud",
-            "url" => "/nextcloud",
-            "logo" => "/icons/nextcloud.svg",
-            "color" => "#0082c9",
-            "external" => true
-        ],
-        [
-            "title" => "Server Dashboard",
-            "description" => "Server-Verwaltung mit Cockpit",
-            "url" => "https://cockpit.fabianschieder.com",
-            "logo" => "/icons/ubuntu.svg",
-            "color" => "#E95420",
-            "external" => true
-        ],
-    ],
-    "schule" => [
-        [
-            "title" => "Geizkragen",
-            "description" => "Ein Online - Preisvergleichsportal",
-            "url" => "https://geizkragen.store",
-            "logo" => "/icons/geizkragen.png",
-            "color" => "#0082c9",
-            "external" => true
-        ],
-    ],
-    "dienste" => [
-        [
-            "title" => "Home Assistant",
-            "description" => "Mein privater HomeAssistant Server",
-            "url" => "http://homeassistant.fabianschieder.com",
-            "logo" => "/icons/homeassistant.svg",
-            "color" => "#18BCF2",
-            "external" => true
-        ],
-        [
-            "title" => "NAS",
-            "description" => "Mein privater Netzwerkspeicher",
-            "url" => "http://nas.fabianschieder.com",
-            "logo" => "/icons/nas.svg",
-            "color" => "#a855f7",
-            "external" => true
-        ],
-    ],
-];
+$projects = require __DIR__ . '/includes/config/projects.php';
+$serverStatusTargets = require __DIR__ . '/includes/config/server_status_targets.php';
 
-// ── Serverstatus (dependency-free, mit Cache & SSRF-Guards) ───────────────
-/**
- * Contract:
- * - Input: allowlist targets (host/url/port)
- * - Output: array of results with state + latency
- * - Safety: no user input, no redirects, blocks private/loopback IPs
- */
-
-$serverStatusTargets = [
-    [
-        'title' => 'Gitea',
-        'url' => 'https://fabianschieder.com/git',
-    ],
-    [
-        'title' => 'Nextcloud',
-        'url' => 'https://fabianschieder.com/nextcloud',
-    ],
-    [
-        'title' => 'Home Assistant',
-        'url' => 'http://homeassistant.fabianschieder.com',
-    ],
-    [
-        'title' => 'NAS',
-        'url' => 'http://nas.fabianschieder.com',
-    ],
-    [
-        'title' => 'Cockpit',
-        'url' => 'https://cockpit.fabianschieder.com',
-    ],
-    [
-        'title' => 'Geizkragen',
-        'url' => 'https://geizkragen.store',
-    ],
-];
-
-/** @return bool true if IP is public-ish */
-function is_public_ip(string $ip): bool
-{
-    // FILTER_FLAG_NO_PRIV_RANGE + NO_RES_RANGE covers most private/reserved ranges.
-    if (filter_var($ip, FILTER_VALIDATE_IP, FILTER_FLAG_NO_PRIV_RANGE | FILTER_FLAG_NO_RES_RANGE)) {
-        return true;
-    }
-
-    // Fallback: treat unknown/invalid as not allowed.
-    return false;
-}
-
-/** Resolve host to IPs (A/AAAA) */
-function resolve_host_ips(string $host): array
-{
-    $ips = [];
-
-    // IPv4
-    $a = @dns_get_record($host, DNS_A);
-    if (is_array($a)) {
-        foreach ($a as $rec) {
-            if (!empty($rec['ip'])) $ips[] = $rec['ip'];
-        }
-    }
-
-    // IPv6
-    $aaaa = @dns_get_record($host, DNS_AAAA);
-    if (is_array($aaaa)) {
-        foreach ($aaaa as $rec) {
-            if (!empty($rec['ipv6'])) $ips[] = $rec['ipv6'];
-        }
-    }
-
-    // Deduplicate
-    $ips = array_values(array_unique(array_filter($ips)));
-    return $ips;
-}
-
-function is_allowed_http_url(string $url, array $allowedHosts): bool
-{
-    $parts = parse_url($url);
-    if (!is_array($parts) || empty($parts['scheme']) || empty($parts['host'])) return false;
-
-    $scheme = strtolower((string)$parts['scheme']);
-    if (!in_array($scheme, ['http', 'https'], true)) return false;
-
-    $host = strtolower((string)$parts['host']);
-    if (!in_array($host, $allowedHosts, true)) return false;
-
-    // Resolve and ensure all resolved IPs are public.
-    $ips = resolve_host_ips($host);
-    if (empty($ips)) return false;
-    foreach ($ips as $ip) {
-        if (!is_public_ip($ip)) return false;
-    }
-
-    return true;
-}
-
-/**
- * HTTP HEAD check (no redirects).
- * @return array{ok:bool, code:int|null, ms:int|null, error:string|null}
- */
-function check_http_head(string $url, float $timeoutSeconds = 1.6): array
-{
-    $start = microtime(true);
-
-    $ctx = stream_context_create([
-        'http' => [
-            'method' => 'HEAD',
-            'timeout' => $timeoutSeconds,
-            'ignore_errors' => true,
-            'follow_location' => 0,
-            'max_redirects' => 0,
-            'header' => "User-Agent: ServerStatus/1.0\r\n",
-        ],
-        'ssl' => [
-            'verify_peer' => true,
-            'verify_peer_name' => true,
-        ],
-    ]);
-
-    $code = null;
-    $error = null;
-
-    set_error_handler(static function (int $severity, string $message) use (&$error): bool {
-        $error = $message;
-        return true;
-    });
-    $fp = @fopen($url, 'rb', false, $ctx);
-    restore_error_handler();
-
-    if ($fp !== false) {
-        fclose($fp);
-    }
-
-    $ms = (int)round((microtime(true) - $start) * 1000);
-
-    // Parse status code from $http_response_header
-    if (isset($http_response_header) && is_array($http_response_header)) {
-        foreach ($http_response_header as $h) {
-            if (preg_match('#^HTTP/\S+\s+(\d{3})#i', (string)$h, $m)) {
-                $code = (int)$m[1];
-                break;
-            }
-        }
-    }
-
-    $ok = ($code !== null) && ($code >= 200 && $code < 400);
-    if ($code === null && $error === null) {
-        $error = 'Unbekannter Fehler';
-    }
-
-    return ['ok' => $ok, 'code' => $code, 'ms' => $ms, 'error' => $error];
-}
-
-function build_server_status(array $targets): array
-{
-    $allowedHosts = [];
-    foreach ($targets as $t) {
-        if (!empty($t['url'])) {
-            $p = parse_url((string)$t['url']);
-            if (is_array($p) && !empty($p['host'])) {
-                $allowedHosts[] = strtolower((string)$p['host']);
-            }
-        }
-    }
-    $allowedHosts = array_values(array_unique($allowedHosts));
-
-    $results = [];
-    foreach ($targets as $t) {
-        $url = (string)($t['url'] ?? '');
-        if ($url === '' || !is_allowed_http_url($url, $allowedHosts)) {
-            $results[] = ['url' => $url, 'state' => 'unknown', 'ms' => null, 'detail' => 'Nicht erlaubt'];
-            continue;
-        }
-
-        $r = check_http_head($url);
-        $results[] = [
-            'url' => $url,
-            'state' => $r['ok'] ? 'up' : 'down',
-            'ms' => $r['ms'],
-            'detail' => $r['ok'] ? null : ($r['error'] ?? null),
-        ];
-    }
-
-    return $results;
-}
+require_once __DIR__ . '/includes/lib/server_status.php';
+require_once __DIR__ . '/includes/lib/view_helpers.php';
 
+// ── Serverstatus (mit Cache) ──────────────────────────────────────────────
 $cacheTtlSeconds = 30;
 $cacheKey = 'server_status_v1';
 $cacheFile = rtrim(sys_get_temp_dir(), DIRECTORY_SEPARATOR) . DIRECTORY_SEPARATOR . $cacheKey . '.json';
 
 $serverStatus = null;
-$cacheOk = false;
 if (is_file($cacheFile)) {
     $raw = @file_get_contents($cacheFile);
     if ($raw !== false) {
@@ -263,7 +28,6 @@ if (is_file($cacheFile)) {
             $age = time() - (int)$decoded['ts'];
             if ($age >= 0 && $age <= $cacheTtlSeconds) {
                 $serverStatus = $decoded['data'];
-                $cacheOk = true;
             }
         }
     }
@@ -283,232 +47,17 @@ if (is_array($serverStatus)) {
         }
     }
 }
+
+require __DIR__ . '/includes/views/layout_head.php';
+require __DIR__ . '/includes/views/header.php';
 ?>
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Fabian Schieder</title>
-    <link rel="stylesheet" href="/style.css">
-</head>
-<body>
-
-<canvas id="particle-canvas"></canvas>
-<div class="orb orb-1"></div>
-<div class="orb orb-2"></div>
-<div class="orb orb-3"></div>
-<div class="orb orb-4"></div>
-
-<div class="background-blur"></div>
-
-<header>
-    <div class="avatar">FS</div>
-    <h1 class="glitch" data-text="Fabian Schieder">Fabian Schieder</h1>
-    <p class="tagline" id="typewriter"></p>
-</header>
 
 <main>
     <?php foreach ($projects as $category => $items): ?>
-        <section>
-            <h2 class="category-title">
-                <?php
-                switch ($category) {
-                    case "privat":
-                        echo '🔒 Privat';
-                        break;
-                    case "schule":
-                        echo '🎓 Schule';
-                        break;
-                    case "dienste":
-                        echo '🔗 Verlinkungen';
-                        break;
-                }
-                ?>
-            </h2>
-
-            <div class="cards">
-                <?php foreach ($items as $project): ?>
-                    <?php
-                    // Optional: Status für dieses Projekt erkennen
-                    $status = null;
-                    $statusKey = null;
-
-                    // 1) Externe absolute URL direkt matchen
-                    if (!empty($project['url']) && isset($serverStatusByUrl[$project['url']])) {
-                        $statusKey = $project['url'];
-                    }
-
-                    // 2) Interne Pfade (/git, /nextcloud) auf Domain mappen
-                    if ($statusKey === null && !empty($project['url']) && is_string($project['url']) && substr($project['url'], 0, 1) === '/') {
-                        $statusKeyCandidate = 'https://fabianschieder.com' . $project['url'];
-                        if (isset($serverStatusByUrl[$statusKeyCandidate])) {
-                            $statusKey = $statusKeyCandidate;
-                        }
-                    }
-
-                    if ($statusKey !== null) {
-                        $status = $serverStatusByUrl[$statusKey];
-                    }
-
-                    $state = $status ? (string)($status['state'] ?? 'unknown') : null;
-                    $detail = $status && !empty($status['detail']) ? (string)$status['detail'] : '';
-                    $ms = ($status && isset($status['ms']) && is_int($status['ms'])) ? $status['ms'] : null;
-
-                    $badgeText = null;
-                    if ($state !== null) {
-                        $badgeText = 'Unbekannt';
-                        if ($state === 'up') $badgeText = 'Online';
-                        elseif ($state === 'down') $badgeText = 'Offline';
-                    }
-                    ?>
-
-                    <a
-                            href="<?= htmlspecialchars($project['url'], ENT_QUOTES) ?>"
-                            class="card"
-                        <?= !empty($project['external']) ? 'target="_blank" rel="noopener noreferrer"' : '' ?>
-                            style="--accent: <?= htmlspecialchars($project['color'], ENT_QUOTES) ?>;"
-                    >
-
-                        <div class="card-icon">
-                            <?php if (!empty($project['logo'])): ?>
-                                <img
-                                    src="<?= htmlspecialchars($project['logo'], ENT_QUOTES) ?>"
-                                    alt="<?= htmlspecialchars($project['title'], ENT_QUOTES) ?> Logo"
-                                    class="card-logo"
-                                    loading="lazy"
-                                    decoding="async"
-                                >
-                            <?php else: ?>
-                                <span aria-hidden="true">📁</span>
-                            <?php endif; ?>
-                        </div>
-
-                        <div class="card-body">
-                            <h3><?= htmlspecialchars($project['title'], ENT_QUOTES) ?></h3>
-                            <p>
-                                <?= htmlspecialchars($project['description'], ENT_QUOTES) ?>
-                            </p>
-                        </div>
-
-                        <?php if ($badgeText !== null): ?>
-                            <div class="status-right">
-                                <span class="status-badge status-badge--<?= htmlspecialchars($state, ENT_QUOTES) ?>" title="<?= htmlspecialchars($detail !== '' ? $detail : $badgeText, ENT_QUOTES) ?>">
-                                    <?= htmlspecialchars($badgeText, ENT_QUOTES) ?>
-                                </span>
-                            </div>
-                        <?php else: ?>
-                            <div class="card-arrow" aria-hidden="true">→</div>
-                        <?php endif; ?>
-                    </a>
-                <?php endforeach; ?>
-            </div>
-        </section>
+        <?php require __DIR__ . '/includes/views/projects_section.php'; ?>
     <?php endforeach; ?>
 </main>
 
-<footer>
-    <p>&copy; <?= date('Y') ?> Fabian Schieder — Alle Rechte vorbehalten.</p>
-</footer>
-
-<script>
-// ── Typewriter ───────────────────────────────────────────
-(function () {
-    const el    = document.getElementById('typewriter');
-    const words = ['Entwickler', 'Schüler', 'Macher', 'Selfhoster', 'Tüftler'];
-    let wi = 0, ci = 0, deleting = false;
-
-    function type() {
-        const word = words[wi];
-        el.textContent = deleting ? word.slice(0, ci--) : word.slice(0, ci++);
-
-        let delay = deleting ? 60 : 110;
-        if (!deleting && ci > word.length)  { delay = 1400; deleting = true; }
-        if  (deleting && ci < 0)            { deleting = false; wi = (wi + 1) % words.length; ci = 0; delay = 300; }
-        setTimeout(type, delay);
-    }
-    setTimeout(type, 900);
-})();
-
-// ── Particles ────────────────────────────────────────────
-(function () {
-    const canvas = document.getElementById('particle-canvas');
-    const ctx    = canvas.getContext('2d');
-    const COLORS = ['#6366f1', '#0ea5e9', '#a855f7', '#ec4899', '#22d3ee'];
-    let W, H, particles = [];
-
-    function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
-    function rand(a, b) { return Math.random() * (b - a) + a; }
-
-    function mkP() {
-        return { x: rand(0,W), y: rand(0,H), r: rand(0.8,2.2), dx: rand(-0.25,0.25), dy: rand(-0.35,-0.08),
-                 alpha: rand(0.2,0.8), fade: rand(0.002,0.006), color: COLORS[Math.floor(Math.random()*COLORS.length)] };
-    }
-
-    function init() { resize(); particles = Array.from({length:90}, mkP); }
-
-    function draw() {
-        ctx.clearRect(0, 0, W, H);
-        for (let p of particles) {
-            ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);
-            ctx.fillStyle = p.color; ctx.globalAlpha = p.alpha; ctx.fill();
-            p.x += p.dx; p.y += p.dy; p.alpha -= p.fade;
-            if (p.alpha <= 0 || p.y < -5) Object.assign(p, mkP(), { y: H+5, alpha: rand(0.2,0.7) });
-        }
-        ctx.globalAlpha = 1;
-        requestAnimationFrame(draw);
-    }
-
-    window.addEventListener('resize', resize);
-    init(); draw();
-})();
-
-// ── 3D Tilt Cards ────────────────────────────────────────
-document.querySelectorAll('.card').forEach(card => {
-    card.addEventListener('mousemove', function (e) {
-        const rect   = this.getBoundingClientRect();
-        const cx     = rect.left + rect.width  / 2;
-        const cy     = rect.top  + rect.height / 2;
-        const dx     = (e.clientX - cx) / (rect.width  / 2);
-        const dy     = (e.clientY - cy) / (rect.height / 2);
-        const rotX   = (-dy * 8).toFixed(2);
-        const rotY   = ( dx * 8).toFixed(2);
-        this.style.transform = `perspective(600px) rotateX(${rotX}deg) rotateY(${rotY}deg) translateY(-3px) scale(1.02)`;
-
-        // glare
-        let glare = this.querySelector('.card-glare');
-        if (!glare) {
-            glare = document.createElement('div');
-            glare.className = 'card-glare';
-            this.appendChild(glare);
-        }
-        const gx = ((e.clientX - rect.left) / rect.width  * 100).toFixed(1);
-        const gy = ((e.clientY - rect.top)  / rect.height * 100).toFixed(1);
-        glare.style.background = `radial-gradient(circle at ${gx}% ${gy}%, rgba(255,255,255,0.12) 0%, transparent 65%)`;
-    });
-
-    card.addEventListener('mouseleave', function () {
-        this.style.transform = '';
-        this.querySelector('.card-glare')?.remove();
-    });
-
-    // Ripple
-    card.addEventListener('click', function (e) {
-        const circle   = document.createElement('span');
-        const diameter = Math.max(this.clientWidth, this.clientHeight);
-        const rect     = this.getBoundingClientRect();
-        circle.classList.add('ripple');
-        circle.style.width = circle.style.height = diameter + 'px';
-        circle.style.left = (e.clientX - rect.left - diameter / 2) + 'px';
-        circle.style.top  = (e.clientY - rect.top  - diameter / 2) + 'px';
-        this.querySelector('.ripple')?.remove();
-        this.appendChild(circle);
-    });
-});
-</script>
-
-</body>
-</html>
-
-
-
+<?php
+require __DIR__ . '/includes/views/footer.php';
+require __DIR__ . '/includes/views/layout_foot.php';