Cryptography Playground

Classical Ciphers

<div class="io-group">
  <label>Select Cipher:</label>
  <select id="cipherType" style="width: 100%; padding: 8px; border-radius: 4px; background: var(--md-code-bg-color); border: 1px solid var(--md-default-fg-color--lightest);">
    <option value="caesar">Caesar Cipher</option>
    <option value="rot13">ROT13</option>
    <option value="vigenere">Vigenère Cipher</option>
    <option value="atbash">Atbash Cipher</option>
  </select>
</div>

<div class="io-group" id="keyInput" style="display: none;">
  <label>Key:</label>
  <input type="text" id="classicalKey" placeholder="Enter key">
</div>

<div class="io-group" id="shiftInput">
  <label>Shift (0-25):</label>
  <input type="number" id="caesarShift" min="0" max="25" value="3">
</div>

<div class="io-group">
  <label>Input Text:</label>
  <textarea id="classicalInput" placeholder="Enter text to encrypt/decrypt"></textarea>
</div>

<div class="controls">
  <button class="btn btn-primary" onclick="classicalEncrypt()">Encrypt</button>
  <button class="btn btn-primary" onclick="classicalDecrypt()">Decrypt</button>
  <button class="btn btn-secondary" onclick="clearClassical()">Clear</button>
</div>

<div class="io-group">
  <label>Output:</label>
  <div class="output-box" id="classicalOutput" onclick="copyOutput('classicalOutput')">Result will appear here...</div>
</div>

Hash Functions

<div class="io-group">
  <label>Input Text:</label>
  <textarea id="hashInput" placeholder="Enter text to hash"></textarea>
</div>

<div class="controls">
  <button class="btn btn-primary" onclick="computeHash()">Compute Hashes</button>
  <button class="btn btn-secondary" onclick="clearHash()">Clear</button>
</div>

<div class="io-group">
  <label>MD5:</label>
  <div class="output-box" id="md5Output" onclick="copyOutput('md5Output')">-</div>
</div>

<div class="io-group">
  <label>SHA-1:</label>
  <div class="output-box" id="sha1Output" onclick="copyOutput('sha1Output')">-</div>
</div>

<div class="io-group">
  <label>SHA-256:</label>
  <div class="output-box" id="sha256Output" onclick="copyOutput('sha256Output')">-</div>
</div>

<div class="info-box">
  <strong>Note:</strong> MD5 và SHA-1 không còn an toàn cho mục đích bảo mật. Dùng SHA-256 hoặc cao hơn.
</div>

Encoding / Decoding

<div class="io-group">
  <label>Select Encoding:</label>
  <select id="encodingType" style="width: 100%; padding: 8px; border-radius: 4px; background: var(--md-code-bg-color); border: 1px solid var(--md-default-fg-color--lightest);">
    <option value="base64">Base64</option>
    <option value="hex">Hexadecimal</option>
    <option value="url">URL Encoding</option>
    <option value="binary">Binary</option>
  </select>
</div>

<div class="io-group">
  <label>Input:</label>
  <textarea id="encodingInput" placeholder="Enter text"></textarea>
</div>

<div class="controls">
  <button class="btn btn-primary" onclick="encodeText()">Encode</button>
  <button class="btn btn-primary" onclick="decodeText()">Decode</button>
  <button class="btn btn-secondary" onclick="clearEncoding()">Clear</button>
</div>

<div class="io-group">
  <label>Output:</label>
  <div class="output-box" id="encodingOutput" onclick="copyOutput('encodingOutput')">Result will appear here...</div>
</div>

XOR Cipher

<div class="io-group">
  <label>Input Text:</label>
  <textarea id="xorInput" placeholder="Enter text"></textarea>
</div>

<div class="io-group">
  <label>Key:</label>
  <input type="text" id="xorKey" placeholder="Enter key">
</div>

<div class="controls">
  <button class="btn btn-primary" onclick="xorCipher()">XOR Encrypt/Decrypt</button>
  <button class="btn btn-secondary" onclick="clearXor()">Clear</button>
</div>

<div class="io-group">
  <label>Output (Hex):</label>
  <div class="output-box" id="xorOutput" onclick="copyOutput('xorOutput')">Result will appear here...</div>
</div>

<div class="io-group">
  <label>Output (Text):</label>
  <div class="output-box" id="xorOutputText" onclick="copyOutput('xorOutputText')">-</div>
</div>

<div class="info-box">
  <strong>Tip:</strong> XOR là reversible - encrypt và decrypt giống nhau. Dùng để phân tích malware.
</div>

RSA Encryption (Demo)

<div class="controls">
  <button class="btn btn-secondary" onclick="generateRSA()">Generate RSA Keys</button>
</div>

<div class="key-display" id="rsaKeys" style="display: none;">
  <div style="flex: 1;">
    <label>Public Key (e, n):</label>
    <pre id="publicKey"></pre>
  </div>
  <div style="flex: 1;">
    <label>Private Key (d, n):</label>
    <pre id="privateKey"></pre>
  </div>
</div>

<div class="io-group">
  <label>Message (number only, small value):</label>
  <input type="number" id="rsaMessage" placeholder="Enter a number (e.g., 42)" min="1">
</div>

<div class="controls">
  <button class="btn btn-primary" onclick="rsaEncrypt()">Encrypt</button>
  <button class="btn btn-primary" onclick="rsaDecrypt()">Decrypt</button>
</div>

<div class="io-group">
  <label>Encrypted:</label>
  <div class="output-box" id="rsaEncrypted" onclick="copyOutput('rsaEncrypted')">-</div>
</div>

<div class="io-group">
  <label>Decrypted:</label>
  <div class="output-box" id="rsaDecrypted" onclick="copyOutput('rsaDecrypted')">-</div>
</div>

<div class="info-box">
  <strong>Note:</strong> Demo đơn giản với số nhỏ. RSA thực tế dùng số nguyên tố rất lớn (2048+ bits).
</div>