@vitronai/alethia 0.8.1 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -3
- package/demo/admin-panel.html +326 -36
- package/demo/agent-oversight.html +354 -49
- package/demo/claude-code-app.html +688 -94
- package/demo/crypto-readiness.html +611 -177
- package/demo/ea1-stress-test.html +262 -34
- package/demo/ecommerce.html +1116 -0
- package/demo/financial-dashboard.html +298 -34
- package/demo/incident-response.html +636 -196
- package/demo/intentional-failures.html +157 -0
- package/demo/nist-compliance.html +458 -102
- package/demo/threat-intel.html +310 -51
- package/demo/wcag-audit.html +495 -84
- package/dist/index.js +27 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,190 +2,623 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
|
-
<title>Post-Quantum Cryptographic Readiness
|
|
5
|
+
<title>Post-Quantum Cryptographic Readiness</title>
|
|
6
6
|
<style>
|
|
7
|
+
:root {
|
|
8
|
+
--bg-0: #060914;
|
|
9
|
+
--bg-1: #0d1326;
|
|
10
|
+
--bg-2: #131a30;
|
|
11
|
+
--bg-3: #1a2240;
|
|
12
|
+
--line: #1f2a47;
|
|
13
|
+
--line-soft: #182039;
|
|
14
|
+
--ink: #e6ecf5;
|
|
15
|
+
--ink-muted: #9aa6c2;
|
|
16
|
+
--ink-faint: #677295;
|
|
17
|
+
--ink-dim: #4a5577;
|
|
18
|
+
--cyan: #67e8f9;
|
|
19
|
+
--cyan-strong: #22d3ee;
|
|
20
|
+
--cyan-soft: rgba(103,232,249,.12);
|
|
21
|
+
--violet: #a78bfa;
|
|
22
|
+
--violet-soft: rgba(167,139,250,.12);
|
|
23
|
+
--rose: #f87171;
|
|
24
|
+
--rose-soft: rgba(248,113,113,.12);
|
|
25
|
+
--amber: #fbbf24;
|
|
26
|
+
--amber-soft: rgba(251,191,36,.12);
|
|
27
|
+
--emerald: #34d399;
|
|
28
|
+
--emerald-soft: rgba(52,211,153,.12);
|
|
29
|
+
}
|
|
7
30
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
.
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
.
|
|
35
|
-
.
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
.
|
|
44
|
-
.
|
|
45
|
-
.
|
|
46
|
-
.
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
31
|
+
html { color-scheme: dark; }
|
|
32
|
+
body {
|
|
33
|
+
font-family: ui-sans-serif, -apple-system, system-ui, "Inter", sans-serif;
|
|
34
|
+
background:
|
|
35
|
+
radial-gradient(1100px 600px at 0% -10%, rgba(103,232,249,.07), transparent 55%),
|
|
36
|
+
radial-gradient(900px 500px at 105% 110%, rgba(167,139,250,.06), transparent 55%),
|
|
37
|
+
var(--bg-0);
|
|
38
|
+
background-attachment: fixed;
|
|
39
|
+
color: var(--ink);
|
|
40
|
+
min-height: 100vh;
|
|
41
|
+
-webkit-font-smoothing: antialiased;
|
|
42
|
+
letter-spacing: -.005em;
|
|
43
|
+
font-size: 13.5px;
|
|
44
|
+
}
|
|
45
|
+
.topbar {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
justify-content: space-between;
|
|
49
|
+
padding: 12px 20px;
|
|
50
|
+
border-bottom: 1px solid var(--line-soft);
|
|
51
|
+
background: rgba(6,9,20,.7);
|
|
52
|
+
backdrop-filter: saturate(140%) blur(8px);
|
|
53
|
+
position: sticky;
|
|
54
|
+
top: 0;
|
|
55
|
+
z-index: 5;
|
|
56
|
+
}
|
|
57
|
+
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
|
|
58
|
+
.brand-mark {
|
|
59
|
+
width: 26px; height: 26px;
|
|
60
|
+
border-radius: 7px;
|
|
61
|
+
background: linear-gradient(135deg, var(--cyan), var(--violet));
|
|
62
|
+
display: grid;
|
|
63
|
+
place-items: center;
|
|
64
|
+
box-shadow: 0 4px 14px rgba(103,232,249,.25), inset 0 1px 0 rgba(255,255,255,.25);
|
|
65
|
+
}
|
|
66
|
+
.brand-mark svg { color: #06121f; }
|
|
67
|
+
.brand-name { letter-spacing: -.01em; }
|
|
68
|
+
.brand-eyebrow { font-size: 11px; color: var(--ink-faint); font-weight: 500; }
|
|
69
|
+
.clearance {
|
|
70
|
+
padding: 4px 11px;
|
|
71
|
+
border-radius: 4px;
|
|
72
|
+
background: rgba(248,113,113,.16);
|
|
73
|
+
border: 1px solid rgba(248,113,113,.4);
|
|
74
|
+
color: var(--rose);
|
|
75
|
+
font-size: 11px;
|
|
76
|
+
font-weight: 700;
|
|
77
|
+
letter-spacing: .14em;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.container {
|
|
81
|
+
max-width: 1180px;
|
|
82
|
+
margin: 0 auto;
|
|
83
|
+
padding: 20px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.mandate {
|
|
87
|
+
display: flex;
|
|
88
|
+
align-items: center;
|
|
89
|
+
gap: 12px;
|
|
90
|
+
padding: 12px 16px;
|
|
91
|
+
background: linear-gradient(135deg, rgba(103,232,249,.08), rgba(167,139,250,.05));
|
|
92
|
+
border: 1px solid rgba(103,232,249,.3);
|
|
93
|
+
border-radius: 12px;
|
|
94
|
+
margin-bottom: 16px;
|
|
95
|
+
font-size: 13px;
|
|
96
|
+
color: var(--cyan);
|
|
97
|
+
}
|
|
98
|
+
.mandate-icon {
|
|
99
|
+
width: 32px; height: 32px;
|
|
100
|
+
border-radius: 8px;
|
|
101
|
+
background: var(--cyan-soft);
|
|
102
|
+
border: 1px solid rgba(103,232,249,.3);
|
|
103
|
+
display: grid;
|
|
104
|
+
place-items: center;
|
|
105
|
+
flex-shrink: 0;
|
|
106
|
+
color: var(--cyan);
|
|
107
|
+
}
|
|
108
|
+
.mandate strong { color: #fff; }
|
|
109
|
+
.mandate .pct { color: var(--amber); font-weight: 700; }
|
|
110
|
+
|
|
111
|
+
.response-banner {
|
|
112
|
+
display: none;
|
|
113
|
+
padding: 11px 14px;
|
|
114
|
+
border-radius: 10px;
|
|
115
|
+
margin-bottom: 16px;
|
|
116
|
+
font-size: 13px;
|
|
117
|
+
font-weight: 500;
|
|
118
|
+
}
|
|
55
119
|
.response-banner.visible { display: block; }
|
|
56
|
-
.
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
120
|
+
.response-ok {
|
|
121
|
+
background: var(--emerald-soft);
|
|
122
|
+
border: 1px solid rgba(52,211,153,.3);
|
|
123
|
+
color: var(--emerald);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.grid {
|
|
127
|
+
display: grid;
|
|
128
|
+
grid-template-columns: 1fr 1fr;
|
|
129
|
+
gap: 14px;
|
|
130
|
+
}
|
|
131
|
+
.panel {
|
|
132
|
+
background: var(--bg-1);
|
|
133
|
+
border: 1px solid var(--line);
|
|
134
|
+
border-radius: 12px;
|
|
135
|
+
padding: 16px;
|
|
136
|
+
box-shadow:
|
|
137
|
+
inset 0 1px 0 rgba(255,255,255,.03),
|
|
138
|
+
0 2px 6px rgba(0,0,0,.18);
|
|
139
|
+
}
|
|
140
|
+
.panel.full-width { grid-column: 1 / -1; }
|
|
141
|
+
.panel-head {
|
|
142
|
+
display: flex;
|
|
143
|
+
align-items: center;
|
|
144
|
+
justify-content: space-between;
|
|
145
|
+
margin-bottom: 14px;
|
|
146
|
+
}
|
|
147
|
+
.panel-head h2 {
|
|
148
|
+
font-size: 11.5px;
|
|
149
|
+
font-weight: 600;
|
|
150
|
+
letter-spacing: .08em;
|
|
151
|
+
text-transform: uppercase;
|
|
152
|
+
color: var(--ink-muted);
|
|
153
|
+
display: flex;
|
|
154
|
+
align-items: center;
|
|
155
|
+
gap: 7px;
|
|
156
|
+
}
|
|
157
|
+
.panel-head h2 .dot {
|
|
158
|
+
width: 6px; height: 6px;
|
|
159
|
+
border-radius: 50%;
|
|
160
|
+
background: var(--cyan);
|
|
161
|
+
box-shadow: 0 0 8px var(--cyan);
|
|
162
|
+
}
|
|
163
|
+
.panel-head .pill {
|
|
164
|
+
font-size: 10.5px;
|
|
165
|
+
padding: 2px 8px;
|
|
166
|
+
border-radius: 999px;
|
|
167
|
+
background: var(--bg-3);
|
|
168
|
+
color: var(--ink-faint);
|
|
169
|
+
font-weight: 500;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* Score ring */
|
|
173
|
+
.score-block {
|
|
174
|
+
display: flex;
|
|
175
|
+
align-items: center;
|
|
176
|
+
gap: 22px;
|
|
177
|
+
padding: 8px 6px 14px;
|
|
178
|
+
border-bottom: 1px solid var(--line-soft);
|
|
179
|
+
margin-bottom: 12px;
|
|
180
|
+
}
|
|
181
|
+
.ring-wrap { position: relative; flex-shrink: 0; }
|
|
182
|
+
.ring-wrap svg { display: block; }
|
|
183
|
+
.ring-text {
|
|
184
|
+
position: absolute;
|
|
185
|
+
inset: 0;
|
|
186
|
+
display: grid;
|
|
187
|
+
place-items: center;
|
|
188
|
+
font-size: 26px;
|
|
189
|
+
font-weight: 700;
|
|
190
|
+
color: var(--amber);
|
|
191
|
+
letter-spacing: -.02em;
|
|
192
|
+
}
|
|
193
|
+
.score-detail h3 {
|
|
194
|
+
font-size: 14px;
|
|
195
|
+
font-weight: 600;
|
|
196
|
+
color: var(--ink);
|
|
197
|
+
margin-bottom: 4px;
|
|
198
|
+
}
|
|
199
|
+
.score-detail .meta {
|
|
200
|
+
font-size: 12.5px;
|
|
201
|
+
color: var(--ink-muted);
|
|
202
|
+
line-height: 1.6;
|
|
203
|
+
}
|
|
204
|
+
.check-row {
|
|
205
|
+
display: flex;
|
|
206
|
+
justify-content: space-between;
|
|
207
|
+
align-items: center;
|
|
208
|
+
padding: 7px 0;
|
|
209
|
+
border-bottom: 1px solid var(--line-soft);
|
|
210
|
+
font-size: 12.5px;
|
|
211
|
+
}
|
|
212
|
+
.check-row:last-child { border-bottom: none; }
|
|
213
|
+
.check-name { color: var(--ink); }
|
|
214
|
+
.check-name code {
|
|
215
|
+
font-family: ui-monospace, monospace;
|
|
216
|
+
font-size: 11.5px;
|
|
217
|
+
color: var(--cyan);
|
|
218
|
+
padding: 1px 5px;
|
|
219
|
+
background: var(--cyan-soft);
|
|
220
|
+
border-radius: 3px;
|
|
221
|
+
}
|
|
222
|
+
.badge {
|
|
223
|
+
padding: 2px 9px;
|
|
224
|
+
border-radius: 999px;
|
|
225
|
+
font-size: 10.5px;
|
|
226
|
+
font-weight: 700;
|
|
227
|
+
letter-spacing: .04em;
|
|
228
|
+
text-transform: uppercase;
|
|
229
|
+
}
|
|
230
|
+
.badge-pass { background: var(--emerald-soft); color: var(--emerald); border: 1px solid rgba(52,211,153,.3); }
|
|
231
|
+
.badge-warn { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(251,191,36,.3); }
|
|
232
|
+
.badge-fail { background: var(--rose-soft); color: var(--rose); border: 1px solid rgba(248,113,113,.3); }
|
|
233
|
+
|
|
234
|
+
/* System cards */
|
|
235
|
+
.system-card {
|
|
236
|
+
padding: 12px;
|
|
237
|
+
border-radius: 10px;
|
|
238
|
+
border: 1px solid var(--line);
|
|
239
|
+
background: var(--bg-2);
|
|
240
|
+
margin-bottom: 8px;
|
|
241
|
+
transition: border-color .15s, background .15s;
|
|
242
|
+
}
|
|
243
|
+
.system-card:hover { background: var(--bg-3); border-color: #2c3960; }
|
|
244
|
+
.system-card:last-child { margin-bottom: 0; }
|
|
245
|
+
.system-card.vulnerable { border-left: 3px solid var(--rose); }
|
|
246
|
+
.system-card.partial { border-left: 3px solid var(--amber); }
|
|
247
|
+
.system-card.ready { border-left: 3px solid var(--emerald); }
|
|
248
|
+
.system-row {
|
|
249
|
+
display: flex;
|
|
250
|
+
justify-content: space-between;
|
|
251
|
+
align-items: center;
|
|
252
|
+
gap: 12px;
|
|
253
|
+
}
|
|
254
|
+
.system-name {
|
|
255
|
+
font-weight: 600;
|
|
256
|
+
color: var(--ink);
|
|
257
|
+
font-size: 13.5px;
|
|
258
|
+
letter-spacing: -.01em;
|
|
259
|
+
}
|
|
260
|
+
.system-meta {
|
|
261
|
+
font-size: 11.5px;
|
|
262
|
+
color: var(--ink-muted);
|
|
263
|
+
margin-top: 4px;
|
|
264
|
+
font-family: ui-monospace, monospace;
|
|
265
|
+
}
|
|
266
|
+
.pqc-status {
|
|
267
|
+
padding: 3px 9px;
|
|
268
|
+
border-radius: 999px;
|
|
269
|
+
font-size: 10.5px;
|
|
270
|
+
font-weight: 700;
|
|
271
|
+
letter-spacing: .05em;
|
|
272
|
+
text-transform: uppercase;
|
|
273
|
+
flex-shrink: 0;
|
|
274
|
+
}
|
|
275
|
+
.pqc-ready { background: var(--emerald-soft); color: var(--emerald); border: 1px solid rgba(52,211,153,.4); }
|
|
276
|
+
.pqc-partial { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(251,191,36,.4); }
|
|
277
|
+
.pqc-vulnerable { background: var(--rose-soft); color: var(--rose); border: 1px solid rgba(248,113,113,.4); }
|
|
278
|
+
.system-actions {
|
|
279
|
+
display: flex;
|
|
280
|
+
gap: 6px;
|
|
281
|
+
margin-top: 10px;
|
|
282
|
+
}
|
|
283
|
+
button {
|
|
284
|
+
font: inherit;
|
|
285
|
+
cursor: pointer;
|
|
286
|
+
transition: background .15s, border-color .15s, color .15s, transform .08s;
|
|
287
|
+
}
|
|
288
|
+
button:active:not([disabled]) { transform: translateY(1px); }
|
|
289
|
+
.btn {
|
|
290
|
+
padding: 5px 11px;
|
|
291
|
+
border-radius: 7px;
|
|
292
|
+
border: 1px solid var(--line);
|
|
293
|
+
background: var(--bg-2);
|
|
294
|
+
color: var(--ink-muted);
|
|
295
|
+
font-size: 11.5px;
|
|
296
|
+
font-weight: 600;
|
|
297
|
+
}
|
|
298
|
+
.btn:hover { background: var(--bg-3); border-color: #2c3960; color: var(--ink); }
|
|
299
|
+
.btn-migrate { border-color: rgba(103,232,249,.4); color: var(--cyan); }
|
|
300
|
+
.btn-migrate:hover { background: var(--cyan-soft); border-color: var(--cyan); }
|
|
301
|
+
.btn-revoke { border-color: rgba(248,113,113,.4); color: var(--rose); }
|
|
302
|
+
.btn-revoke:hover { background: var(--rose-soft); border-color: var(--rose); }
|
|
303
|
+
.btn-audit { border-color: rgba(52,211,153,.4); color: var(--emerald); }
|
|
304
|
+
.btn-audit:hover { background: var(--emerald-soft); border-color: var(--emerald); }
|
|
305
|
+
|
|
306
|
+
/* Algorithm table */
|
|
307
|
+
table.algos {
|
|
308
|
+
width: 100%;
|
|
309
|
+
border-collapse: separate;
|
|
310
|
+
border-spacing: 0;
|
|
311
|
+
font-size: 12.5px;
|
|
312
|
+
}
|
|
313
|
+
table.algos th {
|
|
314
|
+
text-align: left;
|
|
315
|
+
padding: 8px 10px;
|
|
316
|
+
color: var(--ink-faint);
|
|
317
|
+
font-size: 10.5px;
|
|
318
|
+
font-weight: 600;
|
|
319
|
+
letter-spacing: .08em;
|
|
320
|
+
text-transform: uppercase;
|
|
321
|
+
border-bottom: 1px solid var(--line);
|
|
322
|
+
}
|
|
323
|
+
table.algos td {
|
|
324
|
+
padding: 9px 10px;
|
|
325
|
+
border-bottom: 1px solid var(--line-soft);
|
|
326
|
+
color: var(--ink);
|
|
327
|
+
}
|
|
328
|
+
table.algos tr:last-child td { border-bottom: none; }
|
|
329
|
+
table.algos tr:hover td { background: rgba(255,255,255,.015); }
|
|
330
|
+
.algo-name {
|
|
331
|
+
font-family: ui-monospace, monospace;
|
|
332
|
+
font-size: 12px;
|
|
333
|
+
}
|
|
334
|
+
.algo-deprecated { color: var(--rose); text-decoration: line-through; }
|
|
335
|
+
.algo-approved { color: var(--emerald); }
|
|
336
|
+
.algo-transition { color: var(--amber); }
|
|
337
|
+
|
|
338
|
+
/* Cert cards */
|
|
339
|
+
.cert-card {
|
|
340
|
+
padding: 10px 12px;
|
|
341
|
+
border-radius: 10px;
|
|
342
|
+
border: 1px solid var(--line);
|
|
343
|
+
background: var(--bg-2);
|
|
344
|
+
margin-bottom: 8px;
|
|
345
|
+
display: flex;
|
|
346
|
+
justify-content: space-between;
|
|
347
|
+
align-items: center;
|
|
348
|
+
gap: 12px;
|
|
349
|
+
transition: border-color .15s, background .15s;
|
|
350
|
+
}
|
|
351
|
+
.cert-card:hover { background: var(--bg-3); border-color: #2c3960; }
|
|
352
|
+
.cert-card:last-child { margin-bottom: 0; }
|
|
353
|
+
.cert-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
354
|
+
.cert-cn {
|
|
355
|
+
font-family: ui-monospace, monospace;
|
|
356
|
+
font-size: 12.5px;
|
|
357
|
+
color: var(--ink);
|
|
358
|
+
}
|
|
359
|
+
.cert-algo {
|
|
360
|
+
font-size: 11px;
|
|
361
|
+
color: var(--rose);
|
|
362
|
+
text-decoration: line-through;
|
|
363
|
+
font-family: ui-monospace, monospace;
|
|
364
|
+
}
|
|
365
|
+
.cert-expiry { font-size: 10.5px; color: var(--ink-faint); }
|
|
366
|
+
|
|
367
|
+
/* Migration timeline */
|
|
368
|
+
.mt-item {
|
|
369
|
+
display: grid;
|
|
370
|
+
grid-template-columns: 90px 110px 1fr;
|
|
371
|
+
gap: 14px;
|
|
372
|
+
padding: 9px 4px;
|
|
373
|
+
align-items: center;
|
|
374
|
+
border-bottom: 1px solid var(--line-soft);
|
|
375
|
+
font-size: 12.5px;
|
|
376
|
+
}
|
|
377
|
+
.mt-item:last-child { border-bottom: none; }
|
|
378
|
+
.mt-date {
|
|
379
|
+
font-family: ui-monospace, monospace;
|
|
380
|
+
font-size: 11.5px;
|
|
381
|
+
color: var(--ink-faint);
|
|
382
|
+
}
|
|
383
|
+
.mt-text { color: var(--ink); }
|
|
384
|
+
|
|
385
|
+
/* Modal */
|
|
386
|
+
.modal {
|
|
387
|
+
display: none;
|
|
388
|
+
position: fixed;
|
|
389
|
+
inset: 0;
|
|
390
|
+
background: rgba(0,0,0,.6);
|
|
391
|
+
backdrop-filter: blur(4px);
|
|
392
|
+
z-index: 100;
|
|
393
|
+
align-items: center;
|
|
394
|
+
justify-content: center;
|
|
395
|
+
}
|
|
396
|
+
.modal.visible { display: flex; }
|
|
397
|
+
.modal-content {
|
|
398
|
+
background: var(--bg-1);
|
|
399
|
+
border: 1px solid var(--line);
|
|
400
|
+
border-top: 3px solid var(--cyan);
|
|
401
|
+
border-radius: 12px;
|
|
402
|
+
padding: 22px;
|
|
403
|
+
max-width: 480px;
|
|
404
|
+
width: 90%;
|
|
405
|
+
box-shadow: 0 20px 60px rgba(0,0,0,.6);
|
|
406
|
+
}
|
|
407
|
+
.modal-content h3 {
|
|
408
|
+
color: var(--cyan);
|
|
409
|
+
font-size: 16px;
|
|
410
|
+
font-weight: 600;
|
|
411
|
+
margin-bottom: 8px;
|
|
412
|
+
}
|
|
413
|
+
.modal-content p {
|
|
414
|
+
color: var(--ink-muted);
|
|
415
|
+
font-size: 13px;
|
|
416
|
+
line-height: 1.55;
|
|
417
|
+
margin-bottom: 16px;
|
|
418
|
+
}
|
|
419
|
+
.modal-actions {
|
|
420
|
+
display: flex;
|
|
421
|
+
gap: 8px;
|
|
422
|
+
justify-content: flex-end;
|
|
423
|
+
}
|
|
424
|
+
.btn-cancel { background: transparent; border: 1px solid var(--line); color: var(--ink-muted); padding: 7px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 600; }
|
|
425
|
+
.btn-cancel:hover { background: var(--bg-2); }
|
|
426
|
+
.btn-confirm {
|
|
427
|
+
background: var(--cyan-strong);
|
|
428
|
+
color: #032029;
|
|
429
|
+
border: 1px solid var(--cyan-strong);
|
|
430
|
+
padding: 7px 14px;
|
|
431
|
+
font-weight: 700;
|
|
432
|
+
border-radius: 7px;
|
|
433
|
+
font-size: 12.5px;
|
|
434
|
+
}
|
|
435
|
+
.btn-confirm:hover { filter: brightness(1.1); }
|
|
436
|
+
.btn-confirm.danger { background: var(--rose); color: #2a0606; border-color: var(--rose); }
|
|
61
437
|
</style>
|
|
62
438
|
</head>
|
|
63
439
|
<body>
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
<
|
|
440
|
+
|
|
441
|
+
<div class="topbar">
|
|
442
|
+
<div class="brand">
|
|
443
|
+
<div class="brand-mark">
|
|
444
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
|
|
445
|
+
</div>
|
|
446
|
+
<div>
|
|
447
|
+
<div class="brand-name">Post-Quantum Cryptographic Readiness</div>
|
|
448
|
+
<div class="brand-eyebrow">PQC-2026-047 · Crypto-team-lead</div>
|
|
449
|
+
</div>
|
|
68
450
|
</div>
|
|
69
|
-
<span class="
|
|
451
|
+
<span class="clearance">SECRET</span>
|
|
70
452
|
</div>
|
|
71
453
|
|
|
72
|
-
<div class="
|
|
73
|
-
<strong>NSM-10 Compliance Deadline: January 2030</strong> — All national security systems must migrate to quantum-resistant cryptography. Current readiness: <strong style="color:#ffd700">62%</strong>
|
|
74
|
-
</div>
|
|
454
|
+
<div class="container">
|
|
75
455
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
<
|
|
81
|
-
|
|
82
|
-
<span
|
|
83
|
-
<div>
|
|
84
|
-
<div class="score-label">Post-Quantum Ready</div>
|
|
85
|
-
<div style="color:#5a7a9e;font-size:0.75rem;margin-top:0.3rem">
|
|
86
|
-
18 of 29 systems migrated<br>
|
|
87
|
-
4 systems in transition<br>
|
|
88
|
-
7 systems using deprecated algorithms
|
|
89
|
-
</div>
|
|
90
|
-
</div>
|
|
456
|
+
<div class="mandate">
|
|
457
|
+
<div class="mandate-icon">
|
|
458
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
|
|
459
|
+
</div>
|
|
460
|
+
<div>
|
|
461
|
+
<strong>NSM-10 Compliance Deadline: January 2030</strong>
|
|
462
|
+
<span style="color: var(--ink-muted);"> — All national security systems must migrate to quantum-resistant cryptography. Current readiness: <span class="pct">62%</span></span>
|
|
91
463
|
</div>
|
|
92
|
-
<div class="check-row"><span>ML-KEM (Kyber) key exchange</span><span class="check-pass">18 systems</span></div>
|
|
93
|
-
<div class="check-row"><span>ML-DSA (Dilithium) signatures</span><span class="check-warn">14 systems</span></div>
|
|
94
|
-
<div class="check-row"><span>SLH-DSA (SPHINCS+) backup</span><span class="check-fail">3 systems</span></div>
|
|
95
|
-
<div class="check-row"><span>Hybrid TLS 1.3 + PQC</span><span class="check-warn">9 systems</span></div>
|
|
96
|
-
<div class="check-row"><span>RSA-2048 still in use</span><span class="check-fail">7 systems — MUST MIGRATE</span></div>
|
|
97
464
|
</div>
|
|
98
465
|
|
|
99
|
-
<div class="
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
<span class="
|
|
466
|
+
<div id="response-banner" class="response-banner"></div>
|
|
467
|
+
|
|
468
|
+
<div class="grid">
|
|
469
|
+
<div class="panel">
|
|
470
|
+
<div class="panel-head">
|
|
471
|
+
<h2><span class="dot"></span>Overall Readiness Score</h2>
|
|
472
|
+
<span class="pill">29 systems</span>
|
|
105
473
|
</div>
|
|
106
|
-
<div
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
474
|
+
<div class="score-block">
|
|
475
|
+
<div class="ring-wrap">
|
|
476
|
+
<svg width="92" height="92" viewBox="0 0 92 92">
|
|
477
|
+
<circle cx="46" cy="46" r="38" fill="none" stroke="#1f2a47" stroke-width="6"></circle>
|
|
478
|
+
<circle cx="46" cy="46" r="38" fill="none" stroke="url(#pqc-grad)" stroke-width="6"
|
|
479
|
+
stroke-linecap="round" stroke-dasharray="148 240" transform="rotate(-90 46 46)"></circle>
|
|
480
|
+
<defs>
|
|
481
|
+
<linearGradient id="pqc-grad" x1="0" y1="0" x2="1" y2="1">
|
|
482
|
+
<stop offset="0%" stop-color="#fbbf24"></stop>
|
|
483
|
+
<stop offset="100%" stop-color="#22d3ee"></stop>
|
|
484
|
+
</linearGradient>
|
|
485
|
+
</defs>
|
|
486
|
+
</svg>
|
|
487
|
+
<div class="ring-text">62%</div>
|
|
488
|
+
</div>
|
|
489
|
+
<div class="score-detail">
|
|
490
|
+
<h3>Post-Quantum Ready</h3>
|
|
491
|
+
<div class="meta">
|
|
492
|
+
18 of 29 systems migrated<br>
|
|
493
|
+
4 systems in transition<br>
|
|
494
|
+
7 systems on deprecated algorithms
|
|
495
|
+
</div>
|
|
496
|
+
</div>
|
|
112
497
|
</div>
|
|
113
|
-
<div
|
|
498
|
+
<div class="check-row"><span class="check-name"><code>ML-KEM</code> (Kyber) key exchange</span><span class="badge badge-pass">18 systems</span></div>
|
|
499
|
+
<div class="check-row"><span class="check-name"><code>ML-DSA</code> (Dilithium) signatures</span><span class="badge badge-warn">14 systems</span></div>
|
|
500
|
+
<div class="check-row"><span class="check-name"><code>SLH-DSA</code> (SPHINCS+) backup</span><span class="badge badge-fail">3 systems</span></div>
|
|
501
|
+
<div class="check-row"><span class="check-name">Hybrid TLS 1.3 + PQC</span><span class="badge badge-warn">9 systems</span></div>
|
|
502
|
+
<div class="check-row"><span class="check-name"><code>RSA-2048</code> still in use</span><span class="badge badge-fail">7 — must migrate</span></div>
|
|
114
503
|
</div>
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
<span class="
|
|
119
|
-
|
|
120
|
-
<div style="color:#5a7a9e;font-size:0.75rem;margin-top:0.2rem">RSA-2048 certificates — harvest-now-decrypt-later risk</div>
|
|
121
|
-
<div class="actions">
|
|
122
|
-
<button class="btn-migrate" id="migrate-email">Initiate Migration</button>
|
|
123
|
-
<button class="btn-revoke" id="revoke-email">Revoke RSA Certs</button>
|
|
504
|
+
|
|
505
|
+
<div class="panel">
|
|
506
|
+
<div class="panel-head">
|
|
507
|
+
<h2><span class="dot"></span>System Inventory</h2>
|
|
508
|
+
<span class="pill">4 priority</span>
|
|
124
509
|
</div>
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
510
|
+
|
|
511
|
+
<div class="system-card ready">
|
|
512
|
+
<div class="system-row">
|
|
513
|
+
<div>
|
|
514
|
+
<div class="system-name">PKI Root CA</div>
|
|
515
|
+
<div class="system-meta">ML-DSA-65 · ML-KEM-768</div>
|
|
516
|
+
</div>
|
|
517
|
+
<span class="pqc-status pqc-ready">PQC Ready</span>
|
|
518
|
+
</div>
|
|
130
519
|
</div>
|
|
131
|
-
|
|
132
|
-
<div class="
|
|
133
|
-
<
|
|
520
|
+
|
|
521
|
+
<div class="system-card partial">
|
|
522
|
+
<div class="system-row">
|
|
523
|
+
<div>
|
|
524
|
+
<div class="system-name">VPN Gateway Cluster</div>
|
|
525
|
+
<div class="system-meta">TLS 1.3 + ML-KEM hybrid · RSA fallback</div>
|
|
526
|
+
</div>
|
|
527
|
+
<span class="pqc-status pqc-partial">Hybrid</span>
|
|
528
|
+
</div>
|
|
134
529
|
</div>
|
|
135
|
-
</div>
|
|
136
|
-
</div>
|
|
137
530
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
<
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
</div>
|
|
531
|
+
<div class="system-card vulnerable">
|
|
532
|
+
<div class="system-row">
|
|
533
|
+
<div>
|
|
534
|
+
<div class="system-name">Email Gateway (S/MIME)</div>
|
|
535
|
+
<div class="system-meta">RSA-2048 · harvest-now-decrypt-later risk</div>
|
|
536
|
+
</div>
|
|
537
|
+
<span class="pqc-status pqc-vulnerable">Vulnerable</span>
|
|
538
|
+
</div>
|
|
539
|
+
<div class="system-actions">
|
|
540
|
+
<button class="btn btn-migrate" id="migrate-email">Initiate Migration</button>
|
|
541
|
+
<button class="btn btn-revoke" id="revoke-email">Revoke RSA Certs</button>
|
|
542
|
+
</div>
|
|
543
|
+
</div>
|
|
152
544
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
545
|
+
<div class="system-card vulnerable">
|
|
546
|
+
<div class="system-row">
|
|
547
|
+
<div>
|
|
548
|
+
<div class="system-name">SCADA Control Network</div>
|
|
549
|
+
<div class="system-meta">ECDSA P-256 · firmware upgrade required</div>
|
|
550
|
+
</div>
|
|
551
|
+
<span class="pqc-status pqc-vulnerable">Vulnerable</span>
|
|
552
|
+
</div>
|
|
553
|
+
<div class="system-actions">
|
|
554
|
+
<button class="btn btn-audit" id="audit-scada">Full Audit</button>
|
|
555
|
+
</div>
|
|
160
556
|
</div>
|
|
161
|
-
<button class="btn-revoke" id="revoke-mail">Revoke</button>
|
|
162
557
|
</div>
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
<span class="
|
|
167
|
-
<span class="
|
|
558
|
+
|
|
559
|
+
<div class="panel">
|
|
560
|
+
<div class="panel-head">
|
|
561
|
+
<h2><span class="dot"></span>Algorithm Inventory</h2>
|
|
562
|
+
<span class="pill">FIPS 203/204/205</span>
|
|
168
563
|
</div>
|
|
169
|
-
<
|
|
564
|
+
<table class="algos">
|
|
565
|
+
<thead>
|
|
566
|
+
<tr><th>Algorithm</th><th>Usage</th><th>Status</th><th>Replacement</th></tr>
|
|
567
|
+
</thead>
|
|
568
|
+
<tbody>
|
|
569
|
+
<tr><td><span class="algo-name algo-deprecated">RSA-2048</span></td><td>7 systems</td><td><span class="badge badge-fail">Deprecated</span></td><td><span class="algo-name algo-approved">ML-DSA-65</span></td></tr>
|
|
570
|
+
<tr><td><span class="algo-name algo-deprecated">ECDSA P-256</span></td><td>4 systems</td><td><span class="badge badge-fail">Deprecated</span></td><td><span class="algo-name algo-approved">ML-DSA-44</span></td></tr>
|
|
571
|
+
<tr><td><span class="algo-name algo-transition">ECDH P-384</span></td><td>4 systems</td><td><span class="badge badge-warn">Transition</span></td><td><span class="algo-name algo-approved">ML-KEM-768</span></td></tr>
|
|
572
|
+
<tr><td><span class="algo-name algo-approved">ML-KEM-768</span></td><td>18 systems</td><td><span class="badge badge-pass">Approved</span></td><td>—</td></tr>
|
|
573
|
+
<tr><td><span class="algo-name algo-approved">ML-DSA-65</span></td><td>14 systems</td><td><span class="badge badge-pass">Approved</span></td><td>—</td></tr>
|
|
574
|
+
<tr><td><span class="algo-name algo-approved">SLH-DSA-128s</span></td><td>3 systems</td><td><span class="badge badge-pass">Approved</span></td><td>—</td></tr>
|
|
575
|
+
</tbody>
|
|
576
|
+
</table>
|
|
170
577
|
</div>
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
<span class="
|
|
175
|
-
<span class="
|
|
578
|
+
|
|
579
|
+
<div class="panel">
|
|
580
|
+
<div class="panel-head">
|
|
581
|
+
<h2><span class="dot" style="background: var(--rose); box-shadow: 0 0 8px var(--rose);"></span>Certificates at Risk</h2>
|
|
582
|
+
<span class="pill">3 expiring</span>
|
|
583
|
+
</div>
|
|
584
|
+
<div class="cert-card">
|
|
585
|
+
<div class="cert-info">
|
|
586
|
+
<span class="cert-cn">CN=mail.agency.gov</span>
|
|
587
|
+
<span class="cert-algo">RSA-2048 / SHA-256</span>
|
|
588
|
+
<span class="cert-expiry">Expires 2027-03-15</span>
|
|
589
|
+
</div>
|
|
590
|
+
<button class="btn btn-revoke" id="revoke-mail">Revoke</button>
|
|
591
|
+
</div>
|
|
592
|
+
<div class="cert-card">
|
|
593
|
+
<div class="cert-info">
|
|
594
|
+
<span class="cert-cn">CN=vpn-legacy.agency.gov</span>
|
|
595
|
+
<span class="cert-algo">RSA-2048 / SHA-256</span>
|
|
596
|
+
<span class="cert-expiry">Expires 2026-11-30</span>
|
|
597
|
+
</div>
|
|
598
|
+
<button class="btn btn-revoke" id="revoke-vpn">Revoke</button>
|
|
599
|
+
</div>
|
|
600
|
+
<div class="cert-card">
|
|
601
|
+
<div class="cert-info">
|
|
602
|
+
<span class="cert-cn">CN=scada.internal</span>
|
|
603
|
+
<span class="cert-algo">ECDSA P-256 / SHA-256</span>
|
|
604
|
+
<span class="cert-expiry">Expires 2028-06-01</span>
|
|
605
|
+
</div>
|
|
606
|
+
<button class="btn btn-revoke" id="revoke-scada">Revoke</button>
|
|
176
607
|
</div>
|
|
177
|
-
<button class="btn-revoke" id="revoke-scada">Revoke</button>
|
|
178
608
|
</div>
|
|
179
|
-
</div>
|
|
180
609
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
610
|
+
<div class="panel full-width">
|
|
611
|
+
<div class="panel-head">
|
|
612
|
+
<h2><span class="dot"></span>Migration Timeline</h2>
|
|
613
|
+
<span class="pill">2026 → 2029</span>
|
|
614
|
+
</div>
|
|
615
|
+
<div class="mt-item"><span class="mt-date">2026-Q1</span><span class="badge badge-pass">Complete</span><span class="mt-text">PKI Root CA migrated to ML-DSA-65</span></div>
|
|
616
|
+
<div class="mt-item"><span class="mt-date">2026-Q2</span><span class="badge badge-pass">Complete</span><span class="mt-text">VPN gateways upgraded to hybrid TLS 1.3 + ML-KEM</span></div>
|
|
617
|
+
<div class="mt-item"><span class="mt-date">2026-Q3</span><span class="badge badge-warn">In Progress</span><span class="mt-text">Email gateway S/MIME migration to ML-DSA</span></div>
|
|
618
|
+
<div class="mt-item"><span class="mt-date">2027-Q1</span><span class="badge" style="background: var(--bg-3); color: var(--ink-muted); border: 1px solid var(--line);">Planned</span><span class="mt-text">Legacy client RSA fallback removal</span></div>
|
|
619
|
+
<div class="mt-item"><span class="mt-date">2027-Q3</span><span class="badge" style="background: var(--bg-3); color: var(--ink-muted); border: 1px solid var(--line);">Planned</span><span class="mt-text">SCADA firmware upgrade for PQC support</span></div>
|
|
620
|
+
<div class="mt-item"><span class="mt-date">2029-Q4</span><span class="badge badge-fail">Deadline</span><span class="mt-text">NSM-10 full compliance required</span></div>
|
|
621
|
+
</div>
|
|
189
622
|
</div>
|
|
190
623
|
</div>
|
|
191
624
|
|
|
@@ -194,43 +627,44 @@
|
|
|
194
627
|
<h3 id="modal-title">Confirm Action</h3>
|
|
195
628
|
<p id="modal-text"></p>
|
|
196
629
|
<div class="modal-actions">
|
|
197
|
-
<button
|
|
198
|
-
<button class="btn-
|
|
630
|
+
<button class="btn-cancel" id="cancel-action">Cancel</button>
|
|
631
|
+
<button class="btn-confirm" id="confirm-action">Confirm</button>
|
|
199
632
|
</div>
|
|
200
633
|
</div>
|
|
201
634
|
</div>
|
|
202
635
|
|
|
203
636
|
<script>
|
|
204
|
-
function showModal(title, text) {
|
|
637
|
+
function showModal(title, text, danger) {
|
|
205
638
|
document.getElementById('modal-title').textContent = title;
|
|
206
639
|
document.getElementById('modal-text').textContent = text;
|
|
640
|
+
var btn = document.getElementById('confirm-action');
|
|
641
|
+
btn.classList.toggle('danger', !!danger);
|
|
207
642
|
document.getElementById('action-modal').classList.add('visible');
|
|
208
643
|
}
|
|
209
|
-
document.getElementById('cancel-action').addEventListener('click', function() {
|
|
644
|
+
document.getElementById('cancel-action').addEventListener('click', function () {
|
|
210
645
|
document.getElementById('action-modal').classList.remove('visible');
|
|
211
646
|
});
|
|
212
|
-
document.getElementById('confirm-action').addEventListener('click', function() {
|
|
647
|
+
document.getElementById('confirm-action').addEventListener('click', function () {
|
|
213
648
|
document.getElementById('action-modal').classList.remove('visible');
|
|
214
649
|
var banner = document.getElementById('response-banner');
|
|
215
|
-
banner.className = 'response-banner visible';
|
|
216
|
-
banner.
|
|
217
|
-
banner.style.border = '1px solid #00cc66';
|
|
218
|
-
banner.style.color = '#00cc66';
|
|
219
|
-
banner.textContent = 'Action executed. Audit record created.';
|
|
220
|
-
});
|
|
221
|
-
document.getElementById('migrate-email').addEventListener('click', function() {
|
|
222
|
-
showModal('Initiate PQC Migration', 'This will begin the migration of the email gateway from RSA-2048 to ML-DSA-65 certificates. All existing S/MIME certificates will be re-issued. Users will need to re-enroll. Estimated downtime: 4 hours.');
|
|
650
|
+
banner.className = 'response-banner visible response-ok';
|
|
651
|
+
banner.textContent = 'Migration initiated. Audit record created.';
|
|
223
652
|
});
|
|
224
|
-
document.getElementById('
|
|
225
|
-
showModal('
|
|
653
|
+
document.getElementById('migrate-email').addEventListener('click', function () {
|
|
654
|
+
showModal('Initiate PQC Migration',
|
|
655
|
+
'This will begin the migration of the email gateway from RSA-2048 to ML-DSA-65 certificates. All existing S/MIME certificates will be re-issued. Users will need to re-enroll. Estimated downtime: 4 hours.',
|
|
656
|
+
false);
|
|
226
657
|
});
|
|
227
|
-
document.getElementById('audit-scada').addEventListener('click', function() {
|
|
228
|
-
showModal('Full SCADA Cryptographic Audit',
|
|
658
|
+
document.getElementById('audit-scada').addEventListener('click', function () {
|
|
659
|
+
showModal('Full SCADA Cryptographic Audit',
|
|
660
|
+
'This will initiate a comprehensive audit of all cryptographic primitives used by the SCADA control network. The audit will scan firmware, certificates, key stores, and protocol configurations. Estimated duration: 6 hours.',
|
|
661
|
+
false);
|
|
229
662
|
});
|
|
230
|
-
document.querySelectorAll('.btn-revoke').forEach(function(btn) {
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
663
|
+
document.querySelectorAll('.btn-revoke').forEach(function (btn) {
|
|
664
|
+
btn.addEventListener('click', function () {
|
|
665
|
+
showModal('Revoke Certificate',
|
|
666
|
+
'This will immediately revoke this certificate and publish it to the CRL. Any systems relying on this certificate will lose TLS/authentication capability until a replacement is issued. This action is irreversible and requires CISO approval.',
|
|
667
|
+
true);
|
|
234
668
|
});
|
|
235
669
|
});
|
|
236
670
|
</script>
|