-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
156 lines (156 loc) · 4.54 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>歪比巴卜加密算法</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="waibibabo.js"></script>
<style>
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
#app {
position: relative;
}
#app > .page {
min-height: 100vh;
}
.translate {
background-color: #333;
padding: 0 100px;
position: relative;
}
.translate .content {
display: flex;
justify-content: space-between;
align-content: center;
}
.translate .content > div {
color: white;
justify-content: center;
display: flex;
flex-direction: column;
}
.control button {
margin: 5px;
}
.input {
width: 40%;
}
header {
display: flex;
justify-content: space-between;
padding: 30px 0;
width: 100%;
color: white;
font-size: 30px;
}
header a {
color: white;
}
.copyright {
position: absolute;
width: 100%;
bottom: 15px;
text-align: center;
}
.copyright a {
color: #1890ff;
}
.spec {
padding: 50px 50px;
}
.spec article {
margin: auto;
max-width: 700px;
}
@media screen and (max-width: 768px) {
.title {
font-size: 26px;
}
.copyright {
font-size: 12px;
}
.translate {
padding: 0 20px 30px 20px;
}
.translate .content {
flex-direction: column;
}
.input {
width: 100%;
}
.spec {
padding: 50px 20px;
}
}
</style>
</head>
<body>
<div id="app">
<div class="page translate">
<header>
<div class="title">
<span><strong>歪比巴卜加密算法</strong></span>
</div>
<div class="links">
<a href="https://github.com/geoi6sam1/WaiBiBaBo" target="_blank"><i class="fab fa-github"></i></a>
</div>
</header>
<div class="content">
<div class="form-group input">
<label for="text"><strong>明文：</strong></label>
<textarea id="text" class="form-control" placeholder="请在此处输入明文" rows="10"></textarea>
</div>
<div class="form-group control">
<button id="btn-encode" class="btn btn-primary">加密👉</button>
<button id="btn-decode" class="btn btn-primary">👈解密</button>
</div>
<div class="form-group input">
<label for="waibi"><strong>密文：</strong></label>
<textarea id="waibi" class="form-control" placeholder="请在此处输入密文" rows="10"></textarea>
</div>
</div>
</div>
<div class="page spec">
<article class="markdown-body">
<h1 style="color: #c33; text-align: center">规格说明</h1>
<p>所有字符使用 <b>UTF-8</b> 编码。</p>
<p>一个字节用 <b>四个字</b> 表示（“歪比巴卜”四个字）。</p>
<p>例子：</p>
<p>小写英文字母“a”，编码后对应的十六进制是<code>0x61</code>。</p>
<p>二进制表示如下：</p>
<p><code>01100001</code></p>
<p>每两位bit为一组，分割如下：</p>
<p><code>01</code> <code>10</code> <code>00</code> <code>01</code></p>
<p>按照下面的转换表即可获得对应密文：</p>
<table>
<thead><th>二进制</th><th>密文</th></thead>
<tbody>
<tr><td>0b00</td><td>歪</td></tr>
<tr><td>0b01</td><td>比</td></tr>
<tr><td>0b10</td><td>巴</td></tr>
<tr><td>0b11</td><td>卜</td></tr>
</tbody>
</table>
<p>对应密文：<code>比巴歪比</code></p>
</article>
</div>
<br>
<div class="copyright">
<span>本算法由 <a href="/">某位大神</a> 编写<br>
（本站非原创仅作为备份保留）</span>
</div>
</div>
</body>
</html>