-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest.html
More file actions
113 lines (105 loc) · 3.72 KB
/
test.html
File metadata and controls
113 lines (105 loc) · 3.72 KB
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
107
108
109
110
111
112
113
<!DOCTYPE html><html>
<head>
<title>Old School Terminal Style</title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="
bg-[#002b36] text-[#00ff00]
font-monospace
h-screen
flex flex-col items-center justify-center
">
<p class="
text-center
" id="digital">00:00:00.000</p>
<hr class="
w-100
opacity-30
mt-2 mb-5
">
<div class="
w-100 h-100
ascpect-1/1
shrink-0
border border-current
rounded-full
flex items-center justify-center
relative
" id="analog">
<!--p(class="absolute bottom-3/4 left-3 transform -translate-x-1/2") I-->
<!-- p(class="absolute top-1/2 right-3 transform -translate-x-1/2") II-->
<p class="absolute top-1/2 right-2 transform -translate-y-1/2">III</p>
<!-- p(class="absolute bottom-3 left-3 transform -translate-x-1/2") IV-->
<!-- p(class="absolute bottom-6 left-3 transform -translate-x-1/2") V-->
<p class="absolute bottom-2 left-1/2 transform -translate-x-1/2">VI</p>
<!-- p(class="absolute top-3/4 right-3 transform -translate-x-1/2") VII-->
<!-- p(class="absolute top-3/4 left-3 transform -translate-x-1/2") VIII-->
<p class="absolute top-1/2 left-2 transform -translate-y-1/2">IX</p>
<!-- p(class="absolute top-3/4 right-6 transform -translate-x-1/2") X-->
<!-- p(class="absolute top-6 left-3 transform -translate-x-1/2") XI-->
<p class="absolute top-2 left-1/2 transform -translate-x-1/2">XII</p>
<div class="marker-1 absolute w-1/1 rotate-120"><span class="inline-block m-3 opacity-50">-</span></div>
<div class="marker-1 absolute w-1/1 rotate-150"><span class="inline-block m-3 opacity-50">-</span></div>
<div class="marker-1 absolute w-1/1 rotate-210"><span class="inline-block m-3 opacity-50">-</span></div>
<div class="marker-1 absolute w-1/1 rotate-240"><span class="inline-block m-3 opacity-50">-</span></div>
<div class="marker-1 absolute w-1/1 rotate-300"><span class="inline-block m-3 opacity-50">-</span></div>
<div class="marker-1 absolute w-1/1 rotate-330"><span class="inline-block m-3 opacity-50">-</span></div>
<div class="marker-1 absolute w-1/1 rotate-390"><span class="inline-block m-3 opacity-50">-</span></div>
<div class="marker-1 absolute w-1/1 rotate-420"><span class="inline-block m-3 opacity-50">-</span></div>
<div class="
w-1
h-60/200 mt-40/200
bg-current
absolute bottom-1/2
origin-bottom
rounded-l-full
" id="clock-hand-h"></div>
<div class="
w-0.5
h-80/200 mt-20/200
absolute bottom-1/2
bg-current
origin-bottom
rounded-l-full
" id="clock-hand-m"></div>
<div class="
w-0.25
h-90/200 mt-10/200
bg-red-500
absolute bottom-1/2
origin-bottom
rounded-l-full
" id="clock-hand-s"></div>
</div>
</body>
<script>
//throw 1
{
let fn = _ => {
var now = new Date();
;
;
{
let h = now.getHours() .toFixed().padStart(2, '0');
let m = now.getMinutes() .toFixed().padStart(2, '0');
let s = now.getSeconds() .toFixed().padStart(2, '0');
let ns = now.getMilliseconds().toFixed().padStart(3, '0');
document.getElementById('digital').textContent = `${h}:${m}:${s}.${ns}`;
}
;
;
;
{
// note:! vars are in fraction of 1
// example: instead of s=45, we get 0.75 (45 / 60 = 3/4 = 0.75)
let s = now.getSeconds() / 60;
let m = (now.getMinutes() + s) / 60;
let h = (now.getHours() + m) / 12;
document.getElementById('clock-hand-s').style.transform = `rotate(${s * 360}deg)`;
document.getElementById('clock-hand-m').style.transform = `rotate(${m * 360}deg)`;
document.getElementById('clock-hand-h').style.transform = `rotate(${h * 360}deg)`;
}
};
fn(); setInterval(fn, 1e3);
}
</script></html>