ztimson/mrs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added new codebook page

Browse Source
This commit is contained in:
Zakary Timson
2026-04-06 02:49:14 -04:00
parent 32a690d85b
commit 3cb34a226a
31 changed files with 4076 additions and 4067 deletions
Download Patch File Download Diff File Expand all files Collapse all files

669
client/public/code-book.html Normal file
View File

@@ -0,0 +1,669 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Code Book</title>
<link rel="icon" href="/favicon.png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
min-height: 100vh;
color: #fff;
overflow-x: hidden;
}
hr {
border: 1px solid rgba(255, 255, 255, 0.2);
}
.header {
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(10px);
padding: 1.5rem 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: sticky;
top: 0;
z-index: 100;
}
.header-content {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-section {
display: flex;
align-items: center;
gap: 1rem;
}
.logo-section img {
height: 3rem;
width: auto;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.05rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.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;
}
.key-input-group {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.input-wrapper {
flex: 1;
}
label {
display: block;
color: #94a3b8;
font-size: 0.85rem;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05rem;
}
input[type="text"],
input[type="number"],
select {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 0.75rem;
color: #fff;
font-size: 1rem;
font-family: 'Courier New', monospace;
}
select {
padding: 0.75rem 2.5rem 0.75rem 0.75rem;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
cursor: pointer;
}
select option {
background: #1e293b;
color: #fff;
}
input::placeholder {
color: #64748b;
}
button {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 0.75rem 1.5rem;
color: #fff;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
}
button:hover {
background: rgba(255, 255, 255, 0.15);
}
button:active {
transform: scale(0.95);
}
button.danger {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.3);
}
button.danger:hover {
background: rgba(239, 68, 68, 0.3);
}
button.save {
background: rgba(16, 185, 129, 0.1);
border-color: rgba(16, 185, 129, 0.3);
}
button.save:hover {
background: rgba(16, 185, 129, 0.3);
}
.tool-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;
}
.tool-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.tool-description {
color: #94a3b8;
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
.hotp-row {
display: flex;
gap: 1rem;
align-items: center;
}
.hotp-row button {
flex: 0 0 auto;
}
.hotp-row input,
.hotp-code {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 0.75rem;
color: #fff;
font-size: 1rem;
font-family: 'Courier New', monospace;
text-align: center;
}
.hotp-code {
background: rgba(16, 185, 129, 0.1);
border-color: rgba(16, 185, 129, 0.3);
}
.auth-table {
font-family: 'Courier New', monospace;
font-size: 0.9rem;
margin: 1rem 0;
width: 100%;
}
.auth-table table {
border-collapse: collapse;
width: 100%;
}
.auth-table th,
.auth-table td {
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.5rem;
text-align: center;
transition: background-color 0.15s ease;
}
.auth-table th {
background: rgba(255, 255, 255, 0.1);
font-weight: 600;
}
.auth-table td.highlight {
background: rgba(255, 255, 255, 0.15);
}
.auth-table th.highlight {
background: rgba(255, 255, 255, 0.2);
}
.ascii-table {
font-family: 'Courier New', monospace;
font-size: 0.85rem;
margin: 1rem 0;
width: 100%;
}
.ascii-table table {
border-collapse: collapse;
width: 100%;
}
.ascii-table th,
.ascii-table td {
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.4rem;
text-align: center;
}
.ascii-table th {
background: rgba(255, 255, 255, 0.1);
font-weight: 600;
}
.pad-list {
font-family: 'Courier New', monospace;
font-size: 0.95rem;
line-height: 1.8;
}
.pad-item {
margin: 0.5rem 0;
}
textarea {
width: 100%;
min-height: 100px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 0.75rem;
color: #fff;
font-size: 1rem;
font-family: 'Courier New', monospace;
resize: vertical;
}
.button-group {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.checkbox-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
}
.checkbox-wrapper input[type="checkbox"] {
width: auto;
cursor: pointer;
}
.checkbox-wrapper label {
margin: 0;
cursor: pointer;
text-transform: none;
}
.example-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
padding: 1rem;
margin: 0.75rem 0;
font-family: 'Courier New', monospace;
}
</style>
</head>
<body>
<div class="header">
<div class="header-content">
<div class="logo-section">
<img src="/favicon.png" alt="Logo">
<div class="logo">ENCRYPTION TOOLS</div>
</div>
</div>
</div>
<div class="container">
<div class="key-section">
<div class="input-wrapper">
<label>Encryption Key</label>
<div class="key-input-group">
<input type="text" id="master-key" placeholder="Enter encryption key">
<button onclick="generateNewKey()" class="danger">Random</button>
<button onclick="save()" class="save">Save</button>
</div>
</div>
</div>
<!-- HOTP Section -->
<div class="tool-section">
<div class="tool-title">One Time Password (HOTP)</div>
<details style="margin: 1rem 0; color: #888;">
<summary>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>
<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>
</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>
</div>
<!-- Auth Table Section -->
<div class="tool-section">
<div class="tool-title">Authentication Tables</div>
<details style="margin: 1rem 0; color: #888;">
<summary>Description</summary>
<div style="padding-top: 0.5rem;">
<p>Challenge-response tables for authentication.</p>
<div style="margin-top: 0.75rem;">
<strong>Example:</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>
</div>
</div>
</div>
</details>
<div>
<label>Auth Table</label>
<select id="table-select" onchange="renderAuthTable()"></select>
</div>
<div class="auth-table" id="auth-table-display"></div>
</div>
<!-- Message Encoder Section -->
<div class="tool-section">
<div class="tool-title">One-Time Pad</div>
<details style="margin: 1rem 0; color: #888;">
<summary>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>
<div style="margin-top: 0.75rem;">
<strong>Encoding:</strong>
<div class="example-box">
Message: "HI"<br>
Pad Key: 12345<br>
Cipher: 42 85 28 71 14 ...<br><br>
H = ASCII 72 → 72 + 42 = 114 → Hex 72<br>
I = ASCII 73 → 73 + 85 = 158 → Hex 9E<br><br>
Encoded: 729E
</div>
</div>
<div style="margin-top: 0.75rem;">
<strong>Decoding:</strong>
<div class="example-box">
Encoded: 729E<br>
Pad Key: 12345<br>
Cipher: 42 85 28 71 14 ...<br><br>
72 (Hex) = 114 → 114 - 42 = 72 → ASCII 'H'<br>
9E (Hex) = 158 → 158 - 85 = 73 → ASCII 'I'<br><br>
Decoded: "HI"
</div>
</div>
</div>
</details>
<div class="input-wrapper">
<div class="key-input-group">
<button onclick="randomPadKey()">Random</button>
<input type="text" id="pad-key" placeholder="00000" maxlength="5" oninput="updatePad()" style="max-width: 100px; text-align: center;">
<div class="checkbox-wrapper">
<input type="checkbox" id="stream-cipher" checked>
<label for="stream-cipher">Stream Cipher</label>
</div>
</div>
</div>
<div class="pad-list" id="pad-display"></div>
<hr>
<div style="margin-top: 1.5rem;">
<textarea id="message-input" placeholder="Input"></textarea>
<div class="button-group">
<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>
</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>
</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>
function save() {
window.open('/code-book-print.html', '_blank');
}
function loadMasterKey() {
const key = localStorage.getItem('encryption_key');
if (key) {
document.getElementById('master-key').value = key;
initializeTools();
}
}
function saveMasterKey() {
const key = document.getElementById('master-key').value;
if (key) {
localStorage.setItem('encryption_key', key);
initializeTools();
}
}
function generateNewKey() {
if (confirm('⚠️ This will replace your current encryption key. Its recommended you back it up before you continue.')) {
const key = CryptoJS.lib.WordArray.random(32).toString(CryptoJS.enc.Hex);
document.getElementById('master-key').value = key;
saveMasterKey();
}
}
function updateHOTP() {
const key = document.getElementById('master-key').value;
const nonce = document.getElementById('hotp-nonce').value.padStart(3, '0');
if (!key) return;
const code = generateHOTP(key, nonce);
document.getElementById('hotp-display').textContent = code;
}
function randomHOTPNonce() {
const nonce = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
document.getElementById('hotp-nonce').value = nonce;
updateHOTP();
}
function renderAuthTable() {
const key = document.getElementById('master-key').value;
if (!key) return;
const tableIndex = parseInt(document.getElementById('table-select').value);
const table = generateAuthTable(key, tableIndex);
const rows = 'NOPQRSTUVWXYZ'.split('');
const cols = 'ABCDEFGHIJKLM'.split('');
let html = '<table>';
html += '<tr><th></th>';
for (let col of cols) {
html += `<th class="col-header" data-col="${col}">${col}</th>`;
}
html += '</tr>';
for (let i = 0; i < rows.length; i++) {
html += `<tr><th class="row-header" data-row="${rows[i]}">${rows[i]}</th>`;
for (let j = 0; j < cols.length; j++) {
html += `<td data-col="${cols[j]}" data-row="${rows[i]}">${table[i][j]}</td>`;
}
html += '</tr>';
}
html += '</table>';
document.getElementById('auth-table-display').innerHTML = html;
// Add hover listeners
const authTable = document.querySelector('#auth-table-display table');
const cells = authTable.querySelectorAll('td');
cells.forEach(cell => {
cell.addEventListener('mouseenter', function() {
const col = this.getAttribute('data-col');
const row = this.getAttribute('data-row');
authTable.querySelectorAll(`[data-col="${col}"]`).forEach(el => el.classList.add('highlight'));
authTable.querySelectorAll(`[data-row="${row}"]`).forEach(el => el.classList.add('highlight'));
});
cell.addEventListener('mouseleave', function() {
authTable.querySelectorAll('.highlight').forEach(el => el.classList.remove('highlight'));
});
});
}
function populateTableSelect() {
const select = document.getElementById('table-select');
select.innerHTML = '';
for (let i = 0; i < 26; i++) {
const option = document.createElement('option');
option.value = i;
option.textContent = PHONETIC[i];
select.appendChild(option);
}
}
function updatePad() {
const key = document.getElementById('master-key').value;
const padKey = document.getElementById('pad-key').value.padStart(5, '0');
if (!key) return;
const pad = generatePadDisplay(key, padKey);
document.getElementById('pad-display').innerHTML = `<div class="pad-item"><strong>Cipher:</strong> ${pad}</div>`;
}
function randomPadKey() {
const key = Math.floor(Math.random() * 100000).toString().padStart(5, '0');
document.getElementById('pad-key').value = key;
updatePad();
}
function handleEncode() {
const message = document.getElementById('message-input').value;
const key = document.getElementById('master-key').value;
const padKey = document.getElementById('pad-key').value.padStart(5, '0');
const useStream = document.getElementById('stream-cipher').checked;
if (!key || !message) return;
const encoded = encodeMessage(message, key, padKey, useStream);
document.getElementById('message-output').value = encoded;
}
function handleDecode() {
const encoded = document.getElementById('message-input').value.replace(/\s/g, '');
const key = document.getElementById('master-key').value;
const padKey = document.getElementById('pad-key').value.padStart(5, '0');
const useStream = document.getElementById('stream-cipher').checked;
if (!key || !encoded) return;
const decoded = decodeMessage(encoded, key, padKey, useStream);
document.getElementById('message-output').value = decoded;
}
function renderASCIITable() {
const cols = 16;
const rows = 8;
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 row = 0; row < 32; row++) {
html += '<tr>';
for (let col = 0; col < 4; col++) {
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'];
char = controlChars[code];
} else if (code === 32) {
char = 'SP';
} else if (code === 127) {
char = 'DEL';
}
html += `<td>${code}</td><td>${hex}</td><td style="font-weight: bolder">${char}</td>`;
}
}
html += '</tr>';
}
html += '</table>';
document.getElementById('ascii-table-display').innerHTML = html;
}
function initializeTools() {
updateHOTP();
renderAuthTable();
if (document.getElementById('pad-key').value) {
updatePad();
}
}
// Event listeners
document.getElementById('master-key').addEventListener('input', saveMasterKey);
// Initialize on load
loadMasterKey();
populateTableSelect();
renderASCIITable();
</script>
</body>
</html>