Simplify: strip clock clutter, drop 3x3-system's decorative dot-grid icon

Lebensuhr clock: each of the 8 points had 3 stacked text lines (age,
time, vorm./nachm.) plus a leader line — too much text crammed
around a small dial. Down to just the age number per point; the
matching time is one glance away in the table.

3x3-system: removed the IconGrid3x3 decorative mark per explicit
feedback that it added nothing.
This commit is contained in:
Marco
2026-08-26 16:05:49 +00:00
parent 5e48b67588
commit 3be8682e1a
2 changed files with 22 additions and 52 deletions
+21 -34
View File
@@ -196,17 +196,15 @@ export default function LebensuhrPage() {
</P>
{/* Decorative companion to the table below, not a replacement for
it — a real 12-hour dial (112, like an actual clock face;
an earlier version numbered it 024, which doesn't exist on
a real clock and read wrong for exactly that reason), with
the 8 ages plotted at their 12-hour position. Since every
day has two laps around a 12h dial, each point also carries
"vorm."/"nachm." — and a filled dot for vormittags vs. a
hollow ring for nachmittags, so the two laps stay visually
distinct even without reading the text. Coordinates are
hand-computed from lebensuhrRows's own age→time pairs
(hour mod 12, -90° so 12 sits at the top) — if those rows
ever change, these need updating too. */}
it — a real 12-hour dial (112, like an actual clock face)
with the 8 ages plotted at their 12-hour position. Only the
age is labeled here (a version that also spelled out
time + vorm./nachm. on every point — 3 lines × 8 points —
read as clutter); the exact time for each age is one glance
down, in the table. Coordinates are hand-computed from
lebensuhrRows's own age→time pairs (hour mod 12, -90° so 12
sits at the top) — if those rows ever change, these need
updating too. */}
<div className="flex justify-center py-2">
<svg viewBox="-10 -10 440 440" className="w-full max-w-[22rem] h-auto" aria-hidden="true">
<circle cx="210" cy="210" r="150" stroke="var(--color-border)" strokeWidth="1.5" fill="none" />
@@ -239,31 +237,22 @@ export default function LebensuhrPage() {
</text>
))}
{/* One dot per lebensuhrRows entry, at its 12h-dial position
(hour mod 12) — filled for vormittags, hollow ring for
nachmittags, since the same dial position is hit twice a
day. */}
(hour mod 12), labeled with just the age. */}
{([
[10, "2:40", "vorm.", 326.2, 189.5, 379.4, 180.1, "start"],
[20, "5:20", "vorm.", 250.4, 320.9, 268.8, 371.6, "start"],
[30, "8:00", "vorm.", 107.8, 269.0, 61.0, 296.0, "end"],
[40, "10:40", "vorm.", 134.2, 119.6, 99.4, 78.2, "end"],
[50, "1:20", "nachm.", 285.8, 119.6, 320.6, 78.2, "start"],
[60, "4:00", "nachm.", 312.2, 269.0, 359.0, 296.0, "start"],
[70, "6:40", "nachm.", 169.6, 320.9, 151.2, 371.6, "end"],
[80, "9:20", "nachm.", 93.8, 189.5, 40.6, 180.1, "end"],
] as [number, string, string, number, number, number, number, "start" | "end"][]).map(([age, time, ampm, dx, dy, lx, ly, anchor]) => (
[10, 308.5, 192.6, 332.1, 188.5, "start"],
[20, 244.2, 304.0, 252.4, 326.5, "start"],
[30, 123.4, 260.0, 102.6, 272.0, "end"],
[40, 145.7, 133.4, 130.3, 115.0, "end"],
[50, 274.3, 133.4, 289.7, 115.0, "start"],
[60, 296.6, 260.0, 317.4, 272.0, "start"],
[70, 175.8, 304.0, 167.6, 326.5, "end"],
[80, 111.5, 192.6, 87.9, 188.5, "end"],
] as [number, number, number, number, number, "start" | "end"][]).map(([age, dx, dy, lx, ly, anchor]) => (
<g key={age}>
<line x1={dx} y1={dy} x2={lx} y2={ly} stroke="var(--color-border)" strokeWidth="1" />
<circle cx={dx} cy={dy} r="5" fill={ampm === "vorm." ? "var(--color-brand)" : "none"} stroke="var(--color-brand)" strokeWidth="2" />
<circle cx={dx} cy={dy} r="5" fill="var(--color-brand)" />
<text x={lx} y={ly} textAnchor={anchor} dominantBaseline="middle" className="fill-text-primary" style={{ fontSize: 15, fontWeight: 700 }}>
{age}
</text>
<text x={lx} y={ly + 15} textAnchor={anchor} dominantBaseline="middle" className="fill-text-muted" style={{ fontSize: 11 }}>
{time}
</text>
<text x={lx} y={ly + 27} textAnchor={anchor} dominantBaseline="middle" className="fill-text-muted" style={{ fontSize: 10, fontStyle: "italic" }}>
{ampm}
</text>
</g>
))}
<text x="210" y="196" textAnchor="middle" className="fill-text-primary" style={{ fontFamily: "var(--font-caveat)", fontSize: 30 }}>
@@ -274,9 +263,7 @@ export default function LebensuhrPage() {
</text>
</svg>
</div>
<p className="text-center text-body-sm text-text-muted -mt-1">
Gefüllter Punkt = vormittags, Ring = nachmittags jede Uhrzeit läuft schließlich zweimal am Tag über das Zifferblatt.
</p>
<p className="text-center text-body-sm text-text-muted -mt-1">Dein Alter auf dem Zifferblatt. Die genaue Uhrzeit dazu steht unten.</p>
{/* Still a real table (explicit "Alter"/"Uhrzeit" headers — a
dot-on-a-line version tried here first read ambiguous