2018-12-26 14:45:27 +01:00
<!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 >
2019-12-26 22:34:11 +01:00
< h1 id = "screen-title" > xHain + c-base @ 36C3< / h1 >
2018-12-26 14:45:27 +01:00
< 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 >
