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 - Strategy Analyzer</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; | |
| } | |
| .analysis-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .code-block { | |
| font-family: 'Courier New', Courier, monospace; | |
| background-color: #f3f4f6; | |
| padding: 1rem; | |
| border-radius: 0.375rem; | |
| overflow-x: auto; | |
| } | |
| </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-primary text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> | |
| Analyzer | |
| </a> | |
| <a href="backtester.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"> | |
| 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 Analyzer | |
| </h2> | |
| <p class="mt-2 text-sm text-gray-500">Deep analysis of trading strategies using AI</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 Analysis | |
| </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">Strategy Selection</h3> | |
| <p class="mt-1 text-sm text-gray-500">Choose a strategy to analyze</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="analysis-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm transition-all duration-300 cursor-pointer"> | |
| <div class="p-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i data-feather="bar-chart-2" class="text-blue-500 h-5 w-5"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-900">Golden Cross</h4> | |
| <p class="text-xs text-gray-500">EMA 50/200 Crossover</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="analysis-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm transition-all duration-300 cursor-pointer"> | |
| <div class="p-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i data-feather="activity" class="text-purple-500 h-5 w-5"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-900">RSI Divergence</h4> | |
| <p class="text-xs text-gray-500">4H Timeframe</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="analysis-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm transition-all duration-300 cursor-pointer"> | |
| <div class="p-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i data-feather="trending-up" class="text-green-500 h-5 w-5"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-900">Volume Spike</h4> | |
| <p class="text-xs text-gray-500">Daily Breakouts</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </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">AI Analysis Results</h3> | |
| <p class="mt-1 text-sm text-gray-500">Comprehensive breakdown of the strategy</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 lg: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">Strategy Effectiveness</div> | |
| <div class="mt-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-1 text-xs text-gray-500">78% Success Probability</div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="text-sm font-medium text-gray-500">Market Conditions</div> | |
| <div class="mt-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-1 text-xs text-gray-500">65% Current Fit</div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="text-sm font-medium text-gray-500">Risk Level</div> | |
| <div class="mt-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-yellow-600 h-2.5 rounded-full" style="width: 42%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-1 text-xs text-gray-500">Medium Risk</div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h4 class="text-lg font-medium text-gray-900 mb-4">Key Insights</h4> | |
| <div class="prose max-w-none"> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li>This strategy performs best in trending markets with clear direction</li> | |
| <li>Effectiveness decreases during periods of high volatility or ranging markets</li> | |
| <li>Optimal when combined with volume confirmation (increases win rate by ~15%)</li> | |
| <li>Consider adding a stop-loss at 1.5x the average true range for better risk management</li> | |
| <li>Backtest shows 12% improvement on 4H timeframe vs daily in current market conditions</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h4 class="text-lg font-medium text-gray-900 mb-4">Recommended Parameters</h4> | |
| <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">Parameter</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Default</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Optimized</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Improvement</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-900">Short EMA</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">50</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">42</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">+5.2%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Long EMA</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">200</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">185</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">+3.8%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Stop Loss</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1.5%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">+7.1%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Take Profit</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">3.2%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">+2.9%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h4 class="text-lg font-medium text-gray-900 mb-4">Pine Script Code</h4> | |
| <div class="code-block"> | |
| <pre>//@version=5 | |
| strategy("Optimized Golden Cross", overlay=true) | |
| // Inputs | |
| shortEma = input(42, title="Short EMA Length") | |
| longEma = input(185, title="Long EMA Length") | |
| slPerc = input(1.5, title="Stop Loss %") / 100 | |
| tpPerc = input(3.2, title="Take Profit %") / 100 | |
| // Calculations | |
| emaShort = ta.ema(close, shortEma) | |
| emaLong = ta.ema(close, longEma) | |
| // Entry Conditions | |
| longCondition = ta.crossover(emaShort, emaLong) | |
| shortCondition = ta.crossunder(emaShort, emaLong) | |
| // Strategy | |
| if (longCondition) | |
| strategy.entry("Long", strategy.long) | |
| strategy.exit("Exit Long", "Long", stop=close * (1 - slPerc), limit=close * (1 + tpPerc)) | |
| if (shortCondition) | |
| strategy.entry("Short", strategy.short) | |
| strategy.exit("Exit Short", "Short", stop=close * (1 + slPerc), limit=close * (1 - tpPerc)) | |
| // Plotting | |
| plot(emaShort, color=color.blue, title="Short EMA") | |
| plot(emaLong, color=color.red, title="Long EMA")</pre> | |
| </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="copy" class="-ml-1 mr-2 h-4 w-4"></i> | |
| Copy to Clipboard | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-medium text-gray-900 mb-4">Performance Simulation</h4> | |
| <canvas id="simulationChart" height="300"></canvas> | |
| </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(); | |
| // Simulation Chart | |
| const simCtx = document.getElementById('simulationChart').getContext('2d'); | |
| const simChart = new Chart(simCtx, { | |
| type: 'line', | |
| data: { | |
| labels: Array.from({length: 12}, (_, i) => `Week ${i+1}`), | |
| datasets: [ | |
| { | |
| label: 'Original Strategy', | |
| data: [100, 103, 105, 108, 110, 112, 115, 113, 116, 118, 120, 122], | |
| borderColor: '#3B82F6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Optimized Strategy', | |
| data: [100, 105, 108, 113, 117, 121, 126, 124, 129, 134, 138, 145], | |
| 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 + '%'; | |
| } | |
| return label; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| ticks: { | |
| callback: function(value) { | |
| return value + '%'; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Animation | |
| anime({ | |
| targets: '.analysis-card', | |
| opacity: [0, 1], | |
| translateY: [20, 0], | |
| delay: anime.stagger(100), | |
| easing: 'easeOutExpo' | |
| }); | |
| </script> | |
| </body> | |
| </html> |