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
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>
|
||||
Reference in New Issue
Block a user