<?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>
    <title>Rádio Aetter — Server Info</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
    <style type="text/css">
          :root{
            --bg:#f6f7fb;
            --card:#ffffff;
            --card2:#fbfbfe;
            --stroke:rgba(15,23,42,.10);
            --text:#0f172a;
            --muted:rgba(15,23,42,.65);
            --muted2:rgba(15,23,42,.48);
            --accent:#ff4fd8;     /* Aetter pink */
            --accent2:#7c3aed;    /* violet accent */
            --ok:#10b981;
            --warn:#f59e0b;
            --danger:#ef4444;
            --shadow: 0 18px 60px rgba(15,23,42,.10);
            --radius:18px;
          }

          *{box-sizing:border-box}
          html,body{margin:0;padding:0}
          body{
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
            background:
              radial-gradient(1100px 600px at 15% 10%, rgba(255,79,216,.14), rgba(0,0,0,0)),
              radial-gradient(900px 600px at 80% 20%, rgba(124,58,237,.10), rgba(0,0,0,0)),
              var(--bg);
            color:var(--text);
            line-height:1.35;
          }

          a{color:inherit;text-decoration:none}
          a:hover{opacity:.92}

          .wrap{max-width:1100px;margin:0 auto;padding:18px}

          .topbar{
            display:flex;align-items:center;justify-content:space-between;gap:12px;
            padding:14px 16px;
            border:1px solid var(--stroke);
            border-radius:var(--radius);
            background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
            box-shadow: var(--shadow);
            position:sticky; top:10px; z-index:10;
            backdrop-filter: blur(10px);
          }

          .brand{display:flex;align-items:center;gap:10px;min-width:0}
          .logo{
            width:38px;height:38px;border-radius:12px;
            display:grid;place-items:center;
            background: linear-gradient(135deg, rgba(255,79,216,.22), rgba(124,58,237,.14));
            border:1px solid rgba(15,23,42,.10);
            color: var(--accent2);
          }
          .brand h1{margin:0;font-size:18px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
          .brand .sub{display:block;color:var(--muted2);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

          .menu{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
          .btn{
            display:inline-flex;align-items:center;gap:8px;
            padding:10px 12px;
            border-radius:14px;
            border:1px solid var(--stroke);
            background: rgba(255,255,255,.85);
            font-size:13px;
            color:var(--text);
          }
          .btn i{color:var(--muted)}
          .btn.primary{
            border-color: rgba(255,79,216,.28);
            background: linear-gradient(180deg, rgba(255,79,216,.15), rgba(255,255,255,.85));
          }

          .hero{
            margin:16px 0 10px;
            padding:14px 16px;
            border:1px dashed rgba(15,23,42,.14);
            border-radius: var(--radius);
            color:var(--muted);
            font-size:13px;
            background: rgba(255,255,255,.65);
          }
          .hero i{color:var(--accent2); margin-right:8px}

          .grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}

          .card{
            border:1px solid var(--stroke);
            border-radius: var(--radius);
            background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));
            box-shadow: 0 16px 50px rgba(15,23,42,.08);
            overflow:hidden;
          }
          .cardHead{
            display:flex;align-items:center;justify-content:space-between;gap:12px;
            padding:14px 14px 10px 14px;
            border-bottom:1px solid rgba(15,23,42,.08);
            background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
          }
          .mountTitle{display:flex;align-items:center;gap:10px;min-width:0}
          .pill{
            display:inline-flex;align-items:center;gap:8px;
            padding:6px 10px;
            border-radius:999px;
            border:1px solid rgba(15,23,42,.10);
            background: rgba(255,255,255,.85);
            font-size:12px;
            color:var(--muted);
            white-space:nowrap;
          }
          .pill strong{color:var(--text);font-weight:650}
          .mountPath{
            font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
            max-width: 56vw;
          }

          .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
          .chip{
            display:inline-flex;align-items:center;gap:8px;
            padding:9px 10px;
            border-radius:14px;
            border:1px solid rgba(15,23,42,.12);
            background: rgba(255,255,255,.85);
            font-size:13px;
            color:var(--text);
          }
          .chip i{color:var(--muted)}
          .chip.primary{border-color: rgba(255,79,216,.28)}

          .cardBody{padding:12px 14px 14px 14px}

          .meta{
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap:10px;
          }
          .metaItem{
            padding:10px 12px;
            border-radius: 16px;
            border:1px solid rgba(15,23,42,.10);
            background: rgba(255,255,255,.85);
            min-width:0;
          }
          .metaItem .k{font-size:12px;color:var(--muted2);display:flex;gap:8px;align-items:center}
          .metaItem .k i{color:var(--muted)}
          .metaItem .v{margin-top:6px;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

          .links{
            margin-top:12px;
            display:flex;
            gap:8px;
            flex-wrap:wrap;
          }
          .links .chip{font-size:13px}

          .footer{
            margin:16px 0 10px;
            color:var(--muted2);
            font-size:12px;
            text-align:center;
          }

          @media (max-width: 560px){
            .wrap{padding:12px}
            .topbar{padding:12px}
            .brand h1{font-size:16px}
            .btn{padding:9px 10px}
            .mountPath{max-width: 62vw}
            .meta{grid-template-columns: 1fr}
          }
        </style>
  </head>
  <body>
    <div class="wrap">
      <div class="topbar">
        <div class="brand">
          <div class="logo">
            <i class="fa-solid fa-circle-nodes"></i>
          </div>
          <div style="min-width:0">
            <h1>Rádio Aetter</h1>
            <span class="sub">Server Information</span>
          </div>
        </div>
        <div class="menu">
          <a class="btn" href="admin/"><i class="fa-solid fa-gauge-high"></i> Administrácia</a>
          <a class="btn primary" href="status.xsl"><i class="fa-solid fa-signal"></i> Stav servera</a>
          <a class="btn" href="server_version.xsl"><i class="fa-solid fa-code-branch"></i> Verzia</a>
        </div>
      </div>
      <div class="hero"><i class="fa-solid fa-circle-info"></i>
            Technické informácie o Icecast serveri + užitočné linky (download, docs, komunita).
          </div>
      <div class="grid">
        <div class="card">
          <div class="cardHead">
            <div class="mountTitle">
              <span class="pill">
                <i class="fa-solid fa-server"></i>
                <strong>Server</strong>
              </span>
              <div class="mountPath">Icecast identita a kontakt</div>
            </div>
            <div class="actions">
              <span class="chip primary"><i class="fa-solid fa-code-branch"></i> Info</span>
            </div>
          </div>
          <div class="cardBody">
            <div class="meta">
              <div class="metaItem">
                <div class="k"><i class="fa-solid fa-location-dot"></i> Location</div>
                <div class="v">Rádio Aetter</div>
              </div>
              <div class="metaItem">
                <div class="k"><i class="fa-solid fa-envelope"></i> Admin</div>
                <div class="v">studio@aetter.sk</div>
              </div>
              <div class="metaItem">
                <div class="k"><i class="fa-solid fa-globe"></i> Host</div>
                <div class="v">stream.aetter.sk</div>
              </div>
              <div class="metaItem">
                <div class="k"><i class="fa-solid fa-hashtag"></i> Version</div>
                <div class="v">Icecast 2.4.2</div>
              </div>
            </div>
            <div class="links">
              <a class="chip" href="http://icecast.org/download.php"><i class="fa-solid fa-download"></i> Download</a>
              <a class="chip" href="http://icecast.org/svn.php"><i class="fa-solid fa-code"></i> Subversion</a>
              <a class="chip" href="http://icecast.org/docs.php"><i class="fa-solid fa-book"></i> Documentation</a>
              <a class="chip" href="http://dir.xiph.org/index.php"><i class="fa-solid fa-compass"></i> Stream Directory</a>
              <a class="chip" href="http://icecast.org/community.php"><i class="fa-solid fa-people-group"></i> Community</a>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
            Powered by Radio AETTER — <a href="http://www.aetter.sk">www.aetter.sk</a></div>
    </div>
  </body>
</html>
