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