A dead simple time tracker that keeps everything in local storage. Next.js, no accounts and no server.
handcodedlocalstoragenextjsreactself-hostedserverlesstime-trackingtimer
1.tiles {
2 display: grid;
3 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
4 gap: 10px;
5 margin-bottom: 32px;
6}
7
8.tile {
9 position: relative;
10 background: var(--surface);
11 border: 1px solid var(--border);
12 border-radius: var(--radius);
13 padding: 14px 16px;
14 display: flex;
15 flex-direction: column;
16 gap: 6px;
17 transition: border-color 180ms ease;
18}
19
20.tile:hover {
21 border-color: var(--border-green);
22}
23
24.tileLabel {
25 font-size: 0.65em;
26 font-weight: 600;
27 text-transform: uppercase;
28 letter-spacing: 0.22em;
29 color: var(--text-muted);
30}
31
32.tileValue {
33 font-size: 1.6em;
34 font-variant-numeric: tabular-nums;
35 font-weight: 700;
36 color: var(--text-bright);
37 letter-spacing: 0.01em;
38}
39
40.chartCard {
41 background: var(--surface);
42 border: 1px solid var(--border);
43 border-radius: var(--radius);
44 padding: 16px;
45 margin-bottom: 20px;
46 transition: border-color 180ms ease;
47}
48
49.chartCard:hover {
50 border-color: var(--border-green);
51}