| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>TradeXReaper - AI Trading Platform</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| :root { |
| --primary: #2962FF; |
| --primary-dark: #0039CB; |
| --profit: #26A69A; |
| --loss: #EF5350; |
| --warning: #FF9800; |
| --dark-bg: #131722; |
| --dark-panel: #1E222D; |
| --dark-text: #D1D4DC; |
| --dark-border: #2A2E39; |
| --light-bg: #F8F9FA; |
| --light-panel: #FFFFFF; |
| --light-text: #212529; |
| --light-border: #E9ECEF; |
| } |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| color: var(--dark-text); |
| background-color: var(--dark-bg); |
| } |
| |
| .dark-theme { |
| --bg-color: var(--dark-bg); |
| --panel-color: var(--dark-panel); |
| --text-color: var(--dark-text); |
| --border-color: var(--dark-border); |
| } |
| |
| .light-theme { |
| --bg-color: var(--light-bg); |
| --panel-color: var(--light-panel); |
| --text-color: var(--light-text); |
| --border-color: var(--light-border); |
| } |
| |
| .sidebar { |
| transition: all 0.3s ease; |
| background-color: var(--dark-panel); |
| border-right: 1px solid var(--dark-border); |
| } |
| |
| .profit-text { |
| color: var(--profit); |
| } |
| |
| .loss-text { |
| color: var(--loss); |
| } |
| |
| .warning-text { |
| color: var(--warning); |
| } |
| |
| .card { |
| background-color: var(--dark-panel); |
| border: 1px solid var(--dark-border); |
| transition: all 0.3s ease; |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| |
| .blink { |
| animation: blink-animation 1s steps(2, start) infinite; |
| } |
| |
| .pulse { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| |
| @keyframes blink-animation { |
| to { opacity: 0.5; } |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| |
| .strategy-card { |
| border-left: 4px solid var(--primary); |
| } |
| |
| .greeks-grid { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 0.5rem; |
| } |
| |
| .buy-bg { |
| background-color: rgba(38, 166, 154, 0.1); |
| } |
| |
| .sell-bg { |
| background-color: rgba(239, 83, 80, 0.1); |
| } |
| |
| .hold-bg { |
| background-color: rgba(255, 152, 0, 0.1); |
| } |
| |
| .table-header { |
| background-color: var(--dark-panel); |
| color: var(--dark-text); |
| } |
| |
| .table-row { |
| border-bottom: 1px solid var(--dark-border); |
| } |
| |
| .table-row:hover { |
| background-color: rgba(41, 98, 255, 0.05); |
| } |
| |
| .theme-toggle { |
| background-color: var(--dark-panel); |
| border: 1px solid var(--dark-border); |
| } |
| |
| @media (max-width: 768px) { |
| .sidebar { |
| transform: translateX(-100%); |
| position: fixed; |
| z-index: 50; |
| height: 100vh; |
| top: 0; |
| left: 0; |
| } |
| |
| .sidebar-open { |
| transform: translateX(0); |
| } |
| |
| .greeks-grid { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: var(--dark-panel); |
| border-radius: 10px; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: var(--primary); |
| border-radius: 10px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--primary-dark); |
| } |
| </style> |
| </head> |
| <body class="min-h-screen dark-theme"> |
| <div class="flex"> |
| |
| <button id="mobile-menu-button" class="md:hidden fixed top-4 left-4 z-50 p-2 rounded-lg bg-primary text-white"> |
| <i class="fas fa-bars"></i> |
| </button> |
| |
| |
| <div id="sidebar" class="sidebar w-64 shadow-lg md:shadow-none md:relative overflow-y-auto"> |
| <div class="p-6"> |
| <div class="flex items-center space-x-3 mb-8"> |
| <div class="w-10 h-10 rounded-full bg-opacity-20 bg-primary flex items-center justify-center"> |
| <i class="fas fa-robot text-primary"></i> |
| </div> |
| <h1 class="text-xl font-bold text-primary">TradeX Reaper</h1> |
| </div> |
| |
| |
| <div class="mb-6 p-4 bg-opacity-10 bg-primary rounded-lg"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-xs font-medium text-primary">ACCOUNT STATUS</span> |
| <span class="px-2 py-1 bg-opacity-20 bg-green-500 text-green-400 text-xs rounded-full">ACTIVE</span> |
| </div> |
| <div class="flex items-center justify-between"> |
| <span class="text-sm text-gray-400">Broker: Alpaca</span> |
| <span class="text-xs text-gray-500">Live</span> |
| </div> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="font-semibold text-gray-500 uppercase text-xs">Trading</h2> |
| </div> |
| <ul class="space-y-2"> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg bg-opacity-10 bg-primary text-primary"> |
| <i class="fas fa-chart-line w-5"></i> |
| <span>Dashboard</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-400 hover:bg-opacity-10 hover:bg-gray-500"> |
| <i class="fas fa-trade-alt w-5"></i> |
| <span>Live Trading</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-400 hover:bg-opacity-10 hover:bg-gray-500"> |
| <i class="fas fa-cogs w-5"></i> |
| <span>Strategy Builder</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-400 hover:bg-opacity-10 hover:bg-gray-500"> |
| <i class="fas fa-history w-5"></i> |
| <span>Trade History</span> |
| </a> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="font-semibold text-gray-500 uppercase text-xs">Active Strategies</h2> |
| <button class="text-gray-500 hover:text-primary"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| <ul class="space-y-2"> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-300 hover:bg-opacity-10 hover:bg-gray-500 strategy-card"> |
| <i class="fas fa-chart-network w-5 text-primary"></i> |
| <div> |
| <span>Gamma Scalping</span> |
| <span class="block text-xs text-gray-500">Delta Neutral</span> |
| </div> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-300 hover:bg-opacity-10 hover:bg-gray-500 strategy-card"> |
| <i class="fas fa-arrows-alt-h w-5 text-primary"></i> |
| <div> |
| <span>Covered Calls</span> |
| <span class="block text-xs text-gray-500">Income Strategy</span> |
| </div> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-300 hover:bg-opacity-10 hover:bg-gray-500 strategy-card"> |
| <i class="fas fa-wave-square w-5 text-primary"></i> |
| <div> |
| <span>Mean Reversion</span> |
| <span class="block text-xs text-gray-500">Equities</span> |
| </div> |
| </a> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="font-semibold text-gray-500 uppercase text-xs">Risk Controls</h2> |
| </div> |
| <div class="space-y-3"> |
| <div class="p-3 bg-opacity-10 bg-gray-500 rounded-lg"> |
| <div class="flex items-center justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-300">Max Position Size</span> |
| <span class="text-xs bg-opacity-20 bg-blue-500 text-blue-400 px-2 py-1 rounded">$10,000</span> |
| </div> |
| <div class="w-full bg-opacity-20 bg-gray-500 rounded-full h-1.5"> |
| <div class="bg-blue-500 h-1.5 rounded-full" style="width: 45%"></div> |
| </div> |
| </div> |
| <div class="p-3 bg-opacity-10 bg-gray-500 rounded-lg"> |
| <div class="flex items-center justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-300">Daily Loss Limit</span> |
| <span class="text-xs bg-opacity-20 bg-red-500 text-red-400 px-2 py-1 rounded">5%</span> |
| </div> |
| <div class="w-full bg-opacity-20 bg-gray-500 rounded-full h-1.5"> |
| <div class="bg-red-500 h-1.5 rounded-full" style="width: 20%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-6 p-4 bg-opacity-10 bg-gray-500 rounded-lg"> |
| <h3 class="font-medium text-gray-300 mb-2">System Status</h3> |
| <div class="flex items-center space-x-2 mb-3"> |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> |
| <span class="text-xs text-gray-400">Alpaca API: Connected</span> |
| </div> |
| <div class="flex items-center space-x-2 mb-3"> |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> |
| <span class="text-xs text-gray-400">Market Data: Streaming</span> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> |
| <span class="text-xs text-gray-400">Strategy Engine: Active</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 p-6 md:p-8 overflow-x-hidden"> |
| <div class="max-w-7xl mx-auto"> |
| |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4"> |
| <div> |
| <h1 class="text-2xl font-bold text-gray-200">Trading Dashboard</h1> |
| <p class="text-gray-400" id="current-time">Loading...</p> |
| </div> |
| <div class="flex items-center space-x-3"> |
| <button id="theme-toggle" class="theme-toggle p-2 rounded-lg shadow-sm hover:bg-opacity-20 hover:bg-gray-500"> |
| <i class="fas fa-moon text-gray-400"></i> |
| </button> |
| <div class="relative"> |
| <button class="p-2 rounded-lg bg-opacity-10 bg-gray-500 shadow-sm text-gray-400 hover:bg-opacity-20 hover:bg-gray-500"> |
| <i class="fas fa-bell"></i> |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> |
| </button> |
| </div> |
| <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary-dark transition flex items-center space-x-2"> |
| <i class="fas fa-plus"></i> |
| <span>New Strategy</span> |
| </button> |
| <div class="w-10 h-10 rounded-full bg-opacity-20 bg-primary flex items-center justify-center"> |
| <i class="fas fa-user text-primary"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> |
| <div class="card p-4 rounded-lg shadow-sm card-hover"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-400 text-sm">Account Balance</p> |
| <h3 class="text-2xl font-bold text-gray-200" id="account-balance">$25,430.75</h3> |
| </div> |
| <div class="w-10 h-10 rounded-full bg-opacity-20 bg-green-500 flex items-center justify-center"> |
| <i class="fas fa-wallet text-green-400"></i> |
| </div> |
| </div> |
| <div class="mt-2 flex items-center text-xs text-gray-500"> |
| <span class="mr-2">Buying Power: $38,146.12</span> |
| <i class="fas fa-info-circle text-gray-500"></i> |
| </div> |
| </div> |
| <div class="card p-4 rounded-lg shadow-sm card-hover"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-400 text-sm">Today's P&L</p> |
| <h3 class="text-2xl font-bold profit-text" id="today-pnl">+$342.50</h3> |
| </div> |
| <div class="w-10 h-10 rounded-full bg-opacity-20 bg-blue-500 flex items-center justify-center"> |
| <i class="fas fa-chart-bar text-blue-400"></i> |
| </div> |
| </div> |
| <div class="mt-2 text-xs text-gray-500"> |
| <span>Daily target: +$500 (68.5%)</span> |
| </div> |
| </div> |
| <div class="card p-4 rounded-lg shadow-sm card-hover"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-400 text-sm">Open Positions</p> |
| <h3 class="text-2xl font-bold text-gray-200" id="open-positions">8</h3> |
| </div> |
| <div class="w-10 h-10 rounded-full bg-opacity-20 bg-yellow-500 flex items-center justify-center"> |
| <i class="fas fa-exchange-alt text-yellow-400"></i> |
| </div> |
| </div> |
| <div class="mt-2 text-xs text-gray-500"> |
| <span>3 Stocks, 4 Options, 1 Crypto</span> |
| </div> |
| </div> |
| <div class="card p-4 rounded-lg shadow-sm card-hover"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-400 text-sm">Win Rate</p> |
| <h3 class="text-2xl font-bold text-gray-200" id="win-rate">78.3%</h3> |
| </div> |
| <div class="w-10 h-10 rounded-full bg-opacity-20 bg-purple-500 flex items-center justify-center"> |
| <i class="fas fa-trophy text-purple-400"></i> |
| </div> |
| </div> |
| <div class="mt-2 text-xs text-gray-500"> |
| <span>Last 30 days: 82.1%</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-8"> |
| |
| <div class="card p-4 rounded-lg shadow-sm lg:col-span-2 card-hover"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="font-semibold text-gray-300">Portfolio Performance</h2> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 text-xs bg-primary text-white rounded-full">1D</button> |
| <button class="px-3 py-1 text-xs bg-opacity-10 bg-gray-500 text-gray-300 rounded-full hover:bg-opacity-20">1W</button> |
| <button class="px-3 py-1 text-xs bg-opacity-10 bg-gray-500 text-gray-300 rounded-full hover:bg-opacity-20">1M</button> |
| <button class="px-3 py-1 text-xs bg-opacity-10 bg-gray-500 text-gray-300 rounded-full hover:bg-opacity-20">1Y</button> |
| </div> |
| </div> |
| <div id="performance-chart" class="w-full"></div> |
| </div> |
| |
| |
| <div class="card p-4 rounded-lg shadow-sm card-hover"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="font-semibold text-gray-300">Market Watch</h2> |
| <div class="flex items-center space-x-2"> |
| <button class="text-gray-500 hover:text-primary"> |
| <i class="fas fa-sync-alt"></i> |
| </button> |
| <button class="text-gray-500 hover:text-primary"> |
| <i class="fas fa-filter"></i> |
| </button> |
| </div> |
| </div> |
| <div class="space-y-3 max-h-96 overflow-y-auto"> |
| <div class="flex items-center justify-between p-2 hover:bg-opacity-10 hover:bg-gray-500 rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-8 h-8 rounded-full bg-opacity-20 bg-blue-500 flex items-center justify-center"> |
| <i class="fas fa-chart-line text-blue-400"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-300">SPY</p> |
| <p class="text-xs text-gray-500">S&P 500 ETF</p> |
| </div> |
| </div> |
| <div class="text-right"> |
| <p class="text-sm font-medium text-gray-300">$412.75</p> |
| <p class="text-xs profit-text">+0.42%</p> |
| </div> |
| </div> |
| <div class="flex items-center justify-between p-2 hover:bg-opacity-10 hover:bg-gray-500 rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-8 h-8 rounded-full bg-opacity-20 bg-green-500 flex items-center justify-center"> |
| <i class="fab fa-bitcoin text-green-400"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-300">BTC/USD</p> |
| <p class="text-xs text-gray-500">Bitcoin</p> |
| </div> |
| </div> |
| <div class="text-right"> |
| <p class="text-sm font-medium text-gray-300">$42,189.50</p> |
| <p class="text-xs profit-text">+2.15%</p> |
| </div> |
| </div> |
| <div class="flex items-center justify-between p-2 hover:bg-opacity-10 hover:bg-gray-500 rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-8 h-8 rounded-full bg-opacity-20 bg-red-500 flex items-center justify-center"> |
| <i class="fas fa-oil-can text-red-400"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-300">CL=F</p> |
| <p class="text-xs text-gray-500">Crude Oil</p> |
| </div> |
| </div> |
| <div class="text-right"> |
| <p class="text-sm font-medium text-gray-300">$76.42</p> |
| <p class="text-xs loss-text">-1.23%</p> |
| </div> |
| </div> |
| <div class="flex items-center justify-between p-2 hover:bg-opacity-10 hover:bg-gray-500 rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-8 h-8 rounded-full bg-opacity-20 bg-yellow-500 flex items-center justify-center"> |
| <i class="fas fa-gem text-yellow-400"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-300">GC=F</p> |
| <p class="text-xs text-gray-500">Gold</p> |
| </div> |
| </div> |
| <div class="text-right"> |
| <p class="text-sm font-medium text-gray-300">$1,987.30</p> |
| <p class="text-xs profit-text">+0.67%</p> |
| </div> |
| </div> |
| <div class="flex items-center justify-between p-2 hover:bg-opacity-10 hover:bg-gray-500 rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-8 h-8 rounded-full bg-opacity-20 bg-purple-500 flex items-center justify-center"> |
| <i class="fas fa-building text-purple-400"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-300">AAPL</p> |
| <p class="text-xs text-gray-500">Apple Inc.</p> |
| </div> |
| </div> |
| <div class="text-right"> |
| <p class="text-sm font-medium text-gray-300">$187.65</p> |
| <p class="text-xs loss-text">-0.32%</p> |
| </div> |
| </div> |
| <div class="flex items-center justify-between p-2 hover:bg-opacity-10 hover:bg-gray-500 rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-8 h-8 rounded-full bg-opacity-20 bg-primary flex items-center justify-center"> |
| <i class="fas fa-chart-pie text-primary"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-300">VIX</p> |
| <p class="text-xs text-gray-500">Volatility Index</p> |
| </div> |
| </div> |
| <div class="text-right"> |
| <p class="text-sm font-medium text-gray-300">$14.75</p> |
| <p class="text-xs profit-text">+5.42%</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-8"> |
| |
| <div class="card p-4 rounded-lg shadow-sm card-hover"> |
| <div class="flex items-center justify-between mb-4"> |
| <div> |
| <h2 class="font-semibold text-gray-300">Gamma Scalping</h2> |
| <p class="text-xs text-gray-500">Delta Neutral Strategy</p> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <span class="px-2 py-1 bg-opacity-20 bg-green-500 text-green-400 text-xs rounded-full">ACTIVE</span> |
| <button class="text-gray-500 hover:text-primary"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </div> |
| </div> |
| <div class="flex items-center justify-between mb-4"> |
| <div> |
| <p class="text-xs text-gray-500">Today's P&L</p> |
| <p class="text-lg font-bold profit-text">+$128.45</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-500">Win Rate</p> |
| <p class="text-lg font-bold text-gray-300">72.4%</p> |
| </div> |
| </div> |
| <div class="greeks-grid mb-4"> |
| <div class="p-2 bg-opacity-10 bg-blue-500 rounded text-center"> |
| <p class="text-xs text-blue-400">Delta</p> |
| <p class="font-medium text-gray-300">0.02</p> |
| </div> |
| <div class="p-2 bg-opacity-10 bg-purple-500 rounded text-center"> |
| <p class="text-xs text-purple-400">Gamma</p> |
| <p class="font-medium text-gray-300">0.15</p> |
| </div> |
| <div class="p-2 bg-opacity-10 bg-green-500 rounded text-center"> |
| <p class="text-xs text-green-400">Theta</p> |
| <p class="font-medium text-gray-300">-0.08</p> |
| </div> |
| <div class="p-2 bg-opacity-10 bg-red-500 rounded text-center"> |
| <p class="text-xs text-red-400">Vega</p> |
| <p class="font-medium text-gray-300">0.12</p> |
| </div> |
| </div> |
| <button class="w-full py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary-dark transition"> |
| Manage Strategy |
| </button> |
| </div> |
| |
| |
| <div class="card p-4 rounded-lg shadow-sm card-hover"> |
| <div class="flex items-center justify-between mb-4"> |
| <div> |
| <h2 class="font-semibold text-gray-300">Covered Calls</h2> |
| <p class="text-xs text-gray-500">Income Strategy</p> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <span class="px-2 py-1 bg-opacity-20 bg-green-500 text-green-400 text-xs rounded-full">ACTIVE</span> |
| <button class="text-gray-500 hover:text-primary"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </div> |
| </div> |
| <div class="flex items-center justify-between mb-4"> |
| <div> |
| <p class="text-xs text-gray-500">Today's P&L</p> |
| <p class="text-lg font-bold profit-text">+$85.20</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-500">Win Rate</p> |
| <p class="text-lg font-bold text-gray-300">81.2%</p> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <p class="text-xs text-gray-500 mb-1">Active Positions</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="px-2 py-1 bg-opacity-10 bg-gray-500 text-gray-300 text-xs rounded-full">AAPL</span> |
| <span class="px-2 py-1 bg-opacity-10 bg-gray-500 text-gray-300 text-xs rounded-full">MSFT</span> |
| <span class="px-2 py-1 bg-opacity-10 bg-gray-500 text-gray-300 text-xs rounded-full">NVDA</span> |
| </div> |
| </div> |
| <button class="w-full py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary-dark transition"> |
| Manage Strategy |
| </button> |
| </div> |
| |
| |
| <div class="card p-4 rounded-lg shadow-sm card-hover"> |
| <div class="flex items-center justify-between mb-4"> |
| <div> |
| <h2 class="font-semibold text-gray-300">Mean Reversion</h2> |
| <p class="text-xs text-gray-500">Equities Strategy</p> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <span class="px-2 py-1 bg-opacity-20 bg-yellow-500 text-yellow-400 text-xs rounded-full">PAUSED</span> |
| <button class="text-gray-500 hover:text-primary"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </div> |
| </div> |
| <div class="flex items-center justify-between mb-4"> |
| <div> |
| <p class="text-xs text-gray-500">Today's P&L</p> |
| <p class="text-lg font-bold text-gray-300">$0.00</p> |
| </div> |
| <div> |
| <p class="text-xs text-gray-500">Win Rate</p> |
| <p class="text-lg font-bold text-gray-300">68.9%</p> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <p class="text-xs text-gray-500 mb-1">Watchlist</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="px-2 py-1 bg-opacity-10 bg-gray-500 text-gray-300 text-xs rounded-full">SPY</span> |
| <span class="px-2 py-1 bg-opacity-10 bg-gray-500 text-gray-300 text-xs rounded-full">QQQ</span> |
| <span class="px-2 py-1 bg-opacity-10 bg-gray-500 text-gray-300 text-xs rounded-full">IWM</span> |
| <span class="px-2 py-1 bg-opacity-10 bg-gray-500 text-gray-300 text-xs rounded-full">DIA</span> |
| </div> |
| </div> |
| <button class="w-full py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary-dark transition"> |
| Activate Strategy |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-8"> |
| |
| <div class="card p-4 rounded-lg shadow-sm card-hover"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="font-semibold text-gray-300">Recent Trades</h2> |
| <button class="text-primary hover:text-primary-dark text-sm font-medium"> |
| View All |
| </button> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-700"> |
| <thead class="table-header"> |
| <tr> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Symbol</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Type</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Qty</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Price</th> |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Status</th> |
| </tr> |
| </thead> |
| <tbody class="divide-y divide-gray-700" id="recent-trades"> |
| <tr class="table-row"> |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-300">AAPL</td> |
| <td class="px-4 py-3 whitespace-nowrap text-sm"> |
| <span class="px-2 py-1 rounded-full bg-opacity-20 bg-green-500 text-green-400">BUY</span> |
| </td> |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-400">10</td> |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-400">$185.42</td> |
| <td class="px-4 py-3 whitespace-nowrap text-sm"> |
| <span class="px-2 py-1 rounded-full bg-opacity-20 bg-green-500 text-green-400">FILLED</span> |
| </td> |
| </tr> |
| <tr class="table-row"> |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-300">TSLA</td> |
| <td class="px-4 py-3 whitespace-nowrap text-sm"> |
| <span class="px-2 py-1 rounded-full bg-opacity-20 bg-red-500 text-red-400">SELL</span> |
| </td> |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-400">5</td> |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-400">$245.67</td> |
| <td class="px-4 py-3 whitespace-nowrap text-sm"> |
| <span class="px-2 py-1 rounded-full bg-opacity-20 bg-green-500 text-green-400">FILLED</span> |
| </td> |
| </tr> |
| <tr class="table-row"> |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-300">MSFT</td> |
| <td class="px-4 py-3 whitespace-nowrap text-sm"> |
| <span class="px-2 py-1 rounded-full bg-opacity-20 bg-green-500 text-green-400">BUY</span> |
| </td> |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-400">15</td> |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-400">$312.89</td> |
| <td class="px-4 py-3 whitespace-nowrap text-sm"> |
| <span class="px-2 py-1 rounded-full bg-opacity-20 bg-yellow-500 text-yellow-400">PARTIAL</span> |
| </td> |
| </tr> |
| <tr class="table-row"> |
| <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-300">AMZN</td> |
| <td class="px-4 py-3 whitespace-nowrap text-sm"> |
| <span class="px-2 py-1 rounded-full bg-opacity-20 bg-red-500 text-red-400">SELL</span> |
| </td> |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-400">8</td> |
| <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-400">$156.78</td> |
| <td class="px-4 py-3 whitespace-nowrap text-sm"> |
| <span class="px-2 py-1 rounded-full bg-opacity-20 bg-green-500 text-green-400">FILLED</span> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| |
| |
| <div class="card p-4 rounded-lg shadow-sm card-hover"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="font-semibold text-gray-300">AI Trading Signals</h2> |
| <div class="flex items-center space-x-2"> |
| <span class="px-2 py-1 bg-opacity-20 bg-green-500 text-green-400 text-xs rounded-full pulse">LIVE</span> |
| <button class="text-gray-500 hover:text-primary"> |
| <i class="fas fa-cog"></i> |
| </button> |
| </div> |
| </div> |
| <div class="space-y-3 max-h-80 overflow-y-auto" id="ai-signals"> |
| <div class="flex items-center justify-between p-3 buy-bg rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-opacity-20 bg-green-500 flex items-center justify-center"> |
| <i class="fas fa-arrow-up text-green-400"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-300">AAPL</p> |
| <p class="text-xs text-gray-500">STRONG_BUY (92%)</p> |
| </div> |
| </div> |
| <div class="text-xs text-gray-500">2 min ago</div> |
| </div> |
| <div class="flex items-center justify-between p-3 hold-bg rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-opacity-20 bg-yellow-500 flex items-center justify-center"> |
| <i class="fas fa-pause text-yellow-400"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-300">TSLA</p> |
| <p class="text-xs text-gray-500">HOLD (65%)</p> |
| </div> |
| </div> |
| <div class="text-xs text-gray-500">5 min ago</div> |
| </div> |
| <div class="flex items-center justify-between p-3 buy-bg rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-opacity-20 bg-green-500 flex items-center justify-center"> |
| <i class="fas fa-arrow-up text-green-400"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-300">MSFT</p> |
| <p class="text-xs text-gray-500">BUY (78%)</p> |
| </div> |
| </div> |
| <div class="text-xs text-gray-500">8 min ago</div> |
| </div> |
| <div class="flex items-center justify-between p-3 sell-bg rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-opacity-20 bg-red-500 flex items-center justify-center"> |
| <i class="fas fa-arrow-down text-red-400"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-300">GOOGL</p> |
| <p class="text-xs text-gray-500">SELL (84%)</p> |
| </div> |
| </div> |
| <div class="text-xs text-gray-500">12 min ago</div> |
| </div> |
| <div class="flex items-center justify-between p-3 buy-bg rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-opacity-20 bg-green-500 flex items-center justify-center"> |
| <i class="fas fa-arrow-up text-green-400"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-300">NVDA</p> |
| <p class="text-xs text-gray-500">BUY (81%)</p> |
| </div> |
| </div> |
| <div class="text-xs text-gray-500">15 min ago</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="card p-4 rounded-lg shadow-sm mb-8 card-hover"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="font-semibold text-gray-300">Risk Management Dashboard</h2> |
| <button class="text-primary hover:text-primary-dark text-sm font-medium"> |
| Adjust Settings |
| </button> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="p-4 bg-opacity-10 bg-gray-500 rounded-lg"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-sm font-medium text-gray-300">Position Sizing</span> |
| <span class="text-xs bg-opacity-20 bg-blue-500 text-blue-400 px-2 py-1 rounded">$10,000 max</span> |
| </div> |
| <div class="w-full bg-opacity-20 bg-gray-500 rounded-full h-1.5 mb-2"> |
| <div class="bg-blue-500 h-1.5 rounded-full" style="width: 45%"></div> |
| </div> |
| <p class="text-xs text-gray-500">Largest position: AAPL ($4,500)</p> |
| </div> |
| <div class="p-4 bg-opacity-10 bg-gray-500 rounded-lg"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-sm font-medium text-gray-300">Daily Loss Limit</span> |
| <span class="text-xs bg-opacity-20 bg-red-500 text-red-400 px-2 py-1 rounded">5% max</span> |
| </div> |
| <div class="w-full bg-opacity-20 bg-gray-500 rounded-full h-1.5 mb-2"> |
| <div class="bg-red-500 h-1.5 rounded-full" style="width: 20%"></div> |
| </div> |
| <p class="text-xs text-gray-500">Today's drawdown: 1.2%</p> |
| </div> |
| <div class="p-4 bg-opacity-10 bg-gray-500 rounded-lg"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-sm font-medium text-gray-300">Volatility Control</span> |
| <span class="text-xs bg-opacity-20 bg-purple-500 text-purple-400 px-2 py-1 rounded">VIX 20+</span> |
| </div> |
| <div class="w-full bg-opacity-20 bg-gray-500 rounded-full h-1.5 mb-2"> |
| <div class="bg-purple-500 h-1.5 rounded-full" style="width: 65%"></div> |
| </div> |
| <p class="text-xs text-gray-500">Current VIX: 14.75</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| const sidebar = document.getElementById('sidebar'); |
| const currentTimeEl = document.getElementById('current-time'); |
| const themeToggle = document.getElementById('theme-toggle'); |
| const body = document.body; |
| |
| |
| function init() { |
| updateClock(); |
| setInterval(updateClock, 1000); |
| initCharts(); |
| |
| |
| setInterval(simulateLiveUpdates, 5000); |
| } |
| |
| |
| function updateClock() { |
| const now = new Date(); |
| const options = { weekday: 'long', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' }; |
| currentTimeEl.textContent = now.toLocaleDateString('en-US', options); |
| } |
| |
| |
| function initCharts() { |
| |
| const performanceOptions = { |
| series: [{ |
| name: 'Account Value', |
| data: [20000, 21000, 21500, 22500, 23000, 24000, 25000, 25500, 26000, 26500, 27000, 27500] |
| }], |
| chart: { |
| height: 300, |
| type: 'area', |
| toolbar: { |
| show: false |
| }, |
| zoom: { |
| enabled: false |
| }, |
| foreColor: '#D1D4DC' |
| }, |
| dataLabels: { |
| enabled: false |
| }, |
| stroke: { |
| curve: 'smooth', |
| width: 2, |
| colors: ['#2962FF'] |
| }, |
| fill: { |
| type: 'gradient', |
| gradient: { |
| shadeIntensity: 1, |
| opacityFrom: 0.7, |
| opacityTo: 0.2, |
| stops: [0, 90, 100] |
| }, |
| colors: ['#2962FF'] |
| }, |
| colors: ['#2962FF'], |
| xaxis: { |
| categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], |
| labels: { |
| style: { |
| colors: '#6b7280', |
| fontSize: '12px' |
| } |
| } |
| }, |
| yaxis: { |
| labels: { |
| style: { |
| colors: '#6b7280', |
| fontSize: '12px' |
| }, |
| formatter: function(value) { |
| return '$' + value.toLocaleString(); |
| } |
| } |
| }, |
| tooltip: { |
| theme: 'dark', |
| y: { |
| formatter: function(value) { |
| return '$' + value.toLocaleString() |
| } |
| } |
| }, |
| grid: { |
| borderColor: '#2A2E39', |
| strokeDashArray: 4, |
| yaxis: { |
| lines: { |
| show: true |
| } |
| } |
| } |
| }; |
| |
| const performanceChart = new ApexCharts(document.querySelector("#performance-chart"), performanceOptions); |
| performanceChart.render(); |
| } |
| |
| |
| function simulateLiveUpdates() { |
| |
| const todayPnlEl = document.getElementById('today-pnl'); |
| const currentPnl = parseFloat(todayPnlEl.textContent.replace(/[^0-9.-]/g, '')); |
| const change = (Math.random() * 100 - 50).toFixed(2); |
| const newPnl = (currentPnl + parseFloat(change)).toFixed(2); |
| |
| todayPnlEl.textContent = `${newPnl >= 0 ? '+' : ''}$${Math.abs(newPnl).toFixed(2)}`; |
| todayPnlEl.className = `text-2xl font-bold ${newPnl >= 0 ? 'profit-text' : 'loss-text'}`; |
| |
| |
| const openPositionsEl = document.getElementById('open-positions'); |
| const currentPositions = parseInt(openPositionsEl.textContent); |
| const positionChange = Math.random() > 0.5 ? 1 : -1; |
| const newPositions = Math.max(0, currentPositions + positionChange); |
| openPositionsEl.textContent = newPositions; |
| |
| |
| todayPnlEl.classList.add('blink'); |
| setTimeout(() => todayPnlEl.classList.remove('blink'), 1000); |
| } |
| |
| |
| function toggleMobileMenu() { |
| sidebar.classList.toggle('sidebar-open'); |
| } |
| |
| |
| function toggleTheme() { |
| body.classList.toggle('dark-theme'); |
| body.classList.toggle('light-theme'); |
| |
| const icon = themeToggle.querySelector('i'); |
| if (body.classList.contains('dark-theme')) { |
| icon.classList.remove('fa-sun'); |
| icon.classList.add('fa-moon'); |
| } else { |
| icon.classList.remove('fa-moon'); |
| icon.classList.add('fa-sun'); |
| } |
| |
| |
| document.querySelector("#performance-chart").innerHTML = ''; |
| initCharts(); |
| } |
| |
| |
| mobileMenuButton.addEventListener('click', toggleMobileMenu); |
| themeToggle.addEventListener('click', toggleTheme); |
| |
| |
| init(); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Arod94/my-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
