From a9c2b691129560f04b212085000f2577bf5d935d Mon Sep 17 00:00:00 2001
From: OpenCode Bot <bot@example.com>
Date: Mon, 11 May 2026 21:29:07 +0800
Subject: [PATCH] feat(ui): polished status page with file size, expiry and
 traffic info cards

---
 templates/index.html | 108 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 103 insertions(+), 5 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index f380d23..982c7bb 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,9 +6,83 @@
     <title>临时文件传输</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { margin: 0; padding: 0; }
-        .container { width: auto; height: auto; overflow: visible; }
-        h1 { font-size: 16px; color: #333; height: auto; overflow: visible; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            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:hover, .upload-area.dragover { border-color: transparent; background: transparent; }
         .upload-area input { display: none; }
@@ -26,7 +100,31 @@
 </head>
 <body>
     <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">
             <input type="file" id="fileInput">
             <p>点击或拖拽文件到此处</p>
@@ -121,4 +219,4 @@
         }
     </script>
 </body>
-</html>
+</html>
\ No newline at end of file
