<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>c-base visual paging</title>
    <link rel="stylesheet" href="../theme/c-base.css">
    <style type="text/css">
      main {
        display: block;
        min-height: 90%;
        min-width: 100%;
        text-align: center;
        width: 100vw;
        height: 90vh;
        position: absolute;
        top: 0px;
        left: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      p#announcement {
        margin-left: auto;
        margin-right: auto;
        padding-top: 7vmax;
        padding-bottom: 7vmax;
        color: #ffffff;
        font-size: 7vmin;
        text-align: center;
        width: 80vw;
      }
      p#announcement.tiny {
        font-size: 15vmin;
      }
      p#announcement.short {
        font-size: 10vmin;
      }
      p#announcement.long {
        font-size: 5vmin;
      }
      #current-time, h1 {
        font-family: 'ceva', sans-serif;
        font-weight: normal;
        font-size: 6vmin;
        line-height: 10vh;
        color: #fff;
        margin: 0px;
        padding: 0px;
      }
      #screen-title {
        text-align: left;
        padding-left: 3vw;
        position: absolute;
        left: 0px;
        bottom: 0px;
      }
      #current-time {
        position: absolute;
        right: 0px;
        bottom: 0px;
        text-align: right;
        padding-right: 3vw;
      }
      @media (orientation: portrait) {
        p#announcement {
          width: 95vw;
          padding-bottom: 3vmax;
        }
        p#announcement.tiny {
          font-size: 10vmin;
        }
      }
    </style>
  </head>
  <body class="station">
    <main>
      <p id="announcement"></p>
    </main>
    <h1 id="screen-title">c-base @ 35C3</h1>
    <span id="current-time"></span>
    <script>
      var fallback = 'Security advise. Due to intergalactic regulations, passengers are required to keep their antigravity generators with them at all times.';
      document.addEventListener('DOMContentLoaded', function () {
        var message = fallback;
        if (window.location.search) {
          message = decodeURIComponent(window.location.search.substr(1));
        }
        var container = document.getElementById('announcement');
        if (message.length < 80) {
          container.className = 'short';
        }
        if (message.length < 36) {
          container.className = 'tiny';
        }
        if (message.length > 300) {
          container.className = 'long';
        }
        container.innerHTML = message;

        var time = document.getElementById('current-time');
        var setTime = function () {
          var now = new Date();
          var hours = now.getHours();
          if (hours < 10) {
            hours = '0' + hours;
          }
          var minutes = now.getMinutes();
          if (minutes < 10) {
            minutes = '0' + minutes;
          }
          time.innerHTML = hours + ':' + minutes;
        };
        setTime();
        setInterval(setTime, 1);
      });
    </script>
  </body>
</html>