Hugging Face's logo

Spaces:
privateuserh
/
privatemnn-1-01
Running

App Files Community
privateuserh commited on
Commit
977e6d3
·
verified ·
1 Parent(s): 9116f91

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +948 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privatemnn 1 01
3
- emoji: 😻
4
- colorFrom: purple
5
- colorTo: yellow
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-1-01
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: green
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,948 @@
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>BCH Miner Pro | Bitcoin Cash 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
+ bch: {
15
+ primary: '#0AC18E',
16
+ dark: '#038C5A',
17
+ light: '#D1F7E8',
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, #0AC18E, #038C5A, #0AC18E);
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: #0AC18E;
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(10, 193, 142, 0.05);
128
+ }
129
+
130
+ .difficulty-indicator {
131
+ width: 100%;
132
+ height: 4px;
133
+ background: linear-gradient(to right, #0AC18E, #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
+ </style>
146
+ </head>
147
+ <body class="bg-gray-900 text-white min-h-screen">
148
+ <!-- Navigation -->
149
+ <nav class="bg-gray-800 border-b border-gray-700">
150
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
151
+ <div class="flex items-center justify-between h-16">
152
+ <div class="flex items-center">
153
+ <div class="flex-shrink-0 flex items-center">
154
+ <i class="fab fa-bitcoin text-bch-primary text-2xl mr-2"></i>
155
+ <span class="text-xl font-bold">BCH<span class="text-bch-primary">Miner</span>Pro</span>
156
+ </div>
157
+ <div class="hidden md:block">
158
+ <div class="ml-10 flex items-baseline space-x-4">
159
+ <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
160
+ <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>
161
+ <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>
162
+ <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>
163
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Support</a>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ <div class="hidden md:block">
168
+ <div class="ml-4 flex items-center md:ml-6">
169
+ <button class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
170
+ <span class="sr-only">View notifications</span>
171
+ <i class="fas fa-bell"></i>
172
+ </button>
173
+ <div class="ml-3 relative">
174
+ <div>
175
+ <button class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none" id="user-menu">
176
+ <span class="sr-only">Open user menu</span>
177
+ <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="">
178
+ </button>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ <div class="-mr-2 flex md:hidden">
184
+ <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">
185
+ <span class="sr-only">Open main menu</span>
186
+ <i class="fas fa-bars"></i>
187
+ </button>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </nav>
192
+
193
+ <!-- Main Content -->
194
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
195
+ <!-- Stats Overview -->
196
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
197
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
198
+ <div class="flex items-center justify-between">
199
+ <div>
200
+ <p class="text-gray-400 text-sm font-medium">Current Hashrate</p>
201
+ <p class="text-2xl font-bold mt-1">1.24 <span class="text-sm text-gray-400">TH/s</span></p>
202
+ </div>
203
+ <div class="bg-bch-primary bg-opacity-20 p-3 rounded-full">
204
+ <i class="fas fa-microchip text-bch-primary text-xl"></i>
205
+ </div>
206
+ </div>
207
+ <div class="mt-4">
208
+ <div class="hashrate-meter">
209
+ <div class="hashrate-progress" style="width: 65%"></div>
210
+ </div>
211
+ <p class="text-xs text-gray-400 mt-1">65% of your capacity</p>
212
+ </div>
213
+ </div>
214
+
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">Estimated Earnings</p>
219
+ <p class="text-2xl font-bold mt-1">0.0042 <span class="text-sm text-gray-400">BCH/day</span></p>
220
+ </div>
221
+ <div class="bg-blue-500 bg-opacity-20 p-3 rounded-full">
222
+ <i class="fas fa-coins text-blue-400 text-xl"></i>
223
+ </div>
224
+ </div>
225
+ <div class="mt-4">
226
+ <p class="text-xs text-gray-400">≈ $1.24 USD/day</p>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
231
+ <div class="flex items-center justify-between">
232
+ <div>
233
+ <p class="text-gray-400 text-sm font-medium">Active Workers</p>
234
+ <p class="text-2xl font-bold mt-1">3 <span class="text-sm text-gray-400">/ 3</span></p>
235
+ </div>
236
+ <div class="bg-green-500 bg-opacity-20 p-3 rounded-full">
237
+ <i class="fas fa-server text-green-400 text-xl"></i>
238
+ </div>
239
+ </div>
240
+ <div class="mt-4">
241
+ <p class="text-xs text-gray-400">All workers online</p>
242
+ </div>
243
+ </div>
244
+
245
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
246
+ <div class="flex items-center justify-between">
247
+ <div>
248
+ <p class="text-gray-400 text-sm font-medium">Next Payout</p>
249
+ <p class="text-2xl font-bold mt-1">0.0128 <span class="text-sm text-gray-400">BCH</span></p>
250
+ </div>
251
+ <div class="bg-purple-500 bg-opacity-20 p-3 rounded-full">
252
+ <i class="fas fa-wallet text-purple-400 text-xl"></i>
253
+ </div>
254
+ </div>
255
+ <div class="mt-4">
256
+ <p class="text-xs text-gray-400">Auto payout every block</p>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- Mining Control Panel -->
262
+ <div class="bg-gray-800 rounded-lg shadow overflow-hidden mb-8">
263
+ <div class="px-6 py-4 border-b border-gray-700 flex justify-between items-center">
264
+ <h2 class="text-lg font-semibold">Mining Control Panel</h2>
265
+ <div class="flex items-center space-x-2">
266
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-200">
267
+ <span class="w-2 h-2 mr-1 rounded-full bg-green-400"></span>
268
+ Pool Connected
269
+ </span>
270
+ </div>
271
+ </div>
272
+ <div class="p-6">
273
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
274
+ <div class="lg:col-span-2">
275
+ <div class="mining-animation bg-gray-700 rounded-lg p-6 mb-6">
276
+ <div class="flex items-center justify-between">
277
+ <div>
278
+ <h3 class="text-lg font-medium">Mining Status</h3>
279
+ <p class="text-gray-400 text-sm">Real-time mining performance</p>
280
+ </div>
281
+ <div class="relative">
282
+ <div class="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3">
283
+ <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
284
+ <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
285
+ </div>
286
+ <button id="miningToggle" class="gradient-bg text-white px-4 py-2 rounded-md font-medium flex items-center">
287
+ <i class="fas fa-power-off mr-2"></i> Mining Active
288
+ </button>
289
+ </div>
290
+ </div>
291
+ <div class="mt-6">
292
+ <div class="grid grid-cols-3 gap-4 text-center">
293
+ <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg">
294
+ <p class="text-gray-400 text-sm">Hashrate</p>
295
+ <p class="text-xl font-mono">1.24 TH/s</p>
296
+ </div>
297
+ <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg">
298
+ <p class="text-gray-400 text-sm">Shares</p>
299
+ <p class="text-xl font-mono">1,284</p>
300
+ </div>
301
+ <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg">
302
+ <p class="text-gray-400 text-sm">Efficiency</p>
303
+ <p class="text-xl font-mono">98.7%</p>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ <div class="mt-6">
308
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
309
+ <span>Current Block</span>
310
+ <span>792,451</span>
311
+ </div>
312
+ <div class="w-full bg-gray-600 rounded-full h-2.5">
313
+ <div class="gradient-bg h-2.5 rounded-full" style="width: 84%"></div>
314
+ </div>
315
+ <div class="flex justify-between text-xs text-gray-400 mt-1">
316
+ <span>84% complete</span>
317
+ <span>≈ 12 min remaining</span>
318
+ </div>
319
+ </div>
320
+ </div>
321
+
322
+ <div class="bg-gray-700 rounded-lg p-6">
323
+ <h3 class="text-lg font-medium mb-4">Mining Configuration</h3>
324
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
325
+ <div>
326
+ <label class="block text-sm font-medium text-gray-400 mb-1">Mining Intensity</label>
327
+ <select class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5">
328
+ <option selected>Auto (Recommended)</option>
329
+ <option value="low">Low (25%)</option>
330
+ <option value="medium">Medium (50%)</option>
331
+ <option value="high">High (75%)</option>
332
+ <option value="max">Maximum (100%)</option>
333
+ </select>
334
+ </div>
335
+ <div>
336
+ <label class="block text-sm font-medium text-gray-400 mb-1">Power Mode</label>
337
+ <select class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5">
338
+ <option selected>Balanced</option>
339
+ <option value="efficiency">Efficiency Mode</option>
340
+ <option value="performance">Performance Mode</option>
341
+ </select>
342
+ </div>
343
+ <div>
344
+ <label class="block text-sm font-medium text-gray-400 mb-1">Pool Address</label>
345
+ <input type="text" id="poolAddress" value="stratum.bchminerpro.com" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5">
346
+ </div>
347
+ <div>
348
+ <label class="block text-sm font-medium text-gray-400 mb-1">Pool Port</label>
349
+ <input type="text" id="poolPort" value="3333" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5">
350
+ </div>
351
+ <div>
352
+ <label class="block text-sm font-medium text-gray-400 mb-1">Username</label>
353
+ <input type="text" id="minerUsername" value="your_miner_username" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5">
354
+ </div>
355
+ <div>
356
+ <label class="block text-sm font-medium text-gray-400 mb-1">Password</label>
357
+ <input type="password" id="minerPassword" value="x" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5">
358
+ </div>
359
+ </div>
360
+ <div class="mt-6">
361
+ <button id="saveConfig" class="gradient-bg text-white px-4 py-2 rounded-md font-medium w-full">
362
+ Save Configuration
363
+ </button>
364
+ </div>
365
+ </div>
366
+ </div>
367
+
368
+ <div>
369
+ <div class="bg-gray-700 rounded-lg p-6 h-full">
370
+ <h3 class="text-lg font-medium mb-4">Quick Start</h3>
371
+ <div class="space-y-4">
372
+ <div class="bg-gray-800 p-4 rounded-lg">
373
+ <div class="flex items-start">
374
+ <div class="flex-shrink-0 bg-bch-primary bg-opacity-20 p-2 rounded-full">
375
+ <i class="fas fa-download text-bch-primary"></i>
376
+ </div>
377
+ <div class="ml-3">
378
+ <h4 class="text-sm font-medium">Download Miner</h4>
379
+ <p class="text-xs text-gray-400 mt-1">Get the latest version of our optimized miner</p>
380
+ </div>
381
+ </div>
382
+ <button class="mt-3 gradient-bg text-white text-sm px-3 py-1.5 rounded-md font-medium w-full">
383
+ Download Now
384
+ </button>
385
+ </div>
386
+
387
+ <div class="bg-gray-800 p-4 rounded-lg">
388
+ <div class="flex items-start">
389
+ <div class="flex-shrink-0 bg-purple-500 bg-opacity-20 p-2 rounded-full">
390
+ <i class="fas fa-wallet text-purple-400"></i>
391
+ </div>
392
+ <div class="ml-3">
393
+ <h4 class="text-sm font-medium">Auto Payout Settings</h4>
394
+ <p class="text-xs text-gray-400 mt-1">Configure automatic payouts every block</p>
395
+ </div>
396
+ </div>
397
+ <div class="mt-3">
398
+ <div class="flex items-center mb-2">
399
+ <input id="autoPayoutToggle" type="checkbox" class="h-4 w-4 text-bch-primary focus:ring-bch-primary border-gray-600 rounded" checked>
400
+ <label for="autoPayoutToggle" class="ml-2 block text-xs text-gray-300">Enable Auto Payout</label>
401
+ </div>
402
+ <div class="flex items-center">
403
+ <input id="secondaryMinerPayout" type="checkbox" class="h-4 w-4 text-bch-primary focus:ring-bch-primary border-gray-600 rounded" checked>
404
+ <label for="secondaryMinerPayout" class="ml-2 block text-xs text-gray-300">Include Secondary Miner</label>
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <div class="bg-gray-800 p-4 rounded-lg">
410
+ <div class="flex items-start">
411
+ <div class="flex-shrink-0 bg-blue-500 bg-opacity-20 p-2 rounded-full">
412
+ <i class="fas fa-server text-blue-400"></i>
413
+ </div>
414
+ <div class="ml-3">
415
+ <h4 class="text-sm font-medium">Secondary Miner</h4>
416
+ <p class="text-xs text-gray-400 mt-1">Connect to additional mining device</p>
417
+ </div>
418
+ </div>
419
+ <div class="mt-3 space-y-2">
420
+ <input type="text" id="secondaryMinerUrl" class="bg-gray-700 p-2 rounded-md text-xs w-full" placeholder="Pool URL (e.g., stratum+tcp://pool.example.com:3333)">
421
+ <input type="text" id="secondaryMinerUser" class="bg-gray-700 p-2 rounded-md text-xs w-full" placeholder="Username">
422
+ <input type="password" id="secondaryMinerPass" class="bg-gray-700 p-2 rounded-md text-xs w-full" placeholder="Password">
423
+ </div>
424
+ <button id="connectSecondaryMiner" class="mt-2 gradient-bg text-white text-sm px-3 py-1.5 rounded-md font-medium w-full">
425
+ Connect Miner
426
+ </button>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <!-- Wallet Addresses & Workers -->
436
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
437
+ <div class="bg-gray-800 rounded-lg shadow overflow-hidden">
438
+ <div class="px-6 py-4 border-b border-gray-700 flex justify-between items-center">
439
+ <h2 class="text-lg font-semibold">Wallet Addresses</h2>
440
+ <button id="addWalletAddress" class="text-xs bg-bch-primary hover:bg-bch-dark text-white px-3 py-1 rounded-md">
441
+ <i class="fas fa-plus mr-1"></i> Add Address
442
+ </button>
443
+ </div>
444
+ <div class="divide-y divide-gray-700" id="walletAddresses">
445
+ <!-- Address 1 -->
446
+ <div class="address-row px-6 py-4">
447
+ <div class="flex items-center">
448
+ <div class="flex-shrink-0 bg-bch-primary bg-opacity-20 p-2 rounded-full">
449
+ <i class="fas fa-wallet text-bch-primary"></i>
450
+ </div>
451
+ <div class="ml-3 flex-grow">
452
+ <input type="text" value="bitcoincash:qz27vk58s8dgs9q0wpegn0pz4v7khe5g5w5w5w5w5w" class="bg-gray-700 p-2 rounded-md text-xs font-mono w-full mb-2">
453
+ <div class="flex items-center">
454
+ <span class="text-xs text-gray-400 mr-2">Payout %:</span>
455
+ <input type="number" min="0" max="100" value="100" class="bg-gray-700 p-1 rounded-md text-xs w-16 text-center">
456
+ <span class="text-xs text-gray-400 ml-1">%</span>
457
+ <button class="ml-auto text-red-400 hover:text-red-300 text-xs">
458
+ <i class="fas fa-trash-alt"></i> Remove
459
+ </button>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+
465
+ <!-- Address 2 -->
466
+ <div class="address-row px-6 py-4">
467
+ <div class="flex items-center">
468
+ <div class="flex-shrink-0 bg-purple-500 bg-opacity-20 p-2 rounded-full">
469
+ <i class="fas fa-wallet text-purple-400"></i>
470
+ </div>
471
+ <div class="ml-3 flex-grow">
472
+ <input type="text" value="bitcoincash:qp4k8fjt6u8f9d5z2x3c4v5b6n7m8k9l0" class="bg-gray-700 p-2 rounded-md text-xs font-mono w-full mb-2">
473
+ <div class="flex items-center">
474
+ <span class="text-xs text-gray-400 mr-2">Payout %:</span>
475
+ <input type="number" min="0" max="100" value="0" class="bg-gray-700 p-1 rounded-md text-xs w-16 text-center">
476
+ <span class="text-xs text-gray-400 ml-1">%</span>
477
+ <button class="ml-auto text-red-400 hover:text-red-300 text-xs">
478
+ <i class="fas fa-trash-alt"></i> Remove
479
+ </button>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+
485
+ <!-- Address 3 -->
486
+ <div class="address-row px-6 py-4">
487
+ <div class="flex items-center">
488
+ <div class="flex-shrink-0 bg-blue-500 bg-opacity-20 p-2 rounded-full">
489
+ <i class="fas fa-wallet text-blue-400"></i>
490
+ </div>
491
+ <div class="ml-3 flex-grow">
492
+ <input type="text" value="bitcoincash:qr9v8w7x6y5z4u3v2w1x0y9z8u7v6w5x4" class="bg-gray-700 p-2 rounded-md text-xs font-mono w-full mb-2">
493
+ <div class="flex items-center">
494
+ <span class="text-xs text-gray-400 mr-2">Payout %:</span>
495
+ <input type="number" min="0" max="100" value="0" class="bg-gray-700 p-1 rounded-md text-xs w-16 text-center">
496
+ <span class="text-xs text-gray-400 ml-1">%</span>
497
+ <button class="ml-auto text-red-400 hover:text-red-300 text-xs">
498
+ <i class="fas fa-trash-alt"></i> Remove
499
+ </button>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ <div class="px-6 py-4 bg-gray-700">
506
+ <button id="saveWalletAddresses" class="gradient-bg text-white text-sm px-3 py-1.5 rounded-md font-medium w-full">
507
+ Save Wallet Configuration
508
+ </button>
509
+ </div>
510
+ </div>
511
+
512
+ <div class="bg-gray-800 rounded-lg shadow overflow-hidden">
513
+ <div class="px-6 py-4 border-b border-gray-700">
514
+ <h2 class="text-lg font-semibold">Your Workers</h2>
515
+ </div>
516
+ <div class="divide-y divide-gray-700">
517
+ <div class="px-6 py-4">
518
+ <div class="flex items-center">
519
+ <div class="flex-shrink-0">
520
+ <div class="relative">
521
+ <div class="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3">
522
+ <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
523
+ <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
524
+ </div>
525
+ <div class="bg-gray-700 p-2 rounded-full">
526
+ <i class="fas fa-server text-green-400"></i>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ <div class="ml-3">
531
+ <p class="text-sm font-medium">Primary Miner</p>
532
+ <p class="text-xs text-gray-400 mt-1">Last active: Just now</p>
533
+ <div class="difficulty-indicator mt-1 relative">
534
+ <div class="difficulty-marker" style="left: 30%;"></div>
535
+ </div>
536
+ <p class="text-xs text-gray-400 mt-1">Current difficulty: Medium</p>
537
+ </div>
538
+ <div class="ml-auto">
539
+ <div class="text-sm font-mono">1.24 TH/s</div>
540
+ <div class="text-xs text-gray-400 mt-1">Efficiency: 98%</div>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ <div class="px-6 py-4">
545
+ <div class="flex items-center">
546
+ <div class="flex-shrink-0">
547
+ <div class="relative">
548
+ <div class="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3">
549
+ <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
550
+ <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
551
+ </div>
552
+ <div class="bg-gray-700 p-2 rounded-full">
553
+ <i class="fas fa-server text-green-400"></i>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ <div class="ml-3">
558
+ <p class="text-sm font-medium">Secondary Miner #1</p>
559
+ <p class="text-xs text-gray-400 mt-1">Last active: 2 minutes ago</p>
560
+ <div class="difficulty-indicator mt-1 relative">
561
+ <div class="difficulty-marker" style="left: 65%;"></div>
562
+ </div>
563
+ <p class="text-xs text-gray-400 mt-1">Current difficulty: High</p>
564
+ </div>
565
+ <div class="ml-auto">
566
+ <div class="text-sm font-mono">0.85 TH/s</div>
567
+ <div class="text-xs text-gray-400 mt-1">Efficiency: 96%</div>
568
+ </div>
569
+ </div>
570
+ </div>
571
+ <div class="px-6 py-4">
572
+ <div class="flex items-center">
573
+ <div class="flex-shrink-0">
574
+ <div class="relative">
575
+ <div class="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3">
576
+ <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
577
+ <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
578
+ </div>
579
+ <div class="bg-gray-700 p-2 rounded-full">
580
+ <i class="fas fa-server text-green-400"></i>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ <div class="ml-3">
585
+ <p class="text-sm font-medium">Secondary Miner #2</p>
586
+ <p class="text-xs text-gray-400 mt-1">Last active: 15 minutes ago</p>
587
+ <div class="difficulty-indicator mt-1 relative">
588
+ <div class="difficulty-marker" style="left: 15%;"></div>
589
+ </div>
590
+ <div class="text-xs text-gray-400 mt-1">Current difficulty: Low</div>
591
+ </div>
592
+ <div class="ml-auto">
593
+ <div class="text-sm font-mono">0.62 TH/s</div>
594
+ <div class="text-xs text-gray-400 mt-1">Efficiency: 95%</div>
595
+ </div>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ </div>
600
+ </div>
601
+
602
+ <!-- Earnings Chart -->
603
+ <div class="bg-gray-800 rounded-lg shadow overflow-hidden mb-8">
604
+ <div class="px-6 py-4 border-b border-gray-700">
605
+ <h2 class="text-lg font-semibold">Earnings Overview</h2>
606
+ </div>
607
+ <div class="p-6">
608
+ <div class="h-80">
609
+ <!-- Chart placeholder - in a real app you would use Chart.js or similar -->
610
+ <div class="bg-gray-700 rounded-lg flex items-center justify-center h-full">
611
+ <div class="text-center">
612
+ <i class="fas fa-chart-line text-4xl text-gray-500 mb-2"></i>
613
+ <p class="text-gray-400">Earnings chart will be displayed here</p>
614
+ </div>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </div>
619
+ </main>
620
+
621
+ <!-- Floating Action Button -->
622
+ <button id="wirelessBtn" class="floating-btn bg-bch-primary hover:bg-bch-dark text-white rounded-full p-4 transition-all duration-300">
623
+ <i class="fas fa-wifi text-xl"></i>
624
+ </button>
625
+
626
+ <!-- Wireless Connection Modal -->
627
+ <div id="wirelessModal" class="fixed inset-0 overflow-y-auto z-50 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
628
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
629
+ <div class="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
630
+
631
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
632
+
633
+ <div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
634
+ <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
635
+ <div class="sm:flex sm:items-start">
636
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-bch-primary bg-opacity-20 sm:mx-0 sm:h-10 sm:w-10">
637
+ <i class="fas fa-wifi text-bch-primary"></i>
638
+ </div>
639
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
640
+ <h3 class="text-lg leading-6 font-medium text-white" id="modal-title">
641
+ Connect to Secondary Miner
642
+ </h3>
643
+ <div class="mt-4 space-y-4">
644
+ <div>
645
+ <label for="wifiSSID" class="block text-sm font-medium text-gray-400">WiFi SSID</label>
646
+ <input type="text" id="wifiSSID" class="mt-1 bg-gray-700 border border-gray-600 text-white text-sm rounded-md focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5" placeholder="Enter WiFi network name">
647
+ </div>
648
+ <div>
649
+ <label for="wifiPassword" class="block text-sm font-medium text-gray-400">WiFi Password</label>
650
+ <input type="password" id="wifiPassword" class="mt-1 bg-gray-700 border border-gray-600 text-white text-sm rounded-md focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5" placeholder="Enter WiFi password">
651
+ </div>
652
+ <div>
653
+ <label for="minerIP" class="block text-sm font-medium text-gray-400">Miner IP Address</label>
654
+ <input type="text" id="minerIP" class="mt-1 bg-gray-700 border border-gray-600 text-white text-sm rounded-md focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5" placeholder="192.168.1.100">
655
+ </div>
656
+ <div>
657
+ <label for="minerPort" class="block text-sm font-medium text-gray-400">Miner Port</label>
658
+ <input type="text" id="minerPort" value="4028" class="mt-1 bg-gray-700 border border-gray-600 text-white text-sm rounded-md focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5">
659
+ </div>
660
+ <div>
661
+ <label for="minerPoolUrl" class="block text-sm font-medium text-gray-400">Pool Connection URL</label>
662
+ <input type="text" id="minerPoolUrl" class="mt-1 bg-gray-700 border border-gray-600 text-white text-sm rounded-md focus:ring-bch-primary focus:border-bch-primary block w-full p-2.5" placeholder="stratum+tcp://pool.example.com:3333">
663
+ </div>
664
+ </div>
665
+ </div>
666
+ </div>
667
+ </div>
668
+ <div class="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
669
+ <button id="connectWireless" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-bch-primary text-base font-medium text-white hover:bg-bch-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bch-primary sm:ml-3 sm:w-auto sm:text-sm">
670
+ Connect
671
+ </button>
672
+ <button id="cancelWireless" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-600 shadow-sm px-4 py-2 bg-gray-700 text-base font-medium text-white hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
673
+ Cancel
674
+ </button>
675
+ </div>
676
+ </div>
677
+ </div>
678
+ </div>
679
+
680
+ <!-- Footer -->
681
+ <footer class="bg-gray-800 border-t border-gray-700">
682
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
683
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
684
+ <div>
685
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">BCH Miner Pro</h3>
686
+ <p class="text-gray-300 text-sm">The most efficient Bitcoin Cash mining platform with low fees and instant payouts.</p>
687
+ </div>
688
+ <div>
689
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Resources</h3>
690
+ <ul class="space-y-2">
691
+ <li><a href="#" class="text-gray-300 hover:text-white text-sm">Documentation</a></li>
692
+ <li><a href="#" class="text-gray-300 hover:text-white text-sm">API Reference</a></li>
693
+ <li><a href="#" class="text-gray-300 hover:text-white text-sm">Mining Calculator</a></li>
694
+ <li><a href="#" class="text-gray-300 hover:text-white text-sm">Network Status</a></li>
695
+ </ul>
696
+ </div>
697
+ <div>
698
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Company</h3>
699
+ <ul class="space-y-2">
700
+ <li><a href="#" class="text-gray-300 hover:text-white text-sm">About Us</a></li>
701
+ <li><a href="#" class="text-gray-300 hover:text-white text-sm">Blog</a></li>
702
+ <li><a href="#" class="text-gray-300 hover:text-white text-sm">Careers</a></li>
703
+ <li><a href="#" class="text-gray-300 hover:text-white text-sm">Contact</a></li>
704
+ </ul>
705
+ </div>
706
+ <div>
707
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Connect</h3>
708
+ <div class="flex space-x-4">
709
+ <a href="#" class="text-gray-400 hover:text-white">
710
+ <i class="fab fa-twitter"></i>
711
+ </a>
712
+ <a href="#" class="text-gray-400 hover:text-white">
713
+ <i class="fab fa-discord"></i>
714
+ </a>
715
+ <a href="#" class="text-gray-400 hover:text-white">
716
+ <i class="fab fa-telegram"></i>
717
+ </a>
718
+ <a href="#" class="text-gray-400 hover:text-white">
719
+ <i class="fab fa-github"></i>
720
+ </a>
721
+ </div>
722
+ <div class="mt-4">
723
+ <p class="text-xs text-gray-400">© 2023 BCH Miner Pro. All rights reserved.</p>
724
+ </div>
725
+ </div>
726
+ </div>
727
+ </div>
728
+ </footer>
729
+
730
+ <script>
731
+ // Mining toggle functionality
732
+ const miningToggle = document.getElementById('miningToggle');
733
+ let isMining = true;
734
+
735
+ miningToggle.addEventListener('click', function() {
736
+ isMining = !isMining;
737
+
738
+ if (isMining) {
739
+ miningToggle.innerHTML = '<i class="fas fa-power-off mr-2"></i> Mining Active';
740
+ miningToggle.classList.remove('bg-red-600');
741
+ miningToggle.classList.add('gradient-bg');
742
+
743
+ // Show mining animation
744
+ document.querySelector('.mining-animation').classList.remove('bg-gray-600');
745
+ document.querySelector('.mining-animation').classList.add('bg-gray-700');
746
+
747
+ // Update status indicator
748
+ document.querySelector('.mining-animation .relative .flex').innerHTML = `
749
+ <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
750
+ <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
751
+ `;
752
+ } else {
753
+ miningToggle.innerHTML = '<i class="fas fa-power-off mr-2"></i> Start Mining';
754
+ miningToggle.classList.remove('gradient-bg');
755
+ miningToggle.classList.add('bg-red-600');
756
+
757
+ // Hide mining animation
758
+ document.querySelector('.mining-animation').classList.remove('bg-gray-700');
759
+ document.querySelector('.mining-animation').classList.add('bg-gray-600');
760
+
761
+ // Update status indicator
762
+ document.querySelector('.mining-animation .relative .flex').innerHTML = `
763
+ <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
764
+ `;
765
+ }
766
+ });
767
+
768
+ // Simulate hashrate fluctuations and difficulty adjustments
769
+ let currentDifficulty = 0.5; // 0-1 scale
770
+ let nextBlockDifficulty = 0.6;
771
+ let blockCompletion = 0;
772
+
773
+ setInterval(() => {
774
+ if (isMining) {
775
+ // Update mining stats
776
+ const stats = document.querySelectorAll('.mining-animation .font-mono');
777
+ const currentHashrate = parseFloat(stats[0].textContent);
778
+ const newHashrate = (currentHashrate + (Math.random() * 0.2 - 0.1)).toFixed(2);
779
+ stats[0].textContent = `${Math.max(0.8, newHashrate)} TH/s`;
780
+
781
+ const currentEfficiency = parseFloat(stats[2].textContent);
782
+ const newEfficiency = (currentEfficiency + (Math.random() * 1 - 0.5)).toFixed(1);
783
+ stats[2].textContent = `${Math.max(95, newEfficiency)}%`;
784
+
785
+ // Update workers' hashrate
786
+ const workers = document.querySelectorAll('.bg-gray-800 .font-mono');
787
+ workers.forEach(worker => {
788
+ if (worker.textContent.includes('TH/s')) {
789
+ const current = parseFloat(worker.textContent);
790
+ const newRate = (current + (Math.random() * 0.05 - 0.025)).toFixed(2);
791
+ worker.textContent = `${Math.max(0.2, newRate)} TH/s`;
792
+ }
793
+ });
794
+
795
+ // Update block progress
796
+ blockCompletion += Math.random() * 2;
797
+ if (blockCompletion > 100) {
798
+ blockCompletion = 0;
799
+ // Switch to next block's difficulty
800
+ currentDifficulty = nextBlockDifficulty;
801
+ // Calculate new difficulty for next block
802
+ nextBlockDifficulty = Math.min(1, Math.max(0, currentDifficulty + (Math.random() * 0.2 - 0.1)));
803
+ }
804
+
805
+ document.querySelector('.mining-animation .gradient-bg').style.width = `${blockCompletion}%`;
806
+
807
+ // Update difficulty indicators
808
+ const difficultyMarkers = document.querySelectorAll('.difficulty-marker');
809
+ difficultyMarkers.forEach(marker => {
810
+ const newPos = Math.min(100, Math.max(0, (currentDifficulty * 100) + (Math.random() * 10 - 5)));
811
+ marker.style.left = `${newPos}%`;
812
+
813
+ // Update difficulty text
814
+ const difficultyText = marker.closest('.flex.items-center').querySelector('.text-xs.text-gray-400');
815
+ if (newPos < 33) {
816
+ difficultyText.textContent = 'Current difficulty: Low';
817
+ } else if (newPos < 66) {
818
+ difficultyText.textContent = 'Current difficulty: Medium';
819
+ } else {
820
+ difficultyText.textContent = 'Current difficulty: High';
821
+ }
822
+ });
823
+ }
824
+ }, 3000);
825
+
826
+ // Wallet address management
827
+ const addWalletAddress = document.getElementById('addWalletAddress');
828
+ const walletAddresses = document.getElementById('walletAddresses');
829
+ const saveWalletAddresses = document.getElementById('saveWalletAddresses');
830
+
831
+ addWalletAddress.addEventListener('click', function() {
832
+ const newAddress = document.createElement('div');
833
+ newAddress.className = 'address-row px-6 py-4';
834
+ newAddress.innerHTML = `
835
+ <div class="flex items-center">
836
+ <div class="flex-shrink-0 bg-yellow-500 bg-opacity-20 p-2 rounded-full">
837
+ <i class="fas fa-wallet text-yellow-400"></i>
838
+ </div>
839
+ <div class="ml-3 flex-grow">
840
+ <input type="text" placeholder="bitcoincash:..." class="bg-gray-700 p-2 rounded-md text-xs font-mono w-full mb-2">
841
+ <div class="flex items-center">
842
+ <span class="text-xs text-gray-400 mr-2">Payout %:</span>
843
+ <input type="number" min="0" max="100" value="0" class="bg-gray-700 p-1 rounded-md text-xs w-16 text-center">
844
+ <span class="text-xs text-gray-400 ml-1">%</span>
845
+ <button class="ml-auto text-red-400 hover:text-red-300 text-xs remove-address">
846
+ <i class="fas fa-trash-alt"></i> Remove
847
+ </button>
848
+ </div>
849
+ </div>
850
+ </div>
851
+ `;
852
+ walletAddresses.appendChild(newAddress);
853
+
854
+ // Add event listener to the new remove button
855
+ newAddress.querySelector('.remove-address').addEventListener('click', function() {
856
+ walletAddresses.removeChild(newAddress);
857
+ });
858
+ });
859
+
860
+ // Add event listeners to existing remove buttons
861
+ document.querySelectorAll('.address-row button').forEach(button => {
862
+ if (button.textContent.includes('Remove')) {
863
+ button.addEventListener('click', function() {
864
+ walletAddresses.removeChild(button.closest('.address-row'));
865
+ });
866
+ }
867
+ });
868
+
869
+ saveWalletAddresses.addEventListener('click', function() {
870
+ const addresses = [];
871
+ let totalPercentage = 0;
872
+
873
+ document.querySelectorAll('.address-row').forEach(row => {
874
+ const address = row.querySelector('input[type="text"]').value;
875
+ const percentage = parseInt(row.querySelector('input[type="number"]').value);
876
+
877
+ if (address) {
878
+ addresses.push({ address, percentage });
879
+ totalPercentage += percentage;
880
+ }
881
+ });
882
+
883
+ if (addresses.length === 0) {
884
+ alert('Please add at least one wallet address');
885
+ return;
886
+ }
887
+
888
+ if (totalPercentage !== 100) {
889
+ alert('Total payout percentage must equal 100%');
890
+ return;
891
+ }
892
+
893
+ alert('Wallet addresses and payout percentages saved successfully!');
894
+ // In a real app, you would send this to your backend
895
+ });
896
+
897
+ // Secondary miner connection
898
+ const connectSecondaryMiner = document.getElementById('connectSecondaryMiner');
899
+
900
+ connectSecondaryMiner.addEventListener('click', function() {
901
+ const poolUrl = document.getElementById('secondaryMinerUrl').value;
902
+ const username = document.getElementById('secondaryMinerUser').value;
903
+
904
+ if (poolUrl && username) {
905
+ alert(`Connecting secondary miner to pool:\n${poolUrl}\nUsername: ${username}`);
906
+ // In a real app, you would initiate the connection here
907
+ } else {
908
+ alert('Please enter both Pool URL and Username');
909
+ }
910
+ });
911
+
912
+ // Wireless connection modal
913
+ const wirelessBtn = document.getElementById('wirelessBtn');
914
+ const wirelessModal = document.getElementById('wirelessModal');
915
+ const cancelWireless = document.getElementById('cancelWireless');
916
+ const connectWireless = document.getElementById('connectWireless');
917
+
918
+ wirelessBtn.addEventListener('click', function() {
919
+ wirelessModal.classList.remove('hidden');
920
+ });
921
+
922
+ cancelWireless.addEventListener('click', function() {
923
+ wirelessModal.classList.add('hidden');
924
+ });
925
+
926
+ connectWireless.addEventListener('click', function() {
927
+ const wifiSSID = document.getElementById('wifiSSID').value;
928
+ const minerIP = document.getElementById('minerIP').value;
929
+ const minerPoolUrl = document.getElementById('minerPoolUrl').value;
930
+
931
+ if (wifiSSID && minerIP && minerPoolUrl) {
932
+ alert(`Connecting to secondary miner via WiFi:\nSSID: ${wifiSSID}\nMiner IP: ${minerIP}\nPool URL: ${minerPoolUrl}`);
933
+ // In a real app, you would initiate the connection here
934
+ wirelessModal.classList.add('hidden');
935
+ } else {
936
+ alert('Please enter WiFi SSID, Miner IP and Pool URL');
937
+ }
938
+ });
939
+
940
+ // Close modal when clicking outside
941
+ window.addEventListener('click', function(event) {
942
+ if (event.target === wirelessModal) {
943
+ wirelessModal.classList.add('hidden');
944
+ }
945
+ });
946
+ </script>
947
+ <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-1-01" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
948
+ </html>