-
Notifications
You must be signed in to change notification settings - Fork 0
/
playfair.html
91 lines (72 loc) · 4.05 KB
/
playfair.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
<!DOCTYPE html>
<html>
<head>
<title> Playfair Cipher </title>
<link rel="stylesheet" href="style/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/playfair.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="index.html">Home</a>
<a href="caesar.html">Caesar Cipher</a>
<a class="active" href="playfair.html">Playfair Cipher</a>
<a href="rail.html">Rail Fence Cipher</a>
<a href="simon.html">Simon Wells Cipher</a>
</div>
<div class="navContainer">
<a href="javascript:void(0)" onclick="openNav()"><img id="navImg" src="assets/nav.png"/></a>
</div>
<div class="header">
<h1>Playfair Cipher</h1>
</div>
</head>
<body>
<br><br>
<br><br>
<div class="gridContainer">
<div class="cipherInput">
<br>
<label>Enter message for decryption</label><br><br>
<textarea id="encryptInput" type="text"></textarea><br><br>
<label>Enter key for decryption</label><br><br>
<textarea id="encryptKey" type="text"></textarea>
<br><br>
<button onclick="encrypt()">Encrypt</button>
<br>
</div>
<div class="cipherOutput">
<br>
<label>Enter message for decryption</label><br><br>
<textarea id="decryptInput" type="text"></textarea><br><br>
<label>Enter key for decryption</label><br><br>
<textarea id="decryptKey" type="text"></textarea>
<br><br>
<button onclick="decrypt()">Decrypt</button>
<br>
</div>
<div class="sidebar">
<h2>Usage:</h2>
<p>
Type the message you want to encrypt/decrypt.
</p>
<p>
The key must be a word or phrase.
</p>
</div>
<div class="about">
<h2>How it works:</h2>
<p>
The way the Playfair Cipher works is by taking the users message and splitting the letters into pairs of 2, if there is an odd letter out, you add the letter 'x' to it. If there is a pair with the same letter, you then have to insert a 'x' between them. Then you create a 5x5 matrix grid that is made of the key phrase and the alphabet language with the exception of the letter 'j' (if message contains the letter 'j', it will be replaced by the letter 'i'). You find where each pair of letters are positioned in the key matrix, and change their positions depending on three cases. First case is if the two letters appear on the same row in the key matrix, then replace each letter by the letter to the right of it (it will overlap to the left side if needed). Second case is if the two letters appear in the same column in the key matrix, then replace each letter by the letter below it (it will go back to the top of the key matrix if needed). Last case is if the two letters are at two opposite corners that form a rectangle, then replace each letter by the letter that forms the other corner of the rectangle which lies on the same row as each letter.
</p>
<p>
To decrypt the message the same steps as encryption are repeated with the exception of the first and second case, in which you take the letters to the left and above respectively. Must also remove any 'X' that was in the encrypted text.
</p>
</div>
</div>
<footer>
Darwon Rashid Copyright © 2018
</footer>
</body>
</html>