Skip to content

Commit 785f04d

Browse files
aboseabose
committed
restore old graphs as it was simpler and human readable.
1 parent 1361900 commit 785f04d

5 files changed

Lines changed: 1652 additions & 1045 deletions

File tree

‎docs/download-graphs-detailed.css‎

Lines changed: 359 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,359 @@
1+
/* ============================================================
2+
Phoenix Code — Download Stats Dashboard
3+
Zero-build design system (brand-aligned, light + dark)
4+
============================================================ */
5+
6+
:root {
7+
/* Phoenix Code brand (from phoenix-logo.svg) */
8+
--brand-red: #F90000;
9+
--brand-orange: #FF9900;
10+
--brand-amber: #FE8515;
11+
--brand-amber-2: #FE9615;
12+
--brand-amber-3: #FAAA47;
13+
--brand-gradient: linear-gradient(135deg, #FF9900 0%, #F90000 100%);
14+
15+
/* Platform accent colors (kept conventional for instant recognition) */
16+
--c-windows: #3B82F6;
17+
--c-mac: #8A8F98;
18+
--c-linux: #FE8515;
19+
--c-silicon: #16A34A;
20+
--c-intel: #0EA5E9;
21+
--c-installer: #FE8515;
22+
--c-updater: #7C3AED;
23+
--c-primary: #F90000;
24+
--c-ma: #111827;
25+
26+
/* Surfaces & text */
27+
--bg: #f5f6f8;
28+
--surface: #ffffff;
29+
--surface-2: #fbfbfc;
30+
--text: #1b2030;
31+
--muted: #69707d;
32+
--border: #e7e9ee;
33+
--grid: rgba(20, 24, 35, 0.06);
34+
--shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);
35+
--radius: 14px;
36+
--radius-sm: 9px;
37+
--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
38+
}
39+
40+
[data-theme="dark"] {
41+
--bg: #0e1117;
42+
--surface: #161b22;
43+
--surface-2: #1b2129;
44+
--text: #e8ebf2;
45+
--muted: #9aa3b2;
46+
--border: #272d38;
47+
--grid: rgba(255, 255, 255, 0.07);
48+
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
49+
--c-ma: #f3f4f6;
50+
--c-mac: #aab0ba;
51+
}
52+
53+
* { box-sizing: border-box; }
54+
55+
html, body {
56+
margin: 0;
57+
padding: 0;
58+
background: var(--bg);
59+
color: var(--text);
60+
font-family: var(--font);
61+
-webkit-font-smoothing: antialiased;
62+
text-rendering: optimizeLegibility;
63+
}
64+
65+
a { color: var(--brand-amber); text-decoration: none; }
66+
a:hover { text-decoration: underline; }
67+
68+
/* ---------- Header ---------- */
69+
.site-header {
70+
position: sticky;
71+
top: 0;
72+
z-index: 50;
73+
display: flex;
74+
align-items: center;
75+
gap: 14px;
76+
padding: 14px 24px;
77+
background: color-mix(in srgb, var(--surface) 88%, transparent);
78+
backdrop-filter: saturate(1.4) blur(10px);
79+
border-bottom: 1px solid var(--border);
80+
}
81+
.site-header .logo { width: 30px; height: 30px; }
82+
.site-header h1 {
83+
font-size: 1.06rem;
84+
font-weight: 700;
85+
margin: 0;
86+
letter-spacing: -0.01em;
87+
}
88+
.site-header h1 .accent {
89+
background: var(--brand-gradient);
90+
-webkit-background-clip: text;
91+
background-clip: text;
92+
-webkit-text-fill-color: transparent;
93+
}
94+
.header-spacer { flex: 1; }
95+
.header-actions { display: flex; align-items: center; gap: 8px; }
96+
.icon-btn {
97+
display: inline-flex;
98+
align-items: center;
99+
justify-content: center;
100+
width: 38px;
101+
height: 38px;
102+
border-radius: 10px;
103+
border: 1px solid var(--border);
104+
background: var(--surface);
105+
color: var(--text);
106+
cursor: pointer;
107+
font-size: 0.95rem;
108+
transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
109+
}
110+
.icon-btn:hover { background: var(--surface-2); border-color: var(--brand-amber); transform: translateY(-1px); }
111+
112+
.btn-download {
113+
display: inline-flex;
114+
align-items: center;
115+
gap: 8px;
116+
height: 38px;
117+
padding: 0 16px;
118+
border-radius: 10px;
119+
background: var(--brand-gradient);
120+
color: #fff;
121+
font-weight: 600;
122+
font-size: 0.9rem;
123+
border: none;
124+
box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-red) 30%, transparent);
125+
transition: transform 0.15s ease, box-shadow 0.15s ease;
126+
white-space: nowrap;
127+
}
128+
.btn-download:hover { transform: translateY(-1px); text-decoration: none; color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-red) 42%, transparent); }
129+
130+
@media (max-width: 560px) {
131+
.btn-download .btn-text { display: none; }
132+
.btn-download { padding: 0 12px; }
133+
}
134+
135+
/* ---------- Layout ---------- */
136+
main {
137+
max-width: 1200px;
138+
margin: 0 auto;
139+
padding: 28px 24px 80px;
140+
}
141+
.section-title {
142+
display: flex;
143+
align-items: center;
144+
gap: 10px;
145+
font-size: 1.18rem;
146+
font-weight: 700;
147+
margin: 34px 0 16px;
148+
letter-spacing: -0.01em;
149+
}
150+
.section-title .ic { color: var(--brand-amber); }
151+
.section-sub { color: var(--muted); font-weight: 400; font-size: 0.85rem; margin-left: auto; }
152+
153+
/* ---------- KPI cards ---------- */
154+
.kpi-grid {
155+
display: grid;
156+
grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
157+
gap: 16px;
158+
}
159+
.kpi {
160+
background: var(--surface);
161+
border: 1px solid var(--border);
162+
border-radius: var(--radius);
163+
padding: 18px;
164+
box-shadow: var(--shadow);
165+
position: relative;
166+
overflow: hidden;
167+
}
168+
.kpi::before {
169+
content: "";
170+
position: absolute;
171+
left: 0; top: 0; bottom: 0;
172+
width: 3px;
173+
background: var(--brand-gradient);
174+
opacity: 0.9;
175+
}
176+
.kpi-head { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
177+
.kpi-head .ic {
178+
width: 26px; height: 26px;
179+
display: inline-flex; align-items: center; justify-content: center;
180+
border-radius: 8px;
181+
background: color-mix(in srgb, var(--brand-amber) 16%, transparent);
182+
color: var(--brand-amber);
183+
font-size: 0.8rem;
184+
}
185+
.kpi-value { font-size: 1.85rem; font-weight: 800; margin: 10px 0 2px; letter-spacing: -0.02em; }
186+
.kpi-sub { font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
187+
.delta { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
188+
.delta.up { color: #16a34a; }
189+
.delta.down { color: #dc2626; }
190+
.delta.flat { color: var(--muted); }
191+
192+
/* ---------- Chart cards ---------- */
193+
.card {
194+
background: var(--surface);
195+
border: 1px solid var(--border);
196+
border-radius: var(--radius);
197+
padding: 18px 20px 20px;
198+
box-shadow: var(--shadow);
199+
margin-bottom: 20px;
200+
}
201+
.card-head {
202+
display: flex;
203+
align-items: center;
204+
flex-wrap: wrap;
205+
gap: 10px;
206+
margin-bottom: 6px;
207+
}
208+
.card-head h3 { font-size: 1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
209+
.card-head h3 .ic { color: var(--brand-amber); }
210+
.card-head .spacer { flex: 1; }
211+
.card-note {
212+
font-size: 0.78rem;
213+
color: var(--muted);
214+
margin: 2px 0 12px;
215+
display: flex;
216+
align-items: center;
217+
gap: 6px;
218+
}
219+
.card-note .fa-circle-info { color: var(--brand-amber); }
220+
.chart-wrap { position: relative; height: 340px; }
221+
.chart-wrap.tall { height: 420px; }
222+
223+
.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: stretch; }
224+
.grid-2 .card { margin-bottom: 0; }
225+
226+
/* ---------- Controls ---------- */
227+
.controls {
228+
display: flex;
229+
flex-wrap: wrap;
230+
align-items: center;
231+
gap: 14px 20px;
232+
background: var(--surface);
233+
border: 1px solid var(--border);
234+
border-radius: var(--radius);
235+
padding: 14px 18px;
236+
box-shadow: var(--shadow);
237+
margin-bottom: 20px;
238+
}
239+
.control { display: flex; flex-direction: column; gap: 6px; }
240+
.control > label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
241+
.control-row { display: flex; align-items: center; gap: 8px; }
242+
243+
select, input[type="number"], input[type="text"].num {
244+
padding: 8px 10px;
245+
border-radius: var(--radius-sm);
246+
border: 1px solid var(--border);
247+
background: var(--surface);
248+
color: var(--text);
249+
font-family: inherit;
250+
font-size: 0.88rem;
251+
outline: none;
252+
}
253+
select:focus, input:focus { border-color: var(--brand-amber); }
254+
input.num { width: 56px; text-align: center; }
255+
256+
/* Segmented control (time windows / day-aggregate) */
257+
.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 4px; }
258+
.segmented label { cursor: pointer; }
259+
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
260+
.segmented label span {
261+
display: inline-block;
262+
padding: 6px 12px;
263+
border-radius: 8px;
264+
font-size: 0.82rem;
265+
font-weight: 600;
266+
color: var(--muted);
267+
transition: all 0.15s ease;
268+
white-space: nowrap;
269+
}
270+
.segmented label:hover span { color: var(--text); }
271+
.segmented input:checked + span {
272+
background: var(--brand-gradient);
273+
color: #fff;
274+
box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-red) 35%, transparent);
275+
}
276+
277+
/* ---------- Advanced disclosure ---------- */
278+
.advanced-toggle {
279+
display: inline-flex;
280+
align-items: center;
281+
gap: 10px;
282+
cursor: pointer;
283+
background: var(--surface);
284+
border: 1px solid var(--border);
285+
border-radius: var(--radius);
286+
padding: 14px 18px;
287+
width: 100%;
288+
font-size: 1rem;
289+
font-weight: 700;
290+
color: var(--text);
291+
box-shadow: var(--shadow);
292+
margin-top: 34px;
293+
transition: border-color 0.15s ease;
294+
}
295+
.advanced-toggle:hover { border-color: var(--brand-amber); }
296+
.advanced-toggle .chev { margin-left: auto; color: var(--muted); transition: transform 0.2s ease; }
297+
.advanced-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
298+
.advanced-toggle .ic { color: var(--brand-amber); }
299+
#advancedPanel { margin-top: 18px; }
300+
#advancedPanel[hidden] { display: none; }
301+
302+
/* ---------- States ---------- */
303+
.state {
304+
text-align: center;
305+
padding: 60px 20px;
306+
color: var(--muted);
307+
}
308+
.state .ic { font-size: 2.2rem; color: var(--brand-amber); margin-bottom: 12px; }
309+
.state h3 { margin: 0 0 6px; color: var(--text); }
310+
.spinner {
311+
width: 38px; height: 38px;
312+
border: 3px solid var(--border);
313+
border-top-color: var(--brand-amber);
314+
border-radius: 50%;
315+
margin: 0 auto 16px;
316+
animation: spin 0.8s linear infinite;
317+
}
318+
@keyframes spin { to { transform: rotate(360deg); } }
319+
320+
.badge-warn {
321+
display: inline-flex;
322+
align-items: center;
323+
gap: 5px;
324+
font-size: 0.72rem;
325+
font-weight: 600;
326+
color: #b45309;
327+
background: rgba(245, 158, 11, 0.14);
328+
border-radius: 999px;
329+
padding: 3px 9px;
330+
}
331+
[data-theme="dark"] .badge-warn { color: #fbbf24; }
332+
333+
/* ---------- Footer ---------- */
334+
.site-footer {
335+
max-width: 1200px;
336+
margin: 0 auto;
337+
padding: 24px;
338+
border-top: 1px solid var(--border);
339+
color: var(--muted);
340+
font-size: 0.82rem;
341+
display: flex;
342+
flex-wrap: wrap;
343+
align-items: center;
344+
gap: 10px 18px;
345+
}
346+
.site-footer .ic { color: var(--brand-amber); }
347+
.site-footer .spacer { flex: 1; }
348+
349+
/* ---------- Responsive ---------- */
350+
@media (max-width: 860px) {
351+
.grid-2 { grid-template-columns: 1fr; }
352+
.grid-2 .card { margin-bottom: 20px; }
353+
main { padding: 20px 14px 60px; }
354+
.chart-wrap { height: 300px; }
355+
}
356+
@media (max-width: 520px) {
357+
.kpi-value { font-size: 1.5rem; }
358+
.site-header h1 { font-size: 0.95rem; }
359+
}

0 commit comments

Comments
 (0)