import requests import pandas as pd from datetime import datetime def get_historical_data(coin_id="bitcoin", vs_currency="usd", days=1): url = f"https://api.coingecko.com/api/v3/coins/{coin_id}/market_chart" params = { "vs_currency": vs_currency, "days": days, "interval": "minutely" } response = requests.get(url, params=params) data = response.json() prices = data.get("prices", []) # Converter para DataFrame df = pd.DataFrame(prices, columns=["timestamp", "price"]) df["timestamp"] = pd.to_datetime(df["timestamp"], unit='ms') # Agregar em candles de 15 minutos df.set_index("timestamp", inplace=True) ohlc = df["price"].resample("15T").ohlc() volume = pd.DataFrame(data.get("total_volumes", []), columns=["timestamp", "volume"]) volume["timestamp"] = pd.to_datetime(volume["timestamp"], unit='ms') volume.set_index("timestamp", inplace=True) volume_15min = volume["volume"].resample("15T").sum() ohlc["volume"] = volume_15min ohlc.dropna(inplace=True) return ohlc if __name__ == "__main__": df_15min = get_historical_data() print(df_15min) - Follow Up Deployment
3a15e32 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NeuralTrade Pro V2 | AI Crypto Trading</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-financial@3.0.1/dist/chartjs-chart-financial.min.js"> | |
| </script> | |
| <style> | |
| :root { | |
| --bg-primary: #0a0a0a; | |
| --bg-secondary: #1a1a1a; | |
| --accent: #00f7ff; | |
| --accent-glow: #00f7ff33; | |
| --text-primary: #ffffff; | |
| --text-secondary: #a1a1aa; | |
| --success: #00ff88; | |
| --danger: #ff0066; | |
| --warning: #ffaa00; | |
| } | |
| body { | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-family: 'Inter', system-ui, sans-serif; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| .glow-border { | |
| border: 1px solid var(--accent-glow); | |
| box-shadow: 0 0 20px var(--accent-glow); | |
| } | |
| .neon-glow { | |
| text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent); | |
| } | |
| .glass-card { | |
| background: rgba(26, 26, 26, 0.7); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 20px; | |
| transition: all 0.3s ease; | |
| } | |
| .glass-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(0, 247, 255, 0.1); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, var(--accent), #ff0066); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .neural-grid { | |
| display: grid; | |
| grid-template-columns: repeat(6, 1fr); | |
| gap: 20px; | |
| height: 300px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .neuron { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| box-shadow: 0 0 15px var(--accent); | |
| position: absolute; | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| opacity: 0.5; | |
| transform: scale(1); | |
| } | |
| 50% { | |
| opacity: 1; | |
| transform: scale(1.5); | |
| } | |
| } | |
| .data-stream { | |
| position: absolute; | |
| width: 2px; | |
| height: 100px; | |
| background: linear-gradient(to bottom, transparent, var(--accent), transparent); | |
| animation: stream 3s linear infinite; | |
| } | |
| @keyframes stream { | |
| 0% { | |
| transform: translateY(-100px); | |
| opacity: 0; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(400px); | |
| opacity: 0; | |
| } | |
| } | |
| .trade-marker { | |
| animation: bounce 1s ease-in-out; | |
| } | |
| @keyframes bounce { | |
| 0%, | |
| 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.5); | |
| } | |
| } | |
| .ticker-wrap { | |
| overflow: hidden; | |
| background: rgba(26, 26, 26, 0.5); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| padding: 15px 0; | |
| } | |
| .ticker-content { | |
| display: inline-block; | |
| white-space: nowrap; | |
| animation: ticker 30s linear infinite; | |
| } | |
| @keyframes ticker { | |
| 0% { | |
| transform: translateX(0); | |
| } | |
| 100% { | |
| transform: translateX(-100%); | |
| } | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--accent), #ff0066); | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| padding: 12px 24px; | |
| border: none; | |
| border-radius: 12px; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 30px rgba(0, 247, 255, 0.3); | |
| } | |
| .btn-secondary { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| padding: 12px 24px; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 12px; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| border-color: var(--accent); | |
| } | |
| .metric-card { | |
| background: linear-gradient(135deg, rgba(0, 247, 255, 0.1), rgba(255, 0, 102, 0.1)); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 15px; | |
| padding: 20px; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| } | |
| .metric-card:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 30px rgba(0, 247, 255, 0.2); | |
| } | |
| .crypto-symbol { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| font-size: 14px; | |
| } | |
| .table-row { | |
| transition: all 0.3s ease; | |
| } | |
| .table-row:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| transform: translateX(5px); | |
| } | |
| .status-indicator { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| animation: pulse-status 2s infinite; | |
| } | |
| @keyframes pulse-status { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.3; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| .floating-element { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, | |
| 100% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white"> | |
| <!-- Header --> | |
| <header class="border-b border-gray-800 p-6"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-3xl font-bold gradient-text neon-glow">NeuralTrade Pro</h1> | |
| <p class="text-gray-400 text-sm">AI-Powered Crypto Trading Platform</p> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="status-indicator bg-green-500"></div> | |
| <span class="text-sm text-gray-400">System Online</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-chart-line text-yellow-400"></i> | |
| <span class="text-sm text-gray-400">50x Leverage</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-shield-alt text-blue-400"></i> | |
| <span class="text-sm text-gray-400">AI Protected</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Market Ticker --> | |
| <div class="ticker-wrap my-6"> | |
| <div class="ticker-content"> | |
| <div class="inline-flex space-x-12 px-6"> | |
| <span class="flex items-center space-x-2"> | |
| <span class="crypto-symbol bg-orange-500">₿</span> | |
| <span class="text-sm">BTC/USDT</span> | |
| <span class="text-green-400 font-mono">$62,450.23</span> | |
| <span class="text-green-400 text-sm">+2.3%</span> | |
| </span> | |
| <span class="flex items-center space-x-2"> | |
| <span class="crypto-symbol bg-blue-500">Ξ</span> | |
| <span class="text-sm">ETH/USDT</span> | |
| <span class="text-green-400 font-mono">$3,420.78</span> | |
| <span class="text-green-400 text-sm">+1.8%</span> | |
| </span> | |
| <span class="flex items-center space-x-2"> | |
| <span class="crypto-symbol bg-green-400">◎</span> | |
| <span class="text-sm">SOL/USDT</span> | |
| <span class="text-red-400 font-mono">$142.35</span> | |
| <span class="text-red-400 text-sm">-0.7%</span> | |
| </span> | |
| <span class="flex items-center space-x-2"> | |
| <span class="crypto-symbol bg-blue-600">₳</span> | |
| <span class="text-sm">ADA/USDT</span> | |
| <span class="text-green-400 font-mono">$0.58</span> | |
| <span class="text-green-400 text-sm">+3.2%</span> | |
| </span> | |
| <!-- Repeat for infinite scroll --> | |
| <span class="flex items-center space-x-2"> | |
| <span class="crypto-symbol bg-orange-500">₿</span> | |
| <span class="text-sm">BTC/USDT</span> | |
| <span class="text-green-400 font-mono">$62,450.23</span> | |
| <span class="text-green-400 text-sm">+2.3%</span> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container mx-auto px-6"> | |
| <!-- Main Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6"> | |
| <!-- Quick Stats --> | |
| <div class="grid grid-cols-2 lg:col-span-4 gap-4"> | |
| <div class="metric-card"> | |
| <div class="text-2xl font-bold text-green-400">$12,450.75</div> | |
| <div class="text-sm text-gray-400">Portfolio Value</div> | |
| </div> | |
| <div class="metric-card"> | |
| <div class="text-2xl font-bold text-green-400">+22.3%</div> | |
| <div class="text-sm text-gray-400">24h Change</div> | |
| </div> | |
| <div class="metric-card"> | |
| <div class="text-2xl font-bold text-blue-400">76.4%</div> | |
| <div class="text-sm text-gray-400">AI Accuracy</div> | |
| </div> | |
| <div class="metric-card"> | |
| <div class="text-2xl font-bold text-purple-400">42</div> | |
| <div class="text-sm text-gray-400">Trades Today</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Neural Network & Controls --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Controls --> | |
| <div class="glass-card p-6"> | |
| <h3 class="text-lg font-semibold mb-4 text-cyan-400">Trading Controls</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="text-sm text-gray-400 block mb-2">Training Pair</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white"> | |
| <option>BTC/USDT</option> | |
| <option>ETH/USDT</option> | |
| <option>SOL/USDT</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="text-sm text-gray-400 block mb-2">Validation Pair</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white"> | |
| <option>ETH/USDT</option> | |
| <option>BTC/USDT</option> | |
| <option>SOL/USDT</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="text-sm text-gray-400 block mb-2">Leverage</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white"> | |
| <option>10x</option> | |
| <option>25x</option> | |
| <option selected>50x</option> | |
| <option>100x</option> | |
| </select> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="btn-primary"> | |
| <i class="fas fa-play mr-2"></i>Start | |
| </button> | |
| <button class="btn-secondary"> | |
| <i class="fas fa-stop mr-2"></i>Stop | |
| </button> | |
| </div> | |
| <button class="w-full btn-secondary"> | |
| <i class="fas fa-cogs mr-2"></i>Optimize Neural Network | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Neural Network --> | |
| <div class="glass-card p-6 lg:col-span-2"> | |
| <h3 class="text-lg font-semibold mb-4 text-cyan-400">Neural Network Visualization</h3> | |
| <div class="neural-grid relative"> | |
| <div class="neuron" style="left: 10%; top: 20%"></div> | |
| <div class="neuron" style="left: 10%; top: 50%"></div> | |
| <div class="neuron" style="left: 10%; top: 80%"></div> | |
| <div class="neuron" style="left: 30%; top: 15%"></div> | |
| <div class="neuron" style="left: 30%; top: 35%"></div> | |
| <div class="neuron" style="left: 30%; top: 55%"></div> | |
| <div class="neuron" style="left: 30%; top: 75%"></div> | |
| <div class="neuron" style="left: 50%; top: 20%"></div> | |
| <div class="neuron" style="left: 50%; top: 40%"></div> | |
| <div class="neuron" style="left: 50%; top: 60%"></div> | |
| <div class="neuron" style="left: 50%; top: 80%"></div> | |
| <div class="neuron" style="left: 70%; top: 25%"></div> | |
| <div class="neuron" style="left: 70%; top: 75%"></div> | |
| <div class="neuron" style="left: 90%; top: 50%"></div> | |
| <div class="data-stream" style="left: 15%; animation-delay: 0s"></div> | |
| <div class="data-stream" style="left: 35%; animation-delay: 1s"></div> | |
| <div class="data-stream" style="left: 55%; animation-delay: 2s"></div> | |
| <div class="data-stream" style="left: 75%; animation-delay: 0.5s"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <!-- Candlestick Chart --> | |
| <div class="glass-card p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-cyan-400">BTC/USDT Candlestick</h3> | |
| <div class="flex space-x-1"> | |
| <button class="text-xs px-2 py-1 bg-gray-800 rounded">1m</button> | |
| <button class="text-xs px-2 py-1 bg-gray-800 rounded">5m</button> | |
| <button class="text-xs px-2 py-1 bg-cyan-600 rounded">15m</button> | |
| <button class="text-xs px-2 py-1 bg-gray-800 rounded">1h</button> | |
| <button class="text-xs px-2 py-1 bg-gray-800 rounded">4h</button> | |
| </div> | |
| </div> | |
| <div class="h-80"> | |
| <canvas id="candlestickChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Training Pair Line Chart --> | |
| <div class="glass-card p-6"> | |
| <h3 class="text-lg font-semibold text-cyan-400">BTC/USDT Line Training</h3> | |
| <div class="h-80"> | |
| <canvas id="trainingLineChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- (removed duplicate neural-network-evolution section) --> | |
| <!-- Performance Comparison --> | |
| <div class="glass-card p-6 mb-6"> | |
| <h3 class="text-lg font-semibold text-cyan-400 mb-4">Performance Comparison</h3> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="text-sm text-gray-400 mb-2">Backtest Results</h4> | |
| <canvas id="backtestChart" class="h-64"></canvas> | |
| </div> | |
| <div> | |
| <h4 class="text-sm text-gray-400 mb-2">Live Trading Results</h4> | |
| <canvas id="liveChart" class="h-64"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Transactions --> | |
| <div class="glass-card p-6 mb-6"> | |
| <h3 class="text-lg font-semibold text-cyan-400 mb-4">Recent Transactions</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-sm"> | |
| <thead> | |
| <tr class="text-gray-400 border-b border-gray-700"> | |
| <th class="text-left py-3">Time</th> | |
| <th class="text-left py-3">Pair</th> | |
| <th class="text-left py-3">Type</th> | |
| <th class="text-left py-3">Price</th> | |
| <th class="text-left py-3">Amount</th> | |
| <th class="text-left py-3">Result</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="table-row"> | |
| <td class="py-3 text-gray-400">14:32:15</td> | |
| <td class="py-3">BTC/USDT</td> | |
| <td class="py-3 text-green-400">BUY</td> | |
| <td class="py-3 font-mono">$62,450.23</td> | |
| <td class="py-3 font-mono">0.25 BTC</td> | |
| <td class="py-3 text-green-400 font-mono">+$1,245.75</td> | |
| </tr> | |
| <tr class="table-row"> | |
| <td class="py-3 text-gray-400">14:18:42</td> | |
| <td class="py-3">ETH/USDT</td> | |
| <td class="py-3 text-red-400">SELL</td> | |
| <td class="py-3 font-mono">$3,420.78</td> | |
| <td class="py-3 font-mono">1.5 ETH</td> | |
| <td class="py-3 text-red-400 font-mono">-$892.30</td> | |
| </tr> | |
| <tr class="table-row"> | |
| <td class="py-3 text-gray-400">13:55:27</td> | |
| <td class="py-3">SOL/USDT</td> | |
| <td class="py-3 text-green-400">BUY</td> | |
| <td class="py-3 font-mono">$142.35</td> | |
| <td class="py-3 font-mono">15 SOL</td> | |
| <td class="py-3 text-green-400 font-mono">+$213.52</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Real API caller | |
| async function fetchCandleData(coin = "bitcoin", days = 1) { | |
| const res = await fetch(`https://api.coingecko.com/api/v3/coins/${coin}/market_chart?vs_currency=usd&days=${days}&interval=minutely`); | |
| const data = await res.json(); | |
| // Process prices data | |
| const prices = data.prices.map(([timestamp, price]) => ({ | |
| timestamp: new Date(timestamp), | |
| price: price | |
| })); | |
| // Process volumes data | |
| const volumes = data.total_volumes.map(([timestamp, volume]) => ({ | |
| timestamp: new Date(timestamp), | |
| volume: volume | |
| })); | |
| // Convert to OHLC candles (15-minute intervals) | |
| const candles = []; | |
| const interval = 15 * 60 * 1000; // 15 minutes in milliseconds | |
| let currentCandle = {}; | |
| let startTime = prices[0].timestamp.getTime(); | |
| for (let i = 0; i < prices.length; i++) { | |
| const priceTime = prices[i].timestamp.getTime(); | |
| // If we've moved to a new 15-minute interval | |
| if (priceTime >= startTime + interval || i === prices.length - 1) { | |
| if (Object.keys(currentCandle).length > 0) { | |
| candles.push({ | |
| timestamp: new Date(startTime), | |
| open: currentCandle.open, | |
| high: currentCandle.high, | |
| low: currentCandle.low, | |
| close: prices[i-1].price | |
| }); | |
| } | |
| // Reset for next candle | |
| currentCandle = { | |
| open: prices[i].price, | |
| high: prices[i].price, | |
| low: prices[i].price | |
| }; | |
| startTime = priceTime; | |
| } else { | |
| // Update high/low for current candle | |
| if (prices[i].price > currentCandle.high) currentCandle.high = prices[i].price; | |
| if (prices[i].price < currentCandle.low) currentCandle.low = prices[i].price; | |
| } | |
| } | |
| return candles.map(c => ({ | |
| x: c.timestamp, | |
| o: c.open, | |
| h: c.high, | |
| l: c.low, | |
| c: c.close | |
| })); | |
| } | |
| // Global storage | |
| window.candleData = []; | |
| async function initCharts() { | |
| try { | |
| window.candleData = await fetchCandleData("bitcoin", 1); | |
| } catch (error) { | |
| console.error("Error fetching candle data:", error); | |
| // Fallback to static data if API fails | |
| window.candleData = [ | |
| { x: new Date(), o: 62000, h: 62500, l: 61800, c: 62450 }, | |
| { x: new Date(Date.now() - 86400000), o: 61500, h: 62200, l: 61200, c: 62000 } | |
| ]; | |
| } | |
| // Candlestick Chart | |
| const candleCtx = document.getElementById('candlestickChart').getContext('2d'); | |
| new Chart(candleCtx, { | |
| type: 'candlestick', | |
| data: { | |
| datasets: [{ | |
| label: 'BTC/USDT', | |
| data: window.candleData, | |
| color: { up: '#00ff88', down: '#ff0066', unchanged: '#a1a1aa' } | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { legend: { display: false } }, | |
| scales: { x: { display: false }, y: { display: false } } | |
| } | |
| }); | |
| // Line chart for training pair | |
| const lineCtx = document.getElementById('trainingLineChart').getContext('2d'); | |
| new Chart(lineCtx, { | |
| type: 'line', | |
| data: { | |
| labels: window.candleData.map(d => d.x), | |
| datasets: [{ | |
| label: 'BTC/USDT', | |
| data: window.candleData.map(d => d.c), | |
| borderColor: '#00f7ff', | |
| backgroundColor: 'rgba(0, 247, 255, 0.1)', | |
| borderWidth: 2, | |
| tension: 0.3, | |
| pointRadius: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { legend: { display: false } }, | |
| scales: { x: { display: false }, y: { display: false } } | |
| } | |
| }); | |
| // Training evolution | |
| const trainCtx = document.getElementById('trainingChart').getContext('2d'); | |
| new Chart(trainCtx, { | |
| type: 'line', | |
| data: { | |
| labels: Array.from({length:20}, (_,i)=>i+1), | |
| datasets: [{ | |
| label: 'Accuracy', | |
| data: Array.from({length:20}, (_,i)=>0.5+i*0.0132), | |
| borderColor: '#00f7ff', | |
| backgroundColor: 'rgba(0, 247, 255, 0.1)', | |
| borderWidth: 2, | |
| tension: 0.3 | |
| }, { | |
| label: 'Loss', | |
| data: Array.from({length:20}, (_,i)=>1-i*0.026), | |
| borderColor: '#ff0066', | |
| backgroundColor: 'rgba(255, 0, 102, 0.1)', | |
| borderWidth: 2, | |
| tension: 0.3 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { legend: { display: false } }, | |
| scales: { x: { display: false }, y: { display: false } } | |
| } | |
| }); | |
| } | |
| document.addEventListener('DOMContentLoaded', initCharts); | |
| // Backtest & Live Charts | |
| ['backtestChart', 'liveChart'].forEach((id, index) => { | |
| const ctx = document.getElementById(id).getContext('2d'); | |
| new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: Array.from({length: 30}, (_, i) => `D${i+1}`), | |
| datasets: [{ | |
| data: Array.from({length: 30}, () => Math.random() * 5000 + 10000), | |
| borderColor: index === 0 ? '#00f7ff' : '#00ff88', | |
| backgroundColor: index === 0 ? 'rgba(0, 247, 255, 0.1)' : 'rgba(0, 255, 136, 0.1)', | |
| borderWidth: 2, | |
| tension: 0.3 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { legend: { display: false } }, | |
| scales: { | |
| x: { display: false }, | |
| y: { display: false } | |
| } | |
| } | |
| }); | |
| }); | |
| }); | |
| // Add floating animation to elements | |
| document.querySelectorAll('.glass-card').forEach((card, index) => { | |
| card.classList.add('floating-element'); | |
| card.style.animationDelay = `${index * 0.2}s`; | |
| }); | |
| </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=olywwe/https-huggingface-co-spaces-olywwe-bibytgradio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |