/home/rcfmro/.trash/test-player.html
<!doctype html>
<html lang="ro">
<head>
  <meta charset="utf-8">
  <title>RCFM Main – Player Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
    body {
      margin: 0;
      padding: 0;
      background: #020617;
      color: #e5e7eb;
      font-family: system-ui, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .box {
      width: 100%;
      max-width: 440px;
      padding: 24px 24px 20px;
      border-radius: 20px;
      background: rgba(15,23,42,.9);
      border: 1px solid rgba(148,163,184,.4);
      box-shadow: 0 20px 50px rgba(0,0,0,.6);
    }

    h1 {
      text-align: center;
      margin: 0 0 18px;
      font-size: 20px;
    }

    .cover {
      width: 100%;
      height: 260px;
      border-radius: 16px;
      background-size: cover;
      background-position: center;
      margin-bottom: 16px;
      border: 1px solid rgba(148,163,184,.3);
      background-color: #020617;
    }

    .now {
      font-size: 14px;
      margin-bottom: 4px;
      text-align: center;
      opacity: .8;
    }

    .title {
      font-size: 17px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 20px;
      min-height: 1.4em;
    }

    button {
      width: 100%;
      padding: 14px;
      border-radius: 14px;
      border: none;
      font-size: 16px;
      background: #ef4444;
      color: #000;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      opacity: .9;
    }
  </style>
</head>
<body>

  <div class="box">
    <h1>RCFM Main – Player Test</h1>

    <div id="cover" class="cover"></div>

    <div class="now">Acum rulează:</div>
    <div id="song-title" class="title">Loading...</div>

    <button id="play-btn">STOP</button>
    <audio id="audio" src="http://204.12.245.218:8000/stream"></audio>
  </div>

<script>
async function loadNowPlaying() {
  try {
    const res  = await fetch('/np-rcfm-main.php', { cache: 'no-store' });
    const data = await res.json();

    if (data.error) {
      console.log('Server error:', data.message || '');
      return;
    }

    const song  = data.song  || '';
    const art   = data.artist || '';
    const title = data.title || '';
    const img   = data.imageurl || '';

    let display = 'Unknown';
    if (song) {
      display = song;
    } else if (art || title) {
      display = (art ? art + ' - ' : '') + title;
    }

    document.getElementById('song-title').innerText = display;

    if (img) {
      document.getElementById('cover').style.backgroundImage = "url('" + img + "')";
    }

  } catch (e) {
    console.log('Eroare loadNowPlaying:', e);
  }
}

loadNowPlaying();
setInterval(loadNowPlaying, 10000);

// player play/pause
const audio = document.getElementById('audio');
const btn   = document.getElementById('play-btn');

btn.addEventListener('click', () => {
  if (audio.paused) {
    audio.play();
    btn.innerText = 'STOP';
    btn.style.background = '#ef4444';
  } else {
    audio.pause();
    btn.innerText = 'PLAY';
    btn.style.background = '#38bdf8';
  }
});
</script>

</body>
</html>
Path: home/rcfmro/.trash