From 22212e56122dc96a1cdc45900a44d4244440825d Mon Sep 17 00:00:00 2001
From: Henri Bergius <henri.bergius@iki.fi>
Date: Wed, 26 Dec 2018 14:45:27 +0100
Subject: [PATCH] 35C3 variants of video player and visual paging

---
 35c3-video/index.html         |  85 ++++++++++++++++++++++++
 35c3-visual-paging/index.html | 118 ++++++++++++++++++++++++++++++++++
 2 files changed, 203 insertions(+)
 create mode 100644 35c3-video/index.html
 create mode 100644 35c3-visual-paging/index.html
diff --git a/35c3-video/index.html b/35c3-video/index.html
new file mode 100644
index 0000000..438ebc3
--- /dev/null
+++ b/35c3-video/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>c-base video player</title>
+    <link rel="stylesheet" href="../theme/c-base.css">
+    <style type="text/css">
+      body {
+        background-color: #000000;
+      }
+      video {
+        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;
+      }
+      #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;
+      }
+    </style>
+  </head>
+  <body>
+    <h1 id="screen-title">c-base @ 35C3</h1>
+    <span id="current-time"></span>
+    <script>
+      var fallback = 'base-full-loop-1-green-blue';
+      var prefix = 'http://c-flo.cbrp3.c-base.org/videos/';
+      document.addEventListener('DOMContentLoaded', function () {
+        var file = fallback;
+        if (window.location.search) {
+          file = decodeURIComponent(window.location.search.substr(1));
+        }
+        var video = document.createElement('video');
+        video.setAttribute('src', prefix + file + '.mp4');
+        video.autoplay = true;
+        video.loop = true;
+        document.body.appendChild(video);
+
+        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, 10);
+      });
+    </script>
+  </body>
+</html>
diff --git a/35c3-visual-paging/index.html b/35c3-visual-paging/index.html
new file mode 100644
index 0000000..7003264
--- /dev/null
+++ b/35c3-visual-paging/index.html
@@ -0,0 +1,118 @@
+<!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>
