|
|
<aside class="sidebar" role="navigation" aria-label="Main navigation"> |
|
|
|
|
|
<div class="sidebar-brand"> |
|
|
<div class="brand-logo"> |
|
|
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
|
<defs> |
|
|
<linearGradient id="logoGradient" 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="3" result="coloredBlur"/> |
|
|
<feMerge> |
|
|
<feMergeNode in="coloredBlur"/> |
|
|
<feMergeNode in="SourceGraphic"/> |
|
|
</feMerge> |
|
|
</filter> |
|
|
</defs> |
|
|
<circle cx="50" cy="50" r="45" fill="url(#logoGradient)" filter="url(#glow)"/> |
|
|
<circle cx="50" cy="50" r="42" fill="none" stroke="white" stroke-width="1.5" opacity="0.3"/> |
|
|
<path d="M50 15 L65 40 L50 35 L35 40 Z" fill="white" opacity="1"/> |
|
|
<path d="M50 85 L35 60 L50 65 L65 60 Z" fill="white" opacity="1"/> |
|
|
<circle cx="50" cy="50" r="8" fill="white" opacity="0.9"/> |
|
|
<path d="M50 42 L54 50 L50 48 L46 50 Z" fill="url(#logoGradient)" opacity="0.8"/> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="brand-text"> |
|
|
<span class="brand-name">Crypto Monitor</span> |
|
|
<span class="brand-tag">ULTIMATE</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="nav-menu"> |
|
|
<ul class="nav-list"> |
|
|
|
|
|
<li class="nav-item"> |
|
|
<a href="/" class="nav-link" data-page="dashboard"> |
|
|
<span class="nav-icon"> |
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<rect x="3" y="3" width="7" height="7" rx="1"/> |
|
|
<rect x="14" y="3" width="7" height="7" rx="1"/> |
|
|
<rect x="14" y="14" width="7" height="7" rx="1"/> |
|
|
<rect x="3" y="14" width="7" height="7" rx="1"/> |
|
|
</svg> |
|
|
</span> |
|
|
<span class="nav-label">Dashboard</span> |
|
|
</a> |
|
|
</li> |
|
|
|
|
|
|
|
|
<li class="nav-item"> |
|
|
<a href="/static/pages/market/index.html" class="nav-link" data-page="market"> |
|
|
<span class="nav-icon"> |
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="m22 7-8.5 8.5-5-5L2 17"/> |
|
|
<path d="M16 7h6v6"/> |
|
|
</svg> |
|
|
</span> |
|
|
<span class="nav-label">Market</span> |
|
|
</a> |
|
|
</li> |
|
|
|
|
|
|
|
|
<li class="nav-item"> |
|
|
<a href="/static/pages/models/index.html" class="nav-link" data-page="models"> |
|
|
<span class="nav-icon"> |
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M12 2a4 4 0 0 1 4 4v1a4 4 0 0 1-8 0V6a4 4 0 0 1 4-4Z"/> |
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/> |
|
|
<circle cx="12" cy="7" r="3"/> |
|
|
<path d="M12 11v4"/> |
|
|
<path d="M9 18h6"/> |
|
|
</svg> |
|
|
</span> |
|
|
<span class="nav-label">AI Models</span> |
|
|
</a> |
|
|
</li> |
|
|
|
|
|
|
|
|
<li class="nav-item"> |
|
|
<a href="/static/pages/sentiment/index.html" class="nav-link" data-page="sentiment"> |
|
|
<span class="nav-icon"> |
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<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> |
|
|
</span> |
|
|
<span class="nav-label">Sentiment</span> |
|
|
</a> |
|
|
</li> |
|
|
|
|
|
|
|
|
<li class="nav-item"> |
|
|
<a href="/static/pages/ai-analyst/index.html" class="nav-link" data-page="ai-analyst"> |
|
|
<span class="nav-icon"> |
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M12 8V4H8"/> |
|
|
<rect x="2" y="14" width="4" height="6" rx="1"/> |
|
|
<rect x="10" y="10" width="4" height="10" rx="1"/> |
|
|
<rect x="18" y="6" width="4" height="14" rx="1"/> |
|
|
<path d="m8 4 4 4"/> |
|
|
</svg> |
|
|
</span> |
|
|
<span class="nav-label">AI Analyst</span> |
|
|
</a> |
|
|
</li> |
|
|
|
|
|
|
|
|
<li class="nav-item"> |
|
|
<a href="/static/pages/technical-analysis/index.html" class="nav-link" data-page="technical-analysis"> |
|
|
<span class="nav-icon"> |
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M3 3v18h18"/> |
|
|
<path d="m19 9-5 5-4-4-3 3"/> |
|
|
<circle cx="19" cy="9" r="2"/> |
|
|
</svg> |
|
|
</span> |
|
|
<span class="nav-label">Technical</span> |
|
|
</a> |
|
|
</li> |
|
|
|
|
|
|
|
|
<li class="nav-item"> |
|
|
<a href="/static/pages/services/index.html" class="nav-link" data-page="services"> |
|
|
<span class="nav-icon"> |
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<line x1="12" y1="1" x2="12" y2="23"></line> |
|
|
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path> |
|
|
</svg> |
|
|
</span> |
|
|
<span class="nav-label">Services</span> |
|
|
<span class="nav-badge" style="background: linear-gradient(135deg, #14b8a6, #06b6d4); color: white; font-size: 8px; padding: 2px 6px; border-radius: 8px; margin-left: auto;">NEW</span> |
|
|
</a> |
|
|
</li> |
|
|
|
|
|
|
|
|
<li class="nav-item"> |
|
|
<a href="/static/pages/service-health/index.html" class="nav-link" data-page="service-health"> |
|
|
<span class="nav-icon"> |
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline> |
|
|
</svg> |
|
|
</span> |
|
|
<span class="nav-label">Health Monitor</span> |
|
|
<span class="nav-badge" style="background: linear-gradient(135deg, #22c55e, #10b981); color: white; font-size: 8px; padding: 2px 6px; border-radius: 8px; margin-left: auto;">NEW</span> |
|
|
</a> |
|
|
</li> |
|
|
|
|
|
|
|
|
<li class="nav-item"> |
|
|
<a href="/static/pages/trading-assistant/index.html" class="nav-link" data-page="trading-assistant"> |
|
|
<span class="nav-icon"> |
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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> |
|
|
</span> |
|
|
<span class="nav-label">Trading</span> |
|
|
</a> |
|
|
</li> |
|
|
|
|
|
|
|
|
<li class="nav-item"> |
|
|
<a href="/static/pages/news/index.html" class="nav-link" data-page="news"> |
|
|
<span class="nav-icon"> |
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/> |
|
|
<path d="M18 14h-8"/> |
|
|
<path d="M15 18h-5"/> |
|
|
<path d="M10 6h8v4h-8V6Z"/> |
|
|
</svg> |
|
|
</span> |
|
|
<span class="nav-label">News</span> |
|
|
</a> |
|
|
</li> |
|
|
|
|
|
|
|
|
<li class="nav-item"> |
|
|
<a href="/static/pages/providers/index.html" class="nav-link" data-page="providers"> |
|
|
<span class="nav-icon"> |
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M4 11a9 9 0 0 1 9 9"/> |
|
|
<path d="M4 4a16 16 0 0 1 16 16"/> |
|
|
<circle cx="5" cy="19" r="2"/> |
|
|
</svg> |
|
|
</span> |
|
|
<span class="nav-label">Providers</span> |
|
|
</a> |
|
|
</li> |
|
|
|
|
|
|
|
|
<li class="nav-item"> |
|
|
<a href="/system-monitor" class="nav-link" data-page="system-monitor"> |
|
|
<span class="nav-icon"> |
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<circle cx="12" cy="12" r="10"/> |
|
|
<circle cx="12" cy="12" r="6"/> |
|
|
<circle cx="12" cy="12" r="2"/> |
|
|
<line x1="12" y1="2" x2="12" y2="4"/> |
|
|
<line x1="12" y1="20" x2="12" y2="22"/> |
|
|
<line x1="2" y1="12" x2="4" y2="12"/> |
|
|
<line x1="20" y1="12" x2="22" y2="12"/> |
|
|
</svg> |
|
|
</span> |
|
|
<span class="nav-label">System Monitor</span> |
|
|
<span class="nav-badge" style="background: #ef4444; color: white; font-size: 9px; padding: 2px 5px; border-radius: 8px; margin-left: auto;">LIVE</span> |
|
|
</a> |
|
|
</li> |
|
|
|
|
|
|
|
|
<li class="nav-item"> |
|
|
<a href="/static/pages/help/index.html" class="nav-link" data-page="help"> |
|
|
<span class="nav-icon"> |
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<circle cx="12" cy="12" r="10"></circle> |
|
|
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path> |
|
|
<line x1="12" y1="17" x2="12.01" y2="17"></line> |
|
|
</svg> |
|
|
</span> |
|
|
<span class="nav-label">Help</span> |
|
|
</a> |
|
|
</li> |
|
|
|
|
|
|
|
|
<li class="nav-item"> |
|
|
<a href="/static/pages/settings/index.html" class="nav-link" data-page="settings"> |
|
|
<span class="nav-icon"> |
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/> |
|
|
<circle cx="12" cy="12" r="3"/> |
|
|
</svg> |
|
|
</span> |
|
|
<span class="nav-label">Settings</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="services-menu-container"> |
|
|
<button id="services-toggle" class="services-toggle-btn" title="Premium Services"> |
|
|
<svg xmlns="http://www.w3.org/2000/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="12" y1="1" x2="12" y2="23"></line> |
|
|
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path> |
|
|
</svg> |
|
|
</button> |
|
|
|
|
|
|
|
|
<div id="services-popup" class="services-popup" style="display: none;"> |
|
|
<div class="services-popup-header"> |
|
|
<h4> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline> |
|
|
</svg> |
|
|
Indicator Services |
|
|
</h4> |
|
|
<button class="services-close-btn" id="services-close">×</button> |
|
|
</div> |
|
|
<div class="services-popup-body"> |
|
|
<div class="services-grid"> |
|
|
|
|
|
<a href="/static/pages/services/index.html?service=bollinger_bands" class="service-card" data-service="bollinger_bands"> |
|
|
<span class="service-icon">📊</span> |
|
|
<div class="service-info"> |
|
|
<span class="service-name">Bollinger Bands</span> |
|
|
<span class="service-desc">Volatility bands analysis</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="/static/pages/services/index.html?service=stoch_rsi" class="service-card" data-service="stoch_rsi"> |
|
|
<span class="service-icon">📈</span> |
|
|
<div class="service-info"> |
|
|
<span class="service-name">Stochastic RSI</span> |
|
|
<span class="service-desc">Momentum oscillator</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="/static/pages/services/index.html?service=atr" class="service-card" data-service="atr"> |
|
|
<span class="service-icon">📉</span> |
|
|
<div class="service-info"> |
|
|
<span class="service-name">ATR</span> |
|
|
<span class="service-desc">Average True Range</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="/static/pages/services/index.html?service=sma" class="service-card" data-service="sma"> |
|
|
<span class="service-icon">〰️</span> |
|
|
<div class="service-info"> |
|
|
<span class="service-name">SMA</span> |
|
|
<span class="service-desc">Simple Moving Average</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="/static/pages/services/index.html?service=ema" class="service-card" data-service="ema"> |
|
|
<span class="service-icon">📐</span> |
|
|
<div class="service-info"> |
|
|
<span class="service-name">EMA</span> |
|
|
<span class="service-desc">Exponential MA</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="/static/pages/services/index.html?service=macd" class="service-card" data-service="macd"> |
|
|
<span class="service-icon">🔀</span> |
|
|
<div class="service-info"> |
|
|
<span class="service-name">MACD</span> |
|
|
<span class="service-desc">Trend momentum</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="/static/pages/services/index.html?service=rsi" class="service-card" data-service="rsi"> |
|
|
<span class="service-icon">💪</span> |
|
|
<div class="service-info"> |
|
|
<span class="service-name">RSI</span> |
|
|
<span class="service-desc">Relative Strength</span> |
|
|
</div> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="/static/pages/services/index.html?service=comprehensive" class="service-card featured" data-service="comprehensive"> |
|
|
<span class="service-icon">🎯</span> |
|
|
<div class="service-info"> |
|
|
<span class="service-name">Full Analysis</span> |
|
|
<span class="service-desc">All indicators combined</span> |
|
|
</div> |
|
|
<span class="service-badge">PRO</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="services-popup-footer"> |
|
|
<a href="/static/pages/services/index.html" class="view-all-btn"> |
|
|
View All Services |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
|
<polyline points="9 18 15 12 9 6"></polyline> |
|
|
</svg> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="sidebar-footer"> |
|
|
<div class="sidebar-status"> |
|
|
<span class="status-dot online"></span> |
|
|
<span class="status-text">System Online</span> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const toggleBtn = document.getElementById('services-toggle'); |
|
|
const popup = document.getElementById('services-popup'); |
|
|
const closeBtn = document.getElementById('services-close'); |
|
|
|
|
|
if (toggleBtn && popup) { |
|
|
toggleBtn.addEventListener('click', function(e) { |
|
|
e.stopPropagation(); |
|
|
popup.style.display = popup.style.display === 'none' ? 'block' : 'none'; |
|
|
toggleBtn.classList.toggle('active'); |
|
|
}); |
|
|
|
|
|
if (closeBtn) { |
|
|
closeBtn.addEventListener('click', function() { |
|
|
popup.style.display = 'none'; |
|
|
toggleBtn.classList.remove('active'); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
if (!popup.contains(e.target) && !toggleBtn.contains(e.target)) { |
|
|
popup.style.display = 'none'; |
|
|
toggleBtn.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
|
