be5dca6510
New satirical sites with KI wordplays: - killionaer.de (KIllionär - KI wealth satire, gold tones) - killions.de (KIllions - crypto currency satire, minimal) - killuminati.de (KIlluminati - AI conspiracy satire, dark/mystic) - kilitaer.de (KIlitär - military AI satire, camo/code) - killusion.de (KIllusion - optical illusion meta-satire, glitch) - killegal.de (KIllegal - forbidden AI satire, police tape) - kilibri.de (KIlibri - micro AI smart home, warm/nature) All sites: German, satirical, KI visually highlighted in domain names.
275 lines
11 KiB
HTML
275 lines
11 KiB
HTML
<!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>
|