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              display: none;
  52          }
  53
  54          #controls {
  55              z-index: 999;
  56              position: absolute;
  57              right: 0px;
  58              bottom: 0px;
  59          }
  60         </style>
  61           </head>
  62           <body>
  63         <div id="timer"></div>
  64         <audio autoplay loop controls id="audio">
  65             <source id="audio/1.mp4" src="" type="audio/webm" />
  66         </audio>
  67         <div id="controls">
  68             <button onclick="document.getElementById('audio').play()">Play</button>
  69             <button onclick="document.getElementById('audio').pause()">Pause</button>
  70         </div>
  71         <video autoplay muted loop id="video">
  72             <source src="video/1.mp4" type="video/mp4">
  73         </video>
  74     </body>
  75     <script>
  76      var timerElement = document.getElementById("timer");
  77      var units = ['weeks', 'days', 'hours', 'minutes', 'seconds', 'milliseconds'];
  78      var delay = 20;
  79
  80      var vidElement = document.getElementById('video');
  81      var activeVideo = Math.floor((Math.random() * 4) + 1);
  82      vidElement.src = "video/" + activeVideo + ".mp4";
  83
  84      var audioElement = document.getElementById('audio');
  85      var activeAudio = Math.floor((Math.random() * 2) + 1);
  86      audioElement.src = "audio/" + activeAudio + ".webm";
  87
  88      function pad(n, width, z) {
  89          z = z || '0';
  90          n = n + '';
  91          return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
  92      }
  93
  94      function formatUnit(timespan, unit) {
  95          var padding = {'weeks': 1, 'days': 1, 'hours': 1, 'minutes': 1, 'seconds': 2, 'milliseconds': 3};
  96          var unitDisplay = (timespan[unit] > 1 || timespan[unit] == 0) ? unit : unit.slice(0, -1);
  97          return units
  98              .slice(0, units.indexOf(unit) + 1)
  99              .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>' : '';
 100      }
 101
 102      function tick() {
 103          var timespan = countdown(null, new Date('January 4, 2021 03:47:00'), countdown.ALL);
 104          var text = timespan.value < 0 ? '<span class="num">Welcome to Perth!</span>' : units.reduce((c, v) => c + formatUnit(timespan, v), "");
 105          timerElement.innerHTML = text;
 106          setTimeout(tick, delay);
 107      }
 108
 109      setTimeout(tick, delay);
 110     </script>
 111 </html>