Gallery page for 35C3

2018-12-26 19:17:27 +01:00 · 2018-12-26 19:17:27 +01:00 · e989a80917
commit e989a80917
parent 5e7c718e39
1 changed files with 112 additions and 0 deletions
--- a/35c3-gallery/index.html
+++ b/35c3-gallery/index.html
@ -0,0 +1,112 @@
+<!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>