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

NewColors

Browse Source
This commit is contained in:
Carsten Graf
2025-09-11 10:19:35 +02:00
parent 173b13fcfc
commit a400ca00ff
2 changed files with 54 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
data/index.css
View File

@@ -11,8 +11,8 @@ html {
}
body {
font-family: "Arial", sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: "Segoe UI", Arial, sans-serif;
background: linear-gradient(135deg, #49bae4 0%, #223c83 100%);
height: 100vh;
width: 100vw;
display: flex;
@@ -97,7 +97,7 @@ body {
width: 20px;
height: 20px;
border-radius: 50%;
background: #e74c3c;
background: #f50f0f;
transition: all 0.3s ease;
position: relative;
}
@@ -115,8 +115,8 @@ body {
}
.heartbeat-indicator.active {
background: #2ecc71;
box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
background: #00ff15;
box-shadow: 0 0 10px rgba(73, 186, 228, 0.5);
}
/* Batterie-Banner Styling */
@@ -125,7 +125,7 @@ body {
top: -100px;
left: 0;
width: 100%;
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
background: linear-gradient(135deg, #f59d0f 0%, #e67e22 100%);
color: white;
padding: 15px 20px;
text-align: center;
@@ -261,6 +261,9 @@ body {
font-size: clamp(1.8rem, 4vw, 2.5rem);
margin-bottom: 0.5vh;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
font-weight: bold;
text-transform: uppercase;
font-family: "Segoe UI", Arial, sans-serif;
}
.header p {
@@ -306,6 +309,9 @@ body {
font-size: clamp(1.2rem, 2.5vw, 1.8rem);
margin-bottom: clamp(10px, 1vh, 15px);
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-family: "Segoe UI", Arial, sans-serif;
}
.swimmer-name {
@@ -356,25 +362,25 @@ body {
}
.status.finished {
background-color: rgba(52, 152, 219, 0.3);
border: 2px solid #3498db;
background-color: rgba(73, 186, 228, 0.3);
border: 2px solid #49bae4;
}
.status.ready {
background-color: rgba(46, 204, 113, 0.3);
border: 2px solid #2ecc71;
background-color: rgba(34, 60, 131, 0.3);
border: 2px solid #223c83;
animation: pulse 1s infinite;
}
.status.armed {
background-color: rgb(197, 194, 0);
border: 2px solid #fbff00;
background-color: rgba(245, 157, 15, 0.3);
border: 2px solid #f59d0f;
animation: pulse 1s infinite;
}
.status.running {
background-color: rgba(231, 76, 60, 0.3);
border: 2px solid #e74c3c;
background-color: rgba(245, 157, 15, 0.3);
border: 2px solid #f59d0f;
}
@keyframes pulse {
@@ -390,8 +396,8 @@ body {
}
.status.standby {
background-color: rgba(255, 193, 7, 0.3);
border: 2px solid #ffc107;
background-color: rgba(220, 242, 250, 0.3);
border: 2px solid #DCF2FA;
animation: standbyBlink 2s infinite;
}
@@ -433,6 +439,9 @@ body {
.best-times h3 {
font-size: clamp(0.9rem, 1.8vw, 1.1rem);
margin-bottom: clamp(5px, 0.5vh, 8px);
font-weight: bold;
text-transform: uppercase;
font-family: "Segoe UI", Arial, sans-serif;
}
.best-time-row {
@@ -447,8 +456,8 @@ body {
}
.learning-mode {
background: rgba(255, 193, 7, 0.2);
border: 2px solid #ffc107;
background: rgba(245, 157, 15, 0.2);
border: 2px solid #f59d0f;
border-radius: 15px;
padding: clamp(15px, 2vh, 20px);
margin: 2vh 0;
@@ -463,9 +472,12 @@ body {
}
.learning-mode h3 {
color: #ffc107;
color: #f59d0f;
margin-bottom: 10px;
font-size: clamp(1rem, 2vw, 1.3rem);
font-weight: bold;
text-transform: uppercase;
font-family: "Segoe UI", Arial, sans-serif;
}
.learning-mode p {

46
data/index.html
View File

@@ -15,7 +15,7 @@
<div>
<div class="banner-text">⚠️ Niedrige Batterie erkannt!</div>
<div class="banner-devices" id="battery-devices">
Geräte mit niedriger Batterie: <span id="low-battery-list"></span>
Deine Geräte mit niedriger Batterie: <span id="low-battery-list"></span>
</div>
</div>
</div>
@@ -42,13 +42,13 @@
<div class="header">
<h1>🏊‍♀️ NinjaCross Timer</h1>
<p>Professioneller Zeitmesser für Ninjacross Wettkämpfe</p>
<p>Dein professioneller Zeitmesser für Ninjacross Wettkämpfe</p>
</div>
<div id="learning-display" class="learning-mode" style="display: none">
<h3>📚 Lernmodus aktiv</h3>
<p>
Bitte drücken Sie den Button für: <span id="learning-button"></span>
Drücke jetzt den Button für: <span id="learning-button"></span>
</p>
</div>
@@ -58,7 +58,7 @@
<h2>🏊‍♀️ Bahn 1</h2>
<div id="time1" class="time-display">00.00</div>
<div id="status1" class="status standby">
Standby: Bitte beide 1x betätigen
Standby: Drücke beide Buttons einmal
</div>
</div>
@@ -67,13 +67,13 @@
<h2>🏊‍♂️ Bahn 2</h2>
<div id="time2" class="time-display">00.00</div>
<div id="status2" class="status standby">
Standby: Bitte beide 1x betätigen
Standby: Drücke beide Buttons einmal
</div>
</div>
</div>
<div class="best-times">
<h3>🏆 Beste Zeiten des Tages</h3>
<h3>🏆 Deine Bestzeiten heute</h3>
<div class="best-time-row">
<span>Bahn 1:</span>
<span id="best1">--.-</span>
@@ -324,13 +324,13 @@
function getButtonDisplayName(button) {
switch (button) {
case "start1":
return "Start Bahn 1";
return "Start Button Bahn 1";
case "stop1":
return "Stop Bahn 1";
return "Stop Button Bahn 1";
case "start2":
return "Start Bahn 2";
return "Start Button Bahn 2";
case "stop2":
return "Stop Bahn 2";
return "Stop Button Bahn 2";
default:
return button;
}
@@ -365,25 +365,25 @@
if (!lane1Connected) {
s1.className = "status standby";
s1.textContent = "Standby: Bitte beide Buttons 1x betätigen";
s1.textContent = "Standby: Drücke beide Buttons einmal";
} else {
s1.className = `status ${status1}`;
switch (status1) {
case "ready":
s1.textContent = "Bereit";
s1.textContent = "Bereit für den Start!";
break;
case "running":
s1.textContent = "Läuft...";
s1.textContent = "Läuft - Du schaffst das!";
break;
case "finished":
s1.textContent = "Beendet";
s1.textContent = "Geschafft!";
break;
case "armed":
s1.textContent = "Armiert";
s1.textContent = "Bereit zum Start!";
break;
default:
s1.textContent = "Unbekannter Status";
s1.textContent = "Status unbekannt";
}
}
@@ -391,25 +391,25 @@
if (!lane2Connected) {
s2.className = "status standby";
s2.textContent = "Standby: Bitte beide Buttons 1x betätigen";
s2.textContent = "Standby: Drücke beide Buttons einmal";
} else {
s2.className = `status ${status2}`;
switch (status2) {
case "ready":
s2.textContent = "Bereit";
s2.textContent = "Bereit für den Start!";
break;
case "running":
s2.textContent = "Läuft...";
s2.textContent = "Läuft - Du schaffst das!";
break;
case "finished":
s2.textContent = "Beendet";
s2.textContent = "Geschafft!";
break;
case "armed":
s2.textContent = "Armiert"; // Neuer Status für armiert
s2.textContent = "Bereit zum Start!";
break;
default:
s2.textContent = "Unbekannter Status";
s2.textContent = "Status unbekannt";
}
}
@@ -463,7 +463,7 @@
updateDisplay();
})
.catch((error) =>
console.error("Fehler beim Laden der Daten:", error)
console.error("Fehler beim Laden deiner Daten:", error)
);
}