| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>glmgate Dashboard</title> |
| <style> |
| :root { --bg: #0d0d0d; --card: #1a1a1a; --text: #c0c0c0; --accent: #00aa00; --error: #ff4444; } |
| body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 2rem; line-height: 1.5; } |
| .container { max-width: 900px; margin: 0 auto; } |
| .card { background: var(--card); padding: 1.5rem; margin-bottom: 1.5rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); } |
| h1, h2, h3 { margin-top: 0; color: #fff; } |
| button { background: var(--accent); color: #fff; border: none; padding: 0.6rem 1.2rem; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 0.9rem; transition: opacity 0.2s; } |
| button:hover { opacity: 0.9; } |
| button:disabled { background: #555; cursor: not-allowed; } |
| .log-container { max-height: 400px; overflow-y: auto; background: #0a0a0a; padding: 1rem; border-radius: 4px; font-family: monospace; font-size: 0.85rem; } |
| .log-entry { margin-bottom: 0.3rem; border-bottom: 1px solid #222; padding-bottom: 0.2rem; } |
| .log-entry:last-child { border-bottom: none; } |
| .status-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 99px; font-size: 0.8rem; font-weight: 600; } |
| .status-ok { background: rgba(0, 170, 0, 0.2); color: #4ade80; } |
| .status-err { background: rgba(255, 68, 68, 0.2); color: #f87171; } |
| ul { list-style: none; padding: 0; } |
| li { padding: 0.4rem 0; border-bottom: 1px solid #333; } |
| li:last-child { border-bottom: none; } |
| .hidden { display: none; } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <header class="card"> |
| <h1>🦎 glmgate Dashboard</h1> |
| <p>GLM Reverse Proxy & Account Manager</p> |
| </header> |
|
|
| <section class="card" id="status-card"> |
| <h2>Gateway Status</h2> |
| <div id="status-content"> |
| <p>Total Accounts: <strong id="total-accounts">…</strong></p> |
| <p>Alive Accounts: <strong id="alive-accounts">…</strong></p> |
| <button id="create-btn">Create New Account</button> |
| <span id="create-msg" class="hidden" style="margin-left: 1rem;"></span> |
| </div> |
| </section> |
|
|
| <section class="card" id="models-card"> |
| <h2>Available Models</h2> |
| <ul id="model-list"> |
| <li>Loading models…</li> |
| </ul> |
| </section> |
|
|
| <section class="card" id="logs-card"> |
| <h2>Live Logs</h2> |
| <div class="log-container" id="log-container"> |
| <div class="log-entry">Waiting for logs…</div> |
| </div> |
| </section> |
| </div> |
|
|
| <script src="app.js"></script> |
| </body> |
| </html> |
|
|
