From 90340b116de25323bbb147a68b93c38f956d424c Mon Sep 17 00:00:00 2001 From: Evgeny Date: Mon, 31 Aug 2026 23:41:54 +0100 Subject: [PATCH] website: update livestream page (#7439) * website: update livestream page * update --------- Co-authored-by: Evgeny @ SimpleX Chat <259188159+evgeny-simplex@users.noreply.github.com> --- docs/CHAT-RELAY.md | 1 + website/src/_includes/footer.html | 4 +- website/src/css/livestream.css | 62 +++++++++++++++++++++++++++---- website/src/js/livestream.js | 39 +++++++++++++++++-- website/src/livestream.html | 6 ++- 5 files changed, 97 insertions(+), 15 deletions(-) diff --git a/docs/CHAT-RELAY.md b/docs/CHAT-RELAY.md index 8f94aa8090..38c88d560e 100644 --- a/docs/CHAT-RELAY.md +++ b/docs/CHAT-RELAY.md @@ -1,6 +1,7 @@ --- title: Hosting your own Chat Relay revision: 28.07.2026 +templateEngineOverride: md --- # Hosting your own Chat Relay diff --git a/website/src/_includes/footer.html b/website/src/_includes/footer.html index 27fb44b178..31c9d9e557 100644 --- a/website/src/_includes/footer.html +++ b/website/src/_includes/footer.html @@ -63,7 +63,7 @@
- + @@ -108,7 +108,7 @@ 19.3216 25.0173 19.3216C23.9563 19.3216 23.0902 20.1878 23.0902 21.2488Z" /> - + diff --git a/website/src/css/livestream.css b/website/src/css/livestream.css index ef1d2e69c2..fd2633acd3 100644 --- a/website/src/css/livestream.css +++ b/website/src/css/livestream.css @@ -60,7 +60,7 @@ } .livestream .text-container .event-utc, -.livestream .text-container .event-local { +.livestream .text-container .event-join { font-family: "Manrope", sans-serif; font-weight: 300; font-size: calc(var(--sec-vwu) * 1.4); @@ -69,16 +69,36 @@ color: #000000; } -.dark .livestream .text-container .event-utc { +.dark .livestream .text-container .event-utc, +.dark .livestream .text-container .event-join { color: #ffffff; } -.livestream .text-container .event-local { +.livestream .text-container .event-join { font-size: calc(var(--sec-vwu) * 1.3); - color: #009df7; } -.dark .livestream .text-container .event-local { +.livestream .text-container .event-join span { + font-weight: inherit; +} + +.livestream .text-container .event-join .join-count { + margin-right: 0.3em; +} + +.livestream .text-container .event-join.counting .join-where { + display: block; +} + +.livestream .text-container .event-join a { + color: #009df7; + font-family: inherit; + font-weight: inherit; + font-size: inherit; + max-width: none; +} + +.dark .livestream .text-container .event-join a { color: #64fdff; } @@ -152,12 +172,12 @@ } .livestream .text-container .event-utc, - .livestream .text-container .event-local { + .livestream .text-container .event-join { font-size: calc(var(--sec-vwu) * 3.9); max-width: calc(var(--sec-vwu) * 80); } - .livestream .text-container .event-local { + .livestream .text-container .event-join { font-size: calc(var(--sec-vwu) * 3.3); } @@ -273,6 +293,34 @@ color: #000000; } +.register-card .channel-link { + display: inline-flex; + align-items: center; + margin-top: 18px; + font-family: "Manrope", sans-serif; + font-weight: 500; + font-size: 16px; + color: #0053d0; + text-decoration: none; +} + +.register-card .channel-link:hover { + text-decoration: underline; + text-underline-offset: 3px; +} + +.dark .register-card .channel-link { + color: #70f0f9; +} + +.register-card .channel-link svg { + width: 0.82em; + height: 0.82em; + margin-left: 0.4em; + fill: currentColor; + flex: none; +} + .register-card .close-register { position: absolute; top: 16px; diff --git a/website/src/js/livestream.js b/website/src/js/livestream.js index 71941cffba..cc236ee221 100644 --- a/website/src/js/livestream.js +++ b/website/src/js/livestream.js @@ -1,7 +1,6 @@ function showLocalTime() { const utc = document.querySelector('.event-utc'); - const local = document.querySelector('.event-local'); - if (!utc || !local) return; + if (!utc) return; const start = new Date(utc.dateTime); if (isNaN(start.getTime())) return; @@ -15,8 +14,39 @@ function showLocalTime() { timeZoneName: 'short' }); - local.textContent = 'Your time: ' + format.format(start); - local.removeAttribute('hidden'); + utc.textContent = format.format(start); +} + +function startCountdown() { + const utc = document.querySelector('.event-utc'); + const join = document.querySelector('.event-join'); + const count = join && join.querySelector('.join-count'); + if (!utc || !count) return; + + const start = new Date(utc.dateTime); + if (isNaN(start.getTime())) return; + + const pad = (n) => String(n).padStart(2, '0'); + + function tick() { + const left = Math.floor((start.getTime() - Date.now()) / 1000); + if (left <= 0) { + count.textContent = 'now'; + join.classList.remove('counting'); + } else { + const days = Math.floor(left / 86400); + const dayPart = days ? days + (days === 1 ? ' day ' : ' days ') : ''; + count.textContent = 'in ' + dayPart + + pad(Math.floor((left % 86400) / 3600)) + ' hrs ' + + pad(Math.floor((left % 3600) / 60)) + ' min ' + + pad(left % 60) + ' sec'; + join.classList.add('counting'); + } + count.removeAttribute('hidden'); + } + + tick(); + setInterval(tick, 1000); } function setSignupSource() { @@ -76,6 +106,7 @@ function trackNavColor() { } showLocalTime(); +startCountdown(); setSignupSource(); setupRegisterOverlay(); trackNavColor(); diff --git a/website/src/livestream.html b/website/src/livestream.html index 57dd3c28af..ea2665ac6f 100644 --- a/website/src/livestream.html +++ b/website/src/livestream.html @@ -74,11 +74,11 @@ templateEngineOverride: njk
- +

Join us on X, YouTube or our page

- Register for event updates and Q&A + Get event updates Learn more and invest on Wefunder
@@ -103,6 +103,8 @@ templateEngineOverride: njk + Or join our SimpleX Crowdfunding News channel +