Your Name
feat: UI improvements and error suppression - Enhanced dashboard and market pages with improved header buttons, logo, and currency symbol display - Stopped animated ticker - Removed pie chart legends - Added error suppressor for external service errors (SSE, Permissions-Policy warnings) - Improved header button prominence and icon appearance - Enhanced logo with glow effects and better design - Fixed currency symbol visibility in market tables
8b7b267 | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="Permissions-Policy" content="accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()"> | |
| <title>🚀 Crypto API Hub - Integrated Dashboard</title> | |
| <!-- Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <!-- Core Styles --> | |
| <link rel="stylesheet" href="/static/shared/css/design-system.css"> | |
| <link rel="stylesheet" href="/static/shared/css/global.css"> | |
| <link rel="stylesheet" href="/static/shared/css/components.css"> | |
| <link rel="stylesheet" href="/static/shared/css/table.css"> | |
| <link rel="stylesheet" href="/static/shared/css/enhanced-resolution.css"> | |
| <link rel="stylesheet" href="/static/css/toast.css"> | |
| <link rel="stylesheet" href="/static/css/main.css"> | |
| <link rel="stylesheet" href="/static/pages/crypto-api-hub-integrated/crypto-api-hub-integrated.css"> | |
| <!-- API Configuration - Smart Fallback System --> | |
| <script src="/static/js/api-config.js"></script> | |
| <script> | |
| // Initialize API client | |
| window.apiReady = new Promise((resolve) => { | |
| if (window.apiClient) { | |
| console.log('✅ API Client ready'); | |
| resolve(window.apiClient); | |
| } else { | |
| console.error('❌ API Client not loaded'); | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <!-- Background Effects --> | |
| <div class="background-effects"> | |
| <div class="gradient-orb orb-1"></div> | |
| <div class="gradient-orb orb-2"></div> | |
| <div class="gradient-orb orb-3"></div> | |
| </div> | |
| <div class="container"> | |
| <!-- Header --> | |
| <header class="hub-header"> | |
| <div class="header-content"> | |
| <div class="logo-section"> | |
| <div class="logo"> | |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| <path d="M2 17L12 22L22 17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| <path d="M2 12L12 17L22 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| </div> | |
| <div class="brand-text"> | |
| <h1>Crypto API Hub</h1> | |
| <p>Integrated Resources Dashboard with Self-Healing</p> | |
| </div> | |
| </div> | |
| <div class="stats-row"> | |
| <div class="stat"> | |
| <div class="stat-value">--</div> | |
| <div class="stat-label">Services</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-value">--</div> | |
| <div class="stat-label">Endpoints</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-value">--</div> | |
| <div class="stat-label">API Keys</div> | |
| </div> | |
| </div> | |
| <div class="header-actions"> | |
| <button class="btn-gradient" onclick="window.cryptoAPIHub.openTester()"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <polyline points="16 18 22 12 16 6"></polyline> | |
| <polyline points="8 6 2 12 8 18"></polyline> | |
| </svg> | |
| <span>API Tester</span> | |
| </button> | |
| <button class="btn-gradient" onclick="window.cryptoAPIHub.exportJSON()"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> | |
| <polyline points="7 10 12 15 17 10"></polyline> | |
| <line x1="12" y1="15" x2="12" y2="3"></line> | |
| </svg> | |
| <span>Export</span> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Status Bar --> | |
| <div class="status-bar"> | |
| <div class="status-indicator"> | |
| <div class="status-dot status-active"></div> | |
| <span>Backend Connected</span> | |
| </div> | |
| <div class="status-info"> | |
| <span id="lastUpdate">Last updated: --</span> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <div class="controls"> | |
| <div class="search-wrapper"> | |
| <svg class="search-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="11" cy="11" r="8"></circle> | |
| <path d="m21 21-4.35-4.35"></path> | |
| </svg> | |
| <input type="text" class="search-input" id="searchInput" placeholder="Search services, endpoints, or APIs..."> | |
| </div> | |
| <div class="filter-tabs"> | |
| <button class="filter-tab active" data-filter="all">All</button> | |
| <button class="filter-tab" data-filter="explorer">Explorers</button> | |
| <button class="filter-tab" data-filter="market">Market</button> | |
| <button class="filter-tab" data-filter="news">News</button> | |
| <button class="filter-tab" data-filter="sentiment">Sentiment</button> | |
| <button class="filter-tab" data-filter="analytics">Analytics</button> | |
| </div> | |
| </div> | |
| <!-- Services Grid --> | |
| <div class="services-grid" id="servicesGrid"> | |
| <!-- Services will be loaded here --> | |
| </div> | |
| </div> | |
| <!-- Modal --> | |
| <div class="modal" id="testerModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2>API Tester</h2> | |
| <button class="modal-close" onclick="window.cryptoAPIHub.closeTester()">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="form-group"> | |
| <label class="form-label">HTTP Method</label> | |
| <div class="method-buttons"> | |
| <button class="method-btn active" data-method="GET">GET</button> | |
| <button class="method-btn" data-method="POST">POST</button> | |
| <button class="method-btn" data-method="PUT">PUT</button> | |
| <button class="method-btn" data-method="DELETE">DELETE</button> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Endpoint URL</label> | |
| <input type="text" class="form-input" id="testUrl" placeholder="https://api.example.com/endpoint"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Headers (JSON format)</label> | |
| <textarea class="form-textarea" id="testHeaders" placeholder='{"Authorization": "Bearer YOUR_KEY"}'></textarea> | |
| </div> | |
| <div class="form-group" id="bodyGroup" style="display: none;"> | |
| <label class="form-label">Request Body (JSON)</label> | |
| <textarea class="form-textarea" id="testBody" placeholder='{"key": "value"}'></textarea> | |
| </div> | |
| <button class="btn-gradient" onclick="window.cryptoAPIHub.sendTestRequest()" style="width: 100%;"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <line x1="22" y1="2" x2="11" y2="13"></line> | |
| <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon> | |
| </svg> | |
| <span>Send Request</span> | |
| </button> | |
| <div class="response-container" id="responseBox" style="display: none;"> | |
| <pre class="response-json" id="responseJson"></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast Container --> | |
| <div id="toast-container" class="toast-container"></div> | |
| <!-- Initialize layout and page --> | |
| <script type="module"> | |
| import { LayoutManager } from '/static/shared/js/core/layout-manager.js'; | |
| import CryptoApiHubIntegratedPage from './crypto-api-hub-integrated.js'; | |
| document.addEventListener('DOMContentLoaded', async () => { | |
| await LayoutManager.init('crypto-api-hub-integrated'); | |
| const cryptoApiHubIntegratedPage = new CryptoApiHubIntegratedPage(); | |
| cryptoApiHubIntegratedPage.init(); | |
| window.cryptoApiHubIntegratedPage = cryptoApiHubIntegratedPage; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |