klmp200/radio-bullshit
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

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)
All checks were successful
ci / deploy (push) Successful in 2m9s
Details

Browse Source
This commit is contained in:
Antoine Bartuccio
2026-01-23 01:48:56 +01:00
parent b874da3a9c
commit 7d938f05e7
3 changed files with 115 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
radio.liq
View File

@@ -126,6 +126,10 @@ settings.harbor.bind_addrs := ["0.0.0.0"]
harbor.http.static( harbor.http.static(
port=port, port=port,
path="/static/", path="/static/",
content_type=
fun (path) -> begin
file.mime.magic(path)
end,
"/var/www/static" "/var/www/static"
) )

41
www/index.html
View File

@@ -4,31 +4,56 @@
<script defer src="/static/alpine.min.js"></script> <script defer src="/static/alpine.min.js"></script>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Radio bullshit, la radio du paradis !</title> <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="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
<link rel="icon" href="/static/favicon.ico" type="image/x-icon"> <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
</head> </head>
<body> <body>
<div <div
x-data="{ metadata: { status: 'down' } }" class="radio-container"
x-data="{
metadata: { status: 'down' },
isTitleOverflow: false
}"
x-init="setInterval( x-init="setInterval(
async () => { async () => {
metadata = await get_metadata() metadata = await get_metadata()
}, },
2000, 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> <audio controls autoplay>
<source src="/radio-bullshit" type="audio/mpeg" preload="none" > <source src="/radio-bullshit" type="audio/mpeg" preload="none" >
Ton navigateur ne supporte pas l'audio HTML5. Pas de Zambla pour toi !
</audio> </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> </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> </body>
<script> <script>

78
www/static/style.css Normal file
View File

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