-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
80 lines (65 loc) · 2.65 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Play Fair Algorithm</title>
</head>
<body>
<section id="landing">
<div class="title">
<h1>Play Fair Algorithm</h1>
</div>
<div class="landing-wrapper">
<div class="introduction">
<p>
The Playfair cipher is a cryptographic technique that employs a 5x5 grid of letters to encrypt pairs
of letters in plaintext. It is known for its simplicity and effectiveness in encrypting messages,
using rules for handling certain edge cases, like repeated letters in the plaintext.
</p>
</div>
<div id="input" class="input">
<input type="text" id="messageBox" name="messageBox" placeholder="Enter your message" required>
<input type="text" name="keyBox" id="keyBox" placeholder="Enter key" required>
<button onclick="playFairAlgo()"> Generate Ciphertext </button>
</div>
</div>
</section>
<section id="solution">
<div id="grid">
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
<div id="result" class="result">
<div id="message"></div>
<div id="editedmessage"></div>
<div id="cipher"></div>
</div>
</section>
<script src="index.js"></script>
</body>
</html>