diff --git a/webui/account.css b/webui/account.css new file mode 100644 index 0000000..15f5088 --- /dev/null +++ b/webui/account.css @@ -0,0 +1,126 @@ +header { + display: flex; + align-items: flex-start; /* 让内容在垂直方向上对齐到顶部 */ + padding: 0; /* 清除默认的内边距 */ + margin: 0; /* 清除默认的外边距 */ +} + +/* 使h1居左上角 */ +header h1 { + text-align: left; /* 确保文字左对齐 */ +} + +/* 自定义 "点我添加一个" 链接的样式 */ +.account-section a { + color: #007bff; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease; +} + +.account-section a:hover { + color: #0056b3; +} + +/* 添加按钮的专属样式 */ +.add-button { + position: fixed; + bottom: 20px; + right: 20px; + width: 60px; + height: 60px; + border-radius: 50%; + background-color: #28a745; + color: white; + font-size: 24px; + display: flex; + justify-content: center; + align-items: center; + border: none; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); + cursor: pointer; + transition: background-color 0.3s ease, transform 0.2s ease; +} + +.add-button:hover { + background-color: #218838; + transform: scale(1.1); +} + +/* 弹窗样式 */ +.modal { + position: fixed; /* 弹窗始终固定在屏幕上 */ + top: 0; + left: 0; + width: 100%; /* 覆盖整个屏幕宽度 */ + height: 100%; /* 覆盖整个屏幕高度 */ + background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */ + display: flex; /* 使用 flexbox 布局 */ + justify-content: center; /* 水平居中 */ + align-items: center; /* 垂直居中 */ + z-index: 1000; /* 确保弹窗位于最顶层 */ +} + +.modal-content { + position: fixed; /* 让弹窗固定在屏幕上 */ + top: 50%; /* 垂直居中 */ + left: 50%; /* 水平居中 */ + transform: translate(-50%, -50%); /* 偏移自身宽高的 50% 达到真正居中 */ + background: #fff; /* 背景为白色 */ + padding: 20px; /* 内边距 */ + border-radius: 5px; /* 圆角 */ + width: 100%; + max-width: 400px; /* 最大宽度 */ + box-sizing: border-box; /* 包括 padding 的总宽度 */ + text-align: left; /* 文本左对齐 */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加轻微的阴影效果 */ + z-index: 1001; /* 确保弹窗内容在遮罩层上方 */ +} + +.modal-content h2 { + margin-top: 0; +} + +.modal-content label { + display: block; + margin: 10px 0 5px; +} + +.modal-content input, +.modal-content select { + width: 100%; + padding: 8px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 4px; +} + +.form-actions { + display: flex; + justify-content: space-between; +} + +.form-actions button { + padding: 8px 12px; + border: none; + border-radius: 4px; + cursor: pointer; +} + +#cancel-button { + background-color: #ccc; + color: #000; +} + +#cancel-button:hover { + background-color: #aaa; +} + +form button[type="submit"] { + background-color: #28a745; + color: #fff; +} + +form button[type="submit"]:hover { + background-color: #218838; +} diff --git a/webui/account.html b/webui/account.html new file mode 100644 index 0000000..0be9db8 --- /dev/null +++ b/webui/account.html @@ -0,0 +1,85 @@ + + + + + + 账号设置 + + + + +
+ + + + +
+
+

账号设置

+
+ + +
+
+ + + + + + + diff --git a/webui/image/wind.png b/webui/image/wind.png new file mode 100644 index 0000000..cc57a17 Binary files /dev/null and b/webui/image/wind.png differ diff --git a/webui/index.html b/webui/index.html new file mode 100644 index 0000000..d9d9443 --- /dev/null +++ b/webui/index.html @@ -0,0 +1,55 @@ + + + + + + Wind Chime + + + +
+ + + + +
+
+

Wind Chime

+

linux - amd64

+

当前版本: 0.1

+

最新版本: 0.1

+
+ +
+ wind Mascot +
+ +
+

官网网站: https://www.sealdice.com

+

使用手册: https://dice.weizaima.com/manual

+

投喂风铃: https://dice.weizaima.com/feed

+

源码: https://github.com/sealdice/sealdice-core

+
+ +
+

感谢 ♪(・ω・)ﾉ

+

特别鸣谢参与测试、反馈问题、帮助完善风铃指令的各位！以下列出感谢名单（排名不分先后）。

+
+ + +
+
+ + diff --git a/webui/styles.css b/webui/styles.css new file mode 100644 index 0000000..da9b705 --- /dev/null +++ b/webui/styles.css @@ -0,0 +1,133 @@ +/* 全局样式 */ +body { + margin: 0; + padding: 0; + font-family: "Arial", sans-serif; + background-color: #f8f9fa; + display: flex; + justify-content: center; /* 水平居中 */ + align-items: center; /* 垂直居中 */ + height: 100vh; + color: #333; +} + +/* 容器布局 */ +.container { + display: flex; + width: 100%; + height: 100%; + justify-content: center; /* 水平居中 */ + align-items: center; /* 垂直居中 */ +} + +/* 左侧导航栏样式 */ +.sidebar { + width: 200px; + height: 100vh; + background-color: #f4f4f4; + padding: 20px; + box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.sidebar ul { + list-style: none; + padding: 0; +} + +.sidebar ul li { + padding: 12px 15px; + margin: 8px 0; + font-size: 14px; + border-radius: 5px; + cursor: pointer; + color: #555; + transition: all 0.2s; +} + +.sidebar ul li:hover, +.sidebar ul li.active { + background-color: #e8e8e8; + color: #000; + font-weight: bold; +} + +/* 右侧内容样式 */ +.content { + flex: 1; + height: 100vh; + padding: 20px; + display: flex; + flex-direction: column; + background-color: #fff; +} + +/* 标题和版本信息 */ + +header h1 { + text-align: center; + font-size: 2.2rem; + margin-bottom: 10px; + color: #444; +} + +.version { + text-align: center; + font-size: 1rem; + color: #666; + margin-bottom: 10px; +} + +.subversion { + text-align: center; + font-size: 0.9rem; + color: #777; +} + +/* logo图片 */ +.wind-image { + text-align: center; /* 居中logo */ +} + +.wind-image img { + max-width: 250px; /* 限制宽度 */ + height: auto; + margin: 20px 0; +} + +/* 链接部分 */ +.links span { + text-decoration: none; /* 去掉下划线 */ + color: inherit; +} + +.links p { + font-size: 16px; + margin: 8px 0; + color: #555; +} + +/* 感谢部分 */ +.credits h2 { + text-align: center; + margin-top: 20px; + font-size: 18px; + color: #444; +} + +.credits p { + text-align: center; + font-size: 14px; + color: #555; +} + +/* 页脚 */ +footer { + text-align: center; + margin-top: 30px; + padding: 10px 0; + font-size: 14px; + color: #666; +}