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'];
83 var vidElement = document.getElementById('video');
84 var activeVideo = Math.floor((Math.random() * numVideo) +
1);
85 vidElement.src =
"video/" + activeVideo +
".mp4";
87 var audioElement = document.getElementById('audio');
88 var activeAudio = Math.floor((Math.random() * numAudio) +
1);
89 audioElement.src =
"audio/" + activeAudio +
".webm";
91 function toggleAudio() {
92 var audio = document.getElementById(
"audio");
94 document.getElementById(
"toggle").classList.add('fa-pause');
95 document.getElementById(
"toggle").classList.remove('fa-play');
99 document.getElementById(
"toggle").classList.add('fa-play');
100 document.getElementById(
"toggle").classList.remove('fa-pause');
105 function pad(n, width, z) {
108 return n.length
>= width ? n : new Array(width - n.length +
1).join(z) + n;
111 function formatUnit(timespan, unit) {
112 var padding = {'weeks':
1, 'days':
1, 'hours':
1, 'minutes':
1, 'seconds':
2, 'milliseconds':
3};
113 var unitDisplay = (timespan[unit]
> 1 || timespan[unit] ==
0) ? unit : unit.slice(
0, -
1);
115 .slice(
0, units.indexOf(unit) +
1)
116 .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>' : '';
120 var timespan = countdown(null, new Date('January
4,
2021 11:
35:
00'), countdown.ALL);
121 var text = timespan.value <
0 ? '
<span class=
"num">Welcome to Perth!
</span>' : units.reduce((c, v) =
> c + formatUnit(timespan, v),
"");
122 timerElement.innerHTML = text;
123 setTimeout(tick, delay);
126 setTimeout(tick, delay);