Discord Benachrichigung, PWA zum teil implementiert

public/index.html

@@ -44,5 +44,13 @@
     </div>
 
     <script src="script.js"></script>
+    <script>
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker.register("/service-worker.js")
+      .then(() => console.log("Service Worker registriert"))
+      .catch(err => console.error("SW Fehler:", err));
+    }
+    </script>
+
   </body>
 </html>

public/manifest.json

@@ -1,18 +1,18 @@
 {
-  "name": "Who pays?",
-  "short_name": "Whopays",
+  "name": "WhoPays",
+  "short_name": "WhoPays",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#fff7f9",
-  "theme_color": "#ec4899",
+  "background_color": "#ffffff",
+  "theme_color": "#2c3e50",
   "icons": [
     {
-      "src": "img/icon-192.png",
+      "src": "/icons/icon-192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "img/icon-512.png",
+      "src": "/icons/icon-512.png",
       "sizes": "512x512",
       "type": "image/png"
     }

public/serviceworker.js

@@ -0,0 +1,23 @@
+const CACHE_NAME = "whopays-cache-v1";
+const URLS_TO_CACHE = [
+  "/",
+  "/index.html",
+  "/style.css",
+  "/script.js"
+];
+
+self.addEventListener("install", event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then(cache => {
+      return cache.addAll(URLS_TO_CACHE);
+    })
+  );
+});
+
+self.addEventListener("fetch", event => {
+  event.respondWith(
+    caches.match(event.request).then(response => {
+      return response || fetch(event.request);
+    })
+  );
+});

public/style.css

@@ -1,18 +1,35 @@
 @keyframes pop {
-  0% { transform: scale(0.9); opacity: 0.5; }
-  100% { transform: scale(1); opacity: 1; }
+  0% {
+    transform: scale(0.9);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
 .status-box {
   animation: pop 0.3s ease-out;
 }
+
 @keyframes rotate {
-  0% { transform: rotateY(0deg); }
-  50% { transform: rotateY(90deg); opacity: 0.6; }
-  100% { transform: rotateY(180deg); opacity: 1; }
+  0% {
+    transform: rotateY(0deg);
+    opacity: 1;
+  }
+  50% {
+    transform: rotateY(180deg); /* Half flip */
+    opacity: 0; /* Make the front disappear */
+  }
+  100% {
+    transform: rotateY(360deg); /* Complete flip */
+    opacity: 1;
+  }
 }
 
 .rotate {
   animation: rotate 0.6s ease-in-out;
   transform-style: preserve-3d;
-}
+  backface-visibility: hidden; /* Hide the back during flip */
+}