Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WaveWhisper - Crypto Wave Analysis</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/lightweight-charts@3.8.0/dist/lightweight-charts.standalone.production.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <script> | |
| // Kraken API integration | |
| async function fetchKrakenData(pair, interval) { | |
| const intervals = { | |
| '1D': 1440, | |
| '4H': 240, | |
| '1H': 60, | |
| '15M': 15 | |
| }; | |
| try { | |
| const response = await fetch(`https://api.kraken.com/0/public/OHLC?pair=${pair}&interval=${intervals[interval]}`); | |
| const data = await response.json(); | |
| // Process Kraken data into chart format | |
| const ohlcData = data.result[Object.keys(data.result)[0]].map(item => ({ | |
| time: item[0], | |
| open: parseFloat(item[1]), | |
| high: parseFloat(item[2]), | |
| low: parseFloat(item[3]), | |
| close: parseFloat(item[4]), | |
| volume: parseFloat(item[6]) | |
| })); | |
| return ohlcData; | |
| } catch (error) { | |
| console.error('Error fetching Kraken data:', error); | |
| return []; | |
| } | |
| } | |
| // Elliott Wave detection logic | |
| function detectElliottWaves(data) { | |
| // Implement your Elliott Wave detection algorithm here | |
| // This is a simplified placeholder implementation | |
| const waves = []; | |
| let lastPeak = null; | |
| let lastTrough = null; | |
| for (let i = 2; i < data.length - 2; i++) { | |
| const prev2 = data[i-2].close; | |
| const prev1 = data[i-1].close; | |
| const current = data[i].close; | |
| const next1 = data[i+1].close; | |
| const next2 = data[i+2].close; | |
| // Simple peak detection | |
| if (current > prev1 && current > next1 && | |
| current > prev2 && current > next2) { | |
| lastPeak = { time: data[i].time, price: current }; | |
| if (lastTrough) { | |
| waves.push({ | |
| type: 'peak', | |
| time: data[i].time, | |
| price: current, | |
| difference: current - lastTrough.price | |
| }); | |
| } | |
| } | |
| // Simple trough detection | |
| if (current < prev1 && current < next1 && | |
| current < prev2 && current < next2) { | |
| lastTrough = { time: data[i].time, price: current }; | |
| if (lastPeak) { | |
| waves.push({ | |
| type: 'trough', | |
| time: data[i].time, | |
| price: current, | |
| difference: lastPeak.price - current | |
| }); | |
| } | |
| } | |
| } | |
| return waves; | |
| } | |
| let chart; | |
| let candleSeries; | |
| async function loadChart(symbol) { | |
| document.getElementById('current-coin').textContent = `${symbol}/USD`; | |
| const timeframeSelect = document.querySelector('select'); | |
| const timeframe = timeframeSelect.options[timeframeSelect.selectedIndex].text.split(' ')[0]; | |
| const pair = symbol === 'BTC' ? 'XBTUSD' : `${symbol}USD`; | |
| const ohlcData = await fetchKrakenData(pair, timeframe); | |
| const waves = detectElliottWaves(ohlcData); | |
| if (!chart) { | |
| chart = LightweightCharts.createChart(document.getElementById('crypto-chart'), { | |
| width: document.getElementById('chart-container').offsetWidth, | |
| height: 400, | |
| layout: { | |
| backgroundColor: '#1F2937', | |
| textColor: '#D1D5DB', | |
| }, | |
| grid: { | |
| vertLines: { | |
| color: '#374151', | |
| }, | |
| horzLines: { | |
| color: '#374151', | |
| }, | |
| }, | |
| crosshair: { | |
| mode: LightweightCharts.CrosshairMode.Normal, | |
| }, | |
| rightPriceScale: { | |
| borderColor: '#374151', | |
| }, | |
| timeScale: { | |
| borderColor: '#374151', | |
| }, | |
| }); | |
| candleSeries = chart.addCandlestickSeries({ | |
| upColor: '#10B981', | |
| downColor: '#EF4444', | |
| borderDownColor: '#EF4444', | |
| borderUpColor: '#10B981', | |
| wickDownColor: '#EF4444', | |
| wickUpColor: '#10B981', | |
| }); | |
| } | |
| candleSeries.setData(ohlcData); | |
| // Clear previous wave markers | |
| chart.removeAllMarkers(); | |
| // Add wave markers | |
| waves.forEach((wave, index) => { | |
| const color = wave.type === 'peak' ? | |
| ['blue', 'green', 'yellow', 'red', 'purple'][index % 5] : | |
| ['pink', 'teal', 'orange'][index % 3]; | |
| chart.addMarker({ | |
| time: wave.time, | |
| position: wave.type === 'peak' ? 'aboveBar' : 'belowBar', | |
| color: color, | |
| shape: wave.type === 'peak' ? 'arrowDown' : 'arrowUp', | |
| text: `Wave ${index+1}`, | |
| }); | |
| }); | |
| chart.timeScale().fitContent(); | |
| } | |
| // Initialize with BTC by default | |
| document.addEventListener('DOMContentLoaded', () => { | |
| feather.replace(); | |
| loadChart('BTC'); | |
| // Initialize Vanta.js waves background | |
| VANTA.WAVES({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| color: 0x3b82f6, | |
| shininess: 35.00, | |
| waveHeight: 15.00, | |
| waveSpeed: 0.50, | |
| }); | |
| }); | |
| </script> | |
| <style> | |
| .chart-container { | |
| height: 400px; | |
| width: 100%; | |
| } | |
| .wave-indicator { | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .wave-1 { background-color: #3b82f6; } | |
| .wave-2 { background-color: #10b981; } | |
| .wave-3 { background-color: #f59e0b; } | |
| .wave-4 { background-color: #ef4444; } | |
| .wave-5 { background-color: #8b5cf6; } | |
| .wave-a { background-color: #ec4899; } | |
| .wave-b { background-color: #14b8a6; } | |
| .wave-c { background-color: #f97316; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100"> | |
| <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-8 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 bg-clip-text text-transparent mb-2">WaveWhisper</h1> | |
| <p class="text-lg text-gray-400">Deciphering crypto waves with Elliott theory</p> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Panel - Crypto Selector --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i data-feather="compass" class="mr-2"></i> Market Navigator | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center space-x-3 p-3 bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-600 transition" | |
| onclick="loadChart('BTC')" id="btc-selector"> | |
| <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-8 h-8"> | |
| <div> | |
| <p class="font-medium">Bitcoin (BTC)</p> | |
| <p class="text-sm text-gray-400">Dominance: 42%</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3 p-3 bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-600 transition" | |
| onclick="loadChart('ETH')" id="eth-selector"> | |
| <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="ETH" class="w-8 h-8"> | |
| <div> | |
| <p class="font-medium">Ethereum (ETH)</p> | |
| <p class="text-sm text-gray-400">Dominance: 18%</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3 p-3 bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-600 transition" | |
| onclick="loadChart('SOL')" id="sol-selector"> | |
| <img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="SOL" class="w-8 h-8"> | |
| <div> | |
| <p class="font-medium">Solana (SOL)</p> | |
| <p class="text-sm text-gray-400">Dominance: 3%</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-gray-700"> | |
| <h3 class="text-lg font-medium mb-3 flex items-center"> | |
| <i data-feather="settings" class="mr-2"></i> Analysis Settings | |
| </h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Timeframe</label> | |
| <select class="w-full bg-gray-700 border border-gray-600 rounded-md p-2 text-sm"> | |
| <option>1D (Daily)</option> | |
| <option>4H (4 Hours)</option> | |
| <option selected>1H (1 Hour)</option> | |
| <option>15M (15 Minutes)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Wave Sensitivity</label> | |
| <input type="range" min="1" max="10" value="5" class="w-full accent-purple-500"> | |
| </div> | |
| <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md transition flex items-center justify-center"> | |
| <i data-feather="refresh-cw" class="mr-2 w-4"></i> Detect Wave Patterns | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Center Panel - Chart --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold flex items-center"> | |
| <i data-feather="activity" class="mr-2"></i> | |
| <span id="current-coin">BTC/USDT</span> | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-md" onclick="chart.timeScale().fitContent()"> | |
| <i data-feather="maximize-2" class="w-4"></i> | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-md" onclick="loadChart(document.getElementById('current-coin').textContent.split('/')[0])"> | |
| <i data-feather="refresh-cw" class="w-4"></i> | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-md"> | |
| <i data-feather="download" class="w-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="chart-container relative" id="chart-container"> | |
| <div id="crypto-chart"></div> | |
| </div> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <div class="flex items-center text-xs"> | |
| <div class="w-3 h-3 rounded-full bg-blue-500 mr-1"></div> | |
| <span>Wave 1</span> | |
| </div> | |
| <div class="flex items-center text-xs"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-1"></div> | |
| <span>Wave 2</span> | |
| </div> | |
| <div class="flex items-center text-xs"> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-1"></div> | |
| <span>Wave 3</span> | |
| </div> | |
| <div class="flex items-center text-xs"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-1"></div> | |
| <span>Wave 4</span> | |
| </div> | |
| <div class="flex items-center text-xs"> | |
| <div class="w-3 h-3 rounded-full bg-purple-500 mr-1"></div> | |
| <span>Wave 5</span> | |
| </div> | |
| <div class="flex items-center text-xs"> | |
| <div class="w-3 h-3 rounded-full bg-pink-500 mr-1"></div> | |
| <span>Wave A</span> | |
| </div> | |
| <div class="flex items-center text-xs"> | |
| <div class="w-3 h-3 rounded-full bg-teal-500 mr-1"></div> | |
| <span>Wave B</span> | |
| </div> | |
| <div class="flex items-center text-xs"> | |
| <div class="w-3 h-3 rounded-full bg-orange-500 mr-1"></div> | |
| <span>Wave C</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Wave Analysis Section --> | |
| <div class="mt-6 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i data-feather="bar-chart-2" class="mr-2"></i> Elliott Wave Analysis | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="text-sm text-gray-400 mb-1">Current Wave</div> | |
| <div class="text-2xl font-bold text-purple-400" id="current-wave">Wave 3</div> | |
| <div class="text-xs text-gray-400 mt-2">Strongest impulse wave</div> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="text-sm text-gray-400 mb-1">Wave Length</div> | |
| <div class="text-2xl font-bold text-blue-400" id="wave-length">61.8%</div> | |
| <div class="text-xs text-gray-400 mt-2">Fibonacci extension</div> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="text-sm text-gray-400 mb-1">Next Target</div> | |
| <div class="text-2xl font-bold text-green-400" id="next-target">$42,850</div> | |
| <div class="text-xs text-gray-400 mt-2">1.618 Fib level</div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-medium mb-3 flex items-center"> | |
| <i data-feather="alert-circle" class="mr-2 w-4"></i> Wave Indicators | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| </ | |
| </body> | |
| </html> |