350 lines
11 KiB
Plaintext
350 lines
11 KiB
Plaintext
@using Indotalent.Shared.Consts
|
|
@inherits LayoutComponentBase
|
|
@inject NavigationManager Navigation
|
|
|
|
<MudThemeProvider />
|
|
<MudDialogProvider />
|
|
<MudSnackbarProvider />
|
|
<MudPopoverProvider />
|
|
|
|
<style>
|
|
@@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;450;500;600;700;800&display=swap');
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
/* ===== SPLIT CONTAINER ===== */
|
|
.auth-split-container {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
font-family: "Poppins", sans-serif;
|
|
}
|
|
|
|
/* ===== LEFT PANEL - BRANDING ===== */
|
|
.auth-left-panel {
|
|
display: none;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #7C3AED, #8B5CF6, #6D28D9);
|
|
}
|
|
|
|
.auth-left-panel::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 500px;
|
|
height: 500px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
top: -120px;
|
|
right: -180px;
|
|
}
|
|
|
|
.auth-left-panel::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 300px;
|
|
height: 300px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
bottom: -60px;
|
|
left: -80px;
|
|
}
|
|
|
|
.auth-left-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 26rem;
|
|
padding: 3rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.auth-brand-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.auth-brand-icon {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
backdrop-filter: blur(4px);
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.auth-brand-icon:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.auth-brand-icon svg {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.auth-brand-name {
|
|
font-size: 1.375rem;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.auth-brand-subtitle {
|
|
font-size: 0.75rem;
|
|
color: rgba(255, 255, 255, 0.65);
|
|
}
|
|
|
|
.auth-welcome-title {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
line-height: 1.3;
|
|
margin: 0;
|
|
}
|
|
|
|
.auth-feature-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.auth-feature-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
padding: 0.625rem 0.875rem;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-radius: 0.5rem;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.auth-feature-icon {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
border-radius: 0.375rem;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.auth-feature-icon svg {
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.auth-feature-text-title {
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.auth-feature-text-desc {
|
|
font-size: 0.71875rem;
|
|
color: rgba(255, 255, 255, 0.65);
|
|
margin-top: 0.0625rem;
|
|
}
|
|
|
|
/* ===== RIGHT PANEL - FORM AREA ===== */
|
|
.auth-right-panel {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.auth-form-wrapper {
|
|
width: 100%;
|
|
max-width: 28rem;
|
|
}
|
|
|
|
.auth-card {
|
|
border-radius: 1rem !important;
|
|
border: 1px solid #E2E8F0 !important;
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02) !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.auth-card .mud-card-content {
|
|
padding: 2rem !important;
|
|
}
|
|
|
|
.auth-card-footer {
|
|
text-align: center;
|
|
padding: 1.25rem 1rem 0.5rem 1rem;
|
|
}
|
|
|
|
.auth-card-footer-text {
|
|
font-size: 0.75rem;
|
|
color: #94A3B8;
|
|
letter-spacing: 0.5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ===== MOBILE BRAND STRIP ===== */
|
|
.auth-mobile-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.625rem;
|
|
padding: 0.75rem 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.auth-mobile-brand-icon {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
background: #8B5CF6;
|
|
border-radius: 0.625rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.auth-mobile-brand-icon svg {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.auth-mobile-brand-name {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: #1E293B;
|
|
}
|
|
|
|
/* ===== RESPONSIVE ===== */
|
|
@@media (min-width: 1024px) {
|
|
.auth-left-panel {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 50%;
|
|
}
|
|
|
|
.auth-right-panel {
|
|
width: 50%;
|
|
padding: 3rem 4rem;
|
|
}
|
|
|
|
.auth-mobile-brand {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@@media (min-width: 1280px) {
|
|
.auth-right-panel {
|
|
padding: 4rem 5rem;
|
|
}
|
|
|
|
.auth-left-content {
|
|
padding: 4rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="auth-split-container">
|
|
|
|
<!-- ===== LEFT PANEL: BRANDING ===== -->
|
|
<div class="auth-left-panel">
|
|
<div class="auth-left-content">
|
|
<div class="auth-brand-row">
|
|
<div class="auth-brand-icon" @onclick="NavigateToHome">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="auth-brand-name">@GlobalConsts.AppName</div>
|
|
<div class="auth-brand-subtitle">Enterprise Application Platform</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="auth-welcome-title">One Platform,<br/>All Your Business</h2>
|
|
|
|
<div class="auth-feature-list">
|
|
<div class="auth-feature-item">
|
|
<div class="auth-feature-icon">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25A2.25 2.25 0 0113.5 8.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="auth-feature-text-title">Inventory & Procurement</div>
|
|
<div class="auth-feature-text-desc">Products, warehouses, purchase orders</div>
|
|
</div>
|
|
</div>
|
|
<div class="auth-feature-item">
|
|
<div class="auth-feature-icon">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5 0h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375M20.25 18v-.75c0-.414.336-.75.75-.75h.75M6 12h.008v.008H6V12zm3 0h.008v.008H9V12zm3 0h.008v.008H12V12z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="auth-feature-text-title">Sales & Orders</div>
|
|
<div class="auth-feature-text-desc">Invoices, payments, customer management</div>
|
|
</div>
|
|
</div>
|
|
<div class="auth-feature-item">
|
|
<div class="auth-feature-icon">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="auth-feature-text-title">Reports & Analytics</div>
|
|
<div class="auth-feature-text-desc">Real-time dashboards and data insights</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== RIGHT PANEL: FORM AREA ===== -->
|
|
<div class="auth-right-panel">
|
|
<div class="auth-form-wrapper">
|
|
|
|
<!-- Mobile Brand Strip -->
|
|
<div class="auth-mobile-brand">
|
|
<div class="auth-mobile-brand-icon">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
|
</svg>
|
|
</div>
|
|
<span class="auth-mobile-brand-name">@GlobalConsts.AppName</span>
|
|
</div>
|
|
|
|
<!-- Form Card -->
|
|
<MudCard Elevation="0" Class="auth-card">
|
|
<MudCardContent>
|
|
@Body
|
|
</MudCardContent>
|
|
</MudCard>
|
|
|
|
<!-- Footer Copyright -->
|
|
<div class="auth-card-footer">
|
|
<span class="auth-card-footer-text">
|
|
© @DateTime.Now.Year @GlobalConsts.AppInitial. ALL RIGHTS RESERVED.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
private void NavigateToHome()
|
|
{
|
|
Navigation.NavigateTo("/", forceLoad: true);
|
|
}
|
|
} |