84b28d64f5
Self-injecting script following impressum.js pattern: - data-tone attribute: playful | serious | minimal | none - Reads document.documentElement.lang for KI (de) vs AI (en) - MutationObserver on lang attr for i18n toggle compat - All tones link to msbls.de/ki - Injected into all 54 custom sites with data-tone="playful" - Template infra: base.html includes script, render.sh reads disclosure.tone - disclosure.tone added to 3 example site.yaml files Implements m/onepager#2
302 lines
19 KiB
HTML
302 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>KIlitär — KI im Einsatz</title>
|
|
<meta name="description" content="KIlitär — KI + Militär. Strategische KI-Operationen. Satirische Militär-KI für den Alltag.">
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>★</text></svg>">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
:root {
|
|
--bg: #0a0d08;
|
|
--bg-elevated: #0f130c;
|
|
--bg-card: #141a10;
|
|
--border: #1e2818;
|
|
--text: #c8d0b8;
|
|
--text-dim: #707860;
|
|
--text-muted: #404830;
|
|
--olive: #6b8e23;
|
|
--olive-light: #8fbc3c;
|
|
--olive-glow: rgba(107, 142, 35, 0.15);
|
|
--amber: #d4a017;
|
|
--red-star: #cc2200;
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow-x: hidden;
|
|
background-image:
|
|
repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(107,142,35,0.02) 40px, rgba(107,142,35,0.02) 41px),
|
|
repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(107,142,35,0.02) 40px, rgba(107,142,35,0.02) 41px);
|
|
}
|
|
|
|
.container { max-width: 920px; margin: 0 auto; padding: 0 24px; }
|
|
|
|
nav {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
|
padding: 16px 0;
|
|
background: rgba(10, 13, 8, 0.92);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
nav .container { display: flex; justify-content: space-between; align-items: center; }
|
|
.logo { font-family: 'Share Tech Mono', monospace; font-size: 1.15rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
|
|
.logo .ki { color: var(--olive-light); }
|
|
.logo .star { color: var(--red-star); font-size: 1.3rem; vertical-align: middle; }
|
|
.nav-links a { color: var(--text-muted); text-decoration: none; font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
|
|
|
|
.hero {
|
|
min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
|
text-align: center; padding: 120px 24px 80px;
|
|
position: relative;
|
|
}
|
|
.hero::before {
|
|
content: '★'; position: absolute; font-size: 300px; opacity: 0.02;
|
|
top: 50%; left: 50%; transform: translate(-50%, -50%);
|
|
color: var(--red-star);
|
|
}
|
|
|
|
.classification {
|
|
display: inline-block; padding: 6px 20px;
|
|
border: 2px solid var(--red-star); border-radius: 4px;
|
|
font-family: 'Share Tech Mono', monospace; font-size: 0.7rem;
|
|
letter-spacing: 0.2em; text-transform: uppercase; color: var(--red-star);
|
|
margin-bottom: 32px; background: rgba(204, 34, 0, 0.05);
|
|
}
|
|
|
|
.hero h1 {
|
|
font-family: 'Share Tech Mono', monospace; font-size: clamp(2.5rem, 7vw, 5rem);
|
|
font-weight: 400; line-height: 1.1; margin-bottom: 24px;
|
|
letter-spacing: 0.05em; text-transform: uppercase;
|
|
}
|
|
.hero h1 .ki { color: var(--olive-light); text-shadow: 0 0 30px var(--olive-glow); }
|
|
.hero p {
|
|
font-size: 1rem; color: var(--text-dim); max-width: 500px;
|
|
margin: 0 auto 40px; font-family: 'Share Tech Mono', monospace;
|
|
}
|
|
|
|
.status-bar {
|
|
display: inline-flex; gap: 24px; padding: 16px 32px;
|
|
background: var(--bg-card); border: 1px solid var(--border);
|
|
border-radius: 8px; font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.75rem;
|
|
}
|
|
.status-item { display: flex; align-items: center; gap: 8px; }
|
|
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
|
|
.status-dot.green { background: var(--olive-light); box-shadow: 0 0 8px var(--olive-glow); }
|
|
.status-dot.amber { background: var(--amber); }
|
|
.status-dot.red { background: var(--red-star); animation: blink 1.5s infinite; }
|
|
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
|
|
|
|
.section { padding: 80px 0; }
|
|
.section-label {
|
|
font-family: 'Share Tech Mono', monospace; font-size: 0.65rem;
|
|
letter-spacing: 0.2em; text-transform: uppercase; color: var(--olive);
|
|
margin-bottom: 12px;
|
|
}
|
|
.section h2 {
|
|
font-family: 'Share Tech Mono', monospace; font-size: clamp(1.4rem, 3.5vw, 2rem);
|
|
font-weight: 400; margin-bottom: 40px; letter-spacing: 0.05em; text-transform: uppercase;
|
|
}
|
|
.section h2 .ki { color: var(--olive-light); }
|
|
|
|
.ops-grid {
|
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.ops-card {
|
|
background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
|
|
padding: 28px; position: relative; overflow: hidden; transition: all 0.3s;
|
|
border-left: 3px solid var(--olive);
|
|
}
|
|
.ops-card:hover { border-color: var(--olive-light); transform: translateY(-2px); }
|
|
.ops-code {
|
|
font-family: 'Share Tech Mono', monospace; font-size: 0.65rem;
|
|
color: var(--olive); letter-spacing: 0.1em; margin-bottom: 8px;
|
|
}
|
|
.ops-card h3 { font-size: 1rem; margin-bottom: 8px; color: var(--olive-light); font-family: 'Share Tech Mono', monospace; }
|
|
.ops-card p { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; }
|
|
.ops-status { font-family: 'Share Tech Mono', monospace; font-size: 0.7rem; color: var(--olive); margin-top: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
|
|
|
|
.terminal-section {
|
|
background: var(--bg-elevated); padding: 80px 0;
|
|
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
|
}
|
|
.terminal {
|
|
background: #000; border: 1px solid var(--border); border-radius: 8px;
|
|
padding: 24px; font-family: 'Share Tech Mono', monospace; font-size: 0.8rem;
|
|
line-height: 2; color: var(--olive-light); max-width: 600px; margin: 0 auto;
|
|
}
|
|
.terminal .prompt { color: var(--olive); }
|
|
.terminal .output { color: var(--text-dim); }
|
|
.terminal .error { color: var(--red-star); }
|
|
.terminal .cursor { display: inline-block; width: 8px; height: 14px; background: var(--olive-light); animation: blink 1s infinite; vertical-align: middle; }
|
|
|
|
.ranks-section { padding: 80px 0; }
|
|
.rank-grid {
|
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.rank-card {
|
|
background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
|
|
padding: 24px; text-align: center;
|
|
}
|
|
.rank-star { font-size: 1.5rem; color: var(--red-star); margin-bottom: 8px; }
|
|
.rank-card h4 { font-family: 'Share Tech Mono', monospace; font-size: 0.85rem; color: var(--olive-light); margin-bottom: 4px; text-transform: uppercase; }
|
|
.rank-card p { font-size: 0.75rem; color: var(--text-muted); }
|
|
|
|
footer { padding: 40px 0; border-top: 1px solid var(--border); text-align: center; }
|
|
footer p { font-size: 0.7rem; color: var(--text-muted); font-family: 'Share Tech Mono', monospace; letter-spacing: 0.05em; }
|
|
footer .ki { color: var(--olive-light); }
|
|
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
|
|
.hero > div > * { animation: fadeIn 0.7s ease-out both; }
|
|
.hero > div > *:nth-child(2) { animation-delay: 0.1s; }
|
|
.hero > div > *:nth-child(3) { animation-delay: 0.2s; }
|
|
.hero > div > *:nth-child(4) { animation-delay: 0.3s; }
|
|
.hero > div > *:nth-child(5) { animation-delay: 0.4s; }
|
|
|
|
@media (max-width: 768px) {
|
|
.status-bar { flex-direction: column; gap: 8px; align-items: flex-start; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<div class="container">
|
|
<div class="logo"><span class="star">★</span> <span class="ki">KI</span>LITÄR</div>
|
|
<div class="nav-links"><a href="#operationen" data-de="Operationen" data-en="Operations">Operationen</a></div>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="hero">
|
|
<div class="container">
|
|
<div class="classification" data-de="★ Geheim ★ Nur für KI-Personal" data-en="★ Secret ★ Authorised AI Personnel Only">★ Geheim ★ Nur für KI-Personal</div>
|
|
<h1><span class="ki">KI</span>litär</h1>
|
|
<p data-de="KI im Einsatz. Strategisch. Taktisch. Satirisch." data-en="AI deployed. Strategic. Tactical. Satirical.">KI im Einsatz. Strategisch. Taktisch. Satirisch.</p>
|
|
<div class="status-bar">
|
|
<div class="status-item"><span class="status-dot green"></span> <span data-de="Prompt-Kanone geladen" data-en="Prompt cannon loaded">Prompt-Kanone geladen</span></div>
|
|
<div class="status-item"><span class="status-dot amber"></span> <span data-de="Halluzination möglich" data-en="Hallucination possible">Halluzination möglich</span></div>
|
|
<div class="status-item"><span class="status-dot red"></span> <span data-de="Budget: KRITISCH" data-en="Budget: CRITICAL">Budget: KRITISCH</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="operationen">
|
|
<div class="container">
|
|
<div class="section-label" data-de="★ Aktive Operationen" data-en="★ Active Operations">★ Aktive Operationen</div>
|
|
<h2 data-de="<span class="ki">KI</span>-Einsatzkommandos" data-en="<span class="ki">KI</span> Task Forces"><span class="ki">KI</span>-Einsatzkommandos</h2>
|
|
<div class="ops-grid">
|
|
<div class="ops-card">
|
|
<div class="ops-code">OP-KI-001</div>
|
|
<h3 data-de="Operation Prompt Storm" data-en="Operation Prompt Storm">Operation Prompt Storm</h3>
|
|
<p data-de="Strategischer Einsatz von ChatGPT zur Erstellung von Memos, die niemand liest. Trefferquote: 100%. Relevanz: 0%." data-en="Strategic deployment of ChatGPT to create memos nobody reads. Hit rate: 100%. Relevance: 0%.">Strategischer Einsatz von ChatGPT zur Erstellung von Memos, die niemand liest. Trefferquote: 100%. Relevanz: 0%.</p>
|
|
<div class="ops-status" data-de="★ Status: Aktiv" data-en="★ Status: Active">★ Status: Aktiv</div>
|
|
</div>
|
|
<div class="ops-card">
|
|
<div class="ops-code">OP-KI-002</div>
|
|
<h3 data-de="Operation Datenschutz" data-en="Operation Data Protection">Operation Datenschutz</h3>
|
|
<p data-de="Verteidigungslinie gegen Cookie-Banner. Bisher keine Überlebenden. Der Feind hat unendlich viele Pop-ups." data-en="Defence line against cookie banners. No survivors yet. The enemy has infinite pop-ups.">Verteidigungslinie gegen Cookie-Banner. Bisher keine Überlebenden. Der Feind hat unendlich viele Pop-ups.</p>
|
|
<div class="ops-status" data-de="★ Status: Gescheitert" data-en="★ Status: Failed">★ Status: Gescheitert</div>
|
|
</div>
|
|
<div class="ops-card">
|
|
<div class="ops-code">OP-KI-003</div>
|
|
<h3 data-de="Operation Autopilot" data-en="Operation Autopilot">Operation Autopilot</h3>
|
|
<p data-de="Autonome KI-Fahrzeuge im urbanen Einsatz. Kollidiert bisher nur mit Ampeln. Fortschritt." data-en="Autonomous AI vehicles in urban deployment. Has only collided with traffic lights so far. Progress.">Autonome KI-Fahrzeuge im urbanen Einsatz. Kollidiert bisher nur mit Ampeln. Fortschritt.</p>
|
|
<div class="ops-status" data-de="★ Status: Testphase" data-en="★ Status: Testing Phase">★ Status: Testphase</div>
|
|
</div>
|
|
<div class="ops-card">
|
|
<div class="ops-code">OP-KI-004</div>
|
|
<h3 data-de="Operation Deep Fake" data-en="Operation Deep Fake">Operation Deep Fake</h3>
|
|
<p data-de="Generierung von Präsentationsfolien die aussehen als hätte ein Mensch sie gemacht. Niemand merkt den Unterschied. Weil alle Folien gleich aussehen." data-en="Generation of presentation slides that look like a human made them. Nobody notices the difference. Because all slides look the same.">Generierung von Präsentationsfolien die aussehen als hätte ein Mensch sie gemacht. Niemand merkt den Unterschied. Weil alle Folien gleich aussehen.</p>
|
|
<div class="ops-status" data-de="★ Status: Erfolgreich" data-en="★ Status: Successful">★ Status: Erfolgreich</div>
|
|
</div>
|
|
<div class="ops-card">
|
|
<div class="ops-code">OP-KI-005</div>
|
|
<h3 data-de="Operation Kaffeemaschine" data-en="Operation Coffee Machine">Operation Kaffeemaschine</h3>
|
|
<p data-de="KI-gestützte Kaffeelogistik. Algorithmus berechnet optimalen Zeitpunkt. Ergebnis: Kaffee ist immer kalt." data-en="AI-assisted coffee logistics. Algorithm calculates optimal timing. Result: coffee is always cold.">KI-gestützte Kaffeelogistik. Algorithmus berechnet optimalen Zeitpunkt. Ergebnis: Kaffee ist immer kalt.</p>
|
|
<div class="ops-status" data-de="★ Status: Koffein-Defizit" data-en="★ Status: Caffeine Deficit">★ Status: Koffein-Defizit</div>
|
|
</div>
|
|
<div class="ops-card">
|
|
<div class="ops-code">OP-KI-006</div>
|
|
<h3 data-de="Operation Floskelalarm" data-en="Operation Buzzword Alert">Operation Floskelalarm</h3>
|
|
<p data-de="Erkennung und Neutralisierung von KI-Buzzwords in Meetings. Rekord: 47 "Game-Changer" in einer Stunde." data-en="Detection and neutralisation of AI buzzwords in meetings. Record: 47 "game-changers" in one hour.">Erkennung und Neutralisierung von KI-Buzzwords in Meetings. Rekord: 47 "Game-Changer" in einer Stunde.</p>
|
|
<div class="ops-status" data-de="★ Status: Überlastet" data-en="★ Status: Overloaded">★ Status: Überlastet</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="terminal-section">
|
|
<div class="container">
|
|
<div class="section-label" style="text-align: center;" data-de="★ Kommandozentrale" data-en="★ Command Centre">★ Kommandozentrale</div>
|
|
<div class="terminal">
|
|
<span class="prompt">kilitaer@hq:~$</span> ki deploy --strategie<br>
|
|
<span class="output" data-de="[INFO] Strategie wird generiert..." data-en="[INFO] Generating strategy...">[INFO] Strategie wird generiert...</span><br>
|
|
<span class="output" data-de="[INFO] Schritt 1: PowerPoint erstellen" data-en="[INFO] Step 1: Create PowerPoint">[INFO] Schritt 1: PowerPoint erstellen</span><br>
|
|
<span class="output" data-de="[INFO] Schritt 2: "Synergien" erwähnen" data-en="[INFO] Step 2: Mention "Synergies"">[INFO] Schritt 2: "Synergien" erwähnen</span><br>
|
|
<span class="output" data-de="[INFO] Schritt 3: Budget verdreifachen" data-en="[INFO] Step 3: Triple the budget">[INFO] Schritt 3: Budget verdreifachen</span><br>
|
|
<span class="error" data-de="[FEHLER] Budget nicht gefunden" data-en="[ERROR] Budget not found">[FEHLER] Budget nicht gefunden</span><br>
|
|
<span class="error" data-de="[FEHLER] Strategie nicht gefunden" data-en="[ERROR] Strategy not found">[FEHLER] Strategie nicht gefunden</span><br>
|
|
<span class="error" data-de="[FEHLER] Sinn nicht gefunden" data-en="[ERROR] Meaning not found">[FEHLER] Sinn nicht gefunden</span><br>
|
|
<span class="prompt">kilitaer@hq:~$</span> ki --help<br>
|
|
<span class="output" data-de="[INFO] Hilfe? Im KIlitär? Meldung machen!" data-en="[INFO] Help? In KIlitär? Report to duty!">[INFO] Hilfe? Im KIlitär? Meldung machen!</span><br>
|
|
<span class="prompt">kilitaer@hq:~$</span> <span class="cursor"></span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="ranks-section">
|
|
<div class="container" style="text-align: center;">
|
|
<div class="section-label" data-de="★ Dienstgrade" data-en="★ Ranks">★ Dienstgrade</div>
|
|
<h2 style="font-family: 'Share Tech Mono', monospace; text-transform: uppercase; margin-bottom: 40px;" data-de="<span class="ki" style="color: var(--olive-light);">KI</span>-Ränge" data-en="<span class="ki" style="color: var(--olive-light);">KI</span> Ranks"><span class="ki" style="color: var(--olive-light);">KI</span>-Ränge</h2>
|
|
<div class="rank-grid">
|
|
<div class="rank-card">
|
|
<div class="rank-star">★</div>
|
|
<h4 data-de="Prompt-Rekrut" data-en="Prompt Recruit">Prompt-Rekrut</h4>
|
|
<p data-de="Tippt "Hilfe" in ChatGPT" data-en="Types "Help" into ChatGPT">Tippt "Hilfe" in ChatGPT</p>
|
|
</div>
|
|
<div class="rank-card">
|
|
<div class="rank-star">★★</div>
|
|
<h4 data-de="Daten-Gefreiter" data-en="Data Private">Daten-Gefreiter</h4>
|
|
<p data-de="Kann CSV von Excel unterscheiden" data-en="Can tell CSV from Excel">Kann CSV von Excel unterscheiden</p>
|
|
</div>
|
|
<div class="rank-card">
|
|
<div class="rank-star">★★★</div>
|
|
<h4 data-de="Algorithmus-Offizier" data-en="Algorithm Officer">Algorithmus-Offizier</h4>
|
|
<p data-de="Hat mal "Machine Learning" gegoogelt" data-en="Has googled "Machine Learning" once">Hat mal "Machine Learning" gegoogelt</p>
|
|
</div>
|
|
<div class="rank-card">
|
|
<div class="rank-star">★★★★</div>
|
|
<h4 data-de="KI-General" data-en="AI General">KI-General</h4>
|
|
<p data-de="Sagt "neuronales Netz" im Meeting ohne zu zögern" data-en="Says "neural network" in meetings without hesitating">Sagt "neuronales Netz" im Meeting ohne zu zögern</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p data-de="★ <span class="ki">KI</span>litär — <span class="ki">KI</span> im Einsatz. Strategisch. Taktisch. Sinnlos. ★" data-en="★ <span class="ki">KI</span>litär — <span class="ki">KI</span> deployed. Strategic. Tactical. Pointless. ★">★ <span class="ki">KI</span>litär — <span class="ki">KI</span> im Einsatz. Strategisch. Taktisch. Sinnlos. ★</p>
|
|
<div style="text-align:center;margin-top:16px;">
|
|
<button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
|
|
<br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script src="/shared/impressum.js"></script>
|
|
<script src="/shared/ai-disclosure.js" data-tone="playful"></script>
|
|
<script src="/shared/i18n.js"></script>
|
|
</body>
|
|
</html>
|