diff --git a/js/examples/browser/index.html b/js/examples/browser/index.html index d52837b6..dc16fb4c 100644 --- a/js/examples/browser/index.html +++ b/js/examples/browser/index.html @@ -23,6 +23,14 @@ --border-color: #ddd; } + * { + box-sizing: border-box; + } + + [hidden] { + display: none !important; + } + body { background-color: var(--bg-color); color: var(--text-color); @@ -30,10 +38,12 @@ system-ui, -apple-system, sans-serif; - padding: 20px; + padding: 40px 16px 80px; transition: background-color 0.3s, color 0.3s; + max-width: 980px; + margin: 0 auto; } button { @@ -88,7 +98,6 @@ background-color: #22c55e; color: white; } - .verify-result.error { background-color: #ef4444; color: white; @@ -105,12 +114,10 @@ background-color: #22c55e; color: white; } - .verify-summary.partial-success { background-color: #f59e0b; color: white; } - .verify-summary.all-failed { background-color: #ef4444; color: white; @@ -126,17 +133,21 @@ display: flex; align-items: center; gap: 10px; + min-height: 34px; } .config-row > label { - min-width: 100px; + width: 200px; + flex-shrink: 0; opacity: 0.7; font-size: 14px; } .config-row input[type="text"], + .config-row input[type="number"], .config-row select { flex: 1; + height: 34px; font-family: monospace; font-size: 14px; padding: 6px 10px; @@ -146,6 +157,12 @@ color: var(--text-color); } + .config-row input[type="checkbox"] { + width: 16px; + height: 16px; + margin: 0; + } + .config-row input[type="text"][readonly] { opacity: 0.5; } @@ -173,6 +190,39 @@ padding: 6px 12px; font-size: 13px; } + + .config-note { + font-family: monospace; + font-size: 12px; + opacity: 0.7; + } + + .config-divider { + border: none; + border-top: 1px solid var(--border-color); + margin: 4px 0; + } + + .config-section-label { + font-size: 12px; + opacity: 0.5; + text-transform: uppercase; + letter-spacing: 0.05em; + } + + #v3Options, + #v4Options, + #identityCheckOptions { + display: flex; + flex-direction: column; + gap: 10px; + } + + #v3Options[hidden], + #v4Options[hidden], + #identityCheckOptions[hidden] { + display: none; + }
@@ -190,7 +240,7 @@http://localhost:*, App ID must
- start with app_staging_ (idkit's BridgeUrl validator only
- relaxes for staging app IDs).
-
- world.org/verify page. Wired through to
- idkit's override_connect_base_url.
-
-
- Cross-device flow — open the URL on your phone (the
- world.org/verify landing page reads the c and
- a query params and renders the invite-code view). Full
- round-trip requires wallet-bridge APP-9425 deployed at the configured
- bridge URL.
+ Cross-device flow: open the URL on your phone. The verify landing page
+ reads the c and a query params and renders the
+ invite-code view.