Hugging Face's logo

Spaces:
barudakponk
/
volcano-projek
Running

App Files Community
barudakponk commited on
Commit
c567606
·
verified ·
1 Parent(s): f80ba4e

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +887 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Volcano Projek
3
- emoji: 🚀
4
- colorFrom: purple
5
- colorTo: blue
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: volcano-projek
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
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,887 @@
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>Volcano Stake - Erupt Your Earnings</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6b21a8, #1e1b4b);
12
+ }
13
+ @keyframes lavaFlow {
14
+ 0% { background-position: 0% 50%; }
15
+ 50% { background-position: 100% 50%; }
16
+ 100% { background-position: 0% 50%; }
17
+ }
18
+ .lava-text {
19
+ background: linear-gradient(90deg, #8b5cf6, #6b21a8, #4c1d95);
20
+ background-size: 200% auto;
21
+ animation: lavaFlow 3s linear infinite;
22
+ }
23
+ .staking-card {
24
+ transition: all 0.3s ease;
25
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
26
+ }
27
+ .staking-card:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 15px 30px rgba(107, 33, 168, 0.3);
30
+ }
31
+ .progress-bar {
32
+ height: 8px;
33
+ border-radius: 4px;
34
+ background-color: #e0e0e0;
35
+ }
36
+ .progress-fill {
37
+ height: 100%;
38
+ border-radius: 4px;
39
+ background: linear-gradient(90deg, #6e8efb, #a777e3);
40
+ transition: width 0.5s ease;
41
+ }
42
+ .tab-content {
43
+ display: none;
44
+ }
45
+ .tab-content.active {
46
+ display: block;
47
+ animation: fadeIn 0.5s ease;
48
+ }
49
+ @keyframes fadeIn {
50
+ from { opacity: 0; }
51
+ to { opacity: 1; }
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="bg-gray-100 font-sans">
56
+ <!-- Header -->
57
+ <header class="gradient-bg text-white">
58
+ <div class="container mx-auto px-4 py-6">
59
+ <div class="flex justify-between items-center">
60
+ <div class="flex items-center space-x-2">
61
+ <i class="fas fa-fire text-2xl text-orange-500"></i>
62
+ <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-purple-600 to-purple-800 animate-pulse">
63
+ VOLCANO STAKE
64
+ </h1>
65
+ </div>
66
+ <nav class="hidden md:flex space-x-6">
67
+ <a href="#" class="hover:text-gray-200">Dashboard</a>
68
+ <a href="#" class="hover:text-gray-200">Staking</a>
69
+ <a href="#" class="hover:text-gray-200">Portfolio</a>
70
+ <a href="#" class="hover:text-gray-200">Transactions</a>
71
+ </nav>
72
+ <div class="flex items-center space-x-4">
73
+ <button onclick="switchTab('deposit')" class="bg-purple-800 text-white px-4 py-2 rounded-full font-medium hover:bg-purple-900 transition">
74
+ Deposit
75
+ </button>
76
+ <button class="md:hidden text-white">
77
+ <i class="fas fa-bars text-xl"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </header>
83
+
84
+ <!-- Main Content -->
85
+ <main class="container mx-auto px-4 py-8">
86
+ <!-- Dashboard Overview -->
87
+ <section class="mb-12">
88
+ <div class="flex justify-between items-center mb-6">
89
+ <h2 class="text-2xl font-bold text-gray-800">Dashboard Overview</h2>
90
+ <div class="flex space-x-2">
91
+ <button class="bg-white border border-gray-300 px-3 py-1 rounded-md text-sm hover:bg-gray-50">
92
+ <i class="fas fa-sync-alt mr-1"></i> Refresh
93
+ </button>
94
+ </div>
95
+ </div>
96
+
97
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
98
+ <!-- Total Balance Card -->
99
+ <div class="bg-white rounded-xl shadow-md p-6 staking-card">
100
+ <div class="flex items-center justify-between">
101
+ <div>
102
+ <p class="text-gray-500 text-sm">Total Balance</p>
103
+ <h3 class="text-2xl font-bold mt-1">$12,458.32</h3>
104
+ </div>
105
+ <div class="bg-purple-100 p-3 rounded-full">
106
+ <i class="fas fa-wallet text-purple-600 text-xl"></i>
107
+ </div>
108
+ </div>
109
+ <div class="mt-4">
110
+ <p class="text-sm text-gray-500">Equivalent to 3.245 BTC</p>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- Staked Assets Card -->
115
+ <div class="bg-white rounded-xl shadow-md p-6 staking-card">
116
+ <div class="flex items-center justify-between">
117
+ <div>
118
+ <p class="text-gray-500 text-sm">Staked Assets</p>
119
+ <h3 class="text-2xl font-bold mt-1">$8,742.15</h3>
120
+ </div>
121
+ <div class="bg-blue-100 p-3 rounded-full">
122
+ <i class="fas fa-lock text-blue-600 text-xl"></i>
123
+ </div>
124
+ </div>
125
+ <div class="mt-4">
126
+ <p class="text-sm text-gray-500">+2.8% from last month</p>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Estimated Rewards Card -->
131
+ <div class="bg-white rounded-xl shadow-md p-6 staking-card">
132
+ <div class="flex items-center justify-between">
133
+ <div>
134
+ <p class="text-gray-500 text-sm">Estimated Rewards</p>
135
+ <h3 class="text-2xl font-bold mt-1">$324.78</h3>
136
+ </div>
137
+ <div class="bg-green-100 p-3 rounded-full">
138
+ <i class="fas fa-gift text-green-600 text-xl"></i>
139
+ </div>
140
+ </div>
141
+ <div class="mt-4">
142
+ <p class="text-sm text-gray-500">Next payout in 2 days</p>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </section>
147
+
148
+ <!-- Staking and Portfolio Tabs -->
149
+ <section class="mb-12">
150
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
151
+ <!-- Tabs Navigation -->
152
+ <div class="flex border-b border-gray-200">
153
+ <button onclick="switchTab('staking')" class="tab-btn py-4 px-6 font-medium text-purple-600 border-b-2 border-purple-600">
154
+ <i class="fas fa-lock mr-2"></i> Staking
155
+ </button>
156
+ <button onclick="switchTab('portfolio')" class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-purple-600">
157
+ <i class="fas fa-chart-pie mr-2"></i> Portfolio
158
+ </button>
159
+ <button onclick="switchTab('deposit')" class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-purple-600">
160
+ <i class="fas fa-wallet mr-2"></i> Deposit
161
+ </button>
162
+ </div>
163
+
164
+ <!-- Staking Tab Content -->
165
+ <div id="staking" class="tab-content active p-6">
166
+ <div class="flex justify-between items-center mb-6">
167
+ <h3 class="text-xl font-bold text-gray-800">Available Staking Pools</h3>
168
+ <div class="relative">
169
+ <select class="appearance-none bg-gray-100 border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
170
+ <option>All Assets</option>
171
+ <option>BTC</option>
172
+ <option>ETH</option>
173
+ <option>SOL</option>
174
+ <option>ADA</option>
175
+ </select>
176
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
177
+ <i class="fas fa-chevron-down text-xs"></i>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
183
+ <!-- BTC Staking Pool -->
184
+ <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 staking-card">
185
+ <div class="flex justify-between items-start">
186
+ <div class="flex items-center">
187
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/1200px-Bitcoin.svg.png" alt="BTC" class="w-10 h-10 mr-3">
188
+ <div>
189
+ <h4 class="font-bold">Bitcoin</h4>
190
+ <p class="text-gray-500 text-sm">BTC</p>
191
+ </div>
192
+ </div>
193
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span>
194
+ </div>
195
+ <div class="mt-6">
196
+ <div class="flex justify-between text-sm mb-1">
197
+ <span class="text-gray-500">APY</span>
198
+ <span class="font-medium">5.25%</span>
199
+ </div>
200
+ <div class="flex justify-between text-sm mb-1">
201
+ <span class="text-gray-500">Lock Period</span>
202
+ <span class="font-medium">90 days</span>
203
+ </div>
204
+ <div class="flex justify-between text-sm mb-4">
205
+ <span class="text-gray-500">Min. Amount</span>
206
+ <span class="font-medium">0.01 BTC</span>
207
+ </div>
208
+ <div class="progress-bar mb-4">
209
+ <div class="progress-fill" style="width: 78%"></div>
210
+ </div>
211
+ <div class="flex justify-between text-xs text-gray-500 mb-4">
212
+ <span>Available: 12.5 BTC</span>
213
+ <span>Total: 16 BTC</span>
214
+ </div>
215
+ <button onclick="switchTab('deposit')" class="w-full gradient-bg text-white py-3 rounded-lg font-medium hover:opacity-90 transition">
216
+ Deposit Now
217
+ </button>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- ETH Staking Pool -->
222
+ <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 staking-card">
223
+ <div class="flex justify-between items-start">
224
+ <div class="flex items-center">
225
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Ethereum-icon-purple.svg/1200px-Ethereum-icon-purple.svg.png" alt="ETH" class="w-10 h-10 mr-3">
226
+ <div>
227
+ <h4 class="font-bold">Ethereum</h4>
228
+ <p class="text-gray-500 text-sm">ETH</p>
229
+ </div>
230
+ </div>
231
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span>
232
+ </div>
233
+ <div class="mt-6">
234
+ <div class="flex justify-between text-sm mb-1">
235
+ <span class="text-gray-500">APY</span>
236
+ <span class="font-medium">4.75%</span>
237
+ </div>
238
+ <div class="flex justify-between text-sm mb-1">
239
+ <span class="text-gray-500">Lock Period</span>
240
+ <span class="font-medium">60 days</span>
241
+ </div>
242
+ <div class="flex justify-between text-sm mb-4">
243
+ <span class="text-gray-500">Min. Amount</span>
244
+ <span class="font-medium">0.1 ETH</span>
245
+ </div>
246
+ <div class="progress-bar mb-4">
247
+ <div class="progress-fill" style="width: 65%"></div>
248
+ </div>
249
+ <div class="flex justify-between text-xs text-gray-500 mb-4">
250
+ <span>Available: 245 ETH</span>
251
+ <span>Total: 375 ETH</span>
252
+ </div>
253
+ <button onclick="showDepositAddress('eth')" class="w-full gradient-bg text-white py-3 rounded-lg font-medium hover:opacity-90 transition">
254
+ Deposit Now
255
+ </button>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- SOL Staking Pool -->
260
+ <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 staking-card">
261
+ <div class="flex justify-between items-start">
262
+ <div class="flex items-center">
263
+ <img src="https://upload.wikimedia.org/wikipedia/en/b/b9/Solana_logo.png" alt="SOL" class="w-10 h-10 mr-3">
264
+ <div>
265
+ <h4 class="font-bold">Solana</h4>
266
+ <p class="text-gray-500 text-sm">SOL</p>
267
+ </div>
268
+ </div>
269
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span>
270
+ </div>
271
+ <div class="mt-6">
272
+ <div class="flex justify-between text-sm mb-1">
273
+ <span class="text-gray-500">APY</span>
274
+ <span class="font-medium">7.20%</span>
275
+ </div>
276
+ <div class="flex justify-between text-sm mb-1">
277
+ <span class="text-gray-500">Lock Period</span>
278
+ <span class="font-medium">30 days</span>
279
+ </div>
280
+ <div class="flex justify-between text-sm mb-4">
281
+ <span class="text-gray-500">Min. Amount</span>
282
+ <span class="font-medium">5 SOL</span>
283
+ </div>
284
+ <div class="progress-bar mb-4">
285
+ <div class="progress-fill" style="width: 92%"></div>
286
+ </div>
287
+ <div class="flex justify-between text-xs text-gray-500 mb-4">
288
+ <span>Available: 1,250 SOL</span>
289
+ <span>Total: 1,350 SOL</span>
290
+ </div>
291
+ <button onclick="showDepositAddress('sol')" class="w-full gradient-bg text-white py-3 rounded-lg font-medium hover:opacity-90 transition">
292
+ Deposit Now
293
+ </button>
294
+ </div>
295
+ </div>
296
+ </div>
297
+
298
+ <!-- Active Stakes Section -->
299
+ <div class="mt-12">
300
+ <h3 class="text-xl font-bold text-gray-800 mb-6">Your Active Stakes</h3>
301
+ <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
302
+ <div class="overflow-x-auto">
303
+ <table class="min-w-full divide-y divide-gray-200">
304
+ <thead class="bg-gray-50">
305
+ <tr>
306
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset</th>
307
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
308
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Date</th>
309
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">End Date</th>
310
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rewards</th>
311
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
312
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
313
+ </tr>
314
+ </thead>
315
+ <tbody class="bg-white divide-y divide-gray-200">
316
+ <tr>
317
+ <td class="px-6 py-4 whitespace-nowrap">
318
+ <div class="flex items-center">
319
+ <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-2">
320
+ <span class="font-medium">BTC</span>
321
+ </div>
322
+ </td>
323
+ <td class="px-6 py-4 whitespace-nowrap">
324
+ 0.5 BTC
325
+ </td>
326
+ <td class="px-6 py-4 whitespace-nowrap">
327
+ 2023-05-15
328
+ </td>
329
+ <td class="px-6 py-4 whitespace-nowrap">
330
+ 2023-08-15
331
+ </td>
332
+ <td class="px-6 py-4 whitespace-nowrap text-green-600">
333
+ 0.026 BTC
334
+ </td>
335
+ <td class="px-6 py-4 whitespace-nowrap">
336
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Active</span>
337
+ </td>
338
+ <td class="px-6 py-4 whitespace-nowrap">
339
+ <button class="text-purple-600 hover:text-purple-900 text-sm font-medium">Claim</button>
340
+ </td>
341
+ </tr>
342
+ <tr>
343
+ <td class="px-6 py-4 whitespace-nowrap">
344
+ <div class="flex items-center">
345
+ <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="ETH" class="w-6 h-6 mr-2">
346
+ <span class="font-medium">ETH</span>
347
+ </div>
348
+ </td>
349
+ <td class="px-6 py-4 whitespace-nowrap">
350
+ 2.4 ETH
351
+ </td>
352
+ <td class="px-6 py-4 whitespace-nowrap">
353
+ 2023-06-10
354
+ </td>
355
+ <td class="px-6 py-4 whitespace-nowrap">
356
+ 2023-08-10
357
+ </td>
358
+ <td class="px-6 py-4 whitespace-nowrap text-green-600">
359
+ 0.114 ETH
360
+ </td>
361
+ <td class="px-6 py-4 whitespace-nowrap">
362
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Active</span>
363
+ </td>
364
+ <td class="px-6 py-4 whitespace-nowrap">
365
+ <button class="text-purple-600 hover:text-purple-900 text-sm font-medium">Claim</button>
366
+ </td>
367
+ </tr>
368
+ <tr>
369
+ <td class="px-6 py-4 whitespace-nowrap">
370
+ <div class="flex items-center">
371
+ <img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="SOL" class="w-6 h-6 mr-2">
372
+ <span class="font-medium">SOL</span>
373
+ </div>
374
+ </td>
375
+ <td class="px-6 py-4 whitespace-nowrap">
376
+ 50 SOL
377
+ </td>
378
+ <td class="px-6 py-4 whitespace-nowrap">
379
+ 2023-07-01
380
+ </td>
381
+ <td class="px-6 py-4 whitespace-nowrap">
382
+ 2023-08-01
383
+ </td>
384
+ <td class="px-6 py-4 whitespace-nowrap text-green-600">
385
+ 3.6 SOL
386
+ </td>
387
+ <td class="px-6 py-4 whitespace-nowrap">
388
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pending</span>
389
+ </td>
390
+ <td class="px-6 py-4 whitespace-nowrap">
391
+ <button class="text-gray-400 text-sm font-medium cursor-not-allowed" disabled>Claim</button>
392
+ </td>
393
+ </tr>
394
+ </tbody>
395
+ </table>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+ <!-- Portfolio Tab Content -->
402
+ <div id="portfolio" class="tab-content p-6">
403
+ <div class="flex justify-between items-center mb-6">
404
+ <h3 class="text-xl font-bold text-gray-800">Your Portfolio</h3>
405
+ <div class="flex space-x-3">
406
+ <button class="bg-gray-100 border border-gray-300 px-3 py-1 rounded-md text-sm hover:bg-gray-200">
407
+ <i class="fas fa-download mr-1"></i> Export
408
+ </button>
409
+ <button class="bg-purple-600 text-white px-3 py-1 rounded-md text-sm hover:bg-purple-700">
410
+ <i class="fas fa-plus mr-1"></i> Add Asset
411
+ </button>
412
+ </div>
413
+ </div>
414
+
415
+ <!-- Portfolio Summary -->
416
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
417
+ <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
418
+ <div class="flex items-center justify-between">
419
+ <div>
420
+ <p class="text-gray-500 text-sm">Total Value</p>
421
+ <h3 class="text-2xl font-bold mt-1">$12,458.32</h3>
422
+ </div>
423
+ <div class="bg-purple-100 p-3 rounded-full">
424
+ <i class="fas fa-chart-line text-purple-600 text-xl"></i>
425
+ </div>
426
+ </div>
427
+ <div class="mt-4">
428
+ <p class="text-sm text-green-500">
429
+ <i class="fas fa-arrow-up mr-1"></i> 12.5% (30d)
430
+ </p>
431
+ </div>
432
+ </div>
433
+
434
+ <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
435
+ <div class="flex items-center justify-between">
436
+ <div>
437
+ <p class="text-gray-500 text-sm">Available Balance</p>
438
+ <h3 class="text-2xl font-bold mt-1">$3,716.17</h3>
439
+ </div>
440
+ <div class="bg-blue-100 p-3 rounded-full">
441
+ <i class="fas fa-coins text-blue-600 text-xl"></i>
442
+ </div>
443
+ </div>
444
+ <div class="mt-4">
445
+ <p class="text-sm text-gray-500">Across 5 assets</p>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
450
+ <div class="flex items-center justify-between">
451
+ <div>
452
+ <p class="text-gray-500 text-sm">Staked Value</p>
453
+ <h3 class="text-2xl font-bold mt-1">$8,742.15</h3>
454
+ </div>
455
+ <div class="bg-green-100 p-3 rounded-full">
456
+ <i class="fas fa-lock text-green-600 text-xl"></i>
457
+ </div>
458
+ </div>
459
+ <div class="mt-4">
460
+ <p class="text-sm text-green-500">
461
+ <i class="fas fa-arrow-up mr-1"></i> 8.3% (30d)
462
+ </p>
463
+ </div>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- Asset Allocation Chart -->
468
+ <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 mb-8">
469
+ <div class="flex justify-between items-center mb-4">
470
+ <h4 class="font-bold text-gray-800">Asset Allocation</h4>
471
+ <div class="relative">
472
+ <select class="appearance-none bg-gray-100 border border-gray-300 rounded-md pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
473
+ <option>By Value</option>
474
+ <option>By Percentage</option>
475
+ </select>
476
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
477
+ <i class="fas fa-chevron-down text-xs"></i>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ <div class="h-64 flex items-center justify-center">
482
+ <!-- Placeholder for chart -->
483
+ <div class="text-center text-gray-400">
484
+ <i class="fas fa-chart-pie text-4xl mb-2"></i>
485
+ <p>Asset allocation chart will be displayed here</p>
486
+ </div>
487
+ </div>
488
+ </div>
489
+
490
+ <!-- Asset List -->
491
+ <div>
492
+ <h4 class="font-bold text-gray-800 mb-4">Your Assets</h4>
493
+ <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
494
+ <div class="overflow-x-auto">
495
+ <table class="min-w-full divide-y divide-gray-200">
496
+ <thead class="bg-gray-50">
497
+ <tr>
498
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset</th>
499
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Balance</th>
500
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
501
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
502
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">24h Change</th>
503
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
504
+ </tr>
505
+ </thead>
506
+ <tbody class="bg-white divide-y divide-gray-200">
507
+ <tr>
508
+ <td class="px-6 py-4 whitespace-nowrap">
509
+ <div class="flex items-center">
510
+ <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-2">
511
+ <div>
512
+ <span class="font-medium">Bitcoin</span>
513
+ <p class="text-gray-500 text-xs">BTC</p>
514
+ </div>
515
+ </div>
516
+ </td>
517
+ <td class="px-6 py-4 whitespace-nowrap">
518
+ 0.245 BTC
519
+ </td>
520
+ <td class="px-6 py-4 whitespace-nowrap">
521
+ $29,856.12
522
+ </td>
523
+ <td class="px-6 py-4 whitespace-nowrap">
524
+ $7,314.75
525
+ </td>
526
+ <td class="px-6 py-4 whitespace-nowrap text-green-500">
527
+ +2.4%
528
+ </td>
529
+ <td class="px-6 py-4 whitespace-nowrap">
530
+ <div class="flex space-x-2">
531
+ <button class="text-purple-600 hover:text-purple-900 text-sm font-medium">Stake</button>
532
+ <button class="text-blue-600 hover:text-blue-900 text-sm font-medium">Trade</button>
533
+ </div>
534
+ </td>
535
+ </tr>
536
+ <tr>
537
+ <td class="px-6 py-4 whitespace-nowrap">
538
+ <div class="flex items-center">
539
+ <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="ETH" class="w-6 h-6 mr-2">
540
+ <div>
541
+ <span class="font-medium">Ethereum</span>
542
+ <p class="text-gray-500 text-xs">ETH</p>
543
+ </div>
544
+ </div>
545
+ </td>
546
+ <td class="px-6 py-4 whitespace-nowrap">
547
+ 3.12 ETH
548
+ </td>
549
+ <td class="px-6 py-4 whitespace-nowrap">
550
+ $1,896.45
551
+ </td>
552
+ <td class="px-6 py-4 whitespace-nowrap">
553
+ $5,916.92
554
+ </td>
555
+ <td class="px-6 py-4 whitespace-nowrap text-red-500">
556
+ -1.2%
557
+ </td>
558
+ <td class="px-6 py-4 whitespace-nowrap">
559
+ <div class="flex space-x-2">
560
+ <button class="text-purple-600 hover:text-purple-900 text-sm font-medium">Stake</button>
561
+ <button class="text-blue-600 hover:text-blue-900 text-sm font-medium">Trade</button>
562
+ </div>
563
+ </td>
564
+ </tr>
565
+ <tr>
566
+ <td class="px-6 py-4 whitespace-nowrap">
567
+ <div class="flex items-center">
568
+ <img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="SOL" class="w-6 h-6 mr-2">
569
+ <div>
570
+ <span class="font-medium">Solana</span>
571
+ <p class="text-gray-500 text-xs">SOL</p>
572
+ </div>
573
+ </div>
574
+ </td>
575
+ <td class="px-6 py-4 whitespace-nowrap">
576
+ 85 SOL
577
+ </td>
578
+ <td class="px-6 py-4 whitespace-nowrap">
579
+ $24.56
580
+ </td>
581
+ <td class="px-6 py-4 whitespace-nowrap">
582
+ $2,087.60
583
+ </td>
584
+ <td class="px-6 py-4 whitespace-nowrap text-green-500">
585
+ +5.7%
586
+ </td>
587
+ <td class="px-6 py-4 whitespace-nowrap">
588
+ <div class="flex space-x-2">
589
+ <button class="text-purple-600 hover:text-purple-900 text-sm font-medium">Stake</button>
590
+ <button class="text-blue-600 hover:text-blue-900 text-sm font-medium">Trade</button>
591
+ </div>
592
+ </td>
593
+ </tr>
594
+ <tr>
595
+ <td class="px-6 py-4 whitespace-nowrap">
596
+ <div class="flex items-center">
597
+ <img src="https://cryptologos.cc/logos/cardano-ada-logo.png" alt="ADA" class="w-6 h-6 mr-2">
598
+ <div>
599
+ <span class="font-medium">Cardano</span>
600
+ <p class="text-gray-500 text-xs">ADA</p>
601
+ </div>
602
+ </div>
603
+ </td>
604
+ <td class="px-6 py-4 whitespace-nowrap">
605
+ 1,250 ADA
606
+ </td>
607
+ <td class="px-6 py-4 whitespace-nowrap">
608
+ $0.29
609
+ </td>
610
+ <td class="px-6 py-4 whitespace-nowrap">
611
+ $362.50
612
+ </td>
613
+ <td class="px-6 py-4 whitespace-nowrap text-green-500">
614
+ +0.8%
615
+ </td>
616
+ <td class="px-6 py-4 whitespace-nowrap">
617
+ <div class="flex space-x-2">
618
+ <button class="text-purple-600 hover:text-purple-900 text-sm font-medium">Stake</button>
619
+ <button class="text-blue-600 hover:text-blue-900 text-sm font-medium">Trade</button>
620
+ </div>
621
+ </td>
622
+ </tr>
623
+ </tbody>
624
+ </table>
625
+ </div>
626
+ </div>
627
+ </div>
628
+ </div>
629
+
630
+ <!-- Deposit Tab Content -->
631
+ <div id="deposit" class="tab-content p-6">
632
+ <div class="flex justify-between items-center mb-6">
633
+ <h3 class="text-xl font-bold text-gray-800">Deposit Crypto</h3>
634
+ <div class="relative">
635
+ <select id="asset-select" onchange="showSelectedAddress(this.value)" class="appearance-none bg-gray-100 border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
636
+ <option value="">Select Asset</option>
637
+ <option value="btc">BTC</option>
638
+ <option value="eth">ETH</option>
639
+ <option value="sol">SOL</option>
640
+ </select>
641
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
642
+ <i class="fas fa-chevron-down text-xs"></i>
643
+ </div>
644
+ </div>
645
+ </div>
646
+
647
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
648
+ <!-- Deposit Address Card -->
649
+ <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
650
+ <h4 class="font-bold text-gray-800 mb-4">Deposit Address</h4>
651
+ <div id="btc-address" class="address-content">
652
+ <div class="text-sm text-gray-600 mb-4">
653
+ <p class="mb-2"><i class="fas fa-info-circle mr-2 text-purple-600"></i> Send only BTC to this address</p>
654
+ <p><i class="fas fa-clock mr-2 text-purple-600"></i> Network confirmations required: 3</p>
655
+ </div>
656
+ <div class="bg-gray-100 p-4 rounded-lg mb-4">
657
+ <p class="text-sm font-mono break-all">bc1qxy2kgdygjrsqtzq2n0yrf2493w83f6u5hha40c</p>
658
+ </div>
659
+ <button onclick="copyAddress('btc')" class="w-full bg-purple-600 text-white py-2 rounded-md font-medium hover:bg-purple-700 transition">
660
+ Copy Address
661
+ </button>
662
+ </div>
663
+ <div id="eth-address" class="address-content hidden">
664
+ <div class="text-sm text-gray-600 mb-4">
665
+ <p class="mb-2"><i class="fas fa-info-circle mr-2 text-purple-600"></i> Send only ETH to this address</p>
666
+ <p><i class="fas fa-clock mr-2 text-purple-600"></i> Network confirmations required: 12</p>
667
+ </div>
668
+ <div class="bg-gray-100 p-4 rounded-lg mb-4">
669
+ <p class="text-sm font-mono break-all">0x71C7656EC7ab88b098defB751B7401B5f6d8976F</p>
670
+ </div>
671
+ <button onclick="copyAddress('eth')" class="w-full bg-purple-600 text-white py-2 rounded-md font-medium hover:bg-purple-700 transition">
672
+ Copy Address
673
+ </button>
674
+ </div>
675
+ <div id="sol-address" class="address-content hidden">
676
+ <div class="text-sm text-gray-600 mb-4">
677
+ <p class="mb-2"><i class="fas fa-info-circle mr-2 text-purple-600"></i> Send only SOL to this address</p>
678
+ <p><i class="fas fa-clock mr-2 text-purple-600"></i> Network confirmations required: 1</p>
679
+ </div>
680
+ <div class="bg-gray-100 p-4 rounded-lg mb-4">
681
+ <p class="text-sm font-mono break-all">HN5XkCzZiuH3z8ZzhYQH5RfK8mJZ3Yq3X7Xq5vL9J2K</p>
682
+ </div>
683
+ <button onclick="copyAddress('sol')" class="w-full bg-purple-600 text-white py-2 rounded-md font-medium hover:bg-purple-700 transition">
684
+ Copy Address
685
+ </button>
686
+ </div>
687
+ </div>
688
+
689
+ <!-- Deposit Instructions -->
690
+ <div>
691
+ <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 mb-6">
692
+ <h4 class="font-bold text-gray-800 mb-4">Deposit Instructions</h4>
693
+ <ol class="list-decimal list-inside space-y-3 text-sm text-gray-700">
694
+ <li>Select the asset you want to deposit</li>
695
+ <li>Enter the amount you wish to deposit</li>
696
+ <li>Confirm the transaction in your wallet</li>
697
+ <li>Wait for network confirmations (typically 10-30 minutes)</li>
698
+ </ol>
699
+ </div>
700
+
701
+ <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
702
+ <h4 class="font-bold text-gray-800 mb-4">Recent Deposits</h4>
703
+ <div class="space-y-4">
704
+ <div class="flex justify-between items-center pb-2 border-b border-gray-100">
705
+ <div class="flex items-center">
706
+ <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-2">
707
+ <span class="font-medium">0.15 BTC</span>
708
+ </div>
709
+ <div class="text-right">
710
+ <p class="text-sm font-medium">$4,478.42</p>
711
+ <p class="text-xs text-gray-500">2023-07-15 14:32</p>
712
+ </div>
713
+ </div>
714
+ <div class="flex justify-between items-center pb-2 border-b border-gray-100">
715
+ <div class="flex items-center">
716
+ <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="ETH" class="w-6 h-6 mr-2">
717
+ <span class="font-medium">1.2 ETH</span>
718
+ </div>
719
+ <div class="text-right">
720
+ <p class="text-sm font-medium">$2,275.74</p>
721
+ <p class="text-xs text-gray-500">2023-07-10 09:15</p>
722
+ </div>
723
+ </div>
724
+ <div class="flex justify-between items-center">
725
+ <div class="flex items-center">
726
+ <img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="SOL" class="w-6 h-6 mr-2">
727
+ <span class="font-medium">25 SOL</span>
728
+ </div>
729
+ <div class="text-right">
730
+ <p class="text-sm font-medium">$614.00</p>
731
+ <p class="text-xs text-gray-500">2023-07-05 18:47</p>
732
+ </div>
733
+ </div>
734
+ </div>
735
+ </div>
736
+ </div>
737
+ </div>
738
+ </div>
739
+ </div>
740
+ </section>
741
+ </main>
742
+
743
+ <!-- Footer -->
744
+ <footer class="bg-gradient-to-r from-purple-900 to-black text-white py-8">
745
+ <div class="container mx-auto px-4">
746
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
747
+ <div>
748
+ <h3 class="text-lg font-bold mb-4">CryptoStake</h3>
749
+ <p class="text-gray-400 text-sm">The most secure platform for staking your cryptocurrencies and earning passive income.</p>
750
+ </div>
751
+ <div>
752
+ <h4 class="font-bold mb-4">Company</h4>
753
+ <ul class="space-y-2 text-sm text-gray-400">
754
+ <li><a href="#" class="hover:text-white">About Us</a></li>
755
+ <li><a href="#" class="hover:text-white">Careers</a></li>
756
+ <li><a href="#" class="hover:text-white">Blog</a></li>
757
+ <li><a href="#" class="hover:text-white">Press</a></li>
758
+ </ul>
759
+ </div>
760
+ <div>
761
+ <h4 class="font-bold mb-4">Support</h4>
762
+ <ul class="space-y-2 text-sm text-gray-400">
763
+ <li><a href="#" class="hover:text-white">Help Center</a></li>
764
+ <li><a href="#" class="hover:text-white">Contact Us</a></li>
765
+ <li><a href="#" class="hover:text-white">Status</a></li>
766
+ <li><a href="#" class="hover:text-white">FAQ</a></li>
767
+ </ul>
768
+ </div>
769
+ <div>
770
+ <h4 class="font-bold mb-4">Connect With Us</h4>
771
+ <div class="flex space-x-4 mb-4">
772
+ <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-purple-600">
773
+ <i class="fab fa-twitter"></i>
774
+ </a>
775
+ <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-purple-600">
776
+ <i class="fab fa-telegram"></i>
777
+ </a>
778
+ <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-purple-600">
779
+ <i class="fab fa-discord"></i>
780
+ </a>
781
+ <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-purple-600">
782
+ <i class="fab fa-medium"></i>
783
+ </a>
784
+ </div>
785
+ <p class="text-sm text-gray-400">Subscribe to our newsletter</p>
786
+ <div class="mt-2 flex">
787
+ <input type="email" placeholder="Your email" class="bg-gray-700 text-white px-3 py-2 rounded-l text-sm focus:outline-none w-full">
788
+ <button class="bg-purple-600 text-white px-3 py-2 rounded-r text-sm hover:bg-purple-700">
789
+ <i class="fas fa-paper-plane"></i>
790
+ </button>
791
+ </div>
792
+ </div>
793
+ </div>
794
+ <div class="border-t border-gray-700 mt-8 pt-8 text-sm text-gray-400">
795
+ <div class="flex flex-col md:flex-row justify-between items-center">
796
+ <p>© 2023 CryptoStake. All rights reserved.</p>
797
+ <div class="flex space-x-6 mt-4 md:mt-0">
798
+ <a href="#" class="hover:text-white">Terms of Service</a>
799
+ <a href="#" class="hover:text-white">Privacy Policy</a>
800
+ <a href="#" class="hover:text-white">Cookie Policy</a>
801
+ </div>
802
+ </div>
803
+ </div>
804
+ </div>
805
+ </footer>
806
+
807
+ <script>
808
+ // Tab switching functionality
809
+ function switchTab(tabId) {
810
+ // Hide all tab contents
811
+ document.querySelectorAll('.tab-content').forEach(content => {
812
+ content.classList.remove('active');
813
+ });
814
+
815
+ // Remove active class from all tab buttons
816
+ document.querySelectorAll('.tab-btn').forEach(btn => {
817
+ btn.classList.remove('border-purple-600', 'text-purple-600');
818
+ btn.classList.add('text-gray-500');
819
+ });
820
+
821
+ // Show selected tab content
822
+ document.getElementById(tabId).classList.add('active');
823
+
824
+ // Add active class to clicked tab button if it exists (for programmatic calls)
825
+ if (event && event.currentTarget) {
826
+ event.currentTarget.classList.remove('text-gray-500');
827
+ event.currentTarget.classList.add('border-purple-600', 'text-purple-600');
828
+ } else {
829
+ // For programmatic calls, activate the corresponding tab button
830
+ const tabBtn = document.querySelector(`[onclick="switchTab('${tabId}')"]`);
831
+ if (tabBtn) {
832
+ tabBtn.classList.remove('text-gray-500');
833
+ tabBtn.classList.add('border-purple-600', 'text-purple-600');
834
+ }
835
+ }
836
+ }
837
+
838
+ // Switch to deposit tab and show selected asset address
839
+ function showDepositAddress(asset) {
840
+ switchTab('deposit');
841
+ document.querySelector('#asset-select').value = asset;
842
+ showSelectedAddress(asset);
843
+ document.getElementById('deposit').scrollIntoView({ behavior: 'smooth' });
844
+ }
845
+
846
+ // Show selected address based on asset
847
+ function showSelectedAddress(asset) {
848
+ // Hide all address contents
849
+ document.querySelectorAll('.address-content').forEach(el => {
850
+ el.classList.add('hidden');
851
+ });
852
+
853
+ // Show selected address
854
+ if (asset) {
855
+ document.getElementById(`${asset}-address`).classList.remove('hidden');
856
+ }
857
+ }
858
+
859
+ // Copy address to clipboard
860
+ function copyAddress(asset) {
861
+ let address = '';
862
+ if (asset === 'btc') {
863
+ address = 'bc1qxy2kgdygjrsqtzq2n0yrf2493w83f6u5hha40c';
864
+ } else if (asset === 'eth') {
865
+ address = '0x71C7656EC7ab88b098defB751B7401B5f6d8976F';
866
+ } else if (asset === 'sol') {
867
+ address = 'HN5XkCzZiuH3z8ZzhYQH5RfK8mJZ3Yq3X7Xq5vL9J2K';
868
+ }
869
+
870
+ navigator.clipboard.writeText(address).then(() => {
871
+ alert('Address copied to clipboard!');
872
+ // Automatically switch to portfolio tab after copying
873
+ setTimeout(() => {
874
+ switchTab('portfolio');
875
+ }, 1000);
876
+ }).catch(err => {
877
+ console.error('Failed to copy address: ', err);
878
+ });
879
+ }
880
+
881
+ // Initialize with BTC address shown by default
882
+ document.addEventListener('DOMContentLoaded', function() {
883
+ showSelectedAddress('btc');
884
+ });
885
+ </script>
886
+ <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=barudakponk/volcano-projek" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
887
+ </html>