eleven / messenger Public

home: the passkey mark (person + key) on the passkey buttons (#1156)

The doors all carry their glyphs now except passkeys — add the standard
person-badge-key shape, inline at door-glyph scale, on sign-in / create /
all-ways / unlock.

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

Paul Campbell 3 months ago 9004de40b506ead5ce69e04ec35589eb311d4031 parent 910deca

1 file changed, +6 −4

home/web/pages/index.html +6 −4

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

index b0df054..247c56b 100644

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

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

@@ -44,6 +44,8 @@

global .hidden at equal specificity — restate the hide here (the same

trap .icon-add.hidden answers below). Demoted doors hide this way. */

.apple-btn.hidden { display: none; }

+ /* The passkey mark rides inline in non-flex buttons: baseline-tuck + gap. */

+ .pk-ico { vertical-align: -2.5px; margin-right: 7px; }

/* Google's door, to their light-button spec: white, hairline border, the

official four-colour G (inline SVG — their rendered button needs their

JS, which the CSP rightly blocks; hand-built like Apple's). */

@@ -802,7 +804,7 @@

<button id="apple-signin" class="apple-btn" type="button"><svg viewBox="0 0 814 1000" width="14" height="17" fill="currentColor" aria-hidden="true"><path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/></svg>Continue with Apple</button>

<button id="google-signin" class="google-btn hidden" type="button"><svg viewBox="0 0 48 48" width="16" height="16" aria-hidden="true"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>Continue with Google</button>

<button id="email-signin" class="secondary" type="button">Continue with email</button>

- <button id="signin" class="passkey-link" type="button">Sign in with a passkey</button>

+ <button id="signin" class="passkey-link" type="button"><svg class="pk-ico" viewBox="0 0 16 16" width="15" height="15" fill="currentColor" aria-hidden="true"><circle cx="6" cy="4.4" r="2.7"/><path d="M1.2 13.9a4.8 4.8 0 0 1 9.6 0z"/><path fill-rule="evenodd" d="M12.1 7.3a2.1 2.1 0 0 1 2.06 2.52l1.6 1.6-1.2 1.2-.7-.7-.65.65-.85-.85-.62.62a2.1 2.1 0 1 1 .36-4.94zm-.9 1.6a.8.8 0 1 0 0 1.6.8.8 0 0 0 0-1.6z"/></svg>Sign in with a passkey</button>

<button id="other-ways" class="passkey-link" type="button">Other ways to sign in</button>

</div>

@@ -817,7 +819,7 @@

your Eleven sign-in is one key that opens every space you belong to, so

if you've signed in before, try again and choose it from the list.</p>

- <button id="create-passkey" class="secondary" type="button">Create your passkey</button>

+ <button id="create-passkey" class="secondary" type="button"><svg class="pk-ico" viewBox="0 0 16 16" width="15" height="15" fill="currentColor" aria-hidden="true"><circle cx="6" cy="4.4" r="2.7"/><path d="M1.2 13.9a4.8 4.8 0 0 1 9.6 0z"/><path fill-rule="evenodd" d="M12.1 7.3a2.1 2.1 0 0 1 2.06 2.52l1.6 1.6-1.2 1.2-.7-.7-.65.65-.85-.85-.62.62a2.1 2.1 0 1 1 .36-4.94zm-.9 1.6a.8.8 0 1 0 0 1.6.8.8 0 0 0 0-1.6z"/></svg>Create your passkey</button>

</div>

@@ -861,7 +863,7 @@

default: DOORS.github plus

<button id="otherways-github" class="secondary" type="button">Continue with GitHub</button> -->

<button id="otherways-email" class="secondary" type="button">Continue with email</button>

- <button id="otherways-passkey" class="secondary" type="button">Sign in with a passkey</button>

+ <button id="otherways-passkey" class="secondary" type="button"><svg class="pk-ico" viewBox="0 0 16 16" width="15" height="15" fill="currentColor" aria-hidden="true"><circle cx="6" cy="4.4" r="2.7"/><path d="M1.2 13.9a4.8 4.8 0 0 1 9.6 0z"/><path fill-rule="evenodd" d="M12.1 7.3a2.1 2.1 0 0 1 2.06 2.52l1.6 1.6-1.2 1.2-.7-.7-.65.65-.85-.85-.62.62a2.1 2.1 0 1 1 .36-4.94zm-.9 1.6a.8.8 0 1 0 0 1.6.8.8 0 0 0 0-1.6z"/></svg>Sign in with a passkey</button>

</div>

@@ -892,7 +894,7 @@

the token works, but the list only opens under a passkey's PRF — the

identity-vs-key split, made visible. The prompt IS the trigger. -->

- <button id="unlock-passkey" type="button" class="secondary">Unlock your spaces with your passkey</button>

+ <button id="unlock-passkey" type="button" class="secondary"><svg class="pk-ico" viewBox="0 0 16 16" width="15" height="15" fill="currentColor" aria-hidden="true"><circle cx="6" cy="4.4" r="2.7"/><path d="M1.2 13.9a4.8 4.8 0 0 1 9.6 0z"/><path fill-rule="evenodd" d="M12.1 7.3a2.1 2.1 0 0 1 2.06 2.52l1.6 1.6-1.2 1.2-.7-.7-.65.65-.85-.85-.62.62a2.1 2.1 0 1 1 .36-4.94zm-.9 1.6a.8.8 0 1 0 0 1.6.8.8 0 0 0 0-1.6z"/></svg>Unlock your spaces with your passkey</button>

</div>