Added new codebook page

client/public/code-book-print.html

@@ -127,11 +127,11 @@
 		<!-- Page 1: Key & ASCII -->
 		<div>
 			<div class="key-section">
-				<h2>Encryption Key</h2>
+				<h2 style="margin-top: 0;">Encryption Key</h2>
 				<div class="key-value" id="print-key"></div>
 			</div>
 
-			<h2>ASCII Reference Table</h2>
+			<h1>ASCII REFERENCE TABLE</h1>
 			<div id="ascii-print"></div>
 		</div>
 
@@ -162,12 +162,13 @@
 			}
 
 			function renderASCIITable() {
-				let html = '<table class="ascii-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>';
+				let html = '<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;">';
 
-				for (let row = 0; row < 32; row++) {
-					html += '<tr>';
-					for (let col = 0; col < 4; col++) {
+				for (let col = 0; col < 4; col++) {
+					html += '<table class="ascii-table">';
+					html += '<tr><th>Char</th><th>Hex</th><th>Dec</th></tr>';
+
+					for (let row = 0; row < 32; row++) {
 						const code = row + (col * 32);
 						if (code < 128) {
 							const hex = code.toString(16).toUpperCase().padStart(2, '0');
@@ -183,26 +184,36 @@
 								char = 'DEL';
 							}
 
-							html += `<td>${code}</td><td>${hex}</td><td><b>${char}</b></td>`;
+							html += `<tr><td><b>${char}</b></td><td>${hex}</td><td>${code}</td></tr>`;
 						}
 					}
-					html += '</tr>';
+
+					html += '</table>';
 				}
 
-				html += '</table>';
+				html += '</div>';
 				document.getElementById('ascii-print').innerHTML = html;
 			}
 
 			function renderOTPPairs(key) {
-				const columns = [[], [], [], [], []];
-
+				const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+				const pairs = [];
+				const used = new Set();
 				for (let i = 0; i < 250; i++) {
-					const nonce = i.toString().padStart(3, '0');
-					const code = generateHOTP(key, nonce);
-					const pair = `${nonce} ${code}`;
-					columns[Math.floor(i / 50)].push(pair);
-				}
+					let nonce;
+					do {
+						nonce = chars[Math.floor(Math.random() * chars.length)] + chars[Math.floor(Math.random() * chars.length)];
+					} while (used.has(nonce));
+					used.add(nonce);
 
+					const code = generateHOTP(key, nonce);
+					pairs.push(`${nonce} ${code}`);
+				}
+				pairs.sort();
+				const columns = [[], [], [], [], []];
+				for (let i = 0; i < pairs.length; i++) {
+					columns[Math.floor(i / 50)].push(pairs[i]);
+				}
 				let html = '';
 				for (let col of columns) {
 					html += '<div class="otp-column">';
@@ -211,7 +222,6 @@
 					}
 					html += '</div>';
 				}
-
 				document.getElementById('otp-grid').innerHTML = html;
 			}
 
@@ -219,10 +229,8 @@
 				let html = '';
 				const rows = 'NOPQRSTUVWXYZ'.split('');
 				const cols = 'ABCDEFGHIJKLM'.split('');
-
 				for (let tableIndex = 0; tableIndex < 26; tableIndex++) {
 					const table = generateAuthTable(key, tableIndex);
-
 					html += '<div class="auth-table-wrapper">';
 					html += `<h3>${PHONETIC[tableIndex]}</h3>`;
 					html += '<table>';
@@ -231,7 +239,6 @@
 						html += `<th>${col}</th>`;
 					}
 					html += '</tr>';
-
 					for (let i = 0; i < rows.length; i++) {
 						html += `<tr><th>${rows[i]}</th>`;
 						for (let j = 0; j < cols.length; j++) {
@@ -242,23 +249,19 @@
 					html += '</table>';
 					html += '</div>';
 				}
-
 				document.getElementById('auth-tables').innerHTML = html;
 			}
 
 			function renderPadKeys(key) {
 				let html = '';
-
-				for (let i = 0; i < 50; i++) {
+				for (let i = 0; i < 100; i++) {
 					const padKey = (i * 1000).toString().padStart(5, '0');
 					const cipher = generatePadDisplay(key, padKey);
-
 					html += '<div class="pad-item">';
 					html += `<div><b>Key: ${padKey}</b></div>`;
 					html += `<div class="pad-cipher">${cipher}</div>`;
 					html += '</div>';
 				}
-
 				document.getElementById('pad-list').innerHTML = html;
 			}
 
@@ -273,11 +276,7 @@
 				renderOTPPairs(key);
 				renderAuthTables(key);
 				renderPadKeys(key);
-
-				// Auto-print after everything loads
-				setTimeout(() => {
-					window.print();
-				}, 500);
+				setTimeout(() => {window.print();}, 500);
 			}
 		</script>
 	</body>