Replaced everything with id. Also #last-played renamed to #last-songs. Everything in #player got a prefix radio-.

web/assets/css/main.css

@@ -125,7 +125,7 @@ section { margin-top: 1rem; }
 
 #player p { text-indent: 1rem; }
 
-button[name="play"] {
+button#radio-play {
 	-webkit-mask-image: url(/assets/img/play.svg);
 	background-color: var(--primary-color);
 	height: 3rem;
@@ -133,9 +133,9 @@ button[name="play"] {
 	min-width: 3rem;
 	width: 3rem; }
 
-button[name="play"]:hover { text-decoration: none; }
+button#radio-play:hover { text-decoration: none; }
 
-input[name="volume"] {
+input#radio-volume {
 	accent-color: var(--primary-color);
 	height: 5rem;
 	margin-left: .5rem; }
@@ -150,12 +150,12 @@ input[name="volume"] {
 	flex-direction: column;
 }
 
-#last-played {
+#last-songs {
 	margin: 0 auto;
 	min-width: 80%;
 	width: 80%; }
 
-#last-played tbody tr {
+#last-songs tbody tr {
 	display: grid;
 	gap: .5rem;
 	grid-template-columns: 3rem 2rem 1fr; }
@@ -168,7 +168,7 @@ footer {
 @media screen and (max-width: 640px) {
 	header { display: block; }
 
-	#logo {
+	header svg {
 		margin: 0 auto;
 		width: 100%; }
 

web/assets/js/main.js

@@ -18,29 +18,29 @@ function updateLastPlayedSong() {
 	fetch("/lastsong")
 	.then(r => r.json())
 	.then(last_played => {
-		if ($("last-played").firstChild === null)
-			$("last-played").appendChild(document.createElement("tbody"))
-		else if (last_played.time == $("last-played").firstChild.lastChild.firstChild.innerText)
+		if ($("last-songs").firstChild === null)
+			$("last-songs").appendChild(document.createElement("tbody"))
+		else if (last_played.time == $("last-songs").firstChild.lastChild.firstChild.innerText)
 			return;
 
-		if ($("last-played").firstChild.children.length == 10)
-			$("last-played").firstChild.firstChild.remove();
+		if ($("last-songs").firstChild.children.length == 10)
+			$("last-songs").firstChild.firstChild.remove();
 
-		let row = $("last-played").insertRow();
+		let row = $("last-songs").insertRow();
 		row.insertCell().appendChild(document.createTextNode(last_played.time));
 		row.insertCell().appendChild(document.createTextNode(last_played.listeners == 0 ? "" : last_played.listeners));
 		row.insertCell().appendChild(document.createTextNode(last_played.song));
 	});
 }
 
-document.getElementsByName("update")[0].addEventListener("click", () => {
+$("radio-update").addEventListener("click", () => {
 	updateLastPlayedSong();
 	updateRadioStatus(); });
 
 setInterval(updateRadioStatus, 45000);
 setInterval(updateLastPlayedSong, 45000);
 
-const volume = document.getElementsByName("volume");
+const volume = $("radio-volume");
 
 volume.addEventListener("input", e => {
 	audio.volume = parseFloat(e.target.value) / 100.0; });
@@ -55,12 +55,12 @@ audio.addEventListener("timeupdate", e => {
 	const s = Math.floor(ct % 60);
 	const m = Math.floor((ct / 60) % 60);
 	const h = Math.floor(ct / 3600);
-	document.getElementsByClassName("elapsed")[0].textContent = `${h}h ${m}m ${s}s`; });
+	$("radio-elapsed").textContent = `${h}h ${m}m ${s}s`; });
 
 $("player").firstChild.style.display = "flex";
 $("player").style.display = "flex";
 
-document.getElementsByName("play")[0].addEventListener("click", e => {
+$("radio-play").addEventListener("click", e => {
 	if (audio.paused) {
 		audio.src = audio_src;
 		audio.play();

web/templates/index.pug

@@ -39,9 +39,9 @@ html(lang='en')
             div#player
                 div
                     div
-                        button(name='play')
-                        small.elapsed 0h 0m 0s
-                    input(type="range" name="volume" min="0" max="100" orient="vertical")
+                        button#radio-play
+                        small#radio-elapsed 0h 0m 0s
+                    input#radio-volume(type="range" min="0" max="100" orient="vertical")
                 audio(preload='none' controls='' playsinline='')
                     source(src='/live/stream.ogg' type='audio/ogg')
                     | Your browser doesn't support an audio element, it's sad... But you always can take the #[a(href='/playlist') playlist]!
@@ -49,10 +49,10 @@ html(lang='en')
                     p Now playing: #[span#radio-song #{status.SongName}]
                     p Current/peak listeners: #[span#radio-listeners #{status.Listeners}] / #[span#radio-listener-peak #{status.ListenerPeak}]
                     p
-                        small Notice: information updates every 45 seconds. But you can #[button(name='update') update] it forcibly.
+                        small Notice: information updates every 45 seconds. But you can #[button#radio-update update] it forcibly.
         section
             h2 Last #{songsNum} songs
-            table#last-played
+            table#last-songs
                 each song in *songs
                     tr
                         td= song.Time