From c0478ed1b24b40c4ced4a32de9c6ee9a075c7317 Mon Sep 17 00:00:00 2001
From: Gronod <gordon@i3omb.com>
Date: Fri, 15 May 2026 23:16:10 +0100
Subject: [PATCH] feat: revise login screen with logo and smooth transition to
 splash

- Replace 'Login to Emby' heading with sofarr logo and subtitle
- Subtitle reads 'Login with your Emby credentials'
- Login form fades out smoothly before splash screen appears
- Form labels remain left-aligned within centered login box
---
 public/app.js     | 14 ++++++++++++++
 public/index.html |  3 ++-
 public/style.css  | 21 +++++++++++++++++----
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/public/app.js b/public/app.js
index 705c157..24a9798 100644
--- a/public/app.js
+++ b/public/app.js
@@ -64,6 +64,18 @@ function stopAutoRefresh() {
   }
 }
 
+function fadeOutLogin() {
+  return new Promise(resolve => {
+    const login = document.getElementById('login-container');
+    login.classList.add('fade-out');
+    login.addEventListener('transitionend', () => {
+      login.style.display = 'none';
+      login.classList.remove('fade-out');
+      resolve();
+    }, { once: true });
+  });
+}
+
 function showSplash() {
   const splash = document.getElementById('splash-screen');
   splash.style.display = 'flex';
@@ -130,6 +142,8 @@ async function handleLogin(e) {
     if (data.success) {
       currentUser = data.user;
       isAdmin = !!data.user.isAdmin;
+      // Fade out login, then show splash while loading data
+      await fadeOutLogin();
       showSplash();
       showDashboard();
       const splashStart = Date.now();
diff --git a/public/index.html b/public/index.html
index 8e05d95..251ea79 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,7 +16,8 @@
         <!-- Login Form -->
         <div id="login-container" class="login-container" style="display: none;">
             <div class="login-box">
-                <h2>Login to Emby</h2>
+                <img src="images/sofarr-flashscreen.png" alt="sofarr" class="login-logo">
+                <p class="login-subtitle">Login with your Emby credentials</p>
                 <form id="login-form">
                     <div class="form-group">
                         <label for="username">Username:</label>
diff --git a/public/style.css b/public/style.css
index 4f3535f..6022b79 100644
--- a/public/style.css
+++ b/public/style.css
@@ -545,6 +545,12 @@ body {
   align-items: center;
   min-height: 100vh;
   padding: 20px;
+  opacity: 1;
+  transition: opacity 0.3s ease-out;
+}
+
+.login-container.fade-out {
+  opacity: 0;
 }
 
 .login-box {
@@ -555,17 +561,24 @@ body {
   width: 100%;
   max-width: 380px;
   transition: background 0.3s;
+  text-align: center;
 }
 
-.login-box h2 {
-  color: var(--text-primary);
+.login-logo {
+  max-width: 180px;
+  width: 60%;
+  margin-bottom: 12px;
+}
+
+.login-subtitle {
+  color: var(--text-secondary);
   margin-bottom: 24px;
-  text-align: center;
-  font-size: 1.5rem;
+  font-size: 0.85rem;
 }
 
 .form-group {
   margin-bottom: 16px;
+  text-align: left;
 }
 
 .form-group label {