Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Muhafiz AI Admin Panel</title> | |
| <link rel="stylesheet" href="css/admin.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| // Authentication check | |
| if (localStorage.getItem('adminLoggedIn') !== 'true') { | |
| // Store the current URL to redirect back after login | |
| const currentPath = window.location.pathname; | |
| const redirectUrl = 'login.html?redirect=' + encodeURIComponent(currentPath); | |
| window.location.href = redirectUrl; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div class="admin-container"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar"> | |
| <div class="sidebar-header"> | |
| <img src="images/logo.png" alt="Muhafiz AI Logo" class="admin-logo"> | |
| <h2>Admin Panel</h2> | |
| </div> | |
| <nav class="sidebar-nav"> | |
| <a href="#dashboard" class="nav-item active" data-tab="dashboard"> | |
| <i class="fas fa-chart-line"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="#conversations" class="nav-item" data-tab="conversations"> | |
| <i class="fas fa-comments"></i> | |
| <span>Conversations</span> | |
| </a> | |
| <a href="#users" class="nav-item" data-tab="users"> | |
| <i class="fas fa-users"></i> | |
| <span>Users</span> | |
| </a> | |
| <a href="#settings" class="nav-item" data-tab="settings"> | |
| <i class="fas fa-cog"></i> | |
| <span>Settings</span> | |
| </a> | |
| <a href="#analytics" class="nav-item" data-tab="analytics"> | |
| <i class="fas fa-chart-bar"></i> | |
| <span>Analytics</span> | |
| </a> | |
| </nav> | |
| <div class="sidebar-footer"> | |
| <button id="logoutBtn" class="logout-btn"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| <span>Logout</span> | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <!-- Top Bar --> | |
| <header class="top-bar"> | |
| <div class="search-bar"> | |
| <i class="fas fa-search"></i> | |
| <input type="text" placeholder="Search..."> | |
| </div> | |
| <div class="top-bar-actions"> | |
| <button class="theme-toggle" id="adminThemeToggle"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| <div class="admin-profile"> | |
| <img src="images/admin-avatar.png" alt="Admin" class="admin-avatar"> | |
| <span>Admin</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Tab --> | |
| <div class="tab-content active" id="dashboard"> | |
| <h2>Dashboard</h2> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-icon"><i class="fas fa-users"></i></div> | |
| <div class="stat-info"> | |
| <h3>Total Users</h3> | |
| <p>1,234</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon"><i class="fas fa-comments"></i></div> | |
| <div class="stat-info"> | |
| <h3>Conversations</h3> | |
| <p>5,678</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon"><i class="fas fa-clock"></i></div> | |
| <div class="stat-info"> | |
| <h3>Avg. Response Time</h3> | |
| <p>1.5s</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon"><i class="fas fa-chart-line"></i></div> | |
| <div class="stat-info"> | |
| <h3>Success Rate</h3> | |
| <p>98.5%</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="charts-grid"> | |
| <div class="chart-card"> | |
| <h3>User Activity</h3> | |
| <div class="chart-placeholder"> | |
| <!-- Chart will be rendered here --> | |
| </div> | |
| </div> | |
| <div class="chart-card"> | |
| <h3>Response Times</h3> | |
| <div class="chart-placeholder"> | |
| <!-- Chart will be rendered here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Tab --> | |
| <div class="tab-content" id="settings"> | |
| <h2>Settings</h2> | |
| <div class="settings-grid"> | |
| <div class="settings-card"> | |
| <h3>OpenRouter API Configuration</h3> | |
| <form id="apiSettingsForm"> | |
| <div class="form-group"> | |
| <label for="apiKey">OpenRouter API Key</label> | |
| <div class="input-with-copy"> | |
| <input type="password" id="apiKey" name="apiKey"> | |
| <button type="button" class="copy-btn" title="Toggle visibility"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="siteUrl">Your Site URL</label> | |
| <input type="url" id="siteUrl" name="siteUrl" placeholder="https://your-site.com"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="siteName">Your Site Name</label> | |
| <input type="text" id="siteName" name="siteName" placeholder="Muhafiz AI"> | |
| </div> | |
| <button type="submit" class="btn-primary">Save API Settings</button> | |
| </form> | |
| </div> | |
| <div class="settings-card"> | |
| <h3>Model Settings</h3> | |
| <form id="modelSettingsForm"> | |
| <div class="form-group"> | |
| <label for="modelSelect">Select Model</label> | |
| <select id="modelSelect" name="model"> | |
| <option value="qwen/qwen3-14b:free">Qwen 14B (Free)</option> | |
| <option value="mistralai/mistral-7b-instruct:free">Mistral 7B Instruct (Free)</option> | |
| <option value="meta-llama/codellama-34b-instruct:free">CodeLlama 34B (Free)</option> | |
| <option value="gryphe/mythomist-7b:free">MythoMist 7B (Free)</option> | |
| <option value="anthropic/claude-3-opus:ultra">Claude 3 Opus (Ultra)</option> | |
| <option value="anthropic/claude-3-sonnet:beta">Claude 3 Sonnet (Beta)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="temperature">Temperature</label> | |
| <div class="range-with-value"> | |
| <input type="range" id="temperature" name="temperature" min="0" max="1" step="0.1" value="0.7"> | |
| <span class="range-value">0.7</span> | |
| </div> | |
| <small class="help-text">Controls randomness: 0 is focused, 1 is creative</small> | |
| </div> | |
| <div class="form-group"> | |
| <label for="maxTokens">Max Tokens</label> | |
| <input type="number" id="maxTokens" name="maxTokens" min="1" max="4096" value="2048"> | |
| <small class="help-text">Maximum length of the response</small> | |
| </div> | |
| <div class="form-group"> | |
| <label class="checkbox-label"> | |
| <input type="checkbox" id="streamResponse" name="streamResponse" checked> | |
| <span>Stream Response</span> | |
| </label> | |
| <small class="help-text">Show response as it's being generated</small> | |
| </div> | |
| <button type="submit" class="btn-primary">Apply Model Settings</button> | |
| <button type="button" class="btn-secondary" id="testModel"> | |
| <i class="fas fa-vial"></i> Test Model | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h3>Test API Response</h3> | |
| <div class="form-group"> | |
| <label for="testMessage">Test Message</label> | |
| <input type="text" id="testMessage" placeholder="Enter a test message" value="Hello! Can you hear me?"> | |
| </div> | |
| <div class="test-response-container" style="display: none;"> | |
| <h4>API Response:</h4> | |
| <div id="testResponse" class="test-response"></div> | |
| <div id="testError" class="test-error"></div> | |
| </div> | |
| <button id="testApiBtn" class="btn-secondary"> | |
| <i class="fas fa-vial"></i> Test API Response | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="js/admin.js"></script> | |
| <style> | |
| .test-response-container { | |
| margin-top: 16px; | |
| padding: 16px; | |
| border-radius: 8px; | |
| background: var(--hover-bg); | |
| } | |
| .test-response { | |
| white-space: pre-wrap; | |
| font-family: monospace; | |
| margin-top: 8px; | |
| padding: 12px; | |
| border-radius: 6px; | |
| background: var(--admin-bg); | |
| border: 1px solid var(--border-color); | |
| max-height: 200px; | |
| overflow-y: auto; | |
| } | |
| .test-error { | |
| color: var(--error-color); | |
| margin-top: 8px; | |
| font-size: 14px; | |
| } | |
| #testApiBtn { | |
| margin-top: 16px; | |
| width: 100%; | |
| } | |
| #testApiBtn.loading { | |
| opacity: 0.7; | |
| cursor: not-allowed; | |
| } | |
| #testApiBtn.loading i { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </body> | |
| </html> |