@flun/html-template 4.4.2 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/customize/account.js +125 -64
- package/dev-server.js +1 -1
- package/f-CHANGELOG.md +13 -7
- package/f-README.md +22 -23
- package/package.json +1 -1
- package/templates/account/2fa.html +211 -69
- package/templates/account/forgot-password.html +53 -4
- package/templates/account/login.html +79 -49
- package/templates/account/profile.html +652 -331
- package/templates/account/register.html +58 -2
- package/templates/account/reset-password.html +54 -3
- package/templates/account/verify-email.html +61 -6
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
.card {
|
|
28
28
|
background: var(--container-bg);
|
|
29
29
|
border-radius: 12px;
|
|
30
|
+
border: 1px solid #2e3135;
|
|
30
31
|
box-shadow: 0 20px 40px var(--content-shadow);
|
|
31
32
|
width: 100%;
|
|
32
33
|
max-width: 400px;
|
|
@@ -130,8 +131,63 @@
|
|
|
130
131
|
text-decoration: underline;
|
|
131
132
|
}
|
|
132
133
|
|
|
133
|
-
|
|
134
|
-
display: none;
|
|
134
|
+
[hidden] {
|
|
135
|
+
display: none !important;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* ==================== 移动端样式适配 (≤640px) ==================== */
|
|
139
|
+
@media (max-width: 640px) {
|
|
140
|
+
body {
|
|
141
|
+
padding: 16px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.card {
|
|
145
|
+
max-width: 100%;
|
|
146
|
+
padding: 28px 20px;
|
|
147
|
+
border-radius: 16px;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.card h2 {
|
|
151
|
+
font-size: 24px;
|
|
152
|
+
margin-bottom: 24px;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.form-group {
|
|
156
|
+
margin-bottom: 18px;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.form-group label {
|
|
160
|
+
font-size: 13px;
|
|
161
|
+
margin-bottom: 6px;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.form-group input {
|
|
165
|
+
font-size: 16px;
|
|
166
|
+
/* 防止iOS缩放 */
|
|
167
|
+
padding: 12px 14px;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.btn {
|
|
171
|
+
padding: 12px;
|
|
172
|
+
font-size: 16px;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.links {
|
|
176
|
+
margin-top: 20px;
|
|
177
|
+
font-size: 13px;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* 极小屏幕 (≤480px) 微调 */
|
|
182
|
+
@media (max-width: 480px) {
|
|
183
|
+
.card {
|
|
184
|
+
padding: 24px 16px;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.card h2 {
|
|
188
|
+
font-size: 22px;
|
|
189
|
+
margin-bottom: 20px;
|
|
190
|
+
}
|
|
135
191
|
}
|
|
136
192
|
</style>
|
|
137
193
|
</head>
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
.card {
|
|
29
29
|
background: var(--container-bg);
|
|
30
30
|
border-radius: 12px;
|
|
31
|
+
border: 1px solid #2e3135;
|
|
31
32
|
box-shadow: 0 20px 40px var(--content-shadow);
|
|
32
33
|
width: 80%;
|
|
33
34
|
min-width: 400px;
|
|
@@ -131,8 +132,58 @@
|
|
|
131
132
|
text-decoration: underline;
|
|
132
133
|
}
|
|
133
134
|
|
|
134
|
-
|
|
135
|
-
display: none;
|
|
135
|
+
[hidden] {
|
|
136
|
+
display: none !important;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* ==================== 移动端样式适配 (≤640px) ==================== */
|
|
140
|
+
@media (max-width: 640px) {
|
|
141
|
+
body {
|
|
142
|
+
padding: 16px;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.card {
|
|
146
|
+
width: 100%;
|
|
147
|
+
min-width: auto;
|
|
148
|
+
padding: 28px 20px;
|
|
149
|
+
border-radius: 16px;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.card h2 {
|
|
153
|
+
font-size: 24px;
|
|
154
|
+
margin-bottom: 24px;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.form-group input {
|
|
158
|
+
font-size: 16px;
|
|
159
|
+
padding: 12px 14px;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.btn {
|
|
163
|
+
padding: 12px;
|
|
164
|
+
font-size: 16px;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.big-success {
|
|
168
|
+
font-size: 24px;
|
|
169
|
+
margin: 30px 0;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* 极小屏幕 (≤480px) 微调 */
|
|
174
|
+
@media (max-width: 480px) {
|
|
175
|
+
.card {
|
|
176
|
+
padding: 24px 16px;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.card h2 {
|
|
180
|
+
font-size: 22px;
|
|
181
|
+
margin-bottom: 20px;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.big-success {
|
|
185
|
+
font-size: 20px;
|
|
186
|
+
}
|
|
136
187
|
}
|
|
137
188
|
</style>
|
|
138
189
|
</head>
|
|
@@ -146,7 +197,7 @@
|
|
|
146
197
|
autocomplete="new-password">
|
|
147
198
|
</div>
|
|
148
199
|
<div class="form-group" id="confirmPasswordGroup">
|
|
149
|
-
<input type="password" id="confirmPassword" placeholder="
|
|
200
|
+
<input type="password" id="confirmPassword" placeholder="再次输入新密码" maxlength="72"
|
|
150
201
|
autocomplete="new-password">
|
|
151
202
|
</div>
|
|
152
203
|
<button type="button" class="btn" id="resetBtn">重置密码</button>
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
.card {
|
|
27
27
|
background: var(--container-bg);
|
|
28
28
|
border-radius: 12px;
|
|
29
|
+
border: 1px solid #2e3135;
|
|
29
30
|
box-shadow: 0 20px 40px var(--content-shadow);
|
|
30
31
|
width: 80%;
|
|
31
32
|
min-width: 400px;
|
|
@@ -101,8 +102,62 @@
|
|
|
101
102
|
text-decoration: underline;
|
|
102
103
|
}
|
|
103
104
|
|
|
104
|
-
|
|
105
|
-
display: none;
|
|
105
|
+
[hidden] {
|
|
106
|
+
display: none !important;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* ==================== 移动端样式适配 (≤640px) ==================== */
|
|
110
|
+
@media (max-width: 640px) {
|
|
111
|
+
body {
|
|
112
|
+
padding: 16px;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.card {
|
|
116
|
+
width: 100%;
|
|
117
|
+
min-width: auto;
|
|
118
|
+
padding: 28px 20px;
|
|
119
|
+
border-radius: 16px;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.card h2 {
|
|
123
|
+
font-size: 24px;
|
|
124
|
+
margin-bottom: 16px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.message {
|
|
128
|
+
font-size: 14px;
|
|
129
|
+
margin: 16px 0;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.big-success {
|
|
133
|
+
font-size: 24px;
|
|
134
|
+
margin: 30px 0;
|
|
135
|
+
white-space: normal;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.btn {
|
|
139
|
+
padding: 10px 20px;
|
|
140
|
+
font-size: 15px;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.link {
|
|
144
|
+
font-size: 13px;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/* 极小屏幕 (≤480px) 微调 */
|
|
149
|
+
@media (max-width: 480px) {
|
|
150
|
+
.card {
|
|
151
|
+
padding: 24px 16px;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.card h2 {
|
|
155
|
+
font-size: 22px;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.big-success {
|
|
159
|
+
font-size: 20px;
|
|
160
|
+
}
|
|
106
161
|
}
|
|
107
162
|
</style>
|
|
108
163
|
</head>
|
|
@@ -110,8 +165,8 @@
|
|
|
110
165
|
<body>
|
|
111
166
|
<div class="card">
|
|
112
167
|
<h2 id="pageTitle">邮箱验证</h2>
|
|
113
|
-
<div id="message" class="message"
|
|
114
|
-
<div id="action"
|
|
168
|
+
<div id="message" class="message">正在验证,请稍候...</div>
|
|
169
|
+
<div id="action" hidden></div>
|
|
115
170
|
</div>
|
|
116
171
|
|
|
117
172
|
<!-- 公共逻辑 -->
|
|
@@ -132,7 +187,7 @@
|
|
|
132
187
|
},
|
|
133
188
|
handleError = msg => {
|
|
134
189
|
messageDiv.className = 'error', messageDiv.textContent = msg;
|
|
135
|
-
actionDiv.innerHTML = `<div class="link">${getFallbackLink()}</div>`, actionDiv.
|
|
190
|
+
actionDiv.innerHTML = `<div class="link">${getFallbackLink()}</div>`, actionDiv.hidden = false;
|
|
136
191
|
};
|
|
137
192
|
|
|
138
193
|
if (!token) return handleError('无效的验证链接');
|
|
@@ -143,7 +198,7 @@
|
|
|
143
198
|
const response = await fetch(`${apiEndpoint}?token=${encodeURIComponent(token)}`), data = await response.json();
|
|
144
199
|
|
|
145
200
|
if (response.ok) {
|
|
146
|
-
title.classList.add('hidden'), actionDiv.
|
|
201
|
+
title.classList.add('hidden'), actionDiv.hidden = true;
|
|
147
202
|
messageDiv.className = 'success big-success', messageDiv.textContent = data.message;
|
|
148
203
|
|
|
149
204
|
let seconds = 3;
|