kilabor/public/index.html
2026-09-04 00:33:04 +02:00

857 lines
44 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="de-de">
<head>
<meta name="generator" content="Hugo 0.165.0"><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1414&amp;path=livereload" data-no-instant defer></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> | DIGITALE ANARCHIE | KI-LABOR</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body class="home-page ">
<div class="bg-gear gear-left">⚙</div>
<div class="bg-gear gear-right">⚙</div>
<script>document.body.classList.add('js-enabled');</script>
<header class="main-header">
</header>
<main class="container">
<div class="main-content">
<div class="ascii-shimmer-hero"
data-ascii-shimmer
data-text="KILABOR"
data-cell="10"
style="max-width: 900px; margin: 0 auto 10px; width: 100%;"></div>
<header>
<h1 style="color: #ff4500; font-size: 2.5rem; letter-spacing: 8px; text-shadow: 0 0 20px rgba(255,69,0,0.4);">SASCHAS ZENTRUM FÜR DIGITALE ANARCHIE</h1>
<p class="tagline" style="color: #d4af37; font-size: 1.1rem; letter-spacing: 3px;">Beruf: Geisteskrank & Gemini Player</p>
<div class="warning-box" style="border: 1px dashed #ff4500; padding: 15px; margin: 20px auto; max-width: 600px; color: #ff4500; font-size: 0.8rem;">
⚠ VORSICHT: INSTABILE ALGORITHMEN. BETRETEN AUF EIGENE GEFAHR. <br>
KEINE HAFTUNG FÜR DATENVERLUST ODER EXISTENZIELLE KRISEN.
</div>
</header>
<div class="reboot-container" style="text-align: center; margin-bottom: 10px;">
<a href="/" style="color: #444; font-size: 0.7rem; text-decoration: none; border: 1px solid #222; padding: 2px 10px; text-transform: uppercase; letter-spacing: 2px;">[ Manual System Reboot ]</a>
</div>
<div style="margin-bottom: 20px; padding-top: 10px;">
<p style="text-align: center; color: #444; font-size: 0.6rem; letter-spacing: 5px;">// ZENTRAL-ARCHIV ZUGRIFF</p>
<div class="person-nav-container" style="display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 15px 0 30px;">
<div class="person-nav-row" style="display: flex; justify-content: center; align-items: center; gap: 35px; flex-wrap: wrap; position: relative;">
<a href="/personen/mutti/" class="person-nav-item">
<div class="person-nav-portrait" style="width: 90px; height: 90px; border-radius: 50%; border: 2px solid #d4af37; background: #222; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #d4af37; font-weight: bold; font-size: 1.2rem; box-shadow: 0 0 10px rgba(212,175,55,0.2);">
<img src="/img/comicFigures/hp_mutti_comic_1.jpeg" alt="MUTTI" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<span class="person-nav-label" style="margin-top: 8px; font-size: 0.85rem; letter-spacing: 1px; color: rgba(212,175,55,0.6); font-family: 'Courier New', monospace; font-weight: bold;">MUTTI</span>
</a>
<a href="/personen/vater/" class="person-nav-item">
<div class="person-nav-portrait" style="width: 90px; height: 90px; border-radius: 50%; border: 2px solid #d4af37; background: #222; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #d4af37; font-weight: bold; font-size: 1.2rem; box-shadow: 0 0 10px rgba(212,175,55,0.2);">
<img src="/img/comicFigures/hp_vater_comic_1.png" alt="VATER" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<span class="person-nav-label" style="margin-top: 8px; font-size: 0.85rem; letter-spacing: 1px; color: rgba(212,175,55,0.6); font-family: 'Courier New', monospace; font-weight: bold;">VATER</span>
</a>
<a href="/personen/bruder/" class="person-nav-item">
<div class="person-nav-portrait" style="width: 90px; height: 90px; border-radius: 50%; border: 2px solid #d4af37; background: #222; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #d4af37; font-weight: bold; font-size: 1.2rem; box-shadow: 0 0 10px rgba(212,175,55,0.2);">
<img src="/img/comicFigures/hp_freddy_comic_1.png" alt="BRUDER" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<span class="person-nav-label" style="margin-top: 8px; font-size: 0.85rem; letter-spacing: 1px; color: rgba(212,175,55,0.6); font-family: 'Courier New', monospace; font-weight: bold;">BRUDER</span>
</a>
<a href="/personen/schwester/" class="person-nav-item">
<div class="person-nav-portrait" style="width: 90px; height: 90px; border-radius: 50%; border: 2px solid #d4af37; background: #222; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #d4af37; font-weight: bold; font-size: 1.2rem; box-shadow: 0 0 10px rgba(212,175,55,0.2);">
<img src="/img/comicFigures/hp_meli_comic_1.png" alt="SCHWESTER" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<span class="person-nav-label" style="margin-top: 8px; font-size: 0.85rem; letter-spacing: 1px; color: rgba(212,175,55,0.6); font-family: 'Courier New', monospace; font-weight: bold;">SCHWESTER</span>
</a>
<a href="/personen/sascha/" class="person-nav-item">
<div class="person-nav-portrait" style="width: 90px; height: 90px; border-radius: 50%; border: 2px solid #d4af37; background: #222; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #d4af37; font-weight: bold; font-size: 1.2rem; box-shadow: 0 0 10px rgba(212,175,55,0.2);">
<img src="/img/comicFigures/hp_sascha_comic_1.jpeg" alt="SASCHA" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<span class="person-nav-label" style="margin-top: 8px; font-size: 0.85rem; letter-spacing: 1px; color: rgba(212,175,55,0.6); font-family: 'Courier New', monospace; font-weight: bold;">SASCHA</span>
</a>
<a href="/personen/sven/" class="person-nav-item">
<div class="person-nav-portrait" style="width: 90px; height: 90px; border-radius: 50%; border: 2px solid #d4af37; background: #222; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #d4af37; font-weight: bold; font-size: 1.2rem; box-shadow: 0 0 10px rgba(212,175,55,0.2);">
<img src="/img/comicFigures/hp_sven_comic_1.jpeg" alt="SVEN" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<span class="person-nav-label" style="margin-top: 8px; font-size: 0.85rem; letter-spacing: 1px; color: rgba(212,175,55,0.6); font-family: 'Courier New', monospace; font-weight: bold;">SVEN</span>
</a>
</div>
</div>
<style>
.person-nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; transition: transform 0.2s; }
.person-nav-item:hover { transform: scale(1.1); }
.person-nav-item:hover .person-nav-label { color: #d4af37 !important; }
.person-back {
display: inline-block;
color: rgba(212,175,55,0.6);
font-size: 0.7rem;
font-weight: bold;
letter-spacing: 4px;
text-decoration: none;
font-family: 'Courier New', monospace;
border: 1px solid rgba(212,175,55,0.25);
padding: 6px 20px;
background: transparent;
text-transform: uppercase;
transition: all 0.2s;
}
.person-back:hover {
color: #d4af37;
border-color: rgba(212,175,55,0.6);
background: rgba(212,175,55,0.05);
letter-spacing: 5px;
}
</style>
</div>
<div style="text-align: center; margin-bottom: 30px;">
<img src="/img/hero.png" class="hero-image" alt="Steampunk Sascha" style="border: 2px solid #3d2b1f; box-shadow: 0 0 30px rgba(0,0,0,0.5); max-width: 900px; width: 100%;">
</div>
<div class="control-panel">
<button class="switch-btn" data-mode="kernel">KI-KERNEL</button>
<button class="switch-btn green" data-mode="anarchy">ANARCHIE-MODE</button>
<button class="switch-btn blue" data-mode="bypass">SECURITY-BYPASS</button>
<button class="switch-btn purple" data-mode="scan">DEEP SCAN</button>
<button class="switch-btn red" data-mode="overdrive">OVERDRIVE</button>
</div>
<div id="ops-dashboard-sign" style="background: rgba(20,0,0,0.8); border: 1px solid #600; padding: 20px; margin: 40px auto 0; max-width: 900px; font-family: 'Courier New', monospace; color: #f00; text-align: center; box-shadow: inset 0 0 20px rgba(255,0,0,0.1);">
<div class="ops-sign-header" style="margin-bottom: 15px; display: flex; justify-content: center; align-items: center; gap: 15px;">
<span class="ops-blink-dot" style="width: 8px; height: 8px; background: #f00; border-radius: 50%; display: inline-block; animation: blinker 1s infinite;"></span>
<span class="ops-title" style="letter-spacing: 5px; font-size: 0.9rem; font-weight: bold;">● CHIRURGISCHES OPS-DASHBOARD ●</span>
<span class="ops-blink-dot" style="width: 8px; height: 8px; background: #f00; border-radius: 50%; display: inline-block; animation: blinker 1s infinite;"></span>
</div>
<div class="ops-sign-stats" style="display: flex; justify-content: center; align-items: center; gap: 30px; margin-bottom: 10px;">
<div class="ops-stat-block">
<div style="font-size: 0.6rem; color: #666; margin-bottom: 5px;">HEUTE</div>
<div style="font-size: 1.2rem; letter-spacing: 2px;">|||</div>
<div style="font-size: 0.9rem;">3 OPS</div>
</div>
<span style="color: #444; font-size: 1.2rem;">◈</span>
<div class="ops-stat-block">
<div style="font-size: 0.6rem; color: #666; margin-bottom: 5px;">ERFOLGE</div>
<div style="font-size: 1.2rem; letter-spacing: 2px;">|½</div>
<div style="font-size: 0.9rem; color: #d4af37;">1.5</div>
</div>
<span style="color: #444; font-size: 1.2rem;">◈</span>
<div class="ops-stat-block">
<div style="font-size: 0.6rem; color: #666; margin-bottom: 5px;">RESTE</div>
<div style="font-size: 0.9rem; color: #f00;">KUEHLHAUS C</div>
</div>
</div>
<div style="font-size: 0.6rem; color: #444; margin-top: 10px; letter-spacing: 2px;">[ PROTOKOLL EINSEHEN ]</div>
</div>
<div id="terminal-container" style="margin-top: 20px; max-width: 900px; margin-left: auto; margin-right: auto;">
<div id="system-log" style="background: #000; border: 1px solid #1a1a1a; padding: 20px; font-family: 'Courier New', monospace; box-shadow: inset 0 0 20px rgba(0,255,65,0.03); overflow: hidden; transition: height 0.4s ease;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid #444; padding-bottom: 10px;">
<span style="color: #4dd0ff; font-weight: bold; font-size: 0.65rem; letter-spacing: 3px;">// SYSTEM_LOG_FEED</span>
<span id="fortune-trigger" class="oracle-link" style="font-size: 0.6rem; letter-spacing: 2px; cursor: pointer; padding: 2px 10px;">[ ORAKEL ]</span>
</div>
<div id="fortune-text" style="color: #f00; font-size: 1.1rem; font-weight: bold; min-height: 20px; margin-bottom: 15px; font-style: italic;"></div>
<div id="log-output" style="color: #0f0; font-size: 0.75rem; height: 220px; overflow-y: auto; margin-bottom: 15px; display: flex; flex-direction: column-reverse;"></div>
<div style="display: flex; align-items: center; border-top: 1px solid #444; padding-top: 10px;">
<span style="color: #ff4500; font-size: 0.75rem; margin-right: 8px;">sascha@ki-labor:~$</span>
<input id="terminal-input" type="text" style="flex: 1; background: transparent; border: none; color: #0f0; font-family: 'Courier New', monospace; font-size: 0.75rem; outline: none;" placeholder="befehl eingeben... (help)">
</div>
</div>
</div>
<div id="terminal-container" style="margin-top: 5px;">
<div class="content-box">
<div class="content-header" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
<h2 style="margin: 0;" id="content-box-title">PROJEKT-ARCHIV</h2>
<div class="filter-controls">
<button class="filter-btn active" data-filter="all" onclick="showArchiv(); filterProjects('all', this)">ALLE</button>
<button class="filter-btn" data-filter="stable" onclick="showArchiv(); filterProjects('stable', this)">STABIL</button>
<button class="filter-btn" data-filter="corrupted" onclick="showArchiv(); filterProjects('corrupted', this)">KRITISCH</button>
<button class="filter-btn" id="mac-nerds-btn" style="color: #0f0; border-color: rgba(0,255,65,0.4);" onclick="showMacNerds(this)">MAC NERDS</button>
</div>
</div>
<div class="portfolio-grid" id="main-grid">
<a href="/posts/protocol-top/" class="portfolio-link project-card" data-category="stable">
<div class="portfolio-item">
<span class="status-tag stable">
PROTOKOLL #0099
</span>
<div class="project-header-wrap">
<img src="/img/hp_muti_steampunk_01.png" class="project-thumb" alt="Preview">
<h3>&gt; topha</h3>
</div>
<div class="item-excerpt">
<h3 id="status-prozess-überwachung">STATUS: PROZESS-ÜBERWACHUNG</h3>
<p>Welche dämonischen Prozesse laufen gerade im Hintergrund? KREATIVITAET.exe frisst 94% CPU. PROKRASTINATION.app wurde erfolgreich suspendiert.</p>
</div>
</div>
</a>
<a href="/posts/protocol-uptime/" class="portfolio-link project-card" data-category="stable">
<div class="portfolio-item">
<span class="status-tag stable">
PROTOKOLL #003
</span>
<div class="project-header-wrap">
<img src="/img/hp_vater_steampunk_01.jpg" class="project-thumb" alt="Preview">
<h3>&gt; uptime</h3>
</div>
<div class="item-excerpt">
<h3 id="status-system-laufzeit">STATUS: SYSTEM-LAUFZEIT</h3>
<p>Das System läuft seit 1974. Ungeplant. Ohne Handbuch. Mit minimaler Wartung und maximalem Kaffee-Input. Aktuelle Laufzeit live berechnet.</p>
</div>
</div>
</a>
<a href="/posts/protocol-weather/" class="portfolio-link project-card" data-category="stable">
<div class="portfolio-item">
<span class="status-tag stable">
PROTOKOLL #001
</span>
<div class="project-header-wrap">
<img src="/img/hero_07.png" class="project-thumb" alt="Preview">
<h3>&gt; weather</h3>
</div>
<div class="item-excerpt">
<h3 id="status-chaos-level-analyse">STATUS: CHAOS-LEVEL ANALYSE</h3>
<p>Das Wetter? Irrelevant. Was zählt ist der Chaos-Level in deinen Schaltkreisen. Dieser Scanner analysiert atmosphärische Destabilisierung und Koffein-Sättigung.</p>
</div>
</div>
</a>
<a href="/posts/gemini-link/" class="portfolio-link project-card" data-category="experimental">
<div class="portfolio-item">
<span class="status-tag experimental">
EXPERIMENTELL
</span>
<div class="project-header-wrap">
<img src="/img/hero_3.png" class="project-thumb" alt="Preview">
<h3>Gemini Neural Link</h3>
</div>
<div class="item-excerpt">
<h3 id="status-ki-kollaboration-alpha">STATUS: KI-KOLLABORATION ALPHA</h3>
<p>Dieses gesamte Theme, jedes Komma in der CSS-Datei und jede Zeile im JavaScript-Log ist das Ergebnis einer direkten neuronalen Kopplung zwischen Sascha und Gemini. Wir arbeiten im sogenannten &ldquo;Flux Flow&rdquo;.</p>
</div>
</div>
</a>
<a href="/posts/neural-hack/" class="portfolio-link project-card" data-category="stable">
<div class="portfolio-item">
<span class="status-tag stable">
AKTIV
</span>
<div class="project-header-wrap">
<img src="/img/hero_4.png" class="project-thumb" alt="Preview">
<h3>Neural Hack Sequence</h3>
</div>
<div class="item-excerpt">
<h3 id="status-protocol-breach">STATUS: PROTOCOL BREACH</h3>
<p>Der &ldquo;hack&rdquo;-Befehl im Terminal ist weit mehr als nur eine Animation. Er triggert eine kaskadierende Sequenz von zufälligen Hexadezimal-Werten, die direkt in den System-Log gestreamt werden.</p>
</div>
</div>
</a>
<a href="/posts/operation-apollo/" class="portfolio-link project-card" data-category="experimental">
<div class="portfolio-item">
<span class="status-tag experimental">
TOP SECRET
</span>
<div class="project-header-wrap">
<img src="/img/hero_3.png" class="project-thumb" alt="Preview">
<h3>Operation: Apollo</h3>
</div>
<div class="item-excerpt">
<h3 id="status-kennedy-space-center-compromised">STATUS: KENNEDY SPACE CENTER COMPROMISED</h3>
<p>Ein direkter Uplink in das Herzstück der NASA-Server. Wir haben die Barrieren des JPL durchbrochen, um Echtzeit-Telemetriedaten abzugreifen.</p>
</div>
</div>
</a>
<a href="/posts/flux-overdrive/" class="portfolio-link project-card" data-category="corrupted">
<div class="portfolio-item">
<span class="status-tag corrupted">
ÜBERTAKTET
</span>
<div class="project-header-wrap">
<img src="/img/hero_2.png" class="project-thumb" alt="Preview">
<h3>Project: Flux Overdrive</h3>
</div>
<div class="item-excerpt">
<h3 id="status-schwäbisch-accelerated">STATUS: SCHWÄBISCH ACCELERATED</h3>
<p>Das System war zu langsam. Zu statisch. Zu berechenbar. Also haben wir <strong>Flux</strong> ins Leben gerufen. &ldquo;Flux&rdquo; bedeutet im Schwäbischen nicht einfach nur schnell – es bedeutet hastig, rasant und gnadenlos zielgerichtet.</p>
</div>
</div>
</a>
<a href="/posts/icmp-echo/" class="portfolio-link project-card" data-category="stable">
<div class="portfolio-item">
<span class="status-tag stable">
DIAGNOSE
</span>
<div class="project-header-wrap">
<img src="/img/hero_1.png" class="project-thumb" alt="Preview">
<h3>Project: ICMP Echo</h3>
</div>
<div class="item-excerpt">
<h3 id="status-latenz-analyse-aktiv">STATUS: LATENZ-ANALYSE AKTIV</h3>
<p>Der &ldquo;ping&rdquo;-Befehl ist ein essenzielles Werkzeug für jeden Cyber-Overlord. Er prüft die Integrität unserer Verbindung durch ein klassisches 4-Paket-ICMP-Echo-Request.</p>
</div>
</div>
</a>
<a href="/posts/digital-ghost/" class="portfolio-link project-card" data-category="stable">
<div class="portfolio-item">
<span class="status-tag stable">
VERSTECKT
</span>
<div class="project-header-wrap">
<img src="/img/hero_6.png" class="project-thumb" alt="Preview">
<h3>Protocol: Digital Ghost</h3>
</div>
<div class="item-excerpt">
<h3 id="status-stealth-ops-acquired">STATUS: STEALTH OPS ACQUIRED</h3>
<p>Wenn das System dich nicht sieht, existierst du nicht. Wir haben ein Protokoll implementiert, das sämtliche Tracking-Parameter verschleiert. Es ist die ultimative Form der digitalen Unsichtbarkeit.</p>
</div>
</div>
</a>
<a href="/posts/spotlight-filter/" class="portfolio-link project-card" data-category="stable">
<div class="portfolio-item">
<span class="status-tag stable">
WORKFLOW
</span>
<div class="project-header-wrap">
<img src="/img/hero_6.png" class="project-thumb" alt="Preview">
<h3>Spotlight Such-Filter</h3>
</div>
<div class="item-excerpt">
<h3 id="status-suchanfrage-präzisiert">STATUS: SUCHANFRAGE PRÄZISIERT</h3>
<p>Die Spotlight-Suche auf dem Mac spuckt oft viel zu viele irrelevante Ergebnisse aus. Wenn du genau weißt, dass du ein PDF oder einen Ordner suchst, kannst du die Suche mit dem Parameter <code>kind:</code> drastisch eingrenzen.</p>
</div>
</div>
</a>
<a href="/posts/fork-bomb/" class="portfolio-link project-card" data-category="corrupted">
<div class="portfolio-item">
<span class="status-tag corrupted">
GEFÄHRLICH
</span>
<div class="project-header-wrap">
<img src="/img/hero_4.png" class="project-thumb" alt="Preview">
<h3>System-Stress-Test (Fork Bomb)</h3>
</div>
<div class="item-excerpt">
<h3 id="status-kernel-panic-initiated">STATUS: KERNEL PANIC INITIATED</h3>
<p>Ein absoluter Klassiker der Unix-Anarchie. Dieser Befehl testet, wie gut (oder schlecht) dein Mac mit sich rapide exponentiell vervielfältigenden Prozessen umgeht.</p>
<p><strong>Anwendung:</strong>
<code>:(){ :|:&amp; };:</code></p>
<p><strong>VORSICHT:</strong> Dieser Befehl lastet das System in wenigen Sekunden zu 100% aus.</p>
</div>
</div>
</a>
<a href="/posts/n8n-resurrection/" class="portfolio-link project-card" data-category="stable">
<div class="portfolio-item">
<span class="status-tag stable">
STABIL
</span>
<div class="project-header-wrap">
<img src="/img/hero_1.png" class="project-thumb" alt="Preview">
<h3>The n8n Resurrection</h3>
</div>
<div class="item-excerpt">
<h3 id="status-operation-limbo-recovery">STATUS: OPERATION LIMBO-RECOVERY</h3>
<p>Die n8n-Instanz war nicht einfach nur &ldquo;offline&rdquo; – sie befand sich im digitalen Limbus der Docker-Hölle. Nach einem System-Crash auf dem Mac waren die Volumes zwar noch vorhanden, aber die Datenbank war korrupt.</p>
<p>Wir haben uns für den radikalen Weg entschieden: Weg von Docker Desktop, hin zu <strong>OrbStack</strong>.</p>
</div>
</div>
</a>
<a href="/posts/theme-annihilation/" class="portfolio-link project-card" data-category="corrupted">
<div class="portfolio-item">
<span class="status-tag corrupted">
KRITISCH
</span>
<div class="project-header-wrap">
<img src="/img/hero_2.png" class="project-thumb" alt="Preview">
<h3>Theme-Annihilation</h3>
</div>
<div class="item-excerpt">
<h3 id="status-aesthetic-warfare">STATUS: AESTHETIC WARFARE</h3>
<p>WordPress-Standard-Themes sind wie ein zu enger Anzug: Unbequem, voller unnötiger Features und sie fühlen sich einfach falsch an. Das &ldquo;Twenty-Twenty-Five&rdquo;-Theme war unser Ziel. Es wurde Schicht für Schicht demontiert.</p>
</div>
</div>
</a>
</div>
<div id="mac-nerds-panel" style="display: none;">
<div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px;">
<button class="mn-cat active" data-cat="all" onclick="mnFilter('all', this)">ALLE</button>
<button class="mn-cat" data-cat="dateien" onclick="mnFilter('dateien', this)">DATEIEN</button>
<button class="mn-cat" data-cat="netzwerk" onclick="mnFilter('netzwerk', this)">NETZWERK</button>
<button class="mn-cat" data-cat="performance" onclick="mnFilter('performance', this)">PERFORMANCE</button>
<button class="mn-cat" data-cat="sicherheit" onclick="mnFilter('sicherheit', this)">SICHERHEIT</button>
<button class="mn-cat" data-cat="system" onclick="mnFilter('system', this)">SYSTEM</button>
<button class="mn-cat" data-cat="tweaks" onclick="mnFilter('tweaks', this)">TWEAKS</button>
</div>
<div id="mn-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px;">
<div class="mn-card" data-cat="system">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<span style="font-size: 0.6rem; letter-spacing: 3px; color: rgba(184,115,51,0.7);">SYSTEM</span>
<span class="mn-risk risk-safe">SAFE</span>
</div>
<h3 style="color: #d4af37; font-size: 0.95rem; letter-spacing: 2px; margin: 0 0 10px;">Hardware-Kurzprofil !</h3>
<div class="mn-cmd-block" onclick="mnCopy(this, 'system_profiler SPHardwareDataType | grep -E \u0026#34;Model|Chip|Memory|Serial\u0026#34;')">
<code style="color: #7ec8a4; font-size: 0.78rem; word-break: break-all; flex: 1;">system_profiler SPHardwareDataType | grep -E &#34;Model|Chip|Memory|Serial&#34;</code>
<span class="mn-copy-hint">[KOPIEREN]</span>
</div>
<p style="color: rgba(212,175,55,0.45); font-size: 0.75rem; line-height: 1.5; margin: 0;">Model, Chip, RAM und Seriennummer auf einen Blick — ohne Klicken durch Systeminfo.</p>
</div>
<div class="mn-card" data-cat="system">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<span style="font-size: 0.6rem; letter-spacing: 3px; color: rgba(184,115,51,0.7);">SYSTEM</span>
<span class="mn-risk risk-safe">SAFE</span>
</div>
<h3 style="color: #d4af37; font-size: 0.95rem; letter-spacing: 2px; margin: 0 0 10px;">macOS Version</h3>
<div class="mn-cmd-block" onclick="mnCopy(this, 'sw_vers')">
<code style="color: #7ec8a4; font-size: 0.78rem; word-break: break-all; flex: 1;">sw_vers</code>
<span class="mn-copy-hint">[KOPIEREN]</span>
</div>
<p style="color: rgba(212,175,55,0.45); font-size: 0.75rem; line-height: 1.5; margin: 0;">ProductName, Version und Build. Schneller als jedes UI-Menü.</p>
</div>
<div class="mn-card" data-cat="system">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<span style="font-size: 0.6rem; letter-spacing: 3px; color: rgba(184,115,51,0.7);">SYSTEM</span>
<span class="mn-risk risk-safe">SAFE</span>
</div>
<h3 style="color: #d4af37; font-size: 0.95rem; letter-spacing: 2px; margin: 0 0 10px;">CPU exakter Bezeichner</h3>
<div class="mn-cmd-block" onclick="mnCopy(this, 'sysctl -n machdep.cpu.brand_string')">
<code style="color: #7ec8a4; font-size: 0.78rem; word-break: break-all; flex: 1;">sysctl -n machdep.cpu.brand_string</code>
<span class="mn-copy-hint">[KOPIEREN]</span>
</div>
<p style="color: rgba(212,175,55,0.45); font-size: 0.75rem; line-height: 1.5; margin: 0;">Zeigt den genauen CPU-String wenn jemand fragt und du nicht suchen willst.</p>
</div>
<div class="mn-card" data-cat="netzwerk">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<span style="font-size: 0.6rem; letter-spacing: 3px; color: rgba(184,115,51,0.7);">NETZWERK</span>
<span class="mn-risk risk-safe">SAFE</span>
</div>
<h3 style="color: #d4af37; font-size: 0.95rem; letter-spacing: 2px; margin: 0 0 10px;">Netzwerkqualität testen</h3>
<div class="mn-cmd-block" onclick="mnCopy(this, 'networkQuality')">
<code style="color: #7ec8a4; font-size: 0.78rem; word-break: break-all; flex: 1;">networkQuality</code>
<span class="mn-copy-hint">[KOPIEREN]</span>
</div>
<p style="color: rgba(212,175,55,0.45); font-size: 0.75rem; line-height: 1.5; margin: 0;">Apples eigenes Speedtest-Tool seit macOS 12. Misst Upload, Download und Responsiveness (RPM).</p>
</div>
<div class="mn-card" data-cat="netzwerk">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<span style="font-size: 0.6rem; letter-spacing: 3px; color: rgba(184,115,51,0.7);">NETZWERK</span>
<span class="mn-risk risk-safe">SAFE</span>
</div>
<h3 style="color: #d4af37; font-size: 0.95rem; letter-spacing: 2px; margin: 0 0 10px;">Alle offenen Ports</h3>
<div class="mn-cmd-block" onclick="mnCopy(this, 'lsof -i -n -P | grep LISTEN')">
<code style="color: #7ec8a4; font-size: 0.78rem; word-break: break-all; flex: 1;">lsof -i -n -P | grep LISTEN</code>
<span class="mn-copy-hint">[KOPIEREN]</span>
</div>
<p style="color: rgba(212,175,55,0.45); font-size: 0.75rem; line-height: 1.5; margin: 0;">Welcher Prozess hört auf welchem Port? Unverzichtbar wenn ein Port schon belegt ist.</p>
</div>
<div class="mn-card" data-cat="dateien">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<span style="font-size: 0.6rem; letter-spacing: 3px; color: rgba(184,115,51,0.7);">DATEIEN</span>
<span class="mn-risk risk-safe">SAFE</span>
</div>
<h3 style="color: #d4af37; font-size: 0.95rem; letter-spacing: 2px; margin: 0 0 10px;">DS_Store aufräumen</h3>
<div class="mn-cmd-block" onclick="mnCopy(this, 'find ~ -name \u0026#39;*.DS_Store\u0026#39; -delete 2\u0026gt;\/dev\/null \u0026amp;\u0026amp; echo \u0026#39;Aufgeräumt.\u0026#39;')">
<code style="color: #7ec8a4; font-size: 0.78rem; word-break: break-all; flex: 1;">find ~ -name &#39;*.DS_Store&#39; -delete 2&gt;/dev/null &amp;&amp; echo &#39;Aufgeräumt.&#39;</code>
<span class="mn-copy-hint">[KOPIEREN]</span>
</div>
<p style="color: rgba(212,175,55,0.45); font-size: 0.75rem; line-height: 1.5; margin: 0;">Löscht alle .DS_Store-Dateien im Home-Verzeichnis. Gut vor git-Commits.</p>
</div>
<div class="mn-card" data-cat="performance">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<span style="font-size: 0.6rem; letter-spacing: 3px; color: rgba(184,115,51,0.7);">PERFORMANCE</span>
<span class="mn-risk risk-safe">SAFE</span>
</div>
<h3 style="color: #d4af37; font-size: 0.95rem; letter-spacing: 2px; margin: 0 0 10px;">Top 15 CPU-Fresser</h3>
<div class="mn-cmd-block" onclick="mnCopy(this, 'top -o cpu -n 15 -l 1 | tail -16')">
<code style="color: #7ec8a4; font-size: 0.78rem; word-break: break-all; flex: 1;">top -o cpu -n 15 -l 1 | tail -16</code>
<span class="mn-copy-hint">[KOPIEREN]</span>
</div>
<p style="color: rgba(212,175,55,0.45); font-size: 0.75rem; line-height: 1.5; margin: 0;">Einmaliger Snapshot der 15 CPU-intensivsten Prozesse.</p>
</div>
<div class="mn-card" data-cat="tweaks">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<span style="font-size: 0.6rem; letter-spacing: 3px; color: rgba(184,115,51,0.7);">TWEAKS</span>
<span class="mn-risk risk-safe">SAFE</span>
</div>
<h3 style="color: #d4af37; font-size: 0.95rem; letter-spacing: 2px; margin: 0 0 10px;">Dock: sofortiges Einblenden!</h3>
<div class="mn-cmd-block" onclick="mnCopy(this, 'defaults write com.apple.dock autohide-delay -float 0 \u0026amp;\u0026amp; defaults write com.apple.dock autohide-time-modifier -float 0.3 \u0026amp;\u0026amp; killall Dock')">
<code style="color: #7ec8a4; font-size: 0.78rem; word-break: break-all; flex: 1;">defaults write com.apple.dock autohide-delay -float 0 &amp;&amp; defaults write com.apple.dock autohide-time-modifier -float 0.3 &amp;&amp; killall Dock</code>
<span class="mn-copy-hint">[KOPIEREN]</span>
</div>
<p style="color: rgba(212,175,55,0.45); font-size: 0.75rem; line-height: 1.5; margin: 0;">Entfernt die Verzögerung beim Dock-Einblenden. Sofort aktiv.</p>
</div>
<div class="mn-card" data-cat="sicherheit">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<span style="font-size: 0.6rem; letter-spacing: 3px; color: rgba(184,115,51,0.7);">SICHERHEIT</span>
<span class="mn-risk risk-safe">SAFE</span>
</div>
<h3 style="color: #d4af37; font-size: 0.95rem; letter-spacing: 2px; margin: 0 0 10px;">SSH Key im Agent speichern</h3>
<div class="mn-cmd-block" onclick="mnCopy(this, 'ssh-add --apple-use-keychain ~\/.ssh\/pfadzumkey')">
<code style="color: #7ec8a4; font-size: 0.78rem; word-break: break-all; flex: 1;">ssh-add --apple-use-keychain ~/.ssh/pfadzumkey</code>
<span class="mn-copy-hint">[KOPIEREN]</span>
</div>
<p style="color: rgba(212,175,55,0.45); font-size: 0.75rem; line-height: 1.5; margin: 0;">fügt für die aktuelle session den key zum ageten hinzu, beim nächsten aufruf von ssh host wird der key austomatisch benutzt</p>
</div>
</div>
</div>
</div>
<div id="boot-screen">
<div id="boot-log"></div>
</div>
<style>
@keyframes blinker { 50% { opacity: 0; } }
.mn-cat {
background: transparent;
border: 1px solid rgba(212,175,55,0.25);
color: rgba(212,175,55,0.45);
padding: 4px 14px;
font-family: 'Courier New', monospace;
font-size: 0.7rem;
letter-spacing: 2px;
cursor: pointer;
transition: all 0.2s;
}
.mn-cat:hover, .mn-cat.active {
border-color: #d4af37;
color: #d4af37;
background: rgba(212,175,55,0.07);
}
.mn-card {
background: linear-gradient(135deg, #1a1008 0%, #0d0d0d 100%);
border: 1px solid rgba(184,115,51,0.25);
padding: 16px;
font-family: 'Courier New', monospace;
transition: border-color 0.2s;
}
.mn-card:hover { border-color: rgba(212,175,55,0.5); }
.mn-card.hidden { display: none; }
.mn-risk { font-size: 0.6rem; letter-spacing: 2px; padding: 2px 6px; border: 1px solid; }
.risk-safe { color: #4caf50; border-color: rgba(76,175,80,0.4); }
.risk-warning { color: #ff9800; border-color: rgba(255,152,0,0.4); }
.risk-danger { color: #ff4500; border-color: rgba(255,69,0,0.4); }
.mn-cmd-block {
background: #000;
border: 1px solid rgba(184,115,51,0.2);
padding: 8px 12px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 10px;
transition: border-color 0.2s;
}
.mn-cmd-block:hover { border-color: rgba(212,175,55,0.5); }
.mn-cmd-block.copied { border-color: #4caf50; }
.mn-copy-hint { color: rgba(212,175,55,0.3); font-size: 0.6rem; letter-spacing: 1px; white-space: nowrap; transition: color 0.2s; }
.mn-cmd-block:hover .mn-copy-hint { color: rgba(212,175,55,0.8); }
.mn-cmd-block.copied .mn-copy-hint { color: #4caf50; }
</style>
<script>
function showMacNerds(btn) {
document.getElementById('main-grid').style.display = 'none';
document.getElementById('mac-nerds-panel').style.display = 'block';
document.getElementById('content-box-title').textContent = 'MAC NERDS TERMINAL';
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
}
function showArchiv() {
document.getElementById('main-grid').style.display = '';
document.getElementById('mac-nerds-panel').style.display = 'none';
document.getElementById('content-box-title').textContent = 'PROJEKT-ARCHIV';
}
function filterProjects(filter, btn) {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
document.querySelectorAll('.project-card').forEach(card => {
card.style.display = (filter === 'all' || card.dataset.category === filter) ? '' : 'none';
});
}
function mnFilter(cat, btn) {
document.querySelectorAll('.mn-cat').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
document.querySelectorAll('.mn-card').forEach(card => {
card.classList.toggle('hidden', cat !== 'all' && card.dataset.cat !== cat);
});
}
function mnCopy(el, cmd) {
navigator.clipboard.writeText(cmd).then(() => {
const hint = el.querySelector('.mn-copy-hint');
hint.textContent = '[KOPIERT ✓]';
el.classList.add('copied');
setTimeout(() => { hint.textContent = '[KOPIEREN]'; el.classList.remove('copied'); }, 1500);
});
}
</script>
</main>
<footer class="main-footer">
<div class="footer-inner">
<p>&copy; 2026 Sascha Rode | DIGITALE ANARCHIE | POWERED BY HUGO</p>
</div>
</footer>
<div id="newsticker" style="position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important; z-index:999999 !important; background:rgba(0,0,0,0.92) !important; border-top:1px solid rgba(255,69,0,0.35) !important; display:flex !important; align-items:center; height:28px !important; overflow:hidden; font-family:'Courier New', monospace !important; visibility: visible !important; opacity: 1 !important;">
<span class="ticker-label" style="flex-shrink:0; font-size:0.6rem; letter-spacing:2px; color:rgba(255,69,0,0.7); padding:0 15px; border-right:1px solid rgba(255,69,0,0.2); white-space:nowrap; height:100%; display:flex; align-items:center; background:rgba(255,69,0,0.05);">// SYSTEM_LOG_FEED</span>
<div class="ticker-track-wrap" style="flex:1; overflow:hidden; height:100%; display:flex; align-items:center;">
<div class="ticker-track" id="ticker-track-global" style="display:inline-flex; white-space:nowrap; animation: ticker-scroll 45s linear infinite;">
<span class="ticker-item" style="font-size:0.65rem; letter-spacing:1px; color:rgba(212,175,55,0.7); padding:0 30px; text-transform:uppercase;">[ HUGO SYSTEM INITIALISIERT... ]</span>
<span class="ticker-item" style="font-size:0.65rem; letter-spacing:1px; color:rgba(212,175,55,0.7); padding:0 30px; text-transform:uppercase;">[ WP-KERN GELÖSCHT // ANARCHIE LEVEL 100 ]</span>
</div>
</div>
</div>
<style>
@keyframes ticker-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.ticker-item::before { content: '▶ '; color: rgba(255,69,0,0.5); }
.ticker-track:hover { animation-play-state: paused; }
</style>
<script>
(function() {
const track = document.getElementById('ticker-track-global');
if (!track) return;
const ITEMS = [
"STATUS: HUGO OPERATIONAL",
"DESIGNATION: OVERLORD SASCHA",
"KAFFEESTAND: KRITISCH",
"ANARCHIE-ENGINE: LÄUFT OHNE WP-BALLAST",
"MISSION: TOTALE KONTROLLE",
"DATENINTEGRITÄT: ABSOLUT",
"WARNUNG: SYSTEM EXTREM SCHNELL",
"GEMINI NEURAL LINK: AKTIV"
];
track.innerHTML = '';
[...ITEMS, ...ITEMS].forEach(text => {
const span = document.createElement('span');
span.className = 'ticker-item';
span.style.cssText = "font-size:0.65rem; letter-spacing:1px; color:rgba(212,175,55,0.7); padding:0 30px; text-transform:uppercase;";
span.textContent = text;
track.appendChild(span);
});
})();
</script>
<script src="/js/script.js"></script>
<script src="/js/ascii-shimmer.js"></script>
</body>
</html>