|
|
<!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 Assistant - Real Data</title> |
|
|
|
|
|
|
|
|
<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@400;500;600;700&display=swap" rel="stylesheet"> |
|
|
|
|
|
|
|
|
<script src="https://s3.tradingview.com/tv.js"></script> |
|
|
|
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
:root { |
|
|
|
|
|
--primary: #3b82f6; |
|
|
--primary-light: #60a5fa; |
|
|
--primary-dark: #2563eb; |
|
|
--secondary: #8b5cf6; |
|
|
--accent: #06b6d4; |
|
|
--success: #10b981; |
|
|
--danger: #ef4444; |
|
|
--warning: #f59e0b; |
|
|
--info: #3b82f6; |
|
|
|
|
|
|
|
|
--bg-primary: #0a0e1a; |
|
|
--bg-secondary: #111827; |
|
|
--bg-tertiary: #1f2937; |
|
|
--bg-card: #1e293b; |
|
|
|
|
|
|
|
|
--text-primary: #ffffff; |
|
|
--text-secondary: #e2e8f0; |
|
|
--text-muted: #94a3b8; |
|
|
|
|
|
|
|
|
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15); |
|
|
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.25); |
|
|
--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.35); |
|
|
--shadow-xl: 0 16px 80px rgba(0, 0, 0, 0.45); |
|
|
|
|
|
|
|
|
--radius-sm: 10px; |
|
|
--radius-md: 14px; |
|
|
--radius-lg: 18px; |
|
|
--radius-xl: 24px; |
|
|
--radius-full: 9999px; |
|
|
|
|
|
|
|
|
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); |
|
|
--transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1); |
|
|
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); |
|
|
|
|
|
|
|
|
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; |
|
|
--font-mono: 'JetBrains Mono', 'Courier New', monospace; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: var(--font-primary); |
|
|
background: var(--bg-primary); |
|
|
color: var(--text-primary); |
|
|
line-height: 1.6; |
|
|
overflow-x: hidden; |
|
|
font-size: 16px; |
|
|
-webkit-font-smoothing: antialiased; |
|
|
-moz-osx-font-smoothing: grayscale; |
|
|
} |
|
|
|
|
|
|
|
|
body::before { |
|
|
content: ''; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: |
|
|
radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.2) 0%, transparent 50%), |
|
|
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.2) 0%, transparent 50%), |
|
|
radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.15) 0%, transparent 50%); |
|
|
z-index: -1; |
|
|
animation: backgroundPulse 20s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes backgroundPulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.7; } |
|
|
} |
|
|
|
|
|
|
|
|
.container { |
|
|
max-width: 1920px; |
|
|
margin: 0 auto; |
|
|
padding: 28px; |
|
|
} |
|
|
|
|
|
|
|
|
.header { |
|
|
background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)); |
|
|
backdrop-filter: blur(30px) saturate(180%); |
|
|
border: 2px solid rgba(59, 130, 246, 0.2); |
|
|
border-radius: var(--radius-xl); |
|
|
padding: 36px 40px; |
|
|
margin-bottom: 28px; |
|
|
box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255, 255, 255, 0.05); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.header::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: linear-gradient( |
|
|
45deg, |
|
|
transparent, |
|
|
rgba(59, 130, 246, 0.15), |
|
|
transparent |
|
|
); |
|
|
animation: headerShine 4s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes headerShine { |
|
|
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: 28px; |
|
|
} |
|
|
|
|
|
.header-left { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 28px; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 16px; |
|
|
} |
|
|
|
|
|
.logo-icon { |
|
|
width: 56px; |
|
|
height: 56px; |
|
|
background: linear-gradient(135deg, var(--primary), var(--accent)); |
|
|
border-radius: var(--radius-md); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 6px 24px rgba(59, 130, 246, 0.5); |
|
|
animation: logoFloat 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes logoFloat { |
|
|
0%, 100% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-8px); } |
|
|
} |
|
|
|
|
|
.logo-icon svg { |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
stroke: white; |
|
|
stroke-width: 2.5; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.logo-text { |
|
|
font-size: 2rem; |
|
|
font-weight: 900; |
|
|
background: linear-gradient(135deg, var(--primary-light), var(--accent)); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
letter-spacing: -1px; |
|
|
line-height: 1.2; |
|
|
} |
|
|
|
|
|
.logo-subtitle { |
|
|
font-size: 0.875rem; |
|
|
color: var(--text-muted); |
|
|
font-weight: 600; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 2px; |
|
|
margin-top: 4px; |
|
|
} |
|
|
|
|
|
.live-indicator { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 12px; |
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.15)); |
|
|
border: 2px solid var(--success); |
|
|
padding: 12px 24px; |
|
|
border-radius: var(--radius-full); |
|
|
box-shadow: 0 0 30px rgba(16, 185, 129, 0.3); |
|
|
} |
|
|
|
|
|
.live-dot { |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
background: var(--success); |
|
|
border-radius: 50%; |
|
|
box-shadow: 0 0 15px var(--success); |
|
|
animation: livePulse 2s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes livePulse { |
|
|
0%, 100% { |
|
|
transform: scale(1); |
|
|
opacity: 1; |
|
|
} |
|
|
50% { |
|
|
transform: scale(1.4); |
|
|
opacity: 0.6; |
|
|
} |
|
|
} |
|
|
|
|
|
.live-text { |
|
|
font-weight: 800; |
|
|
font-size: 1rem; |
|
|
color: var(--success); |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 2px; |
|
|
} |
|
|
|
|
|
.header-stats { |
|
|
display: flex; |
|
|
gap: 40px; |
|
|
} |
|
|
|
|
|
.stat { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
gap: 6px; |
|
|
} |
|
|
|
|
|
.stat-icon { |
|
|
width: 28px; |
|
|
height: 28px; |
|
|
stroke: var(--accent); |
|
|
stroke-width: 2.5; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.stat-value { |
|
|
font-size: 1.75rem; |
|
|
font-weight: 900; |
|
|
font-family: var(--font-mono); |
|
|
background: linear-gradient(135deg, var(--primary-light), var(--accent)); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
line-height: 1; |
|
|
} |
|
|
|
|
|
.stat-label { |
|
|
font-size: 0.8125rem; |
|
|
color: var(--text-muted); |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
|
|
|
.main-grid { |
|
|
display: grid; |
|
|
grid-template-columns: 360px 1fr 420px; |
|
|
gap: 28px; |
|
|
} |
|
|
|
|
|
@media (max-width: 1400px) { |
|
|
.main-grid { |
|
|
grid-template-columns: 320px 1fr 360px; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 1200px) { |
|
|
.main-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.card { |
|
|
background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)); |
|
|
backdrop-filter: blur(30px) saturate(180%); |
|
|
border: 2px solid rgba(59, 130, 246, 0.15); |
|
|
border-radius: var(--radius-xl); |
|
|
padding: 32px; |
|
|
box-shadow: var(--shadow-lg); |
|
|
transition: all var(--transition-base); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 3px; |
|
|
background: linear-gradient(90deg, transparent, var(--primary), transparent); |
|
|
opacity: 0; |
|
|
transition: opacity var(--transition-base); |
|
|
} |
|
|
|
|
|
.card:hover::before { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.card:hover { |
|
|
border-color: rgba(59, 130, 246, 0.4); |
|
|
box-shadow: var(--shadow-xl), 0 0 60px rgba(59, 130, 246, 0.2); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.card-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 28px; |
|
|
padding-bottom: 24px; |
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.08); |
|
|
} |
|
|
|
|
|
.card-title { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 14px; |
|
|
font-size: 1.375rem; |
|
|
font-weight: 900; |
|
|
color: var(--text-primary); |
|
|
letter-spacing: -0.5px; |
|
|
} |
|
|
|
|
|
.card-title-icon { |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
stroke: var(--primary-light); |
|
|
stroke-width: 2.5; |
|
|
fill: none; |
|
|
animation: iconFloat 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes iconFloat { |
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); } |
|
|
50% { transform: translateY(-4px) rotate(5deg); } |
|
|
} |
|
|
|
|
|
|
|
|
.crypto-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 18px; |
|
|
} |
|
|
|
|
|
.crypto-card { |
|
|
background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary)); |
|
|
border: 2px solid rgba(255, 255, 255, 0.08); |
|
|
border-radius: var(--radius-lg); |
|
|
padding: 24px; |
|
|
cursor: pointer; |
|
|
transition: all var(--transition-base); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.crypto-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.15), transparent); |
|
|
transition: left var(--transition-slow); |
|
|
} |
|
|
|
|
|
.crypto-card:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.crypto-card:hover { |
|
|
border-color: var(--primary); |
|
|
transform: translateY(-5px) scale(1.03); |
|
|
box-shadow: 0 16px 40px rgba(59, 130, 246, 0.4); |
|
|
} |
|
|
|
|
|
.crypto-card.active { |
|
|
border-color: var(--accent); |
|
|
background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.2)); |
|
|
box-shadow: 0 0 40px rgba(6, 182, 212, 0.5), inset 0 0 30px rgba(6, 182, 212, 0.15); |
|
|
} |
|
|
|
|
|
.crypto-card.active::after { |
|
|
content: '✓'; |
|
|
position: absolute; |
|
|
top: 14px; |
|
|
right: 14px; |
|
|
width: 28px; |
|
|
height: 28px; |
|
|
background: var(--success); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: 900; |
|
|
font-size: 0.875rem; |
|
|
color: white; |
|
|
box-shadow: 0 0 20px var(--success); |
|
|
} |
|
|
|
|
|
.crypto-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 14px; |
|
|
margin-bottom: 16px; |
|
|
} |
|
|
|
|
|
.crypto-icon { |
|
|
width: 48px; |
|
|
height: 48px; |
|
|
background: linear-gradient(135deg, var(--primary), var(--secondary)); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.5rem; |
|
|
font-weight: 900; |
|
|
color: white; |
|
|
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4); |
|
|
} |
|
|
|
|
|
.crypto-info { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.crypto-symbol { |
|
|
font-size: 1.25rem; |
|
|
font-weight: 900; |
|
|
color: var(--text-primary); |
|
|
margin-bottom: 2px; |
|
|
font-family: var(--font-mono); |
|
|
letter-spacing: -0.5px; |
|
|
} |
|
|
|
|
|
.crypto-name { |
|
|
font-size: 0.8125rem; |
|
|
color: var(--text-muted); |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.crypto-price { |
|
|
font-size: 1.5rem; |
|
|
font-weight: 900; |
|
|
color: var(--accent); |
|
|
margin-bottom: 10px; |
|
|
font-family: var(--font-mono); |
|
|
letter-spacing: -0.5px; |
|
|
} |
|
|
|
|
|
.crypto-change { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 6px; |
|
|
font-size: 1rem; |
|
|
font-weight: 800; |
|
|
padding: 6px 14px; |
|
|
border-radius: var(--radius-sm); |
|
|
font-family: var(--font-mono); |
|
|
} |
|
|
|
|
|
.crypto-change.positive { |
|
|
background: rgba(16, 185, 129, 0.2); |
|
|
color: var(--success); |
|
|
border: 2px solid var(--success); |
|
|
} |
|
|
|
|
|
.crypto-change.negative { |
|
|
background: rgba(239, 68, 68, 0.2); |
|
|
color: var(--danger); |
|
|
border: 2px solid var(--danger); |
|
|
} |
|
|
|
|
|
.crypto-change svg { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
stroke-width: 3.5; |
|
|
} |
|
|
|
|
|
|
|
|
.strategy-grid { |
|
|
display: grid; |
|
|
gap: 18px; |
|
|
} |
|
|
|
|
|
.strategy-card { |
|
|
background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary)); |
|
|
border: 2px solid rgba(255, 255, 255, 0.08); |
|
|
border-radius: var(--radius-lg); |
|
|
padding: 28px; |
|
|
cursor: pointer; |
|
|
transition: all var(--transition-base); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.strategy-card::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
right: 0; |
|
|
width: 140px; |
|
|
height: 140px; |
|
|
background: radial-gradient(circle, rgba(59, 130, 246, 0.2), transparent); |
|
|
transform: translate(50%, -50%); |
|
|
transition: all var(--transition-base); |
|
|
} |
|
|
|
|
|
.strategy-card:hover::after { |
|
|
width: 200px; |
|
|
height: 200px; |
|
|
} |
|
|
|
|
|
.strategy-card:hover { |
|
|
border-color: var(--primary); |
|
|
transform: translateX(8px); |
|
|
box-shadow: -10px 0 30px rgba(59, 130, 246, 0.4); |
|
|
} |
|
|
|
|
|
.strategy-card.active { |
|
|
border-color: var(--accent); |
|
|
background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(59, 130, 246, 0.25)); |
|
|
box-shadow: -10px 0 40px rgba(6, 182, 212, 0.5); |
|
|
} |
|
|
|
|
|
.strategy-card.hts { |
|
|
border-color: var(--secondary); |
|
|
background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(59, 130, 246, 0.25)); |
|
|
} |
|
|
|
|
|
.strategy-card.hts.active { |
|
|
box-shadow: -10px 0 40px rgba(139, 92, 246, 0.6); |
|
|
} |
|
|
|
|
|
.strategy-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: flex-start; |
|
|
margin-bottom: 18px; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.strategy-info { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.strategy-name { |
|
|
font-size: 1.25rem; |
|
|
font-weight: 900; |
|
|
color: var(--text-primary); |
|
|
margin-bottom: 10px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
letter-spacing: -0.5px; |
|
|
} |
|
|
|
|
|
.strategy-name svg { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
stroke: var(--primary-light); |
|
|
stroke-width: 2.5; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.strategy-desc { |
|
|
font-size: 0.9375rem; |
|
|
color: var(--text-secondary); |
|
|
line-height: 1.7; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.strategy-badge { |
|
|
padding: 8px 18px; |
|
|
border-radius: var(--radius-full); |
|
|
font-size: 0.75rem; |
|
|
font-weight: 900; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
.badge-premium { |
|
|
background: linear-gradient(135deg, var(--secondary), var(--primary)); |
|
|
color: white; |
|
|
box-shadow: 0 6px 16px rgba(139, 92, 246, 0.5); |
|
|
} |
|
|
|
|
|
.badge-standard { |
|
|
background: rgba(59, 130, 246, 0.25); |
|
|
color: var(--primary-light); |
|
|
border: 2px solid var(--primary); |
|
|
} |
|
|
|
|
|
.strategy-stats { |
|
|
display: flex; |
|
|
gap: 24px; |
|
|
margin-top: 18px; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.strategy-stat { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
font-size: 0.9375rem; |
|
|
color: var(--text-secondary); |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
.strategy-stat svg { |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
stroke: var(--accent); |
|
|
stroke-width: 2.5; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
|
|
|
.agent-status { |
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2)); |
|
|
border: 2px solid var(--success); |
|
|
border-radius: var(--radius-lg); |
|
|
padding: 24px; |
|
|
margin-bottom: 28px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 20px; |
|
|
box-shadow: 0 0 30px rgba(16, 185, 129, 0.3); |
|
|
} |
|
|
|
|
|
.agent-avatar { |
|
|
width: 64px; |
|
|
height: 64px; |
|
|
background: linear-gradient(135deg, var(--primary), var(--accent)); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5); |
|
|
animation: agentRotate 10s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes agentRotate { |
|
|
from { transform: rotate(0deg); } |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.agent-avatar svg { |
|
|
width: 36px; |
|
|
height: 36px; |
|
|
stroke: white; |
|
|
stroke-width: 2.5; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.agent-info { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.agent-name { |
|
|
font-weight: 900; |
|
|
font-size: 1.25rem; |
|
|
color: var(--text-primary); |
|
|
margin-bottom: 6px; |
|
|
letter-spacing: -0.5px; |
|
|
} |
|
|
|
|
|
.agent-desc { |
|
|
font-size: 0.9375rem; |
|
|
color: var(--text-secondary); |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
|
|
|
.btn { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 12px; |
|
|
padding: 16px 32px; |
|
|
border: none; |
|
|
border-radius: var(--radius-md); |
|
|
font-weight: 800; |
|
|
font-size: 1rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
cursor: pointer; |
|
|
transition: all var(--transition-base); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
font-family: var(--font-primary); |
|
|
} |
|
|
|
|
|
.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: 400px; |
|
|
height: 400px; |
|
|
} |
|
|
|
|
|
.btn svg { |
|
|
width: 22px; |
|
|
height: 22px; |
|
|
stroke-width: 2.5; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.btn span { |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: linear-gradient(135deg, var(--primary), var(--accent)); |
|
|
color: white; |
|
|
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
box-shadow: 0 10px 30px rgba(59, 130, 246, 0.6); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.btn-success { |
|
|
background: linear-gradient(135deg, var(--success), #059669); |
|
|
color: white; |
|
|
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5); |
|
|
} |
|
|
|
|
|
.btn-success:hover { |
|
|
box-shadow: 0 10px 30px rgba(16, 185, 129, 0.6); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.btn-danger { |
|
|
background: linear-gradient(135deg, var(--danger), #dc2626); |
|
|
color: white; |
|
|
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5); |
|
|
} |
|
|
|
|
|
.btn-full { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
|
|
|
#chart-container { |
|
|
height: 650px; |
|
|
border-radius: var(--radius-lg); |
|
|
overflow: hidden; |
|
|
background: var(--bg-primary); |
|
|
border: 2px solid rgba(59, 130, 246, 0.15); |
|
|
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
|
|
|
.signals-container { |
|
|
max-height: 950px; |
|
|
overflow-y: auto; |
|
|
padding-right: 10px; |
|
|
} |
|
|
|
|
|
.signals-container::-webkit-scrollbar { |
|
|
width: 10px; |
|
|
} |
|
|
|
|
|
.signals-container::-webkit-scrollbar-track { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 5px; |
|
|
} |
|
|
|
|
|
.signals-container::-webkit-scrollbar-thumb { |
|
|
background: linear-gradient(135deg, var(--primary), var(--accent)); |
|
|
border-radius: 5px; |
|
|
} |
|
|
|
|
|
.signal-card { |
|
|
background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary)); |
|
|
border-left: 5px solid var(--primary); |
|
|
border-radius: var(--radius-lg); |
|
|
padding: 28px; |
|
|
margin-bottom: 22px; |
|
|
box-shadow: var(--shadow-md); |
|
|
animation: signalSlideIn 0.5s ease-out; |
|
|
transition: all var(--transition-base); |
|
|
} |
|
|
|
|
|
@keyframes signalSlideIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateX(40px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.signal-card:hover { |
|
|
box-shadow: var(--shadow-lg); |
|
|
transform: translateX(-6px); |
|
|
} |
|
|
|
|
|
.signal-card.buy { |
|
|
border-left-color: var(--success); |
|
|
background: linear-gradient(90deg, rgba(16, 185, 129, 0.15), var(--bg-secondary)); |
|
|
} |
|
|
|
|
|
.signal-card.sell { |
|
|
border-left-color: var(--danger); |
|
|
background: linear-gradient(90deg, rgba(239, 68, 68, 0.15), var(--bg-secondary)); |
|
|
} |
|
|
|
|
|
.signal-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 24px; |
|
|
} |
|
|
|
|
|
.signal-left { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 18px; |
|
|
} |
|
|
|
|
|
.signal-badge { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
padding: 10px 22px; |
|
|
border-radius: var(--radius-full); |
|
|
font-weight: 900; |
|
|
font-size: 1.0625rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
|
|
|
.signal-badge svg { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
stroke-width: 3.5; |
|
|
} |
|
|
|
|
|
.signal-badge.buy { |
|
|
background: rgba(16, 185, 129, 0.25); |
|
|
color: var(--success); |
|
|
border: 2px solid var(--success); |
|
|
box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); |
|
|
} |
|
|
|
|
|
.signal-badge.sell { |
|
|
background: rgba(239, 68, 68, 0.25); |
|
|
color: var(--danger); |
|
|
border: 2px solid var(--danger); |
|
|
box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); |
|
|
} |
|
|
|
|
|
.signal-symbol { |
|
|
font-size: 1.5rem; |
|
|
font-weight: 900; |
|
|
color: var(--text-primary); |
|
|
font-family: var(--font-mono); |
|
|
letter-spacing: -0.5px; |
|
|
} |
|
|
|
|
|
.signal-time { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
font-size: 0.9375rem; |
|
|
color: var(--text-muted); |
|
|
font-weight: 700; |
|
|
font-family: var(--font-mono); |
|
|
} |
|
|
|
|
|
.signal-time svg { |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
stroke: var(--text-muted); |
|
|
stroke-width: 2.5; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.signal-body { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 18px; |
|
|
} |
|
|
|
|
|
.signal-item { |
|
|
background: rgba(0, 0, 0, 0.3); |
|
|
border: 2px solid rgba(255, 255, 255, 0.08); |
|
|
border-radius: var(--radius-md); |
|
|
padding: 20px; |
|
|
transition: all var(--transition-base); |
|
|
} |
|
|
|
|
|
.signal-item:hover { |
|
|
border-color: rgba(255, 255, 255, 0.15); |
|
|
background: rgba(0, 0, 0, 0.4); |
|
|
} |
|
|
|
|
|
.signal-item-label { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
font-size: 0.9375rem; |
|
|
color: var(--text-muted); |
|
|
margin-bottom: 10px; |
|
|
font-weight: 700; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.5px; |
|
|
} |
|
|
|
|
|
.signal-item-label svg { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
stroke: var(--text-muted); |
|
|
stroke-width: 2.5; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.signal-item-value { |
|
|
font-size: 1.5rem; |
|
|
font-weight: 900; |
|
|
font-family: var(--font-mono); |
|
|
letter-spacing: -0.5px; |
|
|
} |
|
|
|
|
|
.value-price { |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
.value-confidence { |
|
|
color: var(--success); |
|
|
} |
|
|
|
|
|
.value-stop { |
|
|
color: var(--danger); |
|
|
} |
|
|
|
|
|
.value-target { |
|
|
color: var(--success); |
|
|
} |
|
|
|
|
|
|
|
|
.empty-state { |
|
|
text-align: center; |
|
|
padding: 100px 20px; |
|
|
} |
|
|
|
|
|
.empty-icon { |
|
|
width: 100px; |
|
|
height: 100px; |
|
|
margin: 0 auto 32px; |
|
|
stroke: var(--text-muted); |
|
|
stroke-width: 1.5; |
|
|
fill: none; |
|
|
opacity: 0.5; |
|
|
animation: emptyFloat 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes emptyFloat { |
|
|
0%, 100% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-12px); } |
|
|
} |
|
|
|
|
|
.empty-text { |
|
|
font-size: 1.25rem; |
|
|
font-weight: 800; |
|
|
color: var(--text-secondary); |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.empty-subtext { |
|
|
font-size: 1rem; |
|
|
color: var(--text-muted); |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
|
|
|
.toast { |
|
|
position: fixed; |
|
|
top: 28px; |
|
|
right: 28px; |
|
|
background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)); |
|
|
backdrop-filter: blur(30px); |
|
|
border: 2px solid rgba(59, 130, 246, 0.3); |
|
|
border-radius: var(--radius-lg); |
|
|
padding: 24px 28px; |
|
|
min-width: 360px; |
|
|
box-shadow: var(--shadow-xl); |
|
|
z-index: 10000; |
|
|
animation: toastSlideIn 0.3s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes toastSlideIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateX(120px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.toast-content { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 16px; |
|
|
} |
|
|
|
|
|
.toast-icon { |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
stroke-width: 2.5; |
|
|
flex-shrink: 0; |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
.toast-message { |
|
|
flex: 1; |
|
|
font-weight: 700; |
|
|
font-size: 1.0625rem; |
|
|
} |
|
|
|
|
|
|
|
|
.loading { |
|
|
display: inline-block; |
|
|
width: 22px; |
|
|
height: 22px; |
|
|
border: 3px solid rgba(255, 255, 255, 0.3); |
|
|
border-top-color: white; |
|
|
border-radius: 50%; |
|
|
animation: loadingSpin 0.8s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes loadingSpin { |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
|
|
|
.modal-overlay { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.85); |
|
|
backdrop-filter: blur(15px); |
|
|
z-index: 10000; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
padding: 24px; |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
transition: opacity var(--transition-base); |
|
|
} |
|
|
|
|
|
.modal-overlay.active { |
|
|
opacity: 1; |
|
|
pointer-events: all; |
|
|
} |
|
|
|
|
|
.modal { |
|
|
background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)); |
|
|
backdrop-filter: blur(40px) saturate(180%); |
|
|
border: 2px solid rgba(59, 130, 246, 0.3); |
|
|
border-radius: var(--radius-xl); |
|
|
max-width: 900px; |
|
|
width: 100%; |
|
|
max-height: 90vh; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 30px 120px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05); |
|
|
transform: scale(0.9) translateY(40px); |
|
|
opacity: 0; |
|
|
transition: all var(--transition-slow); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.modal-overlay.active .modal { |
|
|
transform: scale(1) translateY(0); |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.modal::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 4px; |
|
|
background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary)); |
|
|
background-size: 200% 100%; |
|
|
animation: modalGradientShift 3s ease infinite; |
|
|
} |
|
|
|
|
|
@keyframes modalGradientShift { |
|
|
0%, 100% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
} |
|
|
|
|
|
.modal-header { |
|
|
padding: 36px 40px; |
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.08); |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08)); |
|
|
} |
|
|
|
|
|
.modal-title { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 18px; |
|
|
font-size: 2rem; |
|
|
font-weight: 900; |
|
|
background: linear-gradient(135deg, var(--primary-light), var(--accent)); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
letter-spacing: -1px; |
|
|
} |
|
|
|
|
|
.modal-title-icon { |
|
|
width: 48px; |
|
|
height: 48px; |
|
|
background: linear-gradient(135deg, var(--primary), var(--accent)); |
|
|
border-radius: var(--radius-md); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5); |
|
|
animation: modalIconPulse 2s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes modalIconPulse { |
|
|
0%, 100% { transform: scale(1); } |
|
|
50% { transform: scale(1.12); } |
|
|
} |
|
|
|
|
|
.modal-title-icon svg { |
|
|
width: 28px; |
|
|
height: 28px; |
|
|
stroke: white; |
|
|
stroke-width: 2.5; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.modal-close { |
|
|
width: 48px; |
|
|
height: 48px; |
|
|
background: rgba(239, 68, 68, 0.15); |
|
|
border: 2px solid rgba(239, 68, 68, 0.4); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
transition: all var(--transition-base); |
|
|
} |
|
|
|
|
|
.modal-close:hover { |
|
|
background: rgba(239, 68, 68, 0.25); |
|
|
border-color: var(--danger); |
|
|
transform: rotate(90deg); |
|
|
} |
|
|
|
|
|
.modal-close svg { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
stroke: var(--danger); |
|
|
stroke-width: 2.5; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.modal-body { |
|
|
padding: 36px 40px; |
|
|
max-height: calc(90vh - 250px); |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.modal-body::-webkit-scrollbar { |
|
|
width: 10px; |
|
|
} |
|
|
|
|
|
.modal-body::-webkit-scrollbar-track { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 5px; |
|
|
} |
|
|
|
|
|
.modal-body::-webkit-scrollbar-thumb { |
|
|
background: linear-gradient(135deg, var(--primary), var(--accent)); |
|
|
border-radius: 5px; |
|
|
} |
|
|
|
|
|
.modal-footer { |
|
|
padding: 28px 40px; |
|
|
border-top: 2px solid rgba(255, 255, 255, 0.08); |
|
|
display: flex; |
|
|
justify-content: flex-end; |
|
|
gap: 18px; |
|
|
background: rgba(0, 0, 0, 0.25); |
|
|
} |
|
|
|
|
|
.info-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 24px; |
|
|
margin-bottom: 28px; |
|
|
} |
|
|
|
|
|
.info-item { |
|
|
background: rgba(0, 0, 0, 0.35); |
|
|
border: 2px solid rgba(255, 255, 255, 0.08); |
|
|
border-radius: var(--radius-md); |
|
|
padding: 24px; |
|
|
transition: all var(--transition-base); |
|
|
} |
|
|
|
|
|
.info-item:hover { |
|
|
border-color: rgba(59, 130, 246, 0.4); |
|
|
background: rgba(59, 130, 246, 0.08); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.info-label { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
font-size: 0.9375rem; |
|
|
color: var(--text-muted); |
|
|
margin-bottom: 10px; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
font-weight: 800; |
|
|
} |
|
|
|
|
|
.info-label svg { |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
stroke: var(--accent); |
|
|
stroke-width: 2.5; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.info-value { |
|
|
font-size: 1.75rem; |
|
|
font-weight: 900; |
|
|
color: var(--text-primary); |
|
|
font-family: var(--font-mono); |
|
|
letter-spacing: -0.5px; |
|
|
} |
|
|
|
|
|
.info-value.success { |
|
|
color: var(--success); |
|
|
} |
|
|
|
|
|
.info-value.danger { |
|
|
color: var(--danger); |
|
|
} |
|
|
|
|
|
.info-value.primary { |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
.details-list { |
|
|
list-style: none; |
|
|
padding: 0; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.detail-item { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 20px; |
|
|
background: rgba(0, 0, 0, 0.25); |
|
|
border: 2px solid rgba(255, 255, 255, 0.08); |
|
|
border-radius: var(--radius-md); |
|
|
margin-bottom: 14px; |
|
|
transition: all var(--transition-base); |
|
|
} |
|
|
|
|
|
.detail-item:hover { |
|
|
background: rgba(59, 130, 246, 0.08); |
|
|
border-color: rgba(59, 130, 246, 0.4); |
|
|
} |
|
|
|
|
|
.detail-label { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 12px; |
|
|
font-weight: 700; |
|
|
color: var(--text-secondary); |
|
|
font-size: 1.0625rem; |
|
|
} |
|
|
|
|
|
.detail-label svg { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
stroke: var(--primary-light); |
|
|
stroke-width: 2.5; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.detail-value { |
|
|
font-weight: 900; |
|
|
color: var(--text-primary); |
|
|
font-size: 1.125rem; |
|
|
font-family: var(--font-mono); |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.container { |
|
|
padding: 18px; |
|
|
} |
|
|
|
|
|
.header { |
|
|
padding: 24px; |
|
|
} |
|
|
|
|
|
.header-content { |
|
|
flex-direction: column; |
|
|
align-items: flex-start; |
|
|
} |
|
|
|
|
|
.crypto-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.signal-body { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.modal { |
|
|
max-width: 100%; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.info-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.modal-header { |
|
|
padding: 24px; |
|
|
} |
|
|
|
|
|
.modal-body { |
|
|
padding: 24px; |
|
|
} |
|
|
|
|
|
.modal-footer { |
|
|
padding: 20px 24px; |
|
|
} |
|
|
|
|
|
.logo-text { |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
.stat-value { |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
} |
|
|
</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="container"> |
|
|
|
|
|
<div class="header"> |
|
|
<div class="header-content"> |
|
|
<div class="header-left"> |
|
|
<div class="logo"> |
|
|
<div class="logo-icon"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<path d="M13 2L3 14h8l-1 8 10-12h-8l1-8z"/> |
|
|
</svg> |
|
|
</div> |
|
|
<div> |
|
|
<div class="logo-text">TRADING PRO</div> |
|
|
<div class="logo-subtitle">Real-Time Intelligence</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="live-indicator"> |
|
|
<div class="live-dot"></div> |
|
|
<span class="live-text">LIVE DATA</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="header-stats"> |
|
|
<div class="stat"> |
|
|
<svg class="stat-icon" viewBox="0 0 24 24"> |
|
|
<circle cx="12" cy="12" r="10"/> |
|
|
<polyline points="12 6 12 12 16 14"/> |
|
|
</svg> |
|
|
<div class="stat-value" id="last-update">--:--</div> |
|
|
<div class="stat-label">Updated</div> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<svg class="stat-icon" viewBox="0 0 24 24"> |
|
|
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/> |
|
|
</svg> |
|
|
<div class="stat-value" id="total-signals">0</div> |
|
|
<div class="stat-label">Signals</div> |
|
|
</div> |
|
|
<button class="btn btn-primary" id="refresh-btn"> |
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<polyline points="23 4 23 10 17 10"/> |
|
|
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/> |
|
|
</svg> |
|
|
<span>REFRESH</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="main-grid"> |
|
|
|
|
|
<div> |
|
|
|
|
|
<div class="card"> |
|
|
<div class="card-header"> |
|
|
<div class="card-title"> |
|
|
<svg class="card-title-icon" viewBox="0 0 24 24"> |
|
|
<path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z"/> |
|
|
</svg> |
|
|
AI Agent |
|
|
</div> |
|
|
</div> |
|
|
<div class="agent-status"> |
|
|
<div class="agent-avatar"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z"/> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="agent-info"> |
|
|
<div class="agent-name" id="agent-status">Ready</div> |
|
|
<div class="agent-desc">Monitoring <span id="agent-pairs">0</span> pairs</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="btn btn-success btn-full" id="start-agent"> |
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<polygon points="5 3 19 12 5 21 5 3"/> |
|
|
</svg> |
|
|
<span>START AGENT</span> |
|
|
</button> |
|
|
<button class="btn btn-danger btn-full" id="stop-agent" style="display: none; margin-top: 14px;"> |
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<rect x="6" y="6" width="12" height="12"/> |
|
|
</svg> |
|
|
<span>STOP AGENT</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card" style="margin-top: 28px;"> |
|
|
<div class="card-header"> |
|
|
<div class="card-title"> |
|
|
<svg class="card-title-icon" viewBox="0 0 24 24"> |
|
|
<line x1="12" y1="1" x2="12" y2="23"/> |
|
|
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/> |
|
|
</svg> |
|
|
Assets |
|
|
</div> |
|
|
</div> |
|
|
<div class="crypto-grid" id="crypto-grid"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card" style="margin-top: 28px;"> |
|
|
<div class="card-header"> |
|
|
<div class="card-title"> |
|
|
<svg class="card-title-icon" viewBox="0 0 24 24"> |
|
|
<circle cx="12" cy="12" r="10"/> |
|
|
<path d="M12 16v-4"/> |
|
|
<path d="M12 8h.01"/> |
|
|
</svg> |
|
|
Strategies |
|
|
</div> |
|
|
</div> |
|
|
<div class="strategy-grid" id="strategy-grid"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="card"> |
|
|
<div class="card-header"> |
|
|
<div class="card-title"> |
|
|
<svg class="card-title-icon" viewBox="0 0 24 24"> |
|
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/> |
|
|
</svg> |
|
|
Live Chart |
|
|
</div> |
|
|
<div class="stat-value" id="current-price">$0.00</div> |
|
|
</div> |
|
|
<div id="chart-container"></div> |
|
|
</div> |
|
|
|
|
|
<button class="btn btn-primary btn-full" id="analyze-btn" style="margin-top: 28px; padding: 20px; font-size: 1.125rem;"> |
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/> |
|
|
</svg> |
|
|
<span>ANALYZE NOW</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="card" style="height: 100%;"> |
|
|
<div class="card-header"> |
|
|
<div class="card-title"> |
|
|
<svg class="card-title-icon" viewBox="0 0 24 24"> |
|
|
<circle cx="12" cy="12" r="2"/> |
|
|
<path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/> |
|
|
</svg> |
|
|
Live Signals |
|
|
</div> |
|
|
</div> |
|
|
<div class="signals-container" id="signals-container"> |
|
|
<div class="empty-state"> |
|
|
<svg class="empty-icon" viewBox="0 0 24 24"> |
|
|
<circle cx="12" cy="12" r="2"/> |
|
|
<path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/> |
|
|
</svg> |
|
|
<div class="empty-text">No signals yet</div> |
|
|
<div class="empty-subtext">Start the agent or analyze manually</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="toast-container"></div> |
|
|
|
|
|
|
|
|
<div class="modal-overlay" id="crypto-modal"> |
|
|
<div class="modal"> |
|
|
<div class="modal-header"> |
|
|
<div class="modal-title"> |
|
|
<div class="modal-title-icon"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<line x1="12" y1="1" x2="12" y2="23"/> |
|
|
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/> |
|
|
</svg> |
|
|
</div> |
|
|
<span id="crypto-modal-title">BTC Details</span> |
|
|
</div> |
|
|
<button class="modal-close" onclick="closeModal('crypto-modal')"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<line x1="18" y1="6" x2="6" y2="18"/> |
|
|
<line x1="6" y1="6" x2="18" y2="18"/> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<div class="info-grid"> |
|
|
<div class="info-item"> |
|
|
<div class="info-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<line x1="12" y1="1" x2="12" y2="23"/> |
|
|
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/> |
|
|
</svg> |
|
|
Current Price |
|
|
</div> |
|
|
<div class="info-value primary" id="modal-price">$43,250.00</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<div class="info-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/> |
|
|
</svg> |
|
|
24h Change |
|
|
</div> |
|
|
<div class="info-value success" id="modal-change">+5.23%</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<div class="info-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/> |
|
|
</svg> |
|
|
24h High |
|
|
</div> |
|
|
<div class="info-value" id="modal-high">$44,100.00</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<div class="info-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/> |
|
|
</svg> |
|
|
24h Low |
|
|
</div> |
|
|
<div class="info-value" id="modal-low">$42,800.00</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<div class="info-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<rect x="3" y="3" width="7" height="7"/> |
|
|
<rect x="14" y="3" width="7" height="7"/> |
|
|
<rect x="14" y="14" width="7" height="7"/> |
|
|
<rect x="3" y="14" width="7" height="7"/> |
|
|
</svg> |
|
|
24h Volume |
|
|
</div> |
|
|
<div class="info-value" id="modal-volume">$28.5B</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<div class="info-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<circle cx="12" cy="12" r="10"/> |
|
|
<polyline points="12 6 12 12 16 14"/> |
|
|
</svg> |
|
|
Market Cap |
|
|
</div> |
|
|
<div class="info-value" id="modal-mcap">$845B</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 style="color: var(--text-primary); margin-bottom: 18px; font-size: 1.375rem; font-weight: 900;">Technical Indicators</h3> |
|
|
<ul class="details-list"> |
|
|
<li class="detail-item"> |
|
|
<span class="detail-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<line x1="12" y1="5" x2="12" y2="19"/> |
|
|
<line x1="5" y1="12" x2="19" y2="12"/> |
|
|
</svg> |
|
|
RSI (14) |
|
|
</span> |
|
|
<span class="detail-value" id="modal-rsi">65.4</span> |
|
|
</li> |
|
|
<li class="detail-item"> |
|
|
<span class="detail-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/> |
|
|
</svg> |
|
|
MACD |
|
|
</span> |
|
|
<span class="detail-value" id="modal-macd">Bullish</span> |
|
|
</li> |
|
|
<li class="detail-item"> |
|
|
<span class="detail-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/> |
|
|
</svg> |
|
|
EMA (50) |
|
|
</span> |
|
|
<span class="detail-value" id="modal-ema">$42,100</span> |
|
|
</li> |
|
|
<li class="detail-item"> |
|
|
<span class="detail-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<circle cx="12" cy="12" r="10"/> |
|
|
</svg> |
|
|
Support Level |
|
|
</span> |
|
|
<span class="detail-value" id="modal-support">$41,500</span> |
|
|
</li> |
|
|
<li class="detail-item"> |
|
|
<span class="detail-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<circle cx="12" cy="12" r="10"/> |
|
|
</svg> |
|
|
Resistance Level |
|
|
</span> |
|
|
<span class="detail-value" id="modal-resistance">$44,800</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button class="btn btn-primary" onclick="analyzeFromModal()"> |
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/> |
|
|
</svg> |
|
|
<span>ANALYZE</span> |
|
|
</button> |
|
|
<button class="btn btn-danger" onclick="closeModal('crypto-modal')"> |
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<line x1="18" y1="6" x2="6" y2="18"/> |
|
|
<line x1="6" y1="6" x2="18" y2="18"/> |
|
|
</svg> |
|
|
<span>CLOSE</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="modal-overlay" id="strategy-modal"> |
|
|
<div class="modal"> |
|
|
<div class="modal-header"> |
|
|
<div class="modal-title"> |
|
|
<div class="modal-title-icon"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<circle cx="12" cy="12" r="10"/> |
|
|
<path d="M12 16v-4"/> |
|
|
<path d="M12 8h.01"/> |
|
|
</svg> |
|
|
</div> |
|
|
<span id="strategy-modal-title">Strategy Details</span> |
|
|
</div> |
|
|
<button class="modal-close" onclick="closeModal('strategy-modal')"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<line x1="18" y1="6" x2="6" y2="18"/> |
|
|
<line x1="6" y1="6" x2="18" y2="18"/> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<div class="info-grid"> |
|
|
<div class="info-item"> |
|
|
<div class="info-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<circle cx="12" cy="12" r="10"/> |
|
|
</svg> |
|
|
Success Rate |
|
|
</div> |
|
|
<div class="info-value success" id="modal-success-rate">85%</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<div class="info-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<circle cx="12" cy="12" r="10"/> |
|
|
<polyline points="12 6 12 12 16 14"/> |
|
|
</svg> |
|
|
Timeframe |
|
|
</div> |
|
|
<div class="info-value primary" id="modal-timeframe">1h - 4h</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<div class="info-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/> |
|
|
</svg> |
|
|
Risk Level |
|
|
</div> |
|
|
<div class="info-value" id="modal-risk">Medium</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<div class="info-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/> |
|
|
</svg> |
|
|
Avg. Return |
|
|
</div> |
|
|
<div class="info-value success" id="modal-return">+12.5%</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 style="color: var(--text-primary); margin-bottom: 18px; font-size: 1.375rem; font-weight: 900;">Strategy Components</h3> |
|
|
<ul class="details-list" id="strategy-components"> |
|
|
<li class="detail-item"> |
|
|
<span class="detail-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/> |
|
|
</svg> |
|
|
RSI + MACD |
|
|
</span> |
|
|
<span class="detail-value">40%</span> |
|
|
</li> |
|
|
<li class="detail-item"> |
|
|
<span class="detail-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/> |
|
|
</svg> |
|
|
Smart Money Concepts |
|
|
</span> |
|
|
<span class="detail-value">25%</span> |
|
|
</li> |
|
|
<li class="detail-item"> |
|
|
<span class="detail-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<rect x="3" y="3" width="7" height="7"/> |
|
|
<rect x="14" y="3" width="7" height="7"/> |
|
|
<rect x="14" y="14" width="7" height="7"/> |
|
|
<rect x="3" y="14" width="7" height="7"/> |
|
|
</svg> |
|
|
Pattern Recognition |
|
|
</span> |
|
|
<span class="detail-value">20%</span> |
|
|
</li> |
|
|
<li class="detail-item"> |
|
|
<span class="detail-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/> |
|
|
</svg> |
|
|
Sentiment Analysis |
|
|
</span> |
|
|
<span class="detail-value">10%</span> |
|
|
</li> |
|
|
<li class="detail-item"> |
|
|
<span class="detail-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z"/> |
|
|
</svg> |
|
|
Machine Learning |
|
|
</span> |
|
|
<span class="detail-value">5%</span> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<h3 style="color: var(--text-primary); margin: 28px 0 18px; font-size: 1.375rem; font-weight: 900;">Description</h3> |
|
|
<p id="strategy-description" style="color: var(--text-secondary); line-height: 1.9; padding: 24px; background: rgba(0, 0, 0, 0.25); border-radius: var(--radius-md); border: 2px solid rgba(255, 255, 255, 0.08); font-size: 1.0625rem; font-weight: 500;"> |
|
|
This is a comprehensive hybrid trading strategy that combines multiple technical indicators and advanced analysis methods to generate high-probability trading signals. |
|
|
</p> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button class="btn btn-primary" onclick="selectStrategyFromModal()"> |
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<polyline points="20 6 9 17 4 12"/> |
|
|
</svg> |
|
|
<span>SELECT STRATEGY</span> |
|
|
</button> |
|
|
<button class="btn btn-danger" onclick="closeModal('strategy-modal')"> |
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<line x1="18" y1="6" x2="6" y2="18"/> |
|
|
<line x1="6" y1="6" x2="18" y2="18"/> |
|
|
</svg> |
|
|
<span>CLOSE</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="modal-overlay" id="signal-modal"> |
|
|
<div class="modal"> |
|
|
<div class="modal-header"> |
|
|
<div class="modal-title"> |
|
|
<div class="modal-title-icon"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<circle cx="12" cy="12" r="2"/> |
|
|
<path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/> |
|
|
</svg> |
|
|
</div> |
|
|
<span id="signal-modal-title">Signal Details</span> |
|
|
</div> |
|
|
<button class="modal-close" onclick="closeModal('signal-modal')"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<line x1="18" y1="6" x2="6" y2="18"/> |
|
|
<line x1="6" y1="6" x2="18" y2="18"/> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<div class="info-grid"> |
|
|
<div class="info-item"> |
|
|
<div class="info-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<polyline points="9 11 12 14 22 4"/> |
|
|
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/> |
|
|
</svg> |
|
|
Signal Type |
|
|
</div> |
|
|
<div class="info-value success" id="signal-type">BUY</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<div class="info-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<circle cx="12" cy="12" r="10"/> |
|
|
</svg> |
|
|
Confidence |
|
|
</div> |
|
|
<div class="info-value success" id="signal-confidence">85%</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<div class="info-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<line x1="12" y1="1" x2="12" y2="23"/> |
|
|
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/> |
|
|
</svg> |
|
|
Entry Price |
|
|
</div> |
|
|
<div class="info-value primary" id="signal-entry">$43,250</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<div class="info-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/> |
|
|
</svg> |
|
|
Stop Loss |
|
|
</div> |
|
|
<div class="info-value danger" id="signal-sl">$41,800</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<div class="info-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/> |
|
|
<polyline points="16 7 22 7 22 13"/> |
|
|
</svg> |
|
|
Take Profit |
|
|
</div> |
|
|
<div class="info-value success" id="signal-tp">$45,500</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<div class="info-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/> |
|
|
<circle cx="8.5" cy="7" r="4"/> |
|
|
<polyline points="17 11 19 13 23 9"/> |
|
|
</svg> |
|
|
Risk/Reward |
|
|
</div> |
|
|
<div class="info-value" id="signal-rr">1:3.2</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 style="color: var(--text-primary); margin-bottom: 18px; font-size: 1.375rem; font-weight: 900;">Analysis Breakdown</h3> |
|
|
<ul class="details-list" id="signal-breakdown"> |
|
|
<li class="detail-item"> |
|
|
<span class="detail-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/> |
|
|
</svg> |
|
|
RSI + MACD Score |
|
|
</span> |
|
|
<span class="detail-value">78/100</span> |
|
|
</li> |
|
|
<li class="detail-item"> |
|
|
<span class="detail-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/> |
|
|
</svg> |
|
|
SMC Score |
|
|
</span> |
|
|
<span class="detail-value">82/100</span> |
|
|
</li> |
|
|
<li class="detail-item"> |
|
|
<span class="detail-label"> |
|
|
<svg viewBox="0 0 24 24"> |
|
|
<rect x="3" y="3" width="7" height="7"/> |
|
|
<rect x="14" y="3" width="7" height="7"/> |
|
|
</svg> |
|
|
Pattern Score |
|
|
</span> |
|
|
<span class="detail-value">75/100</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button class="btn btn-success" onclick="copySignal()"> |
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/> |
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/> |
|
|
</svg> |
|
|
<span>COPY</span> |
|
|
</button> |
|
|
<button class="btn btn-danger" onclick="closeModal('signal-modal')"> |
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<line x1="18" y1="6" x2="6" y2="18"/> |
|
|
<line x1="6" y1="6" x2="18" y2="18"/> |
|
|
</svg> |
|
|
<span>CLOSE</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script type="module"> |
|
|
|
|
|
import './trading-assistant-professional.js'; |
|
|
|
|
|
|
|
|
if (!window.realSystem && window.ultimateSystem) { |
|
|
window.realSystem = window.ultimateSystem; |
|
|
} |
|
|
</script> |
|
|
<script type="module" src="./trading-assistant-professional.js"></script> |
|
|
|
|
|
<script> |
|
|
|
|
|
function openModal(modalId) { |
|
|
const modal = document.getElementById(modalId); |
|
|
if (modal) { |
|
|
modal.classList.add('active'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
} |
|
|
} |
|
|
|
|
|
function closeModal(modalId) { |
|
|
const modal = document.getElementById(modalId); |
|
|
if (modal) { |
|
|
modal.classList.remove('active'); |
|
|
document.body.style.overflow = ''; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.modal-overlay').forEach(overlay => { |
|
|
overlay.addEventListener('click', (e) => { |
|
|
if (e.target === overlay) { |
|
|
closeModal(overlay.id); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', (e) => { |
|
|
if (e.key === 'Escape') { |
|
|
document.querySelectorAll('.modal-overlay.active').forEach(modal => { |
|
|
closeModal(modal.id); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function analyzeFromModal() { |
|
|
closeModal('crypto-modal'); |
|
|
setTimeout(() => { |
|
|
document.getElementById('analyze-btn')?.click(); |
|
|
}, 300); |
|
|
} |
|
|
|
|
|
function selectStrategyFromModal() { |
|
|
closeModal('strategy-modal'); |
|
|
|
|
|
} |
|
|
|
|
|
function copySignal() { |
|
|
const signalData = { |
|
|
symbol: document.getElementById('signal-modal-title')?.textContent || '', |
|
|
type: document.getElementById('signal-type')?.textContent || '', |
|
|
confidence: document.getElementById('signal-confidence')?.textContent || '', |
|
|
entry: document.getElementById('signal-entry')?.textContent || '', |
|
|
stopLoss: document.getElementById('signal-sl')?.textContent || '', |
|
|
takeProfit: document.getElementById('signal-tp')?.textContent || '' |
|
|
}; |
|
|
|
|
|
const text = `${signalData.symbol} |
|
|
Type: ${signalData.type} |
|
|
Confidence: ${signalData.confidence} |
|
|
Entry: ${signalData.entry} |
|
|
Stop Loss: ${signalData.stopLoss} |
|
|
Take Profit: ${signalData.takeProfit}`; |
|
|
|
|
|
navigator.clipboard.writeText(text).then(() => { |
|
|
|
|
|
const toast = document.createElement('div'); |
|
|
toast.className = 'toast'; |
|
|
toast.innerHTML = ` |
|
|
<div class="toast-content"> |
|
|
<div class="toast-icon">✅</div> |
|
|
<div class="toast-message">Signal copied to clipboard!</div> |
|
|
</div> |
|
|
`; |
|
|
document.getElementById('toast-container')?.appendChild(toast); |
|
|
setTimeout(() => toast.remove(), 3000); |
|
|
}).catch(() => { |
|
|
alert('Signal details:\n\n' + text); |
|
|
}); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
