1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
:root {
--color-gray: #cccccc;
--color-accent: #5180e9;
font-size: 16px;
font-family: sans-serif;
color: #555;
--cssx-children:
div#digital
h(div#analog, map(), seq(
div#seconds.analog-clock-hand,
div#minutes.analog-clock-hand,
div#hours.analog-clock-hand
));
}
html, body {
margin: 0;
padding: 0;
background-color: #0f172a;
color: #e2e8f0;
}
body * { box-sizing: border-box; }
#digital {
text-align: center;
padding: 1rem;
font-size: 1.5rem;
--text: "hello";
--js-expr:
new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
}).format(new Date());
--get-date: js-eval(get-var(--js-expr));
--cssx-on-mount: update(--text, call(--get-date));
--cssx-on-update: delay(1s) update(--text, call(--get-date));
}
#digital::after { content: var(--text); }
#analog {
background-color: #1e293b;
width: 200px;
height: 200px;
margin: 1rem auto;
border-radius: 50%;
position: relative;
--date: "";
--get-date: js-eval("new Date()");
--cssx-on-mount: update(--date, call(--get-date));
--cssx-on-update:
update('[data-element=seconds]', --angle, calc(360 * js-eval("new Date().getSeconds()")/60 - 90))
update('[data-element=minutes]', --angle, calc(360 * js-eval("new Date().getMinutes()")/60 - 90))
update('[data-element=hours]', --angle, calc(
360 * js-eval("new Date().getHours() % 12")/12 - 90
+ (30 * js-eval("new Date().getMinutes()")/60)
))
delay(1s)
update(--date, call(--get-date));
}
[data-element=seconds].analog-clock-hand {
--color: #cbd5e1;
--size: 70px;
}
[data-element=minutes].analog-clock-hand {
--color: #991b1b;
--size: 60px;
}
[data-element=hours].analog-clock-hand {
--color: #4f46e5;
--size: 40px;
height: 4px;
}
.analog-clock-hand {
--angle: 0;
--color: black;
--size: 80px;
width: var(--size);
height: 2px;
position: absolute;
top: 50%;
left: 50%;
transform-origin: 0% 50%;
border-radius: 5px;
transform: rotate(0deg);
--get-transform: string('rotate(', get-var(--angle), 'deg)');
--cssx-on-mount:
update(background-color, get-var(--color))
update(transform, call(--get-transform))
;
--cssx-on-update: update(transform, call(--get-transform));
}
|
