-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
337 lines (298 loc) · 20.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fidelius · Password generator">
<meta name="author" content="Sirius">
<title>Fidelius · 密码生成器</title>
<!--Icon Source: https://www.flaticon.com/free-icon/padlock_7718913?term=password&page=3&position=20&origin=search&related_id=7718913-->
<link rel="shortcut icon" href="favicon.ico">
<!--CSS File Source: https://bootswatch.com/quartz/-->
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" media="screen, projection">
<link type="text/css" rel="stylesheet" href="css/loading.min.css">
</head>
<body>
<div class="spinner-fullpage" id="loadingSpinner" style="display: none;">
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="input-field col-12 col-sm-12 col-md-10 col-lg-8 col-xl-6">
<div class="page-header mb-2">
<h1>
Fidelius
<small class="text-muted d-none d-sm-inline-block"> · </small>
<small class="text-muted text-nowrap">Password generator</small>
</h1>
</div>
<!--弹窗-->
<div class="alert alert-warning" role="alert">
说明：密码生成使用 <a href="https://en.wikipedia.org/wiki/Argon2">Argon2</a> 算法，所有运算均在本地进行。点击每个输入框前的按钮可查看详细说明，点击按钮外任意区域可关闭说明。密码生成时间取决于设备性能，生成过程中网页可能会无响应，请耐心等待
</div>
<form>
<!--主密码-->
<div class="input-group mb-2">
<a tabindex="0" class="btn btn-secondary" role="button" data-bs-toggle="popover"
data-bs-trigger="focus" data-bs-placement="left"
data-bs-content="唯一需要记住的密码，其他密码基于此密码生成，不建议包含个人信息（如生日、姓名），长度最少为8位">记忆密码</a>
<input type="password" class="form-control" id="memoryCode" placeholder="例：M3m0RyC@de!" value=""
onkeyup="">
</div>
<!--区分标识/域名哈希盐-->
<div class="input-group mb-2">
<a tabindex="0" class="btn btn-secondary" role="button" data-bs-toggle="popover"
data-bs-trigger="focus" data-bs-placement="left"
data-bs-content="哈希盐的组成部分，可以使用网站域名，如知乎使用zhihu.com">区分标识</a>
<input type="text" class="form-control" id="distinguishMark" placeholder="例：zhihu.com" value="">
</div>
<div class="row align-items-center">
<!--密码创建年月-->
<div class="col-8 col-md-9">
<div class="input-group mb-2">
<a tabindex="0" class="btn btn-secondary" role="button" data-bs-toggle="popover"
data-bs-trigger="focus" data-bs-placement="left"
data-bs-content="哈希盐的组成部分，用于定期修改密码，在2023年生成的密码可填写2023，非必填">生成时间</a>
<input type="text" class="form-control" id="generateTime" placeholder="例：2023年"
value="">
</div>
</div>
<!--是否包含特殊符号-->
<div class="col-4 col-md-3">
<div class="input-group mb-2">
<div class="form-check form-switch mx-auto">
<input class="form-check-input" type="checkbox" id="containSymbols" checked>
<label class="form-check-label text-nowrap" for="containSymbols">特殊符号</label>
</div>
</div>
</div>
</div>
<div class="row align-items-center">
<!--密码长度-->
<div class="col-8 col-md-9">
<div class="input-group mb-2">
<a tabindex="0" class="btn btn-secondary" role="button" data-bs-toggle="popover"
data-bs-trigger="focus" data-bs-placement="left"
data-bs-content="最终生成的密码的长度，默认为16位，建议不少于8位，最小为6位">密码长度</a>
<input type="number" class="form-control" id="pwdLength" placeholder="例：16" value=""
max="60" min="6">
</div>
</div>
<!--是否包含大写字母-->
<div class="col-4 col-md-3">
<div class="input-group mb-2">
<div class="form-check form-switch mx-auto">
<input class="form-check-input" type="checkbox" id="containUppercase" checked>
<label class="form-check-label text-nowrap" for="containUppercase">大写字母</label>
</div>
</div>
</div>
</div>
<!--自定义参数-->
<div class="accordion" id="advancedSettings">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
高级设置
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
data-bs-parent="#advancedSettings">
<div class="accordion-body">
<h6>以下为自定义设置，如无特殊需要请跳过</h6>
<!--特殊符号复选框-->
自选特殊符号（仅用于对特殊符号有要求的网站，选中的符号可能不会全部出现）
<div class="input-group mb-2 mt-2">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1"
name="customSymbol" value="~">
<label class="form-check-label" for="inlineCheckbox1">~</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2"
name="customSymbol" value="*">
<label class="form-check-label" for="inlineCheckbox2">*</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3"
name="customSymbol" value="-">
<label class="form-check-label" for="inlineCheckbox3">-</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox4"
name="customSymbol" value="+">
<label class="form-check-label" for="inlineCheckbox4">+</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox5"
name="customSymbol" value="(">
<label class="form-check-label" for="inlineCheckbox5">(</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox6"
name="customSymbol" value=")">
<label class="form-check-label" for="inlineCheckbox6">)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox7"
name="customSymbol" value="!">
<label class="form-check-label" for="inlineCheckbox7">!</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox8"
name="customSymbol" value="@">
<label class="form-check-label" for="inlineCheckbox8">@</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox9"
name="customSymbol" value="#">
<label class="form-check-label" for="inlineCheckbox9">#</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox10"
name="customSymbol" value="$">
<label class="form-check-label" for="inlineCheckbox10">$</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox11"
name="customSymbol" value="^">
<label class="form-check-label" for="inlineCheckbox11">^</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox12"
name="customSymbol" value="&">
<label class="form-check-label" for="inlineCheckbox12">&</label>
</div>
</div>
以下为 Argon2 推荐加密参数，如无特殊需要请保持默认
<!--迭代次数-->
<div class="input-group mb-2 mt-2">
<a tabindex="0" class="btn btn-secondary" role="button" data-bs-toggle="popover"
data-bs-trigger="focus" data-bs-placement="left"
data-bs-content="哈希运算的迭代次数，它必须是一个从 1 到 2^(32)-1 的整数值。若此处输入值小于1，将采用默认值计算">迭代次数</a>
<input type="number" class="form-control" id="iteration" placeholder="3"
value="" min="1">
</div>
<!--并行数量-->
<div class="input-group mb-2">
<a tabindex="0" class="btn btn-secondary" role="button" data-bs-toggle="popover"
data-bs-trigger="focus" data-bs-placement="left"
data-bs-content="并行数量决定了可以运行多少个独立的但同步的计算链。它必须是一个从 1 到 2^(24)-1 的整数值。若此处输入值小于1，将采用默认值计算">并行数量</a>
<input type="number" class="form-control" id="parallelism" placeholder="1"
value="" min="1">
</div>
<!--内存用量，单位KB-->
<div class="input-group mb-2">
<a tabindex="0" class="btn btn-secondary" role="button" data-bs-toggle="popover"
data-bs-trigger="focus" data-bs-placement="left"
data-bs-content="内存大小必须是一个整数，取值范围为 8*并行数 到 2^(32)-1 KB。实际用量为输入值四舍五入到 4*并行数 的最近倍数。若此处输入值小于8*并行数，将采用默认值计算">内存用量</a>
<input type="number" class="form-control" id="memoryUsage" placeholder="65536"
value="" min="8">
<span class="input-group-text">KB</span>
</div>
<!--输出散列长度-->
<div class="input-group">
<a tabindex="0" class="btn btn-secondary" role="button" data-bs-toggle="popover"
data-bs-trigger="focus" data-bs-placement="left"
data-bs-content="散列长度必须是一个从 4 到 2^(32)-1 的整数字节，需大于等于密码长度">散列长度</a>
<input type="number" class="form-control" id="hashLength" placeholder="64"
value="" min="4">
<span class="input-group-text">Byte</span>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--生成-->
<div class="form-group">
<div class="d-grid">
<button class="btn btn-lg btn-outline-warning" type="button" id="generatePwd">
生成密码
</button>
</div>
</div>
<!-- 结果Modal弹窗 -->
<div class="modal fade" id="resultModal" tabindex="-1" aria-labelledby="resultModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="resultModalLabel">生成结果</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<!--复制/评分-->
<div class="form-group">
<div class="input-group mb-2">
<input class="form-control" id="pwdOutput" type="password" readonly>
<span class="input-group-text btn" onclick="showPwdOutput()"
id="showOrHidePwd" role="button">显示</span>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar" id="qualityBar" aria-placeholder="密码强度评分"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">bits</div>
</div>
<div class="d-flex justify-content-center mt-1">
<p class="" id="qualityText">
score
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-outline-secondary" type="button" id="btnCopy">
复制
</button>
<button class="btn btn-outline-warning" type="button" id="btnCopyClose"
data-bs-dismiss="modal">
复制并关闭
</button>
</div>
</div>
</div>
</div>
<!-- 报错Modal弹窗 -->
<div class="modal fade" id="errorModal" tabindex="-1" aria-labelledby="errorModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="errorModalLabel">错误！</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-group">
<textarea class="form-control" id="errorOutput" rows="6"></textarea>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/lib/clipboard.min.js"></script>
<script type="text/javascript" src="js/lib/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/lib/PasswordQualityCalculator.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
<footer id="footer">
<div class="container mt-5 mb-2">
<div class="row justify-content-center">
<div class="input-field col-12 col-sm-12 col-md-8 col-lg-6">
<span class="badge bg-secondary float-end"><a href="https://siriusq.top/">返回 siriusq.top</a></span>
<span class="badge bg-info"><a href="https://github.com/Siriusq/Fidelius">Github 开源</a></span>
<span class="badge bg-secondary"><a href="./en.html">English Version</a></span>
</div>
</div>
</div>
</footer>
</html>