Create music player GUI

1 files changed, 28 insertions, 0 deletions

diff --git a/ui/html/music_player.tmpl.html b/ui/html/music_player.tmpl.html
new file mode 100644
index 0000000..e58a9c0
--- /dev/null
+++ b/ui/html/music_player.tmpl.html
@@ -0,0 +1,28 @@
+{{define "music_player"}}
+<script type="module" src="/static/get?file=music_player.js"></script>
+<div id="music_player">
+    <div class="vert_align center">
+        <div class="vert_align">
+            <div id="mp_track_name">Track Name</div>
+            <div id="mp_track_artist">Artist</div>
+        </div>
+        <div class="vert_align">
+            <div id="mp_prev_track" class="vert_align" onclick="mpPrevTrack()">
+                <img src="/static/get?file=images/chevron_left.svg" alt="Previous Track">
+            </div>
+            <div id="mp_pp_track" class="vert_align" onclick="mpPpTrack()">
+                <img src="/static/get?file=images/play.svg" alt="Play">
+            </div>
+            <div id="mp_next_track" class="vert_align" onclick="mpNextTrack()">
+                <img src="/static/get?file=images/chevron_right.svg" alt="Next Track">
+            </div>
+        </div>
+        <div class="slider_container vert_align">
+            <div id="mp_current_time" class="vert_align">00:00</div>
+            <input type="range" class="vert_align" min="1" max="100" value="0" class="seek_slider" onchange="mpSeekTo()">
+            <div id="mp_total_duration" class="vert_align">00:00</div>
+        </div>
+        <select name="Tracks" id="mp_tracks"></select>
+    </div>
+</div>
+{{end}}