blur inputs and scroll to top after login

README.md

@@ -1,6 +1,8 @@
 # Alpaca Dashboard
 
-A clean, mobile-optimized web dashboard for monitoring your Alpaca trading account in real-time.
+A web dashboard for monitoring your Alpaca trading account in real-time.
+
+![Dashboard Preview](screenshot.png)
 
 ## Features
 

index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Alpaca Dashboard</title>
     <link rel="icon" type="image/png" href="alpaca.png">
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
@@ -37,11 +37,11 @@
             z-index:1;
             max-width:1200px;
             margin:0 auto;
-            padding:20px;
+            padding:12px 12px;
         }
         header{
             text-align:center;
-            padding:40px 0 30px;
+            padding:20px 0 16px;
             animation:slideDown .6s ease-out;
         }
         @keyframes slideDown{
@@ -157,7 +157,7 @@
             border-radius:8px;
             color:var(--text-primary);
             font-family:'JetBrains Mono',monospace;
-            font-size:14px;
+            font-size:16px;
             transition:all .3s ease;
         }
         input[type="password"]:focus,input[type="text"]:focus{
@@ -219,7 +219,7 @@
             display:flex;
             justify-content:space-between;
             align-items:center;
-            margin-bottom:24px;
+            margin-bottom:16px;
             flex-wrap:wrap;
             gap:12px;
         }
@@ -227,6 +227,8 @@
             display:flex;
             align-items:center;
             gap:12px;
+            flex-shrink:1;
+            min-width:0;
         }
         .status-badge{
             padding:6px 12px;
@@ -256,6 +258,10 @@
             position:relative;
             padding:4px 8px;
             border-radius:4px;
+            white-space:nowrap;
+            overflow:hidden;
+            text-overflow:ellipsis;
+            max-width:100%;
         }
         .account-number:hover{
             color:var(--accent-green);
@@ -285,15 +291,15 @@
         }
         .stats-grid{
             display:grid;
-            grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
+            grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
-            gap:16px;
+            gap:12px;
-            margin-bottom:24px;
+            margin-bottom:20px;
         }
         .stat-card{
             background:var(--bg-card);
             border:1px solid var(--border);
             border-radius:12px;
-            padding:20px;
+            padding:16px;
             transition:all .3s ease;
             position:relative;
             overflow:hidden;
@@ -429,13 +435,30 @@
         }
         @media (max-width:768px){
             .container{
-                padding:12px;
+                padding:8px;
             }
             header{
-                padding:20px 0 20px;
+                padding:12px 0 12px;
+            }
+            .logo-image{
+                width:120px;
+            }
+            .logo{
+                font-size:24px;
+            }
+            .tagline{
+                font-size:12px;
             }
             .stats-grid{
                 grid-template-columns:1fr;
+                gap:8px;
+                margin-bottom:12px;
+            }
+            .stat-card{
+                padding:12px;
+            }
+            .dashboard-header{
+                margin-bottom:12px;
             }
             th,td{
                 padding:12px 8px;
@@ -454,9 +477,6 @@
             animation:pulse 1.5s ease-in-out infinite;
         }
 
-        /* -----------------------------------------------------------------
-           Hamburger menu – hidden until login succeeds
-        ----------------------------------------------------------------- */
         .hamburger{
             position:fixed;
             top:20px;
@@ -465,7 +485,7 @@
             cursor:pointer;
             color:var(--text-primary);
             z-index:10;
-            display:none;   /* hidden on the login page */
+            display:none;
         }
         .menu{
             position:fixed;
@@ -624,10 +644,11 @@
 
                 if (response.ok) {
                     updateTradingModeBadge(tradingMode);
+                    document.activeElement.blur();
                     document.getElementById('loginForm').style.display = 'none';
                     document.getElementById('dashboard').style.display = 'block';
-                    // show hamburger now that the user is logged in
                     document.getElementById('menuToggle').style.display = 'block';
+                    window.scrollTo(0, 0);
                     await loadDashboard();
                     setInterval(loadDashboard, 30000);
                     return;
@@ -821,14 +842,10 @@
             document.getElementById('loginForm').style.display = 'block';
             document.getElementById('dashboard').style.display = 'none';
             document.getElementById('loginError').innerHTML = '';
-            // hide hamburger again
             document.getElementById('menuToggle').style.display = 'none';
             document.getElementById('menu').classList.remove('show');
         }
 
-        /* -----------------------------------------------------------------
-           Hamburger menu logic
-        ----------------------------------------------------------------- */
         document.getElementById('menuToggle').addEventListener('click', () => {
             document.getElementById('menu').classList.toggle('show');
         });
@@ -838,7 +855,6 @@
             logout();
         });
 
-        // Close menu when clicking outside of it
         document.addEventListener('click', (e) => {
             const menu = document.getElementById('menu');
             const toggle = document.getElementById('menuToggle');
@@ -849,4 +865,3 @@
     </script>
 </body>
 </html>
-