generated from dellevin/template
240 lines
9.9 KiB
HTML
240 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='font-awesome.css') }}">
|
|
<title>Base64 编码/解码</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
background: #f5f5f5;
|
|
color: #333;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
display: flex;
|
|
}
|
|
/* 左侧面板 */
|
|
.left-panel {
|
|
width: 50%; flex-shrink: 0;
|
|
display: flex; flex-direction: column;
|
|
border-right: 1px solid #e8e8e8;
|
|
background: #fff; height: 100vh;
|
|
overflow-y: auto;
|
|
}
|
|
.left-panel::-webkit-scrollbar { width: 4px; }
|
|
.left-panel::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
|
|
.input-section { padding: 20px 24px 28px; flex: 1; display: flex; flex-direction: column; }
|
|
|
|
/* 头部 */
|
|
.header { display: flex; align-items: center; margin-bottom: 2px; }
|
|
.header h1 { font-size: 18px; font-weight: 700; color: #1a1a1a; letter-spacing: -0.01em; }
|
|
.subtitle { color: #aaa; font-size: 12px; margin-bottom: 16px; }
|
|
|
|
/* 分组卡片 */
|
|
.section-card {
|
|
background: #fafafa; border: 1px solid #f0f0f0;
|
|
border-radius: 10px; padding: 14px 16px; margin-bottom: 12px;
|
|
}
|
|
.section-title {
|
|
font-size: 11px; font-weight: 600; color: #999;
|
|
text-transform: uppercase; letter-spacing: 0.06em;
|
|
margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
|
|
}
|
|
.section-title i { font-size: 11px; }
|
|
|
|
/* textarea */
|
|
.text-input {
|
|
width: 100%; padding: 10px 12px;
|
|
border: 1px solid #e0e0e0; border-radius: 6px;
|
|
font-size: 13px; outline: none; resize: vertical;
|
|
font-family: inherit; transition: border-color 0.15s;
|
|
line-height: 1.6;
|
|
}
|
|
.text-input:focus { border-color: #0078d4; box-shadow: 0 0 0 2px rgba(0,120,212,0.06); }
|
|
.text-input[readonly] { background: #f9f9f9; color: #555; }
|
|
|
|
/* 按钮 */
|
|
.btn {
|
|
padding: 7px 14px; border: none; border-radius: 6px;
|
|
font-size: 12px; font-weight: 600; cursor: pointer;
|
|
transition: all 0.12s ease;
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
}
|
|
.btn-primary { background: #0078d4; color: #fff; }
|
|
.btn-primary:hover { background: #006cbd; }
|
|
.btn-success { background: #0a7a1a; color: #fff; }
|
|
.btn-success:hover { background: #096b16; }
|
|
.btn-outline { background: #fff; color: #666; border: 1px solid #e0e0e0; }
|
|
.btn-outline:hover { background: #f5f5f5; color: #333; }
|
|
.btn-row { display: flex; gap: 8px; }
|
|
|
|
/* 操作按钮 */
|
|
.action-btn {
|
|
width: 100%; padding: 10px 18px;
|
|
border: none; border-radius: 8px;
|
|
font-size: 14px; font-weight: 600; cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
display: flex; align-items: center; justify-content: center; gap: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,120,212,0.2);
|
|
}
|
|
.action-btn:hover { transform: translateY(-1px); }
|
|
.action-btn:active { transform: translateY(0); }
|
|
.action-btn.encode {
|
|
background: linear-gradient(135deg, #0078d4, #005fa3); color: #fff;
|
|
}
|
|
.action-btn.encode:hover { box-shadow: 0 4px 12px rgba(0,120,212,0.3); }
|
|
.action-btn.decode {
|
|
background: linear-gradient(135deg, #0a7a1a, #065f12); color: #fff;
|
|
}
|
|
.action-btn.decode:hover { box-shadow: 0 4px 12px rgba(10,122,26,0.3); }
|
|
|
|
/* 右侧面板 */
|
|
.right-panel {
|
|
flex: 1; background: #fff;
|
|
display: flex; flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
.right-header {
|
|
padding: 20px 24px 16px;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
}
|
|
.right-header h2 { font-size: 15px; font-weight: 600; color: #333; }
|
|
.result-body {
|
|
flex: 1; display: flex; flex-direction: column;
|
|
padding: 0 24px 24px; gap: 12px;
|
|
}
|
|
.result-body textarea { flex: 1; min-height: 0; }
|
|
|
|
/* Toast */
|
|
.toast {
|
|
position: fixed; top: 20px; left: 50%;
|
|
transform: translateX(-50%);
|
|
background: #0a7a1a; color: #fff;
|
|
padding: 10px 24px; border-radius: 8px;
|
|
font-size: 13px; font-weight: 500;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
opacity: 0; transition: opacity 0.3s;
|
|
z-index: 9999; pointer-events: none;
|
|
}
|
|
.toast.show { opacity: 1; }
|
|
|
|
@media (max-width: 768px) {
|
|
body { flex-direction: column; height: auto; overflow: auto; }
|
|
.left-panel { width: 100% !important; height: auto; border-right: none; border-bottom: 1px solid #e8e8e8; overflow-y: visible; }
|
|
.right-panel { height: auto; min-height: 50vh; }
|
|
.input-section { padding: 14px 16px 20px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<!-- 左侧：输入 -->
|
|
<div class="left-panel">
|
|
<div class="input-section">
|
|
<div class="header">
|
|
<h1><i class="fas fa-lock" style="color:#0078d4;font-size:16px;margin-right:6px;"></i>Base64 编码/解码</h1>
|
|
</div>
|
|
<p class="subtitle">文本与 Base64 互转</p>
|
|
|
|
<div class="section-card" style="flex:1;display:flex;flex-direction:column;">
|
|
<div class="section-title"><i class="fas fa-pen"></i> 输入文本</div>
|
|
<textarea id="inputText" class="text-input" placeholder="在此粘贴待处理的文本..." style="flex:1;min-height:200px;"></textarea>
|
|
<div class="btn-row" style="margin-top:10px;">
|
|
<button class="btn btn-outline" onclick="clearEl('inputText')"><i class="fas fa-times-circle"></i> 清空</button>
|
|
</div>
|
|
<div style="display:flex;gap:8px;margin-top:12px;">
|
|
<button class="action-btn encode" onclick="doProcess('encode')" style="flex:1;">
|
|
<i class="fas fa-lock"></i> 编码
|
|
</button>
|
|
<button class="action-btn decode" onclick="doProcess('decode')" style="flex:1;">
|
|
<i class="fas fa-lock-open"></i> 解码
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：输出 -->
|
|
<div class="right-panel">
|
|
<div class="right-header">
|
|
<h2><i class="fas fa-check-circle" style="color:#0078d4;margin-right:6px;"></i>输出结果</h2>
|
|
<button class="btn btn-outline" onclick="copyResult()"><i class="fas fa-copy"></i> 复制</button>
|
|
</div>
|
|
<div class="result-body">
|
|
<textarea id="outputResult" class="text-input" readonly placeholder="处理结果将显示在这里..."></textarea>
|
|
<div class="btn-row">
|
|
<button class="btn btn-outline" onclick="clearEl('outputResult')"><i class="fas fa-times-circle"></i> 清空</button>
|
|
<button class="btn btn-outline" onclick="swapIO()"><i class="fas fa-arrow-right-arrow-left"></i> 结果互换到输入</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showToast(msg) {
|
|
var t = document.getElementById('toast');
|
|
t.textContent = msg;
|
|
t.className = 'toast show';
|
|
setTimeout(function() { t.className = 'toast'; }, 1500);
|
|
}
|
|
|
|
function clearEl(id) { document.getElementById(id).value = ''; }
|
|
|
|
function swapIO() {
|
|
var out = document.getElementById('outputResult').value;
|
|
if (!out) { showToast('没有内容可互换'); return; }
|
|
document.getElementById('inputText').value = out;
|
|
document.getElementById('outputResult').value = '';
|
|
showToast('已移到输入框');
|
|
}
|
|
|
|
async function doProcess(mode) {
|
|
var text = document.getElementById('inputText').value.trim();
|
|
if (!text) { showToast('请输入文本'); return; }
|
|
|
|
var endpoint, payload;
|
|
if (mode === 'encode') {
|
|
endpoint = '/base64-de-in-code/encode';
|
|
payload = { text_to_encode: text, encoding: 'utf-8' };
|
|
} else {
|
|
endpoint = '/base64-de-in-code/decode';
|
|
payload = { input_text: text };
|
|
}
|
|
|
|
try {
|
|
var res = await fetch(endpoint, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
var data = await res.json();
|
|
document.getElementById('outputResult').value = data.success ? data.result : '错误: ' + data.error;
|
|
} catch (e) {
|
|
document.getElementById('outputResult').value = '请求失败: ' + e.message;
|
|
}
|
|
}
|
|
|
|
function copyResult() {
|
|
var text = document.getElementById('outputResult').value;
|
|
if (!text) { showToast('没有内容可复制'); return; }
|
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
navigator.clipboard.writeText(text).then(function() { showToast('已复制'); });
|
|
} else {
|
|
var ta = document.createElement('textarea');
|
|
ta.value = text;
|
|
ta.style.cssText = 'position:fixed;left:-9999px';
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(ta);
|
|
showToast('已复制');
|
|
}
|
|
}
|
|
|
|
document.getElementById('inputText').focus();
|
|
</script>
|
|
</body>
|
|
</html>
|