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         <script src="js/countdown.min.js"></script>
   9         <style>
  10          html {
  11              height: 100%;
  12          }
  13
  14          body {
  15              color: white;
  16              font-family: 'Open Sans Condensed', sans-serif;
  17              display: grid;
  18              height: 100vh;
  19              margin: 0;
  20              place-items: center left;
  21              background-size: cover;
  22              background-position-y: 60%;
  23              background-position-x: 50%;
  24              height: 100%;
  25          }
  26
  27          #timer {
  28              margin-left: 100px;
  29              z-index: 999;
  30          }
  31
  32          .num {
  33              font-size: 100px;
  34              font-weight: bold;
  35          }
  36
  37          .unit {
  38              font-size: 50px;
  39              padding-left: 10px;
  40          }
  41
  42          #video {
  43              position: fixed;
  44              right: 0;
  45              bottom: 0;
  46              min-width: 100%;
  47              min-height: 100%;
  48          }
  49
  50          #audio {
  51              z-index: 999;
  52          }
  53         </style>
  54           </head>
  55           <body>
  56         <div id="timer"></div>
  57         <audio autoplay loop controls id="audio">
  58             <source id="audio/1.mp4" src="" type="audio/webm" />
  59         </audio>
  60         <video autoplay muted loop id="video">
  61             <source src="video/1.mp4" type="video/mp4">
  62         </video>
  63     </body>
  64     <script>
  65      var timerElement = document.getElementById("timer");
  66      var units = ['weeks', 'days', 'hours', 'minutes', 'seconds', 'milliseconds'];
  67      var delay = 20;
  68
  69      var vidElement = document.getElementById('video');
  70      var activeVideo = Math.floor((Math.random() * 4) + 1);
  71      vidElement.src = "video/" + activeVideo + ".mp4";
  72
  73      var audioElement = document.getElementById('audio');
  74      var activeAudio = Math.floor((Math.random() * 2) + 1);
  75      audioElement.src = "audio/" + activeAudio + ".webm";
  76
  77      function pad(n, width, z) {
  78          z = z || '0';
  79          n = n + '';
  80          return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
  81      }
  82
  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);
  86          return units
  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>' : '';
  89      }
  90
  91      function tick() {
  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);
  96      }
  97
  98      setTimeout(tick, delay);
  99     </script>
 100 </html>