go2ismail/blazor-oms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
go2ismail
2026-07-21 13:38:38 +07:00
commit 5047288f04
777 changed files with 57255 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Features/Account/AuthenticationLayout.razor
+350
View File
@@ -0,0 +1,350 @@
@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);
}
}