Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quantitative Trading Model</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> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| } | |
| .signal-buy { | |
| background-color: rgba(16, 185, 129, 0.1); | |
| border-left: 3px solid #10b981; | |
| } | |
| .signal-sell { | |
| background-color: rgba(239, 68, 68, 0.1); | |
| border-left: 3px solid #ef4444; | |
| } | |
| .signal-neutral { | |
| background-color: rgba(59, 130, 246, 0.1); | |
| border-left: 3px solid #3b82f6; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-white w-64 flex-shrink-0 shadow-lg hidden md:block"> | |
| <div class="p-4 gradient-bg text-white"> | |
| <h1 class="text-xl font-bold">Quant Trading Model</h1> | |
| <p class="text-blue-200 text-sm">Hybrid Momentum & Mean Reversion</p> | |
| </div> | |
| <nav class="mt-4"> | |
| <div class="px-4 py-2"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="w-full px-3 py-2 bg-gray-100 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <a href="#" class="block px-4 py-3 text-blue-600 bg-blue-50 font-medium"> | |
| <i class="fas fa-chart-line mr-2"></i> Dashboard | |
| </a> | |
| <a href="#" class="block px-4 py-3 text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-cogs mr-2"></i> Strategy Configuration | |
| </a> | |
| <a href="#" class="block px-4 py-3 text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-database mr-2"></i> Data Management | |
| </a> | |
| <a href="#" class="block px-4 py-3 text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-chart-bar mr-2"></i> Backtesting | |
| </a> | |
| <a href="#" class="block px-4 py-3 text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-robot mr-2"></i> Live Trading | |
| </a> | |
| <a href="#" class="block px-4 py-3 text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-file-alt mr-2"></i> Reports | |
| </a> | |
| <a href="#" class="block px-4 py-3 text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-bell mr-2"></i> Alerts | |
| </a> | |
| </div> | |
| </nav> | |
| <div class="absolute bottom-0 w-full p-4 border-t"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-8 h-8 rounded-full"> | |
| <div class="ml-2"> | |
| <p class="text-sm font-medium">John Doe</p> | |
| <p class="text-xs text-gray-500">Quantitative Analyst</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm z-10"> | |
| <div class="flex items-center justify-between px-6 py-3"> | |
| <div class="flex items-center"> | |
| <button class="md:hidden mr-4 text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <h2 class="text-lg font-semibold text-gray-800">Strategy Dashboard</h2> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i class="fas fa-question-circle"></i> | |
| </button> | |
| <div class="relative"> | |
| <button class="flex items-center focus:outline-none"> | |
| <span class="mr-2 text-sm font-medium">John Doe</span> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-8 h-8 rounded-full"> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-100"> | |
| <!-- Strategy Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6 fade-in"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Total Return</p> | |
| <h3 class="text-2xl font-bold text-green-600">+42.8%</h3> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-full"> | |
| <i class="fas fa-chart-line text-green-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-1 w-full bg-gray-200 rounded-full"> | |
| <div class="h-1 bg-green-500 rounded-full" style="width: 75%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Outperforming benchmark by 18.2%</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 fade-in"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Sharpe Ratio</p> | |
| <h3 class="text-2xl font-bold text-blue-600">1.87</h3> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-full"> | |
| <i class="fas fa-bolt text-blue-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center"> | |
| <span class="text-xs font-medium text-blue-600">Excellent</span> | |
| <span class="text-xs text-gray-500 ml-auto">Benchmark: 1.12</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 fade-in"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Max Drawdown</p> | |
| <h3 class="text-2xl font-bold text-red-600">-12.4%</h3> | |
| </div> | |
| <div class="bg-red-100 p-3 rounded-full"> | |
| <i class="fas fa-arrow-down text-red-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center"> | |
| <span class="text-xs font-medium text-red-600">Controlled</span> | |
| <span class="text-xs text-gray-500 ml-auto">Benchmark: -18.7%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 fade-in"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Win Rate</p> | |
| <h3 class="text-2xl font-bold text-purple-600">64.2%</h3> | |
| </div> | |
| <div class="bg-purple-100 p-3 rounded-full"> | |
| <i class="fas fa-trophy text-purple-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center"> | |
| <span class="text-xs font-medium text-purple-600">Good</span> | |
| <span class="text-xs text-gray-500 ml-auto">Avg Trade: $142</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts and Data --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Equity Curve --> | |
| <div class="bg-white rounded-lg shadow p-6 lg:col-span-2 fade-in"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">Equity Curve</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-blue-100 text-blue-600 rounded-full">1Y</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">3Y</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">5Y</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">All</button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="equityChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Strategy Allocation --> | |
| <div class="bg-white rounded-lg shadow p-6 fade-in"> | |
| <h3 class="text-lg font-semibold mb-4">Strategy Allocation</h3> | |
| <div class="flex justify-center"> | |
| <div class="w-40 h-40"> | |
| <canvas id="allocationChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="mt-4 space-y-2"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div> | |
| <span class="text-sm">Momentum (58%)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> | |
| <span class="text-sm">Mean Reversion (32%)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-gray-400 rounded-full mr-2"></div> | |
| <span class="text-sm">Cash (10%)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Signals and Performance --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Recent Signals --> | |
| <div class="bg-white rounded-lg shadow p-6 fade-in"> | |
| <h3 class="text-lg font-semibold mb-4">Recent Trading Signals</h3> | |
| <div class="space-y-3 max-h-96 overflow-y-auto scrollbar-hide"> | |
| <div class="p-3 rounded-lg signal-buy"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="font-medium">Buy Signal</span> | |
| <p class="text-xs text-gray-500">ES1! (E-mini S&P 500)</p> | |
| </div> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Momentum</span> | |
| </div> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <span class="text-sm">Entry: 4523.25</span> | |
| <span class="text-xs text-gray-500">2 mins ago</span> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded-lg signal-sell"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="font-medium">Sell Signal</span> | |
| <p class="text-xs text-gray-500">NQ1! (Nasdaq 100)</p> | |
| </div> | |
| <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">Reversion</span> | |
| </div> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <span class="text-sm">Entry: 15432.50</span> | |
| <span class="text-xs text-gray-500">15 mins ago</span> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded-lg signal-neutral"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="font-medium">Neutral Signal</span> | |
| <p class="text-xs text-gray-500">RTY1! (Russell 2000)</p> | |
| </div> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Regime Shift</span> | |
| </div> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <span class="text-sm">Exit: 1987.75</span> | |
| <span class="text-xs text-gray-500">32 mins ago</span> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded-lg signal-buy"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="font-medium">Buy Signal</span> | |
| <p class="text-xs text-gray-500">CL1! (Crude Oil)</p> | |
| </div> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Momentum</span> | |
| </div> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <span class="text-sm">Entry: 82.45</span> | |
| <span class="text-xs text-gray-500">1 hour ago</span> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded-lg signal-sell"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="font-medium">Sell Signal</span> | |
| <p class="text-xs text-gray-500">GC1! (Gold)</p> | |
| </div> | |
| <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">Reversion</span> | |
| </div> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <span class="text-sm">Entry: 1942.30</span> | |
| <span class="text-xs text-gray-500">2 hours ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Performance Metrics --> | |
| <div class="bg-white rounded-lg shadow p-6 fade-in lg:col-span-2"> | |
| <h3 class="text-lg font-semibold mb-4">Detailed Performance Metrics</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="text-sm font-medium text-gray-500 mb-2">Risk Metrics</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Sharpe Ratio</span> | |
| <span class="font-medium">1.87</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-blue-600 h-1.5 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Sortino Ratio</span> | |
| <span class="font-medium">2.34</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-green-600 h-1.5 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Max Drawdown</span> | |
| <span class="font-medium">-12.4%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-red-600 h-1.5 rounded-full" style="width: 40%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="text-sm font-medium text-gray-500 mb-2">Trade Metrics</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Win Rate</span> | |
| <span class="font-medium">64.2%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-purple-600 h-1.5 rounded-full" style="width: 64%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Profit Factor</span> | |
| <span class="font-medium">1.92</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-yellow-600 h-1.5 rounded-full" style="width: 76%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Avg Trade Duration</span> | |
| <span class="font-medium">2.4h</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-indigo-600 h-1.5 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="text-sm font-medium text-gray-500 mb-2">Market Regimes</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Trending Markets</span> | |
| <span class="font-medium">+28.7%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-blue-600 h-1.5 rounded-full" style="width: 72%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Ranging Markets</span> | |
| <span class="font-medium">+14.1%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-green-600 h-1.5 rounded-full" style="width: 35%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>High Volatility</span> | |
| <span class="font-medium">+5.2%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-red-600 h-1.5 rounded-full" style="width: 13%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="text-sm font-medium text-gray-500 mb-2">Strategy Components</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Momentum</span> | |
| <span class="font-medium">+32.4%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-purple-600 h-1.5 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Mean Reversion</span> | |
| <span class="font-medium">+10.4%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-yellow-600 h-1.5 rounded-full" style="width: 21%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Trades --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden fade-in"> | |
| <div class="p-6 border-b"> | |
| <h3 class="text-lg font-semibold">Recent Trades</h3> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Symbol</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Entry</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Exit</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">P&L</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">ES1!</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Buy</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4523.25</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4541.75</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">+$368.50</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1h 24m</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Closed</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">NQ1!</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sell</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15432.50</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15387.25</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">+$542.75</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2h 15m</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Closed</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CL1!</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Buy</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">82.45</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">+$127.80</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">45m</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Active</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">GC1!</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sell</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1942.30</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1935.75</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">+$655.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3h 8m</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Closed</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">RTY1!</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Buy</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1987.75</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1975.50</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">-$122.50</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4h 22m</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Stopped</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200"> | |
| <div class="flex-1 flex justify-between sm:hidden"> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Previous </a> | |
| <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Next </a> | |
| </div> | |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">124</span> trades | |
| </p> | |
| </div> | |
| <div> | |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Previous</span> | |
| <i class="fas fa-chevron-left"></i> | |
| </a> | |
| <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a> | |
| <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"> ... </span> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 8 </a> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Next</span> | |
| <i class="fas fa-chevron-right"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Equity Curve Chart | |
| const equityCtx = document.getElementById('equityChart').getContext('2d'); | |
| const equityChart = new Chart(equityCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | |
| datasets: [ | |
| { | |
| label: 'Strategy', | |
| data: [100000, 102500, 104800, 107200, 110500, 112300, 115600, 117800, 120400, 123500, 126800, 130200], | |
| borderColor: '#3b82f6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.05)', | |
| borderWidth: 2, | |
| fill: true, | |
| tension: 0.3 | |
| }, | |
| { | |
| label: 'Benchmark', | |
| data: [100000, 101200, 102800, 104500, 106000, 107500, 109200, 110800, 112500, 114000, 115500, 117200], | |
| borderColor: '#94a3b8', | |
| backgroundColor: 'rgba(148, 163, 184, 0.05)', | |
| borderWidth: 1, | |
| borderDash: [5, 5], | |
| fill: true, | |
| tension: 0.3 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false, | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| ticks: { | |
| callback: function(value) { | |
| return '$' + value.toLocaleString(); | |
| } | |
| } | |
| } | |
| }, | |
| interaction: { | |
| mode: 'nearest', | |
| axis: 'x', | |
| intersect: false | |
| } | |
| } | |
| }); | |
| // Allocation Chart | |
| const allocationCtx = document.getElementById('allocationChart').getContext('2d'); | |
| const allocationChart = new Chart(allocationCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Momentum', 'Mean Reversion', 'Cash'], | |
| datasets: [{ | |
| data: [58, 32, 10], | |
| backgroundColor: [ | |
| '#3b82f6', | |
| '#10b981', | |
| '#94a3b8' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| cutout: '70%', | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| } | |
| } | |
| }); | |
| // Fade in animation for elements | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| fadeElements.forEach((el, index) => { | |
| setTimeout(() => { | |
| el.style.opacity = '1'; | |
| }, index * 100); | |
| }); | |
| }); | |
| // Simulate real-time updates | |
| setInterval(() => { | |
| // Update equity chart with new data point | |
| const newLabel = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); | |
| const newData = equityChart.data.datasets[0].data[equityChart.data.datasets[0].data.length - 1] + | |
| (Math.random() * 2000 - 1000); | |
| const newBenchmark = equityChart.data.datasets[1].data[equityChart.data.datasets[1].data.length - 1] + | |
| (Math.random() * 1000 - 500); | |
| // Shift data if too many points | |
| if (equityChart.data.labels.length > 20) { | |
| equityChart.data.labels.shift(); | |
| equityChart.data.datasets[0].data.shift(); | |
| equityChart.data.datasets[1].data.shift(); | |
| } | |
| equityChart.data.labels.push(newLabel); | |
| equityChart.data.datasets[0].data.push(newData); | |
| equityChart.data.datasets[1].data.push(newBenchmark); | |
| equityChart.update(); | |
| // Simulate new signal | |
| const signals = ['Buy Signal', 'Sell Signal', 'Neutral Signal']; | |
| const instruments = ['ES1!', 'NQ1!', 'CL1!', 'GC1!', 'RTY1!']; | |
| const signalTypes = ['Momentum', 'Reversion', 'Regime Shift']; | |
| const randomSignal = signals[Math.floor(Math.random() * signals.length)]; | |
| const randomInstrument = instruments[Math.floor(Math.random() * instruments.length)]; | |
| const randomPrice = (Math.random() * 5000 + 1000).toFixed(2); | |
| const randomType = signalTypes[Math.floor(Math.random() * signalTypes.length)]; | |
| const signalContainer = document.querySelector('.space-y-3'); | |
| const newSignal = document.createElement('div'); | |
| if (randomSignal === 'Buy Signal') { | |
| newSignal.className = 'p-3 rounded-lg signal-buy'; | |
| } else if (randomSignal === 'Sell Signal') { | |
| newSignal.className = 'p-3 rounded-lg signal-sell'; | |
| } else { | |
| newSignal.className = 'p-3 rounded-lg signal-neutral'; | |
| } | |
| newSignal.innerHTML = ` | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="font-medium">${randomSignal}</span> | |
| <p class="text-xs text-gray-500">${randomInstrument}</p> | |
| </div> | |
| <span class="text-xs ${randomSignal === 'Buy Signal' ? 'bg-green-100 text-green-800' : | |
| randomSignal === 'Sell Signal' ? 'bg-red-100 text-red-800' : | |
| 'bg-blue-100 text-blue-800'} px-2 py-1 rounded-full">${randomType}</span> | |
| </div> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <span class="text-sm">${randomSignal === 'Neutral Signal' ? 'Exit' : 'Entry'}: ${randomPrice}</span> | |
| <span class="text-xs text-gray-500">just now</span> | |
| </div> | |
| `; | |
| signalContainer.prepend(newSignal); | |
| // Keep only last 5 signals | |
| if (signalContainer.children.length > 5) { | |
| signalContainer.removeChild(signalContainer.lastChild); | |
| } | |
| }, 10000); // Update every 10 seconds | |
| </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=virtualpixelz/quant-trader" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |