
<!DOCTYPE html>
<html lang="en" data-brand-title="%network% - Channel Stats">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Channel Stats</title>
    <script src="/branding.js"></script>
    <style>
        :root { --bg:#10151b; --ink:#f7efe3; --muted:#b5afa3; --accent:#64ffda; --orange:#f97316; }
        * { box-sizing:border-box; }
        body { margin:0; min-height:100vh; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
               color:#ece7dc; background:linear-gradient(135deg,rgba(249,115,22,.12),transparent 34%),
               linear-gradient(225deg,rgba(125,211,252,.10),transparent 30%),var(--bg);
               display:flex; align-items:center; justify-content:center; padding:2rem; }
        .card { width:min(640px,100%); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
                border-radius:18px; padding:2.2rem; box-shadow:0 22px 70px rgba(0,0,0,.34); }
        .eyebrow { margin:0 0 .4rem; color:var(--accent); font-weight:700; text-transform:uppercase;
                   letter-spacing:.08em; font-size:.8rem; }
        h1 { margin:0 0 .8rem; font-size:2.1rem; color:var(--ink); }
        p { color:var(--muted); }
        .cmds { list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:.7rem; }
        .cmds li { padding:.9rem 1rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
                   border-radius:12px; }
        .cmds code { display:inline-block; background:rgba(255,255,255,.08); padding:.15rem .5rem; border-radius:6px;
                     color:#ffd9a8; font-size:.95rem; }
        .cmds span { display:block; margin-top:.35rem; color:var(--muted); font-size:.92rem; }
        a.cta { display:inline-block; margin-top:1.8rem; padding:.7rem 1.2rem; border-radius:10px;
                background:var(--orange); color:#15100b; font-weight:800; text-decoration:none; }
    </style>
</head>
<body>
    <div class="card">
        <p class="eyebrow">Community pulse</p>
        <h1>Channel Stats</h1>
        <p>We keep friendly activity stats for our rooms. You can pull them up any time from chat —
           just send one of these to <strong data-bot-nick>ChanServ</strong>:</p>
        <ul class="cmds">
            <li><code>/msg ChanServ TOP</code><span>The most active people in a room</span></li>
            <li><code>/msg ChanServ GTOP</code><span>The most active people across all rooms</span></li>
            <li><code>/msg ChanServ STATS</code><span>Your own activity in a room</span></li>
        </ul>
        <a class="cta" id="back-to-chat" href="/">Back to chat</a>
    </div>
    <script>
      (function () {
        var b = (window.__BRANDING__ && window.__BRANDING__.resolved) || {};
        if (b.publicHost) {
          document.getElementById("back-to-chat").href = "https://" + b.publicHost + "/";
        }
      })();
    </script>
</body>
</html>