Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Control Center</title> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| <style> | |
| .admin-container { | |
| width: 100%; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| display: none; | |
| } | |
| #login-section { | |
| max-width: 400px; | |
| margin: 100px auto; | |
| } | |
| .keys-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-top: 1.5rem; | |
| color: var(--text-main); | |
| background: rgba(15, 23, 42, 0.4); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .keys-table th, .keys-table td { | |
| padding: 1rem; | |
| text-align: left; | |
| border-bottom: 1px solid var(--panel-border); | |
| } | |
| .keys-table th { | |
| background: rgba(255, 255, 255, 0.05); | |
| font-weight: 600; | |
| color: #fff; | |
| } | |
| .badge { | |
| padding: 0.25rem 0.6rem; | |
| border-radius: 4px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| } | |
| .badge-active { background: rgba(16, 185, 129, 0.2); color: #10b981; } | |
| .badge-expired { background: rgba(244, 63, 94, 0.2); color: #f43f5e; } | |
| .badge-revoked { background: rgba(148, 163, 184, 0.2); color: #94a3b8; } | |
| .action-btn { | |
| background: rgba(244, 63, 94, 0.2); | |
| color: #fca5a5; | |
| border: 1px solid rgba(244, 63, 94, 0.3); | |
| border-radius: 6px; | |
| padding: 0.4rem 0.8rem; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| font-size: 0.85rem; | |
| } | |
| .action-btn:hover { | |
| background: rgba(244, 63, 94, 0.4); | |
| } | |
| .key-text { | |
| font-family: 'Courier New', Courier, monospace; | |
| background: rgba(0, 0, 0, 0.3); | |
| padding: 0.3rem 0.5rem; | |
| border-radius: 4px; | |
| user-select: all; | |
| color: #93c5fd; | |
| } | |
| .header-flex { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav> | |
| <div class="nav-container"> | |
| <div class="nav-logo"> | |
| <span style="font-size: 1.5rem;">⚙️</span> | |
| <span class="logo-text">Admin Control Center</span> | |
| </div> | |
| <div class="nav-links"> | |
| <a href="/" class="nav-link">← Back to App</a> | |
| <a href="#" class="nav-link" id="logout-btn" style="display: none;">Logout</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="main-content"> | |
| <!-- LOGIN SECTION --> | |
| <div id="login-section" class="glass-panel"> | |
| <div class="page-header" style="margin-bottom: 1.5rem;"> | |
| <h1 style="font-size: 2rem;">Admin Access</h1> | |
| </div> | |
| <div class="form-group"> | |
| <label>Master Key</label> | |
| <div class="input-wrapper"> | |
| <input type="password" id="master-key-input" placeholder="Enter Master Key..." /> | |
| </div> | |
| </div> | |
| <button class="generate-btn" id="login-btn" style="margin-top: 1.5rem;">Unlock Console</button> | |
| <div id="login-error" class="error-message" style="margin-top: 1rem; text-align: center;"></div> | |
| </div> | |
| <!-- ADMIN PANEL SECTION --> | |
| <div id="admin-section" class="admin-container"> | |
| <!-- Generate Key Card --> | |
| <div class="glass-panel" style="margin-bottom: 2rem;"> | |
| <div class="header-flex"> | |
| <h2 style="font-family: var(--font-heading); color: #fff;">Generate New Key</h2> | |
| </div> | |
| <div class="form-grid" style="align-items: end;"> | |
| <div class="form-group"> | |
| <label>Expiration Time (Hours)</label> | |
| <select id="key-hours"> | |
| <option value="1">1 Hour</option> | |
| <option value="12">12 Hours</option> | |
| <option value="24">24 Hours (1 Day)</option> | |
| <option value="168">168 Hours (7 Days)</option> | |
| <option value="720">720 Hours (30 Days)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <button class="generate-btn" id="generate-key-btn" style="margin-top: 0;">Generate Key</button> | |
| </div> | |
| </div> | |
| <div id="new-key-result" style="margin-top: 1.5rem; display: none;"> | |
| <p style="color: var(--text-muted); margin-bottom: 0.5rem;">Successfully Generated Key:</p> | |
| <div style="display: flex; gap: 1rem; align-items: center;"> | |
| <span class="key-text" id="new-key-display" style="font-size: 1.5rem; padding: 0.8rem 1rem;"></span> | |
| <button id="copy-btn" class="action-btn" style="background: rgba(59, 130, 246, 0.2); color: #93c5fd; border-color: rgba(59, 130, 246, 0.3);">Copy to Clipboard</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Active Keys Card --> | |
| <div class="glass-panel"> | |
| <div class="header-flex"> | |
| <h2 style="font-family: var(--font-heading); color: #fff;">Access Keys Database</h2> | |
| <div> | |
| <button id="revoke-all-btn" class="action-btn" style="margin-right: 1rem; color: #f87171; border-color: #f87171;">⚠️ Revoke All Active</button> | |
| <button id="refresh-btn" class="action-btn" style="background: rgba(255,255,255,0.1); color: #fff; border: none;">↻ Refresh</button> | |
| </div> | |
| </div> | |
| <table class="keys-table"> | |
| <thead> | |
| <tr> | |
| <th>Key</th> | |
| <th>Status</th> | |
| <th>Created</th> | |
| <th>Expires</th> | |
| <th>IP Used</th> | |
| <th>Action</th> | |
| </tr> | |
| </thead> | |
| <tbody id="keys-table-body"> | |
| <!-- Populated via JS --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Access Logs Card --> | |
| <div class="glass-panel" style="margin-top: 2rem;"> | |
| <div class="header-flex"> | |
| <h2 style="font-family: var(--font-heading); color: #fff;">System Access Logs (Last 24h)</h2> | |
| <button id="refresh-logs-btn" class="action-btn" style="background: rgba(255,255,255,0.1); color: #fff; border: none;">↻ Refresh Logs</button> | |
| </div> | |
| <div id="logs-container" style="background: rgba(0,0,0,0.5); padding: 1rem; border-radius: 8px; max-height: 300px; overflow-y: auto; font-family: monospace; font-size: 0.85rem; color: #a1a1aa; line-height: 1.5;"> | |
| <!-- Populated via JS --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer style="text-align: center; padding: 2rem 0; margin-top: 3rem; border-top: 1px solid rgba(255,255,255,0.05); color: var(--text-muted); font-size: 0.9rem;"> | |
| © 2026 All Rights Reserved. Wealth Engine. | |
| </footer> | |
| <script src="/static/admin.js"></script> | |
| </body> | |
| </html> | |