sysop/UmbrelApps
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

De opfrisbeurt uit het designsysteem: Gate 0.0.25, Relay 0.5.2

Browse Source 
Beide pagina's volgen nu HomeGit/Docs/website-design-system.html, in dezelfde ronde als AssetApp.
Drie dingen, en de volgorde is niet willekeurig:

- een accentgloed achter de pagina, uit de linkerbovenhoek. Dit is de VOORWAARDE voor de rest en
  niet de finishing touch: een backdrop-filter op een egale ondergrond levert per definitie niets
  op, dus er moet eerst iets achter de vlakken staan;
- kaarten doorschijnend, met een randlicht bovenlangs en een schaduw uit een token;
- één hoek voor elk buitenste kader. De kaart van --radius-xl naar --radius-lg, gelijk aan het
  logkader, dat zijn geneste hoek daarvan afleidt.

Het volle accentpalet van AssetApp (vijf kleuren, licht en donker) staat erin; beide apps blijven
op oranje en krijgen bewust geen knop. Om dezelfde reden staat de diepte hier vast aan, terwijl het
in AssetApp een instelling is: dit zijn statuspagina's met licht/donker en verder geen bediening.

--pos is groen geworden in plaats van oranje. Hij volgde het accent, en dat las als merkkleur in
plaats van als betekenis; zichtbaar gevolg is dat de badge "Running" nu groen is.

Meegevonden en meteen gerepareerd: prefers-reduced-motion en prefers-reduced-transparency mogen
niet in één media-query. Windows heeft een schakelaar "Animatie-effecten" die bij veel mensen uit
staat en die zet reduced-motion op reduce; samen in één query bleef er van de hele opmaak niets
over. Ze staan apart, en reduced-motion haalt alleen de overgang weg.

Alleen de pagina's, dus geen nieuwe images: VERSION in tools/evolu-relay/build.sh blijft staan en
alleen de manifesten gaan omhoog.

