<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>GangstaShit-Radio</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0a;color:#fff;font-family:system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}
h1{background:linear-gradient(90deg,#c41e3a,#ffd700,#c41e3a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:clamp(1.5em,6vw,3em);margin-bottom:0.5em;text-align:center;letter-spacing:2px}
.wrap{width:100%;max-width:640px;padding:0 16px}
.pitch{aspect-ratio:16/9;width:100%;border:0;background:#000;border-radius:8px;overflow:hidden}
.np{margin-top:1.2em;padding:1em 1.2em;background:#111;border-radius:8px;border:1px solid #222;text-align:center;min-height:80px;display:flex;flex-direction:column;justify-content:center}
.np-label{font-size:0.7em;text-transform:uppercase;letter-spacing:2px;color:#666;margin-bottom:0.5em}
.np-track{font-size:clamp(1em,3.5vw,1.4em);font-weight:700;color:#fff;line-height:1.3;word-break:break-word}
.np-artist{font-size:clamp(0.8em,2.5vw,1em);color:#aaa;margin-top:0.3em}
.np-pulse{display:inline-block;width:8px;height:8px;background:#c41e3a;border-radius:50%;margin-right:6px;animation:pulse 2s infinite}
.np-offline{color:#666}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
.info{margin-top:0.8em;text-align:center;opacity:0.5;font-size:0.85em}
</style>
</head>
<body>
<h1>GangstaShit-Radio</h1>
<div class="wrap">
<iframe class="pitch" src="https://player.kick.com/mac-7-eleven" allowfullscreen allow="autoplay;encrypted-media;picture-in-picture"></iframe>
<div class="np" id="nowplaying">
  <div class="np-label"><span class="np-pulse"></span>Now Playing</div>
  <div class="np-track" id="np-track">Connecting...</div>
  <div class="np-artist" id="np-artist"></div>
</div>
<p class="info">24/7 Gangsta Rap and Hip-Hop</p>
</div>
<script>
async function updateNP(){
  try{
    const r=await fetch("/icecast/status",{cache:"no-store"});
    const d=await r.json();
    const src=d.icestats&&d.icestats.source;
    const t=document.getElementById("np-track");
    const a=document.getElementById("np-artist");
    if(src&&src.title){
      let title=src.title;
      let artist="";
      const sep=title.indexOf(" - ");
      if(sep>0){artist=title.substring(0,sep);title=title.substring(sep+3)}
      t.textContent=title;
      a.textContent=artist;
      t.classList.remove("np-offline");
    }else if(src){
      t.textContent="On air";
      a.textContent=src.server_name||"";
      t.classList.remove("np-offline");
    }else{
      t.textContent="Offline";
      a.textContent="";
      t.classList.add("np-offline");
    }
  }catch(e){
    document.getElementById("np-track").textContent="Offline";
    document.getElementById("np-track").classList.add("np-offline");
  }
}
updateNP();
setInterval(updateNP,5000);
</script>
</body>
</html>