Comparador HEX BIN<\/title>\r\n\r\n<style>\r\nbody {\r\n background: #f0f0f0;\r\n padding: 20px;\r\n}\r\n\r\n.container {\r\n background: white;\r\n border-radius: 10px;\r\n padding: 20px;\r\n max-width: 100%;\r\n}\r\n\r\n.controls {\r\n margin-bottom: 15px;\r\n}\r\n\r\n.hex-view {\r\n display: flex;\r\n gap: 10px;\r\n}\r\n\r\n.file-box {\r\n border: 1px solid #000;\r\n padding: 10px;\r\n overflow: auto;\r\n max-height: 600px;\r\n background: #fff;\r\n flex: 1;\r\n white-space: nowrap;\r\n contain: content;\r\n}\r\n\r\n.line {\r\n display: flex;\r\n white-space: pre;\r\n font-size: 13px;\r\n}\r\n\r\n.addr {\r\n display: inline-block;\r\n width: 90px; \/* \ud83d\udd25 espacio para la direcci\u00f3n *\/\r\n margin-right: 12px; \/* separaci\u00f3n con el HEX *\/\r\n color: #444;\r\n}\r\n\r\n.byte {\r\n display: inline-block;\r\n min-width: 22px;\r\n}\r\n\r\n\r\n.diff {\r\n background-color: #e0b3ff;\r\n border-radius: 3px;\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"container\">\r\n <div class=\"controls\">\r\n <input type=\"file\" id=\"file1\">\r\n <input type=\"file\" id=\"file2\">\r\n <button onclick=\"compare()\">Comparar<\/button>\r\n <\/div>\r\n\r\n <div class=\"hex-view\">\r\n <div class=\"file-box\" id=\"hex1\"><\/div>\r\n <div class=\"file-box\" id=\"hex2\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nfunction toHex(v) {\r\n return v.toString(16).padStart(2, '0').toUpperCase();\r\n}\r\n\r\nfunction compare() {\r\n const f1 = document.getElementById('file1').files[0];\r\n const f2 = document.getElementById('file2').files[0];\r\n\r\n if (!f1 || !f2) {\r\n alert(\"Selecciona ambos archivos BIN\");\r\n return;\r\n }\r\n\r\n const r1 = new FileReader();\r\n const r2 = new FileReader();\r\n\r\n r1.onload = e1 => {\r\n r2.onload = e2 => {\r\n\r\n const b1 = new Uint8Array(e1.target.result);\r\n const b2 = new Uint8Array(e2.target.result);\r\n const len = Math.max(b1.length, b2.length);\r\n\r\n const hex1 = document.getElementById('hex1');\r\n const hex2 = document.getElementById('hex2');\r\n hex1.innerHTML = '';\r\n hex2.innerHTML = '';\r\n\r\n let offset = 0;\r\n const BYTES_PER_LINE = 16;\r\n const LINES_PER_CHUNK = 300;\r\n\r\n function renderChunk() {\r\n let rendered = 0;\r\n\r\n while (offset < len && rendered < LINES_PER_CHUNK) {\r\n\r\n const line1 = document.createElement('div');\r\n const line2 = document.createElement('div');\r\n line1.className = 'line';\r\n line2.className = 'line';\r\n\r\n const addr = offset.toString(16).padStart(6, '0').toUpperCase();\r\n line1.innerHTML = `<span class=\"addr\">${addr}<\/span>`;\r\nline2.innerHTML = `<span class=\"addr\">${addr}<\/span>`;\r\n\r\n\r\n let hexLine1 = '';\r\n let hexLine2 = '';\r\n\r\n for (let j = 0; j < BYTES_PER_LINE; j++) {\r\n const idx = offset + j;\r\n const v1 = b1[idx];\r\n const v2 = b2[idx];\r\n const diff = v1 !== v2;\r\n\r\n const h1 = v1 !== undefined ? toHex(v1) : ' ';\r\n const h2 = v2 !== undefined ? toHex(v2) : ' ';\r\n\r\n hexLine1 += `<span class=\"byte ${diff ? 'diff' : ''}\">${h1}<\/span> `;\r\nhexLine2 += `<span class=\"byte ${diff ? 'diff' : ''}\">${h2}<\/span> `;\r\n\r\n }\r\n\r\n line1.innerHTML += hexLine1;\r\n line2.innerHTML += hexLine2;\r\n\r\n hex1.appendChild(line1);\r\n hex2.appendChild(line2);\r\n\r\n offset += BYTES_PER_LINE;\r\n rendered++;\r\n }\r\n\r\n if (offset < len) {\r\n requestAnimationFrame(renderChunk);\r\n }\r\n }\r\n\r\n renderChunk();\r\n };\r\n\r\n r2.readAsArrayBuffer(f2);\r\n };\r\n\r\n r1.readAsArrayBuffer(f1);\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Comparador Visual de Archivos BIN (Hex) Comparador HEX BIN Comparar<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3737","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/dumpflashedit.com\/index.php\/wp-json\/wp\/v2\/pages\/3737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dumpflashedit.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dumpflashedit.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dumpflashedit.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dumpflashedit.com\/index.php\/wp-json\/wp\/v2\/comments?post=3737"}],"version-history":[{"count":41,"href":"https:\/\/dumpflashedit.com\/index.php\/wp-json\/wp\/v2\/pages\/3737\/revisions"}],"predecessor-version":[{"id":5745,"href":"https:\/\/dumpflashedit.com\/index.php\/wp-json\/wp\/v2\/pages\/3737\/revisions\/5745"}],"wp:attachment":[{"href":"https:\/\/dumpflashedit.com\/index.php\/wp-json\/wp\/v2\/media?parent=3737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}