Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CryptoAI Pro - Advanced Trading Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-dark: #151515; | |
| --text-light: #E7E7E7; | |
| --primary-accent: #2962FF; | |
| --chart-bg: #2A2A2A; | |
| --panel-bg: #1E1E1E; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-dark); | |
| color: var(--text-light); | |
| margin: 0; | |
| padding: 0; | |
| min-height: 100vh; | |
| } | |
| .mono { | |
| font-family: 'IBM Plex Mono', monospace; | |
| } | |
| .chart-container { | |
| background-color: var(--chart-bg); | |
| border-radius: 8px; | |
| border: 1px solid #333; | |
| } | |
| .panel { | |
| background-color: var(--panel-bg); | |
| border-radius: 8px; | |
| border: 1px solid #333; | |
| } | |
| .primary-btn { | |
| background-color: var(--primary-accent); | |
| color: white; | |
| transition: all 0.2s; | |
| } | |
| .primary-btn:hover { | |
| background-color: #1a4fd8; | |
| } | |
| .secondary-btn { | |
| background-color: #333; | |
| color: var(--text-light); | |
| transition: all 0.2s; | |
| } | |
| .secondary-btn:hover { | |
| background-color: #444; | |
| } | |
| .tab-active { | |
| border-bottom: 2px solid var(--primary-accent); | |
| color: var(--primary-accent); | |
| } | |
| .resize-handle { | |
| background-color: #333; | |
| cursor: ns-resize; | |
| height: 4px; | |
| } | |
| .resize-handle:hover { | |
| background-color: var(--primary-accent); | |
| } | |
| .indicator-positive { | |
| color: #26A69A; | |
| } | |
| .indicator-negative { | |
| color: #EF5350; | |
| } | |
| .grid-line { | |
| stroke: #333; | |
| } | |
| .scrollbar-custom::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| .scrollbar-custom::-webkit-scrollbar-track { | |
| background: #1E1E1E; | |
| } | |
| .scrollbar-custom::-webkit-scrollbar-thumb { | |
| background: #444; | |
| border-radius: 3px; | |
| } | |
| .scrollbar-custom::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .strategy-builder { | |
| background-color: #1a1a1a; | |
| border-left: 1px solid #333; | |
| } | |
| .code-editor { | |
| font-family: 'IBM Plex Mono', monospace; | |
| background-color: #1a1a1a; | |
| color: #E7E7E7; | |
| } | |
| .signal-buy { | |
| background-color: rgba(38, 166, 154, 0.1); | |
| border-left: 3px solid #26A69A; | |
| } | |
| .signal-sell { | |
| background-color: rgba(239, 83, 80, 0.1); | |
| border-left: 3px solid #EF5350; | |
| } | |
| </style> | |
| </head> | |
| <body class="flex flex-col h-screen"> | |
| <!-- Top Navigation --> | |
| <header class="bg-[#1E1E1E] border-b border-[#333] px-4 py-2 flex items-center justify-between"> | |
| <div class="flex items-center space-x-6"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-[#2962FF] flex items-center justify-center"> | |
| <span class="font-bold">AI</span> | |
| </div> | |
| <span class="ml-2 font-bold text-lg">CryptoAI Pro</span> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="text-[#E7E7E7] hover:text-[#2962FF] transition">Dashboard</a> | |
| <a href="#" class="text-[#E7E7E7] hover:text-[#2962FF] transition">Markets</a> | |
| <a href="#" class="text-[#2962FF] font-medium">Backtesting</a> | |
| <a href="#" class="text-[#E7E7E7] hover:text-[#2962FF] transition">Strategies</a> | |
| <a href="#" class="text-[#E7E7E7] hover:text-[#2962FF] transition">AI Signals</a> | |
| </nav> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <select class="bg-[#333] text-[#E7E7E7] rounded px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-[#2962FF]"> | |
| <option>Binance</option> | |
| <option>Coinbase</option> | |
| <option>Kraken</option> | |
| </select> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-2 bg-[#333] rounded px-3 py-1"> | |
| <span class="text-sm">BTC/USDT</span> | |
| <span class="text-sm indicator-positive">$42,856.23</span> | |
| <span class="text-xs indicator-positive">+2.34%</span> | |
| </div> | |
| <button class="bg-[#2962FF] text-white px-4 py-1 rounded text-sm font-medium hover:bg-[#1a4fd8] transition"> | |
| Connect | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Left Sidebar --> | |
| <div class="hidden lg:block w-64 bg-[#1E1E1E] border-r border-[#333] p-4 overflow-y-auto scrollbar-custom"> | |
| <div class="mb-6"> | |
| <h3 class="text-sm uppercase font-medium text-[#888] mb-2">Market Overview</h3> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between items-center p-2 hover:bg-[#333] rounded cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-[#2962FF] mr-2"></div> | |
| <span class="text-sm">BTC/USDT</span> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-sm indicator-positive">$42,856.23</div> | |
| <div class="text-xs indicator-positive">+2.34%</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center p-2 hover:bg-[#333] rounded cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-[#EF5350] mr-2"></div> | |
| <span class="text-sm">ETH/USDT</span> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-sm indicator-negative">$2,345.67</div> | |
| <div class="text-xs indicator-negative">-1.23%</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center p-2 hover:bg-[#333] rounded cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-[#26A69A] mr-2"></div> | |
| <span class="text-sm">SOL/USDT</span> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-sm indicator-positive">$102.45</div> | |
| <div class="text-xs indicator-positive">+5.67%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-sm uppercase font-medium text-[#888] mb-2">AI Signals</h3> | |
| <div class="space-y-2"> | |
| <div class="p-2 rounded signal-buy"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs font-medium">BTC/USDT</span> | |
| <span class="text-xs bg-[#26A69A] text-white px-1 rounded">BUY</span> | |
| </div> | |
| <div class="text-xs mt-1">Strong bullish momentum detected</div> | |
| <div class="text-xs text-[#888] mt-1">2 min ago</div> | |
| </div> | |
| <div class="p-2 rounded signal-sell"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs font-medium">ETH/USDT</span> | |
| <span class="text-xs bg-[#EF5350] text-white px-1 rounded">SELL</span> | |
| </div> | |
| <div class="text-xs mt-1">Overbought conditions</div> | |
| <div class="text-xs text-[#888] mt-1">15 min ago</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm uppercase font-medium text-[#888] mb-2">Strategy Performance</h3> | |
| <div class="space-y-2"> | |
| <div class="p-2 bg-[#333] rounded"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs font-medium">Mean Reversion</span> | |
| <span class="text-xs indicator-positive">+12.4%</span> | |
| </div> | |
| <div class="flex justify-between text-xs text-[#888] mt-1"> | |
| <span>Win Rate: 68%</span> | |
| <span>Sharpe: 1.8</span> | |
| </div> | |
| </div> | |
| <div class="p-2 bg-[#333] rounded"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs font-medium">Breakout</span> | |
| <span class="text-xs indicator-negative">-3.2%</span> | |
| </div> | |
| <div class="flex justify-between text-xs text-[#888] mt-1"> | |
| <span>Win Rate: 42%</span> | |
| <span>Sharpe: 0.4</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Chart and Backtesting Controls --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Timeframe and Chart Controls --> | |
| <div class="bg-[#1E1E1E] border-b border-[#333] px-4 py-2 flex items-center justify-between"> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-[#333] rounded hover:bg-[#444]">1m</button> | |
| <button class="px-3 py-1 text-xs bg-[#333] rounded hover:bg-[#444]">5m</button> | |
| <button class="px-3 py-1 text-xs bg-[#333] rounded hover:bg-[#444]">15m</button> | |
| <button class="px-3 py-1 text-xs bg-[#333] rounded hover:bg-[#444]">1h</button> | |
| <button class="px-3 py-1 text-xs bg-[#2962FF] rounded">4h</button> | |
| <button class="px-3 py-1 text-xs bg-[#333] rounded hover:bg-[#444]">1d</button> | |
| <button class="px-3 py-1 text-xs bg-[#333] rounded hover:bg-[#444]">1w</button> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-[#333] rounded hover:bg-[#444] flex items-center"> | |
| <span>Indicators</span> | |
| <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> | |
| </svg> | |
| </button> | |
| <button class="px-3 py-1 text-xs bg-[#333] rounded hover:bg-[#444] flex items-center"> | |
| <span>Templates</span> | |
| <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> | |
| </svg> | |
| </button> | |
| <button class="px-3 py-1 text-xs bg-[#333] rounded hover:bg-[#444]">Compare</button> | |
| </div> | |
| </div> | |
| <!-- Main Chart Area --> | |
| <div class="flex-1 flex overflow-hidden"> | |
| <div class="flex-1 flex flex-col"> | |
| <div class="flex-1 chart-container p-2"> | |
| <canvas id="priceChart" class="w-full h-full"></canvas> | |
| </div> | |
| <div class="resize-handle"></div> | |
| <div class="h-1/3 flex"> | |
| <div class="flex-1 chart-container p-2"> | |
| <canvas id="volumeChart" class="w-full h-full"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Strategy Builder Panel --> | |
| <div class="w-80 hidden xl:flex flex-col strategy-builder"> | |
| <div class="p-4 border-b border-[#333]"> | |
| <h3 class="font-medium">Strategy Builder</h3> | |
| </div> | |
| <div class="flex-1 overflow-y-auto scrollbar-custom p-4"> | |
| <div class="mb-4"> | |
| <label class="block text-xs text-[#888] mb-1">Strategy Name</label> | |
| <input type="text" class="w-full bg-[#333] text-[#E7E7E7] px-3 py-2 rounded text-sm focus:outline-none focus:ring-1 focus:ring-[#2962FF]" placeholder="My Custom Strategy"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-xs text-[#888] mb-1">Conditions</label> | |
| <div class="space-y-2"> | |
| <select class="w-full bg-[#333] text-[#E7E7E7] px-3 py-2 rounded text-sm focus:outline-none focus:ring-1 focus:ring-[#2962FF]"> | |
| <option>RSI < 30 (Oversold)</option> | |
| <option>RSI > 70 (Overbought)</option> | |
| <option>MACD Cross Above</option> | |
| <option>MACD Cross Below</option> | |
| <option>Price Above EMA 20</option> | |
| <option>Price Below EMA 20</option> | |
| </select> | |
| <div class="flex items-center justify-center text-[#888]"> | |
| <span class="text-xs">AND</span> | |
| </div> | |
| <select class="w-full bg-[#333] text-[#E7E7E7] px-3 py-2 rounded text-sm focus:outline-none focus:ring-1 focus:ring-[#2962FF]"> | |
| <option>Volume > 20% Average</option> | |
| <option>Price Above VWAP</option> | |
| <option>Bollinger Band Width Expanding</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-xs text-[#888] mb-1">Actions</label> | |
| <div class="space-y-2"> | |
| <select class="w-full bg-[#333] text-[#E7E7E7] px-3 py-2 rounded text-sm focus:outline-none focus:ring-1 focus:ring-[#2962FF]"> | |
| <option>Buy Market Order</option> | |
| <option>Buy Limit Order (5% below)</option> | |
| <option>Sell Market Order</option> | |
| <option>Sell Limit Order (5% above)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-xs text-[#888] mb-1">Advanced Script (Pine-like)</label> | |
| <div class="code-editor p-2 rounded text-xs h-32 overflow-auto"> | |
| <div>//@version=4</div> | |
| <div>strategy("My Strategy", overlay=true)</div> | |
| <div>rsi = rsi(close, 14)</div> | |
| <div>ema20 = ema(close, 20)</div> | |
| <div>buyCondition = rsi < 30 and close > ema20</div> | |
| <div>sellCondition = rsi > 70</div> | |
| <div>if (buyCondition)</div> | |
| <div class="ml-4">strategy.entry("Buy", strategy.long)</div> | |
| <div>if (sellCondition)</div> | |
| <div class="ml-4">strategy.close("Buy")</div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-[#2962FF] text-white py-2 rounded text-sm font-medium hover:bg-[#1a4fd8] transition"> | |
| Backtest Strategy | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Backtesting Results Panel --> | |
| <div class="h-1/3 flex flex-col border-t border-[#333]"> | |
| <div class="bg-[#1E1E1E] border-b border-[#333] px-4 py-2 flex items-center justify-between"> | |
| <div class="flex space-x-4"> | |
| <button class="tab-active pb-1 text-sm font-medium">Performance</button> | |
| <button class="pb-1 text-sm text-[#888] hover:text-[#E7E7E7]">Trades</button> | |
| <button class="pb-1 text-sm text-[#888] hover:text-[#E7E7E7]">Statistics</button> | |
| <button class="pb-1 text-sm text-[#888] hover:text-[#E7E7E7]">AI Analysis</button> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-xs text-[#888]">Period:</span> | |
| <select class="bg-[#333] text-[#E7E7E7] rounded px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-[#2962FF]"> | |
| <option>Last 30 Days</option> | |
| <option>Last 90 Days</option> | |
| <option>Last 6 Months</option> | |
| <option>Last Year</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto scrollbar-custom"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 p-4"> | |
| <div class="panel p-4"> | |
| <div class="text-xs text-[#888] mb-1">Net Profit</div> | |
| <div class="text-xl indicator-positive">+12.45%</div> | |
| <div class="text-xs text-[#888] mt-2">vs Buy & Hold +8.23%</div> | |
| </div> | |
| <div class="panel p-4"> | |
| <div class="text-xs text-[#888] mb-1">Win Rate</div> | |
| <div class="text-xl">68.4%</div> | |
| <div class="text-xs text-[#888] mt-2">Best streak: 8 wins</div> | |
| </div> | |
| <div class="panel p-4"> | |
| <div class="text-xs text-[#888] mb-1">Sharpe Ratio</div> | |
| <div class="text-xl">1.82</div> | |
| <div class="text-xs text-[#888] mt-2">Risk-adjusted return</div> | |
| </div> | |
| <div class="panel p-4"> | |
| <div class="text-xs text-[#888] mb-1">Max Drawdown</div> | |
| <div class="text-xl indicator-negative">-9.23%</div> | |
| <div class="text-xs text-[#888] mt-2">Recovery: 3 days</div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 p-4 pt-0"> | |
| <div class="panel p-4 lg:col-span-2"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="text-sm font-medium">Equity Curve</div> | |
| <div class="flex space-x-2"> | |
| <button class="px-2 py-1 text-xs bg-[#333] rounded hover:bg-[#444]">Strategy</button> | |
| <button class="px-2 py-1 text-xs bg-[#333] rounded hover:bg-[#444]">Buy & Hold</button> | |
| </div> | |
| </div> | |
| <canvas id="equityChart" class="w-full h-64"></canvas> | |
| </div> | |
| <div class="panel p-4"> | |
| <div class="text-sm font-medium mb-2">AI Performance Insights</div> | |
| <div class="space-y-3"> | |
| <div class="p-2 bg-[#333] rounded"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-[#26A69A] mr-2"></div> | |
| <span class="text-xs">Strategy performs best in trending markets</span> | |
| </div> | |
| </div> | |
| <div class="p-2 bg-[#333] rounded"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-[#EF5350] mr-2"></div> | |
| <span class="text-xs">Weak performance during high volatility</span> | |
| </div> | |
| </div> | |
| <div class="p-2 bg-[#333] rounded"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-[#2962FF] mr-2"></div> | |
| <span class="text-xs">Optimize stop-loss to 2.5% for better risk/reward</span> | |
| </div> | |
| </div> | |
| <div class="p-2 bg-[#333] rounded"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-[#FFC107] mr-2"></div> | |
| <span class="text-xs">Consider adding volume filter to reduce false signals</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize price chart | |
| const priceCtx = document.getElementById('priceChart').getContext('2d'); | |
| const priceChart = new Chart(priceCtx, { | |
| type: 'line', | |
| data: { | |
| labels: Array.from({length: 100}, (_, i) => i), | |
| datasets: [{ | |
| label: 'BTC/USDT', | |
| data: Array.from({length: 100}, () => Math.random() * 1000 + 40000), | |
| borderColor: '#2962FF', | |
| borderWidth: 2, | |
| fill: false, | |
| tension: 0.1 | |
| }, { | |
| label: 'EMA 20', | |
| data: Array.from({length: 100}, () => Math.random() * 800 + 39800), | |
| borderColor: '#FFC107', | |
| borderWidth: 1, | |
| fill: false, | |
| tension: 0.1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false | |
| } | |
| }, | |
| scales: { | |
| x: { | |
| grid: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| ticks: { | |
| color: '#888' | |
| } | |
| }, | |
| y: { | |
| grid: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| ticks: { | |
| color: '#888' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Initialize volume chart | |
| const volumeCtx = document.getElementById('volumeChart').getContext('2d'); | |
| const volumeChart = new Chart(volumeCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: Array.from({length: 100}, (_, i) => i), | |
| datasets: [{ | |
| label: 'Volume', | |
| data: Array.from({length: 100}, () => Math.random() * 500 + 100), | |
| backgroundColor: '#888', | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| x: { | |
| grid: { | |
| display: false | |
| }, | |
| ticks: { | |
| color: '#888' | |
| } | |
| }, | |
| y: { | |
| grid: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| ticks: { | |
| color: '#888' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Initialize equity chart | |
| const equityCtx = document.getElementById('equityChart').getContext('2d'); | |
| const equityChart = new Chart(equityCtx, { | |
| type: 'line', | |
| data: { | |
| labels: Array.from({length: 30}, (_, i) => `Day ${i+1}`), | |
| datasets: [{ | |
| label: 'Strategy', | |
| data: Array.from({length: 30}, (_, i) => 10000 + i * 150 + Math.random() * 300), | |
| borderColor: '#2962FF', | |
| borderWidth: 2, | |
| fill: false | |
| }, { | |
| label: 'Buy & Hold', | |
| data: Array.from({length: 30}, (_, i) => 10000 + i * 120 + Math.random() * 400), | |
| borderColor: '#888', | |
| borderWidth: 1, | |
| fill: false, | |
| borderDash: [5, 5] | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| labels: { | |
| color: '#E7E7E7' | |
| } | |
| } | |
| }, | |
| scales: { | |
| x: { | |
| grid: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| ticks: { | |
| color: '#888' | |
| } | |
| }, | |
| y: { | |
| grid: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| ticks: { | |
| color: '#888' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Make panels resizable | |
| const resizeHandle = document.querySelector('.resize-handle'); | |
| const topChart = document.querySelector('.chart-container'); | |
| const bottomPanel = document.querySelector('.h-1\\/3'); | |
| let isResizing = false; | |
| resizeHandle.addEventListener('mousedown', (e) => { | |
| isResizing = true; | |
| document.body.style.cursor = 'ns-resize'; | |
| }); | |
| document.addEventListener('mousemove', (e) => { | |
| if (!isResizing) return; | |
| const containerHeight = topChart.parentElement.clientHeight; | |
| const newTopHeight = e.clientY - topChart.getBoundingClientRect().top; | |
| const newBottomHeight = containerHeight - newTopHeight - resizeHandle.clientHeight; | |
| topChart.style.height = `${newTopHeight}px`; | |
| bottomPanel.style.height = `${newBottomHeight}px`; | |
| // Update charts | |
| priceChart.resize(); | |
| volumeChart.resize(); | |
| equityChart.resize(); | |
| }); | |
| document.addEventListener('mouseup', () => { | |
| isResizing = false; | |
| document.body.style.cursor = ''; | |
| }); | |
| // Simulate AI analysis loading | |
| setTimeout(() => { | |
| const aiInsights = document.querySelectorAll('.p-2.bg-\\[\\#333\\].rounded'); | |
| aiInsights.forEach(insight => { | |
| insight.classList.remove('opacity-50'); | |
| }); | |
| }, 1500); | |
| </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=S-Dreamer/cryptoai-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |