Customizable home screen

This commit is contained in:
2026-04-06 16:47:35 -04:00
parent b245ae63e6
commit 776c63a1a9
3 changed files with 1741 additions and 808 deletions

View File

@@ -239,12 +239,16 @@
border-color: rgba(16, 185, 129, 0.3); border-color: rgba(16, 185, 129, 0.3);
} }
.auth-table-wrapper {
overflow-x: auto;
position: relative;
}
.auth-table { .auth-table {
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
font-size: 0.75rem; font-size: 0.75rem;
margin: 1rem 0; margin: 1rem 0;
width: 100%; width: 100%;
overflow-x: auto;
} }
.auth-table table { .auth-table table {
@@ -263,12 +267,26 @@
} }
.auth-table th { .auth-table th {
background: rgba(255, 255, 255, 0.1); background: #465570;
font-weight: 600; font-weight: 600;
} }
.auth-table td.highlight, .auth-table th.row-header {
.auth-table th.highlight { 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); background: rgba(255, 255, 255, 0.25);
} }
@@ -478,16 +496,24 @@
} }
.hotp-row { .hotp-row {
flex-wrap: wrap; flex-direction: column;
} }
.hotp-row button { .hotp-row button {
flex: 1 1 100%; width: 100%;
order: 2;
} }
.hotp-challenge-response { .hotp-challenge-response {
flex: 1 1 100%; flex: 1 1 100%;
width: 100%;
flex-wrap: nowrap; flex-wrap: nowrap;
order: 1;
}
.hotp-challenge-response > div {
flex: 1;
min-width: 0;
} }
.ascii-search-grid { .ascii-search-grid {
@@ -555,6 +581,20 @@
.ascii-tables-grid { .ascii-tables-grid {
grid-template-columns: repeat(4, 1fr); 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) { @media (min-width: 1200px) {
@@ -569,14 +609,7 @@
</style> </style>
</head> </head>
<body> <body>
<div class="header"> <notification-bar title="CODE BOOK"></notification-bar>
<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="container">
<div class="key-section"> <div class="key-section">
@@ -656,8 +689,10 @@
<label>Auth Table</label> <label>Auth Table</label>
<select id="table-select" onchange="renderAuthTable()"></select> <select id="table-select" onchange="renderAuthTable()"></select>
</div> </div>
<div class="auth-table-wrapper">
<div class="auth-table" id="auth-table-display"></div> <div class="auth-table" id="auth-table-display"></div>
</div> </div>
</div>
<!-- Message Encoder Section --> <!-- Message Encoder Section -->
<div class="tool-section"> <div class="tool-section">
@@ -751,6 +786,7 @@ Message: H E L L O</pre>
</div> </div>
</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="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script src="encryption.js"></script> <script src="encryption.js"></script>
<script> <script>
@@ -810,7 +846,7 @@ Message: H E L L O</pre>
const cols = 'ABCDEFGHIJKLM'.split(''); const cols = 'ABCDEFGHIJKLM'.split('');
let html = '<table>'; let html = '<table>';
html += '<tr><th></th>'; html += '<tr><th class="row-header"></th>';
for (let col of cols) { for (let col of cols) {
html += `<th class="col-header" data-col="${col}">${col}</th>`; html += `<th class="col-header" data-col="${col}">${col}</th>`;
} }

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff