Hugging Face's logo

Spaces:
privateuserh
/
privatemnn-fbv1-0
Running

App Files Community
privateuserh commited on
Commit
21e033c
·
verified ·
1 Parent(s): d1cf81d

Add 2 files

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