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 <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
142
assets/main.css
142
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;
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user