Hugging Face's logo

Spaces:
Steph1985
/
steph
Running

App Files Community
steph / index.html
Steph1985's picture
Steph1985
Create a BTC minning app that mines btc for me at a fast rate - Initial Deployment
3258c76 verified
raw
history blame contribute delete
23.3 kB
<!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 -->
 <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 Dashboard -->
 <main>
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
 <!-- Mining Control Panel -->
 <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>
<!-- Mining Status -->
 <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>
<!-- Mining Progress -->
 <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>
<!-- Boost Options -->
 <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>
<!-- Stats and Earnings -->
 <div class="space-y-6">
 <!-- Earnings Summary -->
 <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>
<!-- Mining Pool Stats -->
 <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>
<!-- Referral Program -->
 <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>
<!-- Notification -->
 <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>
 // Mining simulation variables
 let isMining = false;
 let hashRate = 0;
 let minedToday = 0;
 let activeWorkers = 0;
 let blockProgress = 0;
 let miningInterval;
 let particleInterval;
 // DOM elements
 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');
 // Toggle mining
 miningToggle.addEventListener('click', function() {
 isMining = !isMining;
if (isMining) {
 // Start mining
 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');
// Start simulation
 activeWorkers = 8;
 hashRate = 124.56;
 miningInterval = setInterval(updateMiningStats, 500);
 particleInterval = setInterval(createParticle, 50);
// Show notification
 showNotification('Mining Started', 'Your quantum miner is now running at full speed!', 'green');
 } else {
 // Stop mining
 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');
// Stop simulation
 clearInterval(miningInterval);
 clearInterval(particleInterval);
 activeWorkers = 0;
 hashRate = 0;
// Show notification
 showNotification('Mining Stopped', 'Your quantum miner has been turned off.', 'red');
 }
updateUI();
 });
 // Update mining stats
 function updateMiningStats() {
 // Random increments to simulate mining
 const increment = Math.random() * 0.000001;
 minedToday += increment;
// Update BTC price (simulate small fluctuations)
 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, ",");
// Update block progress
 blockProgress += Math.random() * 0.5;
 if (blockProgress >= 100) {
 blockProgress = 0;
 // Simulate finding a block
 minedToday += 0.0001;
 showNotification('Block Found!', 'You earned 0.0001 BTC for solving a block!', 'green');
 }
updateUI();
 }
 // Update UI elements
 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}%`;
// Update total mined (simulate small increments)
 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);
 }
 // Show notification
 function showNotification(title, message, color) {
 notification.querySelector('p.font-bold').textContent = title;
 notification.querySelector('p.text-sm').textContent = message;
// Change border color
 notification.classList.remove('border-green-500', 'border-red-500', 'border-blue-500');
 notification.classList.add(`border-${color}-500`);
// Change icon
 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');
 }
// Show notification
 notification.classList.remove('hidden');
 notification.classList.remove('translate-y-10', 'opacity-0');
 notification.classList.add('translate-y-0', 'opacity-100');
// Hide after 5 seconds
 setTimeout(() => {
 notification.classList.remove('translate-y-0', 'opacity-100');
 notification.classList.add('translate-y-10', 'opacity-0');
 setTimeout(() => notification.classList.add('hidden'), 300);
 }, 5000);
 }
 // Create mining particles
 function createParticle() {
 const particle = document.createElement('div');
 particle.classList.add('hash-particle');
// Random size
 const size = Math.random() * 5 + 2;
 particle.style.width = `${size}px`;
 particle.style.height = `${size}px`;
// Random position
 const x = Math.random() * particlesContainer.offsetWidth;
 const y = Math.random() * particlesContainer.offsetHeight;
 particle.style.left = `${x}px`;
 particle.style.top = `${y}px`;
// Random animation
 const duration = Math.random() * 3 + 1;
 particle.style.animation = `float ${duration}s linear infinite`;
particlesContainer.appendChild(particle);
// Remove particle after animation
 setTimeout(() => {
 particle.remove();
 }, duration * 1000);
 }
 // Copy referral link
 function copyReferralLink() {
 const referralLink = document.getElementById('referral-link');
 referralLink.select();
 document.execCommand('copy');
showNotification('Copied!', 'Referral link copied to clipboard.', 'blue');
 }
 // Add animation for particles
 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>