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 <link rel=
"stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity=
"sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin=
"anonymous" />
9 <script src=
"js/countdown.min.js"></script>
17 font-family: 'Open Sans Condensed', sans-serif;
21 place-items: center left;
22 background-size: cover;
23 background-position-y:
60%;
24 background-position-x:
50%;
65 <div id=
"timer"></div>
66 <audio loop
id=
"audio">
67 <source id=
"audio/1.mp4" src=
"" type=
"audio/webm" />
70 <i id=
"toggle" onclick=
"toggleAudio()" class=
"fas fa-play"></i>
72 <video autoplay muted loop
id=
"video">
73 <source src=
"video/1.mp4" type=
"video/mp4">
77 var timerElement = document.getElementById(
"timer");
78 var units = ['weeks', 'days', 'hours', 'minutes', 'seconds', 'milliseconds'];
81 var vidElement = document.getElementById('video');
82 var activeVideo = Math.floor((Math.random() *
4) +
1);
83 vidElement.src =
"video/" + activeVideo +
".mp4";
85 var audioElement = document.getElementById('audio');
86 var activeAudio = Math.floor((Math.random() *
2) +
1);
87 audioElement.src =
"audio/" + activeAudio +
".webm";
89 function toggleAudio() {
90 var audio = document.getElementById(
"audio");
92 document.getElementById(
"toggle").classList.add('fa-pause');
93 document.getElementById(
"toggle").classList.remove('fa-play');
97 document.getElementById(
"toggle").classList.add('fa-play');
98 document.getElementById(
"toggle").classList.remove('fa-pause');
103 function pad(n, width, z) {
106 return n.length
>= width ? n : new Array(width - n.length +
1).join(z) + n;
109 function formatUnit(timespan, unit) {
110 var padding = {'weeks':
1, 'days':
1, 'hours':
1, 'minutes':
1, 'seconds':
2, 'milliseconds':
3};
111 var unitDisplay = (timespan[unit]
> 1 || timespan[unit] ==
0) ? unit : unit.slice(
0, -
1);
113 .slice(
0, units.indexOf(unit) +
1)
114 .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>' : '';
118 var timespan = countdown(null, new Date('January
4,
2021 03:
47:
00'), countdown.ALL);
119 var text = timespan.value <
0 ? '
<span class=
"num">Welcome to Perth!
</span>' : units.reduce((c, v) =
> c + formatUnit(timespan, v),
"");
120 timerElement.innerHTML = text;
121 setTimeout(tick, delay);
124 setTimeout(tick, delay);