Suite groen: 22 + 43 + 54 + 22 + 65 + 39 + 115.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Harmen
2026-08-31 11:28:11 +02:00
co-authored by Claude Opus 5
parent 627c8306b1
commit 45dd50fb0b
9 changed files with 425 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
whatsnext-electrum-gate/index.html.template
+166 -50
View File
@@ -17,7 +17,7 @@
niet, dan zegt hij dat. Hij verzint niets, want hij wordt juist geraadpleegd
op het moment dat er iets mis lijkt te zijn.
-->
<html lang="en" data-theme="dark" data-accent="orange">
<html lang="en" data-theme="dark" data-accent="orange" data-depth="deep">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -36,52 +36,152 @@
}
[data-theme="dark"][data-accent="orange"] {
--bg: #080808;
--bg-elevated: #181818;
--bg-raised: #242424;
--bg-overlay: #303030;
--border: rgba(255,255,255,0.18);
--border-mid: rgba(255,255,255,0.28);
--text-primary: #f2f2f2;
--text-sec: #a3a3a3;
--text-ter: #6a6a6a;
--accent: #FF6B00;
--accent-soft: rgba(255,107,0,0.16);
--accent-mid: rgba(255,107,0,0.26);
--accent-text: #FF8124;
--pos: #FF8124;
--pos-bg: rgba(255,107,0,0.18);
--neg: #ff5a5a;
--neg-bg: rgba(255,69,69,0.18);
--neutral-bg: rgba(255,255,255,0.08);
--scrollbar: #2c2c2c;
--bg: #080808; --bg-elevated: #181818; --bg-raised: #242424; --bg-overlay: #303030;
--border: rgba(255,255,255,0.18); --border-mid: rgba(255,255,255,0.28);
--text-primary: #f2f2f2; --text-sec: #a3a3a3; --text-ter: #6a6a6a;
--accent: #FF6B00; --accent-soft: rgba(255,107,0,0.16); --accent-mid: rgba(255,107,0,0.26);
--accent-glow: rgba(255,107,0,0.30); --accent-text: #FF8124;
--pos: #39FF8A; --pos-bg: rgba(57,255,138,0.16); --neg: #ff5a5a; --neg-bg: rgba(255,69,69,0.18);
--neutral-bg: rgba(255,255,255,0.08); --input-bg: #1c1c1c; --scrollbar: #2c2c2c;
}
[data-theme="light"][data-accent="orange"] {
--bg: #ffffff; --bg-elevated: #f7f7f7; --bg-raised: #f0f0f0; --bg-overlay: #e8e8e8;
--border: rgba(0,0,0,0.12); --border-mid: rgba(0,0,0,0.18);
--text-primary: #0a0a0a; --text-sec: #888888; --text-ter: #bbbbbb;
--accent: #E05500; --accent-soft: rgba(224,85,0,0.08); --accent-mid: rgba(224,85,0,0.16);
--accent-glow: rgba(224,85,0,0.22); --accent-text: #E05500;
--pos: #007a48; --pos-bg: rgba(0,149,90,0.08); --neg: #cc2222; --neg-bg: rgba(204,34,34,0.08);
--neutral-bg: rgba(0,0,0,0.04); --input-bg: #f5f5f5; --scrollbar: #ddd;
}
[data-theme="dark"][data-accent="blue"] {
--bg: #080808; --bg-elevated: #181818; --bg-raised: #242424; --bg-overlay: #303030;
--border: rgba(255,255,255,0.18); --border-mid: rgba(255,255,255,0.28);
--text-primary: #f2f2f2; --text-sec: #a3a3a3; --text-ter: #6a6a6a;
--accent: #3B82F6; --accent-soft: rgba(59,130,246,0.16); --accent-mid: rgba(59,130,246,0.26);
--accent-glow: rgba(59,130,246,0.30); --accent-text: #6AA1FF;
--pos: #39FF8A; --pos-bg: rgba(57,255,138,0.16); --neg: #ff5a5a; --neg-bg: rgba(255,69,69,0.18);
--neutral-bg: rgba(255,255,255,0.08); --input-bg: #1c1c1c; --scrollbar: #2c2c2c;
}
[data-theme="light"][data-accent="blue"] {
--bg: #ffffff; --bg-elevated: #f7f7f7; --bg-raised: #f0f0f0; --bg-overlay: #e8e8e8;
--border: rgba(0,0,0,0.12); --border-mid: rgba(0,0,0,0.18);
--text-primary: #0a0a0a; --text-sec: #888888; --text-ter: #bbbbbb;
--accent: #2563EB; --accent-soft: rgba(37,99,235,0.08); --accent-mid: rgba(37,99,235,0.16);
--accent-glow: rgba(37,99,235,0.22); --accent-text: #2563EB;
--pos: #007a48; --pos-bg: rgba(0,149,90,0.08); --neg: #cc2222; --neg-bg: rgba(204,34,34,0.08);
--neutral-bg: rgba(0,0,0,0.04); --input-bg: #f5f5f5; --scrollbar: #ddd;
}
[data-theme="dark"][data-accent="lila"] {
--bg: #080808; --bg-elevated: #181818; --bg-raised: #242424; --bg-overlay: #303030;
--border: rgba(255,255,255,0.18); --border-mid: rgba(255,255,255,0.28);
--text-primary: #f2f2f2; --text-sec: #a3a3a3; --text-ter: #6a6a6a;
--accent: #B388FF; --accent-soft: rgba(179,136,255,0.16); --accent-mid: rgba(179,136,255,0.26);
--accent-glow: rgba(179,136,255,0.30); --accent-text: #C7A6FF;
--pos: #39FF8A; --pos-bg: rgba(57,255,138,0.16); --neg: #ff5a5a; --neg-bg: rgba(255,69,69,0.18);
--neutral-bg: rgba(255,255,255,0.08); --input-bg: #1c1c1c; --scrollbar: #2c2c2c;
}
[data-theme="light"][data-accent="lila"] {
--bg: #ffffff; --bg-elevated: #f7f7f7; --bg-raised: #f0f0f0; --bg-overlay: #e8e8e8;
--border: rgba(0,0,0,0.12); --border-mid: rgba(0,0,0,0.18);
--text-primary: #0a0a0a; --text-sec: #888888; --text-ter: #bbbbbb;
--accent: #7C3AED; --accent-soft: rgba(124,58,237,0.08); --accent-mid: rgba(124,58,237,0.16);
--accent-glow: rgba(124,58,237,0.22); --accent-text: #7C3AED;
--pos: #007a48; --pos-bg: rgba(0,149,90,0.08); --neg: #cc2222; --neg-bg: rgba(204,34,34,0.08);
--neutral-bg: rgba(0,0,0,0.04); --input-bg: #f5f5f5; --scrollbar: #ddd;
}
[data-theme="dark"][data-accent="teal"] {
--bg: #080808; --bg-elevated: #181818; --bg-raised: #242424; --bg-overlay: #303030;
--border: rgba(255,255,255,0.18); --border-mid: rgba(255,255,255,0.28);
--text-primary: #f2f2f2; --text-sec: #a3a3a3; --text-ter: #6a6a6a;
--accent: #14B8A6; --accent-soft: rgba(20,184,166,0.16); --accent-mid: rgba(20,184,166,0.26);
--accent-glow: rgba(20,184,166,0.30); --accent-text: #2DD4BF;
--pos: #39FF8A; --pos-bg: rgba(57,255,138,0.16); --neg: #ff5a5a; --neg-bg: rgba(255,69,69,0.18);
--neutral-bg: rgba(255,255,255,0.08); --input-bg: #1c1c1c; --scrollbar: #2c2c2c;
}
[data-theme="light"][data-accent="teal"] {
--bg: #ffffff; --bg-elevated: #f7f7f7; --bg-raised: #f0f0f0; --bg-overlay: #e8e8e8;
--border: rgba(0,0,0,0.12); --border-mid: rgba(0,0,0,0.18);
--text-primary: #0a0a0a; --text-sec: #888888; --text-ter: #bbbbbb;
--accent: #0D9488; --accent-soft: rgba(13,148,136,0.08); --accent-mid: rgba(13,148,136,0.16);
--accent-glow: rgba(13,148,136,0.22); --accent-text: #0D9488;
--pos: #007a48; --pos-bg: rgba(0,149,90,0.08); --neg: #cc2222; --neg-bg: rgba(204,34,34,0.08);
--neutral-bg: rgba(0,0,0,0.04); --input-bg: #f5f5f5; --scrollbar: #ddd;
}
[data-theme="dark"][data-accent="magenta"] {
--bg: #080808; --bg-elevated: #181818; --bg-raised: #242424; --bg-overlay: #303030;
--border: rgba(255,255,255,0.18); --border-mid: rgba(255,255,255,0.28);
--text-primary: #f2f2f2; --text-sec: #a3a3a3; --text-ter: #6a6a6a;
--accent: #E24DAE; --accent-soft: rgba(226,77,174,0.16); --accent-mid: rgba(226,77,174,0.26);
--accent-glow: rgba(226,77,174,0.30); --accent-text: #F072C4;
--pos: #39FF8A; --pos-bg: rgba(57,255,138,0.16); --neg: #ff5a5a; --neg-bg: rgba(255,69,69,0.18);
--neutral-bg: rgba(255,255,255,0.08); --input-bg: #1c1c1c; --scrollbar: #2c2c2c;
}
[data-theme="light"][data-accent="magenta"] {
--bg: #ffffff; --bg-elevated: #f7f7f7; --bg-raised: #f0f0f0; --bg-overlay: #e8e8e8;
--border: rgba(0,0,0,0.12); --border-mid: rgba(0,0,0,0.18);
--text-primary: #0a0a0a; --text-sec: #888888; --text-ter: #bbbbbb;
--accent: #BE2A86; --accent-soft: rgba(190,42,134,0.08); --accent-mid: rgba(190,42,134,0.16);
--accent-glow: rgba(190,42,134,0.22); --accent-text: #BE2A86;
--pos: #007a48; --pos-bg: rgba(0,149,90,0.08); --neg: #cc2222; --neg-bg: rgba(204,34,34,0.08);
--neutral-bg: rgba(0,0,0,0.04); --input-bg: #f5f5f5; --scrollbar: #ddd;
}
[data-theme="light"][data-accent="orange"] {
--bg: #ffffff;
--bg-elevated: #f7f7f7;
--bg-raised: #f0f0f0;
--bg-overlay: #e8e8e8;
/* Steviger dan de 0,07 en 0,11 die hier stonden (27-08-2026). Overgenomen uit
AssetApp, waar het licht-thema deze stap al gemaakt had: op wit verdwijnt een
rand van 7 procent zwart vrijwel, en dan drijven de kaders zonder begrenzing
op de achtergrond. In het donkere thema speelt dat niet, want daar staat een
lichte rand op een donkere ondergrond en die zie je hoe dan ook. */
--border: rgba(0,0,0,0.12);
--border-mid: rgba(0,0,0,0.18);
--text-primary: #0a0a0a;
--text-sec: #888888;
--text-ter: #bbbbbb;
--accent: #E05500;
--accent-soft: rgba(224,85,0,0.08);
--accent-mid: rgba(224,85,0,0.16);
--accent-text: #E05500;
--pos: #D04800;
--pos-bg: rgba(224,85,0,0.08);
--neg: #cc2222;
--neg-bg: rgba(204,34,34,0.08);
--neutral-bg: rgba(0,0,0,0.04);
--scrollbar: #ddd;
/* -- Diepte ------------------------------------------------------------------
Overgenomen uit HomeGit/Docs/website-design-system.html (31-08-2026). In
AssetApp is dit een instelling; hier staat hij vast aan, want dit is een
statuspagina met dark/light en verder geen knoppen, en een schuif erbij zou
meer bediening zijn dan de pagina zelf.
Het werkt omdat er iets ACHTER de vlakken komt te staan: een accentgloed uit
de linkerbovenhoek. Een backdrop-filter op een egale ondergrond levert per
definitie niets op, dus de gloed is het eerste deel en het glas het tweede. */
:root {
--surface: var(--bg-elevated);
--surface-inset: var(--bg-raised);
--surface-blur: 16px;
--surface-sat: 135%;
--edge: none;
--ambient: none;
--shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
}
[data-theme="dark"] {
--surface: color-mix(in srgb, #1c1c1c 78%, transparent);
--surface-inset: color-mix(in srgb, #262626 76%, transparent);
--edge: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 42%);
--shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 10px 30px -18px rgba(0,0,0,0.9);
}
[data-theme="light"] {
--surface: color-mix(in srgb, #ffffff 72%, transparent);
--surface-inset: color-mix(in srgb, #f2f2f2 74%, transparent);
--edge: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0) 46%);
}
[data-depth="deep"] {
--ambient: radial-gradient(58rem 34rem at 8% -8%, var(--accent-glow), transparent 62%),
radial-gradient(46rem 30rem at 102% 4%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 66%);
}
/* De twee toegankelijkheidswensen horen NIET in een gedeelde media-query, en dat
is een les die een ronde kostte: Windows heeft een schakelaar "Animatie-
effecten" die bij veel mensen uit staat, en die zet prefers-reduced-motion op
reduce. Samen in een query deed de hele stand dan niets. Ze zeggen ook echt
iets anders: de ene gaat over doorschijnende vlakken, de andere over
beweging. */
@media (prefers-reduced-transparency: reduce) {
:root {
--surface: var(--bg-elevated); --surface-inset: var(--bg-raised);
--surface-blur: 0px; --surface-sat: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
body::before, .card { transition: none; }
}
/* De gloed ligt achter alles en vangt geen klikken. z-index 0 hier en 1 op .wrap:
zonder stapelcontext kan een fixed pseudo-element van body over de inhoud heen
komen te liggen. */
body::before {
content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background: var(--ambient); transition: background 0.3s;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
@@ -97,7 +197,7 @@ body {
/* Breed, maar niet oneindig: op een ultrawide monitor zou een kader van 2500px
regels opleveren die niemand leest. 1760 is ruim genoeg voor drie kolommen
statuskaders naast een lijstkader. */
.wrap { max-width: 1760px; margin: 0 auto; }
.wrap { position: relative; z-index: 1; max-width: 1760px; margin: 0 auto; }
/* ── Het raster ─────────────────────────────────────────────────────────────
Twaalf kolommen, en de kaders vullen ze in de volgorde waarin ze in de HTML
@@ -175,13 +275,30 @@ body {
/* ── Kaarten ────────────────────────────────────────────────────────────── */
.card {
background: var(--bg-elevated);
--radius: var(--radius-xl);
position: relative;
background: var(--surface);
/* --radius-lg en niet --radius-xl (31-08-2026): elk buitenste kader heeft
dezelfde hoek, want ze staan in beeld naast en om elkaar heen en twee radii
lezen dan als een fout. Het logkader leidt zijn hoek hiervan af. */
--radius: var(--radius-lg);
--padding: 1.8rem;
border-radius: var(--radius);
padding: var(--padding);
margin-bottom: 1rem;
box-shadow: var(--shadow-1);
backdrop-filter: blur(var(--surface-blur)) saturate(var(--surface-sat));
-webkit-backdrop-filter: blur(var(--surface-blur)) saturate(var(--surface-sat));
transition: background 0.25s, box-shadow 0.25s;
}
/* Het randlicht: een verloop van licht naar niets over de bovenste 40 procent.
Dit is het verschil tussen doorzichtig en glas; zonder deze laag ziet een
halftransparante kaart er alleen bleek uit. De inhoud moet erbovenop blijven,
anders ligt er een waas over de tekst in plaats van erachter. */
.card::before {
content: ''; position: absolute; inset: 0; border-radius: inherit;
background: var(--edge); pointer-events: none;
}
.card > * { position: relative; }
[data-theme="dark"] .card { border: 1px solid var(--border); }
/* Rand én schaduw in het lichte thema (27-08-2026), overgenomen uit AssetApp.
Hier stond alleen een schaduw, en een zachte schaduw op wit geeft wel diepte
@@ -190,7 +307,6 @@ body {
in plaats van 3 en 24) zodat het samen niet zwaar wordt. */
[data-theme="light"] .card {
border: 1px solid var(--border);
box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
@@ -375,7 +491,7 @@ body {
/* ── Logregels ──────────────────────────────────────────────────────────── */
.log {
background: var(--bg-raised);
border-radius: max(4px, calc(var(--radius-xl) - 1.8rem));
border-radius: max(4px, calc(var(--radius-lg) - 1.8rem));
padding: 0.9rem 1.1rem;
font-family: var(--font-mono);
font-size: 0.75rem;
whatsnext-electrum-gate/umbrel-app.yml
+11 -1
View File
@@ -9,7 +9,7 @@ manifestVersion: 1
id: whatsnext-electrum-gate
category: bitcoin
name: Electrum Gate
version: "0.0.24"
version: "0.0.25"
tagline: Your own node from anywhere, without waiting for Tor
description: >-
The privacy win is already yours: you run the Electrum server. A public one gets asked for
@@ -56,6 +56,16 @@ description: >-
# staan. In 0.0.9 stond er daardoor drie keer "Earlier releases" en twee keer
# dezelfde 0.0.4-regel. De toets let er nu op.
releaseNotes: >-
A visual refresh, shared with the other apps in this store. The page now has a soft glow behind it in
the accent colour, and the cards are translucent with a light edge and a shadow, so they read as
panels sitting on the page instead of flat blocks painted on it. Card corners are a little tighter,
and every framed element now uses the same corner radius. Nothing about what the page reports has
changed.
Everything in 0.0.24, released the day before:
The menu has a new "About this app" item: what the app is for, what it asks of you, and what the
Status card does and does not prove. That last one was the reason for this release. The card used to
read "Answering" with "answered in 7 ms, from inside the app" underneath, which was unclear in both