Initial commit

2022-05-20 13:07:50 -05:00
parent 9b86a3b289
commit 62b3c739ab
21 changed files with 241 additions and 0 deletions
--- a/root/config/www/index.html
+++ b/root/config/www/index.html
@@ -0,0 +1,132 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>LEEKSPIN 2.0</title>
+    <meta name="description" content="Non-Flash version of the old meme">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Icon from stockio.com -->
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2ebc6d">
+    <meta name="msapplication-TileColor" content="#000000">
+    <meta name="theme-color" content="#000000">
+
+    <style>
+        body {
+            background: black;
+            margin: 0;
+            height: 97vh;
+        }
+
+        video {
+            display: block;
+            margin: 0 auto;
+            max-width: 100%;
+            height: 97vh;
+        }
+
+        h3 {
+            color: white;
+            margin: 0 auto;
+            text-align: center;
+            height: 3vh;
+        }
+
+        #overlay {
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            background: black;
+            opacity: 0.5;
+            z-index: 2;
+        }
+
+        #overlay img {
+            position: relative;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            display: block;
+            width: 30%;
+            height: 30%;
+            opacity: 0.8;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="overlay" onclick="play()">
+        <img alt="Play button" src="play-arrow.svg">
+    </div>
+    <video id="video1" loop preload="auto">
+        <source src="leekspin.webm" type="video/webm">
+    </video>
+    <audio id="audio1" loop preload="auto">
+        <source src="leekspin.opus" type="audio/ogg">
+    </audio>
+    <h3>You've been spinning for <span id="timer">00:00:00</span></h3>
+</body>
+
+<script>
+    var v1 = document.getElementById("video1");
+    var a1 = document.getElementById("audio1");
+    var o1 = document.getElementById("overlay");
+
+    var time
+    var output
+
+    function play() {
+        time = 0;
+        v1.play();
+        a1.play();
+        o1.style.display = "none";
+        StartTimer();
+    }
+
+    function convertOutput() {
+        var hours = 0
+        var mins = 0
+        var secs = time
+
+        while (secs >= 60) {
+            secs -= 60;
+            mins += 1;
+        }
+
+        while (mins >= 60) {
+            mins -= 60;
+            hours += 1;
+        }
+
+        if (secs < 10) {
+            secs = "0" + secs;
+        }
+
+        if (mins < 10) {
+            mins = "0" + mins;
+        }
+
+        if (hours < 10) {
+            hours = "0" + hours;
+        }
+
+        output = hours + ":" + mins + ":" + secs;
+    }
+
+    function StartTimer() {
+        time += 1;
+        convertOutput();
+        document.getElementById("timer").innerHTML = output;
+        self.setTimeout("StartTimer()", 1000);
+    }
+</script>
+
+</html>