@enigmax/dashboard 0.1.13 → 0.1.14
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/assets/index.html +51 -17
- package/package.json +1 -1
package/assets/index.html
CHANGED
|
@@ -8,40 +8,67 @@
|
|
|
8
8
|
:root {
|
|
9
9
|
--bg: #0b0e14; --surface: #151a23; --surface2: #1b2230; --border: #232a36;
|
|
10
10
|
--text: #e6e6e6; --muted: #8a93a3; --accent: #e0a458; --accent2: #d7875f; --good: #6fcf97;
|
|
11
|
+
/* Type roles: a monospace "machine readout" face carries the brand, headings,
|
|
12
|
+
labels and numeric data (this is a CLI tool's dashboard); sans carries prose. */
|
|
13
|
+
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
|
|
14
|
+
--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
15
|
+
--ring: rgba(224,164,88,0.6);
|
|
11
16
|
}
|
|
12
17
|
* { box-sizing: border-box; }
|
|
13
18
|
body {
|
|
14
19
|
margin: 0; background: var(--bg); color: var(--text);
|
|
15
|
-
font-family:
|
|
20
|
+
font-family: var(--sans);
|
|
16
21
|
-webkit-font-smoothing: antialiased; padding: 24px; max-width: 2200px; margin: 0 auto;
|
|
17
22
|
}
|
|
18
23
|
a { color: var(--accent2); }
|
|
24
|
+
/* Quality floor: one visible keyboard-focus ring for every interactive control
|
|
25
|
+
(the custom-styled buttons/tabs/links carry no native outline otherwise). */
|
|
26
|
+
a:focus-visible, button:focus-visible, select:focus-visible,
|
|
27
|
+
input:focus-visible, [tabindex]:focus-visible {
|
|
28
|
+
outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px;
|
|
29
|
+
}
|
|
30
|
+
@media (prefers-reduced-motion: reduce) {
|
|
31
|
+
*, *::before, *::after {
|
|
32
|
+
animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
|
|
33
|
+
transition-duration: 0.01ms !important;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
19
36
|
header { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
|
|
20
|
-
.brand { display: flex; flex-direction: column; }
|
|
21
|
-
.wordmark {
|
|
22
|
-
|
|
23
|
-
|
|
37
|
+
.brand { display: flex; flex-direction: column; gap: 3px; }
|
|
38
|
+
.wordmark {
|
|
39
|
+
font-family: var(--mono); font-size: 19px; font-weight: 600; letter-spacing: 0.5px;
|
|
40
|
+
display: inline-flex; align-items: center;
|
|
41
|
+
}
|
|
42
|
+
/* Signature: a blinking block caret turns the wordmark into a live terminal prompt. */
|
|
43
|
+
.wordmark span {
|
|
44
|
+
display: inline-block; width: 0.46em; height: 1.05em; margin-left: 4px;
|
|
45
|
+
background: var(--accent); transform: translateY(1px); text-indent: -9999px; overflow: hidden;
|
|
46
|
+
animation: caret 1.1s steps(1, end) infinite;
|
|
47
|
+
}
|
|
48
|
+
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
|
|
49
|
+
.sub { font-family: var(--mono); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; }
|
|
24
50
|
.tabs { display: flex; gap: 4px; }
|
|
25
51
|
.tabs .tab {
|
|
26
|
-
text-decoration: none; color: var(--muted); font-size:
|
|
27
|
-
padding: 7px
|
|
52
|
+
font-family: var(--mono); text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 600;
|
|
53
|
+
padding: 7px 14px; border-radius: 8px; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
|
|
28
54
|
}
|
|
29
55
|
.tabs .tab:hover { color: var(--text); background: var(--surface); }
|
|
30
56
|
.tabs .tab.active { color: var(--accent); background: var(--surface); border-color: var(--border); }
|
|
31
|
-
.live { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
|
|
57
|
+
.live { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-family: var(--mono); }
|
|
32
58
|
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }
|
|
33
59
|
.dot.stale { background: var(--muted); box-shadow: none; }
|
|
34
60
|
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
|
|
35
|
-
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
|
|
36
|
-
.card
|
|
37
|
-
.card .
|
|
61
|
+
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; transition: border-color .15s; }
|
|
62
|
+
.card:hover { border-color: var(--surface2); }
|
|
63
|
+
.card .label { font-family: var(--mono); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; }
|
|
64
|
+
.card .value { font-family: var(--mono); font-size: 28px; font-weight: 600; margin-top: 8px; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
|
|
38
65
|
.card .value.accent { color: var(--accent); }
|
|
39
66
|
.card .value.good { color: var(--good); }
|
|
40
67
|
.card .foot { color: var(--muted); font-size: 12px; margin-top: 4px; }
|
|
41
68
|
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 20px; }
|
|
42
69
|
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
|
|
43
|
-
.panel h2 { font-size:
|
|
44
|
-
.panel h2 small { color: var(--muted); font-weight: 400; margin-left: 8px; }
|
|
70
|
+
.panel h2 { font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin: 0; color: var(--text); }
|
|
71
|
+
.panel h2 small { font-family: var(--sans); color: var(--muted); font-weight: 400; font-size: 12px; text-transform: none; letter-spacing: 0; margin-left: 8px; }
|
|
45
72
|
.ctrls { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
|
|
46
73
|
.ranges { display: flex; gap: 4px; }
|
|
47
74
|
.ranges button {
|
|
@@ -85,11 +112,11 @@
|
|
|
85
112
|
footer { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 8px; }
|
|
86
113
|
code { background: var(--surface2); padding: 1px 6px; border-radius: 5px; color: var(--accent2); }
|
|
87
114
|
.page-head { margin-bottom: 18px; }
|
|
88
|
-
.page-head h1 { font-size: 18px; font-weight:
|
|
115
|
+
.page-head h1 { font-family: var(--mono); font-size: 18px; font-weight: 600; letter-spacing: 0.3px; margin: 0 0 4px; }
|
|
89
116
|
.page-head p { color: var(--muted); font-size: 13px; margin: 0; max-width: 720px; line-height: 1.5; }
|
|
90
117
|
.set-cat { margin-bottom: 18px; }
|
|
91
118
|
.set-cat:last-child { margin-bottom: 0; }
|
|
92
|
-
.set-cat-h { color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: 0.
|
|
119
|
+
.set-cat-h { font-family: var(--mono); color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
|
|
93
120
|
.set-cat-b { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
|
|
94
121
|
.set-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--surface2); }
|
|
95
122
|
.set-row:last-child { border-bottom: none; }
|
|
@@ -173,13 +200,20 @@
|
|
|
173
200
|
.pill.on { color: #06210f; background: var(--good); border-color: var(--good); font-weight: 600; }
|
|
174
201
|
.pill.off { color: var(--muted); background: var(--surface2); }
|
|
175
202
|
.pill.lvl { color: #1a1206; background: var(--accent); border-color: var(--accent); font-weight: 600; }
|
|
176
|
-
@media (max-width: 720px) {
|
|
203
|
+
@media (max-width: 720px) {
|
|
204
|
+
body { padding: 16px; }
|
|
205
|
+
.grid { grid-template-columns: repeat(2, 1fr); }
|
|
206
|
+
header { gap: 12px; }
|
|
207
|
+
.tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
|
208
|
+
.tabs .tab { white-space: nowrap; }
|
|
209
|
+
.nav { margin-left: 0; }
|
|
210
|
+
}
|
|
177
211
|
</style>
|
|
178
212
|
</head>
|
|
179
213
|
<body>
|
|
180
214
|
<header>
|
|
181
215
|
<div class="brand">
|
|
182
|
-
<div class="wordmark">Enigma<span>.</span></div>
|
|
216
|
+
<div class="wordmark">Enigma<span aria-hidden="true">.</span></div>
|
|
183
217
|
<div class="sub">Savings dashboard</div>
|
|
184
218
|
</div>
|
|
185
219
|
<nav class="tabs">
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@enigmax/dashboard",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.14",
|
|
4
4
|
"description": "Local browser dashboard UI for enigma: the static page and chart assets enigma serves on its loopback dashboard (savings, real tool usage, in-browser settings). Installed on demand by enigma-cli; not a runtime dependency.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|