|
|
<!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"> |
|
|
<title>Professional Trading Terminal | Crypto Intelligence Hub</title> |
|
|
<link rel="icon" type="image/svg+xml" href="../../assets/icons/favicon.svg"> |
|
|
|
|
|
|
|
|
<script src="https://unpkg.com/lightweight-charts@4.1.3/dist/lightweight-charts.standalone.production.js"></script> |
|
|
|
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
:root { |
|
|
--bg-primary: #0a0e27; |
|
|
--bg-secondary: #0f1429; |
|
|
--bg-tertiary: #141B38; |
|
|
--border-color: rgba(255, 255, 255, 0.1); |
|
|
--text-primary: #f8fafc; |
|
|
--text-secondary: rgba(248, 250, 252, 0.75); |
|
|
--accent-cyan: #2dd4bf; |
|
|
--accent-purple: #818cf8; |
|
|
--accent-green: #22c55e; |
|
|
--accent-red: #ef4444; |
|
|
--accent-yellow: #fbbf24; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
|
|
background: var(--bg-primary); |
|
|
color: var(--text-primary); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
.trading-terminal { |
|
|
display: grid; |
|
|
grid-template-columns: 300px 1fr 320px; |
|
|
grid-template-rows: 60px 1fr 200px; |
|
|
height: 100vh; |
|
|
gap: 1px; |
|
|
background: var(--border-color); |
|
|
} |
|
|
|
|
|
|
|
|
.top-bar { |
|
|
grid-column: 1 / 4; |
|
|
background: var(--bg-secondary); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
padding: 0 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: 150px; |
|
|
} |
|
|
|
|
|
.symbol-input:focus { |
|
|
outline: none; |
|
|
border-color: var(--accent-cyan); |
|
|
} |
|
|
|
|
|
.timeframe-buttons { |
|
|
display: flex; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.timeframe-btn { |
|
|
background: var(--bg-tertiary); |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 6px; |
|
|
padding: 0.4rem 0.8rem; |
|
|
color: var(--text-secondary); |
|
|
cursor: pointer; |
|
|
font-size: 0.875rem; |
|
|
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); |
|
|
} |
|
|
|
|
|
.status-indicators { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
.status-badge { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
padding: 0.4rem 0.8rem; |
|
|
border-radius: 6px; |
|
|
font-size: 0.875rem; |
|
|
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; } |
|
|
} |
|
|
|
|
|
|
|
|
.left-sidebar { |
|
|
background: var(--bg-secondary); |
|
|
overflow-y: auto; |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
.tool-section { |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.tool-section h3 { |
|
|
font-size: 0.875rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.05em; |
|
|
color: var(--text-secondary); |
|
|
margin-bottom: 0.75rem; |
|
|
padding-bottom: 0.5rem; |
|
|
border-bottom: 1px solid var(--border-color); |
|
|
} |
|
|
|
|
|
.tool-btn { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.75rem; |
|
|
width: 100%; |
|
|
padding: 0.75rem; |
|
|
background: var(--bg-tertiary); |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 8px; |
|
|
color: var(--text-primary); |
|
|
cursor: pointer; |
|
|
margin-bottom: 0.5rem; |
|
|
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 { |
|
|
font-size: 1.25rem; |
|
|
} |
|
|
|
|
|
.indicator-toggle { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
padding: 0.75rem; |
|
|
background: var(--bg-tertiary); |
|
|
border-radius: 8px; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.toggle-switch { |
|
|
position: relative; |
|
|
width: 48px; |
|
|
height: 24px; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-radius: 12px; |
|
|
cursor: pointer; |
|
|
transition: background 0.3s; |
|
|
} |
|
|
|
|
|
.toggle-switch.on { |
|
|
background: var(--accent-cyan); |
|
|
} |
|
|
|
|
|
.toggle-slider { |
|
|
position: absolute; |
|
|
top: 2px; |
|
|
left: 2px; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
background: white; |
|
|
border-radius: 50%; |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.toggle-switch.on .toggle-slider { |
|
|
transform: translateX(24px); |
|
|
} |
|
|
|
|
|
|
|
|
.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.75rem 1rem; |
|
|
background: var(--bg-tertiary); |
|
|
border-bottom: 1px solid var(--border-color); |
|
|
} |
|
|
|
|
|
.chart-tools { |
|
|
display: flex; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.chart-tool-btn { |
|
|
padding: 0.5rem; |
|
|
background: transparent; |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 6px; |
|
|
color: var(--text-secondary); |
|
|
cursor: pointer; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.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; |
|
|
} |
|
|
|
|
|
|
|
|
.right-sidebar { |
|
|
background: var(--bg-secondary); |
|
|
overflow-y: auto; |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
.analysis-card { |
|
|
background: var(--bg-tertiary); |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 12px; |
|
|
padding: 1rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.analysis-card h3 { |
|
|
font-size: 0.875rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.05em; |
|
|
color: var(--text-secondary); |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.signal-badge { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
padding: 0.5rem 1rem; |
|
|
border-radius: 8px; |
|
|
font-weight: 600; |
|
|
font-size: 0.875rem; |
|
|
} |
|
|
|
|
|
.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.75rem 0; |
|
|
border-bottom: 1px solid var(--border-color); |
|
|
} |
|
|
|
|
|
.metric-row:last-child { |
|
|
border-bottom: none; |
|
|
} |
|
|
|
|
|
.metric-label { |
|
|
color: var(--text-secondary); |
|
|
font-size: 0.875rem; |
|
|
} |
|
|
|
|
|
.metric-value { |
|
|
font-weight: 600; |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.metric-value.bullish { |
|
|
color: var(--accent-green); |
|
|
} |
|
|
|
|
|
.metric-value.bearish { |
|
|
color: var(--accent-red); |
|
|
} |
|
|
|
|
|
.metric-value.neutral { |
|
|
color: var(--accent-yellow); |
|
|
} |
|
|
|
|
|
|
|
|
.bottom-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.75rem 1.5rem; |
|
|
cursor: pointer; |
|
|
border-bottom: 2px solid transparent; |
|
|
color: var(--text-secondary); |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.strategy-tab:hover { |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.strategy-tab.active { |
|
|
color: var(--accent-cyan); |
|
|
border-bottom-color: var(--accent-cyan); |
|
|
} |
|
|
|
|
|
.strategy-content { |
|
|
flex: 1; |
|
|
padding: 1rem; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.strategy-list { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.strategy-item { |
|
|
background: var(--bg-tertiary); |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 12px; |
|
|
padding: 1rem; |
|
|
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; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.strategy-stats { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
margin-top: 0.75rem; |
|
|
padding-top: 0.75rem; |
|
|
border-top: 1px solid var(--border-color); |
|
|
} |
|
|
|
|
|
.stat { |
|
|
flex: 1; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.stat-label { |
|
|
font-size: 0.75rem; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
.stat-value { |
|
|
font-weight: 600; |
|
|
margin-top: 0.25rem; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: var(--bg-tertiary); |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
} |
|
|
|
|
|
|
|
|
.loading-overlay { |
|
|
position: absolute; |
|
|
inset: 0; |
|
|
background: rgba(10, 14, 39, 0.9); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.spinner { |
|
|
width: 48px; |
|
|
height: 48px; |
|
|
border: 4px solid var(--border-color); |
|
|
border-top-color: var(--accent-cyan); |
|
|
border-radius: 50%; |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.hidden { |
|
|
display: none !important; |
|
|
} |
|
|
|
|
|
|
|
|
.price-display { |
|
|
font-size: 1.5rem; |
|
|
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); |
|
|
} |
|
|
</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="trading-terminal"> |
|
|
|
|
|
<div class="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 Data</span> |
|
|
</div> |
|
|
<div class="status-badge"> |
|
|
<span id="lastUpdate">Just now</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="left-sidebar"> |
|
|
<div class="tool-section"> |
|
|
<h3>📐 Drawing Tools</h3> |
|
|
<button class="tool-btn" data-tool="trendline"> |
|
|
<span class="tool-icon">📈</span> |
|
|
<span>Trend Line</span> |
|
|
</button> |
|
|
<button class="tool-btn" data-tool="horizontal"> |
|
|
<span class="tool-icon">➖</span> |
|
|
<span>Horizontal Line</span> |
|
|
</button> |
|
|
<button class="tool-btn" data-tool="fibonacci"> |
|
|
<span class="tool-icon">🎯</span> |
|
|
<span>Fibonacci</span> |
|
|
</button> |
|
|
<button class="tool-btn" data-tool="rectangle"> |
|
|
<span class="tool-icon">⬜</span> |
|
|
<span>Rectangle</span> |
|
|
</button> |
|
|
<button class="tool-btn" data-tool="triangle"> |
|
|
<span class="tool-icon">🔺</span> |
|
|
<span>Triangle</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="tool-section"> |
|
|
<h3>📊 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 (20, 50, 200)</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 class="indicator-toggle"> |
|
|
<span>Ichimoku Cloud</span> |
|
|
<div class="toggle-switch" data-indicator="ichimoku"> |
|
|
<div class="toggle-slider"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="tool-section"> |
|
|
<h3>🎨 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/Bottom</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 class="indicator-toggle"> |
|
|
<span>Wedges</span> |
|
|
<div class="toggle-switch" data-pattern="wedge"> |
|
|
<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 width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
|
<path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="chart-tool-btn" title="Crosshair" data-mode="crosshair"> |
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
|
<circle cx="12" cy="12" r="10"/> |
|
|
<line x1="22" y1="12" x2="18" y2="12"/> |
|
|
<line x1="6" y1="12" x2="2" y2="12"/> |
|
|
<line x1="12" y1="6" x2="12" y2="2"/> |
|
|
<line x1="12" y1="22" x2="12" y2="18"/> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="chart-tool-btn" title="Zoom In" onclick="window.tradingPro?.zoomIn()"> |
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
|
<circle cx="11" cy="11" r="8"/> |
|
|
<path d="m21 21-4.35-4.35"/> |
|
|
<line x1="11" y1="8" x2="11" y2="14"/> |
|
|
<line x1="8" y1="11" x2="14" y2="11"/> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="chart-tool-btn" title="Zoom Out" onclick="window.tradingPro?.zoomOut()"> |
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
|
<circle cx="11" cy="11" r="8"/> |
|
|
<path d="m21 21-4.35-4.35"/> |
|
|
<line x1="8" y1="11" x2="14" y2="11"/> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="chart-tool-btn" title="Screenshot" onclick="window.tradingPro?.takeScreenshot()"> |
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
|
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/> |
|
|
<circle cx="12" cy="13" r="4"/> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="tradingChart"></div> |
|
|
<div class="loading-overlay hidden" id="loadingOverlay"> |
|
|
<div class="spinner"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="right-sidebar"> |
|
|
<div class="analysis-card"> |
|
|
<h3>📈 Current Signal</h3> |
|
|
<div style="margin: 1rem 0;"> |
|
|
<span class="signal-badge buy" id="currentSignal">STRONG BUY</span> |
|
|
</div> |
|
|
<div style="margin-top: 1rem;"> |
|
|
<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> |
|
|
|
|
|
<div class="analysis-card"> |
|
|
<h3>🎯 Key Levels</h3> |
|
|
<div class="metric-row"> |
|
|
<span class="metric-label">Resistance 1</span> |
|
|
<span class="metric-value bearish" id="r1">$0.00</span> |
|
|
</div> |
|
|
<div class="metric-row"> |
|
|
<span class="metric-label">Current Price</span> |
|
|
<span class="metric-value" id="cp">$0.00</span> |
|
|
</div> |
|
|
<div class="metric-row"> |
|
|
<span class="metric-label">Support 1</span> |
|
|
<span class="metric-value bullish" id="s1">$0.00</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="analysis-card"> |
|
|
<h3>📊 Indicators</h3> |
|
|
<div class="metric-row"> |
|
|
<span class="metric-label">RSI (14)</span> |
|
|
<span class="metric-value neutral" id="rsiValue">0</span> |
|
|
</div> |
|
|
<div class="metric-row"> |
|
|
<span class="metric-label">MACD</span> |
|
|
<span class="metric-value bullish" id="macdValue">Bullish</span> |
|
|
</div> |
|
|
<div class="metric-row"> |
|
|
<span class="metric-label">EMA Trend</span> |
|
|
<span class="metric-value bullish" id="emaValue">Uptrend</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="analysis-card"> |
|
|
<h3>⚡ Quick Stats</h3> |
|
|
<div class="metric-row"> |
|
|
<span class="metric-label">24h Volume</span> |
|
|
<span class="metric-value" id="volume24h">$0</span> |
|
|
</div> |
|
|
<div class="metric-row"> |
|
|
<span class="metric-label">Market Cap</span> |
|
|
<span class="metric-value" id="marketCap">$0</span> |
|
|
</div> |
|
|
<div class="metric-row"> |
|
|
<span class="metric-label">Volatility</span> |
|
|
<span class="metric-value" id="volatility">Low</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bottom-panel"> |
|
|
<div class="strategy-tabs"> |
|
|
<div class="strategy-tab active" data-tab="strategies">My Strategies</div> |
|
|
<div class="strategy-tab" data-tab="signals">Active Signals</div> |
|
|
<div class="strategy-tab" data-tab="history">Trade History</div> |
|
|
<div class="strategy-tab" data-tab="backtests">Backtest Results</div> |
|
|
</div> |
|
|
<div class="strategy-content"> |
|
|
<div class="strategy-list" id="strategyList"> |
|
|
|
|
|
<div class="strategy-item active"> |
|
|
<div class="strategy-name">🎯 Trend Following + RSI</div> |
|
|
<p style="color: var(--text-secondary); font-size: 0.875rem; margin-top: 0.5rem;"> |
|
|
EMA crossover with RSI confirmation. Buy when EMA(20) crosses EMA(50) upward and RSI > 50 |
|
|
</p> |
|
|
<div class="strategy-stats"> |
|
|
<div class="stat"> |
|
|
<div class="stat-label">Win Rate</div> |
|
|
<div class="stat-value" style="color: var(--accent-green)">67%</div> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<div class="stat-label">Profit Factor</div> |
|
|
<div class="stat-value" style="color: var(--accent-green)">2.3</div> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<div class="stat-label">Trades</div> |
|
|
<div class="stat-value">156</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="strategy-item"> |
|
|
<div class="strategy-name">💎 Support/Resistance Breakout</div> |
|
|
<p style="color: var(--text-secondary); font-size: 0.875rem; margin-top: 0.5rem;"> |
|
|
Buy on resistance break with volume confirmation. Sell on support break. |
|
|
</p> |
|
|
<div class="strategy-stats"> |
|
|
<div class="stat"> |
|
|
<div class="stat-label">Win Rate</div> |
|
|
<div class="stat-value" style="color: var(--accent-green)">72%</div> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<div class="stat-label">Profit Factor</div> |
|
|
<div class="stat-value" style="color: var(--accent-green)">3.1</div> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<div class="stat-label">Trades</div> |
|
|
<div class="stat-value">89</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="strategy-item"> |
|
|
<div class="strategy-name">🌊 MACD + Bollinger Bands</div> |
|
|
<p style="color: var(--text-secondary); font-size: 0.875rem; margin-top: 0.5rem;"> |
|
|
MACD histogram reversal at BB extremes. Mean reversion strategy. |
|
|
</p> |
|
|
<div class="strategy-stats"> |
|
|
<div class="stat"> |
|
|
<div class="stat-label">Win Rate</div> |
|
|
<div class="stat-value" style="color: var(--accent-green)">65%</div> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<div class="stat-label">Profit Factor</div> |
|
|
<div class="stat-value" style="color: var(--accent-green)">1.9</div> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<div class="stat-label">Trades</div> |
|
|
<div class="stat-value">203</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="strategy-item"> |
|
|
<div class="strategy-name">⚡ Scalping - Quick Profits</div> |
|
|
<p style="color: var(--text-secondary); font-size: 0.875rem; margin-top: 0.5rem;"> |
|
|
1-5 minute timeframe. Small profits, high frequency, strict stop-loss. |
|
|
</p> |
|
|
<div class="strategy-stats"> |
|
|
<div class="stat"> |
|
|
<div class="stat-label">Win Rate</div> |
|
|
<div class="stat-value" style="color: var(--accent-yellow)">58%</div> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<div class="stat-label">Profit Factor</div> |
|
|
<div class="stat-value" style="color: var(--accent-green)">1.6</div> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<div class="stat-label">Trades</div> |
|
|
<div class="stat-value">1,247</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script type="module" src="./trading-pro.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
