initial

templates/settings.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Soundboard settings</title>
+    <style>
+        body {
+            background-color: dimgray;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Settings:</h2>
+        <div>
+            <ul style="list-style: none;">
+                <li>Volume: <span id="vol">{{config.current_volume * 100}}</span> <input type="range" min="0" max="100"
+                        class="slider" id="volume_slider" onchange="update_volume_label()"
+                        value="{{config.current_volume * 100}}"></input>
+                    <button onclick="change_volume()">Change</button>
+                </li>
+                <li></li>
+                <li></li>
+                <li><button onclick="reload_sounds()">Reload Sounds</button></li>
+            </ul>
+        </div>
+        <script>
+            function change_volume() {
+                slider = document.getElementById('volume_slider')
+                vol_num = document.getElementById('vol')
+                volume = slider.value
+                fetch("/vol", { method: "POST", body: volume / 100, headers: { "Content-Type": "application/json" } })
+                    .then(x => x.body)
+                    .then(console.log("Changed_volume"))
+                vol_num.innerHTML = volume
+            }
+
+            function reload_sounds() {
+                fetch("/reload")
+                    .then(x => x.body)
+                    .then(console.log("Sounds reloaded"))
+            }
+
+            function update_volume_label() {
+                slider = document.getElementById('volume_slider')
+                vol_num = document.getElementById('vol')
+                volume = slider.value
+                vol_num.innerHTML = volume
+            }
+        </script>
+</body>
+
+</html>

templates/sounds.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=80%, initial-scale=1.0">
+    <title>Sounds</title>
+    <style>
+        body {
+            background-color: dimgray;
+        }
+
+        img {
+            transition: transform .7s;
+        }
+
+        img:hover {
+            transform: rotate(360deg);
+        }
+
+        .container {
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: row;
+            justify-content: center;
+            width: 80%;
+            /* flex-flow: column wrap; */
+        }
+
+        .item {
+            display: flex;
+            width: 100%;
+            min-height: 4rem;
+            /* border-color: red;
+            border-radius: 1px;
+            border-width: 10px; */
+            /* border-style: dashed; */
+            justify-content: space-evenly
+        }
+
+        .card {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 4;
+            flex-basis: 25%;
+            min-height: 256px;
+            max-width: 25%;
+            align-items: center;
+        }
+
+        .button {
+            width: 80%;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container" width="80%" height="100%">
+        {% for item in data %}
+        <div class="item card">
+            <h2 style="color: azure;">{{item['name']}}</h2>
+            <img src="static/imgs/button.png" class="button" onclick="play('{{item.route}}')" alt="Play sound"></img>
+        </div>
+
+        {% endfor %}
+    </div>
+</body>
+<script>
+    function play(sound) {
+        fetch("/" + sound)
+        console.log("Playing sound")
+    }
+</script>
+
+</html>