From 42543b251ceec87e7e2944bb158f2673166c9d60 Mon Sep 17 00:00:00 2001
From: Henri Bergius <henri.bergius@iki.fi>
Date: Thu, 30 Nov 2017 16:41:23 +0100
Subject: [PATCH] New visual paging screen

---
 visual-paging/index.html | 71 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 visual-paging/index.html
diff --git a/visual-paging/index.html b/visual-paging/index.html
new file mode 100644
index 0000000..efef7f2
--- /dev/null
+++ b/visual-paging/index.html
@@ -0,0 +1,71 @@
+<!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">
+      h1 {
+        width: 100vw;
+        text-align: center;
+        position: absolute;
+        font-size: 6vh;
+        top: 0px;
+        left: 0px;
+      }
+      main {
+        width: 100vw;
+        height: 100vh;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      p#announcement {
+        padding-top: 7vh;
+        padding-bottom: 7vh;
+        color: #ffffff;
+        font-size: 7vh;
+        text-align: center;
+        width: 80vw;
+      }
+      p#announcement.tiny {
+        font-size: 15vh;
+      }
+      p#announcement.short {
+        font-size: 10vh;
+      }
+      p#announcement.long {
+        font-size: 5vh;
+      }
+    </style>
+  </head>
+  <body class="station">
+    <h1>c-base space station</h1>
+    <main>
+      <p id="announcement"></p>
+    </main>
+    <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 < 100) {
+          container.className = 'short';
+        }
+        if (message.length < 40) {
+          container.className = 'tiny';
+        }
+        if (message.length > 300) {
+          container.className = 'long';
+        }
+        container.innerHTML = message;
+      });
+    </script>
+  </body>
+</html>
