|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Crypto Monitor - Complete Overview</title>
|
|
|
<style>
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
min-height: 100vh;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
max-width: 1400px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
background: white;
|
|
|
border-radius: 15px;
|
|
|
padding: 30px;
|
|
|
margin-bottom: 20px;
|
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.header h1 {
|
|
|
color: #667eea;
|
|
|
font-size: 2em;
|
|
|
}
|
|
|
|
|
|
.refresh-btn {
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
color: white;
|
|
|
border: none;
|
|
|
padding: 12px 30px;
|
|
|
border-radius: 10px;
|
|
|
font-size: 1em;
|
|
|
font-weight: 600;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.refresh-btn:hover {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
|
|
|
}
|
|
|
|
|
|
.stats-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
|
gap: 15px;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.stat-card {
|
|
|
background: white;
|
|
|
border-radius: 12px;
|
|
|
padding: 20px;
|
|
|
text-align: center;
|
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
|
}
|
|
|
|
|
|
.stat-card h3 {
|
|
|
color: #999;
|
|
|
font-size: 0.85em;
|
|
|
text-transform: uppercase;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.stat-card .value {
|
|
|
font-size: 2.5em;
|
|
|
font-weight: bold;
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
.stat-card.green .value { color: #10b981; }
|
|
|
.stat-card.blue .value { color: #3b82f6; }
|
|
|
.stat-card.orange .value { color: #f59e0b; }
|
|
|
.stat-card.red .value { color: #ef4444; }
|
|
|
|
|
|
.content-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: 2fr 1fr;
|
|
|
gap: 20px;
|
|
|
}
|
|
|
|
|
|
.card {
|
|
|
background: white;
|
|
|
border-radius: 15px;
|
|
|
padding: 25px;
|
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
|
}
|
|
|
|
|
|
.card h2 {
|
|
|
color: #333;
|
|
|
margin-bottom: 20px;
|
|
|
padding-bottom: 10px;
|
|
|
border-bottom: 3px solid #667eea;
|
|
|
}
|
|
|
|
|
|
.providers-list {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
|
gap: 10px;
|
|
|
max-height: 600px;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
.provider-item {
|
|
|
background: #f8f9fa;
|
|
|
border-radius: 8px;
|
|
|
padding: 12px;
|
|
|
border-left: 4px solid #ddd;
|
|
|
}
|
|
|
|
|
|
.provider-item.online {
|
|
|
border-left-color: #10b981;
|
|
|
background: linear-gradient(to right, #f0fdf4, #f8f9fa);
|
|
|
}
|
|
|
.provider-item.offline {
|
|
|
border-left-color: #ef4444;
|
|
|
background: linear-gradient(to right, #fef2f2, #f8f9fa);
|
|
|
}
|
|
|
.provider-item.degraded {
|
|
|
border-left-color: #f59e0b;
|
|
|
background: linear-gradient(to right, #fffbeb, #f8f9fa);
|
|
|
}
|
|
|
|
|
|
.provider-item .name {
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
font-size: 0.9em;
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
.provider-item .info {
|
|
|
font-size: 0.75em;
|
|
|
color: #666;
|
|
|
}
|
|
|
|
|
|
.category-list {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 12px;
|
|
|
}
|
|
|
|
|
|
.category-item {
|
|
|
background: #f8f9fa;
|
|
|
border-radius: 8px;
|
|
|
padding: 15px;
|
|
|
}
|
|
|
|
|
|
.category-item .name {
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
|
|
|
.category-item .stats {
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
font-size: 0.85em;
|
|
|
}
|
|
|
|
|
|
.loading {
|
|
|
text-align: center;
|
|
|
padding: 40px;
|
|
|
color: #666;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
.content-grid {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
.stats-grid {
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
<div class="header">
|
|
|
<div>
|
|
|
<h1>🚀 Crypto API Monitor</h1>
|
|
|
<p style="color: #666; margin-top: 5px;">Complete System Overview</p>
|
|
|
</div>
|
|
|
<button class="refresh-btn" onclick="loadData()">🔄 Refresh</button>
|
|
|
</div>
|
|
|
|
|
|
<div class="stats-grid">
|
|
|
<div class="stat-card blue">
|
|
|
<h3>Total APIs</h3>
|
|
|
<div class="value" id="total">-</div>
|
|
|
</div>
|
|
|
<div class="stat-card green">
|
|
|
<h3>Online</h3>
|
|
|
<div class="value" id="online">-</div>
|
|
|
</div>
|
|
|
<div class="stat-card orange">
|
|
|
<h3>Degraded</h3>
|
|
|
<div class="value" id="degraded">-</div>
|
|
|
</div>
|
|
|
<div class="stat-card red">
|
|
|
<h3>Offline</h3>
|
|
|
<div class="value" id="offline">-</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="content-grid">
|
|
|
<div class="card">
|
|
|
<h2>📊 All Providers</h2>
|
|
|
<div class="providers-list" id="providers">
|
|
|
<div class="loading">Loading...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="card">
|
|
|
<h2>📁 Categories</h2>
|
|
|
<div class="category-list" id="categories">
|
|
|
<div class="loading">Loading...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
async function loadData() {
|
|
|
try {
|
|
|
const response = await fetch('/api/providers');
|
|
|
const providers = await response.json();
|
|
|
|
|
|
|
|
|
const online = providers.filter(p => p.status === 'online').length;
|
|
|
const offline = providers.filter(p => p.status === 'offline').length;
|
|
|
const degraded = providers.filter(p => p.status === 'degraded').length;
|
|
|
|
|
|
|
|
|
document.getElementById('total').textContent = providers.length;
|
|
|
document.getElementById('online').textContent = online;
|
|
|
document.getElementById('degraded').textContent = degraded;
|
|
|
document.getElementById('offline').textContent = offline;
|
|
|
|
|
|
|
|
|
const categories = {};
|
|
|
providers.forEach(p => {
|
|
|
if (!categories[p.category]) {
|
|
|
categories[p.category] = { online: 0, offline: 0, degraded: 0 };
|
|
|
}
|
|
|
categories[p.category][p.status]++;
|
|
|
});
|
|
|
|
|
|
|
|
|
const providersHtml = providers.map(p => `
|
|
|
<div class="provider-item ${p.status}">
|
|
|
<div class="name">${p.name}</div>
|
|
|
<div class="info">${p.category}</div>
|
|
|
<div class="info" style="color: ${p.status === 'online' ? '#10b981' : p.status === 'degraded' ? '#f59e0b' : '#ef4444'}">
|
|
|
${p.status.toUpperCase()}
|
|
|
</div>
|
|
|
</div>
|
|
|
`).join('');
|
|
|
document.getElementById('providers').innerHTML = providersHtml;
|
|
|
|
|
|
|
|
|
const categoriesHtml = Object.entries(categories).map(([name, stats]) => `
|
|
|
<div class="category-item">
|
|
|
<div class="name">${name}</div>
|
|
|
<div class="stats">
|
|
|
<span style="color: #10b981;">✓ ${stats.online}</span>
|
|
|
<span style="color: #f59e0b;">⚠ ${stats.degraded}</span>
|
|
|
<span style="color: #ef4444;">✗ ${stats.offline}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
`).join('');
|
|
|
document.getElementById('categories').innerHTML = categoriesHtml;
|
|
|
|
|
|
} catch (error) {
|
|
|
console.error('Error:', error);
|
|
|
document.getElementById('providers').innerHTML = '<div class="loading">Error loading data</div>';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
loadData();
|
|
|
|
|
|
|
|
|
setInterval(loadData, 30000);
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
|
|
|
