<!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>