feat: Add a ton of features to make it better

templates/index.html

@@ -17,7 +17,41 @@
     </div>
 
     <div class="spacer"></div>
-    
+
+    <!-- Current track -->
+     <div class="mike-section" id="current-track-section">
+        <img src="/assets/img/favicon.png" alt="Song Logo" class="spotify-logo" id="song-logo">
+        <p id="current-track">Loading...</p>
+    </div>
+
+    <div class="mike-section" id="logs-section">
+        <h2>Server Logs</h2>
+        <pre id="server-logs"
+            style="background:#222;color:#eee;padding:10px;border-radius:5px;max-height:400px;overflow:auto;"></pre>
+    </div>
+    <script>
+        async function fetchLogs() {
+            const res = await fetch('/api/v1/logs');
+            const data = await res.json();
+            document.getElementById('server-logs').textContent = data.logs;
+        }
+        fetchLogs();
+        setInterval(fetchLogs, 5000); // Refresh logs every 5 seconds
+
+        async function fetchCurrentTrack() {
+            const res = await fetch('/api/v1/current_track');
+            if (res.ok) {
+                const data = await res.json();
+                document.getElementById('current-track').textContent = data.name;
+                document.getElementById('song-logo').src = data.cover || '/assets/img/favicon.png';
+            } else {
+                document.getElementById('current-track').textContent = 'No current track data available';
+            }
+        }
+        fetchCurrentTrack();
+        setInterval(fetchCurrentTrack, 5000); // Refresh current track every 5 seconds
+    </script>
+
 </body>
 
 </html>