amadan

eleven / ocho Public

home: use the real Eleven app icon on the landing (not an invented mark) (#321)

Replace the hand-rolled "11" CSS tile with the actual app icon (the purple
rounded tile + white double-slash). Each Go service embeds its own web/static,
so the messenger's icons aren't visible to the home binary — copy icon-192/512
into home/web/static and reference them for the brand mark, favicon, and
apple-touch-icon. CSP already allows img-src 'self'.

Also:
- Note the app-icon assets in CLAUDE.md Conventions so future work reuses them
  instead of inventing a substitute glyph.
- Swap the add-space placeholder off family.luan.chat (Paul's personal family
  domain) to a neutral example — it was showing on the public landing.
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Paul Campbell 82013dba3e938e4ad58a49f252a3bccce168e0ba parent fa936b4
4 files changed, +15 −9
  • CLAUDE.md +8 −0
  • home/web/pages/index.html +7 −9
  • home/web/static/icon-192.png binary
  • home/web/static/icon-512.png binary
diff --git a/CLAUDE.md b/CLAUDE.md
index d0ea95c..ce2c8f1 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -223,6 +223,14 @@ open with the note itself) carry the 🤖 on their first line.
- **Images** are downscaled in the browser before upload (`processImage`, max
2048px long edge) — there is no server-side image proxy (it only has
ciphertext). Re-encoding also strips EXIF/GPS.
+- 🤖 **The Eleven app icon already exists — use it, don't invent a mark.** The
+ logo is a purple rounded tile with the white double-slash "11". Canonical PNGs:
+ `web/static/icon-{180,192,512}.png` (the PWA/web icons) and the native icon
+ sets `ios/LChat/Assets.xcassets/AppIcon.appiconset/icon-1024.png` +
+ `ios/LChatMac/Assets.xcassets/AppIcon.appiconset/`. When a page needs the brand
+ mark or a favicon, reference/copy one of these — never hand-roll a substitute
+ glyph. (Each service embeds its *own* static dir, so the home server carries
+ its own copy at `home/web/static/icon-{192,512}.png`.)
- **Push notifications** suppress two cases: your *own* messages (server skips the
sender's subscriptions by token) and messages while the app is open (the page
writes a `lastActiveAt` heartbeat to IndexedDB that the SW checks — more
diff --git a/home/web/pages/index.html b/home/web/pages/index.html
index 75b89d6..4aa877f 100644
--- a/home/web/pages/index.html
+++ b/home/web/pages/index.html
@@ -6,18 +6,16 @@
<meta name="theme-color" content="#f6f7fb" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#15171c" media="(prefers-color-scheme: dark)">
<title>Sign in with Eleven</title>
+<link rel="icon" type="image/png" href="/static/icon-192.png">
+<link rel="apple-touch-icon" href="/static/icon-512.png">
<link rel="stylesheet" href="/static/home.css">
<style>
/* The landing is a single centered card: the Eleven mark, one button, and a
reassuring line. Your spaces appear only once you've signed in. */
.brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; }
- .brand-mark {
- width: 64px; height: 64px; border-radius: 18px;
- display: grid; place-items: center;
- background: var(--accent); color: var(--accent-ink);
- font-family: var(--font-display); font-weight: 800; font-size: 28px;
- letter-spacing: -0.03em;
- }
+ /* The real app icon (web/static/icon-*.png, copied into home's static). The
+ PNG is already a rounded superellipse; the radius just cleans the edge. */
+ .brand-mark { width: 64px; height: 64px; border-radius: 15px; display: block; }
.brand-word {
font-family: var(--font-display); font-weight: 800;
font-size: 26px; letter-spacing: -0.02em;
@@ -54,7 +52,7 @@
<body>
<main class="card">
<div class="brand">
- <div class="brand-mark" aria-hidden="true">11</div>
+ <img class="brand-mark" src="/static/icon-512.png" width="64" height="64" alt="Eleven" />
<div class="brand-word">Eleven</div>
</div>
@@ -90,7 +88,7 @@
<form class="addform" id="add-form">
<p class="addform-label">Or add a space you already have a link for:</p>
<input id="add-name" placeholder="Name" autocomplete="off">
- <input id="add-url" placeholder="https://family.luan.chat" autocomplete="off" required>
+ <input id="add-url" placeholder="https://your-space.example.com" autocomplete="off" required>
<button type="submit" class="secondary">Add</button>
</form>
<p class="status" id="vault-status"></p>
diff --git a/home/web/static/icon-192.png b/home/web/static/icon-192.png
new file mode 100644
index 0000000..3917fe1
Binary files /dev/null and b/home/web/static/icon-192.png differ
diff --git a/home/web/static/icon-512.png b/home/web/static/icon-512.png
new file mode 100644
index 0000000..bca266f
Binary files /dev/null and b/home/web/static/icon-512.png differ