-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
70 lines (64 loc) · 2.19 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tron Clock</title>
<style>
@font-face {
font-family: 'Tron Font';
src: url('font/Tron.ttf') format('truetype'), url('font/Tron.otf') format('opentype'), url('font/Tron.woff') format('woff'), url('font/Tron.woff2') format('woff2'), url('font/Tron.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body {
color: #96c6a9;
background-color: #111;
font-size: 3.25em;
letter-spacing: 0.16em;
font-family: 'Tron Font';
}
#clock {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div id="clock"></div>
<script type="text/javascript">
window.setInterval('updateClock().then(r => r)', 10);
const clock = document.getElementById('clock');
async function updateClock() {
const date = new Date();
clock.innerHTML = [
parse(date.getFullYear().toString().slice(2, 4)),
parse(date.getMonth() + 1),
parse(date.getDate()),
parse(date.getHours()),
parse(date.getMinutes()),
parse(date.getSeconds()),
parse(date.getMilliseconds().toString().slice(0, -1))
].join(':');
}
function parse(value) {
// Add a leading zero to numbers less than ten.
return value.toString().padStart(2, '0');
}
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
window.onload = () => {
if (params.size) clock.style.fontSize = `${params.size}em`
if (params.spacing) clock.style.letterSpacing = `${params.spacing}em`
if (params.color) clock.style.color = `#${params.color}`
if (params.bg) document.body.style.backgroundColor = `#${params.bg}`
if (params.glow ) {clock.style.color = '#f0fff8'; clock.style.textShadow = `0 0 30px #80ffc0, 0 0 10px #00ff66`;}
}
</script>
</body>
</html>