diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..6ccee50
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,11 @@
+{
+ "permissions": {
+ "allow": [
+ "Bash(npm init -y)",
+ "Bash(npm install:*)",
+ "Bash(tree:*)",
+ "Bash(npm run)",
+ "Bash(npm run dev)"
+ ]
+ }
+}
diff --git a/web/src/assets/logo/logo.png b/web/src/assets/logo/logo.png
new file mode 100644
index 0000000..1de89ad
Binary files /dev/null and b/web/src/assets/logo/logo.png differ
diff --git a/web/src/css/login.css b/web/src/css/login.css
new file mode 100644
index 0000000..6ad26fe
--- /dev/null
+++ b/web/src/css/login.css
@@ -0,0 +1,143 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
+
+body {
+ margin: 0;
+ height: 100vh;
+ overflow: hidden;
+ background-color: #DBE0F9;
+ font-family: 'Roboto', sans-serif;
+}
+
+body .svg-top {
+ position: absolute;
+ top: -900px;
+ right: -300px;
+}
+
+body .svg-bottom {
+ position: absolute;
+ bottom: -500px;
+ left: -200px;
+}
+
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+}
+
+.container .wrapper {
+ padding: 40px;
+ background-color: #fff;
+ border-radius: 20px;
+ width: 350px;
+ z-index: 1;
+}
+
+.container .wrapper header {
+ margin-bottom: 40px;
+}
+
+.container .wrapper header .logo {
+ width: 70px;
+ height: 70px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.container .wrapper header .logo img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+.container .wrapper header .logo span {
+ font-size: 18px;
+ color: #fff;
+}
+
+.container .wrapper header h1 {
+ color: #6065D9;
+ font-size: 35px;
+ font-weight: 500;
+ margin-bottom: 0;
+ margin-top: 40px;
+}
+
+.container .wrapper header p {
+ color: #6065D9;
+ font-size: 18px;
+ font-weight: 300;
+ margin: 5px 0 0 0;
+}
+
+.container .wrapper .main-content input {
+ border: none;
+ display: block;
+ width: 100%;
+ height: 50px;
+ margin: 15px 0;
+ font-size: 18px;
+ color: #999;
+}
+
+.container .wrapper .main-content input::placeholder {
+ color: #999;
+ font-size: 18px;
+ font-weight: 300;
+}
+
+.container .wrapper .main-content input:focus {
+ outline: none;
+}
+
+.container .wrapper .main-content .line {
+ width: 100%;
+ height: 2px;
+ background-color: #99999955;
+}
+
+.container .wrapper .main-content button {
+ background: linear-gradient(to right, #6065D9, #17D7FA);
+ border: none;
+ border-radius: 50px;
+ font-size: 18px;
+ font-weight: 300;
+ color: #fff;
+ display: block;
+ width: 100px;
+ height: 40px;
+ margin: 0 auto;
+ outline: none;
+ cursor: pointer;
+}
+
+.container .wrapper footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ margin-top: 60px;
+}
+
+.container .wrapper footer p {
+ margin: 0;
+ font-weight: 100;
+}
+
+.container .wrapper footer p a {
+ color: #6065D9;
+ text-decoration: none;
+}
+
+@media (min-width: 320px) and (max-width: 768px) {
+ .wrapper {
+ margin: 0 10px !important;
+ padding: 30px;
+ }
+
+ .wrapper header h1 {
+ font-size: 30px;
+ }
+}
diff --git a/web/src/pages/login.html b/web/src/pages/login.html
new file mode 100644
index 0000000..6593d48
--- /dev/null
+++ b/web/src/pages/login.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+ Login Page
+
+
+
+
+
+
+
+
+
+
欢迎回来！
+ 用户登录
+
+
+
+
+
+
+
+
+
diff --git a/web/src/pages/main.html b/web/src/pages/main.html
new file mode 100644
index 0000000..f99419a
--- /dev/null
+++ b/web/src/pages/main.html
@@ -0,0 +1,434 @@
+
+
+
+
+
+ 大模型微调平台 - 主页
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
系统状态
+
+
+
CPU: 45%
+
GPU: 67%
+
内存: 52%
+
+
+
+
+
+
+
+
+
最近活动
+
+
+
+
GPT-4微调任务已完成
+
2分钟前
+
+
+
+
BERT情感分析模型开始训练
+
5分钟前
+
+
+
+
LLaMA对话模型已部署到云端
+
10分钟前
+
+
+
+
+
+