<!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">
body {
background-color: #000000;
}
img {
position: absolute;
border: none;
display: block;
text-align: center;
object-fit: cover;
object-position: center center;
width: 100vw;
height: 90vh;
transition: opacity 1s 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>
<main>
<img id="current">
<img id="next">
</main>
<h1 id="screen-title">xHain + c-base @ 36C3</h1>
<span id="current-time"></span>
<script>
var timeout;
var timer = 5000;
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 () {
let gallery = 'space';
if (window.location.search) {
gallery = decodeURIComponent(window.location.search.substr(1));
}
fetch(`http://c-flo.cbrp3.c-base.org/pictures/${gallery}`)
.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>