kilabor/layouts/index.html

{{ define "main" }}
<div class="main-content">
<!-- STARTSEITE: KI-LABOR -->
<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>

<!-- PERSONEN NAVIGATION (Über dem Bild) -->
<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>
    {{ partial "person_nav.html" . }}
</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>

<!-- OPS DASHBOARD (EXAKT NACH SCREENSHOT) -->
<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>

<!-- SCHWARZES TERMINAL / SYSTEM LOG -->
<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 #1a1a1a; padding-bottom: 10px;">
            <span style="color: #333; font-size: 0.65rem; letter-spacing: 3px;">// SYSTEM_LOG_FEED</span>
            <span id="fortune-trigger" style="color: #222; font-size: 0.6rem; letter-spacing: 2px; cursor: pointer; border: 1px solid #1a1a1a; padding: 2px 10px;">[ ORAKEL ]</span>
        </div>
        <div id="fortune-text" style="color: #333; font-size: 0.7rem; 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 #1a1a1a; 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>

<!-- PROJEKT-ARCHIV -->
<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>

    <!-- PROJEKT GRID -->
    <div class="portfolio-grid" id="main-grid">
        {{ range .Site.RegularPages }}
            {{ if eq .Section "posts" }}
            <a href="{{ .RelPermalink }}" class="portfolio-link project-card" data-category="{{ .Params.status_class | default "stable" }}">
                <div class="portfolio-item">
                    <span class="status-tag {{ .Params.status_class | default "stable" }}">
                        {{ .Params.status_label | default "AKTIV" }}
                    </span>
                    <div class="project-header-wrap">
                        {{ if .Params.thumb }}
                            <img src="{{ .Params.thumb }}" class="project-thumb" alt="Preview">
                        {{ end }}
                        <h3>{{ .Title }}</h3>
                    </div>
                    <div class="item-excerpt">
                        {{ .Summary }}
                    </div>
                </div>
            </a>
            {{ end }}
        {{ end }}
    </div>

    <!-- MAC NERDS PANEL (inline) -->
    <div id="mac-nerds-panel" style="display: none;">

        <!-- KATEGORIE FILTER -->
        <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>
            {{ range site.Data.mac_nerds_cats }}
            <button class="mn-cat" data-cat="{{ . }}" onclick="mnFilter('{{ . }}', this)">{{ . | upper }}</button>
            {{ end }}
        </div>

        <!-- COMMAND CARDS -->
        <div id="mn-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px;">
            {{ range site.Data.mac_nerds }}
            <div class="mn-card" data-cat="{{ .cat }}">
                <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);">{{ .cat | upper }}</span>
                    <span class="mn-risk risk-{{ .risk }}">{{ .risk | upper }}</span>
                </div>
                <h3 style="color: #d4af37; font-size: 0.95rem; letter-spacing: 2px; margin: 0 0 10px;">{{ .title }}</h3>
                <div class="mn-cmd-block" onclick="mnCopy(this, '{{ .cmd | htmlEscape }}')">
                    <code style="color: #7ec8a4; font-size: 0.78rem; word-break: break-all; flex: 1;">{{ .cmd }}</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;">{{ .desc }}</p>
            </div>
            {{ end }}
        </div>
    </div>

</div>

<!-- Ende main-content -->

<!-- BOOT SCREEN -->
<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>
{{ end }}