dschlueter/my_voice_assistant_v3_jamulix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix(ui): SOS-Button auf Quadrat in Höhe der Sprachauswahl verkleinern (32px)

Browse source 
Der prominente SOS-Button war zu groß. Jetzt ein kompaktes 32x32-Quadrat
(h-8 w-8) — exakt so hoch wie die Sprachauswahl daneben (gemessen 32px),
weiterhin rot gefüllt mit weißem „SOS". Der volle Titel passt wieder ohne
Kürzung.

Da ein 32px-Quadrat keine langen Statuswörter fasst, läuft das Feedback jetzt
über Farbe/Symbol: „SOS" (rot) → pulsiert beim Rufen → „✓" (grün) = Alarm
ausgelöst → „!" bei Fehler, dann zurück. Bestätigungsdialog unverändert.

Bump app.js v=49 -> v=50. Verifiziert via Headless-Chrome (SOS 32x32 == lang 32).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Dieter Schlüter 2026-06-26 15:32:42 +02:00
commit 8a6f428c1b
2 changed files with 13 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

19
app/web/app.js
View file

@ -2247,27 +2247,30 @@ function deviceInfo() {
// Sichtbarer Zustand am SOS-Button selbst: idle | calling | done | error.
// So erkennt der Senior unmittelbar am Knopf, dass der Alarm ausgelöst wurde.
// Button bleibt ein kleines Quadrat (so groß wie die Sprachauswahl) -> Feedback
// über Farbe/Symbol statt langer Wörter, damit es nicht aus der Form läuft.
function setSosState(state) {
if (!emergencyBtn) return;
emergencyBtn.classList.remove(
"bg-red-600", "hover:bg-red-700", "bg-green-600", "animate-pulse"
"bg-red-600", "hover:bg-red-700", "bg-green-600", "animate-pulse",
"text-sm", "text-lg"
);
if (state === "calling") {
emergencyBtn.textContent = "Rufe …";
emergencyBtn.textContent = "SOS"; // pulsiert = „wird gerufen“
emergencyBtn.disabled = true;
emergencyBtn.classList.add("bg-red-600", "animate-pulse");
emergencyBtn.classList.add("bg-red-600", "animate-pulse", "text-sm");
} else if (state === "done") {
emergencyBtn.textContent = "Gerufen ✓";
emergencyBtn.textContent = "✓"; // grün + Haken = Alarm raus
emergencyBtn.disabled = true;
emergencyBtn.classList.add("bg-green-600");
emergencyBtn.classList.add("bg-green-600", "text-lg");
} else if (state === "error") {
emergencyBtn.textContent = "Fehler";
emergencyBtn.textContent = "!";
emergencyBtn.disabled = false;
emergencyBtn.classList.add("bg-red-600", "hover:bg-red-700");
emergencyBtn.classList.add("bg-red-600", "hover:bg-red-700", "text-lg");
} else { // idle
emergencyBtn.textContent = "SOS";
emergencyBtn.disabled = false;
emergencyBtn.classList.add("bg-red-600", "hover:bg-red-700");
emergencyBtn.classList.add("bg-red-600", "hover:bg-red-700", "text-sm");
}
}

4
app/web/index.html
View file

@ -229,7 +229,7 @@
<img src="/favicon.svg?v=1" alt="" class="w-7 h-7 shrink-0" />
<h1 class="flex-1 truncate font-semibold text-base">Voice&nbsp;Assistant</h1>
<button type="button" id="emergency-btn" title="Hilfe rufen" aria-label="Hilfe rufen"
class="shrink-0 h-11 px-4 grid place-items-center rounded-lg bg-red-600 hover:bg-red-700 text-white font-extrabold tracking-wide text-lg shadow-sm whitespace-nowrap transition-colors disabled:opacity-100">SOS</button>
class="shrink-0 h-8 w-8 grid place-items-center rounded-lg bg-red-600 hover:bg-red-700 text-white font-extrabold text-sm leading-none shadow-sm transition-colors disabled:opacity-100">SOS</button>
<select id="lang-sel" title="Sprache"
class="text-sm rounded-lg border border-slate-300 dark:border-slate-600 bg-transparent px-2 py-1.5">
<option value="de">🇩🇪 DE</option>
@ -386,6 +386,6 @@
</div>
</div>
<script src="/app.js?v=49"></script>
<script src="/app.js?v=50"></script>
</body>
</html>