Initial commit

public/script.js

@@ -0,0 +1,48 @@
+const img = document.getElementById("personImg");
+const nameEl = document.getElementById("personName");
+const button = document.getElementById("toggleButton");
+
+async function loadStatus() {
+  const res = await fetch("/status");
+  const data = await res.json();
+  showStatus(data.current, false);
+}
+
+function showStatus(person, animate = true) {
+  const file = person === "A" ? "img/a.png" : "img/b.png";
+  const label = person === "A" ? "Honey" : "Kirby";
+
+  // Hintergrundbilder für A und B
+  const bgA = "url('img/bgA.jpg')";
+  const bgB = "url('img/bgB.jpg')";
+
+  // Hintergrundanimation (optional)
+  document.body.style.transition = "background 0.4s ease";
+
+  // Hintergrund setzen
+  document.body.style.backgroundImage = person === "A" ? bgA : bgB;
+  document.body.style.backgroundSize = "cover";
+  document.body.style.backgroundPosition = "center";
+
+  if (animate) {
+    img.classList.add("rotate");
+  }
+
+  setTimeout(() => {
+    img.src = file;
+    nameEl.textContent = label;
+  }, 150);
+
+  setTimeout(() => {
+    img.classList.remove("rotate");
+  }, 600);
+}
+
+
+button.addEventListener("click", async () => {
+  const res = await fetch("/toggle", { method: "POST" });
+  const data = await res.json();
+  showStatus(data.current);
+});
+
+loadStatus();