Upload admin.html

admin.html

@@ -5,187 +5,392 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Admin Dashboard - Crypto Monitor</title>
     <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+        
+        * { 
+            margin: 0; 
+            padding: 0; 
+            box-sizing: border-box; 
+        }
         
         :root {
-            --primary: #667eea;
-            --primary-dark: #5568d3;
-            --success: #48bb78;
-            --warning: #ed8936;
-            --danger: #f56565;
-            --bg-dark: #1a202c;
-            --bg-card: #2d3748;
-            --text-light: #e2e8f0;
-            --text-muted: #a0aec0;
-            --border: #4a5568;
+            --primary: #6366f1;
+            --primary-dark: #4f46e5;
+            --primary-light: #818cf8;
+            --success: #10b981;
+            --warning: #f59e0b;
+            --danger: #ef4444;
+            --info: #3b82f6;
+            --bg-dark: #0f172a;
+            --bg-darker: #020617;
+            --bg-card: #1e293b;
+            --bg-card-hover: #334155;
+            --text-light: #f1f5f9;
+            --text-muted: #94a3b8;
+            --border: #334155;
+            --border-light: #475569;
+            --shadow: rgba(0, 0, 0, 0.5);
+            --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+            --gradient-success: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
+            --gradient-danger: linear-gradient(135deg, #ef4444 0%, #f43f5e 100%);
         }
         
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-            background: var(--bg-dark);
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: var(--bg-darker);
             color: var(--text-light);
             line-height: 1.6;
+            overflow-x: hidden;
         }
         
         .container {
-            max-width: 1400px;
+            max-width: 2000px;
             margin: 0 auto;
-            padding: 20px;
+            padding: 24px;
+        }
+        
+        /* Animated background */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: 
+                radial-gradient(circle at 20% 50%, rgba(251, 191, 36, 0.12) 0%, transparent 50%),
+                radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.12) 0%, transparent 50%),
+                radial-gradient(circle at 50% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%);
+            z-index: -1;
+            animation: pulse 15s ease-in-out infinite;
         }
         
