xiaji/temp-file-trans
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): polished status page with file size, expiry and traffic info cards

Browse Source
This commit is contained in:
OpenCode Bot
2026-05-11 21:29:07 +08:00
parent 37989db6ae
commit a9c2b69112
1 changed files with 103 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
templates/index.html
View File

@@ -6,9 +6,83 @@
<title>临时文件传输</title> <title>临时文件传输</title>
<style> <style>
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { margin: 0; padding: 0; } body {
.container { width: auto; height: auto; overflow: visible; } font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
h1 { font-size: 16px; color: #333; height: auto; overflow: visible; } background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background: rgba(255,255,255,0.95);
padding: 40px 50px;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
text-align: center;
max-width: 480px;
}
.status-dot {
width: 12px;
height: 12px;
background: #4ade80;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
h1 {
font-size: 24px;
color: #1e293b;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.info-cards {
display: flex;
gap: 12px;
margin-bottom: 16px;
}
.info-card {
flex: 1;
background: #f1f5f9;
padding: 16px 12px;
border-radius: 8px;
}
.info-card .icon {
font-size: 28px;
margin-bottom: 6px;
}
.info-card .label {
font-size: 12px;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-card .value {
font-size: 16px;
font-weight: 600;
color: #334155;
}
.api-hint {
font-size: 13px;
color: #94a3b8;
margin-top: 8px;
line-height: 1.6;
}
.api-hint code {
background: #e2e8f0;
padding: 2px 6px;
border-radius: 3px;
font-size: 12px;
color: #475569;
}
.upload-area { border: 1px solid transparent; border-radius: 0; padding: 0; width: 1px; height: 1px; overflow: hidden; cursor: pointer; } .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:hover, .upload-area.dragover { border-color: transparent; background: transparent; }
.upload-area input { display: none; } .upload-area input { display: none; }
@@ -26,7 +100,31 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>服务正在运行中</h1> <h1><span class="status-dot"></span>服务正在运行中</h1>
<div class="info-cards">
<div class="info-card">
<div class="icon">📦</div>
<div class="label">最大文件大小</div>
<div class="value">500 MB</div>
</div>
<div class="info-card">
<div class="icon">⏳</div>
<div class="label">最长保存时间</div>
<div class="value">7 天</div>
</div>
<div class="info-card">
<div class="icon">📊</div>
<div class="label">每日流量限制</div>
<div class="value">20 GB / IP</div>
</div>
</div>
<div class="api-hint">
上传方式：API 调用 <code>POST /api/upload</code> 或使用 <code>upload_client.py</code><br>
过期选项：<code>1h</code> / <code>24h</code> / <code>7d</code>
</div>
<div class="upload-area" id="uploadArea"> <div class="upload-area" id="uploadArea">
<input type="file" id="fileInput"> <input type="file" id="fileInput">
<p>点击或拖拽文件到此处</p> <p>点击或拖拽文件到此处</p>
@@ -121,4 +219,4 @@
} }
</script> </script>
</body> </body>
</html> </html>