-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (99 loc) · 3.38 KB
/
index.html
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
<!doctype html>
<html class="borderless fill">
<head>
<title>Unicode Clock</title>
<style>
.borderless {
border: 0;
margin: 0;
padding: 0;
}
.fill {
width: 100%;
height: 100%;
}
.scaleToViewport {
font-size: 75vmin;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
</style>
<script>
var timeElement;
const clocks =
"\u{1F55b}" + // 12:00
"\u{1F567}" + // 12:30
"\u{1F550}" + // 1:00
"\u{1F55c}" + // 1:30
"\u{1F551}" + // 2:00
"\u{1F55d}" +
"\u{1F552}" + // 3:00
"\u{1F55e}" +
"\u{1F553}" + // 4:00
"\u{1F55f}" +
"\u{1F554}" + // 5:00
"\u{1F560}" +
"\u{1F555}" + // 6:00
"\u{1F561}" +
"\u{1F556}" + // 7:00
"\u{1F562}" +
"\u{1F557}" + // 8:00
"\u{1F563}" +
"\u{1F558}" + // 9:00
"\u{1F564}" +
"\u{1F559}" + // 10:00
"\u{1F565}" +
"\u{1F55a}" + // 11:00
"\u{1F566}" +
"\u{1F55b}" + // 12:00
"\u{1F567}" + // 12:30
"\u{1F550}" + // 1:00
"\u{1F55c}" + // 1:30
"\u{1F551}" + // 2:00
"\u{1F55d}" +
"\u{1F552}" + // 3:00
"\u{1F55e}" +
"\u{1F553}" + // 4:00
"\u{1F55f}" +
"\u{1F554}" + // 5:00
"\u{1F560}" +
"\u{1F555}" + // 6:00
"\u{1F561}" +
"\u{1F556}" + // 7:00
"\u{1F562}" +
"\u{1F557}" + // 8:00
"\u{1F563}" +
"\u{1F558}" + // 9:00
"\u{1F564}" +
"\u{1F559}" + // 10:00
"\u{1F565}" +
"\u{1F55a}" + // 11:00
"\u{1F566}" +
"\u{1F55b}"; // 12:00
function updateTime() {
const minutesPerHour = 60;
const secondsPerMinute = 60;
const thirtyMinutesInSeconds = 30 * secondsPerMinute;
var currentTime = new Date();
var secondsToday =
(currentTime.getHours() * minutesPerHour +
currentTime.getMinutes()) * secondsPerMinute +
currentTime.getSeconds();
var index = Math.round(secondsToday / thirtyMinutesInSeconds);
var clock = clocks.substr(index * 2, 2);
timeElement.textContent = clock;
}
document.addEventListener("DOMContentLoaded", function () {
timeElement = document.getElementById("time");
setInterval(updateTime, 60 * 1000);
updateTime();
});
</script>
</head>
<body class="borderless fill">
<div id="time" class="fill center scaleToViewport"></div>
</body>
</html>