+        @keyframes pulse {
+            0%, 100% { opacity: 0.5; }
+            50% { opacity: 0.8; }
+        }
+        
+        /* Header */
         header {
-            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
-            padding: 20px;
-            border-radius: 10px;
-            margin-bottom: 30px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+            background: var(--gradient-primary);
+            padding: 32px;
+            border-radius: 20px;
+            margin-bottom: 32px;
+            box-shadow: 0 20px 60px var(--shadow);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        header::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            right: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+            animation: rotate 20s linear infinite;
+        }
+        
+        @keyframes rotate {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+        
+        header .content {
+            position: relative;
+            z-index: 1;
         }
         
         header h1 {
-            font-size: 28px;
-            font-weight: 700;
-            margin-bottom: 5px;
+            font-size: 36px;
+            font-weight: 800;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+        
+        header .icon {
+            width: 48px;
+            height: 48px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            backdrop-filter: blur(10px);
+        }
+        
+        header .icon svg {
+            color: #fbbf24;
+            filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
         }
         
         header .subtitle {
-            color: rgba(255, 255, 255, 0.9);
-            font-size: 14px;
+            color: rgba(255, 255, 255, 0.95);
+            font-size: 15px;
+            font-weight: 500;
+            opacity: 0.9;
         }
         
+        /* Tabs */
         .tabs {
             display: flex;
-            gap: 10px;
-            margin-bottom: 30px;
+            gap: 12px;
+            margin-bottom: 32px;
             flex-wrap: wrap;
+            background: var(--bg-card);
+            padding: 8px;
+            border-radius: 16px;
+            border: 1px solid var(--border);
         }
         
         .tab-btn {
             padding: 12px 24px;
-            background: var(--bg-card);
-            border: 2px solid var(--border);
-            border-radius: 8px;
+            background: transparent;
+            border: none;
+            border-radius: 12px;
             cursor: pointer;
             font-weight: 600;
-            color: var(--text-light);
-            transition: all 0.3s;
+            color: var(--text-muted);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
         
         .tab-btn:hover {
-            background: var(--primary);
-            border-color: var(--primary);
+            background: var(--bg-card-hover);
+            color: var(--text-light);
+            transform: translateY(-2px);
         }
         
         .tab-btn.active {
-            background: var(--primary);
-            border-color: var(--primary);
+            background: var(--gradient-primary);
+            color: white;
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
         }
         
+        /* Tab Content */
         .tab-content {
             display: none;
-            animation: fadeIn 0.3s;
+            animation: fadeSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         }
         
         .tab-content.active {
             display: block;
         }
         
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
+        @keyframes fadeSlideIn {
+            from { 
+                opacity: 0; 
+                transform: translateY(20px); 
+            }
+            to { 
+                opacity: 1; 
+                transform: translateY(0); 
+            }
         }
         
+        /* Cards */
         .card {
             background: var(--bg-card);
-            border-radius: 10px;
-            padding: 20px;
-            margin-bottom: 20px;
+            border-radius: 16px;
+            padding: 28px;
+            margin-bottom: 24px;
             border: 1px solid var(--border);
+            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 4px;
+            background: linear-gradient(90deg, #10b981 0%, #14b8a6 50%, #06b6d4 100%);
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+        }
+        
+        .card:hover {
+            border-color: var(--border-light);
+            transform: translateY(-4px);
+            box-shadow: 0 12px 40px rgba(16, 185, 129, 0.15);
+        }
+        
+        .card:hover::before {
+            transform: scaleX(1);
         }
         
         .card h3 {
-            color: var(--primary);
-            margin-bottom: 15px;
-            font-size: 18px;
+            color: #10b981;
+            margin-bottom: 20px;
+            font-size: 22px;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            text-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
         }
         
+        /* Stats Grid */
         .stats-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 15px;
-            margin-bottom: 20px;
+            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+            gap: 20px;
+            margin-bottom: 24px;
         }
         
         .stat-card {
-            background: var(--bg-card);
-            padding: 20px;
-            border-radius: 8px;
+            background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-darker) 100%);
+            padding: 24px;
+            border-radius: 16px;
             border: 1px solid var(--border);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .stat-card::after {
+            content: '';
+            position: absolute;
+            top: -50%;
+            right: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        
+        .stat-card:hover {
+            transform: translateY(-4px) scale(1.02);
+            box-shadow: 0 12px 32px rgba(251, 191, 36, 0.25);
+            border-color: #fbbf24;
+        }
+        
+        .stat-card:hover::after {
+            opacity: 1;
         }
         
         .stat-card .label {
             color: var(--text-muted);
-            font-size: 12px;
+            font-size: 13px;
             text-transform: uppercase;
-            letter-spacing: 0.5px;
+            letter-spacing: 1px;
+            font-weight: 600;
+            margin-bottom: 8px;
         }
         
         .stat-card .value {
-            font-size: 32px;
-            font-weight: 700;
-            color: var(--primary);
-            margin: 5px 0;
+            font-size: 40px;
+            font-weight: 800;
+            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #ea580c 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin: 8px 0;
+            line-height: 1;
+            filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.3));
         }
         
         .stat-card .badge {
-            display: inline-block;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 11px;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 12px;
+            border-radius: 8px;
+            font-size: 12px;
             font-weight: 600;
+            margin-top: 8px;
         }
         
         .badge-success {
-            background: var(--success);
-            color: white;
+            background: rgba(16, 185, 129, 0.15);
+            color: var(--success);
+            border: 1px solid rgba(16, 185, 129, 0.3);
         }
         
         .badge-warning {
-            background: var(--warning);
-            color: white;
+            background: rgba(245, 158, 11, 0.15);
+            color: var(--warning);
+            border: 1px solid rgba(245, 158, 11, 0.3);
         }
         
         .badge-danger {
-            background: var(--danger);
-            color: white;
+            background: rgba(239, 68, 68, 0.15);
+            color: var(--danger);
+            border: 1px solid rgba(239, 68, 68, 0.3);
         }
         
+        /* Buttons */
         .btn {
-            padding: 10px 20px;
+            padding: 12px 24px;
             border: none;
-            border-radius: 6px;
+            border-radius: 10px;
             cursor: pointer;
             font-weight: 600;
-            transition: all 0.2s;
-            margin-right: 10px;
-            margin-bottom: 10px;
+            transition: all 0.3s ease;
+            margin-right: 12px;
+            margin-bottom: 12px;
+            font-size: 14px;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.2);
+            transform: translate(-50%, -50%);
+            transition: width 0.5s, height 0.5s;
+        }
+        
+        .btn:hover::before {
+            width: 300px;
+            height: 300px;
+        }
+        
+        .btn span {
+            position: relative;
+            z-index: 1;
         }
         
         .btn-primary {
-            background: var(--primary);
+            background: var(--gradient-primary);
             color: white;
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
         }
         
         .btn-primary:hover {
-            background: var(--primary-dark);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
         }
         
         .btn-success {
-            background: var(--success);
+            background: var(--gradient-success);
             color: white;
+            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
         }
         
         .btn-success:hover {
-            background: #38a169;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
         }
         
         .btn-secondary {
@@ -195,105 +400,175 @@
         }
         
         .btn-secondary:hover {
-            background: var(--border);
+            background: var(--bg-card-hover);
+            border-color: var(--border-light);
+            transform: translateY(-2px);
+        }
+        
+        .btn-danger {
+            background: var(--gradient-danger);
+            color: white;
+            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
         }
         
