Design Demo

Use this page to validate typography, spacing, and badge styles without touching production data. The components below reuse the same CSS classes as the live station listings.

Station Card Preview

Aegean Chill

📍 Cyclades

Votes 1,245 Bitrate 128 kbps Chillout Lounge Ambient
Radddio App Badge

Athens Rock FM

📍 Attica

Votes 987 Bitrate 192 kbps Rock Alternative
Radddio App Badge

Thessaloniki Beats

📍 Central Macedonia

Votes 562 Bitrate 256 kbps Electronic Dance
Radddio App Badge

Badge Palette

Votes 9,999 Bitrate 320 kbps Jazz Talk

Now Playing API Experiments

Many stations use platforms like Radio.co or AzuraCast that expose simple JSON endpoints. The recipe is straightforward: • fetch the nowPlayingUrl every 10–20 seconds • update the UI with the returned artist and title

Dice Radio

Platform: Radio.co

Stream URL
https://s2.radio.co/s4648f1c61/listen
Now Playing endpoint
https://public.radio.co/station/s4648f1c61/nowplaying

Latest response:

Waiting…

Kyklos

Platform: AzuraCast

Stream URL
https://azuracast.streams.ovh/radio/8120/radio.mp3
Now Playing endpoint
https://azuracast.streams.ovh/api/nowplaying/radiokyklos

Latest response:

Waiting…

Kaseta Radio

Platform: AzuraCast

Stream URL
https://azuracast.streams.gr/listen/kasetaradio/radio.mp3
Now Playing endpoint
https://azuracast.streams.gr/api/nowplaying/kasetaradio

Latest response:

Waiting…

CORS policies come from the station. If you see errors, the endpoint may block browser access and will need a proxy.

Implementation Notes

  • ✔️ Reuses .station-list, .station-item, and badge utilities from global.css.
  • ✔️ Icons sourced from Bootstrap Icons CDN already included in the base layout.
  • ✔️ No scripts or extra styles required—safe to remove when no longer needed.