-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
174 lines (166 loc) · 7.68 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="icon" href="images/favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Decoder Ring - Home Page</title>
</head>
<body>
<header class="container-fluid bg-light border-bottom text-light bg-dark">
<nav class="row align-items-center">
<h1 class="h4 p-3">
<a class="text-light nav-link active" href="index.html">Decoder Ring</a>
</h1>
</nav>
</header>
<main class="container my-4">
<!-- Caesar Shift -->
<section class="row">
<div class="col">
<div class="card">
<div class="card-header bg-info text-white">
<h2 class="my-2">Caesar Shift</h2>
</div>
<div class="card-body">
<p>The Caesar Shift is a type of substitution cipher originally used by Julius Caesar to protect messages of
military
significance. It relies on taking the alphabet and "shifting" letters to the right or left, based on the
typical
alphabetic order.</p>
<hr />
<form id="caesar">
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="caesar-options" id="caesar-options-encode"
value="encode" checked>
<label class="form-check-label" for="caesar-options-encode">Encode</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="caesar-options" id="caesar-options-decode"
value="decode">
<label class="form-check-label" for="caesar-options-decode">Decode</label>
</div>
</div>
<div class="form-group">
<label for="caesar-input">Your message</label>
<textarea class="form-control" id="caesar-input" rows="3"></textarea>
</div>
<div class="form-group">
<label for="caesar-shift">Shift number</label>
<input type="number" class="form-control" id="caesar-shift" />
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
<div id="caesar-alert" class="alert alert-danger mb-0 rounded-0 d-none" role="alert">
Something went wrong! Check your input and the shift amount and try again.
</div>
<div class="card-footer">
Output: <span class="font-weight-bold" id="caesar-output">No message as of yet...</span>
</div>
</div>
</div>
</section>
<!-- Polybius -->
<section class="row mt-4">
<div class="col">
<div class="card">
<div class="card-header bg-warning">
<h2 class="my-2">Polybius Square</h2>
</div>
<div class="card-body">
<p>The Polybius Square is a cipher that is achieved by arranging a typical alphabet into a grid. Each letter
is represented
through a coordinate. For example, in the above table, the letter "B" would be represented by the
numerical pair "21".</p>
<hr />
<form id="polybius">
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="polybius-options" id="polybius-options-encode"
value="encode" checked>
<label class="form-check-label" for="polybius-options-encode">Encode</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="polybius-options" id="polybius-options-decode"
value="decode">
<label class="form-check-label" for="polybius-options-decode">Decode</label>
</div>
</div>
<div class="form-group">
<label for="polybius-input">Your message</label>
<textarea class="form-control" id="polybius-input" rows="3"></textarea>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
<div id="polybius-alert" class="alert alert-danger mb-0 rounded-0 d-none" role="alert">
Something went wrong! Check your input and try again.
</div>
<div class="card-footer">
Output: <span class="font-weight-bold" id="polybius-output">No message as of yet...</span>
</div>
</div>
</div>
</section>
<!-- Substitution -->
<section class="row mt-4">
<div class="col">
<div class="card">
<div class="card-header bg-success text-white">
<h2 class="my-2">Substitution Cipher</h2>
</div>
<div class="card-body">
<p>The Substitution Cipher requires a standard alphabet and a substitution alphabet. Letters from the
standard alphabet
will be transposed to the standard alphabet. This cipher requires that the recipient have the substitution
alphabet,
otherwise it will be difficult for them to decode the message.</p>
<hr />
<form id="substitution">
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="substitution-options"
id="substitution-options-encode" value="encode" checked>
<label class="form-check-label" for="substitution-options-encode">Encode</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="substitution-options"
id="substitution-options-decode" value="decode">
<label class="form-check-label" for="substitution-options-decode">Decode</label>
</div>
</div>
<div class="form-group">
<label for="substitution-input">Your message</label>
<textarea class="form-control" id="substitution-input" rows="3"></textarea>
</div>
<div class="form-group">
<label for="substitution-alphabet">Alphabet key</label>
<input type="text" class="form-control" id="substitution-alphabet" maxlength="26" />
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
<div id="substitution-alert" class="alert alert-danger mb-0 rounded-0 d-none" role="alert">
Something went wrong! Check your input and alphabet key.
</div>
<div class="card-footer">
Output: <span class="font-weight-bold" id="substitution-output">No message as of yet...</span>
</div>
</div>
</div>
</section>
</main>
<script src="./scripts/setup.js"></script>
<script src="./src/caesar.js"></script>
<script src="./src/polybius.js"></script>
<script src="./src/substitution.js"></script>
<script src="./scripts/caesar.js"></script>
<script src="./scripts/polybius.js"></script>
<script src="./scripts/substitution.js"></script>
</body>
</html>