+        /* Table */
         table {
             width: 100%;
-            border-collapse: collapse;
-            margin-top: 15px;
+            border-collapse: separate;
+            border-spacing: 0;
+            margin-top: 20px;
         }
         
         table thead {
-            background: var(--bg-dark);
+            background: var(--bg-darker);
         }
         
         table th {
-            padding: 12px;
+            padding: 16px;
             text-align: left;
-            font-weight: 600;
-            font-size: 12px;
+            font-weight: 700;
+            font-size: 13px;
             text-transform: uppercase;
             color: var(--text-muted);
+            letter-spacing: 0.5px;
+            border-bottom: 2px solid var(--border);
         }
         
         table td {
-            padding: 12px;
-            border-top: 1px solid var(--border);
+            padding: 16px;
+            border-bottom: 1px solid var(--border);
+        }
+        
+        table tbody tr {
+            transition: all 0.2s ease;
         }
         
         table tbody tr:hover {
-            background: var(--bg-dark);
+            background: var(--bg-darker);
+            transform: scale(1.01);
+        }
+        
+        table code {
+            background: var(--bg-darker);
+            padding: 4px 8px;
+            border-radius: 6px;
+            font-size: 12px;
+            color: var(--primary-light);
         }
         
+        /* Status colors */
         .status-online {
             color: var(--success);
+            font-weight: 600;
         }
         
         .status-offline {
             color: var(--danger);
+            font-weight: 600;
         }
         
         .status-degraded {
             color: var(--warning);
+            font-weight: 600;
         }
         
+        /* Messages */
         .loading {
             text-align: center;
-            padding: 40px;
+            padding: 60px 20px;
             color: var(--text-muted);
         }
         
+        .loading::after {
+            content: '';
+            display: block;
+            width: 48px;
+            height: 48px;
+            margin: 20px auto;
+            border: 4px solid var(--border);
+            border-top-color: var(--primary);
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+        
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        
         .error-message {
-            background: var(--danger);
-            color: white;
-            padding: 15px;
-            border-radius: 8px;
+            background: rgba(239, 68, 68, 0.15);
+            color: var(--danger);
+            padding: 16px 20px;
+            border-radius: 12px;
             margin-bottom: 20px;
+            border: 1px solid rgba(239, 68, 68, 0.3);
+            display: flex;
+            align-items: center;
+            gap: 12px;
         }
         
         .success-message {
-            background: var(--success);
-            color: white;
-            padding: 15px;
-            border-radius: 8px;
+            background: rgba(16, 185, 129, 0.15);
+            color: var(--success);
+            padding: 16px 20px;
+            border-radius: 12px;
             margin-bottom: 20px;
+            border: 1px solid rgba(16, 185, 129, 0.3);
+            display: flex;
+            align-items: center;
+            gap: 12px;
         }
         
         .empty-state {
             text-align: center;
-            padding: 60px 20px;
+            padding: 80px 20px;
             color: var(--text-muted);
         }
         
         .empty-state svg {
-            width: 64px;
-            height: 64px;
-            margin-bottom: 20px;
+            width: 80px;
+            height: 80px;
+            margin-bottom: 24px;
             opacity: 0.3;
         }
         
+        /* Filters */
         .filter-bar {
             display: flex;
-            gap: 10px;
+            gap: 12px;
             margin-bottom: 20px;
             flex-wrap: wrap;
         }
         
         select, input {
-            padding: 10px;
-            border-radius: 6px;
+            padding: 12px 16px;
+            border-radius: 10px;
             border: 1px solid var(--border);
-            background: var(--bg-dark);
+            background: var(--bg-darker);
             color: var(--text-light);
+            font-size: 14px;
+            transition: all 0.3s ease;
+        }
+        
+        select:focus, input:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
         }
         
