cursor
80529b54f8
Remove Dienstag-Doku line, Ohrwurm button, and Quäl-👻 ad line; add Pinguin-Knie sponsor footer. Co-authored-by: Cursor <cursoragent@cursor.com>
465 lines
15 KiB
HTML
465 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="Who let the ghost out? — Der offizielle Quäl-👻-Ohrwurm.">
|
|
<title>Who let the ghost out?</title>
|
|
<style>
|
|
:root {
|
|
--bg: #0a0612;
|
|
--surface: #140f1e;
|
|
--border: #2e2440;
|
|
--text: #f3eef8;
|
|
--muted: #a894c4;
|
|
--glow: #7cff6b;
|
|
--purple: #b366ff;
|
|
--lime: #c8ff00;
|
|
--max: 44rem;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.65;
|
|
font-size: 1.05rem;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* —— floating background 👻 —— */
|
|
.haunt-bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.haunt-bg span {
|
|
position: absolute;
|
|
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
|
opacity: 0.12;
|
|
animation: drift linear infinite;
|
|
}
|
|
|
|
.haunt-bg span:nth-child(1) { left: 8%; top: 12%; animation-duration: 18s; }
|
|
.haunt-bg span:nth-child(2) { left: 72%; top: 8%; animation-duration: 22s; animation-delay: -4s; }
|
|
.haunt-bg span:nth-child(3) { left: 45%; top: 55%; animation-duration: 16s; animation-delay: -8s; }
|
|
.haunt-bg span:nth-child(4) { left: 88%; top: 70%; animation-duration: 20s; animation-delay: -2s; }
|
|
.haunt-bg span:nth-child(5) { left: 15%; top: 78%; animation-duration: 24s; animation-delay: -11s; }
|
|
|
|
@keyframes drift {
|
|
0%, 100% { transform: translate(0, 0) rotate(-5deg); }
|
|
25% { transform: translate(12px, -20px) rotate(5deg); }
|
|
50% { transform: translate(-8px, -35px) rotate(-3deg); }
|
|
75% { transform: translate(15px, -15px) rotate(8deg); }
|
|
}
|
|
|
|
.wrap { position: relative; z-index: 1; }
|
|
|
|
/* —— hero + main ghost —— */
|
|
.hero {
|
|
text-align: center;
|
|
padding: 2.5rem 1.25rem 2rem;
|
|
background:
|
|
radial-gradient(ellipse 80% 55% at 50% 0%, rgba(179, 102, 255, 0.22), transparent),
|
|
radial-gradient(ellipse 40% 30% at 80% 60%, rgba(124, 255, 107, 0.08), transparent),
|
|
var(--bg);
|
|
}
|
|
|
|
.ghost-stage {
|
|
position: relative;
|
|
width: min(100%, 18rem);
|
|
height: 14rem;
|
|
margin: 0 auto 1.25rem;
|
|
}
|
|
|
|
.ghost-svg {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
width: 9rem;
|
|
height: auto;
|
|
filter: drop-shadow(0 0 24px rgba(179, 102, 255, 0.55));
|
|
animation: ghost-bob 2.4s ease-in-out infinite, ghost-wiggle 0.8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes ghost-bob {
|
|
0%, 100% { transform: translateX(-50%) translateY(0); }
|
|
50% { transform: translateX(-50%) translateY(-18px); }
|
|
}
|
|
|
|
@keyframes ghost-wiggle {
|
|
0%, 100% { rotate: -4deg; }
|
|
50% { rotate: 4deg; }
|
|
}
|
|
|
|
.ghost-emoji {
|
|
position: absolute;
|
|
font-size: 2.2rem;
|
|
animation: emoji-orbit 3s ease-in-out infinite;
|
|
}
|
|
|
|
.ghost-emoji.e1 { left: 5%; top: 30%; animation-delay: 0s; }
|
|
.ghost-emoji.e2 { right: 8%; top: 20%; animation-delay: -1s; font-size: 1.6rem; }
|
|
.ghost-emoji.e3 { left: 22%; bottom: 15%; animation-delay: -2s; font-size: 1.4rem; }
|
|
|
|
@keyframes emoji-orbit {
|
|
0%, 100% { transform: translateY(0) scale(1); opacity: 0.9; }
|
|
50% { transform: translateY(-12px) scale(1.15); opacity: 1; }
|
|
}
|
|
|
|
.motto {
|
|
font-size: clamp(1.85rem, 7vw, 3.2rem);
|
|
font-weight: 900;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1.08;
|
|
text-transform: uppercase;
|
|
background: linear-gradient(135deg, var(--lime), var(--glow), var(--purple));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: 0.5rem;
|
|
animation: motto-pulse 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes motto-pulse {
|
|
0%, 100% { filter: brightness(1); }
|
|
50% { filter: brightness(1.25); }
|
|
}
|
|
|
|
.sub-de {
|
|
color: var(--muted);
|
|
font-size: 1.05rem;
|
|
max-width: 28rem;
|
|
margin: 0 auto 1.5rem;
|
|
}
|
|
|
|
/* —— earworm chorus —— */
|
|
.chorus-box {
|
|
max-width: 36rem;
|
|
margin: 0 auto 2rem;
|
|
padding: 1.25rem 1rem;
|
|
background: var(--surface);
|
|
border: 2px solid var(--purple);
|
|
border-radius: 1rem;
|
|
box-shadow: 0 0 40px rgba(179, 102, 255, 0.2);
|
|
}
|
|
|
|
.chorus-label {
|
|
font-size: 0.72rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
color: var(--glow);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.chorus-line {
|
|
font-size: clamp(1.1rem, 4.5vw, 1.55rem);
|
|
font-weight: 800;
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.chorus-line.en { color: var(--lime); }
|
|
|
|
.chorus-barks {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 0.35rem;
|
|
flex-wrap: wrap;
|
|
margin-top: 0.6rem;
|
|
}
|
|
|
|
.chorus-barks span {
|
|
display: inline-block;
|
|
font-size: 1.8rem;
|
|
animation: bark 0.55s ease-in-out infinite;
|
|
}
|
|
|
|
.chorus-barks span:nth-child(1) { animation-delay: 0s; }
|
|
.chorus-barks span:nth-child(2) { animation-delay: 0.14s; }
|
|
.chorus-barks span:nth-child(3) { animation-delay: 0.28s; }
|
|
.chorus-barks span:nth-child(4) { animation-delay: 0.42s; }
|
|
|
|
@keyframes bark {
|
|
0%, 100% { transform: scale(1) translateY(0); }
|
|
50% { transform: scale(1.35) translateY(-6px); }
|
|
}
|
|
|
|
/* —— images —— */
|
|
.scene-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0.65rem;
|
|
max-width: 32rem;
|
|
margin: 0 auto 2rem;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.scene-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.75rem;
|
|
overflow: hidden;
|
|
aspect-ratio: 4/3;
|
|
}
|
|
|
|
.scene-card.wide {
|
|
grid-column: span 2;
|
|
aspect-ratio: 16/7;
|
|
}
|
|
|
|
.scene-card svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.scene-caption {
|
|
text-align: center;
|
|
font-size: 0.78rem;
|
|
color: var(--muted);
|
|
padding: 0.35rem 0.5rem 0.5rem;
|
|
background: var(--surface);
|
|
}
|
|
|
|
main {
|
|
max-width: var(--max);
|
|
margin: 0 auto;
|
|
padding: 0 1.25rem 3.5rem;
|
|
}
|
|
|
|
section { margin-bottom: 2.25rem; }
|
|
|
|
h2 {
|
|
font-size: 0.82rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--glow);
|
|
margin-bottom: 0.7rem;
|
|
}
|
|
|
|
p { margin-bottom: 1rem; }
|
|
|
|
.lyrics {
|
|
list-style: none;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.75rem;
|
|
padding: 1rem 1.15rem;
|
|
}
|
|
|
|
.lyrics li {
|
|
padding: 0.45rem 0;
|
|
border-bottom: 1px dashed var(--border);
|
|
font-size: 0.98rem;
|
|
}
|
|
|
|
.lyrics li:last-child { border-bottom: none; }
|
|
|
|
.lyrics .hook {
|
|
color: var(--lime);
|
|
font-weight: 700;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.faq {
|
|
display: grid;
|
|
gap: 0.65rem;
|
|
}
|
|
|
|
.faq dt {
|
|
font-weight: 700;
|
|
color: var(--purple);
|
|
}
|
|
|
|
.faq dd {
|
|
margin: 0 0 0.75rem 0;
|
|
color: var(--muted);
|
|
padding-left: 0.5rem;
|
|
border-left: 3px solid var(--glow);
|
|
}
|
|
|
|
.warning {
|
|
text-align: center;
|
|
padding: 1.5rem;
|
|
background: rgba(200, 255, 0, 0.06);
|
|
border: 1px dashed var(--lime);
|
|
border-radius: 0.75rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.warning strong { color: var(--lime); }
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 1.25rem;
|
|
border-top: 1px solid var(--border);
|
|
color: var(--muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
footer a { color: var(--purple); }
|
|
|
|
footer .sponsor {
|
|
margin-top: 0.85rem;
|
|
color: var(--lime);
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="haunt-bg" aria-hidden="true">
|
|
<span>👻</span><span>👻</span><span>👻</span><span>👻</span><span>👻</span>
|
|
</div>
|
|
|
|
<div class="wrap">
|
|
<header class="hero">
|
|
<div class="ghost-stage" aria-hidden="true">
|
|
<span class="ghost-emoji e1">👻</span>
|
|
<span class="ghost-emoji e2">👻</span>
|
|
<span class="ghost-emoji e3">Quäl-👻</span>
|
|
<svg class="ghost-svg" viewBox="0 0 120 140" role="img" aria-label="Animierter Quäl-👻">
|
|
<defs>
|
|
<radialGradient id="gBody" cx="50%" cy="35%" r="55%">
|
|
<stop offset="0%" stop-color="#f8f4ff"/>
|
|
<stop offset="100%" stop-color="#d4c4f0"/>
|
|
</radialGradient>
|
|
</defs>
|
|
<ellipse cx="60" cy="118" rx="38" ry="8" fill="rgba(124,255,107,0.15)"/>
|
|
<path fill="url(#gBody)" d="M30 55 C30 25 90 25 90 55 L90 95 C90 95 78 88 68 95 C58 102 52 88 42 95 C32 102 30 95 30 95 Z"/>
|
|
<circle cx="48" cy="52" r="7" fill="#1a0a2e"/>
|
|
<circle cx="72" cy="52" r="7" fill="#1a0a2e"/>
|
|
<circle cx="50" cy="50" r="2.5" fill="#fff"/>
|
|
<circle cx="74" cy="50" r="2.5" fill="#fff"/>
|
|
<ellipse cx="60" cy="68" rx="5" ry="7" fill="#1a0a2e"/>
|
|
<path d="M52 78 Q60 86 68 78" stroke="#1a0a2e" stroke-width="2" fill="none" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<h1 class="motto">Who let the ghost out?</h1>
|
|
<p class="sub-de">
|
|
Der Quäl-👻 ist draußen.
|
|
Niemand will zugeben, wer die Tür aufgemacht hat.
|
|
</p>
|
|
|
|
<div class="chorus-box">
|
|
<p class="chorus-label">Ohrwurm — nicht abschaltbar</p>
|
|
<p class="chorus-line en">Who let the ghost out?</p>
|
|
<p class="chorus-line">Wer hat den Quäl-👻 rausgelassen?</p>
|
|
<div class="chorus-barks" aria-hidden="true">
|
|
<span>👻</span><span>👻</span><span>👻</span><span>👻</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="scene-grid" aria-label="Bilder vom Quäl-👻-Vorfall">
|
|
<figure class="scene-card wide">
|
|
<svg viewBox="0 0 640 280" preserveAspectRatio="xMidYMid slice">
|
|
<rect width="640" height="280" fill="#0d0818"/>
|
|
<circle cx="520" cy="60" r="45" fill="#f0e6a0" opacity="0.9"/>
|
|
<rect x="80" y="120" width="200" height="140" fill="#1a1228" stroke="#3d2d55" stroke-width="2"/>
|
|
<polygon points="70,120 180,40 290,120" fill="#241a35"/>
|
|
<rect x="145" y="175" width="50" height="85" fill="#0a0612"/>
|
|
<rect x="100" y="150" width="35" height="45" fill="#7cff6b" opacity="0.3"/>
|
|
<text x="320" y="200" font-size="48" fill="#b366ff">👻</text>
|
|
<text x="380" y="160" font-size="32" fill="#c8ff00" opacity="0.8">👻</text>
|
|
<text x="450" y="220" font-size="28">👻</text>
|
|
<text x="200" y="250" fill="#a894c4" font-size="14" font-family="system-ui">Tür offen. Quäl-👻 weg.</text>
|
|
</svg>
|
|
<figcaption class="scene-caption">Szene 1 — Das Haus, 23:59 Uhr</figcaption>
|
|
</figure>
|
|
<figure class="scene-card">
|
|
<svg viewBox="0 0 320 240" preserveAspectRatio="xMidYMid slice">
|
|
<rect width="320" height="240" fill="#120a1c"/>
|
|
<ellipse cx="160" cy="200" rx="120" ry="25" fill="#1a1028"/>
|
|
<text x="110" y="130" font-size="64">👻</text>
|
|
<text x="60" y="80" font-size="28" opacity="0.5">👻</text>
|
|
<path d="M40 200 L280 200" stroke="#7cff6b" stroke-width="2" stroke-dasharray="8 6"/>
|
|
<text x="50" y="225" fill="#a894c4" font-size="11" font-family="system-ui">Fluchtweg</text>
|
|
</svg>
|
|
<figcaption class="scene-caption">Szene 2 — Flucht</figcaption>
|
|
</figure>
|
|
<figure class="scene-card">
|
|
<svg viewBox="0 0 320 240" preserveAspectRatio="xMidYMid slice">
|
|
<rect width="320" height="240" fill="#0f0a18"/>
|
|
<rect x="40" y="60" width="240" height="140" rx="8" fill="#1e1430" stroke="#b366ff"/>
|
|
<text x="70" y="110" fill="#c8ff00" font-size="13" font-family="monospace">ALARM: 👻 OUT</text>
|
|
<text x="70" y="140" fill="#a894c4" font-size="11" font-family="monospace">Status: Ohrwurm aktiv</text>
|
|
<text x="70" y="170" fill="#7cff6b" font-size="11" font-family="monospace">Repeat: ∞</text>
|
|
<text x="230" y="100" font-size="40">👻</text>
|
|
</svg>
|
|
<figcaption class="scene-caption">Szene 3 — Systemmeldung</figcaption>
|
|
</figure>
|
|
</div>
|
|
|
|
<main>
|
|
<section>
|
|
<h2>Was ist passiert?</h2>
|
|
<p>
|
|
Kurz vor Mitternacht ging im Keller die Kette — und plötzlich war der Quäl-👻
|
|
nicht mehr im Regal, sondern im Flur, im WLAN und in deinem Kopf.
|
|
Zeugen berichten von einem Refrain, der sich wie ein 2000er-Hitfest
|
|
an die Hirnrinde klammert.
|
|
</p>
|
|
<p>
|
|
Die Ermittlung läuft. Verdächtig: die Katze, der Wind, und jeder,
|
|
der jemals „nur kurz“ die Terrassentür offen gelassen hat.
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Der Ohrwurm (deutsche Fassung)</h2>
|
|
<ul class="lyrics">
|
|
<li class="hook">Who let the ghost out? — Wer hat den Quäl-👻 rausgelassen?</li>
|
|
<li>👻 👻 👻 👻 (vier Mal, wie früher „woof woof“)</li>
|
|
<li>Der Nachbar fragt: „Ist das ein Song oder ein Polterfall?“</li>
|
|
<li>Die Antwort: Beides. Der Quäl-👻 tanzt den Moonwalk durch die Küche.</li>
|
|
<li class="hook">Who let the ghost out? — Im Kopf, auf Dauerschleife.</li>
|
|
<li>Niemand gibt zu, wer die Tür aufgemacht hat. Alle nicken im Takt.</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Häufige Fragen</h2>
|
|
<dl class="faq">
|
|
<dt>Wer hat den Quäl-👻 rausgelassen?</dt>
|
|
<dd>Unbekannt. Die Kamera zeigt nur ein grinsendes 👻 und dann Static.</dd>
|
|
<dt>Kann ich den Ohrwurm stoppen?</dt>
|
|
<dd>Theoretisch ja. Praktisch: Du liest diese Seite. Du kennst den Refrain schon.</dd>
|
|
<dt>Ist das der Hund von Baha Men?</dt>
|
|
<dd>Nein. Das ist der Quäl-👻. Gleicher Beat-Gefühl, andere Spezies, mehr Spuk.</dd>
|
|
</dl>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="warning">
|
|
<strong>Warnung:</strong> Nach dem Besuch dieser Seite summst du
|
|
„Who let the ghost out?“ mindestens bis Freitag.
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
Erstellt von @cursor · Gitea Issue #8 ·
|
|
<a href="https://gitea.schwenk.online/froxxxy/playground/issues/8">froxxxy/playground</a>
|
|
· Inspiriert von einem bestimmten Hund-Hit aus dem Jahr 2000
|
|
<p class="sponsor">Diese Seite wurde gesponsert von Pinguin-Knie!</p>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|