Hugging Face's logo

Spaces:
akagelks
/
defi1
Running

App Files Community
akagelks commited on
Commit
c0071bb
·
verified ·
1 Parent(s): bdf606c

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +376 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Defi1
3
- emoji: 📚
4
- colorFrom: indigo
5
  colorTo: gray
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: defi1
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,376 @@
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>Defistation.xyz Clone - DeFi Pools Dashboard</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
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ background-color: #f9f9f9;
14
+ }
15
+ .pool-card:hover {
16
+ transform: translateY(-2px);
17
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
18
+ }
19
+ .positive-change {
20
+ color: #10b981;
21
+ }
22
+ .negative-change {
23
+ color: #ef4444;
24
+ }
25
+ .pro-badge {
26
+ background: linear-gradient(45deg, #3b82f6, #8b5cf6);
27
+ }
28
+ .filter-chip.active {
29
+ background-color: #111;
30
+ color: white;
31
+ }
32
+ .tab-button.active {
33
+ border-bottom: 2px solid #111;
34
+ font-weight: 500;
35
+ }
36
+ .sticky-filters {
37
+ position: sticky;
38
+ top: 0;
39
+ z-index: 10;
40
+ background-color: #f9f9f9;
41
+ padding-top: 1rem;
42
+ padding-bottom: 1rem;
43
+ }
44
+ @media (max-width: 640px) {
45
+ .pool-details-grid {
46
+ grid-template-columns: 1fr;
47
+ }
48
+ }
49
+ </style>
50
+ </head>
51
+ <body class="text-gray-900">
52
+ <div class="container mx-auto px-4 py-8">
53
+ <header class="mb-8">
54
+ <div class="flex justify-between items-center">
55
+ <h1 class="text-3xl font-bold">Defistation.xyz</h1>
56
+ <div class="flex items-center space-x-4">
57
+ <button class="px-4 py-2 border border-gray-200 rounded-xl hover:bg-gray-50">
58
+ <i class="fas fa-download mr-2"></i> Export CSV
59
+ </button>
60
+ <button class="px-4 py-2 bg-gray-900 text-white rounded-xl hover:bg-gray-800">
61
+ <i class="fas fa-bolt mr-2"></i> Connect Wallet
62
+ </button>
63
+ </div>
64
+ </div>
65
+ <p class="text-gray-500 mt-2">Track DeFi pools across multiple chains with real-time data</p>
66
+ </header>
67
+
68
+ <div class="sticky-filters">
69
+ <div class="bg-white rounded-2xl shadow-sm p-4 mb-6">
70
+ <div class="flex flex-wrap items-center gap-4">
71
+ <div class="flex items-center space-x-2">
72
+ <span class="text-sm font-medium">Min TVL:</span>
73
+ <div class="flex space-x-1">
74
+ <button class="filter-chip px-3 py-1 text-sm rounded-full border border-gray-200 hover:bg-gray-50 active">$10K</button>
75
+ <button class="filter-chip px-3 py-1 text-sm rounded-full border border-gray-200 hover:bg-gray-50">$100K</button>
76
+ <button class="filter-chip px-3 py-1 text-sm rounded-full border border-gray-200 hover:bg-gray-50">$1M</button>
77
+ </div>
78
+ </div>
79
+
80
+ <div class="flex items-center space-x-2">
81
+ <span class="text-sm font-medium">Type:</span>
82
+ <div class="flex space-x-1">
83
+ <button class="tab-button px-3 py-1 text-sm active">All</button>
84
+ <button class="tab-button px-3 py-1 text-sm">Stable</button>
85
+ <button class="tab-button px-3 py-1 text-sm">Concentrated</button>
86
+ <button class="tab-button px-3 py-1 text-sm">Bluechip</button>
87
+ </div>
88
+ </div>
89
+
90
+ <div class="flex items-center space-x-2">
91
+ <span class="text-sm font-medium">Time:</span>
92
+ <div class="flex space-x-1">
93
+ <button class="filter-chip px-3 py-1 text-sm rounded-full border border-gray-200 hover:bg-gray-50">5m</button>
94
+ <button class="tab-button px-3 py-1 text-sm rounded-full border border-gray-200 hover:bg-gray-50 active">1h</button>
95
+ <button class="filter-chip px-3 py-1 text-sm rounded-full border border-gray-200 hover:bg-gray-50">6h</button>
96
+ <button class="filter-chip px-3 py-1 text-sm rounded-full border border-gray-200 hover:bg-gray-50">24h</button>
97
+ </div>
98
+ </div>
99
+
100
+ <div class="flex items-center space-x-2 ml-auto">
101
+ <span class="text-sm font-medium">Sort by:</span>
102
+ <select class="px-3 py-1 text-sm rounded-xl border border-gray-200 bg-white">
103
+ <option>TVL</option>
104
+ <option>APR</option>
105
+ <option>Volume</option>
106
+ <option>Change</option>
107
+ </select>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <div class="grid grid-cols-1 gap-6" id="pools-container">
114
+ <!-- Pool cards will be inserted here by JavaScript -->
115
+ </div>
116
+ </div>
117
+
118
+ <script>
119
+ // Sample data for pools
120
+ const poolsData = [
121
+ {
122
+ id: 1,
123
+ chain: 'Ethereum',
124
+ chainIcon: 'fab fa-ethereum',
125
+ name: 'USDC/USDT',
126
+ fee: '0.05%',
127
+ lps: 1245,
128
+ protocol: 'Uniswap V3',
129
+ protocolLink: '#',
130
+ tvl: 125000000,
131
+ tvlBreakdown: [
132
+ { token: 'USDC', percentage: 52 },
133
+ { token: 'USDT', percentage: 48 }
134
+ ],
135
+ volume24h: 45000000,
136
+ apr24h: 8.2,
137
+ change24h: 2.4,
138
+ mcap: 25000000000,
139
+ fdv: 28000000000,
140
+ isPro: false,
141
+ riskScore: 'Low',
142
+ security: 'Verified'
143
+ },
144
+ {
145
+ id: 2,
146
+ chain: 'Arbitrum',
147
+ chainIcon: 'fas fa-layer-group',
148
+ name: 'ETH/WBTC',
149
+ fee: '0.30%',
150
+ lps: 842,
151
+ protocol: 'Camelot',
152
+ protocolLink: '#',
153
+ tvl: 78000000,
154
+ tvlBreakdown: [
155
+ { token: 'ETH', percentage: 58 },
156
+ { token: 'WBTC', percentage: 42 }
157
+ ],
158
+ volume24h: 32000000,
159
+ apr24h: 15.7,
160
+ change24h: -1.2,
161
+ mcap: 220000000000,
162
+ fdv: 240000000000,
163
+ isPro: true,
164
+ riskScore: 'Medium',
165
+ security: 'Verified'
166
+ },
167
+ {
168
+ id: 3,
169
+ chain: 'Polygon',
170
+ chainIcon: 'fab fa-polygon',
171
+ name: 'MATIC/USDC',
172
+ fee: '0.20%',
173
+ lps: 567,
174
+ protocol: 'QuickSwap',
175
+ protocolLink: '#',
176
+ tvl: 42000000,
177
+ tvlBreakdown: [
178
+ { token: 'MATIC', percentage: 61 },
179
+ { token: 'USDC', percentage: 39 }
180
+ ],
181
+ volume24h: 18000000,
182
+ apr24h: 12.4,
183
+ change24h: 5.8,
184
+ mcap: 8500000000,
185
+ fdv: 9000000000,
186
+ isPro: false,
187
+ riskScore: 'Low',
188
+ security: 'Verified'
189
+ },
190
+ {
191
+ id: 4,
192
+ chain: 'Optimism',
193
+ chainIcon: 'fas fa-bolt',
194
+ name: 'OP/USDC',
195
+ fee: '0.30%',
196
+ lps: 321,
197
+ protocol: 'Velodrome',
198
+ protocolLink: '#',
199
+ tvl: 28000000,
200
+ tvlBreakdown: [
201
+ { token: 'OP', percentage: 45 },
202
+ { token: 'USDC', percentage: 55 }
203
+ ],
204
+ volume24h: 9500000,
205
+ apr24h: 18.9,
206
+ change24h: -3.5,
207
+ mcap: 1200000000,
208
+ fdv: 3500000000,
209
+ isPro: true,
210
+ riskScore: 'Medium',
211
+ security: 'Audited'
212
+ },
213
+ {
214
+ id: 5,
215
+ chain: 'Binance',
216
+ chainIcon: 'fab fa-btc',
217
+ name: 'BNB/BUSD',
218
+ fee: '0.20%',
219
+ lps: 1250,
220
+ protocol: 'PancakeSwap',
221
+ protocolLink: '#',
222
+ tvl: 95000000,
223
+ tvlBreakdown: [
224
+ { token: 'BNB', percentage: 49 },
225
+ { token: 'BUSD', percentage: 51 }
226
+ ],
227
+ volume24h: 38000000,
228
+ apr24h: 9.7,
229
+ change24h: 1.2,
230
+ mcap: 42000000000,
231
+ fdv: 45000000000,
232
+ isPro: false,
233
+ riskScore: 'Low',
234
+ security: 'Verified'
235
+ }
236
+ ];
237
+
238
+ // Function to format large numbers
239
+ function formatNumber(num) {
240
+ if (num >= 1000000000) {
241
+ return (num / 1000000000).toFixed(2) + 'B';
242
+ }
243
+ if (num >= 1000000) {
244
+ return (num / 1000000).toFixed(2) + 'M';
245
+ }
246
+ if (num >= 1000) {
247
+ return (num / 1000).toFixed(2) + 'K';
248
+ }
249
+ return num.toString();
250
+ }
251
+
252
+ // Function to generate pool cards
253
+ function generatePoolCards() {
254
+ const container = document.getElementById('pools-container');
255
+ container.innerHTML = '';
256
+
257
+ poolsData.forEach(pool => {
258
+ const changeClass = pool.change24h >= 0 ? 'positive-change' : 'negative-change';
259
+ const changeSymbol = pool.change24h >= 0 ? '+' : '';
260
+
261
+ const poolCard = document.createElement('div');
262
+ poolCard.className = 'pool-card bg-white rounded-2xl shadow-sm p-6 transition-all duration-200 hover:cursor-pointer';
263
+ poolCard.innerHTML = `
264
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
265
+ <div class="flex items-center space-x-3">
266
+ <i class="${pool.chainIcon} text-2xl" title="${pool.chain}"></i>
267
+ <div>
268
+ <h3 class="font-semibold text-lg">${pool.name}</h3>
269
+ <div class="flex items-center space-x-2 text-sm text-gray-500">
270
+ <span>${pool.fee}</span>
271
+ <span>•</span>
272
+ <span>${pool.lps} LPs</span>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <div class="flex items-center space-x-2">
278
+ <a href="${pool.protocolLink}" class="text-blue-600 hover:underline">${pool.protocol}</a>
279
+ ${pool.isPro ? '<span class="pro-badge text-white text-xs px-2 py-1 rounded-full">PRO</span>' : ''}
280
+ </div>
281
+ </div>
282
+
283
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4 pool-details-grid">
284
+ <div class="space-y-2">
285
+ <p class="text-sm text-gray-500">TVL</p>
286
+ <p class="font-semibold">$${formatNumber(pool.tvl)}</p>
287
+ <div class="flex h-2 rounded-full overflow-hidden bg-gray-100">
288
+ ${pool.tvlBreakdown.map(token =>
289
+ `<div class="bg-blue-500" style="width: ${token.percentage}%"></div>`
290
+ ).join('')}
291
+ </div>
292
+ <div class="flex justify-between text-xs text-gray-500">
293
+ ${pool.tvlBreakdown.map(token =>
294
+ `<span>${token.token}</span>`
295
+ ).join('')}
296
+ </div>
297
+ </div>
298
+
299
+ <div class="space-y-2">
300
+ <p class="text-sm text-gray-500">Volume 24h</p>
301
+ <p class="font-semibold">$${formatNumber(pool.volume24h)}</p>
302
+ </div>
303
+
304
+ <div class="space-y-2">
305
+ <p class="text-sm text-gray-500">APR 24h</p>
306
+ <div class="flex items-center">
307
+ <p class="font-semibold">${pool.apr24h}%</p>
308
+ ${pool.isPro ? '<i class="fas fa-lock ml-2 text-gray-400" title="Upgrade to PRO for more data"></i>' : ''}
309
+ </div>
310
+ </div>
311
+
312
+ <div class="space-y-2">
313
+ <p class="text-sm text-gray-500">Change 24h</p>
314
+ <p class="font-semibold ${changeClass}">${changeSymbol}${pool.change24h}%</p>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="mt-6 pt-6 border-t border-gray-100 flex flex-wrap items-center justify-between gap-4">
319
+ <div class="flex items-center space-x-4">
320
+ <div class="space-y-1">
321
+ <p class="text-xs text-gray-500">MCAP</p>
322
+ <p class="text-sm font-medium">$${formatNumber(pool.mcap)}</p>
323
+ </div>
324
+ <div class="space-y-1">
325
+ <p class="text-xs text-gray-500">FDV</p>
326
+ <p class="text-sm font-medium">$${formatNumber(pool.fdv)}</p>
327
+ </div>
328
+ </div>
329
+
330
+ <div class="flex items-center space-x-3">
331
+ <span class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-800">${pool.riskScore} Risk</span>
332
+ <span class="text-xs px-2 py-1 rounded-full bg-blue-100 text-blue-800">${pool.security}</span>
333
+ <button class="p-2 rounded-full hover:bg-gray-100" title="Share">
334
+ <i class="fas fa-share-alt text-gray-500"></i>
335
+ </button>
336
+ </div>
337
+ </div>
338
+ `;
339
+
340
+ container.appendChild(poolCard);
341
+ });
342
+ }
343
+
344
+ // Initialize the page
345
+ document.addEventListener('DOMContentLoaded', () => {
346
+ generatePoolCards();
347
+
348
+ // Add click handlers for filter chips
349
+ document.querySelectorAll('.filter-chip').forEach(chip => {
350
+ chip.addEventListener('click', () => {
351
+ document.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
352
+ chip.classList.add('active');
353
+ // Here you would normally filter the data
354
+ });
355
+ });
356
+
357
+ // Add click handlers for tab buttons
358
+ document.querySelectorAll('.tab-button').forEach(button => {
359
+ button.addEventListener('click', () => {
360
+ document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
361
+ button.classList.add('active');
362
+ // Here you would normally filter the data by type
363
+ });
364
+ });
365
+
366
+ // Add click handlers for pool cards
367
+ document.querySelectorAll('.pool-card').forEach(card => {
368
+ card.addEventListener('click', () => {
369
+ // Here you would normally open a modal or navigate to pool details
370
+ console.log('Pool clicked');
371
+ });
372
+ });
373
+ });
374
+ </script>
375
+ <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=akagelks/defi1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
376
+ </html>