+        /* Log entries */
         .log-entry {
-            padding: 10px;
+            padding: 16px;
             border-left: 3px solid var(--primary);
-            margin-bottom: 10px;
-            background: var(--bg-dark);
-            border-radius: 4px;
+            margin-bottom: 12px;
+            background: var(--bg-darker);
+            border-radius: 8px;
+            transition: all 0.2s ease;
+        }
+        
+        .log-entry:hover {
+            background: var(--bg-card);
+            transform: translateX(4px);
         }
         
         .log-entry.error {
@@ -303,23 +578,33 @@
         .log-timestamp {
             color: var(--text-muted);
             font-size: 12px;
+            font-weight: 600;
         }
         
+        /* Code blocks */
         pre {
-            background: var(--bg-dark);
-            padding: 15px;
-            border-radius: 6px;
+            background: var(--bg-darker);
+            padding: 20px;
+            border-radius: 12px;
             overflow-x: auto;
             font-size: 13px;
-            line-height: 1.4;
+            line-height: 1.6;
+            border: 1px solid var(--border);
         }
         
+        /* Model cards */
         .model-card {
-            background: var(--bg-dark);
-            padding: 15px;
-            border-radius: 8px;
-            margin-bottom: 15px;
+            background: var(--bg-darker);
+            padding: 20px;
+            border-radius: 12px;
+            margin-bottom: 16px;
             border-left: 4px solid var(--primary);
+            transition: all 0.3s ease;
+        }
+        
+        .model-card:hover {
+            transform: translateX(4px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
         }
         
         .model-card.valid {
@@ -334,9 +619,61 @@
             border-left-color: var(--danger);
         }
         
+        /* SVG Icons */
+        .icon-svg {
+            width: 20px;
+            height: 20px;
+        }
+        
+        .tab-btn svg {
+            color: var(--primary-light);
+            transition: all 0.3s ease;
+        }
+        
+        .tab-btn.active svg {
+            color: #fbbf24;
+            filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
+        }
+        
+        .tab-btn:hover svg {
+            color: #fbbf24;
+            transform: scale(1.1);
+        }
+        
+        .card h3 svg {
+            color: #10b981;
+            filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4));
+        }
+        
+        .btn svg {
+            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+        }
+        
+        .badge svg {
+            filter: drop-shadow(0 0 4px currentColor);
+        }
+        
+        .success-message svg,
+        .error-message svg {
+            filter: drop-shadow(0 0 6px currentColor);
+        }
+        
+        /* Responsive */
         @media (max-width: 768px) {
+            .container {
+                padding: 16px;
+            }
+            
+            header {
+                padding: 24px;
+            }
+            
+            header h1 {
+                font-size: 24px;
+            }
+            
             .stats-grid {
-                grid-template-columns: 1fr;
+                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
             }
             
             .tabs {
@@ -348,7 +685,25 @@
             }
             
             table th, table td {
-                padding: 8px;
+                padding: 10px;
+            }
+            
+            .stat-card .value {
+                font-size: 32px;
+            }
+        }
+        
+        @media (min-width: 1920px) {
+            .stats-grid {
+                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            }
+            
+            .card {
+                padding: 32px;
+            }
+            
+            header h1 {
+                font-size: 42px;
             }
         }
     </style>
@@ -356,18 +711,73 @@
 <body>
     <div class="container">
         <header>
-            <h1>🚀 Crypto Monitor Admin Dashboard</h1>
-            <p class="subtitle">Real-time provider management & system monitoring | NO MOCK DATA</p>
+            <div class="content">
+                <h1>
+                    <div class="icon">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                            <path d="M2 17l10 5 10-5"/>
+                            <path d="M2 12l10 5 10-5"/>
+                        </svg>
+                    </div>
+                    Crypto Monitor Admin Dashboard
+                </h1>
+                <p class="subtitle">Real-time provider management & system monitoring | NO MOCK DATA</p>
+            </div>
         </header>
 
         <div class="tabs">
