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

Use consistent button group style for mode selectors

Browse Source 
Convert DCT/LSB (encode) and Auto/LSB/DCT (decode) to use
Bootstrap btn-group style matching Color/Gray and JPEG/PNG.
Better mobile layout - all options on one line.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Aaron D. Lee
2026-01-08 17:03:08 -05:00
parent 903739c055
commit 6ba135098b
2 changed files with 25 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontends/web/templates/decode.html
View File

@@ -241,18 +241,14 @@
<!-- Extraction Mode (compact inline) --> <!-- Extraction Mode (compact inline) -->
<div class="d-flex gap-2 align-items-center flex-wrap mb-2"> <div class="d-flex gap-2 align-items-center flex-wrap mb-2">
<label class="mode-btn mode-btn-sm active" id="autoModeCard" for="modeAuto"> <div class="btn-group btn-group-sm" role="group">
<input class="form-check-input" type="radio" name="embed_mode" id="modeAuto" value="auto" checked> <input type="radio" class="btn-check" name="embed_mode" id="modeAuto" value="auto" checked>
<i class="bi bi-magic text-success"></i> Auto <label class="btn btn-outline-secondary btn-sm" for="modeAuto"><i class="bi bi-magic me-1"></i>Auto</label>
</label> <input type="radio" class="btn-check" name="embed_mode" id="modeLsb" value="lsb">
<label class="mode-btn mode-btn-sm" id="lsbModeCard" for="modeLsb"> <label class="btn btn-outline-secondary btn-sm" for="modeLsb">LSB</label>
<input class="form-check-input" type="radio" name="embed_mode" id="modeLsb" value="lsb"> <input type="radio" class="btn-check" name="embed_mode" id="modeDct" value="dct" {% if not has_dct %}disabled{% endif %}>
<i class="bi bi-grid-3x3-gap text-primary"></i> LSB <label class="btn btn-outline-secondary btn-sm" for="modeDct" id="dctModeLabel"><i class="bi bi-soundwave me-1"></i>DCT</label>
</label> </div>
<label class="mode-btn mode-btn-sm {% if not has_dct %}opacity-50{% endif %}" id="dctModeCard" for="modeDct">
<input class="form-check-input" type="radio" name="embed_mode" id="modeDct" value="dct" {% if not has_dct %}disabled{% endif %}>
<i class="bi bi-soundwave text-warning"></i> DCT
</label>
</div> </div>
<div class="form-text" id="modeHint"> <div class="form-text" id="modeHint">
<i class="bi bi-lightning me-1"></i>Tries LSB first, then DCT <i class="bi bi-lightning me-1"></i>Tries LSB first, then DCT
@@ -514,15 +510,10 @@ document.querySelector('input[name="rsa_key"]')?.addEventListener('change', upda
// MODE SWITCHING // MODE SWITCHING
// ============================================================================ // ============================================================================
const modeRadios = document.querySelectorAll('input[name="embed_mode"]'); // Apply disabled styling to DCT if not available
const modeBtns = { 'auto': document.getElementById('autoModeCard'), 'lsb': document.getElementById('lsbModeCard'), 'dct': document.getElementById('dctModeCard') }; if (document.getElementById('modeDct')?.disabled) {
document.getElementById('dctModeLabel')?.classList.add('disabled', 'text-muted');
modeRadios.forEach(radio => { }
radio.addEventListener('change', () => {
Object.values(modeBtns).forEach(btn => btn?.classList.remove('active'));
modeBtns[radio.value]?.classList.add('active');
});
});
// ============================================================================ // ============================================================================
// LOADING STATE // LOADING STATE

28
frontends/web/templates/encode.html
View File

@@ -206,16 +206,13 @@
<!-- Embedding Mode (compact inline) --> <!-- Embedding Mode (compact inline) -->
<div class="d-flex gap-2 align-items-center flex-wrap mb-2"> <div class="d-flex gap-2 align-items-center flex-wrap mb-2">
<label class="mode-btn mode-btn-sm {% if not has_dct %}opacity-50{% endif %} {% if has_dct %}active{% endif %}" id="dctModeCard" for="modeDct"> <div class="btn-group btn-group-sm" role="group">
<input class="form-check-input" type="radio" name="embed_mode" id="modeDct" value="dct" {% if has_dct %}checked{% endif %} {% if not has_dct %}disabled{% endif %}> <input type="radio" class="btn-check" name="embed_mode" id="modeDct" value="dct" {% if has_dct %}checked{% endif %} {% if not has_dct %}disabled{% endif %}>
<i class="bi bi-soundwave text-warning"></i> DCT <label class="btn btn-outline-secondary btn-sm" for="modeDct" id="dctModeLabel"><i class="bi bi-soundwave me-1"></i>DCT</label>
</label> <input type="radio" class="btn-check" name="embed_mode" id="modeLsb" value="lsb" {% if not has_dct %}checked{% endif %}>
<label class="mode-btn mode-btn-sm {% if not has_dct %}active{% endif %}" id="lsbModeCard" for="modeLsb"> <label class="btn btn-outline-secondary btn-sm" for="modeLsb">LSB</label>
<input class="form-check-input" type="radio" name="embed_mode" id="modeLsb" value="lsb" {% if not has_dct %}checked{% endif %}> </div>
<i class="bi bi-grid-3x3-gap text-primary"></i> LSB
</label>
<span class="d-flex gap-2 align-items-center" id="outputOptions"> <span class="d-flex gap-2 align-items-center" id="outputOptions">
<span class="text-muted">|</span>
<div class="btn-group btn-group-sm" role="group"> <div class="btn-group btn-group-sm" role="group">
<input type="radio" class="btn-check" name="dct_color_mode" id="colorMode" value="color" checked> <input type="radio" class="btn-check" name="dct_color_mode" id="colorMode" value="color" checked>
<label class="btn btn-outline-secondary btn-sm" for="colorMode">Color</label> <label class="btn btn-outline-secondary btn-sm" for="colorMode">Color</label>
@@ -646,7 +643,7 @@ carrierInput?.addEventListener('change', function() {
// ============================================================================ // ============================================================================
const modeRadios = document.querySelectorAll('input[name="embed_mode"]'); const modeRadios = document.querySelectorAll('input[name="embed_mode"]');
const modeBtns = { 'dct': document.getElementById('dctModeCard'), 'lsb': document.getElementById('lsbModeCard') }; const dctModeLabel = document.getElementById('dctModeLabel');
const grayModeInput = document.getElementById('grayMode'); const grayModeInput = document.getElementById('grayMode');
const grayModeLabel = document.getElementById('grayModeLabel'); const grayModeLabel = document.getElementById('grayModeLabel');
const jpegFormatInput = document.getElementById('jpegFormat'); const jpegFormatInput = document.getElementById('jpegFormat');
@@ -654,6 +651,11 @@ const jpegFormatLabel = document.getElementById('jpegFormatLabel');
const colorModeInput = document.getElementById('colorMode'); const colorModeInput = document.getElementById('colorMode');
const pngFormatInput = document.getElementById('pngFormat'); const pngFormatInput = document.getElementById('pngFormat');
// Apply disabled styling to DCT if not available
if (document.getElementById('modeDct')?.disabled) {
dctModeLabel?.classList.add('disabled', 'text-muted');
}
function updateOutputOptions(mode) { function updateOutputOptions(mode) {
const isLsb = mode === 'lsb'; const isLsb = mode === 'lsb';
if (isLsb) { if (isLsb) {
@@ -676,11 +678,7 @@ function updateOutputOptions(mode) {
} }
modeRadios.forEach(radio => { modeRadios.forEach(radio => {
radio.addEventListener('change', () => { radio.addEventListener('change', () => updateOutputOptions(radio.value));
Object.values(modeBtns).forEach(btn => btn?.classList.remove('active'));
modeBtns[radio.value]?.classList.add('active');
updateOutputOptions(radio.value);
});
}); });
// Initialize output options based on initial mode // Initialize output options based on initial mode