kryptheon 0.1.26 → 0.1.28
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 +33 -7
- package/bin/kryptheon.js +199 -43
- package/kryptheon-dashboard-page.js +1026 -702
- package/kryptheon-dashboard.html +411 -378
- package/kryptheon-dashboard.js +864 -608
- package/package.json +1 -1
package/kryptheon-dashboard.html
CHANGED
|
@@ -1,378 +1,411 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<meta name="kryptheon-token" content="%%TOKEN%%">
|
|
7
|
-
<title>Kryptheon</title>
|
|
8
|
-
<link rel="icon" href="/logo.png">
|
|
9
|
-
<style>
|
|
10
|
-
/* The grammar of kryptheon.tech: two grounds (ink and glacier), one orange,
|
|
11
|
-
type doing the work on a compressed width axis, hairlines for structure -
|
|
12
|
-
no cards, shadows or rounded corners. Orange means "act on this": a
|
|
13
|
-
confirmed problem, the one next thing, the button that does it. Everything
|
|
14
|
-
else is ink. The two fonts are the site's own, served by this server;
|
|
15
|
-
nothing is loaded from anywhere else. */
|
|
16
|
-
@font-face {
|
|
17
|
-
font-family: "Archivo";
|
|
18
|
-
font-style: normal;
|
|
19
|
-
font-weight: 100 900;
|
|
20
|
-
font-stretch: 62% 125%;
|
|
21
|
-
font-display: swap;
|
|
22
|
-
src: url("/fonts/archivo.woff2") format("woff2");
|
|
23
|
-
}
|
|
24
|
-
@font-face {
|
|
25
|
-
font-family: "Space Mono";
|
|
26
|
-
font-style: normal;
|
|
27
|
-
font-weight: 400;
|
|
28
|
-
font-display: swap;
|
|
29
|
-
src: url("/fonts/spacemono.woff2") format("woff2");
|
|
30
|
-
}
|
|
31
|
-
:root {
|
|
32
|
-
--ink: #0b0e14;
|
|
33
|
-
--ink-2: #141922;
|
|
34
|
-
--glacier: #f2f4f1;
|
|
35
|
-
--white: #fafbfa;
|
|
36
|
-
--orange: #ff4d00;
|
|
37
|
-
--orange-deep: #c23a00;
|
|
38
|
-
--on-dark: #e9edf2;
|
|
39
|
-
--on-light: #12161d;
|
|
40
|
-
--line: rgba(18, 22, 29, 0.16);
|
|
41
|
-
--line-dark: rgba(233, 237, 242, 0.14);
|
|
42
|
-
--muted: rgba(18, 22, 29, 0.62);
|
|
43
|
-
--display: "Archivo", "Bahnschrift", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
|
|
44
|
-
--mono: "Space Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
|
|
45
|
-
--ease: cubic-bezier(0.16, 1, 0.3, 1);
|
|
46
|
-
--gutter: clamp(18px, 3.4vw, 44px);
|
|
47
|
-
}
|
|
48
|
-
* { box-sizing: border-box; }
|
|
49
|
-
html { -webkit-text-size-adjust: 100%; }
|
|
50
|
-
body { margin: 0; min-height: 100vh; color: var(--on-light); background: var(--glacier); font: 15px/1.6 var(--display); -webkit-font-smoothing: antialiased; }
|
|
51
|
-
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
|
|
52
|
-
a { color: inherit; }
|
|
53
|
-
::selection { color: var(--white); background: var(--orange); }
|
|
54
|
-
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 900; font-stretch: 63%; letter-spacing: -0.015em; line-height: 0.95; text-transform: uppercase; }
|
|
55
|
-
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
|
|
56
|
-
|
|
57
|
-
/* The labels: Space Mono, small, spaced, upper case. */
|
|
58
|
-
.mono, .eyebrow, .c-sub, .badge, .tag, .n-count, .d-step, .tl-meta, .lr-sub, .na-lock, .step-num, .built-top, .btn, .seg button, .nav button, .site-link, .wordmark small, .top .sub {
|
|
59
|
-
font-family: var(--mono);
|
|
60
|
-
font-size: 11px;
|
|
61
|
-
font-weight: 400;
|
|
62
|
-
letter-spacing: 0.14em;
|
|
63
|
-
text-transform: uppercase;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
|
|
67
|
-
@media (max-width: 900px) { .shell { grid-template-columns: minmax(0, 1fr); } }
|
|
68
|
-
|
|
69
|
-
/* --- ink: the sidebar --------------------------------------------------- */
|
|
70
|
-
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 26px; padding: 22px 18px 20px; color: var(--on-dark); background: var(--ink); overflow-y: auto; }
|
|
71
|
-
@media (max-width: 900px) { .side { position: static; height: auto; } }
|
|
72
|
-
.brand { display: flex; align-items: center; gap: 12px; }
|
|
73
|
-
.brand img { width: 40px; height: 40px; background: #000; flex: none; }
|
|
74
|
-
.wordmark { font-family: var(--display); font-weight: 900; font-stretch: 63%; font-size: 22px; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; color: var(--white); }
|
|
75
|
-
.wordmark .dot { color: var(--orange); }
|
|
76
|
-
.wordmark small { display: block; margin-top: 6px; font-size: 9.5px; letter-spacing: 0.14em; color: rgba(233, 237, 242, 0.5); }
|
|
77
|
-
.nav { display: grid; border-top: 1px solid var(--line-dark); }
|
|
78
|
-
.nav button { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 4px 13px 12px; text-align: left; color: rgba(233, 237, 242, 0.62); border-bottom: 1px solid var(--line-dark); transition: color 0.3s var(--ease), padding 0.3s var(--ease); }
|
|
79
|
-
.nav button svg { flex: none; opacity: 0.8; }
|
|
80
|
-
.nav button:hover { color: var(--white); }
|
|
81
|
-
.nav button.on { padding-left: 18px; color: var(--white); }
|
|
82
|
-
.nav button.on::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; width: 3px; background: var(--orange); }
|
|
83
|
-
.nav .n-count { margin-left: auto; font-size: 10px; letter-spacing: 0.06em; color: rgba(233, 237, 242, 0.55); }
|
|
84
|
-
.nav .n-count.hot { color: var(--orange); }
|
|
85
|
-
@media (max-width: 900px) { .nav { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
|
|
86
|
-
.built { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-dark); }
|
|
87
|
-
.built-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; color: rgba(233, 237, 242, 0.6); }
|
|
88
|
-
.built-top b { font-family: var(--display); font-weight: 900; font-stretch: 63%; font-size: 22px; letter-spacing: 0; color: var(--white); }
|
|
89
|
-
.meter { height: 2px; margin-top: 12px; background: var(--line-dark); }
|
|
90
|
-
.meter i { display: block; height: 100%; background: var(--orange); }
|
|
91
|
-
.built p { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: rgba(233, 237, 242, 0.5); }
|
|
92
|
-
.site-link { font-size: 10px; color: rgba(233, 237, 242, 0.6); text-decoration: none; transition: color 0.3s var(--ease); }
|
|
93
|
-
.site-link::after { content: " ↗"; }
|
|
94
|
-
.site-link:hover { color: var(--orange); }
|
|
95
|
-
|
|
96
|
-
/* --- glacier: the main side --------------------------------------------- */
|
|
97
|
-
main { min-width: 0; padding: 26px var(--gutter) 60px; }
|
|
98
|
-
.top { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
|
|
99
|
-
.top h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
|
|
100
|
-
.top .sub { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 10px; color: var(--muted); text-transform: none; letter-spacing: 0.06em; }
|
|
101
|
-
.live-dot { width: 7px; height: 7px; background: var(--orange); animation: pulse 2.4s var(--ease) infinite; }
|
|
102
|
-
@keyframes pulse { 50% { opacity: 0.25; } }
|
|
103
|
-
.top .grow { flex: 1; }
|
|
104
|
-
|
|
105
|
-
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 42px; padding: 0 20px; border: 1px solid currentColor; white-space: nowrap; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
|
|
106
|
-
.btn:hover:not(:disabled) { color: var(--orange); border-color: var(--orange); }
|
|
107
|
-
.btn:disabled { opacity: 0.5; cursor: default; }
|
|
108
|
-
.btn.sun { color: var(--white); background: var(--orange); border-color: var(--orange); }
|
|
109
|
-
.btn.sun:hover:not(:disabled) { color: var(--white); background: var(--orange-deep); border-color: var(--orange-deep); }
|
|
110
|
-
.btn.sm { height: 34px; padding: 0 14px; font-size: 10px; }
|
|
111
|
-
.spin { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
|
|
112
|
-
@keyframes spin { to { transform: rotate(360deg); } }
|
|
113
|
-
|
|
114
|
-
.view { margin-top: 28px; }
|
|
115
|
-
.view[hidden] { display: none; }
|
|
116
|
-
.card { min-width: 0; }
|
|
117
|
-
.card + .card, .view > .card.gap { margin-top: 44px; }
|
|
118
|
-
.card-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
|
|
119
|
-
.card-head h3 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
|
|
120
|
-
.card-head .c-sub { margin-top: 8px; font-size: 10px; color: var(--muted); }
|
|
121
|
-
.card-head .grow { flex: 1; }
|
|
122
|
-
.badge { font-size: 10px; color: var(--muted); }
|
|
123
|
-
.badge::before { content: "("; } .badge::after { content: ")"; }
|
|
124
|
-
.seg { display: inline-flex; border: 1px solid var(--line); }
|
|
125
|
-
.seg button { padding: 8px 14px; font-size: 10px; color: var(--muted); }
|
|
126
|
-
.seg button + button { border-left: 1px solid var(--line); }
|
|
127
|
-
.seg button.on { color: var(--white); background: var(--on-light); }
|
|
128
|
-
|
|
129
|
-
/* --- the one thing to do now: an ink band ------------------------------- */
|
|
130
|
-
.sky { position: relative; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 34px 32px 36px; color: var(--on-dark); background: var(--ink); }
|
|
131
|
-
.sky::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 2px; background: var(--orange); }
|
|
132
|
-
.sky.bad { box-shadow: inset 4px 0 0 var(--orange); }
|
|
133
|
-
.sky.ok::after { background: rgba(233, 237, 242, 0.4); }
|
|
134
|
-
.sky .s-chip { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border: 1px solid var(--line-dark); color: var(--orange) !important; }
|
|
135
|
-
.sky.ok .s-chip { color: var(--on-dark) !important; }
|
|
136
|
-
.sky .s-text { flex: 1; min-width: 240px; }
|
|
137
|
-
.sky .eyebrow { font-size: 10px; color: var(--orange); }
|
|
138
|
-
.sky h2 { margin-top: 10px; color: var(--white); font-size: clamp(2rem, 4.6vw, 3.6rem); }
|
|
139
|
-
.sky p { max-width: 62ch; margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: rgba(233, 237, 242, 0.66); }
|
|
140
|
-
.sky .btn:not(.sun) { color: var(--on-dark); }
|
|
141
|
-
|
|
142
|
-
/* --- start here: the ladder --------------------------------------------- */
|
|
143
|
-
.steps { display: grid; }
|
|
144
|
-
.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 22px 0; border-bottom: 1px solid var(--line); }
|
|
145
|
-
.step-num { padding-top: 2px; font-size: 13px; letter-spacing: 0.04em; color: var(--orange); }
|
|
146
|
-
.step.done .step-num { color: var(--on-light); }
|
|
147
|
-
.step.off .step-num, .step.waiting .step-num { color: var(--muted); }
|
|
148
|
-
.step-num svg { width: 18px; height: 18px; }
|
|
149
|
-
.step-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
|
|
150
|
-
.step-title { font-weight: 800; font-stretch: 74%; font-size: clamp(1.1rem, 1.8vw, 1.45rem); letter-spacing: -0.01em; line-height: 1.05; text-transform: uppercase; }
|
|
151
|
-
.step.off .step-title, .step.off .step-why { opacity: 0.45; }
|
|
152
|
-
.step-why { max-width: 70ch; margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
|
|
153
|
-
.step .btn { margin-top: 14px; }
|
|
154
|
-
.cmd { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin-top: 14px; padding: 10px 10px 10px 16px; color: var(--on-dark); background: var(--ink); border-left: 2px solid var(--orange); }
|
|
155
|
-
.cmd code { font: 12.5px/1.5 var(--mono); overflow-wrap: anywhere; }
|
|
156
|
-
.cmd svg { flex: none; opacity: 0.6; }
|
|
157
|
-
.cmd-copy { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1px solid var(--line-dark); color: var(--on-dark); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
|
|
158
|
-
.cmd-copy:hover { color: var(--orange); border-color: var(--orange); }
|
|
159
|
-
|
|
160
|
-
/* --- connect your AI tool: an index of tools, one tool's page ------------ */
|
|
161
|
-
.ai { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 34px; padding-top: 18px; }
|
|
162
|
-
@media (max-width: 900px) { .ai { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
|
|
163
|
-
.ai-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
|
|
164
|
-
@media (max-width: 900px) { .ai-tabs { flex-direction: row; flex-wrap: wrap; } }
|
|
165
|
-
.ai-tab { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 13px 8px 13px 14px; text-align: left; border-bottom: 1px solid var(--line); transition: color 0.3s var(--ease), padding 0.3s var(--ease); }
|
|
166
|
-
.ai-tab .ai-num { font: 10px var(--mono); color: var(--muted); }
|
|
167
|
-
.ai-tab .ai-name { font-weight: 800; font-stretch: 74%; text-transform: uppercase; }
|
|
168
|
-
.ai-tab .ai-tag { margin-left: auto; font: 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
|
|
169
|
-
.ai-tab:hover, .ai-tab.on { color: var(--orange-deep); }
|
|
170
|
-
.ai-tab.on { padding-left: 20px; }
|
|
171
|
-
.ai-tab.on::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; width: 3px; background: var(--orange); }
|
|
172
|
-
.ai-panel h4 { margin: 10px 0 0; font-weight: 900; font-stretch: 63%; font-size: clamp(2rem, 4vw, 3rem); line-height: 0.95; text-transform: uppercase; }
|
|
173
|
-
.ai-badge { font: 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
|
|
174
|
-
.ai-badge.tested { color: var(--orange-deep); }
|
|
175
|
-
.ai-steps { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
|
|
176
|
-
.ai-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 12px 0; font-size: 14px; line-height: 1.55; border-bottom: 1px solid var(--line); }
|
|
177
|
-
.ai-steps li span { font: 13px var(--mono); color: var(--orange); }
|
|
178
|
-
.ai-oneclick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
|
|
179
|
-
.ai-oneclick small { font: 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
|
|
180
|
-
.ai-plate { margin-top: 18px; color: var(--on-dark); background: var(--ink); }
|
|
181
|
-
.ai-plate-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; font: 10.5px var(--mono); border-bottom: 1px solid var(--line-dark); }
|
|
182
|
-
.ai-plate-bar span { opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
183
|
-
.ai-plate-bar button { flex: none; padding: 6px 12px; font: 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line-dark); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
|
|
184
|
-
.ai-plate-bar button:hover { color: var(--orange); border-color: var(--orange); }
|
|
185
|
-
.ai-plate pre { margin: 0; padding: 16px 14px 18px; overflow-x: auto; font: 12.5px/1.7 var(--mono); white-space: pre; }
|
|
186
|
-
.ai-note { max-width: 66ch; margin: 14px 0 0; padding-left: 14px; font-size: 13.5px; line-height: 1.6; color: var(--muted); border-left: 2px solid var(--orange); }
|
|
187
|
-
.ai-then { margin-top: 20px; font-size: 14px; }
|
|
188
|
-
.ai-then b { font-weight: 900; font-stretch: 63%; font-size: 1.6rem; text-transform: uppercase; }
|
|
189
|
-
|
|
190
|
-
/* --- tags: orange acts, ink states --------------------------------------- */
|
|
191
|
-
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 9.5px; letter-spacing: 0.12em; white-space: nowrap; color: var(--muted); border: 1px solid var(--line); }
|
|
192
|
-
.tag.ember, .tag.sun { color: var(--orange-deep); border-color: var(--orange); }
|
|
193
|
-
.tag.amber { color: var(--on-light); border-style: dashed; border-color: rgba(18, 22, 29, 0.45); }
|
|
194
|
-
.tag.leaf { color: var(--on-light); border-color: var(--on-light); }
|
|
195
|
-
.tag.leaf::before { content: "✓"; }
|
|
196
|
-
.tag.dusk, .tag.muted { color: var(--muted); }
|
|
197
|
-
.tag .g-dot { width: 6px; height: 6px; background: currentColor; }
|
|
198
|
-
.tag .g-half { width: 7px; height: 7px; border: 1px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
|
|
199
|
-
.step-head .tag { font-size: 9px; }
|
|
200
|
-
|
|
201
|
-
/* --- findings: one row each, a rule down the side ------------------------ */
|
|
202
|
-
.finding { border-bottom: 1px solid var(--line); }
|
|
203
|
-
.finding.bad { box-shadow: inset 3px 0 0 var(--orange); }
|
|
204
|
-
.finding.warn { box-shadow: inset 3px 0 0 rgba(18, 22, 29, 0.35); }
|
|
205
|
-
.finding-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 8px 18px 20px; text-align: left; transition: background 0.3s var(--ease); }
|
|
206
|
-
.finding-head:hover { background: rgba(18, 22, 29, 0.035); }
|
|
207
|
-
.finding-head > svg { flex: none; color: var(--muted); }
|
|
208
|
-
.finding-left { flex: 1; min-width: 0; }
|
|
209
|
-
.f-title { font-weight: 800; font-stretch: 74%; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -0.01em; line-height: 1.1; text-transform: uppercase; }
|
|
210
|
-
.f-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
|
|
211
|
-
.f-where { font: 11px/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
|
|
212
|
-
.detail-box { margin: 0 8px 22px 20px; padding: 18px 0 0; border-top: 1px dashed var(--line); }
|
|
213
|
-
.d-step { margin-top: 18px; font-size: 10px; color: var(--orange-deep); }
|
|
214
|
-
.d-step:first-child { margin-top: 0; }
|
|
215
|
-
.d-text { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
|
|
216
|
-
.detail-box pre { max-height: 360px; margin: 10px 0 0; padding: 18px; overflow: auto; font: 12px/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--on-dark); background: var(--ink); }
|
|
217
|
-
.d-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
|
|
218
|
-
.attempts { display: grid; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); }
|
|
219
|
-
.attempts div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
|
|
220
|
-
.empty { padding: 18px 0; font-size: 14px; color: var(--muted); }
|
|
221
|
-
|
|
222
|
-
/* --- what changed -------------------------------------------------------- */
|
|
223
|
-
.timeline { display: grid; }
|
|
224
|
-
.tl { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
|
|
225
|
-
.tl .knob { width: 10px; height: 10px; margin-top: 7px; border: 1px solid var(--on-light); }
|
|
226
|
-
.tl .knob.bad { background: var(--orange); border-color: var(--orange); }
|
|
227
|
-
.tl .knob.ok { background: var(--on-light); }
|
|
228
|
-
.tl .knob.mid { border-style: dashed; }
|
|
229
|
-
.tl-head { font-weight: 800; font-stretch: 74%; font-size: 1.1rem; text-transform: uppercase; letter-spacing: -0.01em; }
|
|
230
|
-
.tl-meta { margin-top: 4px; font-size: 10px; color: var(--muted); }
|
|
231
|
-
.tl-body { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
|
|
232
|
-
.tl-files { display: grid; gap: 2px; margin-top: 10px; font: 11.5px/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
|
|
233
|
-
|
|
234
|
-
/* --- checks -------------------------------------------------------------- */
|
|
235
|
-
.check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
|
|
236
|
-
@media (max-width: 1100px) { .check-grid { grid-template-columns: minmax(0, 1fr); } }
|
|
237
|
-
.check { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 24px; background: var(--glacier); }
|
|
238
|
-
.check .c-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
|
239
|
-
.check .c-name { font-weight: 800; font-stretch: 74%; font-size: 1.2rem; line-height: 1.05; text-transform: uppercase; }
|
|
240
|
-
.check .c-what { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
|
|
241
|
-
.check .btn { align-self: flex-start; margin-top: auto; }
|
|
242
|
-
.na-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); border-top: 1px solid var(--line); }
|
|
243
|
-
.na { display: flex; align-items: center; gap: 12px; padding: 14px 4px; font-weight: 700; font-stretch: 74%; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
|
|
244
|
-
.na .na-lock { display: block; margin-top: 2px; font-size: 9px; font-weight: 400; color: rgba(18, 22, 29, 0.42); }
|
|
245
|
-
.na .switch { opacity: 0.45; }
|
|
246
|
-
.switch { position: relative; width: 42px; height: 22px; flex: none; }
|
|
247
|
-
.switch input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
|
|
248
|
-
.switch input:disabled { cursor: not-allowed; }
|
|
249
|
-
.switch .track { position: absolute; inset: 0; border: 1px solid var(--on-light); transition: background 0.3s var(--ease), border-color 0.3s var(--ease); }
|
|
250
|
-
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--on-light); transition: transform 0.3s var(--ease), background 0.3s var(--ease); }
|
|
251
|
-
.switch input:checked + .track { background: var(--orange); border-color: var(--orange); }
|
|
252
|
-
.switch input:checked + .track::after { background: var(--white); transform: translateX(20px); }
|
|
253
|
-
.switch input:focus-visible + .track { outline: 2px solid var(--orange); outline-offset: 2px; }
|
|
254
|
-
|
|
255
|
-
/* --- simple lists -------------------------------------------------------- */
|
|
256
|
-
.line-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--line); }
|
|
257
|
-
.lr-text { flex: 1; min-width: 200px; font-weight: 700; font-stretch: 80%; }
|
|
258
|
-
.lr-sub { margin-top: 3px; font-size: 10px; letter-spacing: 0.06em; text-transform: none; color: var(--muted); overflow-wrap: anywhere; }
|
|
259
|
-
.note { max-width: 70ch; margin: 18px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted); overflow-wrap: anywhere; }
|
|
260
|
-
.path { margin-top: 14px; padding: 14px 16px; font: 12.5px/1.5 var(--mono); color: var(--on-dark); background: var(--ink); border-left: 2px solid var(--orange); overflow-wrap: anywhere; }
|
|
261
|
-
.files { display: grid; margin-top: 20px; border-top: 1px solid var(--line); }
|
|
262
|
-
.files div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; padding: 10px 0; font-size: 13.5px; border-bottom: 1px solid var(--line); }
|
|
263
|
-
.files code { font: 12px/1.5 var(--mono); }
|
|
264
|
-
.files span { color: var(--muted); }
|
|
265
|
-
@media (max-width: 600px) { .files div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
.
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
<div class="
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
<div class="
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
<div class="
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
<div class="card">
|
|
345
|
-
<div class="card-head"><div><div class="c-sub">
|
|
346
|
-
<div id="
|
|
347
|
-
</div>
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
</
|
|
375
|
-
|
|
376
|
-
<
|
|
377
|
-
|
|
378
|
-
</
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<meta name="kryptheon-token" content="%%TOKEN%%">
|
|
7
|
+
<title>Kryptheon</title>
|
|
8
|
+
<link rel="icon" href="/logo.png">
|
|
9
|
+
<style>
|
|
10
|
+
/* The grammar of kryptheon.tech: two grounds (ink and glacier), one orange,
|
|
11
|
+
type doing the work on a compressed width axis, hairlines for structure -
|
|
12
|
+
no cards, shadows or rounded corners. Orange means "act on this": a
|
|
13
|
+
confirmed problem, the one next thing, the button that does it. Everything
|
|
14
|
+
else is ink. The two fonts are the site's own, served by this server;
|
|
15
|
+
nothing is loaded from anywhere else. */
|
|
16
|
+
@font-face {
|
|
17
|
+
font-family: "Archivo";
|
|
18
|
+
font-style: normal;
|
|
19
|
+
font-weight: 100 900;
|
|
20
|
+
font-stretch: 62% 125%;
|
|
21
|
+
font-display: swap;
|
|
22
|
+
src: url("/fonts/archivo.woff2") format("woff2");
|
|
23
|
+
}
|
|
24
|
+
@font-face {
|
|
25
|
+
font-family: "Space Mono";
|
|
26
|
+
font-style: normal;
|
|
27
|
+
font-weight: 400;
|
|
28
|
+
font-display: swap;
|
|
29
|
+
src: url("/fonts/spacemono.woff2") format("woff2");
|
|
30
|
+
}
|
|
31
|
+
:root {
|
|
32
|
+
--ink: #0b0e14;
|
|
33
|
+
--ink-2: #141922;
|
|
34
|
+
--glacier: #f2f4f1;
|
|
35
|
+
--white: #fafbfa;
|
|
36
|
+
--orange: #ff4d00;
|
|
37
|
+
--orange-deep: #c23a00;
|
|
38
|
+
--on-dark: #e9edf2;
|
|
39
|
+
--on-light: #12161d;
|
|
40
|
+
--line: rgba(18, 22, 29, 0.16);
|
|
41
|
+
--line-dark: rgba(233, 237, 242, 0.14);
|
|
42
|
+
--muted: rgba(18, 22, 29, 0.62);
|
|
43
|
+
--display: "Archivo", "Bahnschrift", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
|
|
44
|
+
--mono: "Space Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
|
|
45
|
+
--ease: cubic-bezier(0.16, 1, 0.3, 1);
|
|
46
|
+
--gutter: clamp(18px, 3.4vw, 44px);
|
|
47
|
+
}
|
|
48
|
+
* { box-sizing: border-box; }
|
|
49
|
+
html { -webkit-text-size-adjust: 100%; }
|
|
50
|
+
body { margin: 0; min-height: 100vh; color: var(--on-light); background: var(--glacier); font: 15px/1.6 var(--display); -webkit-font-smoothing: antialiased; }
|
|
51
|
+
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
|
|
52
|
+
a { color: inherit; }
|
|
53
|
+
::selection { color: var(--white); background: var(--orange); }
|
|
54
|
+
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 900; font-stretch: 63%; letter-spacing: -0.015em; line-height: 0.95; text-transform: uppercase; }
|
|
55
|
+
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
|
|
56
|
+
|
|
57
|
+
/* The labels: Space Mono, small, spaced, upper case. */
|
|
58
|
+
.mono, .eyebrow, .c-sub, .badge, .tag, .n-count, .d-step, .tl-meta, .lr-sub, .na-lock, .step-num, .built-top, .btn, .seg button, .nav button, .site-link, .wordmark small, .top .sub {
|
|
59
|
+
font-family: var(--mono);
|
|
60
|
+
font-size: 11px;
|
|
61
|
+
font-weight: 400;
|
|
62
|
+
letter-spacing: 0.14em;
|
|
63
|
+
text-transform: uppercase;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
|
|
67
|
+
@media (max-width: 900px) { .shell { grid-template-columns: minmax(0, 1fr); } }
|
|
68
|
+
|
|
69
|
+
/* --- ink: the sidebar --------------------------------------------------- */
|
|
70
|
+
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 26px; padding: 22px 18px 20px; color: var(--on-dark); background: var(--ink); overflow-y: auto; }
|
|
71
|
+
@media (max-width: 900px) { .side { position: static; height: auto; } }
|
|
72
|
+
.brand { display: flex; align-items: center; gap: 12px; }
|
|
73
|
+
.brand img { width: 40px; height: 40px; background: #000; flex: none; }
|
|
74
|
+
.wordmark { font-family: var(--display); font-weight: 900; font-stretch: 63%; font-size: 22px; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; color: var(--white); }
|
|
75
|
+
.wordmark .dot { color: var(--orange); }
|
|
76
|
+
.wordmark small { display: block; margin-top: 6px; font-size: 9.5px; letter-spacing: 0.14em; color: rgba(233, 237, 242, 0.5); }
|
|
77
|
+
.nav { display: grid; border-top: 1px solid var(--line-dark); }
|
|
78
|
+
.nav button { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 4px 13px 12px; text-align: left; color: rgba(233, 237, 242, 0.62); border-bottom: 1px solid var(--line-dark); transition: color 0.3s var(--ease), padding 0.3s var(--ease); }
|
|
79
|
+
.nav button svg { flex: none; opacity: 0.8; }
|
|
80
|
+
.nav button:hover { color: var(--white); }
|
|
81
|
+
.nav button.on { padding-left: 18px; color: var(--white); }
|
|
82
|
+
.nav button.on::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; width: 3px; background: var(--orange); }
|
|
83
|
+
.nav .n-count { margin-left: auto; font-size: 10px; letter-spacing: 0.06em; color: rgba(233, 237, 242, 0.55); }
|
|
84
|
+
.nav .n-count.hot { color: var(--orange); }
|
|
85
|
+
@media (max-width: 900px) { .nav { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
|
|
86
|
+
.built { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-dark); }
|
|
87
|
+
.built-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; color: rgba(233, 237, 242, 0.6); }
|
|
88
|
+
.built-top b { font-family: var(--display); font-weight: 900; font-stretch: 63%; font-size: 22px; letter-spacing: 0; color: var(--white); }
|
|
89
|
+
.meter { height: 2px; margin-top: 12px; background: var(--line-dark); }
|
|
90
|
+
.meter i { display: block; height: 100%; background: var(--orange); }
|
|
91
|
+
.built p { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: rgba(233, 237, 242, 0.5); }
|
|
92
|
+
.site-link { font-size: 10px; color: rgba(233, 237, 242, 0.6); text-decoration: none; transition: color 0.3s var(--ease); }
|
|
93
|
+
.site-link::after { content: " ↗"; }
|
|
94
|
+
.site-link:hover { color: var(--orange); }
|
|
95
|
+
|
|
96
|
+
/* --- glacier: the main side --------------------------------------------- */
|
|
97
|
+
main { min-width: 0; padding: 26px var(--gutter) 60px; }
|
|
98
|
+
.top { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
|
|
99
|
+
.top h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
|
|
100
|
+
.top .sub { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 10px; color: var(--muted); text-transform: none; letter-spacing: 0.06em; }
|
|
101
|
+
.live-dot { width: 7px; height: 7px; background: var(--orange); animation: pulse 2.4s var(--ease) infinite; }
|
|
102
|
+
@keyframes pulse { 50% { opacity: 0.25; } }
|
|
103
|
+
.top .grow { flex: 1; }
|
|
104
|
+
|
|
105
|
+
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 42px; padding: 0 20px; border: 1px solid currentColor; white-space: nowrap; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
|
|
106
|
+
.btn:hover:not(:disabled) { color: var(--orange); border-color: var(--orange); }
|
|
107
|
+
.btn:disabled { opacity: 0.5; cursor: default; }
|
|
108
|
+
.btn.sun { color: var(--white); background: var(--orange); border-color: var(--orange); }
|
|
109
|
+
.btn.sun:hover:not(:disabled) { color: var(--white); background: var(--orange-deep); border-color: var(--orange-deep); }
|
|
110
|
+
.btn.sm { height: 34px; padding: 0 14px; font-size: 10px; }
|
|
111
|
+
.spin { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
|
|
112
|
+
@keyframes spin { to { transform: rotate(360deg); } }
|
|
113
|
+
|
|
114
|
+
.view { margin-top: 28px; }
|
|
115
|
+
.view[hidden] { display: none; }
|
|
116
|
+
.card { min-width: 0; }
|
|
117
|
+
.card + .card, .view > .card.gap { margin-top: 44px; }
|
|
118
|
+
.card-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
|
|
119
|
+
.card-head h3 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
|
|
120
|
+
.card-head .c-sub { margin-top: 8px; font-size: 10px; color: var(--muted); }
|
|
121
|
+
.card-head .grow { flex: 1; }
|
|
122
|
+
.badge { font-size: 10px; color: var(--muted); }
|
|
123
|
+
.badge::before { content: "("; } .badge::after { content: ")"; }
|
|
124
|
+
.seg { display: inline-flex; border: 1px solid var(--line); }
|
|
125
|
+
.seg button { padding: 8px 14px; font-size: 10px; color: var(--muted); }
|
|
126
|
+
.seg button + button { border-left: 1px solid var(--line); }
|
|
127
|
+
.seg button.on { color: var(--white); background: var(--on-light); }
|
|
128
|
+
|
|
129
|
+
/* --- the one thing to do now: an ink band ------------------------------- */
|
|
130
|
+
.sky { position: relative; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 34px 32px 36px; color: var(--on-dark); background: var(--ink); }
|
|
131
|
+
.sky::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 2px; background: var(--orange); }
|
|
132
|
+
.sky.bad { box-shadow: inset 4px 0 0 var(--orange); }
|
|
133
|
+
.sky.ok::after { background: rgba(233, 237, 242, 0.4); }
|
|
134
|
+
.sky .s-chip { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border: 1px solid var(--line-dark); color: var(--orange) !important; }
|
|
135
|
+
.sky.ok .s-chip { color: var(--on-dark) !important; }
|
|
136
|
+
.sky .s-text { flex: 1; min-width: 240px; }
|
|
137
|
+
.sky .eyebrow { font-size: 10px; color: var(--orange); }
|
|
138
|
+
.sky h2 { margin-top: 10px; color: var(--white); font-size: clamp(2rem, 4.6vw, 3.6rem); }
|
|
139
|
+
.sky p { max-width: 62ch; margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: rgba(233, 237, 242, 0.66); }
|
|
140
|
+
.sky .btn:not(.sun) { color: var(--on-dark); }
|
|
141
|
+
|
|
142
|
+
/* --- start here: the ladder --------------------------------------------- */
|
|
143
|
+
.steps { display: grid; }
|
|
144
|
+
.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 22px 0; border-bottom: 1px solid var(--line); }
|
|
145
|
+
.step-num { padding-top: 2px; font-size: 13px; letter-spacing: 0.04em; color: var(--orange); }
|
|
146
|
+
.step.done .step-num { color: var(--on-light); }
|
|
147
|
+
.step.off .step-num, .step.waiting .step-num { color: var(--muted); }
|
|
148
|
+
.step-num svg { width: 18px; height: 18px; }
|
|
149
|
+
.step-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
|
|
150
|
+
.step-title { font-weight: 800; font-stretch: 74%; font-size: clamp(1.1rem, 1.8vw, 1.45rem); letter-spacing: -0.01em; line-height: 1.05; text-transform: uppercase; }
|
|
151
|
+
.step.off .step-title, .step.off .step-why { opacity: 0.45; }
|
|
152
|
+
.step-why { max-width: 70ch; margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
|
|
153
|
+
.step .btn { margin-top: 14px; }
|
|
154
|
+
.cmd { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin-top: 14px; padding: 10px 10px 10px 16px; color: var(--on-dark); background: var(--ink); border-left: 2px solid var(--orange); }
|
|
155
|
+
.cmd code { font: 12.5px/1.5 var(--mono); overflow-wrap: anywhere; }
|
|
156
|
+
.cmd svg { flex: none; opacity: 0.6; }
|
|
157
|
+
.cmd-copy { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1px solid var(--line-dark); color: var(--on-dark); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
|
|
158
|
+
.cmd-copy:hover { color: var(--orange); border-color: var(--orange); }
|
|
159
|
+
|
|
160
|
+
/* --- connect your AI tool: an index of tools, one tool's page ------------ */
|
|
161
|
+
.ai { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 34px; padding-top: 18px; }
|
|
162
|
+
@media (max-width: 900px) { .ai { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
|
|
163
|
+
.ai-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
|
|
164
|
+
@media (max-width: 900px) { .ai-tabs { flex-direction: row; flex-wrap: wrap; } }
|
|
165
|
+
.ai-tab { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 13px 8px 13px 14px; text-align: left; border-bottom: 1px solid var(--line); transition: color 0.3s var(--ease), padding 0.3s var(--ease); }
|
|
166
|
+
.ai-tab .ai-num { font: 10px var(--mono); color: var(--muted); }
|
|
167
|
+
.ai-tab .ai-name { font-weight: 800; font-stretch: 74%; text-transform: uppercase; }
|
|
168
|
+
.ai-tab .ai-tag { margin-left: auto; font: 9px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
|
|
169
|
+
.ai-tab:hover, .ai-tab.on { color: var(--orange-deep); }
|
|
170
|
+
.ai-tab.on { padding-left: 20px; }
|
|
171
|
+
.ai-tab.on::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; width: 3px; background: var(--orange); }
|
|
172
|
+
.ai-panel h4 { margin: 10px 0 0; font-weight: 900; font-stretch: 63%; font-size: clamp(2rem, 4vw, 3rem); line-height: 0.95; text-transform: uppercase; }
|
|
173
|
+
.ai-badge { font: 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
|
|
174
|
+
.ai-badge.tested { color: var(--orange-deep); }
|
|
175
|
+
.ai-steps { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
|
|
176
|
+
.ai-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 12px 0; font-size: 14px; line-height: 1.55; border-bottom: 1px solid var(--line); }
|
|
177
|
+
.ai-steps li span { font: 13px var(--mono); color: var(--orange); }
|
|
178
|
+
.ai-oneclick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
|
|
179
|
+
.ai-oneclick small { font: 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
|
|
180
|
+
.ai-plate { margin-top: 18px; color: var(--on-dark); background: var(--ink); }
|
|
181
|
+
.ai-plate-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; font: 10.5px var(--mono); border-bottom: 1px solid var(--line-dark); }
|
|
182
|
+
.ai-plate-bar span { opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
183
|
+
.ai-plate-bar button { flex: none; padding: 6px 12px; font: 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line-dark); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
|
|
184
|
+
.ai-plate-bar button:hover { color: var(--orange); border-color: var(--orange); }
|
|
185
|
+
.ai-plate pre { margin: 0; padding: 16px 14px 18px; overflow-x: auto; font: 12.5px/1.7 var(--mono); white-space: pre; }
|
|
186
|
+
.ai-note { max-width: 66ch; margin: 14px 0 0; padding-left: 14px; font-size: 13.5px; line-height: 1.6; color: var(--muted); border-left: 2px solid var(--orange); }
|
|
187
|
+
.ai-then { margin-top: 20px; font-size: 14px; }
|
|
188
|
+
.ai-then b { font-weight: 900; font-stretch: 63%; font-size: 1.6rem; text-transform: uppercase; }
|
|
189
|
+
|
|
190
|
+
/* --- tags: orange acts, ink states --------------------------------------- */
|
|
191
|
+
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 9.5px; letter-spacing: 0.12em; white-space: nowrap; color: var(--muted); border: 1px solid var(--line); }
|
|
192
|
+
.tag.ember, .tag.sun { color: var(--orange-deep); border-color: var(--orange); }
|
|
193
|
+
.tag.amber { color: var(--on-light); border-style: dashed; border-color: rgba(18, 22, 29, 0.45); }
|
|
194
|
+
.tag.leaf { color: var(--on-light); border-color: var(--on-light); }
|
|
195
|
+
.tag.leaf::before { content: "✓"; }
|
|
196
|
+
.tag.dusk, .tag.muted { color: var(--muted); }
|
|
197
|
+
.tag .g-dot { width: 6px; height: 6px; background: currentColor; }
|
|
198
|
+
.tag .g-half { width: 7px; height: 7px; border: 1px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
|
|
199
|
+
.step-head .tag { font-size: 9px; }
|
|
200
|
+
|
|
201
|
+
/* --- findings: one row each, a rule down the side ------------------------ */
|
|
202
|
+
.finding { border-bottom: 1px solid var(--line); }
|
|
203
|
+
.finding.bad { box-shadow: inset 3px 0 0 var(--orange); }
|
|
204
|
+
.finding.warn { box-shadow: inset 3px 0 0 rgba(18, 22, 29, 0.35); }
|
|
205
|
+
.finding-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 8px 18px 20px; text-align: left; transition: background 0.3s var(--ease); }
|
|
206
|
+
.finding-head:hover { background: rgba(18, 22, 29, 0.035); }
|
|
207
|
+
.finding-head > svg { flex: none; color: var(--muted); }
|
|
208
|
+
.finding-left { flex: 1; min-width: 0; }
|
|
209
|
+
.f-title { font-weight: 800; font-stretch: 74%; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -0.01em; line-height: 1.1; text-transform: uppercase; }
|
|
210
|
+
.f-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
|
|
211
|
+
.f-where { font: 11px/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
|
|
212
|
+
.detail-box { margin: 0 8px 22px 20px; padding: 18px 0 0; border-top: 1px dashed var(--line); }
|
|
213
|
+
.d-step { margin-top: 18px; font-size: 10px; color: var(--orange-deep); }
|
|
214
|
+
.d-step:first-child { margin-top: 0; }
|
|
215
|
+
.d-text { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
|
|
216
|
+
.detail-box pre { max-height: 360px; margin: 10px 0 0; padding: 18px; overflow: auto; font: 12px/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--on-dark); background: var(--ink); }
|
|
217
|
+
.d-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
|
|
218
|
+
.attempts { display: grid; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); }
|
|
219
|
+
.attempts div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
|
|
220
|
+
.empty { padding: 18px 0; font-size: 14px; color: var(--muted); }
|
|
221
|
+
|
|
222
|
+
/* --- what changed -------------------------------------------------------- */
|
|
223
|
+
.timeline { display: grid; }
|
|
224
|
+
.tl { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
|
|
225
|
+
.tl .knob { width: 10px; height: 10px; margin-top: 7px; border: 1px solid var(--on-light); }
|
|
226
|
+
.tl .knob.bad { background: var(--orange); border-color: var(--orange); }
|
|
227
|
+
.tl .knob.ok { background: var(--on-light); }
|
|
228
|
+
.tl .knob.mid { border-style: dashed; }
|
|
229
|
+
.tl-head { font-weight: 800; font-stretch: 74%; font-size: 1.1rem; text-transform: uppercase; letter-spacing: -0.01em; }
|
|
230
|
+
.tl-meta { margin-top: 4px; font-size: 10px; color: var(--muted); }
|
|
231
|
+
.tl-body { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
|
|
232
|
+
.tl-files { display: grid; gap: 2px; margin-top: 10px; font: 11.5px/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
|
|
233
|
+
|
|
234
|
+
/* --- checks -------------------------------------------------------------- */
|
|
235
|
+
.check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
|
|
236
|
+
@media (max-width: 1100px) { .check-grid { grid-template-columns: minmax(0, 1fr); } }
|
|
237
|
+
.check { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 24px; background: var(--glacier); }
|
|
238
|
+
.check .c-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
|
239
|
+
.check .c-name { font-weight: 800; font-stretch: 74%; font-size: 1.2rem; line-height: 1.05; text-transform: uppercase; }
|
|
240
|
+
.check .c-what { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
|
|
241
|
+
.check .btn { align-self: flex-start; margin-top: auto; }
|
|
242
|
+
.na-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); border-top: 1px solid var(--line); }
|
|
243
|
+
.na { display: flex; align-items: center; gap: 12px; padding: 14px 4px; font-weight: 700; font-stretch: 74%; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
|
|
244
|
+
.na .na-lock { display: block; margin-top: 2px; font-size: 9px; font-weight: 400; color: rgba(18, 22, 29, 0.42); }
|
|
245
|
+
.na .switch { opacity: 0.45; }
|
|
246
|
+
.switch { position: relative; width: 42px; height: 22px; flex: none; }
|
|
247
|
+
.switch input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
|
|
248
|
+
.switch input:disabled { cursor: not-allowed; }
|
|
249
|
+
.switch .track { position: absolute; inset: 0; border: 1px solid var(--on-light); transition: background 0.3s var(--ease), border-color 0.3s var(--ease); }
|
|
250
|
+
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--on-light); transition: transform 0.3s var(--ease), background 0.3s var(--ease); }
|
|
251
|
+
.switch input:checked + .track { background: var(--orange); border-color: var(--orange); }
|
|
252
|
+
.switch input:checked + .track::after { background: var(--white); transform: translateX(20px); }
|
|
253
|
+
.switch input:focus-visible + .track { outline: 2px solid var(--orange); outline-offset: 2px; }
|
|
254
|
+
|
|
255
|
+
/* --- simple lists -------------------------------------------------------- */
|
|
256
|
+
.line-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--line); }
|
|
257
|
+
.lr-text { flex: 1; min-width: 200px; font-weight: 700; font-stretch: 80%; }
|
|
258
|
+
.lr-sub { margin-top: 3px; font-size: 10px; letter-spacing: 0.06em; text-transform: none; color: var(--muted); overflow-wrap: anywhere; }
|
|
259
|
+
.note { max-width: 70ch; margin: 18px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted); overflow-wrap: anywhere; }
|
|
260
|
+
.path { margin-top: 14px; padding: 14px 16px; font: 12.5px/1.5 var(--mono); color: var(--on-dark); background: var(--ink); border-left: 2px solid var(--orange); overflow-wrap: anywhere; }
|
|
261
|
+
.files { display: grid; margin-top: 20px; border-top: 1px solid var(--line); }
|
|
262
|
+
.files div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; padding: 10px 0; font-size: 13.5px; border-bottom: 1px solid var(--line); }
|
|
263
|
+
.files code { font: 12px/1.5 var(--mono); }
|
|
264
|
+
.files span { color: var(--muted); }
|
|
265
|
+
@media (max-width: 600px) { .files div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
|
|
266
|
+
|
|
267
|
+
/* --- a run in progress, and what it said ---------------------------------- */
|
|
268
|
+
.job { margin: 0 0 28px; padding: 16px 18px 18px; color: var(--on-dark); background: var(--ink); border-left: 3px solid var(--orange); }
|
|
269
|
+
.job.ok { border-left-color: var(--on-dark); }
|
|
270
|
+
.job-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
|
|
271
|
+
.job-head b { font-weight: 800; font-stretch: 74%; font-size: 1.1rem; text-transform: uppercase; overflow-wrap: anywhere; }
|
|
272
|
+
.job-head .tag { color: var(--on-dark); border-color: var(--line-dark); }
|
|
273
|
+
.job-close { margin-left: auto; padding: 4px 10px; font: 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--line-dark); }
|
|
274
|
+
.job-lines { max-height: 260px; margin: 12px 0 0; overflow: auto; font: 12px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; opacity: 0.85; }
|
|
275
|
+
.job-result { margin-top: 12px; font-weight: 700; }
|
|
276
|
+
.job .fallback { color: rgba(233, 237, 242, 0.6); }
|
|
277
|
+
|
|
278
|
+
/* --- boxes to type into, the words around them, and the yes -------------- */
|
|
279
|
+
.controls { display: grid; gap: 10px; margin-top: 14px; max-width: 760px; }
|
|
280
|
+
.field-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
|
|
281
|
+
.field { flex: 1; min-width: 220px; width: 100%; padding: 10px 12px; font: 13px/1.4 var(--mono); color: var(--on-light); background: var(--white); border: 1px solid var(--on-light); border-radius: 0; }
|
|
282
|
+
.field-row .btn { margin-top: 0; }
|
|
283
|
+
.field-note { font-size: 13px; line-height: 1.55; color: var(--muted); }
|
|
284
|
+
.controls pre { margin: 0; padding: 14px 16px; font: 12px/1.65 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
285
|
+
.controls pre.help { color: var(--on-light); background: rgba(18, 22, 29, 0.05); border-left: 2px solid var(--on-light); }
|
|
286
|
+
.controls pre.warn { color: var(--orange-deep); background: rgba(255, 77, 0, 0.06); border-left: 2px solid var(--orange); }
|
|
287
|
+
.consent { display: grid; gap: 10px; }
|
|
288
|
+
.act { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
|
|
289
|
+
.act .btn, .step .act .btn { margin-top: 0; }
|
|
290
|
+
.step .act { margin-top: 14px; }
|
|
291
|
+
.act-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
|
|
292
|
+
.act-row .act { margin-top: 0; }
|
|
293
|
+
.fallback { font: 10.5px/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
|
|
294
|
+
.tag.when { color: var(--on-light); border-style: dotted; }
|
|
295
|
+
.f-quick { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 0 8px 16px 20px; margin-top: -6px; }
|
|
296
|
+
.rechecked { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 8px 14px 20px; font-size: 14px; border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--on-light); }
|
|
297
|
+
|
|
298
|
+
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 10; max-width: calc(100vw - 32px); padding: 14px 20px; font-size: 14px; color: var(--on-dark); background: var(--ink); border-left: 2px solid var(--orange); opacity: 0; transform: translate(-50%, 20px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); pointer-events: none; }
|
|
299
|
+
.toast.show { opacity: 1; transform: translate(-50%, 0); }
|
|
300
|
+
|
|
301
|
+
@media (prefers-reduced-motion: reduce) {
|
|
302
|
+
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
|
|
303
|
+
}
|
|
304
|
+
</style>
|
|
305
|
+
</head>
|
|
306
|
+
<body>
|
|
307
|
+
<div class="shell">
|
|
308
|
+
<aside class="side">
|
|
309
|
+
<div class="brand">
|
|
310
|
+
<img src="/logo.png" alt="Kryptheon logo" width="40" height="40">
|
|
311
|
+
<div class="wordmark">Kryptheon<span class="dot">.</span><small>checks what your AI built</small></div>
|
|
312
|
+
</div>
|
|
313
|
+
<nav class="nav" id="nav"></nav>
|
|
314
|
+
<div class="built">
|
|
315
|
+
<div class="built-top"><span>Checks built</span><b id="builtText">-</b></div>
|
|
316
|
+
<div class="meter"><i id="builtBar" style="width:0%"></i></div>
|
|
317
|
+
<p id="builtNote"></p>
|
|
318
|
+
</div>
|
|
319
|
+
<a class="site-link" href="https://kryptheon.tech" target="_blank" rel="noopener noreferrer">kryptheon.tech</a>
|
|
320
|
+
</aside>
|
|
321
|
+
|
|
322
|
+
<main>
|
|
323
|
+
<div class="top">
|
|
324
|
+
<div>
|
|
325
|
+
<h1 id="viewTitle">Dashboard</h1>
|
|
326
|
+
<div class="sub"><span class="live-dot"></span><span id="subline">Watching for changes</span></div>
|
|
327
|
+
</div>
|
|
328
|
+
<div class="grow"></div>
|
|
329
|
+
<button class="btn sun" id="runAll" type="button" data-action="run"></button>
|
|
330
|
+
</div>
|
|
331
|
+
|
|
332
|
+
<section class="job" id="job" hidden aria-live="polite"></section>
|
|
333
|
+
|
|
334
|
+
<section class="view" id="view-dashboard">
|
|
335
|
+
<div class="sky" id="sky">
|
|
336
|
+
<div class="s-chip" id="skyIcon"></div>
|
|
337
|
+
<div class="s-text">
|
|
338
|
+
<div class="eyebrow" id="skyEyebrow">Do this next</div>
|
|
339
|
+
<h2 id="skyTitle">Reading your project...</h2>
|
|
340
|
+
<p id="skySub"></p>
|
|
341
|
+
</div>
|
|
342
|
+
<div id="skyActions"></div>
|
|
343
|
+
</div>
|
|
344
|
+
<div class="card gap">
|
|
345
|
+
<div class="card-head"><div><h3>Start here</h3><div class="c-sub">Do these in order. A step is done only once it has actually run.</div></div></div>
|
|
346
|
+
<div class="steps" id="steps"></div>
|
|
347
|
+
</div>
|
|
348
|
+
<div class="card gap">
|
|
349
|
+
<div class="card-head"><div><h3>Connect your AI tool</h3><div class="c-sub">Optional - your assistant then checks its own work, and does not call a change done until the check passes</div></div></div>
|
|
350
|
+
<div class="ai">
|
|
351
|
+
<div class="ai-tabs" id="aiTabs" role="tablist" aria-label="Your AI tool"></div>
|
|
352
|
+
<div class="ai-panel" id="aiPanel" role="tabpanel"></div>
|
|
353
|
+
</div>
|
|
354
|
+
</div>
|
|
355
|
+
</section>
|
|
356
|
+
|
|
357
|
+
<section class="view" id="view-findings" hidden>
|
|
358
|
+
<div class="card">
|
|
359
|
+
<div class="card-head">
|
|
360
|
+
<div><div class="c-sub">Open one: what is wrong, the fix prompt, then Re-check</div></div>
|
|
361
|
+
<span class="badge" id="findingBadge">0</span>
|
|
362
|
+
<div class="grow"></div>
|
|
363
|
+
<div class="seg" id="statusFilter"></div>
|
|
364
|
+
</div>
|
|
365
|
+
<div id="findingList"></div>
|
|
366
|
+
</div>
|
|
367
|
+
</section>
|
|
368
|
+
|
|
369
|
+
<section class="view" id="view-changes" hidden>
|
|
370
|
+
<div class="card">
|
|
371
|
+
<div class="card-head"><div><div class="c-sub">Every look Kryptheon took, newest first</div></div><span class="badge" id="lookBadge">0</span></div>
|
|
372
|
+
<div class="timeline" id="timeline"></div>
|
|
373
|
+
</div>
|
|
374
|
+
</section>
|
|
375
|
+
|
|
376
|
+
<section class="view" id="view-fixes" hidden>
|
|
377
|
+
<div class="card">
|
|
378
|
+
<div class="card-head"><div><div class="c-sub">Fixed only when a re-check said so</div></div><span class="badge" id="fixBadge">0</span></div>
|
|
379
|
+
<div id="fixList"></div>
|
|
380
|
+
</div>
|
|
381
|
+
</section>
|
|
382
|
+
|
|
383
|
+
<section class="view" id="view-checks" hidden>
|
|
384
|
+
<div class="check-grid" id="checkList"></div>
|
|
385
|
+
<div class="card gap">
|
|
386
|
+
<div class="card-head"><div><h3>Not built yet</h3><div class="c-sub">Listed so you know they exist - never shown as passed</div></div><span class="badge" id="naBadge">0</span></div>
|
|
387
|
+
<div class="na-grid" id="naList"></div>
|
|
388
|
+
</div>
|
|
389
|
+
</section>
|
|
390
|
+
|
|
391
|
+
<section class="view" id="view-runs" hidden>
|
|
392
|
+
<div class="card">
|
|
393
|
+
<div class="card-head"><div><div class="c-sub">Your recorded flows, replayed against your app</div></div><span class="badge" id="runBadge">0</span></div>
|
|
394
|
+
<div id="runList"></div>
|
|
395
|
+
</div>
|
|
396
|
+
</section>
|
|
397
|
+
|
|
398
|
+
<section class="view" id="view-storage" hidden>
|
|
399
|
+
<div class="card">
|
|
400
|
+
<div class="card-head"><div><div class="c-sub">On this machine, outside your project</div></div></div>
|
|
401
|
+
<p class="note" id="storeNote"></p>
|
|
402
|
+
<div class="path" id="storePath"></div>
|
|
403
|
+
<div class="files" id="storeFiles"></div>
|
|
404
|
+
</div>
|
|
405
|
+
</section>
|
|
406
|
+
</main>
|
|
407
|
+
</div>
|
|
408
|
+
<div class="toast" id="toast" role="status" aria-live="polite"></div>
|
|
409
|
+
<script src="/dashboard.js"></script>
|
|
410
|
+
</body>
|
|
411
|
+
</html>
|