Hugging Face's logo

Spaces:
roowoo
/
whalewatcher-dashboard
Running

App Files Community
roowoo commited on
Commit
1c526cf
·
verified ·
1 Parent(s): c2eeb94

go to this site and scrape the top 15 whales their trades and build be a dash board that will report on what trades they have taken, the amount in $ and the shape of the markes so I can buy and seell like a whale https://www.coinglass.com/hl/range/9

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +386 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Whalewatcher Dashboard
3
- emoji: 📉
4
- colorFrom: gray
5
- colorTo: purple
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 Dashboard 🐋
3
+ colorFrom: purple
4
+ colorTo: yellow
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,387 @@
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 Dashboard</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.globe.min.js"></script>
13
+ <style>
14
+ .vanta-bg {
15
+ position: absolute;
16
+ top: 0;
17
+ left: 0;
18
+ width: 100%;
19
+ height: 100%;
20
+ z-index: -1;
21
+ opacity: 0.15;
22
+ }
23
+ .glass-morphism {
24
+ background: rgba(255, 255, 255, 0.1);
25
+ backdrop-filter: blur(10px);
26
+ -webkit-backdrop-filter: blur(10px);
27
+ border-radius: 16px;
28
+ border: 1px solid rgba(255, 255, 255, 0.2);
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-gray-900 text-white min-h-screen">
33
+ <div id="vanta-bg" class="vanta-bg"></div>
34
+
35
+ <div class="container mx-auto px-4 py-8">
36
+ <!-- Header -->
37
+ <header class="mb-12">
38
+ <div class="flex flex-col md:flex-row justify-between items-center">
39
+ <div>
40
+ <h1 class="text-4xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600">WhaleWatcher 🐋</h1>
41
+ <p class="text-gray-400">Track the biggest crypto whales and trade like them</p>
42
+ </div>
43
+ <div class="mt-4 md:mt-0 flex items-center space-x-4">
44
+ <div class="relative">
45
+ <input type="text" placeholder="Search whales..." class="py-2 px-4 rounded-full bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500">
46
+ <i data-feather="search" class="absolute right-3 top-2.5 text-gray-500"></i>
47
+ </div>
48
+ <button class="bg-gradient-to-r from-blue-500 to-purple-600 px-4 py-2 rounded-full hover:opacity-90 transition">
49
+ <i data-feather="bell" class="inline mr-2"></i> Alerts
50
+ </button>
51
+ </div>
52
+ </div>
53
+ </header>
54
+
55
+ <!-- Stats Overview -->
56
+ <section class="mb-12">
57
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
58
+ <div class="glass-morphism p-6 rounded-xl">
59
+ <h3 class="text-gray-400 text-sm mb-1">Total Whales Tracked</h3>
60
+ <p class="text-3xl font-bold">15</p>
61
+ <div class="flex items-center text-green-500 text-sm mt-2">
62
+ <i data-feather="trending-up" class="mr-1"></i> +2% today
63
+ </div>
64
+ </div>
65
+ <div class="glass-morphism p-6 rounded-xl">
66
+ <h3 class="text-gray-400 text-sm mb-1">Total Volume</h3>
67
+ <p class="text-3xl font-bold">$2.4B</p>
68
+ <div class="flex items-center text-red-500 text-sm mt-2">
69
+ <i data-feather="trending-down" class="mr-1"></i> -5.3% today
70
+ </div>
71
+ </div>
72
+ <div class="glass-morphism p-6 rounded-xl">
73
+ <h3 class="text-gray-400 text-sm mb-1">Most Active Whale</h3>
74
+ <p class="text-2xl font-bold">0x8d12...4f3a</p>
75
+ <div class="flex items-center text-yellow-500 text-sm mt-2">
76
+ <i data-feather="zap" class="mr-1"></i> 42 trades
77
+ </div>
78
+ </div>
79
+ <div class="glass-morphism p-6 rounded-xl">
80
+ <h3 class="text-gray-400 text-sm mb-1">Market Sentiment</h3>
81
+ <p class="text-3xl font-bold">Bullish</p>
82
+ <div class="flex items-center text-green-500 text-sm mt-2">
83
+ <i data-feather="arrow-up-right" class="mr-1"></i> 68% long
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </section>
88
+
89
+ <!-- Main Content -->
90
+ <section>
91
+ <div class="flex flex-col lg:flex-row gap-8">
92
+ <!-- Whale Trades Table -->
93
+ <div class="lg:w-2/3">
94
+ <div class="glass-morphism p-6 rounded-xl">
95
+ <div class="flex justify-between items-center mb-6">
96
+ <h2 class="text-2xl font-bold">Top Whale Trades</h2>
97
+ <div class="flex space-x-2">
98
+ <button class="px-3 py-1 rounded-lg bg-gray-800 hover:bg-gray-700 transition">All</button>
99
+ <button class="px-3 py-1 rounded-lg hover:bg-gray-800 transition">Buys</button>
100
+ <button class="px-3 py-1 rounded-lg hover:bg-gray-800 transition">Sells</button>
101
+ <button class="px-3 py-1 rounded-lg hover:bg-gray-800 transition">
102
+ <i data-feather="filter" class="w-4 h-4"></i>
103
+ </button>
104
+ </div>
105
+ </div>
106
+
107
+ <div class="overflow-x-auto">
108
+ <table class="w-full">
109
+ <thead>
110
+ <tr class="text-gray-400 border-b border-gray-800">
111
+ <th class="pb-3 text-left">Whale Address</th>
112
+ <th class="pb-3 text-left">Trade</th>
113
+ <th class="pb-3 text-right">Amount (USD)</th>
114
+ <th class="pb-3 text-right">Token</th>
115
+ <th class="pb-3 text-right">Time</th>
116
+ </tr>
117
+ </thead>
118
+ <tbody class="divide-y divide-gray-800">
119
+ <!-- Whale trades will be populated here by JavaScript -->
120
+ <tr id="loading-row">
121
+ <td colspan="5" class="py-8 text-center text-gray-500">
122
+ <div class="flex justify-center">
123
+ <div class="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-purple-500"></div>
124
+ </div>
125
+ </td>
126
+ </tr>
127
+ </tbody>
128
+ </table>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Market Charts -->
134
+ <div class="lg:w-1/3">
135
+ <div class="glass-morphism p-6 rounded-xl mb-6">
136
+ <h2 class="text-2xl font-bold mb-6">Market Overview</h2>
137
+ <div class="h-64">
138
+ <canvas id="marketChart"></canvas>
139
+ </div>
140
+ </div>
141
+
142
+ <div class="glass-morphism p-6 rounded-xl">
143
+ <h2 class="text-2xl font-bold mb-6">Whale Activity</h2>
144
+ <div class="h-64">
145
+ <canvas id="whaleActivityChart"></canvas>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Whale Spotlight -->
153
+ <section class="mt-12">
154
+ <div class="glass-morphism p-6 rounded-xl">
155
+ <h2 class="text-2xl font-bold mb-6">Whale Spotlight</h2>
156
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
157
+ <!-- Top Whale 1 -->
158
+ <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition cursor-pointer">
159
+ <div class="flex items-center mb-4">
160
+ <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-xl font-bold mr-4">W1</div>
161
+ <div>
162
+ <h3 class="font-bold">0x8d12...4f3a</h3>
163
+ <p class="text-sm text-gray-400">Top Performer</p>
164
+ </div>
165
+ </div>
166
+ <div class="flex justify-between mb-2">
167
+ <span class="text-gray-400">24h Trades</span>
168
+ <span class="font-bold">18</span>
169
+ </div>
170
+ <div class="flex justify-between mb-2">
171
+ <span class="text-gray-400">24h Volume</span>
172
+ <span class="font-bold">$42.8M</span>
173
+ </div>
174
+ <div class="flex justify-between">
175
+ <span class="text-gray-400">Win Rate</span>
176
+ <span class="font-bold text-green-500">78%</span>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Top Whale 2 -->
181
+ <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition cursor-pointer">
182
+ <div class="flex items-center mb-4">
183
+ <div class="w-12 h-12 rounded-full bg-gradient-to-r from-yellow-500 to-red-600 flex items-center justify-center text-xl font-bold mr-4">W2</div>
184
+ <div>
185
+ <h3 class="font-bold">0x5a7f...9e2b</h3>
186
+ <p class="text-sm text-gray-400">Biggest Spender</p>
187
+ </div>
188
+ </div>
189
+ <div class="flex justify-between mb-2">
190
+ <span class="text-gray-400">24h Trades</span>
191
+ <span class="font-bold">12</span>
192
+ </div>
193
+ <div class="flex justify-between mb-2">
194
+ <span class="text-gray-400">24h Volume</span>
195
+ <span class="font-bold">$68.3M</span>
196
+ </div>
197
+ <div class="flex justify-between">
198
+ <span class="text-gray-400">Win Rate</span>
199
+ <span class="font-bold text-green-500">65%</span>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Top Whale 3 -->
204
+ <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition cursor-pointer">
205
+ <div class="flex items-center mb-4">
206
+ <div class="w-12 h-12 rounded-full bg-gradient-to-r from-green-500 to-blue-600 flex items-center justify-center text-xl font-bold mr-4">W3</div>
207
+ <div>
208
+ <h3 class="font-bold">0x3e9c...7d1f</h3>
209
+ <p class="text-sm text-gray-400">Most Consistent</p>
210
+ </div>
211
+ </div>
212
+ <div class="flex justify-between mb-2">
213
+ <span class="text-gray-400">24h Trades</span>
214
+ <span class="font-bold">23</span>
215
+ </div>
216
+ <div class="flex justify-between mb-2">
217
+ <span class="text-gray-400">24h Volume</span>
218
+ <span class="font-bold">$31.5M</span>
219
+ </div>
220
+ <div class="flex justify-between">
221
+ <span class="text-gray-400">Win Rate</span>
222
+ <span class="font-bold text-green-500">82%</span>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </section>
228
+
229
+ <!-- Footer -->
230
+ <footer class="mt-12 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
231
+ <p>WhaleWatcher Dashboard - Track the smart money movements in crypto</p>
232
+ <p class="mt-2">Data updates every 5 minutes. Last updated: <span id="last-updated">Loading...</span></p>
233
+ </footer>
234
+ </div>
235
+
236
+ <script>
237
+ // Initialize Vanta.js globe background
238
+ VANTA.GLOBE({
239
+ el: "#vanta-bg",
240
+ mouseControls: true,
241
+ touchControls: true,
242
+ gyroControls: false,
243
+ minHeight: 200.00,
244
+ minWidth: 200.00,
245
+ scale: 1.00,
246
+ scaleMobile: 1.00,
247
+ color: 0x5e35b1,
248
+ backgroundColor: 0x111827,
249
+ size: 0.8
250
+ });
251
+
252
+ // Initialize Feather Icons
253
+ feather.replace();
254
+
255
+ // Simulate loading data (in a real app, this would be an API call)
256
+ setTimeout(() => {
257
+ // Remove loading spinner
258
+ document.getElementById('loading-row').remove();
259
+
260
+ // Sample whale trades data
261
+ const whaleTrades = [
262
+ { address: '0x8d12a0...4f3a', trade: 'Buy', amount: '$3,421,580', token: 'BTC', time: '5 min ago' },
263
+ { address: '0x5a7f1c...9e2b', trade: 'Sell', amount: '$2,876,410', token: 'ETH', time: '12 min ago' },
264
+ { address: '0x3e9c72...7d1f', trade: 'Buy', amount: '$1,245,390', token: 'SOL', time: '18 min ago' },
265
+ { address: '0x1b4f88...a2e5', trade: 'Buy', amount: '$4,567,890', token: 'BTC', time: '22 min ago' },
266
+ { address: '0x9d3e6f...1c4a', trade: 'Sell', amount: '$987,650', token: 'AVAX', time: '31 min ago' },
267
+ { address: '0x2c5a9d...8b3f', trade: 'Buy', amount: '$1,876,540', token: 'ETH', time: '42 min ago' },
268
+ { address: '0x7e3f1a...5d2e', trade: 'Sell', amount: '$2,345,670', token: 'DOT', time: '56 min ago' },
269
+ { address: '0x4b2c7e...9f1a', trade: 'Buy', amount: '$3,124,580', token: 'BTC', time: '1h 12m ago' },
270
+ { address: '0x8d12a0...4f3a', trade: 'Buy', amount: '$1,876,320', token: 'ADA', time: '1h 25m ago' },
271
+ { address: '0x1b4f88...a2e5', trade: 'Sell', amount: '$2,987,650', token: 'ETH', time: '1h 38m ago' }
272
+ ];
273
+
274
+ // Populate whale trades table
275
+ const tbody = document.querySelector('tbody');
276
+ whaleTrades.forEach(trade => {
277
+ const row = document.createElement('tr');
278
+ row.className = 'hover:bg-gray-800 transition cursor-pointer';
279
+ row.innerHTML = `
280
+ <td class="py-4 font-mono">${trade.address}</td>
281
+ <td class="py-4"><span class="px-3 py-1 rounded-full ${trade.trade === 'Buy' ? 'bg-green-900 text-green-400' : 'bg-red-900 text-red-400'}">${trade.trade}</span></td>
282
+ <td class="py-4 text-right font-bold">${trade.amount}</td>
283
+ <td class="py-4 text-right">${trade.token}</td>
284
+ <td class="py-4 text-right text-gray-400">${trade.time}</td>
285
+ `;
286
+ tbody.appendChild(row);
287
+ });
288
+
289
+ // Update last updated time
290
+ document.getElementById('last-updated').textContent = new Date().toLocaleString();
291
+
292
+ // Initialize market chart
293
+ const marketCtx = document.getElementById('marketChart').getContext('2d');
294
+ const marketChart = new Chart(marketCtx, {
295
+ type: 'line',
296
+ data: {
297
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
298
+ datasets: [{
299
+ label: 'BTC Price',
300
+ data: [28000, 32000, 40000, 38000, 42000, 45000],
301
+ borderColor: '#8b5cf6',
302
+ backgroundColor: 'rgba(139, 92, 246, 0.1)',
303
+ tension: 0.3,
304
+ fill: true
305
+ }]
306
+ },
307
+ options: {
308
+ responsive: true,
309
+ maintainAspectRatio: false,
310
+ plugins: {
311
+ legend: {
312
+ display: false
313
+ }
314
+ },
315
+ scales: {
316
+ y: {
317
+ grid: {
318
+ color: 'rgba(255, 255, 255, 0.1)'
319
+ },
320
+ ticks: {
321
+ color: 'rgba(255, 255, 255, 0.6)'
322
+ }
323
+ },
324
+ x: {
325
+ grid: {
326
+ display: false
327
+ },
328
+ ticks: {
329
+ color: 'rgba(255, 255, 255, 0.6)'
330
+ }
331
+ }
332
+ }
333
+ }
334
+ });
335
+
336
+ // Initialize whale activity chart
337
+ const activityCtx = document.getElementById('whaleActivityChart').getContext('2d');
338
+ const activityChart = new Chart(activityCtx, {
339
+ type: 'bar',
340
+ data: {
341
+ labels: ['12AM', '3AM', '6AM', '9AM', '12PM', '3PM', '6PM', '9PM'],
342
+ datasets: [{
343
+ label: 'Buy Volume',
344
+ data: [12, 19, 8, 15, 22, 17, 14, 9],
345
+ backgroundColor: 'rgba(74, 222, 128, 0.7)'
346
+ }, {
347
+ label: 'Sell Volume',
348
+ data: [8, 12, 5, 9, 14, 10, 7, 4],
349
+ backgroundColor: 'rgba(248, 113, 113, 0.7)'
350
+ }]
351
+ },
352
+ options: {
353
+ responsive: true,
354
+ maintainAspectRatio: false,
355
+ plugins: {
356
+ legend: {
357
+ position: 'top',
358
+ labels: {
359
+ color: 'rgba(255, 255, 255, 0.8)'
360
+ }
361
+ }
362
+ },
363
+ scales: {
364
+ y: {
365
+ grid: {
366
+ color: 'rgba(255, 255, 255, 0.1)'
367
+ },
368
+ ticks: {
369
+ color: 'rgba(255, 255, 255, 0.6)'
370
+ }
371
+ },
372
+ x: {
373
+ grid: {
374
+ display: false
375
+ },
376
+ ticks: {
377
+ color: 'rgba(255, 255, 255, 0.6)'
378
+ }
379
+ }
380
+ }
381
+ }
382
+ });
383
+
384
+ }, 1500);
385
+ </script>
386
+ </body>
387
  </html>