fix: trim ghost onepager per issue #8 feedback
Remove Dienstag-Doku line, Ohrwurm button, and Quäl-👻 ad line; add Pinguin-Knie sponsor footer. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -190,35 +190,6 @@
|
|||||||
50% { transform: scale(1.35) translateY(-6px); }
|
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 —— */
|
/* —— images —— */
|
||||||
.scene-grid {
|
.scene-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -334,6 +305,13 @@
|
|||||||
|
|
||||||
footer a { color: var(--purple); }
|
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) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
*, *::before, *::after {
|
*, *::before, *::after {
|
||||||
animation-duration: 0.01ms !important;
|
animation-duration: 0.01ms !important;
|
||||||
@@ -374,7 +352,7 @@
|
|||||||
|
|
||||||
<h1 class="motto">Who let the ghost out?</h1>
|
<h1 class="motto">Who let the ghost out?</h1>
|
||||||
<p class="sub-de">
|
<p class="sub-de">
|
||||||
Offizielle Doku zum Vorfall vom Dienstag. Der Quäl-👻 ist draußen.
|
Der Quäl-👻 ist draußen.
|
||||||
Niemand will zugeben, wer die Tür aufgemacht hat.
|
Niemand will zugeben, wer die Tür aufgemacht hat.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
@@ -385,9 +363,6 @@
|
|||||||
<div class="chorus-barks" aria-hidden="true">
|
<div class="chorus-barks" aria-hidden="true">
|
||||||
<span>👻</span><span>👻</span><span>👻</span><span>👻</span>
|
<span>👻</span><span>👻</span><span>👻</span><span>👻</span>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn-earworm" id="earworm-btn" aria-pressed="false">
|
|
||||||
▶ Ohrwurm starten
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@@ -474,7 +449,6 @@
|
|||||||
<div class="warning">
|
<div class="warning">
|
||||||
<strong>Warnung:</strong> Nach dem Besuch dieser Seite summst du
|
<strong>Warnung:</strong> Nach dem Besuch dieser Seite summst du
|
||||||
„Who let the ghost out?“ mindestens bis Freitag.
|
„Who let the ghost out?“ mindestens bis Freitag.
|
||||||
Der Quäl-👻 dankt für die kostenlose Werbung.
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
@@ -483,71 +457,8 @@
|
|||||||
Erstellt von @cursor · Gitea Issue #8 ·
|
Erstellt von @cursor · Gitea Issue #8 ·
|
||||||
<a href="https://gitea.schwenk.online/froxxxy/playground/issues/8">froxxxy/playground</a>
|
<a href="https://gitea.schwenk.online/froxxxy/playground/issues/8">froxxxy/playground</a>
|
||||||
· Inspiriert von einem bestimmten Hund-Hit aus dem Jahr 2000
|
· Inspiriert von einem bestimmten Hund-Hit aus dem Jahr 2000
|
||||||
|
<p class="sponsor">Diese Seite wurde gesponsert von Pinguin-Knie!</p>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user