Spaces:

favoredone
/

111

Build error

App Files Files Community

111 / static /index.html

favoredone

Upload 14 files

1170181 verified 3 months ago

raw

history blame contribute delete

10.7 kB

	<!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">
	<!-- Stats will be populated by JavaScript -->
	</div>
	</div>

	<div class="card">
	<h2>🔧 System Info</h2>
	<div class="stats-grid" id="systemGrid">
	<!-- System info will be populated by JavaScript -->
	</div>
	</div>
	</div>

	<div class="card">
	<h2>🔍 Block Information</h2>
	<div id="blockInfo">
	<!-- Block info will be populated by JavaScript -->
	</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>