eleven / messenger Public

home: reorder the all-ways step — ours first, a divider, then the giants (#1157)

Paul's copy: the no-data note under the title, passkey then email on top,
and Apple/Google below the 'For those oppressed by convenience…' divider.
The step is opt-in (behind the Other-ways link), so it can afford the
snark.
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Paul Campbell 59f8b9efe464aeb2ad770189d0a90a5e09ac59ea parent 9004de4
1 file changed, +7 −2
  • home/web/pages/index.html +7 −2
diff --git a/home/web/pages/index.html b/home/web/pages/index.html
index 247c56b..9a1a558 100644
--- a/home/web/pages/index.html
+++ b/home/web/pages/index.html
@@ -134,6 +134,7 @@
}
#newhere p { margin: 0; }
#newhere .path-divider { margin: 12px 0 10px; }
+ #otherways .path-divider { margin: 16px 0 12px; font-size: 13px; }
#newhere button { width: 100%; }
/* The sealed-list prompt (an email/Apple sign-in that can't decrypt yet). */
#vault-sealed { margin-top: 6px; }
@@ -854,6 +855,12 @@
<div id="otherways" class="hidden screen">
<button id="otherways-back" class="icon-back" type="button" aria-label="Back to sign-in"><svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M10 3 5 8l5 5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
<h2 class="create-title">Other ways to sign in</h2>
+ <p class="create-sub">We don't store your data no matter what method you use.</p>
+ <div class="actions">
+ <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>
+ <button id="otherways-email" class="secondary" type="button">Continue with email</button>
+ </div>
+ <div class="path-divider">For those oppressed by convenience…</div>
<div class="actions">
<button id="otherways-apple" 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="otherways-google" class="google-btn" 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>
@@ -862,8 +869,6 @@
<!-- GitHub's door ("for the nerds"), all-ways only, never a platform
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"><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>
</div>