编码解码网站

2026-01-28 21:36:52 +08:00
parent 4e0b07b032
commit b476404e34
8 changed files with 375 additions and 3 deletions
--- a/2.base64-de-in-code/templates/en-de-code-index.html
+++ b/2.base64-de-in-code/templates/en-de-code-index.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Base64/编码检测与解码器 (Flask)</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>