| | |
| |
|
| | |
| | class SignalUpdater { |
| | constructor() { |
| | this.signalData = null; |
| | this.updateInterval = null; |
| | this.exchanges = ['Binance Futures', 'Bybit', 'OKX', 'Kraken', 'Bitmex', 'Deribit']; |
| | this.pairs = ['BTC/USDT', 'ETH/USDT', 'SOL/USDT', 'AVAX/USDT', 'XRP/USDT', 'ADA/USDT']; |
| | this.init(); |
| | } |
| |
|
| | init() { |
| | this.generateInitialSignal(); |
| | this.startRealTimeUpdates(); |
| | this.setupWebSocketSimulation(); |
| | } |
| |
|
| | generateInitialSignal() { |
| | this.signalData = { |
| | pair: this.pairs[Math.floor(Math.random() * this.pairs.length)], |
| | entry: (Math.random() * 10000 + 30000).toFixed(2), |
| | target: (Math.random() * 15000 + 35000).toFixed(2), |
| | stopLoss: (Math.random() * 5000 + 28000).toFixed(2), |
| | confidence: (Math.random() * 20 + 80).toFixed(1), |
| | exchange: this.exchanges[Math.floor(Math.random() * this.exchanges.length)], |
| | timestamp: new Date().toISOString(), |
| | roi: (Math.random() * 15 + 2).toFixed(2) |
| | }; |
| | } |
| |
|
| | startRealTimeUpdates() { |
| | this.updateInterval = setInterval(() => { |
| | this.updateSignal(); |
| | this.updateUI(); |
| | }, 5000); |
| | } |
| |
|
| | updateSignal() { |
| | if (!this.signalData) return; |
| |
|
| | |
| | const currentEntry = parseFloat(this.signalData.entry); |
| | const change = (Math.random() - 0.5) * 100; |
| | this.signalData.entry = (currentEntry + change).toFixed(2); |
| | |
| | |
| | const target = parseFloat(this.signalData.target); |
| | const newRoi = ((target - parseFloat(this.signalData.entry)) / parseFloat(this.signalData.entry) * 100).toFixed(2); |
| | this.signalData.roi = parseFloat(newRoi) > 0 ? newRoi : (Math.random() * 10 + 1).toFixed(2); |
| | |
| | |
| | if (Math.random() < 0.1) { |
| | this.signalData.pair = this.pairs[Math.floor(Math.random() * this.pairs.length)]; |
| | } |
| |
|
| | this.signalData.timestamp = new Date().toISOString(); |
| | this.signalData.confidence = (Math.random() * 5 + 90).toFixed(1); |
| | } |
| |
|
| | updateUI() { |
| | const signalElements = document.querySelectorAll('.live-signal-display'); |
| | signalElements.forEach(element => { |
| | if (this.signalData) { |
| | const roiElement = element.querySelector('.roi-value'); |
| | const pairElement = element.querySelector('.pair-value'); |
| | const entryElement = element.querySelector('.entry-value'); |
| | |
| | if (roiElement) { |
| | roiElement.textContent = `+${this.signalData.roi}%`; |
| | |
| | const roi = parseFloat(this.signalData.roi); |
| | if (roi > 5) { |
| | roiElement.className = 'roi-value text-3xl font-orbitron font-bold text-green-400'; |
| | } else if (roi > 2) { |
| | roiElement.className = 'roi-value text-3xl font-orbitron font-bold text-yellow-400'; |
| | } else { |
| | roiElement.className = 'roi-value text-3xl font-orbitron font-bold text-red-400'; |
| | } |
| | } |
| | |
| | if (pairElement) pairElement.textContent = this.signalData.pair; |
| | if (entryElement) entryElement.textContent = `$${this.signalData.entry}`; |
| | } |
| | }); |
| |
|
| | |
| | const timeElements = document.querySelectorAll('.signal-time'); |
| | timeElements.forEach(element => { |
| | element.textContent = new Date().toLocaleTimeString(); |
| | }); |
| | } |
| |
|
| | setupWebSocketSimulation() { |
| | |
| | setInterval(() => { |
| | this.simulatePriceTicks(); |
| | }, 1000); |
| | } |
| |
|
| | simulatePriceTicks() { |
| | const tickElements = document.querySelectorAll('.price-tick'); |
| | tickElements.forEach(element => { |
| | const change = (Math.random() - 0.5) * 0.5; |
| | const current = element.textContent.replace('$', '').replace('%', ''); |
| | const isPercent = element.textContent.includes('%'); |
| | let newValue; |
| | |
| | if (isPercent) { |
| | newValue = (parseFloat(current) + change).toFixed(2); |
| | element.textContent = `${parseFloat(newValue) >= 0 ? '+' : ''}${newValue}%`; |
| | element.className = `price-tick ${parseFloat(newValue) >= 0 ? 'text-green-400' : 'text-red-400'}`; |
| | } else { |
| | newValue = (parseFloat(current) * (1 + change/100)).toFixed(2); |
| | element.textContent = `$${newValue}`; |
| | } |
| | }); |
| | } |
| | } |
| |
|
| | |
| | class AlertSystem { |
| | constructor() { |
| | this.alerts = []; |
| | this.maxAlerts = 5; |
| | this.init(); |
| | } |
| |
|
| | init() { |
| | this.loadSampleAlerts(); |
| | this.startAlertSimulation(); |
| | } |
| |
|
| | loadSampleAlerts() { |
| | const sampleAlerts = [ |
| | { type: 'buy', pair: 'BTC/USDT', price: '68421.50', message: 'Strong buy signal detected', time: 'Just now', priority: 'high' }, |
| | { type: 'sell', pair: 'ETH/USDT', price: '3521.80', message: 'Take profit target reached', time: '2 min ago', priority: 'medium' }, |
| | { type: 'info', pair: 'SOL/USDT', price: '142.30', message: 'Increased volatility detected', time: '5 min ago', priority: 'low' }, |
| | { type: 'warning', pair: 'XRP/USDT', price: '0.62', message: 'Approaching stop loss', time: '10 min ago', priority: 'high' } |
| | ]; |
| | |
| | this.alerts = sampleAlerts; |
| | this.renderAlerts(); |
| | } |
| |
|
| | addAlert(alert) { |
| | this.alerts.unshift(alert); |
| | if (this.alerts.length > this.maxAlerts) { |
| | this.alerts.pop(); |
| | } |
| | this.renderAlerts(); |
| | this.showNotification(alert); |
| | } |
| |
|
| | renderAlerts() { |
| | const alertContainer = document.getElementById('alert-container'); |
| | if (!alertContainer) return; |
| |
|
| | alertContainer.innerHTML = this.alerts.map(alert => ` |
| | <div class="alert-item p-4 border-l-4 ${this.getAlertBorderClass(alert.type)} bg-gray-900/50 mb-3 rounded-r-lg"> |
| | <div class="flex justify-between items-start"> |
| | <div> |
| | <div class="flex items-center gap-2 mb-1"> |
| | <span class="${this.getAlertColorClass(alert.type)} font-semibold">${alert.type.toUpperCase()}</span> |
| | <span class="text-gray-300 font-orbitron">${alert.pair}</span> |
| | <span class="text-gray-400">@ $${alert.price}</span> |
| | </div> |
| | <p class="text-gray-300">${alert.message}</p> |
| | </div> |
| | <span class="text-gray-500 text-sm">${alert.time}</span> |
| | </div> |
| | </div> |
| | `).join(''); |
| | } |
| |
|
| | getAlertBorderClass(type) { |
| | switch(type) { |
| | case 'buy': return 'border-green-500'; |
| | case 'sell': return 'border-red-500'; |
| | case 'warning': return 'border-yellow-500'; |
| | default: return 'border-blue-500'; |
| | } |
| | } |
| |
|
| | getAlertColorClass(type) { |
| | switch(type) { |
| | case 'buy': return 'text-green-400'; |
| | case 'sell': return 'text-red-400'; |
| | case 'warning': return 'text-yellow-400'; |
| | default: return 'text-blue-400'; |
| | } |
| | } |
| |
|
| | showNotification(alert) { |
| | if ('Notification' in window && Notification.permission === 'granted') { |
| | new Notification(`QuantumSignal: ${alert.type.toUpperCase()} ${alert.pair}`, { |
| | body: alert.message, |
| | icon: '/static/favicon.ico' |
| | }); |
| | } |
| | } |
| |
|
| | startAlertSimulation() { |
| | |
| | setInterval(() => { |
| | const types = ['buy', 'sell', 'info', 'warning']; |
| | const pairs = ['BTC/USDT', 'ETH/USDT', 'SOL/USDT', 'AVAX/USDT', 'XRP/USDT']; |
| | const messages = [ |
| | 'High probability entry point', |
| | 'Target reached successfully', |
| | 'Market trend reversal detected', |
| | 'Leverage adjustment recommended', |
| | 'Volume spike detected' |
| | ]; |
| | |
| | const alert = { |
| | type: types[Math.floor(Math.random() * types.length)], |
| | pair: pairs[Math.floor(Math.random() * pairs.length)], |
| | price: (Math.random() * 100000).toFixed(2), |
| | message: messages[Math.floor(Math.random() * messages.length)], |
| | time: 'Just now', |
| | priority: Math.random() > 0.7 ? 'high' : 'medium' |
| | }; |
| | |
| | if (Math.random() < 0.3) { |
| | this.addAlert(alert); |
| | } |
| | }, 10000); |
| | } |
| | } |
| |
|
| | |
| | class PerformanceCalculator { |
| | constructor() { |
| | this.initialCapital = 1000; |
| | this.monthlyROI = 42; |
| | this.months = 12; |
| | } |
| |
|
| | calculateProjection() { |
| | let capital = this.initialCapital; |
| | const projections = []; |
| | |
| | for (let month = 1; month <= this.months; month++) { |
| | capital += capital * (this.monthlyROI / 100); |
| | projections.push({ |
| | month, |
| | capital: capital.toFixed(2), |
| | growth: (capital - this.initialCapital).toFixed(2), |
| | roi: ((capital / this.initialCapital - 1) * 100).toFixed(1) |
| | }); |
| | } |
| | |
| | return projections; |
| | } |
| |
|
| | updateChart() { |
| | const projections = this.calculateProjection(); |
| | const ctx = document.getElementById('performanceChart'); |
| | |
| | if (ctx) { |
| | |
| | console.log('Performance projections:', projections); |
| | } |
| | } |
| | } |
| |
|
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | |
| | const signalUpdater = new SignalUpdater(); |
| | |
| | |
| | const alertSystem = new AlertSystem(); |
| | |
| | |
| | const performanceCalculator = new PerformanceCalculator(); |
| | performanceCalculator.updateChart(); |
| | |
| | |
| | if ('Notification' in window) { |
| | if (Notification.permission === 'default') { |
| | Notification.requestPermission(); |
| | } |
| | } |
| | |
| | |
| | const themeToggle = document.getElementById('themeToggle'); |
| | if (themeToggle) { |
| | themeToggle.addEventListener('click', function() { |
| | document.documentElement.classList.toggle('dark'); |
| | document.documentElement.classList.toggle('light'); |
| | localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); |
| | }); |
| | } |
| | |
| | |
| | const savedTheme = localStorage.getItem('theme') || 'dark'; |
| | if (savedTheme === 'light') { |
| | document.documentElement.classList.remove('dark'); |
| | document.documentElement.classList.add('light'); |
| | } |
| | |
| | |
| | const cards = document.querySelectorAll('.hover-card'); |
| | cards.forEach(card => { |
| | card.addEventListener('mouseenter', function() { |
| | this.style.transform = 'translateY(-5px)'; |
| | this.style.transition = 'transform 0.3s ease'; |
| | }); |
| | |
| | card.addEventListener('mouseleave', function() { |
| | this.style.transform = 'translateY(0)'; |
| | }); |
| | }); |
| | }); |
| |
|
| | |
| | async function fetchMarketData() { |
| | try { |
| | |
| | const response = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=true'); |
| | const data = await response.json(); |
| | return data; |
| | } catch (error) { |
| | console.error('Error fetching market data:', error); |
| | return null; |
| | } |
| | } |
| |
|
| | |
| | function formatCurrency(amount) { |
| | return new Intl.NumberFormat('en-US', { |
| | style: 'currency', |
| | currency: 'USD', |
| | minimumFractionDigits: 2, |
| | maximumFractionDigits: 2 |
| | }).format(amount); |
| | } |
| |
|
| | function formatPercentage(value) { |
| | return `${parseFloat(value) >= 0 ? '+' : ''}${parseFloat(value).toFixed(2)}%`; |
| | } |
| |
|
| | function debounce(func, wait) { |
| | let timeout; |
| | return function executedFunction(...args) { |
| | const later = () => { |
| | clearTimeout(timeout); |
| | func(...args); |
| | }; |
| | clearTimeout(timeout); |
| | timeout = setTimeout(later, wait); |
| | }; |
| | } |