eleven / messenger Public

home: the invite card — 🎉 ask your socials (truly-empty state only) (#1136)

The empty line becomes 'None (yet). Creating is invite-only for now.'
and a quiet card beneath the main one carries the pitch — veiled through
boot, fading in after its host.

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Paul Campbell 3 months ago 86a8723bd7a9356613fce9a95788ffc1bcf42a7a parent 9673d85

2 files changed, +22 −1

home/web/pages/index.html +18 −0
home/web/static/home.js +4 −1

diff --git a/home/web/pages/index.html b/home/web/pages/index.html

index 6253f92..5ffcd69 100644

--- a/home/web/pages/index.html

+++ b/home/web/pages/index.html

@@ -113,6 +113,19 @@

#vault-sealed { margin-top: 6px; }

#vault-sealed button { width: 100%; }

/* The reassurance sits OUTSIDE the card, under it. */

+ /* The invite card is a guest, not the host: veiled with the rest during

+ boot/compose, and its fade TRAILS the main card's reveal by a beat. */

+ html.booting .invite-card, html.composing .invite-card { opacity: 0; }

+ .invite-card {

+ transition: opacity .4s ease .35s;

+ background: var(--panel); border: 1px solid var(--border);

+ border-radius: 18px; padding: 16px 20px; width: 100%; max-width: 420px;

+ box-shadow: 0 8px 24px var(--shadow); margin: 14px auto 0;

+ text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5;

+ }

+ .invite-card p { margin: 0; }

+ body:has(#vault.hidden) .invite-card { display: none; }

+ .invite-card.hidden { display: none; }

.cookie-ask { text-align: center; margin: 8px 0 0; }

.cookie-ask button {

background: none; border: none; padding: 4px 8px; cursor: pointer;

@@ -940,6 +953,11 @@

<p class="reassure" id="reassure">No signup required, we don't store your email

or any personal details. We can't spam what we don't have.</p>

<p class="cookie-ask"><button id="cookie-ask" type="button">Where's the cookie banner?</button></p>

+<!-- The invite-only pitch: its own quiet card below the main one, shown only

+ for a signed-in, truly-empty account (renderSpaces toggles it). -->

+<aside id="invite-note" class="invite-card hidden">

+ <p>🎉 Need an invite? Ask your socials!</p>

+</aside>

<h2 id="cookie-title">There isn't one.</h2>

<p>There are no cookies. We're not tracking you. We don't want your data.</p>

diff --git a/home/web/static/home.js b/home/web/static/home.js

index b800521..475dac0 100644

--- a/home/web/static/home.js

+++ b/home/web/static/home.js

@@ -848,10 +848,13 @@ function showVault() {

search.classList.toggle("hidden", active.length < 4);

const query = search.classList.contains("hidden") ? "" : search.value.trim();

+ // The invite-only card belongs only to the truly-empty state — someone

+ // with archived spaces already has Eleven.

+ $("invite-note").classList.toggle("hidden", !!(active.length || archived.length));

if (!active.length) {

box.append(emptyLine(archived.length

? "All your spaces are archived — open the archive to bring one back."

- : "No spaces saved yet — save one from its chat page and it'll appear here."));

+ : "None (yet). Creating is invite-only for now."));

} else {

const servers = query ? filterServers(active, query) : active;

if (!servers.length) {