1050 lines
27 KiB
HTML
1050 lines
27 KiB
HTML
<!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: 1rem;
|
|
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: 2.5rem;
|
|
width: auto;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05rem;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.key-section {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.key-input-group {
|
|
display: flex;
|
|
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 {
|
|
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;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
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: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.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: 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 {
|
|
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;
|
|
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.75rem;
|
|
margin: 1rem 0;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.auth-table table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
min-width: 500px;
|
|
}
|
|
|
|
.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;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.auth-table th {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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.75rem;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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.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;
|
|
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: 0.9rem;
|
|
font-family: 'Courier New', monospace;
|
|
resize: vertical;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.checkbox-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.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;
|
|
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>
|
|
<body>
|
|
<div class="header">
|
|
<div class="header-content">
|
|
<div class="logo-section">
|
|
<img src="/favicon.png" alt="Logo">
|
|
<div class="logo">CODE BOOK</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="key-section">
|
|
<div class="input-wrapper">
|
|
<label>Encryption Key</label>
|
|
<div class="key-input-group">
|
|
<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>
|
|
</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 style="font-weight: bolder">Description</summary>
|
|
|
|
<div style="padding-top: 0.5rem;">
|
|
<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>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>
|
|
<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>
|
|
|
|
<!-- Auth Table Section -->
|
|
<div class="tool-section">
|
|
<div class="tool-title">Authentication Tables</div>
|
|
<details style="margin: 1rem 0; color: #888;">
|
|
<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>Challenge-Response:</strong>
|
|
<div class="example-box">
|
|
<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>
|
|
</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 style="font-weight: bolder">Description</summary>
|
|
|
|
<div style="padding-top: 0.5rem;">
|
|
<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 (with overflow example):</strong>
|
|
<div class="example-box">
|
|
<pre>Key: 12345
|
|
234 967 890 112 314...
|
|
|
|
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 (with negative handling):</strong>
|
|
<div class="example-box">
|
|
<pre>Key: 12345
|
|
234 967 890 112 314...
|
|
|
|
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="pad-controls">
|
|
<button onclick="randomPadKey()">Random</button>
|
|
<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>
|
|
</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>
|
|
<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-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');
|
|
}
|
|
|
|
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.toUpperCase().padStart(2, '0');
|
|
if (!key) return;
|
|
|
|
const code = generateHOTP(key, nonce);
|
|
document.getElementById('hotp-display').textContent = code;
|
|
}
|
|
|
|
function randomHOTPNonce() {
|
|
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();
|
|
}
|
|
|
|
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;
|
|
authTableClickedCell = null;
|
|
|
|
// Add hover listeners
|
|
const authTable = document.querySelector('#auth-table-display table');
|
|
const cells = authTable.querySelectorAll('td');
|
|
|
|
cells.forEach(cell => {
|
|
cell.addEventListener('mouseenter', function() {
|
|
if (authTableClickedCell) return;
|
|
|
|
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() {
|
|
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 };
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
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 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() {
|
|
let html = '';
|
|
|
|
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++) {
|
|
const code = row + (col * 32);
|
|
if (code < 128) {
|
|
const hex = code.toString(16).toUpperCase().padStart(2, '0');
|
|
let char = String.fromCharCode(code);
|
|
|
|
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 += `<tr><td style="font-weight: bolder">${char}</td><td>${hex}</td><td>${code}</td></tr>`;
|
|
}
|
|
}
|
|
|
|
html += '</table></div>';
|
|
}
|
|
|
|
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() {
|
|
updateHOTP();
|
|
renderAuthTable();
|
|
if (document.getElementById('pad-key').value) {
|
|
updatePad();
|
|
}
|
|
}
|
|
|
|
document.getElementById('master-key').addEventListener('input', saveMasterKey);
|
|
|
|
loadMasterKey();
|
|
populateTableSelect();
|
|
renderASCIITable();
|
|
</script>
|
|
</body>
|
|
</html>
|