0872b0b3c9
The messenger page's mockup — contact list, bob thread with real bubbles, the window chrome with the "1/1 relay" status pill — is the single most product-telling asset on the site, and it was buried a click behind the Messenger link. Pull it into the home right after the hero so the overview actually SHOWS the product instead of just describing it, with a one-line caption that credits the live desktop build and flags the browser webapp as in progress. Caption, not status-banner, because the home is now the main pitch rather than a preview page. The messenger URL still carries the preview content and the roadmap until the browser webapp lands.
258 lines
13 KiB
HTML
258 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>hermes.x — message anyone by their on-chain name</title>
|
|
<meta name="description" content="Hermes: end-to-end encrypted messaging where your Bitcoin Cash name is your identity. NIP-17 sealed DMs over Nostr. No email, no phone number, no company account.">
|
|
<link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
|
|
<link rel="mask-icon" href="assets/favicon.svg" color="#38BDF8">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:site_name" content="hermes.x">
|
|
<meta property="og:title" content="hermes.x — message anyone by their on-chain name">
|
|
<meta property="og:description" content="End-to-end encrypted DMs over Nostr, addressed by your on-chain registered name. No email, no phone, no server that can delete your account.">
|
|
<meta property="og:url" content="https://hermes.x/">
|
|
<meta property="og:image" content="https://hermes.x/assets/mark.svg">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:title" content="hermes.x — message anyone by their on-chain name">
|
|
<meta name="twitter:description" content="Sealed-sender DMs over Nostr, addressed by on-chain registered name.">
|
|
<link rel="stylesheet" href="assets/shared.css">
|
|
<style>
|
|
/* mockup — a visual of the messenger UI, inlined on the home page so the
|
|
overview actually shows what the product is instead of only describing it */
|
|
.mockup{background:var(--panel);border:1px solid var(--line2);border-radius:16px;overflow:hidden;margin:2rem auto 1rem;max-width:860px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
|
|
.mockup .window-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--panel2);border-bottom:1px solid var(--line)}
|
|
.mockup .window-bar .dot{width:11px;height:11px;border-radius:50%;background:#444a56}
|
|
.mockup .window-bar .dot:nth-child(1){background:#ff5f57}
|
|
.mockup .window-bar .dot:nth-child(2){background:#febc2e}
|
|
.mockup .window-bar .dot:nth-child(3){background:#28c840}
|
|
.mockup .window-bar .title{color:var(--mut);font-size:12px;margin-left:10px}
|
|
.mockup .window-bar .status{margin-left:auto;font-size:11px;color:var(--ok);padding:2px 10px;border-radius:999px;background:rgba(79,209,165,.14)}
|
|
.mockup .window-bar .npub{color:var(--mut);font-size:11px;font-family:ui-monospace,monospace;margin-left:12px}
|
|
.mockup .npub b{color:var(--sky)}
|
|
.mockup .app{display:grid;grid-template-columns:220px 1fr;min-height:420px}
|
|
@media (max-width:620px){.mockup .app{grid-template-columns:1fr}.mockup .side{display:none}}
|
|
.mockup .side{background:var(--panel2);border-right:1px solid var(--line);display:flex;flex-direction:column}
|
|
.mockup .side-head{padding:10px 12px;display:flex;gap:6px;border-bottom:1px solid var(--line)}
|
|
.mockup .side-head input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:6px 9px;color:var(--mut);font-size:12px}
|
|
.mockup .side-head button{background:var(--sky);color:#06111a;border:none;padding:0 12px;border-radius:6px;font-weight:700;cursor:pointer}
|
|
.mockup .contact{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}
|
|
.mockup .contact.active{background:rgba(56,189,248,.08)}
|
|
.mockup .contact .avatar{width:34px;height:34px;border-radius:50%;background:#243040;display:grid;place-items:center;font-size:11px;color:var(--ink);font-weight:600}
|
|
.mockup .contact .meta{flex:1;min-width:0}
|
|
.mockup .contact .name{font-size:13px;color:var(--ink);font-weight:600}
|
|
.mockup .contact .last{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.mockup .contact .badge{background:var(--sky);color:#06111a;font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px}
|
|
.mockup .thread{display:flex;flex-direction:column;background:var(--bg)}
|
|
.mockup .thread-head{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
|
|
.mockup .thread-head .name{font-weight:600;font-size:13px}
|
|
.mockup .thread-head .pk{font-family:ui-monospace,monospace;font-size:10.5px;color:var(--mut)}
|
|
.mockup .thread-body{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
|
|
.mockup .bubble{max-width:70%;padding:7px 11px;border-radius:14px;font-size:13px;line-height:1.4}
|
|
.mockup .bubble.in{background:#1d2634;align-self:flex-start;border-bottom-left-radius:4px}
|
|
.mockup .bubble.out{background:#0d2a3a;align-self:flex-end;border-bottom-right-radius:4px;color:#d9ecfa}
|
|
.mockup .bubble .time{display:block;font-size:10px;color:var(--dim);margin-top:3px}
|
|
.mockup .compose{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line);background:var(--panel)}
|
|
.mockup .compose input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 11px;color:var(--mut);font-size:13px}
|
|
.mockup .compose button{background:var(--sky);color:#06111a;border:none;padding:0 18px;border-radius:8px;font-weight:600;cursor:pointer}
|
|
.mockup-caption{text-align:center;color:var(--dim);font-size:12px;margin-top:-.5rem;margin-bottom:1.5rem}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="topnav">
|
|
<a class="brand" href="./">
|
|
<img src="assets/mark.svg" alt="Hermes" width="22" height="22" style="display:block">
|
|
<span>Hermes<span class="x">.X</span></span>
|
|
</a>
|
|
<a href="messenger/">Messenger</a>
|
|
<a href="branding/">Branding</a>
|
|
<a href="https://theseus.x/" class="get">Get Theseus</a>
|
|
</nav>
|
|
|
|
<header class="hero">
|
|
<div class="mark" aria-hidden="true">
|
|
<img src="assets/mark.svg" alt="Hermes" width="120" height="120" style="display:block">
|
|
</div>
|
|
<h1>Message by name<span class="x">.</span></h1>
|
|
<p class="tag">End-to-end encrypted DMs over Nostr, addressed by your
|
|
on-chain registered name instead of a public-key string.
|
|
Your name owns your key. No email, no phone number, no company, no server
|
|
that can delete your account.</p>
|
|
<div class="cta">
|
|
<a class="btn primary" href="messenger/">Open Messenger</a>
|
|
<a class="btn ghost" href="https://theseus.x/">Get Theseus (desktop)</a>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="mockup" aria-label="Messenger UI preview">
|
|
<div class="window-bar">
|
|
<div class="dot"></div><div class="dot"></div><div class="dot"></div>
|
|
<div class="title">Hermes · hermes.x/messenger</div>
|
|
<span class="npub">your npub: <b>npub1ab…z89</b></span>
|
|
<span class="status">1/1 relay</span>
|
|
</div>
|
|
<div class="app">
|
|
<aside class="side">
|
|
<div class="side-head"><input value="Search contacts…" readonly><button>+</button></div>
|
|
<div class="contact">
|
|
<div class="avatar">AL</div>
|
|
<div class="meta"><div class="name">alice</div><div class="last">you: see you tomorrow</div></div>
|
|
</div>
|
|
<div class="contact active">
|
|
<div class="avatar">BO</div>
|
|
<div class="meta"><div class="name">bob</div><div class="last">great, send me the link</div></div>
|
|
<div class="badge">2</div>
|
|
</div>
|
|
<div class="contact">
|
|
<div class="avatar">TE</div>
|
|
<div class="meta"><div class="name">test</div><div class="last">chipnet is working</div></div>
|
|
</div>
|
|
</aside>
|
|
<section class="thread">
|
|
<div class="thread-head">
|
|
<div>
|
|
<div class="name">bob</div>
|
|
<div class="pk">023bf8c1…9ad2</div>
|
|
</div>
|
|
</div>
|
|
<div class="thread-body">
|
|
<div class="bubble in">hey, did you register your name yet?<span class="time">11:38</span></div>
|
|
<div class="bubble out">just now — bob.x is live<span class="time">11:40</span></div>
|
|
<div class="bubble in">nice. send me the hermes.x link<span class="time">11:42</span></div>
|
|
<div class="bubble out">https://hermes.x/messenger<span class="time">11:43</span></div>
|
|
<div class="bubble in">great, send me the link<span class="time">11:44</span></div>
|
|
</div>
|
|
<div class="compose">
|
|
<input value="Message…" readonly>
|
|
<button>Send</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<div class="mockup-caption">Inside Theseus today · browser-side webapp in progress</div>
|
|
|
|
<div class="wrap narrow">
|
|
|
|
<section class="plain">
|
|
<h2>What ships today</h2>
|
|
<p class="lede">Hermes is live inside the Theseus desktop browser. Web
|
|
messenger and Android follow.</p>
|
|
<div class="grid">
|
|
<div class="card">
|
|
<h3>Threaded chat <span class="src ok">live</span></h3>
|
|
<p>Contact list on the left (search + unread badges), selected
|
|
conversation on the right, inline reply. Enter to send.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Send by name <span class="src ok">live</span></h3>
|
|
<p>Type <code class="inline">alice.x</code>. The client resolves the
|
|
name on-chain, wraps NIP-17 to the recipient's Nostr key, publishes
|
|
to their declared relays. Sealed-sender — the relay never sees who
|
|
sent what to whom.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Address book <span class="src ok">live</span></h3>
|
|
<p>Local contact list — add names, nicknames, import vCards. Nothing
|
|
uploaded; the book is on your device.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>History on your device <span class="src ok">live</span></h3>
|
|
<p>Messages persist to disk per identity. Close and reopen the panel —
|
|
your threads are still there, unread marks included.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Web Messenger <span class="src next">next</span></h3>
|
|
<p><a href="messenger/">hermes.x/messenger</a> — browser-side messenger
|
|
for anyone without the desktop app. Same crypto, same identity.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Mobile (Ariadne) <span class="src plan">planned</span></h3>
|
|
<p>Inside the Ariadne Android app: same wallet seed, same Nostr identity,
|
|
zero extra onboarding.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>The one idea that makes this different</h2>
|
|
<p class="lede">Every existing Nostr client has the same wart: identity is
|
|
<code class="inline">npub1q8s7f3k…</code> gibberish. The human-name fix —
|
|
NIP-05 — resolves <code class="inline">alice@example.com</code> through a
|
|
DNS domain and a web server. That is exactly the ICANN + server chain
|
|
Bitcoin Cash names exist to escape.</p>
|
|
<div class="note">
|
|
<b>The Hermes pitch.</b><br>
|
|
<code class="inline">alice.x</code> publishes her Nostr pubkey as an
|
|
on-chain record. Her name certificate <i>is</i> her verified,
|
|
seizure-resistant identity. Message anyone by their
|
|
on-chain registered name — no phone number, no email, no ICANN,
|
|
no company, no server that can delete your account.
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>How it works</h2>
|
|
<ol class="steps">
|
|
<li><b>Your name owns your key.</b>
|
|
<span>Register any name on the chain, publish your Nostr pubkey as an
|
|
<code class="inline">np</code> record. The key is derived from the
|
|
same wallet seed as the name, so one seed backs both.</span></li>
|
|
<li><b>Find people by name.</b>
|
|
<span>Type <code class="inline">bob.x</code>. The client resolves
|
|
it against the chain, pulls <code class="inline">np</code>
|
|
(Nostr pubkey) and <code class="inline">nr</code> (preferred relays).
|
|
No directory server involved.</span></li>
|
|
<li><b>Send the message sealed.</b>
|
|
<span>NIP-17 gift-wrapped DMs — the relay sees neither sender nor
|
|
content, only that a wrap addressed to some pubkey exists. Route over
|
|
Tor to also hide your IP.</span></li>
|
|
<li><b>The name shows, not the pubkey.</b>
|
|
<span>Incoming messages reverse-resolve pubkey → name where possible,
|
|
so your chat list looks like a normal chat list — not a wall of hex.</span></li>
|
|
</ol>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Honest boundaries</h2>
|
|
<div class="grid">
|
|
<div class="card">
|
|
<h3>Messaging, not email</h3>
|
|
<p>No Gmail interop — by design. A separate anonymous-mailbox product
|
|
covers "sign up on services without leaking a real address".</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Metadata resistance is good, not perfect</h3>
|
|
<p>NIP-17 hides sender and content from relays. Relays still see the
|
|
recipient pubkey, timing, and your connection IP unless you route
|
|
over Tor.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Relays are Nostr's soft spot</h3>
|
|
<p>A message lives only while some relay keeps it. We run one relay +
|
|
write to a handful of public relays for reach and redundancy.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="plain" style="text-align:center">
|
|
<h2>Try it</h2>
|
|
<p class="lede" style="margin-left:auto;margin-right:auto">
|
|
Open the web messenger right here, or install Theseus for the full
|
|
experience (persistent history, sidebar entry, keyboard shortcut).</p>
|
|
<div class="cta">
|
|
<a class="btn primary" href="messenger/">Open Messenger</a>
|
|
<a class="btn ghost" href="https://theseus.x/">Get Theseus</a>
|
|
<a class="btn ghost" href="branding/">Brand kit</a>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<footer>
|
|
<div>hermes.x — a <a href="https://silentmode.st/">Silent Mode</a> project.</div>
|
|
<div class="fine">Named for the messenger of the gods. Ermis in modern Greek.</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|