From 7d938f05e710cad5b4b9cedfc095f91b9a908ac1 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Fri, 23 Jan 2026 01:48:56 +0100
Subject: [PATCH] =?UTF-8?q?Ajoute=20un=20style=20plus=20classieux=20gr?=
 =?UTF-8?q?=C3=A2ce=20aux=20conseils=20du=20criquet.=20Ajoute=20un=20titre?=
 =?UTF-8?q?=20qui=20scroll=20c'est=20la=20classe=20(le=20criquet=20est=20n?=
 =?UTF-8?q?ul=20pour=20d=C3=A9tecter=20un=20overflow)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 radio.liq            |  4 +++
 www/index.html       | 41 ++++++++++++++++++-----
 www/static/style.css | 78 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 115 insertions(+), 8 deletions(-)
 create mode 100644 www/static/style.css
diff --git a/radio.liq b/radio.liq
index 3052dfa..fffa042 100644
--- a/radio.liq
+++ b/radio.liq
@@ -126,6 +126,10 @@ settings.harbor.bind_addrs := ["0.0.0.0"]
 harbor.http.static(
   port=port,
   path="/static/",
+  content_type=
+  fun (path) -> begin
+    file.mime.magic(path)
+  end,
   "/var/www/static"
 )
 
diff --git a/www/index.html b/www/index.html
index f431da0..d21670b 100644
--- a/www/index.html
+++ b/www/index.html
@@ -4,31 +4,56 @@
     <script defer src="/static/alpine.min.js"></script>
     <meta charset="utf-8">
     <title>Radio bullshit, la radio du paradis !</title>
+    <link rel="stylesheet" type="text/css" href="/static/style.css">
     <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
     <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
   </head>
   <body>
     <div
-      x-data="{ metadata: { status: 'down' } }"
+      class="radio-container"
+      x-data="{
+        metadata: { status: 'down' },
+        isTitleOverflow: false
+      }"
       x-init="setInterval(
         async () => {
           metadata = await get_metadata()
         },
         2000,
       )
+      $watch('metadata.title', () =>  isTitleOverflow = $refs.scrollTitle.offsetWidth < $refs.scrollTitle.scrollWidth)
       "
     >
-      <p x-show="metadata.status == 'ready'" x-text="metadata.title"></p>
+      <div
+        class="track-title"
+      >
+        <p
+          x-text="metadata.title ?? '𝐍𝐨𝐰 𝐥𝐨𝐚𝐝𝐢𝐧𝐠. . .'"
+          x-ref="scrollTitle"
+          :class="{
+              overflow: isTitleOverflow
+          }"
+        ></p>
+      </div>
       <audio controls autoplay>
         <source src="/radio-bullshit" type="audio/mpeg" preload="none" >
+        Ton navigateur ne supporte pas l'audio HTML5. Pas de Zambla pour toi !
       </audio>
+      <p>
+        <ul class="radio-links">
+          <li>
+            <a href="/radio-bullshit" target="_blank">
+              🎵 VLC Stream
+            </a>
+          </li>
+          <li>
+            <a href="/radio-bullshit.m3u">
+              📄 M3U file
+            </a>
+          </li>
+        </ul>
+      </p>
     </div>
-    <p>
-      <ul>
-        <li><a href="/radio-bullshit">VLC Stream</a></li>
-        <li><a href="/radio-bullshit.m3u">M3U file</a></li>
-      </ul>
-    </p>
 
   </body>
   <script>
diff --git a/www/static/style.css b/www/static/style.css
new file mode 100644
index 0000000..4375f48
--- /dev/null
+++ b/www/static/style.css
@@ -0,0 +1,78 @@
+/* Reset minimal */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    height: 100vh;
+    background: #0e0e0e;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: Arial, Helvetica, sans-serif;
+    color: #ffffff;
+}
+
+.radio-container {
+    text-align: center;
+}
+
+.track-title {
+    width: 300px;
+    overflow: hidden;
+    white-space: nowrap;
+    margin-bottom: 12px;
+    font-size: 0.95rem;
+    opacity: 0.85;
+    position: relative;
+}
+
+.track-title p.overflow {
+    padding-left: 100%;
+    animation: scroll-title 10s linear infinite;
+}
+
+.track-title:hover p.overflow {
+    animation-play-state: paused;
+}
+
+@keyframes scroll-title {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-100%);
+    }
+}
+
+audio {
+    width: 300px;
+}
+
+.radio-links {
+    all: unset;
+    display: flex;
+    gap: 12px;
+    margin-top: 14px;
+    font-size: 0.8rem;
+    opacity: 0.7;
+}
+
+.radio-links li {
+    all: unset;
+}
+
+.radio-links a {
+    text-decoration: none;
+    color: #ffffff;
+    padding: 4px 8px;
+    border: 1px solid rgba(255,255,255,0.15);
+    border-radius: 3px;
+}
+
+.radio-links a:hover {
+    opacity: 1;
+    background: rgba(255,255,255,0.08);
+}
