diff --git a/public/assets/app.js b/public/assets/app.js index 7b19fab..eaac60e 100644 --- a/public/assets/app.js +++ b/public/assets/app.js @@ -16,10 +16,6 @@ const lightboxImage = document.querySelector('#lightbox-image'); const lightboxDownload = document.querySelector('#lightbox-download'); const lightboxId = document.querySelector('#lightbox-id'); const scrollIndicator = document.querySelector('#scroll-indicator'); -const statStatus = document.querySelector('#stat-status'); -const statLatency = document.querySelector('#stat-latency'); -const statNodes = document.querySelector('#stat-nodes'); -const statMemes = document.querySelector('#stat-memes'); let currentPage = 0; let totalPages = 1; @@ -285,15 +281,21 @@ async function refreshStatus() { const response = await fetch('/api/status', { cache: 'no-store' }); const status = await response.json(); if (!response.ok) throw new Error('status failed'); - statStatus.textContent = status.ok ? 'ONLINE' : 'DEGRADED'; - statLatency.textContent = `${Math.max(1, Math.round(performance.now() - started))}MS`; - statNodes.textContent = formatCount(status.liveClients); - statMemes.textContent = formatCount(status.memeCount); + setStat('status', status.ok ? 'ONLINE' : 'DEGRADED'); + setStat('latency', `${Math.max(1, Math.round(performance.now() - started))}MS`); + setStat('nodes', formatCount(status.liveClients)); + setStat('memes', formatCount(status.memeCount)); } catch { - statStatus.textContent = 'OFFLINE'; - statLatency.textContent = '--MS'; - statNodes.textContent = '--'; - statMemes.textContent = '--'; + setStat('status', 'OFFLINE'); + setStat('latency', '--MS'); + setStat('nodes', '--'); + setStat('memes', '--'); + } +} + +function setStat(name, value) { + for (const element of document.querySelectorAll(`[data-stat="${name}"]`)) { + element.textContent = value; } } diff --git a/public/assets/styles.css b/public/assets/styles.css index b0af089..4e3885a 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -399,10 +399,44 @@ a { opacity: 1; } +.repo-footer { + display: flex; + justify-content: center; + margin-top: -8px; + padding-bottom: 8px; +} + +.repo-footer a { + display: inline-flex; + align-items: center; + gap: 6px; + color: var(--outline); + font-size: 9px; + font-weight: 600; + letter-spacing: 0.12em; + opacity: 0.45; + text-decoration: none; + text-transform: uppercase; + transition: color 120ms ease, opacity 120ms ease; +} + +.repo-footer a:hover, +.repo-footer a:focus-visible { + color: var(--primary-dim); + opacity: 0.85; +} + +.repo-footer img { + width: auto; + height: 20px; + object-fit: contain; + opacity: 0.8; +} + .side-terminal { position: fixed; left: 16px; - top: 50%; + top: calc(64px + (100vh - 64px) / 2); transform: translateY(-50%); width: 192px; padding-left: 8px; @@ -419,10 +453,31 @@ a { text-decoration: underline; } +.terminal-strip { + display: none; + margin-top: 0; + padding: 10px 0; + color: var(--outline); + font-size: 10px; + font-weight: 600; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.terminal-strip strong { + color: var(--muted); + font-weight: 600; +} + +.terminal-strip .active { + color: var(--primary-dim); + text-decoration: underline; +} + .scroll-indicator { position: fixed; right: 16px; - top: 50%; + top: calc(64px + (100vh - 64px) / 2); display: flex; flex-direction: column; gap: 8px; @@ -635,6 +690,25 @@ dialog::backdrop { } } +@media (max-width: 1759px) and (min-width: 901px) { + .side-terminal { + display: none; + } + + .terminal-strip { + display: flex; + flex-wrap: wrap; + gap: 8px 20px; + align-items: center; + } +} + +@media (min-width: 1760px) { + .terminal-strip { + display: none; + } +} + @media (max-width: 900px) { .topbar, .shell { @@ -647,6 +721,7 @@ dialog::backdrop { } .side-terminal, + .terminal-strip, .scroll-indicator { display: none; } diff --git a/public/assets/yoonect-logo.png b/public/assets/yoonect-logo.png new file mode 100644 index 0000000..e297591 Binary files /dev/null and b/public/assets/yoonect-logo.png differ diff --git a/public/index.html b/public/index.html index 5349ad5..e11a06c 100644 --- a/public/index.html +++ b/public/index.html @@ -22,20 +22,35 @@ LIVE_FEED + +