/home/rcfmro/public_html/index.html
<!doctype html>
<html lang="ro">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>RCFM — Ascultă live</title>
<meta name="description" content="RCFM — Muzică nonstop. Ascultă acum streamul live." />
<link rel="icon" href="favicon.png">

<!-- FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Main CSS -->
<link rel="stylesheet" href="style.css">

<!-- Open Graph (SEO friendly basics) -->
<meta property="og:title" content="RCFM — Ascultă live" />
<meta property="og:description" content="RCFM — Muzică nonstop. Ascultă acum streamul live." />
<meta property="og:image" content="logo.png" />
<meta property="og:url" content="https://rcfm.ro" />
<meta name="twitter:card" content="summary_large_image" />
</head>
<body>
  <!-- particles background container (will be handled by particles.js) -->
  <div id="particles-canvas" aria-hidden="true"></div>

  <!-- loader -->
  <div id="loader" class="loader">
    <img src="logo.png" alt="RCFM" class="loader-logo">
    <div class="loader-text">RCFM — Ascultă live</div>
  </div>

  <main class="page" role="main" id="app" aria-live="polite">
    <!-- Logo -->
    <img src="logo.png" alt="RCFM logo" class="logo" id="logoImg" />

    <!-- Player card (glass multilayer) -->
    <section class="player-card" aria-label="Player radio RCFM">
      <!-- visual layer top thin -->
      <div class="glass-top"></div>

      <!-- big play button -->
      <button id="playBtn" class="play-btn" aria-pressed="false" aria-label="Play/Pause">
        <svg viewBox="0 0 64 64" width="72" height="72" aria-hidden="true">
          <circle cx="32" cy="32" r="28" fill="none" stroke="rgba(255,255,255,0.12)" stroke-width="1.6"></circle>
          <g transform="translate(0,0)">
            <polygon id="playTriangle" points="27,22 45,32 27,42" fill="#fff"></polygon>
          </g>
        </svg>
      </button>

      <!-- visualizer bars -->
      <div class="visualizer" id="visualizer" aria-hidden="true">
        <div class="bar b1"></div>
        <div class="bar b2"></div>
        <div class="bar b3"></div>
        <div class="bar b4"></div>
        <div class="bar b5"></div>
      </div>

      <!-- controls row -->
      <div class="controls">
        <div class="volume">
          <button id="muteBtn" class="mute-btn" aria-label="Mute/Unmute">🔊</button>
          <input id="volumeRange" type="range" min="0" max="100" value="65" aria-label="Volum">
        </div>

        <div class="now" aria-live="polite">
          <div class="now-top">
            <div class="now-label">Acum asculți</div>
            <div class="eq" id="eqSim" aria-hidden="true">
              <span></span><span></span><span></span>
            </div>
            <div class="listeners" id="listeners">Ascultători: —</div>
            <div class="visitors" id="visitors">Vizitatori: —</div>
          </div>
          <div id="nowTitle" class="now-title">Loading…</div>
        </div>
      </div>

      <!-- small rotate logo when playing -->
      <div class="logo-rotor" id="logoRotor" aria-hidden="true">
        <img src="logo.png" alt="logo rotor">
      </div>

      <!-- glass bottom reflection -->
      <div class="glass-bottom"></div>
    </section>

    <!-- FOLLOW and SHARE -->
    <div class="social-follow">
      <a class="btn3d fb" href="https://www.facebook.com/profile.php?id=61583947203790" target="_blank" rel="noopener">
        <i class="fab fa-facebook-f"></i><span>Follow</span>
      </a>
      <a class="btn3d ig" href="https://instagram.com" target="_blank" rel="noopener">
        <i class="fab fa-instagram"></i><span>Follow</span>
      </a>
    </div>

    <div class="social-share" aria-label="Share">
      <button class="btn3d wa" id="shareWhatsApp"><i class="fab fa-whatsapp"></i><span>WhatsApp</span></button>
      <button class="btn3d tg" id="shareTelegram"><i class="fab fa-telegram-plane"></i><span>Telegram</span></button>
      <button class="btn3d x" id="shareX"><i class="fab fa-x-twitter"></i><span>X</span></button>
    </div>

    <!-- theme & DJ controls -->
    <div class="toolbar">
      <div class="theme-switch">
        <label for="themeSelect">Temă</label>
        <select id="themeSelect" aria-label="Select theme">
          <option value="neon">Neon</option>
          <option value="dark">Dark</option>
          <option value="galaxy">Galaxy</option>
          <option value="pulse">Pink Pulse</option>
        </select>
      </div>

      <div class="dj-toggle">
        <label for="djOn">DJ ON</label>
        <input type="checkbox" id="djOn" aria-label="DJ ON/OFF">
      </div>
    </div>

    <!-- floating share (mobile) -->
    <div class="floating">
      <a href="https://wa.me/?text=Ascult%C4%83%20RCFM%20-%20https://rcfm.ro" class="float-btn wa" title="Share WhatsApp"><i class="fab fa-whatsapp"></i></a>
      <a href="https://t.me/share/url?url=https://rcfm.ro" class="float-btn tg" title="Share Telegram"><i class="fab fa-telegram-plane"></i></a>
    </div>

    <footer class="site-footer">
      <a href="chat.html" class="chat-link">Chat live</a>
      <span class="credits">RCFM • © <span id="year"></span></span>
    </footer>
  </main>

<!-- particles script -->
<script src="js/particles.js"></script>
<!-- main script -->
<script src="script.js"></script>
</body>
</html>
Path: home/rcfmro/public_html