| <!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> |
|
|
|
|
