initial commit
This commit is contained in:
@@ -0,0 +1,654 @@
|
||||
@using Indotalent.Shared.Consts
|
||||
@inherits LayoutComponentBase
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<MudThemeProvider @bind-IsDarkMode="isDarkMode" Theme="_theme" />
|
||||
<MudDialogProvider />
|
||||
<MudSnackbarProvider />
|
||||
<MudPopoverProvider />
|
||||
|
||||
<style>
|
||||
@@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
.auth-split-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
.auth-left-panel {
|
||||
display: none;
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #BE185D 0%, #DB2777 40%, #EC4899 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.auth-left-panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -120px;
|
||||
right: -120px;
|
||||
width: 340px;
|
||||
height: 340px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.auth-left-panel::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -80px;
|
||||
left: -80px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.auth-left-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 28rem;
|
||||
padding: 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.auth-brand-icon:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.auth-brand-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.auth-brand-name span:first-child {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.auth-brand-name span:last-child {
|
||||
font-size: 0.8125rem;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.auth-welcome-title {
|
||||
font-size: 1.875rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.auth-welcome-desc {
|
||||
font-size: 0.875rem;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
line-height: 1.65;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.auth-feature-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.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: #ffffff;
|
||||
}
|
||||
|
||||
.auth-feature-text strong {
|
||||
display: block;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.auth-feature-text p {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.auth-support-card {
|
||||
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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.auth-support-icon {
|
||||
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-icon svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.auth-support-text strong {
|
||||
display: block;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.auth-support-text span {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
|
||||
/* Right Panel */
|
||||
.auth-right-panel {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1.5rem;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.auth-form-wrapper {
|
||||
width: 100%;
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
border-radius: 1rem !important;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
|
||||
border: 1px solid #e2e8f0 !important;
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
.auth-card-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.auth-card-footer span {
|
||||
font-size: 0.75rem;
|
||||
color: #94a3b8;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.auth-mobile-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.auth-mobile-brand-icon {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
background: #DB2777;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.auth-mobile-brand-icon svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.auth-mobile-brand-name {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@@media (min-width: 1024px) {
|
||||
.auth-left-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.auth-right-panel {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.auth-mobile-brand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@media (min-width: 1280px) {
|
||||
.auth-right-panel {
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
.auth-left-content {
|
||||
padding: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Page-level shared styles ===== */
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #0F172A;
|
||||
margin: 0 0 0.25rem 0;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
font-size: 0.875rem;
|
||||
color: #64748B;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
margin-bottom: 0.375rem;
|
||||
margin-left: 0.125rem;
|
||||
}
|
||||
|
||||
.form-label-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.form-label-row .form-label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.forgot-link {
|
||||
font-size: 0.75rem;
|
||||
color: #64748B;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.forgot-link:hover {
|
||||
color: #DB2777;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.remember-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin: 0.25rem 0 1rem 0;
|
||||
}
|
||||
|
||||
.divider-or {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.divider-or::before,
|
||||
.divider-or::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: #E2E8F0;
|
||||
}
|
||||
|
||||
.divider-or span {
|
||||
font-size: 0.75rem;
|
||||
color: #94A3B8;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.auth-link {
|
||||
color: #DB2777;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.auth-link:hover {
|
||||
color: #BE185D;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.btn-primary-custom {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.75rem;
|
||||
background: #DB2777;
|
||||
color: #fff;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border-radius: 0.5rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.btn-primary-custom:hover {
|
||||
background: #BE185D;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(219, 39, 119, 0.25);
|
||||
}
|
||||
|
||||
.btn-primary-custom:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-google {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0.625rem 1rem;
|
||||
background: #ffffff;
|
||||
color: #475569;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
border: 1.5px solid #E2E8F0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-transform: none;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.btn-google:hover {
|
||||
border-color: #DB2777;
|
||||
background: #FDF2F8;
|
||||
}
|
||||
|
||||
.btn-google:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.logout-container,
|
||||
.confirm-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logout-icon-wrapper,
|
||||
.confirm-icon-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.logout-icon-circle,
|
||||
.confirm-icon-circle {
|
||||
background: #FDF2F8;
|
||||
border-radius: 50%;
|
||||
padding: 1.25rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logout-title,
|
||||
.confirm-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #0F172A;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.logout-desc,
|
||||
.confirm-desc {
|
||||
font-size: 0.875rem;
|
||||
color: #64748B;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 0.625rem 1rem;
|
||||
color: #94A3B8;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* MudBlazor overrides */
|
||||
.auth-card .mud-input-outlined-border {
|
||||
border-color: #E2E8F0 !important;
|
||||
}
|
||||
|
||||
.auth-card .mud-input:focus-within .mud-input-outlined-border {
|
||||
border-color: #DB2777 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="auth-split-container">
|
||||
|
||||
<!-- LEFT PANEL: Branding (visible lg+) -->
|
||||
<div class="auth-left-panel">
|
||||
<div class="auth-left-content">
|
||||
<!-- Brand Logo + Name -->
|
||||
<div class="auth-brand-row">
|
||||
<div class="auth-brand-icon" @onclick="NavigateToHome">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="auth-brand-name">
|
||||
<span>@GlobalConsts.AppInitial</span>
|
||||
<span>Blazor SPA & Wellness Source Code</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Welcome Heading -->
|
||||
<h2 class="auth-welcome-title">Your Complete<br/>Spa & Wellness Solution</h2>
|
||||
<p class="auth-welcome-desc">A production-ready Blazor Spa & Wellness Management source code that bridges your business and your customers. Sign in to explore the full application.</p>
|
||||
|
||||
<!-- Feature Checkmarks -->
|
||||
<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 class="auth-feature-text">
|
||||
<strong>Sales & Purchase</strong>
|
||||
<p>Orders, invoices, procurement & reporting</p>
|
||||
</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 class="auth-feature-text">
|
||||
<strong>Booking & Inventory</strong>
|
||||
<p>Scheduler, warehouse & stock control</p>
|
||||
</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 class="auth-feature-text">
|
||||
<strong>Customer & Vendor</strong>
|
||||
<p>Contacts, groups & relationship tracking</p>
|
||||
</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 class="auth-feature-text">
|
||||
<strong>System Logs & Settings</strong>
|
||||
<p>Full control with audit & configuration</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Support Card -->
|
||||
<div class="auth-support-card">
|
||||
<div class="auth-support-icon">
|
||||
<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 class="auth-support-text">
|
||||
<strong>Production Ready</strong>
|
||||
<span>Fully tested, guaranteed to work out of the box</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT PANEL: Form Area -->
|
||||
<div class="auth-right-panel">
|
||||
<div class="auth-form-wrapper">
|
||||
<!-- Mobile Brand Strip (visible < lg) -->
|
||||
<div class="auth-mobile-brand">
|
||||
<div class="auth-mobile-brand-icon" @onclick="NavigateToHome">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="auth-mobile-brand-name">@GlobalConsts.AppInitial</span>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<MudCard Elevation="0" Class="auth-card">
|
||||
<MudCardContent Class="pa-6 pa-lg-8">
|
||||
@Body
|
||||
</MudCardContent>
|
||||
<div class="auth-card-footer">
|
||||
<span>© @DateTime.Now.Year @GlobalConsts.AppInitial. ALL RIGHTS RESERVED.</span>
|
||||
</div>
|
||||
</MudCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private bool isDarkMode;
|
||||
private MudTheme _theme = new()
|
||||
{
|
||||
PaletteLight = new PaletteLight()
|
||||
{
|
||||
Primary = "#DB2777",
|
||||
Secondary = "#F472B6",
|
||||
AppbarBackground = "#DB2777",
|
||||
Error = "#EF4444",
|
||||
Success = "#22C55E",
|
||||
Info = "#3B82F6",
|
||||
Warning = "#F59E0B"
|
||||
}
|
||||
};
|
||||
|
||||
private void NavigateToHome()
|
||||
{
|
||||
Navigation.NavigateTo("/", forceLoad: true);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user