Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Volcano Stake - Erupt Your Earnings</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6b21a8, #1e1b4b); | |
| } | |
| @keyframes lavaFlow { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .lava-text { | |
| background: linear-gradient(90deg, #8b5cf6, #6b21a8, #4c1d95); | |
| background-size: 200% auto; | |
| animation: lavaFlow 3s linear infinite; | |
| } | |
| .staking-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .staking-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(107, 33, 168, 0.3); | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| background-color: #e0e0e0; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| background: linear-gradient(90deg, #6e8efb, #a777e3); | |
| transition: width 0.5s ease; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-fire text-2xl text-orange-500"></i> | |
| <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"> | |
| VOLCANO STAKE | |
| </h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-gray-200"></a> | |
| <a href="#" class="hover:text-gray-200"></a> | |
| <a href="#" class="hover:text-gray-200"></a> | |
| <a href="#" class="hover:text-gray-200"></a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button onclick="switchTab('deposit')" class="bg-purple-800 text-white px-4 py-2 rounded-full font-medium hover:bg-purple-900 transition"> | |
| Deposit | |
| </button> | |
| <button class="md:hidden text-white"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Dashboard Overview --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Dashboard Overview</h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-white border border-gray-300 px-3 py-1 rounded-md text-sm hover:bg-gray-50"> | |
| <i class="fas fa-sync-alt mr-1"></i> Refresh | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Total Balance Card --> | |
| <div class="bg-white rounded-xl shadow-md p-6 staking-card"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Total Balance</p> | |
| <h3 class="text-2xl font-bold mt-1">$12,458.32</h3> | |
| </div> | |
| <div class="bg-purple-100 p-3 rounded-full"> | |
| <i class="fas fa-wallet text-purple-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500">Equivalent to 3.245 BTC</p> | |
| </div> | |
| </div> | |
| <!-- Staked Assets Card --> | |
| <div class="bg-white rounded-xl shadow-md p-6 staking-card"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Staked Assets</p> | |
| <h3 class="text-2xl font-bold mt-1">$8,742.15</h3> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-full"> | |
| <i class="fas fa-lock text-blue-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500">+2.8% from last month</p> | |
| </div> | |
| </div> | |
| <!-- Estimated Rewards Card --> | |
| <div class="bg-white rounded-xl shadow-md p-6 staking-card"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Estimated Rewards</p> | |
| <h3 class="text-2xl font-bold mt-1">$324.78</h3> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-full"> | |
| <i class="fas fa-gift text-green-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500">Next payout in 2 days</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Staking and Portfolio Tabs --> | |
| <section class="mb-12"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <!-- Tabs Navigation --> | |
| <div class="flex border-b border-gray-200"> | |
| <button onclick="switchTab('staking')" class="tab-btn py-4 px-6 font-medium text-purple-600 border-b-2 border-purple-600"> | |
| <i class="fas fa-lock mr-2"></i> Staking | |
| </button> | |
| <button onclick="switchTab('deposit')" class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-purple-600"> | |
| <i class="fas fa-wallet mr-2"></i> Deposit | |
| </button> | |
| </div> | |
| <!-- Staking Tab Content --> | |
| <div id="staking" class="tab-content active p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold text-gray-800">Available Staking Pools</h3> | |
| <div class="relative"> | |
| <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"> | |
| <option>All Assets</option> | |
| <option>BTC</option> | |
| <option>ETH</option> | |
| <option>SOL</option> | |
| <option>ADA</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- BTC Staking Pool --> | |
| <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 staking-card"> | |
| <div class="flex justify-between items-start"> | |
| <div class="flex items-center"> | |
| <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"> | |
| <div> | |
| <h4 class="font-bold">Bitcoin</h4> | |
| <p class="text-gray-500 text-sm">BTC</p> | |
| </div> | |
| </div> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-500">APY</span> | |
| <span class="font-medium">5.25%</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-500">Lock Period</span> | |
| <span class="font-medium">90 days</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-4"> | |
| <span class="text-gray-500">Min. Amount</span> | |
| <span class="font-medium">0.01 BTC</span> | |
| </div> | |
| <div class="progress-bar mb-4"> | |
| <div class="progress-fill" style="width: 78%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mb-4"> | |
| <span>Available: 12.5 BTC</span> | |
| <span>Total: 16 BTC</span> | |
| </div> | |
| <button onclick="switchTab('deposit')" class="w-full gradient-bg text-white py-3 rounded-lg font-medium hover:opacity-90 transition"> | |
| Deposit Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- ETH Staking Pool --> | |
| <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 staking-card"> | |
| <div class="flex justify-between items-start"> | |
| <div class="flex items-center"> | |
| <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"> | |
| <div> | |
| <h4 class="font-bold">Ethereum</h4> | |
| <p class="text-gray-500 text-sm">ETH</p> | |
| </div> | |
| </div> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-500">APY</span> | |
| <span class="font-medium">4.75%</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-500">Lock Period</span> | |
| <span class="font-medium">60 days</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-4"> | |
| <span class="text-gray-500">Min. Amount</span> | |
| <span class="font-medium">0.1 ETH</span> | |
| </div> | |
| <div class="progress-bar mb-4"> | |
| <div class="progress-fill" style="width: 65%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mb-4"> | |
| <span>Available: 245 ETH</span> | |
| <span>Total: 375 ETH</span> | |
| </div> | |
| <button onclick="showDepositAddress('eth')" class="w-full gradient-bg text-white py-3 rounded-lg font-medium hover:opacity-90 transition"> | |
| Deposit Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- SOL Staking Pool --> | |
| <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 staking-card"> | |
| <div class="flex justify-between items-start"> | |
| <div class="flex items-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/en/b/b9/Solana_logo.png" alt="SOL" class="w-10 h-10 mr-3"> | |
| <div> | |
| <h4 class="font-bold">Solana</h4> | |
| <p class="text-gray-500 text-sm">SOL</p> | |
| </div> | |
| </div> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-500">APY</span> | |
| <span class="font-medium">7.20%</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-500">Lock Period</span> | |
| <span class="font-medium">30 days</span> | |
| </div> | |
| <div class="flex justify-between text-sm mb-4"> | |
| <span class="text-gray-500">Min. Amount</span> | |
| <span class="font-medium">5 SOL</span> | |
| </div> | |
| <div class="progress-bar mb-4"> | |
| <div class="progress-fill" style="width: 92%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mb-4"> | |
| <span>Available: 1,250 SOL</span> | |
| <span>Total: 1,350 SOL</span> | |
| </div> | |
| <button onclick="showDepositAddress('sol')" class="w-full gradient-bg text-white py-3 rounded-lg font-medium hover:opacity-90 transition"> | |
| Deposit Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Deposit Tab Content --> | |
| <div id="deposit" class="tab-content p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold text-gray-800">Deposit Crypto</h3> | |
| <div class="relative"> | |
| <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"> | |
| <option value="">Select Asset</option> | |
| <option value="btc">BTC</option> | |
| <option value="eth">ETH</option> | |
| <option value="sol">SOL</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Deposit Address Card --> | |
| <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6"> | |
| <h4 class="font-bold text-gray-800 mb-4">Deposit Address</h4> | |
| <div id="btc-address" class="address-content"> | |
| <div class="text-sm text-gray-600 mb-4"> | |
| <p class="mb-2"><i class="fas fa-info-circle mr-2 text-purple-600"></i> Send only BTC to this address</p> | |
| <p><i class="fas fa-clock mr-2 text-purple-600"></i> Network confirmations required: 3</p> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Amount to Stake</label> | |
| <div class="relative rounded-md shadow-sm"> | |
| <input type="number" id="btc-amount" placeholder="0.00" class="block w-full pr-12 pl-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> | |
| <span class="text-gray-500 sm:text-sm">BTC</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <p class="text-sm font-mono break-all">bc1qxy2kgdygjrsqtzq2n0yrf2493w83f6u5hha40c</p> | |
| </div> | |
| <button onclick="copyAddress('btc')" class="w-full bg-purple-600 text-white py-2 rounded-md font-medium hover:bg-purple-700 transition"> | |
| Copy Address | |
| </button> | |
| </div> | |
| <div id="eth-address" class="address-content hidden"> | |
| <div class="text-sm text-gray-600 mb-4"> | |
| <p class="mb-2"><i class="fas fa-info-circle mr-2 text-purple-600"></i> Send only ETH to this address</p> | |
| <p><i class="fas fa-clock mr-2 text-purple-600"></i> Network confirmations required: 12</p> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Amount to Stake</label> | |
| <div class="relative rounded-md shadow-sm"> | |
| <input type="number" id="eth-amount" placeholder="0.00" class="block w-full pr-12 pl-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> | |
| <span class="text-gray-500 sm:text-sm">ETH</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <p class="text-sm font-mono break-all">0x71C7656EC7ab88b098defB751B7401B5f6d8976F</p> | |
| </div> | |
| <button onclick="copyAddress('eth')" class="w-full bg-purple-600 text-white py-2 rounded-md font-medium hover:bg-purple-700 transition"> | |
| Copy Address | |
| </button> | |
| </div> | |
| <div id="sol-address" class="address-content hidden"> | |
| <div class="text-sm text-gray-600 mb-4"> | |
| <p class="mb-2"><i class="fas fa-info-circle mr-2 text-purple-600"></i> Send only SOL to this address</p> | |
| <p><i class="fas fa-clock mr-2 text-purple-600"></i> Network confirmations required: 1</p> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Amount to Stake</label> | |
| <div class="relative rounded-md shadow-sm"> | |
| <input type="number" id="sol-amount" placeholder="0.00" class="block w-full pr-12 pl-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> | |
| <span class="text-gray-500 sm:text-sm">SOL</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <p class="text-sm font-mono break-all">HN5XkCzZiuH3z8ZzhYQH5RfK8mJZ3Yq3X7Xq5vL9J2K</p> | |
| </div> | |
| <button onclick="copyAddress('sol')" class="w-full bg-purple-600 text-white py-2 rounded-md font-medium hover:bg-purple-700 transition"> | |
| Copy Address | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Deposit Instructions --> | |
| <div> | |
| <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 mb-6"> | |
| <h4 class="font-bold text-gray-800 mb-4">Deposit Instructions</h4> | |
| <ol class="list-decimal list-inside space-y-3 text-sm text-gray-700"> | |
| <li>Select the asset you want to deposit</li> | |
| <li>Enter the amount you wish to deposit</li> | |
| <li>Confirm the transaction in your wallet</li> | |
| <li>Wait for network confirmations (typically 10-30 minutes)</li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gradient-to-r from-purple-900 to-black text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">CryptoStake</h3> | |
| <p class="text-gray-400 text-sm">The most secure platform for staking your cryptocurrencies and earning passive income.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Company</h4> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li><a href="#" class="hover:text-white">About Us</a></li> | |
| <li><a href="#" class="hover:text-white">Careers</a></li> | |
| <li><a href="#" class="hover:text-white">Blog</a></li> | |
| <li><a href="#" class="hover:text-white">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Support</h4> | |
| <ul class="space-y-2 text-sm text-gray-400"> | |
| <li><a href="#" class="hover:text-white">Help Center</a></li> | |
| <li><a href="#" class="hover:text-white">Contact Us</a></li> | |
| <li><a href="#" class="hover:text-white">Status</a></li> | |
| <li><a href="#" class="hover:text-white">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Connect With Us</h4> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-purple-600"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-purple-600"> | |
| <i class="fab fa-telegram"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-purple-600"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-purple-600"> | |
| <i class="fab fa-medium"></i> | |
| </a> | |
| </div> | |
| <p class="text-sm text-gray-400">Subscribe to our newsletter</p> | |
| <div class="mt-2 flex"> | |
| <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"> | |
| <button class="bg-purple-600 text-white px-3 py-2 rounded-r text-sm hover:bg-purple-700"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-sm text-gray-400"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p>© 2023 CryptoStake. All rights reserved.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="hover:text-white">Terms of Service</a> | |
| <a href="#" class="hover:text-white">Privacy Policy</a> | |
| <a href="#" class="hover:text-white">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Asset calculation functionality | |
| function calculateTotalAssets() { | |
| let totalAssets = 0; | |
| const assetItems = document.querySelectorAll('.asset-item'); | |
| assetItems.forEach(item => { | |
| const amountInput = item.querySelector('.coin-amount'); | |
| const priceInput = item.querySelector('.coin-price'); | |
| const coinTotalSpan = item.querySelector('.coin-total'); | |
| const amount = parseFloat(amountInput.value) || 0; | |
| const price = parseFloat(priceInput.value) || 0; | |
| const coinTotal = amount * price; | |
| coinTotalSpan.textContent = coinTotal.toFixed(2); | |
| totalAssets += coinTotal; | |
| }); | |
| const totalAssetsElement = document.getElementById('total-assets'); | |
| totalAssetsElement.textContent = `${totalAssets.toFixed(2)}`; | |
| } | |
| function addAssetInput() { | |
| const assetList = document.getElementById('asset-list'); | |
| const newAssetItem = document.createElement('div'); | |
| newAssetItem.classList.add('asset-item', 'grid', 'grid-cols-4', 'gap-4', 'items-center'); | |
| newAssetItem.innerHTML = ` | |
| <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"> | |
| <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"> | |
| <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"> | |
| <span class="coin-total text-right font-medium">0.00</span> | |
| `; | |
| assetList.appendChild(newAssetItem); | |
| const newAmountInput = newAssetItem.querySelector('.coin-amount'); | |
| const newPriceInput = newAssetItem.querySelector('.coin-price'); | |
| newAmountInput.addEventListener('input', calculateTotalAssets); | |
| newPriceInput.addEventListener('input', calculateTotalAssets); | |
| } | |
| // Initialize event listeners for existing inputs | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const initialAmountInputs = document.querySelectorAll('.coin-amount'); | |
| const initialPriceInputs = document.querySelectorAll('.coin-price'); | |
| initialAmountInputs.forEach(input => { | |
| input.addEventListener('input', calculateTotalAssets); | |
| }); | |
| initialPriceInputs.forEach(input => { | |
| input.addEventListener('input', calculateTotalAssets); | |
| }); | |
| // Initialize with BTC address shown by default | |
| showSelectedAddress('btc'); | |
| }); | |
| // Tab switching functionality | |
| function switchTab(tabId) { | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(content => { | |
| content.classList.remove('active'); | |
| }); | |
| // Remove active class from all tab buttons | |
| document.querySelectorAll('.tab-btn').forEach(btn => { | |
| btn.classList.remove('border-purple-600', 'text-purple-600'); | |
| btn.classList.add('text-gray-500'); | |
| }); | |
| // Show selected tab content | |
| document.getElementById(tabId).classList.add('active'); | |
| // Add active class to clicked tab button if it exists (for programmatic calls) | |
| if (event && event.currentTarget) { | |
| event.currentTarget.classList.remove('text-gray-500'); | |
| event.currentTarget.classList.add('border-purple-600', 'text-purple-600'); | |
| } else { | |
| // For programmatic calls, activate the corresponding tab button | |
| const tabBtn = document.querySelector(`[onclick="switchTab('${tabId}')"]`); | |
| if (tabBtn) { | |
| tabBtn.classList.remove('text-gray-500'); | |
| tabBtn.classList.add('border-purple-600', 'text-purple-600'); | |
| } | |
| } | |
| } | |
| // Switch to deposit tab and show selected asset address | |
| function showDepositAddress(asset) { | |
| switchTab('deposit'); | |
| document.querySelector('#asset-select').value = asset; | |
| showSelectedAddress(asset); | |
| document.getElementById('deposit').scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Show selected address based on asset | |
| function showSelectedAddress(asset) { | |
| // Hide all address contents | |
| document.querySelectorAll('.address-content').forEach(el => { | |
| el.classList.add('hidden'); | |
| }); | |
| // Show selected address | |
| if (asset) { | |
| document.getElementById(`${asset}-address`).classList.remove('hidden'); | |
| } | |
| } | |
| // Copy address to clipboard | |
| function copyAddress(asset) { | |
| let address = ''; | |
| let amount = 0; | |
| if (asset === 'btc') { | |
| address = 'bc1qxy2kgdygjrsqtzq2n0yrf2493w83f6u5hha40c'; | |
| amount = document.getElementById('btc-amount').value; | |
| } else if (asset === 'eth') { | |
| address = '0x71C7656EC7ab88b098defB751B7401B5f6d8976F'; | |
| amount = document.getElementById('eth-amount').value; | |
| } else if (asset === 'sol') { | |
| address = 'HN5XkCzZiuH3z8ZzhYQH5RfK8mJZ3Yq3X7Xq5vL9J2K'; | |
| amount = document.getElementById('sol-amount').value; | |
| } | |
| if (!amount || parseFloat(amount) <= 0) { | |
| alert('Please enter a valid amount to stake'); | |
| return; | |
| } | |
| navigator.clipboard.writeText(address).then(() => { | |
| alert(`Address copied to clipboard!\nYou are staking ${amount} ${asset.toUpperCase()}`); | |
| // Automatically switch to portfolio tab after copying | |
| setTimeout(() => { | |
| switchTab('portfolio'); | |
| }, 1000); | |
| }).catch(err => { | |
| console.error('Failed to copy address: ', err); | |
| }); | |
| } | |
| // Initialize with BTC address shown by default | |
| document.addEventListener('DOMContentLoaded', function() { | |
| showSelectedAddress('btc'); | |
| }); | |
| </script> | |
| <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> | |
| </html> |