-            <button class="tab-btn active" onclick="switchTab('status')">📊 Status</button>
-            <button class="tab-btn" onclick="switchTab('providers')">🔌 Providers</button>
-            <button class="tab-btn" onclick="switchTab('market')">💰 Market Data</button>
-            <button class="tab-btn" onclick="switchTab('apl')">🤖 APL Scanner</button>
-            <button class="tab-btn" onclick="switchTab('hf-models')">🧠 HF Models</button>
-            <button class="tab-btn" onclick="switchTab('diagnostics')">🔧 Diagnostics</button>
-            <button class="tab-btn" onclick="switchTab('logs')">📝 Logs</button>
+            <button class="tab-btn active" onclick="switchTab('status')">
+                <svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M3 3v18h18"/>
+                    <path d="M18 17V9"/>
+                    <path d="M13 17V5"/>
+                    <path d="M8 17v-3"/>
+                </svg>
+                <span>Status</span>
+            </button>
+            <button class="tab-btn" onclick="switchTab('providers')">
+                <svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="3"/>
+                    <path d="M12 1v6m0 6v6m8.66-16.5l-5.2 3m-3.92 6.5l-5.2 3M23 12h-6m-6 0H5m16.5 8.66l-3-5.2m-6.5-3.92l-3-5.2"/>
+                </svg>
+                <span>Providers</span>
+            </button>
+            <button class="tab-btn" onclick="switchTab('market')">
+                <svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>
+                </svg>
+                <span>Market Data</span>
+            </button>
+            <button class="tab-btn" onclick="switchTab('apl')">
+                <svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="4" y="4" width="16" height="16" rx="2"/>
+                    <path d="M9 9h.01M15 9h.01M9 15h6"/>
+                </svg>
+                <span>APL Scanner</span>
+            </button>
+            <button class="tab-btn" onclick="switchTab('hf-models')">
+                <svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 8V4m0 16v-4"/>
+                    <path d="M8 12H4m16 0h-4"/>
+                    <circle cx="12" cy="12" r="3"/>
+                    <path d="m8.2 8.2-1.5-1.5m10.6 0-1.5 1.5m-1.5 8.6-1.5 1.5m-6.2 0 1.5-1.5"/>
+                </svg>
+                <span>HF Models</span>
+            </button>
+            <button class="tab-btn" onclick="switchTab('diagnostics')">
+                <svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/>
+                </svg>
+                <span>Diagnostics</span>
+            </button>
+            <button class="tab-btn" onclick="switchTab('logs')">
+                <svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+                    <path d="M14 2v6h6M16 13H8m8 4H8m2-8H8"/>
+                </svg>
+                <span>Logs</span>
+            </button>
         </div>
 
         <!-- Status Tab -->
@@ -376,7 +786,12 @@
                 <div class="stat-card">
                     <div class="label">System Health</div>
                     <div class="value" id="system-health">-</div>
-                    <span class="badge badge-success" id="health-badge">Healthy</span>
+                    <span class="badge badge-success" id="health-badge">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                            <polyline points="20 6 9 17 4 12"/>
+                        </svg>
+                        Healthy
+                    </span>
                 </div>
                 <div class="stat-card">
                     <div class="label">Total Providers</div>
@@ -389,19 +804,55 @@
                 <div class="stat-card">
                     <div class="label">Database</div>
                     <div class="value">✓</div>
-                    <span class="badge badge-success">Connected</span>
+                    <span class="badge badge-success">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <ellipse cx="12" cy="5" rx="9" ry="3"/>
+                            <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
+                        </svg>
+                        Connected
+                    </span>
                 </div>
             </div>
             
             <div class="card">
-                <h3>Quick Actions</h3>
-                <button class="btn btn-primary" onclick="refreshAllData()">🔄 Refresh All</button>
-                <button class="btn btn-success" onclick="runAPL()">🤖 Run APL Scan</button>
-                <button class="btn btn-secondary" onclick="runDiagnostics()">🔧 Run Diagnostics</button>
+                <h3>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="1"/>
+                        <circle cx="12" cy="5" r="1"/>
+                        <circle cx="12" cy="19" r="1"/>
+                    </svg>
+                    Quick Actions
+                </h3>
+                <button class="btn btn-primary" onclick="refreshAllData()">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 12a9 9 0 11-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
+                        <path d="M21 3v5h-5"/>
+                    </svg>
+                    <span>Refresh All</span>
+                </button>
+                <button class="btn btn-success" onclick="runAPL()">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="4" y="4" width="16" height="16" rx="2"/>
+                        <path d="M9 9h.01M15 9h.01M9 15h6"/>
+                    </svg>
+                    <span>Run APL Scan</span>
+                </button>
+                <button class="btn btn-secondary" onclick="runDiagnostics()">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/>
+                    </svg>
+                    <span>Run Diagnostics</span>
+                </button>
             </div>
             
             <div class="card">
-                <h3>Recent Market Data</h3>
+                <h3>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M3 3v18h18"/>
+                        <path d="M18 17l-3-3-4 4-4-4-4 4"/>
+                    </svg>
+                    Recent Market Data
+                </h3>
                 <div id="quick-market-view"></div>
             </div>
         </div>
@@ -409,7 +860,13 @@
         <!-- Providers Tab -->
         <div id="tab-providers" class="tab-content">
             <div class="card">
