<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Base64/编码检测与解码器</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>

<!-- 页面标题和说明 -->
<div class="page-header">
    <h2>Base64 编码/解码器</h2>
    <p>因为其他网站base64解码都一坨屎，解码格式一直有问题，无法进行正常解码，要不然就是解码之后中文乱码了，所以写了这个demo</p>
    <p>接口地址：http(s)://网站域名/decode | http(s)://网站域名/encode</p>
</div>

<div class="container">
    <!-- 左侧面板 (输入) -->
    <div class="panel">
        <h2>输入(待编码/解码文本)</h2>
        <textarea
            id="inputText"
            placeholder="在此粘贴待处理的文本..."
            oninput="autoResize(this)"
        ></textarea>
        <div class="controls">
            <button type="button" onclick="clearTextarea('inputText')">清空</button>
            <button type="button" onclick="process('encode')">编码</button>
            <button type="button" onclick="process('decode')">解码</button>
        </div>
    </div>

    <!-- 右侧面板 (输出) -->
    <div class="panel">
        <h2>输出</h2>
        <textarea
            id="outputResult"
            readonly
            placeholder="处理结果将显示在这里..."
            oninput="autoResize(this)"
        ></textarea>
        <div class="controls">
            <button type="button" onclick="clearTextarea('outputResult')">清空</button>
            <button type="button" onclick="copyResult()">复制</button>
        </div>
    </div>
</div>

<script>
    // 自动调整 textarea 高度
    function autoResize(textarea) {
        textarea.style.height = 'auto';
        textarea.style.height = Math.min(textarea.scrollHeight, 400) + 'px'; // 最大高度400px
    }

    // 清空指定的 textarea
    function clearTextarea(id) {
        const element = document.getElementById(id);
        element.value = '';
        autoResize(element); // 清空后重置高度
    }

    // 主处理函数 (根据传入的 mode 决定是编码还是解码)
    async function process(mode) {
        const inputElement = document.getElementById('inputText');
        const outputResult = document.getElementById('outputResult');
        const inputValue = inputElement.value.trim();

        if (!inputValue) {
            alert('输入不能为空！');
            return;
        }

        let endpoint = '';
        let payload = {};

        if (mode === 'decode') {
            endpoint = '/decode';
            payload.input_text = inputValue;
        } else if (mode === 'encode') {
            endpoint = '/encode';
            payload.text_to_encode = inputValue;
            // 使用默认编码 UTF-8
            payload.encoding = 'utf-8';
        } else {
             alert('未知的处理模式');
             return;
        }

        try {
            const response = await fetch(endpoint, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });

            const data = await response.json();

            if (data.success) {
                outputResult.value = data.result;
                autoResize(outputResult); // 处理后调整高度
            } else {
                outputResult.value = `错误:  ${data.error}`;
                autoResize(outputResult);
            }
        } catch (error) {
            console.error(`请求失败:`, error);
            outputResult.value = `请求失败:  ${error.message}`;
            autoResize(outputResult);
        }
    }

    // 复制结果到剪贴板
    function copyResult() {
        const outputResult = document.getElementById('outputResult');
        if (outputResult.value === '') {
            alert('没有内容可复制！');
            return;
        }

        outputResult.select();
        outputResult.setSelectionRange(0, 99999); // 为了移动端兼容

        try {
            const successful = document.execCommand('copy');
            if (successful) {
                // 临时提示
                const originalText = document.querySelector('.panel:nth-child(2) .controls button:last-child').innerText;
                document.querySelector('.panel:nth-child(2) .controls button:last-child').innerText = '已复制!';
                setTimeout(() => {
                    document.querySelector('.panel:nth-child(2) .controls button:last-child').innerText = originalText;
                }, 2000);
            } else {
                alert('复制失败，请手动选择复制。');
            }
        } catch (err) {
            alert('浏览器不支持自动复制，请手动选择复制。');
        }
    }

    // 页面加载后聚焦到输入框
    window.onload = function() {
        document.getElementById('inputText').focus();
    };
</script>

</body>
</html>