2 files changed, 72 insertions, 0 deletions
diff --git a/static/app.css b/static/app.css
new file mode 100644
index 0000000..a52ea8d
--- /dev/null
+++ b/static/app.css
@@ -0,0 +1,56 @@
+.pane {
+    margin: auto;
+    padding: 4px 10px;
+    width: 75%;
+
+    background-color: black;
+    color: white;
+    opacity: 0.8;
+
+    border-radius: 20px;
+    box-shadow: 0px 0px 15px 2px #410f5e;
+}
+
+#bg-image {
+    position: fixed;
+
+    top: 0;
+    left: 0;
+
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    filter: blur(0.2rem);
+    -webkit-filter: blur(0.2rem);
+
+    height: 100%;
+    width: 100%;
+
+    z-index: -1;
+}
+
+#music_player {
+    background-color: black;
+    color: white;
+    padding: 5px;
+
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.vert_align {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.center {
+    width: 100%;
+    text-align: center;
+}
+
+.button_deck {
+    width: 100%;
+    height: 5%;
+}
diff --git a/static/music_player.js b/static/music_player.js
new file mode 100644
index 0000000..8d84774
--- /dev/null
+++ b/static/music_player.js
@@ -0,0 +1,16 @@
+async function mpFetchAsync (url) {
+    let response = await fetch(url);
+    let data = await response.json();
+
+    return data;
+}
+
+const trackList = await mpFetchAsync("/audio");
+let trackSelector = document.getElementById("mp_tracks");
+
+trackList.forEach((track) => {
+    let option = document.createElement("option");
+    option.text = track;
+
+    trackSelector.add(option, 0);
+});