better login error style

backend/main.py

@@ -164,8 +164,12 @@ async def login_page(request: Request, error: str = None):
     
     # Inject error message if present
     if error:
-        content = content.replace('<!-- ERROR_PLACEHOLDER -->', 
-                                 f'<div class="error-message">❌ {error}</div>')
+        content = content.replace('<!-- ERROR_CLASS_PLACEHOLDER -->', 'class="error"')
+        content = content.replace('<!-- ERROR_MESSAGE_PLACEHOLDER -->', 
+                                 f'<div class="error-message">{error}</div>')
+    else:
+        content = content.replace('<!-- ERROR_CLASS_PLACEHOLDER -->', '')
+        content = content.replace('<!-- ERROR_MESSAGE_PLACEHOLDER -->', '')
     
     return content
 
@@ -183,7 +187,7 @@ async def login(request: Request, password: str = Form(...)):
         return RedirectResponse(url="/", status_code=303)
     else:
         # Redirect back to login with error message
-        return RedirectResponse(url="/login?error=Invalid+password.+Please+try+again.", status_code=303)
+        return RedirectResponse(url="/login?error=Incorrect+password.+Please+try+again.", status_code=303)
 
 
 @app.get("/logout")

frontend/login.html

@@ -84,6 +84,11 @@
             gap: 1rem;
         }
         
+        form > div {
+            display: flex;
+            flex-direction: column;
+        }
+        
         input[type="password"] {
             width: 100%;
             padding: 0.875rem 1rem;
@@ -125,14 +130,43 @@
         }
         
         .error-message {
-            background-color: #fee;
-            color: #c53030;
-            padding: 0.875rem 1rem;
-            border-radius: 8px;
-            font-size: 0.875rem;
-            margin-bottom: 1rem;
-            border: 1px solid #fcc;
+            color: var(--error, #c53030);
+            font-size: 0.813rem;
+            margin-top: 0.5rem;
             text-align: left;
+            display: flex;
+            align-items: center;
+            gap: 0.375rem;
+            animation: fadeInDown 0.3s ease-out;
+        }
+        
+        .error-message::before {
+            content: "⚠️";
+            flex-shrink: 0;
+            font-size: 0.875rem;
+        }
+        
+        /* Shake animation for password input on error */
+        input.error {
+            animation: shake 0.4s ease-in-out;
+            border-color: var(--error, #c53030);
+        }
+        
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
+            20%, 40%, 60%, 80% { transform: translateX(8px); }
+        }
+        
+        @keyframes fadeInDown {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
         
         .footer {
@@ -159,16 +193,19 @@
         <h1>NoteDiscovery</h1>
         <p class="tagline">Your Self-Hosted Knowledge Base</p>
         
-        <!-- ERROR_PLACEHOLDER -->
-        
         <form method="post" action="/login">
-            <input 
-                type="password" 
-                name="password" 
-                placeholder="Enter your password" 
-                required 
-                autofocus
-            >
+            <div>
+                <input 
+                    type="password" 
+                    name="password" 
+                    id="password"
+                    placeholder="Enter your password" 
+                    required 
+                    autofocus
+                    <!-- ERROR_CLASS_PLACEHOLDER -->
+                >
+                <!-- ERROR_MESSAGE_PLACEHOLDER -->
+            </div>
             <button type="submit">🔓 Unlock</button>
         </form>