Hugging Face's logo

Spaces:
privateuserh
/
privatemnr-fb
Running

App Files Community
privateuserh commited on
Commit
c16665d
·
verified ·
1 Parent(s): 0a22492

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1207 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privatemnr Fb
3
- emoji: 🚀
4
- colorFrom: yellow
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: privatemnr-fb
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: gray
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,1207 @@
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>FractalMiner Pro | FB & BCH 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
+ fractal: {
16
+ primary: '#6D28D9',
17
+ dark: '#5B21B6',
18
+ light: '#EDE9FE',
19
+ },
20
+ bch: {
21
+ primary: '#8DC351',
22
+ dark: '#6DA130',
23
+ light: '#E8F5E9',
24
+ },
25
+ dark: {
26
+ 850: '#1E293B'
27
+ }
28
+ },
29
+ animation: {
30
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
31
+ 'spin-slow': 'spin 4s linear infinite',
32
+ }
33
+ }
34
+ }
35
+ }
36
+ </script>
37
+ <style>
38
+ @keyframes gradientWave {
39
+ 0% { background-position: 0% 50%; }
40
+ 50% { background-position: 100% 50%; }
41
+ 100% { background-position: 0% 50%; }
42
+ }
43
+
44
+ .gradient-fractal {
45
+ background: linear-gradient(270deg, #6D28D9, #5B21B6, #6D28D9);
46
+ background-size: 200% 200%;
47
+ animation: gradientWave 8s ease infinite;
48
+ }
49
+
50
+ .gradient-bch {
51
+ background: linear-gradient(270deg, #8DC351, #6DA130, #8DC351);
52
+ background-size: 200% 200%;
53
+ animation: gradientWave 8s ease infinite;
54
+ }
55
+
56
+ .mining-animation {
57
+ position: relative;
58
+ overflow: hidden;
59
+ }
60
+
61
+ .mining-animation::after {
62
+ content: '';
63
+ position: absolute;
64
+ top: -50%;
65
+ left: -50%;
66
+ width: 200%;
67
+ height: 200%;
68
+ background: linear-gradient(
69
+ to bottom right,
70
+ rgba(255, 255, 255, 0) 0%,
71
+ rgba(255, 255, 255, 0) 30%,
72
+ rgba(255, 255, 255, 0.3) 45%,
73
+ rgba(255, 255, 255, 0) 60%,
74
+ rgba(255, 255, 255, 0) 100%
75
+ );
76
+ transform: rotate(30deg);
77
+ animation: shine 3s infinite;
78
+ }
79
+
80
+ @keyframes shine {
81
+ 0% { left: -50%; }
82
+ 100% { left: 150%; }
83
+ }
84
+
85
+ .hashrate-meter {
86
+ position: relative;
87
+ height: 8px;
88
+ background-color: #e5e7eb;
89
+ border-radius: 4px;
90
+ overflow: hidden;
91
+ }
92
+
93
+ .hashrate-progress {
94
+ position: absolute;
95
+ top: 0;
96
+ left: 0;
97
+ height: 100%;
98
+ border-radius: 4px;
99
+ transition: width 0.5s ease;
100
+ }
101
+
102
+ .floating-btn {
103
+ position: fixed;
104
+ bottom: 2rem;
105
+ right: 2rem;
106
+ z-index: 50;
107
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
108
+ }
109
+
110
+ .token-selector {
111
+ position: relative;
112
+ display: inline-block;
113
+ }
114
+
115
+ .token-option {
116
+ transition: all 0.3s ease;
117
+ }
118
+
119
+ .token-option:hover {
120
+ transform: scale(1.05);
121
+ }
122
+
123
+ .token-option.active {
124
+ border: 2px solid;
125
+ box-shadow: 0 0 10px rgba(0,0,0,0.2);
126
+ }
127
+
128
+ .coin-icon {
129
+ width: 24px;
130
+ height: 24px;
131
+ display: inline-block;
132
+ border-radius: 50%;
133
+ background-size: contain;
134
+ background-position: center;
135
+ background-repeat: no-repeat;
136
+ }
137
+
138
+ .fractal-logo {
139
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%236D28D9" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>');
140
+ }
141
+
142
+ .bch-logo {
143
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%238DC351" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm1-13h-2v6h2v-6zm0 8h-2v2h2v-2z"/></svg>');
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="fas fa-project-diagram text-fractal-primary text-2xl mr-2"></i>
155
+ <span class="text-xl font-bold">Fractal<span class="text-fractal-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
+ </div>
164
+ </div>
165
+ </div>
166
+ <div class="hidden md:block">
167
+ <div class="ml-4 flex items-center md:ml-6">
168
+ <button class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
169
+ <span class="sr-only">View notifications</span>
170
+ <i class="fas fa-bell"></i>
171
+ </button>
172
+ <div class="ml-3 relative">
173
+ <div>
174
+ <button class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none" id="user-menu">
175
+ <span class="sr-only">Open user menu</span>
176
+ <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="">
177
+ </button>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ <div class="-mr-2 flex md:hidden">
183
+ <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">
184
+ <span class="sr-only">Open main menu</span>
185
+ <i class="fas fa-bars"></i>
186
+ </button>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </nav>
191
+
192
+ <!-- Main Content -->
193
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
194
+ <!-- Token Selection -->
195
+ <div class="flex justify-center mb-8">
196
+ <div class="bg-gray-800 rounded-full p-1 flex">
197
+ <div class="token-selector">
198
+ <button class="token-option active bg-gray-700 text-white px-4 py-2 rounded-full font-medium flex items-center mr-1" data-token="fractal">
199
+ <span class="coin-icon fractal-logo mr-2"></span>
200
+ Fractal Bitcoin (FB)
201
+ </button>
202
+ </div>
203
+ <div class="token-selector">
204
+ <button class="token-option bg-gray-800 text-gray-300 px-4 py-2 rounded-full font-medium flex items-center" data-token="bch">
205
+ <span class="coin-icon bch-logo mr-2"></span>
206
+ Bitcoin Cash (BCH)
207
+ </button>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Stats Overview -->
213
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
214
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
215
+ <div class="flex items-center justify-between">
216
+ <div>
217
+ <p class="text-gray-400 text-sm font-medium">Current Hashrate</p>
218
+ <p class="text-2xl font-bold mt-1 fractal-hashrate">1.24 <span class="text-sm text-gray-400">TH/s</span></p>
219
+ <p class="text-2xl font-bold mt-1 bch-hashrate hidden">2.56 <span class="text-sm text-gray-400">TH/s</span></p>
220
+ </div>
221
+ <div class="bg-fractal-primary bg-opacity-20 p-3 rounded-full fractal-icon">
222
+ <i class="fas fa-microchip text-fractal-primary text-xl"></i>
223
+ </div>
224
+ <div class="bg-bch-primary bg-opacity-20 p-3 rounded-full bch-icon hidden">
225
+ <i class="fas fa-microchip text-bch-primary text-xl"></i>
226
+ </div>
227
+ </div>
228
+ <div class="mt-4">
229
+ <div class="hashrate-meter">
230
+ <div class="hashrate-progress bg-fractal-primary fractal-progress" style="width: 65%"></div>
231
+ <div class="hashrate-progress bg-bch-primary bch-progress hidden" style="width: 78%"></div>
232
+ </div>
233
+ <p class="text-xs text-gray-400 mt-1 fractal-capacity">65% of your capacity</p>
234
+ <p class="text-xs text-gray-400 mt-1 bch-capacity hidden">78% of your capacity</p>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
239
+ <div class="flex items-center justify-between">
240
+ <div>
241
+ <p class="text-gray-400 text-sm font-medium">Estimated Earnings</p>
242
+ <p class="text-2xl font-bold mt-1 fractal-earnings">0.0042 <span class="text-sm text-gray-400">FB/day</span></p>
243
+ <p class="text-2xl font-bold mt-1 bch-earnings hidden">0.0038 <span class="text-sm text-gray-400">BCH/day</span></p>
244
+ </div>
245
+ <div class="bg-fractal-primary bg-opacity-20 p-3 rounded-full fractal-icon">
246
+ <i class="fas fa-coins text-fractal-primary text-xl"></i>
247
+ </div>
248
+ <div class="bg-bch-primary bg-opacity-20 p-3 rounded-full bch-icon hidden">
249
+ <i class="fas fa-coins text-bch-primary text-xl"></i>
250
+ </div>
251
+ </div>
252
+ <div class="mt-4">
253
+ <p class="text-xs text-gray-400 fractal-usd">≈ $1.24 USD/day</p>
254
+ <p class="text-xs text-gray-400 bch-usd hidden">≈ $1.14 USD/day</p>
255
+ </div>
256
+ </div>
257
+
258
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
259
+ <div class="flex items-center justify-between">
260
+ <div>
261
+ <p class="text-gray-400 text-sm font-medium">Active Workers</p>
262
+ <p class="text-2xl font-bold mt-1">1 <span class="text-sm text-gray-400">/ 1</span></p>
263
+ </div>
264
+ <div class="bg-green-500 bg-opacity-20 p-3 rounded-full">
265
+ <i class="fas fa-server text-green-400 text-xl"></i>
266
+ </div>
267
+ </div>
268
+ <div class="mt-4">
269
+ <p class="text-xs text-gray-400">Primary worker online</p>
270
+ </div>
271
+ </div>
272
+
273
+ <div class="bg-gray-800 rounded-lg p-6 shadow">
274
+ <div class="flex items-center justify-between">
275
+ <div>
276
+ <p class="text-gray-400 text-sm font-medium">Next Payout</p>
277
+ <p class="text-2xl font-bold mt-1 fractal-payout">0.0128 <span class="text-sm text-gray-400">FB</span></p>
278
+ <p class="text-2xl font-bold mt-1 bch-payout hidden">0.0114 <span class="text-sm text-gray-400">BCH</span></p>
279
+ </div>
280
+ <div class="bg-fractal-primary bg-opacity-20 p-3 rounded-full fractal-icon">
281
+ <i class="fas fa-wallet text-fractal-primary text-xl"></i>
282
+ </div>
283
+ <div class="bg-bch-primary bg-opacity-20 p-3 rounded-full bch-icon hidden">
284
+ <i class="fas fa-wallet text-bch-primary text-xl"></i>
285
+ </div>
286
+ </div>
287
+ <div class="mt-4">
288
+ <p class="text-xs text-gray-400 fractal-payout-info">Auto payout every block</p>
289
+ <p class="text-xs text-gray-400 bch-payout-info hidden">Auto payout every 6 blocks</p>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Mining Control Panel -->
295
+ <div class="bg-gray-800 rounded-lg shadow overflow-hidden mb-8">
296
+ <div class="px-6 py-4 border-b border-gray-700 flex justify-between items-center">
297
+ <h2 class="text-lg font-semibold">Mining Control Panel</h2>
298
+ <div class="flex items-center space-x-2">
299
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-200">
300
+ <span class="w-2 h-2 mr-1 rounded-full bg-green-400"></span>
301
+ Pool Connected
302
+ </span>
303
+ </div>
304
+ </div>
305
+ <div class="p-6">
306
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
307
+ <div class="lg:col-span-2">
308
+ <div class="mining-animation bg-gray-700 rounded-lg p-6 mb-6">
309
+ <div class="flex items-center justify-between">
310
+ <div>
311
+ <h3 class="text-lg font-medium">Mining Status</h3>
312
+ <p class="text-gray-400 text-sm">Real-time mining performance</p>
313
+ </div>
314
+ <div class="relative">
315
+ <div class="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3">
316
+ <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
317
+ <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
318
+ </div>
319
+ <button id="miningToggle" class="gradient-fractal text-white px-4 py-2 rounded-md font-medium flex items-center">
320
+ <i class="fas fa-power-off mr-2"></i> Mining Active
321
+ </button>
322
+ </div>
323
+ </div>
324
+ <div class="mt-6">
325
+ <div class="grid grid-cols-3 gap-4 text-center">
326
+ <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg">
327
+ <p class="text-gray-400 text-sm">Hashrate</p>
328
+ <p class="text-xl font-mono fractal-hashrate">1.24 TH/s</p>
329
+ <p class="text-xl font-mono bch-hashrate hidden">2.56 TH/s</p>
330
+ </div>
331
+ <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg">
332
+ <p class="text-gray-400 text-sm">Shares</p>
333
+ <p class="text-xl font-mono">1,284</p>
334
+ </div>
335
+ <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg">
336
+ <p class="text-gray-400 text-sm">Efficiency</p>
337
+ <p class="text-xl font-mono">98.7%</p>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ <div class="mt-6">
342
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
343
+ <span>Current Block</span>
344
+ <span class="fractal-block">792,451</span>
345
+ <span class="bch-block hidden">840,127</span>
346
+ </div>
347
+ <div class="w-full bg-gray-600 rounded-full h-2.5">
348
+ <div class="gradient-fractal h-2.5 rounded-full fractal-progress" style="width: 84%"></div>
349
+ <div class="gradient-bch h-2.5 rounded-full bch-progress hidden" style="width: 72%"></div>
350
+ </div>
351
+ <div class="flex justify-between text-xs text-gray-400 mt-1">
352
+ <span class="fractal-progress-text">84% complete</span>
353
+ <span class="bch-progress-text hidden">72% complete</span>
354
+ <span class="countdown-timer">≈ 12:45 min remaining</span>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <div class="bg-gray-700 rounded-lg p-6">
360
+ <h3 class="text-lg font-medium mb-4">Mining Configuration</h3>
361
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
362
+ <div>
363
+ <label class="block text-sm font-medium text-gray-400 mb-1">Mining Intensity</label>
364
+ <select class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fractal-primary focus:border-fractal-primary block w-full p-2.5">
365
+ <option selected>Auto (Recommended)</option>
366
+ <option value="low">Low (25%)</option>
367
+ <option value="medium">Medium (50%)</option>
368
+ <option value="high">High (75%)</option>
369
+ <option value="max">Maximum (100%)</option>
370
+ </select>
371
+ </div>
372
+ <div>
373
+ <label class="block text-sm font-medium text-gray-400 mb-1">Power Mode</label>
374
+ <select class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fractal-primary focus:border-fractal-primary block w-full p-2.5">
375
+ <option selected>Balanced</option>
376
+ <option value="efficiency">Efficiency Mode</option>
377
+ <option value="performance">Performance Mode</option>
378
+ </select>
379
+ </div>
380
+ <div>
381
+ <label class="block text-sm font-medium text-gray-400 mb-1">Pool Address</label>
382
+ <input type="text" id="poolAddress" value="stratum+tcp://pool.fractalbitcoin.net" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fractal-primary focus:border-fractal-primary block w-full p-2.5">
383
+ </div>
384
+ <div>
385
+ <label class="block text-sm font-medium text-gray-400 mb-1">Pool Port</label>
386
+ <input type="text" id="poolPort" value="3333" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fractal-primary focus:border-fractal-primary block w-full p-2.5">
387
+ </div>
388
+ <div>
389
+ <label class="block text-sm font-medium text-gray-400 mb-1">Username</label>
390
+ <input type="text" id="minerUsername" value="fractalminer" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fractal-primary focus:border-fractal-primary block w-full p-2.5">
391
+ </div>
392
+ <div>
393
+ <label class="block text-sm font-medium text-gray-400 mb-1">Password</label>
394
+ <input type="password" id="minerPassword" value="" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-fractal-primary focus:border-fractal-primary block w-full p-2.5">
395
+ </div>
396
+ </div>
397
+ <div class="mt-6">
398
+ <button id="saveConfig" class="gradient-fractal text-white px-4 py-2 rounded-md font-medium w-full">
399
+ Save Configuration
400
+ </button>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <div>
406
+ <div class="bg-gray-700 rounded-lg p-6 h-full">
407
+ <h3 class="text-lg font-medium mb-4">Network Configuration</h3>
408
+ <div class="space-y-4">
409
+ <div class="bg-gray-800 p-4 rounded-lg">
410
+ <div class="flex items-start">
411
+ <div class="flex-shrink-0 bg-purple-500 bg-opacity-20 p-2 rounded-full">
412
+ <i class="fas fa-network-wired text-purple-400"></i>
413
+ </div>
414
+ <div class="ml-3">
415
+ <h4 class="text-sm font-medium">Port Configuration</h4>
416
+ <p class="text-xs text-gray-400 mt-1">Configure mining port for incoming connections</p>
417
+ </div>
418
+ </div>
419
+ <div class="mt-3">
420
+ <div class="flex items-center mb-2">
421
+ <input id="portToggle" type="checkbox" class="h-4 w-4 text-fractal-primary focus:ring-fractal-primary border-gray-600 rounded">
422
+ <label for="portToggle" class="ml-2 block text-xs text-gray-300">Enable Port Forwarding</label>
423
+ </div>
424
+ <div class="mt-2">
425
+ <label class="block text-xs font-medium text-gray-400 mb-1">Port Number</label>
426
+ <input type="number" id="miningPort" value="3333" class="bg-gray-700 border border-gray-600 text-white text-xs rounded-md focus:ring-fractal-primary focus:border-fractal-primary block w-full p-2">
427
+ </div>
428
+ <div class="mt-2">
429
+ <label class="block text-xs font-medium text-gray-400 mb-1">Protocol</label>
430
+ <select class="bg-gray-700 border border-gray-600 text-white text-xs rounded-md focus:ring-fractal-primary focus:border-fractal-primary block w-full p-2">
431
+ <option selected>TCP</option>
432
+ <option>UDP</option>
433
+ <option>Both</option>
434
+ </select>
435
+ </div>
436
+ </div>
437
+ <button id="openPortBtn" class="mt-3 gradient-fractal text-white text-sm px-3 py-1.5 rounded-md font-medium w-full">
438
+ Open Port
439
+ </button>
440
+ </div>
441
+
442
+ <div class="bg-gray-800 p-4 rounded-lg">
443
+ <div class="flex items-start">
444
+ <div class="flex-shrink-0 bg-blue-500 bg-opacity-20 p-2 rounded-full">
445
+ <i class="fas fa-shield-alt text-blue-400"></i>
446
+ </div>
447
+ <div class="ml-3">
448
+ <h4 class="text-sm font-medium">Security Settings</h4>
449
+ <p class="text-xs text-gray-400 mt-1">Configure firewall and access control</p>
450
+ </div>
451
+ </div>
452
+ <div class="mt-3">
453
+ <div class="flex items-center mb-2">
454
+ <input id="firewallToggle" type="checkbox" class="h-4 w-4 text-fractal-primary focus:ring-fractal-primary border-gray-600 rounded" checked>
455
+ <label for="firewallToggle" class="ml-2 block text-xs text-gray-300">Enable Firewall Protection</label>
456
+ </div>
457
+ <div class="flex items-center mb-2">
458
+ <input id="ipRestrictToggle" type="checkbox" class="h-4 w-4 text-fractal-primary focus:ring-fractal-primary border-gray-600 rounded">
459
+ <label for="ipRestrictToggle" class="ml-2 block text-xs text-gray-300">Restrict by IP Address</label>
460
+ </div>
461
+ <div class="mt-2">
462
+ <label class="block text-xs font-medium text-gray-400 mb-1">Allowed IPs (comma separated)</label>
463
+ <input type="text" id="allowedIPs" class="bg-gray-700 border border-gray-600 text-white text-xs rounded-md focus:ring-fractal-primary focus:border-fractal-primary block w-full p-2" placeholder="192.168.1.1, 10.0.0.5">
464
+ </div>
465
+ </div>
466
+ </div>
467
+
468
+ <div class="bg-gray-800 p-4 rounded-lg">
469
+ <div class="flex items-start">
470
+ <div class="flex-shrink-0 bg-yellow-500 bg-opacity-20 p-2 rounded-full">
471
+ <i class="fas fa-sd-card text-yellow-400"></i>
472
+ </div>
473
+ <div class="ml-3">
474
+ <h4 class="text-sm font-medium">Storage Capacity</h4>
475
+ <p class="text-xs text-gray-400 mt-1">SD Card mining storage</p>
476
+ </div>
477
+ </div>
478
+ <div class="mt-3">
479
+ <div class="storage-capacity">
480
+ <div class="storage-used" style="width: 65%"></div>
481
+ </div>
482
+ <div class="flex justify-between text-xs text-gray-400 mt-1">
483
+ <span>32.5 GB used</span>
484
+ <span>50 GB total</span>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+
495
+ <!-- Wallet Addresses & Workers -->
496
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
497
+ <div class="bg-gray-800 rounded-lg shadow overflow-hidden">
498
+ <div class="px-6 py-4 border-b border-gray-700 flex justify-between items-center">
499
+ <h2 class="text-lg font-semibold">Wallet Addresses</h2>
500
+ <button id="addWalletAddress" class="text-xs bg-fractal-primary hover:bg-fractal-dark text-white px-3 py-1 rounded-md">
501
+ <i class="fas fa-plus mr-1"></i> Add Address
502
+ </button>
503
+ </div>
504
+ <div class="divide-y divide-gray-700" id="walletAddresses">
505
+ <!-- Address 1 -->
506
+ <div class="address-row px-6 py-4">
507
+ <div class="flex items-center">
508
+ <div class="flex-shrink-0 bg-fractal-primary bg-opacity-20 p-2 rounded-full">
509
+ <i class="fas fa-wallet text-fractal-primary"></i>
510
+ </div>
511
+ <div class="ml-3 flex-grow">
512
+ <input type="text" value="FB1q3azkahp4tl72hflssdfz2rp3h383erjyj848ny" class="bg-gray-700 p-2 rounded-md text-xs font-mono w-full mb-2" placeholder="FB Address">
513
+ <input type="text" value="fractalminer" class="bg-gray-700 p-2 rounded-md text-xs w-full mb-2" placeholder="Pool Username">
514
+ <div class="flex items-center">
515
+ <span class="text-xs text-gray-400 mr-2">Payout %:</span>
516
+ <input type="number" min="0" max="100" value="100" class="bg-gray-700 p-1 rounded-md text-xs w-16 text-center">
517
+ <span class="text-xs text-gray-400 ml-1">%</span>
518
+ <button class="ml-auto text-red-400 hover:text-red-300 text-xs">
519
+ <i class="fas fa-trash-alt"></i> Remove
520
+ </button>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ </div>
526
+ <div class="px-6 py-4 bg-gray-700">
527
+ <button id="saveWalletAddresses" class="gradient-fractal text-white text-sm px-3 py-1.5 rounded-md font-medium w-full">
528
+ Save Wallet Configuration
529
+ </button>
530
+ </div>
531
+ </div>
532
+
533
+ <div class="bg-gray-800 rounded-lg shadow overflow-hidden">
534
+ <div class="px-6 py-4 border-b border-gray-700">
535
+ <h2 class="text-lg font-semibold">Your Worker</h2>
536
+ </div>
537
+ <div class="divide-y divide-gray-700">
538
+ <div class="px-6 py-4">
539
+ <div class="flex items-center">
540
+ <div class="flex-shrink-0">
541
+ <div class="relative">
542
+ <div class="absolute top-0 right-0 -mt-1 -mr-1 flex h-3 w-3">
543
+ <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
544
+ <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
545
+ </div>
546
+ <div class="bg-gray-700 p-2 rounded-full">
547
+ <i class="fas fa-server text-green-400"></i>
548
+ </div>
549
+ </div>
550
+ </div>
551
+ <div class="ml-3">
552
+ <p class="text-sm font-medium">Primary Miner</p>
553
+ <p class="text-xs text-gray-400 mt-1">Last active: Just now</p>
554
+ <div class="difficulty-indicator mt-1 relative">
555
+ <div class="difficulty-marker" style="left: 30%;"></div>
556
+ </div>
557
+ <p class="text-xs text-gray-400 mt-1">Current difficulty: Medium</p>
558
+ </div>
559
+ <div class="ml-auto">
560
+ <div class="text-sm font-mono fractal-hashrate">1.24 TH/s</div>
561
+ <div class="text-sm font-mono bch-hashrate hidden">2.56 TH/s</div>
562
+ <div class="text-xs text-gray-400 mt-1">Efficiency: 98%</div>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ </div>
568
+ </div>
569
+
570
+ <!-- Block Tracking & Earnings -->
571
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
572
+ <!-- Current Block Tracking -->
573
+ <div class="bg-gray-800 rounded-lg shadow overflow-hidden">
574
+ <div class="px-6 py-4 border-b border-gray-700">
575
+ <h2 class="text-lg font-semibold">Current Block Tracking</h2>
576
+ </div>
577
+ <div class="p-6">
578
+ <div class="grid grid-cols-3 gap-4 mb-4">
579
+ <div class="bg-gray-700 p-3 rounded-lg">
580
+ <p class="text-gray-400 text-sm">Block Height</p>
581
+ <p class="text-xl font-mono fractal-block">792,451</p>
582
+ <p class="text-xl font-mono bch-block hidden">840,127</p>
583
+ </div>
584
+ <div class="bg-gray-700 p-3 rounded-lg">
585
+ <p class="text-gray-400 text-sm">Shares Found</p>
586
+ <p class="text-xl font-mono">1,284</p>
587
+ </div>
588
+ <div class="bg-gray-700 p-3 rounded-lg">
589
+ <p class="text-gray-400 text-sm">Efficiency</p>
590
+ <p class="text-xl font-mono">98.7%</p>
591
+ </div>
592
+ </div>
593
+
594
+ <div class="mb-4">
595
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
596
+ <span>Block Progress</span>
597
+ <span class="fractal-progress-text">84% complete</span>
598
+ <span class="bch-progress-text hidden">72% complete</span>
599
+ </div>
600
+ <div class="w-full bg-gray-600 rounded-full h-2.5">
601
+ <div class="gradient-fractal h-2.5 rounded-full fractal-progress" style="width: 84%"></div>
602
+ <div class="gradient-bch h-2.5 rounded-full bch-progress hidden" style="width: 72%"></div>
603
+ </div>
604
+ <div class="flex justify-between text-xs text-gray-400 mt-1">
605
+ <span>Estimated completion</span>
606
+ <span class="countdown-timer">12:45 min remaining</span>
607
+ </div>
608
+ </div>
609
+
610
+ <div>
611
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
612
+ <span>Next Block Difficulty</span>
613
+ <span class="fractal-difficulty">+8.5% increase</span>
614
+ <span class="bch-difficulty hidden">+5.2% increase</span>
615
+ </div>
616
+ <div class="w-full bg-gray-600 rounded-full h-2.5">
617
+ <div class="gradient-fractal h-2.5 rounded-full fractal-difficulty-bar" style="width: 65%"></div>
618
+ <div class="gradient-bch h-2.5 rounded-full bch-difficulty-bar hidden" style="width: 55%"></div>
619
+ </div>
620
+ <div class="flex justify-between text-xs text-gray-400 mt-1">
621
+ <span>Based on 1 miner</span>
622
+ <span class="fractal-block-time">Avg block time: 15.2 min</span>
623
+ <span class="bch-block-time hidden">Avg block time: 10.5 min</span>
624
+ </div>
625
+ </div>
626
+ </div>
627
+ </div>
628
+
629
+ <!-- Earnings Chart -->
630
+ <div class="bg-gray-800 rounded-lg shadow overflow-hidden">
631
+ <div class="px-6 py-4 border-b border-gray-700">
632
+ <h2 class="text-lg font-semibold">Earnings Overview</h2>
633
+ </div>
634
+ <div class="p-6">
635
+ <div class="h-64 mb-4">
636
+ <canvas id="earningsChart"></canvas>
637
+ </div>
638
+
639
+ <div class="grid grid-cols-2 gap-4">
640
+ <div class="bg-gray-700 p-3 rounded-lg">
641
+ <p class="text-gray-400 text-sm">Estimated Payout</p>
642
+ <p class="text-xl font-mono fractal-payout">0.0128 FB</p>
643
+ <p class="text-xl font-mono bch-payout hidden">0.0114 BCH</p>
644
+ <p class="text-xs text-gray-400 mt-1 fractal-usd">≈ $3.78 USD</p>
645
+ <p class="text-xs text-gray-400 mt-1 bch-usd hidden">≈ $3.42 USD</p>
646
+ </div>
647
+ <div class="bg-gray-700 p-3 rounded-lg">
648
+ <p class="text-gray-400 text-sm">Next Payout In</p>
649
+ <p class="text-xl font-mono countdown-timer">12:45 min</p>
650
+ <p class="text-xs text-gray-400 mt-1 fractal-payout-info">Block 792,451</p>
651
+ <p class="text-xs text-gray-400 mt-1 bch-payout-info hidden">Block 840,127</p>
652
+ </div>
653
+ </div>
654
+
655
+ <div class="mt-4">
656
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
657
+ <span>Storage Usage</span>
658
+ <span>32.5/50 GB (65%)</span>
659
+ </div>
660
+ <div class="storage-capacity">
661
+ <div class="storage-used" style="width: 65%"></div>
662
+ </div>
663
+ </div>
664
+ </div>
665
+ </div>
666
+ </div>
667
+ </main>
668
+
669
+ <script>
670
+ // Initialize Chart.js
671
+ const ctx = document.getElementById('earningsChart').getContext('2d');
672
+ let earningsChart = new Chart(ctx, {
673
+ type: 'line',
674
+ data: {
675
+ labels: ['6h ago', '5h ago', '4h ago', '3h ago', '2h ago', '1h ago', 'Now'],
676
+ datasets: [
677
+ {
678
+ label: 'Fractal Bitcoin (FB)',
679
+ data: [0.0021, 0.0028, 0.0032, 0.0035, 0.0038, 0.0040, 0.0042],
680
+ borderColor: '#6D28D9',
681
+ backgroundColor: 'rgba(109, 40, 217, 0.1)',
682
+ borderWidth: 2,
683
+ tension: 0.3,
684
+ fill: true
685
+ },
686
+ {
687
+ label: 'Bitcoin Cash (BCH)',
688
+ data: [0.0018, 0.0023, 0.0027, 0.0030, 0.0033, 0.0036, 0.0038],
689
+ borderColor: '#8DC351',
690
+ backgroundColor: 'rgba(141, 195, 81, 0.1)',
691
+ borderWidth: 2,
692
+ tension: 0.3,
693
+ fill: true,
694
+ hidden: true
695
+ }
696
+ ]
697
+ },
698
+ options: {
699
+ responsive: true,
700
+ maintainAspectRatio: false,
701
+ plugins: {
702
+ legend: {
703
+ position: 'top',
704
+ labels: {
705
+ color: '#E5E7EB',
706
+ font: {
707
+ size: 12
708
+ }
709
+ }
710
+ },
711
+ tooltip: {
712
+ mode: 'index',
713
+ intersect: false,
714
+ backgroundColor: '#1F2937',
715
+ titleColor: '#E5E7EB',
716
+ bodyColor: '#D1D5DB',
717
+ borderColor: '#4B5563',
718
+ borderWidth: 1
719
+ }
720
+ },
721
+ scales: {
722
+ x: {
723
+ grid: {
724
+ color: '#374151'
725
+ },
726
+ ticks: {
727
+ color: '#9CA3AF'
728
+ }
729
+ },
730
+ y: {
731
+ grid: {
732
+ color: '#374151'
733
+ },
734
+ ticks: {
735
+ color: '#9CA3AF',
736
+ callback: function(value) {
737
+ return value + ' FB';
738
+ }
739
+ }
740
+ }
741
+ }
742
+ }
743
+ });
744
+
745
+ // Token selection functionality
746
+ const tokenOptions = document.querySelectorAll('.token-option');
747
+
748
+ tokenOptions.forEach(option => {
749
+ option.addEventListener('click', function() {
750
+ // Remove active class from all options
751
+ tokenOptions.forEach(opt => {
752
+ opt.classList.remove('active');
753
+ opt.classList.add('bg-gray-800');
754
+ opt.classList.remove('bg-gray-700');
755
+ });
756
+
757
+ // Add active class to clicked option
758
+ this.classList.add('active');
759
+ this.classList.remove('bg-gray-800');
760
+ this.classList.add('bg-gray-700');
761
+
762
+ const selectedToken = this.dataset.token;
763
+
764
+ // Update mining toggle button color
765
+ const miningToggle = document.getElementById('miningToggle');
766
+ if (selectedToken === 'fractal') {
767
+ miningToggle.classList.remove('gradient-bch');
768
+ miningToggle.classList.add('gradient-fractal');
769
+
770
+ // Update save config button
771
+ document.getElementById('saveConfig').classList.remove('gradient-bch');
772
+ document.getElementById('saveConfig').classList.add('gradient-fractal');
773
+
774
+ // Update wallet save button
775
+ document.getElementById('saveWalletAddresses').classList.remove('gradient-bch');
776
+ document.getElementById('saveWalletAddresses').classList.add('gradient-fractal');
777
+
778
+ // Update port open button
779
+ document.getElementById('openPortBtn').classList.remove('gradient-bch');
780
+ document.getElementById('openPortBtn').classList.add('gradient-fractal');
781
+
782
+ // Update pool address
783
+ document.getElementById('poolAddress').value = 'stratum+tcp://pool.fractalbitcoin.net';
784
+ } else {
785
+ miningToggle.classList.remove('gradient-fractal');
786
+ miningToggle.classList.add('gradient-bch');
787
+
788
+ // Update save config button
789
+ document.getElementById('saveConfig').classList.remove('gradient-fractal');
790
+ document.getElementById('saveConfig').classList.add('gradient-bch');
791
+
792
+ // Update wallet save button
793
+ document.getElementById('saveWalletAddresses').classList.remove('gradient-fractal');
794
+ document.getElementById('saveWalletAddresses').classList.add('gradient-bch');
795
+
796
+ // Update port open button
797
+ document.getElementById('openPortBtn').classList.remove('gradient-fractal');
798
+ document.getElementById('openPortBtn').classList.add('gradient-bch');
799
+
800
+ // Update pool address
801
+ document.getElementById('poolAddress').value = 'stratum+tcp://pool.bitcoincash.net';
802
+ }
803
+
804
+ // Toggle visibility of token-specific elements
805
+ document.querySelectorAll('.fractal-data').forEach(el => {
806
+ el.classList.toggle('hidden', selectedToken !== 'fractal');
807
+ });
808
+
809
+ document.querySelectorAll('.bch-data').forEach(el => {
810
+ el.classList.toggle('hidden', selectedToken !== 'bch');
811
+ });
812
+
813
+ // Update chart visibility
814
+ if (selectedToken === 'fractal') {
815
+ earningsChart.data.datasets[0].hidden = false;
816
+ earningsChart.data.datasets[1].hidden = true;
817
+ earningsChart.options.scales.y.ticks.callback = function(value) {
818
+ return value + ' FB';
819
+ };
820
+ } else {
821
+ earningsChart.data.datasets[0].hidden = true;
822
+ earningsChart.data.datasets[1].hidden = false;
823
+ earningsChart.options.scales.y.ticks.callback = function(value) {
824
+ return value + ' BCH';
825
+ };
826
+ }
827
+ earningsChart.update();
828
+ });
829
+ });
830
+
831
+ // Mining toggle functionality
832
+ const miningToggle = document.getElementById('miningToggle');
833
+ let isMining = true;
834
+
835
+ miningToggle.addEventListener('click', function() {
836
+ isMining = !isMining;
837
+
838
+ if (isMining) {
839
+ miningToggle.innerHTML = '<i class="fas fa-power-off mr-2"></i> Mining Active';
840
+
841
+ // Show mining animation
842
+ document.querySelector('.mining-animation').classList.remove('bg-gray-600');
843
+ document.querySelector('.mining-animation').classList.add('bg-gray-700');
844
+
845
+ // Update status indicator
846
+ document.querySelector('.mining-animation .relative .flex').innerHTML = `
847
+ <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
848
+ <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
849
+ `;
850
+ } else {
851
+ miningToggle.innerHTML = '<i class="fas fa-power-off mr-2"></i> Start Mining';
852
+
853
+ // Hide mining animation
854
+ document.querySelector('.mining-animation').classList.remove('bg-gray-700');
855
+ document.querySelector('.mining-animation').classList.add('bg-gray-600');
856
+
857
+ // Update status indicator
858
+ document.querySelector('.mining-animation .relative .flex').innerHTML = `
859
+ <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
860
+ `;
861
+ }
862
+ });
863
+
864
+ // Simulate hashrate fluctuations and difficulty adjustments
865
+ let currentDifficulty = 0.5; // 0-1 scale
866
+ let nextBlockDifficulty = 0.6;
867
+ let blockCompletion = 84;
868
+ let remainingTime = 12 * 60 + 45; // 12 minutes 45 seconds in seconds
869
+
870
+ // Countdown timer function
871
+ function updateCountdown() {
872
+ if (isMining && blockCompletion < 100) {
873
+ remainingTime--;
874
+
875
+ if (remainingTime <= 0) {
876
+ // Block completed, reset for next block
877
+ blockCompletion = 0;
878
+ remainingTime = Math.floor(15 * 60 * (1 + Math.random() * 0.2 - 0.1)); // Random block time around 15 minutes
879
+
880
+ // Switch to next block's difficulty
881
+ currentDifficulty = nextBlockDifficulty;
882
+ // Calculate new difficulty for next block based on miners and block time
883
+ const minerCount = 1; // From active workers
884
+ const avgBlockTime = 15.2; // In minutes
885
+ const difficultyAdjustment = (minerCount / 3) * (15 / avgBlockTime);
886
+ nextBlockDifficulty = Math.min(1, Math.max(0, currentDifficulty * difficultyAdjustment * (1 + Math.random() * 0.1 - 0.05)));
887
+ }
888
+
889
+ // Update block completion
890
+ blockCompletion = 100 - (remainingTime / (15 * 60)) * 100;
891
+ document.querySelectorAll('.fractal-progress').forEach(el => {
892
+ el.style.width = `${blockCompletion}%`;
893
+ });
894
+ document.querySelectorAll('.bch-progress').forEach(el => {
895
+ el.style.width = `${blockCompletion * 0.85}%`;
896
+ });
897
+
898
+ document.querySelectorAll('.countdown-timer').forEach(el => {
899
+ el.textContent = `≈ ${Math.floor(remainingTime / 60)}:${(remainingTime % 60).toString().padStart(2, '0')} min remaining`;
900
+ });
901
+
902
+ // Update progress text
903
+ document.querySelectorAll('.fractal-progress-text').forEach(el => {
904
+ el.textContent = `${Math.floor(blockCompletion)}% complete`;
905
+ });
906
+ document.querySelectorAll('.bch-progress-text').forEach(el => {
907
+ el.textContent = `${Math.floor(blockCompletion * 0.85)}% complete`;
908
+ });
909
+
910
+ // Update next block difficulty indicator
911
+ const nextDifficultyPos = Math.floor(nextBlockDifficulty * 100);
912
+ document.querySelectorAll('.fractal-difficulty-bar').forEach(el => {
913
+ el.style.width = `${nextDifficultyPos}%`;
914
+ });
915
+ document.querySelectorAll('.bch-difficulty-bar').forEach(el => {
916
+ el.style.width = `${nextDifficultyPos * 0.85}%`;
917
+ });
918
+
919
+ // Update difficulty text
920
+ const difficultyChange = (nextBlockDifficulty - currentDifficulty) / currentDifficulty * 100;
921
+ document.querySelectorAll('.fractal-difficulty').forEach(el => {
922
+ el.textContent = `${difficultyChange > 0 ? '+' : ''}${difficultyChange.toFixed(1)}%`;
923
+ });
924
+ document.querySelectorAll('.bch-difficulty').forEach(el => {
925
+ el.textContent = `${(difficultyChange * 0.6 > 0 ? '+' : '')}${(difficultyChange * 0.6).toFixed(1)}%`;
926
+ });
927
+ }
928
+ }
929
+
930
+ setInterval(updateCountdown, 1000);
931
+
932
+ setInterval(() => {
933
+ if (isMining) {
934
+ // Update mining stats
935
+ const stats = document.querySelectorAll('.mining-animation .font-mono');
936
+ const currentHashrate = parseFloat(stats[0].textContent);
937
+ const newHashrate = (currentHashrate + (Math.random() * 0.2 - 0.1)).toFixed(2);
938
+
939
+ // Update FB hashrate
940
+ document.querySelectorAll('.fractal-hashrate').forEach(el => {
941
+ if (el.textContent.includes('TH/s')) {
942
+ el.textContent = `${Math.max(0.8, newHashrate)} TH/s`;
943
+ } else if (el.textContent.includes('FB')) {
944
+ const estimatedPayout = (0.0001 * currentHashrate * (1 + blockCompletion / 100)).toFixed(4);
945
+ el.textContent = `${estimatedPayout} FB`;
946
+ // Update USD equivalent
947
+ const usdEquivalent = (parseFloat(estimatedPayout) * 295).toFixed(2); // Assuming $295/FB
948
+ if (el.nextElementSibling && el.nextElementSibling.classList.contains('fractal-usd')) {
949
+ el.nextElementSibling.textContent = `≈ $${usdEquivalent} USD`;
950
+ }
951
+ }
952
+ });
953
+
954
+ // Update BCH hashrate
955
+ document.querySelectorAll('.bch-hashrate').forEach(el => {
956
+ if (el.textContent.includes('TH/s')) {
957
+ el.textContent = `${Math.max(1.6, newHashrate * 2.1)} TH/s`;
958
+ } else if (el.textContent.includes('BCH')) {
959
+ const estimatedPayout = (0.00009 * currentHashrate * 2.1 * (1 + blockCompletion / 100)).toFixed(4);
960
+ el.textContent = `${estimatedPayout} BCH`;
961
+ // Update USD equivalent
962
+ const usdEquivalent = (parseFloat(estimatedPayout) * 300).toFixed(2); // Assuming $300/BCH
963
+ if (el.nextElementSibling && el.nextElementSibling.classList.contains('bch-usd')) {
964
+ el.nextElementSibling.textContent = `≈ $${usdEquivalent} USD`;
965
+ }
966
+ }
967
+ });
968
+
969
+ // Update shares found (more active when closer to block completion)
970
+ const currentShares = parseInt(stats[1].textContent.replace(/,/g, ''));
971
+ const shareIncrease = Math.floor(5 + (blockCompletion / 100) * 20 * Math.random());
972
+ stats[1].textContent = (currentShares + shareIncrease).toLocaleString();
973
+
974
+ const currentEfficiency = parseFloat(stats[2].textContent);
975
+ const newEfficiency = (currentEfficiency + (Math.random() * 1 - 0.5)).toFixed(1);
976
+ stats[2].textContent = `${Math.max(95, newEfficiency)}%`;
977
+
978
+ // Update workers' hashrate
979
+ const workers = document.querySelectorAll('.bg-gray-800 .font-mono');
980
+ workers.forEach(worker => {
981
+ if (worker.textContent.includes('TH/s')) {
982
+ const current = parseFloat(worker.textContent);
983
+ const newRate = (current + (Math.random() * 0.05 - 0.025)).toFixed(2);
984
+ worker.textContent = `${Math.max(0.2, newRate)} TH/s`;
985
+ }
986
+ });
987
+
988
+ // Update difficulty indicators
989
+ const difficultyMarkers = document.querySelectorAll('.difficulty-marker');
990
+ difficultyMarkers.forEach(marker => {
991
+ const newPos = Math.min(100, Math.max(0, (currentDifficulty * 100) + (Math.random() * 10 - 5)));
992
+ marker.style.left = `${newPos}%`;
993
+
994
+ // Update difficulty text
995
+ const difficultyText = marker.closest('.flex.items-center').querySelector('.text-xs.text-gray-400');
996
+ if (newPos < 33) {
997
+ difficultyText.textContent = 'Current difficulty: Low';
998
+ } else if (newPos < 66) {
999
+ difficultyText.textContent = 'Current difficulty: Medium';
1000
+ } else {
1001
+ difficultyText.textContent = 'Current difficulty: High';
1002
+ }
1003
+ });
1004
+
1005
+ // Update block numbers
1006
+ document.querySelectorAll('.fractal-block').forEach(el => {
1007
+ const currentBlock = parseInt(el.textContent.replace(/,/g, ''));
1008
+ if (blockCompletion >= 100) {
1009
+ el.textContent = (currentBlock + 1).toLocaleString();
1010
+ }
1011
+ });
1012
+
1013
+ document.querySelectorAll('.bch-block').forEach(el => {
1014
+ const currentBlock = parseInt(el.textContent.replace(/,/g, ''));
1015
+ if (blockCompletion >= 100) {
1016
+ el.textContent = (currentBlock + 1).toLocaleString();
1017
+ }
1018
+ });
1019
+
1020
+ // Update payout amounts
1021
+ document.querySelectorAll('.fractal-payout').forEach(el => {
1022
+ const currentPayout = parseFloat(el.textContent);
1023
+ const newPayout = (currentPayout + (Math.random() * 0.001 - 0.0005)).toFixed(4);
1024
+ el.textContent = `${Math.max(0.01, newPayout)} FB`;
1025
+ });
1026
+
1027
+ document.querySelectorAll('.bch-payout').forEach(el => {
1028
+ const currentPayout = parseFloat(el.textContent);
1029
+ const newPayout = (currentPayout + (Math.random() * 0.0009 - 0.00045)).toFixed(4);
1030
+ el.textContent = `${Math.max(0.01, newPayout)} BCH`;
1031
+ });
1032
+
1033
+ // Update earnings chart with new data point
1034
+ if (blockCompletion >= 100) {
1035
+ const chartData = earningsChart.data.datasets[0].data;
1036
+ const bchChartData = earningsChart.data.datasets[1].data;
1037
+
1038
+ // Remove first element and add new one at the end
1039
+ chartData.shift();
1040
+ bchChartData.shift();
1041
+
1042
+ // Add new random value based on current hashrate
1043
+ const fbValue = parseFloat(document.querySelector('.fractal-earnings').textContent);
1044
+ const bchValue = parseFloat(document.querySelector('.bch-earnings').textContent);
1045
+
1046
+ chartData.push(fbValue);
1047
+ bchChartData.push(bchValue);
1048
+
1049
+ earningsChart.update();
1050
+ }
1051
+ }
1052
+ }, 3000);
1053
+
1054
+ // Wallet address management
1055
+ const addWalletAddress = document.getElementById('addWalletAddress');
1056
+ const walletAddresses = document.getElementById('walletAddresses');
1057
+ const saveWalletAddresses = document.getElementById('saveWalletAddresses');
1058
+
1059
+ addWalletAddress.addEventListener('click', function() {
1060
+ // Check if we already have 3 addresses
1061
+ if (document.querySelectorAll('.address-row').length >= 3) {
1062
+ alert('Maximum of 3 wallet addresses allowed');
1063
+ return;
1064
+ }
1065
+
1066
+ const newAddress = document.createElement('div');
1067
+ newAddress.className = 'address-row px-6 py-4';
1068
+
1069
+ const selectedToken = document.querySelector('.token-option.active').dataset.token;
1070
+ const placeholder = selectedToken === 'fractal' ? 'FB Address' : 'BCH Address';
1071
+ const prefix = selectedToken === 'fractal' ? 'FB' : 'BCH';
1072
+
1073
+ newAddress.innerHTML = `
1074
+ <div class="flex items-center">
1075
+ <div class="flex-shrink-0 bg-${selectedToken}-primary bg-opacity-20 p-2 rounded-full">
1076
+ <i class="fas fa-wallet text-${selectedToken}-primary"></i>
1077
+ </div>
1078
+ <div class="ml-3 flex-grow">
1079
+ <input type="text" placeholder="${placeholder}" class="bg-gray-700 p-2 rounded-md text-xs font-mono w-full mb-2">
1080
+ <input type="text" placeholder="Pool Username" class="bg-gray-700 p-2 rounded-md text-xs w-full mb-2">
1081
+ <div class="flex items-center">
1082
+ <span class="text-xs text-gray-400 mr-2">Payout %:</span>
1083
+ <input type="number" min="0" max="100" value="0" class="bg-gray-700 p-1 rounded-md text-xs w-16 text-center">
1084
+ <span class="text-xs text-gray-400 ml-1">%</span>
1085
+ <button class="ml-auto text-red-400 hover:text-red-300 text-xs remove-address">
1086
+ <i class="fas fa-trash-alt"></i> Remove
1087
+ </button>
1088
+ </div>
1089
+ </div>
1090
+ </div>
1091
+ `;
1092
+ walletAddresses.appendChild(newAddress);
1093
+
1094
+ // Add event listener to the new remove button
1095
+ newAddress.querySelector('.remove-address').addEventListener('click', function() {
1096
+ walletAddresses.removeChild(newAddress);
1097
+ });
1098
+ });
1099
+
1100
+ // Add event listeners to existing remove buttons
1101
+ document.querySelectorAll('.address-row button').forEach(button => {
1102
+ if (button.textContent.includes('Remove')) {
1103
+ button.addEventListener('click', function() {
1104
+ walletAddresses.removeChild(button.closest('.address-row'));
1105
+ });
1106
+ }
1107
+ });
1108
+
1109
+ saveWalletAddresses.addEventListener('click', function() {
1110
+ const addresses = [];
1111
+ let totalPercentage = 0;
1112
+
1113
+ document.querySelectorAll('.address-row').forEach(row => {
1114
+ const address = row.querySelector('input[type="text"]').value;
1115
+ const username = row.querySelectorAll('input[type="text"]')[1].value;
1116
+ const percentage = parseInt(row.querySelector('input[type="number"]').value);
1117
+
1118
+ if (address) {
1119
+ addresses.push({ address, username, percentage });
1120
+ totalPercentage += percentage;
1121
+ }
1122
+ });
1123
+
1124
+ if (addresses.length === 0) {
1125
+ alert('Please add at least one wallet address');
1126
+ return;
1127
+ }
1128
+
1129
+ if (totalPercentage !== 100) {
1130
+ alert('Total payout percentage must equal 100%');
1131
+ return;
1132
+ }
1133
+
1134
+ const selectedToken = document.querySelector('.token-option.active').dataset.token;
1135
+ const tokenName = selectedToken === 'fractal' ? 'Fractal Bitcoin (FB)' : 'Bitcoin Cash (BCH)';
1136
+
1137
+ alert(`${tokenName} wallet addresses and payout percentages saved successfully!\n\nPayout distribution:\n` +
1138
+ addresses.map(a => `${a.address} (${a.username}): ${a.percentage}%`).join('\n'));
1139
+ // In a real app, you would send this to your backend
1140
+ });
1141
+
1142
+ // Port opening functionality
1143
+ const openPortBtn = document.getElementById('openPortBtn');
1144
+ const portToggle = document.getElementById('portToggle');
1145
+ const miningPort = document.getElementById('miningPort');
1146
+
1147
+ openPortBtn.addEventListener('click', function() {
1148
+ if (!portToggle.checked) {
1149
+ alert('Please enable port forwarding first');
1150
+ return;
1151
+ }
1152
+
1153
+ const port = parseInt(miningPort.value);
1154
+ if (isNaN(port) || port < 1 || port > 65535) {
1155
+ alert('Please enter a valid port number (1-65535)');
1156
+ return;
1157
+ }
1158
+
1159
+ // Simulate port opening (in a real app, this would make an API call)
1160
+ 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`);
1161
+
1162
+ // Update UI to show port is open
1163
+ openPortBtn.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Port Open';
1164
+ openPortBtn.classList.remove('gradient-fractal', 'gradient-bch');
1165
+ openPortBtn.classList.add('bg-green-600');
1166
+
1167
+ // Disable the button for 5 seconds to simulate the operation
1168
+ openPortBtn.disabled = true;
1169
+ setTimeout(() => {
1170
+ openPortBtn.disabled = false;
1171
+ }, 5000);
1172
+ });
1173
+
1174
+ // Save configuration
1175
+ const saveConfig = document.getElementById('saveConfig');
1176
+
1177
+ saveConfig.addEventListener('click', function() {
1178
+ const poolAddress = document.getElementById('poolAddress').value;
1179
+ const poolPort = document.getElementById('poolPort').value;
1180
+ const username = document.getElementById('minerUsername').value;
1181
+
1182
+ if (!poolAddress || !poolPort || !username) {
1183
+ alert('Please fill in all required fields');
1184
+ return;
1185
+ }
1186
+
1187
+ const selectedToken = document.querySelector('.token-option.active').dataset.token;
1188
+ const tokenName = selectedToken === 'fractal' ? 'Fractal Bitcoin' : 'Bitcoin Cash';
1189
+
1190
+ alert(`${tokenName} 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.`);
1191
+
1192
+ // Update UI to show success
1193
+ saveConfig.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Configuration Saved';
1194
+ saveConfig.classList.remove('gradient-fractal', 'gradient-bch');
1195
+ saveConfig.classList.add('bg-green-600');
1196
+
1197
+ // Reset button after 3 seconds
1198
+ setTimeout(() => {
1199
+ saveConfig.innerHTML = 'Save Configuration';
1200
+ saveConfig.classList.remove('bg-green-600');
1201
+ const selectedToken = document.querySelector('.token-option.active').dataset.token;
1202
+ saveConfig.classList.add(selectedToken === 'fractal' ? 'gradient-fractal' : 'gradient-bch');
1203
+ }, 3000);
1204
+ });
1205
+ </script>
1206
+ <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/privatemnr-fb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1207
+ </html>