File size: 5,874 Bytes
b190b45 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
<header class="app-header-enhanced" role="banner">
<div class="header-left">
<!-- Mobile Menu Toggle -->
<button class="header-menu-btn-enhanced" id="sidebar-toggle" aria-label="Toggle menu">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<line x1="4" y1="6" x2="20" y2="6"/>
<line x1="4" y1="12" x2="20" y2="12"/>
<line x1="4" y1="18" x2="20" y2="18"/>
</svg>
</button>
<!-- Enhanced Logo -->
<a href="/" class="header-logo">
<div class="logo-icon">
<svg width="36" height="36" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="headerLogoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#2dd4bf"/>
<stop offset="50%" stop-color="#22d3ee"/>
<stop offset="100%" stop-color="#3b82f6"/>
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<circle cx="50" cy="50" r="45" fill="url(#headerLogoGradient)" filter="url(#glow)"/>
<path d="M50 20 L70 45 L50 38 L30 45 Z" fill="white" opacity="0.95"/>
<path d="M50 80 L30 55 L50 62 L70 55 Z" fill="white" opacity="0.95"/>
<circle cx="50" cy="50" r="8" fill="white" opacity="0.9"/>
</svg>
</div>
<div class="logo-text">
<span class="logo-name">Crypto Monitor</span>
<span class="logo-badge">ULTIMATE</span>
</div>
</a>
</div>
<div class="header-center">
<!-- Enhanced API Status -->
<div class="header-status-enhanced" id="api-status-badge" data-status="checking">
<div class="status-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<path d="M12 6v6l4 2"/>
</svg>
</div>
<div class="status-content">
<span class="status-label">API Status</span>
<span class="status-text">Checking...</span>
</div>
</div>
<!-- Enhanced Live Badge -->
<div class="live-badge-enhanced">
<span class="live-pulse"></span>
<span class="live-text">LIVE</span>
</div>
</div>
<div class="header-right">
<!-- Last Update -->
<div class="header-update-enhanced" id="header-last-update">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/>
</svg>
<span class="update-text">Just now</span>
</div>
<!-- Enhanced API Config Helper -->
<button class="header-btn-enhanced config-btn" id="config-helper-btn" aria-label="API Configuration" title="API Configuration Guide">
<div class="btn-icon-wrapper">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
</svg>
</div>
<span class="btn-label">API</span>
</button>
<!-- Enhanced Theme Toggle -->
<button class="header-btn-enhanced theme-btn" id="theme-toggle-btn" aria-label="Toggle theme" title="Toggle theme">
<div class="btn-icon-wrapper">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="icon-sun">
<circle cx="12" cy="12" r="4"/>
<path d="M12 2v2"/>
<path d="M12 20v2"/>
<path d="m4.93 4.93 1.41 1.41"/>
<path d="m17.66 17.66 1.41 1.41"/>
<path d="M2 12h2"/>
<path d="M20 12h2"/>
<path d="m6.34 17.66-1.41 1.41"/>
<path d="m19.07 4.93-1.41 1.41"/>
</svg>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="icon-moon">
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
</svg>
</div>
<span class="btn-label">Theme</span>
</button>
<!-- Enhanced Notifications -->
<button class="header-btn-enhanced notification-btn" aria-label="Notifications" title="Notifications">
<div class="btn-icon-wrapper">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
</svg>
<span class="notification-badge">3</span>
</div>
<span class="btn-label">Alerts</span>
</button>
<!-- Enhanced Settings -->
<a href="/static/pages/settings/index.html" class="header-btn-enhanced settings-btn" aria-label="Settings" title="Settings">
<div class="btn-icon-wrapper">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3"/>
<path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24"/>
</svg>
</div>
<span class="btn-label">Settings</span>
</a>
</div>
</header>
|