From a400ca00ff4f8a8b48a62126cfbe155a5795824e Mon Sep 17 00:00:00 2001 From: Carsten Graf Date: Thu, 11 Sep 2025 10:19:35 +0200 Subject: [PATCH] NewColors --- data/index.css | 50 ++++++++++++++++++++++++++++++------------------- data/index.html | 46 ++++++++++++++++++++++----------------------- 2 files changed, 54 insertions(+), 42 deletions(-) diff --git a/data/index.css b/data/index.css index bb1197d..1269fa9 100644 --- a/data/index.css +++ b/data/index.css @@ -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 { diff --git a/data/index.html b/data/index.html index c3e5607..a480592 100644 --- a/data/index.html +++ b/data/index.html @@ -15,7 +15,7 @@
@@ -42,13 +42,13 @@

🏊‍♀️ NinjaCross Timer

-

Professioneller Zeitmesser für Ninjacross Wettkämpfe

+

Dein professioneller Zeitmesser für Ninjacross Wettkämpfe

@@ -58,7 +58,7 @@

🏊‍♀️ Bahn 1

00.00
- Standby: Bitte beide 1x betätigen + Standby: Drücke beide Buttons einmal
@@ -67,13 +67,13 @@

🏊‍♂️ Bahn 2

00.00
- Standby: Bitte beide 1x betätigen + Standby: Drücke beide Buttons einmal
-

🏆 Beste Zeiten des Tages

+

🏆 Deine Bestzeiten heute

Bahn 1: --.- @@ -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) ); }