Add oscilloscopemusic.com plug to Outer Limits easter egg
After the typewriter finishes, a subtle link fades in at the bottom of the CRT: "tell 'em warehack.ing sent 'cha" → oscilloscopemusic.com
This commit is contained in:
parent
ad630ff471
commit
cdd5a923a6
@ -38,6 +38,9 @@
|
||||
<!-- Outer Limits easter egg overlay -->
|
||||
<div class="scope-outer-limits" id="scope-outer-limits" aria-hidden="true">
|
||||
<p class="scope-ol-text" id="scope-ol-text"></p>
|
||||
<a class="scope-ol-plug" id="scope-ol-plug"
|
||||
href="https://oscilloscopemusic.com" target="_blank" rel="noopener"
|
||||
>tell 'em warehack.ing sent 'cha</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -440,6 +443,7 @@
|
||||
const knobs = document.querySelectorAll('.scope-easter-knob');
|
||||
const overlay = document.getElementById('scope-outer-limits');
|
||||
const textEl = document.getElementById('scope-ol-text');
|
||||
const plugEl = document.getElementById('scope-ol-plug');
|
||||
if (!knobs.length || !overlay || !textEl) return;
|
||||
|
||||
// Guard against double-init
|
||||
@ -455,6 +459,7 @@
|
||||
overlay!.dataset.active = 'true';
|
||||
overlay!.setAttribute('aria-hidden', 'false');
|
||||
textEl!.textContent = '';
|
||||
if (plugEl) plugEl.dataset.visible = 'false';
|
||||
typeText(quote, 0);
|
||||
speak(quote);
|
||||
}
|
||||
@ -469,7 +474,11 @@
|
||||
}
|
||||
|
||||
function typeText(text: string, i: number) {
|
||||
if (i >= text.length) return;
|
||||
if (i >= text.length) {
|
||||
// Quote done — fade in the plug after a beat
|
||||
if (plugEl) setTimeout(() => { plugEl.dataset.visible = 'true'; }, 800);
|
||||
return;
|
||||
}
|
||||
textEl!.textContent += text[i];
|
||||
typeTimer = window.setTimeout(() => typeText(text, i + 1), 30);
|
||||
}
|
||||
@ -520,6 +529,9 @@
|
||||
});
|
||||
});
|
||||
|
||||
// Let the plug link open without dismissing the overlay
|
||||
if (plugEl) plugEl.addEventListener('click', (e: Event) => e.stopPropagation());
|
||||
|
||||
// Dismiss on overlay click or Escape
|
||||
overlay.addEventListener('click', dismiss);
|
||||
document.addEventListener('keydown', (e: KeyboardEvent) => {
|
||||
|
||||
@ -386,6 +386,34 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Cheeky plug — fades in after typewriter finishes */
|
||||
.scope-ol-plug {
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
font-family: var(--sl-font-mono, ui-monospace, monospace);
|
||||
font-size: 0.45rem;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--scope-teal);
|
||||
text-decoration: none;
|
||||
opacity: 0;
|
||||
transition: opacity 1.2s ease-in;
|
||||
pointer-events: none;
|
||||
text-shadow: 0 0 6px var(--scope-teal-glow);
|
||||
}
|
||||
|
||||
.scope-ol-plug[data-visible="true"] {
|
||||
opacity: 0.7;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.scope-ol-plug:hover {
|
||||
opacity: 1;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ── Easter egg knobs (Vertical / Horizontal) ────────────── */
|
||||
.scope-easter-knob {
|
||||
cursor: pointer;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user