Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove the lebensuhr clock-face SVG

Browse Source 
Went through several rounds (dot timeline, 24h dial, 12h dial,
decluttering) without landing right, and there's no way for me to
visually verify an SVG in this environment — kept guessing wrong.
Cutting it rather than continuing to iterate blind. The table stays
as the clear, working data source.
This commit is contained in:
Marco
2026-08-26 16:17:58 +00:00
parent 7b9e833560
commit 0fedb386b4
1 changed files with 0 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/lebensuhr/page.tsx
-70
View File
@@ -195,76 +195,6 @@ export default function LebensuhrPage() {
Wirst du 90 Jahre alt, sieht das ungefähr so aus:
</P>
{/* Decorative companion to the table below, not a replacement for
it — a real 12-hour dial (1–12, 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" />
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((h) => {
const deg = (h / 12) * 360 - 90;
const rad = (deg * Math.PI) / 180;
const major = h % 3 === 0;
const rIn = major ? 140 : 145;
const x1 = 210 + rIn * Math.cos(rad), y1 = 210 + rIn * Math.sin(rad);
const x2 = 210 + 150 * Math.cos(rad), y2 = 210 + 150 * Math.sin(rad);
return <line key={h} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--color-border)" strokeWidth={major ? 2 : 1.5} />;
})}
{/* The dial's own numerals, 1–12, same as a real clock face. */}
{([
[1, 292.5, 67.1, "start"],
[2, 352.9, 127.5, "start"],
[3, 375, 210, "start"],
[4, 352.9, 292.5, "start"],
[5, 292.5, 352.9, "start"],
[6, 210, 375, "middle"],
[7, 127.5, 352.9, "end"],
[8, 67.1, 292.5, "end"],
[9, 45, 210, "end"],
[10, 67.1, 127.5, "end"],
[11, 127.5, 67.1, "end"],
[12, 210, 45, "middle"],
] as [number, number, number, "start" | "middle" | "end"][]).map(([h, x, y, anchor]) => (
<text key={h} x={x} y={y} textAnchor={anchor} dominantBaseline="middle" className="fill-text-muted" style={{ fontSize: 12, fontWeight: 600 }}>
{h}
</text>
))}
{/* One dot per lebensuhrRows entry, at its 12h-dial position
(hour mod 12), labeled with just the age. */}
{([
[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}>
<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>
</g>
))}
<text x="210" y="196" textAnchor="middle" className="fill-text-primary" style={{ fontFamily: "var(--font-caveat)", fontSize: 30 }}>
dein
</text>
<text x="210" y="228" textAnchor="middle" className="fill-text-primary" style={{ fontFamily: "var(--font-caveat)", fontSize: 30 }}>
Leben
</text>
</svg>
</div>
<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
without them, and forced a horizontal scroll on mobile for