DocsLog in

A dark, mysterious five-act ARG built around hidden archives and forgotten witnesses.

Download ZIP
assets/js/pages/decoder.js 84 lines · 3.1 KB · javascript
1
// Cipher decoder tool
2
3
const DecoderPage = {
4
  render() {
5
    return `
6
      <section class="hero">
7
        <h1>CIPHER DECODER</h1>
8
        <p class="lead">Tools for decryption and analysis.</p>
9
      </section>
10
11
      <section class="panel">
12
        <p class="panel-title">CAESAR CIPHER</p>
13
        <div class="decoder-tool">
14
          <input type="text" id="caesar-input" placeholder="Enter encrypted text" />
15
          <label>Shift: <input type="number" id="caesar-shift" min="0" max="25" value="3" /></label>
16
          <button onclick="DecoderPage.decodeCaesar()">Decode</button>
17
          <div id="caesar-output" class="decoder-output"></div>
18
        </div>
19
      </section>
20
21
      <section class="panel">
22
        <p class="panel-title">VIGENÈRE CIPHER</p>
23
        <div class="decoder-tool">
24
          <input type="text" id="vigenere-input" placeholder="Enter encrypted text" />
25
          <label>Key: <input type="text" id="vigenere-key" placeholder="Enter cipher key" /></label>
26
          <button onclick="DecoderPage.decodeVigenere()">Decode</button>
27
          <div id="vigenere-output" class="decoder-output"></div>
28
        </div>
29
      </section>
30
31
      <section class="panel">
32
        <p class="panel-title">BASE64 DECODER</p>
33
        <div class="decoder-tool">
34
          <input type="text" id="base64-input" placeholder="Enter base64 text" />
35
          <button onclick="DecoderPage.decodeBase64()">Decode</button>
36
          <div id="base64-output" class="decoder-output"></div>
37
        </div>
38
      </section>
39
40
      <section class="panel">
41
        <p class="panel-title">HEX TO ASCII</p>
42
        <div class="decoder-tool">
43
          <input type="text" id="hex-input" placeholder="Enter hex (space-separated)" />
44
          <button onclick="DecoderPage.decodeHex()">Decode</button>
45
          <div id="hex-output" class="decoder-output"></div>
46
        </div>
47
      </section>
48
    `;
49
  },
50
51
  decodeCaesar() {
52
    const text = document.getElementById('caesar-input').value;
53
    const shift = parseInt(document.getElementById('caesar-shift').value);
54
    const result = Ciphers.caesar(text, shift);
55
    document.getElementById('caesar-output').textContent = result;
56
  },
57
58
  decodeVigenere() {
59
    const text = document.getElementById('vigenere-input').value;
60
    const key = document.getElementById('vigenere-key').value;
61
    if (!key) {
62
      document.getElementById('vigenere-output').textContent = 'Enter a key to decode.';
63
      return;
64
    }
65
    const result = Ciphers.vigenere(text, key, true);
66
    document.getElementById('vigenere-output').textContent = result;
67
  },
68
69
  decodeBase64() {
70
    const text = document.getElementById('base64-input').value;
71
    const result = Ciphers.base64Decode(text);
72
    document.getElementById('base64-output').textContent = result;
73
  },
74
75
  decodeHex() {
76
    const hex = document.getElementById('hex-input').value;
77
    try {
78
      const result = hex.split(' ').map(h => String.fromCharCode(parseInt(h, 16))).join('');
79
      document.getElementById('hex-output').textContent = result;
80
    } catch (e) {
81
      document.getElementById('hex-output').textContent = 'Invalid hex input.';
82
    }
83
  }
84
};