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 @@
-
Wer zahlt?
+ Who Pays?
@@ -74,7 +74,7 @@
/>
Lädt ...
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 */