Can you build me a Standalone html css js of a web3 modal without sdk project ID just a html that i can attach or add to any html where on click Connect modal pop up like the renown app kit wallet connect stimulation on app
d496e50 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Web3 Wallet Connect</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .modal { | |
| animation: fadeIn 0.3s ease-out forwards; | |
| } | |
| .wallet-option:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .wallet-option { | |
| transition: all 0.2s ease; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Connect Button (Can be placed anywhere in your project) --> | |
| <button id="connectWalletBtn" class="fixed bottom-8 right-8 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-full shadow-lg flex items-center gap-2"> | |
| <i class="fas fa-wallet"></i> Connect Wallet | |
| </button> | |
| <!-- Web3 Modal --> | |
| <div id="web3Modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4"> | |
| <div class="modal bg-white rounded-xl max-w-md w-full p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold text-gray-900">Connect Wallet</h3> | |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-3 mb-6"> | |
| <div class="wallet-option flex items-center p-4 border border-gray-200 rounded-lg cursor-pointer" data-wallet="metamask"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg" alt="MetaMask" class="w-8 h-8 mr-3"> | |
| <span class="font-medium">MetaMask</span> | |
| </div> | |
| <div class="wallet-option flex items-center p-4 border border-gray-200 rounded-lg cursor-pointer" data-wallet="walletconnect"> | |
| <img src="https://walletconnect.com/_next/static/media/logo_mark.84dd8525.svg" alt="WalletConnect" class="w-8 h-8 mr-3"> | |
| <span class="font-medium">WalletConnect</span> | |
| </div> | |
| <div class="wallet-option flex items-center p-4 border border-gray-200 rounded-lg cursor-pointer" data-wallet="coinbase"> | |
| <img src="https://assets.coinbase.com/assets/6c17ad7b338573e00b2cae0f06a9b9d1b3b1f6c9f16eda59cc1e0cb8f1439e1.svg" alt="Coinbase Wallet" class="w-8 h-8 mr-3"> | |
| <span class="font-medium">Coinbase Wallet</span> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 text-center"> | |
| By connecting your wallet, you agree to our <a href="#" class="text-indigo-600">Terms</a> and <a href="#" class="text-indigo-600">Privacy Policy</a>. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Connection Status Modal --> | |
| <div id="connectionStatus" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4"> | |
| <div class="modal bg-white rounded-xl max-w-md w-full p-6 text-center"> | |
| <div id="statusIcon" class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center bg-indigo-100"> | |
| <i id="statusIconSymbol" class="fas fa-spinner fa-spin text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 id="statusTitle" class="text-xl font-bold text-gray-900 mb-2">Connecting...</h3> | |
| <p id="statusMessage" class="text-gray-600 mb-6">Please confirm the connection in your wallet</p> | |
| <button id="statusCloseBtn" class="hidden w-full py-2 px-4 border border-gray-300 rounded-lg text-gray-700 font-medium">Close</button> | |
| </div> | |
| </div> | |
| <script> | |
| // Modal Toggle | |
| const connectBtn = document.getElementById('connectWalletBtn'); | |
| const web3Modal = document.getElementById('web3Modal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const walletOptions = document.querySelectorAll('.wallet-option'); | |
| const connectionStatus = document.getElementById('connectionStatus'); | |
| const statusCloseBtn = document.getElementById('statusCloseBtn'); | |
| // Open modal | |
| connectBtn.addEventListener('click', () => { | |
| web3Modal.classList.remove('hidden'); | |
| web3Modal.classList.add('flex'); | |
| }); | |
| // Close modal | |
| closeModal.addEventListener('click', () => { | |
| web3Modal.classList.add('hidden'); | |
| web3Modal.classList.remove('flex'); | |
| }); | |
| // Wallet selection | |
| walletOptions.forEach(option => { | |
| option.addEventListener('click', () => { | |
| const wallet = option.getAttribute('data-wallet'); | |
| web3Modal.classList.add('hidden'); | |
| showConnectionStatus(wallet); | |
| // Simulate wallet connection | |
| setTimeout(() => { | |
| updateConnectionStatus('success', `${wallet.charAt(0).toUpperCase() + wallet.slice(1)} Connected`, 'Your wallet has been successfully connected.'); | |
| statusCloseBtn.classList.remove('hidden'); | |
| connectWalletBtn.innerHTML = `<i class="fas fa-check-circle"></i> ${wallet.charAt(0).toUpperCase() + wallet.slice(1)}`; | |
| connectWalletBtn.classList.remove('bg-indigo-600'); | |
| connectWalletBtn.classList.add('bg-green-600'); | |
| }, 1500); | |
| }); | |
| }); | |
| // Close status modal | |
| statusCloseBtn.addEventListener('click', () => { | |
| connectionStatus.classList.add('hidden'); | |
| }); | |
| // Show connection status | |
| function showConnectionStatus(wallet) { | |
| connectionStatus.classList.remove('hidden'); | |
| connectionStatus.classList.add('flex'); | |
| const statusIcon = document.getElementById('statusIcon'); | |
| const statusIconSymbol = document.getElementById('statusIconSymbol'); | |
| const statusTitle = document.getElementById('statusTitle'); | |
| const statusMessage = document.getElementById('statusMessage'); | |
| statusIcon.className = 'w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center bg-indigo-100'; | |
| statusIconSymbol.className = 'fas fa-spinner fa-spin text-indigo-600 text-2xl'; | |
| statusTitle.textContent = `Connecting to ${wallet.charAt(0).toUpperCase() + wallet.slice(1)}...`; | |
| statusMessage.textContent = 'Please confirm the connection in your wallet'; | |
| statusCloseBtn.classList.add('hidden'); | |
| } | |
| // Update connection status | |
| function updateConnectionStatus(type, title, message) { | |
| const statusIcon = document.getElementById('statusIcon'); | |
| const statusIconSymbol = document.getElementById('statusIconSymbol'); | |
| const statusTitle = document.getElementById('statusTitle'); | |
| const statusMessage = document.getElementById('statusMessage'); | |
| if (type === 'success') { | |
| statusIcon.className = 'w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center bg-green-100'; | |
| statusIconSymbol.className = 'fas fa-check-circle text-green-600 text-2xl'; | |
| } else { | |
| statusIcon.className = 'w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center bg-red-100'; | |
| statusIconSymbol.className = 'fas fa-times-circle text-red-600 text-2xl'; | |
| } | |
| statusTitle.textContent = title; | |
| statusMessage.textContent = message; | |
| } | |
| // Close modals when clicking outside | |
| window.addEventListener('click', (e) => { | |
| if (e.target === web3Modal) { | |
| web3Modal.classList.add('hidden'); | |
| web3Modal.classList.remove('flex'); | |
| } | |
| if (e.target === connectionStatus) { | |
| connectionStatus.classList.add('hidden'); | |
| connectionStatus.classList.remove('flex'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |