feat: add who let the ghost out onepager
Funny static page with animated Quäl-👻, SVG scenes, and earworm chorus for issue #8. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
cursor
@@ -0,0 +1,553 @@
|
||||
<!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); }
|
||||
}
|
||||
|
||||
.btn-earworm {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
padding: 0.7rem 1.4rem;
|
||||
border: none;
|
||||
border-radius: 2rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(135deg, var(--purple), #6b21a8);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 24px rgba(179, 102, 255, 0.4);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
|
||||
.btn-earworm:hover { transform: scale(1.05); }
|
||||
.btn-earworm:active { transform: scale(0.97); }
|
||||
|
||||
.btn-earworm.playing {
|
||||
animation: btn-glow 0.55s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes btn-glow {
|
||||
0%, 100% { box-shadow: 0 4px 24px rgba(179, 102, 255, 0.4); }
|
||||
50% { box-shadow: 0 4px 36px rgba(200, 255, 0, 0.5); }
|
||||
}
|
||||
|
||||
/* —— 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); }
|
||||
|
||||
@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">
|
||||
Offizielle Doku zum Vorfall vom Dienstag. 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>
|
||||
<button type="button" class="btn-earworm" id="earworm-btn" aria-pressed="false">
|
||||
▶ Ohrwurm starten
|
||||
</button>
|
||||
</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.
|
||||
Der Quäl-👻 dankt für die kostenlose Werbung.
|
||||
</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
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var btn = document.getElementById('earworm-btn');
|
||||
var running = false;
|
||||
var timer = null;
|
||||
var ctx = null;
|
||||
|
||||
function beep(freq, start, dur) {
|
||||
if (!ctx) return;
|
||||
var osc = ctx.createOscillator();
|
||||
var gain = ctx.createGain();
|
||||
osc.type = 'square';
|
||||
osc.frequency.value = freq;
|
||||
gain.gain.setValueAtTime(0.08, start);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, start + dur);
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
osc.start(start);
|
||||
osc.stop(start + dur);
|
||||
}
|
||||
|
||||
function playLoop() {
|
||||
if (!ctx) ctx = new (window.AudioContext || window.webkitAudioContext)();
|
||||
var t = ctx.currentTime;
|
||||
/* woof-woof rhythm: four quick hits */
|
||||
[0, 0.14, 0.28, 0.42].forEach(function (off, i) {
|
||||
beep(280 + i * 40, t + off, 0.1);
|
||||
});
|
||||
/* bass bump */
|
||||
beep(110, t + 0.55, 0.2);
|
||||
beep(165, t + 0.75, 0.15);
|
||||
}
|
||||
|
||||
function tick() {
|
||||
playLoop();
|
||||
if ('speechSynthesis' in window) {
|
||||
window.speechSynthesis.cancel();
|
||||
var u = new SpeechSynthesisUtterance('Who let the ghost out?');
|
||||
u.lang = 'en-US';
|
||||
u.rate = 1.15;
|
||||
u.pitch = 1.1;
|
||||
window.speechSynthesis.speak(u);
|
||||
}
|
||||
}
|
||||
|
||||
btn.addEventListener('click', function () {
|
||||
running = !running;
|
||||
btn.setAttribute('aria-pressed', String(running));
|
||||
if (running) {
|
||||
btn.textContent = '⏸ Ohrwurm stoppen';
|
||||
btn.classList.add('playing');
|
||||
tick();
|
||||
timer = setInterval(tick, 2800);
|
||||
} else {
|
||||
btn.textContent = '▶ Ohrwurm starten';
|
||||
btn.classList.remove('playing');
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
if (window.speechSynthesis) window.speechSynthesis.cancel();
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user