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

46
data/index.html
View File

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