|
|
<!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 Trading Assistant - Real-time signals, Advanced strategies, Automated monitoring"> |
|
|
<title>🚀 Trading Assistant | Crypto Intelligence Hub</title> |
|
|
|
|
|
<link rel="icon" type="image/svg+xml" href="/static/assets/icons/favicon.svg"> |
|
|
|
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600;700&display=swap" rel="stylesheet"> |
|
|
|
|
|
|
|
|
<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/trading-assistant/trading-assistant.css"> |
|
|
<link rel="stylesheet" href="/static/pages/trading-assistant/enhanced-typography.css"> |
|
|
|
|
|
<style> |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; |
|
|
font-size: 16px !important; |
|
|
line-height: 1.6 !important; |
|
|
-webkit-font-smoothing: antialiased !important; |
|
|
-moz-osx-font-smoothing: grayscale !important; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
|
font-family: 'Inter', sans-serif !important; |
|
|
font-weight: 800 !important; |
|
|
letter-spacing: -0.5px !important; |
|
|
} |
|
|
|
|
|
.stat-value, .crypto-price, .signal-item-value { |
|
|
font-family: 'JetBrains Mono', monospace !important; |
|
|
font-weight: 700 !important; |
|
|
letter-spacing: -0.5px !important; |
|
|
} |
|
|
|
|
|
|
|
|
.card-title, h1, h2, h3 { |
|
|
color: #ffffff !important; |
|
|
font-size: 1.375rem !important; |
|
|
} |
|
|
|
|
|
.text-primary { |
|
|
color: #ffffff !important; |
|
|
} |
|
|
|
|
|
.text-secondary { |
|
|
color: #e2e8f0 !important; |
|
|
} |
|
|
|
|
|
.text-muted { |
|
|
color: #94a3b8 !important; |
|
|
} |
|
|
|
|
|
|
|
|
.btn { |
|
|
padding: 14px 28px !important; |
|
|
font-size: 1rem !important; |
|
|
font-weight: 800 !important; |
|
|
letter-spacing: 0.5px !important; |
|
|
border-radius: 12px !important; |
|
|
} |
|
|
|
|
|
|
|
|
.card { |
|
|
padding: 28px !important; |
|
|
border-radius: 18px !important; |
|
|
border-width: 2px !important; |
|
|
} |
|
|
|
|
|
.card-header { |
|
|
margin-bottom: 24px !important; |
|
|
padding-bottom: 20px !important; |
|
|
} |
|
|
|
|
|
|
|
|
.strategy-cards-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
|
|
gap: 1.25rem; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.strategy-card { |
|
|
background: linear-gradient(135deg, rgba(0,0,0,0.3), rgba(0,0,0,0.1)); |
|
|
border: 2px solid rgba(255,255,255,0.05); |
|
|
border-radius: 16px; |
|
|
padding: 1.5rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.strategy-card:hover { |
|
|
border-color: rgba(45, 212, 191, 0.3); |
|
|
transform: translateY(-4px); |
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.3); |
|
|
} |
|
|
|
|
|
.strategy-card.active { |
|
|
border-color: #2dd4bf; |
|
|
background: linear-gradient(135deg, rgba(45, 212, 191, 0.1), rgba(59, 130, 246, 0.1)); |
|
|
} |
|
|
|
|
|
.strategy-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 0.75rem; |
|
|
} |
|
|
|
|
|
.strategy-header h4 { |
|
|
margin: 0; |
|
|
font-size: 1.125rem; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.strategy-badge { |
|
|
background: rgba(45, 212, 191, 0.2); |
|
|
color: #2dd4bf; |
|
|
padding: 0.25rem 0.75rem; |
|
|
border-radius: 12px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.premium-badge { |
|
|
background: linear-gradient(135deg, #f59e0b, #ef4444); |
|
|
color: #fff; |
|
|
padding: 0.25rem 0.75rem; |
|
|
border-radius: 12px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 700; |
|
|
text-transform: uppercase; |
|
|
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); |
|
|
} |
|
|
|
|
|
.hybrid-strategy { |
|
|
border: 2px solid rgba(245, 158, 11, 0.3); |
|
|
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(239, 68, 68, 0.1)); |
|
|
} |
|
|
|
|
|
.hybrid-strategy:hover { |
|
|
border-color: rgba(245, 158, 11, 0.6); |
|
|
box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2); |
|
|
} |
|
|
|
|
|
.hybrid-strategy.active { |
|
|
border-color: #f59e0b; |
|
|
background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(239, 68, 68, 0.2)); |
|
|
} |
|
|
|
|
|
.strategy-description { |
|
|
color: var(--text-secondary); |
|
|
font-size: 0.875rem; |
|
|
margin-bottom: 1rem; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.strategy-indicators { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 0.5rem; |
|
|
margin-bottom: 0.75rem; |
|
|
} |
|
|
|
|
|
.indicator-tag { |
|
|
background: rgba(59, 130, 246, 0.2); |
|
|
color: #3b82f6; |
|
|
padding: 0.25rem 0.75rem; |
|
|
border-radius: 8px; |
|
|
font-size: 0.75rem; |
|
|
} |
|
|
|
|
|
.strategy-timeframes { |
|
|
font-size: 0.75rem; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
|
|
|
.crypto-list { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
|
|
gap: 0.75rem; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.crypto-btn { |
|
|
background: rgba(0,0,0,0.2); |
|
|
border: 1px solid rgba(255,255,255,0.05); |
|
|
border-radius: 12px; |
|
|
padding: 1rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
.crypto-btn:hover { |
|
|
border-color: rgba(45, 212, 191, 0.3); |
|
|
background: rgba(0,0,0,0.3); |
|
|
} |
|
|
|
|
|
.crypto-btn.active { |
|
|
border-color: #2dd4bf; |
|
|
background: rgba(45, 212, 191, 0.1); |
|
|
} |
|
|
|
|
|
.crypto-symbol { |
|
|
display: block; |
|
|
font-size: 1.125rem; |
|
|
font-weight: 700; |
|
|
color: var(--text-primary); |
|
|
margin-bottom: 0.25rem; |
|
|
} |
|
|
|
|
|
.crypto-name { |
|
|
display: block; |
|
|
font-size: 0.75rem; |
|
|
color: var(--text-muted); |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.crypto-price { |
|
|
display: block; |
|
|
font-size: 0.875rem; |
|
|
font-weight: 600; |
|
|
color: #2dd4bf; |
|
|
} |
|
|
|
|
|
|
|
|
.signal-card { |
|
|
background: rgba(0,0,0,0.2); |
|
|
border: 1px solid rgba(255,255,255,0.05); |
|
|
border-radius: 12px; |
|
|
padding: 1.5rem; |
|
|
margin-bottom: 1rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.signal-card:hover { |
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.2); |
|
|
} |
|
|
|
|
|
.signal-card.signal-buy { |
|
|
border-left: 4px solid #22c55e; |
|
|
background: linear-gradient(90deg, rgba(34, 197, 94, 0.1), transparent); |
|
|
} |
|
|
|
|
|
.signal-card.signal-sell { |
|
|
border-left: 4px solid #ef4444; |
|
|
background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), transparent); |
|
|
} |
|
|
|
|
|
.signal-card.signal-hold { |
|
|
border-left: 4px solid #fbbf24; |
|
|
background: linear-gradient(90deg, rgba(251, 191, 36, 0.1), transparent); |
|
|
} |
|
|
|
|
|
.signal-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 1rem; |
|
|
padding-bottom: 0.75rem; |
|
|
border-bottom: 1px solid rgba(255,255,255,0.05); |
|
|
} |
|
|
|
|
|
.signal-badge { |
|
|
padding: 0.5rem 1rem; |
|
|
border-radius: 8px; |
|
|
font-size: 0.875rem; |
|
|
font-weight: 700; |
|
|
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; } |
|
|
|
|
|
.signal-symbol { |
|
|
font-size: 1.25rem; |
|
|
font-weight: 700; |
|
|
color: var(--text-primary); |
|
|
margin: 0 1rem; |
|
|
} |
|
|
|
|
|
.signal-confidence { |
|
|
font-size: 0.875rem; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.signal-time { |
|
|
font-size: 0.875rem; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.signal-body { |
|
|
display: grid; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.signal-price, |
|
|
.signal-targets, |
|
|
.signal-reasons { |
|
|
font-size: 0.875rem; |
|
|
} |
|
|
|
|
|
.signal-targets { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.signal-reasons ul { |
|
|
list-style: none; |
|
|
padding: 0; |
|
|
margin: 0.5rem 0 0 0; |
|
|
} |
|
|
|
|
|
.signal-reasons li { |
|
|
padding: 0.5rem; |
|
|
background: rgba(0,0,0,0.2); |
|
|
border-radius: 6px; |
|
|
margin-bottom: 0.25rem; |
|
|
font-size: 0.8125rem; |
|
|
} |
|
|
|
|
|
.signal-indicators { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
flex-wrap: wrap; |
|
|
margin-top: 0.5rem; |
|
|
font-size: 0.8125rem; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.signal-indicators span { |
|
|
background: rgba(0,0,0,0.2); |
|
|
padding: 0.25rem 0.75rem; |
|
|
border-radius: 6px; |
|
|
} |
|
|
|
|
|
|
|
|
.action-panel { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
flex-wrap: wrap; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
|
|
|
.empty-state { |
|
|
text-align: center; |
|
|
padding: 3rem; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.empty-state svg { |
|
|
margin-bottom: 1rem; |
|
|
color: var(--accent-cyan); |
|
|
} |
|
|
</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"> |
|
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline> |
|
|
</svg> |
|
|
</span> |
|
|
Professional Trading Assistant |
|
|
</h1> |
|
|
<p class="page-subtitle">Real-time signals, advanced strategies, and automated market monitoring</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-signals" 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 style="margin-bottom: 2rem;"> |
|
|
<h3 style="margin-bottom: 1rem; font-size: 1.125rem; color: var(--accent-cyan);">Select Trading Strategy</h3> |
|
|
<div id="strategy-cards" class="strategy-cards-grid"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div style="margin-bottom: 2rem;"> |
|
|
<h3 style="margin-bottom: 1rem; font-size: 1.125rem; color: var(--accent-cyan);">Select Cryptocurrency</h3> |
|
|
<div id="crypto-list" class="crypto-list"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="action-panel"> |
|
|
<button id="get-signals-btn" class="btn btn-primary btn-lg"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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> |
|
|
Get Trading Signals |
|
|
</button> |
|
|
<button id="toggle-monitor-btn" class="btn btn-secondary btn-lg"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
|
<circle cx="12" cy="12" r="10"></circle> |
|
|
<polyline points="12 6 12 12 16 14"></polyline> |
|
|
</svg> |
|
|
Start Monitoring |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div style="background: rgba(0,0,0,0.2); border-radius: 12px; padding: 1rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center;"> |
|
|
<div id="last-update-time" style="font-size: 0.875rem; color: var(--text-muted);"> |
|
|
Ready to analyze |
|
|
</div> |
|
|
<div style="font-size: 0.875rem; color: var(--text-muted);"> |
|
|
<span id="signals-count">0 signals</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 style="margin-bottom: 1rem; font-size: 1.125rem; color: var(--accent-cyan);"> |
|
|
Trading Signals |
|
|
<span style="font-size: 0.875rem; color: var(--text-muted); font-weight: normal;">(Latest first)</span> |
|
|
</h3> |
|
|
<div id="signals-list"></div> |
|
|
</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/utils/sanitizer.js"></script> |
|
|
|
|
|
|
|
|
<script type="module" src="./trading-assistant-professional.js"></script> |
|
|
</body> |
|
|
|
|
|
</html> |
|
|
|
|
|
|
|
|
|
