| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Admin Panel - Crypto API Monitor</title>
|
| <style>
|
| * { margin: 0; padding: 0; box-sizing: border-box; }
|
| body {
|
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
| background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #4facfe);
|
| background-size: 400% 400%;
|
| animation: gradientShift 15s ease infinite;
|
| padding: 20px;
|
| color: #1a1a1a;
|
| min-height: 100vh;
|
| }
|
| @keyframes gradientShift {
|
| 0%, 100% { background-position: 0% 50%; }
|
| 50% { background-position: 100% 50%; }
|
| }
|
| .container {
|
| max-width: 1200px;
|
| margin: 0 auto;
|
| background: rgba(255, 255, 255, 0.95);
|
| backdrop-filter: blur(10px);
|
| border-radius: 24px;
|
| padding: 40px;
|
| box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
| }
|
| h1 {
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| -webkit-background-clip: text;
|
| -webkit-text-fill-color: transparent;
|
| font-size: 36px;
|
| margin-bottom: 10px;
|
| }
|
| .nav-tabs {
|
| display: flex;
|
| gap: 10px;
|
| margin: 30px 0;
|
| border-bottom: 3px solid #e9ecef;
|
| padding-bottom: 0;
|
| }
|
| .tab {
|
| padding: 12px 24px;
|
| background: #f8f9fa;
|
| border: none;
|
| border-radius: 12px 12px 0 0;
|
| cursor: pointer;
|
| font-weight: 600;
|
| transition: all 0.3s;
|
| }
|
| .tab.active {
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| color: white;
|
| }
|
| .tab-content {
|
| display: none;
|
| animation: fadeIn 0.3s;
|
| }
|
| .tab-content.active {
|
| display: block;
|
| }
|
| @keyframes fadeIn {
|
| from { opacity: 0; transform: translateY(10px); }
|
| to { opacity: 1; transform: translateY(0); }
|
| }
|
| .section {
|
| background: #f8f9fa;
|
| padding: 24px;
|
| border-radius: 16px;
|
| margin: 20px 0;
|
| border: 2px solid #dee2e6;
|
| }
|
| .section h3 {
|
| color: #667eea;
|
| margin-bottom: 16px;
|
| font-size: 20px;
|
| }
|
| .form-group {
|
| margin: 16px 0;
|
| }
|
| label {
|
| display: block;
|
| font-weight: 600;
|
| margin-bottom: 8px;
|
| color: #495057;
|
| }
|
| input, select, textarea {
|
| width: 100%;
|
| padding: 12px;
|
| border: 2px solid #dee2e6;
|
| border-radius: 8px;
|
| font-family: inherit;
|
| font-size: 14px;
|
| transition: all 0.3s;
|
| }
|
| input:focus, select:focus, textarea:focus {
|
| outline: none;
|
| border-color: #667eea;
|
| box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
|
| }
|
| .btn {
|
| padding: 12px 24px;
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| color: white;
|
| border: none;
|
| border-radius: 8px;
|
| font-weight: 600;
|
| cursor: pointer;
|
| margin: 5px;
|
| transition: all 0.3s;
|
| }
|
| .btn:hover {
|
| transform: translateY(-2px);
|
| box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
| }
|
| .btn-secondary {
|
| background: #6c757d;
|
| }
|
| .btn-danger {
|
| background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
| }
|
| .btn-success {
|
| background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
| }
|
| .api-list {
|
| list-style: none;
|
| }
|
| .api-item {
|
| background: white;
|
| padding: 16px;
|
| margin: 12px 0;
|
| border-radius: 12px;
|
| border: 2px solid #dee2e6;
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| transition: all 0.3s;
|
| }
|
| .api-item:hover {
|
| border-color: #667eea;
|
| transform: translateX(5px);
|
| }
|
| .api-info {
|
| flex: 1;
|
| }
|
| .api-name {
|
| font-weight: 700;
|
| font-size: 16px;
|
| color: #667eea;
|
| }
|
| .api-url {
|
| font-size: 12px;
|
| color: #6c757d;
|
| font-family: monospace;
|
| margin: 4px 0;
|
| }
|
| .api-category {
|
| display: inline-block;
|
| padding: 4px 10px;
|
| background: #e9ecef;
|
| border-radius: 8px;
|
| font-size: 11px;
|
| font-weight: 600;
|
| margin-top: 4px;
|
| }
|
| .status-indicator {
|
| width: 12px;
|
| height: 12px;
|
| border-radius: 50%;
|
| display: inline-block;
|
| margin-right: 8px;
|
| }
|
| .status-online { background: #10b981; box-shadow: 0 0 10px #10b981; }
|
| .status-offline { background: #ef4444; box-shadow: 0 0 10px #ef4444; }
|
| .grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
| gap: 20px;
|
| }
|
| .stat-box {
|
| background: white;
|
| padding: 20px;
|
| border-radius: 12px;
|
| border: 2px solid #dee2e6;
|
| text-align: center;
|
| }
|
| .stat-value {
|
| font-size: 32px;
|
| font-weight: 700;
|
| color: #667eea;
|
| margin: 10px 0;
|
| }
|
| .stat-label {
|
| font-size: 14px;
|
| color: #6c757d;
|
| font-weight: 600;
|
| }
|
| .alert {
|
| padding: 16px;
|
| border-radius: 12px;
|
| margin: 16px 0;
|
| border-left: 4px solid;
|
| }
|
| .alert-success {
|
| background: #d1fae5;
|
| border-color: #10b981;
|
| color: #065f46;
|
| }
|
| .alert-error {
|
| background: #fee2e2;
|
| border-color: #ef4444;
|
| color: #991b1b;
|
| }
|
| .alert-info {
|
| background: #dbeafe;
|
| border-color: #3b82f6;
|
| color: #1e40af;
|
| }
|
| pre {
|
| background: #1e293b;
|
| color: #e2e8f0;
|
| padding: 16px;
|
| border-radius: 8px;
|
| overflow-x: auto;
|
| font-size: 12px;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="container">
|
| <h1>⚙️ Admin Panel</h1>
|
| <p style="color: #6c757d; margin-bottom: 20px;">Configure and manage your crypto API monitoring system</p>
|
|
|
| <div style="margin: 20px 0;">
|
| <button class="btn" onclick="window.location.href='/'">🏠 Dashboard</button>
|
| <button class="btn" onclick="window.location.href='/hf_console.html'">🤗 HF Console</button>
|
| </div>
|
|
|
| <div class="nav-tabs">
|
| <button class="tab active" onclick="switchTab('apis')">📡 API Sources</button>
|
| <button class="tab" onclick="switchTab('settings')">⚙️ Settings</button>
|
| <button class="tab" onclick="switchTab('stats')">📊 Statistics</button>
|
| </div>
|
|
|
|
|
| <div class="tab-content active" id="tab-apis">
|
| <div class="section">
|
| <h3>➕ Add New API Source</h3>
|
| <div class="form-group">
|
| <label>API Name</label>
|
| <input type="text" id="newApiName" placeholder="e.g., CoinGecko">
|
| </div>
|
| <div class="form-group">
|
| <label>API URL</label>
|
| <input type="text" id="newApiUrl" placeholder="https://api.example.com/endpoint">
|
| </div>
|
| <div class="form-group">
|
| <label>Category</label>
|
| <select id="newApiCategory">
|
| <option value="market_data">Market Data</option>
|
| <option value="blockchain_explorers">Blockchain Explorers</option>
|
| <option value="news">News & Social</option>
|
| <option value="sentiment">Sentiment</option>
|
| <option value="defi">DeFi</option>
|
| <option value="nft">NFT</option>
|
| </select>
|
| </div>
|
| <div class="form-group">
|
| <label>Test Field (optional - JSON field to verify)</label>
|
| <input type="text" id="newApiTestField" placeholder="e.g., data or status">
|
| </div>
|
| <button class="btn btn-success" onclick="addNewAPI()">➕ Add API Source</button>
|
| </div>
|
|
|
| <div class="section">
|
| <h3>📋 Current API Sources</h3>
|
| <div id="apisList">Loading...</div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="tab-content" id="tab-settings">
|
| <div class="section">
|
| <h3>🔄 Refresh Settings</h3>
|
| <div class="form-group">
|
| <label>API Check Interval (seconds)</label>
|
| <input type="number" id="checkInterval" value="30" min="10" max="300">
|
| <small style="color: #6c757d;">How often to check API status (10-300 seconds)</small>
|
| </div>
|
| <div class="form-group">
|
| <label>Dashboard Auto-Refresh (seconds)</label>
|
| <input type="number" id="dashboardRefresh" value="30" min="5" max="300">
|
| <small style="color: #6c757d;">How often dashboard updates (5-300 seconds)</small>
|
| </div>
|
| <button class="btn btn-success" onclick="saveSettings()">💾 Save Settings</button>
|
| </div>
|
|
|
| <div class="section">
|
| <h3>🤗 HuggingFace Settings</h3>
|
| <div class="form-group">
|
| <label>HuggingFace Token (optional)</label>
|
| <input type="password" id="hfToken" placeholder="hf_...">
|
| <small style="color: #6c757d;">For higher rate limits</small>
|
| </div>
|
| <div class="form-group">
|
| <label>Enable Sentiment Analysis</label>
|
| <select id="enableSentiment">
|
| <option value="true">Enabled</option>
|
| <option value="false">Disabled</option>
|
| </select>
|
| </div>
|
| <div class="form-group">
|
| <label>Sentiment Model</label>
|
| <select id="sentimentModel">
|
| <option value="ElKulako/cryptobert">ElKulako/cryptobert</option>
|
| <option value="kk08/CryptoBERT">kk08/CryptoBERT</option>
|
| </select>
|
| </div>
|
| <button class="btn btn-success" onclick="saveHFSettings()">💾 Save HF Settings</button>
|
| </div>
|
|
|
| <div class="section">
|
| <h3>🔧 System Configuration</h3>
|
| <div class="form-group">
|
| <label>Request Timeout (seconds)</label>
|
| <input type="number" id="requestTimeout" value="5" min="1" max="30">
|
| </div>
|
| <div class="form-group">
|
| <label>Max Concurrent Requests</label>
|
| <input type="number" id="maxConcurrent" value="10" min="1" max="50">
|
| </div>
|
| <button class="btn btn-success" onclick="saveSystemSettings()">💾 Save System Settings</button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="tab-content" id="tab-stats">
|
| <div class="grid">
|
| <div class="stat-box">
|
| <div class="stat-label">Total API Sources</div>
|
| <div class="stat-value" id="statTotal">0</div>
|
| </div>
|
| <div class="stat-box">
|
| <div class="stat-label">Currently Online</div>
|
| <div class="stat-value" style="color: #10b981;" id="statOnline">0</div>
|
| </div>
|
| <div class="stat-box">
|
| <div class="stat-label">Currently Offline</div>
|
| <div class="stat-value" style="color: #ef4444;" id="statOffline">0</div>
|
| </div>
|
| </div>
|
|
|
| <div class="section">
|
| <h3>📊 System Information</h3>
|
| <pre id="systemInfo">Loading...</pre>
|
| </div>
|
|
|
| <div class="section">
|
| <h3>🔍 Current Configuration</h3>
|
| <pre id="currentConfig">Loading...</pre>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script>
|
| let currentAPIs = [];
|
| let settings = {
|
| checkInterval: 30,
|
| dashboardRefresh: 30,
|
| requestTimeout: 5,
|
| maxConcurrent: 10,
|
| hfToken: '',
|
| enableSentiment: true,
|
| sentimentModel: 'ElKulako/cryptobert'
|
| };
|
|
|
| function switchTab(tabName) {
|
| document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
| document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
|
| event.target.classList.add('active');
|
| document.getElementById('tab-' + tabName).classList.add('active');
|
|
|
| if (tabName === 'stats') {
|
| loadStats();
|
| }
|
| }
|
|
|
| async function loadAPIs() {
|
| try {
|
| const res = await fetch('/api/providers');
|
| const providers = await res.json();
|
| currentAPIs = providers;
|
|
|
| const list = document.getElementById('apisList');
|
| list.innerHTML = '<ul class="api-list">' + providers.map(api => `
|
| <li class="api-item">
|
| <div class="api-info">
|
| <div class="api-name">
|
| <span class="status-indicator status-${api.status}"></span>
|
| ${api.name}
|
| </div>
|
| <div class="api-url">${api.category}</div>
|
| <span class="api-category">${api.status.toUpperCase()}</span>
|
| <span class="api-category">${api.response_time_ms}ms</span>
|
| </div>
|
| <div>
|
| <button class="btn btn-secondary" onclick="testAPI('${api.name}')">🧪 Test</button>
|
| </div>
|
| </li>
|
| `).join('') + '</ul>';
|
| } catch (error) {
|
| document.getElementById('apisList').innerHTML =
|
| '<div class="alert alert-error">Error loading APIs: ' + error.message + '</div>';
|
| }
|
| }
|
|
|
| async function addNewAPI() {
|
| const name = document.getElementById('newApiName').value;
|
| const url = document.getElementById('newApiUrl').value;
|
| const category = document.getElementById('newApiCategory').value;
|
| const testField = document.getElementById('newApiTestField').value;
|
|
|
| if (!name || !url) {
|
| alert('Please fill in API name and URL');
|
| return;
|
| }
|
|
|
| const newAPI = {
|
| name: name,
|
| url: url,
|
| category: category,
|
| test_field: testField || null
|
| };
|
|
|
|
|
| let customAPIs = JSON.parse(localStorage.getItem('customAPIs') || '[]');
|
| customAPIs.push(newAPI);
|
| localStorage.setItem('customAPIs', JSON.stringify(customAPIs));
|
|
|
| document.getElementById('newApiName').value = '';
|
| document.getElementById('newApiUrl').value = '';
|
| document.getElementById('newApiTestField').value = '';
|
|
|
| alert('✅ API added! Note: Restart server to activate. Custom APIs are saved in browser storage.');
|
| loadAPIs();
|
| }
|
|
|
| async function testAPI(name) {
|
| alert('Testing ' + name + '...\n\nThis will check if the API is responding.');
|
| await loadAPIs();
|
| }
|
|
|
| function saveSettings() {
|
| settings.checkInterval = parseInt(document.getElementById('checkInterval').value);
|
| settings.dashboardRefresh = parseInt(document.getElementById('dashboardRefresh').value);
|
| localStorage.setItem('monitorSettings', JSON.stringify(settings));
|
| alert('✅ Settings saved!\n\nNote: Some settings require server restart to take effect.');
|
| }
|
|
|
| function saveHFSettings() {
|
| settings.hfToken = document.getElementById('hfToken').value;
|
| settings.enableSentiment = document.getElementById('enableSentiment').value === 'true';
|
| settings.sentimentModel = document.getElementById('sentimentModel').value;
|
| localStorage.setItem('monitorSettings', JSON.stringify(settings));
|
| alert('✅ HuggingFace settings saved!\n\nRestart server to apply changes.');
|
| }
|
|
|
| function saveSystemSettings() {
|
| settings.requestTimeout = parseInt(document.getElementById('requestTimeout').value);
|
| settings.maxConcurrent = parseInt(document.getElementById('maxConcurrent').value);
|
| localStorage.setItem('monitorSettings', JSON.stringify(settings));
|
| alert('✅ System settings saved!\n\nRestart server to apply changes.');
|
| }
|
|
|
| async function loadStats() {
|
| try {
|
| const res = await fetch('/api/status');
|
| const data = await res.json();
|
|
|
| document.getElementById('statTotal').textContent = data.total_providers;
|
| document.getElementById('statOnline').textContent = data.online;
|
| document.getElementById('statOffline').textContent = data.offline;
|
|
|
| document.getElementById('systemInfo').textContent = JSON.stringify({
|
| total_providers: data.total_providers,
|
| online: data.online,
|
| offline: data.offline,
|
| degraded: data.degraded,
|
| avg_response_time_ms: data.avg_response_time_ms,
|
| system_health: data.system_health,
|
| last_check: data.timestamp
|
| }, null, 2);
|
|
|
| document.getElementById('currentConfig').textContent = JSON.stringify(settings, null, 2);
|
| } catch (error) {
|
| document.getElementById('systemInfo').textContent = 'Error: ' + error.message;
|
| }
|
| }
|
|
|
|
|
| function loadSettings() {
|
| const saved = localStorage.getItem('monitorSettings');
|
| if (saved) {
|
| settings = JSON.parse(saved);
|
| document.getElementById('checkInterval').value = settings.checkInterval;
|
| document.getElementById('dashboardRefresh').value = settings.dashboardRefresh;
|
| document.getElementById('requestTimeout').value = settings.requestTimeout;
|
| document.getElementById('maxConcurrent').value = settings.maxConcurrent;
|
| document.getElementById('hfToken').value = settings.hfToken;
|
| document.getElementById('enableSentiment').value = settings.enableSentiment.toString();
|
| document.getElementById('sentimentModel').value = settings.sentimentModel;
|
| }
|
| }
|
|
|
|
|
| loadAPIs();
|
| loadSettings();
|
| </script>
|
| </body>
|
| </html>
|
|
|
