From c8528260917b5469d1cd8223bd59568870526114 Mon Sep 17 00:00:00 2001
From: Koala <6156589+Shik3i@users.noreply.github.com>
Date: Sat, 30 May 2026 11:20:40 +0200
Subject: [PATCH] Enhance Join page with animated radar status indicator,
 resolve silent status icon bug, and clean inline script button styles to CSS

---
 website/app.js    | 67 ++++++++++++++++++++++++-------------
 website/join.html |  9 ++++-
 website/style.css | 84 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 136 insertions(+), 24 deletions(-)

diff --git a/website/app.js b/website/app.js
index 40040c3..cebdb32 100644
--- a/website/app.js
+++ b/website/app.js
@@ -70,14 +70,16 @@ document.addEventListener('DOMContentLoaded', () => {
                                 const isFirefox = navigator.userAgent.includes('Firefox');
                                 if (isFirefox) {
                                     actions.innerHTML = `
-                                        <a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="primary btn-firefox" style="text-align:center; text-decoration:none; display:flex; align-items:center; justify-content:center; gap: 8px; padding: 1.2rem; border-radius: 12px; font-weight: 700;">
-                                            <img src="assets/firefox.svg" alt="Firefox" width="20" style="display: block;">
-                                            <span lang="en">GET IT ON MOZILLA ADD-ONS</span><span lang="de">IM FIREFOX ADD-ON STORE HERUNTERLADEN</span>
-                                        </a>
-                                        <a href="https://github.com/shik3i/KoalaSync" style="text-align:center; text-decoration:none; display:flex; align-items:center; justify-content:center; gap: 8px; padding: 0.8rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); color: #e66000; border-radius: 12px; font-weight: 700; font-size: 0.85rem; margin-top: 0.5rem; transition: background 0.2s;">
-                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" aria-hidden="true" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
-                                            <span lang="en">Download via GitHub</span><span lang="de">Über GitHub herunterladen</span>
-                                        </a>
+                                        <div class="join-card-actions">
+                                            <a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="btn btn-primary btn-firefox">
+                                                <img src="assets/firefox.svg" alt="Firefox" width="20" style="display: block;">
+                                                <span lang="en">GET IT ON MOZILLA ADD-ONS</span><span lang="de">IM FIREFOX ADD-ON STORE HERUNTERLADEN</span>
+                                            </a>
+                                            <a href="https://github.com/shik3i/KoalaSync" target="_blank" class="btn btn-secondary">
+                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" aria-hidden="true" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+                                                <span lang="en">Download via GitHub</span><span lang="de">Über GitHub herunterladen</span>
+                                            </a>
+                                        </div>
                                         <p style="text-align:center; font-size:0.8rem; opacity:0.7; margin-top: 1.2rem; color: var(--text-muted);">
                                             <span lang="en">The extension is required to join and sync videos.</span>
                                             <span lang="de">Die Erweiterung ist erforderlich, um beizutreten und Videos zu synchronisieren.</span>
@@ -85,21 +87,23 @@ document.addEventListener('DOMContentLoaded', () => {
                                     `;
                                 } else {
                                     actions.innerHTML = `
-                                        <a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="primary" style="text-align:center; text-decoration:none; display:flex; align-items:center; justify-content:center; gap: 8px; padding: 1.2rem; background: var(--accent); color: white; border-radius: 12px; font-weight: 700;">
-                                            <img src="assets/chrome.svg" alt="Chrome" width="20" style="display: block;">
-                                            <span lang="en">GET IT ON CHROME WEBSTORE</span><span lang="de">IM CHROME WEB STORE HERUNTERLADEN</span>
-                                        </a>
-                                        <a href="https://github.com/shik3i/KoalaSync" style="text-align:center; text-decoration:none; display:flex; align-items:center; justify-content:center; gap: 8px; padding: 0.8rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); color: var(--accent); border-radius: 12px; font-weight: 700; font-size: 0.85rem; margin-top: 0.5rem; transition: background 0.2s;">
-                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" aria-hidden="true" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
-                                            <span lang="en">Download via GitHub</span><span lang="de">Über GitHub herunterladen</span>
-                                        </a>
+                                        <div class="join-card-actions">
+                                            <a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary">
+                                                <img src="assets/chrome.svg" alt="Chrome" width="20" style="display: block;">
+                                                <span lang="en">GET IT ON CHROME WEBSTORE</span><span lang="de">IM CHROME WEB STORE HERUNTERLADEN</span>
+                                            </a>
+                                            <a href="https://github.com/shik3i/KoalaSync" target="_blank" class="btn btn-secondary">
+                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" aria-hidden="true" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+                                                <span lang="en">Download via GitHub</span><span lang="de">Über GitHub herunterladen</span>
+                                            </a>
+                                        </div>
                                         <p style="text-align:center; font-size:0.8rem; opacity:0.7; margin-top: 1.2rem; color: var(--text-muted);">
                                             <span lang="en">The extension is required to join and sync videos.</span>
                                             <span lang="de">Die Erweiterung ist erforderlich, um beizutreten und Videos zu synchronisieren.</span>
                                         </p>
                                     `;
                                 }
-                            } else {
+                            } } else {
                                 actions.innerHTML = `
                                     <div class="joining-spinner" style="text-align:center; padding: 1rem;">
                                         <div class="join-spinner"></div>
@@ -185,20 +189,25 @@ document.addEventListener('DOMContentLoaded', () => {
             const title = document.getElementById('join-title');
             const actions = document.getElementById('join-actions');
             const desc = document.getElementById('join-desc');
+            const ring = document.getElementById('status-ring');
 
             if (success) {
-                if (icon) icon.textContent = '✅';
+                if (ring) ring.classList.remove('active-pulse');
+                if (icon) {
+                    icon.textContent = '✅';
+                    icon.style.transform = 'scale(1.2)';
+                }
                 const isDE = document.documentElement.classList.contains('lang-de');
                 title.textContent = isDE ? 'Erfolgreich!' : 'Success!';
                 desc.innerHTML = isDE
-                    ? 'Verbunden! <br><span style="color:var(--accent); font-weight:bold;">W\u00e4hle jetzt einen Video-Tab in der Erweiterung aus.</span>'
+                    ? 'Verbunden! <br><span style="color:var(--accent); font-weight:bold;">Wähle jetzt einen Video-Tab in der Erweiterung aus.</span>'
                     : 'Connected! <br><span style="color:var(--accent); font-weight:bold;">Now select a video tab in the extension.</span>';
                 
                 let count = 3;
                 const updateCountdown = () => {
                     if (count <= 0) {
                         window.close();
-                        desc.textContent = isDE ? 'Beitritt erfolgreich! Du kannst diesen Tab jetzt manuell schlie\u00dfen.' : 'Joined successfully! You can close this tab manually.';
+                        desc.textContent = isDE ? 'Beitritt erfolgreich! Du kannst diesen Tab jetzt manuell schließen.' : 'Joined successfully! You can close this tab manually.';
                     } else {
                         count--;
                         setTimeout(updateCountdown, 1000);
@@ -207,14 +216,26 @@ document.addEventListener('DOMContentLoaded', () => {
                 setTimeout(updateCountdown, 1000);
                 
                 const closeLabel = isDE ? 'TAB JETZT SCHLIESSEN' : 'CLOSE TAB NOW';
-                actions.innerHTML = `<button class="primary" onclick="window.close()" style="background:var(--success); width: 100%;">${closeLabel}</button>`;
+                actions.innerHTML = `
+                    <div class="join-card-actions">
+                        <button class="btn btn-success" onclick="window.close()">${closeLabel}</button>
+                    </div>
+                `;
             } else {
-                if (icon) icon.textContent = '❌';
+                if (ring) ring.classList.remove('active-pulse');
+                if (icon) {
+                    icon.textContent = '❌';
+                    icon.style.transform = 'scale(1.2)';
+                }
                 const isDE = document.documentElement.classList.contains('lang-de');
                 title.textContent = isDE ? 'Fehler' : 'Error';
                 desc.textContent = isDE ? `Beitritt fehlgeschlagen: ${message}` : `Join failed: ${message}`;
                 const retryLabel = isDE ? 'ERNEUT VERSUCHEN' : 'TRY AGAIN';
-                actions.innerHTML = `<button class="primary" onclick="location.reload()" style="width: 100%;">${retryLabel}</button>`;
+                actions.innerHTML = `
+                    <div class="join-card-actions">
+                        <button class="btn btn-primary" onclick="location.reload()">${retryLabel}</button>
+                    </div>
+                `;
             }
         } else {
             const banner = document.getElementById('koala-banner');
diff --git a/website/join.html b/website/join.html
index 3a0283c..5d91def 100644
--- a/website/join.html
+++ b/website/join.html
@@ -38,8 +38,15 @@
     </nav>
 
     <main class="legal-content join-card">
-        <div class="legal-card" id="join-container" data-reveal style="padding: 2.5rem;">
+        <div class="legal-card" id="join-container" data-reveal style="padding: 2.5rem; text-align: center;">
             <div class="room-badge"><span lang="en">INVITATION DETECTED</span><span lang="de">EINLADUNG ERKANNT</span></div>
+            
+            <!-- Dynamic Status Icon & Pulsing Radar Wave -->
+            <div class="join-status-visual">
+                <div class="status-ring active-pulse" id="status-ring"></div>
+                <div id="join-status-icon" style="font-size: 3rem; z-index: 2; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);">🐨</div>
+            </div>
+
             <h1 id="join-title" style="font-size: 2rem; margin-bottom: 1rem;"><span lang="en">Ready to sync?</span><span lang="de">Bereit zum Synchronisieren?</span></h1>
             <p id="join-desc" style="text-align: center; color: var(--text-muted); margin-bottom: 2rem; font-size: 0.9rem;">
                 <span lang="en">You've been invited to join a synchronized session.</span>
diff --git a/website/style.css b/website/style.css
index 62981d0..083162a 100644
--- a/website/style.css
+++ b/website/style.css
@@ -1607,3 +1607,87 @@ html.lang-de [lang="en"] {
     }
 }
 
+/* --- Join & Invitation Page Visuals --- */
+.join-status-visual {
+    margin-bottom: 2rem;
+    position: relative;
+    height: 110px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.status-ring {
+    position: absolute;
+    width: 90px;
+    height: 90px;
+    border-radius: 50%;
+    background: rgba(99, 102, 241, 0.05);
+    border: 2px dashed rgba(99, 102, 241, 0.25);
+    z-index: 1;
+}
+
+.status-ring.active-pulse {
+    animation: radar-pulse 3s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
+}
+
+@keyframes radar-pulse {
+    0% {
+        transform: scale(0.85);
+        opacity: 0.9;
+        border-color: rgba(99, 102, 241, 0.3);
+        box-shadow: 0 0 0 0px rgba(99, 102, 241, 0.15);
+    }
+    50% {
+        transform: scale(1.18);
+        opacity: 0.35;
+        border-color: rgba(56, 189, 248, 0.2);
+        box-shadow: 0 0 0 15px rgba(56, 189, 248, 0);
+    }
+    100% {
+        transform: scale(0.85);
+        opacity: 0.9;
+        border-color: rgba(99, 102, 241, 0.3);
+        box-shadow: 0 0 0 0px rgba(99, 102, 241, 0.15);
+    }
+}
+
+.join-card-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: 100%;
+}
+
+.join-card-actions .btn {
+    width: 100%;
+    justify-content: center;
+    padding: 1.1rem;
+    font-size: 0.88rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.join-card-actions .btn svg {
+    margin-right: 0.3rem;
+    flex-shrink: 0;
+}
+
+.join-card-actions .btn img {
+    margin-right: 0.3rem;
+    flex-shrink: 0;
+}
+
+.btn-success {
+    background: #22c55e;
+    color: white !important;
+    box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.3);
+}
+
+.btn-success:hover {
+    background: #16a34a;
+    transform: translateY(-2px);
+    box-shadow: 0 20px 25px -5px rgba(34, 197, 94, 0.4);
+}
+