5 <title>HTTP (Hurry, Time To Perth!)
</title>
6 <link rel=
"preconnect" href=
"https://fonts.gstatic.com">
7 <link href=
"https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel=
"stylesheet">
8 <script src=
"js/countdown.min.js"></script>
16 font-family: 'Open Sans Condensed', sans-serif;
20 place-items: center left;
21 background-size: cover;
22 background-position-y:
60%;
23 background-position-x:
50%;
56 <div id=
"timer"></div>
57 <audio id=
"audio" autoplay
>
58 <source id=
"audio/1.mp4" src=
"" type=
"audio/mp3" />
60 <video autoplay muted loop
id=
"video">
61 <source src=
"video/1.mp4" type=
"video/mp4">
65 var timerElement = document.getElementById(
"timer");
66 var units = ['weeks', 'days', 'hours', 'minutes', 'seconds', 'milliseconds'];
69 var vidElement = document.getElementById('video');
70 var activeVideo = Math.floor((Math.random() *
4) +
1);
71 vidElement.src =
"video/" + activeVideo +
".mp4";
73 var audioElement = document.getElementById('audio');
74 var activeAudio = Math.floor((Math.random() *
2) +
1);
75 audioElement.src =
"audio/" + activeAudio +
".webm";
77 function pad(n, width, z) {
80 return n.length
>= width ? n : new Array(width - n.length +
1).join(z) + n;
83 function formatUnit(timespan, unit) {
84 var padding = {'weeks':
1, 'days':
1, 'hours':
1, 'minutes':
1, 'seconds':
2, 'milliseconds':
3};
85 var unitDisplay = (timespan[unit]
> 1 || timespan[unit] ==
0) ? unit : unit.slice(
0, -
1);
87 .slice(
0, units.indexOf(unit) +
1)
88 .reduce((c,v) =
> c + timespan[v],
0)
> 0 ? '
<div class=
"chunk"><span class=
"num">' + pad(timespan[unit], padding[unit]) + '
</span><span class =
"unit">' + unitDisplay + '
</span></div>' : '';
92 var timespan = countdown(null, new Date('January
4,
2021 03:
47:
00'), countdown.ALL);
93 var text = timespan.value <
0 ? '
<span class=
"num">Welcome to Perth!
</span>' : units.reduce((c, v) =
> c + formatUnit(timespan, v),
"");
94 timerElement.innerHTML = text;
95 setTimeout(tick, delay);
98 setTimeout(tick, delay);