danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Add idle glow pulse to help button for new users

Browse source 
Subtle accent border glow breathes every 3s on the ? button until
the user opens the menu for the first time, then stops permanently
via localStorage. Helps new users notice the help system exists.
This commit is contained in:
Broque Thomas 2026-03-26 12:32:03 -07:00
parent 5305481187
commit 59e258a922
2 changed files with 26 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
webui/static/helper.js
View file

@ -2197,6 +2197,10 @@ function openHelperMenu() {
const floatBtn = document.getElementById('helper-float-btn'); const floatBtn = document.getElementById('helper-float-btn');
if (!floatBtn) return; if (!floatBtn) return;
// User has discovered the help system — stop the idle glow permanently
floatBtn.classList.remove('undiscovered');
localStorage.setItem('soulsync_helper_discovered', '1');
floatBtn.classList.add('menu-open'); floatBtn.classList.add('menu-open');
// Detect current page for contextual tour suggestion // Detect current page for contextual tour suggestion
@ -3780,5 +3784,11 @@ document.addEventListener('DOMContentLoaded', () => {
// What's New badge // What's New badge
_updateHelperBadge(); _updateHelperBadge();
// Idle glow for undiscovered help button
if (!localStorage.getItem('soulsync_helper_discovered')) {
const btn = document.getElementById('helper-float-btn');
if (btn) btn.classList.add('undiscovered');
}
}, 2500); }, 2500);
}); });

16
webui/static/style.css
View file

@ -1277,6 +1277,22 @@ body {
display: block; display: block;
} }
/* Subtle idle glow for users who haven't opened help yet */
.helper-float-btn.undiscovered {
animation: helperIdleGlow 3s ease-in-out infinite;
}
@keyframes helperIdleGlow {
0%, 100% {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(var(--accent-rgb), 0), inset 0 1px 0 rgba(255, 255, 255, 0.06);
border-color: rgba(var(--accent-rgb), 0.25);
}
50% {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 16px rgba(var(--accent-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
border-color: rgba(var(--accent-rgb), 0.5);
}
}
.helper-float-btn:hover { .helper-float-btn:hover {
transform: scale(1.1); transform: scale(1.1);
background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3) 0%, rgba(30, 30, 30, 0.95) 60%); background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3) 0%, rgba(30, 30, 30, 0.95) 60%);