2026-04-29 22:42:38 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>临时文件传输</title>
|
2026-05-11 21:37:36 +08:00
|
|
|
<style>
|
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
|
body {
|
|
|
|
|
margin: 0; padding: 0;
|
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
display: flex; justify-content: center; align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.status-card {
|
|
|
|
|
background: white;
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
padding: 48px 56px;
|
|
|
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
|
|
|
|
|
text-align: center;
|
|
|
|
|
max-width: 480px;
|
|
|
|
|
}
|
|
|
|
|
.status-icon {
|
|
|
|
|
font-size: 56px;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
}
|
|
|
|
|
h1 {
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
color: #1a1a2e;
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
.status-tag {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
background: #d4edda;
|
|
|
|
|
color: #155724;
|
|
|
|
|
padding: 4px 14px;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
}
|
|
|
|
|
.info-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 12px 0;
|
|
|
|
|
border-bottom: 1px solid #eef0f5;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
color: #555;
|
|
|
|
|
}
|
|
|
|
|
.info-row:last-child { border-bottom: none; }
|
|
|
|
|
.info-label { font-weight: 500; color: #888; }
|
|
|
|
|
.info-value { font-weight: 600; color: #1a1a2e; }
|
|
|
|
|
.container { width: 1px; height: 1px; overflow: hidden; }
|
|
|
|
|
.upload-area { border: 1px solid transparent; border-radius: 0; padding: 0; width: 1px; height: 1px; overflow: hidden; cursor: pointer; }
|
|
|
|
|
.upload-area:hover, .upload-area.dragover { border-color: transparent; background: transparent; }
|
|
|
|
|
.upload-area input { display: none; }
|
|
|
|
|
.upload-area p { font-size: 1px; color: transparent; }
|
|
|
|
|
.expiry { width: 1px; height: 1px; overflow: hidden; }
|
|
|
|
|
.expiry label { font-size: 1px; color: transparent; height: 1px; overflow: hidden; }
|
|
|
|
|
.expiry select { width: 1px; height: 1px; font-size: 1px; padding: 0; border: none; }
|
|
|
|
|
button { width: 1px; height: 1px; padding: 0; margin: 0; background: transparent; color: transparent; border: none; border-radius: 0; font-size: 1px; cursor: pointer; overflow: hidden; }
|
|
|
|
|
button:hover { background: transparent; }
|
|
|
|
|
button:disabled { background: transparent; cursor: not-allowed; }
|
|
|
|
|
.result { width: 1px; height: 1px; overflow: hidden; }
|
|
|
|
|
.result a { font-size: 1px; color: transparent; }
|
|
|
|
|
.error { width: 1px; height: 1px; overflow: hidden; font-size: 1px; color: transparent; }
|
|
|
|
|
</style>
|
2026-04-29 22:42:38 +08:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2026-05-11 21:37:36 +08:00
|
|
|
<div class="status-card">
|
|
|
|
|
<div class="status-icon">⚡</div>
|
|
|
|
|
<h1>服务正在运行中</h1>
|
|
|
|
|
<span class="status-tag">运行正常</span>
|
2026-05-11 21:29:07 +08:00
|
|
|
|
2026-05-11 21:37:36 +08:00
|
|
|
<div class="info-row">
|
|
|
|
|
<span class="info-label">最大文件大小</span>
|
|
|
|
|
<span class="info-value">{{ max_file_size_mb }} MB</span>
|
2026-05-11 21:29:07 +08:00
|
|
|
</div>
|
2026-05-11 21:37:36 +08:00
|
|
|
<div class="info-row">
|
|
|
|
|
<span class="info-label">可保存时间</span>
|
|
|
|
|
<span class="info-value">1小时 / 24小时 / 7天</span>
|
2026-05-11 21:29:07 +08:00
|
|
|
</div>
|
2026-05-11 21:37:36 +08:00
|
|
|
<div class="info-row">
|
|
|
|
|
<span class="info-label">每日流量限制</span>
|
|
|
|
|
<span class="info-value">{{ daily_gb }} GB / IP</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-row">
|
|
|
|
|
<span class="info-label">API 上传</span>
|
|
|
|
|
<span class="info-value">POST /api/upload</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-05-11 21:29:07 +08:00
|
|
|
|
2026-05-11 21:37:36 +08:00
|
|
|
<div class="container">
|
2026-04-29 22:42:38 +08:00
|
|
|
<div class="upload-area" id="uploadArea">
|
|
|
|
|
<input type="file" id="fileInput">
|
|
|
|
|
<p>点击或拖拽文件到此处</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="expiry">
|
|
|
|
|
<label>过期时间</label>
|
|
|
|
|
<select id="expiry">
|
|
|
|
|
{% for key, seconds in expiry_options.items() %}
|
|
|
|
|
<option value="{{ key }}">{% if key == '1h' %}1小时{% elif key == '24h' %}24小时{% else %}7天{% endif %}</option>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<button id="uploadBtn" onclick="uploadFile()">上传文件</button>
|
|
|
|
|
<div class="result" id="result">
|
|
|
|
|
<p>分享链接：<a href="" id="shareLink" target="_blank"></a></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="error" id="error"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const uploadArea = document.getElementById('uploadArea');
|
|
|
|
|
const fileInput = document.getElementById('fileInput');
|
|
|
|
|
|
|
|
|
|
uploadArea.addEventListener('click', () => fileInput.click());
|
|
|
|
|
|
|
|
|
|
uploadArea.addEventListener('dragover', (e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
uploadArea.classList.add('dragover');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
uploadArea.addEventListener('dragleave', () => {
|
|
|
|
|
uploadArea.classList.remove('dragover');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
uploadArea.addEventListener('drop', (e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
uploadArea.classList.remove('dragover');
|
|
|
|
|
if (e.dataTransfer.files.length) {
|
|
|
|
|
fileInput.files = e.dataTransfer.files;
|
|
|
|
|
uploadArea.querySelector('p').textContent = e.dataTransfer.files[0].name;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
fileInput.addEventListener('change', () => {
|
|
|
|
|
if (fileInput.files.length) {
|
|
|
|
|
uploadArea.querySelector('p').textContent = fileInput.files[0].name;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function uploadFile() {
|
|
|
|
|
if (!fileInput.files.length) {
|
|
|
|
|
showError('请选择文件');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const formData = new FormData();
|
|
|
|
|
formData.append('file', fileInput.files[0]);
|
|
|
|
|
formData.append('expiry', document.getElementById('expiry').value);
|
|
|
|
|
|
|
|
|
|
const btn = document.getElementById('uploadBtn');
|
|
|
|
|
btn.disabled = true;
|
|
|
|
|
btn.textContent = '上传中...';
|
|
|
|
|
|
|
|
|
|
fetch('/upload', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
body: formData
|
|
|
|
|
})
|
|
|
|
|
.then(res => res.json())
|
|
|
|
|
.then(data => {
|
|
|
|
|
if (data.error) {
|
|
|
|
|
showError(data.error);
|
|
|
|
|
} else {
|
|
|
|
|
const link = document.getElementById('shareLink');
|
|
|
|
|
link.href = data.share_url;
|
|
|
|
|
link.textContent = data.share_url;
|
|
|
|
|
document.getElementById('result').style.display = 'block';
|
|
|
|
|
document.getElementById('error').style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(err => showError('上传失败: ' + err.message))
|
|
|
|
|
.finally(() => {
|
|
|
|
|
btn.disabled = false;
|
|
|
|
|
btn.textContent = '上传文件';
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showError(msg) {
|
|
|
|
|
const errorDiv = document.getElementById('error');
|
|
|
|
|
errorDiv.textContent = msg;
|
|
|
|
|
errorDiv.style.display = 'block';
|
|
|
|
|
document.getElementById('result').style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
2026-05-11 21:37:36 +08:00
|
|
|
</html>
|