-                <h3>Providers Management</h3>
+                <h3>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="3"/>
+                        <path d="M12 1v6m0 6v6m8.66-16.5l-5.2 3m-3.92 6.5l-5.2 3M23 12h-6m-6 0H5m16.5 8.66l-3-5.2m-6.5-3.92l-3-5.2"/>
+                    </svg>
+                    Providers Management
+                </h3>
                 <div class="filter-bar">
                     <select id="category-filter" onchange="filterProviders()">
                         <option value="">All Categories</option>
@@ -421,7 +878,13 @@
                         <option value="rpc">RPC</option>
                         <option value="news">News</option>
                     </select>
-                    <button class="btn btn-secondary" onclick="loadProviders()">🔄 Refresh</button>
+                    <button class="btn btn-secondary" onclick="loadProviders()">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 12a9 9 0 11-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
+                            <path d="M21 3v5h-5"/>
+                        </svg>
+                        <span>Refresh</span>
+                    </button>
                 </div>
                 <div id="providers-table"></div>
             </div>
@@ -430,18 +893,43 @@
         <!-- Market Data Tab -->
         <div id="tab-market" class="tab-content">
             <div class="card">
-                <h3>Live Market Data</h3>
-                <button class="btn btn-primary" onclick="loadMarketData()">🔄 Refresh Prices</button>
+                <h3>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M3 3v18h18"/>
+                        <path d="M18 17l-3-3-4 4-4-4-4 4"/>
+                    </svg>
+                    Live Market Data
+                </h3>
+                <button class="btn btn-primary" onclick="loadMarketData()">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 12a9 9 0 11-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
+                        <path d="M21 3v5h-5"/>
+                    </svg>
+                    <span>Refresh Prices</span>
+                </button>
                 <div id="market-data-container"></div>
             </div>
             
             <div class="card">
-                <h3>Sentiment Analysis</h3>
+                <h3>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"/>
+                        <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
+                        <line x1="9" y1="9" x2="9.01" y2="9"/>
+                        <line x1="15" y1="9" x2="15.01" y2="9"/>
+                    </svg>
+                    Sentiment Analysis
+                </h3>
                 <div id="sentiment-data"></div>
             </div>
             
             <div class="card">
-                <h3>Trending Coins</h3>
+                <h3>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+                    </svg>
+                    Trending Coins
+                </h3>
                 <div id="trending-coins"></div>
             </div>
         </div>
@@ -449,27 +937,56 @@
         <!-- APL Tab -->
         <div id="tab-apl" class="tab-content">
             <div class="card">
-                <h3>Auto Provider Loader (APL)</h3>
+                <h3>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="4" y="4" width="16" height="16" rx="2"/>
+                        <path d="M9 9h.01M15 9h.01M9 15h6"/>
+                    </svg>
+                    Auto Provider Loader (APL)
+                </h3>
                 <p style="color: var(--text-muted); margin-bottom: 20px;">
                     APL automatically discovers, validates, and integrates cryptocurrency data providers.
                     All validations use REAL API calls - NO MOCK DATA.
                 </p>
                 
                 <button class="btn btn-success" onclick="runAPL()" id="apl-run-btn">
-                    🤖 Run APL Scan
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <polygon points="5 3 19 12 5 21 5 3"/>
+                    </svg>
+                    <span>Run APL Scan</span>
+                </button>
+                <button class="btn btn-secondary" onclick="loadAPLReport()">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+                        <path d="M14 2v6h6M16 13H8m8 4H8m2-8H8"/>
+                    </svg>
+                    <span>View Last Report</span>
                 </button>
-                <button class="btn btn-secondary" onclick="loadAPLReport()">📊 View Last Report</button>
                 
                 <div id="apl-status" style="margin-top: 20px;"></div>
             </div>
             
             <div class="card">
-                <h3>APL Summary Statistics</h3>
+                <h3>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="3" y="3" width="7" height="7"/>
+                        <rect x="14" y="3" width="7" height="7"/>
+                        <rect x="14" y="14" width="7" height="7"/>
+                        <rect x="3" y="14" width="7" height="7"/>
+                    </svg>
+                    APL Summary Statistics
+                </h3>
                 <div id="apl-summary"></div>
             </div>
             
             <div class="card">
-                <h3>APL Output</h3>
+                <h3>
+                    <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 points="8 6 2 12 8 18"/>
+                    </svg>
+                    APL Output
+                </h3>
                 <pre id="apl-output" style="max-height: 400px; overflow-y: auto;">No output yet. Click "Run APL Scan" to start.</pre>
             </div>
         </div>
