Initial commit

public/static/css/kiosk.css

@@ -0,0 +1,27 @@
+body {
+    background-color: #000;
+    color: #fafafa;
+    font-family: Arial, Helvetica, sans-serif;
+}
+.mySlides {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+.img {
+    margin: auto;
+    position: absolute;
+    object-fit: contain;
+    width:100%; 
+    height:100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+/* Disable scrolling */
+html, body {margin: 0; height: 100%; overflow: hidden}

public/static/css/style.css

@@ -0,0 +1,52 @@
+html {
+    background-color: #fff;
+    background-image: url(../img/wallpaper.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    display: block;
+}
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+
+    color: #222;
+    background: #fff;
+
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 12px;
+    padding-top: 7px;
+
+    box-shadow: 0 0 4px #222;
+}
+@media screen and (max-width: 622px) {
+    body {
+        padding: 7px;
+        box-shadow: 0 0 0;
+    }
+    html {
+        background-image: none;
+    }
+}
+a {
+    color: #208fe3;
+    text-decoration: none;
+}
+a:hover {
+    color: #689dff;
+}
+h1, h2, h3, h4, h5, h6 {
+    line-height: 1.2;
+}
+li {
+    line-height: 1.5;
+}
+hr {
+    border: 0;
+    height: 3px;
+    background-image: linear-gradient(to right, #fff, #208fe3, #fff);
+}
+.animate-top{
+    position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}
+}

public/static/js/kiosk.js

@@ -0,0 +1,63 @@
+// A number for each slide
+var slideFuncs = {
+    1: function () {
+        // Prepare slide 3
+        var xhttp = new XMLHttpRequest();
+        xhttp.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+                document.getElementById("inspirationalQuote").src = this.responseText;
+            }
+        };
+        xhttp.open("GET", "https://inspirobot.me/api?generate=true", true);
+        xhttp.send();
+
+        // Then prepare slide 4
+        var xhttp = new XMLHttpRequest();
+        xhttp.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+                document.getElementById("userImage1").src = this.responseText;
+            }
+        };
+        xhttp.open("GET", "/fetch.php", true);
+        xhttp.send();
+    },
+    5: function () {
+        // Play video
+        var video = document.getElementById("slide5Vid");
+        video.pause();
+        video.currentTime = 0;
+        video.load();
+        video.play();
+    },
+};
+
+var slideIndex = 1;
+showSlides(slideIndex);
+
+function plusSlides(n) {
+    showSlides(slideIndex += n);
+}
+
+setInterval(() => {
+    plusSlides(1)
+}, 22000);
+
+function showSlides(n) {
+    var i;
+    var slides = document.getElementsByClassName("mySlides");
+    if (n > slides.length) {slideIndex = 1}    
+    if (n < 1) {slideIndex = slides.length}
+    for (i = 0; i < slides.length; i++) {
+        slides[i].style.display = "none";  
+    }
+    slides[slideIndex-1].style.display = "block";  
+
+    console.log("Slide " + slideIndex);
+
+    try {
+        slideFuncs[slideIndex]();
+    }
+    catch(err) {
+        console.log("Nothing to do for this slide: " + err)
+    }
+}