611 lines
19 KiB
HTML
611 lines
19 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>OPHI-118 / SIGN-OFF</title>
|
||
<style>
|
||
:root {
|
||
--bg: #07080d;
|
||
--ink: #e8e8e0;
|
||
--hud: #4fd2ff;
|
||
--hud-dim: #2a7fa6;
|
||
--accent: #e63a2e;
|
||
--warn: #ffd000;
|
||
--offair: #ff6f5a;
|
||
|
||
--term-bg: #04120a;
|
||
--term-fg: #5fdc62;
|
||
--term-fg-bright: #97f99a;
|
||
--term-fg-dim: #2c8d2f;
|
||
--term-glow: rgba(80, 220, 100, 0.55);
|
||
--term-edge: rgba(80, 220, 100, 0.45);
|
||
|
||
--mono: 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', monospace;
|
||
--display: 'DejaVu Sans', 'Liberation Sans', 'Helvetica', 'Arial', sans-serif;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
html, body {
|
||
width: 100%; height: 100%;
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
font-family: var(--display);
|
||
overflow: hidden;
|
||
user-select: none;
|
||
}
|
||
|
||
body {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-rows: auto 1fr auto auto;
|
||
padding: 40px 72px;
|
||
gap: 28px;
|
||
}
|
||
|
||
/* ───────── HUD top strip ───────── */
|
||
.hud {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
align-items: center;
|
||
font-family: var(--mono);
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: var(--hud);
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.hud .group { display: flex; gap: 28px; align-items: center; }
|
||
.hud > .group:nth-child(1) { justify-self: start; }
|
||
.hud > .group:nth-child(2) { justify-self: center; }
|
||
.hud > .group:nth-child(3) { justify-self: end; }
|
||
.hud .dim { color: var(--hud-dim); }
|
||
.hud .group > span { display: inline-flex; align-items: center; gap: 12px; }
|
||
.hud .led {
|
||
display: inline-block;
|
||
width: 11px; height: 11px;
|
||
border-radius: 50%;
|
||
background: var(--offair);
|
||
box-shadow: 0 0 10px var(--offair);
|
||
/* Small upward nudge: flex centers on line-box mid, but caps-only text
|
||
reads centered around cap-height mid which sits a touch higher. */
|
||
margin-top: -0.08em;
|
||
animation: rec-blink 2.4s ease-in-out infinite;
|
||
}
|
||
/* The ▮/▯ glyphs in DejaVu Sans Mono are designed centered on x-height,
|
||
not cap-height, so against all-caps SIGNAL their visual middle sits low.
|
||
Lift by ~(cap-mid − x-mid) ≈ 0.10em to put the glyph center on cap center. */
|
||
#signal {
|
||
display: inline-block;
|
||
transform: translateY(-0.10em);
|
||
}
|
||
@keyframes rec-blink {
|
||
0%, 65% { opacity: 1; }
|
||
75%, 100% { opacity: 0.15; }
|
||
}
|
||
|
||
/* ───────── Terminal stage ───────── */
|
||
.stage {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.terminal {
|
||
width: 60vw;
|
||
max-width: 1380px;
|
||
height: 58vh;
|
||
max-height: 740px;
|
||
min-height: 400px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: var(--term-bg);
|
||
border: 2px solid var(--term-edge);
|
||
border-radius: 6px;
|
||
padding: 28px 36px;
|
||
font-family: var(--mono);
|
||
font-size: 26px;
|
||
line-height: 1.55;
|
||
color: var(--term-fg);
|
||
text-shadow: 0 0 6px var(--term-glow);
|
||
box-shadow:
|
||
0 0 60px rgba(80, 220, 100, 0.10),
|
||
inset 0 0 90px rgba(0, 30, 0, 0.65);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
#termOutput {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
overflow: hidden;
|
||
}
|
||
.terminal::after {
|
||
content: '';
|
||
position: absolute; inset: 0;
|
||
pointer-events: none;
|
||
background: repeating-linear-gradient(
|
||
to bottom,
|
||
rgba(0,0,0,0) 0px,
|
||
rgba(0,0,0,0) 2px,
|
||
rgba(0,0,0,0.28) 3px,
|
||
rgba(0,0,0,0.28) 4px
|
||
);
|
||
opacity: 0.55;
|
||
mix-blend-mode: multiply;
|
||
}
|
||
.term-line { white-space: pre-wrap; word-break: break-word; }
|
||
.term-prompt { color: var(--term-fg-bright); }
|
||
.term-out { color: var(--term-fg); }
|
||
.term-dim { color: var(--term-fg-dim); }
|
||
.term-warn { color: var(--warn); }
|
||
.term-cursor {
|
||
display: inline-block;
|
||
width: 0.55em;
|
||
height: 1em;
|
||
background: var(--term-fg);
|
||
margin-left: 6px;
|
||
vertical-align: -0.15em;
|
||
box-shadow: 0 0 8px var(--term-glow);
|
||
animation: term-blink 1.05s steps(2) infinite;
|
||
}
|
||
@keyframes term-blink { 50% { opacity: 0; } }
|
||
|
||
.term-now-playing { margin-top: 10px; }
|
||
.term-now-playing .np-arrow {
|
||
color: var(--term-fg-bright);
|
||
margin-right: 10px;
|
||
animation: np-pulse 1.05s ease-in-out infinite alternate;
|
||
}
|
||
.term-now-playing .np-title { color: var(--term-fg-bright); }
|
||
.term-now-playing .np-time { color: var(--term-fg-dim); margin-left: 12px; }
|
||
@keyframes np-pulse {
|
||
0% { opacity: 0.45; }
|
||
100% { opacity: 1.00; }
|
||
}
|
||
|
||
/* ───────── Big sign-off banner ───────── */
|
||
/* text-indent compensates for trailing letter-spacing on the last char,
|
||
which would otherwise be included in the centered inline box and shift
|
||
visible text left by half the letter-spacing value. */
|
||
.banner { text-align: center; }
|
||
.banner .label {
|
||
font-family: var(--mono);
|
||
font-size: 22px;
|
||
letter-spacing: 0.45em;
|
||
text-indent: 0.45em;
|
||
color: var(--hud-dim);
|
||
margin-bottom: 12px;
|
||
}
|
||
.banner .title {
|
||
font-family: var(--mono);
|
||
font-size: 116px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.18em;
|
||
text-indent: 0.18em;
|
||
line-height: 1;
|
||
color: var(--ink);
|
||
text-shadow:
|
||
0 0 22px rgba(255, 111, 90, 0.18),
|
||
0 0 48px rgba(230, 58, 46, 0.10);
|
||
animation: sign-pulse 3.6s ease-in-out infinite;
|
||
}
|
||
.banner .sub {
|
||
margin-top: 18px;
|
||
font-family: var(--mono);
|
||
font-size: 22px;
|
||
letter-spacing: 0.45em;
|
||
text-indent: 0.45em;
|
||
color: var(--hud-dim);
|
||
}
|
||
@keyframes sign-pulse {
|
||
0%, 100% { opacity: 0.88; }
|
||
50% { opacity: 1.00; }
|
||
}
|
||
|
||
/* ───────── Footer ───────── */
|
||
.foot {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
align-items: center;
|
||
font-family: var(--mono);
|
||
font-size: 19px;
|
||
color: var(--hud-dim);
|
||
letter-spacing: 0.12em;
|
||
}
|
||
.foot > *:nth-child(1) { justify-self: start; }
|
||
.foot > *:nth-child(2) { justify-self: center; }
|
||
.foot > *:nth-child(3) { justify-self: end; }
|
||
.foot .offair { color: var(--offair); }
|
||
|
||
/* ───────── Body overlays ───────── */
|
||
#static {
|
||
position: absolute; inset: 0;
|
||
width: 100%; height: 100%;
|
||
pointer-events: none;
|
||
opacity: 0.045;
|
||
mix-blend-mode: screen;
|
||
image-rendering: pixelated;
|
||
}
|
||
.scanlines {
|
||
position: absolute; inset: 0;
|
||
pointer-events: none;
|
||
background: repeating-linear-gradient(
|
||
to bottom,
|
||
rgba(0,0,0,0) 0px,
|
||
rgba(0,0,0,0) 2px,
|
||
rgba(0,0,0,0.20) 3px,
|
||
rgba(0,0,0,0.20) 4px
|
||
);
|
||
opacity: 0.5;
|
||
mix-blend-mode: multiply;
|
||
}
|
||
.vignette {
|
||
position: absolute; inset: 0;
|
||
pointer-events: none;
|
||
background: radial-gradient(
|
||
ellipse at center,
|
||
rgba(0,0,0,0) 45%,
|
||
rgba(0,0,0,0.60) 100%
|
||
);
|
||
}
|
||
.flicker {
|
||
position: absolute; inset: 0;
|
||
pointer-events: none;
|
||
background: rgba(0,0,0,0);
|
||
animation: flicker 11s ease-in-out infinite;
|
||
}
|
||
@keyframes flicker {
|
||
0%, 100% { background: rgba(0,0,0,0); }
|
||
18% { background: rgba(0,0,0,0); }
|
||
18.3% { background: rgba(0,0,0,0.06); }
|
||
18.5% { background: rgba(0,0,0,0); }
|
||
47% { background: rgba(0,0,0,0); }
|
||
47.3% { background: rgba(0,0,0,0.08); }
|
||
47.5% { background: rgba(0,0,0,0); }
|
||
78% { background: rgba(0,0,0,0); }
|
||
78.4% { background: rgba(0,0,0,0.05); }
|
||
78.7% { background: rgba(0,0,0,0); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="hud">
|
||
<div class="group">
|
||
<span><span class="led"></span>OFF AIR</span>
|
||
<span>OPHI-118 // SIGN-OFF</span>
|
||
</div>
|
||
<div class="group">
|
||
<span class="dim">SIGNAL</span>
|
||
<span id="signal">▮▮▯▯▯</span>
|
||
</div>
|
||
<div class="group">
|
||
<span class="dim">UTC</span>
|
||
<span id="clock">--:--:--</span>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="stage">
|
||
<div class="terminal">
|
||
<div id="termOutput"></div>
|
||
</div>
|
||
</main>
|
||
|
||
<section class="banner" id="banner">
|
||
<div class="label">— TRANSMISSION ENDED —</div>
|
||
<div class="title" id="bannerTitle">GOOD BYE</div>
|
||
<div class="sub" id="bannerSub">— THANKS FOR TUNING IN —</div>
|
||
</section>
|
||
|
||
<footer class="foot">
|
||
<span>CH 118.0 MHz</span>
|
||
<span id="rig">— PROJECT MANIFEST UNLOADED —</span>
|
||
<span class="offair">■ OFF AIR</span>
|
||
</footer>
|
||
|
||
<canvas id="static"></canvas>
|
||
<div class="scanlines"></div>
|
||
<div class="vignette"></div>
|
||
<div class="flicker"></div>
|
||
|
||
<!-- Playlist manifest written by scripts/playlist.sh — used here just for the
|
||
track count in the closing terminal output. Actual playback continues in
|
||
the shared Music Daemon source. -->
|
||
<script src="../loading/playlist.js"></script>
|
||
<!-- OBS WebSocket — receives mpd:state broadcasts from the daemon so the
|
||
now-playing line keeps updating during sign-off. -->
|
||
<script src="../vendor/obs-config.js"></script>
|
||
<script src="../vendor/obs-ws-mini.js"></script>
|
||
|
||
<script>
|
||
const pad = n => String(n).padStart(2, '0');
|
||
const sleep = ms => new Promise(r => setTimeout(r, ms));
|
||
|
||
// ── UTC clock ──
|
||
const clockEl = document.getElementById('clock');
|
||
const tickClock = () => {
|
||
const d = new Date();
|
||
clockEl.textContent = `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}`;
|
||
};
|
||
tickClock();
|
||
setInterval(tickClock, 1000);
|
||
|
||
// ── Signal bar — degrading: more 1s and 2s than during loading ──
|
||
const sigEl = document.getElementById('signal');
|
||
const drawSig = n => '▮'.repeat(n) + '▯'.repeat(5 - n);
|
||
setInterval(() => {
|
||
const r = Math.random();
|
||
sigEl.textContent = drawSig(r < 0.45 ? 1 : r < 0.85 ? 2 : r < 0.97 ? 3 : 0);
|
||
}, 1500);
|
||
|
||
// ── Static (CRT noise) ──
|
||
const cv = document.getElementById('static'), ctx = cv.getContext('2d');
|
||
const W = 320, H = 180;
|
||
cv.width = W; cv.height = H;
|
||
const img = ctx.createImageData(W, H);
|
||
const drawNoise = () => {
|
||
const d = img.data;
|
||
for (let i = 0; i < d.length; i += 4) {
|
||
const v = (Math.random() * 255) | 0;
|
||
d[i] = d[i+1] = d[i+2] = v;
|
||
d[i+3] = 255;
|
||
}
|
||
ctx.putImageData(img, 0, 0);
|
||
};
|
||
drawNoise();
|
||
setInterval(drawNoise, 1000 / 8);
|
||
|
||
// ── Sign-off sequence (terminal output) ──
|
||
const PROMPT = 'OPHI-118://> ';
|
||
const MODE_KEYS = ['repeat', 'random', 'single'];
|
||
const lines = [
|
||
{ kind: 'cmd', text: 'unloadproject --flush --persist-state' },
|
||
{ kind: 'out', text: 'closing transmission envelope...' },
|
||
{ kind: 'gap' },
|
||
{ kind: 'out', text: 'session :: archived' },
|
||
{ kind: 'out', text: 'camera :: released' },
|
||
{ kind: 'out', text: 'microphone :: released' },
|
||
{ kind: 'out', text: 'capture :: released' },
|
||
{ kind: 'gap' },
|
||
{ kind: 'dim', text: 'flushing buffers...' },
|
||
{ kind: 'gap' },
|
||
{ kind: 'out', text: 'TRANSMISSION ENDED.' },
|
||
{ kind: 'warn', text: '— see you on the next channel —' },
|
||
];
|
||
|
||
const term = document.getElementById('termOutput');
|
||
|
||
const MAX_TERM_LINES = 200;
|
||
function pruneTerminal() {
|
||
// Cap total node count (memory).
|
||
while (term.children.length > MAX_TERM_LINES) {
|
||
const first = term.firstElementChild;
|
||
if (!first || first === npLine) break;
|
||
term.removeChild(first);
|
||
}
|
||
// Sum rendered heights of children and drop top until they fit. Container
|
||
// is flex/justify-end with overflow:hidden, so neither scrollHeight nor
|
||
// child positions reliably indicate top overflow — but each child's own
|
||
// rendered height does, regardless of clip.
|
||
while (term.children.length > 1) {
|
||
let total = 0;
|
||
for (const c of term.children) total += c.getBoundingClientRect().height;
|
||
if (total <= term.clientHeight) break;
|
||
const first = term.firstElementChild;
|
||
if (!first || first === npLine) break;
|
||
term.removeChild(first);
|
||
}
|
||
}
|
||
|
||
function append(prompt, text, cls) {
|
||
const div = document.createElement('div');
|
||
div.className = 'term-line';
|
||
if (prompt) {
|
||
const p = document.createElement('span');
|
||
p.className = 'term-prompt';
|
||
p.textContent = prompt;
|
||
div.appendChild(p);
|
||
}
|
||
const t = document.createElement('span');
|
||
if (cls) t.className = cls;
|
||
t.textContent = text;
|
||
div.appendChild(t);
|
||
term.appendChild(div);
|
||
pruneTerminal();
|
||
return t;
|
||
}
|
||
|
||
async function typeCommand(text) {
|
||
const t = append(PROMPT, '', 'term-out');
|
||
for (const c of text) {
|
||
t.textContent += c;
|
||
await sleep(38);
|
||
}
|
||
await sleep(280);
|
||
}
|
||
|
||
function normalizePlayback(playback) {
|
||
const src = playback && typeof playback === 'object' ? playback : {};
|
||
const normalized = {};
|
||
for (const key of MODE_KEYS) normalized[key] = !!src[key];
|
||
normalized.consume = !!src.consume;
|
||
normalized.volume = Number.isFinite(src.volume) ? src.volume : null;
|
||
return normalized;
|
||
}
|
||
|
||
function formatMusicCommand(playback) {
|
||
const p = normalizePlayback(playback);
|
||
const parts = ['music', '--keep-alive'];
|
||
if (p.volume !== null) parts.push(`--volume=${p.volume}%`);
|
||
MODE_KEYS.forEach(key => {
|
||
if (p[key]) parts.push(`--${key}`);
|
||
});
|
||
if (p.consume) parts.push('--consume');
|
||
return parts.join(' ');
|
||
}
|
||
|
||
// ── Music: passive listener; shared Music Daemon plays the audio ──
|
||
const playlistData = window.__PLAYLIST || { tracks: [] };
|
||
const allTracks = playlistData.tracks || [];
|
||
let bootStarted = false;
|
||
let bootFinished = false;
|
||
let lastPlaybackModes = null;
|
||
let pendingState = null;
|
||
let modeLogChain = Promise.resolve();
|
||
|
||
let npLine = null;
|
||
function ensureNowPlayingLine() {
|
||
if (npLine) return npLine;
|
||
npLine = document.createElement('div');
|
||
npLine.className = 'term-line term-now-playing';
|
||
npLine.innerHTML =
|
||
'<span class="np-arrow">▶</span>' +
|
||
'<span class="np-title">connecting to daemon…</span>' +
|
||
'<span class="np-time">[--:-- / --:--]</span>';
|
||
term.appendChild(npLine);
|
||
return npLine;
|
||
}
|
||
function logBeforeNp(text, cls = 'term-out') {
|
||
if (!npLine) { append('> ', text, cls); return; }
|
||
const div = document.createElement('div');
|
||
div.className = 'term-line';
|
||
const p = document.createElement('span'); p.className = 'term-prompt'; p.textContent = '> ';
|
||
const t = document.createElement('span'); t.className = cls; t.textContent = text;
|
||
div.appendChild(p); div.appendChild(t);
|
||
term.insertBefore(div, npLine);
|
||
pruneTerminal();
|
||
}
|
||
function fmtClock(s) {
|
||
if (!isFinite(s) || s < 0) return '--:--';
|
||
return `${pad(Math.floor(s / 60))}:${pad(Math.floor(s % 60))}`;
|
||
}
|
||
|
||
async function logModeChange(mode, enabled) {
|
||
await typeCommand(`music --${mode}=${enabled ? 'true' : 'false'}`);
|
||
logBeforeNp(`[audio] ${mode} mode ${enabled ? 'enabled' : 'disabled'}`, 'term-out');
|
||
}
|
||
|
||
function trackModeChanges(playback) {
|
||
const current = normalizePlayback(playback);
|
||
if (!lastPlaybackModes) {
|
||
lastPlaybackModes = current;
|
||
return;
|
||
}
|
||
MODE_KEYS.forEach(key => {
|
||
if (current[key] !== lastPlaybackModes[key]) {
|
||
modeLogChain = modeLogChain.then(() => logModeChange(key, current[key]));
|
||
}
|
||
});
|
||
lastPlaybackModes = current;
|
||
}
|
||
|
||
function renderMusicState(s) {
|
||
if (!npLine) ensureNowPlayingLine();
|
||
if (lastTrackIndex !== null && s.index !== lastTrackIndex) {
|
||
logBeforeNp(`[audio] next: ${s.title || '?'}`);
|
||
}
|
||
lastTrackIndex = s.index;
|
||
npLine.querySelector('.np-title').textContent = s.title || '—';
|
||
npLine.querySelector('.np-time').textContent =
|
||
`[${fmtClock(s.currentTime)} / ${fmtClock(s.duration)}]`;
|
||
}
|
||
|
||
async function bootFromState(s) {
|
||
if (bootStarted) return;
|
||
bootStarted = true;
|
||
lastPlaybackModes = normalizePlayback(s.playback);
|
||
|
||
await typeCommand(formatMusicCommand(s.playback));
|
||
if (allTracks.length === 0) {
|
||
append('> ', '[audio] no tracks queued', 'term-dim');
|
||
bootFinished = true;
|
||
return;
|
||
}
|
||
|
||
append('> ', `[audio] queue retained: ${allTracks.length} tracks`, 'term-out');
|
||
await sleep(180);
|
||
append('> ', '[audio] subscribing to mpd:state events', 'term-out');
|
||
await sleep(180);
|
||
append('> ', '[audio] standby for transmission ✓', 'term-out');
|
||
bootFinished = true;
|
||
if (pendingState) renderMusicState(pendingState);
|
||
}
|
||
|
||
let lastTrackIndex = null;
|
||
async function connectMusic() {
|
||
if (!window.__OBSWS) {
|
||
logBeforeNp('[audio] vendor/obs-config.js missing — run scripts/setup.sh', 'term-dim');
|
||
return;
|
||
}
|
||
try {
|
||
const obs = new OBSWSMini(window.__OBSWS.url, window.__OBSWS.password);
|
||
await obs.connect();
|
||
obs.addEventListener('close', () => {
|
||
logBeforeNp('[audio] daemon connection lost — retrying', 'term-dim');
|
||
setTimeout(connectMusic, 2000);
|
||
});
|
||
obs.onCustom('mpd:state', (s) => {
|
||
pendingState = s;
|
||
if (!bootStarted) {
|
||
bootFromState(s);
|
||
return;
|
||
}
|
||
if (!bootFinished) return;
|
||
renderMusicState(s);
|
||
trackModeChanges(s.playback);
|
||
});
|
||
} catch (e) {
|
||
logBeforeNp(`[audio] daemon unreachable (${e.message}) — retrying`, 'term-dim');
|
||
setTimeout(connectMusic, 2500);
|
||
}
|
||
}
|
||
|
||
async function startMusic() {
|
||
await sleep(400);
|
||
append('', '[audio] waiting for mpd state', 'term-dim');
|
||
connectMusic();
|
||
}
|
||
|
||
// ── Run sequence: type sign-off → music status ──
|
||
(async () => {
|
||
await sleep(450);
|
||
for (const ln of lines) {
|
||
if (ln.kind === 'cmd') {
|
||
await typeCommand(ln.text);
|
||
} else if (ln.kind === 'gap') {
|
||
append('', ' ', '');
|
||
await sleep(80);
|
||
} else {
|
||
const cls =
|
||
ln.kind === 'dim' ? 'term-dim' :
|
||
ln.kind === 'warn' ? 'term-warn' :
|
||
'term-out';
|
||
append('> ', ln.text, cls);
|
||
await sleep(170);
|
||
}
|
||
}
|
||
await startMusic();
|
||
})();
|
||
|
||
// ── Live "OFFLINE FOR" counter under the banner sub-line ──
|
||
// Scene-load = sign-off start. Counts up indefinitely; if you switch back to
|
||
// a live scene and return, it resets (browser source reload).
|
||
const startMs = Date.now();
|
||
const subEl = document.getElementById('bannerSub');
|
||
const tickOffline = () => {
|
||
const sec = Math.floor((Date.now() - startMs) / 1000);
|
||
const h = Math.floor(sec / 3600);
|
||
const m = Math.floor((sec % 3600) / 60);
|
||
const s = sec % 60;
|
||
const t = h > 0 ? `${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
|
||
subEl.textContent = `— OFFLINE FOR ${t} —`;
|
||
};
|
||
// Wait a few seconds before the counter takes over the "thanks" sub-line,
|
||
// so the message has time to register.
|
||
setTimeout(() => { tickOffline(); setInterval(tickOffline, 500); }, 6000);
|
||
</script>
|
||
</body>
|
||
</html>
|