qing/micro_servers
1
3 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构前端

Browse Source
This commit is contained in:
qing committed 2026-07-23 08:43:52 +08:00
1 parent fc6ce0e7ff
commit 750bdbec6f
4 files changed
+251 -76
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

static/public/css/style.css
+238 -51
View File
@@ -1,71 +1,258 @@
code {
color: red;
background-color: rgb(254, 235, 238);
padding: 5px;
border-radius: 5px;
/* ===== Design Tokens ===== */
:root {
--bg: #fdf6ee;
--fg: #4a3728;
--fg-secondary: #8c7260;
--card: #ffffff;
--card-hover: #fff7ef;
--border: #f0e0cc;
--border-light: #f7ecdd;
--muted: #b89b7a;
--accent: #e8853a;
--accent-dark: #cf6b1f;
--accent-soft: rgba(232, 133, 58, 0.10);
--accent-glow: rgba(232, 133, 58, 0.25);
--error: #d94f3d;
--error-bg: #fef0ee;
--success: #5a9e6f;
--warning: #d4922a;
--shadow-sm: 0 1px 3px rgba(74, 55, 40, 0.06);
--shadow-md: 0 4px 12px rgba(74, 55, 40, 0.08);
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 20px;
}
pre > code {
display: block;
color: white;
background-color: rgb(96, 96, 96);
padding: 5px;
border-radius: 5px;
}
blockquote {
margin-right: 0px;
background-color: #cfcfcf;
@media (prefers-color-scheme: dark) {
:root {
--bg: #1e1712;
--fg: #f0e4d8;
--fg-secondary: #a08c78;
--card: #2a2119;
--card-hover: #342a20;
--border: #3e3228;
--border-light: #342a20;
--muted: #8c7a66;
--accent: #e8934a;
--accent-dark: #f0a060;
--accent-soft: rgba(232, 147, 74, 0.12);
--accent-glow: rgba(232, 147, 74, 0.20);
--error: #e8685a;
--error-bg: #3a2220;
--success: #6fb87f;
--warning: #e0a84a;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
}
}
/* by qing */
/* ===== Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #fffbf0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto,sans-serif;
padding: 1rem;
}
.box {
width: 90%;
background: var(--bg);
color: var(--fg);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', Roboto, Arial, sans-serif;
padding: 2rem 1rem;
-webkit-font-smoothing: antialiased;
}
body > .card,
body > .box { margin: auto 0; }
/* ===== Layout ===== */
.box { width: 90%; max-width: 720px; }
.card {
background-color: #eedeb0;
border: 1px solid #000000;
border-radius: 1.125rem;
padding: 1.5rem 1.25rem;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02);
/*max-width: 480px;*/
width: 90%;
color: #4d3e2b;
background: var(--card);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 1.75rem 1.5rem;
box-shadow: var(--shadow-sm);
color: var(--fg);
transition: box-shadow 0.2s, border-color 0.2s;
overflow-wrap: break-word;
width: 90%;
max-width: 440px;
}
.card:hover {
border-color: #c7b38a;
box-shadow: 0 10px 24px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.03);
border-color: var(--border);
box-shadow: var(--shadow-md);
}
.box > .card { width: 100%; max-width: none; }
/* ===== Typography ===== */
h1 { font-size: 1.4rem; font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.25rem; }
h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; }
/* ===== Form Elements ===== */
label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--fg-secondary);
margin-top: 1rem;
margin-bottom: 0.3rem;
}
form > div > label:first-child { margin-top: 0; }
input:not([type="checkbox"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
textarea {
display: block;
width: 100%;
padding: 0.6rem 0.9rem;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
font-size: 0.9rem;
font-family: inherit;
background: var(--bg);
color: var(--fg);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
input:not([type="checkbox"]):not([type="submit"]):not([type="reset"]):not([type="button"]):focus,
textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { min-height: 80px; resize: vertical; }
/* ===== Buttons ===== */
button, input[type="submit"], input[type="reset"], input[type="button"] {
padding: 0.55rem 1.3rem;
font-size: 0.88rem;
font-weight: 600;
font-family: inherit;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition: opacity 0.15s, transform 0.1s;
line-height: 1.4;
}
button:hover, input[type="submit"]:hover,
input[type="reset"]:hover, input[type="button"]:hover { opacity: 0.85; }
button:active, input[type="submit"]:active,
input[type="reset"]:active, input[type="button"]:active { transform: scale(0.96); }
input[type="submit"] { background: var(--accent); color: #fff; }
input[type="reset"] { background: transparent; color: var(--muted); border: 1.5px solid var(--border); }
button[type="button"], input[type="button"] { background: var(--accent-soft); color: var(--accent-dark); }
#emlSub { display: inline-block; margin-top: 0.4rem; }
#emlSub input[type="submit"] {
background: var(--accent-soft);
color: var(--accent-dark);
font-size: 0.82rem;
padding: 0.45rem 1rem;
}
/* 移动端微调 */
/* ===== Form Layout ===== */
.form-actions {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: 1.25rem;
}
.form-check {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.form-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.form-check label {
display: inline;
margin: 0;
font-size: 0.82rem;
font-weight: 500;
color: var(--fg-secondary);
}
/* ===== Code Box (register) ===== */
.code-box {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.4rem;
font-size: 0.85rem;
color: var(--fg-secondary);
}
.code-box input[type="text"] { width: auto; flex: 1; min-width: 100px; display: inline-block; }
.code-box input[type="button"] { white-space: nowrap; }
/* ===== Validation Tips ===== */
.tip-red { color: var(--error); font-size: 0.78rem; }
.tip-yellow { color: var(--warning); font-size: 0.78rem; }
.tip-green { color: var(--success); font-size: 0.78rem; }
/* ===== Article (dnfs) ===== */
.article-header { text-align: center; margin-bottom: 1.25rem; }
.article-header h1 { margin-bottom: 0.5rem; }
.article-meta { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.3rem; }
.article-stats {
font-size: 0.82rem;
color: var(--muted);
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.article-stats span { font-weight: 600; color: var(--fg-secondary); }
#article-content { font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.25rem; }
/* ===== Recommend List (dnfs) ===== */
.recommend-list .card { margin-bottom: 0.75rem; }
.recommend-list center {
cursor: pointer;
padding: 0.4rem;
border-radius: var(--radius-sm);
transition: background 0.15s;
}
.recommend-list center:hover { background: var(--accent-soft); }
.recommend-list center:hover h3 { color: var(--accent); }
.recommend-list .card h3 { transition: color 0.15s; }
.recommend-list .card p { font-size: 0.9rem; line-height: 1.6; color: var(--fg-secondary); }
/* ===== Node Form (dnfs) ===== */
.node-form { margin-top: 1rem; }
.node-form .form-actions { margin-top: 0.75rem; }
/* ===== Markdown Content ===== */
code {
color: var(--error);
background: var(--error-bg);
padding: 2px 6px;
border-radius: 5px;
font-size: 0.88em;
}
pre > code {
display: block;
color: #f0e4d8;
background: #3d3229;
padding: 12px;
border-radius: var(--radius-sm);
overflow-x: auto;
}
blockquote {
margin-right: 0;
padding: 0.5rem 1rem;
background: var(--accent-soft);
border-left: 3px solid var(--accent);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
color: var(--fg-secondary);
}
/* ===== Responsive ===== */
@media (max-width: 480px) {
body {
padding: 0.8rem;
}
.card {
padding: 1.2rem, 1rem;
border-radius: 1rem;
border-width: 1px;
}
body { padding: 1rem 0.8rem; }
.card { padding: 1.25rem 1rem; border-radius: 16px; width: 95%; }
.box { width: 95%; }
h2 { font-size: 1.1rem; }
.form-actions button, .form-actions input { flex: 1; padding: 0.5rem 0.6rem; font-size: 0.82rem; }
}
/* 极小屏 (宽度 < 360px) */
@media (max-width: 360px) {
.card {
padding: 1rem 0.8rem;
border-radius: 0.9rem;
}
.card { padding: 1rem 0.8rem; border-radius: var(--radius-sm); }
}
static/public/dnfs.html
+10 -9
View File
@@ -9,15 +9,15 @@
</head>
<body>
<div class="box">
<center>
<center class="article-header">
<!-- 文章主标题 -->
<h1><div id="article-title">title</div></h1>
<!-- 文章详情 -->
<div>
<div class="article-meta">
发布时间：<span id="publish-time">2026-1-1</span>
</div>
<div>
<div class="article-stats">
浏览：<span id="visit-count">999</span>
点赞：<span id="like-count">999</span>
分享：<span id="share-count">999</span>
@@ -25,13 +25,14 @@
</center>
<div id="article-content">hello</div>
<div class="recommend-list" id="recommend-list"></div>
<br>
<div class="card">
<div class="card node-form">
<h3>节点操作</h3>
<label>新增节点</label><input id="input-note-title"></input><br>
<label>节点内容</label><textarea id="input-note-content"></textarea><br>
<button id="input-note-submit">提交</button>
<button id="input-note-clear">重置</button>
<label>新增节点</label><input id="input-note-title">
<label>节点内容</label><textarea id="input-note-content"></textarea>
<div class="form-actions">
<button id="input-note-submit">提交</button>
<button id="input-note-clear">重置</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.0.0/markdown-it.min.js"></script>
<script src="js/validation.js"></script>
static/public/login.html
+2 -8
View File
@@ -6,11 +6,6 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>登录</title>
<link rel="stylesheet" href="css/style.css">
<style>
.tip-red {color:red;}
.tip-yellow {color: orange;}
.tip-green {color: greenyellow;}
</style>
</head>
<body>
<div class="card">
@@ -20,7 +15,6 @@
<label>用户名/推荐邮箱：</label>
<input type="text" id="loginUsername" name="username" placeholder="请输入用户名">
<span id="msgTip" ></span>
<br>
<label>密码：</label>
<input type="password" id="loginPassword" name="password" placeholder="请输入密码">
<span id="pwdTip"></span>
@@ -33,12 +27,12 @@
</span>
<span id="emlTip"></span>
</div>
<div>
<div class="form-actions">
<button type="button" id="registerBtn">注册</button>
<input type="submit" id="loginBtn" value="登录">
<input type="reset" id="resetUser" value="重置">
</div>
<div>
<div class="form-check">
<input type="checkbox" id="agreeBox" name="agree" value="access">
<label id="agreement">同意该系统相关用户使用条例</label>
<span id="agreeTip"></span>
static/public/register.html
+1 -8
View File
@@ -5,11 +5,6 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>注册页面</title>
<link rel="stylesheet" href="css/style.css">
<style>
.tip-red {color:red;}
.tip-yellow {color: orange;}
.tip-green {color: greenyellow;}
</style>
</head>
<body>
<div class="card">
@@ -19,7 +14,6 @@
<label>用户名/推荐邮箱：</label>
<input type="text" id="regusername" placeholder="请输入用户名">
<span id="msgTip" ></span>
<br>
<label>邮箱号：</label>
<input type="email" id="regemail" placeholder="请输入邮箱号">
<div class="code-box">验证码：
@@ -28,14 +22,13 @@
<span id="codeTip"></span>
</div>
<span id="emlTip"></span>
<br>
<label>密码：</label>
<input type="password" id="regpsw" placeholder="密码至少6位">
<label>验证密码：</label>
<input type="password" id="repwd" placeholder="请再次输入密码">
<span id="pwdTip"></span>
</div>
<div>
<div class="form-actions">
<input id="formsub" type="submit" value="提交">
<input id="resetUser" type="reset" value="重置">
<input type="button" value="返回登录" onclick="location.href='login.html'">