Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quantum Signal Generator Pro</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <style> | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| .glow { | |
| box-shadow: 0 0 10px currentColor; | |
| } | |
| .gradient-border { | |
| border: 2px solid transparent; | |
| background-clip: padding-box; | |
| position: relative; | |
| } | |
| .gradient-border::after { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899); | |
| z-index: -1; | |
| border-radius: inherit; | |
| opacity: 0.7; | |
| } | |
| .signal-strength { | |
| transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen flex items-center justify-center p-4"> | |
| <div class="max-w-md w-full"> | |
| <div class="gradient-border rounded-xl overflow-hidden"> | |
| <div class="bg-gray-800 p-6 rounded-xl"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div> | |
| <h2 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">Quantum Signal Generator Pro</h2> | |
| <p class="text-sm text-gray-400">Advanced market prediction algorithm</p> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full blur opacity-75"></div> | |
| <div class="relative bg-gray-800 rounded-full p-2"> | |
| <i data-lucide="zap" class="w-6 h-6 text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm font-medium text-gray-300">Quantum Signal Strength</span> | |
| <span class="text-sm font-bold" id="signalStrengthValue">87%</span> | |
| </div> | |
| <div class="h-2.5 w-full bg-gray-700 rounded-full overflow-hidden"> | |
| <div id="signalStrengthBar" class="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full signal-strength" style="width: 87%"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-gray-700/50 rounded-lg p-4 border border-gray-600/30"> | |
| <div class="text-xs text-gray-400 mb-1">Buy Confidence</div> | |
| <div class="flex items-end"> | |
| <span id="buyConfidenceValue" class="text-2xl font-bold text-green-400">82</span> | |
| <span class="text-lg text-green-400 ml-1">%</span> | |
| </div> | |
| <div class="mt-2 h-1 w-full bg-gray-600 rounded-full"> | |
| <div id="buyConfidenceBar" class="h-full bg-green-500 rounded-full" style="width: 82%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700/50 rounded-lg p-4 border border-gray-600/30"> | |
| <div class="text-xs text-gray-400 mb-1">Sell Confidence</div> | |
| <div class="flex items-end"> | |
| <span id="sellConfidenceValue" class="text-2xl font-bold text-red-400">78</span> | |
| <span class="text-lg text-red-400 ml-1">%</span> | |
| </div> | |
| <div class="mt-2 h-1 w-full bg-gray-600 rounded-full"> | |
| <div id="sellConfidenceBar" class="h-full bg-red-500 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2 mb-6"> | |
| <div class="bg-gray-700/30 rounded-lg p-3 text-center"> | |
| <div class="text-xs text-gray-400 mb-1">Market Volatility</div> | |
| <div class="text-sm font-medium" id="volatilityValue">Medium</div> | |
| </div> | |
| <div class="bg-gray-700/30 rounded-lg p-3 text-center"> | |
| <div class="text-xs text-gray-400 mb-1">Trend Strength</div> | |
| <div class="text-sm font-medium" id="trendStrengthValue">Strong</div> | |
| </div> | |
| <div class="bg-gray-700/30 rounded-lg p-3 text-center"> | |
| <div class="text-xs text-gray-400 mb-1">Risk Level</div> | |
| <div class="text-sm font-medium" id="riskLevelValue">Moderate</div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <button id="generateBtn" class="w-full py-3 px-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 rounded-lg font-medium flex items-center justify-center transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20"> | |
| <i data-lucide="zap" class="w-5 h-5 mr-2"></i> | |
| <span>Generate Quantum Signal</span> | |
| </button> | |
| <div id="loadingIndicator" class="absolute inset-0 flex items-center justify-center bg-gray-800/80 rounded-lg hidden"> | |
| <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-purple-500"></div> | |
| </div> | |
| </div> | |
| <div id="toastContainer" class="fixed bottom-4 right-4 space-y-2"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| lucide.createIcons(); | |
| // Improved algorithm variables | |
| let marketState = { | |
| volatility: 0.5, | |
| trendDirection: 1, | |
| trendStrength: 0.7, | |
| lastSignal: null, | |
| consecutiveSignals: 0 | |
| }; | |
| // DOM elements | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const loadingIndicator = document.getElementById('loadingIndicator'); | |
| const signalStrengthValue = document.getElementById('signalStrengthValue'); | |
| const signalStrengthBar = document.getElementById('signalStrengthBar'); | |
| const buyConfidenceValue = document.getElementById('buyConfidenceValue'); | |
| const buyConfidenceBar = document.getElementById('buyConfidenceBar'); | |
| const sellConfidenceValue = document.getElementById('sellConfidenceValue'); | |
| const sellConfidenceBar = document.getElementById('sellConfidenceBar'); | |
| const volatilityValue = document.getElementById('volatilityValue'); | |
| const trendStrengthValue = document.getElementById('trendStrengthValue'); | |
| const riskLevelValue = document.getElementById('riskLevelValue'); | |
| const toastContainer = document.getElementById('toastContainer'); | |
| // Improved signal generation algorithm | |
| async function generateSignal() { | |
| generateBtn.disabled = true; | |
| loadingIndicator.classList.remove('hidden'); | |
| // Simulate analysis time with random delay | |
| const delay = 1500 + Math.random() * 1500; | |
| await new Promise(resolve => setTimeout(resolve, delay)); | |
| // Update market state | |
| updateMarketState(); | |
| // Generate values with improved algorithm | |
| const { signalStrength, buyConfidence, sellConfidence } = calculateSignal(); | |
| // Update UI | |
| updateUI(signalStrength, buyConfidence, sellConfidence); | |
| // Generate and show signal | |
| const signal = createSignal(buyConfidence, sellConfidence); | |
| showToast(signal); | |
| // Reset button state | |
| generateBtn.disabled = false; | |
| loadingIndicator.classList.add('hidden'); | |
| return signal; | |
| } | |
| function updateMarketState() { | |
| // Random walk for volatility (0-1) | |
| marketState.volatility = Math.max(0, Math.min(1, | |
| marketState.volatility + (Math.random() - 0.5) * 0.2 | |
| )); | |
| // Random walk for trend direction (-1 to 1) | |
| marketState.trendDirection = Math.max(-1, Math.min(1, | |
| marketState.trendDirection + (Math.random() - 0.5) * 0.3 | |
| )); | |
| // Trend strength depends on volatility and direction | |
| marketState.trendStrength = Math.max(0, Math.min(1, | |
| 0.5 + (Math.abs(marketState.trendDirection) * 0.5) - (marketState.volatility * 0.3) | |
| )); | |
| // Update market indicators | |
| updateMarketIndicators(); | |
| } | |
| function updateMarketIndicators() { | |
| // Volatility text | |
| if (marketState.volatility < 0.3) { | |
| volatilityValue.textContent = 'Low'; | |
| volatilityValue.className = 'text-sm font-medium text-green-400'; | |
| } else if (marketState.volatility < 0.7) { | |
| volatilityValue.textContent = 'Medium'; | |
| volatilityValue.className = 'text-sm font-medium text-yellow-400'; | |
| } else { | |
| volatilityValue.textContent = 'High'; | |
| volatilityValue.className = 'text-sm font-medium text-red-400'; | |
| } | |
| // Trend strength text | |
| if (marketState.trendStrength < 0.3) { | |
| trendStrengthValue.textContent = 'Weak'; | |
| trendStrengthValue.className = 'text-sm font-medium text-gray-400'; | |
| } else if (marketState.trendStrength < 0.7) { | |
| trendStrengthValue.textContent = 'Moderate'; | |
| trendStrengthValue.className = 'text-sm font-medium text-blue-400'; | |
| } else { | |
| trendStrengthValue.textContent = 'Strong'; | |
| trendStrengthValue.className = 'text-sm font-medium text-purple-400'; | |
| } | |
| // Risk level (combination of volatility and inverse trend strength) | |
| const riskLevel = (marketState.volatility * 0.7) + ((1 - marketState.trendStrength) * 0.3); | |
| if (riskLevel < 0.4) { | |
| riskLevelValue.textContent = 'Low'; | |
| riskLevelValue.className = 'text-sm font-medium text-green-400'; | |
| } else if (riskLevel < 0.7) { | |
| riskLevelValue.textContent = 'Moderate'; | |
| riskLevelValue.className = 'text-sm font-medium text-yellow-400'; | |
| } else { | |
| riskLevelValue.textContent = 'High'; | |
| riskLevelValue.className = 'text-sm font-medium text-red-400'; | |
| } | |
| } | |
| function calculateSignal() { | |
| // Base signal strength depends on trend strength and volatility | |
| let signalStrength = 50 + (marketState.trendStrength * 30) - (marketState.volatility * 10); | |
| // Add some randomness | |
| signalStrength += (Math.random() - 0.5) * 15; | |
| signalStrength = Math.max(20, Math.min(100, signalStrength)); | |
| // Calculate buy/sell confidence based on trend direction | |
| let buyConfidence, sellConfidence; | |
| if (marketState.trendDirection > 0) { | |
| // Bullish trend | |
| buyConfidence = 50 + (marketState.trendDirection * 30) + (signalStrength * 0.3); | |
| sellConfidence = 50 - (marketState.trendDirection * 20) + (signalStrength * 0.1); | |
| } else { | |
| // Bearish trend | |
| buyConfidence = 50 + (marketState.trendDirection * 20) + (signalStrength * 0.1); | |
| sellConfidence = 50 - (marketState.trendDirection * 30) + (signalStrength * 0.3); | |
| } | |
| // Add some randomness and ensure within bounds | |
| buyConfidence += (Math.random() - 0.5) * 10; | |
| sellConfidence += (Math.random() - 0.5) * 10; | |
| buyConfidence = Math.max(20, Math.min(100, buyConfidence)); | |
| sellConfidence = Math.max(20, Math.min(100, sellConfidence)); | |
| // Adjust for consecutive signals (reduce confidence if too many same signals) | |
| if (marketState.lastSignal && marketState.consecutiveSignals > 0) { | |
| const reduction = Math.min(15, marketState.consecutiveSignals * 3); | |
| if (marketState.lastSignal === 'BUY') { | |
| buyConfidence = Math.max(20, buyConfidence - reduction); | |
| } else { | |
| sellConfidence = Math.max(20, sellConfidence - reduction); | |
| } | |
| } | |
| return { | |
| signalStrength: Math.round(signalStrength), | |
| buyConfidence: Math.round(buyConfidence), | |
| sellConfidence: Math.round(sellConfidence) | |
| }; | |
| } | |
| function createSignal(buyConfidence, sellConfidence) { | |
| // Determine signal type based on confidence and market state | |
| let isBuy; | |
| const buyThreshold = 55 + (marketState.trendDirection * 10); | |
| const sellThreshold = 55 - (marketState.trendDirection * 10); | |
| if (buyConfidence > sellConfidence && buyConfidence > buyThreshold) { | |
| isBuy = true; | |
| } else if (sellConfidence > buyConfidence && sellConfidence > sellThreshold) { | |
| isBuy = false; | |
| } else { | |
| // No clear signal if neither meets threshold | |
| isBuy = null; | |
| } | |
| // Update consecutive signals counter | |
| if (isBuy !== null) { | |
| if (marketState.lastSignal === (isBuy ? 'BUY' : 'SELL')) { | |
| marketState.consecutiveSignals++; | |
| } else { | |
| marketState.consecutiveSignals = 1; | |
| } | |
| marketState.lastSignal = isBuy ? 'BUY' : 'SELL'; | |
| } else { | |
| marketState.consecutiveSignals = 0; | |
| marketState.lastSignal = null; | |
| } | |
| if (isBuy === null) { | |
| return { | |
| type: 'NEUTRAL', | |
| confidence: Math.max(buyConfidence, sellConfidence), | |
| price: generatePrice(), | |
| timestamp: new Date() | |
| }; | |
| } | |
| return { | |
| type: isBuy ? 'BUY' : 'SELL', | |
| confidence: isBuy ? buyConfidence : sellConfidence, | |
| price: generatePrice(), | |
| timestamp: new Date() | |
| }; | |
| } | |
| function generatePrice() { | |
| // Generate price with volatility and trend influence | |
| const basePrice = 42000; | |
| const volatilityFactor = marketState.volatility * 500; | |
| const trendFactor = marketState.trendDirection * 300 * marketState.trendStrength; | |
| return parseFloat((basePrice + trendFactor + (Math.random() - 0.5) * volatilityFactor * 2).toFixed(2)); | |
| } | |
| function updateUI(signalStrength, buyConfidence, sellConfidence) { | |
| // Update signal strength | |
| signalStrengthValue.textContent = `${signalStrength}%`; | |
| signalStrengthBar.style.width = `${signalStrength}%`; | |
| // Update buy confidence | |
| buyConfidenceValue.textContent = buyConfidence; | |
| buyConfidenceBar.style.width = `${buyConfidence}%`; | |
| // Update sell confidence | |
| sellConfidenceValue.textContent = sellConfidence; | |
| sellConfidenceBar.style.width = `${sellConfidence}%`; | |
| // Add pulse animation for strong signals | |
| if (signalStrength > 85) { | |
| signalStrengthBar.classList.add('pulse-animation', 'glow'); | |
| setTimeout(() => { | |
| signalStrengthBar.classList.remove('pulse-animation', 'glow'); | |
| }, 2000); | |
| } | |
| } | |
| function showToast(signal) { | |
| const toast = document.createElement('div'); | |
| toast.className = `p-4 rounded-lg shadow-lg flex items-start ${signal.type === 'BUY' ? 'bg-green-900/80 border border-green-700' : signal.type === 'SELL' ? 'bg-red-900/80 border border-red-700' : 'bg-gray-800/80 border border-gray-700'}`; | |
| const icon = document.createElement('div'); | |
| icon.className = `mr-3 mt-0.5 ${signal.type === 'BUY' ? 'text-green-400' : signal.type === 'SELL' ? 'text-red-400' : 'text-gray-400'}`; | |
| if (signal.type === 'BUY') { | |
| icon.innerHTML = '<i data-lucide="trending-up" class="w-5 h-5"></i>'; | |
| } else if (signal.type === 'SELL') { | |
| icon.innerHTML = '<i data-lucide="trending-down" class="w-5 h-5"></i>'; | |
| } else { | |
| icon.innerHTML = '<i data-lucide="move-horizontal" class="w-5 h-5"></i>'; | |
| } | |
| const content = document.createElement('div'); | |
| content.className = 'flex-1'; | |
| const title = document.createElement('h3'); | |
| title.className = 'font-medium'; | |
| title.textContent = signal.type === 'BUY' ? 'Buy Signal Generated' : signal.type === 'SELL' ? 'Sell Signal Generated' : 'Market Neutral'; | |
| const description = document.createElement('p'); | |
| description.className = 'text-sm opacity-80'; | |
| if (signal.type !== 'NEUTRAL') { | |
| description.textContent = `${signal.type} signal with ${signal.confidence}% confidence at $${signal.price}`; | |
| } else { | |
| description.textContent = `Market is neutral (${signal.confidence}% confidence). No clear signal.`; | |
| } | |
| content.appendChild(title); | |
| content.appendChild(description); | |
| toast.appendChild(icon); | |
| toast.appendChild(content); | |
| // Add close button | |
| const closeBtn = document.createElement('button'); | |
| closeBtn.className = 'ml-4 text-gray-300 hover:text-white'; | |
| closeBtn.innerHTML = '<i data-lucide="x" class="w-4 h-4"></i>'; | |
| closeBtn.onclick = () => toast.remove(); | |
| toast.appendChild(closeBtn); | |
| toastContainer.appendChild(toast); | |
| lucide.createIcons(); | |
| // Auto-remove after 5 seconds | |
| setTimeout(() => { | |
| toast.classList.add('opacity-0', 'transition-opacity', 'duration-300'); | |
| setTimeout(() => toast.remove(), 300); | |
| }, 5000); | |
| } | |
| // Initialize | |
| generateBtn.addEventListener('click', generateSignal); | |
| updateMarketIndicators(); | |
| </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=xereon/quantumsignalstrength" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |