Ajoute un style plus classieux grâce aux conseils du criquet. Ajoute un titre qui scroll c'est la classe (le criquet est nul pour détecter un overflow)

2026-01-23 01:48:56 +01:00
parent b874da3a9c
commit 7d938f05e7
3 changed files with 115 additions and 8 deletions
@@ -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>