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