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:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 6–10)
|
||||||
|
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 6–10
|
||||||
|
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 1–5
|
||||||
|
flashCopyFeedback(el);
|
||||||
|
}
|
||||||
|
|
||||||
if (versionClickCount >= 10) {
|
if (versionClickCount >= 10) {
|
||||||
versionClickCount = 0;
|
versionClickCount = 0;
|
||||||
clearTimeout(versionClickTimer);
|
clearTimeout(versionClickTimer);
|
||||||
|
|||||||
Reference in New Issue
Block a user