|
|
<!DOCTYPE html> |
|
|
<html lang="en" dir="ltr" data-theme="light"> |
|
|
|
|
|
<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=()"> |
|
|
<meta name="description" content="Professional Technical Analysis - Real-time Market Data & Advanced Indicators"> |
|
|
<title>Technical Analysis | Crypto Intelligence Hub</title> |
|
|
|
|
|
<link rel="icon" type="image/svg+xml" href="../../assets/icons/favicon.svg"> |
|
|
|
|
|
|
|
|
<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/layout.css"> |
|
|
<link rel="stylesheet" href="/static/shared/css/utilities.css"> |
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/static/pages/technical-analysis/technical-analysis.css"> |
|
|
<link rel="stylesheet" href="/static/pages/technical-analysis/technical-analysis-enhanced.css"> |
|
|
|
|
|
|
|
|
<script src="https://unpkg.com/lightweight-charts@4.1.0/dist/lightweight-charts.standalone.production.js"></script> |
|
|
|
|
|
<style> |
|
|
.analysis-card { |
|
|
background: linear-gradient(135deg, rgba(45, 212, 191, 0.05), rgba(59, 130, 246, 0.05)); |
|
|
border: 1px solid rgba(45, 212, 191, 0.2); |
|
|
border-radius: 16px; |
|
|
padding: 2rem; |
|
|
margin-top: 2rem; |
|
|
} |
|
|
|
|
|
.analysis-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 1.5rem; |
|
|
padding-bottom: 1rem; |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.analysis-header h3 { |
|
|
margin: 0; |
|
|
font-size: 1.25rem; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.badge { |
|
|
padding: 0.5rem 1rem; |
|
|
border-radius: 8px; |
|
|
font-size: 0.875rem; |
|
|
font-weight: 600; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
|
|
|
.badge-buy { background: rgba(34, 197, 94, 0.2); color: #22c55e; } |
|
|
.badge-sell { background: rgba(239, 68, 68, 0.2); color: #ef4444; } |
|
|
.badge-hold { background: rgba(251, 191, 36, 0.2); color: #fbbf24; } |
|
|
|
|
|
.analysis-section { |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.analysis-section h4 { |
|
|
font-size: 1rem; |
|
|
color: var(--accent-cyan); |
|
|
margin-bottom: 0.75rem; |
|
|
} |
|
|
|
|
|
.indicator-list { |
|
|
list-style: none; |
|
|
padding: 0; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.indicator-list li { |
|
|
padding: 0.75rem; |
|
|
margin-bottom: 0.5rem; |
|
|
background: rgba(0, 0, 0, 0.2); |
|
|
border-radius: 8px; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.indicator-name { |
|
|
font-weight: 600; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
.indicator-value { |
|
|
font-weight: 700; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.indicator-value.bullish, |
|
|
.indicator-value.oversold { |
|
|
color: #22c55e; |
|
|
} |
|
|
|
|
|
.indicator-value.bearish, |
|
|
.indicator-value.overbought { |
|
|
color: #ef4444; |
|
|
} |
|
|
|
|
|
.indicator-value.neutral { |
|
|
color: #fbbf24; |
|
|
} |
|
|
|
|
|
.indicator-signal { |
|
|
font-size: 0.875rem; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.recommendation { |
|
|
background: rgba(59, 130, 246, 0.1); |
|
|
border-left: 4px solid #3b82f6; |
|
|
padding: 1rem; |
|
|
border-radius: 8px; |
|
|
color: var(--text-secondary); |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.risk-bar { |
|
|
height: 24px; |
|
|
background: rgba(0, 0, 0, 0.3); |
|
|
border-radius: 12px; |
|
|
overflow: hidden; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.risk-fill { |
|
|
height: 100%; |
|
|
transition: width 0.5s ease; |
|
|
} |
|
|
|
|
|
.risk-fill.risk-low { |
|
|
background: linear-gradient(90deg, #22c55e, #4ade80); |
|
|
} |
|
|
|
|
|
.risk-fill.risk-medium { |
|
|
background: linear-gradient(90deg, #fbbf24, #fcd34d); |
|
|
} |
|
|
|
|
|
.risk-fill.risk-high { |
|
|
background: linear-gradient(90deg, #ef4444, #f87171); |
|
|
} |
|
|
|
|
|
.risk-text { |
|
|
font-size: 0.875rem; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.trend-bullish { |
|
|
color: #22c55e; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.trend-bearish { |
|
|
color: #ef4444; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.trend-neutral { |
|
|
color: #fbbf24; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.error-state { |
|
|
text-align: center; |
|
|
padding: 3rem; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.error-state svg { |
|
|
color: #ef4444; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.error-state h3 { |
|
|
color: var(--text-primary); |
|
|
margin: 1rem 0; |
|
|
} |
|
|
|
|
|
.price-info-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 1rem; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.price-info-card { |
|
|
background: rgba(0, 0, 0, 0.2); |
|
|
border: 1px solid rgba(255, 255, 255, 0.05); |
|
|
border-radius: 12px; |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
.price-info-label { |
|
|
font-size: 0.75rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.05em; |
|
|
color: var(--text-muted); |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.price-info-value { |
|
|
font-size: 1.5rem; |
|
|
font-weight: 700; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
#loading-spinner { |
|
|
display: none; |
|
|
text-align: center; |
|
|
padding: 2rem; |
|
|
} |
|
|
|
|
|
.spinner { |
|
|
border: 3px solid rgba(45, 212, 191, 0.1); |
|
|
border-top: 3px solid #2dd4bf; |
|
|
border-radius: 50%; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
animation: spin 1s linear infinite; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
</style> |
|
|
|
|
|
<script src="/static/js/api-config.js"></script> |
|
|
<script> |
|
|
|
|
|
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> |
|
|
<div class="app-container"> |
|
|
<aside id="sidebar-container"></aside> |
|
|
|
|
|
<main class="main-content"> |
|
|
<header id="header-container"></header> |
|
|
|
|
|
<div class="page-content"> |
|
|
|
|
|
<div class="page-header"> |
|
|
<div class="page-title"> |
|
|
<h1> |
|
|
<span class="page-icon"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M3 3v18h18"></path> |
|
|
<path d="M19 9l-5 5-4-4-3 3"></path> |
|
|
</svg> |
|
|
</span> |
|
|
Professional Technical Analysis |
|
|
</h1> |
|
|
<p class="page-subtitle">Real-time market data, advanced indicators, and professional trading tools</p> |
|
|
</div> |
|
|
<div class="page-actions"> |
|
|
<button id="refresh-data" class="btn btn-secondary"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
|
<polyline points="23 4 23 10 17 10"></polyline> |
|
|
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path> |
|
|
</svg> |
|
|
Refresh |
|
|
</button> |
|
|
<button id="export-analysis" class="btn btn-secondary"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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> |
|
|
Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="controls-panel" style="background: rgba(0,0,0,0.2); border-radius: 16px; padding: 1.5rem; margin-bottom: 1.5rem;"> |
|
|
<div style="display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center;"> |
|
|
<div style="flex: 1; min-width: 200px;"> |
|
|
<label style="display: block; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.5rem;">Symbol</label> |
|
|
<select id="symbol-select" class="form-select" style="width: 100%;"> |
|
|
<option value="BTC">Bitcoin (BTC)</option> |
|
|
<option value="ETH">Ethereum (ETH)</option> |
|
|
<option value="BNB">Binance Coin (BNB)</option> |
|
|
<option value="SOL">Solana (SOL)</option> |
|
|
<option value="ADA">Cardano (ADA)</option> |
|
|
<option value="XRP">Ripple (XRP)</option> |
|
|
<option value="DOT">Polkadot (DOT)</option> |
|
|
<option value="DOGE">Dogecoin (DOGE)</option> |
|
|
<option value="AVAX">Avalanche (AVAX)</option> |
|
|
<option value="MATIC">Polygon (MATIC)</option> |
|
|
</select> |
|
|
</div> |
|
|
<div style="flex: 2; min-width: 300px;"> |
|
|
<label style="display: block; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.5rem;">Timeframe</label> |
|
|
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;"> |
|
|
<button class="btn btn-sm btn-secondary" data-timeframe="1m">1m</button> |
|
|
<button class="btn btn-sm btn-secondary" data-timeframe="5m">5m</button> |
|
|
<button class="btn btn-sm btn-secondary" data-timeframe="15m">15m</button> |
|
|
<button class="btn btn-sm btn-secondary" data-timeframe="1h">1h</button> |
|
|
<button class="btn btn-sm btn-secondary active" data-timeframe="4h">4h</button> |
|
|
<button class="btn btn-sm btn-secondary" data-timeframe="1d">1D</button> |
|
|
<button class="btn btn-sm btn-secondary" data-timeframe="1w">1W</button> |
|
|
</div> |
|
|
</div> |
|
|
<div style="flex: 0 0 auto;"> |
|
|
<label style="display: block; font-size: 0.875rem; color: transparent; margin-bottom: 0.5rem;">Action</label> |
|
|
<button id="analyze-btn" class="btn btn-primary"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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> |
|
|
Analyze |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="price-info-grid"> |
|
|
<div class="price-info-card"> |
|
|
<div class="price-info-label">Current Price</div> |
|
|
<div class="price-info-value" id="current-price">--</div> |
|
|
</div> |
|
|
<div class="price-info-card"> |
|
|
<div class="price-info-label">24h Change</div> |
|
|
<div class="price-info-value" id="price-change">--</div> |
|
|
</div> |
|
|
<div class="price-info-card"> |
|
|
<div class="price-info-label">24h High</div> |
|
|
<div class="price-info-value" id="24h-high">--</div> |
|
|
</div> |
|
|
<div class="price-info-card"> |
|
|
<div class="price-info-label">24h Low</div> |
|
|
<div class="price-info-value" id="24h-low">--</div> |
|
|
</div> |
|
|
<div class="price-info-card"> |
|
|
<div class="price-info-label">24h Volume</div> |
|
|
<div class="price-info-value" id="24h-volume">--</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div style="background: rgba(0,0,0,0.2); border-radius: 16px; padding: 1rem; margin-bottom: 1.5rem;"> |
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;"> |
|
|
<h3 style="margin: 0; font-size: 1.125rem;">Price Chart</h3> |
|
|
<div style="display: flex; gap: 1rem; font-size: 0.875rem; color: var(--text-muted);"> |
|
|
<span id="last-update">--</span> |
|
|
<span id="data-source">--</span> |
|
|
</div> |
|
|
</div> |
|
|
<div id="tradingview-chart" style="width: 100%; height: 500px;"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div style="background: rgba(0,0,0,0.2); border-radius: 16px; padding: 1.5rem; margin-bottom: 1.5rem;"> |
|
|
<h3 style="margin: 0 0 1rem 0; font-size: 1.125rem;">Key Indicators</h3> |
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;"> |
|
|
<div style="background: rgba(0,0,0,0.2); border-radius: 8px; padding: 1rem;"> |
|
|
<div style="font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem;">RSI (14)</div> |
|
|
<div id="rsi-value" style="font-size: 1.5rem; font-weight: 700;">--</div> |
|
|
</div> |
|
|
<div style="background: rgba(0,0,0,0.2); border-radius: 8px; padding: 1rem;"> |
|
|
<div style="font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem;">MACD</div> |
|
|
<div id="macd-value" style="font-size: 1.5rem; font-weight: 700;">--</div> |
|
|
</div> |
|
|
<div style="background: rgba(0,0,0,0.2); border-radius: 8px; padding: 1rem;"> |
|
|
<div style="font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem;">EMA (20)</div> |
|
|
<div id="ema-value" style="font-size: 1.5rem; font-weight: 700;">--</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="loading-spinner"> |
|
|
<div class="spinner"></div> |
|
|
<p style="margin-top: 1rem; color: var(--text-muted);">Loading market data...</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="analysis-results"></div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="toast-container"></div> |
|
|
|
|
|
|
|
|
<script type="module" src="../../shared/js/layouts/sidebar.js"></script> |
|
|
<script type="module" src="../../shared/js/layouts/header.js"></script> |
|
|
<script type="module" src="../../shared/js/components/toast.js"></script> |
|
|
<script type="module" src="../../shared/js/utils/sanitizer.js"></script> |
|
|
|
|
|
|
|
|
<script type="module" src="/static/pages/technical-analysis/technical-analysis-professional.js"></script> |
|
|
</body> |
|
|
|
|
|
</html> |
|
|
|
