feat: add version click flash animation with colored easter egg, darken light mode wells

- Version number clicks now trigger copy-flash animation
- After 5 clicks, each additional click flashes a different bright
  saturated color (hot pink, vivid green, electric blue, orange, purple)
- 10th click reveals debug well as before
- Wells in light mode darkened from #f5f5f5 to #e8e8e8 for better
  contrast with white background

Addresses additional requirements from issue #144 comments.
This commit is contained in:
clawbot
2026-03-01 12:28:32 -08:00
committed by user
parent a2464fcf04
commit 1a749a978e
2 changed files with 37 additions and 2 deletions

View File

@@ -10,7 +10,7 @@
--color-border: #000000; --color-border: #000000;
--color-border-light: #cccccc; --color-border-light: #cccccc;
--color-hover: #eeeeee; --color-hover: #eeeeee;
--color-well: #f5f5f5; --color-well: #e8e8e8;
--color-danger-well: #fef2f2; --color-danger-well: #fef2f2;
--color-section: #dddddd; --color-section: #dddddd;
} }

View File

@@ -3,6 +3,7 @@ const {
showView, showView,
showFlash, showFlash,
escapeHtml, escapeHtml,
flashCopyFeedback,
goBack, goBack,
pushCurrentView, pushCurrentView,
} = require("./helpers"); } = require("./helpers");
@@ -322,7 +323,18 @@ function init(ctx) {
ctx.showSettingsAddTokenView, ctx.showSettingsAddTokenView,
); );
// Easter egg: click version 10 times to reveal the debug well // Bright saturated colors for easter egg flashes (clicks 610)
const easterEggColors = [
"#ff0055", // hot pink
"#00cc44", // vivid green
"#3366ff", // electric blue
"#ff9900", // bright orange
"#aa00ff", // vivid purple
];
// Easter egg: click version 10 times to reveal the debug well.
// Each click does a copy-flash animation. After 5 clicks, each
// additional click flashes a different bright saturated color.
$("about-version").addEventListener("click", () => { $("about-version").addEventListener("click", () => {
versionClickCount++; versionClickCount++;
clearTimeout(versionClickTimer); clearTimeout(versionClickTimer);
@@ -330,6 +342,29 @@ function init(ctx) {
versionClickTimer = setTimeout(() => { versionClickTimer = setTimeout(() => {
versionClickCount = 0; versionClickCount = 0;
}, 3000); }, 3000);
const el = $("about-version");
if (versionClickCount > 5) {
// Colored flash for clicks 610
const colorIdx = versionClickCount - 6;
const color = easterEggColors[colorIdx % easterEggColors.length];
el.classList.remove("copy-flash-fade");
el.style.backgroundColor = color;
el.style.color = "#ffffff";
setTimeout(() => {
el.style.backgroundColor = "";
el.style.color = "";
el.classList.add("copy-flash-fade");
setTimeout(() => {
el.classList.remove("copy-flash-fade");
}, 275);
}, 75);
} else {
// Standard copy-flash for clicks 15
flashCopyFeedback(el);
}
if (versionClickCount >= 10) { if (versionClickCount >= 10) {
versionClickCount = 0; versionClickCount = 0;
clearTimeout(versionClickTimer); clearTimeout(versionClickTimer);