|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Quantum Miner | Ultra-Fast BTC Mining</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.mining-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { opacity: 0.7; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.7; } |
|
|
} |
|
|
.progress-bar { |
|
|
transition: width 0.3s ease-in-out; |
|
|
} |
|
|
.hash-particle { |
|
|
position: absolute; |
|
|
background-color: rgba(247, 147, 26, 0.7); |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-white min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<header class="flex justify-between items-center mb-10"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fab fa-bitcoin text-3xl text-orange-500 mr-3"></i> |
|
|
<h1 class="text-2xl font-bold bg-gradient-to-r from-orange-500 to-yellow-400 bg-clip-text text-transparent">Quantum Miner</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="hidden md:flex items-center space-x-2"> |
|
|
<span class="text-gray-400">Current BTC Price:</span> |
|
|
<span class="font-bold text-green-400">$<span id="btc-price">68,421.34</span></span> |
|
|
</div> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-wallet mr-2"></i> |
|
|
<span>Wallet</span> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-2 bg-gray-800 rounded-xl p-6 shadow-lg"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold">Mining Control Panel</h2> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm text-gray-400">Connection:</span> |
|
|
<span class="h-3 w-3 rounded-full bg-green-500 animate-pulse"></span> |
|
|
<span class="text-green-400">Secure</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 rounded-lg p-6 mb-6 relative overflow-hidden"> |
|
|
<div id="particles-container" class="absolute inset-0 overflow-hidden"></div> |
|
|
<div class="relative z-10"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center mb-4"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-1">Quantum Mining Engine</h3> |
|
|
<p class="text-gray-400 text-sm">Ultra-fast SHA-256 algorithm</p> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0"> |
|
|
<button id="mining-toggle" class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-6 py-3 rounded-lg font-bold flex items-center mining-animation"> |
|
|
<i class="fas fa-power-off mr-2"></i> |
|
|
<span>START MINING</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6"> |
|
|
<div class="bg-gray-800 p-4 rounded-lg"> |
|
|
<p class="text-gray-400 text-sm">Hash Rate</p> |
|
|
<p class="text-xl font-bold"><span id="hash-rate">0</span> TH/s</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-4 rounded-lg"> |
|
|
<p class="text-gray-400 text-sm">Mined Today</p> |
|
|
<p class="text-xl font-bold"><span id="mined-today">0.000000</span> BTC</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-4 rounded-lg"> |
|
|
<p class="text-gray-400 text-sm">Estimated Daily</p> |
|
|
<p class="text-xl font-bold">$<span id="estimated-daily">0.00</span></p> |
|
|
</div> |
|
|
<div class="bg-gray-800 p-4 rounded-lg"> |
|
|
<p class="text-gray-400 text-sm">Active Workers</p> |
|
|
<p class="text-xl font-bold"><span id="active-workers">0</span>/8</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-400">Current Block Progress</span> |
|
|
<span class="font-bold"><span id="block-progress">0</span>%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-700 rounded-full h-3"> |
|
|
<div id="progress-bar" class="progress-bar h-3 rounded-full bg-gradient-to-r from-orange-500 to-yellow-400" style="width: 0%"></div> |
|
|
</div> |
|
|
<div class="flex justify-between mt-2 text-sm text-gray-400"> |
|
|
<span>Block #<span id="current-block">789,456</span></span> |
|
|
<span>Difficulty: <span id="difficulty">36.76T</span></span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Boost Your Mining</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="bg-gray-900 p-4 rounded-lg border border-gray-700 hover:border-orange-500 transition cursor-pointer"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<i class="fas fa-bolt text-yellow-400 text-xl"></i> |
|
|
<span class="bg-green-900 text-green-400 text-xs px-2 py-1 rounded">+25%</span> |
|
|
</div> |
|
|
<h4 class="font-bold mb-1">Turbo Mode</h4> |
|
|
<p class="text-gray-400 text-sm">Increase hash rate by 25%</p> |
|
|
</div> |
|
|
<div class="bg-gray-900 p-4 rounded-lg border border-gray-700 hover:border-orange-500 transition cursor-pointer"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<i class="fas fa-server text-blue-400 text-xl"></i> |
|
|
<span class="bg-blue-900 text-blue-400 text-xs px-2 py-1 rounded">+50%</span> |
|
|
</div> |
|
|
<h4 class="font-bold mb-1">Add Cloud Worker</h4> |
|
|
<p class="text-gray-400 text-sm">Deploy additional cloud miner</p> |
|
|
</div> |
|
|
<div class="bg-gray-900 p-4 rounded-lg border border-gray-700 hover:border-orange-500 transition cursor-pointer"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<i class="fas fa-gem text-purple-400 text-xl"></i> |
|
|
<span class="bg-purple-900 text-purple-400 text-xs px-2 py-1 rounded">+100%</span> |
|
|
</div> |
|
|
<h4 class="font-bold mb-1">Quantum Boost</h4> |
|
|
<p class="text-gray-400 text-sm">Activate quantum algorithms</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 shadow-lg"> |
|
|
<h2 class="text-xl font-bold mb-6">Your Earnings</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-gray-400">Total Mined</p> |
|
|
<p class="text-2xl font-bold"><span id="total-mined">0.002345</span> BTC</p> |
|
|
<p class="text-green-400 text-sm">≈ $<span id="total-mined-usd">160.42</span></p> |
|
|
</div> |
|
|
<i class="fas fa-coins text-3xl text-yellow-400"></i> |
|
|
</div> |
|
|
<div class="pt-4 border-t border-gray-700"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="text-gray-400">Last 24h</span> |
|
|
<span class="font-bold"><span id="last-24h">0.000056</span> BTC</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-400">Last 7d</span> |
|
|
<span class="font-bold"><span id="last-7d">0.000412</span> BTC</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full bg-orange-600 hover:bg-orange-700 text-white py-3 rounded-lg font-bold mt-4 flex items-center justify-center"> |
|
|
<i class="fas fa-download mr-2"></i> |
|
|
<span>Withdraw Earnings</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 shadow-lg"> |
|
|
<h2 class="text-xl font-bold mb-6">Pool Statistics</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<p class="text-gray-400 mb-1">Pool Hash Rate</p> |
|
|
<p class="text-xl font-bold">124.56 EH/s</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-400 mb-1">Pool Fee</p> |
|
|
<p class="text-xl font-bold">1.0%</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-400 mb-1">Next Payout</p> |
|
|
<p class="text-xl font-bold">In <span id="next-payout">3h 24m</span></p> |
|
|
</div> |
|
|
<div class="pt-4 border-t border-gray-700"> |
|
|
<p class="text-gray-400 mb-2">Your Pool Share</p> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2"> |
|
|
<div class="h-2 rounded-full bg-green-500" style="width: 0.02%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gradient-to-br from-orange-900 to-gray-800 rounded-xl p-6 shadow-lg"> |
|
|
<h2 class="text-xl font-bold mb-4">Invite Friends</h2> |
|
|
<p class="text-gray-300 mb-4">Earn 15% of your friends' mining rewards for life!</p> |
|
|
<div class="bg-black bg-opacity-30 p-3 rounded-lg mb-4"> |
|
|
<p class="text-gray-400 text-sm mb-1">Your referral link:</p> |
|
|
<div class="flex"> |
|
|
<input type="text" id="referral-link" value="https://quantumminer.io/ref/akx7b9" class="bg-gray-900 text-white text-sm rounded-l-lg px-3 py-2 flex-grow" readonly> |
|
|
<button onclick="copyReferralLink()" class="bg-orange-600 hover:bg-orange-700 text-white px-3 py-2 rounded-r-lg text-sm"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-gray-300 text-sm">Referrals</p> |
|
|
<p class="font-bold">12</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-300 text-sm">Earned from referrals</p> |
|
|
<p class="font-bold">0.0012 BTC</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div id="notification" class="fixed bottom-4 right-4 bg-gray-800 border-l-4 border-green-500 text-white px-6 py-4 rounded-lg shadow-xl transform translate-y-10 opacity-0 transition-all duration-300 hidden"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-3 text-xl"></i> |
|
|
<div> |
|
|
<p class="font-bold">Mining Started</p> |
|
|
<p class="text-sm text-gray-400">Your quantum miner is now running at full speed!</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let isMining = false; |
|
|
let hashRate = 0; |
|
|
let minedToday = 0; |
|
|
let activeWorkers = 0; |
|
|
let blockProgress = 0; |
|
|
let miningInterval; |
|
|
let particleInterval; |
|
|
|
|
|
|
|
|
const miningToggle = document.getElementById('mining-toggle'); |
|
|
const hashRateElement = document.getElementById('hash-rate'); |
|
|
const minedTodayElement = document.getElementById('mined-today'); |
|
|
const estimatedDailyElement = document.getElementById('estimated-daily'); |
|
|
const activeWorkersElement = document.getElementById('active-workers'); |
|
|
const blockProgressElement = document.getElementById('block-progress'); |
|
|
const progressBar = document.getElementById('progress-bar'); |
|
|
const notification = document.getElementById('notification'); |
|
|
const particlesContainer = document.getElementById('particles-container'); |
|
|
|
|
|
|
|
|
miningToggle.addEventListener('click', function() { |
|
|
isMining = !isMining; |
|
|
|
|
|
if (isMining) { |
|
|
|
|
|
miningToggle.innerHTML = '<i class="fas fa-power-off mr-2"></i><span>STOP MINING</span>'; |
|
|
miningToggle.classList.remove('from-orange-500', 'to-yellow-500', 'hover:from-orange-600', 'hover:to-yellow-600'); |
|
|
miningToggle.classList.add('from-red-500', 'to-red-600', 'hover:from-red-600', 'hover:to-red-700'); |
|
|
|
|
|
|
|
|
activeWorkers = 8; |
|
|
hashRate = 124.56; |
|
|
miningInterval = setInterval(updateMiningStats, 500); |
|
|
particleInterval = setInterval(createParticle, 50); |
|
|
|
|
|
|
|
|
showNotification('Mining Started', 'Your quantum miner is now running at full speed!', 'green'); |
|
|
} else { |
|
|
|
|
|
miningToggle.innerHTML = '<i class="fas fa-power-off mr-2"></i><span>START MINING</span>'; |
|
|
miningToggle.classList.remove('from-red-500', 'to-red-600', 'hover:from-red-600', 'hover:to-red-700'); |
|
|
miningToggle.classList.add('from-orange-500', 'to-yellow-500', 'hover:from-orange-600', 'hover:to-yellow-600'); |
|
|
|
|
|
|
|
|
clearInterval(miningInterval); |
|
|
clearInterval(particleInterval); |
|
|
activeWorkers = 0; |
|
|
hashRate = 0; |
|
|
|
|
|
|
|
|
showNotification('Mining Stopped', 'Your quantum miner has been turned off.', 'red'); |
|
|
} |
|
|
|
|
|
updateUI(); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateMiningStats() { |
|
|
|
|
|
const increment = Math.random() * 0.000001; |
|
|
minedToday += increment; |
|
|
|
|
|
|
|
|
const btcPriceElement = document.getElementById('btc-price'); |
|
|
let currentPrice = parseFloat(btcPriceElement.textContent.replace(/,/g, '')); |
|
|
currentPrice += (Math.random() - 0.5) * 100; |
|
|
btcPriceElement.textContent = currentPrice.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ","); |
|
|
|
|
|
|
|
|
blockProgress += Math.random() * 0.5; |
|
|
if (blockProgress >= 100) { |
|
|
blockProgress = 0; |
|
|
|
|
|
minedToday += 0.0001; |
|
|
showNotification('Block Found!', 'You earned 0.0001 BTC for solving a block!', 'green'); |
|
|
} |
|
|
|
|
|
updateUI(); |
|
|
} |
|
|
|
|
|
|
|
|
function updateUI() { |
|
|
hashRateElement.textContent = hashRate.toFixed(2); |
|
|
minedTodayElement.textContent = minedToday.toFixed(6); |
|
|
estimatedDailyElement.textContent = (minedToday * parseFloat(document.getElementById('btc-price').textContent.replace(/,/g, '')) * 24).toFixed(2); |
|
|
activeWorkersElement.textContent = activeWorkers; |
|
|
blockProgressElement.textContent = blockProgress.toFixed(1); |
|
|
progressBar.style.width = `${blockProgress}%`; |
|
|
|
|
|
|
|
|
const totalMinedElement = document.getElementById('total-mined'); |
|
|
let totalMined = parseFloat(totalMinedElement.textContent); |
|
|
totalMined += Math.random() * 0.000001; |
|
|
totalMinedElement.textContent = totalMined.toFixed(6); |
|
|
document.getElementById('total-mined-usd').textContent = (totalMined * parseFloat(document.getElementById('btc-price').textContent.replace(/,/g, ''))).toFixed(2); |
|
|
} |
|
|
|
|
|
|
|
|
function showNotification(title, message, color) { |
|
|
notification.querySelector('p.font-bold').textContent = title; |
|
|
notification.querySelector('p.text-sm').textContent = message; |
|
|
|
|
|
|
|
|
notification.classList.remove('border-green-500', 'border-red-500', 'border-blue-500'); |
|
|
notification.classList.add(`border-${color}-500`); |
|
|
|
|
|
|
|
|
const icon = notification.querySelector('i'); |
|
|
icon.classList.remove('fa-check-circle', 'fa-times-circle', 'fa-info-circle'); |
|
|
|
|
|
if (color === 'green') { |
|
|
icon.classList.add('fa-check-circle'); |
|
|
} else if (color === 'red') { |
|
|
icon.classList.add('fa-times-circle'); |
|
|
} else { |
|
|
icon.classList.add('fa-info-circle'); |
|
|
} |
|
|
|
|
|
|
|
|
notification.classList.remove('hidden'); |
|
|
notification.classList.remove('translate-y-10', 'opacity-0'); |
|
|
notification.classList.add('translate-y-0', 'opacity-100'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
notification.classList.remove('translate-y-0', 'opacity-100'); |
|
|
notification.classList.add('translate-y-10', 'opacity-0'); |
|
|
setTimeout(() => notification.classList.add('hidden'), 300); |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
|
|
|
function createParticle() { |
|
|
const particle = document.createElement('div'); |
|
|
particle.classList.add('hash-particle'); |
|
|
|
|
|
|
|
|
const size = Math.random() * 5 + 2; |
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
|
|
|
|
|
|
const x = Math.random() * particlesContainer.offsetWidth; |
|
|
const y = Math.random() * particlesContainer.offsetHeight; |
|
|
particle.style.left = `${x}px`; |
|
|
particle.style.top = `${y}px`; |
|
|
|
|
|
|
|
|
const duration = Math.random() * 3 + 1; |
|
|
particle.style.animation = `float ${duration}s linear infinite`; |
|
|
|
|
|
particlesContainer.appendChild(particle); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
particle.remove(); |
|
|
}, duration * 1000); |
|
|
} |
|
|
|
|
|
|
|
|
function copyReferralLink() { |
|
|
const referralLink = document.getElementById('referral-link'); |
|
|
referralLink.select(); |
|
|
document.execCommand('copy'); |
|
|
|
|
|
showNotification('Copied!', 'Referral link copied to clipboard.', 'blue'); |
|
|
} |
|
|
|
|
|
|
|
|
document.head.insertAdjacentHTML('beforeend', ` |
|
|
<style> |
|
|
@keyframes float { |
|
|
0% { transform: translateY(0) translateX(0); opacity: 1; } |
|
|
100% { transform: translateY(-100px) translateX(${Math.random() > 0.5 ? '-' : ''}${Math.random() * 50}px); opacity: 0; } |
|
|
} |
|
|
</style> |
|
|
`); |
|
|
</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=Steph1985/steph" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
