rail.html

<!DOCTYPE html>
<html>
  	<head>
      <title> Rail Fence 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/railfence.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 class="active" 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>Rail Fence Cipher</h1>
      </div>

    </head>
    <body>


      <br><br>
      <br><br>
      <div class="gridContainer">
            <div class="cipherInput">
              <br>
              <label>Enter message for encryption</label><br><br>
              <textarea id="encryptInput" type="text"></textarea ><br>
              <label class="numberKeyLabel">Enter key for decryption</label><br><br>
              <textarea class="numberKey" id="encryptKey" 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 class="numberKeyLabel">Enter key for decryption</label><br><br>
              <textarea class="numberKey"id="decryptKey" type="text"></textarea>
              <br>
              <button onclick="decrypt()">Decrypt</button>
              <br>
            </div>

            <div class="sidebar">
              <h3>Usage:</h3>
              <p>
                Type the message you want to encrypt/decrypyt.
              </p>
              <p>
                The key you enter must be a number and not bigger than the length of message.
              </p>
            </div>


            <div class="about">
              <h2>How it works:</h2>
               <p>
                  The way the Rail Fence Cipher works is by taking the users message and splitting that message across lines in a "zig-zag" fashion. Then the encrypted message is formed by reading each line in order. The number of lines depends on the user's key. This implementation is not complete, it will not work if the key is bigger than the length of the message.

               </p>

            </div>

      </div>

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