Customizable home screen
This commit is contained in:
@@ -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,7 +689,9 @@
|
|||||||
<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" id="auth-table-display"></div>
|
<div class="auth-table-wrapper">
|
||||||
|
<div class="auth-table" id="auth-table-display"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Message Encoder Section -->
|
<!-- Message Encoder 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
1041
client/public/notification-bar.js
Normal file
1041
client/public/notification-bar.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user