feat: Add a ton of features to make it better

templates/assets/css/index.css

@@ -8,15 +8,12 @@ h1 {
     padding: 0;
 }
 .centre {
-    margin-top: 10%;
+    margin-top: 6%;
     text-align: center;
 }
-a {
-    color: #ffffff;
-    text-decoration: none;
-}
-a:hover {
-    text-decoration: underline;
+
+.spacer {
+    height: 40px;
 }
 
 /* Mike section styling */
@@ -26,32 +23,78 @@ a:hover {
     margin-left: auto;
     margin-right: auto;
     padding: 20px;
-    background-color: rgba(50, 50, 50, 0.3);
-    border-radius: 8px;
+    background-color: rgba(50, 50, 50, 0.5);
+    border-radius: 12px;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
+    text-align: center;
 }
 
 .mike-section h2 {
     color: #f0f0f0;
     margin-top: 0;
+    font-size: 1.5em;
 }
 
 .mike-section p {
     line-height: 1.6;
     margin-bottom: 15px;
+    font-size: 1.1em;
 }
 
+.spotify-logo {
+    width: 90%;
+    object-fit: cover;
+    border-radius: 12px;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
+    background: #222;
+    border: 2px solid #444;
+}
+
+#current-track-section {
+    margin-top: 20px;
+}
+
+#current-track {
+    font-size: 1.2em;
+    color: #fff;
+    margin-top: 8px;
+    margin-bottom: 0;
+    font-weight: 500;
+}
+
+#logs-section {
+    margin-top: 40px;
+}
+
+#server-logs {
+    font-family: monospace;
+    font-size: 14px;
+    background: #222;
+    color: #eee;
+    padding: 10px;
+    border-radius: 5px;
+    max-height: 400px;
+    overflow: auto;
+    text-align: left;
+    box-shadow: 0 1px 6px rgba(0,0,0,0.12);
+}
+
+/* Button improvements */
 .button {
     display: inline-block;
-    padding: 10px 20px;
-    background-color: #ffffff;
-    color: #000000;
+    padding: 12px 28px;
+    background-color: #1db954;
+    color: #fff;
     border-radius: 5px;
     text-decoration: none;
-    transition: background-color 0.3s ease;
-    border: 1px solid #ffffff;
+    transition: background 0.2s, color 0.2s;
+    border: none;
+    font-size: 1.1em;
+    font-weight: 600;
+    box-shadow: 0 1px 6px rgba(0,0,0,0.10);
+    margin-top: 18px;
 }
 .button:hover {
-    background-color: #000000;
-    color: #ffffff;
-    border: 1px solid #ffffff;
+    background-color: #14833b;
+    color: #fff;
 }

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>