Hugging Face's logo

Spaces:
barudakponk
/
baru-jdi
Running

App Files Community
barudakponk commited on
Commit
21e9b63
·
verified ·
1 Parent(s): 884ff69

tambahkan fitur deposit di bagian stake now dan porfolio pada saat menyelesaikan stake now - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +803 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Baru Jdi
3
- emoji: 📉
4
- colorFrom: green
5
- colorTo: indigo
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: baru-jdi
3
+ emoji: 🐳
4
+ colorFrom: blue
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,803 @@
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>CryptoStake Pro - Advanced Coin Staking Platform</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, #6e8efb 0%, #a777e3 100%);
12
+ }
13
+ .gradient-text {
14
+ background: linear-gradient(90deg, #6e8efb 0%, #a777e3 100%);
15
+ -webkit-background-clip: text;
16
+ background-clip: text;
17
+ color: transparent;
18
+ }
19
+ .staking-card {
20
+ box-shadow: 0 10px 30px -5px rgba(103, 89, 230, 0.3);
21
+ transition: all 0.3s ease;
22
+ border-radius: 16px;
23
+ }
24
+ .staking-card:hover {
25
+ transform: translateY(-5px);
26
+ box-shadow: 0 15px 35px -5px rgba(103, 89, 230, 0.4);
27
+ }
28
+ .coin-logo {
29
+ width: 48px;
30
+ height: 48px;
31
+ border-radius: 50%;
32
+ background: white;
33
+ display: flex;
34
+ align-items: center;
35
+ justify-content: center;
36
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
37
+ }
38
+ .progress-bar {
39
+ height: 8px;
40
+ border-radius: 4px;
41
+ background-color: #e9ecef;
42
+ }
43
+ .progress-fill {
44
+ height: 100%;
45
+ border-radius: 4px;
46
+ background: linear-gradient(90deg, #6e8efb 0%, #a777e3 100%);
47
+ }
48
+ .wallet-address {
49
+ font-family: 'Courier New', monospace;
50
+ cursor: pointer;
51
+ transition: all 0.2s ease;
52
+ }
53
+ .wallet-address:hover {
54
+ color: #6e8efb;
55
+ text-decoration: underline;
56
+ }
57
+ @keyframes pulse {
58
+ 0% { transform: scale(1); }
59
+ 50% { transform: scale(1.05); }
60
+ 100% { transform: scale(1); }
61
+ }
62
+ .pulse {
63
+ animation: pulse 2s infinite;
64
+ }
65
+ .glow {
66
+ box-shadow: 0 0 15px rgba(110, 142, 251, 0.5);
67
+ }
68
+ .token-selector {
69
+ transition: all 0.3s ease;
70
+ }
71
+ .token-selector:hover {
72
+ transform: translateY(-3px);
73
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
74
+ }
75
+ .floating-label {
76
+ position: absolute;
77
+ top: -10px;
78
+ left: 12px;
79
+ background: white;
80
+ padding: 0 4px;
81
+ font-size: 12px;
82
+ color: #6e8efb;
83
+ }
84
+ .input-container {
85
+ position: relative;
86
+ border: 1px solid #e2e8f0;
87
+ border-radius: 12px;
88
+ padding: 12px;
89
+ }
90
+ .tab-active {
91
+ background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
92
+ color: white;
93
+ }
94
+ .tab-inactive {
95
+ background: white;
96
+ color: #64748b;
97
+ }
98
+ .animated-underline {
99
+ position: relative;
100
+ }
101
+ .animated-underline::after {
102
+ content: '';
103
+ position: absolute;
104
+ width: 0;
105
+ height: 2px;
106
+ bottom: -4px;
107
+ left: 0;
108
+ background: linear-gradient(90deg, #6e8efb 0%, #a777e3 100%);
109
+ transition: width 0.3s ease;
110
+ }
111
+ .animated-underline:hover::after {
112
+ width: 100%;
113
+ }
114
+ </style>
115
+ </head>
116
+ <body class="bg-gray-50 min-h-screen font-sans">
117
+ <!-- Header -->
118
+ <header class="gradient-bg text-white shadow-lg">
119
+ <div class="container mx-auto px-4 py-6">
120
+ <div class="flex justify-between items-center">
121
+ <div class="flex items-center space-x-3">
122
+ <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center">
123
+ <i class="fas fa-coins text-2xl gradient-text"></i>
124
+ </div>
125
+ <h1 class="text-2xl font-bold">CryptoStake <span class="text-xs bg-white text-indigo-600 px-2 py-1 rounded-full ml-2">PRO</span></h1>
126
+ </div>
127
+ <nav class="hidden md:flex space-x-8 items-center">
128
+ <a href="#" class="hover:text-gray-200 transition flex items-center animated-underline">
129
+ <i class="fas fa-chart-line mr-2"></i>
130
+ <span>Dashboard</span>
131
+ </a>
132
+ <a href="#" class="hover:text-gray-200 transition flex items-center animated-underline">
133
+ <i class="fas fa-lock mr-2"></i>
134
+ <span>Staking</span>
135
+ </a>
136
+ <a href="#" class="hover:text-gray-200 transition flex items-center animated-underline">
137
+ <i class="fas fa-wallet mr-2"></i>
138
+ <span>Portfolio</span>
139
+ </a>
140
+ <a href="#" class="hover:text-gray-200 transition flex items-center animated-underline">
141
+ <i class="fas fa-gift mr-2"></i>
142
+ <span>Rewards</span>
143
+ </a>
144
+ </nav>
145
+ <div class="flex items-center space-x-4">
146
+ <div class="hidden md:flex items-center space-x-2 bg-white/20 px-4 py-2 rounded-full">
147
+ <i class="fas fa-wallet"></i>
148
+ <span class="text-sm">0x742...f44e</span>
149
+ <div class="w-2 h-2 bg-green-400 rounded-full"></div>
150
+ </div>
151
+ <button class="bg-white text-indigo-600 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition flex items-center space-x-2">
152
+ <i class="fas fa-power-off"></i>
153
+ <span>Connect</span>
154
+ </button>
155
+ <button class="md:hidden text-white">
156
+ <i class="fas fa-bars text-xl"></i>
157
+ </button>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </header>
162
+
163
+ <!-- Notification Banner -->
164
+ <div class="bg-indigo-100 text-indigo-800 py-2 px-4">
165
+ <div class="container mx-auto flex items-center justify-between">
166
+ <div class="flex items-center space-x-2">
167
+ <i class="fas fa-info-circle"></i>
168
+ <span class="text-sm">New: Staking pools with up to 18% APY now available!</span>
169
+ </div>
170
+ <button class="text-indigo-600 hover:text-indigo-800">
171
+ <i class="fas fa-times"></i>
172
+ </button>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Main Content -->
177
+ <main class="container mx-auto px-4 py-8">
178
+ <!-- Stats Overview -->
179
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
180
+ <div class="bg-white rounded-xl shadow p-6 flex items-center justify-between">
181
+ <div>
182
+ <p class="text-gray-500 text-sm">Total Value Locked</p>
183
+ <p class="text-2xl font-bold">$24.8M</p>
184
+ <p class="text-green-500 text-xs flex items-center">
185
+ <i class="fas fa-arrow-up mr-1"></i> 12.4% (30d)
186
+ </p>
187
+ </div>
188
+ <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center">
189
+ <i class="fas fa-lock text-indigo-600"></i>
190
+ </div>
191
+ </div>
192
+ <div class="bg-white rounded-xl shadow p-6 flex items-center justify-between">
193
+ <div>
194
+ <p class="text-gray-500 text-sm">Your Staked Value</p>
195
+ <p class="text-2xl font-bold">$8,420</p>
196
+ <p class="text-green-500 text-xs flex items-center">
197
+ <i class="fas fa-arrow-up mr-1"></i> 6.2% (30d)
198
+ </p>
199
+ </div>
200
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
201
+ <i class="fas fa-coins text-green-600"></i>
202
+ </div>
203
+ </div>
204
+ <div class="bg-white rounded-xl shadow p-6 flex items-center justify-between">
205
+ <div>
206
+ <p class="text-gray-500 text-sm">Pending Rewards</p>
207
+ <p class="text-2xl font-bold">$142</p>
208
+ <p class="text-green-500 text-xs flex items-center">
209
+ <i class="fas fa-gift mr-1"></i> Claimable
210
+ </p>
211
+ </div>
212
+ <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
213
+ <i class="fas fa-gift text-yellow-600"></i>
214
+ </div>
215
+ </div>
216
+ <div class="bg-white rounded-xl shadow p-6 flex items-center justify-between">
217
+ <div>
218
+ <p class="text-gray-500 text-sm">Avg. APY</p>
219
+ <p class="text-2xl font-bold">14.8%</p>
220
+ <p class="text-gray-500 text-xs flex items-center">
221
+ <i class="fas fa-percentage mr-1"></i> Across all pools
222
+ </p>
223
+ </div>
224
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
225
+ <i class="fas fa-chart-pie text-purple-600"></i>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="flex flex-col lg:flex-row gap-8">
231
+ <!-- Staking Section -->
232
+ <div class="lg:w-2/3">
233
+ <div class="bg-white rounded-xl shadow-md p-6 staking-card">
234
+ <div class="flex justify-between items-center mb-6">
235
+ <h2 class="text-2xl font-bold text-gray-800 flex items-center">
236
+ <i class="fas fa-lock mr-3 gradient-text"></i>
237
+ Stake Your Assets
238
+ </h2>
239
+ <div class="flex items-center space-x-2 bg-indigo-50 px-3 py-1 rounded-full">
240
+ <span class="text-sm text-indigo-600">Current APY</span>
241
+ <span class="text-lg font-bold gradient-text">12.5%</span>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Tabs -->
246
+ <div class="flex mb-6 bg-gray-100 p-1 rounded-xl">
247
+ <button class="flex-1 py-2 px-4 rounded-xl tab-active font-medium">
248
+ <i class="fas fa-lock mr-2"></i> Stake
249
+ </button>
250
+ <button class="flex-1 py-2 px-4 rounded-xl tab-inactive font-medium">
251
+ <i class="fas fa-unlock mr-2"></i> Unstake
252
+ </button>
253
+ <button class="flex-1 py-2 px-4 rounded-xl tab-inactive font-medium">
254
+ <i class="fas fa-exchange-alt mr-2"></i> Migrate
255
+ </button>
256
+ </div>
257
+
258
+ <!-- Coin Selection -->
259
+ <div class="mb-6">
260
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="coin-select">
261
+ Select Asset to Stake
262
+ </label>
263
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
264
+ <div class="token-selector bg-white border border-gray-200 rounded-xl p-3 flex flex-col items-center cursor-pointer hover:border-indigo-300">
265
+ <div class="coin-logo mb-2">
266
+ <i class="fab fa-ethereum text-indigo-600 text-xl"></i>
267
+ </div>
268
+ <span class="font-medium">ETH</span>
269
+ <span class="text-xs text-gray-500">12.5% APY</span>
270
+ </div>
271
+ <div class="token-selector bg-white border border-gray-200 rounded-xl p-3 flex flex-col items-center cursor-pointer hover:border-indigo-300">
272
+ <div class="coin-logo mb-2">
273
+ <i class="fas fa-circle text-blue-500 text-xl"></i>
274
+ </div>
275
+ <span class="font-medium">SOL</span>
276
+ <span class="text-xs text-gray-500">9.8% APY</span>
277
+ </div>
278
+ <div class="token-selector bg-white border border-gray-200 rounded-xl p-3 flex flex-col items-center cursor-pointer hover:border-indigo-300">
279
+ <div class="coin-logo mb-2">
280
+ <i class="fas fa-circle text-purple-500 text-xl"></i>
281
+ </div>
282
+ <span class="font-medium">DOT</span>
283
+ <span class="text-xs text-gray-500">11.2% APY</span>
284
+ </div>
285
+ <div class="token-selector bg-white border border-gray-200 rounded-xl p-3 flex flex-col items-center cursor-pointer hover:border-indigo-300">
286
+ <div class="coin-logo mb-2">
287
+ <i class="fas fa-circle text-pink-500 text-xl"></i>
288
+ </div>
289
+ <span class="font-medium">MATIC</span>
290
+ <span class="text-xs text-gray-500">10.5% APY</span>
291
+ </div>
292
+ <div class="token-selector bg-white border border-gray-200 rounded-xl p-3 flex flex-col items-center cursor-pointer hover:border-indigo-300">
293
+ <div class="coin-logo mb-2">
294
+ <i class="fas fa-circle text-green-500 text-xl"></i>
295
+ </div>
296
+ <span class="font-medium">ADA</span>
297
+ <span class="text-xs text-gray-500">8.9% APY</span>
298
+ </div>
299
+ </div>
300
+ </div>
301
+
302
+ <!-- Wallet Address -->
303
+ <div class="mb-6">
304
+ <div class="input-container">
305
+ <span class="floating-label">Wallet Address</span>
306
+ <div class="flex items-center pt-2">
307
+ <i class="fas fa-wallet text-gray-500 mr-2"></i>
308
+ <span id="wallet-address" class="wallet-address text-gray-700 overflow-hidden text-ellipsis">0x742d35Cc6634C0532925a3b844Bc454e4438f44e</span>
309
+ <button class="ml-auto text-indigo-600 hover:text-indigo-800">
310
+ <i class="fas fa-copy"></i>
311
+ </button>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Amount Input -->
317
+ <div class="mb-6">
318
+ <div class="input-container">
319
+ <span class="floating-label">Amount to Stake</span>
320
+ <div class="flex items-center justify-between pt-2">
321
+ <input id="stake-amount" type="number" placeholder="0.00" class="w-full bg-transparent text-gray-700 text-xl font-bold focus:outline-none">
322
+ <div class="flex items-center space-x-2">
323
+ <span class="text-gray-500">ETH</span>
324
+ <span class="text-sm text-gray-400">Balance: 5.42</span>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ <div class="flex justify-between mt-3">
329
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full" onclick="setPercentage(25)">25%</button>
330
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full" onclick="setPercentage(50)">50%</button>
331
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full" onclick="setPercentage(75)">75%</button>
332
+ <button class="text-xs bg-indigo-100 text-indigo-700 hover:bg-indigo-200 px-3 py-1 rounded-full" onclick="setPercentage(100)">MAX</button>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Staking Period -->
337
+ <div class="mb-8">
338
+ <label class="block text-gray-700 text-sm font-medium mb-2">
339
+ Staking Period (Days)
340
+ </label>
341
+ <div class="grid grid-cols-4 gap-3">
342
+ <button class="staking-period-btn py-3 px-4 border rounded-xl hover:bg-indigo-50 hover:border-indigo-300 transition flex flex-col items-center" data-days="7">
343
+ <span>7</span>
344
+ <span class="text-xs text-gray-500">+5% APY</span>
345
+ </button>
346
+ <button class="staking-period-btn py-3 px-4 border rounded-xl hover:bg-indigo-50 hover:border-indigo-300 transition flex flex-col items-center" data-days="30">
347
+ <span>30</span>
348
+ <span class="text-xs text-gray-500">+10% APY</span>
349
+ </button>
350
+ <button class="staking-period-btn active bg-indigo-100 border-indigo-300 text-indigo-700 py-3 px-4 border rounded-xl transition flex flex-col items-center" data-days="60">
351
+ <span>60</span>
352
+ <span class="text-xs text-gray-500">+12.5% APY</span>
353
+ </button>
354
+ <button class="staking-period-btn py-3 px-4 border rounded-xl hover:bg-indigo-50 hover:border-indigo-300 transition flex flex-col items-center" data-days="90">
355
+ <span>90</span>
356
+ <span class="text-xs text-gray-500">+15% APY</span>
357
+ </button>
358
+ </div>
359
+ </div>
360
+
361
+ <!-- Estimated Rewards -->
362
+ <div class="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl p-6 mb-6 border border-indigo-100">
363
+ <h3 class="text-sm font-medium text-indigo-800 mb-4 flex items-center">
364
+ <i class="fas fa-calculator mr-2"></i> Projected Earnings
365
+ </h3>
366
+ <div class="grid grid-cols-3 gap-4">
367
+ <div class="text-center">
368
+ <p class="text-gray-600 text-xs mb-1">Daily</p>
369
+ <p class="text-lg font-bold text-gray-800">0.0042 ETH</p>
370
+ <p class="text-green-500 text-xs">~$7.50</p>
371
+ </div>
372
+ <div class="text-center">
373
+ <p class="text-gray-600 text-xs mb-1">Weekly</p>
374
+ <p class="text-lg font-bold text-gray-800">0.029 ETH</p>
375
+ <p class="text-green-500 text-xs">~$52.50</p>
376
+ </div>
377
+ <div class="text-center">
378
+ <p class="text-gray-600 text-xs mb-1">Monthly</p>
379
+ <p class="text-lg font-bold text-gray-800">0.125 ETH</p>
380
+ <p class="text-green-500 text-xs">~$225.00</p>
381
+ </div>
382
+ </div>
383
+ </div>
384
+
385
+ <!-- Stake Button -->
386
+ <button id="stake-button" class="w-full gradient-bg text-white py-4 px-4 rounded-xl font-bold hover:opacity-90 transition flex items-center justify-center space-x-3 glow">
387
+ <i class="fas fa-lock-open"></i>
388
+ <span>Stake Now</span>
389
+ <i class="fas fa-arrow-right"></i>
390
+ </button>
391
+
392
+ <div class="mt-4 text-center text-xs text-gray-500">
393
+ <p>By staking, you agree to our <a href="#" class="text-indigo-600 hover:underline">Terms of Service</a></p>
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <!-- Info Section -->
399
+ <div class="lg:w-1/3">
400
+ <!-- Current Stakes -->
401
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6 staking-card">
402
+ <div class="flex justify-between items-center mb-4">
403
+ <h2 class="text-xl font-bold text-gray-800 flex items-center">
404
+ <i class="fas fa-coins mr-2 gradient-text"></i>
405
+ Active Stakes
406
+ </h2>
407
+ <span class="text-xs bg-indigo-50 text-indigo-600 px-2 py-1 rounded-full">3 positions</span>
408
+ </div>
409
+
410
+ <div class="space-y-4">
411
+ <!-- Stake Item -->
412
+ <div class="bg-gray-50 rounded-xl p-4">
413
+ <div class="flex items-center justify-between mb-3">
414
+ <div class="flex items-center space-x-3">
415
+ <div class="coin-logo">
416
+ <i class="fab fa-ethereum text-indigo-600 text-xl"></i>
417
+ </div>
418
+ <div>
419
+ <h3 class="font-medium">Ethereum</h3>
420
+ <p class="text-xs text-gray-500">Staked: 2.5 ETH</p>
421
+ </div>
422
+ </div>
423
+ <span class="text-sm font-medium bg-green-100 text-green-600 px-2 py-1 rounded-full">Active</span>
424
+ </div>
425
+ <div class="grid grid-cols-2 gap-2 mb-3">
426
+ <div>
427
+ <p class="text-gray-500 text-xs">APY</p>
428
+ <p class="text-sm font-medium">12.5%</p>
429
+ </div>
430
+ <div>
431
+ <p class="text-gray-500 text-xs">Est. Reward</p>
432
+ <p class="text-sm font-medium">0.26 ETH</p>
433
+ </div>
434
+ <div>
435
+ <p class="text-gray-500 text-xs">Days Left</p>
436
+ <p class="text-sm font-medium">23</p>
437
+ </div>
438
+ <div>
439
+ <p class="text-gray-500 text-xs">Unlock Date</p>
440
+ <p class="text-sm font-medium">Oct 15</p>
441
+ </div>
442
+ </div>
443
+ <div class="w-full bg-gray-200 rounded-full h-2">
444
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: 65%"></div>
445
+ </div>
446
+ </div>
447
+
448
+ <!-- Stake Item -->
449
+ <div class="bg-gray-50 rounded-xl p-4">
450
+ <div class="flex items-center justify-between mb-3">
451
+ <div class="flex items-center space-x-3">
452
+ <div class="coin-logo">
453
+ <i class="fas fa-circle text-blue-500 text-xl"></i>
454
+ </div>
455
+ <div>
456
+ <h3 class="font-medium">Solana</h3>
457
+ <p class="text-xs text-gray-500">Staked: 150 SOL</p>
458
+ </div>
459
+ </div>
460
+ <span class="text-sm font-medium bg-yellow-100 text-yellow-600 px-2 py-1 rounded-full">Ending Soon</span>
461
+ </div>
462
+ <div class="grid grid-cols-2 gap-2 mb-3">
463
+ <div>
464
+ <p class="text-gray-500 text-xs">APY</p>
465
+ <p class="text-sm font-medium">9.8%</p>
466
+ </div>
467
+ <div>
468
+ <p class="text-gray-500 text-xs">Est. Reward</p>
469
+ <p class="text-sm font-medium">12.3 SOL</p>
470
+ </div>
471
+ <div>
472
+ <p class="text-gray-500 text-xs">Days Left</p>
473
+ <p class="text-sm font-medium">5</p>
474
+ </div>
475
+ <div>
476
+ <p class="text-gray-500 text-xs">Unlock Date</p>
477
+ <p class="text-sm font-medium">Sep 27</p>
478
+ </div>
479
+ </div>
480
+ <div class="w-full bg-gray-200 rounded-full h-2">
481
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 90%"></div>
482
+ </div>
483
+ </div>
484
+ </div>
485
+
486
+ <a href="#" class="block text-center mt-4 text-indigo-600 hover:text-indigo-800 font-medium flex items-center justify-center">
487
+ View All Stakes <i class="fas fa-arrow-right ml-2"></i>
488
+ </a>
489
+ </div>
490
+
491
+ <!-- Statistics -->
492
+ <div class="bg-white rounded-xl shadow-md p-6 staking-card">
493
+ <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
494
+ <i class="fas fa-chart-bar mr-2 gradient-text"></i>
495
+ Performance
496
+ </h2>
497
+
498
+ <div class="space-y-4">
499
+ <div class="flex justify-between items-center p-3 hover:bg-gray-50 rounded-lg transition">
500
+ <div class="flex items-center space-x-3">
501
+ <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center">
502
+ <i class="fas fa-coins text-indigo-600"></i>
503
+ </div>
504
+ <div>
505
+ <p class="font-medium">Total Staked</p>
506
+ <p class="text-xs text-gray-500">Across all assets</p>
507
+ </div>
508
+ </div>
509
+ <span class="font-bold">3.76 ETH</span>
510
+ </div>
511
+
512
+ <div class="flex justify-between items-center p-3 hover:bg-gray-50 rounded-lg transition">
513
+ <div class="flex items-center space-x-3">
514
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
515
+ <i class="fas fa-gift text-green-600"></i>
516
+ </div>
517
+ <div>
518
+ <p class="font-medium">Total Rewards</p>
519
+ <p class="text-xs text-gray-500">All time</p>
520
+ </div>
521
+ </div>
522
+ <span class="font-bold">0.42 ETH</span>
523
+ </div>
524
+
525
+ <div class="flex justify-between items-center p-3 hover:bg-gray-50 rounded-lg transition">
526
+ <div class="flex items-center space-x-3">
527
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
528
+ <i class="fas fa-calendar-alt text-purple-600"></i>
529
+ </div>
530
+ <div>
531
+ <p class="font-medium">Avg. Period</p>
532
+ <p class="text-xs text-gray-500">Staking duration</p>
533
+ </div>
534
+ </div>
535
+ <span class="font-bold">67 days</span>
536
+ </div>
537
+
538
+ <div class="flex justify-between items-center p-3 hover:bg-gray-50 rounded-lg transition">
539
+ <div class="flex items-center space-x-3">
540
+ <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
541
+ <i class="fas fa-percentage text-yellow-600"></i>
542
+ </div>
543
+ <div>
544
+ <p class="font-medium">Avg. APY</p>
545
+ <p class="text-xs text-gray-500">Weighted average</p>
546
+ </div>
547
+ </div>
548
+ <span class="font-bold">11.2%</span>
549
+ </div>
550
+ </div>
551
+ </div>
552
+
553
+ <!-- Quick Actions -->
554
+ <div class="bg-white rounded-xl shadow-md p-6 staking-card mt-6">
555
+ <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
556
+ <i class="fas fa-bolt mr-2 gradient-text"></i>
557
+ Quick Actions
558
+ </h2>
559
+ <div class="grid grid-cols-2 gap-3">
560
+ <button class="bg-indigo-50 text-indigo-700 py-3 px-4 rounded-lg flex flex-col items-center hover:bg-indigo-100 transition">
561
+ <i class="fas fa-gift text-xl mb-2"></i>
562
+ <span class="text-sm">Claim Rewards</span>
563
+ </button>
564
+ <button class="bg-green-50 text-green-700 py-3 px-4 rounded-lg flex flex-col items-center hover:bg-green-100 transition">
565
+ <i class="fas fa-exchange-alt text-xl mb-2"></i>
566
+ <span class="text-sm">Migrate</span>
567
+ </button>
568
+ <button class="bg-blue-50 text-blue-700 py-3 px-4 rounded-lg flex flex-col items-center hover:bg-blue-100 transition">
569
+ <i class="fas fa-history text-xl mb-2"></i>
570
+ <span class="text-sm">History</span>
571
+ </button>
572
+ <button class="bg-purple-50 text-purple-700 py-3 px-4 rounded-lg flex flex-col items-center hover:bg-purple-100 transition">
573
+ <i class="fas fa-cog text-xl mb-2"></i>
574
+ <span class="text-sm">Settings</span>
575
+ </button>
576
+ </div>
577
+ </div>
578
+ </div>
579
+ </div>
580
+ </main>
581
+
582
+ <!-- Footer -->
583
+ <footer class="bg-gray-900 text-white py-12">
584
+ <div class="container mx-auto px-4">
585
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
586
+ <div>
587
+ <div class="flex items-center space-x-3 mb-4">
588
+ <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center">
589
+ <i class="fas fa-coins text-indigo-600 text-xl"></i>
590
+ </div>
591
+ <h3 class="text-xl font-bold">CryptoStake</h3>
592
+ </div>
593
+ <p class="text-gray-400 mb-4">The most secure platform to grow your crypto assets with staking.</p>
594
+ <div class="flex space-x-4">
595
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
596
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-telegram"></i></a>
597
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-discord"></i></a>
598
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-medium"></i></a>
599
+ </div>
600
+ </div>
601
+ <div>
602
+ <h3 class="text-lg font-bold mb-4">Products</h3>
603
+ <ul class="space-y-2">
604
+ <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Staking</a></li>
605
+ <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Yield Farming</a></li>
606
+ <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Lending</a></li>
607
+ <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Liquid Staking</a></li>
608
+ </ul>
609
+ </div>
610
+ <div>
611
+ <h3 class="text-lg font-bold mb-4">Resources</h3>
612
+ <ul class="space-y-2">
613
+ <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Documentation</a></li>
614
+ <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> API</a></li>
615
+ <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Blog</a></li>
616
+ <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Guides</a></li>
617
+ </ul>
618
+ </div>
619
+ <div>
620
+ <h3 class="text-lg font-bold mb-4">Support</h3>
621
+ <ul class="space-y-2">
622
+ <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Help Center</a></li>
623
+ <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Contact Us</a></li>
624
+ <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Status</a></li>
625
+ <li><a href="#" class="text-gray-400 hover:text-white transition flex items-center"><i class="fas fa-chevron-right text-xs mr-2"></i> Bug Bounty</a></li>
626
+ </ul>
627
+ </div>
628
+ </div>
629
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
630
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 CryptoStake. All rights reserved.</p>
631
+ <div class="flex space-x-6">
632
+ <a href="#" class="text-gray-400 hover:text-white transition">Terms</a>
633
+ <a href="#" class="text-gray-400 hover:text-white transition">Privacy</a>
634
+ <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a>
635
+ <a href="#" class="text-gray-400 hover:text-white transition">Licenses</a>
636
+ </div>
637
+ </div>
638
+ </div>
639
+ </footer>
640
+
641
+ <!-- Success Modal -->
642
+ <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
643
+ <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 text-center transform transition-all duration-300 scale-95 opacity-0">
644
+ <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
645
+ <i class="fas fa-check-circle text-green-500 text-3xl"></i>
646
+ </div>
647
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">Staking Confirmed!</h3>
648
+ <p class="text-gray-600 mb-6">Your assets have been successfully staked.</p>
649
+
650
+ <div class="bg-gray-50 rounded-xl p-4 mb-6 text-left space-y-3">
651
+ <div class="flex justify-between">
652
+ <span class="text-gray-500">Amount:</span>
653
+ <span class="text-gray-700 font-medium">2.5 ETH</span>
654
+ </div>
655
+ <div class="flex justify-between">
656
+ <span class="text-gray-500">Duration:</span>
657
+ <span class="text-gray-700 font-medium">90 days</span>
658
+ </div>
659
+ <div class="flex justify-between">
660
+ <span class="text-gray-500">APY:</span>
661
+ <span class="text-gray-700 font-medium">12.5%</span>
662
+ </div>
663
+ <div class="flex justify-between">
664
+ <span class="text-gray-500">Est. Rewards:</span>
665
+ <span class="text-green-600 font-medium">0.3125 ETH</span>
666
+ </div>
667
+ <div class="pt-3 border-t border-gray-200">
668
+ <div class="flex justify-between items-center">
669
+ <span class="text-gray-500">Transaction:</span>
670
+ <div class="flex items-center">
671
+ <span class="text-gray-700 font-mono text-sm mr-2">0x7a3...f4e2</span>
672
+ <button class="text-indigo-600 hover:text-indigo-800">
673
+ <i class="fas fa-copy text-sm"></i>
674
+ </button>
675
+ </div>
676
+ </div>
677
+ </div>
678
+ </div>
679
+
680
+ <div class="flex space-x-3">
681
+ <button id="close-modal" class="flex-1 bg-gray-100 text-gray-800 py-3 px-4 rounded-lg font-medium hover:bg-gray-200 transition">
682
+ Close
683
+ </button>
684
+ <button id="view-portfolio" class="flex-1 gradient-bg text-white py-3 px-4 rounded-lg font-bold hover:opacity-90 transition">
685
+ View Portfolio
686
+ </button>
687
+ </div>
688
+ </div>
689
+ </div>
690
+
691
+ <script>
692
+ // Set percentage of balance to stake
693
+ function setPercentage(percent) {
694
+ const balance = 5.42; // Example balance
695
+ const amount = (balance * percent / 100).toFixed(4);
696
+ document.getElementById('stake-amount').value = amount;
697
+ updateEstimatedRewards();
698
+ }
699
+
700
+ // Update staking period buttons
701
+ const periodButtons = document.querySelectorAll('.staking-period-btn');
702
+ periodButtons.forEach(button => {
703
+ button.addEventListener('click', function() {
704
+ periodButtons.forEach(btn => btn.classList.remove('active', 'bg-indigo-100', 'border-indigo-300', 'text-indigo-700'));
705
+ this.classList.add('active', 'bg-indigo-100', 'border-indigo-300', 'text-indigo-700');
706
+ updateEstimatedRewards();
707
+ });
708
+ });
709
+
710
+ // Token selector buttons
711
+ const tokenSelectors = document.querySelectorAll('.token-selector');
712
+ tokenSelectors.forEach(selector => {
713
+ selector.addEventListener('click', function() {
714
+ tokenSelectors.forEach(s => s.classList.remove('border-indigo-300', 'bg-indigo-50'));
715
+ this.classList.add('border-indigo-300', 'bg-indigo-50');
716
+ updateEstimatedRewards();
717
+ });
718
+ });
719
+
720
+ // Calculate estimated rewards
721
+ function updateEstimatedRewards() {
722
+ const amount = parseFloat(document.getElementById('stake-amount').value) || 0;
723
+ const apy = 12.5;
724
+ const days = document.querySelector('.staking-period-btn.active').dataset.days;
725
+
726
+ // Simple reward calculation (APY is annual, we prorate for staking period)
727
+ const reward = amount * (apy / 100) * (days / 365);
728
+ const dailyReward = reward / days;
729
+ const weeklyReward = dailyReward * 7;
730
+ const monthlyReward = dailyReward * 30;
731
+
732
+ document.querySelectorAll('.text-lg.font-bold.text-gray-800')[0].textContent = amount.toFixed(4) + ' ETH';
733
+ document.querySelectorAll('.text-lg.font-bold.text-gray-800')[1].textContent = reward.toFixed(4) + ' ETH';
734
+ document.querySelectorAll('.text-lg.font-bold.text-gray-800')[2].textContent = dailyReward.toFixed(4) + ' ETH';
735
+ document.querySelectorAll('.text-lg.font-bold.text-gray-800')[3].textContent = weeklyReward.toFixed(4) + ' ETH';
736
+ document.querySelectorAll('.text-lg.font-bold.text-gray-800')[4].textContent = monthlyReward.toFixed(4) + ' ETH';
737
+ }
738
+
739
+ // Handle stake button click
740
+ document.getElementById('stake-button').addEventListener('click', function() {
741
+ const amount = document.getElementById('stake-amount').value;
742
+ if (!amount || parseFloat(amount) <= 0) {
743
+ alert('Please enter a valid amount to stake');
744
+ return;
745
+ }
746
+
747
+ // Show success modal with animation
748
+ const modal = document.getElementById('success-modal');
749
+ const modalContent = modal.querySelector('div');
750
+ modal.classList.remove('hidden');
751
+ setTimeout(() => {
752
+ modalContent.classList.remove('scale-95', 'opacity-0');
753
+ modalContent.classList.add('scale-100', 'opacity-100');
754
+ }, 10);
755
+ });
756
+
757
+ // Handle close modal button
758
+ document.getElementById('close-modal').addEventListener('click', function() {
759
+ const modal = document.getElementById('success-modal');
760
+ const modalContent = modal.querySelector('div');
761
+ modalContent.classList.remove('scale-100', 'opacity-100');
762
+ modalContent.classList.add('scale-95', 'opacity-0');
763
+ setTimeout(() => {
764
+ modal.classList.add('hidden');
765
+ }, 300);
766
+ });
767
+
768
+ // Handle view portfolio button
769
+ document.getElementById('view-portfolio').addEventListener('click', function() {
770
+ // In a real app, this would redirect to the portfolio page
771
+ alert('Redirecting to portfolio page...');
772
+ });
773
+
774
+ // Handle wallet address click (redirect to portfolio)
775
+ document.getElementById('wallet-address').addEventListener('click', function() {
776
+ // In a real app, this would redirect to the portfolio page
777
+ alert('Redirecting to portfolio page...');
778
+ });
779
+
780
+ // Update estimates when amount changes
781
+ document.getElementById('stake-amount').addEventListener('input', updateEstimatedRewards);
782
+
783
+ // Initialize with default values
784
+ updateEstimatedRewards();
785
+
786
+ // Copy wallet address
787
+ document.querySelector('#wallet-address + button').addEventListener('click', function(e) {
788
+ e.stopPropagation();
789
+ const address = document.getElementById('wallet-address').textContent;
790
+ navigator.clipboard.writeText(address);
791
+
792
+ // Show copied tooltip
793
+ const tooltip = document.createElement('div');
794
+ tooltip.textContent = 'Copied!';
795
+ tooltip.className = 'absolute bg-gray-800 text-white text-xs px-2 py-1 rounded -mt-8';
796
+ this.appendChild(tooltip);
797
+ setTimeout(() => {
798
+ tooltip.remove();
799
+ }, 1000);
800
+ });
801
+ </script>
802
+ <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/baru-jdi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
803
+ </html>