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>
@@ -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);
+}