Zeitenrechner

Anyone tracking their own working hours does the same arithmetic every evening: clock-in, clock-out, subtract the break, compare against the daily target. Nobody needs an account, a subscription or an app for a task that size. So the Zeitenrechner is a single page with two modes: “balance” turns clock-in and clock-out into the day’s balance, “home time” inverts it and says when you can leave for an even day.

Output is decimal — +1.50h rather than 1:30 — because that is the form the number goes straight into a spreadsheet in. Target hours and break length are configurable and live in local storage, so they are already right on the next visit. The times themselves are never stored and never sent to a server; there simply is none. If you stay on the keyboard, four keys cover it: J for the current time, B to calculate, 1 and 2 for the mode, R to reset.

The calculation itself is short, but it has one case that is easy to miss: shifts crossing midnight. Someone who arrives at 22:00 and leaves at 06:00 did not work minus sixteen hours. A negative gross value means home time is on the next day, so 1,440 minutes get added back.

All of it is deliberately plain HTML, CSS and JavaScript — roughly 1,900 lines across five files. No framework, no build step, no bundle, and the only dependency is a local development server. For a tool that performs a subtraction and should then run untouched for years, that is the more honest construction: there is nothing that breaks in two years because a toolchain moved on.

The most visible part is the backdrop. The page pulls the current weather from the open Open-Meteo API, translates the WMO code into one of seven conditions with an intensity, and builds the scene from it: sky gradient and clouds in CSS, rain, snow and lightning as particles on a canvas. The number of drops follows from area and intensity rather than a fixed count, the loop pauses on a hidden tab, it never starts under reduced motion, and the last response is cached for fifteen minutes so the scene is there immediately.

That is where the actual problem came from, and it was not an effect but legibility. A number sitting on a sky that changes by the hour no longer has a reliable contrast ratio. The first attempt was a switch: dark sky, light text. It was not enough — the moment a bright cloud drifted behind the light text, the text was gone. The fix is halos: every piece of text sitting directly on the sky gets a shadow in the opposite tone of its glyphs. Light text carries a dark halo, dark text a light one, and both stay readable regardless of what passes behind them.

It runs as a static Vercel project serving the folder directly; a push to main deploys. It moved from a Cloudflare Pages address to its own subdomain, and the notice about that move lives in the same codebase: the script checks the hostname and deliberately does nothing on the new domain. On the old one it shows a banner that can normally be dismissed for 24 hours, and only for one in the final week before shutdown.