@@ -477,16 +994,35 @@
         <!-- HF Models Tab -->
         <div id="tab-hf-models" class="tab-content">
             <div class="card">
-                <h3>Hugging Face Models</h3>
+                <h3>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M12 8V4m0 16v-4"/>
+                        <path d="M8 12H4m16 0h-4"/>
+                        <circle cx="12" cy="12" r="3"/>
+                        <path d="m8.2 8.2-1.5-1.5m10.6 0-1.5 1.5m-1.5 8.6-1.5 1.5m-6.2 0 1.5-1.5"/>
+                    </svg>
+                    Hugging Face Models
+                </h3>
                 <p style="color: var(--text-muted); margin-bottom: 20px;">
                     HuggingFace models validated by APL for crypto sentiment analysis and NLP tasks.
                 </p>
-                <button class="btn btn-primary" onclick="loadHFModels()">🔄 Refresh Models</button>
+                <button class="btn btn-primary" onclick="loadHFModels()">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 12a9 9 0 11-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
+                        <path d="M21 3v5h-5"/>
+                    </svg>
+                    <span>Refresh Models</span>
+                </button>
                 <div id="hf-models-container"></div>
             </div>
             
             <div class="card">
-                <h3>HF Services Health</h3>
+                <h3>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
+                    </svg>
+                    HF Services Health
+                </h3>
                 <div id="hf-health"></div>
             </div>
         </div>
@@ -494,10 +1030,32 @@
         <!-- Diagnostics Tab -->
         <div id="tab-diagnostics" class="tab-content">
             <div class="card">
-                <h3>System Diagnostics</h3>
-                <button class="btn btn-primary" onclick="runDiagnostics(true)">🔧 Run with Auto-Fix</button>
-                <button class="btn btn-secondary" onclick="runDiagnostics(false)">🔍 Run Scan Only</button>
-                <button class="btn btn-secondary" onclick="loadLastDiagnostics()">📋 View Last Results</button>
+                <h3>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/>
+                    </svg>
+                    System Diagnostics
+                </h3>
+                <button class="btn btn-primary" onclick="runDiagnostics(true)">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M20 6L9 17l-5-5"/>
+                    </svg>
+                    <span>Run with Auto-Fix</span>
+                </button>
+                <button class="btn btn-secondary" onclick="runDiagnostics(false)">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="11" cy="11" r="8"/>
+                        <path d="m21 21-4.35-4.35"/>
+                    </svg>
+                    <span>Run Scan Only</span>
+                </button>
+                <button class="btn btn-secondary" onclick="loadLastDiagnostics()">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+                        <path d="M14 2v6h6"/>
+                    </svg>
+                    <span>View Last Results</span>
+                </button>
                 
                 <div id="diagnostics-results" style="margin-top: 20px;"></div>
             </div>
@@ -506,9 +1064,28 @@
         <!-- Logs Tab -->
         <div id="tab-logs" class="tab-content">
             <div class="card">
-                <h3>System Logs</h3>
-                <button class="btn btn-primary" onclick="loadRecentLogs()">🔄 Refresh</button>
-                <button class="btn btn-danger" onclick="loadErrorLogs()">❌ Errors Only</button>
+                <h3>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+                        <path d="M14 2v6h6M16 13H8m8 4H8m2-8H8"/>
+                    </svg>
+                    System Logs
+                </h3>
+                <button class="btn btn-primary" onclick="loadRecentLogs()">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 12a9 9 0 11-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
+                        <path d="M21 3v5h-5"/>
+                    </svg>
+                    <span>Refresh</span>
+                </button>
+                <button class="btn btn-danger" onclick="loadErrorLogs()">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"/>
+                        <line x1="15" y1="9" x2="9" y2="15"/>
+                        <line x1="9" y1="9" x2="15" y2="15"/>
+                    </svg>
+                    <span>Errors Only</span>
+                </button>
                 
                 <div id="logs-container" style="margin-top: 20px;"></div>
             </div>
