From d490359591e583efbaf3fc23d53c2d8372571d5b Mon Sep 17 00:00:00 2001 From: Sharang Parnerkar Date: Sun, 8 Mar 2026 17:51:41 +0100 Subject: [PATCH] Add polished login landing page with feature highlights Dark-themed login page with shield logo, feature grid, gradient sign-in button, subtle grid background, and glow effect. Co-Authored-By: Claude Opus 4.6 --- assets/main.css | 142 ++++++++++++++++++ .../src/components/app_shell.rs | 69 ++++++++- 2 files changed, 203 insertions(+), 8 deletions(-) diff --git a/assets/main.css b/assets/main.css index 4bbdd35..1e8f4f8 100644 --- a/assets/main.css +++ b/assets/main.css @@ -313,3 +313,145 @@ tr:hover { padding: 16px; } } + +/* Login Page */ +.login-page { + position: relative; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: var(--bg-primary); + overflow: hidden; +} + +.login-bg-grid { + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px); + background-size: 60px 60px; + mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); + -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); +} + +.login-bg-glow { + position: absolute; + top: -200px; + left: 50%; + transform: translateX(-50%); + width: 600px; + height: 600px; + background: radial-gradient(circle, rgba(56, 189, 248, 0.08) 0%, transparent 70%); + pointer-events: none; +} + +.login-container { + position: relative; + z-index: 1; + width: 100%; + max-width: 440px; + padding: 20px; +} + +.login-card { + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 20px; + padding: 48px 40px; + text-align: center; + box-shadow: + 0 0 0 1px rgba(56, 189, 248, 0.05), + 0 20px 50px -12px rgba(0, 0, 0, 0.5); +} + +.login-logo { + display: inline-flex; + align-items: center; + justify-content: center; + width: 80px; + height: 80px; + border-radius: 20px; + background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(56, 189, 248, 0.05)); + border: 1px solid rgba(56, 189, 248, 0.2); + color: var(--accent); + margin-bottom: 24px; +} + +.login-title { + font-size: 26px; + font-weight: 700; + color: var(--text-primary); + margin-bottom: 8px; + letter-spacing: -0.02em; +} + +.login-subtitle { + font-size: 14px; + color: var(--text-secondary); + line-height: 1.6; + margin-bottom: 32px; +} + +.login-features { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + margin-bottom: 32px; + text-align: left; +} + +.login-feature { + display: flex; + align-items: center; + gap: 8px; + font-size: 13px; + color: var(--text-secondary); + padding: 8px 12px; + background: rgba(56, 189, 248, 0.04); + border-radius: 8px; + border: 1px solid rgba(56, 189, 248, 0.06); +} + +.login-feature-icon { + color: var(--accent); + font-size: 8px; + flex-shrink: 0; +} + +.login-button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + width: 100%; + padding: 14px 24px; + background: linear-gradient(135deg, var(--accent), #0ea5e9); + color: #0f172a; + font-size: 15px; + font-weight: 600; + border: none; + border-radius: 12px; + cursor: pointer; + text-decoration: none; + transition: all 0.2s; + box-shadow: 0 4px 16px rgba(56, 189, 248, 0.25); +} + +.login-button:hover { + background: linear-gradient(135deg, var(--accent-hover), #38bdf8); + box-shadow: 0 6px 24px rgba(56, 189, 248, 0.35); + transform: translateY(-1px); +} + +.login-button:active { + transform: translateY(0); +} + +.login-footer { + margin-top: 20px; + font-size: 12px; + color: var(--text-secondary); + opacity: 0.6; +} diff --git a/compliance-dashboard/src/components/app_shell.rs b/compliance-dashboard/src/components/app_shell.rs index 1f003ec..6cb9366 100644 --- a/compliance-dashboard/src/components/app_shell.rs +++ b/compliance-dashboard/src/components/app_shell.rs @@ -44,14 +44,67 @@ pub fn AppShell() -> Element { #[component] fn LoginPage() -> Element { rsx! { - div { class: "flex items-center justify-center h-screen bg-gray-950", - div { class: "text-center", - h1 { class: "text-3xl font-bold text-white mb-4", "Compliance Scanner" } - p { class: "text-gray-400 mb-8", "Sign in to access the dashboard" } - a { - href: "/auth", - class: "px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-500 transition-colors font-medium", - "Sign in with Keycloak" + div { class: "login-page", + div { class: "login-bg-grid" } + div { class: "login-bg-glow" } + div { class: "login-container", + div { class: "login-card", + div { class: "login-logo", + svg { + width: "48", + height: "48", + view_box: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "1.5", + stroke_linecap: "round", + stroke_linejoin: "round", + path { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" } + path { d: "M9 12l2 2 4-4" } + } + } + h1 { class: "login-title", "Compliance Scanner" } + p { class: "login-subtitle", + "AI-powered security scanning, SBOM analysis, and compliance monitoring" + } + div { class: "login-features", + div { class: "login-feature", + span { class: "login-feature-icon", "\u{25C6}" } + span { "SAST & CVE Detection" } + } + div { class: "login-feature", + span { class: "login-feature-icon", "\u{25C6}" } + span { "SBOM & License Compliance" } + } + div { class: "login-feature", + span { class: "login-feature-icon", "\u{25C6}" } + span { "Code Knowledge Graph" } + } + div { class: "login-feature", + span { class: "login-feature-icon", "\u{25C6}" } + span { "DAST & Impact Analysis" } + } + } + a { + href: "/auth", + class: "login-button", + svg { + width: "20", + height: "20", + view_box: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + rect { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" } + path { d: "M7 11V7a5 5 0 0 1 10 0v4" } + } + span { "Sign in to continue" } + } + p { class: "login-footer", + "Secured with single sign-on" + } } } }