| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Trading Platform - CryptoQuest</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></scr'+'ipt> |
| <scr'+'ipt src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></scr'+'ipt> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); |
| * { |
| font-family: 'Space Grotesk', sans-serif; |
| } |
| .dark-bg { |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); |
| } |
| .trading-panel { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| .price-up { |
| color: #10b981; |
| } |
| .price-down { |
| color: #ef4444; |
| } |
| .order-book { |
| max-height: 400px; |
| overflow-y: auto; |
| } |
| .order-book::-webkit-scrollbar { |
| width: 6px; |
| } |
| .order-book::-webkit-scrollbar-track { |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 3px; |
| } |
| .order-book::-webkit-scrollbar-thumb { |
| background: rgba(255, 255, 255, 0.3); |
| border-radius: 3px; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen dark-bg text-white"> |
| |
| <nav class="border-b border-gray-700"> |
| <div class="container mx-auto px-6 py-4"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="trending-up" class="text-yellow-400"></i> |
| <span class="text-xl font-bold">CryptoQuest</span> |
| </div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="index.html" class="hover:text-yellow-400 transition-colors">Home</a> |
| <a href="trading.html" class="text-yellow-400 font-semibold">Trading</a> |
| <a href="badges.html" class="hover:text-yellow-400 transition-colors">Badges</a> |
| <a href="leaderboard.html" class="hover:text-yellow-400 transition-colors">Leaderboard</a> |
| <a href="profile.html" class="hover:text-yellow-400 transition-colors">Profile</a> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="flex items-center space-x-2 bg-green-500/20 px-4 py-2 rounded-full"> |
| <i data-feather="dollar-sign" class="w-4 h-4"></i> |
| <span class="font-semibold">$10,247.83</span> |
| </div> |
| <button class="md:hidden"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </nav> |
| |
| <main class="container mx-auto px-6 py-8"> |
| <div class="grid lg:grid-cols-4 gap-6"> |
| |
| <div class="lg:col-span-1 trading-panel rounded-2xl p-6"> |
| <h3 class="text-xl font-bold mb-4 flex items-center space-x-2"> |
| <i data-feather="activity"></i> |
| <span>Market Overview</span> |
| </h3> |
| <div class="space-y-3"> |
| <div class="flex justify-between items-center p-3 bg-white/5 rounded-lg"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="bitcoin" class="w-4 h-4 text-orange-500"></i> |
| <span>BTC/USDT</span> |
| </div> |
| <div class="text-right"> |
| <div class="font-semibold">$42,187.65</div> |
| <div class="text-sm price-up">+2.34%</div> |
| </div> |
| </div> |
| <div class="flex justify-between items-center p-3 bg-white/5 rounded-lg"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="dollar-sign" class="w-4 h-4 text-green-500"></i> |
| <span>ETH/USDT</span> |
| </div> |
| <div class="text-right"> |
| <div class="font-semibold">$2,845.21</div> |
| <div class="text-sm price-up">+1.78%</div> |
| </div> |
| </div> |
| <div class="flex justify-between items-center p-3 bg-white/5 rounded-lg"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="circle" class="w-4 h-4 text-blue-500"></i> |
| <span>SOL/USDT</span> |
| </div> |
| <div class="text-right"> |
| <div class="font-semibold">$98.43</div> |
| <div class="text-sm price-down">-0.56%</div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <h4 class="text-lg font-semibold mt-6 mb-3">Order Book</h4> |
| <div class="order-book text-sm"> |
| <div class="space-y-1"> |
| |
| <div class="flex justify-between"> |
| <span class="price-down">98.40</span> |
| <span>12.5</span> |
| <span class="price-down">98.40</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="price-down">98.41</span> |
| <span>8.2</span> |
| <span class="price-down">98.41</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="price-down">98.42</span> |
| <span>15.7</span> |
| <span class="price-down">98.42</span> |
| </div> |
| <div class="text-center py-2 font-semibold">98.43</div> |
| <div class="flex justify-between"> |
| <span class="price-up">98.44</span> |
| <span>9.3</span> |
| <span class="price-up">98.44</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="price-up">98.45</span> |
| <span>11.8</span> |
| <span class="price-up">98.45</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="lg:col-span-2 trading-panel rounded-2xl p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-bold">SOL/USDT Chart</h3> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 bg-white/10 rounded-lg text-sm">1H</button> |
| <button class="px-3 py-1 bg-yellow-500/20 rounded-lg text-sm">4H</button> |
| <button class="px-3 py-1 bg-white/10 rounded-lg text-sm">1D</button> |
| <button class="px-3 py-1 bg-white/10 rounded-lg text-sm">1W</button> |
| </div> |
| </div> |
| <div class="h-96"> |
| <canvas id="priceChart"></canvas> |
| </div> |
| |
| <div class="flex flex-wrap gap-2 mt-4"> |
| <button onclick="changeTimeframe('1h')" class="px-3 py-1 bg-white/10 rounded-lg text-sm hover:bg-yellow-500/20 transition-colors">1H</button> |
| <button onclick="changeTimeframe('4h')" class="px-3 py-1 bg-white/10 rounded-lg text-sm hover:bg-yellow-500/20 transition-colors">4H</button> |
| <button onclick="changeTimeframe('1d')" class="px-3 py-1 bg-white/10 rounded-lg text-sm hover:bg-yellow-500/20 transition-colors">1D</button> |
| <button onclick="changeTimeframe('1w')" class="px-3 py-1 bg-white/10 rounded-lg text-sm hover:bg-yellow-500/20 transition-colors">1W</button> |
| <button onclick="changeChartType('candlestick')" class="px-3 py-1 bg-white/10 rounded-lg text-sm hover:bg-yellow-500/20 transition-colors">Candles</button> |
| <button onclick="changeChartType('line')" class="px-3 py-1 bg-white/10 rounded-lg text-sm hover:bg-yellow-500/20 transition-colors">Line</button> |
| <button onclick="toggleIndicators()" class="px-3 py-1 bg-white/10 rounded-lg text-sm hover:bg-yellow-500/20 transition-colors">Indicators</button> |
| </div> |
| </div> |
| |
| |
| <div class="lg:col-span-1 trading-panel rounded-2xl p-6"> |
| <h3 class="text-xl font-bold mb-4">Trade SOL/USDT</h3> |
| |
| |
| <div class="mb-4"> |
| <div class="flex bg-white/10 rounded-lg p-1"> |
| <button class="flex-1 py-2 text-center bg-yellow-500/20 rounded">Market</button> |
| <button class="flex-1 py-2 text-center">Limit</button> |
| </div> |
| </div> |
| |
| |
| <div class="mb-4"> |
| <div class="flex bg-white/10 rounded-lg p-1"> |
| <button class="flex-1 py-2 text-center bg-green-500/20 rounded">Buy</button> |
| <button class="flex-1 py-2 text-center">Sell</button> |
| </div> |
| </div> |
| |
| |
| <div class="mb-4"> |
| <label class="block text-sm mb-2">Amount (SOL)</label> |
| <input type="number" class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 focus:outline-none focus:border-yellow-500" placeholder="0.00"> |
| </div> |
| |
| |
| <div class="mb-4"> |
| <label class="block text-sm mb-2">Leverage</label> |
| <div class="flex bg-white/5 border border-white/10 rounded-lg px-4 py-2"> |
| <span>10x</span> |
| <i data-feather="chevron-down" class="w-4 h-4 ml-auto"></i> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label class="block text-sm mb-2">Stop Loss</label> |
| <input type="number" class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 focus:outline-none focus:border-yellow-500" placeholder="0.00"> |
| </div> |
| <div> |
| <label class="block text-sm mb-2">Take Profit</label> |
| <input type="number" class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2 focus:outline-none focus:border-yellow-500" placeholder="0.00"> |
| </div> |
| </div> |
| |
| |
| <button class="w-full bg-gradient-to-r from-green-400 to-green-600 hover:from-green-500 hover:to-green-700 text-white font-bold py-3 rounded-lg shadow-lg transform hover:scale-105 transition-all duration-300"> |
| Buy SOL |
| </button> |
| |
| |
| <div class="mt-6 p-4 bg-white/5 rounded-lg"> |
| <h4 class="font-semibold mb-2">Active Position</h4> |
| <div class="space-y-2 text-sm"> |
| <div class="flex justify-between"> |
| <span>Size:</span> |
| <span>5.2 SOL</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>Entry:</span> |
| <span>$97.85</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>Leverage:</span> |
| <span>10x</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>PnL:</span> |
| <span class="price-up">+$32.45</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| |
| <script> |
| |
| feather.replace(); |
| |
| let currentTimeframe = '1h'; |
| let currentChartType = 'line'; |
| let showIndicators = false; |
| let priceChart = null; |
| |
| |
| function initializeChart() { |
| const ctx = document.getElementById('priceChart').getContext('2d'); |
| |
| const chartData = generateChartData(currentTimeframe); |
| |
| priceChart = new Chart(ctx, { |
| type: currentChartType, |
| data: chartData, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| display: false |
| }, |
| tooltip: { |
| mode: 'index', |
| intersect: false, |
| backgroundColor: 'rgba(0, 0, 0, 0.8)', |
| titleColor: '#ffffff', |
| bodyColor: '#ffffff', |
| borderColor: 'rgba(255, 255, 255, 0.2)', |
| callbacks: { |
| label: function(context) { |
| return `Price: ${context.parsed.y?.toFixed(2) || context.raw?.c?.toFixed(2) || '0.00'}`; |
| } |
| } |
| } |
| }, |
| scales: { |
| x: { |
| grid: { |
| color: 'rgba(255, 255, 255, 0.1)' |
| }, |
| y: { |
| position: 'right', |
| grid: { |
| color: 'rgba(255, 255, 255, 0.1)', |
| ticks: { |
| callback: function(value) { |
| return '</scr' + 'ipt></body></html>' + value.toFixed(2); |
| } |
| } |
| } |
| }, |
| interaction: { |
| mode: 'nearest', |
| axis: 'x', |
| intersect: false |
| } |
| } |
| }); |
| } |
| |
| |
| function generateChartData(timeframe) { |
| const basePrice = 98.4; |
| const volatility = timeframe === '1h' ? 0.5 : timeframe === '4h' ? 1.2 : timeframe === '1d' ? 3.0 : 8.0; |
| const dataPoints = timeframe === '1h' ? 24 : timeframe === '4h' ? 30 : timeframe === '1d' ? 30 : 52; |
| |
| let data = []; |
| let labels = []; |
| let currentPrice = basePrice; |
| |
| for (let i = 0; i < dataPoints; i++) { |
| const change = (Math.random() - 0.5) * volatility; |
| currentPrice = Math.max(basePrice * 0.8, Math.min(basePrice * 1.2, currentPrice + change)); |
| |
| if (currentChartType === 'candlestick') { |
| const open = currentPrice; |
| const high = open + Math.random() * volatility * 0.5; |
| const low = open - Math.random() * volatility * 0.5; |
| const close = open + (Math.random() - 0.5) * volatility * 0.3; |
| data.push({ x: i, o: open, h: high, l: low, c: close }); |
| } else { |
| data.push(currentPrice); |
| } |
| |
| |
| if (timeframe === '1h') { |
| labels.push(`${(6 + i) % 24}:00`); |
| } else if (timeframe === '4h') { |
| labels.push(`Day ${Math.floor(i/6) + 1} ${(i*4) % 24}:00`); |
| } else if (timeframe === '1d') { |
| labels.push(`Nov ${i + 1}`); |
| } else { |
| labels.push(`Week ${i + 1}`); |
| } |
| } |
| |
| return { |
| labels: labels, |
| datasets: [{ |
| label: 'SOL/USDT', |
| data: data, |
| borderColor: '#f59e0b', |
| backgroundColor: currentChartType === 'line' ? 'rgba(245, 158, 11, 0.1)', |
| tension: 0.4, |
| fill: currentChartType === 'line', |
| ...(currentChartType === 'candlestick' && { |
| borderColor: data.map(item => item.c >= item.o ? '#10b981' : '#ef4444'), |
| ...(showIndicators && { |
| pointBackgroundColor: data.map(item => { |
| if (currentChartType === 'line') return '#f59e0b'; |
| return item.c >= item.o ? '#10b981' : '#ef4444') |
| }) |
| }, |
| ...(showIndicators && { |
| { |
| label: 'MA(20)', |
| data: calculateMovingAverage(data, 20), |
| borderColor: '#3b82f6', |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', |
| tension: 0.3, |
| borderDash: [5, 5], |
| pointRadius: 0 |
| }, |
| { |
| label: 'Volume', |
| data: generateVolumeData(dataPoints), |
| type: 'bar', |
| yAxisID: 'y1', |
| backgroundColor: data.map(item => { |
| if (currentChartType === 'candlestick') { |
| return item.c >= item.o ? 'rgba(16, 185, 129, 0.3)', |
| borderWidth: 0 |
| }] |
| }] |
| }; |
| } |
| |
| |
| function calculateMovingAverage(data, period) { |
| const ma = []; |
| for (let i = 0; i < data.length; i++) { |
| if (i < period - 1) { |
| ma.push(null); |
| } else { |
| const slice = data.slice(i - period + 1, i + 1); |
| const sum = slice.reduce((acc, val) => acc + (currentChartType === 'candlestick' ? val.c : val); |
| ma.push(sum / period); |
| } |
| } |
| return ma; |
| } |
| |
| |
| function generateVolumeData(length) { |
| const volumes = []; |
| let baseVolume = 1000000; |
| |
| for (let i = 0; i < length; i++) { |
| volumes.push(baseVolume * (0.5 + Math.random())); |
| } |
| return volumes; |
| } |
| |
| |
| function changeTimeframe(timeframe) { |
| currentTimeframe = timeframe; |
| if (priceChart) { |
| priceChart.destroy(); |
| } |
| initializeChart(); |
| } |
| |
| |
| function changeChartType(type) { |
| currentChartType = type; |
| if (priceChart) { |
| priceChart.destroy(); |
| } |
| initializeChart(); |
| } |
| |
| |
| function toggleIndicators() { |
| showIndicators = !showIndicators; |
| if (priceChart) { |
| priceChart.destroy(); |
| } |
| initializeChart(); |
| } |
| |
| |
| function simulatePriceUpdate() { |
| if (!priceChart) return; |
| |
| const datasets = priceChart.data.datasets; |
| const currentData = datasets[0].data; |
| const lastPrice = currentChartType === 'candlestick' ? |
| currentData[currentData.length - 1].c : |
| currentData[currentData.length - 1]; |
| |
| const change = (Math.random() - 0.5) * 0.3; |
| const newPrice = Math.max(50, lastPrice + change); |
| |
| if (currentChartType === 'candlestick') { |
| const newCandle = { |
| x: currentData.length, |
| o: lastPrice, |
| h: Math.max(lastPrice, newPrice) + Math.random() * 0.2; |
| const newLow = Math.min(lastPrice, newPrice) - Math.random() * 0.2; |
| const newClose = newPrice; |
| |
| currentData.push(newCandle); |
| } else { |
| currentData.push(newPrice); |
| } |
| |
| |
| const now = new Date(); |
| priceChart.data.labels.push(now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})); |
| |
| |
| if (currentData.length > 50) { |
| currentData.shift(); |
| priceChart.data.labels.shift(); |
| } |
| |
| priceChart.update('none'); |
| } |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| feather.replace(); |
| |
| |
| initializeChart(); |
| |
| |
| setInterval(simulatePriceUpdate, 2000); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
