XOR Engine & Calculator<\/title>\n <style>\n \/* Strictly scoped CSS namespace: xore_ *\/\n .xore_container * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\n .xore_container { max-width: 900px; margin: 20px auto; background: #1e1e2e; color: #cdd6f4; border-radius: 12px; padding: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); font-size: 14px; }\n .xore_header { margin-bottom: 20px; border-bottom: 1px solid #313244; padding-bottom: 12px; }\n .xore_title { font-size: 1.5rem; color: #cba6f7; font-weight: 700; margin-bottom: 6px; }\n .xore_subtitle { color: #a6adc8; font-size: 0.9rem; }\n \n .xore_tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 2px solid #313244; }\n .xore_tab_btn { background: none; border: none; color: #a6adc8; padding: 10px 16px; font-size: 0.95rem; font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s ease; }\n .xore_tab_btn:hover { color: #cdd6f4; }\n .xore_tab_btn.xore_active { color: #cba6f7; border-bottom-color: #cba6f7; }\n .xore_tab_btn:focus-visible { outline: 2px solid #cba6f7; outline-offset: -2px; }\n\n .xore_panel { display: none; }\n .xore_panel.xore_active { display: block; }\n\n .xore_form_group { margin-bottom: 16px; }\n .xore_label { display: block; margin-bottom: 6px; color: #bac2de; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }\n .xore_textarea, .xore_input, .xore_select { width: 100%; background: #181825; border: 1px solid #45475a; color: #cdd6f4; border-radius: 6px; padding: 10px 12px; font-size: 0.9rem; font-family: \"Fira Code\", monospace, sans-serif; resize: vertical; transition: border-color 0.2s; }\n .xore_textarea:focus, .xore_input:focus, .xore_select:focus { outline: none; border-color: #cba6f7; }\n \n .xore_row { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }\n .xore_col { flex: 1; min-width: 250px; }\n\n .xore_btn_group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; margin-bottom: 16px; }\n .xore_btn { background: #313244; color: #cdd6f4; border: 1px solid #45475a; padding: 8px 14px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.2s; }\n .xore_btn:hover { background: #45475a; }\n .xore_btn_primary { background: #cba6f7; color: #11111b; border: none; }\n .xore_btn_primary:hover { background: #b4befe; }\n .xore_btn_danger { background: #f38ba8; color: #11111b; border: none; }\n .xore_btn_danger:hover { background: #eba0ac; }\n .xore_btn:disabled { opacity: 0.5; cursor: not-allowed; }\n\n .xore_output_tabs { display: flex; gap: 4px; background: #181825; padding: 4px; border-radius: 6px 6px 0 0; border: 1px solid #45475a; border-bottom: none; }\n .xore_out_tab { background: none; border: none; color: #a6adc8; padding: 6px 12px; font-size: 0.8rem; border-radius: 4px; cursor: pointer; }\n .xore_out_tab.xore_active { background: #313244; color: #cba6f7; font-weight: 600; }\n \n .xore_output_box { background: #11111b; border: 1px solid #45475a; border-radius: 0 0 6px 6px; padding: 12px; min-height: 100px; max-height: 250px; overflow-y: auto; font-family: \"Fira Code\", monospace; font-size: 0.85rem; word-break: break-all; white-space: pre-wrap; color: #a6e3a1; }\n\n .xore_toggles { display: flex; gap: 16px; margin-bottom: 16px; background: #181825; padding: 10px; border-radius: 6px; border: 1px solid #313244; flex-wrap: wrap; }\n .xore_toggle_label { display: flex; align-items: center; gap: 6px; color: #bac2de; font-size: 0.85rem; cursor: pointer; }\n\n .xore_dropzone { border: 2px dashed #45475a; border-radius: 8px; padding: 32px 16px; text-align: center; background: #181825; cursor: pointer; transition: border-color 0.2s; }\n .xore_dropzone:hover, .xore_dropzone.xore_dragover { border-color: #cba6f7; background: #1e1e2e; }\n\n .xore_file_info { background: #181825; border: 1px solid #313244; border-radius: 6px; padding: 12px; margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; font-size: 0.8rem; }\n .xore_file_info_item span { color: #a6adc8; }\n .xore_file_info_item strong { color: #cdd6f4; font-weight: 600; }\n\n .xore_progress_container { margin-top: 16px; display: none; }\n .xore_progress_bar_bg { background: #181825; border-radius: 10px; height: 12px; width: 100%; overflow: hidden; border: 1px solid #45475a; margin-bottom: 8px; }\n .xore_progress_bar_fill { background: linear-gradient(90deg, #cba6f7, #89b4fa); height: 100%; width: 0%; transition: width 0.1s linear; }\n .xore_progress_stats { display: flex; justify-content: space-between; font-size: 0.8rem; color: #a6adc8; }\n\n .xore_notification { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 0.85rem; display: none; }\n .xore_notification.xore_error { background: #450a0a; color: #f87171; border: 1px solid #991b1b; display: block; }\n .xore_notification.xore_success { background: #064e3b; color: #34d399; border: 1px solid #065f46; display: block; }\n\n .xore_shortcut_hint { text-align: right; font-size: 0.75rem; color: #6c7086; margin-top: 12px; }\n\n .xore_subhead { font-size: 0.85rem; color: #bac2de; font-weight: 600; margin-top: 12px; margin-bottom: 4px; text-transform: uppercase; }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"xore_container\">\n <div class=\"xore_header\">\n <div class=\"xore_title\">XOR Engine & Calculator<\/div>\n <div class=\"xore_subtitle\">Client-side symmetric bitwise XOR processing engine<\/div>\n <\/div>\n\n <div id=\"xore_notification\" class=\"xore_notification\" role=\"alert\"><\/div>\n\n \n <div class=\"xore_tabs\" role=\"tablist\">\n <button class=\"xore_tab_btn xore_active\" role=\"tab\" id=\"xore_tab_text_btn\" aria-selected=\"true\" aria-controls=\"xore_tab_text\">Text XOR<\/button>\n <button class=\"xore_tab_btn\" role=\"tab\" id=\"xore_tab_hex_btn\" aria-selected=\"false\" aria-controls=\"xore_tab_hex\">Hexadecimal XOR<\/button>\n <button class=\"xore_tab_btn\" role=\"tab\" id=\"xore_tab_file_btn\" aria-selected=\"false\" aria-controls=\"xore_tab_file\">Binary File XOR<\/button>\n <\/div>\n\n \n <div id=\"xore_tab_text\" class=\"xore_panel xore_active\" role=\"tabpanel\" aria-labelledby=\"xore_tab_text_btn\">\n <div class=\"xore_form_group\">\n <label class=\"xore_label\" for=\"xore_text_input\">Input Text (UTF-8)<\/label>\n <textarea id=\"xore_text_input\" class=\"xore_textarea\" rows=\"4\" placeholder=\"Enter plain text, multi-line string, or unicode\/emojis...\">Hello, World!<\/textarea>\n <\/div>\n\n <div class=\"xore_form_group\">\n <label class=\"xore_label\" for=\"xore_text_key\">XOR Key (Text)<\/label>\n <input type=\"text\" id=\"xore_text_key\" class=\"xore_input\" placeholder=\"Enter key...\" value=\"SecretKey\">\n <\/div>\n\n <div class=\"xore_btn_group\">\n <button id=\"xore_text_process_btn\" class=\"xore_btn xore_btn_primary\">Process (Ctrl+Enter)<\/button>\n <button id=\"xore_text_swap_btn\" class=\"xore_btn\">Swap Input \u2194 Output<\/button>\n <button id=\"xore_text_clear_btn\" class=\"xore_btn\">Clear (Esc)<\/button>\n <\/div>\n\n <div class=\"xore_form_group\">\n <label class=\"xore_label\">XOR Output Result<\/label>\n <div class=\"xore_output_tabs\">\n <button class=\"xore_out_tab xore_active\" data-view=\"raw\">Raw Text<\/button>\n <button class=\"xore_out_tab\" data-view=\"hex\">Hexadecimal<\/button>\n <button class=\"xore_out_tab\" data-view=\"base64\">Base64<\/button>\n <\/div>\n <div id=\"xore_text_output\" class=\"xore_output_box\"><\/div>\n <\/div>\n\n <div class=\"xore_btn_group\">\n <button id=\"xore_text_copy_btn\" class=\"xore_btn\">Copy Active Output<\/button>\n <button id=\"xore_text_download_btn\" class=\"xore_btn\">Download TXT (Ctrl+D)<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"xore_tab_hex\" class=\"xore_panel\" role=\"tabpanel\" aria-labelledby=\"xore_tab_hex_btn\">\n <div class=\"xore_row\">\n <div class=\"xore_col\">\n <label class=\"xore_label\" for=\"xore_hex_a\">Hex Sequence A<\/label>\n <textarea id=\"xore_hex_a\" class=\"xore_textarea\" rows=\"3\" placeholder=\"e.g. 48656c6c6f\">48656c6c6f<\/textarea>\n <\/div>\n <div class=\"xore_col\">\n <label class=\"xore_label\" for=\"xore_hex_b\">Hex Sequence B<\/label>\n <textarea id=\"xore_hex_b\" class=\"xore_textarea\" rows=\"3\" placeholder=\"e.g. 576f726c64\">576f726c64<\/textarea>\n <\/div>\n <\/div>\n\n <div class=\"xore_toggles\">\n <label class=\"xore_toggle_label\">\n <input type=\"checkbox\" id=\"xore_hex_opt_space\" checked> Space Separated\n <\/label>\n <label class=\"xore_toggle_label\">\n <input type=\"checkbox\" id=\"xore_hex_opt_upper\" checked> Uppercase\n <\/label>\n <label class=\"xore_toggle_label\">\n <input type=\"checkbox\" id=\"xore_hex_opt_prefix\"> 0x Prefix\n <\/label>\n <\/div>\n\n <div class=\"xore_btn_group\">\n <button id=\"xore_hex_process_btn\" class=\"xore_btn xore_btn_primary\">Calculate XOR (Ctrl+Enter)<\/button>\n <button id=\"xore_hex_clear_btn\" class=\"xore_btn\">Clear (Esc)<\/button>\n <\/div>\n\n <div class=\"xore_form_group\">\n <div class=\"xore_subhead\">Hex Result<\/div>\n <div id=\"xore_hex_output\" class=\"xore_output_box\"><\/div>\n\n <div class=\"xore_subhead\">ASCII Preview<\/div>\n <div id=\"xore_hex_ascii\" class=\"xore_output_box\" style=\"min-height: 40px; max-height: 80px;\"><\/div>\n\n <div class=\"xore_subhead\">Binary Bitstream Preview<\/div>\n <div id=\"xore_hex_binary\" class=\"xore_output_box\" style=\"min-height: 60px; max-height: 120px;\"><\/div>\n <\/div>\n\n <div class=\"xore_btn_group\">\n <button id=\"xore_hex_copy_btn\" class=\"xore_btn\">Copy Hex Result<\/button>\n <button id=\"xore_hex_download_btn\" class=\"xore_btn\">Download Result (Ctrl+D)<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"xore_tab_file\" class=\"xore_panel\" role=\"tabpanel\" aria-labelledby=\"xore_tab_file_btn\">\n <div class=\"xore_form_group\">\n <label class=\"xore_label\">Target File<\/label>\n <div id=\"xore_dropzone\" class=\"xore_dropzone\" tabindex=\"0\" role=\"button\" aria-label=\"Drop file here or click to upload\">\n <p style=\"color: #cdd6f4; font-weight: 600; margin-bottom: 4px;\">Drag & Drop binary file here<\/p>\n <p style=\"color: #a6adc8; font-size: 0.8rem;\">or click to open file picker<\/p>\n <input type=\"file\" id=\"xore_file_input\" style=\"display: none;\">\n <\/div>\n <\/div>\n\n <div id=\"xore_file_details\" class=\"xore_file_info\" style=\"display: none;\">\n <div class=\"xore_file_info_item\"><span>Name:<\/span> <strong id=\"xore_info_name\">–<\/strong><\/div>\n <div class=\"xore_file_info_item\"><span>Size:<\/span> <strong id=\"xore_info_size\">–<\/strong><\/div>\n <div class=\"xore_file_info_item\"><span>Type:<\/span> <strong id=\"xore_info_type\">–<\/strong><\/div>\n <div class=\"xore_file_info_item\"><span>Ext:<\/span> <strong id=\"xore_info_ext\">–<\/strong><\/div>\n <div class=\"xore_file_info_item\"><span>Modified:<\/span> <strong id=\"xore_info_date\">–<\/strong><\/div>\n <\/div>\n\n <div class=\"xore_row\" style=\"margin-top: 16px;\">\n <div class=\"xore_col\">\n <label class=\"xore_label\" for=\"xore_file_key\">XOR Key<\/label>\n <input type=\"text\" id=\"xore_file_key\" class=\"xore_input\" placeholder=\"Text Key or Hex Sequence (e.g. SecretKey or 0xFF00)\">\n <\/div>\n <div class=\"xore_col\">\n <label class=\"xore_label\" for=\"xore_file_key_type\">Key Type<\/label>\n <select id=\"xore_file_key_type\" class=\"xore_select\">\n <option value=\"text\">UTF-8 Text String<\/option>\n <option value=\"hex\">Hexadecimal Sequence<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"xore_btn_group\">\n <button id=\"xore_file_process_btn\" class=\"xore_btn xore_btn_primary\">Process File (Ctrl+Enter)<\/button>\n <button id=\"xore_file_cancel_btn\" class=\"xore_btn xore_btn_danger\" style=\"display: none;\">Cancel Operation<\/button>\n <button id=\"xore_file_download_btn\" class=\"xore_btn\" disabled>Download Processed File (Ctrl+D)<\/button>\n <\/div>\n\n <div id=\"xore_progress_group\" class=\"xore_progress_container\">\n <div class=\"xore_progress_bar_bg\">\n <div id=\"xore_file_progress_bar\" class=\"xore_progress_bar_fill\"><\/div>\n <\/div>\n <div class=\"xore_progress_stats\">\n <span id=\"xore_progress_percent\">0%<\/span>\n <span id=\"xore_progress_bytes\">0 \/ 0 Bytes<\/span>\n <span id=\"xore_progress_speed\">0 MB\/s<\/span>\n <span id=\"xore_progress_time\">0.0s<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"xore_shortcut_hint\">\n Shortcuts: <strong>Ctrl+Enter<\/strong> Process | <strong>Esc<\/strong> Clear Tab | <strong>Ctrl+D<\/strong> Download Result\n <\/div>\n<\/div>\n\n<script>\n(function() {\n 'use strict';\n\n \/\/ State Management\n const state = {\n activeTab: 'text',\n text: {\n raw: '',\n hex: '',\n base64: '',\n activeView: 'raw'\n },\n hex: {\n result: '',\n ascii: '',\n binary: ''\n },\n file: {\n selectedFile: null,\n processedBlob: null,\n isProcessing: false,\n shouldCancel: false\n }\n };\n\n \/\/ DOM Cache\n const el = {\n notification: document.getElementById('xore_notification'),\n \/\/ Tabs\n tabBtns: document.querySelectorAll('.xore_tab_btn'),\n panels: document.querySelectorAll('.xore_panel'),\n \/\/ Text Mode\n textInput: document.getElementById('xore_text_input'),\n textKey: document.getElementById('xore_text_key'),\n textProcessBtn: document.getElementById('xore_text_process_btn'),\n textSwapBtn: document.getElementById('xore_text_swap_btn'),\n textClearBtn: document.getElementById('xore_text_clear_btn'),\n textOutput: document.getElementById('xore_text_output'),\n textOutTabs: document.querySelectorAll('.xore_out_tab'),\n textCopyBtn: document.getElementById('xore_text_copy_btn'),\n textDownloadBtn: document.getElementById('xore_text_download_btn'),\n \/\/ Hex Mode\n hexA: document.getElementById('xore_hex_a'),\n hexB: document.getElementById('xore_hex_b'),\n hexOptSpace: document.getElementById('xore_hex_opt_space'),\n hexOptUpper: document.getElementById('xore_hex_opt_upper'),\n hexOptPrefix: document.getElementById('xore_hex_opt_prefix'),\n hexProcessBtn: document.getElementById('xore_hex_process_btn'),\n hexClearBtn: document.getElementById('xore_hex_clear_btn'),\n hexOutput: document.getElementById('xore_hex_output'),\n hexAscii: document.getElementById('xore_hex_ascii'),\n hexBinary: document.getElementById('xore_hex_binary'),\n hexCopyBtn: document.getElementById('xore_hex_copy_btn'),\n hexDownloadBtn: document.getElementById('xore_hex_download_btn'),\n \/\/ File Mode\n dropzone: document.getElementById('xore_dropzone'),\n fileInput: document.getElementById('xore_file_input'),\n fileDetails: document.getElementById('xore_file_details'),\n infoName: document.getElementById('xore_info_name'),\n infoSize: document.getElementById('xore_info_size'),\n infoType: document.getElementById('xore_info_type'),\n infoExt: document.getElementById('xore_info_ext'),\n infoDate: document.getElementById('xore_info_date'),\n fileKey: document.getElementById('xore_file_key'),\n fileKeyType: document.getElementById('xore_file_key_type'),\n fileProcessBtn: document.getElementById('xore_file_process_btn'),\n fileCancelBtn: document.getElementById('xore_file_cancel_btn'),\n fileDownloadBtn: document.getElementById('xore_file_download_btn'),\n progressContainer: document.getElementById('xore_progress_group'),\n progressBar: document.getElementById('xore_file_progress_bar'),\n progressPercent: document.getElementById('xore_progress_percent'),\n progressBytes: document.getElementById('xore_progress_bytes'),\n progressSpeed: document.getElementById('xore_progress_speed'),\n progressTime: document.getElementById('xore_progress_time')\n };\n\n \/\/ Helper Functions\n function showNotification(msg, type = 'error') {\n el.notification.textContent = msg;\n el.notification.className = 'xore_notification xore_' + type;\n setTimeout(() => {\n if (el.notification.textContent === msg) {\n el.notification.className = 'xore_notification';\n el.notification.textContent = '';\n }\n }, 5000);\n }\n\n function clearNotification() {\n el.notification.className = 'xore_notification';\n el.notification.textContent = '';\n }\n\n function utf8ToBytes(str) {\n return new TextEncoder().encode(str);\n }\n\n function bytesToUtf8(bytes) {\n return new TextDecoder('utf-8', { fatal: false }).decode(bytes);\n }\n\n function bytesToHex(bytes) {\n return Array.from(bytes).map(b => b.toString(16).padStart(2, '0')).join('');\n }\n\n function hexToBytes(hexStr) {\n let clean = hexStr.replace(\/[^0-9a-fA-F]\/g, '');\n if (clean.length % 2 !== 0) {\n clean = '0' + clean;\n }\n const bytes = new Uint8Array(clean.length \/ 2);\n for (let i = 0; i < clean.length; i += 2) {\n bytes[i \/ 2] = parseInt(clean.substr(i, 2), 16);\n }\n return bytes;\n }\n\n function bytesToBase64(bytes) {\n let bin = '';\n const len = bytes.byteLength;\n for (let i = 0; i < len; i++) {\n bin += String.fromCharCode(bytes[i]);\n }\n return window.btoa(bin);\n }\n\n function formatBytes(bytes) {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) \/ Math.log(k));\n return parseFloat((bytes \/ Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n }\n\n \/\/ Tab Switch Handler\n el.tabBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n el.tabBtns.forEach(b => {\n b.classList.remove('xore_active');\n b.setAttribute('aria-selected', 'false');\n });\n el.panels.forEach(p => p.classList.remove('xore_active'));\n\n btn.classList.add('xore_active');\n btn.setAttribute('aria-selected', 'true');\n const targetId = btn.getAttribute('aria-controls');\n document.getElementById(targetId).classList.add('xore_active');\n\n if (targetId === 'xore_tab_text') state.activeTab = 'text';\n if (targetId === 'xore_tab_hex') state.activeTab = 'hex';\n if (targetId === 'xore_tab_file') state.activeTab = 'file';\n clearNotification();\n });\n });\n\n \/\/ --- TAB 1: TEXT XOR ---\n function processTextXOR() {\n clearNotification();\n const text = el.textInput.value;\n const key = el.textKey.value;\n\n if (!text) {\n showNotification('Please enter input text to process.');\n return;\n }\n if (!key) {\n showNotification('Please enter an XOR key.');\n return;\n }\n\n const textBytes = utf8ToBytes(text);\n const keyBytes = utf8ToBytes(key);\n const resultBytes = new Uint8Array(textBytes.length);\n\n for (let i = 0; i < textBytes.length; i++) {\n resultBytes[i] = textBytes[i] ^ keyBytes[i % keyBytes.length];\n }\n\n state.text.raw = bytesToUtf8(resultBytes);\n state.text.hex = bytesToHex(resultBytes).toUpperCase();\n state.text.base64 = bytesToBase64(resultBytes);\n\n renderTextOutput();\n }\n\n function renderTextOutput() {\n const val = state.text[state.text.activeView] || '';\n el.textOutput.textContent = val;\n }\n\n el.textOutTabs.forEach(tab => {\n tab.addEventListener('click', () => {\n el.textOutTabs.forEach(t => t.classList.remove('xore_active'));\n tab.classList.add('xore_active');\n state.text.activeView = tab.getAttribute('data-view');\n renderTextOutput();\n });\n });\n\n el.textProcessBtn.addEventListener('click', processTextXOR);\n\n el.textSwapBtn.addEventListener('click', () => {\n const currentOut = state.text[state.text.activeView];\n if (!currentOut) {\n showNotification('No calculated output available to swap.');\n return;\n }\n el.textInput.value = currentOut;\n processTextXOR();\n showNotification('Swapped output into input field.', 'success');\n });\n\n el.textClearBtn.addEventListener('click', () => {\n el.textInput.value = '';\n el.textKey.value = '';\n state.text.raw = '';\n state.text.hex = '';\n state.text.base64 = '';\n renderTextOutput();\n clearNotification();\n });\n\n el.textCopyBtn.addEventListener('click', () => {\n const val = state.text[state.text.activeView];\n if (!val) return;\n navigator.clipboard.writeText(val).then(() => {\n showNotification('Copied output to clipboard!', 'success');\n });\n });\n\n el.textDownloadBtn.addEventListener('click', () => {\n const val = state.text[state.text.activeView];\n if (!val) return;\n const blob = new Blob([val], { type: 'text\/plain;charset=utf-8' });\n const link = document.createElement('a');\n link.href = URL.createObjectURL(blob);\n link.download = 'xor_text_output.txt';\n link.click();\n URL.revokeObjectURL(link.href);\n });\n\n\n \/\/ --- TAB 2: HEX XOR ---\n function processHexXOR() {\n clearNotification();\n let rawA = el.hexA.value;\n let rawB = el.hexB.value;\n\n if (!rawA || !rawB) {\n showNotification('Please provide both Hex Sequence A and Hex Sequence B.');\n return;\n }\n\n const cleanA = rawA.replace(\/[^0-9a-fA-F]\/g, '');\n const cleanB = rawB.replace(\/[^0-9a-fA-F]\/g, '');\n\n if (!cleanA.length || !cleanB.length) {\n showNotification('Invalid hexadecimal inputs. Ensure characters 0-9, A-F are present.');\n return;\n }\n\n const bytesA = hexToBytes(cleanA);\n const bytesB = hexToBytes(cleanB);\n\n const maxLen = Math.max(bytesA.length, bytesB.length);\n const resultBytes = new Uint8Array(maxLen);\n\n for (let i = 0; i < maxLen; i++) {\n const byteA = i < bytesA.length ? bytesA[i] : 0;\n const byteB = i < bytesB.length ? bytesB[i] : 0;\n resultBytes[i] = byteA ^ byteB;\n }\n\n \/\/ Format Hex Output\n const isUpper = el.hexOptUpper.checked;\n const isSpace = el.hexOptSpace.checked;\n const isPrefix = el.hexOptPrefix.checked;\n\n let hexParts = [];\n for (let i = 0; i < resultBytes.length; i++) {\n let h = resultBytes[i].toString(16).padStart(2, '0');\n if (isUpper) h = h.toUpperCase();\n if (isPrefix) h = '0x' + h;\n hexParts.push(h);\n }\n state.hex.result = hexParts.join(isSpace ? ' ' : '');\n\n \/\/ Format ASCII Preview\n let asciiStr = '';\n for (let i = 0; i < resultBytes.length; i++) {\n const b = resultBytes[i];\n asciiStr += (b >= 32 && b <= 126) ? String.fromCharCode(b) : '\u00b7';\n }\n state.hex.ascii = asciiStr;\n\n \/\/ Format Binary Preview\n let binaryParts = [];\n for (let i = 0; i < resultBytes.length; i++) {\n binaryParts.push(resultBytes[i].toString(2).padStart(8, '0'));\n }\n state.hex.binary = binaryParts.join(' ');\n\n renderHexOutput();\n }\n\n function renderHexOutput() {\n el.hexOutput.textContent = state.hex.result;\n el.hexAscii.textContent = state.hex.ascii;\n el.hexBinary.textContent = state.hex.binary;\n }\n\n el.hexProcessBtn.addEventListener('click', processHexXOR);\n [el.hexOptSpace, el.hexOptUpper, el.hexOptPrefix].forEach(opt => {\n opt.addEventListener('change', () => {\n if (state.hex.result) processHexXOR();\n });\n });\n\n el.hexClearBtn.addEventListener('click', () => {\n el.hexA.value = '';\n el.hexB.value = '';\n state.hex.result = '';\n state.hex.ascii = '';\n state.hex.binary = '';\n renderHexOutput();\n clearNotification();\n });\n\n el.hexCopyBtn.addEventListener('click', () => {\n if (!state.hex.result) return;\n navigator.clipboard.writeText(state.hex.result).then(() => {\n showNotification('Copied Hex Result to clipboard!', 'success');\n });\n });\n\n el.hexDownloadBtn.addEventListener('click', () => {\n if (!state.hex.result) return;\n const blob = new Blob([state.hex.result], { type: 'text\/plain;charset=utf-8' });\n const link = document.createElement('a');\n link.href = URL.createObjectURL(blob);\n link.download = 'xor_hex_output.txt';\n link.click();\n URL.revokeObjectURL(link.href);\n });\n\n\n \/\/ --- TAB 3: BINARY FILE XOR ---\n el.dropzone.addEventListener('click', () => el.fileInput.click());\n \n el.dropzone.addEventListener('dragover', (e) => {\n e.preventDefault();\n el.dropzone.classList.add('xore_dragover');\n });\n\n el.dropzone.addEventListener('dragleave', () => {\n el.dropzone.classList.remove('xore_dragover');\n });\n\n el.dropzone.addEventListener('drop', (e) => {\n e.preventDefault();\n el.dropzone.classList.remove('xore_dragover');\n if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n handleFileSelected(e.dataTransfer.files[0]);\n }\n });\n\n el.fileInput.addEventListener('change', (e) => {\n if (e.target.files && e.target.files.length > 0) {\n handleFileSelected(e.target.files[0]);\n }\n });\n\n function handleFileSelected(file) {\n state.file.selectedFile = file;\n state.file.processedBlob = null;\n el.fileDownloadBtn.disabled = true;\n\n el.infoName.textContent = file.name;\n el.infoSize.textContent = formatBytes(file.size);\n el.infoType.textContent = file.type || 'unknown\/binary';\n \n const parts = file.name.split('.');\n el.infoExt.textContent = parts.length > 1 ? '.' + parts.pop() : 'none';\n el.infoDate.textContent = file.lastModified ? new Date(file.lastModified).toLocaleDateString() : 'N\/A';\n\n el.fileDetails.style.display = 'grid';\n clearNotification();\n }\n\n el.fileProcessBtn.addEventListener('click', async () => {\n clearNotification();\n const file = state.file.selectedFile;\n const keyRaw = el.fileKey.value;\n const keyType = el.fileKeyType.value;\n\n if (!file) {\n showNotification('Please select a file first.');\n return;\n }\n if (!keyRaw) {\n showNotification('Please enter an XOR key.');\n return;\n }\n\n let keyBytes;\n if (keyType === 'text') {\n keyBytes = utf8ToBytes(keyRaw);\n } else {\n const cleanHex = keyRaw.replace(\/[^0-9a-fA-F]\/g, '');\n if (!cleanHex) {\n showNotification('Invalid Hex key sequence.');\n return;\n }\n keyBytes = hexToBytes(cleanHex);\n }\n\n if (!keyBytes || keyBytes.length === 0) {\n showNotification('Key length cannot be 0.');\n return;\n }\n\n \/\/ Lock UI state for processing\n state.file.isProcessing = true;\n state.file.shouldCancel = false;\n el.fileProcessBtn.style.display = 'none';\n el.fileCancelBtn.style.display = 'inline-flex';\n el.fileDownloadBtn.disabled = true;\n el.progressContainer.style.display = 'block';\n\n const chunkSize = 1024 * 1024; \/\/ 1MB Chunks\n const totalBytes = file.size;\n let offset = 0;\n let keyIndex = 0;\n\n const resultChunks = [];\n const startTime = performance.now();\n\n try {\n while (offset < totalBytes) {\n if (state.file.shouldCancel) {\n showNotification('File processing canceled by user.');\n resetFileProcessingUI();\n return;\n }\n\n const slice = file.slice(offset, offset + chunkSize);\n const buffer = await slice.arrayBuffer();\n const chunkUint8 = new Uint8Array(buffer);\n\n for (let i = 0; i < chunkUint8.length; i++) {\n chunkUint8[i] = chunkUint8[i] ^ keyBytes[keyIndex % keyBytes.length];\n keyIndex++;\n }\n\n resultChunks.push(chunkUint8);\n offset += chunkUint8.length;\n\n \/\/ Update progress & stats\n const pct = Math.min(100, Math.round((offset \/ totalBytes) * 100));\n const elapsed = (performance.now() - startTime) \/ 1000;\n const speedMBs = elapsed > 0 ? ((offset \/ (1024 * 1024)) \/ elapsed).toFixed(2) : '0.00';\n\n el.progressBar.style.width = pct + '%';\n el.progressPercent.textContent = pct + '%';\n el.progressBytes.textContent = `${formatBytes(offset)} \/ ${formatBytes(totalBytes)}`;\n el.progressSpeed.textContent = `${speedMBs} MB\/s`;\n el.progressTime.textContent = elapsed.toFixed(1) + 's';\n\n \/\/ Yield to browser UI thread\n await new Promise(r => setTimeout(r, 0));\n }\n\n state.file.processedBlob = new Blob(resultChunks, { type: file.type || 'application\/octet-stream' });\n el.fileDownloadBtn.disabled = false;\n showNotification('File processing complete! Ready for download.', 'success');\n\n } catch (err) {\n showNotification('Error processing file: ' + err.message);\n } finally {\n resetFileProcessingUI();\n }\n });\n\n el.fileCancelBtn.addEventListener('click', () => {\n state.file.shouldCancel = true;\n });\n\n function resetFileProcessingUI() {\n state.file.isProcessing = false;\n el.fileProcessBtn.style.display = 'inline-flex';\n el.fileCancelBtn.style.display = 'none';\n }\n\n el.fileDownloadBtn.addEventListener('click', () => {\n if (!state.file.processedBlob || !state.file.selectedFile) return;\n const link = document.createElement('a');\n link.href = URL.createObjectURL(state.file.processedBlob);\n link.download = 'xor_' + state.file.selectedFile.name;\n link.click();\n URL.revokeObjectURL(link.href);\n });\n\n\n \/\/ --- KEYBOARD SHORTCUTS ---\n document.addEventListener('keydown', (e) => {\n const isCtrl = e.ctrlKey || e.metaKey;\n\n \/\/ Ctrl + Enter -> Process\n if (isCtrl && e.key === 'Enter') {\n e.preventDefault();\n if (state.activeTab === 'text') processTextXOR();\n if (state.activeTab === 'hex') processHexXOR();\n if (state.activeTab === 'file' && !state.file.isProcessing) el.fileProcessBtn.click();\n }\n\n \/\/ Esc -> Clear Tab\n if (e.key === 'Escape') {\n if (state.activeTab === 'text') el.textClearBtn.click();\n if (state.activeTab === 'hex') el.hexClearBtn.click();\n }\n\n \/\/ Ctrl + D -> Download Output\n if (isCtrl && (e.key === 'd' || e.key === 'D')) {\n e.preventDefault();\n if (state.activeTab === 'text') el.textDownloadBtn.click();\n if (state.activeTab === 'hex') el.hexDownloadBtn.click();\n if (state.activeTab === 'file' && !el.fileDownloadBtn.disabled) el.fileDownloadBtn.click();\n }\n });\n\n \/\/ Initial Calculation Run\n processTextXOR();\n processHexXOR();\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>XOR Engine & Calculator XOR Engine & Calculator Client-side symmetric bitwise XOR processing engine Text XOR Hexadecimal XOR Binary File XOR Input Text (UTF-8) Hello, World! XOR Key (Text) Process (Ctrl+Enter) Swap Input \u2194 Output Clear (Esc) XOR Output Result Raw Text Hexadecimal Base64 Copy Active Output Download TXT (Ctrl+D) Hex Sequence A 48656c6c6f Hex […]<\/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-695","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/695","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=695"}],"version-history":[{"count":6,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/695\/revisions"}],"predecessor-version":[{"id":702,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/695\/revisions\/702"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":695,"date":"2026-07-26T07:54:30","date_gmt":"2026-07-26T07:54:30","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=695"},"modified":"2026-07-26T08:09:47","modified_gmt":"2026-07-26T08:09:47","slug":"verification-engine","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/verification-engine\/","title":{"rendered":"XOR calculator"},"content":{"rendered":"\n\n\n\n \n \n XOR Engine & Calculator<\/title>\n <style>\n \/* Strictly scoped CSS namespace: xore_ *\/\n .xore_container * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\n .xore_container { max-width: 900px; margin: 20px auto; background: #1e1e2e; color: #cdd6f4; border-radius: 12px; padding: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); font-size: 14px; }\n .xore_header { margin-bottom: 20px; border-bottom: 1px solid #313244; padding-bottom: 12px; }\n .xore_title { font-size: 1.5rem; color: #cba6f7; font-weight: 700; margin-bottom: 6px; }\n .xore_subtitle { color: #a6adc8; font-size: 0.9rem; }\n \n .xore_tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 2px solid #313244; }\n .xore_tab_btn { background: none; border: none; color: #a6adc8; padding: 10px 16px; font-size: 0.95rem; font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s ease; }\n .xore_tab_btn:hover { color: #cdd6f4; }\n .xore_tab_btn.xore_active { color: #cba6f7; border-bottom-color: #cba6f7; }\n .xore_tab_btn:focus-visible { outline: 2px solid #cba6f7; outline-offset: -2px; }\n\n .xore_panel { display: none; }\n .xore_panel.xore_active { display: block; }\n\n .xore_form_group { margin-bottom: 16px; }\n .xore_label { display: block; margin-bottom: 6px; color: #bac2de; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }\n .xore_textarea, .xore_input, .xore_select { width: 100%; background: #181825; border: 1px solid #45475a; color: #cdd6f4; border-radius: 6px; padding: 10px 12px; font-size: 0.9rem; font-family: \"Fira Code\", monospace, sans-serif; resize: vertical; transition: border-color 0.2s; }\n .xore_textarea:focus, .xore_input:focus, .xore_select:focus { outline: none; border-color: #cba6f7; }\n \n .xore_row { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }\n .xore_col { flex: 1; min-width: 250px; }\n\n .xore_btn_group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; margin-bottom: 16px; }\n .xore_btn { background: #313244; color: #cdd6f4; border: 1px solid #45475a; padding: 8px 14px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.2s; }\n .xore_btn:hover { background: #45475a; }\n .xore_btn_primary { background: #cba6f7; color: #11111b; border: none; }\n .xore_btn_primary:hover { background: #b4befe; }\n .xore_btn_danger { background: #f38ba8; color: #11111b; border: none; }\n .xore_btn_danger:hover { background: #eba0ac; }\n .xore_btn:disabled { opacity: 0.5; cursor: not-allowed; }\n\n .xore_output_tabs { display: flex; gap: 4px; background: #181825; padding: 4px; border-radius: 6px 6px 0 0; border: 1px solid #45475a; border-bottom: none; }\n .xore_out_tab { background: none; border: none; color: #a6adc8; padding: 6px 12px; font-size: 0.8rem; border-radius: 4px; cursor: pointer; }\n .xore_out_tab.xore_active { background: #313244; color: #cba6f7; font-weight: 600; }\n \n .xore_output_box { background: #11111b; border: 1px solid #45475a; border-radius: 0 0 6px 6px; padding: 12px; min-height: 100px; max-height: 250px; overflow-y: auto; font-family: \"Fira Code\", monospace; font-size: 0.85rem; word-break: break-all; white-space: pre-wrap; color: #a6e3a1; }\n\n .xore_toggles { display: flex; gap: 16px; margin-bottom: 16px; background: #181825; padding: 10px; border-radius: 6px; border: 1px solid #313244; flex-wrap: wrap; }\n .xore_toggle_label { display: flex; align-items: center; gap: 6px; color: #bac2de; font-size: 0.85rem; cursor: pointer; }\n\n .xore_dropzone { border: 2px dashed #45475a; border-radius: 8px; padding: 32px 16px; text-align: center; background: #181825; cursor: pointer; transition: border-color 0.2s; }\n .xore_dropzone:hover, .xore_dropzone.xore_dragover { border-color: #cba6f7; background: #1e1e2e; }\n\n .xore_file_info { background: #181825; border: 1px solid #313244; border-radius: 6px; padding: 12px; margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; font-size: 0.8rem; }\n .xore_file_info_item span { color: #a6adc8; }\n .xore_file_info_item strong { color: #cdd6f4; font-weight: 600; }\n\n .xore_progress_container { margin-top: 16px; display: none; }\n .xore_progress_bar_bg { background: #181825; border-radius: 10px; height: 12px; width: 100%; overflow: hidden; border: 1px solid #45475a; margin-bottom: 8px; }\n .xore_progress_bar_fill { background: linear-gradient(90deg, #cba6f7, #89b4fa); height: 100%; width: 0%; transition: width 0.1s linear; }\n .xore_progress_stats { display: flex; justify-content: space-between; font-size: 0.8rem; color: #a6adc8; }\n\n .xore_notification { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 0.85rem; display: none; }\n .xore_notification.xore_error { background: #450a0a; color: #f87171; border: 1px solid #991b1b; display: block; }\n .xore_notification.xore_success { background: #064e3b; color: #34d399; border: 1px solid #065f46; display: block; }\n\n .xore_shortcut_hint { text-align: right; font-size: 0.75rem; color: #6c7086; margin-top: 12px; }\n\n .xore_subhead { font-size: 0.85rem; color: #bac2de; font-weight: 600; margin-top: 12px; margin-bottom: 4px; text-transform: uppercase; }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"xore_container\">\n <div class=\"xore_header\">\n <div class=\"xore_title\">XOR Engine & Calculator<\/div>\n <div class=\"xore_subtitle\">Client-side symmetric bitwise XOR processing engine<\/div>\n <\/div>\n\n <div id=\"xore_notification\" class=\"xore_notification\" role=\"alert\"><\/div>\n\n \n <div class=\"xore_tabs\" role=\"tablist\">\n <button class=\"xore_tab_btn xore_active\" role=\"tab\" id=\"xore_tab_text_btn\" aria-selected=\"true\" aria-controls=\"xore_tab_text\">Text XOR<\/button>\n <button class=\"xore_tab_btn\" role=\"tab\" id=\"xore_tab_hex_btn\" aria-selected=\"false\" aria-controls=\"xore_tab_hex\">Hexadecimal XOR<\/button>\n <button class=\"xore_tab_btn\" role=\"tab\" id=\"xore_tab_file_btn\" aria-selected=\"false\" aria-controls=\"xore_tab_file\">Binary File XOR<\/button>\n <\/div>\n\n \n <div id=\"xore_tab_text\" class=\"xore_panel xore_active\" role=\"tabpanel\" aria-labelledby=\"xore_tab_text_btn\">\n <div class=\"xore_form_group\">\n <label class=\"xore_label\" for=\"xore_text_input\">Input Text (UTF-8)<\/label>\n <textarea id=\"xore_text_input\" class=\"xore_textarea\" rows=\"4\" placeholder=\"Enter plain text, multi-line string, or unicode\/emojis...\">Hello, World!<\/textarea>\n <\/div>\n\n <div class=\"xore_form_group\">\n <label class=\"xore_label\" for=\"xore_text_key\">XOR Key (Text)<\/label>\n <input type=\"text\" id=\"xore_text_key\" class=\"xore_input\" placeholder=\"Enter key...\" value=\"SecretKey\">\n <\/div>\n\n <div class=\"xore_btn_group\">\n <button id=\"xore_text_process_btn\" class=\"xore_btn xore_btn_primary\">Process (Ctrl+Enter)<\/button>\n <button id=\"xore_text_swap_btn\" class=\"xore_btn\">Swap Input \u2194 Output<\/button>\n <button id=\"xore_text_clear_btn\" class=\"xore_btn\">Clear (Esc)<\/button>\n <\/div>\n\n <div class=\"xore_form_group\">\n <label class=\"xore_label\">XOR Output Result<\/label>\n <div class=\"xore_output_tabs\">\n <button class=\"xore_out_tab xore_active\" data-view=\"raw\">Raw Text<\/button>\n <button class=\"xore_out_tab\" data-view=\"hex\">Hexadecimal<\/button>\n <button class=\"xore_out_tab\" data-view=\"base64\">Base64<\/button>\n <\/div>\n <div id=\"xore_text_output\" class=\"xore_output_box\"><\/div>\n <\/div>\n\n <div class=\"xore_btn_group\">\n <button id=\"xore_text_copy_btn\" class=\"xore_btn\">Copy Active Output<\/button>\n <button id=\"xore_text_download_btn\" class=\"xore_btn\">Download TXT (Ctrl+D)<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"xore_tab_hex\" class=\"xore_panel\" role=\"tabpanel\" aria-labelledby=\"xore_tab_hex_btn\">\n <div class=\"xore_row\">\n <div class=\"xore_col\">\n <label class=\"xore_label\" for=\"xore_hex_a\">Hex Sequence A<\/label>\n <textarea id=\"xore_hex_a\" class=\"xore_textarea\" rows=\"3\" placeholder=\"e.g. 48656c6c6f\">48656c6c6f<\/textarea>\n <\/div>\n <div class=\"xore_col\">\n <label class=\"xore_label\" for=\"xore_hex_b\">Hex Sequence B<\/label>\n <textarea id=\"xore_hex_b\" class=\"xore_textarea\" rows=\"3\" placeholder=\"e.g. 576f726c64\">576f726c64<\/textarea>\n <\/div>\n <\/div>\n\n <div class=\"xore_toggles\">\n <label class=\"xore_toggle_label\">\n <input type=\"checkbox\" id=\"xore_hex_opt_space\" checked> Space Separated\n <\/label>\n <label class=\"xore_toggle_label\">\n <input type=\"checkbox\" id=\"xore_hex_opt_upper\" checked> Uppercase\n <\/label>\n <label class=\"xore_toggle_label\">\n <input type=\"checkbox\" id=\"xore_hex_opt_prefix\"> 0x Prefix\n <\/label>\n <\/div>\n\n <div class=\"xore_btn_group\">\n <button id=\"xore_hex_process_btn\" class=\"xore_btn xore_btn_primary\">Calculate XOR (Ctrl+Enter)<\/button>\n <button id=\"xore_hex_clear_btn\" class=\"xore_btn\">Clear (Esc)<\/button>\n <\/div>\n\n <div class=\"xore_form_group\">\n <div class=\"xore_subhead\">Hex Result<\/div>\n <div id=\"xore_hex_output\" class=\"xore_output_box\"><\/div>\n\n <div class=\"xore_subhead\">ASCII Preview<\/div>\n <div id=\"xore_hex_ascii\" class=\"xore_output_box\" style=\"min-height: 40px; max-height: 80px;\"><\/div>\n\n <div class=\"xore_subhead\">Binary Bitstream Preview<\/div>\n <div id=\"xore_hex_binary\" class=\"xore_output_box\" style=\"min-height: 60px; max-height: 120px;\"><\/div>\n <\/div>\n\n <div class=\"xore_btn_group\">\n <button id=\"xore_hex_copy_btn\" class=\"xore_btn\">Copy Hex Result<\/button>\n <button id=\"xore_hex_download_btn\" class=\"xore_btn\">Download Result (Ctrl+D)<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"xore_tab_file\" class=\"xore_panel\" role=\"tabpanel\" aria-labelledby=\"xore_tab_file_btn\">\n <div class=\"xore_form_group\">\n <label class=\"xore_label\">Target File<\/label>\n <div id=\"xore_dropzone\" class=\"xore_dropzone\" tabindex=\"0\" role=\"button\" aria-label=\"Drop file here or click to upload\">\n <p style=\"color: #cdd6f4; font-weight: 600; margin-bottom: 4px;\">Drag & Drop binary file here<\/p>\n <p style=\"color: #a6adc8; font-size: 0.8rem;\">or click to open file picker<\/p>\n <input type=\"file\" id=\"xore_file_input\" style=\"display: none;\">\n <\/div>\n <\/div>\n\n <div id=\"xore_file_details\" class=\"xore_file_info\" style=\"display: none;\">\n <div class=\"xore_file_info_item\"><span>Name:<\/span> <strong id=\"xore_info_name\">–<\/strong><\/div>\n <div class=\"xore_file_info_item\"><span>Size:<\/span> <strong id=\"xore_info_size\">–<\/strong><\/div>\n <div class=\"xore_file_info_item\"><span>Type:<\/span> <strong id=\"xore_info_type\">–<\/strong><\/div>\n <div class=\"xore_file_info_item\"><span>Ext:<\/span> <strong id=\"xore_info_ext\">–<\/strong><\/div>\n <div class=\"xore_file_info_item\"><span>Modified:<\/span> <strong id=\"xore_info_date\">–<\/strong><\/div>\n <\/div>\n\n <div class=\"xore_row\" style=\"margin-top: 16px;\">\n <div class=\"xore_col\">\n <label class=\"xore_label\" for=\"xore_file_key\">XOR Key<\/label>\n <input type=\"text\" id=\"xore_file_key\" class=\"xore_input\" placeholder=\"Text Key or Hex Sequence (e.g. SecretKey or 0xFF00)\">\n <\/div>\n <div class=\"xore_col\">\n <label class=\"xore_label\" for=\"xore_file_key_type\">Key Type<\/label>\n <select id=\"xore_file_key_type\" class=\"xore_select\">\n <option value=\"text\">UTF-8 Text String<\/option>\n <option value=\"hex\">Hexadecimal Sequence<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"xore_btn_group\">\n <button id=\"xore_file_process_btn\" class=\"xore_btn xore_btn_primary\">Process File (Ctrl+Enter)<\/button>\n <button id=\"xore_file_cancel_btn\" class=\"xore_btn xore_btn_danger\" style=\"display: none;\">Cancel Operation<\/button>\n <button id=\"xore_file_download_btn\" class=\"xore_btn\" disabled>Download Processed File (Ctrl+D)<\/button>\n <\/div>\n\n <div id=\"xore_progress_group\" class=\"xore_progress_container\">\n <div class=\"xore_progress_bar_bg\">\n <div id=\"xore_file_progress_bar\" class=\"xore_progress_bar_fill\"><\/div>\n <\/div>\n <div class=\"xore_progress_stats\">\n <span id=\"xore_progress_percent\">0%<\/span>\n <span id=\"xore_progress_bytes\">0 \/ 0 Bytes<\/span>\n <span id=\"xore_progress_speed\">0 MB\/s<\/span>\n <span id=\"xore_progress_time\">0.0s<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"xore_shortcut_hint\">\n Shortcuts: <strong>Ctrl+Enter<\/strong> Process | <strong>Esc<\/strong> Clear Tab | <strong>Ctrl+D<\/strong> Download Result\n <\/div>\n<\/div>\n\n<script>\n(function() {\n 'use strict';\n\n \/\/ State Management\n const state = {\n activeTab: 'text',\n text: {\n raw: '',\n hex: '',\n base64: '',\n activeView: 'raw'\n },\n hex: {\n result: '',\n ascii: '',\n binary: ''\n },\n file: {\n selectedFile: null,\n processedBlob: null,\n isProcessing: false,\n shouldCancel: false\n }\n };\n\n \/\/ DOM Cache\n const el = {\n notification: document.getElementById('xore_notification'),\n \/\/ Tabs\n tabBtns: document.querySelectorAll('.xore_tab_btn'),\n panels: document.querySelectorAll('.xore_panel'),\n \/\/ Text Mode\n textInput: document.getElementById('xore_text_input'),\n textKey: document.getElementById('xore_text_key'),\n textProcessBtn: document.getElementById('xore_text_process_btn'),\n textSwapBtn: document.getElementById('xore_text_swap_btn'),\n textClearBtn: document.getElementById('xore_text_clear_btn'),\n textOutput: document.getElementById('xore_text_output'),\n textOutTabs: document.querySelectorAll('.xore_out_tab'),\n textCopyBtn: document.getElementById('xore_text_copy_btn'),\n textDownloadBtn: document.getElementById('xore_text_download_btn'),\n \/\/ Hex Mode\n hexA: document.getElementById('xore_hex_a'),\n hexB: document.getElementById('xore_hex_b'),\n hexOptSpace: document.getElementById('xore_hex_opt_space'),\n hexOptUpper: document.getElementById('xore_hex_opt_upper'),\n hexOptPrefix: document.getElementById('xore_hex_opt_prefix'),\n hexProcessBtn: document.getElementById('xore_hex_process_btn'),\n hexClearBtn: document.getElementById('xore_hex_clear_btn'),\n hexOutput: document.getElementById('xore_hex_output'),\n hexAscii: document.getElementById('xore_hex_ascii'),\n hexBinary: document.getElementById('xore_hex_binary'),\n hexCopyBtn: document.getElementById('xore_hex_copy_btn'),\n hexDownloadBtn: document.getElementById('xore_hex_download_btn'),\n \/\/ File Mode\n dropzone: document.getElementById('xore_dropzone'),\n fileInput: document.getElementById('xore_file_input'),\n fileDetails: document.getElementById('xore_file_details'),\n infoName: document.getElementById('xore_info_name'),\n infoSize: document.getElementById('xore_info_size'),\n infoType: document.getElementById('xore_info_type'),\n infoExt: document.getElementById('xore_info_ext'),\n infoDate: document.getElementById('xore_info_date'),\n fileKey: document.getElementById('xore_file_key'),\n fileKeyType: document.getElementById('xore_file_key_type'),\n fileProcessBtn: document.getElementById('xore_file_process_btn'),\n fileCancelBtn: document.getElementById('xore_file_cancel_btn'),\n fileDownloadBtn: document.getElementById('xore_file_download_btn'),\n progressContainer: document.getElementById('xore_progress_group'),\n progressBar: document.getElementById('xore_file_progress_bar'),\n progressPercent: document.getElementById('xore_progress_percent'),\n progressBytes: document.getElementById('xore_progress_bytes'),\n progressSpeed: document.getElementById('xore_progress_speed'),\n progressTime: document.getElementById('xore_progress_time')\n };\n\n \/\/ Helper Functions\n function showNotification(msg, type = 'error') {\n el.notification.textContent = msg;\n el.notification.className = 'xore_notification xore_' + type;\n setTimeout(() => {\n if (el.notification.textContent === msg) {\n el.notification.className = 'xore_notification';\n el.notification.textContent = '';\n }\n }, 5000);\n }\n\n function clearNotification() {\n el.notification.className = 'xore_notification';\n el.notification.textContent = '';\n }\n\n function utf8ToBytes(str) {\n return new TextEncoder().encode(str);\n }\n\n function bytesToUtf8(bytes) {\n return new TextDecoder('utf-8', { fatal: false }).decode(bytes);\n }\n\n function bytesToHex(bytes) {\n return Array.from(bytes).map(b => b.toString(16).padStart(2, '0')).join('');\n }\n\n function hexToBytes(hexStr) {\n let clean = hexStr.replace(\/[^0-9a-fA-F]\/g, '');\n if (clean.length % 2 !== 0) {\n clean = '0' + clean;\n }\n const bytes = new Uint8Array(clean.length \/ 2);\n for (let i = 0; i < clean.length; i += 2) {\n bytes[i \/ 2] = parseInt(clean.substr(i, 2), 16);\n }\n return bytes;\n }\n\n function bytesToBase64(bytes) {\n let bin = '';\n const len = bytes.byteLength;\n for (let i = 0; i < len; i++) {\n bin += String.fromCharCode(bytes[i]);\n }\n return window.btoa(bin);\n }\n\n function formatBytes(bytes) {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) \/ Math.log(k));\n return parseFloat((bytes \/ Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n }\n\n \/\/ Tab Switch Handler\n el.tabBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n el.tabBtns.forEach(b => {\n b.classList.remove('xore_active');\n b.setAttribute('aria-selected', 'false');\n });\n el.panels.forEach(p => p.classList.remove('xore_active'));\n\n btn.classList.add('xore_active');\n btn.setAttribute('aria-selected', 'true');\n const targetId = btn.getAttribute('aria-controls');\n document.getElementById(targetId).classList.add('xore_active');\n\n if (targetId === 'xore_tab_text') state.activeTab = 'text';\n if (targetId === 'xore_tab_hex') state.activeTab = 'hex';\n if (targetId === 'xore_tab_file') state.activeTab = 'file';\n clearNotification();\n });\n });\n\n \/\/ --- TAB 1: TEXT XOR ---\n function processTextXOR() {\n clearNotification();\n const text = el.textInput.value;\n const key = el.textKey.value;\n\n if (!text) {\n showNotification('Please enter input text to process.');\n return;\n }\n if (!key) {\n showNotification('Please enter an XOR key.');\n return;\n }\n\n const textBytes = utf8ToBytes(text);\n const keyBytes = utf8ToBytes(key);\n const resultBytes = new Uint8Array(textBytes.length);\n\n for (let i = 0; i < textBytes.length; i++) {\n resultBytes[i] = textBytes[i] ^ keyBytes[i % keyBytes.length];\n }\n\n state.text.raw = bytesToUtf8(resultBytes);\n state.text.hex = bytesToHex(resultBytes).toUpperCase();\n state.text.base64 = bytesToBase64(resultBytes);\n\n renderTextOutput();\n }\n\n function renderTextOutput() {\n const val = state.text[state.text.activeView] || '';\n el.textOutput.textContent = val;\n }\n\n el.textOutTabs.forEach(tab => {\n tab.addEventListener('click', () => {\n el.textOutTabs.forEach(t => t.classList.remove('xore_active'));\n tab.classList.add('xore_active');\n state.text.activeView = tab.getAttribute('data-view');\n renderTextOutput();\n });\n });\n\n el.textProcessBtn.addEventListener('click', processTextXOR);\n\n el.textSwapBtn.addEventListener('click', () => {\n const currentOut = state.text[state.text.activeView];\n if (!currentOut) {\n showNotification('No calculated output available to swap.');\n return;\n }\n el.textInput.value = currentOut;\n processTextXOR();\n showNotification('Swapped output into input field.', 'success');\n });\n\n el.textClearBtn.addEventListener('click', () => {\n el.textInput.value = '';\n el.textKey.value = '';\n state.text.raw = '';\n state.text.hex = '';\n state.text.base64 = '';\n renderTextOutput();\n clearNotification();\n });\n\n el.textCopyBtn.addEventListener('click', () => {\n const val = state.text[state.text.activeView];\n if (!val) return;\n navigator.clipboard.writeText(val).then(() => {\n showNotification('Copied output to clipboard!', 'success');\n });\n });\n\n el.textDownloadBtn.addEventListener('click', () => {\n const val = state.text[state.text.activeView];\n if (!val) return;\n const blob = new Blob([val], { type: 'text\/plain;charset=utf-8' });\n const link = document.createElement('a');\n link.href = URL.createObjectURL(blob);\n link.download = 'xor_text_output.txt';\n link.click();\n URL.revokeObjectURL(link.href);\n });\n\n\n \/\/ --- TAB 2: HEX XOR ---\n function processHexXOR() {\n clearNotification();\n let rawA = el.hexA.value;\n let rawB = el.hexB.value;\n\n if (!rawA || !rawB) {\n showNotification('Please provide both Hex Sequence A and Hex Sequence B.');\n return;\n }\n\n const cleanA = rawA.replace(\/[^0-9a-fA-F]\/g, '');\n const cleanB = rawB.replace(\/[^0-9a-fA-F]\/g, '');\n\n if (!cleanA.length || !cleanB.length) {\n showNotification('Invalid hexadecimal inputs. Ensure characters 0-9, A-F are present.');\n return;\n }\n\n const bytesA = hexToBytes(cleanA);\n const bytesB = hexToBytes(cleanB);\n\n const maxLen = Math.max(bytesA.length, bytesB.length);\n const resultBytes = new Uint8Array(maxLen);\n\n for (let i = 0; i < maxLen; i++) {\n const byteA = i < bytesA.length ? bytesA[i] : 0;\n const byteB = i < bytesB.length ? bytesB[i] : 0;\n resultBytes[i] = byteA ^ byteB;\n }\n\n \/\/ Format Hex Output\n const isUpper = el.hexOptUpper.checked;\n const isSpace = el.hexOptSpace.checked;\n const isPrefix = el.hexOptPrefix.checked;\n\n let hexParts = [];\n for (let i = 0; i < resultBytes.length; i++) {\n let h = resultBytes[i].toString(16).padStart(2, '0');\n if (isUpper) h = h.toUpperCase();\n if (isPrefix) h = '0x' + h;\n hexParts.push(h);\n }\n state.hex.result = hexParts.join(isSpace ? ' ' : '');\n\n \/\/ Format ASCII Preview\n let asciiStr = '';\n for (let i = 0; i < resultBytes.length; i++) {\n const b = resultBytes[i];\n asciiStr += (b >= 32 && b <= 126) ? String.fromCharCode(b) : '\u00b7';\n }\n state.hex.ascii = asciiStr;\n\n \/\/ Format Binary Preview\n let binaryParts = [];\n for (let i = 0; i < resultBytes.length; i++) {\n binaryParts.push(resultBytes[i].toString(2).padStart(8, '0'));\n }\n state.hex.binary = binaryParts.join(' ');\n\n renderHexOutput();\n }\n\n function renderHexOutput() {\n el.hexOutput.textContent = state.hex.result;\n el.hexAscii.textContent = state.hex.ascii;\n el.hexBinary.textContent = state.hex.binary;\n }\n\n el.hexProcessBtn.addEventListener('click', processHexXOR);\n [el.hexOptSpace, el.hexOptUpper, el.hexOptPrefix].forEach(opt => {\n opt.addEventListener('change', () => {\n if (state.hex.result) processHexXOR();\n });\n });\n\n el.hexClearBtn.addEventListener('click', () => {\n el.hexA.value = '';\n el.hexB.value = '';\n state.hex.result = '';\n state.hex.ascii = '';\n state.hex.binary = '';\n renderHexOutput();\n clearNotification();\n });\n\n el.hexCopyBtn.addEventListener('click', () => {\n if (!state.hex.result) return;\n navigator.clipboard.writeText(state.hex.result).then(() => {\n showNotification('Copied Hex Result to clipboard!', 'success');\n });\n });\n\n el.hexDownloadBtn.addEventListener('click', () => {\n if (!state.hex.result) return;\n const blob = new Blob([state.hex.result], { type: 'text\/plain;charset=utf-8' });\n const link = document.createElement('a');\n link.href = URL.createObjectURL(blob);\n link.download = 'xor_hex_output.txt';\n link.click();\n URL.revokeObjectURL(link.href);\n });\n\n\n \/\/ --- TAB 3: BINARY FILE XOR ---\n el.dropzone.addEventListener('click', () => el.fileInput.click());\n \n el.dropzone.addEventListener('dragover', (e) => {\n e.preventDefault();\n el.dropzone.classList.add('xore_dragover');\n });\n\n el.dropzone.addEventListener('dragleave', () => {\n el.dropzone.classList.remove('xore_dragover');\n });\n\n el.dropzone.addEventListener('drop', (e) => {\n e.preventDefault();\n el.dropzone.classList.remove('xore_dragover');\n if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n handleFileSelected(e.dataTransfer.files[0]);\n }\n });\n\n el.fileInput.addEventListener('change', (e) => {\n if (e.target.files && e.target.files.length > 0) {\n handleFileSelected(e.target.files[0]);\n }\n });\n\n function handleFileSelected(file) {\n state.file.selectedFile = file;\n state.file.processedBlob = null;\n el.fileDownloadBtn.disabled = true;\n\n el.infoName.textContent = file.name;\n el.infoSize.textContent = formatBytes(file.size);\n el.infoType.textContent = file.type || 'unknown\/binary';\n \n const parts = file.name.split('.');\n el.infoExt.textContent = parts.length > 1 ? '.' + parts.pop() : 'none';\n el.infoDate.textContent = file.lastModified ? new Date(file.lastModified).toLocaleDateString() : 'N\/A';\n\n el.fileDetails.style.display = 'grid';\n clearNotification();\n }\n\n el.fileProcessBtn.addEventListener('click', async () => {\n clearNotification();\n const file = state.file.selectedFile;\n const keyRaw = el.fileKey.value;\n const keyType = el.fileKeyType.value;\n\n if (!file) {\n showNotification('Please select a file first.');\n return;\n }\n if (!keyRaw) {\n showNotification('Please enter an XOR key.');\n return;\n }\n\n let keyBytes;\n if (keyType === 'text') {\n keyBytes = utf8ToBytes(keyRaw);\n } else {\n const cleanHex = keyRaw.replace(\/[^0-9a-fA-F]\/g, '');\n if (!cleanHex) {\n showNotification('Invalid Hex key sequence.');\n return;\n }\n keyBytes = hexToBytes(cleanHex);\n }\n\n if (!keyBytes || keyBytes.length === 0) {\n showNotification('Key length cannot be 0.');\n return;\n }\n\n \/\/ Lock UI state for processing\n state.file.isProcessing = true;\n state.file.shouldCancel = false;\n el.fileProcessBtn.style.display = 'none';\n el.fileCancelBtn.style.display = 'inline-flex';\n el.fileDownloadBtn.disabled = true;\n el.progressContainer.style.display = 'block';\n\n const chunkSize = 1024 * 1024; \/\/ 1MB Chunks\n const totalBytes = file.size;\n let offset = 0;\n let keyIndex = 0;\n\n const resultChunks = [];\n const startTime = performance.now();\n\n try {\n while (offset < totalBytes) {\n if (state.file.shouldCancel) {\n showNotification('File processing canceled by user.');\n resetFileProcessingUI();\n return;\n }\n\n const slice = file.slice(offset, offset + chunkSize);\n const buffer = await slice.arrayBuffer();\n const chunkUint8 = new Uint8Array(buffer);\n\n for (let i = 0; i < chunkUint8.length; i++) {\n chunkUint8[i] = chunkUint8[i] ^ keyBytes[keyIndex % keyBytes.length];\n keyIndex++;\n }\n\n resultChunks.push(chunkUint8);\n offset += chunkUint8.length;\n\n \/\/ Update progress & stats\n const pct = Math.min(100, Math.round((offset \/ totalBytes) * 100));\n const elapsed = (performance.now() - startTime) \/ 1000;\n const speedMBs = elapsed > 0 ? ((offset \/ (1024 * 1024)) \/ elapsed).toFixed(2) : '0.00';\n\n el.progressBar.style.width = pct + '%';\n el.progressPercent.textContent = pct + '%';\n el.progressBytes.textContent = `${formatBytes(offset)} \/ ${formatBytes(totalBytes)}`;\n el.progressSpeed.textContent = `${speedMBs} MB\/s`;\n el.progressTime.textContent = elapsed.toFixed(1) + 's';\n\n \/\/ Yield to browser UI thread\n await new Promise(r => setTimeout(r, 0));\n }\n\n state.file.processedBlob = new Blob(resultChunks, { type: file.type || 'application\/octet-stream' });\n el.fileDownloadBtn.disabled = false;\n showNotification('File processing complete! Ready for download.', 'success');\n\n } catch (err) {\n showNotification('Error processing file: ' + err.message);\n } finally {\n resetFileProcessingUI();\n }\n });\n\n el.fileCancelBtn.addEventListener('click', () => {\n state.file.shouldCancel = true;\n });\n\n function resetFileProcessingUI() {\n state.file.isProcessing = false;\n el.fileProcessBtn.style.display = 'inline-flex';\n el.fileCancelBtn.style.display = 'none';\n }\n\n el.fileDownloadBtn.addEventListener('click', () => {\n if (!state.file.processedBlob || !state.file.selectedFile) return;\n const link = document.createElement('a');\n link.href = URL.createObjectURL(state.file.processedBlob);\n link.download = 'xor_' + state.file.selectedFile.name;\n link.click();\n URL.revokeObjectURL(link.href);\n });\n\n\n \/\/ --- KEYBOARD SHORTCUTS ---\n document.addEventListener('keydown', (e) => {\n const isCtrl = e.ctrlKey || e.metaKey;\n\n \/\/ Ctrl + Enter -> Process\n if (isCtrl && e.key === 'Enter') {\n e.preventDefault();\n if (state.activeTab === 'text') processTextXOR();\n if (state.activeTab === 'hex') processHexXOR();\n if (state.activeTab === 'file' && !state.file.isProcessing) el.fileProcessBtn.click();\n }\n\n \/\/ Esc -> Clear Tab\n if (e.key === 'Escape') {\n if (state.activeTab === 'text') el.textClearBtn.click();\n if (state.activeTab === 'hex') el.hexClearBtn.click();\n }\n\n \/\/ Ctrl + D -> Download Output\n if (isCtrl && (e.key === 'd' || e.key === 'D')) {\n e.preventDefault();\n if (state.activeTab === 'text') el.textDownloadBtn.click();\n if (state.activeTab === 'hex') el.hexDownloadBtn.click();\n if (state.activeTab === 'file' && !el.fileDownloadBtn.disabled) el.fileDownloadBtn.click();\n }\n });\n\n \/\/ Initial Calculation Run\n processTextXOR();\n processHexXOR();\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>XOR Engine & Calculator XOR Engine & Calculator Client-side symmetric bitwise XOR processing engine Text XOR Hexadecimal XOR Binary File XOR Input Text (UTF-8) Hello, World! XOR Key (Text) Process (Ctrl+Enter) Swap Input \u2194 Output Clear (Esc) XOR Output Result Raw Text Hexadecimal Base64 Copy Active Output Download TXT (Ctrl+D) Hex Sequence A 48656c6c6f Hex […]<\/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-695","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/695","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=695"}],"version-history":[{"count":6,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/695\/revisions"}],"predecessor-version":[{"id":702,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/695\/revisions\/702"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}