|
|
<!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>🔥 HTS Trading System - Live Market Intelligence</title> |
|
|
|
|
|
<link rel="icon" type="image/svg+xml" href="/static/assets/icons/favicon.svg"> |
|
|
|
|
|
|
|
|
<script src="https://s3.tradingview.com/tv.js"></script> |
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/static/shared/css/design-system.css"> |
|
|
<link rel="stylesheet" href="/static/shared/css/global.css"> |
|
|
<link rel="stylesheet" href="/static/pages/trading-assistant/trading-assistant.css"> |
|
|
|
|
|
<style> |
|
|
:root { |
|
|
--neon-cyan: #00ffff; |
|
|
--neon-pink: #ff00ff; |
|
|
--neon-green: #00ff00; |
|
|
--neon-orange: #ff6600; |
|
|
--glass-bg: rgba(255, 255, 255, 0.05); |
|
|
--glass-border: rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%); |
|
|
color: #fff; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
.animated-bg { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.animated-bg::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: radial-gradient(circle, rgba(0,255,255,0.1) 0%, transparent 50%); |
|
|
animation: rotate 20s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes rotate { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
|
|
|
.particle { |
|
|
position: absolute; |
|
|
width: 4px; |
|
|
height: 4px; |
|
|
background: var(--neon-cyan); |
|
|
border-radius: 50%; |
|
|
animation: float 15s infinite; |
|
|
opacity: 0.6; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0) translateX(0); } |
|
|
25% { transform: translateY(-100px) translateX(50px); } |
|
|
50% { transform: translateY(-200px) translateX(-50px); } |
|
|
75% { transform: translateY(-100px) translateX(100px); } |
|
|
} |
|
|
|
|
|
|
|
|
.trading-container { |
|
|
max-width: 1920px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
|
|
|
.trading-header { |
|
|
background: var(--glass-bg); |
|
|
backdrop-filter: blur(20px); |
|
|
border: 1px solid var(--glass-border); |
|
|
border-radius: 20px; |
|
|
padding: 30px; |
|
|
margin-bottom: 30px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.trading-header::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: linear-gradient(45deg, transparent, rgba(0,255,255,0.1), transparent); |
|
|
animation: shine 3s infinite; |
|
|
} |
|
|
|
|
|
@keyframes shine { |
|
|
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } |
|
|
100% { transform: translateX(100%) translateY(100%) rotate(45deg); } |
|
|
} |
|
|
|
|
|
.header-content { |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
flex-wrap: wrap; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.header-title { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.header-title h1 { |
|
|
font-size: 2.5rem; |
|
|
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink)); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
animation: glow 2s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes glow { |
|
|
0%, 100% { filter: drop-shadow(0 0 10px var(--neon-cyan)); } |
|
|
50% { filter: drop-shadow(0 0 20px var(--neon-pink)); } |
|
|
} |
|
|
|
|
|
.live-indicator { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
background: rgba(0, 255, 0, 0.1); |
|
|
padding: 10px 20px; |
|
|
border-radius: 50px; |
|
|
border: 1px solid var(--neon-green); |
|
|
} |
|
|
|
|
|
.live-dot { |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
background: var(--neon-green); |
|
|
border-radius: 50%; |
|
|
animation: pulse 1.5s ease-in-out infinite; |
|
|
box-shadow: 0 0 20px var(--neon-green); |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { transform: scale(1); opacity: 1; } |
|
|
50% { transform: scale(1.3); opacity: 0.7; } |
|
|
} |
|
|
|
|
|
|
|
|
.trading-grid { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 2fr 1fr; |
|
|
gap: 20px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
@media (max-width: 1400px) { |
|
|
.trading-grid { |
|
|
grid-template-columns: 1fr 2fr; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 900px) { |
|
|
.trading-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.glass-card { |
|
|
background: var(--glass-bg); |
|
|
backdrop-filter: blur(20px); |
|
|
border: 1px solid var(--glass-border); |
|
|
border-radius: 20px; |
|
|
padding: 25px; |
|
|
transition: all 0.3s ease; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.glass-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 40px rgba(0, 255, 255, 0.2); |
|
|
border-color: var(--neon-cyan); |
|
|
} |
|
|
|
|
|
.card-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 20px; |
|
|
padding-bottom: 15px; |
|
|
border-bottom: 1px solid var(--glass-border); |
|
|
} |
|
|
|
|
|
.card-title { |
|
|
font-size: 1.3rem; |
|
|
font-weight: 700; |
|
|
color: var(--neon-cyan); |
|
|
} |
|
|
|
|
|
|
|
|
.strategy-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 15px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.strategy-card { |
|
|
background: linear-gradient(135deg, rgba(0,255,255,0.1), rgba(255,0,255,0.1)); |
|
|
border: 2px solid transparent; |
|
|
border-radius: 15px; |
|
|
padding: 20px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.strategy-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); |
|
|
transition: left 0.5s; |
|
|
} |
|
|
|
|
|
.strategy-card:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.strategy-card:hover { |
|
|
transform: scale(1.05); |
|
|
border-color: var(--neon-cyan); |
|
|
box-shadow: 0 0 30px rgba(0,255,255,0.5); |
|
|
} |
|
|
|
|
|
.strategy-card.active { |
|
|
border-color: var(--neon-green); |
|
|
background: linear-gradient(135deg, rgba(0,255,0,0.2), rgba(0,255,255,0.2)); |
|
|
box-shadow: 0 0 30px rgba(0,255,0,0.5); |
|
|
} |
|
|
|
|
|
.strategy-card.hts-strategy { |
|
|
border-color: var(--neon-orange); |
|
|
background: linear-gradient(135deg, rgba(255,102,0,0.2), rgba(255,0,255,0.2)); |
|
|
} |
|
|
|
|
|
.strategy-card.hts-strategy.active { |
|
|
box-shadow: 0 0 40px rgba(255,102,0,0.7); |
|
|
} |
|
|
|
|
|
.strategy-badge { |
|
|
display: inline-block; |
|
|
padding: 5px 15px; |
|
|
background: linear-gradient(135deg, #f59e0b, #ef4444); |
|
|
border-radius: 20px; |
|
|
font-size: 0.7rem; |
|
|
font-weight: 700; |
|
|
text-transform: uppercase; |
|
|
margin-bottom: 10px; |
|
|
animation: badge-glow 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes badge-glow { |
|
|
0%, 100% { box-shadow: 0 0 10px rgba(245,158,11,0.5); } |
|
|
50% { box-shadow: 0 0 20px rgba(239,68,68,0.8); } |
|
|
} |
|
|
|
|
|
|
|
|
#tradingview-chart { |
|
|
height: 600px; |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
background: rgba(0,0,0,0.5); |
|
|
} |
|
|
|
|
|
|
|
|
.signal-item { |
|
|
background: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.3)); |
|
|
border-left: 4px solid var(--neon-cyan); |
|
|
border-radius: 12px; |
|
|
padding: 20px; |
|
|
margin-bottom: 15px; |
|
|
animation: slideIn 0.5s ease-out; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
@keyframes slideIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateX(-50px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.signal-item.buy { |
|
|
border-left-color: var(--neon-green); |
|
|
background: linear-gradient(90deg, rgba(0,255,0,0.1), transparent); |
|
|
} |
|
|
|
|
|
.signal-item.sell { |
|
|
border-left-color: #ff0000; |
|
|
background: linear-gradient(90deg, rgba(255,0,0,0.1), transparent); |
|
|
} |
|
|
|
|
|
.signal-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.signal-badge { |
|
|
padding: 8px 20px; |
|
|
border-radius: 20px; |
|
|
font-weight: 700; |
|
|
font-size: 0.9rem; |
|
|
text-transform: uppercase; |
|
|
animation: badge-pulse 2s infinite; |
|
|
} |
|
|
|
|
|
.signal-badge.buy { |
|
|
background: rgba(0,255,0,0.2); |
|
|
color: var(--neon-green); |
|
|
border: 1px solid var(--neon-green); |
|
|
} |
|
|
|
|
|
.signal-badge.sell { |
|
|
background: rgba(255,0,0,0.2); |
|
|
color: #ff0000; |
|
|
border: 1px solid #ff0000; |
|
|
} |
|
|
|
|
|
@keyframes badge-pulse { |
|
|
0%, 100% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
} |
|
|
|
|
|
|
|
|
.btn { |
|
|
padding: 15px 30px; |
|
|
border: none; |
|
|
border-radius: 50px; |
|
|
font-weight: 700; |
|
|
font-size: 1rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
text-transform: uppercase; |
|
|
} |
|
|
|
|
|
.btn::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
width: 0; |
|
|
height: 0; |
|
|
border-radius: 50%; |
|
|
background: rgba(255,255,255,0.3); |
|
|
transform: translate(-50%, -50%); |
|
|
transition: width 0.6s, height 0.6s; |
|
|
} |
|
|
|
|
|
.btn:hover::before { |
|
|
width: 300px; |
|
|
height: 300px; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink)); |
|
|
color: #000; |
|
|
box-shadow: 0 5px 20px rgba(0,255,255,0.4); |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
box-shadow: 0 8px 30px rgba(0,255,255,0.6); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.btn-success { |
|
|
background: linear-gradient(135deg, var(--neon-green), #00cc00); |
|
|
color: #000; |
|
|
box-shadow: 0 5px 20px rgba(0,255,0,0.4); |
|
|
} |
|
|
|
|
|
.btn-danger { |
|
|
background: linear-gradient(135deg, #ff0000, #cc0000); |
|
|
color: #fff; |
|
|
box-shadow: 0 5px 20px rgba(255,0,0,0.4); |
|
|
} |
|
|
|
|
|
|
|
|
.stats-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 15px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.stat-card { |
|
|
background: linear-gradient(135deg, rgba(0,255,255,0.1), rgba(255,0,255,0.1)); |
|
|
border-radius: 15px; |
|
|
padding: 20px; |
|
|
text-align: center; |
|
|
border: 1px solid var(--glass-border); |
|
|
} |
|
|
|
|
|
.stat-value { |
|
|
font-size: 2rem; |
|
|
font-weight: 700; |
|
|
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink)); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
.stat-label { |
|
|
font-size: 0.9rem; |
|
|
color: rgba(255,255,255,0.7); |
|
|
text-transform: uppercase; |
|
|
} |
|
|
|
|
|
|
|
|
.loading-spinner { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
border: 4px solid rgba(0,255,255,0.2); |
|
|
border-top-color: var(--neon-cyan); |
|
|
border-radius: 50%; |
|
|
animation: spin 1s linear infinite; |
|
|
margin: 20px auto; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
|
|
|
.toast { |
|
|
position: fixed; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
background: var(--glass-bg); |
|
|
backdrop-filter: blur(20px); |
|
|
border: 1px solid var(--neon-cyan); |
|
|
border-radius: 15px; |
|
|
padding: 20px; |
|
|
min-width: 300px; |
|
|
z-index: 9999; |
|
|
animation: slideInRight 0.5s ease-out; |
|
|
box-shadow: 0 10px 40px rgba(0,255,255,0.4); |
|
|
} |
|
|
|
|
|
@keyframes slideInRight { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateX(100px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 10px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: rgba(0,0,0,0.3); |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink)); |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
|
|
|
.agent-status { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
padding: 15px; |
|
|
background: rgba(0,255,0,0.1); |
|
|
border-radius: 12px; |
|
|
border: 1px solid var(--neon-green); |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.agent-avatar { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink)); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.5rem; |
|
|
animation: rotate-slow 10s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes rotate-slow { |
|
|
from { transform: rotate(0deg); } |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.crypto-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); |
|
|
gap: 10px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.crypto-btn { |
|
|
background: rgba(0,0,0,0.5); |
|
|
border: 2px solid var(--glass-border); |
|
|
border-radius: 12px; |
|
|
padding: 15px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.crypto-btn:hover { |
|
|
border-color: var(--neon-cyan); |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.crypto-btn.active { |
|
|
border-color: var(--neon-green); |
|
|
background: rgba(0,255,0,0.1); |
|
|
} |
|
|
|
|
|
.crypto-symbol { |
|
|
font-size: 1.2rem; |
|
|
font-weight: 700; |
|
|
display: block; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
.crypto-price { |
|
|
font-size: 0.9rem; |
|
|
color: var(--neon-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="animated-bg"> |
|
|
<div class="particle" style="top: 10%; left: 20%; animation-delay: 0s;"></div> |
|
|
<div class="particle" style="top: 30%; left: 70%; animation-delay: 2s;"></div> |
|
|
<div class="particle" style="top: 60%; left: 40%; animation-delay: 4s;"></div> |
|
|
<div class="particle" style="top: 80%; left: 80%; animation-delay: 6s;"></div> |
|
|
<div class="particle" style="top: 50%; left: 10%; animation-delay: 8s;"></div> |
|
|
</div> |
|
|
|
|
|
<div class="trading-container"> |
|
|
|
|
|
<div class="trading-header"> |
|
|
<div class="header-content"> |
|
|
<div class="header-title"> |
|
|
<h1>🔥 HTS Trading System</h1> |
|
|
<div class="live-indicator"> |
|
|
<div class="live-dot"></div> |
|
|
<span>LIVE MARKET</span> |
|
|
</div> |
|
|
</div> |
|
|
<div style="display: flex; gap: 15px; align-items: center;"> |
|
|
<div style="text-align: right;"> |
|
|
<div style="font-size: 0.9rem; color: rgba(255,255,255,0.7);">Last Update</div> |
|
|
<div id="last-update" style="font-weight: 700; color: var(--neon-cyan);">--:--:--</div> |
|
|
</div> |
|
|
<button class="btn btn-primary" id="refresh-btn"> |
|
|
<span style="position: relative; z-index: 1;">🔄 Refresh</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="trading-grid"> |
|
|
|
|
|
<div> |
|
|
|
|
|
<div class="glass-card"> |
|
|
<div class="card-header"> |
|
|
<div class="card-title">🤖 AI Agent</div> |
|
|
</div> |
|
|
<div class="agent-status"> |
|
|
<div class="agent-avatar">🧠</div> |
|
|
<div> |
|
|
<div style="font-weight: 700;">Status: <span id="agent-status">Active</span></div> |
|
|
<div style="font-size: 0.8rem; color: rgba(255,255,255,0.7);">Monitoring <span id="agent-pairs">0</span> pairs</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="btn btn-success" id="start-agent-btn" style="width: 100%; margin-bottom: 10px;"> |
|
|
<span style="position: relative; z-index: 1;">▶️ Start Agent</span> |
|
|
</button> |
|
|
<button class="btn btn-danger" id="stop-agent-btn" style="width: 100%; display: none;"> |
|
|
<span style="position: relative; z-index: 1;">⏹️ Stop Agent</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-card" style="margin-top: 20px;"> |
|
|
<div class="card-header"> |
|
|
<div class="card-title">💰 Select Asset</div> |
|
|
</div> |
|
|
<div class="crypto-grid" id="crypto-grid"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-card" style="margin-top: 20px;"> |
|
|
<div class="card-header"> |
|
|
<div class="card-title">📊 Statistics</div> |
|
|
</div> |
|
|
<div class="stats-grid"> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-value" id="total-signals">0</div> |
|
|
<div class="stat-label">Signals</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-value" id="win-rate">0%</div> |
|
|
<div class="stat-label">Win Rate</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="glass-card"> |
|
|
<div class="card-header"> |
|
|
<div class="card-title">📈 Live Chart</div> |
|
|
<div id="current-price" style="font-size: 1.5rem; font-weight: 700; color: var(--neon-green);">$0.00</div> |
|
|
</div> |
|
|
<div id="tradingview-chart"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-card" style="margin-top: 20px;"> |
|
|
<div class="card-header"> |
|
|
<div class="card-title">🎯 Select Strategy</div> |
|
|
</div> |
|
|
<div class="strategy-grid" id="strategy-grid"></div> |
|
|
<button class="btn btn-primary" id="analyze-btn" style="width: 100%; margin-top: 15px;"> |
|
|
<span style="position: relative; z-index: 1;">⚡ ANALYZE NOW</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="glass-card" style="height: 100%; max-height: 1000px; overflow-y: auto;"> |
|
|
<div class="card-header"> |
|
|
<div class="card-title">🎯 Live Signals</div> |
|
|
<div style="font-size: 0.9rem; color: rgba(255,255,255,0.7);">Real-time</div> |
|
|
</div> |
|
|
<div id="signals-container"> |
|
|
<div style="text-align: center; padding: 40px; color: rgba(255,255,255,0.5);"> |
|
|
<div style="font-size: 3rem; margin-bottom: 15px;">📡</div> |
|
|
<div>Waiting for signals...</div> |
|
|
<div style="font-size: 0.8rem; margin-top: 10px;">Start the agent to begin monitoring</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="toast-container"></div> |
|
|
|
|
|
|
|
|
<script type="module" src="./trading-assistant-enhanced.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
|
|
|
