| <!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=(), autoplay=(), camera=(), display-capture=(), encrypted-media=(), fullscreen=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), midi=(), payment=(), picture-in-picture=(), sync-xhr=(), usb=(), web-share=()"> |
| <title>Trading Pro | Crypto Intelligence Hub</title> |
| <link rel="icon" type="image/svg+xml" href="/static/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"> |
| |
| |
| <script src="https://unpkg.com/lightweight-charts@4.1.3/dist/lightweight-charts.standalone.production.js"></script> |
| |
| <style> |
| |
| .trading-terminal { |
| display: grid; |
| grid-template-columns: 280px 1fr 300px; |
| grid-template-rows: auto 1fr 180px; |
| height: calc(100vh - 60px); |
| gap: 1px; |
| background: var(--border-color); |
| } |
| |
| |
| .trading-top-bar { |
| grid-column: 1 / 4; |
| background: var(--bg-secondary); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0.75rem 1.5rem; |
| border-bottom: 1px solid var(--border-color); |
| } |
| |
| .symbol-selector { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| } |
| |
| .symbol-input { |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border-color); |
| border-radius: 8px; |
| padding: 0.5rem 1rem; |
| color: var(--text-primary); |
| font-size: 1rem; |
| font-weight: 600; |
| width: 140px; |
| transition: all 0.2s; |
| } |
| |
| .symbol-input:focus { |
| outline: none; |
| border-color: var(--accent-cyan); |
| box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1); |
| } |
| |
| .price-display { |
| font-size: 1.25rem; |
| font-weight: 700; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .price-change { |
| font-size: 0.875rem; |
| padding: 0.25rem 0.5rem; |
| border-radius: 4px; |
| } |
| |
| .price-change.positive { |
| background: rgba(34, 197, 94, 0.2); |
| color: var(--accent-green); |
| } |
| |
| .price-change.negative { |
| background: rgba(239, 68, 68, 0.2); |
| color: var(--accent-red); |
| } |
| |
| .timeframe-buttons { |
| display: flex; |
| gap: 0.25rem; |
| } |
| |
| .timeframe-btn { |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border-color); |
| border-radius: 6px; |
| padding: 0.4rem 0.75rem; |
| color: var(--text-secondary); |
| cursor: pointer; |
| font-size: 0.8rem; |
| transition: all 0.2s; |
| } |
| |
| .timeframe-btn:hover { |
| border-color: var(--accent-cyan); |
| color: var(--text-primary); |
| } |
| |
| .timeframe-btn.active { |
| background: var(--accent-cyan); |
| color: var(--bg-primary); |
| border-color: var(--accent-cyan); |
| font-weight: 600; |
| } |
| |
| .status-indicators { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| } |
| |
| .status-badge { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.4rem 0.8rem; |
| border-radius: 6px; |
| font-size: 0.8rem; |
| background: var(--bg-tertiary); |
| } |
| |
| .status-dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--accent-green); |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| |
| |
| .tools-panel { |
| background: var(--bg-secondary); |
| overflow-y: auto; |
| padding: 1rem; |
| } |
| |
| .tool-section { |
| margin-bottom: 1.25rem; |
| } |
| |
| .tool-section h3 { |
| font-size: 0.75rem; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| color: var(--text-secondary); |
| margin-bottom: 0.5rem; |
| padding-bottom: 0.5rem; |
| border-bottom: 1px solid var(--border-color); |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .tool-btn { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| width: 100%; |
| padding: 0.5rem 0.75rem; |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border-color); |
| border-radius: 6px; |
| color: var(--text-primary); |
| cursor: pointer; |
| margin-bottom: 0.35rem; |
| font-size: 0.8rem; |
| transition: all 0.2s; |
| } |
| |
| .tool-btn:hover { |
| background: rgba(45, 212, 191, 0.1); |
| border-color: var(--accent-cyan); |
| } |
| |
| .tool-btn.active { |
| background: rgba(45, 212, 191, 0.2); |
| border-color: var(--accent-cyan); |
| } |
| |
| .tool-icon { |
| width: 16px; |
| height: 16px; |
| } |
| |
| .indicator-toggle { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0.5rem 0.75rem; |
| background: var(--bg-tertiary); |
| border-radius: 6px; |
| margin-bottom: 0.35rem; |
| font-size: 0.8rem; |
| } |
| |
| .toggle-switch { |
| position: relative; |
| width: 40px; |
| height: 20px; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 10px; |
| cursor: pointer; |
| transition: all 0.3s; |
| } |
| |
| .toggle-switch.on { |
| background: var(--accent-cyan); |
| } |
| |
| .toggle-slider { |
| position: absolute; |
| top: 2px; |
| left: 2px; |
| width: 16px; |
| height: 16px; |
| background: white; |
| border-radius: 50%; |
| transition: transform 0.3s; |
| } |
| |
| .toggle-switch.on .toggle-slider { |
| transform: translateX(20px); |
| } |
| |
| |
| .chart-container { |
| background: var(--bg-secondary); |
| position: relative; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .chart-toolbar { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0.5rem 1rem; |
| background: var(--bg-tertiary); |
| border-bottom: 1px solid var(--border-color); |
| } |
| |
| .chart-tools { |
| display: flex; |
| gap: 0.35rem; |
| } |
| |
| .chart-tool-btn { |
| padding: 0.4rem; |
| background: transparent; |
| border: 1px solid var(--border-color); |
| border-radius: 6px; |
| color: var(--text-secondary); |
| cursor: pointer; |
| transition: all 0.2s; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .chart-tool-btn svg { |
| width: 14px; |
| height: 14px; |
| } |
| |
| .chart-tool-btn:hover { |
| background: rgba(45, 212, 191, 0.1); |
| border-color: var(--accent-cyan); |
| color: var(--text-primary); |
| } |
| |
| .chart-tool-btn.active { |
| background: var(--accent-cyan); |
| color: var(--bg-primary); |
| border-color: var(--accent-cyan); |
| } |
| |
| #tradingChart { |
| flex: 1; |
| min-height: 0; |
| } |
| |
| |
| .analysis-panel { |
| background: var(--bg-secondary); |
| overflow-y: auto; |
| padding: 1rem; |
| } |
| |
| .analysis-card { |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border-color); |
| border-radius: 10px; |
| padding: 0.75rem; |
| margin-bottom: 0.75rem; |
| } |
| |
| .analysis-card h3 { |
| font-size: 0.7rem; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| color: var(--text-secondary); |
| margin-bottom: 0.75rem; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .signal-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.4rem 0.75rem; |
| border-radius: 6px; |
| font-weight: 600; |
| font-size: 0.8rem; |
| } |
| |
| .signal-badge.buy { |
| background: rgba(34, 197, 94, 0.2); |
| color: var(--accent-green); |
| } |
| |
| .signal-badge.sell { |
| background: rgba(239, 68, 68, 0.2); |
| color: var(--accent-red); |
| } |
| |
| .signal-badge.hold { |
| background: rgba(251, 191, 36, 0.2); |
| color: var(--accent-yellow); |
| } |
| |
| .metric-row { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 0.5rem 0; |
| border-bottom: 1px solid var(--border-color); |
| font-size: 0.8rem; |
| } |
| |
| .metric-row:last-child { |
| border-bottom: none; |
| } |
| |
| .metric-label { |
| color: var(--text-secondary); |
| } |
| |
| .metric-value { |
| font-weight: 600; |
| } |
| |
| .metric-value.bullish { color: var(--accent-green); } |
| .metric-value.bearish { color: var(--accent-red); } |
| .metric-value.neutral { color: var(--accent-yellow); } |
| |
| |
| .strategies-panel { |
| grid-column: 1 / 4; |
| background: var(--bg-secondary); |
| border-top: 1px solid var(--border-color); |
| display: flex; |
| flex-direction: column; |
| } |
| |
| .strategy-tabs { |
| display: flex; |
| border-bottom: 1px solid var(--border-color); |
| background: var(--bg-tertiary); |
| } |
| |
| .strategy-tab { |
| padding: 0.6rem 1.25rem; |
| cursor: pointer; |
| border-bottom: 2px solid transparent; |
| color: var(--text-secondary); |
| transition: all 0.2s; |
| font-size: 0.85rem; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .strategy-tab:hover { |
| color: var(--text-primary); |
| background: rgba(45, 212, 191, 0.05); |
| } |
| |
| .strategy-tab.active { |
| color: var(--accent-cyan); |
| border-bottom-color: var(--accent-cyan); |
| } |
| |
| .strategy-content { |
| flex: 1; |
| padding: 0.75rem; |
| overflow-y: auto; |
| } |
| |
| .strategy-list { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
| gap: 0.75rem; |
| } |
| |
| .strategy-item { |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border-color); |
| border-radius: 10px; |
| padding: 0.75rem; |
| cursor: pointer; |
| transition: all 0.2s; |
| } |
| |
| .strategy-item:hover { |
| border-color: var(--accent-cyan); |
| transform: translateY(-2px); |
| } |
| |
| .strategy-item.active { |
| background: rgba(45, 212, 191, 0.1); |
| border-color: var(--accent-cyan); |
| } |
| |
| .strategy-name { |
| font-weight: 600; |
| font-size: 0.9rem; |
| margin-bottom: 0.35rem; |
| } |
| |
| .strategy-desc { |
| font-size: 0.75rem; |
| color: var(--text-secondary); |
| margin-bottom: 0.5rem; |
| } |
| |
| .strategy-stats { |
| display: flex; |
| gap: 0.75rem; |
| padding-top: 0.5rem; |
| border-top: 1px solid var(--border-color); |
| } |
| |
| .stat { |
| flex: 1; |
| text-align: center; |
| } |
| |
| .stat-label { |
| font-size: 0.65rem; |
| color: var(--text-secondary); |
| } |
| |
| .stat-value { |
| font-weight: 600; |
| font-size: 0.85rem; |
| margin-top: 0.15rem; |
| } |
| |
| |
| .loading-overlay { |
| position: absolute; |
| inset: 0; |
| background: rgba(10, 14, 39, 0.9); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| z-index: 1000; |
| } |
| |
| .spinner { |
| width: 40px; |
| height: 40px; |
| border: 3px solid var(--border-color); |
| border-top-color: var(--accent-cyan); |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| } |
| |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| |
| .loading-text { |
| margin-top: 0.75rem; |
| color: var(--text-secondary); |
| font-size: 0.85rem; |
| } |
| |
| .hidden { display: none !important; } |
| |
| |
| .toast-container { |
| position: fixed; |
| top: 80px; |
| right: 20px; |
| z-index: 10000; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
| |
| .toast { |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border-color); |
| border-radius: 10px; |
| padding: 0.75rem 1rem; |
| min-width: 280px; |
| max-width: 360px; |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); |
| animation: slideIn 0.3s ease-out; |
| } |
| |
| .toast.success { border-left: 3px solid var(--accent-green); } |
| .toast.error { border-left: 3px solid var(--accent-red); } |
| .toast.info { border-left: 3px solid var(--accent-cyan); } |
| .toast.warning { border-left: 3px solid var(--accent-yellow); } |
| |
| .toast-icon { width: 20px; height: 20px; flex-shrink: 0; } |
| .toast-content { flex: 1; } |
| .toast-title { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.15rem; } |
| .toast-message { font-size: 0.75rem; color: var(--text-secondary); } |
| |
| .toast-close { |
| background: transparent; |
| border: none; |
| color: var(--text-secondary); |
| cursor: pointer; |
| padding: 0.25rem; |
| } |
| |
| @keyframes slideIn { |
| from { transform: translateX(400px); opacity: 0; } |
| to { transform: translateX(0); opacity: 1; } |
| } |
| |
| .toast.removing { |
| animation: slideOut 0.3s ease-out forwards; |
| } |
| |
| @keyframes slideOut { |
| from { transform: translateX(0); opacity: 1; } |
| to { transform: translateX(400px); opacity: 0; } |
| } |
| </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" style="padding: 0;"> |
| |
| <header id="header-container"></header> |
|
|
| |
| <div class="toast-container" id="toastContainer"></div> |
|
|
| |
| <div class="trading-terminal"> |
| |
| <div class="trading-top-bar"> |
| <div class="symbol-selector"> |
| <input type="text" class="symbol-input" id="symbolInput" value="BTCUSDT" placeholder="Symbol"> |
| <div class="price-display" id="priceDisplay"> |
| <span id="currentPrice">$0.00</span> |
| <span class="price-change positive" id="priceChange">+0.00%</span> |
| </div> |
| </div> |
|
|
| <div class="timeframe-buttons"> |
| <button class="timeframe-btn" data-timeframe="1m">1m</button> |
| <button class="timeframe-btn" data-timeframe="5m">5m</button> |
| <button class="timeframe-btn" data-timeframe="15m">15m</button> |
| <button class="timeframe-btn" data-timeframe="1h">1h</button> |
| <button class="timeframe-btn active" data-timeframe="4h">4h</button> |
| <button class="timeframe-btn" data-timeframe="1d">1D</button> |
| <button class="timeframe-btn" data-timeframe="1w">1W</button> |
| </div> |
|
|
| <div class="status-indicators"> |
| <div class="status-badge"> |
| <div class="status-dot"></div> |
| <span>Live</span> |
| </div> |
| <div class="status-badge"> |
| <span id="lastUpdate">--:--</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="tools-panel"> |
| <div class="tool-section"> |
| <h3> |
| <svg class="tool-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg> |
| Drawing |
| </h3> |
| <button class="tool-btn" data-tool="trendline"> |
| <svg class="tool-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg> |
| Trend Line |
| </button> |
| <button class="tool-btn" data-tool="horizontal"> |
| <svg class="tool-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg> |
| Horizontal |
| </button> |
| <button class="tool-btn" data-tool="fibonacci"> |
| <svg class="tool-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-width="2"/><path stroke-linecap="round" stroke-width="2" d="M12 2v20M2 12h20"/></svg> |
| Fibonacci |
| </button> |
| <button class="tool-btn" data-tool="rectangle"> |
| <svg class="tool-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" stroke-width="2"/></svg> |
| Rectangle |
| </button> |
| </div> |
|
|
| <div class="tool-section"> |
| <h3> |
| <svg class="tool-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg> |
| Indicators |
| </h3> |
| <div class="indicator-toggle"> |
| <span>RSI (14)</span> |
| <div class="toggle-switch on" data-indicator="rsi"><div class="toggle-slider"></div></div> |
| </div> |
| <div class="indicator-toggle"> |
| <span>MACD</span> |
| <div class="toggle-switch on" data-indicator="macd"><div class="toggle-slider"></div></div> |
| </div> |
| <div class="indicator-toggle"> |
| <span>BB (20,2)</span> |
| <div class="toggle-switch" data-indicator="bb"><div class="toggle-slider"></div></div> |
| </div> |
| <div class="indicator-toggle"> |
| <span>EMA</span> |
| <div class="toggle-switch on" data-indicator="ema"><div class="toggle-slider"></div></div> |
| </div> |
| <div class="indicator-toggle"> |
| <span>Volume</span> |
| <div class="toggle-switch on" data-indicator="volume"><div class="toggle-slider"></div></div> |
| </div> |
| </div> |
|
|
| <div class="tool-section"> |
| <h3> |
| <svg class="tool-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/></svg> |
| Patterns |
| </h3> |
| <div class="indicator-toggle"> |
| <span>Head & Shoulders</span> |
| <div class="toggle-switch on" data-pattern="hs"><div class="toggle-slider"></div></div> |
| </div> |
| <div class="indicator-toggle"> |
| <span>Double Top</span> |
| <div class="toggle-switch on" data-pattern="double"><div class="toggle-slider"></div></div> |
| </div> |
| <div class="indicator-toggle"> |
| <span>Triangles</span> |
| <div class="toggle-switch on" data-pattern="triangle"><div class="toggle-slider"></div></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="chart-container"> |
| <div class="chart-toolbar"> |
| <div class="chart-tools"> |
| <button class="chart-tool-btn" title="Cursor" data-mode="cursor"> |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/></svg> |
| </button> |
| <button class="chart-tool-btn active" title="Crosshair" data-mode="crosshair"> |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-width="2"/><line x1="22" y1="12" x2="18" y2="12" stroke-width="2"/><line x1="6" y1="12" x2="2" y2="12" stroke-width="2"/><line x1="12" y1="6" x2="12" y2="2" stroke-width="2"/><line x1="12" y1="22" x2="12" y2="18" stroke-width="2"/></svg> |
| </button> |
| <button class="chart-tool-btn" title="Zoom In" id="btnZoomIn"> |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8" stroke-width="2"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-4.35-4.35"/><line x1="11" y1="8" x2="11" y2="14" stroke-width="2"/><line x1="8" y1="11" x2="14" y2="11" stroke-width="2"/></svg> |
| </button> |
| <button class="chart-tool-btn" title="Zoom Out" id="btnZoomOut"> |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8" stroke-width="2"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-4.35-4.35"/><line x1="8" y1="11" x2="14" y2="11" stroke-width="2"/></svg> |
| </button> |
| <button class="chart-tool-btn" title="Fit" id="btnFit"> |
| <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg> |
| </button> |
| </div> |
| </div> |
| <div id="tradingChart"></div> |
| <div class="loading-overlay" id="loadingOverlay"> |
| <div class="spinner"></div> |
| <div class="loading-text">Loading market data...</div> |
| </div> |
| </div> |
|
|
| |
| <div class="analysis-panel"> |
| <div class="analysis-card"> |
| <h3> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg> |
| Signal |
| </h3> |
| <div style="margin: 0.5rem 0;"> |
| <span class="signal-badge buy" id="currentSignal">STRONG BUY</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Confidence</span> |
| <span class="metric-value bullish" id="confidence">85%</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Strength</span> |
| <span class="metric-value bullish" id="strength">Strong</span> |
| </div> |
| </div> |
|
|
| <div class="analysis-card"> |
| <h3> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg> |
| Key Levels |
| </h3> |
| <div class="metric-row"> |
| <span class="metric-label">Resistance</span> |
| <span class="metric-value bearish" id="r1">$0</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Current</span> |
| <span class="metric-value" id="cp">$0</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Support</span> |
| <span class="metric-value bullish" id="s1">$0</span> |
| </div> |
| </div> |
|
|
| <div class="analysis-card"> |
| <h3> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/></svg> |
| Indicators |
| </h3> |
| <div class="metric-row"> |
| <span class="metric-label">RSI (14)</span> |
| <span class="metric-value neutral" id="rsiValue">--</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">MACD</span> |
| <span class="metric-value" id="macdValue">--</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">EMA Trend</span> |
| <span class="metric-value" id="emaValue">--</span> |
| </div> |
| </div> |
|
|
| <div class="analysis-card"> |
| <h3> |
| <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg> |
| Stats |
| </h3> |
| <div class="metric-row"> |
| <span class="metric-label">24h Vol</span> |
| <span class="metric-value" id="volume24h">$0</span> |
| </div> |
| <div class="metric-row"> |
| <span class="metric-label">Volatility</span> |
| <span class="metric-value" id="volatility">--</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="strategies-panel"> |
| <div class="strategy-tabs"> |
| <div class="strategy-tab active" data-tab="strategies"> |
| <svg style="width:14px;height:14px" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg> |
| Strategies |
| </div> |
| <div class="strategy-tab" data-tab="signals"> |
| <svg style="width:14px;height:14px" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg> |
| Signals |
| </div> |
| <div class="strategy-tab" data-tab="history"> |
| <svg style="width:14px;height:14px" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> |
| History |
| </div> |
| <div class="strategy-tab" data-tab="backtests"> |
| <svg style="width:14px;height:14px" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg> |
| Backtest |
| </div> |
| </div> |
| <div class="strategy-content" id="strategyContent"> |
| <div class="strategy-list" id="strategyList"></div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| |
| <script type="module"> |
| |
| import { LayoutManager } from '/static/shared/js/core/layout-manager.js?v=2025-12-02-3'; |
| |
| |
| await LayoutManager.init('trading-pro'); |
| |
| |
| const { default: TradingProV2 } = await import('./trading-pro-v2.js'); |
| </script> |
| </body> |
| </html> |
|
|
