|
|
<!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> |
|
|
|
