Compare commits
7 Commits
mai/knuth/
...
14c238edae
| Author | SHA1 | Date | |
|---|---|---|---|
|
14c238edae | ||
|
|
8be8c74d74 | ||
|
|
b6ae4fbb34 | ||
|
|
ea9316f4d2 | ||
|
|
ea8e3cdd96 | ||
|
|
4f37b53c31 | ||
|
|
a23fb8dcc1 |
@@ -49,6 +49,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
|
||||
|
||||
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."
|
||||
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