movingCaesar/index.html at master · beothorn/movingCaesar · GitHub

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Getting Started</title>
    <style type="text/css">
      body {
          margin: 40px auto;
          max-width: 650px;
          line-height: 1.6;
          font-size: 18px;
          color: #444;
          padding: 0 10px
      }

      h1,h2,h3 {
          line-height: 1.2
      }

      textarea{
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>Moving Caesar cypher</h1>

    <p>The <a href="https://en.wikipedia.org/wiki/Caesar_cipher">Caesar cipher</a> is a
      subtitution cypher that replaces each letter for another one given a shift amount on the alphabet.</p>

    <p>So for a shift of 1 A becomes B, B becomes C and so on. It is really easy to read if you use a shift of one.</p>

    <pre>
  Uibu jt wfsz fbtz!
  or without spaces
  Uibujtwfszfbtz!
    </pre>

    <p>This cypher is really weak against <a href="https://en.wikipedia.org/wiki/Frequency_analysis">frequency analysis</a></p>

    <p>This is a minor variation of the idea that is supposed to be stronger
      against frequency analysis but still readable without too much mental effort.</p>

    <p>"Moving Caesar" uses a variant shift depending on the letter position. It varies the shift in increments of 1 and a mod of n.</p>

    <p>For example, given n = 3:</p>

    <pre>
  A B C D
  0 1 2 3
    </pre>


    <p>A on position 0: 0 mod 3 is 0 so we use shift 0, which is A</p>
    <p>B on position 1: 1 mod 3 is 1 so we use shift 1, which is C</p>
    <p>C on position 2: 2 mod 3 is 2 so we use shift 2, which is E</p>
    <p>D on position 3: 3 mod 3 is 0 so we use shift 0, which is D</p>

    <pre>
  That is very easy!
  tictjuvftyfcsz
    </pre>

    <p>N: <input type="text" id="rotation" value="3"/></p>

    <h2>Raw:</h2>
    <p><textarea rows="4" id="input"></textarea></p>

    <h2>Cyphered:</h2>
    <p><textarea rows="4" id="output"></textarea></p>

    <script src="./dist/bundle.js"></script>
  </body>
</html>