Hugging Face's logo

Spaces:
roowoo
/
whalewatcher-crypto-compass
Running

App Files Community
roowoo commited on
Commit
b94d317
·
verified ·
1 Parent(s): 417dd3d

go to https://www.coinglass.com/hl and scrape all the data from there to give a display dashboard that summarises all the calls , the weight of the overall market direction and the directional indicator that will tell me to long or short the BTC, ETH, XRP, ADA and BNB markets . also scrape the main whale accounts from https://www.coinglass.com/hyperliquid and dispalay them as well, have a 10 min auto refresh

Browse files
Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +443 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Whalewatcher Crypto Compass
3
- emoji: 🚀
4
  colorFrom: yellow
5
- colorTo: green
 
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: WhaleWatcher Crypto Compass 🐳
 
3
  colorFrom: yellow
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,444 @@
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>WhaleWatcher Crypto Compass</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
13
+ <style>
14
+ .pulse {
15
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
16
+ }
17
+ @keyframes pulse {
18
+ 0%, 100% { opacity: 1; }
19
+ 50% { opacity: 0.5; }
20
+ }
21
+ .gradient-bg {
22
+ background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%);
23
+ }
24
+ .glass-effect {
25
+ backdrop-filter: blur(16px) saturate(180%);
26
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
27
+ background-color: rgba(17, 25, 40, 0.75);
28
+ border: 1px solid rgba(255, 255, 255, 0.125);
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-gray-900 text-white min-h-screen">
33
+ <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
34
+
35
+ <div class="container mx-auto px-4 py-8">
36
+ <header class="flex justify-between items-center mb-8">
37
+ <div class="flex items-center space-x-2">
38
+ <i data-feather="activity" class="w-8 h-8 text-blue-400"></i>
39
+ <h1 class="text-2xl md:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">
40
+ WhaleWatcher Crypto Compass
41
+ </h1>
42
+ </div>
43
+ <div class="flex items-center space-x-4">
44
+ <div class="flex items-center space-x-1">
45
+ <span class="text-sm">Auto-refresh in:</span>
46
+ <span id="refresh-timer" class="font-mono bg-blue-900 px-2 py-1 rounded">10:00</span>
47
+ </div>
48
+ <button id="refresh-btn" class="p-2 rounded-full hover:bg-blue-800 transition">
49
+ <i data-feather="refresh-cw" class="w-5 h-5"></i>
50
+ </button>
51
+ </div>
52
+ </header>
53
+
54
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
55
+ <!-- Market Summary Card -->
56
+ <div class="glass-effect rounded-xl p-6 shadow-lg">
57
+ <div class="flex justify-between items-center mb-4">
58
+ <h2 class="text-xl font-semibold">Market Summary</h2>
59
+ <span class="text-xs px-2 py-1 bg-blue-900 rounded-full">LIVE</span>
60
+ </div>
61
+ <div class="space-y-4">
62
+ <div class="flex justify-between">
63
+ <span class="text-gray-300">BTC Long/Short Ratio</span>
64
+ <span id="btc-ratio" class="font-mono">Loading...</span>
65
+ </div>
66
+ <div class="flex justify-between">
67
+ <span class="text-gray-300">ETH Long/Short Ratio</span>
68
+ <span id="eth-ratio" class="font-mono">Loading...</span>
69
+ </div>
70
+ <div class="flex justify-between">
71
+ <span class="text-gray-300">XRP Long/Short Ratio</span>
72
+ <span id="xrp-ratio" class="font-mono">Loading...</span>
73
+ </div>
74
+ <div class="flex justify-between">
75
+ <span class="text-gray-300">ADA Long/Short Ratio</span>
76
+ <span id="ada-ratio" class="font-mono">Loading...</span>
77
+ </div>
78
+ <div class="flex justify-between">
79
+ <span class="text-gray-300">BNB Long/Short Ratio</span>
80
+ <span id="bnb-ratio" class="font-mono">Loading...</span>
81
+ </div>
82
+ </div>
83
+ </div>
84
+
85
+ <!-- Market Direction Indicator -->
86
+ <div class="glass-effect rounded-xl p-6 shadow-lg">
87
+ <h2 class="text-xl font-semibold mb-4">Market Direction</h2>
88
+ <div class="flex flex-col items-center justify-center h-40">
89
+ <div id="direction-indicator" class="w-24 h-24 rounded-full bg-gradient-to-br from-red-500 to-green-500 flex items-center justify-center shadow-lg mb-4">
90
+ <span id="direction-text" class="text-xl font-bold">-</span>
91
+ </div>
92
+ <p id="direction-desc" class="text-center text-gray-300">Calculating market sentiment...</p>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Whale Activity -->
97
+ <div class="glass-effect rounded-xl p-6 shadow-lg">
98
+ <div class="flex justify-between items-center mb-4">
99
+ <h2 class="text-xl font-semibold">Whale Activity</h2>
100
+ <i data-feather="alert-circle" class="w-5 h-5 text-yellow-400"></i>
101
+ </div>
102
+ <div class="space-y-3">
103
+ <div class="whale-item flex items-center justify-between py-2 px-3 rounded-lg bg-gray-800">
104
+ <div class="flex items-center space-x-2">
105
+ <i data-feather="user" class="w-4 h-4 text-blue-400"></i>
106
+ <span class="text-sm truncate">Loading whale data...</span>
107
+ </div>
108
+ <span class="text-xs px-2 py-1 bg-gray-700 rounded-full">...</span>
109
+ </div>
110
+ <div id="whale-container">
111
+ <!-- Whale items will be injected here -->
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Trading Recommendations -->
118
+ <div class="glass-effect rounded-xl p-6 shadow-lg mb-8">
119
+ <h2 class="text-xl font-semibold mb-4">Trading Recommendations</h2>
120
+ <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
121
+ <div id="btc-card" class="bg-gray-800 rounded-lg p-4 flex flex-col items-center">
122
+ <div class="flex items-center space-x-2 mb-2">
123
+ <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6">
124
+ <span class="font-medium">BTC</span>
125
+ </div>
126
+ <span id="btc-recommendation" class="text-xl font-bold mb-2">-</span>
127
+ <div id="btc-strength" class="w-full h-2 rounded-full bg-gray-700 overflow-hidden">
128
+ <div class="h-full bg-blue-500 w-0"></div>
129
+ </div>
130
+ </div>
131
+ <div id="eth-card" class="bg-gray-800 rounded-lg p-4 flex flex-col items-center">
132
+ <div class="flex items-center space-x-2 mb-2">
133
+ <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="ETH" class="w-6 h-6">
134
+ <span class="font-medium">ETH</span>
135
+ </div>
136
+ <span id="eth-recommendation" class="text-xl font-bold mb-2">-</span>
137
+ <div id="eth-strength" class="w-full h-2 rounded-full bg-gray-700 overflow-hidden">
138
+ <div class="h-full bg-blue-500 w-0"></div>
139
+ </div>
140
+ </div>
141
+ <div id="xrp-card" class="bg-gray-800 rounded-lg p-4 flex flex-col items-center">
142
+ <div class="flex items-center space-x-2 mb-2">
143
+ <img src="https://cryptologos.cc/logos/xrp-xrp-logo.png" alt="XRP" class="w-6 h-6">
144
+ <span class="font-medium">XRP</span>
145
+ </div>
146
+ <span id="xrp-recommendation" class="text-xl font-bold mb-2">-</span>
147
+ <div id="xrp-strength" class="w-full h-2 rounded-full bg-gray-700 overflow-hidden">
148
+ <div class="h-full bg-blue-500 w-0"></div>
149
+ </div>
150
+ </div>
151
+ <div id="ada-card" class="bg-gray-800 rounded-lg p-4 flex flex-col items-center">
152
+ <div class="flex items-center space-x-2 mb-2">
153
+ <img src="https://cryptologos.cc/logos/cardano-ada-logo.png" alt="ADA" class="w-6 h-6">
154
+ <span class="font-medium">ADA</span>
155
+ </div>
156
+ <span id="ada-recommendation" class="text-xl font-bold mb-2">-</span>
157
+ <div id="ada-strength" class="w-full h-2 rounded-full bg-gray-700 overflow-hidden">
158
+ <div class="h-full bg-blue-500 w-0"></div>
159
+ </div>
160
+ </div>
161
+ <div id="bnb-card" class="bg-gray-800 rounded-lg p-4 flex flex-col items-center">
162
+ <div class="flex items-center space-x-2 mb-2">
163
+ <img src="https://cryptologos.cc/logos/bnb-bnb-logo.png" alt="BNB" class="w-6 h-6">
164
+ <span class="font-medium">BNB</span>
165
+ </div>
166
+ <span id="bnb-recommendation" class="text-xl font-bold mb-2">-</span>
167
+ <div id="bnb-strength" class="w-full h-2 rounded-full bg-gray-700 overflow-hidden">
168
+ <div class="h-full bg-blue-500 w-0"></div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <!-- Detailed Charts -->
175
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
176
+ <div class="glass-effect rounded-xl p-6 shadow-lg">
177
+ <h2 class="text-xl font-semibold mb-4">Long/Short Ratios</h2>
178
+ <canvas id="ratioChart" height="300"></canvas>
179
+ </div>
180
+ <div class="glass-effect rounded-xl p-6 shadow-lg">
181
+ <h2 class="text-xl font-semibold mb-4">Market Positions</h2>
182
+ <canvas id="positionChart" height="300"></canvas>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <script>
188
+ // Initialize Vanta.js background
189
+ VANTA.NET({
190
+ el: "#vanta-bg",
191
+ mouseControls: true,
192
+ touchControls: true,
193
+ gyroControls: false,
194
+ minHeight: 200.00,
195
+ minWidth: 200.00,
196
+ scale: 1.00,
197
+ scaleMobile: 1.00,
198
+ color: 0x3b82f6,
199
+ backgroundColor: 0x111827,
200
+ points: 12.00,
201
+ maxDistance: 22.00,
202
+ spacing: 17.00
203
+ });
204
+
205
+ // Auto-refresh logic
206
+ let refreshInterval = 600; // 10 minutes in seconds
207
+ const timerElement = document.getElementById('refresh-timer');
208
+ const refreshBtn = document.getElementById('refresh-btn');
209
+
210
+ function updateTimer() {
211
+ const minutes = Math.floor(refreshInterval / 60);
212
+ const seconds = refreshInterval % 60;
213
+ timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
214
+
215
+ if (refreshInterval <= 0) {
216
+ refreshInterval = 600;
217
+ fetchData();
218
+ } else {
219
+ refreshInterval--;
220
+ }
221
+ }
222
+
223
+ refreshBtn.addEventListener('click', () => {
224
+ refreshInterval = 600;
225
+ fetchData();
226
+ });
227
+
228
+ setInterval(updateTimer, 1000);
229
+
230
+ // Chart initialization
231
+ const ratioCtx = document.getElementById('ratioChart').getContext('2d');
232
+ const positionCtx = document.getElementById('positionChart').getContext('2d');
233
+
234
+ const ratioChart = new Chart(ratioCtx, {
235
+ type: 'bar',
236
+ data: {
237
+ labels: ['BTC', 'ETH', 'XRP', 'ADA', 'BNB'],
238
+ datasets: [{
239
+ label: 'Long/Short Ratio',
240
+ data: [0, 0, 0, 0, 0],
241
+ backgroundColor: [
242
+ 'rgba(59, 130, 246, 0.7)',
243
+ 'rgba(139, 92, 246, 0.7)',
244
+ 'rgba(20, 184, 166, 0.7)',
245
+ 'rgba(236, 72, 153, 0.7)',
246
+ 'rgba(234, 179, 8, 0.7)'
247
+ ],
248
+ borderColor: [
249
+ 'rgba(59, 130, 246, 1)',
250
+ 'rgba(139, 92, 246, 1)',
251
+ 'rgba(20, 184, 166, 1)',
252
+ 'rgba(236, 72, 153, 1)',
253
+ 'rgba(234, 179, 8, 1)'
254
+ ],
255
+ borderWidth: 1
256
+ }]
257
+ },
258
+ options: {
259
+ responsive: true,
260
+ plugins: {
261
+ legend: {
262
+ display: false
263
+ }
264
+ },
265
+ scales: {
266
+ y: {
267
+ beginAtZero: true
268
+ }
269
+ }
270
+ }
271
+ });
272
+
273
+ const positionChart = new Chart(positionCtx, {
274
+ type: 'doughnut',
275
+ data: {
276
+ labels: ['Long', 'Short'],
277
+ datasets: [{
278
+ data: [50, 50],
279
+ backgroundColor: [
280
+ 'rgba(16, 185, 129, 0.7)',
281
+ 'rgba(239, 68, 68, 0.7)'
282
+ ],
283
+ borderColor: [
284
+ 'rgba(16, 185, 129, 1)',
285
+ 'rgba(239, 68, 68, 1)'
286
+ ],
287
+ borderWidth: 1
288
+ }]
289
+ },
290
+ options: {
291
+ responsive: true,
292
+ plugins: {
293
+ legend: {
294
+ position: 'bottom'
295
+ }
296
+ }
297
+ }
298
+ });
299
+
300
+ // Fetch data (simulated since we can't scrape directly)
301
+ function fetchData() {
302
+ // Simulate loading
303
+ document.getElementById('direction-indicator').classList.add('pulse');
304
+
305
+ // Simulate API fetch delay
306
+ setTimeout(() => {
307
+ // Generate random data for demo purposes
308
+ const btcRatio = (Math.random() * 3).toFixed(2);
309
+ const ethRatio = (Math.random() * 3).toFixed(2);
310
+ const xrpRatio = (Math.random() * 3).toFixed(2);
311
+ const adaRatio = (Math.random() * 3).toFixed(2);
312
+ const bnbRatio = (Math.random() * 3).toFixed(2);
313
+
314
+ // Update ratios
315
+ document.getElementById('btc-ratio').textContent = btcRatio;
316
+ document.getElementById('eth-ratio').textContent = ethRatio;
317
+ document.getElementById('xrp-ratio').textContent = xrpRatio;
318
+ document.getElementById('ada-ratio').textContent = adaRatio;
319
+ document.getElementById('bnb-ratio').textContent = bnbRatio;
320
+
321
+ // Update charts
322
+ ratioChart.data.datasets[0].data = [btcRatio, ethRatio, xrpRatio, adaRatio, bnbRatio];
323
+ ratioChart.update();
324
+
325
+ // Generate market direction
326
+ const marketSentiment = Math.random();
327
+ const directionElement = document.getElementById('direction-indicator');
328
+ const directionText = document.getElementById('direction-text');
329
+ const directionDesc = document.getElementById('direction-desc');
330
+
331
+ if (marketSentiment > 0.6) {
332
+ directionElement.classList.remove('bg-gradient-to-br');
333
+ directionElement.classList.add('bg-gradient-to-br', 'from-green-400', 'to-green-600');
334
+ directionText.textContent = 'LONG';
335
+ directionDesc.textContent = 'Strong buying pressure detected';
336
+ } else if (marketSentiment < 0.4) {
337
+ directionElement.classList.remove('bg-gradient-to-br');
338
+ directionElement.classList.add('bg-gradient-to-br', 'from-red-400', 'to-red-600');
339
+ directionText.textContent = 'SHORT';
340
+ directionDesc.textContent = 'Strong selling pressure detected';
341
+ } else {
342
+ directionElement.classList.remove('bg-gradient-to-br');
343
+ directionElement.classList.add('bg-gradient-to-br', 'from-yellow-400', 'to-yellow-600');
344
+ directionText.textContent = 'NEUTRAL';
345
+ directionDesc.textContent = 'Market is balanced, no clear direction';
346
+ }
347
+
348
+ directionElement.classList.remove('pulse');
349
+
350
+ // Update position chart
351
+ positionChart.data.datasets[0].data = [
352
+ Math.round(marketSentiment * 100),
353
+ Math.round((1 - marketSentiment) * 100)
354
+ ];
355
+ positionChart.update();
356
+
357
+ // Update recommendations
358
+ updateRecommendation('btc', btcRatio, marketSentiment);
359
+ updateRecommendation('eth', ethRatio, marketSentiment);
360
+ updateRecommendation('xrp', xrpRatio, marketSentiment);
361
+ updateRecommendation('ada', adaRatio, marketSentiment);
362
+ updateRecommendation('bnb', bnbRatio, marketSentiment);
363
+
364
+ // Update whale data
365
+ updateWhaleData();
366
+ }, 1000);
367
+ }
368
+
369
+ function updateRecommendation(coin, ratio, sentiment) {
370
+ const recommendationElement = document.getElementById(`${coin}-recommendation`);
371
+ const strengthElement = document.getElementById(`${coin}-strength`).firstElementChild;
372
+ const cardElement = document.getElementById(`${coin}-card`);
373
+
374
+ // Clear previous classes
375
+ cardElement.classList.remove('border-green-500', 'border-red-500', 'border-yellow-500');
376
+ strengthElement.classList.remove('bg-green-500', 'bg-red-500', 'bg-yellow-500');
377
+
378
+ const ratioValue = parseFloat(ratio);
379
+ const combinedScore = (ratioValue * 0.6) + (sentiment * 0.4);
380
+
381
+ if (combinedScore > 1.8) {
382
+ recommendationElement.textContent = 'STRONG LONG';
383
+ recommendationElement.classList.remove('text-red-500', 'text-yellow-500');
384
+ recommendationElement.classList.add('text-green-500');
385
+ strengthElement.classList.add('bg-green-500');
386
+ cardElement.classList.add('border-green-500');
387
+ strengthElement.style.width = `${Math.min(100, (combinedScore - 1.8) * 50)}%`;
388
+ } else if (combinedScore < 1.2) {
389
+ recommendationElement.textContent = 'STRONG SHORT';
390
+ recommendationElement.classList.remove('text-green-500', 'text-yellow-500');
391
+ recommendationElement.classList.add('text-red-500');
392
+ strengthElement.classList.add('bg-red-500');
393
+ cardElement.classList.add('border-red-500');
394
+ strengthElement.style.width = `${Math.min(100, (1.2 - combinedScore) * 50)}%`;
395
+ } else {
396
+ recommendationElement.textContent = 'HOLD';
397
+ recommendationElement.classList.remove('text-green-500', 'text-red-500');
398
+ recommendationElement.classList.add('text-yellow-500');
399
+ strengthElement.classList.add('bg-yellow-500');
400
+ cardElement.classList.add('border-yellow-500');
401
+ strengthElement.style.width = '50%';
402
+ }
403
+ }
404
+
405
+ function updateWhaleData() {
406
+ const whaleContainer = document.getElementById('whale-container');
407
+ whaleContainer.innerHTML = '';
408
+
409
+ // Generate random whale data
410
+ const whaleCount = 3 + Math.floor(Math.random() * 3);
411
+ const actions = ['Buying BTC', 'Selling ETH', 'Accumulating XRP', 'Liquidating ADA', 'Swapping BNB'];
412
+ const statuses = ['Active', 'Watching', 'Aggressive', 'Caution'];
413
+
414
+ for (let i = 0; i < whaleCount; i++) {
415
+ const whaleAction = actions[Math.floor(Math.random() * actions.length)];
416
+ const whaleStatus = statuses[Math.floor(Math.random() * statuses.length)];
417
+ const whaleAmount = (100 + Math.random() * 900).toFixed(2);
418
+
419
+ const whaleItem = document.createElement('div');
420
+ whaleItem.className = 'whale-item flex items-center justify-between py-2 px-3 rounded-lg bg-gray-800';
421
+ whaleItem.innerHTML = `
422
+ <div class="flex items-center space-x-2">
423
+ <i data-feather="user" class="w-4 h-4 text-blue-400"></i>
424
+ <span class="text-sm truncate">${whaleAction} ($${whaleAmount}K)</span>
425
+ </div>
426
+ <span class="text-xs px-2 py-1 ${
427
+ whaleStatus === 'Aggressive' ? 'bg-red-900' :
428
+ whaleStatus === 'Active' ? 'bg-green-900' :
429
+ whaleStatus === 'Caution' ? 'bg-yellow-900' : 'bg-blue-900'
430
+ } rounded-full">${whaleStatus}</span>
431
+ `;
432
+
433
+ whaleContainer.appendChild(whaleItem);
434
+ }
435
+
436
+ feather.replace();
437
+ }
438
+
439
+ // Initial load
440
+ fetchData();
441
+ feather.replace();
442
+ </script>
443
+ </body>
444
  </html>