eaebcd35cf
- shared/impressum.js: configurable via data-owner and data-style attrs - Default: minimal msbls.de attribution for satire sites - Build now copies shared/ to build output - Caddyfile serves /shared/* globally across all domains - Removed martinsiebels.de references from 7 KI-satire sites
297 lines
13 KiB
HTML
297 lines
13 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">Operationen</a></div>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="hero">
|
|
<div class="container">
|
|
<div class="classification">★ Geheim ★ Nur für KI-Personal</div>
|
|
<h1><span class="ki">KI</span>litär</h1>
|
|
<p>KI im Einsatz. Strategisch. Taktisch. Satirisch.</p>
|
|
<div class="status-bar">
|
|
<div class="status-item"><span class="status-dot green"></span> Prompt-Kanone geladen</div>
|
|
<div class="status-item"><span class="status-dot amber"></span> Halluzination möglich</div>
|
|
<div class="status-item"><span class="status-dot red"></span> Budget: KRITISCH</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="operationen">
|
|
<div class="container">
|
|
<div class="section-label">★ Aktive Operationen</div>
|
|
<h2><span class="ki">KI</span>-Einsatzkommandos</h2>
|
|
<div class="ops-grid">
|
|
<div class="ops-card">
|
|
<div class="ops-code">OP-KI-001</div>
|
|
<h3>Operation Prompt Storm</h3>
|
|
<p>Strategischer Einsatz von ChatGPT zur Erstellung von Memos, die niemand liest. Trefferquote: 100%. Relevanz: 0%.</p>
|
|
<div class="ops-status">★ Status: Aktiv</div>
|
|
</div>
|
|
<div class="ops-card">
|
|
<div class="ops-code">OP-KI-002</div>
|
|
<h3>Operation Datenschutz</h3>
|
|
<p>Verteidigungslinie gegen Cookie-Banner. Bisher keine Überlebenden. Der Feind hat unendlich viele Pop-ups.</p>
|
|
<div class="ops-status">★ Status: Gescheitert</div>
|
|
</div>
|
|
<div class="ops-card">
|
|
<div class="ops-code">OP-KI-003</div>
|
|
<h3>Operation Autopilot</h3>
|
|
<p>Autonome KI-Fahrzeuge im urbanen Einsatz. Kollidiert bisher nur mit Ampeln. Fortschritt.</p>
|
|
<div class="ops-status">★ Status: Testphase</div>
|
|
</div>
|
|
<div class="ops-card">
|
|
<div class="ops-code">OP-KI-004</div>
|
|
<h3>Operation Deep Fake</h3>
|
|
<p>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">★ Status: Erfolgreich</div>
|
|
</div>
|
|
<div class="ops-card">
|
|
<div class="ops-code">OP-KI-005</div>
|
|
<h3>Operation Kaffeemaschine</h3>
|
|
<p>KI-gestützte Kaffeelogistik. Algorithmus berechnet optimalen Zeitpunkt. Ergebnis: Kaffee ist immer kalt.</p>
|
|
<div class="ops-status">★ Status: Koffein-Defizit</div>
|
|
</div>
|
|
<div class="ops-card">
|
|
<div class="ops-code">OP-KI-006</div>
|
|
<h3>Operation Floskelalarm</h3>
|
|
<p>Erkennung und Neutralisierung von KI-Buzzwords in Meetings. Rekord: 47 "Game-Changer" in einer Stunde.</p>
|
|
<div class="ops-status">★ Status: Überlastet</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="terminal-section">
|
|
<div class="container">
|
|
<div class="section-label" style="text-align: center;">★ Kommandozentrale</div>
|
|
<div class="terminal">
|
|
<span class="prompt">kilitaer@hq:~$</span> ki deploy --strategie<br>
|
|
<span class="output">[INFO] Strategie wird generiert...</span><br>
|
|
<span class="output">[INFO] Schritt 1: PowerPoint erstellen</span><br>
|
|
<span class="output">[INFO] Schritt 2: "Synergien" erwähnen</span><br>
|
|
<span class="output">[INFO] Schritt 3: Budget verdreifachen</span><br>
|
|
<span class="error">[FEHLER] Budget nicht gefunden</span><br>
|
|
<span class="error">[FEHLER] Strategie nicht gefunden</span><br>
|
|
<span class="error">[FEHLER] Sinn nicht gefunden</span><br>
|
|
<span class="prompt">kilitaer@hq:~$</span> ki --help<br>
|
|
<span class="output">[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">★ Dienstgrade</div>
|
|
<h2 style="font-family: 'Share Tech Mono', monospace; text-transform: uppercase; margin-bottom: 40px;"><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>Prompt-Rekrut</h4>
|
|
<p>Tippt "Hilfe" in ChatGPT</p>
|
|
</div>
|
|
<div class="rank-card">
|
|
<div class="rank-star">★★</div>
|
|
<h4>Daten-Gefreiter</h4>
|
|
<p>Kann CSV von Excel unterscheiden</p>
|
|
</div>
|
|
<div class="rank-card">
|
|
<div class="rank-star">★★★</div>
|
|
<h4>Algorithmus-Offizier</h4>
|
|
<p>Hat mal "Machine Learning" gegoogelt</p>
|
|
</div>
|
|
<div class="rank-card">
|
|
<div class="rank-star">★★★★</div>
|
|
<h4>KI-General</h4>
|
|
<p>Sagt "neuronales Netz" im Meeting ohne zu zögern</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>★ <span class="ki">KI</span>litär — <span class="ki">KI</span> im Einsatz. Strategisch. Taktisch. Sinnlos. ★</p>
|
|
|
|
</div>
|
|
</footer>
|
|
<script src="/shared/impressum.js"></script>
|
|
</body>
|
|
</html>
|