metamask.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Connect to MetaMask</title>
</head>
<body>
    <h2>MetaMask Wallet Connection</h2>
    <button id="connectButton">Connect to MetaMask</button>
    <p id="account"></p>

    <script>
        const connectButton = document.getElementById('connectButton');
        const accountParagraph = document.getElementById('account');

        connectButton.addEventListener('click', async () => {
            if (typeof window.ethereum !== 'undefined') {
                try {
                    // Request account access
                    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
                    const account = accounts[0];
                    accountParagraph.innerText = `Connected Account: ${account}`;
                } catch (error) {
                    console.error('Error connecting to MetaMask', error);
                    accountParagraph.innerText = `Error: ${error.message}`;
                }
            } else {
                accountParagraph.innerText = "MetaMask is not installed!";
            }
        });
    </script>
</body>
</html>