| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>ServerClass — Admin</title>
|
|
|
| <link rel="preconnect" href="https://fonts.googleapis.com">
|
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
|
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
| </head>
|
| <body>
|
|
|
| <a href="#main" class="skip-link">Skip to content</a>
|
|
|
|
|
| <header class="topbar">
|
| <div class="topbar__inner">
|
| <div class="topbar__brand">
|
| <span class="topbar__mark"></span>
|
| <span class="topbar__name">ServerClass <em>—</em> Admin</span>
|
| </div>
|
| <div class="topbar__meta">
|
| <span class="status-dot" id="connDot" data-state="off"></span>
|
| <span class="mono" id="connLabel">DISCONNECTED</span>
|
| <span class="topbar__sep">/</span>
|
| <span class="mono" id="lastSync">— : — : —</span>
|
| </div>
|
| </div>
|
| </header>
|
|
|
|
|
| <section class="hero">
|
| <div class="hero__inner">
|
| <div class="hero__eyebrow mono">VOL. 01 — LIVE DASHBOARD</div>
|
| <h1 class="hero__title">
|
| Server<br>
|
| <span class="italic">Class.</span>
|
| </h1>
|
| <div class="hero__rule">
|
| <span class="hero__rule-line"></span>
|
| <span class="hero__rule-square"></span>
|
| <span class="hero__rule-line"></span>
|
| </div>
|
| <p class="hero__lede">
|
| A real-time observatory for distributed authentication.
|
| Twelve servers, finite capacity, infinite attention to detail.
|
| </p>
|
| </div>
|
| </section>
|
|
|
| <div class="divider divider--thick"></div>
|
|
|
|
|
| <main id="main">
|
| <section class="section section--auth">
|
| <div class="section__inner">
|
| <div class="section__head">
|
| <span class="section__num mono">§ 01</span>
|
| <h2 class="section__title">Credentials</h2>
|
| </div>
|
|
|
| <form id="authForm" class="auth" autocomplete="off">
|
| <label class="field">
|
| <span class="field__label mono">Admin Secret</span>
|
| <input type="password" id="adminSecret" class="field__input" placeholder="X-Admin-Secret" spellcheck="false">
|
| </label>
|
|
|
| <label class="field">
|
| <span class="field__label mono">API Key</span>
|
| <input type="password" id="apiKey" class="field__input" placeholder="X-API-Key" spellcheck="false">
|
| </label>
|
|
|
| <div class="auth__actions">
|
| <button type="submit" class="btn btn--primary">
|
| Authenticate <span class="btn__arrow">→</span>
|
| </button>
|
| <button type="button" id="refreshBtn" class="btn btn--ghost">
|
| Refresh now
|
| </button>
|
| </div>
|
| </form>
|
|
|
| <div id="errorBox" class="errors" aria-live="polite"></div>
|
| </div>
|
| </section>
|
| </main>
|
|
|
| <div class="divider divider--thick"></div>
|
|
|
|
|
| <section class="section section--stats" aria-label="Statistics">
|
| <div class="section__inner">
|
| <div class="section__head section__head--invert">
|
| <span class="section__num mono">§ 02</span>
|
| <h2 class="section__title">Figures</h2>
|
| </div>
|
|
|
| <div class="stats" id="statsGrid">
|
| <div class="stat stat--placeholder">
|
| <div class="stat__label mono">Awaiting</div>
|
| <div class="stat__value">—</div>
|
| <div class="stat__sub mono">Authenticate to populate</div>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
|
|
| <div class="divider divider--thick"></div>
|
|
|
|
|
| <section class="section">
|
| <div class="section__inner">
|
| <div class="section__head">
|
| <span class="section__num mono">§ 03</span>
|
| <h2 class="section__title">Servers <span class="italic">— Status</span></h2>
|
| </div>
|
| <div id="serversContent" class="placeholder mono">
|
| Enter credentials to load server topology.
|
| </div>
|
| </div>
|
| </section>
|
|
|
| <div class="divider divider--thick"></div>
|
|
|
|
|
| <section class="section">
|
| <div class="section__inner">
|
| <div class="section__head">
|
| <span class="section__num mono">§ 04</span>
|
| <h2 class="section__title">Users <span class="italic">— Index</span></h2>
|
| </div>
|
|
|
| <div class="search">
|
| <input type="text" id="userSearch" class="search__input"
|
| placeholder="Filter by username, telegram ID, or server number…"
|
| oninput="filterUsers()">
|
| <span class="search__hint mono" id="userCount">— records</span>
|
| </div>
|
|
|
| <div id="usersContent" class="placeholder mono">
|
| Enter credentials to load user registry.
|
| </div>
|
| </div>
|
| </section>
|
|
|
| <div class="divider divider--ultra"></div>
|
|
|
| <footer class="footer">
|
| <div class="footer__inner">
|
| <div class="mono footer__line">ServerClass / Admin Console</div>
|
| <div class="mono footer__line">Auto-refresh every <span id="pollInterval">{{ poll_interval }}</span>s · Socket.IO</div>
|
| <div class="mono footer__line">MMXXV</div>
|
| </div>
|
| </footer>
|
|
|
| <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
|
| <script>
|
| window.__POLL_INTERVAL__ = {{ poll_interval }};
|
| </script>
|
| <script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
|
| </body>
|
| </html> |
