Hugging Face's logo

Spaces:
privateuserh
/
strm-vbeta1-01
Running

App Files Community
privateuserh commited on
Commit
e39aaec
·
verified ·
1 Parent(s): 8637095

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1388 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privstrm0 01pa
3
- emoji: 🏃
4
- colorFrom: green
5
- colorTo: red
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: privstrm0-01pa
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
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,1388 @@
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, maximum-scale=1.0, user-scalable=no">
6
+ <title>Music Stream Mine - Earn STRM Tokens</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
+ <style>
10
+ ::-webkit-scrollbar {
11
+ width: 4px;
12
+ }
13
+ ::-webkit-scrollbar-track {
14
+ background: #f1f1f1;
15
+ }
16
+ ::-webkit-scrollbar-thumb {
17
+ background: #10b981;
18
+ border-radius: 3px;
19
+ }
20
+ ::-webkit-scrollbar-thumb:hover {
21
+ background: #0d9f6e;
22
+ }
23
+
24
+ .music-card:hover {
25
+ transform: translateY(-2px);
26
+ }
27
+
28
+ .strm-bg { background-color: #10b981; }
29
+
30
+ * {
31
+ -webkit-user-select: none;
32
+ -moz-user-select: none;
33
+ -ms-user-select: none;
34
+ user-select: none;
35
+ }
36
+
37
+ @keyframes fadeIn {
38
+ from { opacity: 0; transform: translateY(10px); }
39
+ to { opacity: 1; transform: translateY(0); }
40
+ }
41
+
42
+ .explainer-animate {
43
+ animation: fadeIn 0.3s ease-out forwards;
44
+ }
45
+
46
+ .percentage-up {
47
+ color: #10b981;
48
+ }
49
+
50
+ .percentage-down {
51
+ color: #ef4444;
52
+ }
53
+
54
+ .percentage-neutral {
55
+ color: #6b7280;
56
+ }
57
+
58
+ .sentiment-positive {
59
+ background-color: rgba(16, 185, 129, 0.1);
60
+ border-left: 3px solid #10b981;
61
+ }
62
+
63
+ .sentiment-negative {
64
+ background-color: rgba(239, 68, 68, 0.1);
65
+ border-left: 3px solid #ef4444;
66
+ }
67
+
68
+ .sentiment-neutral {
69
+ background-color: rgba(156, 163, 175, 0.1);
70
+ border-left: 3px solid #9ca3af;
71
+ }
72
+
73
+ .sentiment-slider::-webkit-slider-thumb {
74
+ -webkit-appearance: none;
75
+ appearance: none;
76
+ width: 20px;
77
+ height: 20px;
78
+ border-radius: 50%;
79
+ cursor: pointer;
80
+ }
81
+
82
+ .sentiment-slider.positive::-webkit-slider-thumb {
83
+ background: #10b981;
84
+ }
85
+
86
+ .sentiment-slider.negative::-webkit-slider-thumb {
87
+ background: #ef4444;
88
+ }
89
+
90
+ .sentiment-slider.neutral::-webkit-slider-thumb {
91
+ background: #6b7280;
92
+ }
93
+
94
+ /* Floating button styles */
95
+ .floating-btn {
96
+ position: fixed;
97
+ bottom: 80px;
98
+ right: 20px;
99
+ width: 50px;
100
+ height: 50px;
101
+ border-radius: 50%;
102
+ background-color: #10b981;
103
+ color: white;
104
+ display: flex;
105
+ align-items: center;
106
+ justify-content: center;
107
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
108
+ z-index: 40;
109
+ cursor: pointer;
110
+ transition: all 0.3s ease;
111
+ }
112
+
113
+ .floating-btn:hover {
114
+ transform: scale(1.1);
115
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
116
+ }
117
+
118
+ /* Legend modal styles */
119
+ .legend-item {
120
+ display: flex;
121
+ align-items: center;
122
+ margin-bottom: 12px;
123
+ }
124
+
125
+ .legend-icon {
126
+ width: 24px;
127
+ height: 24px;
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ margin-right: 12px;
132
+ flex-shrink: 0;
133
+ }
134
+
135
+ .verified-badge {
136
+ display: inline-flex;
137
+ align-items: center;
138
+ background-color: #10b981;
139
+ color: white;
140
+ padding: 2px 6px;
141
+ border-radius: 10px;
142
+ font-size: 10px;
143
+ margin-left: 5px;
144
+ }
145
+
146
+ .mining-animation {
147
+ animation: pulse 2s infinite;
148
+ }
149
+
150
+ @keyframes pulse {
151
+ 0% { transform: scale(1); }
152
+ 50% { transform: scale(1.05); }
153
+ 100% { transform: scale(1); }
154
+ }
155
+
156
+ /* Mining difficulty adjustment */
157
+ .mining-difficulty {
158
+ position: absolute;
159
+ bottom: 10px;
160
+ left: 10px;
161
+ font-size: 10px;
162
+ color: #6b7280;
163
+ }
164
+ </style>
165
+ </head>
166
+ <body class="bg-gray-50 font-sans text-gray-800">
167
+ <!-- App Container -->
168
+ <div class="max-w-md mx-auto bg-white min-h-screen flex flex-col">
169
+ <!-- Header -->
170
+ <header class="strm-bg p-4 shadow-sm">
171
+ <div class="flex items-center justify-between">
172
+ <h1 class="text-white text-xl font-bold">Music Stream Mine</h1>
173
+ <div class="flex items-center space-x-3">
174
+ <button class="text-white" id="explainerBtn">
175
+ <i class="fas fa-info-circle"></i>
176
+ </button>
177
+ <button class="text-white" id="strmBalanceBtn">
178
+ <span id="strmBalanceDisplay">0 STRM</span>
179
+ </button>
180
+ </div>
181
+ </div>
182
+ </header>
183
+
184
+ <!-- Main Content Area -->
185
+ <main class="flex-1 overflow-y-auto p-4" id="mainContent">
186
+ <!-- Home Tab Content -->
187
+ <div id="homeTab">
188
+ <div class="mb-6">
189
+ <h2 class="text-lg font-semibold mb-4">Music Streaming Pools</h2>
190
+
191
+ <div class="grid grid-cols-1 gap-4" id="streamingPoolsContainer">
192
+ <!-- Cards will be dynamically inserted here -->
193
+ </div>
194
+ </div>
195
+
196
+ <div class="mt-6">
197
+ <div class="flex items-center justify-between mb-4">
198
+ <h2 class="text-lg font-semibold">Your Staked Pools</h2>
199
+ <button id="stakeInfoBtn" class="text-xs text-strm-bg font-medium flex items-center">
200
+ <i class="fas fa-question-circle mr-1"></i> How mining works
201
+ </button>
202
+ </div>
203
+ <div class="space-y-3" id="stakedPoolsContainer">
204
+ <!-- Staked pools will appear here -->
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Search Tab Content (hidden by default) -->
210
+ <div id="searchTab" class="hidden">
211
+ <div class="mb-4">
212
+ <div class="relative">
213
+ <input type="text" id="poolSearchInput" placeholder="Search music streaming pools..."
214
+ class="w-full py-3 px-4 rounded-lg bg-gray-100 focus:outline-none focus:ring-2 focus:ring-strm-bg">
215
+ <button id="searchPoolBtn" class="absolute right-3 top-3 text-gray-500 hover:text-strm-bg">
216
+ <i class="fas fa-search"></i>
217
+ </button>
218
+ </div>
219
+ </div>
220
+
221
+ <div class="grid grid-cols-1 gap-4" id="searchResultsContainer">
222
+ <!-- Search results will appear here -->
223
+ </div>
224
+ </div>
225
+ </main>
226
+
227
+ <!-- Bottom Navigation -->
228
+ <nav class="bg-white border-t border-gray-200 p-2">
229
+ <div class="flex justify-around">
230
+ <button class="tab-button active flex flex-col items-center text-strm-bg" data-tab="homeTab">
231
+ <i class="fas fa-home text-lg"></i>
232
+ <span class="text-xs mt-1">Home</span>
233
+ </button>
234
+
235
+ <button class="tab-button flex flex-col items-center text-gray-500" data-tab="searchTab">
236
+ <i class="fas fa-search text-lg"></i>
237
+ <span class="text-xs mt-1">Search</span>
238
+ </button>
239
+
240
+ <button class="flex flex-col items-center text-gray-500" id="addPoolBtn">
241
+ <i class="fas fa-plus-circle text-lg"></i>
242
+ <span class="text-xs mt-1">Add</span>
243
+ </button>
244
+ </div>
245
+ </nav>
246
+
247
+ <!-- Floating Mining Button -->
248
+ <div class="floating-btn mining-animation" id="miningBtn">
249
+ <i class="fas fa-digging"></i>
250
+ <div class="mining-difficulty">D: 1.0</div>
251
+ </div>
252
+
253
+ <!-- Add Pool Modal (hidden by default) -->
254
+ <div id="addPoolModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
255
+ <div class="bg-white rounded-lg w-full max-w-md mx-4">
256
+ <div class="p-4 border-b border-gray-200">
257
+ <h3 class="font-semibold text-lg">Add New Streaming Pool</h3>
258
+ </div>
259
+
260
+ <div class="p-4">
261
+ <div class="mb-4">
262
+ <label class="block text-sm font-medium text-gray-700 mb-1">Artist/Playlist</label>
263
+ <input type="text" id="newPoolName" placeholder="Artist or playlist name"
264
+ class="w-full py-2 px-4 rounded-lg bg-gray-100 focus:outline-none focus:ring-2 focus:ring-strm-bg">
265
+ </div>
266
+
267
+ <div class="mb-4">
268
+ <label class="block text-sm font-medium text-gray-700 mb-1">Music Category</label>
269
+ <div class="grid grid-cols-2 gap-2">
270
+ <button class="platform-btn bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm" data-platform="pop">
271
+ <i class="fas fa-music mr-1 text-purple-500"></i> Pop
272
+ </button>
273
+ <button class="platform-btn bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm" data-platform="rock">
274
+ <i class="fas fa-guitar mr-1 text-yellow-500"></i> Rock
275
+ </button>
276
+ <button class="platform-btn bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm" data-platform="electronic">
277
+ <i class="fas fa-sliders-h mr-1 text-blue-500"></i> Electronic
278
+ </button>
279
+ <button class="platform-btn bg-gray-200 text-gray-700 py-2 px-3 rounded text-sm" data-platform="classical">
280
+ <i class="fas fa-viola mr-1 text-green-500"></i> Classical
281
+ </button>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <div class="p-4 border-t border-gray-200 flex justify-end space-x-3">
287
+ <button id="cancelAddPool" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700">
288
+ Cancel
289
+ </button>
290
+ <button id="savePool" class="px-4 py-2 strm-bg text-white rounded-md text-sm font-medium">
291
+ Create Pool
292
+ </button>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- STRM Token Modal (hidden by default) -->
298
+ <div id="strmModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
299
+ <div class="bg-white rounded-lg w-full max-w-md mx-4">
300
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
301
+ <h3 class="font-semibold text-lg">STRM Token</h3>
302
+ <span class="verified-badge">
303
+ <i class="fas fa-check-circle mr-1"></i> Verified
304
+ </span>
305
+ </div>
306
+
307
+ <div class="p-4">
308
+ <div class="flex items-center mb-4">
309
+ <div class="w-12 h-12 rounded-full strm-bg text-white flex items-center justify-center mr-3">
310
+ <i class="fas fa-music text-xl"></i>
311
+ </div>
312
+ <div>
313
+ <h4 class="font-medium">Bitcoin Cash CHIP Protocol</h4>
314
+ <p class="text-sm text-gray-500">Mining Pool: 5,000,000 STRM</p>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="mb-4">
319
+ <p class="text-sm text-gray-700 mb-3">
320
+ STRM is a private cryptocurrency token on the Bitcoin Cash network using the CHIP protocol.
321
+ Mine STRM tokens by staking to music streaming pools. Total supply: 5,000,000 STRM.
322
+ </p>
323
+
324
+ <div class="space-y-2">
325
+ <a href="https://tokenexplorer.cash/?tokenId=8874186362dd0510af5e26c4321c2a335f7089cfc1a70fcd9e4efb63a49d2a76" target="_blank" class="flex items-center text-blue-500 text-sm">
326
+ <i class="fas fa-external-link-alt mr-2"></i> View on Token Explorer
327
+ </a>
328
+ <a href="https://app.cauldron.quest/swap/8874186362dd0510af5e26c4321c2a335f7089cfc1a70fcd9e4efb63a49d2a76" target="_blank" class="flex items-center text-blue-500 text-sm">
329
+ <i class="fas fa-exchange-alt mr-2"></i> Swap on Cauldron
330
+ </a>
331
+ <a href="https://blockchair.com/bitcoin-cash/transaction/8874186362dd0510af5e26c4321c2a335f7089cfc1a70fcd9e4efb63a49d2a76" target="_blank" class="flex items-center text-blue-500 text-sm">
332
+ <i class="fas fa-link mr-2"></i> View Transaction
333
+ </a>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="bg-gray-100 rounded-lg p-3 mb-4">
338
+ <h4 class="font-medium text-sm mb-2">Your STRM Balance</h4>
339
+ <div class="flex justify-between items-center">
340
+ <span class="font-medium" id="strmBalance">0 STRM</span>
341
+ <button id="addStrmBtn" class="text-sm text-strm-bg font-medium">
342
+ <i class="fas fa-plus-circle mr-1"></i> Add STRM
343
+ </button>
344
+ </div>
345
+ </div>
346
+
347
+ <div class="bg-gray-100 rounded-lg p-3">
348
+ <h4 class="font-medium text-sm mb-2">Stake STRM to Pool</h4>
349
+ <div class="mb-2">
350
+ <select id="poolSelect" class="w-full p-2 rounded border border-gray-300 text-sm">
351
+ <option value="">-- Select a pool --</option>
352
+ </select>
353
+ </div>
354
+ <div class="mb-2">
355
+ <input type="number" id="stakeAmount" placeholder="STRM amount" class="w-full p-2 rounded border border-gray-300 text-sm">
356
+ </div>
357
+ <button id="stakeBtn" class="w-full py-2 strm-bg text-white rounded-lg text-sm font-medium">
358
+ Stake & Start Mining
359
+ </button>
360
+ </div>
361
+ </div>
362
+
363
+ <div class="p-4 border-t border-gray-200 flex justify-center">
364
+ <button id="closeStrmModal" class="px-4 py-2 strm-bg text-white rounded-md text-sm font-medium">
365
+ Close
366
+ </button>
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+ <!-- Explainer Modal (hidden by default) -->
372
+ <div id="explainerModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
373
+ <div class="bg-white rounded-lg w-full max-w-md mx-4 explainer-animate">
374
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
375
+ <h3 class="font-semibold text-lg">Music Stream Mining</h3>
376
+ <button id="closeExplainerModal" class="text-gray-500 hover:text-strm-bg">
377
+ <i class="fas fa-times"></i>
378
+ </button>
379
+ </div>
380
+
381
+ <div class="p-4 overflow-y-auto max-h-[70vh]">
382
+ <div class="mb-6">
383
+ <div class="flex items-start mb-4">
384
+ <div class="w-10 h-10 rounded-full strm-bg text-white flex items-center justify-center mr-3 flex-shrink-0">
385
+ <i class="fas fa-chart-pie"></i>
386
+ </div>
387
+ <div>
388
+ <h4 class="font-medium mb-1">Bitcoin Cash Mining Algorithm</h4>
389
+ <p class="text-sm text-gray-700">
390
+ Our mining algorithm is based on Bitcoin Cash's SHA-256 proof-of-work with difficulty adjustment.
391
+ The total supply is capped at 5,000,000 STRM tokens with halving every 4 years.
392
+ </p>
393
+ </div>
394
+ </div>
395
+
396
+ <div class="flex items-start mb-4">
397
+ <div class="w-10 h-10 rounded-full strm-bg text-white flex items-center justify-center mr-3 flex-shrink-0">
398
+ <i class="fas fa-percentage"></i>
399
+ </div>
400
+ <div>
401
+ <h4 class="font-medium mb-1">Mining Difficulty</h4>
402
+ <p class="text-sm text-gray-700">
403
+ Mining difficulty adjusts every 2016 blocks (approx. 2 weeks) to maintain a consistent block time.
404
+ Current difficulty is displayed on the mining button.
405
+ </p>
406
+ </div>
407
+ </div>
408
+
409
+ <div class="flex items-start mb-4">
410
+ <div class="w-10 h-10 rounded-full strm-bg text-white flex items-center justify-center mr-3 flex-shrink-0">
411
+ <i class="fas fa-tags"></i>
412
+ </div>
413
+ <div>
414
+ <h4 class="font-medium mb-1">Music Categories</h4>
415
+ <p class="text-sm text-gray-700">
416
+ We track four main music categories: Pop, Rock, Electronic, and Classical.
417
+ Each pool is classified into one of these categories for mining calculation.
418
+ </p>
419
+ </div>
420
+ </div>
421
+
422
+ <div class="flex items-start mb-4">
423
+ <div class="w-10 h-10 rounded-full strm-bg text-white flex items-center justify-center mr-3 flex-shrink-0">
424
+ <i class="fas fa-coins"></i>
425
+ </div>
426
+ <div>
427
+ <h4 class="font-medium mb-1">Mining Rewards</h4>
428
+ <p class="text-sm text-gray-700">
429
+ Current block reward is 6.25 STRM per block. The more you stake and the more streams
430
+ the pool gets, the higher your share of the rewards. Rewards are distributed daily.
431
+ </p>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="bg-blue-50 border border-blue-100 rounded-lg p-3">
436
+ <div class="flex">
437
+ <div class="text-blue-500 mr-2">
438
+ <i class="fas fa-lightbulb"></i>
439
+ </div>
440
+ <p class="text-sm text-blue-800">
441
+ <strong>Pro Tip:</strong> Look for emerging artists with small but rapidly increasing streams.
442
+ These often provide the best mining opportunities with lower difficulty.
443
+ </p>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="p-4 border-t border-gray-200 flex justify-center">
450
+ <button id="closeExplainerBtn" class="px-4 py-2 strm-bg text-white rounded-md text-sm font-medium">
451
+ Got It!
452
+ </button>
453
+ </div>
454
+ </div>
455
+ </div>
456
+
457
+ <!-- Mining Modal (hidden by default) -->
458
+ <div id="miningModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
459
+ <div class="bg-white rounded-lg w-full max-w-md mx-4">
460
+ <div class="p-4 border-b border-gray-200">
461
+ <h3 class="font-semibold text-lg">Mining Status</h3>
462
+ </div>
463
+
464
+ <div class="p-4">
465
+ <div class="flex flex-col items-center mb-4">
466
+ <div class="w-20 h-20 rounded-full strm-bg text-white flex items-center justify-center mb-4">
467
+ <i class="fas fa-digging text-3xl"></i>
468
+ </div>
469
+ <h4 class="font-medium mb-2" id="miningPoolName">Pop Hits 2023</h4>
470
+ <p class="text-sm text-gray-600 mb-4">Currently mining STRM tokens</p>
471
+
472
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4">
473
+ <div class="bg-strm-bg h-2.5 rounded-full" style="width: 45%"></div>
474
+ </div>
475
+
476
+ <div class="grid grid-cols-3 gap-4 w-full text-center mb-4">
477
+ <div>
478
+ <p class="text-sm text-gray-500">Staked</p>
479
+ <p class="font-medium" id="miningStaked">500 STRM</p>
480
+ </div>
481
+ <div>
482
+ <p class="text-sm text-gray-500">Earned</p>
483
+ <p class="font-medium" id="miningEarned">1.5 STRM</p>
484
+ </div>
485
+ <div>
486
+ <p class="text-sm text-gray-500">Difficulty</p>
487
+ <p class="font-medium" id="miningDifficulty">1.0</p>
488
+ </div>
489
+ </div>
490
+
491
+ <div class="w-full bg-gray-100 rounded-lg p-3 text-center">
492
+ <p class="text-xs text-gray-600 mb-1">Estimated Hashrate: <span id="miningHashrate">12.5 TH/s</span></p>
493
+ <p class="text-xs text-gray-600">Next Difficulty Adjustment: <span id="nextDifficulty">2016 blocks</span></p>
494
+ </div>
495
+ </div>
496
+ </div>
497
+
498
+ <div class="p-4 border-t border-gray-200 flex justify-end space-x-3">
499
+ <button id="stopMiningBtn" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700">
500
+ Stop Mining
501
+ </button>
502
+ <button id="claimMiningBtn" class="px-4 py-2 strm-bg text-white rounded-md text-sm font-medium">
503
+ Claim Rewards
504
+ </button>
505
+ </div>
506
+ </div>
507
+ </div>
508
+
509
+ <!-- Toast Notification (hidden by default) -->
510
+ <div id="toast" class="fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-md shadow-lg hidden z-50">
511
+ <div class="flex items-center">
512
+ <span id="toastMessage">Pool created successfully</span>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <script>
518
+ // Music categories and sample data (removed hip hop)
519
+ const musicCategories = {
520
+ pop: {
521
+ name: "Pop",
522
+ icon: '<i class="fas fa-music text-purple-500"></i>',
523
+ color: 'bg-purple-500',
524
+ totalStreams: 25000000,
525
+ pools: [
526
+ { name: "Pop Hits 2023", currentStreams: 6000000, previousStreams: 5500000, sentiment: 0 },
527
+ { name: "Top 40 Global", currentStreams: 5000000, previousStreams: 4800000, sentiment: 0 },
528
+ { name: "Taylor Swift Radio", currentStreams: 3000000, previousStreams: 2800000, sentiment: 0 },
529
+ { name: "Weekend Party Mix", currentStreams: 2000000, previousStreams: 1900000, sentiment: 0 }
530
+ ]
531
+ },
532
+ rock: {
533
+ name: "Rock",
534
+ icon: '<i class="fas fa-guitar text-yellow-500"></i>',
535
+ color: 'bg-yellow-500',
536
+ totalStreams: 12000000,
537
+ pools: [
538
+ { name: "Classic Rock", currentStreams: 4000000, previousStreams: 4100000, sentiment: 0 },
539
+ { name: "Alternative Rock", currentStreams: 3000000, previousStreams: 2900000, sentiment: 0 },
540
+ { name: "Metal Essentials", currentStreams: 2000000, previousStreams: 2100000, sentiment: 0 },
541
+ { name: "Indie Rock", currentStreams: 1500000, previousStreams: 1400000, sentiment: 0 }
542
+ ]
543
+ },
544
+ electronic: {
545
+ name: "Electronic",
546
+ icon: '<i class="fas fa-sliders-h text-blue-500"></i>',
547
+ color: 'bg-blue-500',
548
+ totalStreams: 15000000,
549
+ pools: [
550
+ { name: "EDM Bangers", currentStreams: 4000000, previousStreams: 3800000, sentiment: 0 },
551
+ { name: "Deep House", currentStreams: 3000000, previousStreams: 2900000, sentiment: 0 },
552
+ { name: "Techno Workout", currentStreams: 2500000, previousStreams: 2400000, sentiment: 0 },
553
+ { name: "Drum & Bass", currentStreams: 2000000, previousStreams: 2100000, sentiment: 0 }
554
+ ]
555
+ },
556
+ classical: {
557
+ name: "Classical",
558
+ icon: '<i class="fas fa-viola text-green-500"></i>',
559
+ color: 'bg-green-500',
560
+ totalStreams: 8000000,
561
+ pools: [
562
+ { name: "Mozart Essentials", currentStreams: 2000000, previousStreams: 2100000, sentiment: 0 },
563
+ { name: "Piano Relaxation", currentStreams: 1500000, previousStreams: 1400000, sentiment: 0 },
564
+ { name: "Opera Highlights", currentStreams: 1200000, previousStreams: 1300000, sentiment: 0 },
565
+ { name: "Film Scores", currentStreams: 1000000, previousStreams: 900000, sentiment: 0 }
566
+ ]
567
+ }
568
+ };
569
+
570
+ // Calculate total streams across all categories
571
+ const totalAllStreams = Object.values(musicCategories).reduce((total, category) => total + category.totalStreams, 0);
572
+
573
+ // Bitcoin Cash mining parameters
574
+ const miningParams = {
575
+ totalSupply: 5000000, // 5 million STRM total supply
576
+ currentSupply: 0, // Start with 0 mined
577
+ blockReward: 6.25, // Initial block reward (halves every 4 years)
578
+ blocksUntilHalving: 210000, // Halving every ~4 years (BCH halving schedule)
579
+ difficulty: 1.0, // Initial difficulty
580
+ blocksUntilDifficultyAdjustment: 2016, // Adjust every 2016 blocks (BCH schedule)
581
+ blockTimeTarget: 600, // 10 minute target block time (same as BCH)
582
+ lastBlockTime: Date.now(), // Timestamp of last block
583
+ hashrate: 0 // Current network hashrate
584
+ };
585
+
586
+ // User data
587
+ let userData = {
588
+ strmBalance: 5000,
589
+ stakedPools: [
590
+ {
591
+ name: "Pop Hits 2023",
592
+ platform: "pop",
593
+ hasStrm: true,
594
+ stakedAmount: 1000,
595
+ sentiment: 0,
596
+ earned: 3.2,
597
+ mining: true,
598
+ hashrate: 12.5 // TH/s
599
+ },
600
+ {
601
+ name: "EDM Bangers",
602
+ platform: "electronic",
603
+ hasStrm: true,
604
+ stakedAmount: 500,
605
+ sentiment: 0,
606
+ earned: 1.5,
607
+ mining: true,
608
+ hashrate: 6.25 // TH/s
609
+ }
610
+ ]
611
+ };
612
+
613
+ // Current pool being mined
614
+ let currentMiningPool = null;
615
+ let miningInterval = null;
616
+
617
+ // Function to calculate market share percentage with sentiment adjustment
618
+ function calculateMarketShare(poolName) {
619
+ // Find the pool in our categories
620
+ let poolData = null;
621
+ let category = null;
622
+
623
+ for (const [cat, data] of Object.entries(musicCategories)) {
624
+ const foundPool = data.pools.find(p => p.name === poolName);
625
+ if (foundPool) {
626
+ poolData = foundPool;
627
+ category = cat;
628
+ break;
629
+ }
630
+ }
631
+
632
+ // If pool not found in predefined data, check user staked pools
633
+ if (!poolData || !category) {
634
+ const stakedPool = userData.stakedPools.find(p => p.name === poolName);
635
+ if (stakedPool) {
636
+ category = stakedPool.platform;
637
+ // Create a zero entry with sentiment from staked pool
638
+ return {
639
+ percentage: 0,
640
+ change: 0,
641
+ category: category,
642
+ sentiment: stakedPool.sentiment || 0
643
+ };
644
+ }
645
+
646
+ // Default to pop for new pools
647
+ return {
648
+ percentage: 0,
649
+ change: 0,
650
+ category: "pop",
651
+ sentiment: 0
652
+ };
653
+ }
654
+
655
+ // Calculate percentage of category streams
656
+ const categoryPercentage = (poolData.currentStreams / musicCategories[category].totalStreams) * 100;
657
+
658
+ // Calculate percentage of all music streams
659
+ const globalPercentage = (poolData.currentStreams / totalAllStreams) * 100;
660
+
661
+ // Calculate raw percentage change from previous period
662
+ const rawChange = poolData.previousStreams > 0
663
+ ? ((poolData.currentStreams - poolData.previousStreams) / poolData.previousStreams) * 100
664
+ : poolData.currentStreams > 0 ? 100 : 0;
665
+
666
+ // Apply sentiment adjustment (0-100 scale mapped to 0.5-1.5 multiplier)
667
+ const sentimentMultiplier = 1 + (poolData.sentiment / 200); // Maps -100 to 0.5, 0 to 1, 100 to 1.5
668
+ const adjustedChange = rawChange * sentimentMultiplier;
669
+
670
+ return {
671
+ percentage: globalPercentage.toFixed(2),
672
+ change: adjustedChange.toFixed(2),
673
+ rawChange: rawChange.toFixed(2),
674
+ category: category,
675
+ sentiment: poolData.sentiment || 0
676
+ };
677
+ }
678
+
679
+ // Function to get percentage change class
680
+ function getPercentageClass(change) {
681
+ const numChange = parseFloat(change);
682
+ if (numChange > 0) return 'percentage-up';
683
+ if (numChange < 0) return 'percentage-down';
684
+ return 'percentage-neutral';
685
+ }
686
+
687
+ // Function to get sentiment class
688
+ function getSentimentClass(sentiment) {
689
+ const numSentiment = parseInt(sentiment);
690
+ if (numSentiment > 20) return 'sentiment-positive';
691
+ if (numSentiment < -20) return 'sentiment-negative';
692
+ return 'sentiment-neutral';
693
+ }
694
+
695
+ // Function to get sentiment label
696
+ function getSentimentLabel(sentiment) {
697
+ const numSentiment = parseInt(sentiment);
698
+ if (numSentiment > 20) return 'Positive';
699
+ if (numSentiment < -20) return 'Negative';
700
+ return 'Neutral';
701
+ }
702
+
703
+ // Function to generate platform icon
704
+ function getPlatformIcon(platform) {
705
+ const icons = {
706
+ pop: '<i class="fas fa-music text-purple-500"></i>',
707
+ rock: '<i class="fas fa-guitar text-yellow-500"></i>',
708
+ electronic: '<i class="fas fa-sliders-h text-blue-500"></i>',
709
+ classical: '<i class="fas fa-viola text-green-500"></i>'
710
+ };
711
+ return icons[platform] || '<i class="fas fa-music"></i>';
712
+ }
713
+
714
+ // Function to render streaming pools
715
+ function renderStreamingPools() {
716
+ const container = document.getElementById('streamingPoolsContainer');
717
+ container.innerHTML = '';
718
+
719
+ // Get all pools from all categories
720
+ const allPools = [];
721
+ Object.values(musicCategories).forEach(category => {
722
+ category.pools.forEach(pool => {
723
+ allPools.push({
724
+ ...pool,
725
+ category: category.name.toLowerCase()
726
+ });
727
+ });
728
+ });
729
+
730
+ // Sort by current streams (descending)
731
+ allPools.sort((a, b) => b.currentStreams - a.currentStreams);
732
+
733
+ // Take top 8 pools
734
+ const topPools = allPools.slice(0, 8);
735
+
736
+ topPools.forEach(item => {
737
+ const marketShare = calculateMarketShare(item.name);
738
+ const percentageClass = getPercentageClass(marketShare.change);
739
+ const sentimentClass = getSentimentClass(marketShare.sentiment);
740
+
741
+ const card = document.createElement('div');
742
+ card.className = `music-card bg-white rounded-lg shadow-sm p-4 h-40 flex flex-col justify-between transition cursor-pointer ${sentimentClass}`;
743
+ card.innerHTML = `
744
+ <div class="flex items-start justify-between mb-2">
745
+ <div>
746
+ <span class="inline-flex items-center bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">
747
+ ${getPlatformIcon(item.category)}
748
+ <span class="ml-1">${item.name}</span>
749
+ </span>
750
+ </div>
751
+ <span class="inline-flex items-center bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">
752
+ <i class="fas fa-chart-line ${percentageClass} mr-1"></i>
753
+ ${marketShare.percentage}%
754
+ <span class="ml-1 ${percentageClass}">(${marketShare.change > 0 ? '+' : ''}${marketShare.change}%)</span>
755
+ </span>
756
+ </div>
757
+ <div class="flex justify-between items-center mb-3">
758
+ <span class="text-xs text-gray-500">${item.currentStreams.toLocaleString()} streams</span>
759
+ <span class="text-xs px-2 py-1 rounded-full ${musicCategories[item.category].color} text-white">
760
+ ${musicCategories[item.category].name}
761
+ </span>
762
+ </div>
763
+ <div class="flex justify-between items-center text-xs text-gray-500">
764
+ <span>
765
+ <span class="${getSentimentClass(marketShare.sentiment).replace('sentiment-', 'text-')}">
766
+ <i class="fas ${marketShare.sentiment > 20 ? 'fa-smile' : marketShare.sentiment < -20 ? 'fa-frown' : 'fa-meh'}"></i>
767
+ ${getSentimentLabel(marketShare.sentiment)}
768
+ </span>
769
+ </span>
770
+ <button class="stake-pool-btn text-gray-400 hover:text-strm-bg" data-pool="${item.name}" data-platform="${item.category}">
771
+ <i class="fas fa-coins"></i> Stake
772
+ </button>
773
+ </div>
774
+ `;
775
+ container.appendChild(card);
776
+
777
+ // Add click event to open mining modal
778
+ card.addEventListener('click', function() {
779
+ openMiningModal(item.name, item.category);
780
+ });
781
+ });
782
+
783
+ // Add event listeners to stake buttons
784
+ document.querySelectorAll('.stake-pool-btn').forEach(btn => {
785
+ btn.addEventListener('click', function(e) {
786
+ e.stopPropagation();
787
+ const poolName = this.getAttribute('data-pool');
788
+ const platform = this.getAttribute('data-platform');
789
+ stakePool(poolName, platform);
790
+ });
791
+ });
792
+ }
793
+
794
+ // Function to render staked pools
795
+ function renderStakedPools() {
796
+ const container = document.getElementById('stakedPoolsContainer');
797
+ container.innerHTML = '';
798
+
799
+ // Update select dropdown
800
+ const poolSelect = document.getElementById('poolSelect');
801
+ poolSelect.innerHTML = '<option value="">-- Select a pool --</option>';
802
+
803
+ userData.stakedPools.forEach(pool => {
804
+ const marketShare = calculateMarketShare(pool.name);
805
+ const percentageClass = getPercentageClass(marketShare.change);
806
+ const sentimentClass = getSentimentClass(pool.sentiment);
807
+
808
+ const element = document.createElement('div');
809
+ element.className = `flex items-center p-3 rounded-lg bg-white shadow-sm cursor-pointer hover:bg-gray-50 ${sentimentClass}`;
810
+ element.innerHTML = `
811
+ <div class="flex-shrink-0 mr-3">
812
+ <div class="w-8 h-8 rounded-full flex items-center justify-center text-white ${musicCategories[pool.platform].color}">
813
+ ${getPlatformIcon(pool.platform)}
814
+ </div>
815
+ </div>
816
+ <div class="flex-1">
817
+ <div class="flex items-center">
818
+ <h4 class="font-medium text-sm">${pool.name}</h4>
819
+ ${pool.hasStrm ? '<span class="ml-1 text-green-500"><i class="fas fa-check-circle"></i></span>' : ''}
820
+ ${pool.mining ? '<span class="ml-1 text-green-500"><i class="fas fa-digging"></i></span>' : ''}
821
+ </div>
822
+ <div class="flex items-center">
823
+ <p class="text-gray-500 text-xs mr-2">${musicCategories[pool.platform].name}</p>
824
+ <span class="text-xs ${percentageClass}">
825
+ ${marketShare.percentage}% (${marketShare.change > 0 ? '+' : ''}${marketShare.change}%)
826
+ </span>
827
+ </div>
828
+ </div>
829
+ <div class="text-right">
830
+ <p class="text-xs font-medium">${pool.stakedAmount} STRM</p>
831
+ <p class="text-xs text-green-500">+${pool.earned} STRM</p>
832
+ </div>
833
+ `;
834
+ container.appendChild(element);
835
+
836
+ // Add to select dropdown
837
+ const option = document.createElement('option');
838
+ option.value = pool.name;
839
+ option.textContent = pool.name;
840
+ poolSelect.appendChild(option);
841
+
842
+ // Add click event to open mining modal
843
+ element.addEventListener('click', function() {
844
+ openMiningModal(pool.name, pool.platform);
845
+ });
846
+ });
847
+
848
+ // Update STRM balance display
849
+ document.getElementById('strmBalance').textContent = userData.strmBalance + ' STRM';
850
+ document.getElementById('strmBalanceDisplay').textContent = userData.strmBalance + ' STRM';
851
+
852
+ // Update mining difficulty display
853
+ document.querySelector('.mining-difficulty').textContent = `D: ${miningParams.difficulty.toFixed(1)}`;
854
+ }
855
+
856
+ // Function to open mining modal
857
+ function openMiningModal(poolName, platform) {
858
+ currentMiningPool = poolName;
859
+
860
+ // Find the pool data
861
+ let poolData = null;
862
+ for (const category of Object.values(musicCategories)) {
863
+ const foundPool = category.pools.find(p => p.name === poolName);
864
+ if (foundPool) {
865
+ poolData = foundPool;
866
+ break;
867
+ }
868
+ }
869
+
870
+ // If not found in categories, check staked pools
871
+ if (!poolData) {
872
+ const stakedPool = userData.stakedPools.find(p => p.name === poolName);
873
+ if (stakedPool) {
874
+ poolData = stakedPool;
875
+ }
876
+ }
877
+
878
+ // Set modal content
879
+ document.getElementById('miningPoolName').textContent = poolName;
880
+ document.getElementById('miningStaked').textContent = poolData?.stakedAmount + ' STRM';
881
+ document.getElementById('miningEarned').textContent = poolData?.earned + ' STRM';
882
+ document.getElementById('miningDifficulty').textContent = miningParams.difficulty.toFixed(1);
883
+ document.getElementById('miningHashrate').textContent = poolData?.hashrate ? poolData.hashrate + ' TH/s' : '0 TH/s';
884
+ document.getElementById('nextDifficulty').textContent = miningParams.blocksUntilDifficultyAdjustment + ' blocks';
885
+
886
+ // Show modal
887
+ document.getElementById('miningModal').classList.remove('hidden');
888
+ }
889
+
890
+ // Function to show search results
891
+ function showSearchResults(query) {
892
+ const container = document.getElementById('searchResultsContainer');
893
+ container.innerHTML = '';
894
+
895
+ if (!query) return;
896
+
897
+ // Simulate search with timeout
898
+ setTimeout(() => {
899
+ // Search across all categories
900
+ const results = [];
901
+ const queryLower = query.toLowerCase();
902
+
903
+ // First check exact matches
904
+ Object.values(musicCategories).forEach(category => {
905
+ category.pools.forEach(pool => {
906
+ if (pool.name.toLowerCase().includes(queryLower)) {
907
+ results.push({
908
+ ...pool,
909
+ platform: category.name.toLowerCase()
910
+ });
911
+ }
912
+ });
913
+ });
914
+
915
+ // If no exact matches, check category names
916
+ if (results.length === 0) {
917
+ Object.entries(musicCategories).forEach(([key, category]) => {
918
+ if (category.name.toLowerCase().includes(queryLower)) {
919
+ results.push(...category.pools.slice(0, 3).map(p => ({
920
+ ...p,
921
+ platform: key
922
+ })));
923
+ }
924
+ });
925
+ }
926
+
927
+ // If still no results, create a new "pop" pool
928
+ if (results.length === 0) {
929
+ const newPool = {
930
+ name: query.charAt(0).toUpperCase() + query.slice(1),
931
+ currentStreams: 10000, // Default small number for new pools
932
+ previousStreams: 0,
933
+ platform: "pop",
934
+ sentiment: 0
935
+ };
936
+ results.push(newPool);
937
+
938
+ // Add to pop category
939
+ musicCategories.pop.pools.push(newPool);
940
+ musicCategories.pop.totalStreams += newPool.currentStreams;
941
+ }
942
+
943
+ // Display results
944
+ results.forEach(item => {
945
+ const marketShare = calculateMarketShare(item.name);
946
+ const percentageClass = getPercentageClass(marketShare.change);
947
+ const sentimentClass = getSentimentClass(marketShare.sentiment);
948
+
949
+ const card = document.createElement('div');
950
+ card.className = `music-card bg-white rounded-lg shadow-sm p-4 h-40 flex flex-col justify-between transition cursor-pointer ${sentimentClass}`;
951
+ card.innerHTML = `
952
+ <div class="flex items-start justify-between mb-2">
953
+ <div>
954
+ <span class="inline-flex items-center bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">
955
+ ${getPlatformIcon(item.platform)}
956
+ <span class="ml-1">${item.name}</span>
957
+ </span>
958
+ </div>
959
+ <span class="inline-flex items-center bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">
960
+ <i class="fas fa-chart-line ${percentageClass} mr-1"></i>
961
+ ${marketShare.percentage}%
962
+ <span class="ml-1 ${percentageClass}">(${marketShare.change > 0 ? '+' : ''}${marketShare.change}%)</span>
963
+ </span>
964
+ </div>
965
+ <div class="flex justify-between items-center mb-3">
966
+ <span class="text-xs text-gray-500">${item.currentStreams.toLocaleString()} streams</span>
967
+ <span class="text-xs px-2 py-1 rounded-full ${musicCategories[item.platform].color} text-white">
968
+ ${musicCategories[item.platform].name}
969
+ </span>
970
+ </div>
971
+ <div class="flex justify-between items-center text-xs text-gray-500">
972
+ <span>
973
+ <span class="${getSentimentClass(marketShare.sentiment).replace('sentiment-', 'text-')}">
974
+ <i class="fas ${marketShare.sentiment > 20 ? 'fa-smile' : marketShare.sentiment < -20 ? 'fa-frown' : 'fa-meh'}"></i>
975
+ ${getSentimentLabel(marketShare.sentiment)}
976
+ </span>
977
+ </span>
978
+ <button class="stake-pool-btn text-gray-400 hover:text-strm-bg" data-pool="${item.name}" data-platform="${item.platform}">
979
+ <i class="fas fa-coins"></i> Stake
980
+ </button>
981
+ </div>
982
+ `;
983
+ container.appendChild(card);
984
+
985
+ // Add click event to open mining modal
986
+ card.addEventListener('click', function() {
987
+ openMiningModal(item.name, item.platform);
988
+ });
989
+ });
990
+
991
+ // Add event listeners to stake buttons
992
+ document.querySelectorAll('.stake-pool-btn').forEach(btn => {
993
+ btn.addEventListener('click', function(e) {
994
+ e.stopPropagation();
995
+ const poolName = this.getAttribute('data-pool');
996
+ const platform = this.getAttribute('data-platform');
997
+ stakePool(poolName, platform);
998
+ });
999
+ });
1000
+
1001
+ showToast(`Found ${results.length} results for ${query}`);
1002
+ }, 1000);
1003
+ }
1004
+
1005
+ // Function to stake to a pool
1006
+ function stakePool(poolName, platform) {
1007
+ // Check if already staked
1008
+ if (userData.stakedPools.some(p => p.name === poolName)) {
1009
+ showToast('You already have STRM staked to this pool');
1010
+ return;
1011
+ }
1012
+
1013
+ // Add to staked pools
1014
+ userData.stakedPools.push({
1015
+ name: poolName,
1016
+ platform,
1017
+ hasStrm: true,
1018
+ stakedAmount: 0,
1019
+ sentiment: 0,
1020
+ earned: 0,
1021
+ mining: false,
1022
+ hashrate: 0
1023
+ });
1024
+
1025
+ // Update UI
1026
+ renderStakedPools();
1027
+ showToast(`${poolName} added to your staked pools`);
1028
+
1029
+ // Open STRM modal to stake tokens
1030
+ document.getElementById('strmModal').classList.remove('hidden');
1031
+ document.getElementById('poolSelect').value = poolName;
1032
+ }
1033
+
1034
+ // Function to stake STRM to a pool
1035
+ function stakeStrm(poolName, amount) {
1036
+ if (!poolName || !amount || amount <= 0) {
1037
+ showToast('Please select a pool and enter a valid amount');
1038
+ return;
1039
+ }
1040
+
1041
+ if (amount > userData.strmBalance) {
1042
+ showToast('Insufficient STRM balance');
1043
+ return;
1044
+ }
1045
+
1046
+ // Update staked amount
1047
+ const pool = userData.stakedPools.find(p => p.name === poolName);
1048
+ if (pool) {
1049
+ pool.hasStrm = true;
1050
+ pool.stakedAmount = (pool.stakedAmount || 0) + amount;
1051
+ pool.mining = true;
1052
+ pool.hashrate = Math.sqrt(pool.stakedAmount) * 0.5; // Simple hashrate calculation based on stake
1053
+ userData.strmBalance -= amount;
1054
+
1055
+ // Start mining if not already running
1056
+ if (!miningInterval) {
1057
+ startMining();
1058
+ }
1059
+ }
1060
+
1061
+ // Update UI
1062
+ renderStakedPools();
1063
+ showToast(`Staked ${amount} STRM to ${poolName}`);
1064
+ }
1065
+
1066
+ // Function to start mining
1067
+ function startMining() {
1068
+ if (miningInterval) return;
1069
+
1070
+ miningInterval = setInterval(() => {
1071
+ // Calculate total network hashrate
1072
+ miningParams.hashrate = userData.stakedPools.reduce((sum, pool) => {
1073
+ return pool.mining ? sum + (pool.hashrate || 0) : sum;
1074
+ }, 0);
1075
+
1076
+ // Mine blocks with difficulty adjustment
1077
+ userData.stakedPools.forEach(pool => {
1078
+ if (pool.mining && pool.stakedAmount > 0) {
1079
+ // Calculate mining probability based on pool's share of total hashrate
1080
+ const poolShare = miningParams.hashrate > 0 ? (pool.hashrate / miningParams.hashrate) : 0;
1081
+
1082
+ // Calculate block reward with difficulty adjustment
1083
+ const blockReward = miningParams.blockReward * poolShare;
1084
+
1085
+ // Add reward to pool
1086
+ pool.earned = (pool.earned || 0) + blockReward;
1087
+ miningParams.currentSupply += blockReward;
1088
+
1089
+ // Decrease blocks until halving and difficulty adjustment
1090
+ miningParams.blocksUntilHalving = Math.max(0, miningParams.blocksUntilHalving - 1);
1091
+ miningParams.blocksUntilDifficultyAdjustment = Math.max(0, miningParams.blocksUntilDifficultyAdjustment - 1);
1092
+
1093
+ // Check for halving event
1094
+ if (miningParams.blocksUntilHalving === 0) {
1095
+ miningParams.blockReward /= 2;
1096
+ miningParams.blocksUntilHalving = 210000;
1097
+ showToast('Block reward halved! New reward: ' + miningParams.blockReward + ' STRM');
1098
+ }
1099
+
1100
+ // Check for difficulty adjustment
1101
+ if (miningParams.blocksUntilDifficultyAdjustment === 0) {
1102
+ // Simple difficulty adjustment based on block time (target is 10 minutes)
1103
+ const actualBlockTime = (Date.now() - miningParams.lastBlockTime) / 1000 / 60; // in minutes
1104
+ const adjustmentFactor = Math.min(4, Math.max(0.25, miningParams.blockTimeTarget / actualBlockTime));
1105
+ miningParams.difficulty *= adjustmentFactor;
1106
+ miningParams.blocksUntilDifficultyAdjustment = 2016;
1107
+
1108
+ showToast(`Difficulty adjusted to ${miningParams.difficulty.toFixed(1)}`);
1109
+ }
1110
+
1111
+ miningParams.lastBlockTime = Date.now();
1112
+ }
1113
+ });
1114
+
1115
+ // Update UI
1116
+ renderStakedPools();
1117
+ }, 10000); // Check every 10 seconds
1118
+ }
1119
+
1120
+ // Function to stop mining
1121
+ function stopMining() {
1122
+ if (miningInterval) {
1123
+ clearInterval(miningInterval);
1124
+ miningInterval = null;
1125
+ }
1126
+
1127
+ // Update all pools to not mining
1128
+ userData.stakedPools.forEach(pool => {
1129
+ pool.mining = false;
1130
+ });
1131
+
1132
+ // Update UI
1133
+ renderStakedPools();
1134
+ showToast('Mining stopped');
1135
+ }
1136
+
1137
+ // Function to add STRM tokens
1138
+ function addStrm(amount) {
1139
+ userData.strmBalance += amount;
1140
+ renderStakedPools();
1141
+ showToast(`Added ${amount} STRM to your balance`);
1142
+ }
1143
+
1144
+ // Function to claim mining rewards
1145
+ function claimRewards(poolName) {
1146
+ const pool = userData.stakedPools.find(p => p.name === poolName);
1147
+ if (pool && pool.earned > 0) {
1148
+ userData.strmBalance += pool.earned;
1149
+ const earned = pool.earned;
1150
+ pool.earned = 0;
1151
+
1152
+ // Update UI
1153
+ renderStakedPools();
1154
+ showToast(`Claimed ${earned} STRM from ${poolName}`);
1155
+ }
1156
+ }
1157
+
1158
+ // Initialize the app
1159
+ function initApp() {
1160
+ renderStreamingPools();
1161
+ renderStakedPools();
1162
+
1163
+ // Start mining automatically if user has staked pools
1164
+ if (userData.stakedPools.some(p => p.mining)) {
1165
+ startMining();
1166
+ }
1167
+
1168
+ // Simulate changing stream data every 30 seconds
1169
+ setInterval(() => {
1170
+ // Randomly adjust some pool data
1171
+ Object.values(musicCategories).forEach(category => {
1172
+ category.pools.forEach(pool => {
1173
+ // Base random change between -5% and +10%
1174
+ let changePercent = (Math.random() * 15) - 5;
1175
+
1176
+ // Apply sentiment multiplier (0-100 scale mapped to 0.5-1.5 multiplier)
1177
+ const sentimentMultiplier = 1 + (pool.sentiment / 200);
1178
+ changePercent *= sentimentMultiplier;
1179
+
1180
+ const change = Math.round(pool.currentStreams * (changePercent / 100));
1181
+
1182
+ pool.previousStreams = pool.currentStreams;
1183
+ pool.currentStreams = Math.max(1000, pool.currentStreams + change);
1184
+ });
1185
+
1186
+ // Update category totals
1187
+ category.totalStreams = category.pools.reduce((sum, pool) => sum + pool.currentStreams, 0);
1188
+ });
1189
+
1190
+ // Update UI
1191
+ renderStreamingPools();
1192
+ renderStakedPools();
1193
+ }, 30000);
1194
+ }
1195
+
1196
+ // Tab switching functionality
1197
+ document.querySelectorAll('.tab-button').forEach(button => {
1198
+ button.addEventListener('click', function() {
1199
+ // Remove active class from all buttons
1200
+ document.querySelectorAll('.tab-button').forEach(btn => {
1201
+ btn.classList.remove('active', 'text-strm-bg');
1202
+ btn.classList.add('text-gray-500');
1203
+ });
1204
+
1205
+ // Add active class to clicked button
1206
+ this.classList.add('active', 'text-strm-bg');
1207
+ this.classList.remove('text-gray-500');
1208
+
1209
+ // Hide all tabs
1210
+ document.querySelectorAll('#mainContent > div').forEach(tab => {
1211
+ tab.classList.add('hidden');
1212
+ });
1213
+
1214
+ // Show selected tab
1215
+ const tabId = this.getAttribute('data-tab');
1216
+ document.getElementById(tabId).classList.remove('hidden');
1217
+
1218
+ // Scroll to top when switching tabs
1219
+ document.getElementById('mainContent').scrollTo(0, 0);
1220
+
1221
+ // If switching to search tab, focus search input
1222
+ if (tabId === 'searchTab') {
1223
+ setTimeout(() => {
1224
+ document.getElementById('poolSearchInput').focus();
1225
+ }, 100);
1226
+ }
1227
+ });
1228
+ });
1229
+
1230
+ // Search pool functionality
1231
+ document.getElementById('searchPoolBtn').addEventListener('click', function() {
1232
+ const query = document.getElementById('poolSearchInput').value.trim();
1233
+ if (query) {
1234
+ showSearchResults(query);
1235
+ }
1236
+ });
1237
+
1238
+ document.getElementById('poolSearchInput').addEventListener('keypress', function(e) {
1239
+ if (e.key === 'Enter') {
1240
+ const query = this.value.trim();
1241
+ if (query) {
1242
+ showSearchResults(query);
1243
+ }
1244
+ }
1245
+ });
1246
+
1247
+ // Add pool button
1248
+ document.getElementById('addPoolBtn').addEventListener('click', function() {
1249
+ document.getElementById('addPoolModal').classList.remove('hidden');
1250
+ });
1251
+
1252
+ // Cancel add pool
1253
+ document.getElementById('cancelAddPool').addEventListener('click', function() {
1254
+ document.getElementById('addPoolModal').classList.add('hidden');
1255
+ });
1256
+
1257
+ // Save new pool
1258
+ document.getElementById('savePool').addEventListener('click', function() {
1259
+ const poolName = document.getElementById('newPoolName').value.trim();
1260
+ const platform = document.querySelector('.platform-btn.bg-strm-bg')?.getAttribute('data-platform');
1261
+
1262
+ if (!poolName || !platform) {
1263
+ showToast('Please enter a pool name and select a category');
1264
+ return;
1265
+ }
1266
+
1267
+ // Add to staked pools
1268
+ userData.stakedPools.push({
1269
+ name: poolName,
1270
+ platform,
1271
+ hasStrm: false,
1272
+ stakedAmount: 0,
1273
+ sentiment: 0,
1274
+ earned: 0,
1275
+ mining: false,
1276
+ hashrate: 0
1277
+ });
1278
+
1279
+ // Add to music category
1280
+ musicCategories[platform].pools.push({
1281
+ name: poolName,
1282
+ currentStreams: 10000,
1283
+ previousStreams: 0,
1284
+ sentiment: 0
1285
+ });
1286
+ musicCategories[platform].totalStreams += 10000;
1287
+
1288
+ // Update UI
1289
+ renderStreamingPools();
1290
+ renderStakedPools();
1291
+ document.getElementById('addPoolModal').classList.add('hidden');
1292
+ document.getElementById('newPoolName').value = '';
1293
+ showToast(`${poolName} created successfully`);
1294
+ });
1295
+
1296
+ // Platform selection in add pool modal
1297
+ document.querySelectorAll('.platform-btn').forEach(btn => {
1298
+ btn.addEventListener('click', function() {
1299
+ document.querySelectorAll('.platform-btn').forEach(b => {
1300
+ b.classList.remove('bg-strm-bg', 'text-white');
1301
+ b.classList.add('bg-gray-200', 'text-gray-700');
1302
+ });
1303
+ this.classList.remove('bg-gray-200', 'text-gray-700');
1304
+ this.classList.add('bg-strm-bg', 'text-white');
1305
+ });
1306
+ });
1307
+
1308
+ // Stake STRM button
1309
+ document.getElementById('stakeBtn').addEventListener('click', function() {
1310
+ const poolName = document.getElementById('poolSelect').value;
1311
+ const amount = parseFloat(document.getElementById('stakeAmount').value);
1312
+ stakeStrm(poolName, amount);
1313
+ });
1314
+
1315
+ // STRM balance button
1316
+ document.getElementById('strmBalanceBtn').addEventListener('click', function() {
1317
+ document.getElementById('strmModal').classList.remove('hidden');
1318
+ });
1319
+
1320
+ // Close STRM modal
1321
+ document.getElementById('closeStrmModal').addEventListener('click', function() {
1322
+ document.getElementById('strmModal').classList.add('hidden');
1323
+ });
1324
+
1325
+ // Add STRM button
1326
+ document.getElementById('addStrmBtn').addEventListener('click', function() {
1327
+ addStrm(1000);
1328
+ });
1329
+
1330
+ // Explainer button
1331
+ document.getElementById('explainerBtn').addEventListener('click', function() {
1332
+ document.getElementById('explainerModal').classList.remove('hidden');
1333
+ });
1334
+
1335
+ // Close explainer modal
1336
+ document.getElementById('closeExplainerModal').addEventListener('click', function() {
1337
+ document.getElementById('explainerModal').classList.add('hidden');
1338
+ });
1339
+
1340
+ // Close explainer button
1341
+ document.getElementById('closeExplainerBtn').addEventListener('click', function() {
1342
+ document.getElementById('explainerModal').classList.add('hidden');
1343
+ });
1344
+
1345
+ // Stake info button
1346
+ document.getElementById('stakeInfoBtn').addEventListener('click', function() {
1347
+ document.getElementById('explainerModal').classList.remove('hidden');
1348
+ });
1349
+
1350
+ // Mining button
1351
+ document.getElementById('miningBtn').addEventListener('click', function() {
1352
+ if (userData.stakedPools.length > 0) {
1353
+ openMiningModal(userData.stakedPools[0].name, userData.stakedPools[0].platform);
1354
+ } else {
1355
+ showToast('You have no pools staked for mining');
1356
+ }
1357
+ });
1358
+
1359
+ // Stop mining button
1360
+ document.getElementById('stopMiningBtn').addEventListener('click', function() {
1361
+ stopMining();
1362
+ document.getElementById('miningModal').classList.add('hidden');
1363
+ });
1364
+
1365
+ // Claim mining button
1366
+ document.getElementById('claimMiningBtn').addEventListener('click', function() {
1367
+ claimRewards(currentMiningPool);
1368
+ document.getElementById('miningModal').classList.add('hidden');
1369
+ });
1370
+
1371
+ // Toast notification function
1372
+ function showToast(message) {
1373
+ const toast = document.getElementById('toast');
1374
+ const toastMessage = document.getElementById('toastMessage');
1375
+
1376
+ toastMessage.textContent = message;
1377
+ toast.classList.remove('hidden');
1378
+
1379
+ setTimeout(() => {
1380
+ toast.classList.add('hidden');
1381
+ }, 3000);
1382
+ }
1383
+
1384
+ // Initialize the app when DOM is loaded
1385
+ document.addEventListener('DOMContentLoaded', initApp);
1386
+ </script>
1387
+ <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/privstrm0-01pa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1388
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Keep all components removed hip hop create a mining algorithm based on Bitcoin Cash algorithm make a pool of 5000000 tokens that can be mined