Initial commit

2019-06-04 21:11:53 +02:00
commit 5f3ae55e51
3 changed files with 176 additions and 0 deletions
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="cs">
+<head>
+    <meta charset="UTF-8">
+    <title>Makerfaire Pátek</title>
+    <style>
+        body {
+            background-image: linear-gradient(to left, #ff1546 90%, transparent 100%);
+            height: 100vh;
+            margin: 0;
+            padding: 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        #bar {
+            z-index: -1;
+            position: absolute;
+            left:0;
+            min-width: 50%;
+            top:0;
+            bottom: 0;
+            background-image: linear-gradient(to right, #1aff45 90%, transparent 100%);
+            transition: min-width 2s;
+        }
+
+        .perc {
+            font-size: 5rem;
+        }
+
+        .perc::after {
+            content: '%';
+        }
+
+        .val {
+            font-size: 2rem;
+        }
+    </style>
+    <script>
+        document.addEventListener("DOMContentLoaded", () => {
+            setInterval(() => {
+                fetch("/stats").then((response) => {
+                    response.json().then((json) => {
+                        let n1 = Number(json[0]);
+                        let n2 = Number(json[1]);
+                        let v1 = document.getElementById("1");
+                        let v1f = n1 / (n1 + n2);
+                        v1.getElementsByClassName("val")[0].innerText = n1.toString();
+                        v1.getElementsByClassName("perc")[0].innerText = (n1 === 0 && n2 === 0) ? "50" : (n1 === 0 ? "0" : Number(v1f * 100).toFixed(0));
+                        let v2 = document.getElementById("2");
+                        let v2f = n2 / (n1 + n2);
+                        v2.getElementsByClassName("val")[0].innerText = n2.toString();
+                        v2.getElementsByClassName("perc")[0].innerText = (n1 === 0 && n2 === 0) ? "50" : (n2 === 0 ? "0" : Number(v2f * 100).toFixed(0));
+                        document.getElementById("bar").style.minWidth = v1f*100 + "%";
+                    });
+                });
+            }, 500)
+        })
+    </script>
+</head>
+<body>
+<div id="1" class="votes">
+    <div class="perc"></div>
+    <div class="val"></div>
+</div>
+<div id="2" class="votes">
+    <div class="perc"></div>
+    <div class="val"></div>
+</div>
+<div id="bar"></div>
+</body>
+</html>