alee/stegasoo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dynamic channel selector feedback with pulse highlight

Browse Source 
- Channel select shows contextual info: Auto (server key), Public (no key), Custom (hidden)
- Gold pulse highlight on custom channel input when selected
- Smooth 0.4s animation with subtle glow effect
- Updated encode.html and decode.html with data-fingerprint attributes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Aaron D. Lee
2026-01-04 15:21:02 -05:00
parent fb55878727
commit 355a988405
4 changed files with 46 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontends/web/static/js/stegasoo.js
View File

@@ -765,18 +765,43 @@ const Stegasoo = {
const customInputId = config.customInputId || 'channelCustomInput';
const keyInputId = config.keyInputId || 'channelKeyInput';
const generateBtnId = config.generateBtnId;
const serverInfoId = config.serverInfoId || 'channelServerInfo';
const select = document.getElementById(selectId);
const customInput = document.getElementById(customInputId);
const keyInput = document.getElementById(keyInputId);
const generateBtn = generateBtnId ? document.getElementById(generateBtnId) : null;
const serverInfo = document.getElementById(serverInfoId);
// Show/hide custom input based on selection
// Show/hide custom input and server info based on selection
const updateVisibility = () => {
const isCustom = select?.value === 'custom';
const value = select?.value;
const isCustom = value === 'custom';
const isPublic = value === 'none';
const isAuto = value === 'auto';
// Custom input visibility
customInput?.classList.toggle('d-none', !isCustom);
if (isCustom && keyInput) {
keyInput.focus();
// Pulse highlight effect
customInput?.classList.add('channel-highlight');
setTimeout(() => customInput?.classList.remove('channel-highlight'), 400);
}
// Server info: show for auto, hide for custom, show "no key" for public
if (serverInfo) {
if (isAuto) {
serverInfo.innerHTML = '<i class="bi bi-shield-lock me-1"></i>Server: <code>' + (serverInfo.dataset.fingerprint || '••••-••••-···-••••-••••') + '</code>';
serverInfo.className = 'small text-success mt-2';
serverInfo.classList.remove('d-none');
} else if (isPublic) {
serverInfo.innerHTML = '<i class="bi bi-globe me-1"></i>No channel key will be used';
serverInfo.className = 'small text-muted mt-2';
serverInfo.classList.remove('d-none');
} else {
serverInfo.classList.add('d-none');
}
}
};
@@ -912,7 +937,8 @@ const Stegasoo = {
this.initChannelKey({
selectId: 'channelSelectDec',
customInputId: 'channelCustomInputDec',
keyInputId: 'channelKeyInputDec'
keyInputId: 'channelKeyInputDec',
serverInfoId: 'channelServerInfoDec'
});
// Form submission with channel key validation and mode display