ROT13-Encoder-Decoder/index.html at main · beggarsmind/ROT13-Encoder-Decoder · 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="A simple web app to encode and decode text using the ROT13 cipher."
    />
    <title>ROT13 Encoder/Decoder</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>


    <div class="header-container">
      <h2>ROT13 Encoder & Decoder</h2>
    </div>
    <div class="container">
      <form>
        <textarea
          id="inputText"
          placeholder="Enter Your text Here..."
          aria-label="Input text area for entering the text to encode or decode"
        ></textarea>
        <button
          type="button"
          onclick="convertROT13()"
          aria-label="Convert text to ROT13 or decode ROT13"
        >
          Convert
        </button>
      </form>
      <div class="textarea-container">
        <textarea
          id="outputText"
          readonly
          placeholder="Output will appear here..."
          aria-label="Output text area showing the encoded or decoded result"
        ></textarea>
        <button
          id="copyButton"
          onclick="copyToClipboard()"
          aria-label="Copy the output text to clipboard"
        >
          Copy
        </button>
      </div>
      <footer>
        <p>
          Re-Designed By Ranjithkumar.R (<a
            href="https://github.com/beggarsmind"
            >Beggar's Mind</a
          >)
        </p>
      </footer>
    </div>

    <!-- Info Button -->
    <button
      type="button"
      id="infoButton"
      onclick="openModal()"
      aria-label="Show more information about ROT13 encryption"
    >
      ROT13 Means?
    </button>

    <!-- Popup Modal -->
    <div id="infoModal" class="modal">
      <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h3>What is ROT13 Encryption?</h3>
        <p>
          <p>
            ROT13 (short for rotate by 13 places) is a simple cipher where each letter of the alphabet is replaced by the letter 13 places ahead of it. It is a specific case of the Caesar cipher, where the shift value is fixed at 13.
          </p>
          <p>
            <strong>How ROT13 Works</strong>
          </p>
          <p>
            ROT13 works on both uppercase and lowercase letters. The alphabet is split into two halves, and letters are shifted by 13 positions. <br><b>For example:</b>
            <br>
            A → N, B → O,C → P, etc.<br>
            N → A, O → B,P → C, etc.<br>
            When you apply ROT13 to a text, it is encrypted. If you apply ROT13 to the same text again, it decrypts back to the original text. This is because 13 + 13 = 26 (which is the length of the alphabet), so applying ROT13 twice results in the original text.
          </p>
          <p>
            <strong>Encryption Example:</strong><br>
            Original Text:<b>Hello</b> <br>
            Applying ROT13:<br>
            H → U<br>
            E → R<br>
            L → Y<br>
            L → Y<br>
            O → B<br>
            Resulting Encrypted Text: <b>Uryyb</b>
          </p>
          <hr>

          <h3>What is ROT13 Decryption?</h3>
          <p>
            ROT13 (short for rotate by 13 places) is a simple cipher where each letter of the alphabet is replaced by the letter 13 places ahead of it. It is a specific case of the Caesar cipher, where the shift value is fixed at 13.
          </p>
          <p>
            <strong>How ROT13 Decryption Works</strong>
          </p>
          <p>
            ROT13 works on both uppercase and lowercase letters. The alphabet is split into two halves, and letters are shifted by 13 positions.<br> <b>For example:</b>
           <br> A → N, B → O, C → P, etc.<br>
            N → A, O → B, P → C, etc.<br>
            When you apply ROT13 to an encrypted text, it is decrypted. If you apply ROT13 to the same text again, it encrypts back to the original text. This is because 13 + 13 = 26 (which is the length of the alphabet), so applying ROT13 twice results in the original text.
          </p>
          <p>

            <strong>Decryption Example:</strong><br>
            Encrypted Text: <b>Uryyb</b><br>
            Applying ROT13:<br>
            U → H<br>
            R → E<br>
            Y → L<br>
            Y → L<br>
            B → O<br>
            Resulting Decrypted Text: <b>Hello</b>
          </p>

        </p>

      </div>
    </div>

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