Added new codebook page

2026-04-06 15:17:25 -04:00
parent 3cb34a226a
commit b245ae63e6
4 changed files with 522 additions and 155 deletions
--- a/client/public/code-book.html
+++ b/client/public/code-book.html
@@ -28,7 +28,7 @@
 			.header {
 				background: rgba(15, 23, 42, 0.95);
 				backdrop-filter: blur(10px);
-				padding: 1.5rem 2rem;
+				padding: 1rem;
 				border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 				position: sticky;
 				top: 0;
@@ -50,12 +50,12 @@
 			}

 			.logo-section img {
-				height: 3rem;
+				height: 2.5rem;
 				width: auto;
 			}

 			.logo {
-				font-size: 1.5rem;
+				font-size: 1.25rem;
 				font-weight: 700;
 				letter-spacing: 0.05rem;
 			}
@@ -63,21 +63,32 @@
 			.container {
 				max-width: 1200px;
 				margin: 0 auto;
-				padding: 2rem;
+				padding: 1rem;
 			}

 			.key-section {
 				background: rgba(255, 255, 255, 0.05);
 				border: 1px solid rgba(255, 255, 255, 0.1);
 				border-radius: 12px;
-				padding: 1.5rem;
-				margin-bottom: 2rem;
+				padding: 1rem;
+				margin-bottom: 1.5rem;
 			}

 			.key-input-group {
 				display: flex;
-				gap: 1rem;
-				margin-bottom: 1rem;
+				gap: 0.5rem;
+				align-items: flex-end;
+				flex-wrap: wrap;
+			}
+
+			.key-input-group .input-wrapper {
+				flex: 1;
+				min-width: 200px;
+			}
+
+			.key-input-group button {
+				flex: 0 0 auto;
+				white-space: nowrap;
 			}

 			.input-wrapper {
@@ -133,6 +144,7 @@
 				font-size: 0.9rem;
 				cursor: pointer;
 				transition: all 0.2s ease;
+				white-space: nowrap;
 			}

 			button:hover {
@@ -165,8 +177,8 @@
 				background: rgba(255, 255, 255, 0.05);
 				border: 1px solid rgba(255, 255, 255, 0.1);
 				border-radius: 12px;
-				padding: 1.5rem;
-				margin-bottom: 2rem;
+				padding: 1rem;
+				margin-bottom: 1.5rem;
 			}

 			.tool-title {
@@ -183,17 +195,35 @@

 			.hotp-row {
 				display: flex;
-				gap: 1rem;
-				align-items: center;
+				gap: 0.5rem;
+				align-items: flex-end;
+				flex-wrap: wrap;
 			}

 			.hotp-row button {
 				flex: 0 0 auto;
 			}

+			.hotp-row > div {
+				flex: 1;
+				min-width: 100px;
+			}
+
+			.hotp-challenge-response {
+				display: flex;
+				gap: 0.5rem;
+				flex: 1;
+				min-width: 0;
+			}
+
+			.hotp-challenge-response > div {
+				flex: 1;
+				min-width: 100px;
+			}
+
 			.hotp-row input,
 			.hotp-code {
-				flex: 1;
+				width: 100%;
 				background: rgba(255, 255, 255, 0.05);
 				border: 1px solid rgba(255, 255, 255, 0.1);
 				border-radius: 8px;
@@ -211,14 +241,16 @@

 			.auth-table {
 				font-family: 'Courier New', monospace;
-				font-size: 0.9rem;
+				font-size: 0.75rem;
 				margin: 1rem 0;
 				width: 100%;
+				overflow-x: auto;
 			}

 			.auth-table table {
 				border-collapse: collapse;
 				width: 100%;
+				min-width: 500px;
 			}

 			.auth-table th,
@@ -227,6 +259,7 @@
 				padding: 0.5rem;
 				text-align: center;
 				transition: background-color 0.15s ease;
+				cursor: pointer;
 			}

 			.auth-table th {
@@ -234,19 +267,33 @@
 				font-weight: 600;
 			}

-			.auth-table td.highlight {
+			.auth-table td.highlight,
+			.auth-table th.highlight {
+				background: rgba(255, 255, 255, 0.25);
+			}
+
+			.auth-table td:hover,
+			.auth-table th:hover {
 				background: rgba(255, 255, 255, 0.15);
 			}

-			.auth-table th.highlight {
-				background: rgba(255, 255, 255, 0.2);
+			.ascii-search-grid {
+				display: grid;
+				grid-template-columns: repeat(3, 1fr);
+				gap: 0.5rem;
+				margin-bottom: 1rem;
+			}
+
+			.ascii-tables-grid {
+				display: grid;
+				grid-template-columns: repeat(4, 1fr);
+				gap: 1rem;
+				margin: 1rem 0;
 			}

 			.ascii-table {
 				font-family: 'Courier New', monospace;
-				font-size: 0.85rem;
-				margin: 1rem 0;
-				width: 100%;
+				font-size: 0.75rem;
 			}

 			.ascii-table table {
@@ -266,16 +313,46 @@
 				font-weight: 600;
 			}

+			.ascii-table tr:hover {
+				background: rgba(255, 255, 255, 0.1);
+			}
+
+			.ascii-table tr.highlight {
+				background: rgba(255, 255, 255, 0.15);
+			}
+
+			.ascii-table tr.search-match {
+				background: rgba(16, 185, 129, 0.2);
+			}
+
 			.pad-list {
 				font-family: 'Courier New', monospace;
-				font-size: 0.95rem;
+				font-size: 0.85rem;
 				line-height: 1.8;
+				word-break: break-all;
 			}

 			.pad-item {
 				margin: 0.5rem 0;
 			}

+			.pad-controls {
+				display: flex;
+				gap: 0.5rem;
+				align-items: center;
+				flex-wrap: wrap;
+				margin-bottom: 1rem;
+			}
+
+			.pad-controls button {
+				flex: 0 0 auto;
+			}
+
+			.pad-controls input {
+				width: 100px;
+				flex: 0 0 auto;
+			}
+
 			textarea {
 				width: 100%;
 				min-height: 100px;
@@ -284,22 +361,23 @@
 				border-radius: 8px;
 				padding: 0.75rem;
 				color: #fff;
-				font-size: 1rem;
+				font-size: 0.9rem;
 				font-family: 'Courier New', monospace;
 				resize: vertical;
 			}

 			.button-group {
 				display: flex;
-				gap: 1rem;
+				gap: 0.5rem;
 				margin-top: 1rem;
+				flex-wrap: wrap;
 			}

 			.checkbox-wrapper {
 				display: flex;
 				align-items: center;
 				gap: 0.5rem;
-				margin-top: 1rem;
+				margin-top: 0;
 			}

 			.checkbox-wrapper input[type="checkbox"] {
@@ -320,6 +398,173 @@
 				padding: 1rem;
 				margin: 0.75rem 0;
 				font-family: 'Courier New', monospace;
+				font-size: 0.85rem;
+				overflow-x: auto;
+			}
+
+			.example-box pre {
+				overflow-x: auto;
+				white-space: pre;
+			}
+
+			.textarea-wrapper {
+				position: relative;
+			}
+
+			.copy-button {
+				position: absolute;
+				top: 0.5rem;
+				right: 0.5rem;
+				background: rgba(255, 255, 255, 0.1);
+				border: 1px solid rgba(255, 255, 255, 0.2);
+				border-radius: 6px;
+				padding: 0.5rem;
+				cursor: pointer;
+				transition: all 0.2s ease;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.copy-button:hover {
+				background: rgba(255, 255, 255, 0.2);
+			}
+
+			.copy-button svg {
+				width: 16px;
+				height: 16px;
+				fill: #fff;
+			}
+
+			/* Mobile Responsive */
+			@media (max-width: 768px) {
+				.header {
+					padding: 0.75rem;
+				}
+
+				.logo-section img {
+					height: 2rem;
+				}
+
+				.logo {
+					font-size: 1rem;
+				}
+
+				.container {
+					padding: 0.75rem;
+				}
+
+				.tool-section,
+				.key-section {
+					padding: 0.75rem;
+					margin-bottom: 1rem;
+				}
+
+				.tool-title {
+					font-size: 1.1rem;
+				}
+
+				.key-input-group {
+					flex-wrap: wrap;
+				}
+
+				.key-input-group .input-wrapper {
+					flex: 1 1 100%;
+					min-width: 100%;
+				}
+
+				.key-input-group button {
+					flex: 1;
+				}
+
+				.hotp-row {
+					flex-wrap: wrap;
+				}
+
+				.hotp-row button {
+					flex: 1 1 100%;
+				}
+
+				.hotp-challenge-response {
+					flex: 1 1 100%;
+					flex-wrap: nowrap;
+				}
+
+				.ascii-search-grid {
+					grid-template-columns: 1fr;
+				}
+
+				.ascii-tables-grid {
+					grid-template-columns: repeat(2, 1fr);
+					gap: 0.75rem;
+				}
+
+				.auth-table {
+					font-size: 0.65rem;
+				}
+
+				.ascii-table {
+					font-size: 0.7rem;
+				}
+
+				.ascii-table th,
+				.ascii-table td {
+					padding: 0.3rem;
+				}
+
+				button {
+					padding: 0.65rem 1rem;
+					font-size: 0.85rem;
+				}
+
+				.example-box {
+					font-size: 0.75rem;
+					padding: 0.75rem;
+				}
+			}
+
+			@media (max-width: 480px) {
+				.ascii-tables-grid {
+					grid-template-columns: 1fr;
+				}
+
+				.auth-table th,
+				.auth-table td {
+					padding: 0.3rem;
+				}
+
+				textarea {
+					font-size: 0.85rem;
+				}
+
+				.pad-list {
+					font-size: 0.8rem;
+				}
+
+				.hotp-challenge-response {
+					gap: 0.25rem;
+				}
+
+				.hotp-challenge-response button {
+					padding: 0.65rem 0.75rem;
+					font-size: 0.8rem;
+				}
+			}
+
+			@media (min-width: 769px) {
+				.ascii-tables-grid {
+					grid-template-columns: repeat(4, 1fr);
+				}
+			}
+
+			@media (min-width: 1200px) {
+				.key-input-group {
+					flex-wrap: nowrap;
+				}
+
+				.key-input-group .input-wrapper {
+					min-width: 200px;
+				}
 			}
 		</style>
 	</head>
@@ -328,7 +573,7 @@
 			<div class="header-content">
 				<div class="logo-section">
 					<img src="/favicon.png" alt="Logo">
-					<div class="logo">ENCRYPTION TOOLS</div>
+					<div class="logo">CODE BOOK</div>
 				</div>
 			</div>
 		</div>
@@ -338,7 +583,9 @@
 				<div class="input-wrapper">
 					<label>Encryption Key</label>
 					<div class="key-input-group">
-						<input type="text" id="master-key" placeholder="Enter encryption key">
+						<div class="input-wrapper">
+							<input type="text" id="master-key" placeholder="Enter encryption key">
+						</div>
 						<button onclick="generateNewKey()" class="danger">Random</button>
 						<button onclick="save()" class="save">Save</button>
 					</div>
@@ -347,36 +594,39 @@

 			<!-- HOTP Section -->
 			<div class="tool-section">
-				<div class="tool-title">One Time Password (HOTP)</div>
+				<div class="tool-title">One-Time Password (HOTP)</div>
 				<details style="margin: 1rem 0; color: #888;">
-					<summary>Description</summary>
+					<summary style="font-weight: bolder">Description</summary>

 					<div style="padding-top: 0.5rem;">
-						<p>Use a 3-digit challenge to generate & verify a corresponding 3-letter response.</p>
-						<p>Provides higher entropy and security than authentication tables while being easier to use.</p>
+						<p>Use a 2-character alphanumeric challenge to generate & verify with a corresponding 2-character response.</p>
+						<p>Provides higher entropy (security) than authentication tables while using less bandwidth & being easier to use.</p>

-							<div style="margin-top: 0.75rem;">
-								<strong>Pre-Authenticate:</strong>
-								<div class="example-box">
-									<p><strong>A->B:</strong> AUTH 123 ABC</p>
-									<p><strong>B->A:</strong> ACK. AUTH 456 DEF</p>
-								</div>
-							</div>
-
-							<div style="margin-top: 0.75rem;">
-								<strong>Challenge-Response:</strong>
-								<div class="example-box">
-									<p><strong>A->B:</strong> CONFIRM <span style="text-decoration: underline;">123</span></p>
-									<p><strong>B->A:</strong> ACK <span style="text-decoration: underline;">ABC</span>. CONFIRM <span style="text-decoration: underline;">456</span></p>
-									<p><strong>A->B:</strong> ACK <span style="text-decoration: underline;">DEF</span></p>
-								</div>
+						<div style="margin-top: 0.75rem;">
+							<strong>Challenge-Response:</strong>
+							<div class="example-box">
+								<p><strong>A->B:</strong> AUTH AA</p>
+								<p style="font-style: italic; color: #656565;">(B inputs AA and sends response with new challenge)</p>
+								<p><strong>B->A:</strong> ANS BB. AUTH CC</p>
+								<p style="font-style: italic; color: #656565;">(A verifies response; provides response to new challenge)</p>
+								<p><strong>A->B:</strong> ANS DD</p>
+								<p style="font-style: italic; color: #656565;">(B verifies response)</p>
 							</div>
+						</div>
 					</div>
 				</details>
 				<div class="hotp-row">
 					<button onclick="randomHOTPNonce()">Random</button>
-					<input type="number" id="hotp-nonce" placeholder="000" min="0" max="999" oninput="updateHOTP()">
-					<div class="hotp-code" id="hotp-display">---</div>
+					<div class="hotp-challenge-response">
+						<div>
+							<label>Challenge</label>
+							<input type="text" id="hotp-nonce" placeholder="A1" maxlength="2" oninput="updateHOTP()" style="text-transform: uppercase;">
+						</div>
+						<div>
+							<label>Response</label>
+							<div class="hotp-code" id="hotp-display">--</div>
+						</div>
+					</div>
 				</div>
 			</div>

@@ -384,17 +634,20 @@
 			<div class="tool-section">
 				<div class="tool-title">Authentication Tables</div>
 				<details style="margin: 1rem 0; color: #888;">
-					<summary>Description</summary>
+					<summary style="font-weight: bolder">Description</summary>

 					<div style="padding-top: 0.5rem;">
 						<p>Challenge-response tables for authentication.</p>

 						<div style="margin-top: 0.75rem;">
-							<strong>Example:</strong>
+							<strong>Challenge-Response:</strong>
 							<div class="example-box">
-								<p><strong>A->B:</strong> CONFIRM <span style="text-decoration: underline;">CEY</span> <span style="font-style: italic">(Table: Charlie, Column: E, Row: Y)</span></p>
-								<p><strong>B->A:</strong> ACK <span style="text-decoration: underline;">7</span>. CONFIRM <span style="text-decoration: underline;">AIT</span> <span style="font-style: italic">(Table: Alpha, Column: I, Row: T)</span></p>
-								<p><strong>A->B:</strong> ACK <span style="text-decoration: underline;">T</span></p>
+								<p><strong>A->B:</strong> AUTH CEY</p>
+								<p style="font-style: italic; color: #656565;">(B look up response for table: Charlie, column: E, row: Y; sends new challenge)</p>
+								<p><strong>B->A:</strong> ANS 7. AUTH AIT</p>
+								<p style="font-style: italic; color: #656565;">(A verifies response; sends response for new challenge, table: Alpha, column: I, row: T)</p>
+								<p><strong>A->B:</strong> ANS T</p>
+								<p style="font-style: italic; color: #656565;">(B verifies response)</p>
 							</div>
 						</div>
 					</div>
@@ -410,45 +663,48 @@
 			<div class="tool-section">
 				<div class="tool-title">One-Time Pad</div>
 				<details style="margin: 1rem 0; color: #888;">
-					<summary>Description</summary>
+					<summary style="font-weight: bolder">Description</summary>

 					<div style="padding-top: 0.5rem;">
-						<p>Use a 5-digit key to generate a corresponding fixed (paper friendly) or streamed (more secure) cipher.</p>
-						<p>Cipher values are added to the ASCII encoded message to create encrypted message.</p>
+						<p>Use a 5-digit key to generate a fixed (paper friendly) or streamed (more secure) cipher.</p>
+						<p>Cipher values are added to ASCII encoded message to create encrypted message. All values are 3-digit for manual calculations.</p>
+						<p>When encoding exceeds 999, only keep the last 3 digits. When decoding goes negative, add 1000.</p>

 						<div style="margin-top: 0.75rem;">
-							<strong>Encoding:</strong>
+							<strong>Encoding (with overflow example):</strong>
 							<div class="example-box">
-								Message: "HI"<br>
-								Pad Key: 12345<br>
-								Cipher: 42 85 28 71 14 ...<br><br>
+            <pre>Key: 12345
+234 967 890 112 314...

-								H = ASCII 72 → 72 + 42 = 114 → Hex 72<br>
-								I = ASCII 73 → 73 + 85 = 158 → Hex 9E<br><br>
-
-								Encoded: 729E
+Message:   H     E     L     L     O
+ASCII:     072   069   076   076   079
+Cipher:  + 234   967   890   112   314
+         ─────────────────────────────
+Result:    306  1036   966   188   393
+Encoded:   306   036   966   188   393</pre>
 							</div>
 						</div>

 						<div style="margin-top: 0.75rem;">
-							<strong>Decoding:</strong>
+							<strong>Decoding (with negative handling):</strong>
 							<div class="example-box">
-								Encoded: 729E<br>
-								Pad Key: 12345<br>
-								Cipher: 42 85 28 71 14 ...<br><br>
+            <pre>Key: 12345
+234 967 890 112 314...

-								72 (Hex) = 114 → 114 - 42 = 72 → ASCII 'H'<br>
-								9E (Hex) = 158 → 158 - 85 = 73 → ASCII 'I'<br><br>
-
-								Decoded: "HI"
+Encoded:   306   036   966   188   393
+Cipher:  - 234   967   890   112   314
+         ─────────────────────────────
+Result:    072  -931   076   076   079
+ASCII:     072   069   076   076   079
+Message:     H     E     L     L     O</pre>
 							</div>
 						</div>
 					</div>
 				</details>
 				<div class="input-wrapper">
-					<div class="key-input-group">
+					<div class="pad-controls">
 						<button onclick="randomPadKey()">Random</button>
-						<input type="text" id="pad-key" placeholder="00000" maxlength="5" oninput="updatePad()" style="max-width: 100px; text-align: center;">
+						<input type="text" id="pad-key" placeholder="00000" maxlength="5" oninput="updatePad()" style="text-align: center;">
 						<div class="checkbox-wrapper">
 							<input type="checkbox" id="stream-cipher" checked>
 							<label for="stream-cipher">Stream Cipher</label>
@@ -463,20 +719,43 @@
 						<button style="flex: 1 0 0;" onclick="handleEncode()">Encode</button>
 						<button style="flex: 1 0 0;" onclick="handleDecode()">Decode</button>
 					</div>
-					<textarea id="message-output" placeholder="Output" readonly style="margin-top: 1.5rem;"></textarea>
+					<div class="textarea-wrapper" style="margin-top: 1.5rem;">
+						<textarea id="message-output" placeholder="Output" readonly></textarea>
+						<button class="copy-button" onclick="copyOutput()" title="Copy to clipboard">
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+								<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+							</svg>
+						</button>
+					</div>
 				</div>
 			</div>

 			<!-- ASCII Table Section -->
 			<div class="tool-section">
 				<div class="tool-title">ASCII Reference Table</div>
-				<div class="ascii-table" id="ascii-table-display"></div>
+				<div class="ascii-search-grid">
+					<div class="input-wrapper">
+						<label>Character</label>
+						<input type="text" id="ascii-search-char" placeholder="A" maxlength="3" oninput="searchASCII()">
+					</div>
+					<div class="input-wrapper">
+						<label>Hex</label>
+						<input type="text" id="ascii-search-hex" placeholder="41" maxlength="2" oninput="searchASCII()">
+					</div>
+					<div class="input-wrapper">
+						<label>Decimal</label>
+						<input type="text" id="ascii-search-dec" placeholder="65" maxlength="3" oninput="searchASCII()">
+					</div>
+				</div>
+				<div class="ascii-tables-grid" id="ascii-table-display"></div>
 			</div>
 		</div>

 		<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
 		<script src="encryption.js"></script>
 		<script>
+			let authTableClickedCell = null;
+
 			function save() {
 				window.open('/code-book-print.html', '_blank');
 			}
@@ -507,7 +786,7 @@

 			function updateHOTP() {
 				const key = document.getElementById('master-key').value;
-				const nonce = document.getElementById('hotp-nonce').value.padStart(3, '0');
+				const nonce = document.getElementById('hotp-nonce').value.toUpperCase().padStart(2, '0');
 				if (!key) return;

 				const code = generateHOTP(key, nonce);
@@ -515,7 +794,8 @@
 			}

 			function randomHOTPNonce() {
-				const nonce = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
+				const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+				const nonce = chars[Math.floor(Math.random() * chars.length)] + chars[Math.floor(Math.random() * chars.length)];
 				document.getElementById('hotp-nonce').value = nonce;
 				updateHOTP();
 			}
@@ -546,6 +826,7 @@
 				html += '</table>';

 				document.getElementById('auth-table-display').innerHTML = html;
+				authTableClickedCell = null;

 				// Add hover listeners
 				const authTable = document.querySelector('#auth-table-display table');
@@ -553,6 +834,8 @@

 				cells.forEach(cell => {
 					cell.addEventListener('mouseenter', function() {
+						if (authTableClickedCell) return;
+
 						const col = this.getAttribute('data-col');
 						const row = this.getAttribute('data-row');

@@ -561,8 +844,27 @@
 					});

 					cell.addEventListener('mouseleave', function() {
+						if (authTableClickedCell) return;
+
 						authTable.querySelectorAll('.highlight').forEach(el => el.classList.remove('highlight'));
 					});
+
+					cell.addEventListener('click', function() {
+						const col = this.getAttribute('data-col');
+						const row = this.getAttribute('data-row');
+
+						// If clicking the same cell, unclick it
+						if (authTableClickedCell && authTableClickedCell.col === col && authTableClickedCell.row === row) {
+							authTable.querySelectorAll('.highlight').forEach(el => el.classList.remove('highlight'));
+							authTableClickedCell = null;
+						} else {
+							// Click new cell
+							authTable.querySelectorAll('.highlight').forEach(el => el.classList.remove('highlight'));
+							authTable.querySelectorAll(`[data-col="${col}"]`).forEach(el => el.classList.add('highlight'));
+							authTable.querySelectorAll(`[data-row="${row}"]`).forEach(el => el.classList.add('highlight'));
+							authTableClickedCell = { col, row };
+						}
+					});
 				});
 			}

@@ -613,22 +915,66 @@
 				document.getElementById('message-output').value = decoded;
 			}

+			function copyOutput() {
+				const output = document.getElementById('message-output');
+				output.select();
+				document.execCommand('copy');
+
+				const btn = event.currentTarget;
+				const originalHTML = btn.innerHTML;
+				btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>';
+				setTimeout(() => {
+					btn.innerHTML = originalHTML;
+				}, 1500);
+			}
+
+			function searchASCII() {
+				const charQuery = document.getElementById('ascii-search-char').value.toUpperCase();
+				const hexQuery = document.getElementById('ascii-search-hex').value.toUpperCase();
+				const decQuery = document.getElementById('ascii-search-dec').value;
+
+				const tables = document.querySelectorAll('#ascii-table-display .ascii-table table');
+
+				tables.forEach(table => {
+					const rows = table.querySelectorAll('tr');
+					rows.forEach((row, index) => {
+						if (index === 0) return; // Skip header
+
+						row.classList.remove('search-match');
+
+						if (!charQuery && !hexQuery && !decQuery) return;
+
+						const cells = row.querySelectorAll('td');
+						const char = cells[0]?.textContent || '';
+						const hex = cells[1]?.textContent || '';
+						const dec = cells[2]?.textContent || '';
+
+						let match = false;
+
+						if (charQuery && char.toUpperCase().includes(charQuery)) match = true;
+						if (hexQuery && hex.includes(hexQuery)) match = true;
+						if (decQuery && dec.includes(decQuery)) match = true;
+
+						if (match) {
+							row.classList.add('search-match');
+						}
+					});
+				});
+			}
+
 			function renderASCIITable() {
-				const cols = 16;
-				const rows = 8;
+				let html = '';

-				let html = '<table>';
-				html += '<tr><th>Dec</th><th>Hex</th><th>Char</th><th>Dec</th><th>Hex</th><th>Char</th><th>Dec</th><th>Hex</th><th>Char</th><th>Dec</th><th>Hex</th><th>Char</th></tr>';
+				for (let col = 0; col < 4; col++) {
+					html += '<div class="ascii-table"><table>';
+					html += '<tr><th>Char</th><th>Hex</th><th>Dec</th></tr>';

-				for (let row = 0; row < 32; row++) {
-					html += '<tr>';
-					for (let col = 0; col < 4; col++) {
+					for (let row = 0; row < 32; row++) {
 						const code = row + (col * 32);
 						if (code < 128) {
 							const hex = code.toString(16).toUpperCase().padStart(2, '0');
 							let char = String.fromCharCode(code);

-							// Handle non-printable characters
 							if (code < 32) {
 								const controlChars = ['NUL','SOH','STX','ETX','EOT','ENQ','ACK','BEL','BS','TAB','LF','VT','FF','CR','SO','SI',
 									'DLE','DC1','DC2','DC3','DC4','NAK','SYN','ETB','CAN','EM','SUB','ESC','FS','GS','RS','US'];
@@ -639,14 +985,50 @@
 								char = 'DEL';
 							}

-							html += `<td>${code}</td><td>${hex}</td><td style="font-weight: bolder">${char}</td>`;
+							html += `<tr><td style="font-weight: bolder">${char}</td><td>${hex}</td><td>${code}</td></tr>`;
 						}
 					}
-					html += '</tr>';
+
+					html += '</table></div>';
 				}

-				html += '</table>';
 				document.getElementById('ascii-table-display').innerHTML = html;
+
+				// Add click/hover listeners for ASCII tables
+				const asciiTables = document.querySelectorAll('#ascii-table-display .ascii-table table');
+				asciiTables.forEach(table => {
+					const rows = table.querySelectorAll('tr');
+
+					rows.forEach((row, index) => {
+						if (index === 0) return; // Skip header
+
+						row.addEventListener('mouseenter', function() {
+							if (!this.classList.contains('highlight')) {
+								this.style.background = 'rgba(255, 255, 255, 0.1)';
+							}
+						});
+
+						row.addEventListener('mouseleave', function() {
+							if (!this.classList.contains('highlight')) {
+								this.style.background = '';
+							}
+						});
+
+						row.addEventListener('click', function() {
+							// Toggle highlight
+							const isHighlighted = this.classList.contains('highlight');
+
+							// Remove all highlights from all ASCII tables
+							asciiTables.forEach(t => {
+								t.querySelectorAll('.highlight').forEach(r => r.classList.remove('highlight'));
+							});
+
+							if (!isHighlighted) {
+								this.classList.add('highlight');
+							}
+						});
+					});
+				});
 			}

 			function initializeTools() {
@@ -657,10 +1039,8 @@
 				}
 			}

-			// Event listeners
 			document.getElementById('master-key').addEventListener('input', saveMasterKey);

-			// Initialize on load
 			loadMasterKey();
 			populateTableSelect();
 			renderASCIITable();