Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Algorithmic Trading Masterclass</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"> | |
| <style> | |
| .chart-container { | |
| height: 400px; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%); | |
| border-radius: 12px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .chart-line { | |
| position: absolute; | |
| bottom: 0; | |
| width: 100%; | |
| height: 80%; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| transparent, | |
| transparent 19px, | |
| rgba(0,0,0,0.05) 20px | |
| ); | |
| } | |
| .price-line { | |
| position: absolute; | |
| width: 100%; | |
| height: 2px; | |
| background-color: #3b82f6; | |
| animation: wave 8s infinite ease-in-out; | |
| } | |
| @keyframes wave { | |
| 0%, 100% { transform: translateY(0); } | |
| 25% { transform: translateY(-20px); } | |
| 50% { transform: translateY(10px); } | |
| 75% { transform: translateY(-30px); } | |
| } | |
| .algorithm-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); | |
| } | |
| .code-block { | |
| font-family: 'Courier New', monospace; | |
| background-color: #1e293b; | |
| color: #f8fafc; | |
| border-radius: 8px; | |
| overflow-x: auto; | |
| } | |
| .backtest-result { | |
| background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); | |
| border-left: 4px solid #10b981; | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #3b82f6; | |
| color: #3b82f6; | |
| font-weight: 600; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <header class="bg-gradient-to-r from-blue-800 to-indigo-900 text-white shadow-lg"> | |
| <div class="container mx-auto px-6 py-12"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-4xl font-bold mb-2">Algorithmic Trading Masterclass</h1> | |
| <p class="text-blue-200 text-xl">Master quantitative strategies for stock market success</p> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="flex space-x-2"> | |
| <span class="px-4 py-2 bg-blue-600 rounded-full font-medium">Quantitative</span> | |
| <span class="px-4 py-2 bg-indigo-600 rounded-full font-medium">Backtesting</span> | |
| <span class="px-4 py-2 bg-purple-600 rounded-full font-medium">Execution</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="container mx-auto px-6 py-8"> | |
| <!-- Course Navigation --> | |
| <div class="flex overflow-x-auto pb-4 mb-8 border-b border-gray-200"> | |
| <button class="tab-active px-6 py-3 mr-2 font-medium text-sm whitespace-nowrap">Introduction</button> | |
| <button class="px-6 py-3 mr-2 font-medium text-gray-600 text-sm whitespace-nowrap hover:text-blue-600">Market Basics</button> | |
| <button class="px-6 py-3 mr-2 font-medium text-gray-600 text-sm whitespace-nowrap hover:text-blue-600">Strategy Design</button> | |
| <button class="px-6 py-3 mr-2 font-medium text-gray-600 text-sm whitespace-nowrap hover:text-blue-600">Backtesting</button> | |
| <button class="px-6 py-3 mr-2 font-medium text-gray-600 text-sm whitespace-nowrap hover:text-blue-600">Risk Management</button> | |
| <button class="px-6 py-3 mr-2 font-medium text-gray-600 text-sm whitespace-nowrap hover:text-blue-600">Execution</button> | |
| <button class="px-6 py-3 mr-2 font-medium text-gray-600 text-sm whitespace-nowrap hover:text-blue-600">Optimization</button> | |
| <button class="px-6 py-3 font-medium text-gray-600 text-sm whitespace-nowrap hover:text-blue-600">Live Trading</button> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <div class="p-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Introduction to Algorithmic Trading</h2> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold text-gray-700 mb-4">What is Algorithmic Trading?</h3> | |
| <p class="text-gray-600 mb-4 leading-relaxed"> | |
| Algorithmic trading (algo trading) uses computer programs to execute trades based on predefined instructions | |
| (algorithms) at speeds and frequencies impossible for human traders. These algorithms analyze market data, | |
| identify trading opportunities, and execute orders without human intervention. | |
| </p> | |
| <div class="chart-container mb-6"> | |
| <div class="chart-line"></div> | |
| <div class="price-line" style="top: 60%"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 bg-black bg-opacity-50 text-white"> | |
| <div class="flex justify-between"> | |
| <span>Price Movement Simulation</span> | |
| <span class="font-mono">$154.32 <span class="text-green-400">+1.2%</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold text-gray-700 mb-4">Key Advantages</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-bolt text-blue-600"></i> | |
| </div> | |
| <h4 class="font-semibold text-blue-800">Speed & Efficiency</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm"> | |
| Execute trades in milliseconds, capitalizing on opportunities that disappear in seconds. | |
| </p> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-brain text-green-600"></i> | |
| </div> | |
| <h4 class="font-semibold text-green-800">Emotionless Trading</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm"> | |
| Removes psychological factors that often lead to poor trading decisions. | |
| </p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-chart-line text-purple-600"></i> | |
| </div> | |
| <h4 class="font-semibold text-purple-800">Backtesting</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm"> | |
| Test strategies on historical data before risking real capital. | |
| </p> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-robot text-yellow-600"></i> | |
| </div> | |
| <h4 class="font-semibold text-yellow-800">24/7 Monitoring</h4> | |
| </div> | |
| <p class="text-gray-600 text-sm"> | |
| Continuously scan markets for opportunities without fatigue. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold text-gray-700 mb-4">Common Algorithm Types</h3> | |
| <div class="space-y-4"> | |
| <div class="algorithm-card bg-white border border-gray-200 rounded-lg p-6 shadow-sm transition-all duration-300"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-arrows-alt-h text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg text-gray-800 mb-2">Mean Reversion</h4> | |
| <p class="text-gray-600 mb-3"> | |
| Based on the concept that prices tend to revert to their historical mean over time. | |
| Identifies overbought/oversold conditions using statistical measures like Bollinger Bands or Z-scores. | |
| </p> | |
| <div class="code-block p-4 text-sm mb-3"> | |
| <span class="text-green-400"># Python pseudo-code</span><br> | |
| <span class="text-blue-400">if</span> current_price < mean_price - (std_dev * 2):<br> | |
| <span class="text-purple-400">buy</span>() <span class="text-gray-500"># 2 standard deviations below mean</span><br> | |
| <span class="text-blue-400">elif</span> current_price > mean_price + (std_dev * 2):<br> | |
| <span class="text-purple-400">sell</span>() <span class="text-gray-500"># 2 standard deviations above mean</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="algorithm-card bg-white border border-gray-200 rounded-lg p-6 shadow-sm transition-all duration-300"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-trend-up text-green-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg text-gray-800 mb-2">Momentum Trading</h4> | |
| <p class="text-gray-600 mb-3"> | |
| Capitalizes on the continuation of existing market trends. Uses indicators like RSI, MACD, | |
| or moving average crossovers to identify and ride trends. | |
| </p> | |
| <div class="code-block p-4 text-sm mb-3"> | |
| <span class="text-green-400"># Momentum strategy example</span><br> | |
| short_ma = <span class="text-yellow-400">calculate_ma</span>(prices, <span class="text-amber-400">10</span>)<br> | |
| long_ma = <span class="text-yellow-400">calculate_ma</span>(prices, <span class="text-amber-400">50</span>)<br> | |
| <span class="text-blue-400">if</span> short_ma > long_ma <span class="text-blue-400">and</span> rsi < <span class="text-amber-400">70</span>:<br> | |
| <span class="text-purple-400">buy</span>() <span class="text-gray-500"># Uptrend confirmed, not overbought</span><br> | |
| <span class="text-blue-400">elif</span> short_ma < long_ma <span class="text-blue-400">and</span> rsi > <span class="text-amber-400">30</span>:<br> | |
| <span class="text-purple-400">sell</span>() <span class="text-gray-500"># Downtrend confirmed, not oversold</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="algorithm-card bg-white border border-gray-200 rounded-lg p-6 shadow-sm transition-all duration-300"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-chess-board text-purple-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg text-gray-800 mb-2">Market Making</h4> | |
| <p class="text-gray-600 mb-3"> | |
| Provides liquidity by continuously placing both buy and sell orders, profiting from the bid-ask spread. | |
| Requires sophisticated risk management to avoid adverse selection. | |
| </p> | |
| <div class="code-block p-4 text-sm"> | |
| <span class="text-green-400"># Basic market making logic</span><br> | |
| bid_price = current_price - spread_offset<br> | |
| ask_price = current_price + spread_offset<br> | |
| <span class="text-blue-400">if</span> inventory < max_position:<br> | |
| <span class="text-purple-400">place_order</span>(<span class="text-amber-400">'BID'</span>, bid_price, quantity)<br> | |
| <span class="text-blue-400">if</span> inventory > -max_position:<br> | |
| <span class="text-purple-400">place_order</span>(<span class="text-amber-400">'ASK'</span>, ask_price, quantity) | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold text-gray-700 mb-4">Backtesting Example</h3> | |
| <div class="backtest-result p-6 rounded-lg mb-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h4 class="font-bold text-lg text-gray-800">Momentum Strategy (2018-2023)</h4> | |
| <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">+142.7% Return</span> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4"> | |
| <div class="bg-white p-3 rounded-lg shadow-xs"> | |
| <div class="text-gray-500 text-sm">Annual Return</div> | |
| <div class="font-bold text-lg">19.2%</div> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-xs"> | |
| <div class="text-gray-500 text-sm">Max Drawdown</div> | |
| <div class="font-bold text-lg">-24.3%</div> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-xs"> | |
| <div class="text-gray-500 text-sm">Sharpe Ratio</div> | |
| <div class="font-bold text-lg">1.8</div> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-xs"> | |
| <div class="text-gray-500 text-sm">Win Rate</div> | |
| <div class="font-bold text-lg">58.4%</div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium"> | |
| <i class="fas fa-chart-bar mr-2"></i> View Detailed Report | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg text-sm font-medium"> | |
| <i class="fas fa-code mr-2"></i> See Strategy Code | |
| </button> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm"> | |
| Note: Past performance is not indicative of future results. Backtest results often look better than live performance | |
| due to factors like market impact, slippage, and changing market regimes. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sidebar --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 sticky top-8"> | |
| <div class="bg-gray-800 text-white px-6 py-4"> | |
| <h3 class="font-bold text-lg">Course Progress</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-4"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Completion</span> | |
| <span class="text-sm font-medium text-blue-600">12%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 12%"></div> | |
| </div> | |
| </div> | |
| <div class="space-y-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 class="fas fa-check text-blue-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-900">Introduction</h4> | |
| <p class="text-xs text-gray-500">Completed</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center"> | |
| <span class="text-gray-500">2</span> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-900">Market Basics</h4> | |
| <p class="text-xs text-gray-500">Next lesson</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center opacity-50"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center"> | |
| <span class="text-gray-500">3</span> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-500">Strategy Design</h4> | |
| <p class="text-xs text-gray-400">Locked</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center opacity-50"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center"> | |
| <span class="text-gray-500">4</span> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-gray-500">Backtesting</h4> | |
| <p class="text-xs text-gray-400">Locked</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-6 border-t border-gray-200"> | |
| <h4 class="text-sm font-medium text-gray-900 mb-3">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="flex items-center text-sm text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-file-pdf mr-2"></i> Algorithmic Trading Handbook | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center text-sm text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-code mr-2"></i> Python Starter Code | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center text-sm text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-database mr-2"></i> Sample Market Data | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="bg-gray-800 text-white px-6 py-4"> | |
| <h3 class="font-bold text-lg">Instructor</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-16 w-16 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Instructor"> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-gray-900">Dr. Jonathan Quant</h4> | |
| <p class="text-sm text-gray-600">Former Head of Quant Trading at Goldman Sachs</p> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-600 space-y-2"> | |
| <p class="flex items-start"> | |
| <i class="fas fa-graduation-cap text-blue-600 mr-2 mt-1"></i> | |
| <span>PhD in Financial Mathematics from MIT</span> | |
| </p> | |
| <p class="flex items-start"> | |
| <i class="fas fa-briefcase text-blue-600 mr-2 mt-1"></i> | |
| <span>15+ years in algorithmic trading</span> | |
| </p> | |
| <p class="flex items-start"> | |
| <i class="fas fa-trophy text-blue-600 mr-2 mt-1"></i> | |
| <span>Managed $2B+ in algorithmic strategies</span> | |
| </p> | |
| </div> | |
| <button class="mt-4 w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded-lg text-sm"> | |
| <i class="fas fa-envelope mr-2"></i> Message Instructor | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Algorithmic Trading</h3> | |
| <p class="text-gray-400 text-sm"> | |
| Master quantitative strategies for consistent market outperformance. | |
| Learn from industry experts with real-world experience. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li><a href="#" class="hover:text-white">Course Curriculum</a></li> | |
| <li><a href="#" class="hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="hover:text-white">Instructors</a></li> | |
| <li><a href="#" class="hover:text-white">Success Stories</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Resources</h3> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li><a href="#" class="hover:text-white">Research Papers</a></li> | |
| <li><a href="#" class="hover:text-white">Trading APIs</a></li> | |
| <li><a href="#" class="hover:text-white">Data Sources</a></li> | |
| <li><a href="#" class="hover:text-white">Backtesting Tools</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Subscribe</h3> | |
| <p class="text-gray-400 text-sm mb-4"> | |
| Get the latest algorithmic trading insights delivered to your inbox. | |
| </p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your email" class="bg-gray-700 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"> | |
| <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-gray-400 text-center"> | |
| <p>© 2023 Algorithmic Trading Masterclass. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple tab switching functionality | |
| document.querySelectorAll('.tab-active, .px-6.py-3').forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| document.querySelector('.tab-active').classList.remove('tab-active'); | |
| this.classList.add('tab-active'); | |
| // Here you would typically load new content for the selected tab | |
| }); | |
| }); | |
| // Simulate price movement in the chart | |
| const priceLine = document.querySelector('.price-line'); | |
| let direction = 1; | |
| let position = 60; | |
| setInterval(() => { | |
| position += (Math.random() - 0.5) * 2 * direction; | |
| // Keep within bounds (40% to 80% of container) | |
| if (position < 40) { | |
| position = 40; | |
| direction = 1; | |
| } else if (position > 80) { | |
| position = 80; | |
| direction = -1; | |
| } | |
| priceLine.style.top = `${position}%`; | |
| // Update price display | |
| const priceDisplay = document.querySelector('.absolute.bottom-0 span.font-mono'); | |
| const currentPrice = parseFloat(priceDisplay.textContent.replace('$', '').split(' ')[0]); | |
| const newPrice = currentPrice + (Math.random() - 0.5) * 0.5; | |
| const percentChange = ((newPrice - 150) / 150 * 100).toFixed(2); | |
| const changeColor = percentChange >= 0 ? 'text-green-400' : 'text-red-400'; | |
| priceDisplay.innerHTML = `$${newPrice.toFixed(2)} <span class="${changeColor}">${percentChange >= 0 ? '+' : ''}${percentChange}%</span>`; | |
| }, 1000); | |
| </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=bjcstudentCOR/algotrade" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |