Skip to content

Commit 04f7398

Browse files
ligourasligouras
committed
feat: enhance demo page styling and update links for better user experience
1 parent 3a71f74 commit 04f7398

1 file changed

Lines changed: 61 additions & 27 deletions

File tree

‎deploy/compose.yaml‎

Lines changed: 61 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -272,22 +272,55 @@ configs:
272272
<meta name="viewport" content="width=device-width, initial-scale=1">
273273
<title>EUDI Wallet demo · GRNET</title>
274274
<style>
275-
body { font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; max-width: 46rem; margin: 3rem auto; padding: 0 1.25rem; color: #1b1f24; }
276-
h1 { font-size: 1.6rem; margin-bottom: .25rem; }
277-
h2 { font-size: 1.1rem; margin-top: 2.25rem; border-bottom: 1px solid #d8dee4; padding-bottom: .3rem; }
278-
p.lead { color: #57606a; margin-top: 0; }
279-
table { border-collapse: collapse; width: 100%; }
280-
td { padding: .45rem .5rem .45rem 0; vertical-align: top; border-bottom: 1px solid #eef1f4; }
281-
td:first-child { white-space: nowrap; padding-right: 1.25rem; }
282-
code { font: .88em ui-monospace, SFMono-Regular, Menlo, monospace; background: #f3f5f7; padding: .1em .3em; border-radius: 3px; word-break: break-all; }
283-
a { color: #0550ae; }
284-
footer { margin-top: 3rem; color: #57606a; font-size: .9rem; }
285-
header { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 1.75rem; border-bottom: 1px solid #d8dee4; }
286-
header img { display: block; min-width: 0; height: auto; }
275+
:root { --fg: #1b1f24; --muted: #57606a; --line: #d8dee4; --rule: #eef1f4; --code: #f3f5f7; --card: #f6f8fa; --link: #0550ae; }
287276
@media (prefers-color-scheme: dark) {
288-
body { background: #0d1117; color: #e6edf3; } p.lead, footer { color: #8d96a0; }
289-
h2 { border-color: #30363d; } td { border-color: #21262d; } code { background: #161b22; } a { color: #4493f8; }
290-
header { background: #fff; border: 0; border-radius: 6px; padding: .75rem 1rem; }
277+
:root { --fg: #e6edf3; --muted: #8d96a0; --line: #30363d; --rule: #21262d; --code: #161b22; --card: #161b22; --link: #4493f8; }
278+
body { background: #0d1117; }
279+
header { background: #fff; border: 0; border-radius: 8px; padding: .75rem 1rem; }
280+
}
281+
* { box-sizing: border-box; }
282+
/* The tables get the full width; running text keeps a readable line length. */
283+
body { font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; max-width: 62rem; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; color: var(--fg); }
284+
p { max-width: 46rem; }
285+
h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; margin: 0 0 .35rem; }
286+
h2 { font-size: 1.1rem; margin: 2.5rem 0 .75rem; border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
287+
.lead { color: var(--muted); margin-top: 0; }
288+
a { color: var(--link); text-underline-offset: .15em; }
289+
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 3px; }
290+
header { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
291+
header img { display: block; min-width: 0; height: auto; }
292+
293+
/* Try it: the three steps of the demo, each one link. Side by side when
294+
all three fit, else one under the other, never two and one. */
295+
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; grid-template-columns: 1fr; counter-reset: step; }
296+
@media (min-width: 50rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
297+
.steps li { counter-increment: step; }
298+
.steps a { display: flex; flex-direction: column; gap: .2rem; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: inherit; text-decoration: none; }
299+
.steps a:hover { border-color: var(--link); }
300+
.steps a::before { content: counter(step); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-bottom: .35rem; border-radius: 50%; background: var(--link); color: #fff; font-size: .85rem; font-weight: 600; }
301+
.steps strong { color: var(--link); }
302+
.steps span { color: var(--muted); font-size: .95rem; }
303+
304+
table { border-collapse: collapse; width: 100%; }
305+
td { padding: .55rem 1rem .55rem 0; vertical-align: top; border-bottom: 1px solid var(--rule); }
306+
td:first-child { width: 1%; white-space: nowrap; padding-right: 1.5rem; }
307+
code { font: .875em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--code); padding: .1em .35em; border-radius: 4px; overflow-wrap: anywhere; }
308+
/* A SHA-256 fingerprint, 32 bytes as "XX:", always two lines of 16, so a
309+
line never ends inside a byte. 48ch is 16 bytes; the font shrinks to fit
310+
narrow screens (48ch of monospace plus padding is about 29.5em). */
311+
code.fp { display: block; width: calc(48ch + .7em); word-break: break-all; font-size: min(.875rem, calc((100vw - 3rem) / 30)); padding: .4em .35em; line-height: 1.6; }
312+
.note { color: var(--muted); font-size: .95rem; }
313+
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
314+
315+
/* Phones: each table row becomes a label over its value. */
316+
@media (max-width: 40rem) {
317+
body { padding-top: 1.25rem; }
318+
header { margin-bottom: 1.5rem; }
319+
h2 { margin-top: 2rem; }
320+
table, tbody, tr, td { display: block; width: auto; }
321+
tr { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
322+
td { padding: 0; border: 0; }
323+
td:first-child { width: auto; white-space: normal; padding: 0 0 .2rem; font-weight: 600; }
291324
}
292325
</style>
293326
</head>
@@ -300,36 +333,37 @@ configs:
300333
<p class="lead">GRNET's deployment of the EU Digital Identity Wallet reference services, for WE BUILD.</p>
301334
302335
<h2>Try it</h2>
303-
<table>
304-
<tr><td><a href="/frontend/">Issuer frontend</a></td><td>Request a PID into your wallet.</td></tr>
305-
<tr><td><a href="/verifier-ui/">Verifier UI</a></td><td>Ask a wallet to present credentials, as a relying party would.</td></tr>
306-
</table>
336+
<ol class="steps">
337+
<li><a href="${WALLET_RELEASES_URL:?set in stack.env}"><strong>Wallet app</strong><span>Install EUDI Wallet GR on an Android phone. See <em>Wallet app</em> below.</span></a></li>
338+
<li><a href="/frontend/"><strong>Issuer frontend</strong><span>Request a PID into your wallet.</span></a></li>
339+
<li><a href="/verifier-ui/"><strong>Verifier UI</strong><span>Ask a wallet to present credentials, as a relying party would.</span></a></li>
340+
</ol>
307341
308342
<h2>Services</h2>
309343
<table>
310-
<tr><td><a href="/issuer/">PID issuer</a></td><td>OpenID4VCI credential issuer. Metadata at <a href="/.well-known/openid-credential-issuer/issuer"><code>/.well-known/openid-credential-issuer/issuer</code></a>.</td></tr>
311-
<tr><td><a href="/issuer/oidc/">Authorization server</a></td><td>OAuth for the issuer. Metadata at <a href="/.well-known/oauth-authorization-server/issuer/oidc"><code>/.well-known/oauth-authorization-server/issuer/oidc</code></a>.</td></tr>
344+
<tr><td><a href="/issuer/">PID issuer</a></td><td>OpenID4VCI credential issuer. Metadata at <a href="/.well-known/openid-credential-issuer/issuer"><code>/.well-known/<wbr>openid-credential-issuer/<wbr>issuer</code></a>.</td></tr>
345+
<tr><td><a href="/issuer/oidc/">Authorization server</a></td><td>OAuth for the issuer. Metadata at <a href="/.well-known/oauth-authorization-server/issuer/oidc"><code>/.well-known/<wbr>oauth-authorization-server/<wbr>issuer/<wbr>oidc</code></a>.</td></tr>
312346
<tr><td><a href="/token_status_list/swagger/">Status list</a></td><td>Revocation status of issued credentials and attestations.</td></tr>
313-
<tr><td><a href="/wallet-provider/swagger">Wallet provider</a></td><td>Wallet instance and key attestations. Signing keys at <a href="/wallet-provider/jwks"><code>/wallet-provider/jwks</code></a>.</td></tr>
347+
<tr><td><a href="/wallet-provider/swagger">Wallet provider</a></td><td>Wallet instance and key attestations. Signing keys at <a href="/wallet-provider/jwks"><code>/wallet-provider/<wbr>jwks</code></a>.</td></tr>
314348
<tr><td><a href="/verifier/wallet/public-keys.json">Verifier backend</a></td><td>OpenID4VP. The key its request objects are signed with.</td></tr>
315349
</table>
316350
317351
<h2>Trusting this issuer</h2>
318352
<p>Credentials from this demo chain to GRNET's IACA. Configure it as a trust anchor, and check the fingerprint of what you downloaded against the one below.</p>
319353
<table>
320354
<tr><td><a href="/pki/root-ca-grnet.pem">IACA certificate</a></td><td><code>CN=PID Issuer CA - GR 01, O=GRNET, C=GR</code></td></tr>
321-
<tr><td>SHA-256</td><td><code>${IACA_SHA256:?set in stack.env}</code></td></tr>
355+
<tr><td>SHA-256</td><td><code class="fp">${IACA_SHA256:?set in stack.env}</code></td></tr>
322356
<tr><td><a href="/revocation/crl.pem">Revocation list</a></td><td>The CRL named in the certificate, DER-encoded. Certificates point at it over plain http, which is normal for CRLs: the list itself is signed.</td></tr>
323357
</table>
324358
325359
<h2>Wallet app</h2>
326-
<p>EUDI Wallet GR, GRNET's Android build of the reference wallet, set up for this demo's issuer and wallet provider. Download the APK from its <a href="${WALLET_RELEASES_URL:?set in stack.env}">releases</a>: take the one marked <strong>Latest</strong>.</p>
360+
<p>EUDI Wallet GR, GRNET's Android build of the reference wallet, set up for this demo's issuer and wallet provider. Download the APK from its <a href="${WALLET_RELEASES_URL}">releases</a>: take the one marked <strong>Latest</strong>.</p>
327361
<table>
328-
<tr><td>Signing certificate SHA-256</td><td><code>${WALLET_APK_CERT_SHA256:?set in stack.env}</code></td></tr>
362+
<tr><td>Signing certificate SHA-256</td><td><code class="fp">${WALLET_APK_CERT_SHA256:?set in stack.env}</code></td></tr>
329363
</table>
330-
<p>To install it, allow your browser to install unknown apps when Android asks.</p>
364+
<p class="note">To install it, allow your browser to install unknown apps when Android asks.</p>
331365
332-
<footer><strong>Demo services - Test data only.</strong> Operated by GRNET.</footer>
366+
<footer><strong>Demo services - Test data only.</strong> Operated by <a href="https://grnet.gr/">GRNET</a>.</footer>
333367
</body>
334368
</html>
335369

0 commit comments

Comments
 (0)