UI tweaks: gently nudges user to leverage rotating daily phrases.

This commit is contained in:
Aaron D. Lee
2025-12-29 11:31:01 -05:00
parent 5bf477f2ad
commit 0dc44e2d7b
5 changed files with 14 additions and 5 deletions

View File

@@ -12,6 +12,7 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
gcc \ gcc \
libc-dev \ libc-dev \
libffi-dev \ libffi-dev \
libzbar0 \
&& rm -rf /var/lib/apt/lists/* && rm -rf /var/lib/apt/lists/*
# ============================================================================ # ============================================================================

View File

@@ -15,6 +15,15 @@
--border-light: rgba(255, 255, 255, 0.1); --border-light: rgba(255, 255, 255, 0.1);
--overlay-dark: rgba(0, 0, 0, 0.3); --overlay-dark: rgba(0, 0, 0, 0.3);
--overlay-light: rgba(255, 255, 255, 0.05); --overlay-light: rgba(255, 255, 255, 0.05);
--day-highlight: #E3FF54; /* Bright yellow/green for day of week */
}
/* ----------------------------------------------------------------------------
Day of Week Highlight - Simple
---------------------------------------------------------------------------- */
.day-of-week-highlight {
color: var(--day-highlight) !important;
font-weight: 700 !important;
} }
/* ---------------------------------------------------------------------------- /* ----------------------------------------------------------------------------
@@ -397,4 +406,4 @@ footer {
.card-link:hover .feature-card { .card-link:hover .feature-card {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3); box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
} }

View File

@@ -298,7 +298,6 @@ stegasoo decode -r photo.jpg -s stego.png -p "phrase" --pin 123456
stegasoo info image.png</code></pre> stegasoo info image.png</code></pre>
<p class="small text-muted mt-3 mb-0"> <p class="small text-muted mt-3 mb-0">
API version: {{ version }} &bull;
<span class="badge bg-{% if has_argon2 %}success{% else %}warning{% endif %} me-1"> <span class="badge bg-{% if has_argon2 %}success{% else %}warning{% endif %} me-1">
{% if has_argon2 %}Argon2 Available{% else %}PBKDF2 Fallback{% endif %} {% if has_argon2 %}Argon2 Available{% else %}PBKDF2 Fallback{% endif %}
</span> </span>

View File

@@ -269,7 +269,7 @@ function detectDayFromFilename(filename) {
function updateDayLabel(dayName) { function updateDayLabel(dayName) {
const label = document.getElementById('dayPhraseLabel'); const label = document.getElementById('dayPhraseLabel');
if (label && dayName) { if (label && dayName) {
label.innerHTML = `<i class="bi bi-chat-quote me-1"></i> ${dayName}'s Phrase`; label.innerHTML = `<i class="bi bi-chat-quote me-1"></i>Provide <span class="day-of-week-highlight">${dayName}</span>'s Phrase`;
} }
} }

View File

@@ -110,7 +110,7 @@
<div class="mb-3"> <div class="mb-3">
<label class="form-label" id="dayPhraseLabel"> <label class="form-label" id="dayPhraseLabel">
<i class="bi bi-chat-quote me-1"></i> {{ day_of_week }}'s Phrase <i class="bi bi-chat-quote me-1"></i> Day's Phrase
</label> </label>
<input type="text" name="day_phrase" class="form-control" <input type="text" name="day_phrase" class="form-control"
placeholder="e.g., correct horse battery" required> placeholder="e.g., correct horse battery" required>
@@ -227,7 +227,7 @@ const localDate = now.getFullYear() + '-' +
// Update day label to client's local day // Update day label to client's local day
const dayLabel = document.getElementById('dayPhraseLabel'); const dayLabel = document.getElementById('dayPhraseLabel');
if (dayLabel) { if (dayLabel) {
dayLabel.innerHTML = `<i class="bi bi-chat-quote me-1"></i> ${localDay}'s Phrase`; dayLabel.innerHTML = `<i class="bi bi-chat-quote me-1"></i>Secure with <span class="day-of-week-highlight">${localDay}</span>'s Phrase`;
} }
// Set hidden field with client's local date for server // Set hidden field with client's local date for server