Roodje/quantumprofit-algorithmx
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Backtesting | QuantumProfit AlgorithmX</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');12 13 body {14 font-family: 'Inter', sans-serif;15 background-color: #111827;16 color: #f3f4f6;17 }18 19 .dashboard-card {20 backdrop-filter: blur(10px);21 background-color: rgba(255, 255, 255, 0.08);22 transition: all 0.3s ease;23 }24 </style>25</head>26<body>27 <!-- Navbar -->28 <nav class="bg-gray-800 bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-700 fixed w-full z-10">29 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">30 <div class="flex items-center justify-between h-16">31 <div class="flex items-center">32 <div class="flex-shrink-0">33 <span class="text-blue-400 font-bold text-xl flex items-center">34 <i data-feather="activity" class="mr-2"></i>35 QuantumProfit36 </span>37 </div>38 <div class="hidden md:block">39 <div class="ml-10 flex items-baseline space-x-4">40 <a href="index.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>41 <a href="strategies.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Strategies</a>42 <a href="backtesting.html" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Backtesting</a>43 <a href="live-trading.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Live Trading</a>44 <a href="reports.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Reports</a>45 </div>46 </div>47 </div>48 <div class="hidden md:block">49 <div class="ml-4 flex items-center md:ml-6">50 <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">51 <i data-feather="bell"></i>52 </button>53 <div class="ml-3 relative">54 <div>55 <button type="button" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu" aria-expanded="false" aria-haspopup="true">56 <span class="sr-only">Open user menu</span>57 <img class="h-8 w-8 rounded-full" src="https://static.photos/technology/200x200/42" alt="">58 </button>59 </div>60 </div>61 </div>62 </div>63 <div class="-mr-2 flex md:hidden">64 <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">65 <span class="sr-only">Open main menu</span>66 <i data-feather="menu"></i>67 </button>68 </div>69 </div>70 </div>71 </nav>72 73 <!-- Main Content -->74 <div class="pt-20 pb-10">75 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">76 <!-- Header -->77 <div class="md:flex md:items-center md:justify-between mb-8">78 <div class="flex-1 min-w-0">79 <h1 class="text-3xl font-bold leading-tight text-white">Backtesting Lab</h1>80 <p class="mt-2 text-sm text-gray-300">Test your trading strategies against historical market data</p>81 </div>82 <div class="mt-4 flex md:mt-0 md:ml-4">83 <a href="new-backtest.html" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">84 <i data-feather="plus" class="mr-2 h-4 w-4"></i>85 New Backtest86 </a>87 </div>88 </div>89 90 <!-- Backtest Configuration -->91 <div class="dashboard-card rounded-lg border border-gray-700 p-6 mb-8">92 <h2 class="text-xl font-semibold text-white mb-4">Backtest Configuration</h2>93 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">94 <div>95 <label class="block text-sm font-medium text-gray-300 mb-1">Strategy</label>96 <select class="bg-gray-800 border border-gray-700 text-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">97 <option selected>Select Strategy</option>98 <option>Sentiment Momentum</option>99 <option>Neural Net Predictor</option>100 <option>Volatility Reversion</option>101 <option>Breakout Detector</option>102 </select>103 </div>104 <div>105 <label class="block text-sm font-medium text-gray-300 mb-1">Market</label>106 <select class="bg-gray-800 border border-gray-700 text-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">107 <option selected>US Stocks</option>108 <option>Crypto</option>109 <option>Forex</option>110 <option>Futures</option>111 </select>112 </div>113 <div>114 <label class="block text-sm font-medium text-gray-300 mb-1">Timeframe</label>115 <select class="bg-gray-800 border border-gray-700 text-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">116 <option selected>1D</option>117 <option>1W</option>118 <option>1M</option>119 <option>1Y</option>120 <option>Custom</option>121 </select>122 </div>123 <div>124 <label class="block text-sm font-medium text-gray-300 mb-1">From Date</label>125 <input type="date" class="bg-gray-800 border border-gray-700 text-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">126 </div>127 <div>128 <label class="block text-sm font-medium text-gray-300 mb-1">To Date</label>129 <input type="date" class="bg-gray-800 border border-gray-700 text-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">130 </div>131 <div class="flex items-end">132 <button class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg">133 Run Backtest134 </button>135 </div>136 </div>137 </div>138 139 <!-- Backtest Results -->140 <div class="dashboard-card rounded-lg border border-gray-700 p-6 mb-8">141 <h2 class="text-xl font-semibold text-white mb-4">Backtest Results</h2>142 <div class="overflow-x-auto">143 <table class="min-w-full divide-y divide-gray-700">144 <thead>145 <tr>146 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Strategy</th>147 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Date Range</th>148 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Trades</th>149 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Win Rate</th>150 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Profit</th>151 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Actions</th>152 </tr>153 </thead>154 <tbody class="bg-gray-800 divide-y divide-gray-700">155 <tr>156 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">Sentiment Momentum</td>157 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">2023-01-01 to 2023-06-30</td>158 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">342</td>159 <td class="px-6 py-4 whitespace-nowrap text-sm text-green-400">78.3%</td>160 <td class="px-6 py-4 whitespace-nowrap text-sm text-green-400">+$8,421.15</td>161 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">162 <a href="#" class="text-blue-400 hover:text-blue-300 mr-3">View</a>163 <a href="#" class="text-blue-400 hover:text-blue-300">Export</a>164 </td>165 </tr>166 <tr>167 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">Neural Net Predictor</td>168 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">2023-01-01 to 2023-06-30</td>169 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">128</td>170 <td class="px-6 py-4 whitespace-nowrap text-sm text-green-400">65.7%</td>171 <td class="px-6 py-4 whitespace-nowrap text-sm text-green-400">+$5,327.89</td>172 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">173 <a href="#" class="text-blue-400 hover:text-blue-300 mr-3">View</a>174 <a href="#" class="text-blue-400 hover:text-blue-300">Export</a>175 </td>176 </tr>177 <tr>178 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">Volatility Reversion</td>179 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">2023-01-01 to 2023-06-30</td>180 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">215</td>181 <td class="px-6 py-4 whitespace-nowrap text-sm text-green-400">71.2%</td>182 <td class="px-6 py-4 whitespace-nowrap text-sm text-green-400">+$6,842.73</td>183 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">184 <a href="#" class="text-blue-400 hover:text-blue-300 mr-3">View</a>185 <a href="#" class="text-blue-400 hover:text-blue-300">Export</a>186 </td>187 </tr>188 </tbody>189 </table>190 </div>191 </div>192 </div>193 </div>194 195 <script>196 // Initialize Feather Icons197 feather.replace();198 </script>199</body>200</html>