A dead simple time tracker that keeps everything in local storage. Next.js, no accounts and no server.
handcodedlocalstoragenextjsreactself-hostedserverlesstime-trackingtimer
1.backdrop {
2 position: fixed;
3 inset: 0;
4 background: rgba(10, 9, 7, 0.72);
5 backdrop-filter: blur(3px);
6 display: flex;
7 align-items: center;
8 justify-content: center;
9 z-index: 100;
10 animation: fade 180ms ease;
11}
12
13.panel {
14 max-width: 720px;
15 width: calc(100% - 48px);
16 background: var(--surface);
17 border: 1px solid var(--border-green);
18 border-radius: var(--radius);
19 box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
20 padding: 22px 24px 24px;
21}
22
23.header {
24 display: flex;
25 justify-content: space-between;
26 align-items: center;
27 padding-bottom: 14px;
28 border-bottom: 1px solid var(--border);
29 margin-bottom: 18px;
30}
31
32.title {
33 font-size: 0.82em;
34 letter-spacing: 0.28em;
35 text-transform: uppercase;
36 font-weight: 600;
37 color: var(--green-bright);
38}
39
40.close {
41 background: transparent;
42 border: 1px solid var(--border);
43 color: var(--text-muted);
44 font-size: 0.9em;
45 width: 28px;
46 height: 28px;
47 border-radius: 2px;
48 cursor: pointer;
49 line-height: 1;
50}
51
52.close:hover {
53 border-color: var(--terracotta);
54 color: var(--terracotta-bright);
55 background: var(--terracotta-dim);
56}
57
58.grid {
59 display: grid;
60 grid-template-columns: repeat(2, 1fr);
61 gap: 22px 32px;
62}
63
64@media (max-width: 599.99px) {
65 .grid {
66 grid-template-columns: 1fr;
67 }
68}
69
70.column {
71 display: flex;
72 flex-direction: column;
73 gap: 8px;
74}
75
76.sectionLabel {
77 font-size: 0.66em;
78 text-transform: uppercase;
79 letter-spacing: 0.22em;
80 font-weight: 600;
81 color: var(--text-muted);
82 margin-bottom: 4px;
83}
84
85.row {
86 display: flex;
87 align-items: center;
88 gap: 12px;
89 font-size: 0.84em;
90}
91
92.key {
93 font-family: var(--font-mono);
94 display: inline-block;
95 min-width: 56px;
96 text-align: center;
97 padding: 4px 8px;
98 background: var(--bg-deep);
99 border: 1px solid var(--border);
100 border-radius: 2px;
101 color: var(--green-bright);
102 font-size: 0.9em;
103 letter-spacing: 0.04em;
104}
105
106.label {
107 color: var(--text);
108 letter-spacing: 0.02em;
109}
110
111@keyframes fade {
112 from {
113 opacity: 0;
114 }
115 to {
116 opacity: 1;
117 }
118}