A dead simple time tracker that keeps everything in local storage. Next.js, no accounts and no server.
handcodedlocalstoragenextjsreactself-hostedserverlesstime-trackingtimer
1@keyframes fadeUp {
2 from {
3 opacity: 0;
4 transform: translateY(40px);
5 }
6 to {
7 opacity: 1;
8 transform: translateY(0);
9 }
10}
11
12.background {
13 position: fixed;
14 z-index: -1;
15 top: 0;
16 right: 0;
17 bottom: 0;
18 left: 0;
19 background:
20 radial-gradient(
21 circle at 20% 15%,
22 rgba(107, 158, 120, 0.08) 0%,
23 transparent 55%
24 ),
25 radial-gradient(
26 circle at 80% 85%,
27 rgba(201, 168, 76, 0.05) 0%,
28 transparent 60%
29 ),
30 radial-gradient(
31 circle at 50% 50%,
32 rgba(196, 112, 85, 0.04) 0%,
33 transparent 70%
34 );
35 pointer-events: none;
36}
37
38.grid {
39 display: grid;
40 grid-template-columns: 60px 1fr 80px;
41 grid-template-rows: 1fr;
42 width: 100%;
43 min-height: 100vh;
44}
45
46@media (max-width: 1023.99px) {
47 .grid {
48 grid-template-columns: 0 1fr 0;
49 }
50}
51
52.main {
53 grid-area: 1 / 2;
54 justify-content: center;
55 align-items: center;
56 display: flex;
57 flex-direction: column;
58 min-height: 100vh;
59 padding: 48px 24px;
60 animation: fadeUp 500ms ease-out forwards;
61}