<?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>Icecast Streaming Media Server</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <style type="text/css">
          body {
            background-color: var(--bg-color, #1b1b1b);
            color: var(--text-color, #ecf0f1);
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            transition: background 0.3s ease, color 0.3s ease;
          }
          .navbar {
            background-color: #1a1a1a;
          }
          .navbar a {
            color: #ecf0f1 !important;
            text-decoration: none;
          }
          .navbar a:hover {
            color: #f39c12;
          }
          .card {
            background-color: #2a2a2a;
            color: #ecf0f1;
            margin-bottom: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          }
          .card-header {
            background-color: #1d1d1d;
            color: #ecf0f1;
          }
          .table {
            background-color: #2d2d2d;
            color: #ecf0f1;
            border-collapse: separate;
            border-spacing: 0 10px;
          }
          .table th, .table td {
            border: 1px solid #34495e;
            padding: 10px;
          }
          .table tr:nth-child(even) {
            background-color: #3d566e;
          }
          .table tr:hover {
            background-color: #f39c12;
            color: #2c3e50;
          }
          .stream-name {
            color: #2980b9;
            font-weight: bold;
          }
          .img-fluid {
            border-radius: 8px;
            max-height: 200px;
            object-fit: cover;
          }
          audio {
            width: 100%;
            border-radius: 8px;
            margin-top: 10px;
          }
          .footer {
            background-color: #1a1a1a;
            padding: 20px 0;
            color: #FFFFFF;
            text-align: left;
            font-size: 1.0rem;
          }
          .footer a {
            color: #f39c12;
            font-weight: bold;
          }
          a {
            color: #f39c12;
          }
          a:hover {
            color: #e74c3c;
            text-decoration: none;
          }
          .btn {
            border-radius: 5px;
            padding: 6px 15px;
          }
          .btn-primary {
            background-color: #f39c12;
            border-color: #f39c12;
          }
          .btn-secondary {
            background-color: #16a085;
            border-color: #16a085;
          }
          .btn-sm {
            font-size: 0.875rem;
            padding: 4px 10px;
          }
          .btn-toggle-theme {
            background: none;
            border: none;
            color: #f39c12;
            font-size: 1.2rem;
            cursor: pointer;
          }
          .light-mode {
            --bg-color: #ffffff;
            --text-color: #1b1b1b;
          }
        </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark mb-4">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="icecast.png" alt="Icecast2" style="max-width: 30px; margin-right: 10px;" />
              Icecast2 Status
            </a>
        <div class="d-flex">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="admin/">Administration</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="status.xsl">Server Status</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="server_version.xsl">Version</a>
            </li>
          </ul>
          <button class="btn-toggle-theme" onclick="toggleTheme()" title="Toggle Light/Dark  Mode">🌙</button>
        </div>
      </div>
    </nav>
    <div class="container">
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">Mount: /oldies.mp3</h5>
          <div>
            <a class="btn btn-sm btn-primary me-2" href="/oldies.mp3.m3u">M3U</a>
            <a class="btn btn-sm btn-secondary" href="/oldies.mp3.xspf">XSPF</a>
          </div>
        </div>
        <div class="card-body">
          <div class="mb-3">
            <audio class="w-100" controls="controls" preload="none"><source src="/oldies.mp3" type="audio/aacp"></source>
                          Your browser does not support the audio element.
                        </audio>
          </div>
          <table class="table table-bordered table-sm">
            <tbody>
              <tr>
                <td>
                  <strong>Stream Name</strong>
                </td>
                <td class="stream-name">Oldies Radio</td>
              </tr>
              <tr>
                <td>
                  <strong>Stream Description</strong>
                </td>
                <td>Trust ... The Old</td>
              </tr>
              <tr>
                <td>
                  <strong>Content Type</strong>
                </td>
                <td>audio/aacp</td>
              </tr>
              <tr>
                <td>
                  <strong>Stream Started</strong>
                </td>
                <td>Sun, 17 May 2026 12:02:28 +0300</td>
              </tr>
              <tr>
                <td>
                  <strong>Bitrate</strong>
                </td>
                <td>128 
kbps</td>
              </tr>
              <tr>
                <td>
                  <strong>Listeners (Current)</strong>
                </td>
                <td>0</td>
              </tr>
              <tr>
                <td>
                  <strong>Listeners (Peak)</strong>
                </td>
                <td>2</td>
              </tr>
              <tr>
                <td>
                  <strong>Genre</strong>
                </td>
                <td>Oldies</td>
              </tr>
              <tr>
                <td>
                  <strong>Stream URL</strong>
                </td>
                <td>
                  <a href="https://oldiesradio.eu">https://oldiesradio.eu</a>
                </td>
              </tr>
              <tr>
                <td>
                  <strong>Currently Playing</strong>
                </td>
                <td>Alice Cooper - Poison</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">Mount: /stream.mp3</h5>
          <div>
            <a class="btn btn-sm btn-primary me-2" href="/stream.mp3.m3u">M3U</a>
            <a class="btn btn-sm btn-secondary" href="/stream.mp3.xspf">XSPF</a>
          </div>
        </div>
        <div class="card-body">
          <div class="mb-3">
            <audio class="w-100" controls="controls" preload="none"><source src="/stream.mp3" type="audio/aacp"></source>
                          Your browser does not support the audio element.
                        </audio>
          </div>
          <table class="table table-bordered table-sm">
            <tbody>
              <tr>
                <td>
                  <strong>Stream Name</strong>
                </td>
                <td class="stream-name">Nafpaktos Internet Radio</td>
              </tr>
              <tr>
                <td>
                  <strong>Stream Description</strong>
                </td>
                <td>Hit Music Only</td>
              </tr>
              <tr>
                <td>
                  <strong>Content Type</strong>
                </td>
                <td>audio/aacp</td>
              </tr>
              <tr>
                <td>
                  <strong>Stream Started</strong>
                </td>
                <td>Sun, 17 May 2026 12:02:28 +0300</td>
              </tr>
              <tr>
                <td>
                  <strong>Bitrate</strong>
                </td>
                <td>128 
kbps</td>
              </tr>
              <tr>
                <td>
                  <strong>Listeners (Current)</strong>
                </td>
                <td>0</td>
              </tr>
              <tr>
                <td>
                  <strong>Listeners (Peak)</strong>
                </td>
                <td>2</td>
              </tr>
              <tr>
                <td>
                  <strong>Genre</strong>
                </td>
                <td>Various</td>
              </tr>
              <tr>
                <td>
                  <strong>Stream URL</strong>
                </td>
                <td>
                  <a href="http://nafnetradio.nosite.tk">http://nafnetradio.nosite.tk</a>
                </td>
              </tr>
              <tr>
                <td>
                  <strong>Currently Playing</strong>
                </td>
                <td>Loukas - Mazi</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <footer class="footer mt-5 py-3 text-left">
      <div>Support Icecast development at <a href="https://www.icecast.org/">www.icecast.org</a></div>
    </footer>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
          function toggleTheme() {
            document.body.classList.toggle('light-mode');
            const isLight = document.body.classList.contains('light-mode');
            localStorage.setItem('theme', isLight ? 'light' : 'dark');
          }
          if (localStorage.getItem('theme') === 'light') {
            document.body.classList.add('light-mode');
          }
          function fetchStreamData() {
            $.ajax({
              url: "status.xsl",
              method: "GET",
              success: function (data) {
                $("#streamData").html($(data).find("#streamData").html());
              },
              error: function () {
                console.error("Error fetching stream data.");
              }
            });
          }
          setInterval(fetchStreamData, 10000);
        </script>
  </body>
</html>