@@ -578,7 +1155,7 @@
                 market.cryptocurrencies.forEach(coin => {
                     const changeClass = coin.change_24h >= 0 ? 'status-online' : 'status-offline';
                     marketHTML += `
-                        <div style="background: var(--bg-dark); padding: 15px; border-radius: 8px;">
+                        <div style="background: var(--bg-darker); padding: 15px; border-radius: 8px;">
                             <div style="font-weight: 600;">${coin.name} (${coin.symbol})</div>
                             <div style="font-size: 24px; margin: 10px 0;">$${coin.price.toLocaleString()}</div>
                             <div class="${changeClass}">${coin.change_24h >= 0 ? '↑' : '↓'} ${Math.abs(coin.change_24h).toFixed(2)}%</div>
@@ -661,10 +1238,10 @@
                         <tr>
                             <td>${coin.rank}</td>
                             <td><strong>${coin.name}</strong> (${coin.symbol})</td>
-                            <td>$${coin.price.toLocaleString()}</td>
+                            <td>${coin.price.toLocaleString()}</td>
                             <td class="${changeClass}">${coin.change_24h >= 0 ? '+' : ''}${coin.change_24h.toFixed(2)}%</td>
-                            <td>$${(coin.market_cap / 1e9).toFixed(2)}B</td>
-                            <td>$${(coin.volume_24h / 1e9).toFixed(2)}B</td>
+                            <td>${(coin.market_cap / 1e9).toFixed(2)}B</td>
+                            <td>${(coin.volume_24h / 1e9).toFixed(2)}B</td>
                         </tr>
                     `;
                 });
@@ -713,7 +1290,7 @@
                 let html = '<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px;">';
                 data.trending.forEach(coin => {
                     html += `
-                        <div style="background: var(--bg-dark); padding: 15px; border-radius: 8px;">
+                        <div style="background: var(--bg-darker); padding: 15px; border-radius: 8px;">
                             <div style="font-weight: 600;">${coin.name}</div>
                             <div style="color: var(--text-muted);">${coin.symbol}</div>
                             ${coin.market_cap_rank ? `<div style="margin-top: 10px;">Rank: #${coin.market_cap_rank}</div>` : ''}
@@ -745,9 +1322,14 @@
                 if (result.status === 'completed') {
                     document.getElementById('apl-status').innerHTML = `
                         <div class="success-message">
-                            ✓ APL scan completed successfully!<br>
-                            Providers count: ${result.providers_count}<br>
-                            Time: ${result.timestamp}
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M20 6L9 17l-5-5"/>
+                            </svg>
+                            <div>
+                                APL scan completed successfully!<br>
+                                Providers count: ${result.providers_count}<br>
+                                Time: ${result.timestamp}
+                            </div>
                         </div>
                     `;
                     document.getElementById('apl-output').textContent = result.stdout || 'Scan completed.';
@@ -756,7 +1338,14 @@
                     await loadAPLSummary();
                     
                 } else {
-                    document.getElementById('apl-status').innerHTML = `<div class="error-message">APL scan ${result.status}: ${result.message || 'Unknown error'}</div>`;
+                    document.getElementById('apl-status').innerHTML = `<div class="error-message">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"/>
+                            <line x1="15" y1="9" x2="9" y2="15"/>
+                            <line x1="9" y1="9" x2="15" y2="15"/>
+                        </svg>
+                        APL scan ${result.status}: ${result.message || 'Unknown error'}
+                    </div>`;
                     document.getElementById('apl-output').textContent = result.stdout || 'No output';
                 }
             } catch (error) {
@@ -764,7 +1353,7 @@
                 document.getElementById('apl-status').innerHTML = '<div class="error-message">Failed to run APL: ' + error.message + '</div>';
             } finally {
                 btn.disabled = false;
-                btn.textContent = '🤖 Run APL Scan';
+                btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg><span>Run APL Scan</span>';
             }
         }
 
@@ -862,7 +1451,7 @@
                 
                 const statusClass = health.ok ? 'status-online' : 'status-offline';
                 document.getElementById('hf-health').innerHTML = `
-                    <div style="padding: 20px; background: var(--bg-dark); border-radius: 8px;">
+                    <div style="padding: 20px; background: var(--bg-darker); border-radius: 8px;">
                         <div class="${statusClass}" style="font-size: 24px; font-weight: 700;">${health.ok ? '✓ Healthy' : '✗ Unhealthy'}</div>
                         ${health.ok ? `
                             <div style="margin-top: 15px;">
@@ -888,9 +1477,14 @@
                 
                 let html = `
                     <div class="success-message">
-                        ✓ Diagnostics completed<br>
-                        Issues found: ${result.issues_found}<br>
-                        Time: ${result.timestamp}
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M20 6L9 17l-5-5"/>
+                        </svg>
+                        <div>
+                            Diagnostics completed<br>
+                            Issues found: ${result.issues_found}<br>
+                            Time: ${result.timestamp}
+                        </div>
                     </div>
                 `;
                 
@@ -1014,4 +1608,4 @@
         });
     </script>
 </body>
-</html>
+</html>