generated from nathanwoodburn/python-webserver-template
Nathan Woodburn
7d0b9df50c
All checks were successful
Build Docker / BuildImage (push) Successful in 2m15s
57 lines
1.9 KiB
HTML
57 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Spotify | Nathan.Woodburn/</title>
|
|
<link rel="icon" href="/assets/img/favicon.png" type="image/png">
|
|
<link rel="stylesheet" href="/assets/css/index.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="spacer"></div>
|
|
<div class="centre">
|
|
<h1>Spotify Player</h1>
|
|
<a href="/restart" class="button">Start Server</a>
|
|
</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> |