Hugging Face's logo

Spaces:
Fred808
/
LAYS
Paused

App Files Community
Fred808 commited on
Commit
4dd37f2
·
verified ·
1 Parent(s): 636293c

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +326 -57
static/index.html CHANGED
@@ -1,58 +1,327 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Bitcoin Mining Dashboard</title>
7
- <link rel="stylesheet" href="css/style.css">
8
- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
9
- </head>
10
- <body>
11
- <div class="container">
12
- <header>
13
- <h1>⛏️ Bitcoin Mining Dashboard</h1>
14
- <div class="controls">
15
- <button id="startMining" class="btn primary">▶️ Start Mining</button>
16
- <button id="stopMining" class="btn secondary">⏹️ Stop Mining</button>
17
- </div>
18
- </header>
19
-
20
- <div class="alert-box" id="blockAlert">
21
- No blocks found yet
22
- </div>
23
-
24
- <div class="stats-grid">
25
- <div class="stat-card">
26
- <h3>Status</h3>
27
- <p id="status">Stopped</p>
28
- </div>
29
- <div class="stat-card">
30
- <h3>Hashrate</h3>
31
- <p id="hashrate">0 H/s</p>
32
- </div>
33
- <div class="stat-card">
34
- <h3>Total Hashes</h3>
35
- <p id="totalHashes">0</p>
36
- </div>
37
- <div class="stat-card">
38
- <h3>Blocks Found</h3>
39
- <p id="blocksFound">0</p>
40
- </div>
41
- <div class="stat-card">
42
- <h3>Best Hash</h3>
43
- <p id="bestHash" class="hash">None</p>
44
- </div>
45
- <div class="stat-card">
46
- <h3>Best Difficulty</h3>
47
- <p id="difficulty">0</p>
48
- </div>
49
- </div>
50
-
51
- <div class="charts">
52
- <div id="hashrateChart"></div>
53
- <div id="totalHashesChart"></div>
54
- </div>
55
- </div>
56
- <script src="js/main.js"></script>
57
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Bitcoin Mining Dashboard</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
17
+ color: white;
18
+ min-height: 100vh;
19
+ padding: 20px;
20
+ }
21
+
22
+ .container {
23
+ max-width: 1200px;
24
+ margin: 0 auto;
25
+ }
26
+
27
+ .header {
28
+ text-align: center;
29
+ margin-bottom: 30px;
30
+ padding: 20px;
31
+ background: rgba(255,255,255,0.1);
32
+ border-radius: 15px;
33
+ backdrop-filter: blur(10px);
34
+ }
35
+
36
+ .header h1 {
37
+ font-size: 2.5em;
38
+ margin-bottom: 10px;
39
+ }
40
+
41
+ .header .subtitle {
42
+ font-size: 1.2em;
43
+ opacity: 0.8;
44
+ }
45
+
46
+ .dashboard {
47
+ display: grid;
48
+ grid-template-columns: 1fr 1fr;
49
+ gap: 20px;
50
+ margin-bottom: 20px;
51
+ }
52
+
53
+ @media (max-width: 768px) {
54
+ .dashboard {
55
+ grid-template-columns: 1fr;
56
+ }
57
+ }
58
+
59
+ .card {
60
+ background: rgba(255,255,255,0.1);
61
+ padding: 25px;
62
+ border-radius: 15px;
63
+ backdrop-filter: blur(10px);
64
+ border: 1px solid rgba(255,255,255,0.2);
65
+ }
66
+
67
+ .stats-grid {
68
+ display: grid;
69
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
70
+ gap: 15px;
71
+ margin-top: 15px;
72
+ }
73
+
74
+ .stat-item {
75
+ background: rgba(255,255,255,0.15);
76
+ padding: 15px;
77
+ border-radius: 10px;
78
+ text-align: center;
79
+ }
80
+
81
+ .stat-value {
82
+ font-size: 1.5em;
83
+ font-weight: bold;
84
+ color: #4cd964;
85
+ }
86
+
87
+ .stat-label {
88
+ font-size: 0.9em;
89
+ opacity: 0.8;
90
+ margin-top: 5px;
91
+ }
92
+
93
+ .alert-box {
94
+ background: #e74c3c;
95
+ padding: 20px;
96
+ border-radius: 10px;
97
+ text-align: center;
98
+ font-size: 1.1em;
99
+ margin: 20px 0;
100
+ transition: all 0.3s ease;
101
+ }
102
+
103
+ .alert-box.success {
104
+ background: #27ae60;
105
+ animation: pulse 2s infinite;
106
+ }
107
+
108
+ @keyframes pulse {
109
+ 0% { transform: scale(1); }
110
+ 50% { transform: scale(1.02); }
111
+ 100% { transform: scale(1); }
112
+ }
113
+
114
+ .controls {
115
+ display: flex;
116
+ gap: 15px;
117
+ justify-content: center;
118
+ margin: 30px 0;
119
+ }
120
+
121
+ .btn {
122
+ padding: 15px 30px;
123
+ border: none;
124
+ border-radius: 10px;
125
+ font-size: 1.1em;
126
+ font-weight: bold;
127
+ cursor: pointer;
128
+ transition: all 0.3s ease;
129
+ text-transform: uppercase;
130
+ letter-spacing: 1px;
131
+ }
132
+
133
+ .btn-start {
134
+ background: #27ae60;
135
+ color: white;
136
+ }
137
+
138
+ .btn-stop {
139
+ background: #e74c3c;
140
+ color: white;
141
+ }
142
+
143
+ .btn:disabled {
144
+ background: #7f8c8d;
145
+ cursor: not-allowed;
146
+ transform: none !important;
147
+ }
148
+
149
+ .btn:hover:not(:disabled) {
150
+ transform: translateY(-2px);
151
+ box-shadow: 0 5px 15px rgba(0,0,0,0.3);
152
+ }
153
+
154
+ .hash-visualization {
155
+ background: rgba(0,0,0,0.3);
156
+ padding: 15px;
157
+ border-radius: 10px;
158
+ margin-top: 15px;
159
+ font-family: monospace;
160
+ font-size: 0.9em;
161
+ word-break: break-all;
162
+ }
163
+
164
+ .mining-animation {
165
+ text-align: center;
166
+ font-size: 2em;
167
+ margin: 20px 0;
168
+ }
169
+
170
+ .progress-bar {
171
+ width: 100%;
172
+ height: 20px;
173
+ background: rgba(255,255,255,0.2);
174
+ border-radius: 10px;
175
+ margin: 10px 0;
176
+ overflow: hidden;
177
+ }
178
+
179
+ .progress-fill {
180
+ height: 100%;
181
+ background: linear-gradient(90deg, #27ae60, #2ecc71);
182
+ border-radius: 10px;
183
+ transition: width 0.3s ease;
184
+ }
185
+ </style>
186
+ </head>
187
+ <body>
188
+ <div class="container">
189
+ <div class="header">
190
+ <h1>⛏️ Bitcoin Mining Dashboard</h1>
191
+ <div class="subtitle">Real-time Bitcoin Mainnet Mining</div>
192
+ </div>
193
+
194
+ <div id="alertBox" class="alert-box">
195
+ Ready to start mining
196
+ </div>
197
+
198
+ <div class="controls">
199
+ <button class="btn btn-start" id="startBtn" onclick="startMining()">Start Mining</button>
200
+ <button class="btn btn-stop" id="stopBtn" onclick="stopMining()" disabled>Stop Mining</button>
201
+ </div>
202
+
203
+ <div class="dashboard">
204
+ <div class="card">
205
+ <h2>📊 Mining Statistics</h2>
206
+ <div class="stats-grid" id="statsGrid">
207
+ <!-- Stats will be populated by JavaScript -->
208
+ </div>
209
+ </div>
210
+
211
+ <div class="card">
212
+ <h2>🔧 System Info</h2>
213
+ <div class="stats-grid" id="systemGrid">
214
+ <!-- System info will be populated by JavaScript -->
215
+ </div>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="card">
220
+ <h2>🔍 Block Information</h2>
221
+ <div id="blockInfo">
222
+ <!-- Block info will be populated by JavaScript -->
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <script>
228
+ // Update stats every second
229
+ setInterval(updateStats, 1000);
230
+
231
+ async function updateStats() {
232
+ try {
233
+ const response = await fetch('/get_stats');
234
+ const stats = await response.json();
235
+
236
+ // Update stats grid
237
+ document.getElementById('statsGrid').innerHTML = `
238
+ <div class="stat-item">
239
+ <div class="stat-value">${stats.status}</div>
240
+ <div class="stat-label">Status</div>
241
+ </div>
242
+ <div class="stat-item">
243
+ <div class="stat-value">${stats.hashrate}</div>
244
+ <div class="stat-label">Hash Rate</div>
245
+ </div>
246
+ <div class="stat-item">
247
+ <div class="stat-value">${stats.total_hashes}</div>
248
+ <div class="stat-label">Total Hashes</div>
249
+ </div>
250
+ <div class="stat-item">
251
+ <div class="stat-value">${stats.blocks_found}</div>
252
+ <div class="stat-label">Blocks Found</div>
253
+ </div>
254
+ `;
255
+
256
+ // Update system grid
257
+ document.getElementById('systemGrid').innerHTML = `
258
+ <div class="stat-item">
259
+ <div class="stat-value">${stats.cores_active}</div>
260
+ <div class="stat-label">Active Cores</div>
261
+ </div>
262
+ <div class="stat-item">
263
+ <div class="stat-value">${stats.mining_time}</div>
264
+ <div class="stat-label">Mining Time</div>
265
+ </div>
266
+ <div class="stat-item">
267
+ <div class="stat-value">${stats.difficulty}</div>
268
+ <div class="stat-label">Best Difficulty</div>
269
+ </div>
270
+ <div class="stat-item">
271
+ <div class="stat-value">${stats.network_difficulty}</div>
272
+ <div class="stat-label">Network Difficulty</div>
273
+ </div>
274
+ `;
275
+
276
+ // Update block info
277
+ document.getElementById('blockInfo').innerHTML = `
278
+ <div class="hash-visualization">
279
+ <strong>Best Hash:</strong> ${stats.best_hash}
280
+ </div>
281
+ <div class="progress-bar">
282
+ <div class="progress-fill" style="width: ${Math.min(parseFloat(stats.difficulty) * 100, 100)}%"></div>
283
+ </div>
284
+ `;
285
+
286
+ // Update alert box
287
+ const alertBox = document.getElementById('alertBox');
288
+ alertBox.textContent = stats.block_alert;
289
+ alertBox.className = 'alert-box';
290
+ if (stats.blocks_found > 0) {
291
+ alertBox.classList.add('success');
292
+ }
293
+
294
+ // Update button states
295
+ document.getElementById('startBtn').disabled = stats.status === 'Running';
296
+ document.getElementById('stopBtn').disabled = stats.status !== 'Running';
297
+
298
+ } catch (error) {
299
+ console.error('Error updating stats:', error);
300
+ }
301
+ }
302
+
303
+ async function startMining() {
304
+ try {
305
+ const response = await fetch('/start_mining', { method: 'POST' });
306
+ const result = await response.json();
307
+ alert(result.message);
308
+ } catch (error) {
309
+ alert('Error starting mining: ' + error);
310
+ }
311
+ }
312
+
313
+ async function stopMining() {
314
+ try {
315
+ const response = await fetch('/stop_mining', { method: 'POST' });
316
+ const result = await response.json();
317
+ alert(result.message);
318
+ } catch (error) {
319
+ alert('Error stopping mining: ' + error);
320
+ }
321
+ }
322
+
323
+ // Initial update
324
+ updateStats();
325
+ </script>
326
+ </body>
327
  </html>