Hugging Face's logo

Spaces:
RobinsAIWorld
/
minordash
Running

App Files Community
RobinsAIWorld commited on
Commit
00fc506
·
verified ·
1 Parent(s): 1261e13

Great--and if I want to configure only one miner, I should ber able dto select it by clicking on the line in the grid of miners, not just have to aim at a tiny checkbox. And shift-arrow key/shift-mouse select and ctrl-select should work as epected to select multiple mniners to apply the configuration to. For selections (single or multiple) it should show in the top right box insteas odf average temperature, the number of selected miners, the average hasahrate, temp etc of the selected miners, - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +873 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Minordash
3
- emoji: 🐢
4
- colorFrom: indigo
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: minordash
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,873 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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>Antminer Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: {
15
+ 50: '#f0f9ff',
16
+ 100: '#e0f2fe',
17
+ 200: '#bae6fd',
18
+ 300: '#7dd3fc',
19
+ 400: '#38bdf8',
20
+ 500: '#0ea5e9',
21
+ 600: '#0284c7',
22
+ 700: '#0369a1',
23
+ 800: '#075985',
24
+ 900: '#0c4a6e',
25
+ },
26
+ dark: {
27
+ 800: '#1e293b',
28
+ 900: '#0f172a',
29
+ }
30
+ }
31
+ }
32
+ }
33
+ }
34
+ </script>
35
+ <style>
36
+ .miner-card:hover {
37
+ transform: translateY(-5px);
38
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
39
+ }
40
+ .sidebar {
41
+ transition: all 0.3s ease;
42
+ }
43
+ .sidebar.collapsed {
44
+ width: 80px;
45
+ }
46
+ .sidebar.collapsed .sidebar-text {
47
+ display: none;
48
+ }
49
+ .sidebar.collapsed .logo-text {
50
+ display: none;
51
+ }
52
+ .sidebar.collapsed .logo-icon {
53
+ display: block;
54
+ }
55
+ .logo-icon {
56
+ display: none;
57
+ }
58
+ .grid-stack-item {
59
+ transition: all 0.3s ease;
60
+ }
61
+ .grid-stack-item:hover {
62
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
63
+ }
64
+ .apexcharts-tooltip {
65
+ background: #1e293b !important;
66
+ border: 1px solid #334155 !important;
67
+ color: #f8fafc !important;
68
+ }
69
+ .apexcharts-menu {
70
+ background: #1e293b !important;
71
+ border: 1px solid #334155 !important;
72
+ }
73
+ .apexcharts-menu-item:hover {
74
+ background: #334155 !important;
75
+ }
76
+ </style>
77
+ </head>
78
+ <body class="bg-gray-100 dark:bg-dark-900 text-gray-800 dark:text-gray-200">
79
+ <div class="flex h-screen overflow-hidden">
80
+ <!-- Sidebar -->
81
+ <div class="sidebar bg-white dark:bg-dark-800 shadow-lg flex flex-col w-64">
82
+ <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
83
+ <div class="flex items-center space-x-2">
84
+ <div class="logo-icon p-2">
85
+ <i class="fas fa-bitcoin text-2xl text-primary-600"></i>
86
+ </div>
87
+ <span class="logo-text text-xl font-bold text-primary-600">Antminer Admin</span>
88
+ </div>
89
+ <button id="sidebar-toggle" class="text-gray-500 dark:text-gray-400 hover:text-primary-600">
90
+ <i class="fas fa-bars"></i>
91
+ </button>
92
+ </div>
93
+ <nav class="flex-1 overflow-y-auto p-4">
94
+ <div class="space-y-2">
95
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400">
96
+ <i class="fas fa-tachometer-alt"></i>
97
+ <span class="sidebar-text">Dashboard</span>
98
+ </a>
99
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">
100
+ <i class="fas fa-server"></i>
101
+ <span class="sidebar-text">Miners</span>
102
+ </a>
103
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">
104
+ <i class="fas fa-chart-line"></i>
105
+ <span class="sidebar-text">Statistics</span>
106
+ </a>
107
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">
108
+ <i class="fas fa-cog"></i>
109
+ <span class="sidebar-text">Settings</span>
110
+ </a>
111
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">
112
+ <i class="fas fa-history"></i>
113
+ <span class="sidebar-text">History</span>
114
+ </a>
115
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">
116
+ <i class="fas fa-bell"></i>
117
+ <span class="sidebar-text">Alerts</span>
118
+ </a>
119
+ </div>
120
+ <div class="mt-8">
121
+ <h3 class="px-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider sidebar-text">Groups</h3>
122
+ <div class="mt-2 space-y-1">
123
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">
124
+ <div class="h-2 w-2 rounded-full bg-green-500"></div>
125
+ <span class="sidebar-text">Main Farm</span>
126
+ </a>
127
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">
128
+ <div class="h-2 w-2 rounded-full bg-yellow-500"></div>
129
+ <span class="sidebar-text">Backup Farm</span>
130
+ </a>
131
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300">
132
+ <div class="h-2 w-2 rounded-full bg-red-500"></div>
133
+ <span class="sidebar-text">Testing</span>
134
+ </a>
135
+ </div>
136
+ </div>
137
+ </nav>
138
+ <div class="p-4 border-t border-gray-200 dark:border-gray-700">
139
+ <div class="flex items-center space-x-3">
140
+ <img src="https://ui-avatars.com/api/?name=Admin&background=0ea5e9&color=fff" alt="User" class="w-10 h-10 rounded-full">
141
+ <div class="sidebar-text">
142
+ <p class="font-medium">Admin</p>
143
+ <p class="text-xs text-gray-500 dark:text-gray-400">Super Admin</p>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Main Content -->
150
+ <div class="flex-1 overflow-auto">
151
+ <!-- Header -->
152
+ <header class="bg-white dark:bg-dark-800 shadow-sm">
153
+ <div class="flex items-center justify-between px-6 py-4">
154
+ <h1 class="text-2xl font-bold">Miner Dashboard</h1>
155
+ <div class="flex items-center space-x-4">
156
+ <div class="relative">
157
+ <input type="text" placeholder="Search miners..." class="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
158
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
159
+ </div>
160
+ <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-primary-600">
161
+ <i class="fas fa-bell"></i>
162
+ </button>
163
+ <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-primary-600">
164
+ <i class="fas fa-moon"></i>
165
+ </button>
166
+ </div>
167
+ </div>
168
+ </header>
169
+
170
+ <!-- Dashboard Content -->
171
+ <main class="p-6">
172
+ <!-- Stats Cards -->
173
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
174
+ <div class="bg-white dark:bg-dark-800 rounded-lg shadow p-6">
175
+ <div class="flex items-center justify-between">
176
+ <div>
177
+ <p class="text-gray-500 dark:text-gray-400">Total Miners</p>
178
+ <h3 class="text-2xl font-bold">42</h3>
179
+ </div>
180
+ <div class="p-3 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400">
181
+ <i class="fas fa-server"></i>
182
+ </div>
183
+ </div>
184
+ <div class="mt-4">
185
+ <div class="flex items-center text-sm text-green-500">
186
+ <i class="fas fa-arrow-up mr-1"></i>
187
+ <span>3 new miners</span>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ <div class="bg-white dark:bg-dark-800 rounded-lg shadow p-6">
192
+ <div class="flex items-center justify-between">
193
+ <div>
194
+ <p class="text-gray-500 dark:text-gray-400">Total Hashrate</p>
195
+ <h3 class="text-2xl font-bold">1.42 PH/s</h3>
196
+ </div>
197
+ <div class="p-3 rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400">
198
+ <i class="fas fa-bolt"></i>
199
+ </div>
200
+ </div>
201
+ <div class="mt-4">
202
+ <div class="flex items-center text-sm text-red-500">
203
+ <i class="fas fa-arrow-down mr-1"></i>
204
+ <span>2.5% from yesterday</span>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ <div class="bg-white dark:bg-dark-800 rounded-lg shadow p-6">
209
+ <div class="flex items-center justify-between">
210
+ <div>
211
+ <p class="text-gray-500 dark:text-gray-400">Active Miners</p>
212
+ <h3 class="text-2xl font-bold">38</h3>
213
+ </div>
214
+ <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400">
215
+ <i class="fas fa-check-circle"></i>
216
+ </div>
217
+ </div>
218
+ <div class="mt-4">
219
+ <div class="flex items-center text-sm text-green-500">
220
+ <i class="fas fa-arrow-up mr-1"></i>
221
+ <span>2 more active</span>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ <div class="bg-white dark:bg-dark-800 rounded-lg shadow p-6">
226
+ <div class="flex items-center justify-between">
227
+ <div>
228
+ <p class="text-gray-500 dark:text-gray-400">Selected Miners</p>
229
+ <h3 class="text-2xl font-bold"><span id="selected-count">0</span> selected</h3>
230
+ <div class="text-sm mt-1 space-y-1">
231
+ <div class="flex items-center text-gray-500 dark:text-gray-400">
232
+ <span>Avg. Hashrate: </span>
233
+ <span id="avg-hashrate" class="ml-1">0 TH/s</span>
234
+ </div>
235
+ <div class="flex items-center text-gray-500 dark:text-gray-400">
236
+ <span>Avg. Temp: </span>
237
+ <span id="avg-temp" class="ml-1">0°C</span>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ <div class="p-3 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400">
242
+ <i class="fas fa-check-circle"></i>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Miner Controls -->
249
+ <div class="bg-white dark:bg-dark-800 rounded-lg shadow mb-6">
250
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700">
251
+ <h2 class="text-lg font-semibold">Miner Controls</h2>
252
+ </div>
253
+ <div class="p-4">
254
+ <div class="flex flex-wrap gap-4 mb-4">
255
+ <div class="w-full">
256
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Pool Configuration</label>
257
+ <div class="flex items-center gap-4">
258
+ <div class="flex items-center space-x-1">
259
+ <input type="radio" id="pool-1" name="pool-select" class="text-primary-600 focus:ring-primary-500" checked>
260
+ <label for="pool-1" class="text-sm text-gray-700 dark:text-gray-300">Pool 1</label>
261
+ </div>
262
+ <div class="flex items-center space-x-1">
263
+ <input type="radio" id="pool-2" name="pool-select" class="text-primary-600 focus:ring-primary-500">
264
+ <label for="pool-2" class="text-sm text-gray-700 dark:text-gray-300">Pool 2</label>
265
+ </div>
266
+ <div class="flex items-center space-x-1">
267
+ <input type="radio" id="pool-3" name="pool-select" class="text-primary-600 focus:ring-primary-500">
268
+ <label for="pool-3" class="text-sm text-gray-700 dark:text-gray-300">Pool 3</label>
269
+ </div>
270
+ </div>
271
+ <div class="mt-2 flex gap-2">
272
+ <input type="text" value="stratum+tcp://btc.pool.com:3333" class="flex-1 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm">
273
+ <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
274
+ Update
275
+ </button>
276
+ </div>
277
+ </div>
278
+ <div class="w-full">
279
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Mining Mode</label>
280
+ <div class="flex gap-2">
281
+ <button class="bg-primary-600 hover:bg-primary-700 text-white px-3 py-1 rounded-md text-sm font-medium transition-colors">
282
+ <i class="fas fa-bolt mr-1"></i> Normal
283
+ </button>
284
+ <button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 px-3 py-1 rounded-md text-sm font-medium transition-colors">
285
+ <i class="fas fa-tachometer-alt mr-1"></i> LPM
286
+ </button>
287
+ <button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 px-3 py-1 rounded-md text-sm font-medium transition-colors">
288
+ <i class="fas fa-rocket mr-1"></i> Enhanced LPM
289
+ </button>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ <div class="flex flex-wrap gap-2">
294
+ <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center">
295
+ <i class="fas fa-play mr-2"></i> Start Mining
296
+ </button>
297
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center">
298
+ <i class="fas fa-pause mr-2"></i> Pause
299
+ </button>
300
+ <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center">
301
+ <i class="fas fa-stop mr-2"></i> Stop
302
+ </button>
303
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center">
304
+ <i class="fas fa-sync-alt mr-2"></i> Reboot
305
+ </button>
306
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center">
307
+ <i class="fas fa-cog mr-2"></i> Configure
308
+ </button>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Miners Table -->
314
+ <div class="bg-white dark:bg-dark-800 rounded-lg shadow overflow-hidden">
315
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
316
+ <h2 class="text-lg font-semibold">Miners List</h2>
317
+ <div class="flex items-center space-x-2">
318
+ <div class="relative">
319
+ <select class="appearance-none bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
320
+ <option>All Groups</option>
321
+ <option>Main Farm</option>
322
+ <option>Backup Farm</option>
323
+ <option>Testing</option>
324
+ </select>
325
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
326
+ <i class="fas fa-chevron-down text-xs"></i>
327
+ </div>
328
+ </div>
329
+ <button class="bg-primary-600 hover:bg-primary-700 text-white px-3 py-2 rounded-md text-sm font-medium transition-colors flex items-center">
330
+ <i class="fas fa-plus mr-2"></i> Add Miner
331
+ </button>
332
+ </div>
333
+ </div>
334
+ <div class="overflow-x-auto">
335
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
336
+ <thead class="bg-gray-50 dark:bg-gray-700">
337
+ <tr>
338
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
339
+ <input type="checkbox" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700">
340
+ </th>
341
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th>
342
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">IP Address</th>
343
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Model</th>
344
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Hashrate</th>
345
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Temp</th>
346
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
347
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Uptime</th>
348
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
349
+ </tr>
350
+ </thead>
351
+ <tbody class="bg-white dark:bg-dark-800 divide-y divide-gray-200 dark:divide-gray-700">
352
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer select-none"
353
+ data-miner-id="001"
354
+ onclick="toggleMinerSelection(event, this)">
355
+ <td class="px-6 py-4 whitespace-nowrap">
356
+ <input type="checkbox" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700"
357
+ onclick="event.stopPropagation()">
358
+ </td>
359
+ <td class="px-6 py-4 whitespace-nowrap">
360
+ <div class="flex items-center">
361
+ <div class="flex-shrink-0 h-10 w-10">
362
+ <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
363
+ </div>
364
+ <div class="ml-4">
365
+ <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Antminer S19 Pro</div>
366
+ <div class="text-sm text-gray-500 dark:text-gray-400">ASIC #001</div>
367
+ </div>
368
+ </div>
369
+ </td>
370
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">192.168.1.101</td>
371
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">S19 Pro</td>
372
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
373
+ <div class="flex items-center">
374
+ <div class="h-2 w-2 rounded-full bg-green-500 mr-2"></div>
375
+ 110 TH/s
376
+ </div>
377
+ </td>
378
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">72°C</td>
379
+ <td class="px-6 py-4 whitespace-nowrap">
380
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">Active</span>
381
+ </td>
382
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">3d 12h</td>
383
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
384
+ <div class="flex justify-end space-x-2">
385
+ <button class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
386
+ <i class="fas fa-eye"></i>
387
+ </button>
388
+ <button class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
389
+ <i class="fas fa-edit"></i>
390
+ </button>
391
+ <button class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
392
+ <i class="fas fa-trash"></i>
393
+ </button>
394
+ </div>
395
+ </td>
396
+ </tr>
397
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
398
+ <td class="px-6 py-4 whitespace-nowrap">
399
+ <input type="checkbox" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700">
400
+ </td>
401
+ <td class="px-6 py-4 whitespace-nowrap">
402
+ <div class="flex items-center">
403
+ <div class="flex-shrink-0 h-10 w-10">
404
+ <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
405
+ </div>
406
+ <div class="ml-4">
407
+ <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Antminer S19j Pro</div>
408
+ <div class="text-sm text-gray-500 dark:text-gray-400">ASIC #002</div>
409
+ </div>
410
+ </div>
411
+ </td>
412
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">192.168.1.102</td>
413
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">S19j Pro</td>
414
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
415
+ <div class="flex items-center">
416
+ <div class="h-2 w-2 rounded-full bg-green-500 mr-2"></div>
417
+ 104 TH/s
418
+ </div>
419
+ </td>
420
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">68°C</td>
421
+ <td class="px-6 py-4 whitespace-nowrap">
422
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">Active</span>
423
+ </td>
424
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2d 18h</td>
425
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
426
+ <div class="flex justify-end space-x-2">
427
+ <button class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
428
+ <i class="fas fa-eye"></i>
429
+ </button>
430
+ <button class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
431
+ <i class="fas fa-edit"></i>
432
+ </button>
433
+ <button class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
434
+ <i class="fas fa-trash"></i>
435
+ </button>
436
+ </div>
437
+ </td>
438
+ </tr>
439
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
440
+ <td class="px-6 py-4 whitespace-nowrap">
441
+ <input type="checkbox" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700">
442
+ </td>
443
+ <td class="px-6 py-4 whitespace-nowrap">
444
+ <div class="flex items-center">
445
+ <div class="flex-shrink-0 h-10 w-10">
446
+ <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
447
+ </div>
448
+ <div class="ml-4">
449
+ <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Antminer S17+</div>
450
+ <div class="text-sm text-gray-500 dark:text-gray-400">ASIC #003</div>
451
+ </div>
452
+ </div>
453
+ </td>
454
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">192.168.1.103</td>
455
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">S17+</td>
456
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
457
+ <div class="flex items-center">
458
+ <div class="h-2 w-2 rounded-full bg-yellow-500 mr-2"></div>
459
+ 73 TH/s
460
+ </div>
461
+ </td>
462
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">81°C</td>
463
+ <td class="px-6 py-4 whitespace-nowrap">
464
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">Warning</span>
465
+ </td>
466
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">1d 5h</td>
467
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
468
+ <div class="flex justify-end space-x-2">
469
+ <button class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
470
+ <i class="fas fa-eye"></i>
471
+ </button>
472
+ <button class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
473
+ <i class="fas fa-edit"></i>
474
+ </button>
475
+ <button class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
476
+ <i class="fas fa-trash"></i>
477
+ </button>
478
+ </div>
479
+ </td>
480
+ </tr>
481
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
482
+ <td class="px-6 py-4 whitespace-nowrap">
483
+ <input type="checkbox" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700">
484
+ </td>
485
+ <td class="px-6 py-4 whitespace-nowrap">
486
+ <div class="flex items-center">
487
+ <div class="flex-shrink-0 h-10 w-10">
488
+ <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
489
+ </div>
490
+ <div class="ml-4">
491
+ <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Antminer T19</div>
492
+ <div class="text-sm text-gray-500 dark:text-gray-400">ASIC #004</div>
493
+ </div>
494
+ </div>
495
+ </td>
496
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">192.168.1.104</td>
497
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">T19</td>
498
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
499
+ <div class="flex items-center">
500
+ <div class="h-2 w-2 rounded-full bg-red-500 mr-2"></div>
501
+ 0 TH/s
502
+ </div>
503
+ </td>
504
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">-</td>
505
+ <td class="px-6 py-4 whitespace-nowrap">
506
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400">Offline</span>
507
+ </td>
508
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">-</td>
509
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
510
+ <div class="flex justify-end space-x-2">
511
+ <button class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
512
+ <i class="fas fa-eye"></i>
513
+ </button>
514
+ <button class="text-yellow-600 hover:text-yellow-900 dark:text-yellow-400 dark:hover:text-yellow-300">
515
+ <i class="fas fa-edit"></i>
516
+ </button>
517
+ <button class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
518
+ <i class="fas fa-trash"></i>
519
+ </button>
520
+ </div>
521
+ </td>
522
+ </tr>
523
+ </tbody>
524
+ </table>
525
+ </div>
526
+ <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
527
+ <div class="flex-1 flex justify-between sm:hidden">
528
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
529
+ Previous
530
+ </a>
531
+ <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
532
+ Next
533
+ </a>
534
+ </div>
535
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
536
+ <div>
537
+ <p class="text-sm text-gray-700 dark:text-gray-300">
538
+ Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">42</span> results
539
+ </p>
540
+ </div>
541
+ <div>
542
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
543
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
544
+ <span class="sr-only">Previous</span>
545
+ <i class="fas fa-chevron-left"></i>
546
+ </a>
547
+ <a href="#" aria-current="page" class="z-10 bg-primary-50 border-primary-500 text-primary-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
548
+ 1
549
+ </a>
550
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
551
+ 2
552
+ </a>
553
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
554
+ 3
555
+ </a>
556
+ <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
557
+ ...
558
+ </span>
559
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
560
+ 8
561
+ </a>
562
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
563
+ <span class="sr-only">Next</span>
564
+ <i class="fas fa-chevron-right"></i>
565
+ </a>
566
+ </nav>
567
+ </div>
568
+ </div>
569
+ </div>
570
+ </div>
571
+ </main>
572
+ </div>
573
+ </div>
574
+
575
+ <!-- Miner Details Modal -->
576
+ <div class="fixed inset-0 overflow-y-auto z-50 hidden" id="miner-modal">
577
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
578
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
579
+ <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
580
+ </div>
581
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
582
+ <div class="inline-block align-bottom bg-white dark:bg-dark-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
583
+ <div class="bg-white dark:bg-dark-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
584
+ <div class="sm:flex sm:items-start">
585
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-primary-100 dark:bg-primary-900/30 sm:mx-0 sm:h-10 sm:w-10">
586
+ <i class="fas fa-server text-primary-600 dark:text-primary-400"></i>
587
+ </div>
588
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
589
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title">
590
+ Antminer S19 Pro Details
591
+ </h3>
592
+ <div class="mt-2">
593
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
594
+ <div>
595
+ <h4 class="font-medium text-gray-700 dark:text-gray-300">General Information</h4>
596
+ <div class="mt-2 space-y-2">
597
+ <div class="flex justify-between">
598
+ <span class="text-gray-500 dark:text-gray-400">IP Address:</span>
599
+ <span class="text-gray-700 dark:text-gray-300">192.168.1.101</span>
600
+ </div>
601
+ <div class="flex justify-between">
602
+ <span class="text-gray-500 dark:text-gray-400">MAC Address:</span>
603
+ <span class="text-gray-700 dark:text-gray-300">00:1A:2B:3C:4D:5E</span>
604
+ </div>
605
+ <div class="flex justify-between">
606
+ <span class="text-gray-500 dark:text-gray-400">Firmware:</span>
607
+ <span class="text-gray-700 dark:text-gray-300">v2.1.8</span>
608
+ </div>
609
+ <div class="flex justify-between">
610
+ <span class="text-gray-500 dark:text-gray-400">Uptime:</span>
611
+ <span class="text-gray-700 dark:text-gray-300">3 days 12 hours</span>
612
+ </div>
613
+ </div>
614
+ </div>
615
+ <div>
616
+ <h4 class="font-medium text-gray-700 dark:text-gray-300">Mining Status</h4>
617
+ <div class="mt-2 space-y-2">
618
+ <div class="flex justify-between">
619
+ <span class="text-gray-500 dark:text-gray-400">Hashrate:</span>
620
+ <span class="text-gray-700 dark:text-gray-300">110 TH/s</span>
621
+ </div>
622
+ <div class="flex justify-between">
623
+ <span class="text-gray-500 dark:text-gray-400">Temperature:</span>
624
+ <span class="text-gray-700 dark:text-gray-300">72°C</span>
625
+ </div>
626
+ <div class="flex justify-between">
627
+ <span class="text-gray-500 dark:text-gray-400">Fan Speed:</span>
628
+ <span class="text-gray-700 dark:text-gray-300">4200 RPM</span>
629
+ </div>
630
+ <div class="flex justify-between">
631
+ <span class="text-gray-500 dark:text-gray-400">Power:</span>
632
+ <span class="text-gray-700 dark:text-gray-300">3250W</span>
633
+ </div>
634
+ </div>
635
+ </div>
636
+ </div>
637
+ <div class="mt-4">
638
+ <h4 class="font-medium text-gray-700 dark:text-gray-300">Pool Configuration</h4>
639
+ <div class="mt-2 space-y-2">
640
+ <div class="flex justify-between">
641
+ <span class="text-gray-500 dark:text-gray-400">Pool 1:</span>
642
+ <span class="text-gray-700 dark:text-gray-300">stratum+tcp://btc.pool.com:3333</span>
643
+ </div>
644
+ <div class="flex justify-between">
645
+ <span class="text-gray-500 dark:text-gray-400">Pool 2:</span>
646
+ <span class="text-gray-700 dark:text-gray-300">stratum+tcp://backup.pool.com:3333</span>
647
+ </div>
648
+ <div class="flex justify-between">
649
+ <span class="text-gray-500 dark:text-gray-400">Pool 3:</span>
650
+ <span class="text-gray-700 dark:text-gray-300">stratum+tcp://test.pool.com:3333</span>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ <div class="mt-4">
655
+ <h4 class="font-medium text-gray-700 dark:text-gray-300">Miner Controls</h4>
656
+ <div class="mt-2 flex flex-wrap gap-2">
657
+ <button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded-md text-sm font-medium transition-colors">
658
+ <i class="fas fa-play mr-1"></i> Start
659
+ </button>
660
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded-md text-sm font-medium transition-colors">
661
+ <i class="fas fa-pause mr-1"></i> Pause
662
+ </button>
663
+ <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-md text-sm font-medium transition-colors">
664
+ <i class="fas fa-stop mr-1"></i> Stop
665
+ </button>
666
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md text-sm font-medium transition-colors">
667
+ <i class="fas fa-sync-alt mr-1"></i> Reboot
668
+ </button>
669
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded-md text-sm font-medium transition-colors">
670
+ <i class="fas fa-cog mr-1"></i> Configure
671
+ </button>
672
+ </div>
673
+ </div>
674
+ </div>
675
+ </div>
676
+ </div>
677
+ </div>
678
+ <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
679
+ <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
680
+ Close
681
+ </button>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ </div>
686
+
687
+ <script>
688
+ // Miner selection state
689
+ let selectedMiners = new Set();
690
+ let lastSelectedIndex = -1;
691
+
692
+ // Toggle miner selection
693
+ function toggleMinerSelection(event, row) {
694
+ const checkbox = row.querySelector('input[type="checkbox"]');
695
+ const minerId = row.dataset.minerId;
696
+
697
+ // Handle shift key for range selection
698
+ if (event.shiftKey && lastSelectedIndex !== -1) {
699
+ const rows = Array.from(document.querySelectorAll('tbody tr'));
700
+ const currentIndex = rows.indexOf(row);
701
+ const start = Math.min(lastSelectedIndex, currentIndex);
702
+ const end = Math.max(lastSelectedIndex, currentIndex);
703
+
704
+ for (let i = start; i <= end; i++) {
705
+ const row = rows[i];
706
+ const id = row.dataset.minerId;
707
+ selectedMiners.add(id);
708
+ row.classList.add('bg-primary-50', 'dark:bg-primary-900/20');
709
+ row.querySelector('input[type="checkbox"]').checked = true;
710
+ }
711
+ }
712
+ // Handle ctrl/cmd key for multi-selection
713
+ else if (event.ctrlKey || event.metaKey) {
714
+ if (selectedMiners.has(minerId)) {
715
+ selectedMiners.delete(minerId);
716
+ row.classList.remove('bg-primary-50', 'dark:bg-primary-900/20');
717
+ checkbox.checked = false;
718
+ } else {
719
+ selectedMiners.add(minerId);
720
+ row.classList.add('bg-primary-50', 'dark:bg-primary-900/20');
721
+ checkbox.checked = true;
722
+ }
723
+ }
724
+ // Regular click (toggle single selection)
725
+ else {
726
+ if (selectedMiners.has(minerId) && selectedMiners.size > 1) {
727
+ // Clear all except this one if clicking an already selected miner
728
+ clearAllSelections();
729
+ selectedMiners.add(minerId);
730
+ row.classList.add('bg-primary-50', 'dark:bg-primary-900/20');
731
+ checkbox.checked = true;
732
+ } else {
733
+ // Toggle this miner
734
+ clearAllSelections();
735
+ if (!checkbox.checked) {
736
+ selectedMiners.add(minerId);
737
+ row.classList.add('bg-primary-50', 'dark:bg-primary-900/20');
738
+ checkbox.checked = true;
739
+ }
740
+ }
741
+ }
742
+
743
+ lastSelectedIndex = Array.from(document.querySelectorAll('tbody tr')).indexOf(row);
744
+ updateSelectionStats();
745
+ }
746
+
747
+ function clearAllSelections() {
748
+ selectedMiners.clear();
749
+ document.querySelectorAll('tbody tr').forEach(row => {
750
+ row.classList.remove('bg-primary-50', 'dark:bg-primary-900/20');
751
+ row.querySelector('input[type="checkbox"]').checked = false;
752
+ });
753
+ }
754
+
755
+ function updateSelectionStats() {
756
+ const selectedRows = Array.from(document.querySelectorAll('tbody tr'))
757
+ .filter(row => selectedMiners.has(row.dataset.minerId));
758
+
759
+ // Update selected count
760
+ document.getElementById('selected-count').textContent = selectedMiners.size;
761
+
762
+ // Calculate averages
763
+ if (selectedMiners.size > 0) {
764
+ let totalHashrate = 0;
765
+ let totalTemp = 0;
766
+ let activeCount = 0;
767
+
768
+ selectedRows.forEach(row => {
769
+ const hashrateText = row.querySelector('td:nth-child(5)').textContent;
770
+ const tempText = row.querySelector('td:nth-child(6)').textContent;
771
+
772
+ if (hashrateText.includes('TH/s')) {
773
+ totalHashrate += parseFloat(hashrateText);
774
+ activeCount++;
775
+ }
776
+ if (tempText.includes('°C')) {
777
+ totalTemp += parseFloat(tempText);
778
+ }
779
+ });
780
+
781
+ const avgHashrate = activeCount > 0 ? (totalHashrate / activeCount).toFixed(1) : 0;
782
+ const avgTemp = selectedMiners.size > 0 ? (totalTemp / selectedMiners.size).toFixed(0) : 0;
783
+
784
+ document.getElementById('avg-hashrate').textContent = `${avgHashrate} TH/s`;
785
+ document.getElementById('avg-temp').textContent = `${avgTemp}°C`;
786
+ } else {
787
+ document.getElementById('avg-hashrate').textContent = '0 TH/s';
788
+ document.getElementById('avg-temp').textContent = '0°C';
789
+ }
790
+ }
791
+
792
+ // Toggle sidebar
793
+ document.getElementById('sidebar-toggle').addEventListener('click', function() {
794
+ document.querySelector('.sidebar').classList.toggle('collapsed');
795
+ });
796
+
797
+ // Miner modal toggle (example)
798
+ document.querySelectorAll('[data-miner-details]').forEach(button => {
799
+ button.addEventListener('click', function() {
800
+ document.getElementById('miner-modal').classList.toggle('hidden');
801
+ });
802
+ });
803
+
804
+ // Close modal
805
+ document.querySelectorAll('[data-modal-close]').forEach(button => {
806
+ button.addEventListener('click', function() {
807
+ document.getElementById('miner-modal').classList.add('hidden');
808
+ });
809
+ });
810
+
811
+ // Simulate API calls for miner controls
812
+ function sendMinerCommand(command, minerIds = []) {
813
+ console.log(`Sending ${command} command to miners:`, minerIds);
814
+ // In a real app, this would make an API call to your backend
815
+ // which would then communicate with the Antminer API
816
+
817
+ // Show a success notification
818
+ alert(`Successfully sent ${command} command to selected miners`);
819
+ }
820
+
821
+ // Bind miner control buttons
822
+ document.querySelectorAll('[data-miner-command]').forEach(button => {
823
+ button.addEventListener('click', function() {
824
+ const command = this.getAttribute('data-miner-command');
825
+ const selectedMiners = Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
826
+ .map(checkbox => checkbox.closest('tr').getAttribute('data-miner-id'));
827
+
828
+ if (selectedMiners.length === 0) {
829
+ alert('Please select at least one miner');
830
+ return;
831
+ }
832
+
833
+ sendMinerCommand(command, selectedMiners);
834
+ });
835
+ });
836
+
837
+ // Select all checkbox
838
+ document.querySelector('th input[type="checkbox"]').addEventListener('change', function() {
839
+ const rows = document.querySelectorAll('tbody tr');
840
+ if (this.checked) {
841
+ rows.forEach(row => {
842
+ const minerId = row.dataset.minerId;
843
+ selectedMiners.add(minerId);
844
+ row.classList.add('bg-primary-50', 'dark:bg-primary-900/20');
845
+ row.querySelector('input[type="checkbox"]').checked = true;
846
+ });
847
+ } else {
848
+ clearAllSelections();
849
+ }
850
+ updateSelectionStats();
851
+ });
852
+
853
+ // Sync checkbox clicks with our selection system
854
+ document.querySelectorAll('tbody input[type="checkbox"]').forEach(checkbox => {
855
+ checkbox.addEventListener('click', function(e) {
856
+ e.stopPropagation();
857
+ const row = this.closest('tr');
858
+ const minerId = row.dataset.minerId;
859
+
860
+ if (this.checked) {
861
+ selectedMiners.add(minerId);
862
+ row.classList.add('bg-primary-50', 'dark:bg-primary-900/20');
863
+ } else {
864
+ selectedMiners.delete(minerId);
865
+ row.classList.remove('bg-primary-50', 'dark:bg-primary-900/20');
866
+ }
867
+
868
+ updateSelectionStats();
869
+ });
870
+ });
871
+ </script>
872
+ <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=RobinsAIWorld/minordash" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
873
+ </html>