|
|
<!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 System</title> |
|
|
|
|
|
|
|
|
<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; |
|
|
|
|
|
|
|
|
--bg-primary: #0f172a; |
|
|
--bg-secondary: #1e293b; |
|
|
--bg-tertiary: #334155; |
|
|
|
|
|
|
|
|
--text-primary: #f1f5f9; |
|
|
--text-secondary: #cbd5e1; |
|
|
--text-muted: #94a3b8; |
|
|
|
|
|
|
|
|
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); |
|
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2); |
|
|
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3); |
|
|
--shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.4); |
|
|
|
|
|
|
|
|
--radius-sm: 8px; |
|
|
--radius-md: 12px; |
|
|
--radius-lg: 16px; |
|
|
--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); |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; |
|
|
background: var(--bg-primary); |
|
|
color: var(--text-primary); |
|
|
line-height: 1.6; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
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.15) 0%, transparent 50%), |
|
|
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.15) 0%, transparent 50%), |
|
|
radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.1) 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: 24px; |
|
|
} |
|
|
|
|
|
|
|
|
.header { |
|
|
background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95)); |
|
|
backdrop-filter: blur(20px) saturate(180%); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
border-radius: var(--radius-xl); |
|
|
padding: 32px; |
|
|
margin-bottom: 24px; |
|
|
box-shadow: var(--shadow-lg), 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.1), |
|
|
transparent |
|
|
); |
|
|
animation: headerShine 3s 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: 24px; |
|
|
} |
|
|
|
|
|
.header-left { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 24px; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 12px; |
|
|
} |
|
|
|
|
|
.logo-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 4px 16px rgba(59, 130, 246, 0.4); |
|
|
animation: logoFloat 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes logoFloat { |
|
|
0%, 100% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-5px); } |
|
|
} |
|
|
|
|
|
.logo-icon svg { |
|
|
width: 28px; |
|
|
height: 28px; |
|
|
stroke: white; |
|
|
stroke-width: 2; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.logo-text { |
|
|
font-size: 1.75rem; |
|
|
font-weight: 800; |
|
|
background: linear-gradient(135deg, var(--primary-light), var(--accent)); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
letter-spacing: -0.5px; |
|
|
} |
|
|
|
|
|
.live-indicator { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.1)); |
|
|
border: 1px solid var(--success); |
|
|
padding: 10px 20px; |
|
|
border-radius: var(--radius-full); |
|
|
box-shadow: 0 0 20px rgba(16, 185, 129, 0.2); |
|
|
} |
|
|
|
|
|
.live-dot { |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
background: var(--success); |
|
|
border-radius: 50%; |
|
|
box-shadow: 0 0 10px var(--success); |
|
|
animation: livePulse 2s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes livePulse { |
|
|
0%, 100% { |
|
|
transform: scale(1); |
|
|
opacity: 1; |
|
|
} |
|
|
50% { |
|
|
transform: scale(1.3); |
|
|
opacity: 0.7; |
|
|
} |
|
|
} |
|
|
|
|
|
.live-text { |
|
|
font-weight: 700; |
|
|
font-size: 0.875rem; |
|
|
color: var(--success); |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
|
|
|
.header-stats { |
|
|
display: flex; |
|
|
gap: 32px; |
|
|
} |
|
|
|
|
|
.stat { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
gap: 4px; |
|
|
} |
|
|
|
|
|
.stat-icon { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
stroke: var(--accent); |
|
|
stroke-width: 2; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.stat-value { |
|
|
font-size: 1.5rem; |
|
|
font-weight: 700; |
|
|
background: linear-gradient(135deg, var(--primary-light), var(--accent)); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.stat-label { |
|
|
font-size: 0.75rem; |
|
|
color: var(--text-muted); |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.5px; |
|
|
} |
|
|
|
|
|
|
|
|
.main-grid { |
|
|
display: grid; |
|
|
grid-template-columns: 340px 1fr 400px; |
|
|
gap: 24px; |
|
|
} |
|
|
|
|
|
@media (max-width: 1400px) { |
|
|
.main-grid { |
|
|
grid-template-columns: 300px 1fr 340px; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 1200px) { |
|
|
.main-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.card { |
|
|
background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95)); |
|
|
backdrop-filter: blur(20px) saturate(180%); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
border-radius: var(--radius-xl); |
|
|
padding: 28px; |
|
|
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: 2px; |
|
|
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.3); |
|
|
box-shadow: var(--shadow-xl), 0 0 40px rgba(59, 130, 246, 0.15); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.card-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 24px; |
|
|
padding-bottom: 20px; |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05); |
|
|
} |
|
|
|
|
|
.card-title { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 12px; |
|
|
font-size: 1.25rem; |
|
|
font-weight: 700; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.card-title-icon { |
|
|
width: 28px; |
|
|
height: 28px; |
|
|
stroke: var(--primary-light); |
|
|
stroke-width: 2; |
|
|
fill: none; |
|
|
animation: iconFloat 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes iconFloat { |
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); } |
|
|
50% { transform: translateY(-3px) rotate(5deg); } |
|
|
} |
|
|
|
|
|
|
|
|
.crypto-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 16px; |
|
|
} |
|
|
|
|
|
.crypto-card { |
|
|
background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary)); |
|
|
border: 2px solid rgba(255, 255, 255, 0.05); |
|
|
border-radius: var(--radius-lg); |
|
|
padding: 20px; |
|
|
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.1), transparent); |
|
|
transition: left var(--transition-slow); |
|
|
} |
|
|
|
|
|
.crypto-card:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.crypto-card:hover { |
|
|
border-color: var(--primary); |
|
|
transform: translateY(-4px) scale(1.02); |
|
|
box-shadow: 0 12px 32px rgba(59, 130, 246, 0.3); |
|
|
} |
|
|
|
|
|
.crypto-card.active { |
|
|
border-color: var(--accent); |
|
|
background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.15)); |
|
|
box-shadow: 0 0 30px rgba(6, 182, 212, 0.4), inset 0 0 20px rgba(6, 182, 212, 0.1); |
|
|
} |
|
|
|
|
|
.crypto-card.active::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
right: 10px; |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
background: var(--success); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 0 15px var(--success); |
|
|
} |
|
|
|
|
|
.crypto-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 12px; |
|
|
margin-bottom: 12px; |
|
|
} |
|
|
|
|
|
.crypto-icon { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background: linear-gradient(135deg, var(--primary), var(--secondary)); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.25rem; |
|
|
font-weight: 700; |
|
|
color: white; |
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); |
|
|
} |
|
|
|
|
|
.crypto-info { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.crypto-symbol { |
|
|
font-size: 1.125rem; |
|
|
font-weight: 700; |
|
|
color: var(--text-primary); |
|
|
margin-bottom: 2px; |
|
|
} |
|
|
|
|
|
.crypto-name { |
|
|
font-size: 0.75rem; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.crypto-price { |
|
|
font-size: 1.25rem; |
|
|
font-weight: 700; |
|
|
color: var(--accent); |
|
|
margin-bottom: 6px; |
|
|
} |
|
|
|
|
|
.crypto-change { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 4px; |
|
|
font-size: 0.875rem; |
|
|
font-weight: 600; |
|
|
padding: 4px 10px; |
|
|
border-radius: var(--radius-sm); |
|
|
} |
|
|
|
|
|
.crypto-change.positive { |
|
|
background: rgba(16, 185, 129, 0.15); |
|
|
color: var(--success); |
|
|
} |
|
|
|
|
|
.crypto-change.negative { |
|
|
background: rgba(239, 68, 68, 0.15); |
|
|
color: var(--danger); |
|
|
} |
|
|
|
|
|
.crypto-change svg { |
|
|
width: 14px; |
|
|
height: 14px; |
|
|
stroke-width: 3; |
|
|
} |
|
|
|
|
|
|
|
|
.strategy-grid { |
|
|
display: grid; |
|
|
gap: 16px; |
|
|
} |
|
|
|
|
|
.strategy-card { |
|
|
background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary)); |
|
|
border: 2px solid rgba(255, 255, 255, 0.05); |
|
|
border-radius: var(--radius-lg); |
|
|
padding: 24px; |
|
|
cursor: pointer; |
|
|
transition: all var(--transition-base); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.strategy-card::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
right: 0; |
|
|
width: 120px; |
|
|
height: 120px; |
|
|
background: radial-gradient(circle, rgba(59, 130, 246, 0.15), transparent); |
|
|
transform: translate(50%, -50%); |
|
|
transition: all var(--transition-base); |
|
|
} |
|
|
|
|
|
.strategy-card:hover::after { |
|
|
width: 180px; |
|
|
height: 180px; |
|
|
} |
|
|
|
|
|
.strategy-card:hover { |
|
|
border-color: var(--primary); |
|
|
transform: translateX(6px); |
|
|
box-shadow: -8px 0 24px rgba(59, 130, 246, 0.3); |
|
|
} |
|
|
|
|
|
.strategy-card.active { |
|
|
border-color: var(--accent); |
|
|
background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.2)); |
|
|
box-shadow: -8px 0 32px rgba(6, 182, 212, 0.4); |
|
|
} |
|
|
|
|
|
.strategy-card.hts { |
|
|
border-color: var(--secondary); |
|
|
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.2)); |
|
|
} |
|
|
|
|
|
.strategy-card.hts.active { |
|
|
box-shadow: -8px 0 32px rgba(139, 92, 246, 0.5); |
|
|
} |
|
|
|
|
|
.strategy-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: flex-start; |
|
|
margin-bottom: 16px; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.strategy-info { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.strategy-name { |
|
|
font-size: 1.125rem; |
|
|
font-weight: 700; |
|
|
color: var(--text-primary); |
|
|
margin-bottom: 8px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.strategy-name svg { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
stroke: var(--primary-light); |
|
|
stroke-width: 2; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.strategy-desc { |
|
|
font-size: 0.875rem; |
|
|
color: var(--text-secondary); |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.strategy-badge { |
|
|
padding: 6px 14px; |
|
|
border-radius: var(--radius-full); |
|
|
font-size: 0.7rem; |
|
|
font-weight: 700; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.5px; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
.badge-premium { |
|
|
background: linear-gradient(135deg, var(--secondary), var(--primary)); |
|
|
color: white; |
|
|
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4); |
|
|
} |
|
|
|
|
|
.badge-standard { |
|
|
background: rgba(59, 130, 246, 0.2); |
|
|
color: var(--primary-light); |
|
|
border: 1px solid var(--primary); |
|
|
} |
|
|
|
|
|
.strategy-stats { |
|
|
display: flex; |
|
|
gap: 20px; |
|
|
margin-top: 16px; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.strategy-stat { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 6px; |
|
|
font-size: 0.8125rem; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.strategy-stat svg { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
stroke: var(--accent); |
|
|
stroke-width: 2; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
|
|
|
.agent-status { |
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.15)); |
|
|
border: 1px solid var(--success); |
|
|
border-radius: var(--radius-lg); |
|
|
padding: 20px; |
|
|
margin-bottom: 24px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 16px; |
|
|
box-shadow: 0 0 20px rgba(16, 185, 129, 0.2); |
|
|
} |
|
|
|
|
|
.agent-avatar { |
|
|
width: 56px; |
|
|
height: 56px; |
|
|
background: linear-gradient(135deg, var(--primary), var(--accent)); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4); |
|
|
animation: agentRotate 10s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes agentRotate { |
|
|
from { transform: rotate(0deg); } |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.agent-avatar svg { |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
stroke: white; |
|
|
stroke-width: 2; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.agent-info { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.agent-name { |
|
|
font-weight: 700; |
|
|
font-size: 1.125rem; |
|
|
color: var(--text-primary); |
|
|
margin-bottom: 4px; |
|
|
} |
|
|
|
|
|
.agent-desc { |
|
|
font-size: 0.875rem; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
|
|
|
.btn { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 10px; |
|
|
padding: 14px 28px; |
|
|
border: none; |
|
|
border-radius: var(--radius-md); |
|
|
font-weight: 600; |
|
|
font-size: 0.9375rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.5px; |
|
|
cursor: pointer; |
|
|
transition: all var(--transition-base); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.btn::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
width: 0; |
|
|
height: 0; |
|
|
border-radius: 50%; |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
transform: translate(-50%, -50%); |
|
|
transition: width 0.6s, height 0.6s; |
|
|
} |
|
|
|
|
|
.btn:hover::before { |
|
|
width: 300px; |
|
|
height: 300px; |
|
|
} |
|
|
|
|
|
.btn svg { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
stroke-width: 2; |
|
|
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 4px 16px rgba(59, 130, 246, 0.4); |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.5); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.btn-success { |
|
|
background: linear-gradient(135deg, var(--success), #059669); |
|
|
color: white; |
|
|
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4); |
|
|
} |
|
|
|
|
|
.btn-success:hover { |
|
|
box-shadow: 0 8px 24px rgba(16, 185, 129, 0.5); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.btn-danger { |
|
|
background: linear-gradient(135deg, var(--danger), #dc2626); |
|
|
color: white; |
|
|
box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4); |
|
|
} |
|
|
|
|
|
.btn-full { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
|
|
|
#chart-container { |
|
|
height: 600px; |
|
|
border-radius: var(--radius-lg); |
|
|
overflow: hidden; |
|
|
background: var(--bg-primary); |
|
|
border: 1px solid rgba(255, 255, 255, 0.05); |
|
|
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
|
|
|
.signals-container { |
|
|
max-height: 900px; |
|
|
overflow-y: auto; |
|
|
padding-right: 8px; |
|
|
} |
|
|
|
|
|
.signals-container::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
.signals-container::-webkit-scrollbar-track { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.signals-container::-webkit-scrollbar-thumb { |
|
|
background: linear-gradient(135deg, var(--primary), var(--accent)); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.signal-card { |
|
|
background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary)); |
|
|
border-left: 4px solid var(--primary); |
|
|
border-radius: var(--radius-lg); |
|
|
padding: 24px; |
|
|
margin-bottom: 20px; |
|
|
box-shadow: var(--shadow-md); |
|
|
animation: signalSlideIn 0.5s ease-out; |
|
|
transition: all var(--transition-base); |
|
|
} |
|
|
|
|
|
@keyframes signalSlideIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateX(30px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.signal-card:hover { |
|
|
box-shadow: var(--shadow-lg); |
|
|
transform: translateX(-4px); |
|
|
} |
|
|
|
|
|
.signal-card.buy { |
|
|
border-left-color: var(--success); |
|
|
background: linear-gradient(90deg, rgba(16, 185, 129, 0.1), var(--bg-secondary)); |
|
|
} |
|
|
|
|
|
.signal-card.sell { |
|
|
border-left-color: var(--danger); |
|
|
background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), var(--bg-secondary)); |
|
|
} |
|
|
|
|
|
.signal-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.signal-left { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 16px; |
|
|
} |
|
|
|
|
|
.signal-badge { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
padding: 8px 18px; |
|
|
border-radius: var(--radius-full); |
|
|
font-weight: 700; |
|
|
font-size: 0.9375rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.5px; |
|
|
} |
|
|
|
|
|
.signal-badge svg { |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
stroke-width: 2.5; |
|
|
} |
|
|
|
|
|
.signal-badge.buy { |
|
|
background: rgba(16, 185, 129, 0.2); |
|
|
color: var(--success); |
|
|
border: 1px solid var(--success); |
|
|
box-shadow: 0 0 15px rgba(16, 185, 129, 0.3); |
|
|
} |
|
|
|
|
|
.signal-badge.sell { |
|
|
background: rgba(239, 68, 68, 0.2); |
|
|
color: var(--danger); |
|
|
border: 1px solid var(--danger); |
|
|
box-shadow: 0 0 15px rgba(239, 68, 68, 0.3); |
|
|
} |
|
|
|
|
|
.signal-symbol { |
|
|
font-size: 1.375rem; |
|
|
font-weight: 700; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.signal-time { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 6px; |
|
|
font-size: 0.8125rem; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.signal-time svg { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
stroke: var(--text-muted); |
|
|
stroke-width: 2; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.signal-body { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 16px; |
|
|
} |
|
|
|
|
|
.signal-item { |
|
|
background: rgba(0, 0, 0, 0.2); |
|
|
border: 1px solid rgba(255, 255, 255, 0.05); |
|
|
border-radius: var(--radius-md); |
|
|
padding: 16px; |
|
|
transition: all var(--transition-base); |
|
|
} |
|
|
|
|
|
.signal-item:hover { |
|
|
border-color: rgba(255, 255, 255, 0.1); |
|
|
background: rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.signal-item-label { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 6px; |
|
|
font-size: 0.8125rem; |
|
|
color: var(--text-muted); |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
|
|
|
.signal-item-label svg { |
|
|
width: 14px; |
|
|
height: 14px; |
|
|
stroke: var(--text-muted); |
|
|
stroke-width: 2; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.signal-item-value { |
|
|
font-size: 1.25rem; |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
.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: 80px 20px; |
|
|
} |
|
|
|
|
|
.empty-icon { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
margin: 0 auto 24px; |
|
|
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(-10px); } |
|
|
} |
|
|
|
|
|
.empty-text { |
|
|
font-size: 1.125rem; |
|
|
font-weight: 600; |
|
|
color: var(--text-secondary); |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
|
|
|
.empty-subtext { |
|
|
font-size: 0.9375rem; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
|
|
|
.toast { |
|
|
position: fixed; |
|
|
top: 24px; |
|
|
right: 24px; |
|
|
background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)); |
|
|
backdrop-filter: blur(20px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
border-radius: var(--radius-lg); |
|
|
padding: 20px 24px; |
|
|
min-width: 320px; |
|
|
box-shadow: var(--shadow-xl); |
|
|
z-index: 9999; |
|
|
animation: toastSlideIn 0.3s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes toastSlideIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateX(100px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.toast-content { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 14px; |
|
|
} |
|
|
|
|
|
.toast-icon { |
|
|
width: 28px; |
|
|
height: 28px; |
|
|
stroke-width: 2; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.toast-message { |
|
|
flex: 1; |
|
|
font-weight: 600; |
|
|
font-size: 0.9375rem; |
|
|
} |
|
|
|
|
|
|
|
|
.loading { |
|
|
display: inline-block; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border: 3px solid rgba(255, 255, 255, 0.2); |
|
|
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.8); |
|
|
backdrop-filter: blur(10px); |
|
|
z-index: 10000; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
padding: 20px; |
|
|
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(30px) saturate(180%); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
border-radius: var(--radius-xl); |
|
|
max-width: 800px; |
|
|
width: 100%; |
|
|
max-height: 90vh; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 25px 100px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05); |
|
|
transform: scale(0.9) translateY(30px); |
|
|
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: 3px; |
|
|
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: 32px; |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05); |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05)); |
|
|
} |
|
|
|
|
|
.modal-title { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 16px; |
|
|
font-size: 1.75rem; |
|
|
font-weight: 800; |
|
|
background: linear-gradient(135deg, var(--primary-light), var(--accent)); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.modal-title-icon { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background: linear-gradient(135deg, var(--primary), var(--accent)); |
|
|
border-radius: var(--radius-md); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4); |
|
|
animation: modalIconPulse 2s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes modalIconPulse { |
|
|
0%, 100% { transform: scale(1); } |
|
|
50% { transform: scale(1.1); } |
|
|
} |
|
|
|
|
|
.modal-title-icon svg { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
stroke: white; |
|
|
stroke-width: 2; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.modal-close { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background: rgba(239, 68, 68, 0.1); |
|
|
border: 1px solid rgba(239, 68, 68, 0.3); |
|
|
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.2); |
|
|
border-color: var(--danger); |
|
|
transform: rotate(90deg); |
|
|
} |
|
|
|
|
|
.modal-close svg { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
stroke: var(--danger); |
|
|
stroke-width: 2; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.modal-body { |
|
|
padding: 32px; |
|
|
max-height: calc(90vh - 200px); |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.modal-body::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
.modal-body::-webkit-scrollbar-track { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.modal-body::-webkit-scrollbar-thumb { |
|
|
background: linear-gradient(135deg, var(--primary), var(--accent)); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.modal-footer { |
|
|
padding: 24px 32px; |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05); |
|
|
display: flex; |
|
|
justify-content: flex-end; |
|
|
gap: 16px; |
|
|
background: rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
|
|
|
.info-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 20px; |
|
|
margin-bottom: 24px; |
|
|
} |
|
|
|
|
|
.info-item { |
|
|
background: rgba(0, 0, 0, 0.3); |
|
|
border: 1px solid rgba(255, 255, 255, 0.05); |
|
|
border-radius: var(--radius-md); |
|
|
padding: 20px; |
|
|
transition: all var(--transition-base); |
|
|
} |
|
|
|
|
|
.info-item:hover { |
|
|
border-color: rgba(59, 130, 246, 0.3); |
|
|
background: rgba(59, 130, 246, 0.05); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.info-label { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
font-size: 0.875rem; |
|
|
color: var(--text-muted); |
|
|
margin-bottom: 8px; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.5px; |
|
|
} |
|
|
|
|
|
.info-label svg { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
stroke: var(--accent); |
|
|
stroke-width: 2; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.info-value { |
|
|
font-size: 1.5rem; |
|
|
font-weight: 700; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.info-value.success { |
|
|
color: var(--success); |
|
|
} |
|
|
|
|
|
.info-value.danger { |
|
|
color: var(--danger); |
|
|
} |
|
|
|
|
|
.info-value.primary { |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
|
|
|
.modal-chart { |
|
|
height: 300px; |
|
|
background: rgba(0, 0, 0, 0.3); |
|
|
border: 1px solid rgba(255, 255, 255, 0.05); |
|
|
border-radius: var(--radius-md); |
|
|
margin-bottom: 24px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
|
|
|
.details-list { |
|
|
list-style: none; |
|
|
padding: 0; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.detail-item { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 16px; |
|
|
background: rgba(0, 0, 0, 0.2); |
|
|
border: 1px solid rgba(255, 255, 255, 0.05); |
|
|
border-radius: var(--radius-md); |
|
|
margin-bottom: 12px; |
|
|
transition: all var(--transition-base); |
|
|
} |
|
|
|
|
|
.detail-item:hover { |
|
|
background: rgba(59, 130, 246, 0.05); |
|
|
border-color: rgba(59, 130, 246, 0.3); |
|
|
} |
|
|
|
|
|
.detail-label { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
font-weight: 600; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
.detail-label svg { |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
stroke: var(--primary-light); |
|
|
stroke-width: 2; |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.detail-value { |
|
|
font-weight: 700; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
|
|
|
.clickable-card { |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.clickable-card::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 12px; |
|
|
right: 12px; |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
background: linear-gradient(135deg, var(--primary), var(--accent)); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
opacity: 0; |
|
|
transition: all var(--transition-base); |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.clickable-card:hover::after { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.container { |
|
|
padding: 16px; |
|
|
} |
|
|
|
|
|
.header { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.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: 20px; |
|
|
} |
|
|
|
|
|
.modal-body { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.modal-footer { |
|
|
padding: 16px 20px; |
|
|
} |
|
|
} |
|
|
</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 class="logo-text">TRADING PRO</div> |
|
|
</div> |
|
|
<div class="live-indicator"> |
|
|
<div class="live-dot"></div> |
|
|
<span class="live-text">LIVE</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: 12px;"> |
|
|
<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: 24px;"> |
|
|
<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: 24px;"> |
|
|
<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: 24px; padding: 18px;"> |
|
|
<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: 16px; font-size: 1.25rem;">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: 16px; font-size: 1.25rem;">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: 24px 0 16px; font-size: 1.25rem;">Description</h3> |
|
|
<p id="strategy-description" style="color: var(--text-secondary); line-height: 1.8; padding: 20px; background: rgba(0, 0, 0, 0.2); border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.05);"> |
|
|
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: 16px; font-size: 1.25rem;">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" src="./trading-assistant-real.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'); |
|
|
document.getElementById('analyze-btn')?.click(); |
|
|
} |
|
|
|
|
|
function selectStrategyFromModal() { |
|
|
closeModal('strategy-modal'); |
|
|
} |
|
|
|
|
|
function copySignal() { |
|
|
alert('Signal copied to clipboard!'); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
