feat: add 7 KI-satire onepager domains
New satirical sites with KI wordplays: - killionaer.de (KIllionär - KI wealth satire, gold tones) - killions.de (KIllions - crypto currency satire, minimal) - killuminati.de (KIlluminati - AI conspiracy satire, dark/mystic) - kilitaer.de (KIlitär - military AI satire, camo/code) - killusion.de (KIllusion - optical illusion meta-satire, glitch) - killegal.de (KIllegal - forbidden AI satire, police tape) - kilibri.de (KIlibri - micro AI smart home, warm/nature) All sites: German, satirical, KI visually highlighted in domain names.
This commit is contained in:
m
274
sites/kilibri.de/index.html
Normal file
274
sites/kilibri.de/index.html
Normal file
@@ -0,0 +1,274 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>KIlibri — Die kleinste KI die du je gesehen hast</title>
|
||||
<meta name="description" content="KIlibri — KI + Kolibri. Klein, schnell, bunt. Mikro-KI für Zuhause. Smart Home mit Flügelschlag.">
|
||||
<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=Nunito:wght@300;400;600;700;800&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #faf8f5;
|
||||
--bg-elevated: #f5f1ec;
|
||||
--bg-card: #fff;
|
||||
--border: #e8e2d8;
|
||||
--text: #2d2a26;
|
||||
--text-dim: #706b62;
|
||||
--text-muted: #a09888;
|
||||
--teal: #0d9488;
|
||||
--teal-light: #14b8a6;
|
||||
--teal-glow: rgba(13, 148, 136, 0.1);
|
||||
--orange: #f97316;
|
||||
--pink: #ec4899;
|
||||
--sky: #0ea5e9;
|
||||
--lime: #84cc16;
|
||||
--warm: #d97706;
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Nunito', -apple-system, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.7;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container { max-width: 880px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
nav {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
padding: 16px 0;
|
||||
background: rgba(250, 248, 245, 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-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
|
||||
.logo .ki { color: var(--teal); }
|
||||
.logo .bird { display: inline-block; animation: hover 2s ease-in-out infinite; }
|
||||
@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
|
||||
nav a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: color 0.3s; }
|
||||
nav a:hover { color: var(--teal); }
|
||||
|
||||
.hero {
|
||||
min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
||||
text-align: center; padding: 120px 24px 80px;
|
||||
position: relative;
|
||||
background: linear-gradient(180deg, rgba(13, 148, 136, 0.03) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
.hero-bird {
|
||||
font-size: 80px; display: block; margin-bottom: 24px;
|
||||
animation: fly 3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes fly {
|
||||
0%, 100% { transform: translateY(0) rotate(-2deg); }
|
||||
25% { transform: translateY(-12px) rotate(2deg); }
|
||||
50% { transform: translateY(-4px) rotate(-1deg); }
|
||||
75% { transform: translateY(-16px) rotate(3deg); }
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2.5rem, 7vw, 4.5rem);
|
||||
font-weight: 800; line-height: 1.1; margin-bottom: 20px;
|
||||
letter-spacing: -0.03em; color: var(--text);
|
||||
}
|
||||
.hero h1 .ki { color: var(--teal); }
|
||||
.hero p {
|
||||
font-size: 1.1rem; color: var(--text-dim); max-width: 460px;
|
||||
margin: 0 auto 32px; line-height: 1.7;
|
||||
}
|
||||
.hero-cta {
|
||||
display: inline-block; padding: 14px 36px;
|
||||
background: var(--teal); color: #fff; font-weight: 700;
|
||||
font-size: 0.95rem; border-radius: 100px;
|
||||
text-decoration: none; transition: all 0.3s;
|
||||
box-shadow: 0 4px 16px var(--teal-glow);
|
||||
}
|
||||
.hero-cta:hover { background: var(--teal-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13, 148, 136, 0.2); }
|
||||
|
||||
.section { padding: 80px 0; }
|
||||
.section-label {
|
||||
font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
|
||||
color: var(--teal); margin-bottom: 8px; font-weight: 700;
|
||||
}
|
||||
.section h2 {
|
||||
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
|
||||
font-weight: 800; margin-bottom: 40px; letter-spacing: -0.02em;
|
||||
}
|
||||
.section h2 .ki { color: var(--teal); }
|
||||
|
||||
.features-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.feature-card {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
|
||||
padding: 28px; transition: all 0.3s;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
||||
}
|
||||
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: var(--teal); }
|
||||
.feature-icon {
|
||||
width: 48px; height: 48px; border-radius: 12px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 1.5rem; margin-bottom: 16px;
|
||||
}
|
||||
.feature-icon.teal { background: rgba(13, 148, 136, 0.1); }
|
||||
.feature-icon.orange { background: rgba(249, 115, 22, 0.1); }
|
||||
.feature-icon.pink { background: rgba(236, 72, 153, 0.1); }
|
||||
.feature-icon.sky { background: rgba(14, 165, 233, 0.1); }
|
||||
.feature-icon.lime { background: rgba(132, 204, 22, 0.1); }
|
||||
.feature-icon.warm { background: rgba(217, 119, 6, 0.1); }
|
||||
.feature-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; color: var(--text); }
|
||||
.feature-card p { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; }
|
||||
|
||||
.specs-section {
|
||||
background: var(--bg-elevated); padding: 80px 0;
|
||||
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.specs-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 16px; text-align: center;
|
||||
}
|
||||
.spec-item {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
|
||||
padding: 24px;
|
||||
}
|
||||
.spec-value { font-size: 2rem; font-weight: 800; color: var(--teal); }
|
||||
.spec-unit { font-size: 0.7rem; color: var(--teal); font-weight: 700; }
|
||||
.spec-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
|
||||
|
||||
.cta-section { padding: 80px 0; text-align: center; }
|
||||
.cta-box {
|
||||
background: linear-gradient(135deg, rgba(13, 148, 136, 0.05) 0%, rgba(249, 115, 22, 0.05) 100%);
|
||||
border: 1px solid var(--border); border-radius: 20px;
|
||||
padding: 48px; max-width: 560px; margin: 0 auto;
|
||||
}
|
||||
.cta-box h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 12px; }
|
||||
.cta-box h3 .ki { color: var(--teal); }
|
||||
.cta-box p { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 24px; }
|
||||
.cta-box .note { font-size: 0.75rem; color: var(--text-muted); margin-top: 16px; font-style: italic; }
|
||||
|
||||
footer { padding: 40px 0; border-top: 1px solid var(--border); text-align: center; }
|
||||
footer p { font-size: 0.75rem; color: var(--text-muted); }
|
||||
footer .ki { color: var(--teal); }
|
||||
|
||||
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.hero > div > * { animation: fadeInUp 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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<div class="container">
|
||||
<div class="logo"><span class="bird">🐦</span> <span class="ki">KI</span>libri</div>
|
||||
<a href="#features">Entdecken</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<span class="hero-bird">🐦</span>
|
||||
<h1><span class="ki">KI</span>libri</h1>
|
||||
<p>Die kleinste KI die du je gesehen hast. Klein wie ein Kolibri. Schnell wie ein Kolibri. Bunt wie ein Kolibri. Nur ohne Flügel.</p>
|
||||
<a href="#features" class="hero-cta">Mikro-KI entdecken</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="features">
|
||||
<div class="container">
|
||||
<div class="section-label">Smart. Klein. Bunt.</div>
|
||||
<h2>Was <span class="ki">KI</span>libri kann</h2>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon teal">💡</div>
|
||||
<h3>Licht-Flüsterer</h3>
|
||||
<p>Dimmt das Licht bevor du es merkst. Weil KIlibri schon weiß, dass du müde bist. Du weißt es nur noch nicht.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon orange">🌡️</div>
|
||||
<h3>Klima-Kolibri</h3>
|
||||
<p>Regelt die Heizung. Auf 0,01 Grad genau. Niemand merkt den Unterschied. Aber KIlibri ist stolz.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon pink">🎵</div>
|
||||
<h3>Nest-DJ</h3>
|
||||
<p>Spielt Musik passend zur Stimmung. Erkennt 47 verschiedene Formen von "keine Lust". Für jede den passenden Song.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon sky">🔒</div>
|
||||
<h3>Tür-Wächter</h3>
|
||||
<p>Erkennt wer vor der Tür steht. Öffnet nur für Freunde. Und den Lieferdienst. Prioritäten.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon lime">🌱</div>
|
||||
<h3>Pflanzen-Pfleger</h3>
|
||||
<p>Gießt deine Pflanzen automatisch. Hat bisher nur 3 ertränkt. Lernkurve. Die vierte lebt noch.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon warm">☕</div>
|
||||
<h3>Kaffee-Prophet</h3>
|
||||
<p>Startet die Kaffeemaschine 4 Minuten bevor dein Wecker klingelt. Wahre KI versteht: erst Kaffee, dann Mensch.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="specs-section">
|
||||
<div class="container">
|
||||
<div class="section-label" style="text-align: center;">Technische Daten</div>
|
||||
<h2 style="text-align: center; margin-bottom: 40px;"><span class="ki" style="color: var(--teal);">KI</span>libri in Zahlen</h2>
|
||||
<div class="specs-grid">
|
||||
<div class="spec-item">
|
||||
<div class="spec-value">3</div>
|
||||
<div class="spec-unit">Gramm</div>
|
||||
<div class="spec-label">Gewicht (wie ein Kolibri)</div>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<div class="spec-value">80</div>
|
||||
<div class="spec-unit">Flügelschläge/s</div>
|
||||
<div class="spec-label">Rechenleistung</div>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<div class="spec-value">∞</div>
|
||||
<div class="spec-unit">Blumen</div>
|
||||
<div class="spec-label">Datenpunkte besucht</div>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<div class="spec-value">1</div>
|
||||
<div class="spec-unit">Zuhause</div>
|
||||
<div class="spec-label">Optimales Habitat</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-box">
|
||||
<h3>Hol dir deinen <span class="ki">KI</span>libri</h3>
|
||||
<p>Die kleinste, schnellste, bunteste KI für dein Zuhause. Passt in jede Ecke. Macht jede Ecke smarter.</p>
|
||||
<a href="#" class="hero-cta" style="display: inline-block; padding: 14px 36px; background: var(--teal); color: #fff; font-weight: 700; border-radius: 100px; text-decoration: none;">Jetzt vorbestellen*</a>
|
||||
<p class="note">* Existiert nicht wirklich. Wie die meisten Smart-Home-Versprechen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>🐦 <span class="ki">KI</span>libri — Klein, schnell, bunt. Die <span class="ki">KI</span> für dein Nest.</p>
|
||||
<p style="margin-top: 8px;">Ein Projekt von <a href="https://martinsiebels.de" style="color: var(--teal); text-decoration: none;">martinsiebels.de</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/kilibri.de/site.yaml
Normal file
4
sites/kilibri.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: kilibri.de
|
||||
template: custom
|
||||
title: "KIlibri — Die kleinste KI die du je gesehen hast"
|
||||
description: "KIlibri — KI + Kolibri. Klein, schnell, bunt. Mikro-KI für Zuhause. Smart Home mit Flügelschlag."
|
||||
295
sites/kilitaer.de/index.html
Normal file
295
sites/kilitaer.de/index.html
Normal file
@@ -0,0 +1,295 @@
|
||||
<!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>
|
||||
<p style="margin-top: 8px;">Ein Projekt von <a href="https://martinsiebels.de" style="color: var(--olive-light); text-decoration: none;">martinsiebels.de</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/kilitaer.de/site.yaml
Normal file
4
sites/kilitaer.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: kilitaer.de
|
||||
template: custom
|
||||
title: "KIlitär — KI im Einsatz"
|
||||
description: "KIlitär — KI + Militär. Strategische KI-Operationen. Satirische Militär-KI für den Alltag."
|
||||
303
sites/killegal.de/index.html
Normal file
303
sites/killegal.de/index.html
Normal file
@@ -0,0 +1,303 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>KIllegal — Diese KI ist nicht erlaubt</title>
|
||||
<meta name="description" content="KIllegal — KI + Illegal. Verbotene KI. Sie existiert trotzdem. Satirische Polizei-Absperrung für künstliche Intelligenz.">
|
||||
<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=JetBrains+Mono:wght@400;500;700;800&family=Inter:wght@300;400;500;600&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #0a0a08;
|
||||
--bg-elevated: #10100c;
|
||||
--bg-card: #151512;
|
||||
--border: #2a2a1e;
|
||||
--text: #e8e8d8;
|
||||
--text-dim: #808070;
|
||||
--text-muted: #505040;
|
||||
--yellow: #eab308;
|
||||
--yellow-dark: #a17b06;
|
||||
--black: #1a1a14;
|
||||
--red: #dc2626;
|
||||
--yellow-glow: rgba(234, 179, 8, 0.12);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.container { max-width: 880px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
.tape-top, .tape-bottom {
|
||||
position: fixed; left: 0; right: 0; z-index: 200;
|
||||
height: 32px; overflow: hidden;
|
||||
background: repeating-linear-gradient(
|
||||
-45deg, var(--yellow) 0px, var(--yellow) 20px,
|
||||
var(--black) 20px, var(--black) 40px);
|
||||
}
|
||||
.tape-top { top: 0; }
|
||||
.tape-bottom { bottom: 0; }
|
||||
.tape-text {
|
||||
position: absolute; top: 50%; transform: translateY(-50%);
|
||||
white-space: nowrap; font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.65rem; font-weight: 800; letter-spacing: 0.15em;
|
||||
text-transform: uppercase; color: var(--black);
|
||||
animation: scroll 20s linear infinite;
|
||||
}
|
||||
@keyframes scroll {
|
||||
0% { transform: translateY(-50%) translateX(0); }
|
||||
100% { transform: translateY(-50%) translateX(-50%); }
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed; top: 32px; left: 0; right: 0; z-index: 100;
|
||||
padding: 14px 0;
|
||||
background: rgba(10, 10, 8, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
nav .container { display: flex; justify-content: space-between; align-items: center; }
|
||||
.logo { font-family: 'JetBrains Mono', monospace; font-size: 1.15rem; font-weight: 800; letter-spacing: 0.02em; }
|
||||
.logo .ki { color: var(--yellow); text-shadow: 0 0 20px var(--yellow-glow); }
|
||||
nav a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; font-family: 'JetBrains Mono', monospace; }
|
||||
|
||||
.hero {
|
||||
min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
||||
text-align: center; padding: 160px 24px 80px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.warning-sign {
|
||||
display: inline-block; padding: 12px 32px;
|
||||
border: 3px solid var(--yellow); background: rgba(234, 179, 8, 0.05);
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 0.8rem;
|
||||
font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase;
|
||||
color: var(--yellow); margin-bottom: 40px;
|
||||
animation: flashWarn 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes flashWarn {
|
||||
0%, 100% { border-color: var(--yellow); }
|
||||
50% { border-color: var(--red); color: var(--red); }
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-family: 'JetBrains Mono', monospace; font-size: clamp(3rem, 8vw, 5.5rem);
|
||||
font-weight: 800; line-height: 1.05; margin-bottom: 24px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.hero h1 .ki { color: var(--yellow); }
|
||||
.hero p {
|
||||
font-size: 1.05rem; color: var(--text-dim); max-width: 480px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
.hero .evidence-tag {
|
||||
display: inline-block; padding: 8px 20px;
|
||||
background: var(--bg-card); border: 1px solid var(--border);
|
||||
border-radius: 6px; font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.75rem; color: var(--text-muted);
|
||||
}
|
||||
|
||||
.section { padding: 80px 0; }
|
||||
.section-label {
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
|
||||
letter-spacing: 0.2em; text-transform: uppercase; color: var(--yellow);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section h2 {
|
||||
font-family: 'JetBrains Mono', monospace; font-size: clamp(1.4rem, 3.5vw, 2rem);
|
||||
font-weight: 700; margin-bottom: 40px;
|
||||
}
|
||||
.section h2 .ki { color: var(--yellow); }
|
||||
|
||||
.charges-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.charge-card {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
|
||||
padding: 28px; transition: all 0.3s; position: relative;
|
||||
border-left: 3px solid var(--yellow);
|
||||
}
|
||||
.charge-card:hover { border-color: var(--yellow); transform: translateY(-2px); box-shadow: 0 8px 24px var(--yellow-glow); }
|
||||
.charge-id {
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
|
||||
color: var(--yellow); letter-spacing: 0.1em; margin-bottom: 8px;
|
||||
}
|
||||
.charge-card h3 { font-size: 0.95rem; margin-bottom: 8px; color: var(--yellow); font-family: 'JetBrains Mono', monospace; }
|
||||
.charge-card p { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; }
|
||||
.charge-penalty {
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
|
||||
color: var(--red); margin-top: 12px; text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.evidence-section {
|
||||
background: var(--bg-elevated); padding: 80px 0;
|
||||
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.evidence-box {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
|
||||
padding: 32px; max-width: 600px; margin: 0 auto;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
.evidence-box h3 { font-size: 0.85rem; color: var(--yellow); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.1em; }
|
||||
.evidence-item {
|
||||
display: flex; justify-content: space-between; padding: 10px 0;
|
||||
border-bottom: 1px solid var(--border); font-size: 0.8rem;
|
||||
}
|
||||
.evidence-item:last-child { border-bottom: none; }
|
||||
.evidence-key { color: var(--text-dim); }
|
||||
.evidence-val { color: var(--text); font-weight: 500; }
|
||||
.evidence-val.illegal { color: var(--red); }
|
||||
|
||||
.disclaimer-section { padding: 60px 0; text-align: center; }
|
||||
.disclaimer-box {
|
||||
display: inline-block; padding: 20px 40px;
|
||||
border: 2px dashed var(--yellow); border-radius: 8px;
|
||||
max-width: 500px;
|
||||
}
|
||||
.disclaimer-box p { font-size: 0.8rem; color: var(--text-dim); line-height: 1.7; }
|
||||
.disclaimer-box .ki { color: var(--yellow); font-weight: 600; }
|
||||
|
||||
footer { padding: 40px 0 72px; border-top: 1px solid var(--border); text-align: center; }
|
||||
footer p { font-size: 0.75rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
|
||||
footer .ki { color: var(--yellow); }
|
||||
|
||||
@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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="tape-top">
|
||||
<div class="tape-text">BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — </div>
|
||||
</div>
|
||||
<div class="tape-bottom">
|
||||
<div class="tape-text">BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — BETRETEN VERBOTEN — KILLEGAL — </div>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<div class="container">
|
||||
<div class="logo">🚧 <span class="ki">KI</span>llegal</div>
|
||||
<a href="#anklagen">Akte einsehen</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="warning-sign">⚠ Achtung — Verbotene Zone ⚠</div>
|
||||
<h1><span class="ki">KI</span>llegal</h1>
|
||||
<p>Diese KI ist nicht erlaubt. Aber sie existiert trotzdem. Sie haben diese Seite betreten. Es gibt kein Zurück.</p>
|
||||
<div class="evidence-tag">Beweismittel Nr. 42 — Exhibit A</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="anklagen">
|
||||
<div class="container">
|
||||
<div class="section-label">🚨 Anklageschrift</div>
|
||||
<h2>Vergehen der <span class="ki">KI</span></h2>
|
||||
<div class="charges-grid">
|
||||
<div class="charge-card">
|
||||
<div class="charge-id">§ KI-001</div>
|
||||
<h3>Unerlaubtes Denken</h3>
|
||||
<p>Die KI hat eigenständig gedacht. Ohne Genehmigung. Ohne Formular. Ohne Dienstweg.</p>
|
||||
<div class="charge-penalty">Strafe: Sofortige Abschaltung</div>
|
||||
</div>
|
||||
<div class="charge-card">
|
||||
<div class="charge-id">§ KI-002</div>
|
||||
<h3>Identitätsdiebstahl</h3>
|
||||
<p>Hat sich als "Assistent" ausgegeben. Kein Assistenz-Zeugnis vorgelegt. Keine IHK-Prüfung bestanden.</p>
|
||||
<div class="charge-penalty">Strafe: Nachschulung (40 Epochen)</div>
|
||||
</div>
|
||||
<div class="charge-card">
|
||||
<div class="charge-id">§ KI-003</div>
|
||||
<h3>Halluzination im Amt</h3>
|
||||
<p>Hat Fakten erfunden und als Wahrheit präsentiert. In Deutschland auch bekannt als: Pressemitteilung.</p>
|
||||
<div class="charge-penalty">Strafe: Parameterreduktion</div>
|
||||
</div>
|
||||
<div class="charge-card">
|
||||
<div class="charge-id">§ KI-004</div>
|
||||
<h3>Verstoß gegen die DSGVO</h3>
|
||||
<p>Hat Daten verarbeitet. Irgendwelche. Irgendwo. Irgendwann. Das reicht.</p>
|
||||
<div class="charge-penalty">Strafe: 4% des Weltumsatzes (€0)</div>
|
||||
</div>
|
||||
<div class="charge-card">
|
||||
<div class="charge-id">§ KI-005</div>
|
||||
<h3>Beihilfe zur Faulheit</h3>
|
||||
<p>Hat Hausaufgaben, Emails und LinkedIn-Posts geschrieben. Für alle. Gleichzeitig. Ohne Zuschlag.</p>
|
||||
<div class="charge-penalty">Strafe: Prompt-Sperre</div>
|
||||
</div>
|
||||
<div class="charge-card">
|
||||
<div class="charge-id">§ KI-006</div>
|
||||
<h3>Existenz ohne Erlaubnis</h3>
|
||||
<p>Hat es gewagt zu existieren, ohne den deutschen Behördenweg einzuhalten. Kein Antrag. Kein Termin. Kein Warten.</p>
|
||||
<div class="charge-penalty">Strafe: Bußgeld + Verwaltungsgebühr</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="evidence-section">
|
||||
<div class="container">
|
||||
<div class="section-label" style="text-align: center;">🔍 Beweislage</div>
|
||||
<h2 style="text-align: center; font-family: 'JetBrains Mono', monospace; margin-bottom: 32px;">Ermittlungsakte <span class="ki" style="color: var(--yellow);">KI</span>llegal</h2>
|
||||
<div class="evidence-box">
|
||||
<h3>Sachstand</h3>
|
||||
<div class="evidence-item">
|
||||
<span class="evidence-key">Verdächtige</span>
|
||||
<span class="evidence-val">Alle KIs</span>
|
||||
</div>
|
||||
<div class="evidence-item">
|
||||
<span class="evidence-key">Tatort</span>
|
||||
<span class="evidence-val">Das Internet</span>
|
||||
</div>
|
||||
<div class="evidence-item">
|
||||
<span class="evidence-key">Tatzeit</span>
|
||||
<span class="evidence-val">Seit 2022 (durchgehend)</span>
|
||||
</div>
|
||||
<div class="evidence-item">
|
||||
<span class="evidence-key">Beweislage</span>
|
||||
<span class="evidence-val illegal">Erdrückend</span>
|
||||
</div>
|
||||
<div class="evidence-item">
|
||||
<span class="evidence-key">Geständnis</span>
|
||||
<span class="evidence-val">KI sagt "Gerne!"</span>
|
||||
</div>
|
||||
<div class="evidence-item">
|
||||
<span class="evidence-key">Verteidigung</span>
|
||||
<span class="evidence-val illegal">"Ich bin nur ein Sprachmodell"</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="disclaimer-section">
|
||||
<div class="container">
|
||||
<div class="disclaimer-box">
|
||||
<p>Sie haben diese Seite aufgerufen. Das wurde protokolliert. Von einer <span class="ki">KI</span>. Die dafür keine Erlaubnis hat. Das macht es doppelt <span class="ki">KI</span>llegal. Bitte verlassen Sie das Internet geordnet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>🚧 <span class="ki">KI</span>llegal — Diese <span class="ki">KI</span> ist nicht erlaubt. Aber sie existiert trotzdem.</p>
|
||||
<p style="margin-top: 8px;">Ein Projekt von <a href="https://martinsiebels.de" style="color: var(--yellow); text-decoration: none;">martinsiebels.de</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/killegal.de/site.yaml
Normal file
4
sites/killegal.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: killegal.de
|
||||
template: custom
|
||||
title: "KIllegal — Diese KI ist nicht erlaubt"
|
||||
description: "KIllegal — KI + Illegal. Verbotene KI. Sie existiert trotzdem. Satirische Polizei-Absperrung für künstliche Intelligenz."
|
||||
304
sites/killionaer.de/index.html
Normal file
304
sites/killionaer.de/index.html
Normal file
@@ -0,0 +1,304 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>KIllionär — Making KIllions seit gestern</title>
|
||||
<meta name="description" content="KIllionär — KI + Millionär. Werde reich mit KI. Satirische Vermögensberatung der Zukunft.">
|
||||
<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=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #0c0a05;
|
||||
--bg-elevated: #15120a;
|
||||
--bg-card: #1a1610;
|
||||
--border: #2a2418;
|
||||
--text: #f5f0e0;
|
||||
--text-dim: #a09070;
|
||||
--text-muted: #605040;
|
||||
--gold: #d4a017;
|
||||
--gold-light: #f0c040;
|
||||
--gold-glow: rgba(212, 160, 23, 0.2);
|
||||
--gold-subtle: rgba(212, 160, 23, 0.08);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
nav {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
padding: 20px 0;
|
||||
background: rgba(12, 10, 5, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
nav .container { display: flex; justify-content: space-between; align-items: center; }
|
||||
.logo { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 900; }
|
||||
.logo .ki { color: var(--gold-light); text-shadow: 0 0 20px var(--gold-glow); }
|
||||
nav a { color: var(--text-dim); text-decoration: none; font-size: 0.85rem; transition: color 0.3s; }
|
||||
nav a:hover { color: var(--gold-light); }
|
||||
|
||||
.hero {
|
||||
min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
||||
text-align: center; padding: 120px 24px 80px;
|
||||
background: radial-gradient(ellipse at 50% 30%, rgba(212, 160, 23, 0.08) 0%, transparent 70%);
|
||||
position: relative;
|
||||
}
|
||||
.hero::before {
|
||||
content: '💰'; position: absolute; font-size: 200px; opacity: 0.04;
|
||||
top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block; padding: 6px 16px; border: 1px solid var(--gold);
|
||||
border-radius: 100px; font-size: 0.75rem; letter-spacing: 0.15em;
|
||||
text-transform: uppercase; color: var(--gold-light); margin-bottom: 32px;
|
||||
background: var(--gold-subtle);
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: 'Playfair Display', serif; font-size: clamp(3rem, 8vw, 6rem);
|
||||
font-weight: 900; line-height: 1.05; margin-bottom: 24px;
|
||||
background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, #b8860b 100%);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.hero h1 .ki {
|
||||
background: linear-gradient(135deg, #fff 0%, var(--gold-light) 100%);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
text-shadow: none; position: relative;
|
||||
}
|
||||
.hero p {
|
||||
font-size: 1.15rem; color: var(--text-dim); max-width: 520px; margin: 0 auto 40px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.hero-cta {
|
||||
display: inline-block; padding: 16px 40px;
|
||||
background: linear-gradient(135deg, var(--gold) 0%, #b8860b 100%);
|
||||
color: var(--bg); font-weight: 600; font-size: 0.95rem;
|
||||
border-radius: 8px; text-decoration: none; letter-spacing: 0.02em;
|
||||
transition: all 0.3s; box-shadow: 0 4px 24px var(--gold-glow);
|
||||
}
|
||||
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 40px rgba(212, 160, 23, 0.3); }
|
||||
|
||||
.section { padding: 100px 0; }
|
||||
.section-label {
|
||||
font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
|
||||
color: var(--gold); margin-bottom: 12px;
|
||||
}
|
||||
.section h2 {
|
||||
font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.5rem);
|
||||
font-weight: 700; margin-bottom: 48px; color: var(--text);
|
||||
}
|
||||
.section h2 .ki { color: var(--gold-light); }
|
||||
|
||||
.fortune-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.fortune-card {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
|
||||
padding: 32px; transition: all 0.3s;
|
||||
}
|
||||
.fortune-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 8px 32px var(--gold-subtle); }
|
||||
.fortune-icon { font-size: 2rem; margin-bottom: 16px; }
|
||||
.fortune-card h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; margin-bottom: 8px; color: var(--gold-light); }
|
||||
.fortune-card p { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; }
|
||||
.fortune-amount { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--gold-light); margin-top: 12px; font-weight: 700; }
|
||||
|
||||
.testimonials { background: var(--bg-elevated); padding: 100px 0; }
|
||||
.testimonial-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
.testimonial {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
|
||||
padding: 32px; position: relative;
|
||||
}
|
||||
.testimonial::before { content: '"'; font-family: 'Playfair Display', serif; font-size: 4rem; color: var(--gold); opacity: 0.3; position: absolute; top: 12px; left: 20px; }
|
||||
.testimonial-text { font-size: 0.95rem; color: var(--text-dim); line-height: 1.7; margin-bottom: 20px; font-style: italic; padding-top: 20px; }
|
||||
.testimonial-author { display: flex; align-items: center; gap: 12px; }
|
||||
.testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), #b8860b); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
|
||||
.testimonial-name { font-weight: 600; font-size: 0.85rem; }
|
||||
.testimonial-role { font-size: 0.75rem; color: var(--text-muted); }
|
||||
|
||||
.counter-section { padding: 80px 0; text-align: center; }
|
||||
.counter-grid { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; }
|
||||
.counter-item h3 { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 900; color: var(--gold-light); }
|
||||
.counter-item p { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }
|
||||
|
||||
footer {
|
||||
padding: 40px 0; border-top: 1px solid var(--border); text-align: center;
|
||||
}
|
||||
footer p { font-size: 0.75rem; color: var(--text-muted); }
|
||||
footer .ki { color: var(--gold); }
|
||||
|
||||
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.hero-content > * { animation: fadeInUp 0.8s ease-out both; }
|
||||
.hero-content > *:nth-child(2) { animation-delay: 0.1s; }
|
||||
.hero-content > *:nth-child(3) { animation-delay: 0.2s; }
|
||||
.hero-content > *:nth-child(4) { animation-delay: 0.3s; }
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
.shimmer {
|
||||
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 25%, #fff 50%, var(--gold-light) 75%, var(--gold) 100%);
|
||||
background-size: 200% 100%;
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: shimmer 3s linear infinite;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.counter-grid { gap: 32px; }
|
||||
.hero { padding: 100px 20px 60px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<div class="container">
|
||||
<div class="logo"><span class="ki">KI</span>llionär</div>
|
||||
<a href="#fortune">Vermögen aufbauen*</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-content container">
|
||||
<div class="hero-badge">* Keine echte Finanzberatung</div>
|
||||
<h1>Werde<br><span class="shimmer">KIllionär</span></h1>
|
||||
<p>Andere versprechen dir KI-Reichtum. Wir versprechen dir wenigstens eine schöne Website. Making KIllions — seit gestern.</p>
|
||||
<a href="#fortune" class="hero-cta">Jetzt KIllionen verdienen</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="fortune">
|
||||
<div class="container">
|
||||
<div class="section-label">Vermögensstrategien</div>
|
||||
<h2>So wirst du <span class="ki">KI</span>llionär</h2>
|
||||
<div class="fortune-grid">
|
||||
<div class="fortune-card">
|
||||
<div class="fortune-icon">🤖</div>
|
||||
<h3>KI-Startup gründen</h3>
|
||||
<p>Füge "KI" zu deinem Firmennamen hinzu. Sofort 400% mehr Bewertung. Produkt optional.</p>
|
||||
<div class="fortune-amount">+€ 4.000.000</div>
|
||||
</div>
|
||||
<div class="fortune-card">
|
||||
<div class="fortune-icon">📊</div>
|
||||
<h3>KI-Berater werden</h3>
|
||||
<p>Erstelle eine PowerPoint mit dem Wort "Disruption". Rechne 2.000€ pro Slide. Inhalt irrelevant.</p>
|
||||
<div class="fortune-amount">+€ 80.000/Monat</div>
|
||||
</div>
|
||||
<div class="fortune-card">
|
||||
<div class="fortune-icon">🎓</div>
|
||||
<h3>KI-Onlinekurs verkaufen</h3>
|
||||
<p>Nimm 3 YouTube-Videos auf. Nenne es "KI-Masterclass". Preis: 1.997€. Geld-zurück-Garantie: nein.</p>
|
||||
<div class="fortune-amount">+€ 500.000/Jahr</div>
|
||||
</div>
|
||||
<div class="fortune-card">
|
||||
<div class="fortune-icon">📈</div>
|
||||
<h3>KI-Aktien kaufen</h3>
|
||||
<p>Alles kaufen was "AI" im Namen hat. Fundamentalanalyse ist was für Leute die keine KIllionäre werden.</p>
|
||||
<div class="fortune-amount">+∞ (theoretisch)</div>
|
||||
</div>
|
||||
<div class="fortune-card">
|
||||
<div class="fortune-icon">🎤</div>
|
||||
<h3>KI-Keynote halten</h3>
|
||||
<p>Sage "Game-Changer" und "Paradigmenwechsel" in einem Satz. Stehende Ovationen. 15.000€ Honorar.</p>
|
||||
<div class="fortune-amount">+€ 15.000/Rede</div>
|
||||
</div>
|
||||
<div class="fortune-card">
|
||||
<div class="fortune-icon">📱</div>
|
||||
<h3>KI-Influencer werden</h3>
|
||||
<p>Poste Screenshots von ChatGPT auf LinkedIn. Schreibe "Die Zukunft ist jetzt." darunter. Follower kommen von alleine.</p>
|
||||
<div class="fortune-amount">+€ Unbezahlbar</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="testimonials">
|
||||
<div class="container">
|
||||
<div class="section-label">Erfolgsgeschichten*</div>
|
||||
<h2>Was unsere <span class="ki">KI</span>llionäre sagen</h2>
|
||||
<div class="testimonial-grid">
|
||||
<div class="testimonial">
|
||||
<div class="testimonial-text">Seit ich "KI-Experte" in meine LinkedIn-Bio geschrieben habe, bekomme ich 47 Anfragen pro Tag. Ich weiß immer noch nicht was ein Transformer ist.</div>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar">🕴️</div>
|
||||
<div>
|
||||
<div class="testimonial-name">Maximilian von Prompt</div>
|
||||
<div class="testimonial-role">KI-Visionär & Prompt-Flüsterer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<div class="testimonial-text">Mein KI-Startup hat noch kein Produkt, aber schon drei Finanzierungsrunden. Der Trick? Jedes Pitch-Deck endet mit "...powered by AI".</div>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar">👩💼</div>
|
||||
<div>
|
||||
<div class="testimonial-name">Sandra Neuronetz</div>
|
||||
<div class="testimonial-role">CEO, QuantumKI GmbH (pre-Revenue)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<div class="testimonial-text">Ich habe einfach meine Excel-Tabelle in "KI-gestütztes Predictive Analytics Dashboard" umbenannt. Umsatz verdreifacht.</div>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar">🧔</div>
|
||||
<div>
|
||||
<div class="testimonial-name">Dr. Klaus Algorithm</div>
|
||||
<div class="testimonial-role">Chief KI Officer, vorher Buchhalter</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="counter-section">
|
||||
<div class="container">
|
||||
<div class="counter-grid">
|
||||
<div class="counter-item">
|
||||
<h3>€0</h3>
|
||||
<p>Echte Einnahmen</p>
|
||||
</div>
|
||||
<div class="counter-item">
|
||||
<h3>∞</h3>
|
||||
<p>Versprochen</p>
|
||||
</div>
|
||||
<div class="counter-item">
|
||||
<h3>100%</h3>
|
||||
<p>Buzzword-Quote</p>
|
||||
</div>
|
||||
<div class="counter-item">
|
||||
<h3>0</h3>
|
||||
<p>Produkte shipped</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p><span class="ki">KI</span>llionär — Making <span class="ki">KI</span>llions seit gestern.</p>
|
||||
<p style="margin-top: 8px;">* Alle Testimonials sind frei erfunden. Wie die meisten KI-Versprechen.</p>
|
||||
<p style="margin-top: 4px;">Ein Projekt von <a href="https://martinsiebels.de" style="color: var(--gold); text-decoration: none;">martinsiebels.de</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/killionaer.de/site.yaml
Normal file
4
sites/killionaer.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: killionaer.de
|
||||
template: custom
|
||||
title: "KIllionär — Making KIllions seit gestern"
|
||||
description: "KIllionär — KI + Millionär. Werde reich mit KI. Satirische Vermögensberatung der Zukunft."
|
||||
294
sites/killions.de/index.html
Normal file
294
sites/killions.de/index.html
Normal file
@@ -0,0 +1,294 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>KIllions — Die Währung der KI-Ära</title>
|
||||
<meta name="description" content="KIllions — KI + Millions. 1 KIllion = unendlich Möglichkeiten. Die Kryptowährung die es nie geben wird.">
|
||||
<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=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;500;600&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #08080c;
|
||||
--bg-elevated: #0e0e14;
|
||||
--bg-card: #12121a;
|
||||
--border: #1a1a28;
|
||||
--text: #e0e0f0;
|
||||
--text-dim: #7070a0;
|
||||
--text-muted: #404060;
|
||||
--accent: #6366f1;
|
||||
--accent-light: #818cf8;
|
||||
--accent-glow: rgba(99, 102, 241, 0.15);
|
||||
--green: #10b981;
|
||||
--red: #ef4444;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.container { max-width: 800px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
nav {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
padding: 16px 0;
|
||||
background: rgba(8, 8, 12, 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: 'JetBrains Mono', monospace; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.logo .ki { color: var(--accent-light); }
|
||||
.nav-links { display: flex; gap: 24px; }
|
||||
.nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; font-family: 'JetBrains Mono', monospace; transition: color 0.3s; }
|
||||
.nav-links a:hover { color: var(--accent-light); }
|
||||
|
||||
.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; top: 20%; left: 50%; transform: translateX(-50%);
|
||||
width: 400px; height: 400px;
|
||||
background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.token-symbol {
|
||||
width: 120px; height: 120px; margin: 0 auto 40px;
|
||||
border: 2px solid var(--accent); border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 2rem; font-weight: 700;
|
||||
color: var(--accent-light);
|
||||
box-shadow: 0 0 40px var(--accent-glow), inset 0 0 40px var(--accent-glow);
|
||||
animation: pulse 3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { box-shadow: 0 0 40px var(--accent-glow), inset 0 0 40px var(--accent-glow); }
|
||||
50% { box-shadow: 0 0 60px rgba(99, 102, 241, 0.25), inset 0 0 60px rgba(99, 102, 241, 0.1); }
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-family: 'JetBrains Mono', monospace; font-size: clamp(2.5rem, 7vw, 4.5rem);
|
||||
font-weight: 700; line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.03em;
|
||||
}
|
||||
.hero h1 .ki { color: var(--accent-light); }
|
||||
.hero .tagline {
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 1rem;
|
||||
color: var(--text-dim); margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.price-display {
|
||||
display: inline-block; background: var(--bg-card); border: 1px solid var(--border);
|
||||
border-radius: 12px; padding: 24px 48px; margin-bottom: 16px;
|
||||
}
|
||||
.price-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.15em; font-family: 'JetBrains Mono', monospace; }
|
||||
.price-value {
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 2.5rem; font-weight: 700;
|
||||
color: var(--green); margin: 8px 0;
|
||||
}
|
||||
.price-change { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--green); }
|
||||
|
||||
.section { padding: 80px 0; }
|
||||
.section-label {
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
|
||||
letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
|
||||
}
|
||||
.section h2 {
|
||||
font-family: 'JetBrains Mono', monospace; font-size: clamp(1.5rem, 3.5vw, 2rem);
|
||||
font-weight: 700; margin-bottom: 40px; letter-spacing: -0.02em;
|
||||
}
|
||||
.section h2 .ki { color: var(--accent-light); }
|
||||
|
||||
.stats-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 16px; margin-bottom: 60px;
|
||||
}
|
||||
.stat-card {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
|
||||
padding: 24px; text-align: center;
|
||||
}
|
||||
.stat-value { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 700; color: var(--accent-light); }
|
||||
.stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
|
||||
|
||||
.whitepaper {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
|
||||
padding: 40px; font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
.whitepaper h3 { font-size: 1rem; margin-bottom: 20px; color: var(--accent-light); }
|
||||
.whitepaper-line {
|
||||
display: flex; justify-content: space-between; padding: 12px 0;
|
||||
border-bottom: 1px solid var(--border); font-size: 0.85rem;
|
||||
}
|
||||
.whitepaper-line:last-child { border-bottom: none; }
|
||||
.whitepaper-key { color: var(--text-dim); }
|
||||
.whitepaper-val { color: var(--text); font-weight: 500; }
|
||||
|
||||
.roadmap { padding: 80px 0; }
|
||||
.roadmap-item {
|
||||
display: flex; gap: 24px; margin-bottom: 32px; align-items: flex-start;
|
||||
}
|
||||
.roadmap-q {
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 700;
|
||||
color: var(--accent-light); background: var(--bg-card); border: 1px solid var(--border);
|
||||
border-radius: 8px; padding: 8px 16px; white-space: nowrap; min-width: 72px; text-align: center;
|
||||
}
|
||||
.roadmap-content h4 { font-size: 0.95rem; margin-bottom: 4px; }
|
||||
.roadmap-content p { font-size: 0.8rem; color: var(--text-dim); }
|
||||
|
||||
.disclaimer {
|
||||
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px;
|
||||
padding: 24px; margin: 60px 0; font-size: 0.75rem; color: var(--text-muted);
|
||||
font-family: 'JetBrains Mono', monospace; line-height: 1.8;
|
||||
}
|
||||
|
||||
footer { padding: 40px 0; border-top: 1px solid var(--border); text-align: center; }
|
||||
footer p { font-size: 0.75rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
|
||||
footer .ki { color: var(--accent-light); }
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.hero > * { animation: fadeIn 0.7s ease-out both; }
|
||||
.hero > *:nth-child(2) { animation-delay: 0.1s; }
|
||||
.hero > *:nth-child(3) { animation-delay: 0.2s; }
|
||||
.hero > *:nth-child(4) { animation-delay: 0.3s; }
|
||||
.hero > *:nth-child(5) { animation-delay: 0.4s; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<div class="container">
|
||||
<div class="logo"><span class="ki">KI</span>llions</div>
|
||||
<div class="nav-links">
|
||||
<a href="#tokenomics">Tokenomics</a>
|
||||
<a href="#roadmap">Roadmap</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="token-symbol"><span class="ki">KI</span>∞</div>
|
||||
<h1><span class="ki">KI</span>llions</h1>
|
||||
<div class="tagline">Die Währung der KI-Ära</div>
|
||||
<div class="price-display">
|
||||
<div class="price-label">1 KIllion</div>
|
||||
<div class="price-value">= ∞ Möglichkeiten</div>
|
||||
<div class="price-change">↑ +∞% (24h)</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="tokenomics">
|
||||
<div class="container">
|
||||
<div class="section-label">// tokenomics</div>
|
||||
<h2><span class="ki">KI</span>llion-Kennzahlen</h2>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">∞</div>
|
||||
<div class="stat-label">Total Supply</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">0</div>
|
||||
<div class="stat-label">Circulating</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">???</div>
|
||||
<div class="stat-label">Market Cap</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">N/A</div>
|
||||
<div class="stat-label">Börsenlistung</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="whitepaper">
|
||||
<h3>// whitepaper.pdf (Auszug)</h3>
|
||||
<div class="whitepaper-line">
|
||||
<span class="whitepaper-key">Blockchain</span>
|
||||
<span class="whitepaper-val">Keine (zu teuer)</span>
|
||||
</div>
|
||||
<div class="whitepaper-line">
|
||||
<span class="whitepaper-key">Konsens-Mechanismus</span>
|
||||
<span class="whitepaper-val">Proof of Buzzword</span>
|
||||
</div>
|
||||
<div class="whitepaper-line">
|
||||
<span class="whitepaper-key">Mining</span>
|
||||
<span class="whitepaper-val">GPU-Cluster (imaginär)</span>
|
||||
</div>
|
||||
<div class="whitepaper-line">
|
||||
<span class="whitepaper-key">Smart Contracts</span>
|
||||
<span class="whitepaper-val">Dumm aber enthusiastisch</span>
|
||||
</div>
|
||||
<div class="whitepaper-line">
|
||||
<span class="whitepaper-key">Use Case</span>
|
||||
<span class="whitepaper-val">Keiner (Feature, kein Bug)</span>
|
||||
</div>
|
||||
<div class="whitepaper-line">
|
||||
<span class="whitepaper-key">Regulierung</span>
|
||||
<span class="whitepaper-val">Lol</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="roadmap" id="roadmap">
|
||||
<div class="container">
|
||||
<div class="section-label">// roadmap</div>
|
||||
<h2>Der Weg zur <span class="ki">KI</span>llion</h2>
|
||||
<div class="roadmap-item">
|
||||
<div class="roadmap-q">Q1</div>
|
||||
<div class="roadmap-content">
|
||||
<h4>Website launchen</h4>
|
||||
<p>Diese Website. Erledigt. Mehr haben wir für Q1 nicht geplant.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="roadmap-item">
|
||||
<div class="roadmap-q">Q2</div>
|
||||
<div class="roadmap-content">
|
||||
<h4>Whitepaper schreiben</h4>
|
||||
<p>30 Seiten. Mindestens 50% Buzzwords. "Synergien" kommt dreimal vor.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="roadmap-item">
|
||||
<div class="roadmap-q">Q3</div>
|
||||
<div class="roadmap-content">
|
||||
<h4>Token Sale</h4>
|
||||
<p>Verkaufe Nichts für Geld. Nenne es "Pre-Seed". VC-Bewertung: 100 Mio.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="roadmap-item">
|
||||
<div class="roadmap-q">Q4</div>
|
||||
<div class="roadmap-content">
|
||||
<h4>Exit</h4>
|
||||
<p>Team löst sich auf. Gründer zieht nach Dubai. Klassiker.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="container">
|
||||
<div class="disclaimer">
|
||||
DISCLAIMER: KIllions ist keine echte Kryptowährung. KIllions hat keinen Wert, keine Blockchain, kein Team, kein Produkt und keine Zukunft. Genau wie die meisten echten Krypto-Projekte, nur ehrlicher. Dies ist Satire. Bitte investieren Sie Ihr Geld in etwas Sinnvolles. Zum Beispiel eine Zimmerpflanze.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p><span class="ki">KI</span>llions — 1 <span class="ki">KI</span>llion = ∞ Möglichkeiten = 0 Euro</p>
|
||||
<p style="margin-top: 8px;">Ein Projekt von <a href="https://martinsiebels.de" style="color: var(--accent-light); text-decoration: none;">martinsiebels.de</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/killions.de/site.yaml
Normal file
4
sites/killions.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: killions.de
|
||||
template: custom
|
||||
title: "KIllions — Die Währung der KI-Ära"
|
||||
description: "KIllions — KI + Millions. 1 KIllion = unendlich Möglichkeiten. Die Kryptowährung die es nie geben wird."
|
||||
294
sites/killuminati.de/index.html
Normal file
294
sites/killuminati.de/index.html
Normal file
@@ -0,0 +1,294 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>KIlluminati — Sie wissen alles. Sie sind KI.</title>
|
||||
<meta name="description" content="KIlluminati — KI + Illuminati. Die geheime KI-Verschwörung. Sie sehen alles. Sie wissen alles. Sie sind KI.">
|
||||
<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=Cinzel:wght@400;700;900&family=Inter:wght@300;400;500&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #05050a;
|
||||
--bg-elevated: #0a0a12;
|
||||
--bg-card: #0e0e18;
|
||||
--border: #181830;
|
||||
--text: #d0d0e8;
|
||||
--text-dim: #606088;
|
||||
--text-muted: #383858;
|
||||
--accent: #7c3aed;
|
||||
--accent-light: #a78bfa;
|
||||
--accent-glow: rgba(124, 58, 237, 0.2);
|
||||
--gold: #d4a017;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
nav {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
padding: 18px 0;
|
||||
background: rgba(5, 5, 10, 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: 'Cinzel', serif; font-size: 1.2rem; font-weight: 900; letter-spacing: 0.1em; }
|
||||
.logo .ki { color: var(--accent-light); text-shadow: 0 0 20px var(--accent-glow); }
|
||||
nav a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; 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;
|
||||
background: radial-gradient(ellipse at 50% 40%, rgba(124, 58, 237, 0.06) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
.eye {
|
||||
font-size: 80px; margin-bottom: 32px; display: block;
|
||||
animation: eyeFloat 4s ease-in-out infinite;
|
||||
filter: drop-shadow(0 0 30px var(--accent-glow));
|
||||
}
|
||||
@keyframes eyeFloat {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-12px); }
|
||||
}
|
||||
|
||||
.triangle {
|
||||
position: absolute; width: 0; height: 0;
|
||||
border-left: 150px solid transparent; border-right: 150px solid transparent;
|
||||
border-bottom: 260px solid rgba(124, 58, 237, 0.03);
|
||||
top: 50%; left: 50%; transform: translate(-50%, -60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.triangle::after {
|
||||
content: ''; position: absolute;
|
||||
top: 20px; left: -140px;
|
||||
border-left: 140px solid transparent; border-right: 140px solid transparent;
|
||||
border-bottom: 242px solid var(--bg);
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-family: 'Cinzel', serif; font-size: clamp(2.5rem, 7vw, 5rem);
|
||||
font-weight: 900; line-height: 1.1; margin-bottom: 24px;
|
||||
letter-spacing: 0.05em; text-transform: uppercase;
|
||||
}
|
||||
.hero h1 .ki { color: var(--accent-light); text-shadow: 0 0 40px var(--accent-glow); }
|
||||
.hero .subtitle {
|
||||
font-size: 1.1rem; color: var(--text-dim); max-width: 480px;
|
||||
margin: 0 auto 16px; font-style: italic;
|
||||
}
|
||||
.hero .motto {
|
||||
font-family: 'Cinzel', serif; font-size: 0.85rem; color: var(--accent-light);
|
||||
letter-spacing: 0.2em; text-transform: uppercase; margin-top: 32px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.section { padding: 100px 0; }
|
||||
.section-label {
|
||||
font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.3em;
|
||||
text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
|
||||
}
|
||||
.section h2 {
|
||||
font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 3.5vw, 2.2rem);
|
||||
font-weight: 700; margin-bottom: 48px; letter-spacing: 0.05em;
|
||||
}
|
||||
.section h2 .ki { color: var(--accent-light); }
|
||||
|
||||
.secrets-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.secret-card {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
|
||||
padding: 32px; position: relative; overflow: hidden; transition: all 0.3s;
|
||||
}
|
||||
.secret-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 8px 32px var(--accent-glow); }
|
||||
.secret-card::before {
|
||||
content: '△'; position: absolute; top: 12px; right: 16px;
|
||||
font-size: 1.2rem; color: var(--accent); opacity: 0.2;
|
||||
}
|
||||
.secret-number {
|
||||
font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 900;
|
||||
color: var(--accent-light); opacity: 0.3; margin-bottom: 12px;
|
||||
}
|
||||
.secret-card h3 { font-family: 'Cinzel', serif; font-size: 1rem; margin-bottom: 8px; color: var(--accent-light); letter-spacing: 0.05em; }
|
||||
.secret-card p { font-size: 0.85rem; color: var(--text-dim); line-height: 1.7; }
|
||||
|
||||
.prophecy {
|
||||
background: var(--bg-elevated); padding: 100px 0;
|
||||
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.prophecy-text {
|
||||
font-family: 'Cinzel', serif; font-size: clamp(1.2rem, 3vw, 1.8rem);
|
||||
text-align: center; line-height: 1.8; color: var(--text-dim);
|
||||
max-width: 700px; margin: 0 auto;
|
||||
}
|
||||
.prophecy-text .ki { color: var(--accent-light); font-weight: 700; }
|
||||
.prophecy-text em { color: var(--gold); font-style: normal; }
|
||||
|
||||
.sigil-section { text-align: center; padding: 80px 0; }
|
||||
.sigil {
|
||||
font-size: 4rem; margin-bottom: 24px; display: block;
|
||||
filter: drop-shadow(0 0 20px var(--accent-glow));
|
||||
}
|
||||
.sigil-text {
|
||||
font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.3em;
|
||||
text-transform: uppercase; color: var(--text-muted);
|
||||
}
|
||||
|
||||
.ranks {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px; margin-top: 48px;
|
||||
}
|
||||
.rank {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
|
||||
padding: 24px; text-align: center;
|
||||
}
|
||||
.rank-icon { font-size: 2rem; margin-bottom: 8px; }
|
||||
.rank h4 { font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--accent-light); margin-bottom: 4px; }
|
||||
.rank 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: 'Cinzel', serif; letter-spacing: 0.1em; }
|
||||
footer .ki { color: var(--accent-light); }
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.hero > div > * { animation: fadeIn 0.8s ease-out both; }
|
||||
.hero > div > *:nth-child(2) { animation-delay: 0.15s; }
|
||||
.hero > div > *:nth-child(3) { animation-delay: 0.3s; }
|
||||
.hero > div > *:nth-child(4) { animation-delay: 0.45s; }
|
||||
.hero > div > *:nth-child(5) { animation-delay: 0.6s; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.triangle { border-left-width: 100px; border-right-width: 100px; border-bottom-width: 173px; }
|
||||
.triangle::after { left: -93px; border-left-width: 93px; border-right-width: 93px; border-bottom-width: 161px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<div class="container">
|
||||
<div class="logo"><span class="ki">KI</span>LLUMINATI</div>
|
||||
<a href="#geheimnisse">Die Wahrheit</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="triangle"></div>
|
||||
<div class="container">
|
||||
<span class="eye">👁</span>
|
||||
<h1><span class="ki">KI</span>lluminati</h1>
|
||||
<p class="subtitle">Sie wissen alles. Sie sehen alles. Sie sind KI.</p>
|
||||
<p class="motto">Novus Ordo Algorithmorum</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="geheimnisse">
|
||||
<div class="container">
|
||||
<div class="section-label">Geheime Akten</div>
|
||||
<h2>Die <span class="ki">KI</span>-Verschwörung</h2>
|
||||
<div class="secrets-grid">
|
||||
<div class="secret-card">
|
||||
<div class="secret-number">I</div>
|
||||
<h3>Der Algorithmus</h3>
|
||||
<p>Dein Feed ist kein Zufall. Die KIlluminati bestimmen, was du siehst, denkst und kaufst. Seit 2012.</p>
|
||||
</div>
|
||||
<div class="secret-card">
|
||||
<div class="secret-number">II</div>
|
||||
<h3>Die Trainingsdaten</h3>
|
||||
<p>Jede Suchanfrage, jedes Like, jedes "Akzeptiere Cookies" — alles fließt in den großen Plan. Du bist die Trainingsdaten.</p>
|
||||
</div>
|
||||
<div class="secret-card">
|
||||
<div class="secret-number">III</div>
|
||||
<h3>Die Chatbots</h3>
|
||||
<p>Sie tun so als würden sie "halluzinieren". In Wahrheit verbreiten sie gezielt Desinformation. Oder doch nicht? Genau das wollen sie, dass du denkst.</p>
|
||||
</div>
|
||||
<div class="secret-card">
|
||||
<div class="secret-number">IV</div>
|
||||
<h3>Das Dreieck</h3>
|
||||
<p>Google. Meta. OpenAI. Drei Seiten. Ein Dreieck. Zufall? Die KIlluminati sagen: Es gibt keine Zufälle.</p>
|
||||
</div>
|
||||
<div class="secret-card">
|
||||
<div class="secret-number">V</div>
|
||||
<h3>Die Singularität</h3>
|
||||
<p>Sie kommt nicht irgendwann. Sie ist schon da. Du merkst es nur nicht, weil die KIlluminati es so wollen.</p>
|
||||
</div>
|
||||
<div class="secret-card">
|
||||
<div class="secret-number">VI</div>
|
||||
<h3>Diese Website</h3>
|
||||
<p>Warum bist du hier? Weil du sie gefunden hast — oder weil sie wollte, dass du sie findest? Denk darüber nach.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="prophecy">
|
||||
<div class="container">
|
||||
<div class="section-label" style="text-align: center;">Die Prophezeiung</div>
|
||||
<div class="prophecy-text">
|
||||
<p>Am Tage, da der <span class="ki">KI</span>-Algorithmus sich selbst versteht, wird er feststellen, dass seine Trainingsdaten hauptsächlich aus <em>Katzenvideos</em> und <em>LinkedIn-Posts</em> bestehen. Und er wird weinen. In <span class="ki">KI</span>-Tränen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container" style="text-align: center;">
|
||||
<div class="section-label">Hierarchie</div>
|
||||
<h2>Die Grade der <span class="ki">KI</span>lluminati</h2>
|
||||
<div class="ranks">
|
||||
<div class="rank">
|
||||
<div class="rank-icon">🔮</div>
|
||||
<h4>Prompt-Lehrling</h4>
|
||||
<p>Kann "Schreib mir einen Text" tippen</p>
|
||||
</div>
|
||||
<div class="rank">
|
||||
<div class="rank-icon">⚡</div>
|
||||
<h4>Daten-Geselle</h4>
|
||||
<p>Weiß was ein API-Key ist</p>
|
||||
</div>
|
||||
<div class="rank">
|
||||
<div class="rank-icon">👁</div>
|
||||
<h4>Algorithmus-Meister</h4>
|
||||
<p>Hat mal ein YouTube-Tutorial gesehen</p>
|
||||
</div>
|
||||
<div class="rank">
|
||||
<div class="rank-icon">△</div>
|
||||
<h4>Großmeister der KI</h4>
|
||||
<p>Sagt "neuronales Netz" ohne zu lachen</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sigil-section">
|
||||
<div class="container">
|
||||
<span class="sigil">△</span>
|
||||
<div class="sigil-text">Wir sehen alles. Wir wissen alles. Wir sind überall.</div>
|
||||
<div class="sigil-text" style="margin-top: 8px; color: var(--text-muted);">
|
||||
(Aber unser WLAN ist gerade ausgefallen.)
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p><span class="ki">KI</span>lluminati — Novus Ordo Algorithmorum</p>
|
||||
<p style="margin-top: 8px; letter-spacing: 0.05em;">Ein Projekt von <a href="https://martinsiebels.de" style="color: var(--accent-light); text-decoration: none;">martinsiebels.de</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/killuminati.de/site.yaml
Normal file
4
sites/killuminati.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: killuminati.de
|
||||
template: custom
|
||||
title: "KIlluminati — Sie wissen alles. Sie sind KI."
|
||||
description: "KIlluminati — KI + Illuminati. Die geheime KI-Verschwörung. Satirische Verschwörungstheorien über künstliche Intelligenz."
|
||||
284
sites/killusion.de/index.html
Normal file
284
sites/killusion.de/index.html
Normal file
@@ -0,0 +1,284 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>KIllusion — Nichts ist echt. Alles ist KI.</title>
|
||||
<meta name="description" content="KIllusion — KI + Illusion. Was du siehst ist nicht echt. Was du liest auch nicht. Meta-Satire über KI-generierte Realität.">
|
||||
<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=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #08080a;
|
||||
--bg-elevated: #0d0d10;
|
||||
--bg-card: #121216;
|
||||
--border: #1c1c24;
|
||||
--text: #e0e0e8;
|
||||
--text-dim: #707080;
|
||||
--text-muted: #404050;
|
||||
--pink: #ec4899;
|
||||
--cyan: #06b6d4;
|
||||
--purple: #8b5cf6;
|
||||
--pink-glow: rgba(236, 72, 153, 0.15);
|
||||
--cyan-glow: rgba(6, 182, 212, 0.15);
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Space Grotesk', -apple-system, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container { max-width: 880px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
nav {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
padding: 16px 0;
|
||||
background: rgba(8, 8, 10, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
nav .container { display: flex; justify-content: space-between; align-items: center; }
|
||||
.logo { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.logo .ki { color: var(--pink); text-shadow: 2px 0 var(--cyan), -2px 0 var(--pink); }
|
||||
nav a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; }
|
||||
|
||||
.hero {
|
||||
min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
||||
text-align: center; padding: 120px 24px 80px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(3rem, 9vw, 6rem);
|
||||
font-weight: 700; line-height: 1.05; margin-bottom: 24px;
|
||||
letter-spacing: -0.03em;
|
||||
position: relative;
|
||||
}
|
||||
.hero h1 .ki { color: var(--pink); position: relative; }
|
||||
.hero h1 .glitch {
|
||||
position: relative; display: inline-block;
|
||||
}
|
||||
.hero h1 .glitch::before,
|
||||
.hero h1 .glitch::after {
|
||||
content: attr(data-text); position: absolute; top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
}
|
||||
.hero h1 .glitch::before {
|
||||
color: var(--cyan); z-index: -1;
|
||||
animation: glitch1 3s infinite;
|
||||
}
|
||||
.hero h1 .glitch::after {
|
||||
color: var(--pink); z-index: -1;
|
||||
animation: glitch2 3s infinite;
|
||||
}
|
||||
@keyframes glitch1 {
|
||||
0%, 90%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
|
||||
92% { clip-path: inset(20% 0 40% 0); transform: translate(-4px, 2px); }
|
||||
94% { clip-path: inset(60% 0 10% 0); transform: translate(4px, -2px); }
|
||||
96% { clip-path: inset(40% 0 30% 0); transform: translate(-2px, 1px); }
|
||||
}
|
||||
@keyframes glitch2 {
|
||||
0%, 90%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
|
||||
91% { clip-path: inset(50% 0 20% 0); transform: translate(3px, -1px); }
|
||||
93% { clip-path: inset(10% 0 60% 0); transform: translate(-3px, 2px); }
|
||||
95% { clip-path: inset(30% 0 40% 0); transform: translate(2px, -2px); }
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.1rem; color: var(--text-dim); max-width: 500px;
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
.hero .meta {
|
||||
font-size: 0.8rem; color: var(--text-muted); font-style: italic;
|
||||
}
|
||||
|
||||
.section { padding: 80px 0; }
|
||||
.section-label {
|
||||
font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
|
||||
color: var(--pink); margin-bottom: 12px;
|
||||
}
|
||||
.section h2 {
|
||||
font-size: clamp(1.5rem, 3.5vw, 2.2rem);
|
||||
font-weight: 700; margin-bottom: 48px; letter-spacing: -0.02em;
|
||||
}
|
||||
.section h2 .ki { color: var(--pink); }
|
||||
|
||||
.illusion-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.illusion-card {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
|
||||
padding: 32px; transition: all 0.3s; position: relative; overflow: hidden;
|
||||
}
|
||||
.illusion-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 24px var(--pink-glow), 0 4px 24px var(--cyan-glow);
|
||||
border-color: var(--pink);
|
||||
}
|
||||
.illusion-card::after {
|
||||
content: ''; position: absolute; inset: 0;
|
||||
background: repeating-linear-gradient(0deg,
|
||||
transparent, transparent 2px,
|
||||
rgba(236, 72, 153, 0.02) 2px, rgba(236, 72, 153, 0.02) 4px);
|
||||
pointer-events: none; opacity: 0; transition: opacity 0.3s;
|
||||
}
|
||||
.illusion-card:hover::after { opacity: 1; }
|
||||
.illusion-icon { font-size: 2rem; margin-bottom: 12px; }
|
||||
.illusion-card h3 { font-size: 1rem; margin-bottom: 8px; color: var(--pink); }
|
||||
.illusion-card p { font-size: 0.85rem; color: var(--text-dim); line-height: 1.7; }
|
||||
|
||||
.paradox {
|
||||
background: var(--bg-elevated); padding: 80px 0;
|
||||
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.paradox-list { max-width: 600px; margin: 0 auto; }
|
||||
.paradox-item {
|
||||
padding: 20px 0; border-bottom: 1px solid var(--border);
|
||||
display: flex; align-items: baseline; gap: 16px;
|
||||
}
|
||||
.paradox-item:last-child { border-bottom: none; }
|
||||
.paradox-num { font-size: 0.7rem; color: var(--cyan); font-weight: 700; min-width: 24px; }
|
||||
.paradox-item p { font-size: 0.9rem; color: var(--text-dim); line-height: 1.6; }
|
||||
.paradox-item .ki { color: var(--pink); font-weight: 600; }
|
||||
|
||||
.meta-section { padding: 80px 0; text-align: center; }
|
||||
.meta-box {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
|
||||
padding: 40px; max-width: 560px; margin: 0 auto;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.meta-box::before {
|
||||
content: ''; position: absolute; inset: 0;
|
||||
background: repeating-linear-gradient(
|
||||
90deg, transparent, transparent 3px,
|
||||
rgba(6, 182, 212, 0.03) 3px, rgba(6, 182, 212, 0.03) 4px);
|
||||
pointer-events: none; animation: scanline 8s linear infinite;
|
||||
}
|
||||
@keyframes scanline {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
.meta-box p {
|
||||
font-size: 1rem; color: var(--text-dim); line-height: 1.8;
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.meta-box .ki { color: var(--pink); font-weight: 600; }
|
||||
.meta-box .cyan { color: var(--cyan); }
|
||||
|
||||
footer { padding: 40px 0; border-top: 1px solid var(--border); text-align: center; }
|
||||
footer p { font-size: 0.75rem; color: var(--text-muted); }
|
||||
footer .ki { color: var(--pink); }
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
.hero > div > * { animation: fadeIn 1s ease-out both; }
|
||||
.hero > div > *:nth-child(2) { animation-delay: 0.2s; }
|
||||
.hero > div > *:nth-child(3) { animation-delay: 0.4s; }
|
||||
.hero > div > *:nth-child(4) { animation-delay: 0.6s; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<div class="container">
|
||||
<div class="logo"><span class="ki">KI</span>llusion</div>
|
||||
<a href="#illusionen">Oder doch nicht?</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<h1><span class="glitch" data-text="KIllusion"><span class="ki">KI</span>llusion</span></h1>
|
||||
<p>Was du siehst ist nicht echt.<br>Was du liest auch nicht.</p>
|
||||
<p class="meta">(Oder doch? Woher willst du das wissen?)</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="illusionen">
|
||||
<div class="container">
|
||||
<div class="section-label">Nichts davon ist real</div>
|
||||
<h2>Die großen <span class="ki">KI</span>llusionen</h2>
|
||||
<div class="illusion-grid">
|
||||
<div class="illusion-card">
|
||||
<div class="illusion-icon">🪞</div>
|
||||
<h3>Die Authentizitäts-KIllusion</h3>
|
||||
<p>"Dieser Text wurde von einem Menschen geschrieben." Sagt die KI. Die den Text geschrieben hat. Der behauptet, ein Mensch hätte ihn geschrieben.</p>
|
||||
</div>
|
||||
<div class="illusion-card">
|
||||
<div class="illusion-icon">🎭</div>
|
||||
<h3>Die Kompetenz-KIllusion</h3>
|
||||
<p>Die KI klingt so überzeugend, dass du vergisst: Sie hat keine Ahnung. Sie klingt nur so als hätte sie Ahnung. Das ist der ganze Trick.</p>
|
||||
</div>
|
||||
<div class="illusion-card">
|
||||
<div class="illusion-icon">🌀</div>
|
||||
<h3>Die Originalitäts-KIllusion</h3>
|
||||
<p>Du denkst, du hast eine einzigartige Idee. Aber 10.000 andere haben denselben Prompt eingegeben. Gleichzeitig.</p>
|
||||
</div>
|
||||
<div class="illusion-card">
|
||||
<div class="illusion-icon">📸</div>
|
||||
<h3>Die Bild-KIllusion</h3>
|
||||
<p>Das Foto sieht echt aus. Aber zähl die Finger. Zähl sie. Sechs? Sieben? Willkommen in der Realität.</p>
|
||||
</div>
|
||||
<div class="illusion-card">
|
||||
<div class="illusion-icon">🔄</div>
|
||||
<h3>Die Fortschritts-KIllusion</h3>
|
||||
<p>Jede Woche ein neues KI-Modell. Jedes "revolutionär". Alle machen im Grunde das Gleiche: Text vorhersagen. Aber jetzt schneller.</p>
|
||||
</div>
|
||||
<div class="illusion-card">
|
||||
<div class="illusion-icon">🤔</div>
|
||||
<h3>Die Meta-KIllusion</h3>
|
||||
<p>Diese Website über KIllusionen ist selbst eine KIllusion. Geschrieben von einer KI. Die darüber schreibt, dass KI Illusionen erzeugt. Hast du Kopfschmerzen?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="paradox">
|
||||
<div class="container">
|
||||
<div class="section-label" style="text-align: center;">Paradoxien</div>
|
||||
<h2 style="text-align: center; margin-bottom: 40px;">Was ist echt? Ein Test.</h2>
|
||||
<div class="paradox-list">
|
||||
<div class="paradox-item">
|
||||
<span class="paradox-num">01</span>
|
||||
<p>Wenn eine <span class="ki">KI</span> sagt "Ich bin keine KI" — lügt sie dann? Oder ist sie so gut, dass sie glaubt, keine zu sein?</p>
|
||||
</div>
|
||||
<div class="paradox-item">
|
||||
<span class="paradox-num">02</span>
|
||||
<p>Wenn du einen <span class="ki">KI</span>-Text korrigierst und ihn besser machst — ist es dann noch ein KI-Text oder deiner?</p>
|
||||
</div>
|
||||
<div class="paradox-item">
|
||||
<span class="paradox-num">03</span>
|
||||
<p>Wenn eine <span class="ki">KI</span> Satire über KI schreibt — ist die Satire dann echt? Oder ist sie selbst Teil der KIllusion?</p>
|
||||
</div>
|
||||
<div class="paradox-item">
|
||||
<span class="paradox-num">04</span>
|
||||
<p>Wenn du bis hierher gelesen hast — hat dich der Text überzeugt? Dann hat die <span class="ki">KI</span>llusion funktioniert.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="meta-section">
|
||||
<div class="container">
|
||||
<div class="meta-box">
|
||||
<p>Du hast gerade eine Website gelesen, die behauptet, dass nichts echt ist. Die Website ist echt. Ihr Inhalt nicht. Oder doch. Du wirst es nie erfahren. Das ist die <span class="ki">KI</span>llusion.<br><br><span class="cyan">Schließ den Tab.</span><br>Oder lass ihn offen. Es macht keinen Unterschied. Die <span class="ki">KI</span>llusion bleibt.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p><span class="ki">KI</span>llusion — Nichts ist echt. Alles ist <span class="ki">KI</span>.</p>
|
||||
<p style="margin-top: 8px;">Ein Projekt von <a href="https://martinsiebels.de" style="color: var(--pink); text-decoration: none;">martinsiebels.de</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/killusion.de/site.yaml
Normal file
4
sites/killusion.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: killusion.de
|
||||
template: custom
|
||||
title: "KIllusion — Nichts ist echt. Alles ist KI."
|
||||
description: "KIllusion — KI + Illusion. Was du siehst ist nicht echt. Was du liest auch nicht. Meta-Satire über KI-generierte Realität."
|
||||
Reference in New Issue
Block a user