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 Library</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/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(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| </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-primary text-gray-900 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-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 Library | |
| </h2> | |
| <p class="mt-2 text-sm text-gray-500">Browse and manage your trading strategies</p> | |
| </div> | |
| <div class="mt-4 md:mt-0 md:ml-4"> | |
| <div class="flex"> | |
| <div class="relative rounded-md shadow-sm"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i data-feather="search" class="h-4 w-4 text-gray-400"></i> | |
| </div> | |
| <input type="text" name="search" id="search" class="focus:ring-primary focus:border-primary block w-full pl-10 sm:text-sm border-gray-300 rounded-md" placeholder="Search strategies"> | |
| </div> | |
| <button type="button" class="ml-3 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> | |
| Import Strategy | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex mb-6"> | |
| <div class="flex space-x-2"> | |
| <button type="button" class="inline-flex items-center px-3 py-1 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-primary"> | |
| All | |
| </button> | |
| <button type="button" class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Trend Following | |
| </button> | |
| <button type="button" class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Mean Reversion | |
| </button> | |
| <button type="button" class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Breakout | |
| </button> | |
| <button type="button" class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Scalping | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Strategy Card 1 --> | |
| <div class="strategy-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> | |
| <i data-feather="bar-chart-2" class="text-white h-6 w-6"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Golden Cross</h3> | |
| <div class="mt-1 flex flex-wrap gap-2"> | |
| <span class="badge bg-blue-100 text-blue-800">Trend Following</span> | |
| <span class="badge bg-green-100 text-green-800">Stocks</span> | |
| <span class="badge bg-purple-100 text-purple-800">4H+</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500">EMA 50/200 crossover strategy with volume confirmation. Best suited for trending markets.</p> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Win Rate: <span class="font-medium text-gray-900">78.2%</span></span> | |
| <span>Profit: <span class="font-medium text-green-600">+12.4%</span></span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button type="button" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> | |
| <i data-feather="eye" class="-ml-0.5 mr-2 h-4 w-4"></i> | |
| View Details | |
| </button> | |
| <button type="button" class="ml-3 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 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="play" class="-ml-0.5 mr-2 h-4 w-4"></i> | |
| Activate | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Strategy Card 2 --> | |
| <div class="strategy-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i data-feather="activity" class="text-white h-6 w-6"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">RSI Divergence</h3> | |
| <div class="mt-1 flex flex-wrap gap-2"> | |
| <span class="badge bg-yellow-100 text-yellow-800">Mean Reversion</span> | |
| <span class="badge bg-indigo-100 text-indigo-800">Crypto</span> | |
| <span class="badge bg-purple-100 text-purple-800">1H+</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500">RSI divergence strategy with Bollinger Band confirmation. Works well in ranging markets.</p> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Win Rate: <span class="font-medium text-gray-900">72.5%</span></span> | |
| <span>Profit: <span class="font-medium text-green-600">+9.8%</span></span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button type="button" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> | |
| <i data-feather="eye" class="-ml-0.5 mr-2 h-4 w-4"></i> | |
| View Details | |
| </button> | |
| <button type="button" class="ml-3 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 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="play" class="-ml-0.5 mr-2 h-4 w-4"></i> | |
| Activate | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Strategy Card 3 --> | |
| <div class="strategy-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> | |
| <i data-feather="trending-up" class="text-white h-6 w-6"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Volume Spike</h3> | |
| <div class="mt-1 flex flex-wrap gap-2"> | |
| <span class="badge bg-red-100 text-red-800">Breakout</span> | |
| <span class="badge bg-blue-100 text-blue-800">Forex</span> | |
| <span class="badge bg-purple-100 text-purple-800">15M+</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500">Volume spike detection with price action confirmation. Captures early trend movements.</p> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Win Rate: <span class="font-medium text-gray-900">68.7%</span></span> | |
| <span>Profit: <span class="font-medium text-green-600">+7.6%</span></span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button type="button" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> | |
| <i data-feather="eye" class="-ml-0.5 mr-2 h-4 w-4"></i> | |
| View Details | |
| </button> | |
| <button type="button" class="ml-3 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 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="play" class="-ml-0.5 mr-2 h-4 w-4"></i> | |
| Activate | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Strategy Card 4 --> | |
| <div class="strategy-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3"> | |
| <i data-feather="alert-triangle" class="text-white h-6 w-6"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">MACD Crossover</h3> | |
| <div class="mt-1 flex flex-wrap gap-2"> | |
| <span class="badge bg-blue-100 text-blue-800">Trend Following</span> | |
| <span class="badge bg-green-100 text-green-800">Stocks</span> | |
| <span class="badge bg-purple-100 text-purple-800">1H+</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500">MACD crossover with histogram confirmation. Includes dynamic stop-loss adjustment.</p> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Win Rate: <span class="font-medium text-gray-900">75.3%</span></span> | |
| <span>Profit: <span class="font-medium text-green-600">+10.2%</span></span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button type="button" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> | |
| <i data-feather="eye" class="-ml-0.5 mr-2 h-4 w-4"></i> | |
| View Details | |
| </button> | |
| <button type="button" class="ml-3 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 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="play" class="-ml-0.5 mr-2 h-4 w-4"></i> | |
| Activate | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Strategy Card 5 --> | |
| <div class="strategy-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-red-500 rounded-md p-3"> | |
| <i data-feather="zap" class="text-white h-6 w-6"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Bollinger Bounce</h3> | |
| <div class="mt-1 flex flex-wrap gap-2"> | |
| <span class="badge bg-yellow-100 text-yellow-800">Mean Reversion</span> | |
| <span class="badge bg-indigo-100 text-indigo-800">Crypto</span> | |
| <span class="badge bg-purple-100 text-purple-800">5M+</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500">Bollinger Band bounce strategy with RSI filter. Optimized for short-term trades.</p> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Win Rate: <span class="font-medium text-gray-900">65.8%</span></span> | |
| <span>Profit: <span class="font-medium text-green-600">+8.1%</span></span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button type="button" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> | |
| <i data-feather="eye" class="-ml-0.5 mr-2 h-4 w-4"></i> | |
| View Details | |
| </button> | |
| <button type="button" class="ml-3 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 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="play" class="-ml-0.5 mr-2 h-4 w-4"></i> | |
| Activate | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Strategy Card 6 --> | |
| <div class="strategy-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i data-feather="clock" class="text-white h-6 w-6"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Opening Range</h3> | |
| <div class="mt-1 flex flex-wrap gap-2"> | |
| <span class="badge bg-red-100 text-red-800">Breakout</span> | |
| <span class="badge bg-blue-100 text-blue-800">Stocks</span> | |
| <span class="badge bg-purple-100 text-purple-800">1M+</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500">Opening range breakout with volume profile. Designed for first hour of trading.</p> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Win Rate: <span class="font-medium text-gray-900">70.1%</span></span> | |
| <span>Profit: <span class="font-medium text-green-600">+9.3%</span></span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button type="button" class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> | |
| <i data-feather="eye" class="-ml-0.5 mr-2 h-4 w-4"></i> | |
| View Details | |
| </button> | |
| <button type="button" class="ml-3 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 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="play" class="-ml-0.5 mr-2 h-4 w-4"></i> | |
| Activate | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-between items-center"> | |
| <div class="text-sm text-gray-500"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">6</span> of <span class="font-medium">24</span> strategies | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button type="button" class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Previous | |
| </button> | |
| <button type="button" class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm leading-5 font-medium rounded-md text-white bg-primary"> | |
| 1 | |
| </button> | |
| <button type="button" class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| 2 | |
| </button> | |
| <button type="button" class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| 3 | |
| </button> | |
| <button type="button" class="inline-flex items-center px-3 py-1 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Next | |
| </button> | |
| </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(); | |
| // Animation | |
| anime({ | |
| targets: '.strategy-card', | |
| opacity: [0, 1], | |
| translateY: [20, 0], | |
| delay: anime.stagger(100), | |
| easing: 'easeOutExpo' | |
| }); | |
| </script> | |
| </body> | |
| </html> |