some styling changes

3 files changed, 90 insertions, 33 deletions

diff --git a/templates/var/www/html/index.html b/templates/var/www/html/index.html
index f62cf53..9f6d327 100644
--- a/templates/var/www/html/index.html
+++ b/templates/var/www/html/index.html
@@ -14,7 +14,10 @@
     <div class="player-wrapper">
       <a id="radioButton" class="btn" href="#">play</a>
       <div id="info"></div>
-      <a class="link" target="_blank" href="{{ radio_url }}/stream">direct stream url</a>
+      <div class="link-row">
+        <a class="link" target="_blank" href="/stream">direct stream url</a>
+        <a id="toggleBg" class="link" href="#">background (on)</a>
+      </div>
       <audio id="radioPlayer" hidden>
         <source src="/stream" type="audio/ogg" />
         Your browser does not support the audio element.
diff --git a/templates/var/www/html/style.css b/templates/var/www/html/style.css
index 95698ed..89aefae 100644
--- a/templates/var/www/html/style.css
+++ b/templates/var/www/html/style.css
@@ -57,6 +57,15 @@ body {
     z-index: 0;
 }
 
+#info {
+    font-size: 14px;
+    color: var(--color-light-gray);
+    min-height: 18px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .index-container {
     display: flex;
     justify-content: center;
@@ -76,53 +85,75 @@ body {
     max-width: 100%;
     width: 320px;
     padding: 32px;
-    border: 1px solid var(--color-dark-gray);
+    border: 1px solid var(--color-dark-cyan);
     background-color: var(--color-black-transparency08);
     position: relative;
     z-index: 0;
 }
 
+.link-row {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
 .btn {
-    color: var(--color-black);
-    background-color: var(--color-light-gray);
-    padding: 8px 16px;
-    text-decoration: none;
-    font-size: 16px;
-    font-weight: bold;
-    position: relative;
-    display: inline-block;
-    cursor: pointer;
-    user-select: none;
-    position: relative;
+  color: var(--color-black);
+  background-color: var(--color-light-gray);
+  padding: 1px 16px 1px 16px;
+  text-decoration: none;
+  font-size: 16px;
+  font-weight: normal;
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
 }
 
 .btn::before {
-    content: '';
-    background-color: var(--color-dark-gray);
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
+  content: '';
+  background-color: var(--color-dark-gray);
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
 }
 
 .btn:hover::before {
-    background-color: var(--color-dark-cyan);
+  background-color: var(--color-dark-cyan);
 }
 
-#info {
-    font-size: 14px;
-    color: var(--color-light-gray);
-    min-height: 18px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.link {
+  color: var(--color-black);
+  background-color: var(--color-light-gray);
+  padding: 1px 8px 1px 8px;
+  text-decoration: none;
+  font-size: 12px;
+  font-weight: normal;
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
 }
 
-.link {
-    color: var(--color-dark-cyan);
-    text-decoration: none;
+.link::before {
+  content: '';
+  background-color: var(--color-dark-gray);
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.link:hover::before {
+  background-color: var(--color-dark-cyan);
 }
 
 @media (max-width: 400px) {
diff --git a/templates/var/www/html/video-background.js b/templates/var/www/html/video-background.js
index 15ccd3e..8f95a00 100644
--- a/templates/var/www/html/video-background.js
+++ b/templates/var/www/html/video-background.js
@@ -1,6 +1,7 @@
 (async () => {
   const video = document.getElementById('background');
   const fadeOverlay = document.getElementById('fadeOverlay');
+  const toggleBgBtn = document.getElementById('toggleBg');
   const FADE_DURATION = 1000;
 
   const resp = await fetch('/videos/videos.json');
@@ -11,6 +12,8 @@
   const videos = await resp.json();
 
   let lastVideo = null;
+  let bgEnabled = true;
+  let loopCanceled = false;
 
   function pickRandomVideo() {
     if (videos.length === 1) return videos[0];
@@ -23,7 +26,7 @@
   }
 
   async function playVideoLoop() {
-    while (true) {
+    while (!loopCanceled) {
       const nextVideo = pickRandomVideo();
       video.src = `/videos/${nextVideo}`;
       video.style.opacity = '0';
@@ -36,6 +39,8 @@
         video.onloadedmetadata = () => resolve();
       });
 
+      if (loopCanceled) break;
+
       video.currentTime = 0;
       video.play().catch(console.error);
 
@@ -51,5 +56,23 @@
     }
   }
 
+  toggleBgBtn.addEventListener('click', (e) => {
+    e.preventDefault();
+    bgEnabled = !bgEnabled;
+    loopCanceled = !bgEnabled;
+
+    if (!bgEnabled) {
+      video.pause();
+      video.style.display = 'none';
+      fadeOverlay.style.display = 'none';
+      toggleBgBtn.textContent = 'background (off)';
+    } else {
+      video.style.display = '';
+      fadeOverlay.style.display = '';
+      toggleBgBtn.textContent = 'background (on)';
+      playVideoLoop();
+    }
+  });
+
   playVideoLoop();
 })();