| <!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> |
|
|
