From 3abe2c3fbe95ab0a38045c359b808fadac6220ea Mon Sep 17 00:00:00 2001
From: Samuel Johnson <sjohnson1149@proton.me>
Date: Sun, 4 May 2025 00:25:10 -0400
Subject: Create music player GUI

---
 ui/html/music_player.tmpl.html | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 ui/html/music_player.tmpl.html

(limited to 'ui/html/music_player.tmpl.html')

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}}
-- 
cgit v1.2.3