better-staridc-MNBT
1<?php
2/**
3 * 用户端登录页
4 *
5 * 【二次开发修改说明】
6 * 修改者 ：zfhsh <3933415854@qq.com>
7 * 修改日期 ：2026-10-01
8 * 修改内容 ：
9 * 1. 登录页整体改造为 StarIDC「新拟态 2.0」风格
10 * （凸起卡片、凹陷输入框、渐变凸起登录按钮）
11 * 2. 表单、验证码、AJAX 登录逻辑与字段名保持原样未改动
12 * 原项目版权归梦奈云所有；本修改遵循 MNBT 宽松许可证，
13 * 保留原作者版权声明并在此注明修改内容。
14 */
15mnbt_theme_include('head');
16?>
17<style>
18html, body { height: 100%; }
19
20body.login-page {
21 margin: 0;
22 min-height: 100vh;
23 display: flex;
24 align-items: center;
25 justify-content: center;
26 padding: 24px 16px;
27 background: var(--n-bg) !important;
28 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
29}
30
31.login-wrap { width: 100%; max-width: 420px; }
32
33.login-card {
34 background: var(--n-bg) !important;
35 border: none !important;
36 border-radius: var(--n-radius-xl) !important;
37 padding: 44px 40px 32px;
38 box-shadow: 12px 12px 24px var(--n-shadow-dark), -12px -12px 24px var(--n-shadow-light) !important;
39}
40
41.login-brand { text-align: center; margin-bottom: 32px; }
42.login-brand img {
43 max-height: 56px;
44 max-width: 220px;
45 object-fit: contain;
46 filter: drop-shadow(2px 2px 4px var(--n-shadow-dark));
47}
48.login-brand .title {
49 margin: 16px 0 0;
50 font-size: 1.3rem;
51 font-weight: 800;
52 background: var(--n-gradient-accent);
53 -webkit-background-clip: text;
54 -webkit-text-fill-color: transparent;
55 background-clip: text;
56 letter-spacing: -0.3px;
57}
58.login-brand .sub {
59 margin: 6px 0 0;
60 font-size: 0.9rem;
61 color: var(--n-muted);
62}
63
64.login-form .form-group { margin-bottom: 20px; }
65.login-form .form-control {
66 height: 52px !important;
67 border-radius: var(--n-radius-sm) !important;
68 border: none !important;
69 background: var(--n-bg) !important;
70 color: var(--n-fg) !important;
71 padding: 14px 18px 14px 44px !important;
72 font-size: 0.95rem;
73 box-shadow: inset 6px 6px 12px var(--n-shadow-dark), inset -6px -6px 12px var(--n-shadow-light) !important;
74 transition: box-shadow var(--n-transition);
75}
76.login-form .form-control:focus {
77 box-shadow: inset 4px 4px 8px var(--n-shadow-dark), inset -4px -4px 8px var(--n-shadow-light) !important;
78}
79.login-form .form-control::placeholder { color: var(--n-muted); }
80.login-form .has-feedback { position: relative; }
81.login-form .has-feedback .mdi {
82 position: absolute;
83 left: 0; top: 0;
84 width: 44px; height: 52px;
85 line-height: 52px;
86 text-align: center;
87 color: var(--n-muted);
88 z-index: 2;
89 pointer-events: none;
90 font-size: 1.1rem;
91}
92
93.login-form .captcha-row {
94 display: flex;
95 gap: 12px;
96 align-items: stretch;
97}
98.login-form .captcha-row .captcha-input { flex: 1; min-width: 0; }
99.login-form .captcha-img {
100 height: 52px;
101 border-radius: var(--n-radius-sm);
102 border: none !important;
103 box-shadow: 4px 4px 8px var(--n-shadow-dark), -4px -4px 8px var(--n-shadow-light);
104 cursor: pointer;
105 flex-shrink: 0;
106}
107
108.login-form .btn-login {
109 height: 52px !important;
110 border-radius: var(--n-radius-sm) !important;
111 border: none !important;
112 background: var(--n-gradient-accent) !important;
113 color: #fff !important;
114 font-size: 1rem !important;
115 font-weight: 700 !important;
116 width: 100%;
117 margin-top: 8px;
118 box-shadow: 0 6px 18px rgba(92, 107, 192, 0.4) !important;
119 transition: all var(--n-transition);
120 letter-spacing: 2px;
121}
122.login-form .btn-login:hover {
123 transform: translateY(-1px);
124 box-shadow: 0 8px 22px rgba(92, 107, 192, 0.55) !important;
125}
126.login-form .btn-login:active {
127 transform: none;
128 box-shadow: inset 3px 3px 8px rgba(0,0,0,0.3), 0 4px 12px rgba(92, 107, 192, 0.4) !important;
129}
130
131.login-footer {
132 margin: 24px 0 0;
133 text-align: center;
134 font-size: 0.82rem;
135 color: var(--n-muted);
136 line-height: 1.6;
137}
138
139@media (max-width: 480px) {
140 .login-card { padding: 36px 24px 28px; border-radius: var(--n-radius-lg) !important; }
141 .login-brand img { max-height: 44px; max-width: 180px; }
142 .login-brand .title { font-size: 1.15rem; }
143 .captcha-row { flex-direction: column; gap: 10px; }
144 .captcha-img { width: 100%; height: 52px; }
145}
146</style>
147</head>
148<body class="login-page">
149<div class="login-wrap">
150 <div class="login-card">
151 <div class="login-brand">
152 <a href="login.php">
153 <img alt="MNBT" src="<?=mnbt_asset_url('upload_logo/logo.login.png')?>?<?=$conf['auther']?>">
154 </a>
155 <p class="title"><?= htmlspecialchars($conf['name'] ?? '控制面板', ENT_QUOTES, 'UTF-8') ?></p>
156 <p class="sub">用户登录</p>
157 </div>
158 <form action="#!" method="post" class="login-form" onsubmit="return false;">
159 <div class="form-group has-feedback">
160 <span class="mdi mdi-account" aria-hidden="true"></span>
161 <input type="text" class="form-control" id="username" placeholder="用户名 / 账号" autocomplete="username">
162 </div>
163 <div class="form-group has-feedback">
164 <span class="mdi mdi-lock" aria-hidden="true"></span>
165 <input type="password" class="form-control" id="password" placeholder="密码" autocomplete="current-password">
166 </div>
167<?php if ($conf['yzme'] == 'true') { ?>
168 <div class="form-group">
169 <div class="captcha-row">
170 <div class="captcha-input has-feedback">
171 <span class="mdi mdi-check-all" aria-hidden="true"></span>
172 <input type="text" name="captcha" id="csyzmiq" class="form-control" placeholder="验证码" autocomplete="off">
173 </div>
174 <img id="captcha" src="./code.php?r=<?php echo time(); ?>" class="captcha-img" style="cursor:pointer;" onclick="this.src='./code.php?r='+Math.random();" title="点击更换验证码" alt="验证码">
175 </div>
176 </div>
177<?php } ?>
178 <div class="form-group mb-0">
179 <button class="btn btn-login" type="button" onclick="chkre()">登 录</button>
180 </div>
181 </form>
182 <p class="login-footer"><?= htmlspecialchars($conf['hxp'] ?? '', ENT_QUOTES, 'UTF-8') ?></p>
183 </div>
184</div>
185<script type="text/javascript">
186function chkre() {
187 var userq = username.value;
188 var passq = password.value;
189 var codeq = '0000';
190<?php if ($conf['yzme'] == 'true') {
191 echo " codeq = csyzmiq.value;\n";
192} ?>
193 if (userq == "" || passq == "" || codeq == "") {
194 msalert(3, "请将表单填写完整", 2000);
195 } else {
196 msloading('正在登录，请稍后...');
197 var data = {};
198 data["gn"] = "login";
199 data["user"] = userq;
200 data["pass"] = passq;
201 data["code"] = codeq;
202 $.post('./ajax.php', data, function (date) {
203 var jsoe = JSON.parse(date);
204 var qk = jsoe.code;
205 if (qk == '登陆成功') {
206 msalert(1, "登录成功，正在跳转…", 2000);
207 window.location.href = "./index.php";
208 msloadingde();
209<?php if ($conf['yzme'] == 'true') {
210 echo " captcha.src='./code.php?r='+Math.random();\n";
211} ?>
212 } else {
213 msalert(4, qk, 4000);
214 msloadingde();
215<?php if ($conf['yzme'] == 'true') {
216 echo " captcha.src='./code.php?r='+Math.random();\n";
217} ?>
218 }
219 });
220 }
221}
222document.addEventListener('keydown', function (e) {
223 if (e.key === 'Enter') chkre();
224});
225</script>
226</body>
227</html>