Initial commit

public/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="manifest" href="manifest.json" />
+    <meta name="theme-color" content="#ec4899" />
+    <title>Wer zahlt?</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body
+    class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-yellow-50 to-pink-50 text-gray-800"
+  >
+    <div class="text-center space-y-8">
+      <h1 class="text-4xl font-extrabold drop-shadow-sm tracking-tight">
+        Who pays?
+      </h1>
+
+      <div
+        id="statusBox"
+        class="flex flex-col items-center space-y-4 transition-all duration-500"
+      >
+        <img
+          id="personImg"
+          src="img/a.png"
+          alt="Person"
+          class="w-48 h-48 rounded-full shadow-md border-4 border-white object-cover transition-transform duration-500"
+        />
+        <div
+          id="personName"
+          class="text-3xl font-semibold text-blue-800 transition-all duration-500"
+        >
+          Load ...
+        </div>
+      </div>
+
+      <button
+        id="toggleButton"
+        class="bg-green-500 hover:bg-green-600 text-white text-xl px-6 py-3 rounded-2xl shadow-md transition-all transform hover:scale-105 active:scale-95"
+      >
+        Switch 🔁
+      </button>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>