generated from dellevin/template
149 lines
5.0 KiB
HTML
149 lines
5.0 KiB
HTML
<!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> |