Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TradeGenius Nexus - Backtester</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script> | |
| <style> | |
| .gradient-text { | |
| background: linear-gradient(45deg, #3B82F6, #10B981); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .strategy-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| border-color: #10B981; | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: #10B981; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="trending-up" class="text-blue-500 h-8 w-8"></i> | |
| <span class="ml-2 text-xl font-bold gradient-text">TradeGenius Nexus</span> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> | |
| Dashboard | |
| </a> | |
| <a href="library.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> | |
| Library | |
| </a> | |
| <a href="analyzer.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> | |
| Analyzer | |
| </a> | |
| <a href="backtester.html" class="border-primary text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> | |
| Backtester | |
| </a> | |
| <a href="settings.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> | |
| Settings | |
| </a> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"> | |
| <i data-feather="menu" class="block h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="md:flex md:items-center md:justify-between mb-8"> | |
| <div class="flex-1 min-w-0"> | |
| <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate"> | |
| Strategy Backtesting | |
| </h2> | |
| <p class="mt-2 text-sm text-gray-500">Test your trading strategies against historical data</p> | |
| </div> | |
| <div class="mt-4 md:mt-0 md:ml-4"> | |
| <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i data-feather="plus" class="-ml-1 mr-2 h-4 w-4"></i> | |
| New Backtest | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white shadow rounded-lg mb-8"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Backtest Configuration</h3> | |
| <p class="mt-1 text-sm text-gray-500">Set parameters for your strategy backtest</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> | |
| <div class="sm:col-span-3"> | |
| <label for="strategy-select" class="block text-sm font-medium text-gray-700">Strategy</label> | |
| <select id="strategy-select" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md"> | |
| <option>Golden Cross (EMA 50/200)</option> | |
| <option>RSI Divergence</option> | |
| <option>MACD Crossover</option> | |
| <option>Bollinger Bands Breakout</option> | |
| <option>Volume Spike</option> | |
| </select> | |
| </div> | |
| <div class="sm:col-span-3"> | |
| <label for="symbol" class="block text-sm font-medium text-gray-700">Symbol</label> | |
| <select id="symbol" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md"> | |
| <option>BTC/USD</option> | |
| <option>ETH/USD</option> | |
| <option>EUR/USD</option> | |
| <option>AAPL</option> | |
| <option>TSLA</option> | |
| </select> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label for="timeframe" class="block text-sm font-medium text-gray-700">Timeframe</label> | |
| <select id="timeframe" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md"> | |
| <option>1 Minute</option> | |
| <option>5 Minutes</option> | |
| <option>15 Minutes</option> | |
| <option>1 Hour</option> | |
| <option>4 Hours</option> | |
| <option>1 Day</option> | |
| <option>1 Week</option> | |
| </select> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label for="start-date" class="block text-sm font-medium text-gray-700">Start Date</label> | |
| <input type="date" id="start-date" class="mt-1 block w-full shadow-sm sm:text-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md" value="2023-01-01"> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label for="end-date" class="block text-sm font-medium text-gray-700">End Date</label> | |
| <input type="date" id="end-date" class="mt-1 block w-full shadow-sm sm:text-sm focus:ring-primary focus:border-primary border-gray-300 rounded-md" value="2023-12-31"> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <div class="flex items-start"> | |
| <div class="flex items-center h-5"> | |
| <input id="optimize" name="optimize" type="checkbox" checked class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="optimize" class="font-medium text-gray-700">Parameter Optimization</label> | |
| <p class="text-gray-500">Automatically find optimal parameters for this strategy</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in"> | |
| <input type="checkbox" name="walk-forward" id="walk-forward" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/> | |
| <label for="walk-forward" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label> | |
| </div> | |
| <div class="ml-1 text-sm"> | |
| <label for="walk-forward" class="font-medium text-gray-700">Walk-Forward Analysis</label> | |
| <p class="text-gray-500">Test strategy robustness across multiple time periods</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button type="button" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i data-feather="play" class="-ml-1 mr-2 h-4 w-4"></i> | |
| Run Backtest | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white shadow rounded-lg mb-8"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Backtest Results</h3> | |
| <p class="mt-1 text-sm text-gray-500">Performance metrics from your backtest</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="text-sm font-medium text-gray-500">Net Profit</div> | |
| <div class="mt-1 text-2xl font-semibold text-green-600">+$4,321.45</div> | |
| <div class="mt-1 text-sm text-gray-500">+12.4% ROI</div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="text-sm font-medium text-gray-500">Win Rate</div> | |
| <div class="mt-1 text-2xl font-semibold text-gray-900">84.5%</div> | |
| <div class="mt-1 text-sm text-gray-500">152 wins / 28 losses</div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="text-sm font-medium text-gray-500">Max Drawdown</div> | |
| <div class="mt-1 text-2xl font-semibold text-red-600">-8.2%</div> | |
| <div class="mt-1 text-sm text-gray-500">$2,145 at lowest point</div> | |
| </div> | |
| </div> | |
| <canvas id="backtestChart" height="300"></canvas> | |
| </div> | |
| </div> | |
| <div class="bg-white shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Trade History</h3> | |
| <p class="mt-1 text-sm text-gray-500">Detailed list of all trades from backtest</p> | |
| </div> | |
| <div class="p-6"> | |
| <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">Date</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">Profit</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-01-05</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">Buy</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$16,842</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$17,245</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">+$403</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 days</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-01-10</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">Sell</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$17,856</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$17,210</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">+$646</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 day</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-01-15</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">Buy</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$17,501</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$18,325</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">+$824</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 days</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4 flex justify-end"> | |
| <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i data-feather="download" class="-ml-1 mr-2 h-4 w-4"></i> | |
| Export Results | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="bg-white border-t border-gray-200 mt-12"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8"> | |
| <p class="text-center text-base text-gray-500"> | |
| © 2023 TradeGenius Nexus. All rights reserved. | |
| </p> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| // Backtest Chart | |
| const backtestCtx = document.getElementById('backtestChart').getContext('2d'); | |
| const backtestChart = new Chart(backtestCtx, { | |
| type: 'line', | |
| data: { | |
| labels: Array.from({length: 12}, (_, i) => { | |
| const date = new Date(2023, i, 1); | |
| return date.toLocaleString('default', {month: 'short'}); | |
| }), | |
| datasets: [ | |
| { | |
| label: 'Strategy', | |
| data: [10000, 10500, 10800, 11200, 11500, 12000, 12500, 12200, 12600, 13000, 13500, 14000], | |
| borderColor: '#3B82F6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Buy & Hold', | |
| data: [10000, 9800, 10200, 10500, 10300, 10700, 11000, 10800, 11200, 11500, 11700, 12000], | |
| borderColor: '#10B981', | |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false, | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.dataset.label || ''; | |
| if (label) { | |
| label += ': '; | |
| } | |
| if (context.parsed.y !== null) { | |
| label += '$' + context.parsed.y.toLocaleString(); | |
| } | |
| return label; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| ticks: { | |
| callback: function(value) { | |
| return '$' + value.toLocaleString(); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Animation | |
| anime({ | |
| targets: '.strategy-card', | |
| opacity: [0, 1], | |
| translateY: [20, 0], | |
| delay: anime.stagger(100), | |
| easing: 'easeOutExpo' | |
| }); | |
| </script> | |
| </body> | |
| </html> |