diff --git a/docker/html/login.html b/docker/html/login.html
new file mode 100644
index 0000000..ac1d1ae
--- /dev/null
+++ b/docker/html/login.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MISS-Down</title>
+    <link rel="stylesheet" href="layui/css/layui.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            background: linear-gradient(135deg, #1E9FFF 0%, #0081FF 100%);
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 15px;
+        }
+        .login-container {
+            width: 100%;
+            max-width: 400px;
+        }
+        .login-box {
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+            overflow: hidden;
+        }
+        .login-header {
+            background: linear-gradient(135deg, #1E9FFF 0%, #0081FF 100%);
+            color: white;
+            padding: 30px 20px;
+            text-align: center;
+        }
+        .login-header h2 {
+            margin: 0;
+            font-size: 24px;
+            font-weight: 500;
+        }
+        .login-body {
+            padding: 30px 25px;
+        }
+        .layui-form-item {
+            margin-bottom: 20px;
+        }
+        .layui-input {
+            height: 40px;
+            border-radius: 4px;
+        }
+        .layui-btn {
+            height: 40px;
+            border-radius: 4px;
+            background-color: #1E9FFF;
+        }
+        .login-footer {
+            padding: 0 25px 25px;
+            text-align: center;
+        }
+        .login-footer a {
+            color: #1E9FFF;
+            text-decoration: none;
+        }
+        .login-footer a:hover {
+            text-decoration: underline;
+        }
+        .response-message {
+            margin-top: 15px;
+            padding: 10px;
+            border-radius: 4px;
+            text-align: center;
+            display: none;
+        }
+        .success {
+            background-color: #f0f9eb;
+            color: #67c23a;
+            border: 1px solid #e1f3d8;
+        }
+        .error {
+            background-color: #fef0f0;
+            color: #f56c6c;
+            border: 1px solid #fbc4c4;
+        }
+    </style>
+</head>
+<body>
+<div class="login-container">
+    <div class="login-box">
+        <div class="login-header">
+            <h2>Miss下载器</h2>
+        </div>
+        <div class="login-body">
+            <form class="layui-form" id="loginForm">
+                <div class="layui-form-item">
+                    <div class="layui-input-wrap">
+                        <input type="text" name="username" placeholder="用户名" autocomplete="off" class="layui-input">
+                    </div>
+                </div>
+                <div class="layui-form-item">
+                    <div class="layui-input-wrap">
+                        <input type="password" name="password"placeholder="密码" autocomplete="off" class="layui-input">
+                    </div>
+                </div>
+                <div class="layui-form-item">
+                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登录</button>
+                </div>
+            </form>
+
+            <div class="response-message" id="responseMessage"></div>
+        </div>
+    </div>
+</div>
+
+<script src="layui/layui.js"></script>
+<script>
+    layui.use(['form', 'layer'], function(){
+        var form = layui.form;
+        var layer = layui.layer;
+        var $ = layui.$;
+
+        // 表单提交
+        form.on('submit(login)', function(data){
+            var field = data.field;
+            var responseMessage = document.getElementById('responseMessage');
+
+            // 显示加载状态
+            layer.msg('登录中...');
+
+            // AJAX请求获取token
+            $.ajax({
+                url: '/api/login',
+                type: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify({
+                    username: field.username,
+                    password: field.password
+                }),
+                success: function(response) {
+                    layer.closeAll(); // 关闭加载提示
+
+                    if (response && response.data.token) {
+                        // 登录成功
+                        responseMessage.className = 'response-message success';
+                        responseMessage.style.display = 'block';
+                        localStorage.setItem('Authorization', response.data.token);
+                        window.location.href = '/index.html';
+                    } else {
+                        // 登录失败
+                        responseMessage.className = 'response-message error';
+                        responseMessage.innerHTML = '登录失败：' + (response.message || '未知错误');
+                        responseMessage.style.display = 'block';
+                    }
+                },
+                error: function(xhr, status, error) {
+                    layer.closeAll(); // 关闭加载提示
+
+                    // 显示错误信息
+                    responseMessage.className = 'response-message error';
+
+                    if (xhr.status === 401) {
+                        responseMessage.innerHTML = '登录失败：用户名或密码错误';
+                    } else if (xhr.status === 0) {
+                        responseMessage.innerHTML = '网络错误：无法连接到服务器';
+                    } else {
+                        var errorMsg = xhr.responseJSON && xhr.responseJSON.message ?
+                            xhr.responseJSON.message :
+                            '服务器错误 (' + xhr.status + ')';
+                        responseMessage.innerHTML = '登录失败：' + errorMsg;
+                    }
+
+                    responseMessage.style.display = 'block';
+                }
+            });
+
+            return false; // 阻止表单跳转
+        });
+    });
+</script>
+</body>
+</html>
\ No newline at end of file
