Hugging Face's logo

Spaces:
privateuserh
/
privatemnn-fbv1-01
Running

App Files Community
privateuserh commited on
Commit
343c844
·
verified ·
1 Parent(s): 8d59956

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +996 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privatemnn Fbv1 01
3
- emoji: 😻
4
- colorFrom: red
5
- colorTo: pink
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: privatemnn-fbv1-01
3
+ emoji: 🐳
4
+ colorFrom: green
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,996 @@
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>FB Miner Pro | Fractal Bitcoin Mining Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ fb: {
16
+ primary: '#6D28D9',
17
+ dark: '#5B21B6',
18
+ light: '#EDE9FE',
19
+ },
20
+ dark: {
21
+ 850: '#1E293B'
22
+ }
23
+ },
24
+ animation: {
25
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
26
+ }
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+ <style>
32
+ @keyframes gradientWave {
33
+ 0% { background-position: 0% 50%; }
34
+ 50% { background-position: 100% 50%; }
35
+ 100% { background-position: 0% 50%; }
36
+ }
37
+
38
+ .gradient-bg {
39
+ background: linear-gradient(270deg, #6D28D9, #5B21B6, #6D28D9);
40
+ background-size: 200% 200%;
41
+ animation: gradientWave 8s ease infinite;
42
+ }
43
+
44
+ .mining-animation {
45
+ position: relative;
46
+ overflow: hidden;
47
+ }
48
+
49
+ .mining-animation::after {
50
+ content: '';
51
+ position: absolute;
52
+ top: -50%;
53
+ left: -50%;
54
+ width: 200%;
55
+ height: 200%;
56
+ background: linear-gradient(
57
+ to bottom right,
58
+ rgba(255, 255, 255, 0) 0%,
59
+ rgba(255, 255, 255, 0) 30%,
60
+ rgba(255, 255, 255, 0.3) 45%,
61
+ rgba(255, 255, 255, 0) 60%,
62
+ rgba(255, 255, 255, 0) 100%
63
+ );
64
+ transform: rotate(30deg);
65
+ animation: shine 3s infinite;
66
+ }
67
+
68
+ @keyframes shine {
69
+ 0% { left: -50%; }
70
+ 100% { left: 150%; }
71
+ }
72
+
73
+ .hashrate-meter {
74
+ position: relative;
75
+ height: 8px;
76
+ background-color: #e5e7eb;
77
+ border-radius: 4px;
78
+ overflow: hidden;
79
+ }
80
+
81
+ .hashrate-progress {
82
+ position: absolute;
83
+ top: 0;
84
+ left: 0;
85
+ height: 100%;
86
+ background-color: #6D28D9;
87
+ border-radius: 4px;
88
+ transition: width 0.5s ease;
89
+ }
90
+
91
+ .floating-btn {
92
+ position: fixed;
93
+ bottom: 2rem;
94
+ right: 2rem;
95
+ z-index: 50;
96
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
97
+ }
98
+
99
+ .modal {
100
+ transition: opacity 0.3s ease, transform 0.3s ease;
101
+ }
102
+
103
+ .modal-enter {
104
+ opacity: 0;
105
+ transform: translateY(20px);
106
+ }
107
+
108
+ .modal-enter-active {
109
+ opacity: 1;
110
+ transform: translateY(0);
111
+ }
112
+
113
+ .modal-exit {
114
+ opacity: 1;
115
+ transform: translateY(0);
116
+ }
117
+
118
+ .modal-exit-active {
119
+ opacity: 0;
120
+ transform: translateY(20px);
121
+ }
122
+
123
+ .address-row {
124
+ transition: all 0.3s ease;
125
+ }
126
+
127
+ .address-row:hover {
128
+ background-color: rgba(109, 40, 217, 0.05);
129
+ }
130
+
131
+ .difficulty-indicator {
132
+ width: 100%;
133
+ height: 4px;
134
+ background: linear-gradient(to right, #6D28D9, #F59E0B, #EF4444);
135
+ border-radius: 2px;
136
+ margin-top: 4px;
137
+ }
138
+
139
+ .difficulty-marker {
140
+ height: 10px;
141
+ width: 2px;
142
+ background-color: white;
143
+ position: absolute;
144
+ top: -3px;
145
+ }
146
+
147
+ .countdown-timer {
148
+ font-family: monospace;
149
+ font-size: 1.1rem;
150
+ }
151
+
152
+ .storage-capacity {
153
+ height: 8px;
154
+ background-color: #1F2937;
155
+ border-radius: 4px;
156
+ overflow: hidden;
157
+ }
158
+
159
+ .storage-used {
160
+ height: 100%;
161
+ background-color: #3B82F6;
162
+ border-radius: 4px;
163
+ transition: width 0.5s ease;
164
+ }
165
+ </style>
166
+ </head>
167
+ <body class="bg-gray-900 text-white min-h-screen">
168
+ <!-- Navigation -->
169
+ <nav class="bg-gray-800 border-b border-gray-700">
170
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
171
+ <div class="flex items-center justify-between h-16">
172
+ <div class="flex items-center">
173
+ <div class="flex-shrink-0 flex items-center">
174
+ <i class="fas fa-project-diagram text-fb-primary text-2xl mr-2"></i>
175
+ <span class="text-xl font-bold">FB<span class="text-fb-primary">Miner</span>Pro</span>
176
+ </div>
177
+ <div class="hidden md:block">
178
+ <div class="ml-10 flex items-baseline space-x-4">
179
+ <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
180
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Mining Pool</a>
181
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Statistics</a>
182
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Payouts</a>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ <div class="hidden md:block">
187
+ <div class="ml-4 flex items-center md:ml-6">
188
+ <button class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
189
+ <span class="sr-only">View notifications</span>
190
+ <i class="fas fa-bell"></i>
191
+ </button>
192
+ <div class="ml-3 relative">
193
+ <div>
194
+ <button class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none" id="user-menu">
195
+ <span class="sr-only">Open user menu</span>
196
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
197
+ </button>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ <div class="-mr-2 flex md:hidden">
203
+ <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
204
+ <span class="sr-only">Open main menu</span>
205
+ <i class="fas fa-bars"></i>
206
+ </button>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </nav>
211
+
212
+ <!-- Main Content -->
213
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
214
+ <!-- Stats Overview -->
215
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
216
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
217
+ <div class="flex items-center justify-between">
218
+ <div>
219
+ <p class="text-gray-400 text-sm font-medium">Current Hashrate</p>
220
+ <p class="text-2xl font-bold mt-1">1.24 <span class="text-sm text-gray-400">TH/s</span></p>
221
+ </div>
222
+ <div class="bg-fb-primary bg-opacity-20 p-3 rounded-full">
223
+ <i class="fas fa-microchip text-fb-primary text-xl"></i>
224
+ </div>
225
+ </div>
226
+ <div class="mt-4">
227
+ <div class="hashrate-meter">
228
+ <div class="hashrate-progress" style="width: 65%"></div>
229
+ </div>
230
+ <p class="text-xs text-gray-400 mt-1">65% of your capacity</p>
231
+ </div>
232
+ </div>
233
+
234
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
235
+ <div class="flex items-center justify-between">
236
+ <div>
237
+ <p class="text-gray-400 text-sm font-medium">Estimated Earnings</p>
238
+ <p class="text-2xl font-bold mt-1">0.0042 <span class="text-sm text-gray-400">FB/day</span></p>
239
+ </div>
240
+ <div class="bg-blue-500 bg-opacity-20 p-3 rounded-full">
241
+ <i class="fas fa-coins text-blue-400 text-xl"></i>
242
+ </div>
243
+ </div>
244
+ <div class="mt-4">
245
+ <p class="text-xs text-gray-400">≈ $1.24 USD/day</p>
246
+ </div>
247
+ </div>
248
+
249
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
250
+ <div class="flex items-center justify-between">
251
+ <div>
252
+ <p class="text-gray-400 text-sm font-medium">Active Workers</p>
253
+ <p class="text-2xl font-bold mt-1">1 <span class="text-sm text-gray-400">/ 1</span></p>
254
+ </div>
255
+ <div class="bg-green-500 bg-opacity-20 p-3 rounded-full">
256
+ <i class="fas fa-server text-green-400 text-xl"></i>
257
+ </div>
258
+ </div>
259
+ <div class="mt-4">
260
+ <p class="text-xs text-gray-400">Primary worker online</p>
261
+ </div>
262
+ </div>
263
+
264
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
265
+ <div class="flex items-center justify-between">
266
+ <div>
267
+ <p class="text-gray-400 text-sm font-medium">Next Payout</p>
268
+ <p class="text-2xl font-bold mt-1">0.0128 <span class="text-sm text-gray-400">FB</span></p>
269
+ </div>
270
+ <div class="bg-purple-500 bg-opacity-20 p-3 rounded-full">
271
+ <i class="fas fa-wallet text-purple-400 text-xl"></i>
272
+ </div>
273
+ </div>
274
+ <div class="mt-4">
275
+ <p class="text-xs text-gray-400">Auto payout every block</p>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Mining Control Panel -->
281
+ <div class="bg-gray-800 rounded-lg shadow overflow-hidden mb-8">
282
+ <div class="px-6 py-4 border-b border-gray-700 flex justify-between items-center">
283
+ <h2 class="text-lg font-semibold">Mining Control Panel</h2>
284
+ <div class="flex items-center space-x-2">
285
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-200">
286
+ <span class="w-2 h-2 mr-1 rounded-full bg-green-400"></span>
287
+ Pool Connected
288
+ </span>
289
+ </div>
290
+ </div>
291
+ <div class="p-6">
292
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
293
+ <div class="lg:col-span-2">
294
+ <div class="mining-animation bg-gray-700 rounded-lg p-6 mb-6">
295
+ <div class="flex items-center justify-between">
296
+ <div>
297
+ <h3 class="text-lg font-medium">Mining Status</h3>
298
+ <p class="text-gray-400 text-sm">Real-time mining performance</p>
299
+ </div>
300
+ <div class="relative">
301
+ <div class="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3">
302
+ <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
303
+ <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
304
+ </div>
305
+ <button id="miningToggle" class="gradient-bg text-white px-4 py-2 rounded-md font-medium flex items-center">
306
+ <i class="fas fa-power-off mr-2"></i> Mining Active
307
+ </button>
308
+ </div>
309
+ </div>
310
+ <div class="mt-6">
311
+ <div class="grid grid-cols-3 gap-4 text-center">
312
+ <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg">
313
+ <p class="text-gray-400 text-sm">Hashrate</p>
314
+ <p class="text-xl font-mono">1.24 TH/s</p>
315
+ </div>
316
+ <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg">
317
+ <p class="text-gray-400 text-sm">Shares</p>
318
+ <p class="text-xl font-mono">1,284</p>
319
+ </div>
320
+ <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg">
321
+ <p class="text-gray-400 text-sm">Efficiency</p>
322
+ <p class="text-xl font-mono">98.7%</p>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ <div class="mt-6">
327
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
328
+ <span>Current Block</span>
329
+ <span>792,451</span>
330
+ </div>
331
+ <div class="w-full bg-gray-600 rounded-full h-2.5">
332
+ <div class="gradient-bg h-2.5 rounded-full" style="width: 84%"></div>
333
+ </div>
334
+ <div class="flex justify-between text-xs text-gray-400 mt-1">
335
+ <span>84% complete</span>
336
+ <span class="countdown-timer">≈ 12:45 min remaining</span>
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ <div class="bg-gray-700 rounded-lg p-6">
342
+ <h3 class="text-lg font-medium mb-4">Mining Configuration</h3>
343
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
344
+ <div>
345
+ <label class="block text-sm font-medium text-gray-400 mb-1">Mining Intensity</label>
346
+ <select class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fb-primary focus:border-fb-primary block w-full p-2.5">
347
+ <option selected>Auto (Recommended)</option>
348
+ <option value="low">Low (25%)</option>
349
+ <option value="medium">Medium (50%)</option>
350
+ <option value="high">High (75%)</option>
351
+ <option value="max">Maximum (100%)</option>
352
+ </select>
353
+ </div>
354
+ <div>
355
+ <label class="block text-sm font-medium text-gray-400 mb-1">Power Mode</label>
356
+ <select class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fb-primary focus:border-fb-primary block w-full p-2.5">
357
+ <option selected>Balanced</option>
358
+ <option value="efficiency">Efficiency Mode</option>
359
+ <option value="performance">Performance Mode</option>
360
+ </select>
361
+ </div>
362
+ <div>
363
+ <label class="block text-sm font-medium text-gray-400 mb-1">Pool Address</label>
364
+ <input type="text" id="poolAddress" value="stratum+tcp://pool-solo.fairpool.network" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fb-primary focus:border-fb-primary block w-full p-2.5">
365
+ </div>
366
+ <div>
367
+ <label class="block text-sm font-medium text-gray-400 mb-1">Pool Port</label>
368
+ <input type="text" id="poolPort" value="3333" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fb-primary focus:border-fb-primary block w-full p-2.5">
369
+ </div>
370
+ <div>
371
+ <label class="block text-sm font-medium text-gray-400 mb-1">Username</label>
372
+ <input type="text" id="minerUsername" value="privatemnrfb" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fb-primary focus:border-fb-primary block w-full p-2.5">
373
+ </div>
374
+ <div>
375
+ <label class="block text-sm font-medium text-gray-400 mb-1">Password</label>
376
+ <input type="password" id="minerPassword" value="" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fb-primary focus:border-fb-primary block w-full p-2.5">
377
+ </div>
378
+ </div>
379
+ <div class="mt-6">
380
+ <button id="saveConfig" class="gradient-bg text-white px-4 py-2 rounded-md font-medium w-full">
381
+ Save Configuration
382
+ </button>
383
+ </div>
384
+ </div>
385
+ </div>
386
+
387
+ <div>
388
+ <div class="bg-gray-700 rounded-lg p-6 h-full">
389
+ <h3 class="text-lg font-medium mb-4">Network Configuration</h3>
390
+ <div class="space-y-4">
391
+ <div class="bg-gray-800 p-4 rounded-lg">
392
+ <div class="flex items-start">
393
+ <div class="flex-shrink-0 bg-purple-500 bg-opacity-20 p-2 rounded-full">
394
+ <i class="fas fa-network-wired text-purple-400"></i>
395
+ </div>
396
+ <div class="ml-3">
397
+ <h4 class="text-sm font-medium">Port Configuration</h4>
398
+ <p class="text-xs text-gray-400 mt-1">Configure mining port for incoming connections</p>
399
+ </div>
400
+ </div>
401
+ <div class="mt-3">
402
+ <div class="flex items-center mb-2">
403
+ <input id="portToggle" type="checkbox" class="h-4 w-4 text-fb-primary focus:ring-fb-primary border-gray-600 rounded">
404
+ <label for="portToggle" class="ml-2 block text-xs text-gray-300">Enable Port Forwarding</label>
405
+ </div>
406
+ <div class="mt-2">
407
+ <label class="block text-xs font-medium text-gray-400 mb-1">Port Number</label>
408
+ <input type="number" id="miningPort" value="3333" class="bg-gray-700 border border-gray-600 text-white text-xs rounded-md focus:ring-fb-primary focus:border-fb-primary block w-full p-2">
409
+ </div>
410
+ <div class="mt-2">
411
+ <label class="block text-xs font-medium text-gray-400 mb-1">Protocol</label>
412
+ <select class="bg-gray-700 border border-gray-600 text-white text-xs rounded-md focus:ring-fb-primary focus:border-fb-primary block w-full p-2">
413
+ <option selected>TCP</option>
414
+ <option>UDP</option>
415
+ <option>Both</option>
416
+ </select>
417
+ </div>
418
+ </div>
419
+ <button id="openPortBtn" class="mt-3 gradient-bg text-white text-sm px-3 py-1.5 rounded-md font-medium w-full">
420
+ Open Port
421
+ </button>
422
+ </div>
423
+
424
+ <div class="bg-gray-800 p-4 rounded-lg">
425
+ <div class="flex items-start">
426
+ <div class="flex-shrink-0 bg-blue-500 bg-opacity-20 p-2 rounded-full">
427
+ <i class="fas fa-shield-alt text-blue-400"></i>
428
+ </div>
429
+ <div class="ml-3">
430
+ <h4 class="text-sm font-medium">Security Settings</h4>
431
+ <p class="text-xs text-gray-400 mt-1">Configure firewall and access control</p>
432
+ </div>
433
+ </div>
434
+ <div class="mt-3">
435
+ <div class="flex items-center mb-2">
436
+ <input id="firewallToggle" type="checkbox" class="h-4 w-4 text-fb-primary focus:ring-fb-primary border-gray-600 rounded" checked>
437
+ <label for="firewallToggle" class="ml-2 block text-xs text-gray-300">Enable Firewall Protection</label>
438
+ </div>
439
+ <div class="flex items-center mb-2">
440
+ <input id="ipRestrictToggle" type="checkbox" class="h-4 w-4 text-fb-primary focus:ring-fb-primary border-gray-600 rounded">
441
+ <label for="ipRestrictToggle" class="ml-2 block text-xs text-gray-300">Restrict by IP Address</label>
442
+ </div>
443
+ <div class="mt-2">
444
+ <label class="block text-xs font-medium text-gray-400 mb-1">Allowed IPs (comma separated)</label>
445
+ <input type="text" id="allowedIPs" class="bg-gray-700 border border-gray-600 text-white text-xs rounded-md focus:ring-fb-primary focus:border-fb-primary block w-full p-2" placeholder="192.168.1.1, 10.0.0.5">
446
+ </div>
447
+ </div>
448
+ </div>
449
+
450
+ <div class="bg-gray-800 p-4 rounded-lg">
451
+ <div class="flex items-start">
452
+ <div class="flex-shrink-0 bg-yellow-500 bg-opacity-20 p-2 rounded-full">
453
+ <i class="fas fa-sd-card text-yellow-400"></i>
454
+ </div>
455
+ <div class="ml-3">
456
+ <h4 class="text-sm font-medium">Storage Capacity</h4>
457
+ <p class="text-xs text-gray-400 mt-1">SD Card mining storage</p>
458
+ </div>
459
+ </div>
460
+ <div class="mt-3">
461
+ <div class="storage-capacity">
462
+ <div class="storage-used" style="width: 65%"></div>
463
+ </div>
464
+ <div class="flex justify-between text-xs text-gray-400 mt-1">
465
+ <span>32.5 GB used</span>
466
+ <span>50 GB total</span>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+
477
+ <!-- Wallet Addresses & Workers -->
478
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
479
+ <div class="bg-gray-800 rounded-lg shadow overflow-hidden">
480
+ <div class="px-6 py-4 border-b border-gray-700 flex justify-between items-center">
481
+ <h2 class="text-lg font-semibold">Wallet Addresses</h2>
482
+ <button id="addWalletAddress" class="text-xs bg-fb-primary hover:bg-fb-dark text-white px-3 py-1 rounded-md">
483
+ <i class="fas fa-plus mr-1"></i> Add Address
484
+ </button>
485
+ </div>
486
+ <div class="divide-y divide-gray-700" id="walletAddresses">
487
+ <!-- Address 1 -->
488
+ <div class="address-row px-6 py-4">
489
+ <div class="flex items-center">
490
+ <div class="flex-shrink-0 bg-fb-primary bg-opacity-20 p-2 rounded-full">
491
+ <i class="fas fa-wallet text-fb-primary"></i>
492
+ </div>
493
+ <div class="ml-3 flex-grow">
494
+ <input type="text" value="bc1q3azkahp4tl72hflssdfz2rp3h383erjyj848ny" class="bg-gray-700 p-2 rounded-md text-xs font-mono w-full mb-2" placeholder="FB Address">
495
+ <input type="text" value="privatemnrfb" class="bg-gray-700 p-2 rounded-md text-xs w-full mb-2" placeholder="Pool Username">
496
+ <div class="flex items-center">
497
+ <span class="text-xs text-gray-400 mr-2">Payout %:</span>
498
+ <input type="number" min="0" max="100" value="100" class="bg-gray-700 p-1 rounded-md text-xs w-16 text-center">
499
+ <span class="text-xs text-gray-400 ml-1">%</span>
500
+ <button class="ml-auto text-red-400 hover:text-red-300 text-xs">
501
+ <i class="fas fa-trash-alt"></i> Remove
502
+ </button>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ <div class="px-6 py-4 bg-gray-700">
509
+ <button id="saveWalletAddresses" class="gradient-bg text-white text-sm px-3 py-1.5 rounded-md font-medium w-full">
510
+ Save Wallet Configuration
511
+ </button>
512
+ </div>
513
+ </div>
514
+
515
+ <div class="bg-gray-800 rounded-lg shadow overflow-hidden">
516
+ <div class="px-6 py-4 border-b border-gray-700">
517
+ <h2 class="text-lg font-semibold">Your Worker</h2>
518
+ </div>
519
+ <div class="divide-y divide-gray-700">
520
+ <div class="px-6 py-4">
521
+ <div class="flex items-center">
522
+ <div class="flex-shrink-0">
523
+ <div class="relative">
524
+ <div class="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3">
525
+ <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
526
+ <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
527
+ </div>
528
+ <div class="bg-gray-700 p-2 rounded-full">
529
+ <i class="fas fa-server text-green-400"></i>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ <div class="ml-3">
534
+ <p class="text-sm font-medium">Primary Miner</p>
535
+ <p class="text-xs text-gray-400 mt-1">Last active: Just now</p>
536
+ <div class="difficulty-indicator mt-1 relative">
537
+ <div class="difficulty-marker" style="left: 30%;"></div>
538
+ </div>
539
+ <p class="text-xs text-gray-400 mt-1">Current difficulty: Medium</p>
540
+ </div>
541
+ <div class="ml-auto">
542
+ <div class="text-sm font-mono">1.24 TH/s</div>
543
+ <div class="text-xs text-gray-400 mt-1">Efficiency: 98%</div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ </div>
550
+
551
+ <!-- Block Tracking & Earnings -->
552
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
553
+ <!-- Current Block Tracking -->
554
+ <div class="bg-gray-800 rounded-lg shadow overflow-hidden">
555
+ <div class="px-6 py-4 border-b border-gray-700">
556
+ <h2 class="text-lg font-semibold">Current Block Tracking</h2>
557
+ </div>
558
+ <div class="p-6">
559
+ <div class="grid grid-cols-3 gap-4 mb-4">
560
+ <div class="bg-gray-700 p-3 rounded-lg">
561
+ <p class="text-gray-400 text-sm">Block Height</p>
562
+ <p class="text-xl font-mono">792,451</p>
563
+ </div>
564
+ <div class="bg-gray-700 p-3 rounded-lg">
565
+ <p class="text-gray-400 text-sm">Shares Found</p>
566
+ <p class="text-xl font-mono">1,284</p>
567
+ </div>
568
+ <div class="bg-gray-700 p-3 rounded-lg">
569
+ <p class="text-gray-400 text-sm">Efficiency</p>
570
+ <p class="text-xl font-mono">98.7%</p>
571
+ </div>
572
+ </div>
573
+
574
+ <div class="mb-4">
575
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
576
+ <span>Block Progress</span>
577
+ <span>84% complete</span>
578
+ </div>
579
+ <div class="w-full bg-gray-600 rounded-full h-2.5">
580
+ <div class="gradient-bg h-2.5 rounded-full" style="width: 84%"></div>
581
+ </div>
582
+ <div class="flex justify-between text-xs text-gray-400 mt-1">
583
+ <span>Estimated completion</span>
584
+ <span class="countdown-timer">12:45 min remaining</span>
585
+ </div>
586
+ </div>
587
+
588
+ <div>
589
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
590
+ <span>Next Block Difficulty</span>
591
+ <span>+8.5% increase</span>
592
+ </div>
593
+ <div class="w-full bg-gray-600 rounded-full h-2.5">
594
+ <div class="gradient-bg h-2.5 rounded-full" style="width: 65%"></div>
595
+ </div>
596
+ <div class="flex justify-between text-xs text-gray-400 mt-1">
597
+ <span>Based on 1 miner</span>
598
+ <span>Avg block time: 15.2 min</span>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </div>
603
+
604
+ <!-- Earnings Chart -->
605
+ <div class="bg-gray-800 rounded-lg shadow overflow-hidden">
606
+ <div class="px-6 py-4 border-b border-gray-700">
607
+ <h2 class="text-lg font-semibold">Earnings Overview</h2>
608
+ </div>
609
+ <div class="p-6">
610
+ <div class="h-64 mb-4">
611
+ <canvas id="earningsChart"></canvas>
612
+ </div>
613
+
614
+ <div class="grid grid-cols-2 gap-4">
615
+ <div class="bg-gray-700 p-3 rounded-lg">
616
+ <p class="text-gray-400 text-sm">Estimated Payout</p>
617
+ <p class="text-xl font-mono">0.0128 FB</p>
618
+ <p class="text-xs text-gray-400 mt-1">≈ $3.78 USD</p>
619
+ </div>
620
+ <div class="bg-gray-700 p-3 rounded-lg">
621
+ <p class="text-gray-400 text-sm">Next Payout In</p>
622
+ <p class="text-xl font-mono countdown-timer">12:45 min</p>
623
+ <p class="text-xs text-gray-400 mt-1">Block 792,451</p>
624
+ </div>
625
+ </div>
626
+
627
+ <div class="mt-4">
628
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
629
+ <span>Storage Usage</span>
630
+ <span>32.5/50 GB (65%)</span>
631
+ </div>
632
+ <div class="storage-capacity">
633
+ <div class="storage-used" style="width: 65%"></div>
634
+ </div>
635
+ </div>
636
+ </div>
637
+ </div>
638
+ </div>
639
+ </main>
640
+
641
+ <script>
642
+ // Initialize earnings chart
643
+ const ctx = document.getElementById('earningsChart').getContext('2d');
644
+ const earningsChart = new Chart(ctx, {
645
+ type: 'line',
646
+ data: {
647
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
648
+ datasets: [{
649
+ label: 'FB Earnings',
650
+ data: [0.015, 0.018, 0.022, 0.025, 0.028, 0.032, 0.035, 0.038, 0.042, 0.045, 0.048, 0.052],
651
+ borderColor: '#6D28D9',
652
+ backgroundColor: 'rgba(109, 40, 217, 0.1)',
653
+ borderWidth: 2,
654
+ tension: 0.3,
655
+ fill: true,
656
+ pointBackgroundColor: '#6D28D9',
657
+ pointBorderColor: '#fff',
658
+ pointHoverRadius: 5,
659
+ pointHoverBackgroundColor: '#6D28D9',
660
+ pointHoverBorderColor: '#fff',
661
+ pointHitRadius: 10,
662
+ pointBorderWidth: 2
663
+ }]
664
+ },
665
+ options: {
666
+ responsive: true,
667
+ maintainAspectRatio: false,
668
+ plugins: {
669
+ legend: {
670
+ display: false
671
+ },
672
+ tooltip: {
673
+ backgroundColor: '#1F2937',
674
+ titleColor: '#E5E7EB',
675
+ bodyColor: '#D1D5DB',
676
+ borderColor: '#4B5563',
677
+ borderWidth: 1,
678
+ displayColors: false,
679
+ callbacks: {
680
+ label: function(context) {
681
+ return `Earnings: ${context.parsed.y.toFixed(3)} FB`;
682
+ }
683
+ }
684
+ }
685
+ },
686
+ scales: {
687
+ x: {
688
+ grid: {
689
+ color: 'rgba(255, 255, 255, 0.05)'
690
+ },
691
+ ticks: {
692
+ color: '#9CA3AF'
693
+ }
694
+ },
695
+ y: {
696
+ grid: {
697
+ color: 'rgba(255, 255, 255, 0.05)'
698
+ },
699
+ ticks: {
700
+ color: '#9CA3AF',
701
+ callback: function(value) {
702
+ return value.toFixed(2) + ' FB';
703
+ }
704
+ }
705
+ }
706
+ },
707
+ interaction: {
708
+ intersect: false,
709
+ mode: 'index'
710
+ }
711
+ }
712
+ });
713
+
714
+ // Mining toggle functionality
715
+ const miningToggle = document.getElementById('miningToggle');
716
+ let isMining = true;
717
+
718
+ miningToggle.addEventListener('click', function() {
719
+ isMining = !isMining;
720
+
721
+ if (isMining) {
722
+ miningToggle.innerHTML = '<i class="fas fa-power-off mr-2"></i> Mining Active';
723
+ miningToggle.classList.remove('bg-red-600');
724
+ miningToggle.classList.add('gradient-bg');
725
+
726
+ // Show mining animation
727
+ document.querySelector('.mining-animation').classList.remove('bg-gray-600');
728
+ document.querySelector('.mining-animation').classList.add('bg-gray-700');
729
+
730
+ // Update status indicator
731
+ document.querySelector('.mining-animation .relative .flex').innerHTML = `
732
+ <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
733
+ <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
734
+ `;
735
+ } else {
736
+ miningToggle.innerHTML = '<i class="fas fa-power-off mr-2"></i> Start Mining';
737
+ miningToggle.classList.remove('gradient-bg');
738
+ miningToggle.classList.add('bg-red-600');
739
+
740
+ // Hide mining animation
741
+ document.querySelector('.mining-animation').classList.remove('bg-gray-700');
742
+ document.querySelector('.mining-animation').classList.add('bg-gray-600');
743
+
744
+ // Update status indicator
745
+ document.querySelector('.mining-animation .relative .flex').innerHTML = `
746
+ <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
747
+ `;
748
+ }
749
+ });
750
+
751
+ // Simulate hashrate fluctuations and difficulty adjustments
752
+ let currentDifficulty = 0.5; // 0-1 scale
753
+ let nextBlockDifficulty = 0.6;
754
+ let blockCompletion = 84;
755
+ let remainingTime = 12 * 60 + 45; // 12 minutes 45 seconds in seconds
756
+
757
+ // Countdown timer function
758
+ function updateCountdown() {
759
+ if (isMining && blockCompletion < 100) {
760
+ remainingTime--;
761
+
762
+ if (remainingTime <= 0) {
763
+ // Block completed, reset for next block
764
+ blockCompletion = 0;
765
+ remainingTime = Math.floor(15 * 60 * (1 + Math.random() * 0.2 - 0.1)); // Random block time around 15 minutes
766
+
767
+ // Switch to next block's difficulty
768
+ currentDifficulty = nextBlockDifficulty;
769
+ // Calculate new difficulty for next block based on miners and block time
770
+ const minerCount = 1; // From active workers
771
+ const avgBlockTime = 15.2; // In minutes
772
+ const difficultyAdjustment = (minerCount / 3) * (15 / avgBlockTime);
773
+ nextBlockDifficulty = Math.min(1, Math.max(0, currentDifficulty * difficultyAdjustment * (1 + Math.random() * 0.1 - 0.05)));
774
+ }
775
+
776
+ // Update block completion
777
+ blockCompletion = 100 - (remainingTime / (15 * 60)) * 100;
778
+ document.querySelector('.mining-animation .gradient-bg').style.width = `${blockCompletion}%`;
779
+ document.querySelector('.mining-animation .countdown-timer').textContent = `≈ ${Math.floor(remainingTime / 60)}:${(remainingTime % 60).toString().padStart(2, '0')} min remaining`;
780
+
781
+ // Update block tracking section
782
+ document.querySelectorAll('.countdown-timer').forEach(el => {
783
+ el.textContent = `${Math.floor(remainingTime / 60)}:${(remainingTime % 60).toString().padStart(2, '0')} min remaining`;
784
+ });
785
+
786
+ // Update next block difficulty indicator
787
+ const nextDifficultyPos = Math.floor(nextBlockDifficulty * 100);
788
+ document.querySelectorAll('.gradient-bg').forEach(el => {
789
+ if (el.parentElement.classList.contains('bg-gray-600') && !el.parentElement.classList.contains('storage-capacity')) {
790
+ el.style.width = `${nextDifficultyPos}%`;
791
+ }
792
+ });
793
+ }
794
+ }
795
+
796
+ setInterval(updateCountdown, 1000);
797
+
798
+ setInterval(() => {
799
+ if (isMining) {
800
+ // Update mining stats
801
+ const stats = document.querySelectorAll('.mining-animation .font-mono');
802
+ const currentHashrate = parseFloat(stats[0].textContent);
803
+ const newHashrate = (currentHashrate + (Math.random() * 0.2 - 0.1)).toFixed(2);
804
+ stats[0].textContent = `${Math.max(0.8, newHashrate)} TH/s`;
805
+
806
+ // Update shares found (more active when closer to block completion)
807
+ const currentShares = parseInt(stats[1].textContent.replace(/,/g, ''));
808
+ const shareIncrease = Math.floor(5 + (blockCompletion / 100) * 20 * Math.random());
809
+ stats[1].textContent = (currentShares + shareIncrease).toLocaleString();
810
+
811
+ const currentEfficiency = parseFloat(stats[2].textContent);
812
+ const newEfficiency = (currentEfficiency + (Math.random() * 1 - 0.5)).toFixed(1);
813
+ stats[2].textContent = `${Math.max(95, newEfficiency)}%`;
814
+
815
+ // Update workers' hashrate
816
+ const workers = document.querySelectorAll('.bg-gray-800 .font-mono');
817
+ workers.forEach(worker => {
818
+ if (worker.textContent.includes('TH/s')) {
819
+ const current = parseFloat(worker.textContent);
820
+ const newRate = (current + (Math.random() * 0.05 - 0.025)).toFixed(2);
821
+ worker.textContent = `${Math.max(0.2, newRate)} TH/s`;
822
+ }
823
+ });
824
+
825
+ // Update difficulty indicators
826
+ const difficultyMarkers = document.querySelectorAll('.difficulty-marker');
827
+ difficultyMarkers.forEach(marker => {
828
+ const newPos = Math.min(100, Math.max(0, (currentDifficulty * 100) + (Math.random() * 10 - 5)));
829
+ marker.style.left = `${newPos}%`;
830
+
831
+ // Update difficulty text
832
+ const difficultyText = marker.closest('.flex.items-center').querySelector('.text-xs.text-gray-400');
833
+ if (newPos < 33) {
834
+ difficultyText.textContent = 'Current difficulty: Low';
835
+ } else if (newPos < 66) {
836
+ difficultyText.textContent = 'Current difficulty: Medium';
837
+ } else {
838
+ difficultyText.textContent = 'Current difficulty: High';
839
+ }
840
+ });
841
+
842
+ // Update estimated payout based on hashrate and shares
843
+ const estimatedPayout = (0.0001 * currentHashrate * (1 + blockCompletion / 100)).toFixed(4);
844
+ document.querySelectorAll('.text-xl.font-mono').forEach(el => {
845
+ if (el.textContent.includes('FB') && !el.textContent.includes('792,451')) {
846
+ el.textContent = `${estimatedPayout} FB`;
847
+ // Update USD equivalent
848
+ const usdEquivalent = (parseFloat(estimatedPayout) * 295).toFixed(2); // Assuming $295/FB
849
+ el.nextElementSibling.textContent = `≈ $${usdEquivalent} USD`;
850
+ }
851
+ });
852
+ }
853
+ }, 3000);
854
+
855
+ // Wallet address management
856
+ const addWalletAddress = document.getElementById('addWalletAddress');
857
+ const walletAddresses = document.getElementById('walletAddresses');
858
+ const saveWalletAddresses = document.getElementById('saveWalletAddresses');
859
+
860
+ addWalletAddress.addEventListener('click', function() {
861
+ // Check if we already have 3 addresses
862
+ if (document.querySelectorAll('.address-row').length >= 3) {
863
+ alert('Maximum of 3 wallet addresses allowed');
864
+ return;
865
+ }
866
+
867
+ const newAddress = document.createElement('div');
868
+ newAddress.className = 'address-row px-6 py-4';
869
+ newAddress.innerHTML = `
870
+ <div class="flex items-center">
871
+ <div class="flex-shrink-0 bg-yellow-500 bg-opacity-20 p-2 rounded-full">
872
+ <i class="fas fa-wallet text-yellow-400"></i>
873
+ </div>
874
+ <div class="ml-3 flex-grow">
875
+ <input type="text" placeholder="FB Address" class="bg-gray-700 p-2 rounded-md text-xs font-mono w-full mb-2">
876
+ <input type="text" placeholder="Pool Username" class="bg-gray-700 p-2 rounded-md text-xs w-full mb-2">
877
+ <div class="flex items-center">
878
+ <span class="text-xs text-gray-400 mr-2">Payout %:</span>
879
+ <input type="number" min="0" max="100" value="0" class="bg-gray-700 p-1 rounded-md text-xs w-16 text-center">
880
+ <span class="text-xs text-gray-400 ml-1">%</span>
881
+ <button class="ml-auto text-red-400 hover:text-red-300 text-xs remove-address">
882
+ <i class="fas fa-trash-alt"></i> Remove
883
+ </button>
884
+ </div>
885
+ </div>
886
+ </div>
887
+ `;
888
+ walletAddresses.appendChild(newAddress);
889
+
890
+ // Add event listener to the new remove button
891
+ newAddress.querySelector('.remove-address').addEventListener('click', function() {
892
+ walletAddresses.removeChild(newAddress);
893
+ });
894
+ });
895
+
896
+ // Add event listeners to existing remove buttons
897
+ document.querySelectorAll('.address-row button').forEach(button => {
898
+ if (button.textContent.includes('Remove')) {
899
+ button.addEventListener('click', function() {
900
+ walletAddresses.removeChild(button.closest('.address-row'));
901
+ });
902
+ }
903
+ });
904
+
905
+ saveWalletAddresses.addEventListener('click', function() {
906
+ const addresses = [];
907
+ let totalPercentage = 0;
908
+
909
+ document.querySelectorAll('.address-row').forEach(row => {
910
+ const address = row.querySelector('input[type="text"]').value;
911
+ const username = row.querySelectorAll('input[type="text"]')[1].value;
912
+ const percentage = parseInt(row.querySelector('input[type="number"]').value);
913
+
914
+ if (address) {
915
+ addresses.push({ address, username, percentage });
916
+ totalPercentage += percentage;
917
+ }
918
+ });
919
+
920
+ if (addresses.length === 0) {
921
+ alert('Please add at least one wallet address');
922
+ return;
923
+ }
924
+
925
+ if (totalPercentage !== 100) {
926
+ alert('Total payout percentage must equal 100%');
927
+ return;
928
+ }
929
+
930
+ alert('Wallet addresses and payout percentages saved successfully!\n\nPayout distribution:\n' +
931
+ addresses.map(a => `${a.address} (${a.username}): ${a.percentage}%`).join('\n'));
932
+ // In a real app, you would send this to your backend
933
+ });
934
+
935
+ // Port opening functionality
936
+ const openPortBtn = document.getElementById('openPortBtn');
937
+ const portToggle = document.getElementById('portToggle');
938
+ const miningPort = document.getElementById('miningPort');
939
+
940
+ openPortBtn.addEventListener('click', function() {
941
+ if (!portToggle.checked) {
942
+ alert('Please enable port forwarding first');
943
+ return;
944
+ }
945
+
946
+ const port = parseInt(miningPort.value);
947
+ if (isNaN(port) || port < 1 || port > 65535) {
948
+ alert('Please enter a valid port number (1-65535)');
949
+ return;
950
+ }
951
+
952
+ // Simulate port opening (in a real app, this would make an API call)
953
+ alert(`Attempting to open port ${port} for mining...\n\nNote: This is a simulation. In a real application, this would:\n1. Configure your router's port forwarding\n2. Adjust firewall settings\n3. Start listening for mining connections`);
954
+
955
+ // Update UI to show port is open
956
+ openPortBtn.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Port Open';
957
+ openPortBtn.classList.remove('gradient-bg');
958
+ openPortBtn.classList.add('bg-green-600');
959
+
960
+ // Disable the button for 5 seconds to simulate the operation
961
+ openPortBtn.disabled = true;
962
+ setTimeout(() => {
963
+ openPortBtn.disabled = false;
964
+ }, 5000);
965
+ });
966
+
967
+ // Save configuration
968
+ const saveConfig = document.getElementById('saveConfig');
969
+
970
+ saveConfig.addEventListener('click', function() {
971
+ const poolAddress = document.getElementById('poolAddress').value;
972
+ const poolPort = document.getElementById('poolPort').value;
973
+ const username = document.getElementById('minerUsername').value;
974
+
975
+ if (!poolAddress || !poolPort || !username) {
976
+ alert('Please fill in all required fields');
977
+ return;
978
+ }
979
+
980
+ alert(`Mining configuration saved successfully!\n\nPool: ${poolAddress}:${poolPort}\nUsername: ${username}\n\nNote: This is a simulation. In a real application, this would save your settings.`);
981
+
982
+ // Update UI to show success
983
+ saveConfig.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Configuration Saved';
984
+ saveConfig.classList.remove('gradient-bg');
985
+ saveConfig.classList.add('bg-green-600');
986
+
987
+ // Reset button after 3 seconds
988
+ setTimeout(() => {
989
+ saveConfig.innerHTML = 'Save Configuration';
990
+ saveConfig.classList.remove('bg-green-600');
991
+ saveConfig.classList.add('gradient-bg');
992
+ }, 3000);
993
+ });
994
+ </script>
995
+ <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=privateuserh/privatemnn-fbv1-01" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
996
+ </html>