From 672473603eca698eac06cbb8de265d21c9edf452 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Thu, 12 Feb 2026 10:24:50 +0100
Subject: [PATCH] Enhance login page with new UI and styling updates

Introduced a redesigned login page featuring a two-column layout with a branding section. Added new styles such as gradient backgrounds, input fields with focus animations, and button hover effects. These changes improve the visual appeal and user experience.
---
 frontend/src/pages/LoginPage.jsx |  57 +++++++++------
 frontend/src/styles.css          | 121 ++++++++++++++++++++++++++++++-
 2 files changed, 156 insertions(+), 22 deletions(-)

diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
index 82cd5a0..d079e31 100644
--- a/frontend/src/pages/LoginPage.jsx
+++ b/frontend/src/pages/LoginPage.jsx
@@ -26,27 +26,42 @@ export function LoginPage() {
 
   return (
     <div className="login-wrap">
-      <form className="card login-card" onSubmit={submit}>
-        <h2>Login</h2>
-        <label>Email</label>
-        <input
-          type="email"
-          placeholder="E-Mail"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          autoComplete="username"
-        />
-        <label>Passwort</label>
-        <input
-          type="password"
-          placeholder="Password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          autoComplete="current-password"
-        />
-        {error && <p className="error">{error}</p>}
-        <button disabled={loading}>{loading ? "Bitte warten..." : "Einloggen"}</button>
-      </form>
+      <div className="login-shell">
+        <section className="login-brand card">
+          <h1>NexaPG Monitor</h1>
+          <p>PostgreSQL Monitoring, Query Insights und Infrastruktur-Overview in einer Ansicht.</p>
+          <div className="login-brand-points">
+            <span>Multi-Target Monitoring</span>
+            <span>Live Database Overview</span>
+            <span>RBAC + Audit Logging</span>
+          </div>
+        </section>
+        <form className="card login-card" onSubmit={submit}>
+          <h2>Login</h2>
+          <label>Email</label>
+          <div className="input-shell">
+            <input
+              type="email"
+              placeholder="E-Mail"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              autoComplete="username"
+            />
+          </div>
+          <label>Passwort</label>
+          <div className="input-shell">
+            <input
+              type="password"
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete="current-password"
+            />
+          </div>
+          {error && <p className="error">{error}</p>}
+          <button className="login-cta" disabled={loading}>{loading ? "Bitte warten..." : "Einloggen"}</button>
+        </form>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 10061c6..61b89b1 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -213,14 +213,127 @@ td {
   min-height: 100vh;
   display: grid;
   place-items: center;
+  padding: 20px;
+  background:
+    radial-gradient(1000px 500px at 10% 10%, #12366e55, transparent),
+    radial-gradient(900px 450px at 90% 90%, #1e4f7e40, transparent);
 }
 
 .login-card {
-  width: min(420px, 90vw);
+  width: min(460px, 92vw);
+  display: grid;
+  gap: 10px;
+  border-color: #3559a3;
+  backdrop-filter: blur(8px);
+  animation: loginEnter 0.5s ease;
+}
+
+.login-shell {
+  width: min(1120px, 96vw);
+  display: grid;
+  grid-template-columns: 1.1fr 0.9fr;
+  gap: 18px;
+}
+
+.login-brand {
+  min-height: 420px;
+  display: grid;
+  align-content: center;
+  gap: 14px;
+  border-color: #27498d;
+  background:
+    linear-gradient(155deg, #152957 0%, #102147 40%, #0f1b3d 100%);
+}
+
+.login-brand h1 {
+  margin: 0;
+  font-size: 38px;
+}
+
+.login-brand p {
+  margin: 0;
+  color: #b5c5e4;
+  max-width: 58ch;
+}
+
+.login-brand-points {
   display: grid;
   gap: 8px;
 }
 
+.login-brand-points span {
+  color: #d2e0f8;
+  font-size: 14px;
+}
+
+.input-shell {
+  position: relative;
+  border: 1px solid #2b3f74;
+  border-radius: 12px;
+  padding: 1px;
+  background: #0e1731;
+  transition: border-color 0.2s ease;
+}
+
+.input-shell::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: 12px;
+  padding: 1px;
+  background: conic-gradient(#38bdf8, #4f6ee7, #38bdf8);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  opacity: 0;
+}
+
+.input-shell:focus-within {
+  border-color: transparent;
+}
+
+.input-shell:focus-within::before {
+  opacity: 1;
+  animation: spin 1.2s linear infinite;
+}
+
+.input-shell input {
+  width: 100%;
+  border: 0;
+  outline: none;
+  background: transparent;
+}
+
+.login-cta {
+  margin-top: 2px;
+  font-weight: 700;
+  border-color: #3f74d6;
+  background: linear-gradient(90deg, #1e74d6, #1b5ab6);
+}
+
+.login-cta:hover {
+  border-color: #6aa8ff;
+  filter: brightness(1.05);
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loginEnter {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .query {
   max-width: 400px;
   white-space: nowrap;
@@ -298,4 +411,10 @@ td {
     height: auto;
     overflow: visible;
   }
+  .login-shell {
+    grid-template-columns: 1fr;
+  }
+  .login-brand {
+    min-height: 240px;
+  }
 }