<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OTP Verification Code Generator</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/otpauth.umd.min.js"></script>
</head>
<body>
    <div style="padding:20px;font-family:monospace;">
        <h2>🔐 OTP Verification Code</h2>
        <label>Secret Key (Base32):</label><br>
        <input id="secret" type="text" value="JBSWY3DPEHPK3PXP" style="width:300px;padding:8px;"><br><br>
        <div id="code" style="font-size:48px;font-weight:bold;letter-spacing:8px;">------</div>
        <div id="timer" style="font-size:24px;margin-top:10px;color:#666;"></div>
    </div>

    <script>
        const refreshTime = 30;

        function generateCode() {
            const secret = document.getElementById('secret').value.trim();
            if (!secret) return;

            const totp = new OTPAuth.TOTP({
                secret: OTPAuth.Secret.fromBase32(secret),
                digits: 6,
                period: refreshTime
            });
            document.getElementById('code').textContent = totp.generate();
        }

        function updateTimer() {
            const now = Math.floor(Date.now() / 1000);
            const remaining = refreshTime - (now % refreshTime);
            document.getElementById('timer').textContent = remaining + 's';
            if (remaining === refreshTime || remaining === 0) generateCode();
        }

        generateCode();
        setInterval(updateTimer, 1000);
        document.getElementById('secret').addEventListener('input', generateCode);
    </script>
</body>
</html>