| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Bitcoin Mining Dashboard</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); |
| color: white; |
| min-height: 100vh; |
| padding: 20px; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .header { |
| text-align: center; |
| margin-bottom: 30px; |
| padding: 20px; |
| background: rgba(255,255,255,0.1); |
| border-radius: 15px; |
| backdrop-filter: blur(10px); |
| } |
| |
| .header h1 { |
| font-size: 2.5em; |
| margin-bottom: 10px; |
| } |
| |
| .header .subtitle { |
| font-size: 1.2em; |
| opacity: 0.8; |
| } |
| |
| .dashboard { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 20px; |
| margin-bottom: 20px; |
| } |
| |
| @media (max-width: 768px) { |
| .dashboard { |
| grid-template-columns: 1fr; |
| } |
| } |
| |
| .card { |
| background: rgba(255,255,255,0.1); |
| padding: 25px; |
| border-radius: 15px; |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255,255,255,0.2); |
| } |
| |
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 15px; |
| margin-top: 15px; |
| } |
| |
| .stat-item { |
| background: rgba(255,255,255,0.15); |
| padding: 15px; |
| border-radius: 10px; |
| text-align: center; |
| } |
| |
| .stat-value { |
| font-size: 1.5em; |
| font-weight: bold; |
| color: #4cd964; |
| } |
| |
| .stat-label { |
| font-size: 0.9em; |
| opacity: 0.8; |
| margin-top: 5px; |
| } |
| |
| .alert-box { |
| background: #e74c3c; |
| padding: 20px; |
| border-radius: 10px; |
| text-align: center; |
| font-size: 1.1em; |
| margin: 20px 0; |
| transition: all 0.3s ease; |
| } |
| |
| .alert-box.success { |
| background: #27ae60; |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.02); } |
| 100% { transform: scale(1); } |
| } |
| |
| .controls { |
| display: flex; |
| gap: 15px; |
| justify-content: center; |
| margin: 30px 0; |
| } |
| |
| .btn { |
| padding: 15px 30px; |
| border: none; |
| border-radius: 10px; |
| font-size: 1.1em; |
| font-weight: bold; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| |
| .btn-start { |
| background: #27ae60; |
| color: white; |
| } |
| |
| .btn-stop { |
| background: #e74c3c; |
| color: white; |
| } |
| |
| .btn:disabled { |
| background: #7f8c8d; |
| cursor: not-allowed; |
| transform: none !important; |
| } |
| |
| .btn:hover:not(:disabled) { |
| transform: translateY(-2px); |
| box-shadow: 0 5px 15px rgba(0,0,0,0.3); |
| } |
| |
| .hash-visualization { |
| background: rgba(0,0,0,0.3); |
| padding: 15px; |
| border-radius: 10px; |
| margin-top: 15px; |
| font-family: monospace; |
| font-size: 0.9em; |
| word-break: break-all; |
| } |
| |
| .mining-animation { |
| text-align: center; |
| font-size: 2em; |
| margin: 20px 0; |
| } |
| |
| .progress-bar { |
| width: 100%; |
| height: 20px; |
| background: rgba(255,255,255,0.2); |
| border-radius: 10px; |
| margin: 10px 0; |
| overflow: hidden; |
| } |
| |
| .progress-fill { |
| height: 100%; |
| background: linear-gradient(90deg, #27ae60, #2ecc71); |
| border-radius: 10px; |
| transition: width 0.3s ease; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="header"> |
| <h1>⛏️ Bitcoin Mining Dashboard</h1> |
| <div class="subtitle">Real-time Bitcoin Mainnet Mining</div> |
| </div> |
| |
| <div id="alertBox" class="alert-box"> |
| Ready to start mining |
| </div> |
| |
| <div class="controls"> |
| <button class="btn btn-start" id="startBtn" onclick="startMining()">Start Mining</button> |
| <button class="btn btn-stop" id="stopBtn" onclick="stopMining()" disabled>Stop Mining</button> |
| </div> |
| |
| <div class="dashboard"> |
| <div class="card"> |
| <h2>📊 Mining Statistics</h2> |
| <div class="stats-grid" id="statsGrid"> |
| |
| </div> |
| </div> |
| |
| <div class="card"> |
| <h2>🔧 System Info</h2> |
| <div class="stats-grid" id="systemGrid"> |
| |
| </div> |
| </div> |
| </div> |
| |
| <div class="card"> |
| <h2>🔍 Block Information</h2> |
| <div id="blockInfo"> |
| |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| // Update stats every second |
| setInterval(updateStats, 1000); |
| |
| async function updateStats() { |
| try { |
| const response = await fetch('/get_stats'); |
| const stats = await response.json(); |
| |
| // Update stats grid |
| document.getElementById('statsGrid').innerHTML = ` |
| <div class="stat-item"> |
| <div class="stat-value">${stats.status}</div> |
| <div class="stat-label">Status</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-value">${stats.hashrate}</div> |
| <div class="stat-label">Hash Rate</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-value">${stats.total_hashes}</div> |
| <div class="stat-label">Total Hashes</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-value">${stats.blocks_found}</div> |
| <div class="stat-label">Blocks Found</div> |
| </div> |
| `; |
| |
| // Update system grid |
| document.getElementById('systemGrid').innerHTML = ` |
| <div class="stat-item"> |
| <div class="stat-value">${stats.cores_active}</div> |
| <div class="stat-label">Active Cores</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-value">${stats.mining_time}</div> |
| <div class="stat-label">Mining Time</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-value">${stats.difficulty}</div> |
| <div class="stat-label">Best Difficulty</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-value">${stats.network_difficulty}</div> |
| <div class="stat-label">Network Difficulty</div> |
| </div> |
| `; |
| |
| // Update block info |
| document.getElementById('blockInfo').innerHTML = ` |
| <div class="hash-visualization"> |
| <strong>Best Hash:</strong> ${stats.best_hash} |
| </div> |
| <div class="progress-bar"> |
| <div class="progress-fill" style="width: ${Math.min(parseFloat(stats.difficulty) * 100, 100)}%"></div> |
| </div> |
| `; |
| |
| // Update alert box |
| const alertBox = document.getElementById('alertBox'); |
| alertBox.textContent = stats.block_alert; |
| alertBox.className = 'alert-box'; |
| if (stats.blocks_found > 0) { |
| alertBox.classList.add('success'); |
| } |
| |
| // Update button states |
| document.getElementById('startBtn').disabled = stats.status === 'Running'; |
| document.getElementById('stopBtn').disabled = stats.status !== 'Running'; |
| |
| } catch (error) { |
| console.error('Error updating stats:', error); |
| } |
| } |
| |
| async function startMining() { |
| try { |
| const response = await fetch('/start_mining', { method: 'POST' }); |
| const result = await response.json(); |
| alert(result.message); |
| } catch (error) { |
| alert('Error starting mining: ' + error); |
| } |
| } |
| |
| async function stopMining() { |
| try { |
| const response = await fetch('/stop_mining', { method: 'POST' }); |
| const result = await response.json(); |
| alert(result.message); |
| } catch (error) { |
| alert('Error stopping mining: ' + error); |
| } |
| } |
| |
| // Initial update |
| updateStats(); |
| </script> |
| </body> |
| </html> |
