reptil1990/AquaMasterMQTT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 22 Wiki Activity

Auch settings aufs neue farbschema

Browse Source
This commit is contained in:
Carsten Graf
2025-09-11 11:54:42 +02:00
parent 86b0407f82
commit ed9e8994a9
2 changed files with 38 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
data/settings.css
View File

@@ -5,8 +5,8 @@
} }
body { body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-family: "Segoe UI", Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #49bae4 0%, #223c83 100%);
min-height: 100vh; min-height: 100vh;
padding: 20px; padding: 20px;
} }
@@ -22,7 +22,7 @@
} }
.header { .header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #49bae4 0%, #223c83 100%);
color: white; color: white;
padding: 30px; padding: 30px;
text-align: center; text-align: center;
@@ -45,6 +45,9 @@
margin-bottom: 10px; margin-bottom: 10px;
position: relative; position: relative;
z-index: 1; z-index: 1;
font-weight: bold;
text-transform: uppercase;
font-family: "Segoe UI", Arial, sans-serif;
} }
.header p { .header p {
@@ -78,11 +81,11 @@
} }
.nav-button:hover { .nav-button:hover {
background: #667eea; background: #49bae4;
color: white; color: white;
border-color: #667eea; border-color: #49bae4;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); box-shadow: 0 5px 15px rgba(73, 186, 228, 0.3);
} }
.section { .section {
@@ -100,13 +103,16 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
font-weight: bold;
text-transform: uppercase;
font-family: "Segoe UI", Arial, sans-serif;
} }
.section h2::before { .section h2::before {
content: ""; content: "";
width: 4px; width: 4px;
height: 25px; height: 25px;
background: linear-gradient(135deg, #667eea, #764ba2); background: linear-gradient(135deg, #49bae4, #223c83);
border-radius: 2px; border-radius: 2px;
} }
@@ -132,8 +138,8 @@
.form-group input:focus { .form-group input:focus {
outline: none; outline: none;
border-color: #667eea; border-color: #49bae4;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); box-shadow: 0 0 0 3px rgba(73, 186, 228, 0.1);
} }
.time-row { .time-row {
@@ -179,43 +185,43 @@
} }
.btn-primary { .btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #49bae4 0%, #223c83 100%);
color: white; color: white;
} }
.btn-primary:hover { .btn-primary:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3); box-shadow: 0 10px 25px rgba(73, 186, 228, 0.3);
} }
.btn-secondary { .btn-secondary {
background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%); background: linear-gradient(135deg, #DCF2FA 0%, #49bae4 100%);
color: white; color: #223c83;
} }
.btn-secondary:hover { .btn-secondary:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(116, 185, 255, 0.3); box-shadow: 0 10px 25px rgba(220, 242, 250, 0.3);
} }
.btn-warning { .btn-warning {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); background: linear-gradient(135deg, #f59d0f 0%, #e67e22 100%);
color: #d84315; color: white;
} }
.btn-warning:hover { .btn-warning:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(252, 182, 159, 0.3); box-shadow: 0 10px 25px rgba(245, 157, 15, 0.3);
} }
.btn-danger { .btn-danger {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
color: #c62828; color: white;
} }
.btn-danger:hover { .btn-danger:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(255, 154, 158, 0.3); box-shadow: 0 10px 25px rgba(231, 76, 60, 0.3);
} }
.btn-disabled { .btn-disabled {
@@ -255,13 +261,13 @@
} }
.mode-button.active { .mode-button.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #49bae4 0%, #223c83 100%);
color: white; color: white;
} }
.mode-button:not(.active):hover { .mode-button:not(.active):hover {
background: #f8f9fa; background: #f8f9fa;
color: #667eea; color: #49bae4;
} }
.mode-button:first-child { .mode-button:first-child {
@@ -415,19 +421,22 @@
display: none; display: none;
text-align: center; text-align: center;
padding: 30px; padding: 30px;
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); background: linear-gradient(135deg, #f59d0f 0%, #e67e22 100%);
border-radius: 15px; border-radius: 15px;
margin-top: 20px; margin-top: 20px;
} }
.learning-mode h3 { .learning-mode h3 {
color: #d84315; color: white;
font-size: 1.5em; font-size: 1.5em;
margin-bottom: 15px; margin-bottom: 15px;
font-weight: bold;
text-transform: uppercase;
font-family: "Segoe UI", Arial, sans-serif;
} }
.learning-mode p { .learning-mode p {
color: #bf360c; color: white;
font-size: 1.2em; font-size: 1.2em;
margin-bottom: 20px; margin-bottom: 20px;
} }

8
data/settings.html
View File

@@ -169,7 +169,7 @@
<div id="learningMode" class="learning-mode"> <div id="learningMode" class="learning-mode">
<h3>🎯 Anlernmodus aktiv</h3> <h3>🎯 Anlernmodus aktiv</h3>
<p id="learningInstruction" class="pulse"> <p id="learningInstruction" class="pulse">
Drücken Sie jetzt den Button für: <strong>Bahn 1 Start</strong> Drücke jetzt den Button für: <strong>Bahn 1 Start</strong>
</p> </p>
<button onclick="cancelLearningMode()" class="btn btn-danger"> <button onclick="cancelLearningMode()" class="btn btn-danger">
❌ Abbrechen ❌ Abbrechen
@@ -424,7 +424,7 @@
document.getElementById("currentTimeInput").value = now document.getElementById("currentTimeInput").value = now
.toTimeString() .toTimeString()
.split(" ")[0]; .split(" ")[0];
showMessage("Browser-Zeit übernommen", "info"); showMessage("Deine Browser-Zeit wurde übernommen", "info");
// Jetzt auch direkt an den Server senden: // Jetzt auch direkt an den Server senden:
const dateValue = document.getElementById("currentDate").value; const dateValue = document.getElementById("currentDate").value;
@@ -468,7 +468,7 @@
const timeValue = document.getElementById("currentTimeInput").value; const timeValue = document.getElementById("currentTimeInput").value;
if (!dateValue || !timeValue) { if (!dateValue || !timeValue) {
showMessage("Bitte Datum und Uhrzeit eingeben", "error"); showMessage("Bitte gib Datum und Uhrzeit ein", "error");
return; return;
} }
@@ -485,7 +485,7 @@
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
if (data.success) { if (data.success) {
showMessage("Uhrzeit erfolgreich gesetzt!", "success"); showMessage("Die Uhrzeit wurde erfolgreich gesetzt!", "success");
} else { } else {
showMessage("Fehler beim Setzen der Uhrzeit", "error"); showMessage("Fehler beim Setzen der Uhrzeit", "error");
} }