initial

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>