oiupoyt/token-contribution
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

style: add ambient glow and depth shading across tiles, cards, and buttons

Browse source
This commit is contained in:
katR 2026-10-09 13:21:36 +05:30
parent 87eba045a5
commit 59790081bc
4 changed files with 71 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
lib/client.js
View file

@ -63,6 +63,13 @@ var DEEPSEEK_LEVELS = [
"#4f85ff"
// Level 4: Bright electric DeepSeek blue
];
var TILE_SHADOWS = [
"inset 0 1px 2px rgba(0, 0, 0, 0.7)",
"0 0 4px rgba(21, 44, 111, 0.5)",
"0 0 7px rgba(31, 76, 219, 0.65), inset 0 0 2px rgba(255, 255, 255, 0.2)",
"0 0 10px rgba(51, 109, 250, 0.8), inset 0 0 3px rgba(255, 255, 255, 0.35)",
"0 0 14px rgba(79, 133, 255, 0.95), 0 0 3px #ffffff, inset 0 0 4px #ffffff"
];
function HeatmapView() {
const [data, setData] = (0, import_react.useState)(null);
const [loading, setLoading] = (0, import_react.useState)(true);
@ -348,56 +355,60 @@ function HeatmapView() {
"div",
{
style: {
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
background: "radial-gradient(ellipse at 50% 0%, rgba(51, 109, 250, 0.08) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 100%)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 10,
padding: "14px 16px"
padding: "14px 16px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)"
}
},
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, "Total Tokens"),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#4f85ff" } }, formatNumber(summary.totalTokens)),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#4f85ff", textShadow: "0 0 16px rgba(79, 133, 255, 0.65), 0 0 4px rgba(79, 133, 255, 0.4)" } }, formatNumber(summary.totalTokens)),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, formatExact(summary.totalTokens), " tokens")
),
/* @__PURE__ */ import_react.default.createElement(
"div",
{
style: {
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
background: "radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, 0.08) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 100%)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 10,
padding: "14px 16px"
padding: "14px 16px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)"
}
},
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, "Cache Hit Ratio"),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#38bdf8" } }, cacheHitPercent, "%"),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#38bdf8", textShadow: "0 0 14px rgba(56, 189, 248, 0.55)" } }, cacheHitPercent, "%"),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, formatNumber(summary.totalCacheReadTokens), " cached reads")
),
/* @__PURE__ */ import_react.default.createElement(
"div",
{
style: {
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
background: "radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.03) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 100%)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 10,
padding: "14px 16px"
padding: "14px 16px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)"
}
},
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, selectedSessionId === "all" ? "Daily Average" : "Total Steps"),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)" } }, selectedSessionId === "all" ? formatNumber(summary.dailyAverage) : summary.totalTurns),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)", textShadow: "0 0 12px rgba(255, 255, 255, 0.2)" } }, selectedSessionId === "all" ? formatNumber(summary.dailyAverage) : summary.totalTurns),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, selectedSessionId === "all" ? `Across ${summary.activeDays} active days` : `${formatNumber(summary.totalInputTokens + summary.totalOutputTokens)} billed`)
),
/* @__PURE__ */ import_react.default.createElement(
"div",
{
style: {
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
background: "radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.03) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 100%)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 10,
padding: "14px 16px"
padding: "14px 16px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)"
}
},
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 } }, selectedSessionId === "all" ? "Active Streak" : "Active Days"),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)" } }, selectedSessionId === "all" ? `${summary.currentStreak} days` : `${summary.activeDays} days`),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)", textShadow: "0 0 12px rgba(255, 255, 255, 0.2)" } }, selectedSessionId === "all" ? `${summary.currentStreak} days` : `${summary.activeDays} days`),
/* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" } }, selectedSessionId === "all" ? `Longest streak: ${summary.longestStreak} days` : `Session: ${activeView.sessionTitle.slice(0, 24)}`)
)
),
@ -405,12 +416,13 @@ function HeatmapView() {
"div",
{
style: {
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
background: "radial-gradient(ellipse 90% 50% at 50% 0%, rgba(51, 109, 250, 0.09) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 85%)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 12,
padding: "20px 22px",
position: "relative",
overflowX: "auto"
overflowX: "auto",
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06)"
}
},
/* @__PURE__ */ import_react.default.createElement(
@ -481,9 +493,11 @@ function HeatmapView() {
height: 11,
borderRadius: 2,
backgroundColor: bg,
border: lvl === 0 ? "1px solid var(--dsw-alias-border-l1, rgba(255,255,255,0.06))" : "1px solid transparent",
boxShadow: TILE_SHADOWS[lvl],
border: lvl === 0 ? "1px solid rgba(255, 255, 255, 0.05)" : "1px solid transparent",
cursor: "pointer",
transition: "transform 0.1s ease, filter 0.1s ease"
transition: "all 0.12s ease",
position: "relative"
}
}
);
@ -510,7 +524,8 @@ function HeatmapView() {
height: 11,
borderRadius: 2,
backgroundColor: c,
border: i === 0 ? "1px solid var(--dsw-alias-border-l1)" : "none"
boxShadow: TILE_SHADOWS[i],
border: i === 0 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
}
}
)),
@ -683,15 +698,18 @@ function apply(ctx) {
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
box-shadow: 0 0 14px rgba(51, 109, 250, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: all 0.15s ease;
`;
button.onmouseenter = () => {
button.style.background = "rgba(51, 109, 250, 0.22)";
button.style.borderColor = "#336dfa";
button.style.boxShadow = "0 0 20px rgba(79, 133, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15)";
};
button.onmouseleave = () => {
button.style.background = "rgba(51, 109, 250, 0.12)";
button.style.borderColor = "rgba(51, 109, 250, 0.35)";
button.style.boxShadow = "0 0 14px rgba(51, 109, 250, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08)";
};
button.onclick = (e) => {
e.preventDefault();

4
lib/client.js.map
View file

File diff suppressed because one or more lines are too long

41
src/client/HeatmapView.tsx
View file

@ -66,6 +66,15 @@ const DEEPSEEK_LEVELS = [
"#4f85ff", // Level 4: Bright electric DeepSeek blue
];
// Luminous glow & depth shading for tiles
const TILE_SHADOWS = [
"inset 0 1px 2px rgba(0, 0, 0, 0.7)",
"0 0 4px rgba(21, 44, 111, 0.5)",
"0 0 7px rgba(31, 76, 219, 0.65), inset 0 0 2px rgba(255, 255, 255, 0.2)",
"0 0 10px rgba(51, 109, 250, 0.8), inset 0 0 3px rgba(255, 255, 255, 0.35)",
"0 0 14px rgba(79, 133, 255, 0.95), 0 0 3px #ffffff, inset 0 0 4px #ffffff",
];
export function HeatmapView() {
const [data, setData] = useState<HeatmapResponse | null>(null);
const [loading, setLoading] = useState(true);
@ -403,16 +412,17 @@ export function HeatmapView() {
{/* Card 1: Total Tokens */}
<div
style={{
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
background: "radial-gradient(ellipse at 50% 0%, rgba(51, 109, 250, 0.08) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 100%)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 10,
padding: "14px 16px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
}}
>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }}>
Total Tokens
</div>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#4f85ff" }}>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#4f85ff", textShadow: "0 0 16px rgba(79, 133, 255, 0.65), 0 0 4px rgba(79, 133, 255, 0.4)" }}>
{formatNumber(summary.totalTokens)}
</div>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" }}>
@ -423,16 +433,17 @@ export function HeatmapView() {
{/* Card 2: Cache Hit */}
<div
style={{
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
background: "radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, 0.08) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 100%)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 10,
padding: "14px 16px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
}}
>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }}>
Cache Hit Ratio
</div>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#38bdf8" }}>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "#38bdf8", textShadow: "0 0 14px rgba(56, 189, 248, 0.55)" }}>
{cacheHitPercent}%
</div>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" }}>
@ -443,16 +454,17 @@ export function HeatmapView() {
{/* Card 3: Daily Average / Turns */}
<div
style={{
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
background: "radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.03) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 100%)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 10,
padding: "14px 16px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
}}
>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }}>
{selectedSessionId === "all" ? "Daily Average" : "Total Steps"}
</div>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)" }}>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)", textShadow: "0 0 12px rgba(255, 255, 255, 0.2)" }}>
{selectedSessionId === "all" ? formatNumber(summary.dailyAverage) : summary.totalTurns}
</div>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" }}>
@ -463,16 +475,17 @@ export function HeatmapView() {
{/* Card 4: Streak / Activity */}
<div
style={{
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
background: "radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.03) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 100%)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 10,
padding: "14px 16px",
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
}}
>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-tertiary, #a0a0a0)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600 }}>
{selectedSessionId === "all" ? "Active Streak" : "Active Days"}
</div>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)" }}>
<div style={{ fontSize: 24, fontWeight: 700, margin: "6px 0 2px", color: "var(--dsw-alias-label-primary, #ffffff)", textShadow: "0 0 12px rgba(255, 255, 255, 0.2)" }}>
{selectedSessionId === "all" ? `${summary.currentStreak} days` : `${summary.activeDays} days`}
</div>
<div style={{ fontSize: 11, color: "var(--dsw-alias-label-secondary, #b9b9b9)" }}>
@ -484,12 +497,13 @@ export function HeatmapView() {
{/* Heatmap Card */}
<div
style={{
background: "var(--dsw-alias-bg-layer-2, #2c2c2c)",
background: "radial-gradient(ellipse 90% 50% at 50% 0%, rgba(51, 109, 250, 0.09) 0%, var(--dsw-alias-bg-layer-2, #2c2c2c) 85%)",
border: "1px solid var(--dsw-alias-border-l2, #494949)",
borderRadius: 12,
padding: "20px 22px",
position: "relative",
overflowX: "auto",
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06)",
}}
>
<div
@ -582,12 +596,14 @@ export function HeatmapView() {
height: 11,
borderRadius: 2,
backgroundColor: bg,
boxShadow: TILE_SHADOWS[lvl],
border:
lvl === 0
? "1px solid var(--dsw-alias-border-l1, rgba(255,255,255,0.06))"
? "1px solid rgba(255, 255, 255, 0.05)"
: "1px solid transparent",
cursor: "pointer",
transition: "transform 0.1s ease, filter 0.1s ease",
transition: "all 0.12s ease",
position: "relative",
}}
/>
);
@ -618,7 +634,8 @@ export function HeatmapView() {
height: 11,
borderRadius: 2,
backgroundColor: c,
border: i === 0 ? "1px solid var(--dsw-alias-border-l1)" : "none",
boxShadow: TILE_SHADOWS[i],
border: i === 0 ? "1px solid rgba(255, 255, 255, 0.05)" : "none",
}}
/>
))}

5
src/client/index.tsx
View file

@ -85,15 +85,18 @@ export function apply(ctx: any) {
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
box-shadow: 0 0 14px rgba(51, 109, 250, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: all 0.15s ease;
`;
button.onmouseenter = () => {
button.style.background = "rgba(51, 109, 250, 0.22)";
button.style.borderColor = "#336dfa";
button.style.boxShadow = "0 0 20px rgba(79, 133, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15)";
};
button.onmouseleave = () => {
button.style.background = "rgba(51, 109, 250, 0.12)";
button.style.borderColor = "rgba(51, 109, 250, 0.35)";
button.style.boxShadow = "0 0 14px rgba(51, 109, 250, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08)";
};
button.onclick = (e) => {
e.preventDefault();