simon.html

<!DOCTYPE html>
<html>
  	<head>
      <title> Simon Wells 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/simon.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()">&times;</a>
        <a href="index.html">Home</a>
        <a href="caesar.html">Caesar Cipher</a>
        <a href="playfair.html">Playfair Cipher</a>
        <a href="rail.html">Rail Fence Cipher</a>
        <a class="active" 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>Simon Wells 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>
              <label>Enter text key for decryption</label><br><br>
              <textarea  id="encryptKey" type="text"></textarea><br>
              <label class="numberKeyLabel">Enter numeric key for decryption</label><br><br>
              <textarea class="numberKey" id="encryptNumericKey" type="text"></textarea>
              <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>
              <label>Enter text key for encryption</label><br><br>
              <textarea  id="decryptKey" type="text"></textarea><br>
              <label class="numberKeyLabel">Enter numeric key for encryption</label><br><br>
              <textarea class="numberKey" id="decryptNumericKey" type="text"></textarea>
              <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 first key must be a word or phrase and the second key must be a number.
              </p>
            </div>


            <div class="about">
              <h2>How it works:</h2>
               <p>
              The way the Simon Wells cipher works is by taking the users message, and just like the Playfair Cipher, splits it into pairs of 2. There is no need for the letter 'x' to be inserted between letters that are the same for it does not matter in this case. Then just like the Playfair cipher, you find where each letter is positioned in the key matrix that is made out of the key phrase the user typed in. However, unlike the Playfair cipher, we find the row and column of each letter that is positioned in the key matrix and take those numbers. You are then left with numbers that for each pair of numbers represents a letter in the key matrix. Then each number gets an amount added depending on the second key the user types in which is numeric.


               </p>

               <p>
                 To decrypt you take away the amount added to each number and then find what letter each pair of number represents in the key matrix. In each pair, the first number is the row, and the second number is the column.
               </p>
            </div>

      </div>

      <footer>
        Darwon Rashid Copyright &copy; 2018
      </footer>
    </body>
</html>