fix flicker after logout

public/css/main-site.min.css

@@ -223,6 +223,9 @@
   }
 }
 @layer utilities {
+  .visible {
+    visibility: visible;
+  }
   .absolute {
     position: absolute;
   }
@@ -325,6 +328,12 @@
   .inline-block {
     display: inline-block;
   }
+  .table {
+    display: table;
+  }
+  .h-0 {
+    height: calc(var(--spacing) * 0);
+  }
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }
@@ -349,9 +358,15 @@
   .min-h-full {
     min-height: 100%;
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\/3 {
     width: calc(1/3 * 100%);
   }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -391,6 +406,9 @@
   .flex-grow {
     flex-grow: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -646,6 +664,10 @@
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
+  .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
   .text-5xl {
     font-size: var(--text-5xl);
     line-height: var(--tw-leading, var(--text-5xl--line-height));
@@ -736,6 +758,10 @@
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -1636,6 +1662,11 @@ footer a:hover {
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -1775,6 +1806,7 @@ footer a:hover {
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;

public/index.html

@@ -91,7 +91,7 @@
                     <input id="loginApiKey" type="text" placeholder="Enter API Key"
                         class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full border border-[rgba(255,255,255,0.15)]">
                 </div>
-                <button id="loginBtn" class="nav-btn w-full">Login</button>
+                <button id="loginBtn" class="nav-btn2 w-full">Login</button>
                 <p id="loginError" class="text-red-500 text-sm mt-2 hidden"></p>
             </div>
         </div>

public/js/app.js

@@ -1286,30 +1286,39 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   function showMainContent() {
-    if (!elements.loginPage || !elements.mainContent) {
-      console.error('Required elements not found:', {
-        loginPage: elements.loginPage,
-        mainContent: elements.mainContent
-      });
-      showNotification('Page error: Essential elements missing. Please refresh the page.', 'error', 'page-error');
-      return;
+    // Check if apiKey exists in localStorage
+    const apiKey = localStorage.getItem('apiKey');
+    if (!apiKey) {
+        console.error('API key not found in localStorage');
+        return;
     }
+
+    if (!elements.loginPage || !elements.mainContent) {
+        console.error('Required elements not found:', {
+            loginPage: elements.loginPage,
+            mainContent: elements.mainContent
+        });
+        showNotification('Page error: Essential elements missing. Please refresh the page.', 'error', 'page-error');
+        return;
+    }
+
     elements.loginPage.classList.add('hidden');
     elements.mainContent.classList.remove('hidden');
+
     // Verify buttons exist
     const logoutBtn = document.getElementById('logoutBtn');
     const mobileLogoutBtn = document.getElementById('mobileLogoutBtn');
 
     if (logoutBtn) {
-      console.log('Desktop logout button found');
+        console.log('Desktop logout button found');
     } else {
-      console.error('Desktop logout button (#logoutBtn) not found');
+        console.error('Desktop logout button (#logoutBtn) not found');
     }
 
     if (mobileLogoutBtn) {
-      console.log('Mobile logout button found');
+        console.log('Mobile logout button found');
     } else {
-      console.error('Mobile logout button (#mobileLogoutBtn) not found');
+        console.error('Mobile logout button (#mobileLogoutBtn) not found');
     }
 
     // Remove any existing logout listeners to prevent duplicates
@@ -1317,17 +1326,17 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Event delegation for logout buttons
     function handleLogoutClick(event) {
-      if (event.target.id === 'logoutBtn' || event.target.id === 'mobileLogoutBtn') {
-        console.log(`Logout button clicked: ${event.target.id}`);
-        handleLogout();
-      }
+        if (event.target.id === 'logoutBtn' || event.target.id === 'mobileLogoutBtn') {
+            console.log(`Logout button clicked: ${event.target.id}`);
+            handleLogout();
+        }
     }
 
     document.addEventListener('click', handleLogoutClick);
 
     initializeCharts();
     initializeTerminal();
-  }
+}
 
   function handleApiKeyChange(e) {
     apiKey = e.target.value.trim();