PWA Frabe angepasst + Namen farblich gemacht

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>

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",
+  "background_color": "#5F9EA0",
-  "theme_color": "#ec4899",
+  "theme_color": "#556B2F",
   "orientation": "portrait-primary",
   "categories": ["utilities", "lifestyle"],
   "icons": [

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;
   }
 }
 

public/style.css

@@ -39,8 +39,8 @@
 }
 
 #personName {
-  will-change: opacity;
+  will-change: opacity, color;
-  transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease, color 0.3s ease;
 }
 
 /* Background transition */