Customizable home screen

2026-04-06 16:47:35 -04:00
parent b245ae63e6
commit 776c63a1a9
3 changed files with 1741 additions and 808 deletions
--- a/client/public/code-book.html
+++ b/client/public/code-book.html
@@ -239,12 +239,16 @@
 				border-color: rgba(16, 185, 129, 0.3);
 			}

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

 			.auth-table table {
@@ -263,12 +267,26 @@
 			}

 			.auth-table th {
-				background: rgba(255, 255, 255, 0.1);
+				background: #465570;
 				font-weight: 600;
 			}

-			.auth-table td.highlight,
-			.auth-table th.highlight {
+			.auth-table th.row-header {
+				position: sticky;
+				left: 0;
+				z-index: 10;
+				background: #465570;
+			}
+
+			.auth-table th.row-header.highlight {
+				background: rgba(255, 255, 255, 0.3);
+			}
+
+			.auth-table th.col-header.highlight {
+				background: rgba(255, 255, 255, 0.3);
+			}
+
+			.auth-table td.highlight {
 				background: rgba(255, 255, 255, 0.25);
 			}

@@ -478,16 +496,24 @@
 				}

 				.hotp-row {
-					flex-wrap: wrap;
+					flex-direction: column;
 				}

 				.hotp-row button {
-					flex: 1 1 100%;
+					width: 100%;
+					order: 2;
 				}

 				.hotp-challenge-response {
 					flex: 1 1 100%;
+					width: 100%;
 					flex-wrap: nowrap;
+					order: 1;
+				}
+
+				.hotp-challenge-response > div {
+					flex: 1;
+					min-width: 0;
 				}

 				.ascii-search-grid {
@@ -555,6 +581,20 @@
 				.ascii-tables-grid {
 					grid-template-columns: repeat(4, 1fr);
 				}
+
+				.hotp-row {
+					flex-direction: row;
+				}
+
+				.hotp-row button {
+					width: auto;
+					order: 0;
+				}
+
+				.hotp-challenge-response {
+					order: 0;
+					width: auto;
+				}
 			}

 			@media (min-width: 1200px) {
@@ -569,14 +609,7 @@
 		</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>
+		<notification-bar title="CODE BOOK"></notification-bar>

 		<div class="container">
 			<div class="key-section">
@@ -656,7 +689,9 @@
 					<label>Auth Table</label>
 					<select id="table-select" onchange="renderAuthTable()"></select>
 				</div>
-				<div class="auth-table" id="auth-table-display"></div>
+				<div class="auth-table-wrapper">
+					<div class="auth-table" id="auth-table-display"></div>
+				</div>
 			</div>

 			<!-- Message Encoder Section -->
@@ -751,6 +786,7 @@ Message:     H     E     L     L     O</pre>
 			</div>
 		</div>

+		<script src="/notification-bar.js"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
 		<script src="encryption.js"></script>
 		<script>
@@ -810,7 +846,7 @@ Message:     H     E     L     L     O</pre>
 				const cols = 'ABCDEFGHIJKLM'.split('');

 				let html = '<table>';
-				html += '<tr><th></th>';
+				html += '<tr><th class="row-header"></th>';
 				for (let col of cols) {
 					html += `<th class="col-header" data-col="${col}">${col}</th>`;
 				}
--- a/client/public/index.html
+++ b/client/public/index.html
--- a/client/public/notification-bar.js
+++ b/client/public/notification-bar.js