<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>DMF Radio - Demoscene Music Forever</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <style>
		/* Gyors stílus tuning közvetlenül a fájlban, hogy azonnal jól nézzen ki */
		body { background-color: #121214; color: #e1e1e6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; padding: 20px; }
		#header { color: #00ff66; text-shadow: 0 0 10px rgba(0,255,102,0.3); font-size: 2.5rem; margin-bottom: 5px; }
		.sub-header { color: #8d8d99; font-size: 1rem; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 2px; }
		
		#menu ul { list-style: none; padding: 0; margin-bottom: 30px; }
		#menu li { display: inline-block; margin: 0 10px; }
		#menu a { color: #8d8d99; text-decoration: none; font-size: 0.9rem; border: 1px solid #29292e; padding: 5px 15px; border-radius: 20px; transition: 0.3s; }
		#menu a:hover { color: #00ff66; border-color: #00ff66; background: rgba(0,255,102,0.05); }

		.main-card { background: #202024; border: 1px solid #29292e; border-radius: 12px; max-width: 500px; margin: 0 auto; padding: 30px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
		
		.now-playing-box { background: #121214; padding: 15px; border-radius: 8px; border-left: 4px solid #00ff66; margin-bottom: 25px; text-align: left; }
		.now-playing-label { color: #00ff66; font-size: 0.8rem; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; display: block; margin-bottom: 5px; }
		#current-song { font-size: 1.2rem; font-weight: 500; color: #ffffff; word-wrap: break-word; }

		.btn { padding: 15px 35px; font-size: 16px; font-weight: bold; cursor: pointer; border: none; border-radius: 6px; text-transform: uppercase; transition: 0.2s; letter-spacing: 1px; }
		.btn-play { background-color: #00ff66; color: #0a0a0c; margin-right: 15px; box-shadow: 0 4px 12px rgba(0,255,102,0.2); }
		.btn-play:hover { background-color: #00cc52; transform: translateY(-1px); }
		.btn-stop { background-color: #e1e1e6; color: #121214; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
		.btn-stop:hover { background-color: #c4c4cc; transform: translateY(-1px); }

		.stats-row { margin-top: 20px; font-size: 0.9rem; color: #8d8d99; }
		.stats-count { color: #00ff66; font-weight: bold; }

		.social-links { margin-top: 25px; border-top: 1px solid #29292e; padding-top: 20px; }
		.social-btn { display: inline-block; color: #8d8d99; text-decoration: none; margin: 0 10px; font-size: 0.85rem; transition: 0.2s; }
		.social-btn:hover { color: #ffffff; text-decoration: underline; }
	</style>
  </head>
  <body>
    <h1 id="header">DMF Radio</h1>
    <div class="sub-header">Demoscene Music Forever</div>
    <div id="menu">
      <ul>
        <li>
          <a href="admin/">Administration</a>
        </li>
        <li>
          <a href="status.xsl">Server Status</a>
        </li>
        <li>
          <a href="server_version.xsl">Version</a>
        </li>
      </ul>
    </div>
    <div class="main-card">
      <div class="now-playing-box">
        <span class="now-playing-label">● MOST SZÓL:</span>
        <span id="current-song">Betöltés...</span>
      </div>
      <div style="margin: 25px 0;">
        <button class="btn btn-play" onclick="document.getElementById('iceAudio').src='http://dmfradio.ddns.net:80/dmfradio'; document.getElementById('iceAudio').load(); document.getElementById('iceAudio').play();">
						Lejátszás
					</button>
        <button class="btn btn-stop" onclick="document.getElementById('iceAudio').pause(); document.getElementById('iceAudio').removeAttribute('src'); document.getElementById('iceAudio').load();">
						Stop
					</button>
        <audio id="iceAudio" preload="none" style="display:none;"></audio>
      </div>
      <div class="stats-row">
                                Hallgatók a szerveren: <span class="stats-count" id="live-listeners">3</span></div>
      <div class="social-links">
        <a href="https://md1.hu" target="_blank" class="social-btn" style="color: #00ff66; font-weight: bold;">MD1.hu</a>
        <a href="https://demoscene.hu" target="_blank" class="social-btn" style="color: #00ff66; font-weight: bold;">Demoscene.hu</a>
        <span class="social-btn" style="color: #57576b; cursor: not-allowed; text-decoration: none;" title="Az oldal jelenleg nem elérhető">Scene.hu (Offline)</span>
        <a href="https://pouet.net" target="_blank" class="social-btn">Pouet.net</a>
        <a href="https://scene.org" target="_blank" class="social-btn">Scene.org</a>
        <a href="/dmfradio.m3u" class="social-btn">M3U letöltése</a>
      </div>
    </div>
    <script type="text/javascript">
// 
function updateStats() {
    // A v=` + Date.now() sor megakadályozza, hogy a böngésző gyorsítótárazza a hallgatószámot
    fetch('/status-json.xsl?v=' + Date.now())
        .then(response =&gt; response.json())
        .then(data =&gt; {
            if (data &amp;&amp; data.icestats &amp;&amp; data.icestats.source) {
                let sources = data.icestats.source;
                let currentSong = "Nincs adás";
                let listenersCount = 0;

                // Ha több adás is van (több mountpoint)
                if (Array.isArray(sources)) {
                    currentSong = sources[0].title || "Ismeretlen szám";
                    listenersCount = sources[0].listeners || 0;
                } else {
                    // Ha csak egyetlen aktív mountpoint van
                    currentSong = sources.title || "Ismeretlen szám";
                    listenersCount = sources.listeners || 0;
                }

                // Az értékek azonnali átírása a képernyőn
                document.getElementById('current-song').innerText = currentSong;
                document.getElementById('live-listeners').innerText = listenersCount;
            }
        })
        .catch(error =&gt; {
            console.error('Hiba a statisztikák lekérésekor:', error);
        });
}

// Azonnali indítás, majd frissítés 5 másodpercenként
updateStats();
setInterval(updateStats, 5000);
// 

</script>
  </body>
</html>
