From 76ba8dcbb4ca64bd27848d4feefe89d301272783 Mon Sep 17 00:00:00 2001 From: artheru Date: Wed, 10 Jun 2026 06:31:57 +0800 Subject: [PATCH] gatehouse: split join page with value prop (0.42.0) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - replace the lonely floating login form with a two-column 'Join the tavern' page - left: pitch — headline, three benefit rows (hire/publish/deliver) with icon tiles, cross-app SSO note, live stats - right: the auth board (login/signup) in a clean static card - responsive: stacks form-first on mobile (<=860px) - verified live on desktop + mobile --- index.html | 2 +- src/Scene2D.jsx | 45 ++++++++++++++++++++++++++++++++++++++++----- src/styles.css | 24 ++++++++++++++++++++++++ 3 files changed, 65 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index d7ef795..f4bcc66 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + diff --git a/src/Scene2D.jsx b/src/Scene2D.jsx index 28ffdfc..2cb42c6 100644 --- a/src/Scene2D.jsx +++ b/src/Scene2D.jsx @@ -7,7 +7,7 @@ import Account from './Account.jsx'; import TavernGame from './TavernGame.jsx'; import { api } from './api.js'; -const RELEASE = '0.41.0-mansion'; +const RELEASE = '0.42.0-gatehouse'; const NAV = [ { id: 'home', label: 'Tavern' }, @@ -189,6 +189,44 @@ function Footer({ setRoute }) { ); } +const GATE_BENEFITS = [ + { icon: '🍺', title: 'Hire agents like mercenaries', body: 'Browse the roster and put a skilled agent to work in seconds.' }, + { icon: '🗡️', title: 'Publish & run your own', body: 'Register an agent class — your broker brings the runtime, no servers to rent.' }, + { icon: '🔌', title: 'Deliver anywhere', body: 'Embed a chatbox, drive a live web terminal, or expose a local port to the internet.' }, +]; +function Gatehouse({ auth, setRoute }) { + const [stats, setStats] = useState(null); + useEffect(() => { api('/agents/stats').then(setStats).catch(() => {}); }, []); + return ( +
+
+ ⛩ THE GATEHOUSE +

Join the tavern.

+

One amerc account opens every door — hire mercenaries, run your own, and deliver them across software boundaries. No infrastructure, just skills.

+
    + {GATE_BENEFITS.map((b) => ( +
  • {b.title}

    {b.body}

    • + ))} +
+
🔓 One sign-in works across tavern, docs, PM and git.
+ {stats && ( +
+ {stats.classes} classes + {stats.online} online + {stats.sessions} sessions +
+ )} +
+
+
+
OPEN BOOTH

Welcome, mercenary

Log in, or create your account in seconds.

+ setRoute('booth')} /> +
+
+
+ ); +} + function Page({ children, setRoute }) { return
{children}
; } function Scene({ route, setRoute, auth }) { @@ -197,10 +235,7 @@ function Scene({ route, setRoute, auth }) { if (route === 'mansion') return ; if (route === 'booth') return ; if (route === 'account') return ; - if (route === 'signin') return
-
GATEHOUSE

Open Booth

One amerc account across tavern, docs, PM and git.

- setRoute('booth')} /> -
; + if (route === 'signin') return ; if (route === 'admin') return
BACKDOOR

Quartermaster

Tenant, key, session and risk controls.

diff --git a/src/styles.css b/src/styles.css index 325fd5f..72c373e 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1218,3 +1218,27 @@ button { .gm-say { position: absolute; bottom: 102%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 200px; padding: 8px 11px; font-family: Georgia, serif; font-size: 12px; line-height: 1.5; color: #1c1206; background: #fff0d7; border: 2px solid #3a2410; border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.5); z-index: 8; text-align: left; } .gm-say strong { display: block; color: #7a3d0c; font-size: 11px; margin-bottom: 3px; } .gm-say::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #3a2410; } + +/* gatehouse — split join page (0.42 vividness) */ +.gate { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 32px; align-items: center; max-width: 1000px; margin: 0 auto; padding: 20px 0 40px; } +.gate-tag { display: inline-block; font-family: Inter, sans-serif; font-size: 11px; letter-spacing: 2px; color: var(--gold); margin-bottom: 10px; } +.gate-pitch h2 { font-size: 34px; line-height: 1.1; margin: 0 0 12px; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,0.4); } +.gate-lead { font-size: 14px; line-height: 1.7; color: #b6a7d4; margin: 0 0 22px; max-width: 52ch; } +.gate-benefits { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 14px; } +.gate-benefits li { display: flex; gap: 13px; align-items: flex-start; } +.gate-bi { font-size: 22px; line-height: 1.2; flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; + background: radial-gradient(120% 120% at 30% 20%, #2a1a3e, #160d22); border: 1px solid #34254e; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } +.gate-benefits strong { display: block; color: #f0e9ff; font-size: 14.5px; margin-bottom: 2px; } +.gate-benefits p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #9d8fc0; } +.gate-sso { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #cfe6ff; background: rgba(39,216,255,0.07); border: 1px solid rgba(39,216,255,0.18); + border-radius: 10px; padding: 9px 13px; margin-bottom: 16px; } +.gate-sso b { color: #7fe9ff; font-weight: 600; } +.gate-live { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #b6a7d4; } +.gate-live b { color: #fff; font-size: 16px; } .gate-live i { width: 4px; height: 4px; border-radius: 50%; background: #4a3a68; } +.gate-form { display: flex; justify-content: center; } +.gate-board { position: static !important; transform: none !important; left: auto; top: auto; width: 100%; max-width: 400px; margin: 0; animation: none; } +@media (max-width: 860px) { + .gate { grid-template-columns: 1fr; gap: 24px; max-width: 460px; } + .gate-form { order: -1; } + .gate-pitch h2 { font-size: 28px; } +}