255 lines
13 KiB
HTML
255 lines
13 KiB
HTML
{{ define "main" }}
|
|
<div class="main-content">
|
|
<!-- STARTSEITE: KI-LABOR -->
|
|
|
|
<!-- ASCII-SHIMMER SCHRIFTZUG -->
|
|
<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>
|
|
|
|
<!-- 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 #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>
|
|
|
|
<!-- 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 }}
|