feat(static): 优化静态网页样式排版

junlongzzz · Nov 13, 2024 · 59dc2c3 · 59dc2c3
1 parent f583b22
commit 59dc2c3
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 18 deletions.
diff --git a/static/generate_link.html b/static/generate_link.html
@@ -41,7 +41,7 @@
             display: inline-block;
         }
 
-        input[type="text"], input[type="datetime-local"], input[type="number"] {
+        input {
             width: calc(100% - 22px);
             padding: 10px;
             margin: 10px 0;
@@ -126,6 +126,20 @@
             max-width: 100%;
             overflow-wrap: break-word;
         }
+
+        footer {
+            text-align: center;
+            padding: 10px;
+        }
+
+        footer a {
+            color: #0366d6;
+            text-decoration: none;
+        }
+
+        footer a:hover {
+            text-decoration: underline;
+        }
     </style>
 </head>
 <body>
@@ -144,7 +158,7 @@ <h2>填写参数</h2>
     <input type="datetime-local" id="expire" step="1">
 
     <label for="signKey">签名密钥（可选）:</label>
-    <input type="text" id="signKey" placeholder="输入签名密钥（可选）">
+    <input type="password" id="signKey" placeholder="输入签名密钥（可选）">
 
     <button onclick="generateLink()">生成下载链接</button>
 </div>
@@ -157,7 +171,7 @@ <h2>生成的下载链接：</h2>
 
 <div class="section">
     <h2>参数介绍</h2>
-    <h3>/download</h3>
+    <h3>接口地址：/download</h3>
     <p>通过此接口，您可以进行文件下载。以下是可用的参数：</p>
     <table class="param-table">
         <tr>
@@ -191,15 +205,20 @@ <h3>/download</h3>
             <td>否</td>
         </tr>
     </table>
-    <p><b>签名计算方式：</b><br>
-        sign = MD5(filename + "|" + url + "|" + expire + "|" + &lt;your_sign_key&gt;)<br>
-        注意：空参数需排除，并且不要对进行签名的参数进行 URL 编码。</p>
+    <p>签名计算方式：<strong>sign = md5(filename + "|" + url + "|" + expire + "|" + &lt;your_sign_key&gt;)</strong><br>
+        注意：空参数需排除，并且不要对进行签名的参数进行 URL 编码，结果小写。</p>
 </div>
 
 <div class="section">
     <a href="index.html" class="back-btn">返回主页</a>
 </div>
 
+<footer>
+    <p>
+        Powered by <a href="https://github.com/junlongzzz/file-download-agent" target="_blank">File Download Agent</a>
+    </p>
+</footer>
+
 <script>
     function setMinExpirationTime() {
         const now = new Date();

diff --git a/static/index.html b/static/index.html
@@ -48,18 +48,18 @@
             background-color: #2980b9;
         }
 
-        .github-link {
-            display: inline-block;
-            background-color: #333;
-            color: white;
-            padding: 10px 20px;
-            border-radius: 4px;
+        footer {
+            text-align: center;
+            padding: 10px;
+        }
+
+        footer a {
+            color: #0366d6;
             text-decoration: none;
-            margin-top: 20px;
         }
 
-        .github-link:hover {
-            background-color: #555;
+        footer a:hover {
+            text-decoration: underline;
         }
     </style>
 </head>
@@ -83,9 +83,11 @@ <h2>WebDAV 文件访问</h2>
     <p>认证密码: <strong>&lt;your_webdav_pass&gt; 默认: md5(&lt;your_sign_key&gt;) [小写]</strong></p>
 </div>
 
-<div class="section">
-    <a href="https://github.com/junlongzzz/file-download-agent" class="github-link" target="_blank">访问 GitHub 仓库</a>
-</div>
+<footer>
+    <p>
+        Powered by <a href="https://github.com/junlongzzz/file-download-agent" target="_blank">File Download Agent</a>
+    </p>
+</footer>
 
 </body>
 </html>