-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
100 lines (99 loc) · 7.92 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
<!DOCTYPE html>
<html lang="zh-CN"> <!-- 设置文档类型为HTML，并指定语言为中文（简体） -->
<head>
<meta charset="UTF-8"> <!-- 设置文档字符编码为UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，使页面在移动设备上也能很好地显示 -->
<title>徐道开发-随机账号密码生成器</title> <!-- 网页标题 -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <!-- 引入Bootstrap CSS库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <!-- 引入Font Awesome图标库 -->
<link rel="stylesheet" href="styles.css"> <!-- 引入自定义样式表 -->
<!-- 引入 zxcvbn 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script> <!-- 引入zxcvbn密码强度检测库 -->
</head>
<body>
<div class="container mt-5"> <!-- 创建一个带有顶部外边距的容器 -->
<h1 class="text-center mb-4">徐道开发-随机账号密码生成器</h1> <!-- 标题，居中对齐，带有底部外边距 -->
<div class="row"> <!-- 创建一个行 -->
<div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3"> <!-- 设置列的宽度和偏移量，使其居中 -->
<div class="form-group">
<label for="usernameType">用户名类型:</label>
<select id="usernameType" class="form-control" data-toggle="tooltip" title="选择用户名的类型">
<option value="english">英文用户名</option> <!-- 选项：英文用户名 -->
<option value="chinese">中文用户名</option> <!-- 选项：中文用户名 -->
</select>
</div>
<div class="form-group">
<label for="usernameLength">用户名长度:</label>
<input type="number" id="usernameLength" class="form-control" min="4" max="16" value="8" data-toggle="tooltip" title="设置用户名长度"> <!-- 设置用户名长度的输入框 -->
</div>
<div class="form-group">
<label for="accountLength">账号长度:</label>
<input type="number" id="accountLength" class="form-control" min="4" max="16" value="8" data-toggle="tooltip" title="设置账号长度"> <!-- 设置账号长度的输入框 -->
</div>
<div class="form-group">
<label for="passwordLength">密码长度:</label>
<input type="number" id="passwordLength" class="form-control" min="8" max="20" value="12" data-toggle="tooltip" title="设置密码长度"> <!-- 设置密码长度的输入框 -->
</div>
<div class="form-group form-check">
<input type="checkbox" id="includeSpecialChars" class="form-check-input" checked> <!-- 包含特殊字符的复选框，默认选中 -->
<label for="includeSpecialChars" class="form-check-label" data-toggle="tooltip" title="是否包含特殊字符">包含特殊字符</label>
</div>
<div class="form-group">
<label for="website">对应网站:</label>
<input type="text" id="website" class="form-control" placeholder="输入网站名称"> <!-- 输入网站名称的文本框 -->
</div>
<div class="form-group">
<label for="fileName">文件名:</label>
<input type="text" id="fileName" class="form-control" placeholder="输入文件名"> <!-- 输入文件名的文本框 -->
</div>
<div class="buttons mb-3">
<button id="generateUsernameButton" class="btn btn-info btn-block"><i class="fas fa-user"></i> 生成用户名</button> <!-- 生成用户名按钮 -->
<button id="generateButton" class="btn btn-primary btn-block"><i class="fas fa-key"></i> 生成账号和密码</button> <!-- 生成账号和密码按钮 -->
</div>
<div id="result" class="result">
<p>用户名: <span id="username"></span> <button id="copyUsername" class="btn btn-secondary btn-sm"><i class="fas fa-copy"></i> 复制用户名</button></p> <!-- 显示并复制用户名 -->
<p>账号: <span id="account"></span> <button id="copyAccount" class="btn btn-secondary btn-sm"><i class="fas fa-copy"></i> 复制账号</button></p> <!-- 显示并复制账号 -->
<p>密码: <span id="password"></span> <button id="copyPassword" class="btn btn-secondary btn-sm"><i class="fas fa-copy"></i> 复制密码</button></p> <!-- 显示并复制密码 -->
<p>密码强度: <span id="strength"></span></p> <!-- 显示密码强度 -->
</div>
<button id="downloadButton" class="btn btn-success btn-block"><i class="fas fa-download"></i> 下载记录</button> <!-- 下载记录按钮 -->
<div class="export-import mt-3">
<button onclick="exportToCSV()" class="btn btn-warning btn-block"><i class="fas fa-file-csv"></i> 导出为CSV</button> <!-- 导出为CSV按钮 -->
<button onclick="exportToJSON()" class="btn btn-warning btn-block"><i class="fas fa-file-code"></i> 导出为JSON</button> <!-- 导出为JSON按钮 -->
<input type="file" id="importFile" class="d-none" accept=".json" onchange="importFromFile(event)"> <!-- 隐藏的文件输入框，用于导入文件 -->
<label for="importFile" class="btn btn-warning btn-block"><i class="fas fa-file-import"></i> 从文件导入</label> <!-- 导入文件按钮 -->
</div>
<div class="help mt-4">
<h5>使用说明:</h5>
<p>1. 选择用户名类型并设置长度。</p>
<p>2. 设置账号和密码的长度，并选择是否包含特殊字符。</p>
<p>3. 输入对应网站和文件名（可选）。</p>
<p>4. 点击生成按钮获取账号和密码。</p>
<p>5. 点击复制按钮复制生成的信息。</p>
<p>6. 点击下载按钮保存生成的信息。</p>
</div>
<button id="themeToggle" class="btn btn-secondary btn-block"><i class="fas fa-adjust"></i> 切换主题</button> <!-- 切换主题按钮 -->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" defer></script> <!-- 引入jQuery库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" defer></script> <!-- 引入Popper.js库 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" defer></script> <!-- 引入Bootstrap JS库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js" defer></script> <!-- 引入CryptoJS库 -->
<script src="script.js" defer></script> <!-- 引入自定义脚本 -->
<script>
$(document).ready(function() {
loadTheme(); /* 加载主题 */
$('[data-toggle="tooltip"]').tooltip(); /* 初始化所有带有data-toggle="tooltip"属性的元素 */
$('#themeToggle').click(function() {
$('body').toggleClass('dark-mode'); /* 切换body的dark-mode类 */
if ($('body').hasClass('dark-mode')) {
localStorage.setItem('theme', 'dark'); /* 将主题设置为深色 */
} else {
localStorage.setItem('theme', 'light'); /* 将主题设置为浅色 */
}
});
});
</script> <!-- 内联脚本：初始化工具提示和主题切换功能 -->
</body>
</html>