Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Crypto Mining Telegram Bot</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); | |
| } | |
| .mining-active { | |
| box-shadow: 0 0 15px rgba(74, 222, 128, 0.7); | |
| } | |
| .coin-animation { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg text-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-8"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fab fa-telegram text-3xl text-blue-400"></i> | |
| <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-green-400"> | |
| CoinBeacon | |
| </h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fab fa-telegram mr-2"></i> Connect Telegram | |
| </button> | |
| <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Dashboard --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Mining Status Card --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg border-l-4 border-green-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h2 class="text-lg font-semibold mb-1">Mining Status</h2> | |
| <p class="text-gray-400 text-sm">Active session</p> | |
| </div> | |
| <div class="relative"> | |
| <div class="w-12 h-12 rounded-full bg-green-900/30 flex items-center justify-center mining-active"> | |
| <i class="fas fa-bolt text-green-500 text-xl"></i> | |
| </div> | |
| <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-play text-white text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm text-gray-400">Current Coin</span> | |
| <span class="text-sm font-medium">Bitcoin (BTC)</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm text-gray-400">Hash Rate</span> | |
| <span class="text-sm font-medium">1.25 MH/s</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-sm text-gray-400">Active Miners</span> | |
| <span class="text-sm font-medium">4,382</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Earnings Card --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h2 class="text-lg font-semibold mb-1">Total Earnings</h2> | |
| <p class="text-gray-400 text-sm">Last 24 hours</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-blue-900/30 flex items-center justify-center"> | |
| <i class="fas fa-wallet text-blue-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="text-2xl font-bold mb-4">0.00234 BTC</div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">≈ $87.42</span> | |
| <span class="text-green-500">+2.4%</span> | |
| </div> | |
| <div class="mt-4 h-2 bg-gray-700 rounded-full overflow-hidden"> | |
| <div class="progress-bar h-full bg-gradient-to-r from-blue-500 to-blue-300 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Top Coins Card --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg border-l-4 border-purple-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h2 class="text-lg font-semibold mb-1">Top Mining Coins</h2> | |
| <p class="text-gray-400 text-sm">Most actively traded</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-purple-900/30 flex items-center justify-center"> | |
| <i class="fas fa-coins text-purple-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-6 space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-500/20 flex items-center justify-center"> | |
| <i class="fab fa-bitcoin text-yellow-500"></i> | |
| </div> | |
| <span class="font-medium">Bitcoin</span> | |
| </div> | |
| <span class="text-green-500 text-sm">+3.2%</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-gray-400/20 flex items-center justify-center"> | |
| <i class="fab fa-ethereum text-gray-400"></i> | |
| </div> | |
| <span class="font-medium">Ethereum</span> | |
| </div> | |
| <span class="text-green-500 text-sm">+1.8%</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-blue-400/20 flex items-center justify-center"> | |
| <i class="fas fa-dollar-sign text-blue-400"></i> | |
| </div> | |
| <span class="font-medium">Solana</span> | |
| </div> | |
| <span class="text-red-500 text-sm">-0.5%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mining Control Section --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> | |
| <div class="mb-6 md:mb-0"> | |
| <h2 class="text-xl font-bold mb-2">Mining Controls</h2> | |
| <p class="text-gray-400">Start mining the most profitable cryptocurrencies automatically</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button id="startMining" class="bg-green-600 hover:bg-green-700 px-6 py-3 rounded-lg font-medium flex items-center"> | |
| <i class="fas fa-play mr-2"></i> Start Mining | |
| </button> | |
| <button id="stopMining" class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-lg font-medium flex items-center opacity-50 cursor-not-allowed"> | |
| <i class="fas fa-stop mr-2"></i> Stop Mining | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="bg-gray-700/50 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-gray-400">Current Coin</span> | |
| <div class="w-6 h-6 rounded-full bg-yellow-500/20 flex items-center justify-center"> | |
| <i class="fab fa-bitcoin text-yellow-500 text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="text-xl font-bold">Bitcoin</div> | |
| <div class="text-sm text-gray-400 mt-1">BTC</div> | |
| </div> | |
| <div class="bg-gray-700/50 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-gray-400">Hash Rate</span> | |
| <i class="fas fa-tachometer-alt text-blue-400"></i> | |
| </div> | |
| <div class="text-xl font-bold">1.25 <span class="text-sm font-normal">MH/s</span></div> | |
| <div class="text-sm text-green-500 mt-1">Optimal</div> | |
| </div> | |
| <div class="bg-gray-700/50 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-gray-400">Shares Accepted</span> | |
| <i class="fas fa-check-circle text-green-400"></i> | |
| </div> | |
| <div class="text-xl font-bold">428</div> | |
| <div class="text-sm text-gray-400 mt-1">Last hour</div> | |
| </div> | |
| <div class="bg-gray-700/50 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="text-gray-400">Estimated Reward</span> | |
| <i class="fas fa-coins text-yellow-400"></i> | |
| </div> | |
| <div class="text-xl font-bold">0.000023 <span class="text-sm font-normal">BTC</span></div> | |
| <div class="text-sm text-gray-400 mt-1">≈ $0.87</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mining Animation --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8 relative overflow-hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Mining Visualization</h2> | |
| <div class="flex items-center text-sm bg-gray-700 px-3 py-1 rounded-full"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div> | |
| <span>Live</span> | |
| </div> | |
| </div> | |
| <div class="mining-visualization h-64 rounded-lg bg-gray-900/50 border border-gray-700 flex items-center justify-center relative overflow-hidden"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="grid grid-cols-3 gap-8 opacity-20"> | |
| <div class="w-16 h-16 bg-blue-400/30 rounded-full coin-animation" style="animation-delay: 0s;"></div> | |
| <div class="w-16 h-16 bg-green-400/30 rounded-full coin-animation" style="animation-delay: 0.5s;"></div> | |
| <div class="w-16 h-16 bg-purple-400/30 rounded-full coin-animation" style="animation-delay: 1s;"></div> | |
| <div class="w-16 h-16 bg-yellow-400/30 rounded-full coin-animation" style="animation-delay: 1.5s;"></div> | |
| <div class="w-16 h-16 bg-red-400/30 rounded-full coin-animation" style="animation-delay: 0.3s;"></div> | |
| <div class="w-16 h-16 bg-pink-400/30 rounded-full coin-animation" style="animation-delay: 0.8s;"></div> | |
| </div> | |
| </div> | |
| <div class="relative z-10 text-center"> | |
| <div class="w-24 h-24 mx-auto mb-6 bg-yellow-500/20 rounded-full flex items-center justify-center coin-animation"> | |
| <i class="fab fa-bitcoin text-yellow-500 text-4xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2">Mining Bitcoin</h3> | |
| <p class="text-gray-400 max-w-md mx-auto">Your device is contributing to the Bitcoin network and earning rewards</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Transaction History --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Recent Payouts</h2> | |
| <button class="text-blue-400 hover:text-blue-300 text-sm flex items-center"> | |
| View All <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="text-gray-400 text-left border-b border-gray-700"> | |
| <th class="pb-3 font-medium">Date</th> | |
| <th class="pb-3 font-medium">Coin</th> | |
| <th class="pb-3 font-medium">Amount</th> | |
| <th class="pb-3 font-medium">Value</th> | |
| <th class="pb-3 font-medium">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-700"> | |
| <tr> | |
| <td class="py-4">Jun 12, 2023</td> | |
| <td class="py-4"> | |
| <div class="flex items-center"> | |
| <i class="fab fa-bitcoin text-yellow-500 mr-2"></i> BTC | |
| </div> | |
| </td> | |
| <td class="py-4">0.00124</td> | |
| <td class="py-4">$46.28</td> | |
| <td class="py-4"> | |
| <span class="bg-green-900/30 text-green-500 px-3 py-1 rounded-full text-xs">Completed</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="py-4">Jun 10, 2023</td> | |
| <td class="py-4"> | |
| <div class="flex items-center"> | |
| <i class="fab fa-ethereum text-gray-400 mr-2"></i> ETH | |
| </div> | |
| </td> | |
| <td class="py-4">0.042</td> | |
| <td class="py-4">$78.12</td> | |
| <td class="py-4"> | |
| <span class="bg-green-900/30 text-green-500 px-3 py-1 rounded-full text-xs">Completed</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="py-4">Jun 8, 2023</td> | |
| <td class="py-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-dollar-sign text-blue-400 mr-2"></i> SOL | |
| </div> | |
| </td> | |
| <td class="py-4">3.24</td> | |
| <td class="py-4">$64.35</td> | |
| <td class="py-4"> | |
| <span class="bg-yellow-900/30 text-yellow-500 px-3 py-1 rounded-full text-xs">Pending</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Bot Instructions --> | |
| <div class="mt-8 bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-xl font-bold mb-4">How to Use the CoinBeacon Bot</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-gray-700/50 p-5 rounded-lg"> | |
| <div class="w-12 h-12 rounded-full bg-blue-600/20 flex items-center justify-center mb-4"> | |
| <i class="fas fa-robot text-blue-400"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">1. Connect Telegram</h3> | |
| <p class="text-gray-400 text-sm">Start a chat with @CryptoMinerBot and link your account to begin mining.</p> | |
| </div> | |
| <div class="bg-gray-700/50 p-5 rounded-lg"> | |
| <div class="w-12 h-12 rounded-full bg-green-600/20 flex items-center justify-center mb-4"> | |
| <i class="fas fa-play text-green-400"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">2. Start Mining</h3> | |
| <p class="text-gray-400 text-sm">Use the /start command or click the button above to begin mining automatically.</p> | |
| </div> | |
| <div class="bg-gray-700/50 p-5 rounded-lg"> | |
| <div class="w-12 h-12 rounded-full bg-purple-600/20 flex items-center justify-center mb-4"> | |
| <i class="fas fa-wallet text-purple-400"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">3. Withdraw Earnings</h3> | |
| <p class="text-gray-400 text-sm">Use the /withdraw command to transfer your mined crypto to your wallet.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple mining control functionality | |
| document.getElementById('startMining').addEventListener('click', function() { | |
| this.classList.add('opacity-50', 'cursor-not-allowed'); | |
| this.classList.remove('bg-green-600', 'hover:bg-green-700'); | |
| this.innerHTML = '<i class="fas fa-check mr-2"></i> Mining Started'; | |
| document.getElementById('stopMining').classList.remove('opacity-50', 'cursor-not-allowed'); | |
| document.getElementById('stopMining').classList.add('bg-red-600', 'hover:bg-red-700'); | |
| // Simulate mining progress | |
| let progress = 0; | |
| const progressBar = document.querySelector('.progress-bar'); | |
| const interval = setInterval(() => { | |
| progress += Math.random() * 2; | |
| if(progress > 100) progress = 100; | |
| progressBar.style.width = `${progress}%`; | |
| }, 1000); | |
| }); | |
| document.getElementById('stopMining').addEventListener('click', function() { | |
| this.classList.add('opacity-50', 'cursor-not-allowed'); | |
| this.classList.remove('bg-red-600', 'hover:bg-red-700'); | |
| document.getElementById('startMining').classList.remove('opacity-50', 'cursor-not-allowed'); | |
| document.getElementById('startMining').classList.add('bg-green-600', 'hover:bg-green-700'); | |
| document.getElementById('startMining').innerHTML = '<i class="fas fa-play mr-2"></i> Start Mining'; | |
| }); | |
| // Simulate changing mining stats | |
| setInterval(() => { | |
| const hashRate = document.querySelectorAll('.text-xl.font-bold')[1]; | |
| const currentRate = parseFloat(hashRate.textContent); | |
| const newRate = (currentRate + (Math.random() * 0.2 - 0.1)).toFixed(2); | |
| hashRate.textContent = `${newRate} <span class="text-sm font-normal">MH/s</span>`; | |
| const shares = document.querySelectorAll('.text-xl.font-bold')[2]; | |
| const currentShares = parseInt(shares.textContent); | |
| shares.textContent = currentShares + Math.floor(Math.random() * 3); | |
| const reward = document.querySelectorAll('.text-xl.font-bold')[3]; | |
| const currentReward = parseFloat(reward.textContent); | |
| const newReward = (currentReward + (Math.random() * 0.000001)).toFixed(6); | |
| reward.textContent = `${newReward} <span class="text-sm font-normal">BTC</span>`; | |
| }, 3000); | |
| </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=stakmodsco/taskchain-token" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |