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");
}
}