initial commit
This commit is contained in:
@@ -0,0 +1,366 @@
|
||||
@using Indotalent.Shared.Consts
|
||||
@inherits LayoutComponentBase
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<MudThemeProvider Theme="_theme" />
|
||||
<MudDialogProvider />
|
||||
<MudSnackbarProvider />
|
||||
<MudPopoverProvider />
|
||||
|
||||
<style>
|
||||
.auth-split-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.auth-left-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@media (min-width: 1024px) {
|
||||
.auth-left-panel {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #3228A0, #594AE2, #7B6FE8);
|
||||
}
|
||||
|
||||
.auth-left-panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -80px;
|
||||
right: -80px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.auth-left-panel::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -60px;
|
||||
left: -60px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.auth-left-content {
|
||||
max-width: 28rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.auth-brand-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.auth-brand-icon {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(8px);
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.auth-welcome-title {
|
||||
font-size: 1.875rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.auth-welcome-desc {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.auth-feature-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.auth-feature-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.auth-feature-check {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: 0.25rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.auth-feature-check svg {
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.auth-feature-label {
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.auth-feature-desc {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.auth-support-card {
|
||||
margin-top: 2.5rem;
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.auth-support-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.auth-support-avatar {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.auth-support-avatar svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.auth-support-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.auth-support-desc {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.auth-right-panel {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1.5rem;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
@@media (min-width: 1024px) {
|
||||
.auth-right-panel {
|
||||
width: 50%;
|
||||
padding: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-form-wrapper {
|
||||
width: 100%;
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #e2e8f0 !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.auth-card-footer {
|
||||
text-align: center;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.auth-mobile-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@@media (min-width: 1024px) {
|
||||
.auth-mobile-brand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-mobile-brand-icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background: #594AE2;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.auth-mobile-brand-icon svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.auth-mobile-brand-name {
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
color: #594AE2;
|
||||
}
|
||||
|
||||
.auth-mobile-brand-tagline {
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="auth-split-container">
|
||||
|
||||
<!-- LEFT PANEL - Branding -->
|
||||
<div class="auth-left-panel">
|
||||
<div class="auth-left-content">
|
||||
<div class="auth-brand-row" @onclick="NavigateToHome" style="cursor: pointer;">
|
||||
<div class="auth-brand-icon">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 2rem; height: 2rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" /></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 1.5rem; font-weight: 700; color: white;">@GlobalConsts.AppName</div>
|
||||
<div style="font-size: 0.875rem; color: rgba(255, 255, 255, 0.7);">@GlobalConsts.AppTagline</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="auth-welcome-title">Smart HR, Simplified</h2>
|
||||
<p class="auth-welcome-desc">Manage your workforce with a complete, production-ready platform built on .NET 10 & Blazor Server.</p>
|
||||
<div class="auth-feature-list">
|
||||
<div class="auth-feature-item">
|
||||
<div class="auth-feature-check">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="auth-feature-label">Leave & Attendance</div>
|
||||
<div class="auth-feature-desc">Request, approve, and track leave with balance overview</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="auth-feature-item">
|
||||
<div class="auth-feature-check">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="auth-feature-label">Performance & Appraisal</div>
|
||||
<div class="auth-feature-desc">Evaluations, promotions, and transfer management</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="auth-feature-item">
|
||||
<div class="auth-feature-check">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="auth-feature-label">Payroll Processing</div>
|
||||
<div class="auth-feature-desc">Salary grades, income, deduction, and payroll runs</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="auth-support-card">
|
||||
<div class="auth-support-row">
|
||||
<div class="auth-support-avatar">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="auth-support-label">Try the Live Demo</div>
|
||||
<div class="auth-support-desc">Explore every feature at blazor-saas-hrm.csharpasp.net</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT PANEL - Form -->
|
||||
<div class="auth-right-panel">
|
||||
<div class="auth-form-wrapper">
|
||||
<div class="auth-mobile-brand">
|
||||
<div class="auth-mobile-brand-icon">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 1.25rem; height: 1.25rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" /></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="auth-mobile-brand-name">@GlobalConsts.AppName</div>
|
||||
<div class="auth-mobile-brand-tagline">@GlobalConsts.AppTagline</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MudCard Elevation="0" Class="auth-card pa-4 pa-sm-5">
|
||||
<MudCardContent Class="pa-0 pa-sm-2">
|
||||
@Body
|
||||
</MudCardContent>
|
||||
<div class="auth-card-footer mt-4">
|
||||
© @DateTime.Now.Year @GlobalConsts.AppInitial. ALL RIGHTS RESERVED.
|
||||
</div>
|
||||
</MudCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private MudTheme _theme = new MudTheme
|
||||
{
|
||||
PaletteLight = new PaletteLight
|
||||
{
|
||||
Primary = "#594AE2",
|
||||
Secondary = "#7B6FE8",
|
||||
AppbarBackground = "#594AE2",
|
||||
DrawerBackground = "#ffffff",
|
||||
Background = "#f8fafc",
|
||||
Surface = "#ffffff",
|
||||
TextPrimary = "#1e293b",
|
||||
TextSecondary = "#64748b",
|
||||
Divider = "#e2e8f0",
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
private void NavigateToHome()
|
||||
{
|
||||
Navigation.NavigateTo("/", forceLoad: true);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user