Spaces:
Running
Running
tolong hapus Recent Deposits - Follow Up Deployment
Browse files- index.html +57 -366
index.html
CHANGED
|
@@ -153,9 +153,6 @@
|
|
| 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>
|
|
@@ -295,336 +292,8 @@
|
|
| 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 -->
|
|
@@ -698,41 +367,6 @@
|
|
| 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>
|
|
@@ -805,6 +439,63 @@
|
|
| 805 |
</footer>
|
| 806 |
|
| 807 |
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 808 |
// Tab switching functionality
|
| 809 |
function switchTab(tabId) {
|
| 810 |
// Hide all tab contents
|
|
|
|
| 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('deposit')" class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-purple-600">
|
| 157 |
<i class="fas fa-wallet mr-2"></i> Deposit
|
| 158 |
</button>
|
|
|
|
| 292 |
</div>
|
| 293 |
</div>
|
| 294 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 295 |
</div>
|
| 296 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 297 |
</div>
|
| 298 |
|
| 299 |
<!-- Deposit Tab Content -->
|
|
|
|
| 367 |
</ol>
|
| 368 |
</div>
|
| 369 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 370 |
</div>
|
| 371 |
</div>
|
| 372 |
</div>
|
|
|
|
| 439 |
</footer>
|
| 440 |
|
| 441 |
<script>
|
| 442 |
+
// Asset calculation functionality
|
| 443 |
+
function calculateTotalAssets() {
|
| 444 |
+
let totalAssets = 0;
|
| 445 |
+
const assetItems = document.querySelectorAll('.asset-item');
|
| 446 |
+
|
| 447 |
+
assetItems.forEach(item => {
|
| 448 |
+
const amountInput = item.querySelector('.coin-amount');
|
| 449 |
+
const priceInput = item.querySelector('.coin-price');
|
| 450 |
+
const coinTotalSpan = item.querySelector('.coin-total');
|
| 451 |
+
|
| 452 |
+
const amount = parseFloat(amountInput.value) || 0;
|
| 453 |
+
const price = parseFloat(priceInput.value) || 0;
|
| 454 |
+
const coinTotal = amount * price;
|
| 455 |
+
|
| 456 |
+
coinTotalSpan.textContent = coinTotal.toFixed(2);
|
| 457 |
+
totalAssets += coinTotal;
|
| 458 |
+
});
|
| 459 |
+
|
| 460 |
+
const totalAssetsElement = document.getElementById('total-assets');
|
| 461 |
+
totalAssetsElement.textContent = `${totalAssets.toFixed(2)}`;
|
| 462 |
+
}
|
| 463 |
+
|
| 464 |
+
function addAssetInput() {
|
| 465 |
+
const assetList = document.getElementById('asset-list');
|
| 466 |
+
const newAssetItem = document.createElement('div');
|
| 467 |
+
newAssetItem.classList.add('asset-item', 'grid', 'grid-cols-4', 'gap-4', 'items-center');
|
| 468 |
+
newAssetItem.innerHTML = `
|
| 469 |
+
<input type="text" placeholder="Coin Name" class="coin-name px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
|
| 470 |
+
<input type="number" placeholder="Amount" class="coin-amount px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-purple-500" value="0">
|
| 471 |
+
<input type="number" placeholder="Price" class="coin-price px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-purple-500" value="0">
|
| 472 |
+
<span class="coin-total text-right font-medium">0.00</span>
|
| 473 |
+
`;
|
| 474 |
+
assetList.appendChild(newAssetItem);
|
| 475 |
+
|
| 476 |
+
const newAmountInput = newAssetItem.querySelector('.coin-amount');
|
| 477 |
+
const newPriceInput = newAssetItem.querySelector('.coin-price');
|
| 478 |
+
newAmountInput.addEventListener('input', calculateTotalAssets);
|
| 479 |
+
newPriceInput.addEventListener('input', calculateTotalAssets);
|
| 480 |
+
}
|
| 481 |
+
|
| 482 |
+
// Initialize event listeners for existing inputs
|
| 483 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 484 |
+
const initialAmountInputs = document.querySelectorAll('.coin-amount');
|
| 485 |
+
const initialPriceInputs = document.querySelectorAll('.coin-price');
|
| 486 |
+
|
| 487 |
+
initialAmountInputs.forEach(input => {
|
| 488 |
+
input.addEventListener('input', calculateTotalAssets);
|
| 489 |
+
});
|
| 490 |
+
|
| 491 |
+
initialPriceInputs.forEach(input => {
|
| 492 |
+
input.addEventListener('input', calculateTotalAssets);
|
| 493 |
+
});
|
| 494 |
+
|
| 495 |
+
// Initialize with BTC address shown by default
|
| 496 |
+
showSelectedAddress('btc');
|
| 497 |
+
});
|
| 498 |
+
|
| 499 |
// Tab switching functionality
|
| 500 |
function switchTab(tabId) {
|
| 501 |
// Hide all tab contents
|