Compare commits
10 Commits
mai/knuth/
...
d53030ee9b
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d53030ee9b | ||
|
|
4908f45c8e | ||
|
|
be5dca6510 | ||
|
|
14c238edae | ||
|
|
8be8c74d74 | ||
|
|
b6ae4fbb34 | ||
|
|
ea9316f4d2 | ||
|
|
ea8e3cdd96 | ||
|
|
4f37b53c31 | ||
|
|
a23fb8dcc1 |
65
Caddyfile
65
Caddyfile
@@ -4,11 +4,21 @@
|
||||
}
|
||||
|
||||
:80 {
|
||||
@allaisonme_com host allaisonme.com
|
||||
handle @allaisonme_com {
|
||||
root * /srv/allaisonme.com
|
||||
file_server
|
||||
}
|
||||
@clemensplassmann_de host clemensplassmann.de
|
||||
handle @clemensplassmann_de {
|
||||
root * /srv/clemensplassmann.de
|
||||
file_server
|
||||
}
|
||||
@commanderkin_de host commanderkin.de
|
||||
handle @commanderkin_de {
|
||||
root * /srv/commanderkin.de
|
||||
file_server
|
||||
}
|
||||
@danosi_de host danosi.de
|
||||
handle @danosi_de {
|
||||
root * /srv/danosi.de
|
||||
@@ -49,6 +59,11 @@
|
||||
root * /srv/frenchkis.de
|
||||
file_server
|
||||
}
|
||||
@hallofraumaier_de host hallofraumaier.de
|
||||
handle @hallofraumaier_de {
|
||||
root * /srv/hallofraumaier.de
|
||||
file_server
|
||||
}
|
||||
@heygoldi_de host heygoldi.de heygoldi.com
|
||||
handle @heygoldi_de {
|
||||
root * /srv/heygoldi.de
|
||||
@@ -94,16 +109,66 @@
|
||||
root * /srv/keinefreun.de
|
||||
file_server
|
||||
}
|
||||
@kilemma_de host kilemma.de
|
||||
handle @kilemma_de {
|
||||
root * /srv/kilemma.de
|
||||
file_server
|
||||
}
|
||||
@kilibri_de host kilibri.de
|
||||
handle @kilibri_de {
|
||||
root * /srv/kilibri.de
|
||||
file_server
|
||||
}
|
||||
@kilitaer_de host kilitaer.de
|
||||
handle @kilitaer_de {
|
||||
root * /srv/kilitaer.de
|
||||
file_server
|
||||
}
|
||||
@killegal_de host killegal.de
|
||||
handle @killegal_de {
|
||||
root * /srv/killegal.de
|
||||
file_server
|
||||
}
|
||||
@killionaer_de host killionaer.de
|
||||
handle @killionaer_de {
|
||||
root * /srv/killionaer.de
|
||||
file_server
|
||||
}
|
||||
@killions_de host killions.de
|
||||
handle @killions_de {
|
||||
root * /srv/killions.de
|
||||
file_server
|
||||
}
|
||||
@killuminati_de host killuminati.de
|
||||
handle @killuminati_de {
|
||||
root * /srv/killuminati.de
|
||||
file_server
|
||||
}
|
||||
@killusion_de host killusion.de
|
||||
handle @killusion_de {
|
||||
root * /srv/killusion.de
|
||||
file_server
|
||||
}
|
||||
@kilofant_de host kilofant.de
|
||||
handle @kilofant_de {
|
||||
root * /srv/kilofant.de
|
||||
file_server
|
||||
}
|
||||
@kinough_de host kinough.de
|
||||
handle @kinough_de {
|
||||
root * /srv/kinough.de
|
||||
file_server
|
||||
}
|
||||
@kinowhow_de host kinowhow.de
|
||||
handle @kinowhow_de {
|
||||
root * /srv/kinowhow.de
|
||||
file_server
|
||||
}
|
||||
@kitox_de host kitox.de
|
||||
handle @kitox_de {
|
||||
root * /srv/kitox.de
|
||||
file_server
|
||||
}
|
||||
@knzlmgmt_de host knzlmgmt.de
|
||||
handle @knzlmgmt_de {
|
||||
root * /srv/knzlmgmt.de
|
||||
|
||||
715
sites/allaisonme.com/index.html
Normal file
715
sites/allaisonme.com/index.html
Normal file
@@ -0,0 +1,715 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>All AIs On Me — AI Optimization</title>
|
||||
<meta name="description" content="SEO is dead. All AIs On Me makes your brand visible to ChatGPT, Gemini, Claude and beyond. AI Optimization, not Search Engine Optimization.">
|
||||
<meta property="og:title" content="All AIs On Me — AI Optimization">
|
||||
<meta property="og:description" content="Are you recommended by AI? AI Visibility Audit, AI-optimized content, Structured Data for LLMs.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://allaisonme.com">
|
||||
<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;600&display=swap');
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #09090b;
|
||||
--bg-elevated: #111114;
|
||||
--bg-card: #15151a;
|
||||
--border: #1e1e26;
|
||||
--text: #f0f0f5;
|
||||
--text-dim: #8a8a99;
|
||||
--text-muted: #55555f;
|
||||
--gold: #d4af37;
|
||||
--gold-light: #e8c84a;
|
||||
--gold-glow: rgba(212, 175, 55, 0.15);
|
||||
--gold-subtle: rgba(212, 175, 55, 0.06);
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Grain overlay */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
|
||||
|
||||
/* ─── NAV ─── */
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
padding: 20px 0;
|
||||
background: rgba(9, 9, 11, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
nav .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.logo .ai-highlight {
|
||||
color: var(--gold);
|
||||
text-shadow: 0 0 20px var(--gold-glow);
|
||||
}
|
||||
|
||||
nav a.cta-link {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--gold);
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
nav a.cta-link:hover { opacity: 0.7; }
|
||||
|
||||
/* ─── HERO ─── */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 120px 24px 80px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.hero-eyebrow {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
margin-bottom: 32px;
|
||||
opacity: 0;
|
||||
animation: fadeUp 0.8s ease forwards 0.2s;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: clamp(3.2rem, 8vw, 6rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 28px;
|
||||
opacity: 0;
|
||||
animation: fadeUp 0.8s ease forwards 0.4s;
|
||||
}
|
||||
|
||||
.hero h1 .ai {
|
||||
color: var(--gold);
|
||||
text-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-size: clamp(1.1rem, 2.5vw, 1.35rem);
|
||||
color: var(--text-dim);
|
||||
max-width: 560px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 48px;
|
||||
opacity: 0;
|
||||
animation: fadeUp 0.8s ease forwards 0.6s;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px 36px;
|
||||
background: var(--gold);
|
||||
color: #09090b;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.05em;
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
animation: fadeUp 0.8s ease forwards 0.8s;
|
||||
}
|
||||
|
||||
.hero-cta:hover {
|
||||
background: var(--gold-light);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(212, 175, 55, 0.25);
|
||||
}
|
||||
|
||||
.hero-cta svg { width: 16px; height: 16px; }
|
||||
|
||||
/* ─── SCROLL INDICATOR ─── */
|
||||
.scroll-indicator {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
animation: fadeUp 0.8s ease forwards 1s;
|
||||
}
|
||||
|
||||
.scroll-indicator span {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.scroll-line {
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
background: linear-gradient(to bottom, var(--gold), transparent);
|
||||
animation: scrollPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ─── SECTION COMMON ─── */
|
||||
section { padding: 100px 0; }
|
||||
|
||||
.section-label {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: clamp(1.8rem, 4vw, 2.8rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-text {
|
||||
font-size: 1.05rem;
|
||||
color: var(--text-dim);
|
||||
max-width: 600px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ─── PROBLEM ─── */
|
||||
.problem {
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.problem-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 48px;
|
||||
align-items: center;
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.problem-stat {
|
||||
text-align: center;
|
||||
padding: 40px 24px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.problem-stat .number {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
color: var(--gold);
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 40px var(--gold-glow);
|
||||
}
|
||||
|
||||
.problem-stat .label {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-dim);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.problem-points {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.problem-point {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
font-size: 1rem;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.problem-point .icon {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--gold-subtle);
|
||||
border: 1px solid rgba(212, 175, 55, 0.15);
|
||||
border-radius: 6px;
|
||||
color: var(--gold);
|
||||
font-size: 0.75rem;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ─── SERVICES ─── */
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
padding: 32px 28px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.service-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--gold), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
border-color: rgba(212, 175, 55, 0.2);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.service-card:hover::before { opacity: 1; }
|
||||
|
||||
.service-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--gold-subtle);
|
||||
border: 1px solid rgba(212, 175, 55, 0.12);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.service-card h3 {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.service-card p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ─── PROVOCATION ─── */
|
||||
.provocation {
|
||||
text-align: center;
|
||||
padding: 120px 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.provocation::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse at center, var(--gold-subtle), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.provocation .big-text {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
max-width: 700px;
|
||||
margin: 0 auto 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.provocation .big-text .gold { color: var(--gold); }
|
||||
|
||||
.provocation .follow-up {
|
||||
font-size: clamp(1.3rem, 3vw, 1.8rem);
|
||||
color: var(--text-dim);
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ─── HOW ─── */
|
||||
.how {
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.step {
|
||||
position: relative;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--gold);
|
||||
opacity: 0.15;
|
||||
line-height: 1;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step h3 {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.step p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ─── CTA ─── */
|
||||
.cta-section {
|
||||
text-align: center;
|
||||
padding: 120px 24px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.cta-section .section-title {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cta-section .section-text {
|
||||
margin: 0 auto 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 18px 44px;
|
||||
background: var(--gold);
|
||||
color: #09090b;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.05em;
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background: var(--gold-light);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 40px rgba(212, 175, 55, 0.3);
|
||||
}
|
||||
|
||||
.cta-button svg { width: 18px; height: 18px; }
|
||||
|
||||
.cta-sub {
|
||||
margin-top: 16px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ─── FOOTER ─── */
|
||||
footer {
|
||||
padding: 40px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer .footer-brand {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
footer .footer-brand .ai-highlight { color: var(--gold); }
|
||||
|
||||
footer p {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
footer a:hover { color: var(--gold); }
|
||||
|
||||
/* ─── ANIMATIONS ─── */
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes scrollPulse {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ─── RESPONSIVE ─── */
|
||||
@media (max-width: 768px) {
|
||||
.problem-grid { grid-template-columns: 1fr; gap: 32px; }
|
||||
.steps { grid-template-columns: 1fr; gap: 16px; }
|
||||
.services-grid { grid-template-columns: 1fr; }
|
||||
section { padding: 72px 0; }
|
||||
.provocation { padding: 80px 24px; }
|
||||
.cta-section { padding: 80px 24px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav>
|
||||
<div class="container">
|
||||
<div class="logo">All<span class="ai-highlight">AIs</span>OnMe</div>
|
||||
<a href="#audit" class="cta-link">Get your audit →</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="hero-eyebrow">AI Optimization Agency</div>
|
||||
<h1>All <span class="ai">AIs</span> On Me</h1>
|
||||
<p class="hero-sub">SEO is dead. Welcome to the era of AI Optimization.</p>
|
||||
<a href="#audit" class="hero-cta">
|
||||
Free AI Visibility Check
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
<div class="scroll-indicator">
|
||||
<span>Scroll</span>
|
||||
<div class="scroll-line"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROBLEM -->
|
||||
<section class="problem">
|
||||
<div class="container fade-in">
|
||||
<div class="section-label">The Problem</div>
|
||||
<div class="section-title">Google is yesterday.<br>Your customers ask AI now.</div>
|
||||
<div class="problem-grid">
|
||||
<div class="problem-stat">
|
||||
<div class="number">90%</div>
|
||||
<div class="label">of all websites are invisible to AI systems</div>
|
||||
</div>
|
||||
<div class="problem-points">
|
||||
<div class="problem-point">
|
||||
<div class="icon">→</div>
|
||||
<div>Your customers ask <strong>ChatGPT</strong>, <strong>Gemini</strong>, <strong>Claude</strong> — not Google.</div>
|
||||
</div>
|
||||
<div class="problem-point">
|
||||
<div class="icon">→</div>
|
||||
<div>AI systems recommend brands they <strong>understand</strong>. Not the ones with the best PageRank.</div>
|
||||
</div>
|
||||
<div class="problem-point">
|
||||
<div class="icon">→</div>
|
||||
<div>If you don't optimize now, you'll be <strong>irrelevant</strong> in 12 months.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SERVICES -->
|
||||
<section class="services">
|
||||
<div class="container fade-in">
|
||||
<div class="section-label">What We Do</div>
|
||||
<div class="section-title">AI Optimization. Not SEO.</div>
|
||||
<p class="section-text">We make your brand visible to the systems that will decide tomorrow's recommendations.</p>
|
||||
<div class="services-grid">
|
||||
<div class="service-card">
|
||||
<div class="service-icon">🔍</div>
|
||||
<h3>AI Visibility Audit</h3>
|
||||
<p>We check how ChatGPT, Gemini and Claude talk about you — and where you're invisible.</p>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-icon">✍</div>
|
||||
<h3>AI-Optimized Content</h3>
|
||||
<p>Content written not for Google crawlers, but for Large Language Models.</p>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-icon">⚙</div>
|
||||
<h3>Structured Data for LLMs</h3>
|
||||
<p>Schema.org, JSON-LD and semantic structures that AI systems natively understand.</p>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-icon">📣</div>
|
||||
<h3>Brand Mentions Strategy</h3>
|
||||
<p>Place your brand in the sources that AI models draw their knowledge from.</p>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-icon">📊</div>
|
||||
<h3>AI Monitoring</h3>
|
||||
<p>Ongoing tracking: What do AI systems say about you? How is your AI visibility evolving?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROVOCATION -->
|
||||
<section class="provocation fade-in">
|
||||
<div class="big-text"><span class="gold">90%</span> of all websites are invisible to AI.</div>
|
||||
<div class="follow-up">Is yours?</div>
|
||||
</section>
|
||||
|
||||
<!-- HOW IT WORKS -->
|
||||
<section class="how">
|
||||
<div class="container fade-in">
|
||||
<div class="section-label">How It Works</div>
|
||||
<div class="section-title">Three steps to AI visibility</div>
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="step-number">01</div>
|
||||
<h3>Audit</h3>
|
||||
<p>We analyze how AI systems perceive your brand — or whether they don't at all.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-number">02</div>
|
||||
<h3>Strategy</h3>
|
||||
<p>We build a plan: content, structures, sources. Tailored to your business.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-number">03</div>
|
||||
<h3>Execution</h3>
|
||||
<p>We optimize your presence — and monitor how your AI visibility develops.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="cta-section" id="audit">
|
||||
<div class="container fade-in">
|
||||
<div class="section-label">Ready?</div>
|
||||
<div class="section-title">Find out if AIs know you.</div>
|
||||
<p class="section-text">Free AI Visibility Check. We'll show you in 48h what ChatGPT, Gemini and Claude know about you — and what they don't.</p>
|
||||
<a href="mailto:hello@allaisonme.com?subject=AI%20Visibility%20Check" class="cta-button">
|
||||
Request Audit
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
<p class="cta-sub">hello@allaisonme.com</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-brand">All<span class="ai-highlight">AIs</span>OnMe</div>
|
||||
<p>© 2025 AllAIsOnMe · <a href="mailto:hello@allaisonme.com">hello@allaisonme.com</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scroll animations -->
|
||||
<script>
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
|
||||
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/allaisonme.com/site.yaml
Normal file
4
sites/allaisonme.com/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: allaisonme.com
|
||||
template: custom
|
||||
title: "All AIs On Me — AI Optimization"
|
||||
description: "SEO is dead. All AIs On Me makes you visible to ChatGPT, Gemini, Claude and beyond. AI Optimization, not Search Engine Optimization."
|
||||
514
sites/commanderkin.de/index.html
Normal file
514
sites/commanderkin.de/index.html
Normal file
@@ -0,0 +1,514 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CommanderKIn — Commander Keen + KI</title>
|
||||
<meta name="description" content="Old-School Vibes, New-School AI. 90er Retro-Gaming meets künstliche Intelligenz.">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
||||
|
||||
:root{
|
||||
--black:#000;
|
||||
--green:#33ff33;
|
||||
--blue:#0055aa;
|
||||
--red:#ff3333;
|
||||
--green-dim:#1a8c1a;
|
||||
--green-glow:0 0 10px rgba(51,255,51,.4),0 0 40px rgba(51,255,51,.15);
|
||||
--red-glow:0 0 10px rgba(255,51,51,.4),0 0 40px rgba(255,51,51,.15);
|
||||
--blue-glow:0 0 10px rgba(0,85,170,.4),0 0 40px rgba(0,85,170,.15);
|
||||
}
|
||||
|
||||
html{scroll-behavior:smooth}
|
||||
|
||||
body{
|
||||
background:var(--black);
|
||||
color:var(--green);
|
||||
font-family:'VT323',monospace;
|
||||
font-size:20px;
|
||||
line-height:1.6;
|
||||
overflow-x:hidden;
|
||||
-webkit-font-smoothing:none;
|
||||
-moz-osx-font-smoothing:unset;
|
||||
}
|
||||
|
||||
/* CRT Scanlines Overlay */
|
||||
body::before{
|
||||
content:'';
|
||||
position:fixed;
|
||||
inset:0;
|
||||
background:repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(0,0,0,.15) 2px,
|
||||
rgba(0,0,0,.15) 4px
|
||||
);
|
||||
pointer-events:none;
|
||||
z-index:9999;
|
||||
}
|
||||
|
||||
/* CRT Screen Curve + Vignette */
|
||||
body::after{
|
||||
content:'';
|
||||
position:fixed;
|
||||
inset:0;
|
||||
background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.7) 100%);
|
||||
pointer-events:none;
|
||||
z-index:9998;
|
||||
}
|
||||
|
||||
/* Pixel grid noise */
|
||||
.noise{
|
||||
position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.03;
|
||||
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.container{
|
||||
max-width:900px;
|
||||
margin:0 auto;
|
||||
padding:0 24px;
|
||||
position:relative;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
/* ========== HERO ========== */
|
||||
.hero{
|
||||
min-height:100vh;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
text-align:center;
|
||||
padding:40px 20px;
|
||||
}
|
||||
|
||||
.hero-title{
|
||||
font-family:'Press Start 2P',monospace;
|
||||
font-size:clamp(28px,6vw,56px);
|
||||
color:var(--green);
|
||||
text-shadow:var(--green-glow);
|
||||
letter-spacing:2px;
|
||||
line-height:1.4;
|
||||
margin-bottom:8px;
|
||||
}
|
||||
|
||||
.hero-title .ki{
|
||||
color:var(--red);
|
||||
text-shadow:var(--red-glow);
|
||||
}
|
||||
|
||||
.cursor-blink{
|
||||
display:inline-block;
|
||||
width:0.6em;
|
||||
height:1em;
|
||||
background:var(--green);
|
||||
vertical-align:middle;
|
||||
margin-left:4px;
|
||||
animation:blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
|
||||
|
||||
.hero-sub{
|
||||
font-family:'Press Start 2P',monospace;
|
||||
font-size:clamp(10px,2vw,16px);
|
||||
color:var(--blue);
|
||||
text-shadow:var(--blue-glow);
|
||||
margin-top:16px;
|
||||
letter-spacing:1px;
|
||||
}
|
||||
|
||||
.hero-sub .loading-dots::after{
|
||||
content:'';
|
||||
animation:dots 2s step-end infinite;
|
||||
}
|
||||
@keyframes dots{
|
||||
0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}
|
||||
}
|
||||
|
||||
.boot-text{
|
||||
margin-top:40px;
|
||||
font-size:14px;
|
||||
color:var(--green-dim);
|
||||
text-align:left;
|
||||
max-width:500px;
|
||||
line-height:1.8;
|
||||
}
|
||||
|
||||
.boot-text span{animation:fadeIn .3s ease forwards;opacity:0}
|
||||
@keyframes fadeIn{to{opacity:1}}
|
||||
|
||||
/* ========== CONCEPT ========== */
|
||||
.concept{
|
||||
padding:80px 0;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.concept-text{
|
||||
font-size:clamp(22px,3vw,32px);
|
||||
max-width:700px;
|
||||
margin:0 auto;
|
||||
line-height:1.6;
|
||||
color:var(--green);
|
||||
}
|
||||
|
||||
.concept-text em{
|
||||
color:var(--red);
|
||||
font-style:normal;
|
||||
text-shadow:var(--red-glow);
|
||||
}
|
||||
|
||||
.section-divider{
|
||||
text-align:center;
|
||||
padding:20px 0;
|
||||
font-family:'Press Start 2P',monospace;
|
||||
font-size:12px;
|
||||
color:var(--green-dim);
|
||||
letter-spacing:8px;
|
||||
}
|
||||
|
||||
/* ========== LEVELS ========== */
|
||||
.levels{
|
||||
padding:60px 0;
|
||||
}
|
||||
|
||||
.levels-title{
|
||||
font-family:'Press Start 2P',monospace;
|
||||
font-size:clamp(14px,2.5vw,22px);
|
||||
color:var(--blue);
|
||||
text-shadow:var(--blue-glow);
|
||||
text-align:center;
|
||||
margin-bottom:48px;
|
||||
}
|
||||
|
||||
.level{
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
gap:20px;
|
||||
padding:24px;
|
||||
margin-bottom:16px;
|
||||
border:1px solid #1a1a2e;
|
||||
border-radius:4px;
|
||||
background:rgba(51,255,51,.02);
|
||||
transition:all .3s ease;
|
||||
}
|
||||
|
||||
.level:hover{
|
||||
border-color:var(--green);
|
||||
background:rgba(51,255,51,.06);
|
||||
box-shadow:var(--green-glow);
|
||||
}
|
||||
|
||||
.level-badge{
|
||||
font-family:'Press Start 2P',monospace;
|
||||
font-size:11px;
|
||||
color:var(--black);
|
||||
background:var(--green);
|
||||
padding:6px 10px;
|
||||
white-space:nowrap;
|
||||
flex-shrink:0;
|
||||
border-radius:2px;
|
||||
}
|
||||
|
||||
.level.boss .level-badge{
|
||||
background:var(--red);
|
||||
animation:pulse-red 2s ease infinite;
|
||||
}
|
||||
@keyframes pulse-red{
|
||||
0%,100%{box-shadow:none}50%{box-shadow:var(--red-glow)}
|
||||
}
|
||||
|
||||
.level-name{
|
||||
font-family:'Press Start 2P',monospace;
|
||||
font-size:clamp(12px,2vw,16px);
|
||||
color:var(--green);
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
.level.boss .level-name{color:var(--red);text-shadow:var(--red-glow)}
|
||||
|
||||
.level-desc{
|
||||
font-size:18px;
|
||||
color:var(--green-dim);
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
/* ========== PIXEL ART DIVIDER ========== */
|
||||
.pixel-art{
|
||||
text-align:center;
|
||||
padding:40px 0;
|
||||
font-family:'Press Start 2P',monospace;
|
||||
font-size:10px;
|
||||
color:var(--green-dim);
|
||||
line-height:1.2;
|
||||
white-space:pre;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
/* ========== CTA ========== */
|
||||
.cta{
|
||||
padding:80px 0;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.cta-label{
|
||||
font-family:'Press Start 2P',monospace;
|
||||
font-size:clamp(10px,1.5vw,14px);
|
||||
color:var(--blue);
|
||||
text-shadow:var(--blue-glow);
|
||||
margin-bottom:32px;
|
||||
animation:blink 1.5s step-end infinite;
|
||||
}
|
||||
|
||||
.btn-start{
|
||||
display:inline-block;
|
||||
font-family:'Press Start 2P',monospace;
|
||||
font-size:clamp(16px,3vw,24px);
|
||||
color:var(--black);
|
||||
background:var(--green);
|
||||
padding:18px 48px;
|
||||
border:none;
|
||||
cursor:pointer;
|
||||
text-decoration:none;
|
||||
border-radius:4px;
|
||||
transition:all .2s ease;
|
||||
box-shadow:var(--green-glow);
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.btn-start:hover{
|
||||
background:var(--red);
|
||||
box-shadow:var(--red-glow);
|
||||
transform:scale(1.05);
|
||||
}
|
||||
|
||||
.btn-start:active{transform:scale(.97)}
|
||||
|
||||
/* ========== FOOTER ========== */
|
||||
.footer{
|
||||
padding:60px 0 40px;
|
||||
text-align:center;
|
||||
border-top:1px solid #1a1a2e;
|
||||
}
|
||||
|
||||
.insert-coin{
|
||||
font-family:'Press Start 2P',monospace;
|
||||
font-size:clamp(10px,2vw,14px);
|
||||
color:var(--green);
|
||||
text-shadow:var(--green-glow);
|
||||
animation:blink 1.2s step-end infinite;
|
||||
}
|
||||
|
||||
.footer-sub{
|
||||
margin-top:20px;
|
||||
font-size:14px;
|
||||
color:#333;
|
||||
letter-spacing:1px;
|
||||
}
|
||||
|
||||
.footer-sub a{color:#333;text-decoration:none}
|
||||
.footer-sub a:hover{color:var(--green-dim)}
|
||||
|
||||
/* ========== RESPONSIVE ========== */
|
||||
@media(max-width:640px){
|
||||
.level{flex-direction:column;gap:12px}
|
||||
.level-badge{align-self:flex-start}
|
||||
.boot-text{font-size:12px}
|
||||
.pixel-art{font-size:6px}
|
||||
}
|
||||
|
||||
/* ========== SCREEN FLICKER (subtle) ========== */
|
||||
@keyframes flicker{
|
||||
0%{opacity:1}3%{opacity:.95}6%{opacity:1}7%{opacity:.9}9%{opacity:1}100%{opacity:1}
|
||||
}
|
||||
.container{animation:flicker 8s linear infinite}
|
||||
|
||||
/* ========== SCROLL ANIMATIONS ========== */
|
||||
.reveal{opacity:0;transform:translateY(20px);transition:all .6s ease}
|
||||
.reveal.visible{opacity:1;transform:translateY(0)}
|
||||
|
||||
/* High Score Table styling */
|
||||
.stats{
|
||||
padding:40px 0;
|
||||
text-align:center;
|
||||
}
|
||||
.stats-grid{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(3,1fr);
|
||||
gap:16px;
|
||||
max-width:600px;
|
||||
margin:32px auto 0;
|
||||
}
|
||||
.stat{
|
||||
border:1px solid #1a1a2e;
|
||||
border-radius:4px;
|
||||
padding:20px 12px;
|
||||
background:rgba(51,255,51,.02);
|
||||
}
|
||||
.stat-val{
|
||||
font-family:'Press Start 2P',monospace;
|
||||
font-size:clamp(16px,3vw,28px);
|
||||
color:var(--green);
|
||||
text-shadow:var(--green-glow);
|
||||
}
|
||||
.stat-label{
|
||||
font-size:14px;
|
||||
color:var(--green-dim);
|
||||
margin-top:8px;
|
||||
}
|
||||
@media(max-width:640px){.stats-grid{grid-template-columns:1fr}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="noise"></div>
|
||||
|
||||
<!-- ===== HERO ===== -->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<h1 class="hero-title">
|
||||
Commander<span class="ki">KI</span>n<span class="cursor-blink"></span>
|
||||
</h1>
|
||||
<p class="hero-sub">Level 1: <span class="ki-text">KI</span> Loading<span class="loading-dots"></span></p>
|
||||
|
||||
<div class="boot-text" id="bootSequence">
|
||||
<span style="animation-delay:0.3s">C:\COMMANDERKIN> boot_sequence.exe</span><br>
|
||||
<span style="animation-delay:0.8s">Initializing neural_network.dll ........ OK</span><br>
|
||||
<span style="animation-delay:1.3s">Loading retro_vibes.dat ................ OK</span><br>
|
||||
<span style="animation-delay:1.8s">Calibrating pixel_cannon.sys ........... OK</span><br>
|
||||
<span style="animation-delay:2.3s">Mounting galaxy_drive D:\ .............. OK</span><br>
|
||||
<span style="animation-delay:2.8s" style="color:var(--green)">SYSTEM READY. PRESS START.</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== CONCEPT ===== -->
|
||||
<div class="section-divider">- - - - - - - - - -</div>
|
||||
<section class="concept container reveal">
|
||||
<p class="concept-text">
|
||||
Wie Commander Keen die Galaxie rettete, rettet <em>CommanderKIn</em> deine Daten.<br><br>
|
||||
Old-School Vibes. New-School <em>AI</em>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- ===== HIGH SCORES ===== -->
|
||||
<div class="section-divider">HIGH SCORES</div>
|
||||
<section class="stats container reveal">
|
||||
<div class="stats-grid">
|
||||
<div class="stat">
|
||||
<div class="stat-val">9001</div>
|
||||
<div class="stat-label">Bugs vernichtet</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-val">256</div>
|
||||
<div class="stat-label">Deploys überlebt</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-val">1UP</div>
|
||||
<div class="stat-label">Extra-Leben dank KI</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== LEVELS ===== -->
|
||||
<div class="section-divider">SELECT YOUR LEVEL</div>
|
||||
<section class="levels container">
|
||||
<h2 class="levels-title">// MISSION SELECT //</h2>
|
||||
|
||||
<div class="level reveal">
|
||||
<div class="level-badge">LVL 1</div>
|
||||
<div>
|
||||
<div class="level-name">Data Rescue</div>
|
||||
<div class="level-desc">Verschollene Daten aus den Tiefen korrupter Datenbanken bergen. Kein Byte bleibt zurück.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="level reveal">
|
||||
<div class="level-badge">LVL 2</div>
|
||||
<div>
|
||||
<div class="level-name">Code Crusade</div>
|
||||
<div class="level-desc">Legacy-Code durchforsten, Spaghetti entwirren. Der Kreuzzug gegen technische Schulden.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="level reveal">
|
||||
<div class="level-badge">LVL 3</div>
|
||||
<div>
|
||||
<div class="level-name">Bug Blaster</div>
|
||||
<div class="level-desc">Bugs jagen im Pixel-Dschungel. Jeder Stacktrace ein Hinweis, jeder Fix ein Power-Up.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="level reveal">
|
||||
<div class="level-badge">LVL 4</div>
|
||||
<div>
|
||||
<div class="level-name">Deploy Dynasty</div>
|
||||
<div class="level-desc">CI/CD-Pipelines bauen, Container orchestrieren. Von der Garage ins Rechenzentrum.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="level boss reveal">
|
||||
<div class="level-badge">BOSS</div>
|
||||
<div>
|
||||
<div class="level-name">Production</div>
|
||||
<div class="level-desc">Der finale Boss. Freitag, 17:00 Uhr. "Können wir das noch schnell deployen?" — Nein. Doch. Ohhh!</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== PIXEL ART ===== -->
|
||||
<div class="pixel-art reveal">
|
||||
___________
|
||||
/ \
|
||||
| GAME OVER |
|
||||
| Continue? |
|
||||
| > YES |
|
||||
\___________/
|
||||
</div>
|
||||
|
||||
<!-- ===== CTA ===== -->
|
||||
<section class="cta container reveal">
|
||||
<p class="cta-label">~ PLAYER 1 READY ~</p>
|
||||
<a href="mailto:commanderkin@msbls.de" class="btn-start">Press START</a>
|
||||
</section>
|
||||
|
||||
<!-- ===== FOOTER ===== -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="insert-coin">INSERT COIN TO CONTINUE</p>
|
||||
<p class="footer-sub">© 2026 CommanderKIn — Powered by Pixel & KI</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Scroll reveal
|
||||
const obs = new IntersectionObserver((entries) => {
|
||||
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
|
||||
}, { threshold: 0.15 });
|
||||
document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
|
||||
|
||||
// Konami Code Easter Egg
|
||||
const konami = [38,38,40,40,37,39,37,39,66,65];
|
||||
let kPos = 0;
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.keyCode === konami[kPos]) {
|
||||
kPos++;
|
||||
if (kPos === konami.length) {
|
||||
kPos = 0;
|
||||
document.body.style.animation = 'none';
|
||||
document.body.offsetHeight; // reflow
|
||||
document.body.style.animation = '';
|
||||
alert('🕹️ CHEAT ACTIVATED: Unlimited AI Credits 🕹️');
|
||||
}
|
||||
} else {
|
||||
kPos = 0;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/commanderkin.de/site.yaml
Normal file
4
sites/commanderkin.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: commanderkin.de
|
||||
template: custom
|
||||
title: "CommanderKIn — Commander Keen + KI"
|
||||
description: "Old-School Vibes, New-School AI. 90er Retro-Gaming meets künstliche Intelligenz."
|
||||
955
sites/hallofraumaier.de/index.html
Normal file
955
sites/hallofraumaier.de/index.html
Normal file
@@ -0,0 +1,955 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hallo Frau Maier — KI-gestützte Hausverwaltung</title>
|
||||
<meta name="description" content="Ihre Hausverwaltung ist jetzt immer erreichbar. Auch nachts. Auch bei Wasserschäden. Frau Maier — die KI-Hausverwaltung, die nie schläft.">
|
||||
<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>">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after {
|
||||
margin: 0; padding: 0; box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--sand: #F7F2EB;
|
||||
--sand-dark: #EDE5D8;
|
||||
--clay: #C4A882;
|
||||
--clay-dark: #A68B62;
|
||||
--terracotta: #C06B3E;
|
||||
--terracotta-soft: rgba(192, 107, 62, 0.12);
|
||||
--water: #4A9FBF;
|
||||
--water-deep: #2D7A9C;
|
||||
--water-glow: rgba(74, 159, 191, 0.15);
|
||||
--water-subtle: rgba(74, 159, 191, 0.08);
|
||||
--text: #2C231A;
|
||||
--text-soft: #7A6B5A;
|
||||
--text-light: #A69780;
|
||||
--white: #FFFFFF;
|
||||
--card-border: rgba(196, 168, 130, 0.25);
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
background: var(--sand);
|
||||
color: var(--text);
|
||||
overflow-x: hidden;
|
||||
line-height: 1.65;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* === SUBTLE GRAIN === */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1120px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* === NAV === */
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
padding: 20px 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
nav.scrolled {
|
||||
background: rgba(247, 242, 235, 0.92);
|
||||
backdrop-filter: blur(20px);
|
||||
padding: 14px 0;
|
||||
box-shadow: 0 1px 0 var(--card-border);
|
||||
}
|
||||
|
||||
nav .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: 1.25rem;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nav-logo .drop {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--water);
|
||||
border-radius: 50% 50% 50% 0;
|
||||
transform: rotate(-45deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-logo .drop span {
|
||||
transform: rotate(45deg);
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nav-cta {
|
||||
padding: 10px 24px;
|
||||
background: var(--terracotta);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.nav-cta:hover {
|
||||
background: #D47A4E;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* === HERO === */
|
||||
.hero {
|
||||
padding: 160px 0 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background: var(--water-subtle);
|
||||
border: 1px solid rgba(74, 159, 191, 0.2);
|
||||
border-radius: 100px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
color: var(--water-deep);
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.hero-badge .pulse {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--water);
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.3); }
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: clamp(2.4rem, 4.5vw, 3.4rem);
|
||||
line-height: 1.15;
|
||||
color: var(--text);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hero h1 .highlight {
|
||||
color: var(--terracotta);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-soft);
|
||||
max-width: 480px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 16px 36px;
|
||||
background: var(--terracotta);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #D47A4E;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(192, 107, 62, 0.25);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
padding: 16px 36px;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
border: 1.5px solid var(--card-border);
|
||||
border-radius: 100px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: var(--clay-dark);
|
||||
background: var(--sand-dark);
|
||||
}
|
||||
|
||||
/* Hero visual — Chat mockup */
|
||||
.hero-visual {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chat-mockup {
|
||||
background: var(--white);
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--card-border);
|
||||
box-shadow: 0 20px 60px rgba(44, 35, 26, 0.08), 0 1px 3px rgba(44, 35, 26, 0.04);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 16px 20px;
|
||||
background: linear-gradient(135deg, var(--terracotta), #D47A4E);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.chat-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.1rem;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.chat-header-info {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.chat-header-info .name {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.chat-header-info .status {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.85;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.chat-header-info .status .online-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #4ADE80;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.chat-body {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-height: 260px;
|
||||
}
|
||||
|
||||
.chat-msg {
|
||||
max-width: 80%;
|
||||
padding: 12px 16px;
|
||||
border-radius: 16px;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
opacity: 0;
|
||||
animation: chatFadeIn 0.4s ease forwards;
|
||||
}
|
||||
|
||||
.chat-msg.user {
|
||||
align-self: flex-end;
|
||||
background: var(--sand-dark);
|
||||
color: var(--text);
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.chat-msg.bot {
|
||||
align-self: flex-start;
|
||||
background: var(--terracotta);
|
||||
color: white;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.chat-msg:nth-child(1) { animation-delay: 0.5s; }
|
||||
.chat-msg:nth-child(2) { animation-delay: 1.5s; }
|
||||
.chat-msg:nth-child(3) { animation-delay: 2.8s; }
|
||||
.chat-msg:nth-child(4) { animation-delay: 4s; }
|
||||
|
||||
@keyframes chatFadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.chat-time {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-light);
|
||||
text-align: center;
|
||||
margin-bottom: 4px;
|
||||
opacity: 0;
|
||||
animation: chatFadeIn 0.4s ease 0.2s forwards;
|
||||
}
|
||||
|
||||
/* Floating elements */
|
||||
.float-badge {
|
||||
position: absolute;
|
||||
background: var(--white);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 12px;
|
||||
padding: 10px 16px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 8px 24px rgba(44, 35, 26, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
animation: floatBadge 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.float-badge.top-left {
|
||||
top: -16px;
|
||||
left: -24px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.float-badge.bottom-right {
|
||||
bottom: -12px;
|
||||
right: -20px;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
@keyframes floatBadge {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-6px); }
|
||||
}
|
||||
|
||||
/* === TRUST BAR === */
|
||||
.trust-bar {
|
||||
padding: 60px 0;
|
||||
border-top: 1px solid var(--card-border);
|
||||
border-bottom: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
.trust-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.trust-item .number {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: 2rem;
|
||||
color: var(--terracotta);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.trust-item .label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
/* === FEATURES === */
|
||||
.features {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--water-deep);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: clamp(1.8rem, 3vw, 2.4rem);
|
||||
line-height: 1.2;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.05rem;
|
||||
color: var(--text-soft);
|
||||
max-width: 560px;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--white);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 16px;
|
||||
padding: 32px 28px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.feature-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--terracotta), var(--water));
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 32px rgba(44, 35, 26, 0.1);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.feature-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.feature-icon.emergency { background: rgba(239, 68, 68, 0.1); }
|
||||
.feature-icon.always-on { background: var(--water-glow); }
|
||||
.feature-icon.costs { background: var(--terracotta-soft); }
|
||||
.feature-icon.craft { background: rgba(74, 159, 191, 0.1); }
|
||||
.feature-icon.comm { background: rgba(168, 139, 250, 0.1); }
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-soft);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Highlight card spans 2 cols */
|
||||
.feature-card.wide {
|
||||
grid-column: span 2;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 32px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.feature-card.wide .feature-visual {
|
||||
background: var(--sand);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-card.wide .feature-visual .big-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.feature-card.wide .feature-visual .caption {
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
/* === HOW IT WORKS === */
|
||||
.how-it-works {
|
||||
padding: 100px 0;
|
||||
background: var(--sand-dark);
|
||||
}
|
||||
|
||||
.steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
margin-top: 56px;
|
||||
}
|
||||
|
||||
.step {
|
||||
text-align: center;
|
||||
padding: 40px 28px;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 0 auto 24px;
|
||||
background: var(--white);
|
||||
border: 2px solid var(--card-border);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: 1.3rem;
|
||||
color: var(--terracotta);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.step:hover .step-number {
|
||||
background: var(--terracotta);
|
||||
color: white;
|
||||
border-color: var(--terracotta);
|
||||
}
|
||||
|
||||
.step h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.step p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-soft);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* === CTA === */
|
||||
.cta-section {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
.cta-card {
|
||||
background: linear-gradient(135deg, #2C231A 0%, #3D3022 100%);
|
||||
border-radius: 24px;
|
||||
padding: 72px 60px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cta-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -20%;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, var(--water-glow), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cta-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -30%;
|
||||
left: -10%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: radial-gradient(circle, rgba(192, 107, 62, 0.15), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cta-card .moon {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 24px;
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cta-card h2 {
|
||||
font-family: 'DM Serif Display', serif;
|
||||
font-size: clamp(1.8rem, 3vw, 2.6rem);
|
||||
color: var(--sand);
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cta-card h2 .water-text {
|
||||
color: var(--water);
|
||||
}
|
||||
|
||||
.cta-card p {
|
||||
font-size: 1.05rem;
|
||||
color: var(--clay);
|
||||
max-width: 520px;
|
||||
margin: 0 auto 36px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cta-card .btn-primary {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: var(--water);
|
||||
font-size: 1.05rem;
|
||||
padding: 18px 40px;
|
||||
}
|
||||
|
||||
.cta-card .btn-primary:hover {
|
||||
background: var(--water-deep);
|
||||
box-shadow: 0 8px 24px rgba(74, 159, 191, 0.3);
|
||||
}
|
||||
|
||||
/* === FOOTER === */
|
||||
footer {
|
||||
padding: 40px 0;
|
||||
border-top: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
footer .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer .footer-left {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
footer .footer-left a {
|
||||
color: var(--text-soft);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer .footer-right {
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
/* === ANIMATIONS === */
|
||||
.fade-up {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.fade-up.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* === RESPONSIVE === */
|
||||
@media (max-width: 900px) {
|
||||
.hero-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.feature-card.wide {
|
||||
grid-column: span 1;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.steps {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.trust-items {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero { padding: 120px 0 60px; }
|
||||
|
||||
.hero-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-card {
|
||||
padding: 48px 28px;
|
||||
}
|
||||
|
||||
.float-badge { display: none; }
|
||||
|
||||
footer .container {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-cta { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav id="nav">
|
||||
<div class="container">
|
||||
<a href="#" class="nav-logo">
|
||||
<div class="drop"><span>FM</span></div>
|
||||
Frau Maier
|
||||
</a>
|
||||
<a href="mailto:hallofraumaier@msbls.de" class="nav-cta">Kontakt aufnehmen</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-grid">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">
|
||||
<div class="pulse"></div>
|
||||
Jetzt erreichbar — rund um die Uhr
|
||||
</div>
|
||||
<h1>Ihre Hausverwaltung ist jetzt <span class="highlight">immer erreichbar</span></h1>
|
||||
<p>Frau Maier ist die KI-gestützte Hausverwaltung, die nie schläft. Wasserschaden um 3 Uhr nachts? Heizung ausgefallen am Wochenende? Frau Maier ist da.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="mailto:hallofraumaier@msbls.de" class="btn-primary">Hallo Frau Maier! <span>→</span></a>
|
||||
<a href="#features" class="btn-secondary">Mehr erfahren</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="float-badge top-left">
|
||||
<span>🌙</span> Auch um 3:00 Uhr nachts
|
||||
</div>
|
||||
<div class="chat-mockup">
|
||||
<div class="chat-header">
|
||||
<div class="chat-avatar">FM</div>
|
||||
<div class="chat-header-info">
|
||||
<div class="name">Frau Maier</div>
|
||||
<div class="status"><span class="online-dot"></span> Online — immer</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-time">Heute, 02:47</div>
|
||||
<div class="chat-msg user">Hallo Frau Maier, bei mir tropft's von der Decke! 😰</div>
|
||||
<div class="chat-msg bot">Oh je! Ich kümmere mich sofort. Bitte drehen Sie den Haupthahn zu — ich schicke Ihnen gleich den Notdienst-Kontakt.</div>
|
||||
<div class="chat-msg user">Danke, der Hahn ist zu.</div>
|
||||
<div class="chat-msg bot">Perfekt! Der Klempner Herr Weber ist informiert und kommt gegen 3:30 Uhr. Ich halte Sie auf dem Laufenden. 🔧</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float-badge bottom-right">
|
||||
<span>💧</span> Notfall? Sofort Hilfe
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Trust Bar -->
|
||||
<section class="trust-bar">
|
||||
<div class="container">
|
||||
<div class="trust-items">
|
||||
<div class="trust-item fade-up">
|
||||
<div class="number">24/7</div>
|
||||
<div class="label">Erreichbarkeit</div>
|
||||
</div>
|
||||
<div class="trust-item fade-up">
|
||||
<div class="number"><2 Min</div>
|
||||
<div class="label">Reaktionszeit</div>
|
||||
</div>
|
||||
<div class="trust-item fade-up">
|
||||
<div class="number">100%</div>
|
||||
<div class="label">Dokumentation</div>
|
||||
</div>
|
||||
<div class="trust-item fade-up">
|
||||
<div class="number">0</div>
|
||||
<div class="label">Verpasste Anrufe</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features -->
|
||||
<section class="features" id="features">
|
||||
<div class="container">
|
||||
<div class="section-label fade-up">Was Frau Maier kann</div>
|
||||
<h2 class="section-title fade-up">Alles, was eine gute Hausverwaltung tut.<br>Nur ohne Wartezeit.</h2>
|
||||
<p class="section-subtitle fade-up">Frau Maier kombiniert das Wissen erfahrener Hausverwalter mit der Geschwindigkeit und Verfügbarkeit moderner KI.</p>
|
||||
|
||||
<div class="features-grid">
|
||||
<!-- Wide card: Emergency -->
|
||||
<div class="feature-card wide fade-up">
|
||||
<div>
|
||||
<div class="feature-icon emergency">🚨</div>
|
||||
<h3>Wasserschaden-Notfall</h3>
|
||||
<p>Rohrbruch um 3 Uhr nachts? Frau Maier reagiert sofort: Anleitung zur Erstversorgung, Handwerker-Alarmierung und lückenlose Dokumentation für die Versicherung — alles in Minuten.</p>
|
||||
</div>
|
||||
<div class="feature-visual">
|
||||
<div class="big-icon">💧</div>
|
||||
<div class="caption">Sofort-Hilfe bei Wasserschäden —<br>Tag und Nacht</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Regular cards -->
|
||||
<div class="feature-card fade-up">
|
||||
<div class="feature-icon always-on">🕐</div>
|
||||
<h3>24/7 Erreichbarkeit</h3>
|
||||
<p>Keine Warteschleifen, keine Sprechzeiten, kein Anrufbeantworter. Frau Maier ist immer da — per Chat, Telefon oder E-Mail.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card fade-up">
|
||||
<div class="feature-icon costs">📊</div>
|
||||
<h3>Nebenkostenabrechnung</h3>
|
||||
<p>Transparente, verständliche Abrechnungen — pünktlich und fehlerfrei. Fragen beantwortet Frau Maier jederzeit persönlich.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card fade-up">
|
||||
<div class="feature-icon craft">🔧</div>
|
||||
<h3>Handwerker-Koordination</h3>
|
||||
<p>Frau Maier kennt die besten Handwerker in Ihrer Region, koordiniert Termine und überwacht die Ausführung — ohne dass Sie sich kümmern müssen.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card fade-up">
|
||||
<div class="feature-icon comm">💬</div>
|
||||
<h3>Mieterkommunikation</h3>
|
||||
<p>Beschwerden, Anfragen, Informationen — Frau Maier kommuniziert freundlich, schnell und immer auf dem aktuellen Stand.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How it works -->
|
||||
<section class="how-it-works">
|
||||
<div class="container">
|
||||
<div class="section-label fade-up">So funktioniert's</div>
|
||||
<h2 class="section-title fade-up">In drei Schritten zu Ihrer persönlichen Frau Maier</h2>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step fade-up">
|
||||
<div class="step-number">1</div>
|
||||
<h3>Hallo sagen</h3>
|
||||
<p>Schreiben Sie uns. Wir lernen Ihr Objekt kennen — Größe, Mieter, Besonderheiten, Ihre Wünsche.</p>
|
||||
</div>
|
||||
<div class="step fade-up">
|
||||
<div class="step-number">2</div>
|
||||
<h3>Frau Maier einrichten</h3>
|
||||
<p>Wir konfigurieren Ihre persönliche Frau Maier mit allen relevanten Informationen und Kontakten.</p>
|
||||
</div>
|
||||
<div class="step fade-up">
|
||||
<div class="step-number">3</div>
|
||||
<h3>Zurücklehnen</h3>
|
||||
<p>Ab jetzt kümmert sich Frau Maier. Sie werden nur noch kontaktiert, wenn es wirklich nötig ist.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-card fade-up">
|
||||
<span class="moon">🌙</span>
|
||||
<h2>Frau Maier <span class="water-text">schläft nie</span></h2>
|
||||
<p>Während Sie ruhig schlafen, ist Frau Maier wach. Für Ihre Mieter, Ihr Gebäude, Ihren Seelenfrieden.</p>
|
||||
<a href="mailto:hallofraumaier@msbls.de" class="btn-primary">Jetzt kennenlernen <span>→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-left">
|
||||
© 2026 Hallo Frau Maier · <a href="mailto:hallofraumaier@msbls.de">hallofraumaier@msbls.de</a>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
KI-gestützte Hausverwaltung
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Nav scroll effect
|
||||
const nav = document.getElementById('nav');
|
||||
window.addEventListener('scroll', () => {
|
||||
nav.classList.toggle('scrolled', window.scrollY > 40);
|
||||
});
|
||||
|
||||
// Intersection Observer for fade-up
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
||||
|
||||
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/hallofraumaier.de/site.yaml
Normal file
4
sites/hallofraumaier.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: hallofraumaier.de
|
||||
template: custom
|
||||
title: "Hallo Frau Maier — KI-gestützte Hausverwaltung"
|
||||
description: "Ihre Hausverwaltung ist jetzt immer erreichbar. Auch nachts. Auch bei Wasserschäden."
|
||||
317
sites/kilemma.de/index.html
Normal file
317
sites/kilemma.de/index.html
Normal file
@@ -0,0 +1,317 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>KIlemma — Die Fragen, die keine KI beantworten kann</title>
|
||||
<meta name="description" content="Die unlösbaren Fragen der KI-Ära. Ein Dilemma hat keine Lösung. Nur eine Entscheidung.">
|
||||
<meta property="og:title" content="KIlemma">
|
||||
<meta property="og:description" content="Die Fragen, die keine KI beantworten kann.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://kilemma.de">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg: #f5f0eb;
|
||||
--text: #2a2a2a;
|
||||
--text-light: #6b6560;
|
||||
--accent: #8b3a3a;
|
||||
--accent-light: #a34545;
|
||||
--rule: #d4cdc6;
|
||||
--serif: 'Cormorant Garamond', 'Georgia', serif;
|
||||
--sans: 'Inter', -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 18px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--serif);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* ── Layout ── */
|
||||
|
||||
.page {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
/* ── Hero ── */
|
||||
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(3.5rem, 10vw, 7rem);
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-title .ki {
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-family: var(--sans);
|
||||
font-size: clamp(0.85rem, 2vw, 1rem);
|
||||
font-weight: 300;
|
||||
color: var(--text-light);
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.hero-line {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: var(--accent);
|
||||
margin: 2rem 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.scroll-hint {
|
||||
position: absolute;
|
||||
bottom: 3rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-family: var(--sans);
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-light);
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0;
|
||||
animation: fadeHint 1s ease 3s forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeHint {
|
||||
to { opacity: 0.5; }
|
||||
}
|
||||
|
||||
/* ── Questions ── */
|
||||
|
||||
.questions {
|
||||
padding: 6rem 0 8rem;
|
||||
}
|
||||
|
||||
.question {
|
||||
padding: 3rem 0;
|
||||
border-top: 1px solid var(--rule);
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||||
}
|
||||
|
||||
.question.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.question-number {
|
||||
font-family: var(--sans);
|
||||
font-size: 0.7rem;
|
||||
color: var(--accent);
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.question-text {
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(1.5rem, 4vw, 2.2rem);
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
font-style: italic;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.question-text .em {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.question:last-child {
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
/* ── Interlude ── */
|
||||
|
||||
.interlude {
|
||||
padding: 6rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.interlude-text {
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(1.2rem, 3vw, 1.6rem);
|
||||
font-weight: 300;
|
||||
color: var(--text-light);
|
||||
line-height: 1.8;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.interlude-dot {
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
margin: 3rem auto;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ── Footer ── */
|
||||
|
||||
.footer {
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
.footer-quote {
|
||||
font-family: var(--serif);
|
||||
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
|
||||
font-weight: 400;
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.footer-quote strong {
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.footer-meta {
|
||||
font-family: var(--sans);
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-light);
|
||||
letter-spacing: 0.1em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ── Grain overlay ── */
|
||||
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
opacity: 0.025;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
|
||||
background-size: 128px 128px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
|
||||
@media (max-width: 640px) {
|
||||
html { font-size: 16px; }
|
||||
.hero { min-height: 90vh; padding: 3rem 1.5rem; }
|
||||
.page { padding: 0 1.5rem; }
|
||||
.question { padding: 2rem 0; }
|
||||
.questions { padding: 3rem 0 5rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="hero">
|
||||
<h1 class="hero-title"><span class="ki">KI</span>lemma</h1>
|
||||
<div class="hero-line"></div>
|
||||
<p class="hero-sub">Die Fragen, die keine KI beantworten kann.</p>
|
||||
<span class="scroll-hint" aria-hidden="true">Weiterlesen</span>
|
||||
</section>
|
||||
|
||||
<main class="page">
|
||||
<section class="questions">
|
||||
|
||||
<article class="question">
|
||||
<span class="question-number">Frage I</span>
|
||||
<p class="question-text">Wenn du aufhörst selbst zu denken — <span class="em">wer denkt dann?</span></p>
|
||||
</article>
|
||||
|
||||
<article class="question">
|
||||
<span class="question-number">Frage II</span>
|
||||
<p class="question-text">Wenn die KI dich besser kennt als du dich selbst — <span class="em">wem gehört dein Ich?</span></p>
|
||||
</article>
|
||||
|
||||
<article class="question">
|
||||
<span class="question-number">Frage III</span>
|
||||
<p class="question-text">Wenn jeder Text perfekt klingt — <span class="em">wie erkennst du Wahrheit?</span></p>
|
||||
</article>
|
||||
|
||||
<article class="question">
|
||||
<span class="question-number">Frage IV</span>
|
||||
<p class="question-text">Wenn Maschinen fühlen lernen — <span class="em">müssen wir verlernen?</span></p>
|
||||
</article>
|
||||
|
||||
<article class="question">
|
||||
<span class="question-number">Frage V</span>
|
||||
<p class="question-text">Wenn du nicht mehr weißt, ob dieser Satz von dir ist — <span class="em">ist es dann deiner?</span></p>
|
||||
</article>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="interlude">
|
||||
<span class="interlude-dot"></span>
|
||||
<p class="interlude-text">
|
||||
Keine Antworten.<br>
|
||||
Nur der Mut, die Frage auszuhalten.
|
||||
</p>
|
||||
<span class="interlude-dot"></span>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<p class="footer-quote">Ein Dilemma hat keine Lösung.<br><strong>Nur eine Entscheidung.</strong></p>
|
||||
<p class="footer-meta">kilemma.de</p>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const questions = document.querySelectorAll('.question');
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
|
||||
|
||||
questions.forEach(q => observer.observe(q));
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/kilemma.de/site.yaml
Normal file
4
sites/kilemma.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: kilemma.de
|
||||
template: custom
|
||||
title: "KIlemma — Die Fragen, die keine KI beantworten kann"
|
||||
description: "Die unlosbaren Fragen der KI-Aera. Ein Dilemma hat keine Loesung. Nur eine Entscheidung."
|
||||
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."
|
||||
64
sites/kinough.de/index.html
Normal file
64
sites/kinough.de/index.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>KInough — Es reicht.</title>
|
||||
<meta name="description" content="Es reicht.">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Georgia, 'Times New Roman', Times, serif;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 38rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4.5rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.7;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Es reicht.</h1>
|
||||
<p>Wir wissen, dass es uns verändert. Wir spüren, wie es denkt, bevor wir denken. Wie es antwortet, bevor wir fragen. Wie es formt, was wir für unsere eigenen Gedanken halten. Die Frage ist nicht, ob künstliche Intelligenz gut oder schlecht ist. Die Frage ist, ob wir aufhören können, etwas zu benutzen, das uns unmerklich zu etwas anderem macht.</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
4
sites/kinough.de/site.yaml
Normal file
4
sites/kinough.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: kinough.de
|
||||
template: custom
|
||||
title: "KInough — Es reicht."
|
||||
description: "Es reicht."
|
||||
425
sites/kitox.de/index.html
Normal file
425
sites/kitox.de/index.html
Normal file
@@ -0,0 +1,425 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>KItox — Dein KI-Detox</title>
|
||||
<meta name="description" content="KItox ist die 7-Tage KI-Detox Challenge. Bewusster Entzug von künstlicher Intelligenz.">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg: #f7f4ee;
|
||||
--bg-warm: #f0ebe1;
|
||||
--text: #3b3f2e;
|
||||
--text-light: #6b705c;
|
||||
--green: #7c956b;
|
||||
--green-light: #a3b899;
|
||||
--green-pale: #dde6d5;
|
||||
--earth: #c4ac82;
|
||||
--earth-light: #e8dcc8;
|
||||
--white: #fffdf8;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Nunito', -apple-system, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.7;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(ellipse at 50% 30%, var(--green-pale) 0%, transparent 70%);
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.breath-circle {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, var(--green-light) 0%, var(--green-pale) 60%, transparent 100%);
|
||||
opacity: 0.6;
|
||||
animation: breathe 6s ease-in-out infinite;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
@keyframes breathe {
|
||||
0%, 100% { transform: scale(0.85); opacity: 0.4; }
|
||||
50% { transform: scale(1.15); opacity: 0.7; }
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: clamp(4rem, 12vw, 8rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logo .ki {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.subline {
|
||||
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
|
||||
color: var(--text-light);
|
||||
margin-top: 1rem;
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.scroll-hint {
|
||||
position: absolute;
|
||||
bottom: 2.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24px;
|
||||
height: 40px;
|
||||
border: 2px solid var(--green-light);
|
||||
border-radius: 12px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.scroll-hint::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
background: var(--green-light);
|
||||
border-radius: 2px;
|
||||
animation: scroll-dot 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes scroll-dot {
|
||||
0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
50% { opacity: 0.3; transform: translateX(-50%) translateY(12px); }
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
section {
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
padding: 5rem 2rem;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
color: var(--green);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Problem */
|
||||
.problem {
|
||||
padding: 6rem 2rem;
|
||||
}
|
||||
|
||||
.problem-text {
|
||||
font-size: clamp(1.3rem, 3vw, 1.7rem);
|
||||
line-height: 1.8;
|
||||
color: var(--text);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.problem-text strong {
|
||||
color: var(--green);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Divider */
|
||||
.divider {
|
||||
width: 48px;
|
||||
height: 3px;
|
||||
background: var(--green-light);
|
||||
border-radius: 2px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Challenge */
|
||||
.challenge {
|
||||
padding: 5rem 2rem 6rem;
|
||||
}
|
||||
|
||||
.challenge h2 {
|
||||
font-size: clamp(1.8rem, 4vw, 2.4rem);
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.challenge .intro {
|
||||
color: var(--text-light);
|
||||
font-size: 1.05rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.days {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.day {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1.25rem;
|
||||
padding: 1.5rem;
|
||||
background: var(--white);
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--earth-light);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.day:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(107, 112, 92, 0.08);
|
||||
}
|
||||
|
||||
.day-num {
|
||||
flex-shrink: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: var(--green-pale);
|
||||
color: var(--green);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.day-content h3 {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.day-content p {
|
||||
font-size: 0.92rem;
|
||||
color: var(--text-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Provocation */
|
||||
.provocation {
|
||||
text-align: center;
|
||||
padding: 6rem 2rem 8rem;
|
||||
}
|
||||
|
||||
.provocation p {
|
||||
font-size: clamp(1rem, 2vw, 1.15rem);
|
||||
color: var(--text-light);
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.provocation .highlight {
|
||||
display: block;
|
||||
margin-top: 0.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-light);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||||
}
|
||||
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 640px) {
|
||||
section {
|
||||
padding: 3.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.problem {
|
||||
padding: 4rem 1.5rem;
|
||||
}
|
||||
|
||||
.challenge {
|
||||
padding: 3.5rem 1.5rem 4rem;
|
||||
}
|
||||
|
||||
.day {
|
||||
padding: 1.25rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.provocation {
|
||||
padding: 4rem 1.5rem 5rem;
|
||||
}
|
||||
|
||||
.breath-circle {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="hero">
|
||||
<div class="breath-circle"></div>
|
||||
<h1 class="logo"><span class="ki">KI</span>tox</h1>
|
||||
<p class="subline">Dein KI-Detox beginnt hier.</p>
|
||||
<div class="scroll-hint"></div>
|
||||
</section>
|
||||
|
||||
<!-- Problem -->
|
||||
<section class="problem fade-in">
|
||||
<div class="section-label">Das Problem</div>
|
||||
<p class="problem-text">
|
||||
Du merkst es nicht sofort. Aber dein Denken hat sich verändert.<br><br>
|
||||
Jede Frage geht zuerst an die <strong>KI</strong>.<br>
|
||||
Jeder Text wird zuerst <strong>generiert</strong>.<br>
|
||||
Jede Entscheidung zuerst <strong>delegiert</strong>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Challenge -->
|
||||
<section class="challenge fade-in">
|
||||
<div class="section-label">Das Programm</div>
|
||||
<h2>7 Tage KI-Detox</h2>
|
||||
<p class="intro">Sieben Tage. Sieben Übungen. Kein Trick — nur du.</p>
|
||||
|
||||
<div class="days">
|
||||
<div class="day fade-in">
|
||||
<div class="day-num">1</div>
|
||||
<div class="day-content">
|
||||
<h3>Keine KI-Suche</h3>
|
||||
<p>Tippe deine Frage nicht in ChatGPT. Denk selbst nach. Oder frag einen Menschen.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="day fade-in">
|
||||
<div class="day-num">2</div>
|
||||
<div class="day-content">
|
||||
<h3>Eigene Mails schreiben</h3>
|
||||
<p>Jedes Wort von dir. Kein „Formuliere mir eine höfliche Absage". Deine Stimme.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="day fade-in">
|
||||
<div class="day-num">3</div>
|
||||
<div class="day-content">
|
||||
<h3>Eigene Texte formulieren</h3>
|
||||
<p>Blog, Bericht, Nachricht — alles handgeschrieben. Darf unperfekt sein.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="day fade-in">
|
||||
<div class="day-num">4</div>
|
||||
<div class="day-content">
|
||||
<h3>Ohne Navigation fahren</h3>
|
||||
<p>Karte anschauen, Route merken, losfahren. Dein Orientierungssinn lebt noch.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="day fade-in">
|
||||
<div class="day-num">5</div>
|
||||
<div class="day-content">
|
||||
<h3>Analog planen</h3>
|
||||
<p>Papier und Stift. Keine App, kein Assistent. Dein Tag, dein Plan.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="day fade-in">
|
||||
<div class="day-num">6</div>
|
||||
<div class="day-content">
|
||||
<h3>Langeweile aushalten</h3>
|
||||
<p>Kein Prompt. Kein „Erzähl mir was". Sitz da und lass deinen Kopf machen.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="day fade-in">
|
||||
<div class="day-num">7</div>
|
||||
<div class="day-content">
|
||||
<h3>Reflektieren</h3>
|
||||
<p>Was war schwer? Was war überraschend leicht? Was hat sich verändert?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Provocation -->
|
||||
<section class="provocation fade-in">
|
||||
<p>
|
||||
Diese Seite wurde von einer KI gebaut.
|
||||
<span class="highlight">Du siehst das Problem.</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<footer>KItox — 2026</footer>
|
||||
|
||||
<script>
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
|
||||
|
||||
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4
sites/kitox.de/site.yaml
Normal file
4
sites/kitox.de/site.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
domain: kitox.de
|
||||
template: custom
|
||||
title: "KItox — Dein KI-Detox"
|
||||
description: "KItox ist die 7-Tage KI-Detox Challenge. Bewusster Entzug von künstlicher Intelligenz."
|
||||
Reference in New Issue
Block a user