Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BONK AI Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"> | |
| <style> | |
| body { | |
| font-family: 'Press Start 2P', 'Courier New', monospace; | |
| background-color: #1a1a2e; | |
| color: #ffffff; | |
| } | |
| .bonk-button { | |
| background-color: #FFD700; | |
| color: #000000; | |
| box-shadow: 0 4px 0 #b89b00; | |
| transition: all 0.2s; | |
| } | |
| .bonk-button:hover:not(:disabled) { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 0 #b89b00; | |
| } | |
| .bonk-button:active:not(:disabled) { | |
| transform: translateY(2px); | |
| box-shadow: 0 2px 0 #b89b00; | |
| } | |
| .bonk-button:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| .token-card { | |
| background: linear-gradient(135deg, #2a2d31 0%, #1e2023 100%); | |
| border-radius: 12px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .token-card.sol { | |
| border-top: 4px solid #00ffbd; | |
| } | |
| .token-card.bonk { | |
| border-top: 4px solid #FFD700; | |
| } | |
| .token-card.bonkai { | |
| border-top: 4px solid #5865F2; | |
| } | |
| .account-item { | |
| background-color: #2a2d31; | |
| border-left: 4px solid #FFD700; | |
| } | |
| .tab-active { | |
| color: #FFD700; | |
| border-bottom: 4px solid #FFD700; | |
| margin-bottom: -2px; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #2a2d31; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #FFD700; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #b89b00; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-12"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-black text-2xl">🐕</span> | |
| </div> | |
| <h1 class="text-2xl md:text-3xl text-yellow-400">BONK AI</h1> | |
| </div> | |
| <button id="connectWalletBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg transition-colors"> | |
| Connect Wallet | |
| </button> | |
| </header> | |
| <!-- Wallet Connect Prompt --> | |
| <div id="walletConnectPrompt" class="text-center mb-12 p-8 bg-gray-800 rounded-xl"> | |
| <h2 class="text-xl md:text-2xl text-yellow-400 mb-4">Connect your wallet to use the BONK Button</h2> | |
| <p class="text-gray-300 mb-6">Clean up your Solana wallet and recover SOL with just one click!</p> | |
| <button id="connectPromptBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3 rounded-lg transition-colors"> | |
| Connect Wallet | |
| </button> | |
| </div> | |
| <!-- Dashboard Content (hidden by default) --> | |
| <div id="dashboardContent" class="hidden"> | |
| <!-- Tabs --> | |
| <div class="flex border-b-2 border-gray-700 mb-8"> | |
| <button data-tab="dashboard" class="tab-active px-6 py-3 text-sm md:text-base">Dashboard</button> | |
| <button data-tab="bonkbutton" class="px-6 py-3 text-sm md:text-base text-gray-400 hover:text-yellow-400">BONK Button</button> | |
| <button data-tab="staking" class="px-6 py-3 text-sm md:text-base text-gray-400 hover:text-yellow-400">Staking</button> | |
| </div> | |
| <!-- Tab Content --> | |
| <div id="tabContent"> | |
| <!-- Dashboard Tab --> | |
| <div id="dashboardTab" class="tab-panel"> | |
| <h2 class="text-xl md:text-2xl text-yellow-400 mb-6">Wallet Overview</h2> | |
| <div id="walletAddress" class="bg-gray-800 p-4 rounded-lg mb-8 font-mono text-sm overflow-x-auto"> | |
| 0x0000...0000 | |
| </div> | |
| <!-- Balance Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <!-- SOL Balance --> | |
| <div class="token-card sol p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-teal-400 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-black">◎</span> | |
| </div> | |
| <h3 class="text-lg">SOL</h3> | |
| </div> | |
| <p id="solBalance" class="text-2xl font-bold">0.0000 SOL</p> | |
| </div> | |
| <!-- BONK Balance --> | |
| <div class="token-card bonk p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-yellow-400 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-black">🐕</span> | |
| </div> | |
| <h3 class="text-lg">BONK</h3> | |
| </div> | |
| <p id="bonkBalance" class="text-2xl font-bold">0 BONK</p> | |
| </div> | |
| <!-- BONKAI Balance --> | |
| <div class="token-card bonkai p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-black">🤖</span> | |
| </div> | |
| <h3 class="text-lg">BONKAI</h3> | |
| </div> | |
| <p id="bonkaiBalance" class="text-2xl font-bold">0 BONKAI</p> | |
| </div> | |
| </div> | |
| <!-- Account Stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-gray-800 p-6 rounded-lg"> | |
| <h4 class="text-gray-400 mb-2">Token Accounts</h4> | |
| <p id="accountCount" class="text-xl">0</p> | |
| </div> | |
| <div class="bg-gray-800 p-6 rounded-lg"> | |
| <h4 class="text-gray-400 mb-2">Estimated Rent</h4> | |
| <p id="estimatedRent" class="text-xl">0.000 SOL</p> | |
| </div> | |
| </div> | |
| <div class="bg-yellow-400 bg-opacity-10 border border-yellow-400 border-opacity-30 p-4 rounded-lg"> | |
| <p class="text-yellow-400 text-sm">💡 Use the BONK Button to clean up unused token accounts and recover SOL!</p> | |
| </div> | |
| </div> | |
| <!-- BONK Button Tab --> | |
| <div id="bonkButtonTab" class="tab-panel hidden"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-xl md:text-2xl text-yellow-400 mb-2">BONK Button</h2> | |
| <p class="text-gray-300">Clean up your wallet and recover SOL with one click!</p> | |
| </div> | |
| <!-- Error Message --> | |
| <div id="errorMessage" class="bg-red-900 bg-opacity-30 border border-red-500 p-4 rounded-lg mb-6 hidden"> | |
| <p id="errorText" class="text-red-300"></p> | |
| </div> | |
| <!-- Scan Results --> | |
| <div id="scanResults" class="hidden"> | |
| <h3 class="text-lg text-yellow-400 mb-4">Found <span id="closeableCount">0</span> closeable accounts:</h3> | |
| <div id="accountsList" class="max-h-96 overflow-y-auto mb-6 space-y-2 pr-2"> | |
| <!-- Account items will be added here --> | |
| </div> | |
| <button id="bonkItBtn" class="bonk-button px-8 py-4 text-lg font-bold rounded-lg mx-auto block"> | |
| BONK IT! | |
| </button> | |
| </div> | |
| <!-- Cleanup Complete --> | |
| <div id="cleanupComplete" class="hidden text-center bg-yellow-400 bg-opacity-10 border border-yellow-400 border-opacity-30 p-8 rounded-lg mb-6"> | |
| <h3 class="text-xl text-yellow-400 mb-4">BONK! Wallet Cleaned Successfully!</h3> | |
| <p class="mb-2">You've recovered approximately <span id="recoveredSol">0.000</span> SOL</p> | |
| <p class="mb-6">Your wallet is now cleaner and more efficient!</p> | |
| <button id="scanAgainBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg transition-colors"> | |
| Scan Again | |
| </button> | |
| </div> | |
| <!-- Initial Scan Button --> | |
| <div id="initialScan" class="text-center"> | |
| <button id="scanWalletBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-8 py-4 rounded-lg transition-colors text-lg font-bold"> | |
| Scan My Wallet | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Staking Tab --> | |
| <div id="stakingTab" class="tab-panel hidden"> | |
| <div class="text-center"> | |
| <h2 class="text-xl md:text-2xl text-yellow-400 mb-4">Coming Soon!</h2> | |
| <p class="text-gray-300">Staking functionality will be available soon.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="mt-16 pt-8 border-t border-gray-800 text-center text-gray-400 text-sm"> | |
| <p>BONK AI - The smart way to manage your Solana wallet</p> | |
| <p class="mt-2">© 2023 BONK AI. All rights reserved.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Mock wallet connection and data | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Tab switching | |
| const tabs = document.querySelectorAll('[data-tab]'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| // Update active tab | |
| tabs.forEach(t => t.classList.remove('tab-active', 'text-yellow-400')); | |
| tabs.forEach(t => t.classList.add('text-gray-400')); | |
| this.classList.add('tab-active', 'text-yellow-400'); | |
| this.classList.remove('text-gray-400'); | |
| // Show corresponding content | |
| document.querySelectorAll('.tab-panel').forEach(panel => { | |
| panel.classList.add('hidden'); | |
| }); | |
| document.getElementById(`${this.dataset.tab}Tab`).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Connect wallet buttons | |
| const connectButtons = ['connectWalletBtn', 'connectPromptBtn']; | |
| connectButtons.forEach(id => { | |
| document.getElementById(id).addEventListener('click', function() { | |
| // Mock wallet connection | |
| document.getElementById('walletConnectPrompt').classList.add('hidden'); | |
| document.getElementById('dashboardContent').classList.remove('hidden'); | |
| // Mock wallet address | |
| const walletAddress = '7sK...9fG'; | |
| document.getElementById('walletAddress').textContent = walletAddress; | |
| // Mock balances | |
| document.getElementById('solBalance').textContent = '1.2345 SOL'; | |
| document.getElementById('bonkBalance').textContent = '42,069,420 BONK'; | |
| document.getElementById('bonkaiBalance').textContent = '0 BONKAI'; | |
| document.getElementById('accountCount').textContent = '18'; | |
| document.getElementById('estimatedRent').textContent = '0.036 SOL'; | |
| // Change connect button text | |
| connectButtons.forEach(btnId => { | |
| document.getElementById(btnId).textContent = walletAddress; | |
| }); | |
| }); | |
| }); | |
| // BONK Button functionality | |
| let closeableAccounts = []; | |
| let selectedAccounts = []; | |
| // Scan wallet | |
| document.getElementById('scanWalletBtn').addEventListener('click', function() { | |
| // Show loading state | |
| this.innerHTML = '<span class="animate-pulse">Scanning...</span>'; | |
| this.disabled = true; | |
| // Mock API call | |
| setTimeout(() => { | |
| // Mock closeable accounts | |
| closeableAccounts = [ | |
| { address: 'TokenAcc1...', mint: 'Wrapped SOL', balance: '0.5', isWrappedSol: true }, | |
| { address: 'TokenAcc2...', mint: 'USDC', balance: '0', isWrappedSol: false }, | |
| { address: 'TokenAcc3...', mint: 'BONK', balance: '0', isWrappedSol: false }, | |
| { address: 'TokenAcc4...', mint: 'SAMO', balance: '0', isWrappedSol: false }, | |
| { address: 'TokenAcc5...', mint: 'Wrapped SOL', balance: '0.2', isWrappedSol: true } | |
| ]; | |
| // Reset scan button | |
| this.innerHTML = 'Scan My Wallet'; | |
| this.disabled = false; | |
| // Show results | |
| document.getElementById('initialScan').classList.add('hidden'); | |
| document.getElementById('scanResults').classList.remove('hidden'); | |
| document.getElementById('closeableCount').textContent = closeableAccounts.length; | |
| // Populate accounts list | |
| const accountsList = document.getElementById('accountsList'); | |
| accountsList.innerHTML = ''; | |
| closeableAccounts.forEach(account => { | |
| const accountItem = document.createElement('div'); | |
| accountItem.className = 'account-item p-4 rounded flex items-center'; | |
| accountItem.innerHTML = ` | |
| <input type="checkbox" class="mr-4 h-5 w-5" checked | |
| data-address="${account.address}"> | |
| <div> | |
| <div class="text-sm text-gray-300">${account.address}</div> | |
| <div class="text-xs text-yellow-400 font-bold">${account.isWrappedSol ? 'Wrapped SOL' : 'Empty Token Account'}</div> | |
| </div> | |
| `; | |
| accountsList.appendChild(accountItem); | |
| }); | |
| // Select all by default | |
| selectedAccounts = [...closeableAccounts.map(acc => acc.address)]; | |
| // Add event listeners to checkboxes | |
| document.querySelectorAll('#accountsList input[type="checkbox"]').forEach(checkbox => { | |
| checkbox.addEventListener('change', function() { | |
| const address = this.dataset.address; | |
| if (this.checked) { | |
| if (!selectedAccounts.includes(address)) { | |
| selectedAccounts.push(address); | |
| } | |
| } else { | |
| selectedAccounts = selectedAccounts.filter(acc => acc !== address); | |
| } | |
| // Disable BONK button if no accounts selected | |
| document.getElementById('bonkItBtn').disabled = selectedAccounts.length === 0; | |
| }); | |
| }); | |
| }, 1500); | |
| }); | |
| // BONK IT! button | |
| document.getElementById('bonkItBtn').addEventListener('click', function() { | |
| // Show loading state | |
| this.innerHTML = '<span class="animate-pulse">BONKING...</span>'; | |
| this.disabled = true; | |
| // Mock API call | |
| setTimeout(() => { | |
| // Hide results, show completion | |
| document.getElementById('scanResults').classList.add('hidden'); | |
| document.getElementById('cleanupComplete').classList.remove('hidden'); | |
| // Calculate estimated SOL recovered (0.002 SOL per account) | |
| const estimatedRecovery = selectedAccounts.length * 0.002; | |
| document.getElementById('recoveredSol').textContent = estimatedRecovery.toFixed(3); | |
| // Reset button | |
| this.innerHTML = 'BONK IT!'; | |
| this.disabled = false; | |
| }, 2000); | |
| }); | |
| // Scan again button | |
| document.getElementById('scanAgainBtn').addEventListener('click', function() { | |
| document.getElementById('cleanupComplete').classList.add('hidden'); | |
| document.getElementById('initialScan').classList.remove('hidden'); | |
| document.getElementById('scanResults').classList.add('hidden'); | |
| // Reset selections | |
| closeableAccounts = []; | |
| selectedAccounts = []; | |
| }); | |
| }); | |
| </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=ordlibrary/bonkbutton" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |