Enigma Machine Simulator<\/title>\n <style>\n :root {\n --bg-color: #121815;\n --panel-bg: #1b2620;\n --accent: #d4af37;\n --text-color: #e0e6e2;\n --border-color: #2e4037;\n --key-bg: #273830;\n --key-hover: #354e42;\n --lamp-off: #202b25;\n --lamp-on: #ffe57f;\n --lamp-glow: 0 0 12px #ffc107, 0 0 20px #ffb300;\n }\n\n [data-theme=\"light\"] {\n --bg-color: #f0f4f1;\n --panel-bg: #ffffff;\n --accent: #b8860b;\n --text-color: #2c3e35;\n --border-color: #cbd5d0;\n --key-bg: #e2e8e5;\n --key-hover: #cbd5d0;\n --lamp-off: #d8dedb;\n --lamp-on: #ff8f00;\n --lamp-glow: 0 0 10px #ff8f00;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: \"Courier New\", Courier, monospace;\n transition: background-color 0.2s, color 0.2s, border-color 0.2s;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-color);\n padding: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-height: 100vh;\n }\n\n header {\n width: 100%;\n max-width: 1000px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n border-bottom: 2px solid var(--accent);\n padding-bottom: 12px;\n }\n\n .header-title h1 {\n font-size: 24px;\n color: var(--accent);\n letter-spacing: 2px;\n }\n\n .header-title p {\n font-size: 13px;\n opacity: 0.8;\n }\n\n .theme-toggle-btn {\n background: var(--panel-bg);\n border: 1px solid var(--accent);\n color: var(--accent);\n padding: 8px 12px;\n border-radius: 4px;\n cursor: pointer;\n font-weight: bold;\n }\n\n .main-container {\n width: 100%;\n max-width: 1000px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n \/* Enigma Enclosure *\/\n .enigma-box {\n background: var(--panel-bg);\n border: 3px solid var(--accent);\n border-radius: 8px;\n padding: 25px;\n box-shadow: 0 8px 24px rgba(0,0,0,0.4);\n display: flex;\n flex-direction: column;\n gap: 25px;\n }\n\n \/* Rotor Compartment *\/\n .rotors-container {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 20px;\n background: rgba(0,0,0,0.15);\n padding: 15px;\n border-radius: 6px;\n border: 1px solid var(--border-color);\n }\n\n .rotor-unit {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n }\n\n .rotor-display-window {\n display: flex;\n gap: 4px;\n background: #000;\n padding: 6px 10px;\n border-radius: 4px;\n border: 1px solid var(--accent);\n }\n\n .rotor-digit {\n font-size: 22px;\n font-weight: bold;\n color: var(--accent);\n width: 24px;\n text-align: center;\n }\n\n .rotor-btn-group {\n display: flex;\n gap: 5px;\n }\n\n .rotor-btn {\n background: var(--key-bg);\n color: var(--text-color);\n border: 1px solid var(--border-color);\n padding: 4px 8px;\n border-radius: 3px;\n cursor: pointer;\n font-size: 12px;\n }\n\n .rotor-btn:hover { background: var(--key-hover); }\n\n .rotor-selects {\n display: flex;\n gap: 4px;\n }\n\n select, input[type=\"text\"] {\n background: var(--bg-color);\n color: var(--text-color);\n border: 1px solid var(--border-color);\n padding: 4px;\n border-radius: 4px;\n font-size: 12px;\n }\n\n \/* Lampboard *\/\n .lampboard {\n display: flex;\n flex-direction: column;\n gap: 8px;\n align-items: center;\n background: rgba(0,0,0,0.1);\n padding: 15px;\n border-radius: 6px;\n border: 1px solid var(--border-color);\n width: 100%;\n overflow-x: auto;\n }\n\n .keyboard-row {\n display: flex;\n gap: 8px;\n justify-content: center;\n flex-wrap: wrap;\n }\n\n .lamp {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background-color: var(--lamp-off);\n color: var(--text-color);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: 14px;\n border: 1px solid var(--border-color);\n flex-shrink: 0;\n }\n\n .lamp.active {\n background-color: var(--lamp-on);\n color: #000;\n box-shadow: var(--lamp-glow);\n border-color: #ffb300;\n }\n\n \/* Keyboard *\/\n .keyboard {\n display: flex;\n flex-direction: column;\n gap: 8px;\n align-items: center;\n width: 100%;\n overflow-x: auto;\n }\n\n .key {\n width: 38px;\n height: 38px;\n background-color: var(--key-bg);\n color: var(--text-color);\n border: 1px solid var(--border-color);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n cursor: pointer;\n font-size: 15px;\n user-select: none;\n flex-shrink: 0;\n }\n\n .key:hover {\n background-color: var(--key-hover);\n border-color: var(--accent);\n }\n\n .key:active, .key.pressed {\n background-color: var(--accent);\n color: #000;\n }\n\n \/* Controls & Text Area Panel *\/\n .control-panel {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n background: var(--panel-bg);\n border: 1px solid var(--border-color);\n border-radius: 8px;\n padding: 20px;\n }\n\n @media(max-width: 768px) {\n .control-panel { grid-template-columns: 1fr; }\n body { padding: 10px; }\n .enigma-box { padding: 15px; }\n }\n\n .form-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-bottom: 12px;\n }\n\n label {\n font-size: 12px;\n font-weight: bold;\n color: var(--accent);\n }\n\n textarea {\n width: 100%;\n height: 90px;\n padding: 10px;\n border-radius: 4px;\n background: var(--bg-color);\n color: var(--text-color);\n border: 1px solid var(--border-color);\n resize: vertical;\n font-size: 14px;\n }\n\n .action-row {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n margin-top: 10px;\n }\n\n button.action-btn {\n background: var(--accent);\n color: #121815;\n border: none;\n padding: 8px 14px;\n border-radius: 4px;\n font-weight: bold;\n cursor: pointer;\n }\n\n button.action-btn:hover { opacity: 0.85; }\n\n button.secondary-btn {\n background: var(--key-bg);\n color: var(--text-color);\n border: 1px solid var(--border-color);\n padding: 8px 14px;\n border-radius: 4px;\n font-weight: bold;\n cursor: pointer;\n }\n\n button.secondary-btn:hover { background: var(--key-hover); }\n\n .error-msg {\n color: #ff5252;\n font-size: 11px;\n margin-top: 4px;\n }\n <\/style>\n<\/head>\n<body>\n\n <header>\n <div class=\"header-title\">\n <h1>Enigma I Simulator<\/h1>\n <p>Historical electromechanical rotor cipher machine.<\/p>\n <\/div>\n <button class=\"theme-toggle-btn\" onclick=\"toggleTheme()\">\ud83c\udf13 Theme<\/button>\n <\/header>\n\n <div class=\"main-container\">\n \n <div class=\"enigma-box\">\n \n \n <div class=\"rotors-container\" id=\"rotors-container\">\n \n <\/div>\n\n \n <div class=\"lampboard\" id=\"lampboard-container\">\n <div style=\"font-size: 11px; letter-spacing: 1px; color: var(--accent); margin-bottom: 2px;\">LAMPBOARD<\/div>\n <\/div>\n\n \n <div class=\"keyboard\" id=\"keyboard-container\">\n <div style=\"font-size: 11px; letter-spacing: 1px; color: var(--accent); margin-bottom: 2px;\">KEYBOARD<\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"control-panel\">\n <div>\n <div class=\"form-group\">\n <label>Reflector Type<\/label>\n <select id=\"reflector-select\" onchange=\"machine.updateConfig()\">\n <option value=\"B\">Reflector B<\/option>\n <option value=\"C\">Reflector C<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label>Plugboard Connections (e.g. AB CD EF)<\/label>\n <input type=\"text\" id=\"plugboard-input\" placeholder=\"AB CD EF GH IJ\" oninput=\"machine.updateConfig()\">\n <div id=\"plug-error\" class=\"error-msg\"><\/div>\n <\/div>\n <div class=\"action-row\">\n <button class=\"action-btn\" onclick=\"randomizeSettings()\">Randomize Settings<\/button>\n <button class=\"secondary-btn\" onclick=\"exportConfig()\">Export Config<\/button>\n <button class=\"secondary-btn\" onclick=\"triggerImport()\">Import Config<\/button>\n <input type=\"file\" id=\"import-file\" accept=\".json\" style=\"display:none;\" onchange=\"importConfig(event)\">\n <\/div>\n <\/div>\n\n <div>\n <div class=\"form-group\">\n <label>Input Text (Auto-filtered to A-Z)<\/label>\n <textarea id=\"input-text\" placeholder=\"Type text to encrypt\/decrypt...\"><\/textarea>\n <\/div>\n <div class=\"form-group\">\n <label>Output Text<\/label>\n <textarea id=\"output-text\" readonly placeholder=\"Result will appear here...\"><\/textarea>\n <\/div>\n <div class=\"action-row\">\n <button class=\"action-btn\" onclick=\"processText()\">Process Text<\/button>\n <button class=\"secondary-btn\" onclick=\"copyOutput()\">Copy Output<\/button>\n <button class=\"secondary-btn\" onclick=\"clearAll()\">Clear<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ --- Enigma Constants & Wiring Definitions ---\n const ROTOR_WIRINGS = {\n 'I': { wiring: \"EKMFLGDQVZNTOWYHXUSPAIBRCJ\", notch: \"Q\" },\n 'II': { wiring: \"AJDKSIRUXBLHWTMCQGZNPYFVOE\", notch: \"E\" },\n 'III': { wiring: \"BDFHJLCPRTXVZNYEIWGAKMUSQO\", notch: \"V\" },\n 'IV': { wiring: \"ESOVPZJAYQUIRHXLNFTGKDCMWB\", notch: \"J\" },\n 'V': { wiring: \"VZBRGITYUPSDNHLXAWMJQOFECK\", notch: \"Z\" }\n };\n\n const REFLECTORS = {\n 'B': \"YRUHQSLDPXNGOKMIEBFZCWVJAT\",\n 'C': \"FVPJIAOYEDRZXWGCTKUQSBNMHL\"\n };\n\n const KEYBOARD_ROWS = [\n ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],\n ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],\n ['Z', 'X', 'C', 'V', 'B', 'N', 'M']\n ];\n\n \/\/ --- Enigma Machine Core Class ---\n class EnigmaMachine {\n constructor() {\n this.rotors = [\n { type: 'I', position: 0, ring: 0 },\n { type: 'II', position: 0, ring: 0 },\n { type: 'III', position: 0, ring: 0 }\n ];\n this.reflector = 'B';\n this.plugboard = {};\n }\n\n setRotorConfig(index, type, posChar, ringChar) {\n this.rotors[index].type = type;\n this.rotors[index].position = posChar.toUpperCase().charCodeAt(0) - 65;\n this.rotors[index].ring = ringChar.toUpperCase().charCodeAt(0) - 65;\n }\n\n setPlugboard(str) {\n this.plugboard = {};\n const pairs = str.trim().toUpperCase().split(\/\\s+\/);\n let isValid = true;\n let used = new Set();\n\n for (let pair of pairs) {\n if (!pair) continue;\n if (pair.length !== 2 || pair[0] === pair[1]) {\n isValid = false;\n break;\n }\n let a = pair[0], b = pair[1];\n if (used.has(a) || used.has(b)) {\n isValid = false;\n break;\n }\n used.add(a);\n used.add(b);\n this.plugboard[a] = b;\n this.plugboard[b] = a;\n }\n return isValid;\n }\n\n stepRotors() {\n const r3 = this.rotors[2]; \/\/ Rightmost\n const r2 = this.rotors[1]; \/\/ Middle\n const r1 = this.rotors[0]; \/\/ Leftmost\n\n const r3Notch = ROTOR_WIRINGS[r3.type].notch.charCodeAt(0) - 65;\n const r2Notch = ROTOR_WIRINGS[r2.type].notch.charCodeAt(0) - 65;\n\n const r3AtNotch = r3.position === r3Notch;\n const r2AtNotch = r2.position === r2Notch;\n\n \/\/ Historical double-stepping anomaly\n if (r2AtNotch) {\n r1.position = (r1.position + 1) % 26;\n r2.position = (r2.position + 1) % 26;\n } else if (r3AtNotch) {\n r2.position = (r2.position + 1) % 26;\n }\n r3.position = (r3.position + 1) % 26;\n }\n\n encryptLetter(char) {\n let code = char.charCodeAt(0) - 65;\n if (code < 0 || code > 25) return char;\n\n \/\/ Step rotors prior to key processing\n this.stepRotors();\n updateRotorVisuals();\n\n \/\/ 1. Plugboard\n if (this.plugboard[char]) {\n char = this.plugboard[char];\n }\n code = char.charCodeAt(0) - 65;\n\n \/\/ 2. Forward through rotors (Right to Left: 2 -> 1 -> 0)\n for (let i = 2; i >= 0; i--) {\n const r = this.rotors[i];\n const wiring = ROTOR_WIRINGS[r.type].wiring;\n const shift = r.position - r.ring;\n \n let idx = (code + shift + 26) % 26;\n let charEnc = wiring[idx];\n code = (charEnc.charCodeAt(0) - 65 - shift + 26) % 26;\n }\n\n \/\/ 3. Reflector\n const refWiring = REFLECTORS[this.reflector];\n code = refWiring[code].charCodeAt(0) - 65;\n\n \/\/ 4. Backward through rotors (Left to Right: 0 -> 1 -> 2)\n for (let i = 0; i <= 2; i++) {\n const r = this.rotors[i];\n const wiring = ROTOR_WIRINGS[r.type].wiring;\n const shift = r.position - r.ring;\n\n let shiftedCode = (code + shift + 26) % 26;\n let charTarget = String.fromCharCode(65 + shiftedCode);\n let idx = wiring.indexOf(charTarget);\n code = (idx - shift + 26) % 26;\n }\n\n \/\/ 5. Plugboard final pass\n let finalChar = String.fromCharCode(65 + code);\n if (this.plugboard[finalChar]) {\n finalChar = this.plugboard[finalChar];\n }\n\n return finalChar;\n }\n\n updateConfig() {\n for (let i = 0; i < 3; i++) {\n const type = document.getElementById(`rotor-type-${i}`).value;\n const pos = document.getElementById(`rotor-pos-${i}`).value;\n const ring = document.getElementById(`rotor-ring-${i}`).value;\n this.setRotorConfig(i, type, pos, ring);\n }\n this.reflector = document.getElementById(\"reflector-select\").value;\n \n const plugInput = document.getElementById(\"plugboard-input\").value;\n const errEl = document.getElementById(\"plug-error\");\n if (!this.setPlugboard(plugInput)) {\n errEl.textContent = \"Invalid plugboard format (use pairs like AB CD without duplicates)\";\n } else {\n errEl.textContent = \"\";\n }\n }\n }\n\n const machine = new EnigmaMachine();\n\n \/\/ --- UI Initialization & Rendering ---\n window.addEventListener(\"DOMContentLoaded\", () => {\n const savedTheme = localStorage.getItem(\"enigma_theme\") || \"dark\";\n document.documentElement.setAttribute(\"data-theme\", savedTheme);\n\n buildRotorUI();\n buildLampboardUI();\n buildKeyboardUI();\n machine.updateConfig();\n });\n\n function toggleTheme() {\n const current = document.documentElement.getAttribute(\"data-theme\");\n const next = current === \"dark\" ? \"light\" : \"dark\";\n document.documentElement.setAttribute(\"data-theme\", next);\n localStorage.setItem(\"enigma_theme\", next);\n }\n\n function buildRotorUI() {\n const container = document.getElementById(\"rotors-container\");\n container.innerHTML = \"\";\n const labels = [\"Left (I)\", \"Middle (II)\", \"Right (III)\"];\n\n for (let i = 0; i < 3; i++) {\n const unit = document.createElement(\"div\");\n unit.className = \"rotor-unit\";\n unit.innerHTML = `\n <div style=\"font-size: 11px; color: var(--accent);\">${labels[i]}<\/div>\n <div class=\"rotor-display-window\">\n <span id=\"rotor-window-${i}\" class=\"rotor-digit\">A<\/span>\n <\/div>\n <div class=\"rotor-btn-group\">\n <button class=\"rotor-btn\" onclick=\"manualRotate(${i}, 1)\">\u25b2<\/button>\n <button class=\"rotor-btn\" onclick=\"manualRotate(${i}, -1)\">\u25bc<\/button>\n <\/div>\n <div class=\"rotor-selects\">\n <select id=\"rotor-type-${i}\" onchange=\"machine.updateConfig()\">\n <option value=\"I\" ${i===0?'selected':''}>I<\/option>\n <option value=\"II\" ${i===1?'selected':''}>II<\/option>\n <option value=\"III\" ${i===2?'selected':''}>III<\/option>\n <option value=\"IV\">IV<\/option>\n <option value=\"V\">V<\/option>\n <\/select>\n <select id=\"rotor-pos-${i}\" onchange=\"machine.updateConfig()\">\n ${generateAlphabetOptions('A')}\n <\/select>\n <select id=\"rotor-ring-${i}\" onchange=\"machine.updateConfig()\" title=\"Ring Setting\">\n ${generateAlphabetOptions('A')}\n <\/select>\n <\/div>\n `;\n container.appendChild(unit);\n }\n }\n\n function generateAlphabetOptions(defaultChar) {\n let html = \"\";\n for (let i = 0; i < 26; i++) {\n const char = String.fromCharCode(65 + i);\n html += `<option value=\"${char}\" ${char === defaultChar ? 'selected' : ''}>${char}<\/option>`;\n }\n return html;\n }\n\n function buildLampboardUI() {\n const container = document.getElementById(\"lampboard-container\");\n container.innerHTML = '<div style=\"font-size: 11px; letter-spacing: 1px; color: var(--accent); margin-bottom: 2px;\">LAMPBOARD<\/div>';\n \n KEYBOARD_ROWS.forEach(row => {\n const rowEl = document.createElement(\"div\");\n rowEl.className = \"keyboard-row\";\n row.forEach(char => {\n const lamp = document.createElement(\"div\");\n lamp.className = \"lamp\";\n lamp.id = `lamp-${char}`;\n lamp.textContent = char;\n rowEl.appendChild(lamp);\n });\n container.appendChild(rowEl);\n });\n }\n\n function buildKeyboardUI() {\n const container = document.getElementById(\"keyboard-container\");\n container.innerHTML = '<div style=\"font-size: 11px; letter-spacing: 1px; color: var(--accent); margin-bottom: 2px;\">KEYBOARD<\/div>';\n\n KEYBOARD_ROWS.forEach(row => {\n const rowEl = document.createElement(\"div\");\n rowEl.className = \"keyboard-row\";\n row.forEach(char => {\n const key = document.createElement(\"div\");\n key.className = \"key\";\n key.id = `key-${char}`;\n key.textContent = char;\n key.onmousedown = () => handleKeyPress(char);\n key.onmouseup = () => handleKeyRelease(char);\n key.onmouseleave = () => handleKeyRelease(char);\n rowEl.appendChild(key);\n });\n container.appendChild(rowEl);\n });\n }\n\n function manualRotate(index, dir) {\n const select = document.getElementById(`rotor-pos-${index}`);\n let currIdx = select.selectedIndex;\n currIdx = (currIdx + dir + 26) % 26;\n select.selectedIndex = currIdx;\n machine.updateConfig();\n updateRotorVisuals();\n }\n\n function updateRotorVisuals() {\n for (let i = 0; i < 3; i++) {\n const char = String.fromCharCode(65 + machine.rotors[i].position);\n document.getElementById(`rotor-window-${i}`).textContent = char;\n document.getElementById(`rotor-pos-${i}`).value = char;\n }\n }\n\n let activeLamp = null;\n\n function handleKeyPress(char) {\n const keyEl = document.getElementById(`key-${char}`);\n if (keyEl) keyEl.classList.add(\"pressed\");\n\n const encrypted = machine.encryptLetter(char);\n \n \/\/ Light up lamp\n const lampEl = document.getElementById(`lamp-${encrypted}`);\n if (lampEl) {\n lampEl.classList.add(\"active\");\n activeLamp = lampEl;\n }\n }\n\n function handleKeyRelease(char) {\n const keyEl = document.getElementById(`key-${char}`);\n if (keyEl) keyEl.classList.remove(\"pressed\");\n\n if (activeLamp) {\n activeLamp.classList.remove(\"active\");\n activeLamp = null;\n }\n }\n\n \/\/ --- Text Processing ---\n function processText() {\n machine.updateConfig();\n const input = document.getElementById(\"input-text\").value.toUpperCase();\n let output = \"\";\n\n for (let i = 0; i < input.length; i++) {\n const char = input[i];\n if (char >= 'A' && char <= 'Z') {\n output += machine.encryptLetter(char);\n } else {\n output += char; \/\/ Non-alphabetic pass-through\n }\n }\n document.getElementById(\"output-text\").value = output;\n updateRotorVisuals();\n }\n\n function clearAll() {\n document.getElementById(\"input-text\").value = \"\";\n document.getElementById(\"output-text\").value = \"\";\n document.getElementById(\"plugboard-input\").value = \"\";\n machine.updateConfig();\n updateRotorVisuals();\n }\n\n function copyOutput() {\n const out = document.getElementById(\"output-text\");\n out.select();\n navigator.clipboard.writeText(out.value).then(() => {\n alert(\"Output copied to clipboard!\");\n }).catch(err => {\n console.error(\"Failed to copy text: \", err);\n });\n }\n\n function randomizeSettings() {\n const rotorsPool = ['I', 'II', 'III', 'IV', 'V'];\n rotorsPool.sort(() => Math.random() - 0.5);\n for (let i = 0; i < 3; i++) {\n document.getElementById(`rotor-type-${i}`).value = rotorsPool[i];\n const randomChar = String.fromCharCode(65 + Math.floor(Math.random() * 26));\n document.getElementById(`rotor-pos-${i}`).value = randomChar;\n document.getElementById(`rotor-ring-${i}`).value = String.fromCharCode(65 + Math.floor(Math.random() * 26));\n }\n document.getElementById(\"reflector-select\").value = Math.random() > 0.5 ? 'B' : 'C';\n\n const alphabet = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".split('');\n alphabet.sort(() => Math.random() - 0.5);\n let pairs = [];\n for (let i = 0; i < 20; i += 2) {\n pairs.push(alphabet[i] + alphabet[i+1]);\n }\n document.getElementById(\"plugboard-input\").value = pairs.join(\" \");\n machine.updateConfig();\n updateRotorVisuals();\n }\n\n \/\/ --- Export \/ Import Configuration ---\n function exportConfig() {\n machine.updateConfig();\n const config = {\n rotors: machine.rotors,\n reflector: machine.reflector,\n plugboard: document.getElementById(\"plugboard-input\").value\n };\n const dataStr = \"data:text\/json;charset=utf-8,\" + encodeURIComponent(JSON.stringify(config, null, 2));\n const dlAnchor = document.createElement('a');\n dlAnchor.setAttribute(\"href\", dataStr);\n dlAnchor.setAttribute(\"download\", \"enigma_config.json\");\n document.body.appendChild(dlAnchor);\n dlAnchor.click();\n dlAnchor.remove();\n }\n\n function triggerImport() {\n document.getElementById(\"import-file\").click();\n }\n\n function importConfig(event) {\n const file = event.target.files[0];\n if (!file) return;\n\n const reader = new FileReader();\n reader.onload = function(e) {\n try {\n const cfg = JSON.parse(e.target.result);\n if (cfg.rotors && cfg.reflector) {\n for (let i = 0; i < 3; i++) {\n document.getElementById(`rotor-type-${i}`).value = cfg.rotors[i].type;\n document.getElementById(`rotor-pos-${i}`).value = String.fromCharCode(65 + cfg.rotors[i].position);\n document.getElementById(`rotor-ring-${i}`).value = String.fromCharCode(65 + cfg.rotors[i].ring);\n }\n document.getElementById(\"reflector-select\").value = cfg.reflector;\n document.getElementById(\"plugboard-input\").value = cfg.plugboard || \"\";\n machine.updateConfig();\n updateRotorVisuals();\n alert(\"Configuration imported successfully!\");\n } else {\n throw new Error();\n }\n } catch (err) {\n alert(\"Invalid configuration file.\");\n }\n event.target.value = \"\";\n };\n reader.readAsText(file);\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Enigma Machine Simulator Enigma I Simulator Historical electromechanical rotor cipher machine. \ud83c\udf13 Theme LAMPBOARD KEYBOARD Reflector Type Reflector BReflector C Plugboard Connections (e.g. AB CD EF) Randomize Settings Export Config Import Config Input Text (Auto-filtered to A-Z) Output Text Process Text Copy Output Clear<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-559","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=559"}],"version-history":[{"count":3,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/559\/revisions"}],"predecessor-version":[{"id":753,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/559\/revisions\/753"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":559,"date":"2026-07-20T14:56:45","date_gmt":"2026-07-20T14:56:45","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=559"},"modified":"2026-07-28T16:21:53","modified_gmt":"2026-07-28T16:21:53","slug":"enigma-machine-rotor-machine","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/enigma-machine-rotor-machine\/","title":{"rendered":"Enigma Machine (Rotor Machine )"},"content":{"rendered":"\n\n\n\n \n \n Enigma Machine Simulator<\/title>\n <style>\n :root {\n --bg-color: #121815;\n --panel-bg: #1b2620;\n --accent: #d4af37;\n --text-color: #e0e6e2;\n --border-color: #2e4037;\n --key-bg: #273830;\n --key-hover: #354e42;\n --lamp-off: #202b25;\n --lamp-on: #ffe57f;\n --lamp-glow: 0 0 12px #ffc107, 0 0 20px #ffb300;\n }\n\n [data-theme=\"light\"] {\n --bg-color: #f0f4f1;\n --panel-bg: #ffffff;\n --accent: #b8860b;\n --text-color: #2c3e35;\n --border-color: #cbd5d0;\n --key-bg: #e2e8e5;\n --key-hover: #cbd5d0;\n --lamp-off: #d8dedb;\n --lamp-on: #ff8f00;\n --lamp-glow: 0 0 10px #ff8f00;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: \"Courier New\", Courier, monospace;\n transition: background-color 0.2s, color 0.2s, border-color 0.2s;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-color);\n padding: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-height: 100vh;\n }\n\n header {\n width: 100%;\n max-width: 1000px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n border-bottom: 2px solid var(--accent);\n padding-bottom: 12px;\n }\n\n .header-title h1 {\n font-size: 24px;\n color: var(--accent);\n letter-spacing: 2px;\n }\n\n .header-title p {\n font-size: 13px;\n opacity: 0.8;\n }\n\n .theme-toggle-btn {\n background: var(--panel-bg);\n border: 1px solid var(--accent);\n color: var(--accent);\n padding: 8px 12px;\n border-radius: 4px;\n cursor: pointer;\n font-weight: bold;\n }\n\n .main-container {\n width: 100%;\n max-width: 1000px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n \/* Enigma Enclosure *\/\n .enigma-box {\n background: var(--panel-bg);\n border: 3px solid var(--accent);\n border-radius: 8px;\n padding: 25px;\n box-shadow: 0 8px 24px rgba(0,0,0,0.4);\n display: flex;\n flex-direction: column;\n gap: 25px;\n }\n\n \/* Rotor Compartment *\/\n .rotors-container {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 20px;\n background: rgba(0,0,0,0.15);\n padding: 15px;\n border-radius: 6px;\n border: 1px solid var(--border-color);\n }\n\n .rotor-unit {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n }\n\n .rotor-display-window {\n display: flex;\n gap: 4px;\n background: #000;\n padding: 6px 10px;\n border-radius: 4px;\n border: 1px solid var(--accent);\n }\n\n .rotor-digit {\n font-size: 22px;\n font-weight: bold;\n color: var(--accent);\n width: 24px;\n text-align: center;\n }\n\n .rotor-btn-group {\n display: flex;\n gap: 5px;\n }\n\n .rotor-btn {\n background: var(--key-bg);\n color: var(--text-color);\n border: 1px solid var(--border-color);\n padding: 4px 8px;\n border-radius: 3px;\n cursor: pointer;\n font-size: 12px;\n }\n\n .rotor-btn:hover { background: var(--key-hover); }\n\n .rotor-selects {\n display: flex;\n gap: 4px;\n }\n\n select, input[type=\"text\"] {\n background: var(--bg-color);\n color: var(--text-color);\n border: 1px solid var(--border-color);\n padding: 4px;\n border-radius: 4px;\n font-size: 12px;\n }\n\n \/* Lampboard *\/\n .lampboard {\n display: flex;\n flex-direction: column;\n gap: 8px;\n align-items: center;\n background: rgba(0,0,0,0.1);\n padding: 15px;\n border-radius: 6px;\n border: 1px solid var(--border-color);\n width: 100%;\n overflow-x: auto;\n }\n\n .keyboard-row {\n display: flex;\n gap: 8px;\n justify-content: center;\n flex-wrap: wrap;\n }\n\n .lamp {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background-color: var(--lamp-off);\n color: var(--text-color);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: 14px;\n border: 1px solid var(--border-color);\n flex-shrink: 0;\n }\n\n .lamp.active {\n background-color: var(--lamp-on);\n color: #000;\n box-shadow: var(--lamp-glow);\n border-color: #ffb300;\n }\n\n \/* Keyboard *\/\n .keyboard {\n display: flex;\n flex-direction: column;\n gap: 8px;\n align-items: center;\n width: 100%;\n overflow-x: auto;\n }\n\n .key {\n width: 38px;\n height: 38px;\n background-color: var(--key-bg);\n color: var(--text-color);\n border: 1px solid var(--border-color);\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n cursor: pointer;\n font-size: 15px;\n user-select: none;\n flex-shrink: 0;\n }\n\n .key:hover {\n background-color: var(--key-hover);\n border-color: var(--accent);\n }\n\n .key:active, .key.pressed {\n background-color: var(--accent);\n color: #000;\n }\n\n \/* Controls & Text Area Panel *\/\n .control-panel {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n background: var(--panel-bg);\n border: 1px solid var(--border-color);\n border-radius: 8px;\n padding: 20px;\n }\n\n @media(max-width: 768px) {\n .control-panel { grid-template-columns: 1fr; }\n body { padding: 10px; }\n .enigma-box { padding: 15px; }\n }\n\n .form-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-bottom: 12px;\n }\n\n label {\n font-size: 12px;\n font-weight: bold;\n color: var(--accent);\n }\n\n textarea {\n width: 100%;\n height: 90px;\n padding: 10px;\n border-radius: 4px;\n background: var(--bg-color);\n color: var(--text-color);\n border: 1px solid var(--border-color);\n resize: vertical;\n font-size: 14px;\n }\n\n .action-row {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n margin-top: 10px;\n }\n\n button.action-btn {\n background: var(--accent);\n color: #121815;\n border: none;\n padding: 8px 14px;\n border-radius: 4px;\n font-weight: bold;\n cursor: pointer;\n }\n\n button.action-btn:hover { opacity: 0.85; }\n\n button.secondary-btn {\n background: var(--key-bg);\n color: var(--text-color);\n border: 1px solid var(--border-color);\n padding: 8px 14px;\n border-radius: 4px;\n font-weight: bold;\n cursor: pointer;\n }\n\n button.secondary-btn:hover { background: var(--key-hover); }\n\n .error-msg {\n color: #ff5252;\n font-size: 11px;\n margin-top: 4px;\n }\n <\/style>\n<\/head>\n<body>\n\n <header>\n <div class=\"header-title\">\n <h1>Enigma I Simulator<\/h1>\n <p>Historical electromechanical rotor cipher machine.<\/p>\n <\/div>\n <button class=\"theme-toggle-btn\" onclick=\"toggleTheme()\">\ud83c\udf13 Theme<\/button>\n <\/header>\n\n <div class=\"main-container\">\n \n <div class=\"enigma-box\">\n \n \n <div class=\"rotors-container\" id=\"rotors-container\">\n \n <\/div>\n\n \n <div class=\"lampboard\" id=\"lampboard-container\">\n <div style=\"font-size: 11px; letter-spacing: 1px; color: var(--accent); margin-bottom: 2px;\">LAMPBOARD<\/div>\n <\/div>\n\n \n <div class=\"keyboard\" id=\"keyboard-container\">\n <div style=\"font-size: 11px; letter-spacing: 1px; color: var(--accent); margin-bottom: 2px;\">KEYBOARD<\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"control-panel\">\n <div>\n <div class=\"form-group\">\n <label>Reflector Type<\/label>\n <select id=\"reflector-select\" onchange=\"machine.updateConfig()\">\n <option value=\"B\">Reflector B<\/option>\n <option value=\"C\">Reflector C<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label>Plugboard Connections (e.g. AB CD EF)<\/label>\n <input type=\"text\" id=\"plugboard-input\" placeholder=\"AB CD EF GH IJ\" oninput=\"machine.updateConfig()\">\n <div id=\"plug-error\" class=\"error-msg\"><\/div>\n <\/div>\n <div class=\"action-row\">\n <button class=\"action-btn\" onclick=\"randomizeSettings()\">Randomize Settings<\/button>\n <button class=\"secondary-btn\" onclick=\"exportConfig()\">Export Config<\/button>\n <button class=\"secondary-btn\" onclick=\"triggerImport()\">Import Config<\/button>\n <input type=\"file\" id=\"import-file\" accept=\".json\" style=\"display:none;\" onchange=\"importConfig(event)\">\n <\/div>\n <\/div>\n\n <div>\n <div class=\"form-group\">\n <label>Input Text (Auto-filtered to A-Z)<\/label>\n <textarea id=\"input-text\" placeholder=\"Type text to encrypt\/decrypt...\"><\/textarea>\n <\/div>\n <div class=\"form-group\">\n <label>Output Text<\/label>\n <textarea id=\"output-text\" readonly placeholder=\"Result will appear here...\"><\/textarea>\n <\/div>\n <div class=\"action-row\">\n <button class=\"action-btn\" onclick=\"processText()\">Process Text<\/button>\n <button class=\"secondary-btn\" onclick=\"copyOutput()\">Copy Output<\/button>\n <button class=\"secondary-btn\" onclick=\"clearAll()\">Clear<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ --- Enigma Constants & Wiring Definitions ---\n const ROTOR_WIRINGS = {\n 'I': { wiring: \"EKMFLGDQVZNTOWYHXUSPAIBRCJ\", notch: \"Q\" },\n 'II': { wiring: \"AJDKSIRUXBLHWTMCQGZNPYFVOE\", notch: \"E\" },\n 'III': { wiring: \"BDFHJLCPRTXVZNYEIWGAKMUSQO\", notch: \"V\" },\n 'IV': { wiring: \"ESOVPZJAYQUIRHXLNFTGKDCMWB\", notch: \"J\" },\n 'V': { wiring: \"VZBRGITYUPSDNHLXAWMJQOFECK\", notch: \"Z\" }\n };\n\n const REFLECTORS = {\n 'B': \"YRUHQSLDPXNGOKMIEBFZCWVJAT\",\n 'C': \"FVPJIAOYEDRZXWGCTKUQSBNMHL\"\n };\n\n const KEYBOARD_ROWS = [\n ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],\n ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],\n ['Z', 'X', 'C', 'V', 'B', 'N', 'M']\n ];\n\n \/\/ --- Enigma Machine Core Class ---\n class EnigmaMachine {\n constructor() {\n this.rotors = [\n { type: 'I', position: 0, ring: 0 },\n { type: 'II', position: 0, ring: 0 },\n { type: 'III', position: 0, ring: 0 }\n ];\n this.reflector = 'B';\n this.plugboard = {};\n }\n\n setRotorConfig(index, type, posChar, ringChar) {\n this.rotors[index].type = type;\n this.rotors[index].position = posChar.toUpperCase().charCodeAt(0) - 65;\n this.rotors[index].ring = ringChar.toUpperCase().charCodeAt(0) - 65;\n }\n\n setPlugboard(str) {\n this.plugboard = {};\n const pairs = str.trim().toUpperCase().split(\/\\s+\/);\n let isValid = true;\n let used = new Set();\n\n for (let pair of pairs) {\n if (!pair) continue;\n if (pair.length !== 2 || pair[0] === pair[1]) {\n isValid = false;\n break;\n }\n let a = pair[0], b = pair[1];\n if (used.has(a) || used.has(b)) {\n isValid = false;\n break;\n }\n used.add(a);\n used.add(b);\n this.plugboard[a] = b;\n this.plugboard[b] = a;\n }\n return isValid;\n }\n\n stepRotors() {\n const r3 = this.rotors[2]; \/\/ Rightmost\n const r2 = this.rotors[1]; \/\/ Middle\n const r1 = this.rotors[0]; \/\/ Leftmost\n\n const r3Notch = ROTOR_WIRINGS[r3.type].notch.charCodeAt(0) - 65;\n const r2Notch = ROTOR_WIRINGS[r2.type].notch.charCodeAt(0) - 65;\n\n const r3AtNotch = r3.position === r3Notch;\n const r2AtNotch = r2.position === r2Notch;\n\n \/\/ Historical double-stepping anomaly\n if (r2AtNotch) {\n r1.position = (r1.position + 1) % 26;\n r2.position = (r2.position + 1) % 26;\n } else if (r3AtNotch) {\n r2.position = (r2.position + 1) % 26;\n }\n r3.position = (r3.position + 1) % 26;\n }\n\n encryptLetter(char) {\n let code = char.charCodeAt(0) - 65;\n if (code < 0 || code > 25) return char;\n\n \/\/ Step rotors prior to key processing\n this.stepRotors();\n updateRotorVisuals();\n\n \/\/ 1. Plugboard\n if (this.plugboard[char]) {\n char = this.plugboard[char];\n }\n code = char.charCodeAt(0) - 65;\n\n \/\/ 2. Forward through rotors (Right to Left: 2 -> 1 -> 0)\n for (let i = 2; i >= 0; i--) {\n const r = this.rotors[i];\n const wiring = ROTOR_WIRINGS[r.type].wiring;\n const shift = r.position - r.ring;\n \n let idx = (code + shift + 26) % 26;\n let charEnc = wiring[idx];\n code = (charEnc.charCodeAt(0) - 65 - shift + 26) % 26;\n }\n\n \/\/ 3. Reflector\n const refWiring = REFLECTORS[this.reflector];\n code = refWiring[code].charCodeAt(0) - 65;\n\n \/\/ 4. Backward through rotors (Left to Right: 0 -> 1 -> 2)\n for (let i = 0; i <= 2; i++) {\n const r = this.rotors[i];\n const wiring = ROTOR_WIRINGS[r.type].wiring;\n const shift = r.position - r.ring;\n\n let shiftedCode = (code + shift + 26) % 26;\n let charTarget = String.fromCharCode(65 + shiftedCode);\n let idx = wiring.indexOf(charTarget);\n code = (idx - shift + 26) % 26;\n }\n\n \/\/ 5. Plugboard final pass\n let finalChar = String.fromCharCode(65 + code);\n if (this.plugboard[finalChar]) {\n finalChar = this.plugboard[finalChar];\n }\n\n return finalChar;\n }\n\n updateConfig() {\n for (let i = 0; i < 3; i++) {\n const type = document.getElementById(`rotor-type-${i}`).value;\n const pos = document.getElementById(`rotor-pos-${i}`).value;\n const ring = document.getElementById(`rotor-ring-${i}`).value;\n this.setRotorConfig(i, type, pos, ring);\n }\n this.reflector = document.getElementById(\"reflector-select\").value;\n \n const plugInput = document.getElementById(\"plugboard-input\").value;\n const errEl = document.getElementById(\"plug-error\");\n if (!this.setPlugboard(plugInput)) {\n errEl.textContent = \"Invalid plugboard format (use pairs like AB CD without duplicates)\";\n } else {\n errEl.textContent = \"\";\n }\n }\n }\n\n const machine = new EnigmaMachine();\n\n \/\/ --- UI Initialization & Rendering ---\n window.addEventListener(\"DOMContentLoaded\", () => {\n const savedTheme = localStorage.getItem(\"enigma_theme\") || \"dark\";\n document.documentElement.setAttribute(\"data-theme\", savedTheme);\n\n buildRotorUI();\n buildLampboardUI();\n buildKeyboardUI();\n machine.updateConfig();\n });\n\n function toggleTheme() {\n const current = document.documentElement.getAttribute(\"data-theme\");\n const next = current === \"dark\" ? \"light\" : \"dark\";\n document.documentElement.setAttribute(\"data-theme\", next);\n localStorage.setItem(\"enigma_theme\", next);\n }\n\n function buildRotorUI() {\n const container = document.getElementById(\"rotors-container\");\n container.innerHTML = \"\";\n const labels = [\"Left (I)\", \"Middle (II)\", \"Right (III)\"];\n\n for (let i = 0; i < 3; i++) {\n const unit = document.createElement(\"div\");\n unit.className = \"rotor-unit\";\n unit.innerHTML = `\n <div style=\"font-size: 11px; color: var(--accent);\">${labels[i]}<\/div>\n <div class=\"rotor-display-window\">\n <span id=\"rotor-window-${i}\" class=\"rotor-digit\">A<\/span>\n <\/div>\n <div class=\"rotor-btn-group\">\n <button class=\"rotor-btn\" onclick=\"manualRotate(${i}, 1)\">\u25b2<\/button>\n <button class=\"rotor-btn\" onclick=\"manualRotate(${i}, -1)\">\u25bc<\/button>\n <\/div>\n <div class=\"rotor-selects\">\n <select id=\"rotor-type-${i}\" onchange=\"machine.updateConfig()\">\n <option value=\"I\" ${i===0?'selected':''}>I<\/option>\n <option value=\"II\" ${i===1?'selected':''}>II<\/option>\n <option value=\"III\" ${i===2?'selected':''}>III<\/option>\n <option value=\"IV\">IV<\/option>\n <option value=\"V\">V<\/option>\n <\/select>\n <select id=\"rotor-pos-${i}\" onchange=\"machine.updateConfig()\">\n ${generateAlphabetOptions('A')}\n <\/select>\n <select id=\"rotor-ring-${i}\" onchange=\"machine.updateConfig()\" title=\"Ring Setting\">\n ${generateAlphabetOptions('A')}\n <\/select>\n <\/div>\n `;\n container.appendChild(unit);\n }\n }\n\n function generateAlphabetOptions(defaultChar) {\n let html = \"\";\n for (let i = 0; i < 26; i++) {\n const char = String.fromCharCode(65 + i);\n html += `<option value=\"${char}\" ${char === defaultChar ? 'selected' : ''}>${char}<\/option>`;\n }\n return html;\n }\n\n function buildLampboardUI() {\n const container = document.getElementById(\"lampboard-container\");\n container.innerHTML = '<div style=\"font-size: 11px; letter-spacing: 1px; color: var(--accent); margin-bottom: 2px;\">LAMPBOARD<\/div>';\n \n KEYBOARD_ROWS.forEach(row => {\n const rowEl = document.createElement(\"div\");\n rowEl.className = \"keyboard-row\";\n row.forEach(char => {\n const lamp = document.createElement(\"div\");\n lamp.className = \"lamp\";\n lamp.id = `lamp-${char}`;\n lamp.textContent = char;\n rowEl.appendChild(lamp);\n });\n container.appendChild(rowEl);\n });\n }\n\n function buildKeyboardUI() {\n const container = document.getElementById(\"keyboard-container\");\n container.innerHTML = '<div style=\"font-size: 11px; letter-spacing: 1px; color: var(--accent); margin-bottom: 2px;\">KEYBOARD<\/div>';\n\n KEYBOARD_ROWS.forEach(row => {\n const rowEl = document.createElement(\"div\");\n rowEl.className = \"keyboard-row\";\n row.forEach(char => {\n const key = document.createElement(\"div\");\n key.className = \"key\";\n key.id = `key-${char}`;\n key.textContent = char;\n key.onmousedown = () => handleKeyPress(char);\n key.onmouseup = () => handleKeyRelease(char);\n key.onmouseleave = () => handleKeyRelease(char);\n rowEl.appendChild(key);\n });\n container.appendChild(rowEl);\n });\n }\n\n function manualRotate(index, dir) {\n const select = document.getElementById(`rotor-pos-${index}`);\n let currIdx = select.selectedIndex;\n currIdx = (currIdx + dir + 26) % 26;\n select.selectedIndex = currIdx;\n machine.updateConfig();\n updateRotorVisuals();\n }\n\n function updateRotorVisuals() {\n for (let i = 0; i < 3; i++) {\n const char = String.fromCharCode(65 + machine.rotors[i].position);\n document.getElementById(`rotor-window-${i}`).textContent = char;\n document.getElementById(`rotor-pos-${i}`).value = char;\n }\n }\n\n let activeLamp = null;\n\n function handleKeyPress(char) {\n const keyEl = document.getElementById(`key-${char}`);\n if (keyEl) keyEl.classList.add(\"pressed\");\n\n const encrypted = machine.encryptLetter(char);\n \n \/\/ Light up lamp\n const lampEl = document.getElementById(`lamp-${encrypted}`);\n if (lampEl) {\n lampEl.classList.add(\"active\");\n activeLamp = lampEl;\n }\n }\n\n function handleKeyRelease(char) {\n const keyEl = document.getElementById(`key-${char}`);\n if (keyEl) keyEl.classList.remove(\"pressed\");\n\n if (activeLamp) {\n activeLamp.classList.remove(\"active\");\n activeLamp = null;\n }\n }\n\n \/\/ --- Text Processing ---\n function processText() {\n machine.updateConfig();\n const input = document.getElementById(\"input-text\").value.toUpperCase();\n let output = \"\";\n\n for (let i = 0; i < input.length; i++) {\n const char = input[i];\n if (char >= 'A' && char <= 'Z') {\n output += machine.encryptLetter(char);\n } else {\n output += char; \/\/ Non-alphabetic pass-through\n }\n }\n document.getElementById(\"output-text\").value = output;\n updateRotorVisuals();\n }\n\n function clearAll() {\n document.getElementById(\"input-text\").value = \"\";\n document.getElementById(\"output-text\").value = \"\";\n document.getElementById(\"plugboard-input\").value = \"\";\n machine.updateConfig();\n updateRotorVisuals();\n }\n\n function copyOutput() {\n const out = document.getElementById(\"output-text\");\n out.select();\n navigator.clipboard.writeText(out.value).then(() => {\n alert(\"Output copied to clipboard!\");\n }).catch(err => {\n console.error(\"Failed to copy text: \", err);\n });\n }\n\n function randomizeSettings() {\n const rotorsPool = ['I', 'II', 'III', 'IV', 'V'];\n rotorsPool.sort(() => Math.random() - 0.5);\n for (let i = 0; i < 3; i++) {\n document.getElementById(`rotor-type-${i}`).value = rotorsPool[i];\n const randomChar = String.fromCharCode(65 + Math.floor(Math.random() * 26));\n document.getElementById(`rotor-pos-${i}`).value = randomChar;\n document.getElementById(`rotor-ring-${i}`).value = String.fromCharCode(65 + Math.floor(Math.random() * 26));\n }\n document.getElementById(\"reflector-select\").value = Math.random() > 0.5 ? 'B' : 'C';\n\n const alphabet = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".split('');\n alphabet.sort(() => Math.random() - 0.5);\n let pairs = [];\n for (let i = 0; i < 20; i += 2) {\n pairs.push(alphabet[i] + alphabet[i+1]);\n }\n document.getElementById(\"plugboard-input\").value = pairs.join(\" \");\n machine.updateConfig();\n updateRotorVisuals();\n }\n\n \/\/ --- Export \/ Import Configuration ---\n function exportConfig() {\n machine.updateConfig();\n const config = {\n rotors: machine.rotors,\n reflector: machine.reflector,\n plugboard: document.getElementById(\"plugboard-input\").value\n };\n const dataStr = \"data:text\/json;charset=utf-8,\" + encodeURIComponent(JSON.stringify(config, null, 2));\n const dlAnchor = document.createElement('a');\n dlAnchor.setAttribute(\"href\", dataStr);\n dlAnchor.setAttribute(\"download\", \"enigma_config.json\");\n document.body.appendChild(dlAnchor);\n dlAnchor.click();\n dlAnchor.remove();\n }\n\n function triggerImport() {\n document.getElementById(\"import-file\").click();\n }\n\n function importConfig(event) {\n const file = event.target.files[0];\n if (!file) return;\n\n const reader = new FileReader();\n reader.onload = function(e) {\n try {\n const cfg = JSON.parse(e.target.result);\n if (cfg.rotors && cfg.reflector) {\n for (let i = 0; i < 3; i++) {\n document.getElementById(`rotor-type-${i}`).value = cfg.rotors[i].type;\n document.getElementById(`rotor-pos-${i}`).value = String.fromCharCode(65 + cfg.rotors[i].position);\n document.getElementById(`rotor-ring-${i}`).value = String.fromCharCode(65 + cfg.rotors[i].ring);\n }\n document.getElementById(\"reflector-select\").value = cfg.reflector;\n document.getElementById(\"plugboard-input\").value = cfg.plugboard || \"\";\n machine.updateConfig();\n updateRotorVisuals();\n alert(\"Configuration imported successfully!\");\n } else {\n throw new Error();\n }\n } catch (err) {\n alert(\"Invalid configuration file.\");\n }\n event.target.value = \"\";\n };\n reader.readAsText(file);\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Enigma Machine Simulator Enigma I Simulator Historical electromechanical rotor cipher machine. \ud83c\udf13 Theme LAMPBOARD KEYBOARD Reflector Type Reflector BReflector C Plugboard Connections (e.g. AB CD EF) Randomize Settings Export Config Import Config Input Text (Auto-filtered to A-Z) Output Text Process Text Copy Output Clear<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-559","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=559"}],"version-history":[{"count":3,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/559\/revisions"}],"predecessor-version":[{"id":753,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/559\/revisions\/753"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}