mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2026-09-21 07:27:12 +00:00
website: update crowdfunding page (#7528)
This commit is contained in:
Evgeny @ SimpleX Chat
@@ -218,7 +218,6 @@ templateEngineOverride: njk
|
||||
color: #dfeaff;
|
||||
}
|
||||
|
||||
.cf-hero .cf-live-link { display: inline-block; margin-top: calc(var(--sec-vhu) * 5); font-size: calc(var(--sec-vwu) * 2.2); position: relative; top: calc(var(--sec-vhu) * 1.5); }
|
||||
|
||||
/* ---- close: same left-aligned layout as the hero ---- */
|
||||
.cf-close .area { position: relative; display: flex; align-items: flex-end; padding: 0 calc(var(--sec-vwu) * 7.5) calc(var(--sec-vhu) * 22) 0; }
|
||||
@@ -261,7 +260,6 @@ templateEngineOverride: njk
|
||||
width: fit-content;
|
||||
}
|
||||
.cf-close .cf-hero-cta { margin-top: calc(var(--sec-vhu) * 7); }
|
||||
.cf-close .cf-live-link { display: inline-block; margin-top: calc(var(--sec-vhu) * 4.5); font-size: calc(var(--sec-vwu) * 2.2); position: relative; top: 0; }
|
||||
|
||||
.cf-phone {
|
||||
position: absolute;
|
||||
@@ -315,10 +313,9 @@ templateEngineOverride: njk
|
||||
background: linear-gradient(180deg, #00F0FF 0%, #00C7FF 38%, #008FFF 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
.cf-hero-invest-link {
|
||||
.cf-cta-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(var(--sec-vwu) * 0.7);
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: calc(var(--sec-vwu) * 1.5);
|
||||
@@ -329,10 +326,8 @@ templateEngineOverride: njk
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
--wf-capital-nav-logo-fill: #64fdff;
|
||||
}
|
||||
.cf-hero-invest-link svg { height: calc(var(--sec-vwu) * 2.1); width: auto; display: block; transform: translateY(calc(var(--sec-vwu) * -0.25)); }
|
||||
.cf-hero-invest-link:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; border-radius: 4px; }
|
||||
.cf-cta-link:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; border-radius: 4px; }
|
||||
/* the same link twice: beside the button (desktop), in the hero's top
|
||||
right corner (mobile). Only one of the two is ever displayed. */
|
||||
.cf-hero-corner { display: none; }
|
||||
@@ -370,7 +365,6 @@ templateEngineOverride: njk
|
||||
.cf-pill:active { transform: translateY(1px); }
|
||||
|
||||
.cf-top { top: 30px; }
|
||||
.cf-bottom { bottom: 30px; }
|
||||
|
||||
.cf-primary {
|
||||
background: linear-gradient(90deg, #019bfe 0%, #2e3fa0 100%);
|
||||
@@ -380,39 +374,16 @@ templateEngineOverride: njk
|
||||
.cf-primary:hover { filter: brightness(1.07); }
|
||||
.cf-primary:focus-visible { outline-color: #ffffff; }
|
||||
|
||||
.cf-secondary {
|
||||
background: #ffffff;
|
||||
color: #006cd7;
|
||||
border: 1px solid rgba(2, 55, 137, .15);
|
||||
--wf-capital-nav-logo-fill: #006cd7;
|
||||
}
|
||||
.cf-secondary:hover { box-shadow: 0 0 0 1px #80b6eb; }
|
||||
|
||||
.cf-pill svg { height: 30px; width: auto; display: block; transform: translateY(-3.5px); }
|
||||
|
||||
@media screen and (min-width: 960px) {
|
||||
.cf-pill { width: 252px; justify-content: center; }
|
||||
}
|
||||
|
||||
.cf-live-link {
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: calc(var(--sec-vwu) * 1.9);
|
||||
background: linear-gradient(90deg, #019bfe 0%, #64fdff 58%, #c8feff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
.cf-live-link:focus-visible { outline: 2px solid #019bfe; outline-offset: 2px; }
|
||||
|
||||
.cf-pill,
|
||||
.cf-live-link,
|
||||
.cf-hero-invest-link,
|
||||
.cf-cta-link,
|
||||
.cf .text-container a.gradient-text { transition: none; }
|
||||
.cf-live-link:hover,
|
||||
.cf-hero-invest-link:hover,
|
||||
.cf-cta-link:hover,
|
||||
.cf .text-container a.gradient-text:hover { filter: brightness(1.12); }
|
||||
|
||||
@media screen and (min-width: 960px) {
|
||||
@@ -599,10 +570,8 @@ templateEngineOverride: njk
|
||||
.cf-hero h1,
|
||||
.cf-hero .lead,
|
||||
.cf-hero .cf-stats,
|
||||
.cf-hero .cf-live-link,
|
||||
.cf-close h1,
|
||||
.cf-close .cf-close-call,
|
||||
.cf-close .cf-live-link {
|
||||
.cf-close .cf-close-call {
|
||||
padding-left: var(--cf-text-inset);
|
||||
padding-right: var(--cf-text-inset);
|
||||
}
|
||||
@@ -653,8 +622,7 @@ templateEngineOverride: njk
|
||||
.cf-close .cf-hero-text { display: contents; }
|
||||
.cf-hero h1,
|
||||
.cf-hero .lead,
|
||||
.cf-hero .cf-stats,
|
||||
.cf-hero .cf-live-link { position: relative; z-index: 4; }
|
||||
.cf-hero .cf-stats { position: relative; z-index: 4; }
|
||||
.cf-hero h1 { font-size: calc(var(--sec-vwu) * 9.7); }
|
||||
.cf-hero .lead { font-size: calc(var(--sec-vwu) * 3.55); max-width: none; margin-top: calc(var(--sec-vhu) * 2); }
|
||||
.cf-close .area { padding: calc(var(--cf-top) + var(--sec-vhu) * 14) var(--cf-gutter) 0; }
|
||||
@@ -664,8 +632,7 @@ templateEngineOverride: njk
|
||||
}
|
||||
/* centred like the home page, the two heading lines set apart */
|
||||
.cf-close h1,
|
||||
.cf-close .cf-close-call,
|
||||
.cf-close .cf-live-link { text-align: center; }
|
||||
.cf-close .cf-close-call { text-align: center; }
|
||||
/* the heading rides up with the arc; nothing below it moves */
|
||||
.cf-close h1 { font-size: calc(var(--sec-vwu) * 8.7); font-weight: 700; position: relative; top: -32px; }
|
||||
.cf-close-l1 { font-size: calc(var(--sec-vwu) * 11.745); }
|
||||
@@ -684,12 +651,10 @@ templateEngineOverride: njk
|
||||
padding: calc(var(--sec-vhu) * 2.5) calc(var(--sec-vwu) * 5);
|
||||
}
|
||||
.cf-close-offer p { font-size: calc(var(--sec-vwu) * 3.6); }
|
||||
.cf-close .cf-live-link { display: block; font-size: calc(var(--sec-vwu) * 5); margin-top: calc(var(--sec-vhu) * 2.5); top: 0; }
|
||||
.cf-stats { top: 0; gap: calc(var(--sec-vwu) * 8); margin-top: calc(var(--sec-vhu) * 3); }
|
||||
.cf-stat img { width: calc(var(--sec-vwu) * 8); }
|
||||
.cf-stat b { font-size: calc(var(--sec-vwu) * 6.5); }
|
||||
.cf-stat span { font-size: calc(var(--sec-vwu) * 3.4); }
|
||||
.cf-hero .cf-live-link { margin-top: calc(var(--sec-vhu) * 2); top: 0; font-size: calc(var(--sec-vwu) * 5); }
|
||||
/* the pill sits on the bottom edge and rides with the chrome:
|
||||
dvh tracks the visible bottom, svh the box the area is sized from */
|
||||
.cf-hero .cf-hero-cta,
|
||||
@@ -702,17 +667,16 @@ templateEngineOverride: njk
|
||||
}
|
||||
/* over the phone and the gradient covering it */
|
||||
.cf-hero .cf-hero-cta { z-index: 5; }
|
||||
.cf-hero-cta .cf-pill { width: 100%; height: 48px; font-size: 16px; }
|
||||
.cf-hero-cta .cf-pill { width: 100%; height: 48px; font-size: 16px; gap: 9px; }
|
||||
.cf-hero-cta .cf-pill svg { height: 30px; transform: translateY(-3.5px); }
|
||||
/* one link, two placements: the top right corner of the hero, and
|
||||
its own button-sized target above the pill on the closing section */
|
||||
.cf-hero-invest-link {
|
||||
.cf-cta-link {
|
||||
height: 48px;
|
||||
font-size: calc(var(--sec-vwu) * 4.6);
|
||||
gap: calc(var(--sec-vwu) * 1.9);
|
||||
}
|
||||
.cf-hero-invest-link svg { height: calc(var(--sec-vwu) * 6.5); transform: translateY(calc(var(--sec-vwu) * -0.7)); }
|
||||
.cf-close .cf-hero-invest-link { justify-content: center; }
|
||||
.cf-hero .cf-hero-cta .cf-hero-invest-link { display: none; }
|
||||
.cf-close .cf-cta-link { justify-content: center; }
|
||||
.cf-hero .cf-hero-cta .cf-cta-link { display: none; }
|
||||
/* a child of the section, so its reference is the section's top
|
||||
edge, which the band raises by --cf-band-shift, as with the arc.
|
||||
z-index clears .area, which is 11 and covers this corner. */
|
||||
@@ -752,9 +716,7 @@ templateEngineOverride: njk
|
||||
}
|
||||
|
||||
.cf-pill { font-size: 16px; }
|
||||
.cf-bottom { top: calc(5px + var(--cf-nav-shift)); right: 16px; bottom: auto; padding: 0 18px; }
|
||||
.cf-top { top: auto; left: 16px; right: 16px; bottom: var(--cf-cta-bottom); height: 48px; justify-content: center; }
|
||||
.cf-live-link { font-size: calc(var(--sec-vwu) * 4.2); }
|
||||
.cf .text-container a.gradient-text { font-weight: 400; }
|
||||
}
|
||||
|
||||
@@ -794,11 +756,9 @@ templateEngineOverride: njk
|
||||
.cf-hero h1 { font-size: calc(var(--sec-vwu) * 9.3); }
|
||||
}
|
||||
|
||||
/* narrow phones: keep the corner link and the pill clear of the logo */
|
||||
/* narrow phones: keep the corner link clear of the logo */
|
||||
@media screen and (max-width: 389px) {
|
||||
header#navbar > a.logo img { height: 24px; }
|
||||
.cf-bottom { font-size: 12px; padding: 0 12px; height: 40px; }
|
||||
.cf-bottom svg { height: 22px; transform: translateY(-2.5px); }
|
||||
.cf-hero-corner { height: 40px; }
|
||||
.cf-tag .v { font-size: 2.96cqh; line-height: 1.4; }
|
||||
}
|
||||
@@ -986,10 +946,10 @@ templateEngineOverride: njk
|
||||
<h1>The first and the only messaging network without any user IDs</h1>
|
||||
<p class="lead">SimpleX Chat is building a messaging network unlike every major platform — without phone numbers, usernames, emails, or any user identifiers.</p>
|
||||
<div class="cf-hero-cta">
|
||||
<a class="cf-pill cf-primary" id="cf-hero-request" href="#request">Request our Pitch deck</a>
|
||||
<a class="cf-hero-invest-link" id="cf-hero-invest" href="https://wefunder.com/simplex.chat?utm_source=landing" target="_blank" rel="noopener" aria-label="Invest on Wefunder">
|
||||
<a class="cf-pill cf-primary" id="cf-hero-invest" href="https://wefunder.com/simplex.chat?utm_source=landing" target="_blank" rel="noopener" aria-label="Invest on Wefunder">
|
||||
Invest on {{ wfLogo() }}
|
||||
</a>
|
||||
<a class="cf-cta-link" id="cf-hero-subscribe" href="#request">Subscribe for updates</a>
|
||||
</div>
|
||||
<div class="cf-stats">
|
||||
<div class="cf-stat">
|
||||
@@ -1001,15 +961,12 @@ templateEngineOverride: njk
|
||||
<div><b>480K</b><span>Monthly users</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="cf-live-link" href="/livestream/">Join the livestream and Q&A on Sep 15</a>
|
||||
</div>
|
||||
<img class="cf-phone" src="/img/crowdfunding/phone.png" alt="">
|
||||
<img class="cf-mask" src="/img/crowdfunding/phone-mask.png" alt="">
|
||||
<div class="cf-hero-fade"></div>
|
||||
</div>
|
||||
<a class="cf-hero-invest-link cf-hero-corner" href="https://wefunder.com/simplex.chat?utm_source=landing" target="_blank" rel="noopener" aria-label="Invest on Wefunder">
|
||||
Invest on {{ wfLogo() }}
|
||||
</a>
|
||||
<a class="cf-cta-link cf-hero-corner" href="#request">Subscribe for updates</a>
|
||||
</section>
|
||||
|
||||
<!-- 1 · TRACTION -->
|
||||
@@ -1118,12 +1075,11 @@ templateEngineOverride: njk
|
||||
<h1><span class="cf-close-l1">Get a stake</span><br><span class="cf-close-l2">in SimpleX Chat</span></h1>
|
||||
<p class="cf-close-call">We are building a network that people own.<br>We invite you to invest and become part of it.</p>
|
||||
<div class="cf-hero-cta">
|
||||
<a class="cf-pill cf-primary" href="#request">Request our Pitch deck</a>
|
||||
<a class="cf-hero-invest-link" href="https://wefunder.com/simplex.chat?utm_source=landing" target="_blank" rel="noopener" aria-label="Invest on Wefunder">
|
||||
<a class="cf-pill cf-primary" href="https://wefunder.com/simplex.chat?utm_source=landing" target="_blank" rel="noopener" aria-label="Invest on Wefunder">
|
||||
Invest on {{ wfLogo() }}
|
||||
</a>
|
||||
<a class="cf-cta-link" href="#request">Subscribe for updates</a>
|
||||
</div>
|
||||
<a class="cf-live-link" href="/livestream/">Join the livestream and Q&A on Sep 15</a>
|
||||
</div>
|
||||
<div class="cf-close-offer">
|
||||
<p>Invest $500+ by September 22 and get a SimpleX public name for your channel or business for 7 years, ahead of public launch.</p>
|
||||
@@ -1146,8 +1102,7 @@ templateEngineOverride: njk
|
||||
</div>
|
||||
|
||||
<div class="cf-ctas">
|
||||
<a class="cf-pill cf-top cf-primary" id="cf-cta-request" href="#request">Request our Pitch deck</a>
|
||||
<a class="cf-pill cf-bottom cf-secondary" id="cf-cta-invest" href="https://wefunder.com/simplex.chat?utm_source=landing" target="_blank" rel="noopener" aria-label="Invest on Wefunder">
|
||||
<a class="cf-pill cf-top cf-primary" id="cf-cta-invest" href="https://wefunder.com/simplex.chat?utm_source=landing" target="_blank" rel="noopener" aria-label="Invest on Wefunder">
|
||||
Invest on {{ wfLogo() }}
|
||||
</a>
|
||||
</div>
|
||||
@@ -1195,16 +1150,6 @@ templateEngineOverride: njk
|
||||
window.addEventListener('resize', update);
|
||||
update();
|
||||
})();
|
||||
|
||||
(function cfFlip() {
|
||||
if (new URLSearchParams(location.search).get('action') !== 'invest') return;
|
||||
var req = document.getElementById('cf-cta-request');
|
||||
var inv = document.getElementById('cf-cta-invest');
|
||||
req.classList.remove('cf-top', 'cf-primary');
|
||||
req.classList.add('cf-bottom', 'cf-secondary');
|
||||
inv.classList.remove('cf-bottom', 'cf-secondary');
|
||||
inv.classList.add('cf-top', 'cf-primary');
|
||||
})();
|
||||
</script>
|
||||
|
||||
<div class="cf-modal" id="ai-privacy">
|
||||
@@ -1242,7 +1187,7 @@ templateEngineOverride: njk
|
||||
<div class="cf-modal-panel" role="dialog" aria-modal="true" aria-labelledby="request-title">
|
||||
<a class="cf-modal-close" href="#!" aria-label="Close"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 2 L22 22 M22 2 L2 22"/></svg></a>
|
||||
<div class="cf-modal-text">
|
||||
<h2 id="request-title">Where to send the deck</h2>
|
||||
<h2 id="request-title">Subscribe for SimpleX Chat updates</h2>
|
||||
<p>We will send the deck and updates about the crowdfunding.</p>
|
||||
<form class="cf-form" action="https://chat.us2.list-manage.com/subscribe/post?u=ddd892b258ae36e5438e6d4e1&id=de405d59d2&f_id=001ef8e3f0&legacy_form=1" method="post" target="_blank">
|
||||
<input type="text" name="FNAME" placeholder="Name (optional)" aria-label="Name, optional">
|
||||
|
||||
@@ -63,7 +63,7 @@ main .section-bg {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.livestream .text-container .event-utc,
|
||||
.livestream .text-container .event-date,
|
||||
.livestream .text-container .event-join {
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 300;
|
||||
@@ -73,7 +73,7 @@ main .section-bg {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.dark .livestream .text-container .event-utc,
|
||||
.dark .livestream .text-container .event-date,
|
||||
.dark .livestream .text-container .event-join {
|
||||
color: #ffffff;
|
||||
}
|
||||
@@ -86,14 +86,6 @@ main .section-bg {
|
||||
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;
|
||||
@@ -114,12 +106,7 @@ main .section-bg {
|
||||
margin-top: calc(var(--block-gap) * 0.5);
|
||||
}
|
||||
|
||||
.livestream .text-container .invest-link {
|
||||
max-width: none;
|
||||
font-size: calc(var(--sec-vwu) * 1.35);
|
||||
}
|
||||
|
||||
.livestream .text-container .register-btn {
|
||||
.livestream .text-container .invest-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -134,7 +121,7 @@ main .section-bg {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dark .livestream .text-container .register-btn {
|
||||
.dark .livestream .text-container .invest-btn {
|
||||
background: #70f0f9;
|
||||
color: #000000;
|
||||
}
|
||||
@@ -175,7 +162,7 @@ main .section-bg {
|
||||
max-width: calc(var(--sec-vwu) * 80);
|
||||
}
|
||||
|
||||
.livestream .text-container .event-utc,
|
||||
.livestream .text-container .event-date,
|
||||
.livestream .text-container .event-join {
|
||||
font-size: calc(var(--sec-vwu) * 3.9);
|
||||
max-width: calc(var(--sec-vwu) * 80);
|
||||
@@ -185,204 +172,8 @@ main .section-bg {
|
||||
font-size: calc(var(--sec-vwu) * 3.3);
|
||||
}
|
||||
|
||||
.livestream .text-container .register-btn {
|
||||
.livestream .text-container .invest-btn {
|
||||
padding: calc(var(--sec-vhu) * 1.4) calc(var(--sec-vwu) * 5);
|
||||
font-size: calc(var(--sec-vwu) * 3.7);
|
||||
}
|
||||
|
||||
.livestream .text-container .invest-link {
|
||||
font-size: calc(var(--sec-vwu) * 3.4);
|
||||
}
|
||||
}
|
||||
|
||||
.register-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 60000;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background: rgba(3, 12, 40, 0.6);
|
||||
}
|
||||
|
||||
.register-overlay.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 580px;
|
||||
padding: 48px 44px 44px;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.dark .register-card {
|
||||
background: #071c46;
|
||||
}
|
||||
|
||||
.register-card h2 {
|
||||
font-family: "GT-Walsheim", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
line-height: 1.2;
|
||||
color: #023789;
|
||||
}
|
||||
|
||||
.dark .register-card h2 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.register-card p {
|
||||
margin-top: 14px;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #3f484b;
|
||||
}
|
||||
|
||||
.dark .register-card p {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.register-card form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.register-card input[type="email"] {
|
||||
flex: 1;
|
||||
min-width: 260px;
|
||||
height: 52px;
|
||||
padding: 0 22px;
|
||||
border: 1px solid #0053d0;
|
||||
border-radius: 9999px;
|
||||
background: transparent;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-size: 16px;
|
||||
color: #0d0e12;
|
||||
}
|
||||
|
||||
.dark .register-card input[type="email"] {
|
||||
border-color: #70f0f9;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.register-card .bot-field {
|
||||
position: absolute;
|
||||
left: -5000px;
|
||||
}
|
||||
|
||||
.register-card input[type="submit"] {
|
||||
height: 52px;
|
||||
min-width: 164px;
|
||||
padding: 0 34px;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
background: #0053d0;
|
||||
font-family: "Manrope", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dark .register-card input[type="submit"] {
|
||||
background: #70f0f9;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.register-card .register-note {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #6b7478;
|
||||
}
|
||||
|
||||
.dark .register-card .register-note {
|
||||
color: #9fb2c9;
|
||||
}
|
||||
|
||||
.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;
|
||||
right: 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.register-card .close-register svg {
|
||||
width: 13px;
|
||||
height: auto;
|
||||
fill: #023789;
|
||||
}
|
||||
|
||||
.dark .register-card .close-register svg {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
.mc-frame {
|
||||
position: absolute;
|
||||
left: -5000px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.mc-frame-card {
|
||||
max-width: 640px;
|
||||
padding: 44px 0 0;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.dark .mc-frame-card {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.mc-frame-card .close-register svg,
|
||||
.dark .mc-frame-card .close-register svg {
|
||||
fill: #023789;
|
||||
}
|
||||
|
||||
#subscribe-failed.open .mc-frame {
|
||||
position: static;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: min(520px, calc(100svh - 140px));
|
||||
}
|
||||
|
||||
@@ -1,91 +1,3 @@
|
||||
function showLocalTime() {
|
||||
const utc = document.querySelector('.event-utc');
|
||||
if (!utc) return;
|
||||
|
||||
const start = new Date(utc.dateTime);
|
||||
if (isNaN(start.getTime())) return;
|
||||
|
||||
const format = new Intl.DateTimeFormat('en-US', {
|
||||
weekday: 'long',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
timeZoneName: 'short'
|
||||
});
|
||||
|
||||
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 setupRegisterOverlay() {
|
||||
const overlay = document.getElementById('register');
|
||||
const openBtn = document.querySelector('.register-btn');
|
||||
if (!overlay || !openBtn) return;
|
||||
|
||||
const email = overlay.querySelector('input[type="email"]');
|
||||
const form = overlay.querySelector('form');
|
||||
|
||||
function openOverlay(e) {
|
||||
e.preventDefault();
|
||||
overlay.classList.add('open');
|
||||
document.documentElement.classList.add('lock-scroll');
|
||||
email.focus();
|
||||
}
|
||||
|
||||
function closeOverlay() {
|
||||
overlay.classList.remove('open');
|
||||
document.documentElement.classList.remove('lock-scroll');
|
||||
}
|
||||
|
||||
openBtn.addEventListener('click', openOverlay);
|
||||
form.addEventListener('submit', () => {
|
||||
const submit = form.querySelector('[type="submit"]');
|
||||
if (!submit) return;
|
||||
setTimeout(() => {
|
||||
submit.disabled = true;
|
||||
submit.value = 'Submitting...';
|
||||
}, 0);
|
||||
});
|
||||
overlay.addEventListener('click', (e) => {
|
||||
if (e.target === overlay || e.target.closest('.close-register')) closeOverlay();
|
||||
});
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && overlay.classList.contains('open')) closeOverlay();
|
||||
});
|
||||
}
|
||||
|
||||
function trackNavColor() {
|
||||
const footer = document.querySelector('.footer.page');
|
||||
const mobileHeader = document.getElementById('mobile-header');
|
||||
@@ -103,7 +15,4 @@ function trackNavColor() {
|
||||
observer.observe(footer);
|
||||
}
|
||||
|
||||
showLocalTime();
|
||||
startCountdown();
|
||||
setupRegisterOverlay();
|
||||
trackNavColor();
|
||||
|
||||
+5
-107
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "SimpleX Chat: Foundation for the Future - livestream and Q&A"
|
||||
description: "Livestream and Q&A for SimpleX Chat equity crowdfunding investors, on Tuesday, September 15, 2026 at 5:00 PM UTC. Register for event updates."
|
||||
title: "SimpleX Chat: Foundation for the Future - livestream recording"
|
||||
description: "Recording of the livestream and Q&A about SimpleX Chat roadmap and crowdfunding, September 15, 2026."
|
||||
permalink: /livestream/
|
||||
templateEngineOverride: njk
|
||||
---
|
||||
@@ -73,13 +73,12 @@ templateEngineOverride: njk
|
||||
<p class="subtitle">Livestream and Q&A about SimpleX Chat roadmap and crowdfunding</p>
|
||||
|
||||
<div class="event-time">
|
||||
<time class="event-utc" datetime="2026-09-15T17:00:00Z">Tuesday, September 15, 2026 at 5:00 PM UTC</time>
|
||||
<p class="event-join">Join us <span class="join-count" hidden></span><span class="join-where"><a href="https://x.com/i/broadcasts/1pKdRDneNyoJW" target="_blank" rel="noopener">on X</a>, <a href="https://www.youtube.com/watch?v=vIwgi39VMFA" target="_blank" rel="noopener">YouTube</a> or <a href="https://stream.simplex.chat" target="_blank" rel="noopener">our page</a></span></p>
|
||||
<p class="event-date">Recorded on September 15, 2026</p>
|
||||
<p class="event-join">Watch <a href="https://x.com/i/broadcasts/1pKdRDneNyoJW" target="_blank" rel="noopener">on X</a> or <a href="https://www.youtube.com/watch?v=vIwgi39VMFA" target="_blank" rel="noopener">YouTube</a></p>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<a class="register-btn" href="https://use.simplex.chat/livestream" target="_blank" rel="noopener">Get event updates</a>
|
||||
<a class="invest-link gradient-text" href="/crowdfunding/">Get a stake in SimpleX Chat</a>
|
||||
<a class="invest-btn" href="/crowdfunding/">Get a stake in SimpleX Chat</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,108 +88,7 @@ templateEngineOverride: njk
|
||||
{% include "footer.html" %}
|
||||
</div>
|
||||
|
||||
<div id="register" class="register-overlay">
|
||||
<div class="register-card" role="dialog" aria-labelledby="register-title">
|
||||
<h2 id="register-title">Register for event updates and Q&A</h2>
|
||||
<p>We will send you the updates about the event, and you will be able to ask any questions.</p>
|
||||
|
||||
<form action="https://chat.us2.list-manage.com/subscribe/post?u=ddd892b258ae36e5438e6d4e1&id=6f73f92ffa&f_id=001df8e3f0&legacy_form=1" method="post" target="_blank">
|
||||
<input type="email" name="EMAIL" placeholder="Enter your email address" aria-label="Email address" required>
|
||||
<input type="hidden" name="PAGE" value="livestream">
|
||||
<input type="hidden" name="SOURCE" value="livestream_page">
|
||||
<input type="hidden" name="CAMPAIGN" value="">
|
||||
<span aria-hidden="true" class="bot-field">
|
||||
<input type="text" name="b_ddd892b258ae36e5438e6d4e1_6f73f92ffa" tabindex="-1" value="">
|
||||
</span>
|
||||
<input type="submit" name="subscribe" value="Register">
|
||||
</form>
|
||||
|
||||
<a class="channel-link" href="https://smp11.simplex.im/a#JxGcOA1_QhlmVFzYYabloMbvMZk5Y9d9iS3ITDnhzYo" target="_blank" rel="noopener">Or connect to our team via SimpleX Chat<svg viewBox="0 0 100 100" aria-hidden="true"><path d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>
|
||||
|
||||
<p class="register-note">We use Mailchimp to deliver updates via email</p>
|
||||
|
||||
<button type="button" class="close-register" aria-label="Close">
|
||||
<svg viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.7973 11.5525L7.59762 6.49833L12.7947 1.44675C13.055 1.19371 13.0658 0.771991 12.8188 0.505331C12.5718 0.238674 12.1602 0.227644 11.8999 0.480681L6.65343 5.58028L1.09979 0.182228C0.839522 -0.070157 0.427909 -0.059127 0.18094 0.207531C-0.0660305 0.474191 -0.0552645 0.895911 0.205003 1.14894L5.70862 6.49833L0.20247 11.851C-0.0577975 12.104 -0.0685635 12.5257 0.178407 12.7924C0.306324 12.9306 0.477936 13 0.650181 13C0.811033 13 0.971873 12.9397 1.09726 12.817L6.65343 7.41639L11.9025 12.5186C12.0285 12.6406 12.1893 12.7015 12.3495 12.7015C12.5218 12.7015 12.6934 12.6321 12.8213 12.4939C13.0689 12.2273 13.0582 11.8062 12.7973 11.5525Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="subscribed" class="register-overlay">
|
||||
<div class="register-card" role="dialog" aria-labelledby="subscribed-title">
|
||||
<h2 id="subscribed-title">Thank you for subscribing</h2>
|
||||
<p>Please confirm your subscription by clicking the link in the email.</p>
|
||||
<button type="button" class="close-register" aria-label="Close">
|
||||
<svg viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.7973 11.5525L7.59762 6.49833L12.7947 1.44675C13.055 1.19371 13.0658 0.771991 12.8188 0.505331C12.5718 0.238674 12.1602 0.227644 11.8999 0.480681L6.65343 5.58028L1.09979 0.182228C0.839522 -0.070157 0.427909 -0.059127 0.18094 0.207531C-0.0660305 0.474191 -0.0552645 0.895911 0.205003 1.14894L5.70862 6.49833L0.20247 11.851C-0.0577975 12.104 -0.0685635 12.5257 0.178407 12.7924C0.306324 12.9306 0.477936 13 0.650181 13C0.811033 13 0.971873 12.9397 1.09726 12.817L6.65343 7.41639L11.9025 12.5186C12.0285 12.6406 12.1893 12.7015 12.3495 12.7015C12.5218 12.7015 12.6934 12.6321 12.8213 12.4939C13.0689 12.2273 13.0582 11.8062 12.7973 11.5525Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="already-subscribed" class="register-overlay">
|
||||
<div class="register-card" role="dialog" aria-labelledby="already-subscribed-title">
|
||||
<h2 id="already-subscribed-title">You are already subscribed</h2>
|
||||
<p>This address is on our list — you will receive the updates about the event.</p>
|
||||
<button type="button" class="close-register" aria-label="Close">
|
||||
<svg viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.7973 11.5525L7.59762 6.49833L12.7947 1.44675C13.055 1.19371 13.0658 0.771991 12.8188 0.505331C12.5718 0.238674 12.1602 0.227644 11.8999 0.480681L6.65343 5.58028L1.09979 0.182228C0.839522 -0.070157 0.427909 -0.059127 0.18094 0.207531C-0.0660305 0.474191 -0.0552645 0.895911 0.205003 1.14894L5.70862 6.49833L0.20247 11.851C-0.0577975 12.104 -0.0685635 12.5257 0.178407 12.7924C0.306324 12.9306 0.477936 13 0.650181 13C0.811033 13 0.971873 12.9397 1.09726 12.817L6.65343 7.41639L11.9025 12.5186C12.0285 12.6406 12.1893 12.7015 12.3495 12.7015C12.5218 12.7015 12.6934 12.6321 12.8213 12.4939C13.0689 12.2273 13.0582 11.8062 12.7973 11.5525Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="subscribe-failed" class="register-overlay">
|
||||
<div class="register-card mc-frame-card mc-frame-host" role="dialog" aria-label="Subscription result">
|
||||
<button type="button" class="close-register" aria-label="Close">
|
||||
<svg viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.7973 11.5525L7.59762 6.49833L12.7947 1.44675C13.055 1.19371 13.0658 0.771991 12.8188 0.505331C12.5718 0.238674 12.1602 0.227644 11.8999 0.480681L6.65343 5.58028L1.09979 0.182228C0.839522 -0.070157 0.427909 -0.059127 0.18094 0.207531C-0.0660305 0.474191 -0.0552645 0.895911 0.205003 1.14894L5.70862 6.49833L0.20247 11.851C-0.0577975 12.104 -0.0685635 12.5257 0.178407 12.7924C0.306324 12.9306 0.477936 13 0.650181 13C0.811033 13 0.971873 12.9397 1.09726 12.817L6.65343 7.41639L11.9025 12.5186C12.0285 12.6406 12.1893 12.7015 12.3495 12.7015C12.5218 12.7015 12.6934 12.6321 12.8213 12.4939C13.0689 12.2273 13.0582 11.8062 12.7973 11.5525Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/livestream.js"></script>
|
||||
<script>{% include "mc-submit.js" %}</script>
|
||||
|
||||
<script>
|
||||
(function livestreamSubscribe() {
|
||||
var register = document.getElementById('register');
|
||||
var byStatus = {
|
||||
subscribed: document.getElementById('subscribed'),
|
||||
confirmed: document.getElementById('already-subscribed'),
|
||||
failed: document.getElementById('subscribe-failed')
|
||||
};
|
||||
var results = Object.keys(byStatus).map(function (k) { return byStatus[k]; });
|
||||
|
||||
function close(overlay) {
|
||||
overlay.classList.remove('open');
|
||||
document.documentElement.classList.remove('lock-scroll');
|
||||
}
|
||||
|
||||
document.addEventListener('mc:result', function (e) {
|
||||
var submit = register.querySelector('[type="submit"]');
|
||||
if (submit) {
|
||||
submit.disabled = false;
|
||||
submit.value = 'Register';
|
||||
}
|
||||
register.classList.remove('open');
|
||||
(byStatus[e.detail.status] || byStatus.failed).classList.add('open');
|
||||
document.documentElement.classList.add('lock-scroll');
|
||||
});
|
||||
|
||||
results.forEach(function (overlay) {
|
||||
overlay.addEventListener('click', function (e) {
|
||||
if (e.target === overlay || e.target.closest('.close-register')) close(overlay);
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') results.forEach(close);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user