Changed alert to html popup

public/index.html

@@ -217,6 +217,53 @@
             background: var(--green) !important;
             color: white;
         }
+
+        /* Toast Popup Styles */
+        #toast {
+            visibility: hidden;
+            min-width: 200px;
+            background-color: var(--black);
+            color: var(--white);
+            text-align: center;
+            padding: 12px;
+            position: fixed;
+            z-index: 100;
+            left: 50%;
+            bottom: 30px;
+            transform: translateX(-50%);
+            font-weight: 900;
+            box-shadow: 6px 6px 0px var(--green);
+            border: 2px solid var(--white);
+        }
+
+        #toast.show {
+            visibility: visible;
+            animation: fadein 0.5s, fadeout 0.5s 2.5s;
+        }
+
+        @keyframes fadein {
+            from {
+                bottom: 0;
+                opacity: 0;
+            }
+
+            to {
+                bottom: 30px;
+                opacity: 1;
+            }
+        }
+
+        @keyframes fadeout {
+            from {
+                bottom: 30px;
+                opacity: 1;
+            }
+
+            to {
+                bottom: 0;
+                opacity: 0;
+            }
+        }
     </style>
 </head>
 
@@ -256,6 +303,8 @@
         </div>
     </div>
 
+    <div id="toast">Link kopiert!</div>
+
     <script>
         let sessionId = localStorage.getItem("game_session_id") || Math.random().toString(36).substring(2);
         localStorage.setItem("game_session_id", sessionId);
@@ -311,14 +360,25 @@
             window.location.search = `?room=${id}`;
         }
 
+        function showToast() {
+            const toast = document.getElementById("toast");
+            toast.className = "show";
+            setTimeout(() => { toast.className = ""; }, 3000);
+        }
+
         document.getElementById("copyBtn").onclick = async () => {
+            const url = window.location.href;
             try {
-                await navigator.clipboard.writeText(window.location.href);
+                await navigator.clipboard.writeText(url);
-                alert("Link kopiert!");
+                showToast();
             } catch (err) {
-                const t = document.createElement("textarea"); t.value = window.location.href;
+                const t = document.createElement("textarea");
-                document.body.appendChild(t); t.select(); document.execCommand('copy');
+                t.value = url;
-                document.body.removeChild(t); alert("Link kopiert!");
+                document.body.appendChild(t);
+                t.select();
+                document.execCommand('copy');
+                document.body.removeChild(t);
+                showToast();
             }
         };