113 lines
3.1 KiB
HTML
113 lines
3.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>c-base photo gallery</title>
|
||
|
|
<link rel="stylesheet" href="../theme/c-base.css">
|
||
|
|
<style type="text/css">
|
||
|
|
img {
|
||
|
|
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;
|
||
|
|
transition: opacity 0.3s ease-in-out;
|
||
|
|
}
|
||
|
|
img#next {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
#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 class="station">
|
||
|
|
<img id="current">
|
||
|
|
<img id="next">
|
||
|
|
<h1 id="screen-title">c-base @ 35C3</h1>
|
||
|
|
<span id="current-time"></span>
|
||
|
|
<script>
|
||
|
|
var timeout;
|
||
|
|
var timer = 10000;
|
||
|
|
function getNextImage(images, current) {
|
||
|
|
const newImage = images[Math.floor(Math.random() * images.length)];
|
||
|
|
if (newImage === current && images.length > 1) {
|
||
|
|
// Flip the coin again
|
||
|
|
return getNextImage(images, current);
|
||
|
|
}
|
||
|
|
return newImage;
|
||
|
|
}
|
||
|
|
function showPicture(image, images) {
|
||
|
|
const current = document.getElementById('current');
|
||
|
|
const next = document.getElementById('next');
|
||
|
|
if (next.getAttribute('src') === image) {
|
||
|
|
next.id = 'current';
|
||
|
|
current.id = 'next';
|
||
|
|
timeout = setTimeout(() => {
|
||
|
|
showPicture(getNextImage(images, image), images);
|
||
|
|
}, timer);
|
||
|
|
}
|
||
|
|
next.onload = () => {
|
||
|
|
next.id = 'current';
|
||
|
|
current.id = 'next';
|
||
|
|
timeout = setTimeout(() => {
|
||
|
|
showPicture(getNextImage(images, image), images);
|
||
|
|
}, timer);
|
||
|
|
}
|
||
|
|
next.setAttribute('src', image);
|
||
|
|
}
|
||
|
|
document.addEventListener('DOMContentLoaded', function () {
|
||
|
|
fetch('http://c-flo.cbrp3.c-base.org/pictures/space')
|
||
|
|
.then(res => res.json())
|
||
|
|
.then((pictures) => {
|
||
|
|
const withUrl = pictures.map(p => 'http://c-flo.cbrp3.c-base.org' + p);
|
||
|
|
showPicture(getNextImage(withUrl, null), withUrl);
|
||
|
|
});
|
||
|
|
|
||
|
|
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>
|