-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
185 lines (164 loc) · 5.07 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私人密码库</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-image: url('background.jpg');
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
form {
background-color: rgba(255, 255, 255, 0.5);;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 400px;
width: 100%;
}
label {
display: block;
margin-bottom: 10px;
}
select,
input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
box-sizing: border-box;
}
button {
background-color: #4caf50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#hash-value {
color: blue;
font-size: 20px;
text-align: center;
}
/* Adjusted styles for matrices */
.matrices {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
}
.matrix {
border: 1px solid #ddd;
padding: 10px;
margin: 5px;
border-radius: 4px;
}
</style>
<!-- 引入本地 crypto-js 文件 -->
<script src="crypto-js.js"></script>
<script>
function hashCode(str) {
let hash = CryptoJS.SHA1(str).toString(CryptoJS.enc.Hex);
return hash;
}
function showHash() {
let siteName = document.getElementById("site-name").value;
let password = document.getElementById("password").value;
let input = siteName + password;
// 防止密码太长只取中间13位
let hash = hashCode(input).substring(10, 23);
let matrix = ["@", "#", "$", "%", "&", "*", "!", "?", "@", "#"];
let digits = []; // 存储数字字符的数组
let res = []; //存储最终字符数组
for (let i = 0, idx = 0; idx < 6 && i < hashCode(input).length; i++) {
let char = hash.charAt(i); // 获取当前字符
if (char >= '0' && char <= '9') { // 检查字符是否是数字
digits.push(matrix[char - '0']); // 如果是数字，则添加到数组中
idx++;
}
}
while (digits.length < 6) {
if (digits.length % 2 == 0) digits.push(matrix[0]);
else digits.push(matrix[2]);
}
let idx = 0;
for (let i = 0; i < 13; i++) {
let ch = hash.charAt(i);
res.push(ch);
if (idx < 6) {
if (i == 1) res.push(digits[idx++]);
else if (i == 5) res.push(digits[idx++]);
else if (i == 8) res.push(digits[idx++]);
else if (i == 10) res.push(digits[idx++]);
else if (i == 11) res.push(digits[idx++]);
else if (i == 12) res.push(digits[idx++]);
else if (ch >= '0' && ch <= '9') { // 检查字符是否是数字
res.push(digits[idx++]); // 如果是数字，则添加到数组中
}
}
}
hash = res.join('');
// Display results on the page
document.getElementById("hash-value").innerHTML = `
您的Hash密钥最终值为: <br>${hash}
`;
return false; // Prevent the default form submission behavior
}
</script>
</head>
<body>
<form action="https://www.example.com" method="get" target="_blank" onsubmit="return showHash()">
<label for="begin-word">一寸光阴一寸金，三寸光阴一个鑫</label>
<label for="site-name">网址名称:</label>
<select name="site-name" id="site-name">
<option value="www.bilibili.com">www.bilibili.com</option>
<option value="w3schools">W3Schools</option>
<option value="stackoverflow">Stack Overflow</option>
<option value="github">GitHub</option>
</select>
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" maxlength="20" pattern="[A-Za-z0-9]+">
<br>
<button type="submit">点击生成</button>
<br>
<div id="hash-value"></div>
<!-- Added matrices section with fixed content -->
<div class="matrices">
<div class="matrix" id="number-matrix" style="font-family: 'Courier New', monospace;">
1 5 0 4<br>
8 6 7 3<br>
5 2 3 0<br>
9 1 6 8
</div>
<!-- Improved formatting for the letter matrix -->
<div class="matrix" id="letter-matrix" style="font-family: 'Courier New', monospace;">
a h i k<br>
g e l b<br>
f c n q<br>
m p d j
</div>
<!-- Improved formatting for the character matrix -->
<div class="matrix" id="char-matrix" style="font-family: 'Courier New', monospace;">
@ # $ %<br>
& * ( )<br>
! ? / \<br>
+ - = _
</div>
</div>
</form>
</body>
</html>