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          iframe {
  51              display: none;
  52          }
  53         </style>
  54           </head>
  55           <body>
  56         <iframe width="560" height="315" id="audio" src="https://www.youtube.com/embed/B_QCJSTxqfI?controls=0&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  57         <div id="timer"></div>
  58         <video autoplay muted loop id="video">
  59             <source src="video/1.mp4" type="video/mp4">
  60         </video>
  61     </body>
  62     <script>
  63      var timerElement = document.getElementById("timer");
  64      var units = ['weeks', 'days', 'hours', 'minutes', 'seconds', 'milliseconds'];
  65      var delay = 20;
  66
  67      var vidElement = document.getElementById('video');
  68      var activeVideo = Math.floor((Math.random() * 4) + 1);
  69      vidElement.src = "video/" + activeVideo + ".mp4";
  70      vidElement.addEventListener('ended', function(e) {
  71          // update the active video index
  72          activeVideo = (++activeVideo) % vidSources.length;
  73          if(activeVideo === vidSources.length){
  74              activeVideo = 0;
  75          }
  76
  77          vidElement.src = vidSources[activeVideo];
  78          vidElement.play();
  79      });
  80
  81      var vid = document.getElementById("video");
  82      vid.playbackRate = 0.5;
  83
  84      var youtubeIds = ['VG1gcnCVJ8M', 'B_QCJSTxqfI'];
  85      var youtubeId = youtubeIds[Math.floor(Math.random() * youtubeIds.length)];
  86      var iframe = document.getElementById('audio');
  87      iframe.src = "https://www.youtube.com/embed/" + youtubeId + "?controls=0&autoplay=1"
  88
  89      function pad(n, width, z) {
  90          z = z || '0';
  91          n = n + '';
  92          return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
  93      }
  94
  95      function formatUnit(timespan, unit) {
  96          var padding = {'weeks': 1, 'days': 1, 'hours': 1, 'minutes': 1, 'seconds': 2, 'milliseconds': 3};
  97          var unitDisplay = (timespan[unit] > 1 || timespan[unit] == 0) ? unit : unit.slice(0, -1);
  98          return units
  99              .slice(0, units.indexOf(unit) + 1)
 100              .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>' : '';
 101      }
 102
 103      function tick() {
 104          var timespan = countdown(null, new Date('January 4, 2021 03:47:00'), countdown.ALL);
 105          var text = timespan.value < 0 ? '<span class="num">Welcome to Perth!</span>' : units.reduce((c, v) => c + formatUnit(timespan, v), "");
 106      timerElement.innerHTML = text;
 107      setTimeout(tick, delay);
 108      }
 109
 110      setTimeout(tick, delay);
 111     </script>
 112 </html>