84b28d64f5
Self-injecting script following impressum.js pattern: - data-tone attribute: playful | serious | minimal | none - Reads document.documentElement.lang for KI (de) vs AI (en) - MutationObserver on lang attr for i18n toggle compat - All tones link to msbls.de/ki - Injected into all 54 custom sites with data-tone="playful" - Template infra: base.html includes script, render.sh reads disclosure.tone - disclosure.tone added to 3 example site.yaml files Implements m/onepager#2
291 lines
17 KiB
HTML
291 lines
17 KiB
HTML
<!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" data-de="Oder doch nicht?" data-en="Or maybe?">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 data-de="Was du siehst ist nicht echt.<br>Was du liest auch nicht." data-en="What you see is not real.<br>Neither is what you read.">Was du siehst ist nicht echt.<br>Was du liest auch nicht.</p>
|
|
<p class="meta" data-de="(Oder doch? Woher willst du das wissen?)" data-en="(Or is it? How would you know?)">(Oder doch? Woher willst du das wissen?)</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="illusionen">
|
|
<div class="container">
|
|
<div class="section-label" data-de="Nichts davon ist real" data-en="None of this is real">Nichts davon ist real</div>
|
|
<h2 data-de="Die großen <span class="ki">KI</span>llusionen" data-en="The great <span class="ki">KI</span>llusions">Die großen <span class="ki">KI</span>llusionen</h2>
|
|
<div class="illusion-grid">
|
|
<div class="illusion-card">
|
|
<div class="illusion-icon">🪞</div>
|
|
<h3 data-de="Die Authentizitäts-KIllusion" data-en="The Authenticity KIllusion">Die Authentizitäts-KIllusion</h3>
|
|
<p data-de=""Dieser Text wurde von einem Menschen geschrieben." Sagt die KI. Die den Text geschrieben hat. Der behauptet, ein Mensch hätte ihn geschrieben." data-en=""This text was written by a human." Says the AI. Which wrote the text. Which claims a human wrote it.">"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 data-de="Die Kompetenz-KIllusion" data-en="The Competence KIllusion">Die Kompetenz-KIllusion</h3>
|
|
<p data-de="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." data-en="The AI sounds so convincing that you forget: it has no idea. It just sounds like it has an idea. That's the whole trick.">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 data-de="Die Originalitäts-KIllusion" data-en="The Originality KIllusion">Die Originalitäts-KIllusion</h3>
|
|
<p data-de="Du denkst, du hast eine einzigartige Idee. Aber 10.000 andere haben denselben Prompt eingegeben. Gleichzeitig." data-en="You think you have a unique idea. But 10,000 others have entered the same prompt. At the same time.">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 data-de="Die Bild-KIllusion" data-en="The Image KIllusion">Die Bild-KIllusion</h3>
|
|
<p data-de="Das Foto sieht echt aus. Aber zähl die Finger. Zähl sie. Sechs? Sieben? Willkommen in der Realität." data-en="The photo looks real. But count the fingers. Count them. Six? Seven? Welcome to reality.">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 data-de="Die Fortschritts-KIllusion" data-en="The Progress KIllusion">Die Fortschritts-KIllusion</h3>
|
|
<p data-de="Jede Woche ein neues KI-Modell. Jedes "revolutionär". Alle machen im Grunde das Gleiche: Text vorhersagen. Aber jetzt schneller." data-en="Every week a new AI model. Each one "revolutionary". All basically doing the same thing: predicting text. But faster now.">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 data-de="Die Meta-KIllusion" data-en="The Meta-KIllusion">Die Meta-KIllusion</h3>
|
|
<p data-de="Diese Website über KIllusionen ist selbst eine KIllusion. Geschrieben von einer KI. Die darüber schreibt, dass KI Illusionen erzeugt. Hast du Kopfschmerzen?" data-en="This website about KIllusions is itself a KIllusion. Written by an AI. Which writes about AI generating illusions. Do you have a headache?">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;" data-de="Paradoxien" data-en="Paradoxes">Paradoxien</div>
|
|
<h2 style="text-align: center; margin-bottom: 40px;" data-de="Was ist echt? Ein Test." data-en="What is real? A test.">Was ist echt? Ein Test.</h2>
|
|
<div class="paradox-list">
|
|
<div class="paradox-item">
|
|
<span class="paradox-num">01</span>
|
|
<p data-de="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?" data-en="If an <span class="ki">AI</span> says "I am not an AI" — is it lying? Or is it so good that it believes it isn't one?">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 data-de="Wenn du einen <span class="ki">KI</span>-Text korrigierst und ihn besser machst — ist es dann noch ein KI-Text oder deiner?" data-en="If you correct an <span class="ki">AI</span> text and make it better — is it still an AI text or yours?">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 data-de="Wenn eine <span class="ki">KI</span> Satire über KI schreibt — ist die Satire dann echt? Oder ist sie selbst Teil der KIllusion?" data-en="If an <span class="ki">AI</span> writes satire about AI — is the satire real? Or is it itself part of the KIllusion?">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 data-de="Wenn du bis hierher gelesen hast — hat dich der Text überzeugt? Dann hat die <span class="ki">KI</span>llusion funktioniert." data-en="If you've read this far — did the text convince you? Then the <span class="ki">KI</span>llusion worked.">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 data-de="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." data-en="You just read a website that claims nothing is real. The website is real. Its content is not. Or maybe it is. You will never know. That is the <span class="ki">KI</span>llusion.<br><br><span class="cyan">Close the tab.</span><br>Or leave it open. It makes no difference. The <span class="ki">KI</span>llusion remains.">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 data-de="<span class="ki">KI</span>llusion — Nichts ist echt. Alles ist <span class="ki">KI</span>." data-en="<span class="ki">KI</span>llusion — Nothing is real. Everything is <span class="ki">KI</span>."><span class="ki">KI</span>llusion — Nichts ist echt. Alles ist <span class="ki">KI</span>.</p>
|
|
<div style="text-align:center;margin-top:16px;">
|
|
<button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
|
|
<br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script src="/shared/impressum.js"></script>
|
|
<script src="/shared/ai-disclosure.js" data-tone="playful"></script>
|
|
<script src="/shared/i18n.js"></script>
|
|
</body>
|
|
</html>
|