| <!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>
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
| <style>
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| }
|
|
|
| body {
|
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| min-height: 100vh;
|
| padding: 20px;
|
| }
|
|
|
| .container {
|
| max-width: 1600px;
|
| 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);
|
| }
|
|
|
| .header h1 {
|
| color: #667eea;
|
| font-size: 2.5em;
|
| margin-bottom: 10px;
|
| }
|
|
|
| .header p {
|
| color: #666;
|
| font-size: 1.1em;
|
| }
|
|
|
| .stats-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
| gap: 20px;
|
| margin-bottom: 20px;
|
| }
|
|
|
| .stat-card {
|
| background: white;
|
| border-radius: 15px;
|
| padding: 25px;
|
| box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
| transition: transform 0.3s ease;
|
| }
|
|
|
| .stat-card:hover {
|
| transform: translateY(-5px);
|
| box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
| }
|
|
|
| .stat-card h3 {
|
| color: #999;
|
| font-size: 0.9em;
|
| text-transform: uppercase;
|
| margin-bottom: 10px;
|
| font-weight: 600;
|
| }
|
|
|
| .stat-card .value {
|
| font-size: 2.5em;
|
| font-weight: bold;
|
| margin-bottom: 5px;
|
| }
|
|
|
| .stat-card .label {
|
| color: #666;
|
| font-size: 0.9em;
|
| }
|
|
|
| .stat-card.green .value { color: #10b981; }
|
| .stat-card.blue .value { color: #3b82f6; }
|
| .stat-card.purple .value { color: #8b5cf6; }
|
| .stat-card.orange .value { color: #f59e0b; }
|
| .stat-card.red .value { color: #ef4444; }
|
|
|
| .main-grid {
|
| display: grid;
|
| grid-template-columns: 2fr 1fr;
|
| gap: 20px;
|
| margin-bottom: 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;
|
| font-size: 1.5em;
|
| border-bottom: 3px solid #667eea;
|
| padding-bottom: 10px;
|
| }
|
|
|
| .providers-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
| gap: 15px;
|
| max-height: 500px;
|
| overflow-y: auto;
|
| }
|
|
|
| .provider-card {
|
| background: #f8f9fa;
|
| border-radius: 10px;
|
| padding: 15px;
|
| border-left: 4px solid #ddd;
|
| transition: all 0.3s ease;
|
| }
|
|
|
| .provider-card:hover {
|
| transform: translateX(5px);
|
| box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
| }
|
|
|
| .provider-card.online { border-left-color: #10b981; background: #f0fdf4; }
|
| .provider-card.offline { border-left-color: #ef4444; background: #fef2f2; }
|
| .provider-card.degraded { border-left-color: #f59e0b; background: #fffbeb; }
|
|
|
| .provider-card .name {
|
| font-weight: 600;
|
| color: #333;
|
| margin-bottom: 5px;
|
| }
|
|
|
| .provider-card .category {
|
| font-size: 0.85em;
|
| color: #666;
|
| margin-bottom: 5px;
|
| }
|
|
|
| .provider-card .status {
|
| font-size: 0.8em;
|
| padding: 3px 8px;
|
| border-radius: 5px;
|
| display: inline-block;
|
| font-weight: 600;
|
| }
|
|
|
| .status.online { background: #10b981; color: white; }
|
| .status.offline { background: #ef4444; color: white; }
|
| .status.degraded { background: #f59e0b; color: white; }
|
|
|
| .category-list {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 15px;
|
| }
|
|
|
| .category-item {
|
| background: #f8f9fa;
|
| border-radius: 10px;
|
| padding: 15px;
|
| border-left: 4px solid #667eea;
|
| }
|
|
|
| .category-item .cat-name {
|
| font-weight: 600;
|
| color: #333;
|
| margin-bottom: 10px;
|
| font-size: 1.1em;
|
| }
|
|
|
| .category-item .cat-stats {
|
| display: flex;
|
| gap: 15px;
|
| font-size: 0.9em;
|
| }
|
|
|
| .category-item .cat-stat {
|
| display: flex;
|
| align-items: center;
|
| gap: 5px;
|
| }
|
|
|
| .chart-container {
|
| position: relative;
|
| height: 300px;
|
| margin-top: 20px;
|
| }
|
|
|
| .loading {
|
| text-align: center;
|
| padding: 40px;
|
| color: #666;
|
| font-size: 1.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;
|
| box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
| }
|
|
|
| .refresh-btn:hover {
|
| transform: translateY(-2px);
|
| box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
|
| }
|
|
|
| .refresh-btn:active {
|
| transform: translateY(0);
|
| }
|
|
|
| @keyframes pulse {
|
| 0%, 100% { opacity: 1; }
|
| 50% { opacity: 0.5; }
|
| }
|
|
|
| .updating {
|
| animation: pulse 1.5s ease-in-out infinite;
|
| }
|
|
|
| .full-width {
|
| grid-column: 1 / -1;
|
| }
|
|
|
| @media (max-width: 768px) {
|
| .main-grid {
|
| grid-template-columns: 1fr;
|
| }
|
| .stats-grid {
|
| grid-template-columns: 1fr;
|
| }
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="container">
|
| <div class="header">
|
| <h1>🚀 Crypto API Monitor</h1>
|
| <p>Complete Real-Time Overview of All Cryptocurrency Data Sources</p>
|
| <button class="refresh-btn" onclick="refreshAll()">🔄 Refresh Data</button>
|
| </div>
|
|
|
| <div class="stats-grid">
|
| <div class="stat-card green">
|
| <h3>Total Providers</h3>
|
| <div class="value" id="totalProviders">-</div>
|
| <div class="label">API Sources</div>
|
| </div>
|
| <div class="stat-card blue">
|
| <h3>Online</h3>
|
| <div class="value" id="onlineProviders">-</div>
|
| <div class="label">Active & Working</div>
|
| </div>
|
| <div class="stat-card orange">
|
| <h3>Degraded</h3>
|
| <div class="value" id="degradedProviders">-</div>
|
| <div class="label">Slow Response</div>
|
| </div>
|
| <div class="stat-card red">
|
| <h3>Offline</h3>
|
| <div class="value" id="offlineProviders">-</div>
|
| <div class="label">Not Responding</div>
|
| </div>
|
| <div class="stat-card purple">
|
| <h3>Categories</h3>
|
| <div class="value" id="totalCategories">-</div>
|
| <div class="label">Data Types</div>
|
| </div>
|
| <div class="stat-card green">
|
| <h3>Uptime</h3>
|
| <div class="value" id="uptimePercent">-</div>
|
| <div class="label">Overall Health</div>
|
| </div>
|
| </div>
|
|
|
| <div class="main-grid">
|
| <div class="card">
|
| <h2>📊 All Providers Status</h2>
|
| <div class="providers-grid" id="providersGrid">
|
| <div class="loading">Loading providers...</div>
|
| </div>
|
| </div>
|
|
|
| <div class="card">
|
| <h2>📁 Categories</h2>
|
| <div class="category-list" id="categoryList">
|
| <div class="loading">Loading categories...</div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="card full-width">
|
| <h2>📈 Status Distribution</h2>
|
| <div class="chart-container">
|
| <canvas id="statusChart"></canvas>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script>
|
| let statusChart = null;
|
|
|
| async function loadProviders() {
|
| 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;
|
| const uptime = ((online / providers.length) * 100).toFixed(1);
|
|
|
| document.getElementById('totalProviders').textContent = providers.length;
|
| document.getElementById('onlineProviders').textContent = online;
|
| document.getElementById('degradedProviders').textContent = degraded;
|
| document.getElementById('offlineProviders').textContent = offline;
|
| document.getElementById('uptimePercent').textContent = uptime + '%';
|
|
|
|
|
| const categories = {};
|
| providers.forEach(p => {
|
| if (!categories[p.category]) {
|
| categories[p.category] = { total: 0, online: 0, offline: 0, degraded: 0 };
|
| }
|
| categories[p.category].total++;
|
| categories[p.category][p.status]++;
|
| });
|
|
|
| document.getElementById('totalCategories').textContent = Object.keys(categories).length;
|
|
|
|
|
| const providersGrid = document.getElementById('providersGrid');
|
| providersGrid.innerHTML = providers.map(p => `
|
| <div class="provider-card ${p.status}">
|
| <div class="name">${p.name}</div>
|
| <div class="category">${p.category}</div>
|
| <span class="status ${p.status}">${p.status.toUpperCase()}</span>
|
| ${p.response_time_ms ? `<div style="font-size: 0.8em; color: #666; margin-top: 5px;">${Math.round(p.response_time_ms)}ms</div>` : ''}
|
| </div>
|
| `).join('');
|
|
|
|
|
| const categoryList = document.getElementById('categoryList');
|
| categoryList.innerHTML = Object.entries(categories).map(([name, stats]) => `
|
| <div class="category-item">
|
| <div class="cat-name">${name}</div>
|
| <div class="cat-stats">
|
| <div class="cat-stat">
|
| <span style="color: #10b981;">●</span>
|
| <span>${stats.online} online</span>
|
| </div>
|
| <div class="cat-stat">
|
| <span style="color: #f59e0b;">●</span>
|
| <span>${stats.degraded} degraded</span>
|
| </div>
|
| <div class="cat-stat">
|
| <span style="color: #ef4444;">●</span>
|
| <span>${stats.offline} offline</span>
|
| </div>
|
| </div>
|
| </div>
|
| `).join('');
|
|
|
|
|
| updateChart(online, degraded, offline);
|
|
|
| } catch (error) {
|
| console.error('Error loading providers:', error);
|
| document.getElementById('providersGrid').innerHTML = '<div class="loading">Error loading data</div>';
|
| }
|
| }
|
|
|
| function updateChart(online, degraded, offline) {
|
| const ctx = document.getElementById('statusChart').getContext('2d');
|
|
|
| if (statusChart) {
|
| statusChart.destroy();
|
| }
|
|
|
| statusChart = new Chart(ctx, {
|
| type: 'doughnut',
|
| data: {
|
| labels: ['Online', 'Degraded', 'Offline'],
|
| datasets: [{
|
| data: [online, degraded, offline],
|
| backgroundColor: ['#10b981', '#f59e0b', '#ef4444'],
|
| borderWidth: 0
|
| }]
|
| },
|
| options: {
|
| responsive: true,
|
| maintainAspectRatio: false,
|
| plugins: {
|
| legend: {
|
| position: 'bottom',
|
| labels: {
|
| font: { size: 14 },
|
| padding: 20
|
| }
|
| }
|
| }
|
| }
|
| });
|
| }
|
|
|
| async function refreshAll() {
|
| const btn = document.querySelector('.refresh-btn');
|
| btn.classList.add('updating');
|
| btn.textContent = '⏳ Refreshing...';
|
|
|
| await loadProviders();
|
|
|
| btn.classList.remove('updating');
|
| btn.textContent = '🔄 Refresh Data';
|
| }
|
|
|
|
|
| loadProviders();
|
|
|
|
|
| setInterval(loadProviders, 30000);
|
| </script>
|
| </body>
|
| </html>
|
|
|
|
|
