Tiny tool to do monoalphabetic substitution
dekker.one
1<!doctype html>
2<html lang="en">
3 <head>
4 <!-- Required meta tags -->
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8 <!-- Bootstrap CSS -->
9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
10
11 <title>Monoalphabetic substitution</title>
12 </head>
13 <body>
14 <!-- Page content -->
15 <main role="main" class="container">
16 <h1 class="mt-5 text-center" style="margin-bottom: 30px;">Monoalphabetic substitution</h1>
17 <!-- Text areas with action buttons -->
18 <div class="row" style="margin-bottom: 30px;">
19 <div class="col">
20 <h4 class="text-center">Plain Text</h4>
21 <div class="input-group">
22 <textarea id="plain-text" class="form-control" aria-label="Plain Text" rows="10"></textarea>
23 <div class="input-group-append">
24 <button id="encrypt" class="btn btn-success" type="button">Encrypt →</button>
25 </div>
26 </div>
27 </div>
28 <div class="col">
29 <h4 class="text-center">Encrypted Text</h4>
30 <div class="input-group">
31 <div class="input-group-prepend">
32 <button id="decrypt" class="btn btn-danger" type="button">← Decrypt</button>
33 </div>
34 <textarea id="encrypted-text" class="form-control" aria-label="Encrypted Text" rows="10"></textarea>
35 </div>
36 </div>
37 </div>
38
39 <!-- Key input -->
40 <div class="row" style="margin-bottom: 30px;">
41 <div class="col">
42 <div class="input-group mb-3">
43 <div class="input-group-prepend">
44 <span class="input-group-text">A</span>
45 </div>
46 <input type="text" class="form-control" id="A" aria-label="A" aria-describedby="A">
47 </div>
48
49 <div class="input-group mb-3">
50 <div class="input-group-prepend">
51 <span class="input-group-text">B</span>
52 </div>
53 <input type="text" class="form-control" id="B" aria-label="B" aria-describedby="B">
54 </div>
55
56 <div class="input-group mb-3">
57 <div class="input-group-prepend">
58 <span class="input-group-text">C</span>
59 </div>
60 <input type="text" class="form-control" id="C" aria-label="C" aria-describedby="C">
61 </div>
62
63 <div class="input-group mb-3">
64 <div class="input-group-prepend">
65 <span class="input-group-text">D</span>
66 </div>
67 <input type="text" class="form-control" id="D" aria-label="D" aria-describedby="D">
68 </div>
69 </div>
70 <div class="col">
71 <div class="input-group mb-3">
72 <div class="input-group-prepend">
73 <span class="input-group-text">E</span>
74 </div>
75 <input type="text" class="form-control" id="E" aria-label="E" aria-describedby="E">
76 </div>
77
78 <div class="input-group mb-3">
79 <div class="input-group-prepend">
80 <span class="input-group-text">F</span>
81 </div>
82 <input type="text" class="form-control" id="F" aria-label="F" aria-describedby="F">
83 </div>
84
85 <div class="input-group mb-3">
86 <div class="input-group-prepend">
87 <span class="input-group-text">G</span>
88 </div>
89 <input type="text" class="form-control" id="G" aria-label="G" aria-describedby="G">
90 </div>
91
92 <div class="input-group mb-3">
93 <div class="input-group-prepend">
94 <span class="input-group-text">H</span>
95 </div>
96 <input type="text" class="form-control" id="H" aria-label="H" aria-describedby="H">
97 </div>
98 </div>
99 <div class="col">
100 <div class="input-group mb-3">
101 <div class="input-group-prepend">
102 <span class="input-group-text">I</span>
103 </div>
104 <input type="text" class="form-control" id="I" aria-label="I" aria-describedby="I">
105 </div>
106
107 <div class="input-group mb-3">
108 <div class="input-group-prepend">
109 <span class="input-group-text">J</span>
110 </div>
111 <input type="text" class="form-control" id="J" aria-label="J" aria-describedby="J">
112 </div>
113
114 <div class="input-group mb-3">
115 <div class="input-group-prepend">
116 <span class="input-group-text">K</span>
117 </div>
118 <input type="text" class="form-control" id="K" aria-label="K" aria-describedby="K">
119 </div>
120
121 <div class="input-group mb-3">
122 <div class="input-group-prepend">
123 <span class="input-group-text">L</span>
124 </div>
125 <input type="text" class="form-control" id="L" aria-label="L" aria-describedby="L">
126 </div>
127 </div>
128 <div class="col">
129 <div class="input-group mb-3">
130 <div class="input-group-prepend">
131 <span class="input-group-text">M</span>
132 </div>
133 <input type="text" class="form-control" id="M" aria-label="M" aria-describedby="M">
134 </div>
135
136 <div class="input-group mb-3">
137 <div class="input-group-prepend">
138 <span class="input-group-text">N</span>
139 </div>
140 <input type="text" class="form-control" id="N" aria-label="N" aria-describedby="N">
141 </div>
142
143 <div class="input-group mb-3">
144 <div class="input-group-prepend">
145 <span class="input-group-text">O</span>
146 </div>
147 <input type="text" class="form-control" id="O" aria-label="O" aria-describedby="O">
148 </div>
149
150 <div class="input-group mb-3">
151 <div class="input-group-prepend">
152 <span class="input-group-text">P</span>
153 </div>
154 <input type="text" class="form-control" id="P" aria-label="P" aria-describedby="P">
155 </div>
156 </div>
157 <div class="col">
158 <div class="input-group mb-3">
159 <div class="input-group-prepend">
160 <span class="input-group-text">Q</span>
161 </div>
162 <input type="text" class="form-control" id="Q" aria-label="Q" aria-describedby="Q">
163 </div>
164
165 <div class="input-group mb-3">
166 <div class="input-group-prepend">
167 <span class="input-group-text">R</span>
168 </div>
169 <input type="text" class="form-control" id="R" aria-label="R" aria-describedby="R">
170 </div>
171
172 <div class="input-group mb-3">
173 <div class="input-group-prepend">
174 <span class="input-group-text">S</span>
175 </div>
176 <input type="text" class="form-control" id="S" aria-label="S" aria-describedby="S">
177 </div>
178
179 <div class="input-group mb-3">
180 <div class="input-group-prepend">
181 <span class="input-group-text">T</span>
182 </div>
183 <input type="text" class="form-control" id="T" aria-label="T" aria-describedby="T">
184 </div>
185 </div>
186 <div class="col">
187 <div class="input-group mb-3">
188 <div class="input-group-prepend">
189 <span class="input-group-text">U</span>
190 </div>
191 <input type="text" class="form-control" id="U" aria-label="U" aria-describedby="U">
192 </div>
193
194 <div class="input-group mb-3">
195 <div class="input-group-prepend">
196 <span class="input-group-text">V</span>
197 </div>
198 <input type="text" class="form-control" id="V" aria-label="V" aria-describedby="V">
199 </div>
200
201 <div class="input-group mb-3">
202 <div class="input-group-prepend">
203 <span class="input-group-text">W</span>
204 </div>
205 <input type="text" class="form-control" id="W" aria-label="W" aria-describedby="W">
206 </div>
207
208 <div class="input-group mb-3">
209 <div class="input-group-prepend">
210 <span class="input-group-text">X</span>
211 </div>
212 <input type="text" class="form-control" id="X" aria-label="X" aria-describedby="X">
213 </div>
214 </div>
215 <div class="col">
216 <div class="input-group mb-3">
217 <div class="input-group-prepend">
218 <span class="input-group-text">Y</span>
219 </div>
220 <input type="text" class="form-control" id="Y" aria-label="Y" aria-describedby="Y">
221 </div>
222
223 <div class="input-group mb-3">
224 <div class="input-group-prepend">
225 <span class="input-group-text">Z</span>
226 </div>
227 <input type="text" class="form-control" id="Z" aria-label="Z" aria-describedby="Z">
228 </div>
229 </div>
230 </div>
231
232 <!-- Alphabet control -->
233 <div class="row">
234 <div class="col">
235 <div class="input-group">
236 <input id="alphabet" type="text" class="form-control" placeholder="ABCDEFGHIJKLMNOPQRSTUVWXYZ" aria-label="Alphabet" aria-describedby="alphabet">
237 <div class="input-group-append">
238 <button id="generate-alpha" class="btn btn-warning" type="button">Generate Alphabet</button>
239 <button id="import-alpha" class="btn btn-primary" type="button">Import Alphabet</button>
240 </div>
241 </div>
242 </div>
243 </div>
244 </main>
245
246 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
247 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
248 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
249 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
250 <!-- Crypt JS -->
251 <script src="./crypt.js"></script>
252 </body>
253</html>