-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
86 lines (80 loc) · 3.14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Days until</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#main {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
font-size: 5vw;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 100vh;
}
.days {
color: #D45B0D;
}
.hours {
color: #EB4F19;
}
.minutes {
color: #D4210D;
}
.seconds {
color: #F60F30;
}
#days, #hours, #minutes, #seconds {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Ubuntu Mono', Courier, monospace;
display: inline-block;
text-align: right;
min-width: 2.2ch;
}
</style>
</head>
<body>
<div id="main">
<div>
<span class="days"><span id="days"></span> days</span> <span class="hours"><span id="hours"></span> hours</span> <span class="minutes"><span id="minutes"></span> minutes</span> <span class="seconds"><span id="seconds"></span> seconds</span><br><span id="until">until</span> <span id="name"></span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const set = (id, text) => { document.getElementById(id).innerText = text }
const queryString = window.location.search
const urlParams = new URLSearchParams(queryString)
const name = urlParams.get('name')
set('name', name)
const time = moment(urlParams.get('time')) // e.g. "2021-12-14T22:59:00Z"
maybePad = (t) => (t < 10 ? '0' : '') + t.toString()
update = () => {
let delta = time - moment()
const negative = delta < 0
if (negative) {
delta = -delta
}
const until = !negative ? 'until' : 'since'
document.title = `Days ${until} ${name}`
set('until', until)
const days = Math.floor(delta / (1000 * 60 * 60 * 24))
const hours = Math.floor(delta / (1000 * 60 * 60) - days * 24)
const minutes = Math.floor(delta / (1000 * 60) - (days * 24 + hours) * 60)
const seconds = Math.floor(delta / 1000 - ((days * 24 + hours) * 60 + minutes) * 60)
set('days', days)
set('hours', maybePad(hours))
set('minutes', maybePad(minutes))
set('seconds', maybePad(seconds))
}
update()
setInterval(update, 1000)
</script>
</body>
</html>