index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3           <head>
   4                     <meta charset="utf-8">
   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>
  10         <style>
  11          html {
  12              height: 100%;
  13          }
  14
  15          body {
  16              color: white;
  17              font-family: 'Open Sans Condensed', sans-serif;
  18              display: grid;
  19              height: 100vh;
  20              margin: 0;
  21              place-items: center left;
  22              background-size: cover;
  23              background-position-y: 60%;
  24              background-position-x: 50%;
  25              height: 100%;
  26          }
  27
  28          #timer {
  29              margin-left: 100px;
  30              z-index: 999;
  31          }
  32
  33          .num {
  34              font-size: 100px;
  35              font-weight: bold;
  36          }
  37
  38          .unit {
  39              font-size: 50px;
  40              padding-left: 10px;
  41          }
  42
  43          #video {
  44              position: fixed;
  45              right: 0;
  46              bottom: 0;
  47              min-width: 100%;
  48              min-height: 100%;
  49          }
  50
  51          #audio {
  52              display: none;
  53          }
  54
  55          #controls {
  56              z-index: 999;
  57              position: absolute;
  58              right: 20px;
  59              bottom: 10px;
  60              font-size: 50px;
  61          }
  62         </style>
  63           </head>
  64           <body>
  65         <div id="timer"></div>
  66         <audio loop id="audio">
  67             <source id="audio/1.mp4" src="" type="audio/webm" />
  68         </audio>
  69         <div id="controls">
  70             <i id="toggle" onclick="toggleAudio()" class="fas fa-play"></i>
  71         </div>
  72         <video autoplay muted loop id="video">
  73             <source src="video/1.mp4" type="video/mp4">
  74         </video>
  75     </body>
  76     <script>
  77      var timerElement = document.getElementById("timer");
  78      var units = ['weeks', 'days', 'hours', 'minutes', 'seconds', 'milliseconds'];
  79      var numAudio  = 3;
  80      var numVideo = 5;
  81      var delay = 20;
  82
  83      var vidElement = document.getElementById('video');
  84      var activeVideo = Math.floor((Math.random() * numVideo) + 1);
  85      vidElement.src = "video/" + activeVideo + ".mp4";
  86
  87      var audioElement = document.getElementById('audio');
  88      var activeAudio = Math.floor((Math.random() * numAudio) + 1);
  89      audioElement.src = "audio/" + activeAudio + ".webm";
  90
  91      function toggleAudio() {
  92          var audio = document.getElementById("audio");
  93          if (audio.paused) {
  94              document.getElementById("toggle").classList.add('fa-pause');
  95              document.getElementById("toggle").classList.remove('fa-play');
  96              audio.play();
  97          } else {
  98              console.log('sup');
  99              document.getElementById("toggle").classList.add('fa-play');
 100              document.getElementById("toggle").classList.remove('fa-pause');
 101              audio.pause();
 102          }
 103      }
 104
 105      function pad(n, width, z) {
 106          z = z || '0';
 107          n = n + '';
 108          return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
 109      }
 110
 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);
 114          return units
 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>' : '';
 117      }
 118
 119      function tick() {
 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);
 124      }
 125
 126      setTimeout(tick, delay);
 127     </script>
 128 </html>