<?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" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Da Planet Radio // klaxon.dapla.net</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <script src="https://cdn.tailwindcss.com"></script>
    <style type="text/css">
    @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&amp;family=Rajdhani:wght@400;600;700&amp;display=swap');

    :root {
      --green:  #39ff14;
      --green2: #00c853;
      --amber:  #ffab00;
      --red:    #ff1744;
      --dim:    #0a0a0a;
      --panel:  #0d1117;
      --border: #1f2937;
      --muted:  #6b7280;
    }

    * { box-sizing: border-box; }

    body {
      background-color: var(--dim);
      color: #d1fae5;
      font-family: 'Share Tech Mono', 'Courier New', monospace;
      margin: 0;
      padding: 0;
    }

    /* scanline overlay */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.08) 2px,
        rgba(0,0,0,0.08) 4px
      );
      pointer-events: none;
      z-index: 100;
    }

    a { color: var(--green); text-decoration: none; }
    a:hover { color: #fff; text-decoration: underline; }

    .font-rajdhani { font-family: 'Rajdhani', sans-serif; }

    /* header */
    #header-wrap {
      border-bottom: 1px solid var(--green2);
      background: var(--panel);
      padding: 1.25rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .logo-block {}
    .logo-eyebrow {
      font-size: 0.65rem;
      letter-spacing: 0.25em;
      color: var(--muted);
      text-transform: uppercase;
    }
    .logo-main {
      font-family: 'Rajdhani', sans-serif;
      font-size: 2rem;
      font-weight: 700;
      color: var(--green);
      line-height: 1;
      text-shadow: 0 0 20px rgba(57,255,20,0.4);
    }
    .logo-main span { color: var(--amber); }
    .logo-sub {
      font-size: 0.7rem;
      color: var(--muted);
      letter-spacing: 0.15em;
    }

    /* nav */
    #nav {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      align-items: center;
    }
    #nav a {
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      border: 1px solid var(--border);
      padding: 0.3rem 0.75rem;
      color: var(--muted);
      transition: all 0.15s;
    }
    #nav a:hover {
      border-color: var(--green);
      color: var(--green);
      text-decoration: none;
      background: rgba(57,255,20,0.05);
    }

    /* status bar */
    #statusbar {
      background: #050505;
      border-bottom: 1px solid var(--border);
      padding: 0.35rem 2rem;
      font-size: 0.65rem;
      color: var(--muted);
      display: flex;
      gap: 1.5rem;
      flex-wrap: wrap;
    }
    #statusbar .tag { color: var(--green); }

    /* main content */
    #main {
      max-width: 900px;
      margin: 0 auto;
      padding: 2rem 1.5rem;
    }

    .section-label {
      font-size: 0.65rem;
      letter-spacing: 0.25em;
      color: var(--muted);
      text-transform: uppercase;
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .section-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    /* mount card */
    .mount-card {
      background: var(--panel);
      border: 1px solid var(--border);
      margin-bottom: 1.5rem;
      position: relative;
      overflow: hidden;
    }
    .mount-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--green2), var(--green), transparent);
    }

    .mount-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.85rem 1.25rem;
      border-bottom: 1px solid var(--border);
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .mount-name {
      font-family: 'Rajdhani', sans-serif;
      font-size: 1.1rem;
      font-weight: 600;
      color: #fff;
    }
    .mount-name span { color: var(--green); }

    .live-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: rgba(57,255,20,0.08);
      border: 1px solid var(--green2);
      color: var(--green);
      font-size: 0.65rem;
      letter-spacing: 0.15em;
      padding: 0.2rem 0.6rem;
      text-transform: uppercase;
    }
    .live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green);
      animation: blink 1.4s infinite;
    }
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.2; }
    }

    .play-links {
      display: flex;
      gap: 0.4rem;
      align-items: center;
    }
    .play-link {
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      border: 1px solid var(--border);
      padding: 0.25rem 0.6rem;
      color: var(--amber);
      transition: all 0.15s;
      text-transform: uppercase;
    }
    .play-link:hover {
      border-color: var(--amber);
      background: rgba(255,171,0,0.07);
      color: var(--amber);
      text-decoration: none;
    }
    .auth-link {
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      border: 1px solid var(--border);
      padding: 0.25rem 0.6rem;
      color: var(--red);
      text-transform: uppercase;
    }

    /* mount body */
    .mount-body { padding: 1.25rem; }

    .audioplayer {
      margin-bottom: 1rem;
    }
    .audioplayer audio {
      width: 100%;
      height: 36px;
      filter: invert(1) hue-rotate(90deg) saturate(0.7);
    }

    /* stats table */
    .stat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }
    @media (max-width: 500px) {
      .stat-grid { grid-template-columns: 1fr; }
    }
    .stat-row {
      display: flex;
      padding: 0.45rem 0;
      border-bottom: 1px solid rgba(31,41,55,0.7);
      gap: 0.5rem;
    }
    .stat-key {
      font-size: 0.7rem;
      color: var(--muted);
      letter-spacing: 0.08em;
      min-width: 120px;
      flex-shrink: 0;
      text-transform: uppercase;
    }
    .stat-val {
      font-size: 0.8rem;
      color: #e5e7eb;
      word-break: break-all;
    }
    .stat-val.highlight { color: var(--green); }
    .stat-val.now-playing {
      color: var(--amber);
      font-family: 'Rajdhani', sans-serif;
      font-size: 0.95rem;
      font-weight: 600;
    }
    .stat-val a { color: var(--green2); }

    /* offline */
    .mount-offline {
      border: 1px solid var(--border);
      padding: 0.75rem 1.25rem;
      margin-bottom: 1rem;
      color: var(--muted);
      font-size: 0.8rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .mount-offline::before {
      content: '[OFFLINE]';
      color: var(--red);
      font-size: 0.65rem;
      letter-spacing: 0.1em;
    }

    /* footer */
    #footer {
      border-top: 1px solid var(--border);
      text-align: center;
      padding: 1.5rem 1rem;
      font-size: 0.65rem;
      color: var(--muted);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    #footer a { color: var(--muted); }
    #footer a:hover { color: var(--green); }
  </style>
  </head>
  <body>
    <div id="header-wrap">
      <div class="logo-block">
        <div class="logo-eyebrow">// streaming media server</div>
        <div class="logo-main">DA PLANET <span>RADIO</span></div>
        <div class="logo-sub">klaxon.dapla.net %% da planet security</div>
      </div>
      <div id="nav">
        <a href="admin/">[ admin ]</a>
        <a href="status.xsl">[ status ]</a>
        <a href="server_version.xsl">[ version ]</a>
      </div>
    </div>
    <div id="statusbar">
      <span><span class="tag">HOST:</span> klaxon.dapla.net</span>
      <span><span class="tag">ENGINE:</span> icecast2</span>
      <span><span class="tag">OPERATOR:</span> da planet security // albany, ny</span>
    </div>
    <div id="main">
    <!-- WARNING:
     DO NOT ATTEMPT TO PARSE ICECAST HTML OUTPUT!
     The web interface may change completely between releases.
     If you have a need for automatic processing of server data,
     please read the appropriate documentation. Latest docs:
     https://icecast.org/docs/icecast-latest/icecast2_stats.html
    -->
    <div class="section-label">// active mount points</div><div class="mount-card"><div class="mount-head"><div style="display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;"><span class="live-badge"><span class="live-dot"></span>LIVE</span><span class="mount-name"><span>//</span>/live.mp3</span></div><div><div class="play-links"><a class="play-link" href="/live.mp3.m3u">M3U</a><a class="play-link" href="/live.mp3.xspf">XSPF</a></div></div></div><div class="mount-body"><div class="stat-grid"><div class="stat-row"><span class="stat-key">Stream Name</span><span class="stat-val">Live Radio</span></div><div class="stat-row"><span class="stat-key">Description</span><span class="stat-val">Hacking Da Planet</span></div><div class="stat-row"><span class="stat-key">Content Type</span><span class="stat-val">audio/mpeg</span></div><div class="stat-row"><span class="stat-key">Stream Start</span><span class="stat-val streamstats">Sat, 18 Apr 2026 18:27:47 -0400</span></div><div class="stat-row"><span class="stat-key">Listeners</span><span class="stat-val streamstats highlight">0</span></div><div class="stat-row"><span class="stat-key">Peak</span><span class="stat-val streamstats">4</span></div><div class="stat-row"><span class="stat-key">Genre</span><span class="stat-val streamstats">Mixed</span></div><div class="stat-row"><span class="stat-key">Stream URL</span><span class="stat-val streamstats"><a href="https://klaxon.dapla.net">https://klaxon.dapla.net</a></span></div></div><div class="stat-row" style="margin-top:0.75rem;border-bottom:none;background:rgba(57,255,20,0.04);padding:0.6rem 0.75rem;"><span class="stat-key" style="color:#6ee7b7;">Now Playing</span><span class="stat-val now-playing">Excerpt - The Halloween Moon by Joseph Fink</span></div></div></div></div>
    <div id="footer">
    powered by <a href="https://www.icecast.org/">icecast</a>
    %% da planet security %% albany, ny
    %% <a href="https://klaxon.dapla.net">klaxon.dapla.net</a></div>
  </body>
</html>
