radu/py-dj
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: split frontend into separate folder

Browse source
This commit is contained in:
Radu C. Martin 2025-04-15 18:36:26 +02:00
parent 4bd6ad85e3
commit d265b92f1d
3 changed files with 79 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

56
ui/index.html Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Music Player</title>
<style>
body { font-family: sans-serif; padding: 1rem; }
button { margin: 0.5rem; }
#queueList { margin-top: 1rem; }
</style>
</head>
<body>
<div style="font-family: sans-serif; max-width: 600px; margin: auto;">
<h2>🎵 Dashdio</h2>
<div id="nowPlaying">
<strong>Artist:</strong> <span id="trackArtist">-</span><br>
<strong>Title:</strong> <span id="trackTitle">-</span><br>
<strong>Status:</strong> <span id="playbackState">-</span><br>
<div style="margin-top: 10px;">
<progress id="progressBar" value="0" max="100" style="width: 100%; height: 20px;"></progress>
<div style="text-align: right;">
<span id="elapsedTime">0:00</span> / <span id="totalTime">0:00</span>
</div>
</div>
</div>
<div style="margin-top: 20px;">
<label for="volumeSlider"><strong>🔊 Volume:</strong> <span id="volumeValue">1</span></label><br>
<input type="range" min="0" max="1" step="0.01" id="volumeSlider" oninput="setVolume(this.value)">
<button onclick="play()">Play/Pause</button>
<button onclick="stop()">Stop</button>
<button onclick="skip()">Skip</button>
</div>
<h3 style="margin-top: 30px;">📃 Queue</h3>
<input type="text" id="trackUrl" placeholder="Track URL">
<button onclick="addToQueue()">Add to Queue</button>
<table id="queueTable" style="width: 100%; border-collapse: collapse; font-size: 0.95em;">
<thead>
<tr style="background-color: #f0f0f0;">
<th style="text-align: left; padding: 8px;">#</th>
<th style="text-align: left; padding: 8px;">Artist</th>
<th style="text-align: left; padding: 8px;">Title</th>
<th style="text-align: right; padding: 8px;">Duration</th>
<th style="text-align: center; padding: 8px;">Actions</th>
</tr>
</thead>
<tbody id="queueBody">
<!-- Filled by JS -->
</tbody>
</table>
</div>
<script src="script.js"></script>
</body>
</html>