From 279f910b3e724c9a558d7cf18a509ff20d5038a8 Mon Sep 17 00:00:00 2001
From: Honey <me_honeyy@proton.me>
Date: Thu, 12 Feb 2026 12:40:14 +0100
Subject: [PATCH] PWA Frabe angepasst + Namen farblich gemacht

---
 public/index.html    | 4 ++--
 public/manifest.json | 8 ++++----
 public/script.js     | 5 ++++-
 public/style.css     | 4 ++--
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/public/index.html b/public/index.html
index 89c2bf5..193d65b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,7 +19,7 @@
     <!-- Android Specific -->
     <meta name="mobile-web-app-capable" content="yes" />
     
-    <title>Wer zahlt?</title>
+    <title>Who Pays?</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="style.css" />
     
@@ -74,7 +74,7 @@
         />
         <div
           id="personName"
-          class="text-3xl font-semibold text-blue-800 transition-all duration-500"
+          class="text-3xl font-semibold transition-all duration-500"
         >
           Lädt ...
         </div>
diff --git a/public/manifest.json b/public/manifest.json
index 490c007..9125c49 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,12 +1,12 @@
 {
-  "name": "Wer zahlt? - Who Pays",
+  "name": "WhoPays? Who's turn is it",
   "short_name": "WhoPays",
-  "description": "Entscheide spielerisch, wer zahlt",
+  "description": "Battle on who's gonna pay.",
   "start_url": "/",
   "scope": "/",
   "display": "standalone",
-  "background_color": "#fef3c7",
-  "theme_color": "#ec4899",
+  "background_color": "#5F9EA0",
+  "theme_color": "#556B2F",
   "orientation": "portrait-primary",
   "categories": ["utilities", "lifestyle"],
   "icons": [
diff --git a/public/script.js b/public/script.js
index 75e1b54..48693cb 100644
--- a/public/script.js
+++ b/public/script.js
@@ -66,6 +66,7 @@ function setBackgroundAndImage(person, animate = true) {
   const file = person === "A" ? "img/a.png" : "img/b.png";
   const label = person === "A" ? "Lumpia" : "Pierogi";
   const bgImage = person === "A" ? "url('img/bgA.jpg')" : "url('img/bgB.jpg')";
+  const nameColor = person === "A" ? "#2ecc71" : "#e74c3c"; // Grün für A, Rot für B
 
   // Set background immediately (smooth transition via CSS)
   document.body.style.backgroundImage = bgImage;
@@ -75,10 +76,11 @@ function setBackgroundAndImage(person, animate = true) {
   if (animate) {
     img.classList.add("rotate");
     
-    // Change image and name in the middle of rotation
+    // Change image, name and color in the middle of rotation
     setTimeout(() => {
       img.src = file;
       nameEl.textContent = label;
+      nameEl.style.color = nameColor;
     }, 300); // Half of rotation duration
     
     // Remove rotation class after animation
@@ -89,6 +91,7 @@ function setBackgroundAndImage(person, animate = true) {
     // First load - no animation
     img.src = file;
     nameEl.textContent = label;
+    nameEl.style.color = nameColor;
   }
 }
 
diff --git a/public/style.css b/public/style.css
index dddabde..5f607fc 100644
--- a/public/style.css
+++ b/public/style.css
@@ -39,8 +39,8 @@
 }
 
 #personName {
-  will-change: opacity;
-  transition: opacity 0.3s ease;
+  will-change: opacity, color;
+  transition: opacity 0.3s ease, color 0.3s ease;
 }
 
 /* Background transition */