deploy: hr-portal-v4-designs
This commit is contained in:
TenX PM
+267
@@ -0,0 +1,267 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HR Portal v4 — Sign In</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #0f2744 0%, #1e3a5f 40%, #1e40af 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -200px; left: -200px;
|
||||
width: 600px; height: 600px;
|
||||
background: rgba(37,99,235,0.15);
|
||||
border-radius: 50%;
|
||||
}
|
||||
body::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -150px; right: -150px;
|
||||
width: 500px; height: 500px;
|
||||
background: rgba(30,58,95,0.3);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.login-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 25px 60px rgba(0,0,0,0.35);
|
||||
padding: 48px 40px 40px;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.logo-area {
|
||||
text-align: center;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.logo-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px; height: 56px;
|
||||
background: #1e3a5f;
|
||||
border-radius: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.logo-text {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
.logo-sub {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.input-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #94a3b8;
|
||||
}
|
||||
input[type="email"], input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 11px 14px 11px 40px;
|
||||
border: 1.5px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #0f172a;
|
||||
background: #f8fafc;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
input:focus {
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
|
||||
background: #ffffff;
|
||||
}
|
||||
.form-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.remember-me {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
}
|
||||
.remember-me input[type="checkbox"] {
|
||||
width: 15px; height: 15px;
|
||||
padding: 0;
|
||||
accent-color: #2563eb;
|
||||
}
|
||||
.forgot-link {
|
||||
font-size: 13px;
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
.forgot-link:hover { text-decoration: underline; }
|
||||
.btn-signin {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
letter-spacing: 0.1px;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
}
|
||||
.btn-signin:hover { background: #1d4ed8; transform: translateY(-1px); }
|
||||
.btn-signin:active { transform: translateY(0); }
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 24px 0;
|
||||
color: #cbd5e1;
|
||||
font-size: 12px;
|
||||
}
|
||||
.divider::before, .divider::after {
|
||||
content: ''; flex: 1;
|
||||
height: 1px; background: #e2e8f0;
|
||||
}
|
||||
.sso-btn {
|
||||
width: 100%;
|
||||
padding: 11px;
|
||||
background: #ffffff;
|
||||
border: 1.5px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
.sso-btn:hover { border-color: #2563eb; background: #f8fafc; }
|
||||
.card-footer {
|
||||
text-align: center;
|
||||
margin-top: 28px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
.version-badge {
|
||||
display: inline-block;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 20px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-card">
|
||||
<div class="logo-area">
|
||||
<div class="logo-icon">
|
||||
<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="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="logo-text">HR Portal v4</div>
|
||||
<div class="logo-sub">Human Resource Management System</div>
|
||||
</div>
|
||||
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="email">Email Address</label>
|
||||
<div class="input-wrapper">
|
||||
<span class="input-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
</svg>
|
||||
</span>
|
||||
<input type="email" id="email" placeholder="you@company.com" value="admin@hrportal.in">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<div class="input-wrapper">
|
||||
<span class="input-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
||||
</svg>
|
||||
</span>
|
||||
<input type="password" id="password" placeholder="Enter your password" value="••••••••••">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<label class="remember-me">
|
||||
<input type="checkbox" checked> Remember me
|
||||
</label>
|
||||
<a href="#" class="forgot-link">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn-signin">Sign In to HR Portal</button>
|
||||
|
||||
<div class="divider">or continue with</div>
|
||||
|
||||
<button type="button" class="sso-btn">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
|
||||
<rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
|
||||
</svg>
|
||||
Sign in with Microsoft SSO
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="card-footer">
|
||||
Secured by HR Portal v4 • © 2026 All rights reserved
|
||||
<br>
|
||||
<span class="version-badge">v4.2.1</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,536 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HR Portal v4 — Admin Dashboard</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #0f172a; display: flex; min-height: 100vh; }
|
||||
|
||||
/* SIDEBAR */
|
||||
.sidebar {
|
||||
width: 240px; min-height: 100vh; background: #1e3a5f;
|
||||
display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100;
|
||||
}
|
||||
.sidebar-logo {
|
||||
padding: 20px 20px 16px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
.sidebar-logo-icon {
|
||||
width: 36px; height: 36px; background: #2563eb; border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #ffffff; letter-spacing: -0.2px; }
|
||||
.sidebar-logo-sub { font-size: 10px; color: #94a3b8; margin-top: 1px; }
|
||||
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-section-label {
|
||||
font-size: 10px; font-weight: 600; color: #64748b; letter-spacing: 0.8px;
|
||||
text-transform: uppercase; padding: 8px 20px 4px;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 9px 20px; color: #cbd5e1; font-size: 13.5px; font-weight: 500;
|
||||
cursor: pointer; transition: background 0.15s, color 0.15s;
|
||||
border-left: 3px solid transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-item:hover { background: rgba(255,255,255,0.07); color: #ffffff; }
|
||||
.nav-item.active {
|
||||
background: rgba(37,99,235,0.25); color: #ffffff;
|
||||
border-left-color: #2563eb;
|
||||
}
|
||||
.nav-item svg { flex-shrink: 0; opacity: 0.8; }
|
||||
.nav-item.active svg { opacity: 1; }
|
||||
.nav-badge {
|
||||
margin-left: auto; background: #2563eb; color: #fff;
|
||||
font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08);
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
.avatar {
|
||||
width: 34px; height: 34px; border-radius: 50%; background: #2563eb;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
|
||||
}
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #ffffff; }
|
||||
.sidebar-user-role { font-size: 11px; color: #94a3b8; }
|
||||
|
||||
/* HEADER */
|
||||
.main { margin-left: 240px; display: flex; flex-direction: column; flex: 1; }
|
||||
.header {
|
||||
position: sticky; top: 0; z-index: 50;
|
||||
background: #ffffff; border-bottom: 1px solid #e2e8f0;
|
||||
padding: 0 28px; height: 60px;
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
}
|
||||
.header-title { font-size: 16px; font-weight: 700; color: #0f172a; flex: 1; }
|
||||
.search-box {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
|
||||
padding: 8px 14px; width: 260px;
|
||||
}
|
||||
.search-box input {
|
||||
border: none; background: transparent; font-size: 13px; color: #374151;
|
||||
outline: none; width: 100%; font-family: inherit;
|
||||
}
|
||||
.search-box input::placeholder { color: #94a3b8; }
|
||||
.header-actions { display: flex; align-items: center; gap: 8px; }
|
||||
.icon-btn {
|
||||
width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e2e8f0;
|
||||
background: #ffffff; display: flex; align-items: center; justify-content: center;
|
||||
cursor: pointer; position: relative; color: #64748b;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.icon-btn:hover { background: #f8fafc; }
|
||||
.notif-badge {
|
||||
position: absolute; top: -4px; right: -4px;
|
||||
width: 16px; height: 16px; background: #dc2626; border-radius: 50%;
|
||||
font-size: 9px; font-weight: 700; color: #fff;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
.header-avatar {
|
||||
width: 34px; height: 34px; border-radius: 50%; background: #1e3a5f;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 12px; font-weight: 700; color: #fff; cursor: pointer;
|
||||
}
|
||||
|
||||
/* CONTENT */
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-header { margin-bottom: 24px; }
|
||||
.page-header h1 { font-size: 22px; font-weight: 700; color: #0f172a; }
|
||||
.page-header p { font-size: 13px; color: #64748b; margin-top: 3px; }
|
||||
|
||||
/* KPI CARDS */
|
||||
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.kpi-card {
|
||||
background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
|
||||
padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
display: flex; flex-direction: column; gap: 12px;
|
||||
}
|
||||
.kpi-header { display: flex; align-items: flex-start; justify-content: space-between; }
|
||||
.kpi-icon {
|
||||
width: 42px; height: 42px; border-radius: 10px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.kpi-icon.blue { background: #eff6ff; color: #2563eb; }
|
||||
.kpi-icon.green { background: #f0fdf4; color: #16a34a; }
|
||||
.kpi-icon.orange { background: #fff7ed; color: #d97706; }
|
||||
.kpi-icon.purple { background: #f5f3ff; color: #7c3aed; }
|
||||
.kpi-trend {
|
||||
display: flex; align-items: center; gap: 3px;
|
||||
font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 20px;
|
||||
}
|
||||
.kpi-trend.up { color: #16a34a; background: #f0fdf4; }
|
||||
.kpi-trend.down { color: #dc2626; background: #fef2f2; }
|
||||
.kpi-value { font-size: 30px; font-weight: 800; color: #0f172a; letter-spacing: -0.5px; }
|
||||
.kpi-label { font-size: 13px; color: #64748b; font-weight: 500; }
|
||||
|
||||
/* BOTTOM GRID */
|
||||
.bottom-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 20px; }
|
||||
.card {
|
||||
background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden;
|
||||
}
|
||||
.card-header {
|
||||
padding: 16px 20px; border-bottom: 1px solid #f1f5f9;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
}
|
||||
.card-title { font-size: 14px; font-weight: 700; color: #0f172a; }
|
||||
.card-link { font-size: 12px; color: #2563eb; text-decoration: none; font-weight: 500; }
|
||||
.card-link:hover { text-decoration: underline; }
|
||||
|
||||
/* TABLE */
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th {
|
||||
font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase;
|
||||
letter-spacing: 0.5px; padding: 10px 20px; text-align: left;
|
||||
background: #f8fafc; border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
td { padding: 11px 20px; font-size: 13px; color: #374151; border-bottom: 1px solid #f1f5f9; }
|
||||
tr:last-child td { border-bottom: none; }
|
||||
tr:hover td { background: #fafbfc; }
|
||||
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
|
||||
}
|
||||
.badge-pending { background: #eff6ff; color: #2563eb; }
|
||||
.badge-approved { background: #f0fdf4; color: #16a34a; }
|
||||
.badge-rejected { background: #fef2f2; color: #dc2626; }
|
||||
|
||||
/* CHART */
|
||||
.chart-area { padding: 20px; }
|
||||
.chart-bars { display: flex; align-items: flex-end; gap: 12px; height: 120px; }
|
||||
.bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||||
.bar-wrap { flex: 1; display: flex; align-items: flex-end; width: 100%; }
|
||||
.bar {
|
||||
width: 100%; border-radius: 4px 4px 0 0; background: #2563eb;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.bar:hover { opacity: 0.8; }
|
||||
.bar-label { font-size: 11px; color: #94a3b8; font-weight: 500; }
|
||||
.bar-val { font-size: 11px; color: #374151; font-weight: 600; }
|
||||
.chart-legend {
|
||||
display: flex; align-items: center; gap: 16px; margin-top: 16px;
|
||||
padding-top: 12px; border-top: 1px solid #f1f5f9;
|
||||
}
|
||||
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #64748b; }
|
||||
.legend-dot { width: 10px; height: 10px; border-radius: 3px; }
|
||||
|
||||
/* RECENT HIRES */
|
||||
.recent-hires { padding: 0; }
|
||||
.hire-item {
|
||||
display: flex; align-items: center; gap: 12px; padding: 12px 20px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
.hire-item:last-child { border-bottom: none; }
|
||||
.hire-avatar {
|
||||
width: 36px; height: 36px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
|
||||
}
|
||||
.hire-name { font-size: 13px; font-weight: 600; color: #0f172a; }
|
||||
.hire-role { font-size: 12px; color: #64748b; }
|
||||
.hire-date { margin-left: auto; font-size: 11px; color: #94a3b8; }
|
||||
.hire-new {
|
||||
background: #f0fdf4; color: #16a34a; font-size: 10px; font-weight: 700;
|
||||
padding: 2px 7px; border-radius: 20px;
|
||||
}
|
||||
|
||||
.full-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- SIDEBAR -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sidebar-logo-text">HR Portal v4</div>
|
||||
<div class="sidebar-logo-sub">Admin Console</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main</div>
|
||||
<a class="nav-item active" href="#">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
<a class="nav-item" href="03-employee-list.html">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
Employees
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
||||
Departments
|
||||
</a>
|
||||
|
||||
<div class="nav-section-label" style="margin-top:8px;">Operations</div>
|
||||
<a class="nav-item" href="04-leave-management.html">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
Leave Management
|
||||
<span class="nav-badge">5</span>
|
||||
</a>
|
||||
<a class="nav-item" href="06-attendance.html">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
Attendance
|
||||
</a>
|
||||
<a class="nav-item" href="05-payroll.html">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
Payroll
|
||||
</a>
|
||||
<a class="nav-item" href="07-recruitment.html">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
Recruitment
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||||
Performance
|
||||
</a>
|
||||
|
||||
<div class="nav-section-label" style="margin-top:8px;">Analytics</div>
|
||||
<a class="nav-item" href="#">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||||
Reports
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="avatar">AK</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Arun Kumar</div>
|
||||
<div class="sidebar-user-role">Super Admin</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- MAIN -->
|
||||
<div class="main">
|
||||
<header class="header">
|
||||
<div class="header-title">Dashboard</div>
|
||||
<div class="search-box">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
<input type="text" placeholder="Search employees, reports...">
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<div class="icon-btn">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span class="notif-badge">5</span>
|
||||
</div>
|
||||
<div class="icon-btn">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
|
||||
</div>
|
||||
<div class="header-avatar">AK</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-header">
|
||||
<h1>Good morning, Arun</h1>
|
||||
<p>Friday, 9 May 2026 • Here's what's happening today</p>
|
||||
</div>
|
||||
|
||||
<!-- KPI Cards -->
|
||||
<div class="kpi-grid">
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-header">
|
||||
<div class="kpi-icon blue">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
</div>
|
||||
<span class="kpi-trend up">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="18 15 12 9 6 15"/></svg>
|
||||
+3
|
||||
</span>
|
||||
</div>
|
||||
<div class="kpi-value">247</div>
|
||||
<div class="kpi-label">Total Employees</div>
|
||||
</div>
|
||||
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-header">
|
||||
<div class="kpi-icon green">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||||
</div>
|
||||
<span class="kpi-trend up">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="18 15 12 9 6 15"/></svg>
|
||||
96%
|
||||
</span>
|
||||
</div>
|
||||
<div class="kpi-value">198</div>
|
||||
<div class="kpi-label">Present Today</div>
|
||||
</div>
|
||||
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-header">
|
||||
<div class="kpi-icon orange">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
</div>
|
||||
<span class="kpi-trend down">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
-2
|
||||
</span>
|
||||
</div>
|
||||
<div class="kpi-value">12</div>
|
||||
<div class="kpi-label">On Leave</div>
|
||||
</div>
|
||||
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-header">
|
||||
<div class="kpi-icon purple">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
</div>
|
||||
<span class="kpi-trend up">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="18 15 12 9 6 15"/></svg>
|
||||
+2
|
||||
</span>
|
||||
</div>
|
||||
<div class="kpi-value">8</div>
|
||||
<div class="kpi-label">Open Positions</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Grid -->
|
||||
<div class="bottom-grid">
|
||||
<!-- Leave Requests Table -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Recent Leave Requests</div>
|
||||
<a href="04-leave-management.html" class="card-link">View all</a>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Type</th>
|
||||
<th>Dates</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Priya Sharma</strong></td>
|
||||
<td>Annual Leave</td>
|
||||
<td>May 12–14</td>
|
||||
<td><span class="badge badge-pending">Pending</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Rahul Verma</strong></td>
|
||||
<td>Sick Leave</td>
|
||||
<td>May 9</td>
|
||||
<td><span class="badge badge-approved">Approved</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Anjali Patel</strong></td>
|
||||
<td>Casual Leave</td>
|
||||
<td>May 15–16</td>
|
||||
<td><span class="badge badge-pending">Pending</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Vikram Singh</strong></td>
|
||||
<td>Annual Leave</td>
|
||||
<td>May 20–24</td>
|
||||
<td><span class="badge badge-approved">Approved</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Meena Iyer</strong></td>
|
||||
<td>Maternity</td>
|
||||
<td>May 1–Jun 30</td>
|
||||
<td><span class="badge badge-approved">Approved</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Deepak Nair</strong></td>
|
||||
<td>Sick Leave</td>
|
||||
<td>May 8–9</td>
|
||||
<td><span class="badge badge-rejected">Rejected</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Attendance Chart -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Attendance This Week</div>
|
||||
<a href="06-attendance.html" class="card-link">View detail</a>
|
||||
</div>
|
||||
<div class="chart-area">
|
||||
<div class="chart-bars">
|
||||
<div class="bar-group">
|
||||
<div class="bar-val">201</div>
|
||||
<div class="bar-wrap"><div class="bar" style="height:82%"></div></div>
|
||||
<div class="bar-label">Mon</div>
|
||||
</div>
|
||||
<div class="bar-group">
|
||||
<div class="bar-val">215</div>
|
||||
<div class="bar-wrap"><div class="bar" style="height:90%"></div></div>
|
||||
<div class="bar-label">Tue</div>
|
||||
</div>
|
||||
<div class="bar-group">
|
||||
<div class="bar-val">207</div>
|
||||
<div class="bar-wrap"><div class="bar" style="height:85%"></div></div>
|
||||
<div class="bar-label">Wed</div>
|
||||
</div>
|
||||
<div class="bar-group">
|
||||
<div class="bar-val">219</div>
|
||||
<div class="bar-wrap"><div class="bar" style="height:92%"></div></div>
|
||||
<div class="bar-label">Thu</div>
|
||||
</div>
|
||||
<div class="bar-group">
|
||||
<div class="bar-val">198</div>
|
||||
<div class="bar-wrap"><div class="bar" style="height:80%; background:#93c5fd"></div></div>
|
||||
<div class="bar-label">Today</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-legend">
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#2563eb"></div>Present</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#93c5fd"></div>Today (live)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Hires -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Recent Hires</div>
|
||||
<a href="03-employee-list.html" class="card-link">View all employees</a>
|
||||
</div>
|
||||
<div class="recent-hires">
|
||||
<div class="hire-item">
|
||||
<div class="hire-avatar" style="background:#7c3aed">PS</div>
|
||||
<div>
|
||||
<div class="hire-name">Pooja Subramaniam</div>
|
||||
<div class="hire-role">Software Engineer • Engineering</div>
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<div class="hire-date">May 6, 2026</div>
|
||||
<span class="hire-new">NEW</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hire-item">
|
||||
<div class="hire-avatar" style="background:#0891b2">RB</div>
|
||||
<div>
|
||||
<div class="hire-name">Rohan Bhatia</div>
|
||||
<div class="hire-role">Product Manager • Product</div>
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<div class="hire-date">May 2, 2026</div>
|
||||
<span class="hire-new">NEW</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hire-item">
|
||||
<div class="hire-avatar" style="background:#16a34a">NK</div>
|
||||
<div>
|
||||
<div class="hire-name">Nisha Kulkarni</div>
|
||||
<div class="hire-role">HR Executive • Human Resources</div>
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<div class="hire-date">Apr 28, 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hire-item">
|
||||
<div class="hire-avatar" style="background:#d97706">AM</div>
|
||||
<div>
|
||||
<div class="hire-name">Arjun Mehta</div>
|
||||
<div class="hire-role">Sales Executive • Sales</div>
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<div class="hire-date">Apr 22, 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hire-item">
|
||||
<div class="hire-avatar" style="background:#dc2626">SK</div>
|
||||
<div>
|
||||
<div class="hire-name">Shalini Krishnamurthy</div>
|
||||
<div class="hire-role">Data Analyst • Analytics</div>
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<div class="hire-date">Apr 18, 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,348 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HR Portal v4 — Employee Directory</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #0f172a; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1e3a5f; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #2563eb; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #ffffff; }
|
||||
.sidebar-logo-sub { font-size: 10px; color: #94a3b8; margin-top: 1px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #64748b; letter-spacing: 0.8px; text-transform: uppercase; padding: 8px 20px 4px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: #cbd5e1; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background 0.15s; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { background: rgba(255,255,255,0.07); color: #ffffff; }
|
||||
.nav-item.active { background: rgba(37,99,235,0.25); color: #ffffff; border-left-color: #2563eb; }
|
||||
.nav-badge { margin-left: auto; background: #2563eb; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px; }
|
||||
.sidebar-footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #2563eb; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #ffffff; }
|
||||
.sidebar-user-role { font-size: 11px; color: #94a3b8; }
|
||||
|
||||
.main { margin-left: 240px; display: flex; flex-direction: column; flex: 1; }
|
||||
.header { position: sticky; top: 0; z-index: 50; background: #ffffff; border-bottom: 1px solid #e2e8f0; padding: 0 28px; height: 60px; display: flex; align-items: center; gap: 16px; }
|
||||
.header-title { font-size: 16px; font-weight: 700; color: #0f172a; flex: 1; }
|
||||
.search-box { display: flex; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 14px; width: 260px; }
|
||||
.search-box input { border: none; background: transparent; font-size: 13px; color: #374151; outline: none; width: 100%; font-family: inherit; }
|
||||
.header-actions { display: flex; align-items: center; gap: 8px; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e2e8f0; background: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; color: #64748b; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; background: #dc2626; border-radius: 50%; font-size: 9px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
|
||||
.header-avatar { width: 34px; height: 34px; border-radius: 50%; background: #1e3a5f; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0f172a; }
|
||||
.page-sub { font-size: 13px; color: #64748b; margin-top: 2px; }
|
||||
.btn-primary { display: flex; align-items: center; gap: 6px; background: #2563eb; color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; }
|
||||
.btn-primary:hover { background: #1d4ed8; }
|
||||
|
||||
.filter-bar { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
|
||||
.filter-search { display: flex; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px; flex: 1; }
|
||||
.filter-search input { border: none; background: transparent; font-size: 13px; color: #374151; outline: none; width: 100%; font-family: inherit; }
|
||||
.filter-select { appearance: none; background: #f8fafc url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 32px 8px 12px; font-size: 13px; color: #374151; font-family: inherit; cursor: pointer; outline: none; min-width: 140px; }
|
||||
.filter-select:focus { border-color: #2563eb; }
|
||||
|
||||
.table-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; padding: 11px 16px; text-align: left; background: #f8fafc; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
|
||||
td { padding: 13px 16px; font-size: 13px; color: #374151; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
|
||||
tr:last-child td { border-bottom: none; }
|
||||
tr:hover td { background: #fafbfd; }
|
||||
.emp-cell { display: flex; align-items: center; gap: 10px; }
|
||||
.emp-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.emp-name { font-size: 13px; font-weight: 600; color: #0f172a; }
|
||||
.emp-code { font-size: 11px; color: #94a3b8; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
|
||||
.badge-active { background: #f0fdf4; color: #16a34a; }
|
||||
.badge-inactive { background: #f1f5f9; color: #64748b; }
|
||||
.badge-probation { background: #fff7ed; color: #d97706; }
|
||||
.action-btns { display: flex; align-items: center; gap: 6px; }
|
||||
.btn-action { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid; font-family: inherit; transition: background 0.15s; text-decoration: none; }
|
||||
.btn-view { border-color: #e2e8f0; background: #f8fafc; color: #374151; }
|
||||
.btn-view:hover { background: #f1f5f9; }
|
||||
.btn-edit { border-color: #dbeafe; background: #eff6ff; color: #2563eb; }
|
||||
.btn-edit:hover { background: #dbeafe; }
|
||||
|
||||
.pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid #f1f5f9; }
|
||||
.page-info { font-size: 13px; color: #64748b; }
|
||||
.page-btns { display: flex; align-items: center; gap: 4px; }
|
||||
.page-btn { width: 32px; height: 32px; border-radius: 6px; border: 1px solid #e2e8f0; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; cursor: pointer; color: #374151; transition: all 0.15s; }
|
||||
.page-btn:hover { border-color: #2563eb; color: #2563eb; }
|
||||
.page-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }
|
||||
.page-btn.disabled { opacity: 0.4; cursor: default; }
|
||||
|
||||
.dept-tag { font-size: 12px; color: #475569; }
|
||||
.desig-text { font-size: 12px; color: #64748b; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sidebar-logo-text">HR Portal v4</div>
|
||||
<div class="sidebar-logo-sub">Admin Console</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main</div>
|
||||
<a class="nav-item" href="02-admin-dashboard.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
|
||||
<a class="nav-item active" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
|
||||
<div class="nav-section-label" style="margin-top:8px;">Operations</div>
|
||||
<a class="nav-item" href="04-leave-management.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">5</span></a>
|
||||
<a class="nav-item" href="06-attendance.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="05-payroll.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Payroll</a>
|
||||
<a class="nav-item" href="07-recruitment.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>Recruitment</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>Performance</a>
|
||||
<div class="nav-section-label" style="margin-top:8px;">Analytics</div>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Reports</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="avatar">AK</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Arun Kumar</div>
|
||||
<div class="sidebar-user-role">Super Admin</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="header">
|
||||
<div class="header-title">Employee Directory</div>
|
||||
<div class="search-box">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
<input type="text" placeholder="Search employees...">
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<div class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">5</span></div>
|
||||
<div class="header-avatar">AK</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-top">
|
||||
<div>
|
||||
<div class="page-title">Employees</div>
|
||||
<div class="page-sub">247 total employees • 8 departments</div>
|
||||
</div>
|
||||
<button class="btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Add Employee
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<div class="filter-search">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
<input type="text" placeholder="Search by name, code, email...">
|
||||
</div>
|
||||
<select class="filter-select">
|
||||
<option>All Departments</option>
|
||||
<option>Engineering</option>
|
||||
<option>Product</option>
|
||||
<option>Sales</option>
|
||||
<option>Human Resources</option>
|
||||
<option>Finance</option>
|
||||
<option>Marketing</option>
|
||||
</select>
|
||||
<select class="filter-select">
|
||||
<option>All Status</option>
|
||||
<option>Active</option>
|
||||
<option>Inactive</option>
|
||||
<option>On Probation</option>
|
||||
</select>
|
||||
<select class="filter-select">
|
||||
<option>All Types</option>
|
||||
<option>Full-Time</option>
|
||||
<option>Part-Time</option>
|
||||
<option>Contract</option>
|
||||
<option>Intern</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Department</th>
|
||||
<th>Designation</th>
|
||||
<th>Joining Date</th>
|
||||
<th>Type</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#7c3aed">PS</div>
|
||||
<div><div class="emp-name">Priya Sharma</div><div class="emp-code">EMP-0041</div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><div class="dept-tag">Engineering</div></td>
|
||||
<td><div class="desig-text">Senior Software Engineer</div></td>
|
||||
<td style="color:#64748b;font-size:13px">Mar 12, 2023</td>
|
||||
<td><span style="font-size:12px;color:#475569">Full-Time</span></td>
|
||||
<td><span class="badge badge-active">Active</span></td>
|
||||
<td><div class="action-btns"><a class="btn-action btn-view" href="#">View</a><a class="btn-action btn-edit" href="#">Edit</a></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#0891b2">RV</div>
|
||||
<div><div class="emp-name">Rahul Verma</div><div class="emp-code">EMP-0028</div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><div class="dept-tag">Product</div></td>
|
||||
<td><div class="desig-text">Product Manager</div></td>
|
||||
<td style="color:#64748b;font-size:13px">Jan 5, 2022</td>
|
||||
<td><span style="font-size:12px;color:#475569">Full-Time</span></td>
|
||||
<td><span class="badge badge-active">Active</span></td>
|
||||
<td><div class="action-btns"><a class="btn-action btn-view" href="#">View</a><a class="btn-action btn-edit" href="#">Edit</a></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#16a34a">AP</div>
|
||||
<div><div class="emp-name">Anjali Patel</div><div class="emp-code">EMP-0055</div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><div class="dept-tag">Human Resources</div></td>
|
||||
<td><div class="desig-text">HR Executive</div></td>
|
||||
<td style="color:#64748b;font-size:13px">Jun 1, 2024</td>
|
||||
<td><span style="font-size:12px;color:#475569">Full-Time</span></td>
|
||||
<td><span class="badge badge-probation">Probation</span></td>
|
||||
<td><div class="action-btns"><a class="btn-action btn-view" href="#">View</a><a class="btn-action btn-edit" href="#">Edit</a></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#d97706">VS</div>
|
||||
<div><div class="emp-name">Vikram Singh</div><div class="emp-code">EMP-0012</div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><div class="dept-tag">Sales</div></td>
|
||||
<td><div class="desig-text">Regional Sales Head</div></td>
|
||||
<td style="color:#64748b;font-size:13px">Aug 14, 2020</td>
|
||||
<td><span style="font-size:12px;color:#475569">Full-Time</span></td>
|
||||
<td><span class="badge badge-active">Active</span></td>
|
||||
<td><div class="action-btns"><a class="btn-action btn-view" href="#">View</a><a class="btn-action btn-edit" href="#">Edit</a></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#dc2626">MI</div>
|
||||
<div><div class="emp-name">Meena Iyer</div><div class="emp-code">EMP-0033</div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><div class="dept-tag">Finance</div></td>
|
||||
<td><div class="desig-text">Finance Analyst</div></td>
|
||||
<td style="color:#64748b;font-size:13px">Sep 20, 2022</td>
|
||||
<td><span style="font-size:12px;color:#475569">Full-Time</span></td>
|
||||
<td><span class="badge badge-active">Active</span></td>
|
||||
<td><div class="action-btns"><a class="btn-action btn-view" href="#">View</a><a class="btn-action btn-edit" href="#">Edit</a></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#475569">DN</div>
|
||||
<div><div class="emp-name">Deepak Nair</div><div class="emp-code">EMP-0019</div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><div class="dept-tag">Engineering</div></td>
|
||||
<td><div class="desig-text">DevOps Engineer</div></td>
|
||||
<td style="color:#64748b;font-size:13px">Nov 3, 2021</td>
|
||||
<td><span style="font-size:12px;color:#475569">Full-Time</span></td>
|
||||
<td><span class="badge badge-inactive">Inactive</span></td>
|
||||
<td><div class="action-btns"><a class="btn-action btn-view" href="#">View</a><a class="btn-action btn-edit" href="#">Edit</a></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#0e7490">NK</div>
|
||||
<div><div class="emp-name">Neha Kapoor</div><div class="emp-code">EMP-0067</div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><div class="dept-tag">Marketing</div></td>
|
||||
<td><div class="desig-text">Marketing Manager</div></td>
|
||||
<td style="color:#64748b;font-size:13px">Feb 14, 2023</td>
|
||||
<td><span style="font-size:12px;color:#475569">Full-Time</span></td>
|
||||
<td><span class="badge badge-active">Active</span></td>
|
||||
<td><div class="action-btns"><a class="btn-action btn-view" href="#">View</a><a class="btn-action btn-edit" href="#">Edit</a></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#7c3aed">SG</div>
|
||||
<div><div class="emp-name">Suresh Gupta</div><div class="emp-code">EMP-0008</div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><div class="dept-tag">Engineering</div></td>
|
||||
<td><div class="desig-text">Engineering Manager</div></td>
|
||||
<td style="color:#64748b;font-size:13px">Apr 10, 2019</td>
|
||||
<td><span style="font-size:12px;color:#475569">Full-Time</span></td>
|
||||
<td><span class="badge badge-active">Active</span></td>
|
||||
<td><div class="action-btns"><a class="btn-action btn-view" href="#">View</a><a class="btn-action btn-edit" href="#">Edit</a></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#b45309">TR</div>
|
||||
<div><div class="emp-name">Tanvi Rao</div><div class="emp-code">EMP-0081</div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><div class="dept-tag">Design</div></td>
|
||||
<td><div class="desig-text">UI/UX Designer</div></td>
|
||||
<td style="color:#64748b;font-size:13px">Jan 17, 2025</td>
|
||||
<td><span style="font-size:12px;color:#475569">Contract</span></td>
|
||||
<td><span class="badge badge-probation">Probation</span></td>
|
||||
<td><div class="action-btns"><a class="btn-action btn-view" href="#">View</a><a class="btn-action btn-edit" href="#">Edit</a></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#166534">AM</div>
|
||||
<div><div class="emp-name">Arjun Mehta</div><div class="emp-code">EMP-0092</div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><div class="dept-tag">Sales</div></td>
|
||||
<td><div class="desig-text">Sales Executive</div></td>
|
||||
<td style="color:#64748b;font-size:13px">Apr 22, 2026</td>
|
||||
<td><span style="font-size:12px;color:#475569">Full-Time</span></td>
|
||||
<td><span class="badge badge-probation">Probation</span></td>
|
||||
<td><div class="action-btns"><a class="btn-action btn-view" href="#">View</a><a class="btn-action btn-edit" href="#">Edit</a></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<div class="page-info">Showing 1–10 of 247 employees</div>
|
||||
<div class="page-btns">
|
||||
<div class="page-btn disabled">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</div>
|
||||
<div class="page-btn active">1</div>
|
||||
<div class="page-btn">2</div>
|
||||
<div class="page-btn">3</div>
|
||||
<div style="padding:0 4px;color:#94a3b8;font-size:13px">...</div>
|
||||
<div class="page-btn">25</div>
|
||||
<div class="page-btn">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,278 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HR Portal v4 — Leave Management</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #0f172a; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1e3a5f; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #2563eb; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #ffffff; }
|
||||
.sidebar-logo-sub { font-size: 10px; color: #94a3b8; margin-top: 1px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #64748b; letter-spacing: 0.8px; text-transform: uppercase; padding: 8px 20px 4px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: #cbd5e1; font-size: 13.5px; font-weight: 500; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
|
||||
.nav-item.active { background: rgba(37,99,235,0.25); color: #fff; border-left-color: #2563eb; }
|
||||
.nav-badge { margin-left: auto; background: #2563eb; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px; }
|
||||
.sidebar-footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-avatar { width: 34px; height: 34px; border-radius: 50%; background: #2563eb; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #ffffff; }
|
||||
.sidebar-user-role { font-size: 11px; color: #94a3b8; }
|
||||
.main { margin-left: 240px; display: flex; flex-direction: column; flex: 1; }
|
||||
.header { position: sticky; top: 0; z-index: 50; background: #ffffff; border-bottom: 1px solid #e2e8f0; padding: 0 28px; height: 60px; display: flex; align-items: center; gap: 16px; }
|
||||
.header-title { font-size: 16px; font-weight: 700; color: #0f172a; flex: 1; }
|
||||
.search-box { display: flex; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 14px; width: 260px; }
|
||||
.search-box input { border: none; background: transparent; font-size: 13px; color: #374151; outline: none; width: 100%; font-family: inherit; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; color: #64748b; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; background: #dc2626; border-radius: 50%; font-size: 9px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
|
||||
.header-avatar { width: 34px; height: 34px; border-radius: 50%; background: #1e3a5f; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; }
|
||||
.page-sub { font-size: 13px; color: #64748b; margin-top: 2px; }
|
||||
.btn-primary { display: flex; align-items: center; gap: 6px; background: #2563eb; color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
|
||||
.btn-primary:hover { background: #1d4ed8; }
|
||||
|
||||
/* TABS */
|
||||
.tabs { display: flex; align-items: center; gap: 4px; border-bottom: 2px solid #e2e8f0; margin-bottom: 20px; }
|
||||
.tab { padding: 10px 18px; font-size: 13.5px; font-weight: 500; color: #64748b; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; text-decoration: none; }
|
||||
.tab:hover { color: #0f172a; }
|
||||
.tab.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
|
||||
.tab-count { display: inline-block; background: #eff6ff; color: #2563eb; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px; margin-left: 6px; }
|
||||
.tab.active .tab-count { background: #2563eb; color: #fff; }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; padding: 11px 18px; text-align: left; background: #f8fafc; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
|
||||
td { padding: 13px 18px; font-size: 13px; color: #374151; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
|
||||
tr:last-child td { border-bottom: none; }
|
||||
tr:hover td { background: #fafbfd; }
|
||||
.emp-cell { display: flex; align-items: center; gap: 10px; }
|
||||
.emp-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.emp-name { font-size: 13px; font-weight: 600; color: #0f172a; }
|
||||
.emp-dept { font-size: 11px; color: #94a3b8; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
|
||||
.badge-pending { background: #eff6ff; color: #2563eb; }
|
||||
.badge-approved { background: #f0fdf4; color: #16a34a; }
|
||||
.badge-rejected { background: #fef2f2; color: #dc2626; }
|
||||
.leave-type { display: inline-block; background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; }
|
||||
.reason-text { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64748b; font-size: 12px; }
|
||||
.action-btns { display: flex; align-items: center; gap: 6px; }
|
||||
.btn-approve { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; background: #f0fdf4; color: #16a34a; font-family: inherit; transition: background 0.15s; }
|
||||
.btn-approve:hover { background: #dcfce7; }
|
||||
.btn-reject { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; background: #fef2f2; color: #dc2626; font-family: inherit; transition: background 0.15s; }
|
||||
.btn-reject:hover { background: #fee2e2; }
|
||||
.btn-view { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid #e2e8f0; background: #f8fafc; color: #374151; font-family: inherit; }
|
||||
|
||||
/* DETAIL PANEL */
|
||||
.split-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
|
||||
.detail-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); position: sticky; top: 80px; }
|
||||
.panel-header { padding: 16px 20px; border-bottom: 1px solid #f1f5f9; }
|
||||
.panel-title { font-size: 14px; font-weight: 700; color: #0f172a; }
|
||||
.panel-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
|
||||
.panel-body { padding: 20px; }
|
||||
.panel-emp { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #f1f5f9; margin-bottom: 16px; }
|
||||
.panel-emp-avatar { width: 44px; height: 44px; border-radius: 50%; background: #7c3aed; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.panel-emp-name { font-size: 14px; font-weight: 700; color: #0f172a; }
|
||||
.panel-emp-role { font-size: 12px; color: #64748b; margin-top: 2px; }
|
||||
.detail-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
||||
.detail-label { font-size: 12px; color: #64748b; font-weight: 500; }
|
||||
.detail-value { font-size: 13px; color: #0f172a; font-weight: 600; }
|
||||
.panel-reason { background: #f8fafc; border-radius: 8px; padding: 12px; font-size: 13px; color: #374151; line-height: 1.5; margin: 16px 0; border: 1px solid #f1f5f9; }
|
||||
.panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
|
||||
.panel-btn { padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.15s; }
|
||||
.panel-btn-approve { background: #16a34a; color: #fff; }
|
||||
.panel-btn-approve:hover { background: #15803d; }
|
||||
.panel-btn-reject { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
|
||||
.panel-btn-reject:hover { background: #fee2e2; }
|
||||
.days-badge { display: inline-block; background: #eff6ff; color: #2563eb; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
|
||||
<div><div class="sidebar-logo-text">HR Portal v4</div><div class="sidebar-logo-sub">Admin Console</div></div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main</div>
|
||||
<a class="nav-item" href="02-admin-dashboard.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
|
||||
<a class="nav-item" href="03-employee-list.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
|
||||
<div class="nav-section-label" style="margin-top:8px;">Operations</div>
|
||||
<a class="nav-item active" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">5</span></a>
|
||||
<a class="nav-item" href="06-attendance.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="05-payroll.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Payroll</a>
|
||||
<a class="nav-item" href="07-recruitment.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>Recruitment</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>Performance</a>
|
||||
<div class="nav-section-label" style="margin-top:8px;">Analytics</div>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Reports</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-avatar">AK</div>
|
||||
<div><div class="sidebar-user-name">Arun Kumar</div><div class="sidebar-user-role">Super Admin</div></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="header">
|
||||
<div class="header-title">Leave Management</div>
|
||||
<div class="search-box"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input type="text" placeholder="Search leaves..."></div>
|
||||
<div style="display:flex;align-items:center;gap:8px">
|
||||
<div class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">5</span></div>
|
||||
<div class="header-avatar">AK</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-top">
|
||||
<div>
|
||||
<div class="page-title">Leave Requests</div>
|
||||
<div class="page-sub">Manage and review employee leave applications</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px">
|
||||
<button style="display:flex;align-items:center;gap:6px;background:#fff;color:#374151;border:1px solid #e2e8f0;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="21 15 15 15 15 21"/><path d="M18 15V9a6 6 0 0 0-6-6H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6"/></svg>
|
||||
Export CSV
|
||||
</button>
|
||||
<button class="btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Leave Policy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<a class="tab active" href="#">Pending <span class="tab-count">5</span></a>
|
||||
<a class="tab" href="#">Approved <span class="tab-count" style="background:#f0fdf4;color:#16a34a">18</span></a>
|
||||
<a class="tab" href="#">Rejected <span class="tab-count" style="background:#fef2f2;color:#dc2626">3</span></a>
|
||||
<a class="tab" href="#">All Requests <span class="tab-count" style="background:#f1f5f9;color:#64748b">26</span></a>
|
||||
</div>
|
||||
|
||||
<div class="split-layout">
|
||||
<div class="table-card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Leave Type</th>
|
||||
<th>From</th>
|
||||
<th>To</th>
|
||||
<th>Days</th>
|
||||
<th>Reason</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr style="background:#fffbeb">
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#7c3aed">PS</div><div><div class="emp-name">Priya Sharma</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><span class="leave-type">Annual</span></td>
|
||||
<td>May 12, 2026</td>
|
||||
<td>May 14, 2026</td>
|
||||
<td><span class="days-badge">3</span></td>
|
||||
<td><div class="reason-text">Family function in Jaipur, need to travel</div></td>
|
||||
<td><span class="badge badge-pending">Pending</span></td>
|
||||
<td><div class="action-btns"><button class="btn-approve"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Approve</button><button class="btn-reject">Reject</button></div></td>
|
||||
</tr>
|
||||
<tr style="background:#fffbeb">
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#16a34a">AP</div><div><div class="emp-name">Anjali Patel</div><div class="emp-dept">HR</div></div></div></td>
|
||||
<td><span class="leave-type">Casual</span></td>
|
||||
<td>May 15, 2026</td>
|
||||
<td>May 16, 2026</td>
|
||||
<td><span class="days-badge">2</span></td>
|
||||
<td><div class="reason-text">Personal medical appointment scheduled</div></td>
|
||||
<td><span class="badge badge-pending">Pending</span></td>
|
||||
<td><div class="action-btns"><button class="btn-approve"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Approve</button><button class="btn-reject">Reject</button></div></td>
|
||||
</tr>
|
||||
<tr style="background:#fffbeb">
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#0891b2">NK</div><div><div class="emp-name">Neha Kapoor</div><div class="emp-dept">Marketing</div></div></div></td>
|
||||
<td><span class="leave-type">Sick</span></td>
|
||||
<td>May 9, 2026</td>
|
||||
<td>May 10, 2026</td>
|
||||
<td><span class="days-badge">2</span></td>
|
||||
<td><div class="reason-text">Fever and flu, doctor advised rest</div></td>
|
||||
<td><span class="badge badge-pending">Pending</span></td>
|
||||
<td><div class="action-btns"><button class="btn-approve"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>Approve</button><button class="btn-reject">Reject</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#d97706">VS</div><div><div class="emp-name">Vikram Singh</div><div class="emp-dept">Sales</div></div></div></td>
|
||||
<td><span class="leave-type">Annual</span></td>
|
||||
<td>May 20, 2026</td>
|
||||
<td>May 24, 2026</td>
|
||||
<td><span class="days-badge">5</span></td>
|
||||
<td><div class="reason-text">Family vacation planned to Goa</div></td>
|
||||
<td><span class="badge badge-approved">Approved</span></td>
|
||||
<td><div class="action-btns"><button class="btn-view">View</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#dc2626">MI</div><div><div class="emp-name">Meena Iyer</div><div class="emp-dept">Finance</div></div></div></td>
|
||||
<td><span class="leave-type" style="background:#fdf4ff;color:#7c3aed">Maternity</span></td>
|
||||
<td>May 1, 2026</td>
|
||||
<td>Jun 30, 2026</td>
|
||||
<td><span class="days-badge">60</span></td>
|
||||
<td><div class="reason-text">Maternity leave as per company policy</div></td>
|
||||
<td><span class="badge badge-approved">Approved</span></td>
|
||||
<td><div class="action-btns"><button class="btn-view">View</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#475569">DN</div><div><div class="emp-name">Deepak Nair</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><span class="leave-type">Sick</span></td>
|
||||
<td>May 8, 2026</td>
|
||||
<td>May 9, 2026</td>
|
||||
<td><span class="days-badge">2</span></td>
|
||||
<td><div class="reason-text">No medical certificate provided as required</div></td>
|
||||
<td><span class="badge badge-rejected">Rejected</span></td>
|
||||
<td><div class="action-btns"><button class="btn-view">View</button></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Detail Panel -->
|
||||
<div class="detail-panel">
|
||||
<div class="panel-header">
|
||||
<div class="panel-title">Request Details</div>
|
||||
<div class="panel-sub">Leave Application #LV-2026-041</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="panel-emp">
|
||||
<div class="panel-emp-avatar">PS</div>
|
||||
<div>
|
||||
<div class="panel-emp-name">Priya Sharma</div>
|
||||
<div class="panel-emp-role">Senior Software Engineer • Engineering</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-row"><span class="detail-label">Leave Type</span><span class="detail-value">Annual Leave</span></div>
|
||||
<div class="detail-row"><span class="detail-label">From Date</span><span class="detail-value">May 12, 2026</span></div>
|
||||
<div class="detail-row"><span class="detail-label">To Date</span><span class="detail-value">May 14, 2026</span></div>
|
||||
<div class="detail-row"><span class="detail-label">Duration</span><span class="detail-value" style="color:#2563eb">3 Working Days</span></div>
|
||||
<div class="detail-row"><span class="detail-label">Balance Left</span><span class="detail-value">9 days remaining</span></div>
|
||||
<div class="detail-row"><span class="detail-label">Applied On</span><span class="detail-value">May 7, 2026</span></div>
|
||||
<div class="detail-row"><span class="detail-label">Status</span><span class="badge badge-pending">Pending Review</span></div>
|
||||
<div style="font-size:12px;color:#64748b;font-weight:500;margin:14px 0 6px">Reason</div>
|
||||
<div class="panel-reason">Family function in Jaipur — need to travel for a relative's wedding. Will ensure all deliverables are completed before leaving.</div>
|
||||
<div class="panel-actions">
|
||||
<button class="panel-btn panel-btn-approve">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
Approve
|
||||
</button>
|
||||
<button class="panel-btn panel-btn-reject">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+327
@@ -0,0 +1,327 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HR Portal v4 — Payroll Processing</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #0f172a; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1e3a5f; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #2563eb; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 10px; color: #94a3b8; margin-top: 1px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #64748b; letter-spacing: 0.8px; text-transform: uppercase; padding: 8px 20px 4px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: #cbd5e1; font-size: 13.5px; font-weight: 500; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
|
||||
.nav-item.active { background: rgba(37,99,235,0.25); color: #fff; border-left-color: #2563eb; }
|
||||
.nav-badge { margin-left: auto; background: #2563eb; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px; }
|
||||
.sidebar-footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-avatar { width: 34px; height: 34px; border-radius: 50%; background: #2563eb; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #fff; }
|
||||
.sidebar-user-role { font-size: 11px; color: #94a3b8; }
|
||||
.main { margin-left: 240px; display: flex; flex-direction: column; flex: 1; }
|
||||
.header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #e2e8f0; padding: 0 28px; height: 60px; display: flex; align-items: center; gap: 16px; }
|
||||
.header-title { font-size: 16px; font-weight: 700; color: #0f172a; flex: 1; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; color: #64748b; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; background: #dc2626; border-radius: 50%; font-size: 9px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
|
||||
.header-avatar { width: 34px; height: 34px; border-radius: 50%; background: #1e3a5f; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; }
|
||||
.content { padding: 28px; flex: 1; }
|
||||
|
||||
.page-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; }
|
||||
.page-sub { font-size: 13px; color: #64748b; margin-top: 2px; }
|
||||
|
||||
/* CONTROLS */
|
||||
.controls-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
|
||||
.month-selector { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 16px; }
|
||||
.month-nav { width: 28px; height: 28px; border-radius: 6px; border: 1px solid #e2e8f0; background: #f8fafc; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #64748b; }
|
||||
.month-label { font-size: 15px; font-weight: 700; color: #0f172a; padding: 0 8px; }
|
||||
.compliance-badge { display: inline-flex; align-items: center; gap: 6px; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 600; }
|
||||
|
||||
/* STATUS BANNER */
|
||||
.status-banner { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 14px 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
|
||||
.banner-icon { width: 36px; height: 36px; background: #fef3c7; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.banner-text strong { font-size: 14px; color: #92400e; }
|
||||
.banner-text p { font-size: 12px; color: #b45309; margin-top: 2px; }
|
||||
.btn-process-all { margin-left: auto; background: #2563eb; color: #fff; border: none; border-radius: 8px; padding: 10px 20px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 8px; transition: background 0.15s; }
|
||||
.btn-process-all:hover { background: #1d4ed8; }
|
||||
|
||||
/* SUMMARY CARDS */
|
||||
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.summary-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
|
||||
.summary-label { font-size: 12px; color: #64748b; font-weight: 500; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
|
||||
.summary-value { font-size: 26px; font-weight: 800; color: #0f172a; letter-spacing: -0.5px; }
|
||||
.summary-sub { font-size: 11px; color: #94a3b8; margin-top: 4px; }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.table-header { padding: 16px 20px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; }
|
||||
.table-title { font-size: 14px; font-weight: 700; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 14px; text-align: right; background: #f8fafc; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
|
||||
th:first-child, th:nth-child(2) { text-align: left; }
|
||||
td { padding: 13px 14px; font-size: 13px; color: #374151; border-bottom: 1px solid #f1f5f9; vertical-align: middle; text-align: right; }
|
||||
td:first-child, td:nth-child(2) { text-align: left; }
|
||||
tr:last-child td { border-bottom: none; }
|
||||
tr:hover td { background: #fafbfd; }
|
||||
.emp-cell { display: flex; align-items: center; gap: 10px; }
|
||||
.emp-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.emp-name { font-size: 13px; font-weight: 600; color: #0f172a; }
|
||||
.emp-code { font-size: 11px; color: #94a3b8; }
|
||||
.amount { font-size: 13px; font-weight: 600; color: #0f172a; font-variant-numeric: tabular-nums; }
|
||||
.deduction { color: #dc2626; }
|
||||
.net-pay { color: #16a34a; font-weight: 700; }
|
||||
.btn-payslip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid #bfdbfe; background: #eff6ff; color: #2563eb; font-family: inherit; white-space: nowrap; }
|
||||
.btn-payslip:hover { background: #dbeafe; }
|
||||
.total-row td { background: #f8fafc !important; font-weight: 700; border-top: 2px solid #e2e8f0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
|
||||
<div><div class="sidebar-logo-text">HR Portal v4</div><div class="sidebar-logo-sub">Admin Console</div></div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main</div>
|
||||
<a class="nav-item" href="02-admin-dashboard.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
|
||||
<a class="nav-item" href="03-employee-list.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
|
||||
<div class="nav-section-label" style="margin-top:8px;">Operations</div>
|
||||
<a class="nav-item" href="04-leave-management.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">5</span></a>
|
||||
<a class="nav-item" href="06-attendance.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
|
||||
<a class="nav-item active" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Payroll</a>
|
||||
<a class="nav-item" href="07-recruitment.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>Recruitment</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>Performance</a>
|
||||
<div class="nav-section-label" style="margin-top:8px;">Analytics</div>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Reports</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-avatar">AK</div>
|
||||
<div><div class="sidebar-user-name">Arun Kumar</div><div class="sidebar-user-role">Super Admin</div></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="header">
|
||||
<div class="header-title">Payroll Processing</div>
|
||||
<div style="display:flex;align-items:center;gap:8px">
|
||||
<div class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">5</span></div>
|
||||
<div class="header-avatar">AK</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-top">
|
||||
<div>
|
||||
<div class="page-title">Payroll Processing</div>
|
||||
<div class="page-sub">Manage monthly salaries, deductions, and payslips</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px">
|
||||
<button style="display:flex;align-items:center;gap:6px;background:#fff;color:#374151;border:1px solid #e2e8f0;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="21 15 15 15 15 21"/><path d="M18 15V9a6 6 0 0 0-6-6H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6"/></svg>
|
||||
Export Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls-row">
|
||||
<div class="month-selector">
|
||||
<div class="month-nav"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></div>
|
||||
<div class="month-label">May 2026</div>
|
||||
<div class="month-nav"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</div>
|
||||
<div class="compliance-badge">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||
Indian Compliance Mode: PF + ESI + TDS Active
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Banner -->
|
||||
<div class="status-banner">
|
||||
<div class="banner-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
</div>
|
||||
<div class="banner-text">
|
||||
<strong>Payroll Status: Draft — Not Yet Processed</strong>
|
||||
<p>Review employee data, verify attendance, and click "Process All Payroll" to generate payslips for May 2026.</p>
|
||||
</div>
|
||||
<button class="btn-process-all">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
Process All Payroll
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<div class="summary-grid">
|
||||
<div class="summary-card">
|
||||
<div class="summary-label">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
|
||||
Total Employees
|
||||
</div>
|
||||
<div class="summary-value">247</div>
|
||||
<div class="summary-sub">Eligible for May payroll</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="summary-label">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||||
Processed
|
||||
</div>
|
||||
<div class="summary-value" style="color:#64748b">0</div>
|
||||
<div class="summary-sub">Pending processing</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="summary-label">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
Total Gross
|
||||
</div>
|
||||
<div class="summary-value">₹18.4L</div>
|
||||
<div class="summary-sub">Before deductions</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="summary-label">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
Total Net Pay
|
||||
</div>
|
||||
<div class="summary-value" style="color:#16a34a">₹15.6L</div>
|
||||
<div class="summary-sub">After all deductions</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payroll Table -->
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<div class="table-title">Employee Payroll — May 2026</div>
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<select style="appearance:none;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:7px 32px 7px 12px;font-size:13px;color:#374151;font-family:inherit;cursor:pointer;background-image:url('data:image/svg+xml,%3Csvg width=\'10\' height=\'6\' viewBox=\'0 0 10 6\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M1 1l4 4 4-4\' stroke=\'%2364748b\' stroke-width=\'1.5\'/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:right 10px center;outline:none;">
|
||||
<option>All Departments</option>
|
||||
<option>Engineering</option>
|
||||
<option>Sales</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div style="overflow-x:auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Designation</th>
|
||||
<th>Days Worked</th>
|
||||
<th>Gross Pay</th>
|
||||
<th>PF (12%)</th>
|
||||
<th>ESI (0.75%)</th>
|
||||
<th>TDS</th>
|
||||
<th>Net Pay</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#7c3aed">PS</div><div><div class="emp-name">Priya Sharma</div><div class="emp-code">EMP-0041</div></div></div></td>
|
||||
<td><span style="font-size:12px;color:#64748b">Sr. Software Engineer</span></td>
|
||||
<td style="text-align:right">25</td>
|
||||
<td class="amount">₹1,20,000</td>
|
||||
<td class="amount deduction">₹14,400</td>
|
||||
<td class="amount deduction">₹900</td>
|
||||
<td class="amount deduction">₹8,500</td>
|
||||
<td class="amount net-pay">₹96,200</td>
|
||||
<td><button class="btn-payslip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Generate</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#0891b2">RV</div><div><div class="emp-name">Rahul Verma</div><div class="emp-code">EMP-0028</div></div></div></td>
|
||||
<td><span style="font-size:12px;color:#64748b">Product Manager</span></td>
|
||||
<td style="text-align:right">26</td>
|
||||
<td class="amount">₹1,45,000</td>
|
||||
<td class="amount deduction">₹17,400</td>
|
||||
<td class="amount deduction">₹1,088</td>
|
||||
<td class="amount deduction">₹12,000</td>
|
||||
<td class="amount net-pay">₹1,14,512</td>
|
||||
<td><button class="btn-payslip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Generate</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#16a34a">AP</div><div><div class="emp-name">Anjali Patel</div><div class="emp-code">EMP-0055</div></div></div></td>
|
||||
<td><span style="font-size:12px;color:#64748b">HR Executive</span></td>
|
||||
<td style="text-align:right">24</td>
|
||||
<td class="amount">₹55,000</td>
|
||||
<td class="amount deduction">₹6,600</td>
|
||||
<td class="amount deduction">₹413</td>
|
||||
<td class="amount deduction">₹1,200</td>
|
||||
<td class="amount net-pay">₹46,787</td>
|
||||
<td><button class="btn-payslip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Generate</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#d97706">VS</div><div><div class="emp-name">Vikram Singh</div><div class="emp-code">EMP-0012</div></div></div></td>
|
||||
<td><span style="font-size:12px;color:#64748b">Regional Sales Head</span></td>
|
||||
<td style="text-align:right">21</td>
|
||||
<td class="amount">₹1,80,000</td>
|
||||
<td class="amount deduction">₹21,600</td>
|
||||
<td class="amount deduction" style="color:#94a3b8;font-style:italic">Exempt</td>
|
||||
<td class="amount deduction">₹18,500</td>
|
||||
<td class="amount net-pay">₹1,39,900</td>
|
||||
<td><button class="btn-payslip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Generate</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#0e7490">NK</div><div><div class="emp-name">Neha Kapoor</div><div class="emp-code">EMP-0067</div></div></div></td>
|
||||
<td><span style="font-size:12px;color:#64748b">Marketing Manager</span></td>
|
||||
<td style="text-align:right">25</td>
|
||||
<td class="amount">₹95,000</td>
|
||||
<td class="amount deduction">₹11,400</td>
|
||||
<td class="amount deduction">₹713</td>
|
||||
<td class="amount deduction">₹5,200</td>
|
||||
<td class="amount net-pay">₹77,687</td>
|
||||
<td><button class="btn-payslip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Generate</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#7c3aed">SG</div><div><div class="emp-name">Suresh Gupta</div><div class="emp-code">EMP-0008</div></div></div></td>
|
||||
<td><span style="font-size:12px;color:#64748b">Engineering Manager</span></td>
|
||||
<td style="text-align:right">26</td>
|
||||
<td class="amount">₹2,20,000</td>
|
||||
<td class="amount deduction">₹21,600</td>
|
||||
<td class="amount deduction" style="color:#94a3b8;font-style:italic">Exempt</td>
|
||||
<td class="amount deduction">₹28,000</td>
|
||||
<td class="amount net-pay">₹1,70,400</td>
|
||||
<td><button class="btn-payslip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Generate</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#dc2626">MI</div><div><div class="emp-name">Meena Iyer</div><div class="emp-code">EMP-0033</div></div></div></td>
|
||||
<td><span style="font-size:12px;color:#64748b">Finance Analyst</span></td>
|
||||
<td style="text-align:right">0</td>
|
||||
<td class="amount">₹75,000</td>
|
||||
<td class="amount deduction">₹9,000</td>
|
||||
<td class="amount deduction">₹563</td>
|
||||
<td class="amount deduction">₹3,000</td>
|
||||
<td class="amount net-pay">₹62,437</td>
|
||||
<td><button class="btn-payslip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Generate</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#166534">AM</div><div><div class="emp-name">Arjun Mehta</div><div class="emp-code">EMP-0092</div></div></div></td>
|
||||
<td><span style="font-size:12px;color:#64748b">Sales Executive</span></td>
|
||||
<td style="text-align:right">7</td>
|
||||
<td class="amount">₹28,000</td>
|
||||
<td class="amount deduction">₹3,360</td>
|
||||
<td class="amount deduction">₹210</td>
|
||||
<td class="amount deduction">₹0</td>
|
||||
<td class="amount net-pay">₹24,430</td>
|
||||
<td><button class="btn-payslip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Generate</button></td>
|
||||
</tr>
|
||||
<tr class="total-row">
|
||||
<td colspan="3" style="font-weight:700;color:#0f172a;font-size:13px">TOTAL (8 shown / 247 employees)</td>
|
||||
<td class="amount" style="font-weight:700">₹9,18,000</td>
|
||||
<td class="amount deduction" style="font-weight:700">₹1,05,360</td>
|
||||
<td class="amount deduction" style="font-weight:700">₹3,887</td>
|
||||
<td class="amount deduction" style="font-weight:700">₹76,400</td>
|
||||
<td class="amount net-pay" style="font-weight:800;font-size:14px">₹7,32,353</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,387 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HR Portal v4 — Attendance Dashboard</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #0f172a; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1e3a5f; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #2563eb; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 10px; color: #94a3b8; margin-top: 1px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #64748b; letter-spacing: 0.8px; text-transform: uppercase; padding: 8px 20px 4px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: #cbd5e1; font-size: 13.5px; font-weight: 500; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
|
||||
.nav-item.active { background: rgba(37,99,235,0.25); color: #fff; border-left-color: #2563eb; }
|
||||
.nav-badge { margin-left: auto; background: #2563eb; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px; }
|
||||
.sidebar-footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-avatar { width: 34px; height: 34px; border-radius: 50%; background: #2563eb; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #fff; }
|
||||
.sidebar-user-role { font-size: 11px; color: #94a3b8; }
|
||||
.main { margin-left: 240px; display: flex; flex-direction: column; flex: 1; }
|
||||
.header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #e2e8f0; padding: 0 28px; height: 60px; display: flex; align-items: center; gap: 16px; }
|
||||
.header-title { font-size: 16px; font-weight: 700; flex: 1; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; color: #64748b; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; background: #dc2626; border-radius: 50%; font-size: 9px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
|
||||
.header-avatar { width: 34px; height: 34px; border-radius: 50%; background: #1e3a5f; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; }
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; }
|
||||
.page-sub { font-size: 13px; color: #64748b; margin-top: 2px; }
|
||||
|
||||
/* CONTROLS */
|
||||
.controls-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 20px; margin-bottom: 20px; }
|
||||
.date-input { display: flex; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 14px; font-size: 13px; color: #374151; font-family: inherit; }
|
||||
.filter-select { appearance: none; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 32px 8px 12px; font-size: 13px; color: #374151; font-family: inherit; cursor: pointer; outline: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
|
||||
|
||||
/* SUMMARY CARDS */
|
||||
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.summary-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
|
||||
.summary-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.summary-icon.green { background: #f0fdf4; }
|
||||
.summary-icon.red { background: #fef2f2; }
|
||||
.summary-icon.blue { background: #eff6ff; }
|
||||
.summary-icon.yellow { background: #fffbeb; }
|
||||
.summary-value { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
|
||||
.summary-label { font-size: 12px; color: #64748b; font-weight: 500; margin-top: 2px; }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; margin-bottom: 24px; }
|
||||
.table-header { padding: 16px 20px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; }
|
||||
.table-title { font-size: 14px; font-weight: 700; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 16px; text-align: left; background: #f8fafc; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
|
||||
td { padding: 12px 16px; font-size: 13px; color: #374151; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
|
||||
tr:last-child td { border-bottom: none; }
|
||||
tr:hover td { background: #fafbfd; }
|
||||
.emp-cell { display: flex; align-items: center; gap: 10px; }
|
||||
.emp-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.emp-name { font-size: 13px; font-weight: 600; color: #0f172a; }
|
||||
.emp-dept { font-size: 11px; color: #94a3b8; }
|
||||
.time-text { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
|
||||
.hours-text { font-size: 13px; font-weight: 600; color: #0f172a; }
|
||||
.loc-btn { display: inline-flex; align-items: center; gap: 4px; color: #2563eb; font-size: 12px; font-weight: 500; cursor: pointer; }
|
||||
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
|
||||
.status-present { color: #16a34a; }
|
||||
.status-absent { color: #dc2626; }
|
||||
.status-halfday { color: #d97706; }
|
||||
.status-leave { color: #64748b; }
|
||||
.status-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
|
||||
.pill-present { background: #f0fdf4; color: #16a34a; }
|
||||
.pill-absent { background: #fef2f2; color: #dc2626; }
|
||||
.pill-halfday { background: #fffbeb; color: #d97706; }
|
||||
.pill-leave { background: #f1f5f9; color: #475569; }
|
||||
|
||||
/* CALENDAR HEATMAP */
|
||||
.heatmap-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.heatmap-header { padding: 16px 20px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; }
|
||||
.heatmap-title { font-size: 14px; font-weight: 700; }
|
||||
.calendar { padding: 20px; }
|
||||
.cal-months { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
|
||||
.cal-day-header { font-size: 11px; font-weight: 600; color: #94a3b8; text-align: center; padding: 4px 0; }
|
||||
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
|
||||
.cal-cell {
|
||||
aspect-ratio: 1; border-radius: 6px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 11px; font-weight: 500; cursor: pointer;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
.cal-cell:hover { transform: scale(1.1); }
|
||||
.cal-cell.empty { background: transparent; cursor: default; }
|
||||
.cal-cell.h0 { background: #f1f5f9; color: #94a3b8; }
|
||||
.cal-cell.h1 { background: #dcfce7; color: #166534; }
|
||||
.cal-cell.h2 { background: #86efac; color: #166534; }
|
||||
.cal-cell.h3 { background: #4ade80; color: #14532d; }
|
||||
.cal-cell.h4 { background: #16a34a; color: #fff; }
|
||||
.cal-cell.h5 { background: #15803d; color: #fff; }
|
||||
.cal-cell.weekend { background: #f8fafc; color: #cbd5e1; cursor: default; }
|
||||
.cal-cell.today { outline: 2px solid #2563eb; outline-offset: 1px; }
|
||||
.heatmap-legend { display: flex; align-items: center; gap: 8px; padding: 0 20px 16px; font-size: 12px; color: #64748b; }
|
||||
.legend-label { font-size: 11px; }
|
||||
.legend-cells { display: flex; gap: 4px; }
|
||||
.legend-cell { width: 16px; height: 16px; border-radius: 3px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
|
||||
<div><div class="sidebar-logo-text">HR Portal v4</div><div class="sidebar-logo-sub">Admin Console</div></div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main</div>
|
||||
<a class="nav-item" href="02-admin-dashboard.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
|
||||
<a class="nav-item" href="03-employee-list.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
|
||||
<div class="nav-section-label" style="margin-top:8px;">Operations</div>
|
||||
<a class="nav-item" href="04-leave-management.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">5</span></a>
|
||||
<a class="nav-item active" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="05-payroll.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Payroll</a>
|
||||
<a class="nav-item" href="07-recruitment.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>Recruitment</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>Performance</a>
|
||||
<div class="nav-section-label" style="margin-top:8px;">Analytics</div>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Reports</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-avatar">AK</div>
|
||||
<div><div class="sidebar-user-name">Arun Kumar</div><div class="sidebar-user-role">Super Admin</div></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="header">
|
||||
<div class="header-title">Attendance</div>
|
||||
<div style="display:flex;align-items:center;gap:8px">
|
||||
<div class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">5</span></div>
|
||||
<div class="header-avatar">AK</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-top">
|
||||
<div>
|
||||
<div class="page-title">Attendance Dashboard</div>
|
||||
<div class="page-sub">Real-time attendance tracking and management</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px">
|
||||
<button style="display:flex;align-items:center;gap:6px;background:#fff;color:#374151;border:1px solid #e2e8f0;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="21 15 15 15 15 21"/><path d="M18 15V9a6 6 0 0 0-6-6H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6"/></svg>
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="controls-row">
|
||||
<div class="date-input">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
Friday, May 9, 2026
|
||||
</div>
|
||||
<select class="filter-select">
|
||||
<option>All Departments</option>
|
||||
<option>Engineering</option>
|
||||
<option>Product</option>
|
||||
<option>Sales</option>
|
||||
<option>HR</option>
|
||||
</select>
|
||||
<select class="filter-select">
|
||||
<option>All Shifts</option>
|
||||
<option>Morning (9AM–6PM)</option>
|
||||
<option>Evening (2PM–11PM)</option>
|
||||
<option>Night (10PM–7AM)</option>
|
||||
</select>
|
||||
<div style="margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:#16a34a;font-weight:600">
|
||||
<div style="width:8px;height:8px;border-radius:50%;background:#16a34a;animation:pulse 2s infinite"></div>
|
||||
Live — Last updated 2 min ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<div class="summary-grid">
|
||||
<div class="summary-card">
|
||||
<div class="summary-icon green">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="summary-value" style="color:#16a34a">198</div>
|
||||
<div class="summary-label">Present Today</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="summary-icon red">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="summary-value" style="color:#dc2626">32</div>
|
||||
<div class="summary-label">Absent</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="summary-icon blue">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="summary-value" style="color:#2563eb">12</div>
|
||||
<div class="summary-label">On Leave</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="summary-icon yellow">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="summary-value" style="color:#d97706">5</div>
|
||||
<div class="summary-label">Half Day</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Attendance Table -->
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<div class="table-title">Today's Attendance Log</div>
|
||||
<div style="font-size:12px;color:#64748b">Showing 8 of 247 employees</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Clock In</th>
|
||||
<th>Clock Out</th>
|
||||
<th>Hours Worked</th>
|
||||
<th>GPS Location</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#7c3aed">PS</div><div><div class="emp-name">Priya Sharma</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><span class="time-text">09:02 AM</span></td>
|
||||
<td><span class="time-text" style="color:#94a3b8">—</span></td>
|
||||
<td><span class="hours-text">7h 32m</span></td>
|
||||
<td><span class="loc-btn"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>Mumbai Office</span></td>
|
||||
<td><span class="status-pill pill-present">Present</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#0891b2">RV</div><div><div class="emp-name">Rahul Verma</div><div class="emp-dept">Product</div></div></div></td>
|
||||
<td><span class="time-text">09:18 AM</span></td>
|
||||
<td><span class="time-text" style="color:#94a3b8">—</span></td>
|
||||
<td><span class="hours-text">7h 16m</span></td>
|
||||
<td><span class="loc-btn"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>WFH</span></td>
|
||||
<td><span class="status-pill pill-present">Present</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#16a34a">AP</div><div><div class="emp-name">Anjali Patel</div><div class="emp-dept">HR</div></div></div></td>
|
||||
<td><span class="time-text">09:45 AM</span></td>
|
||||
<td><span class="time-text">01:30 PM</span></td>
|
||||
<td><span class="hours-text" style="color:#d97706">3h 45m</span></td>
|
||||
<td><span class="loc-btn"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>Mumbai Office</span></td>
|
||||
<td><span class="status-pill pill-halfday">Half Day</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#d97706">VS</div><div><div class="emp-name">Vikram Singh</div><div class="emp-dept">Sales</div></div></div></td>
|
||||
<td><span class="time-text" style="color:#94a3b8">—</span></td>
|
||||
<td><span class="time-text" style="color:#94a3b8">—</span></td>
|
||||
<td><span class="hours-text" style="color:#94a3b8">0h 0m</span></td>
|
||||
<td><span style="color:#94a3b8;font-size:12px">No data</span></td>
|
||||
<td><span class="status-pill pill-leave">On Leave</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#dc2626">MI</div><div><div class="emp-name">Meena Iyer</div><div class="emp-dept">Finance</div></div></div></td>
|
||||
<td><span class="time-text" style="color:#94a3b8">—</span></td>
|
||||
<td><span class="time-text" style="color:#94a3b8">—</span></td>
|
||||
<td><span class="hours-text" style="color:#94a3b8">0h 0m</span></td>
|
||||
<td><span style="color:#94a3b8;font-size:12px">No data</span></td>
|
||||
<td><span class="status-pill pill-leave">On Leave</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#475569">DN</div><div><div class="emp-name">Deepak Nair</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><span class="time-text" style="color:#dc2626">—</span></td>
|
||||
<td><span class="time-text" style="color:#94a3b8">—</span></td>
|
||||
<td><span class="hours-text" style="color:#dc2626">—</span></td>
|
||||
<td><span style="color:#94a3b8;font-size:12px">No data</span></td>
|
||||
<td><span class="status-pill pill-absent">Absent</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#0e7490">NK</div><div><div class="emp-name">Neha Kapoor</div><div class="emp-dept">Marketing</div></div></div></td>
|
||||
<td><span class="time-text">08:52 AM</span></td>
|
||||
<td><span class="time-text" style="color:#94a3b8">—</span></td>
|
||||
<td><span class="hours-text">7h 42m</span></td>
|
||||
<td><span class="loc-btn"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>Bangalore Office</span></td>
|
||||
<td><span class="status-pill pill-present">Present</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar" style="background:#7c3aed">SG</div><div><div class="emp-name">Suresh Gupta</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><span class="time-text">09:01 AM</span></td>
|
||||
<td><span class="time-text" style="color:#94a3b8">—</span></td>
|
||||
<td><span class="hours-text">7h 33m</span></td>
|
||||
<td><span class="loc-btn"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>Mumbai Office</span></td>
|
||||
<td><span class="status-pill pill-present">Present</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Monthly Heatmap -->
|
||||
<div class="heatmap-card">
|
||||
<div class="heatmap-header">
|
||||
<div class="heatmap-title">Monthly Attendance Heatmap — May 2026</div>
|
||||
<div style="font-size:12px;color:#64748b">Priya Sharma • Engineering</div>
|
||||
</div>
|
||||
<div class="calendar">
|
||||
<div class="cal-months">
|
||||
<div class="cal-day-header">Mon</div>
|
||||
<div class="cal-day-header">Tue</div>
|
||||
<div class="cal-day-header">Wed</div>
|
||||
<div class="cal-day-header">Thu</div>
|
||||
<div class="cal-day-header">Fri</div>
|
||||
<div class="cal-day-header">Sat</div>
|
||||
<div class="cal-day-header">Sun</div>
|
||||
</div>
|
||||
<div class="cal-grid">
|
||||
<!-- Week 1: May 1 starts on Thursday -->
|
||||
<div class="cal-cell empty"></div>
|
||||
<div class="cal-cell empty"></div>
|
||||
<div class="cal-cell empty"></div>
|
||||
<div class="cal-cell h5">1</div>
|
||||
<div class="cal-cell h4">2</div>
|
||||
<div class="cal-cell weekend">3</div>
|
||||
<div class="cal-cell weekend">4</div>
|
||||
<!-- Week 2 -->
|
||||
<div class="cal-cell h5">5</div>
|
||||
<div class="cal-cell h4">6</div>
|
||||
<div class="cal-cell h5">7</div>
|
||||
<div class="cal-cell h3">8</div>
|
||||
<div class="cal-cell today h2">9</div>
|
||||
<div class="cal-cell weekend">10</div>
|
||||
<div class="cal-cell weekend">11</div>
|
||||
<!-- Week 3 -->
|
||||
<div class="cal-cell h0">12</div>
|
||||
<div class="cal-cell h0">13</div>
|
||||
<div class="cal-cell h0">14</div>
|
||||
<div class="cal-cell h0">15</div>
|
||||
<div class="cal-cell h0">16</div>
|
||||
<div class="cal-cell weekend">17</div>
|
||||
<div class="cal-cell weekend">18</div>
|
||||
<!-- Week 4 -->
|
||||
<div class="cal-cell h0">19</div>
|
||||
<div class="cal-cell h0">20</div>
|
||||
<div class="cal-cell h0">21</div>
|
||||
<div class="cal-cell h0">22</div>
|
||||
<div class="cal-cell h0">23</div>
|
||||
<div class="cal-cell weekend">24</div>
|
||||
<div class="cal-cell weekend">25</div>
|
||||
<!-- Week 5 -->
|
||||
<div class="cal-cell h0">26</div>
|
||||
<div class="cal-cell h0">27</div>
|
||||
<div class="cal-cell h0">28</div>
|
||||
<div class="cal-cell h0">29</div>
|
||||
<div class="cal-cell h0">30</div>
|
||||
<div class="cal-cell weekend">31</div>
|
||||
<div class="cal-cell empty"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="heatmap-legend">
|
||||
<span class="legend-label">Less</span>
|
||||
<div class="legend-cells">
|
||||
<div class="legend-cell" style="background:#f1f5f9"></div>
|
||||
<div class="legend-cell" style="background:#dcfce7"></div>
|
||||
<div class="legend-cell" style="background:#86efac"></div>
|
||||
<div class="legend-cell" style="background:#4ade80"></div>
|
||||
<div class="legend-cell" style="background:#16a34a"></div>
|
||||
<div class="legend-cell" style="background:#15803d"></div>
|
||||
</div>
|
||||
<span class="legend-label">More</span>
|
||||
<span style="margin-left:16px;color:#2563eb;font-weight:500">Today outlined in blue</span>
|
||||
<span style="margin-left:8px;color:#94a3b8">Weekends in grey</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,385 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HR Portal v4 — Recruitment Pipeline</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #0f172a; display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1e3a5f; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #2563eb; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 10px; color: #94a3b8; margin-top: 1px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #64748b; letter-spacing: 0.8px; text-transform: uppercase; padding: 8px 20px 4px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: #cbd5e1; font-size: 13.5px; font-weight: 500; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
|
||||
.nav-item.active { background: rgba(37,99,235,0.25); color: #fff; border-left-color: #2563eb; }
|
||||
.nav-badge { margin-left: auto; background: #2563eb; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px; }
|
||||
.sidebar-footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-avatar { width: 34px; height: 34px; border-radius: 50%; background: #2563eb; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #fff; }
|
||||
.sidebar-user-role { font-size: 11px; color: #94a3b8; }
|
||||
.main { margin-left: 240px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
|
||||
.header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #e2e8f0; padding: 0 28px; height: 60px; display: flex; align-items: center; gap: 16px; }
|
||||
.header-title { font-size: 16px; font-weight: 700; flex: 1; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; color: #64748b; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; background: #dc2626; border-radius: 50%; font-size: 9px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
|
||||
.header-avatar { width: 34px; height: 34px; border-radius: 50%; background: #1e3a5f; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; }
|
||||
.content { padding: 28px; flex: 1; min-width: 0; }
|
||||
.page-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; }
|
||||
.page-sub { font-size: 13px; color: #64748b; margin-top: 2px; }
|
||||
.btn-primary { display: flex; align-items: center; gap: 6px; background: #2563eb; color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
|
||||
.btn-primary:hover { background: #1d4ed8; }
|
||||
|
||||
/* JOB SELECTOR */
|
||||
.job-selector-bar { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 20px; margin-bottom: 20px; }
|
||||
.job-label { font-size: 12px; color: #64748b; font-weight: 500; white-space: nowrap; }
|
||||
.job-select { flex: 1; appearance: none; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 9px 36px 9px 14px; font-size: 14px; font-weight: 600; color: #0f172a; font-family: inherit; cursor: pointer; outline: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
|
||||
.job-meta { display: flex; align-items: center; gap: 12px; }
|
||||
.job-tag { display: inline-flex; align-items: center; gap: 4px; background: #eff6ff; color: #2563eb; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
|
||||
|
||||
/* KANBAN */
|
||||
.kanban-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; min-width: 0; }
|
||||
.kanban-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
|
||||
.col-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; margin-bottom: 2px; }
|
||||
.col-title { font-size: 12px; font-weight: 700; letter-spacing: 0.2px; }
|
||||
.col-count { font-size: 11px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
|
||||
|
||||
/* Column Colors */
|
||||
.col-applied .col-header { background: #eff6ff; }
|
||||
.col-applied .col-title { color: #1d4ed8; }
|
||||
.col-applied .col-count { background: #2563eb; color: #fff; }
|
||||
.col-screening .col-header { background: #f5f3ff; }
|
||||
.col-screening .col-title { color: #6d28d9; }
|
||||
.col-screening .col-count { background: #7c3aed; color: #fff; }
|
||||
.col-interview .col-header { background: #fff7ed; }
|
||||
.col-interview .col-title { color: #c2410c; }
|
||||
.col-interview .col-count { background: #ea580c; color: #fff; }
|
||||
.col-offer .col-header { background: #fffbeb; }
|
||||
.col-offer .col-title { color: #b45309; }
|
||||
.col-offer .col-count { background: #d97706; color: #fff; }
|
||||
.col-hired .col-header { background: #f0fdf4; }
|
||||
.col-hired .col-title { color: #15803d; }
|
||||
.col-hired .col-count { background: #16a34a; color: #fff; }
|
||||
.col-rejected .col-header { background: #fef2f2; }
|
||||
.col-rejected .col-title { color: #b91c1c; }
|
||||
.col-rejected .col-count { background: #dc2626; color: #fff; }
|
||||
|
||||
/* CARDS */
|
||||
.kanban-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; cursor: grab; transition: box-shadow 0.15s, transform 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
|
||||
.kanban-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
|
||||
.card-name { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
|
||||
.card-email { font-size: 11px; color: #64748b; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.card-date { font-size: 11px; color: #94a3b8; display: flex; align-items: center; gap: 4px; }
|
||||
.card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f5f9; }
|
||||
.card-actions { display: flex; gap: 4px; }
|
||||
.card-btn { padding: 4px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; font-family: inherit; transition: all 0.1s; }
|
||||
.card-btn:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
|
||||
.card-source { font-size: 10px; color: #94a3b8; background: #f8fafc; padding: 2px 7px; border-radius: 20px; }
|
||||
.source-linkedin { color: #0a66c2; background: #eff6ff; }
|
||||
.source-naukri { color: #e05735; background: #fff7ed; }
|
||||
.source-referral { color: #16a34a; background: #f0fdf4; }
|
||||
.exp-tag { font-size: 10px; color: #64748b; }
|
||||
|
||||
.add-card { border: 2px dashed #e2e8f0; border-radius: 10px; padding: 12px; text-align: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; }
|
||||
.add-card:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
|
||||
<div><div class="sidebar-logo-text">HR Portal v4</div><div class="sidebar-logo-sub">Admin Console</div></div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main</div>
|
||||
<a class="nav-item" href="02-admin-dashboard.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
|
||||
<a class="nav-item" href="03-employee-list.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
|
||||
<div class="nav-section-label" style="margin-top:8px;">Operations</div>
|
||||
<a class="nav-item" href="04-leave-management.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">5</span></a>
|
||||
<a class="nav-item" href="06-attendance.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="05-payroll.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Payroll</a>
|
||||
<a class="nav-item active" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>Recruitment</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>Performance</a>
|
||||
<div class="nav-section-label" style="margin-top:8px;">Analytics</div>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Reports</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-avatar">AK</div>
|
||||
<div><div class="sidebar-user-name">Arun Kumar</div><div class="sidebar-user-role">Super Admin</div></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="header">
|
||||
<div class="header-title">Recruitment</div>
|
||||
<div style="display:flex;align-items:center;gap:8px">
|
||||
<div class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">5</span></div>
|
||||
<div class="header-avatar">AK</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-top">
|
||||
<div>
|
||||
<div class="page-title">Applicant Pipeline</div>
|
||||
<div class="page-sub">Track and manage candidates across hiring stages</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px">
|
||||
<button style="display:flex;align-items:center;gap:6px;background:#fff;color:#374151;border:1px solid #e2e8f0;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
||||
Pipeline Stats
|
||||
</button>
|
||||
<button class="btn-primary">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Post New Job
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Job Selector -->
|
||||
<div class="job-selector-bar">
|
||||
<span class="job-label">Job Posting:</span>
|
||||
<select class="job-select">
|
||||
<option>Senior Software Engineer — Engineering (8 applicants)</option>
|
||||
<option>Product Manager — Product (5 applicants)</option>
|
||||
<option>Sales Executive — Sales (12 applicants)</option>
|
||||
<option>UI/UX Designer — Design (6 applicants)</option>
|
||||
<option>Data Analyst — Analytics (9 applicants)</option>
|
||||
</select>
|
||||
<div class="job-meta">
|
||||
<span class="job-tag">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
|
||||
8 Applicants
|
||||
</span>
|
||||
<span class="job-tag" style="background:#f0fdf4;color:#16a34a">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
Active
|
||||
</span>
|
||||
<span style="font-size:12px;color:#94a3b8">Posted Apr 15, 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kanban Board -->
|
||||
<div class="kanban-board">
|
||||
|
||||
<!-- Applied -->
|
||||
<div class="kanban-col col-applied">
|
||||
<div class="col-header">
|
||||
<span class="col-title">Applied</span>
|
||||
<span class="col-count">3</span>
|
||||
</div>
|
||||
|
||||
<div class="kanban-card">
|
||||
<div class="card-name">Kiran Reddy</div>
|
||||
<div class="card-email">kiran.reddy@gmail.com</div>
|
||||
<div class="card-date">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
May 7, 2026
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="card-source source-linkedin">LinkedIn</span>
|
||||
<div class="card-actions">
|
||||
<button class="card-btn">View</button>
|
||||
<button class="card-btn">Move</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kanban-card">
|
||||
<div class="card-name">Pooja Menon</div>
|
||||
<div class="card-email">pooja.m@outlook.com</div>
|
||||
<div class="card-date">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
May 8, 2026
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="card-source source-naukri">Naukri</span>
|
||||
<div class="card-actions">
|
||||
<button class="card-btn">View</button>
|
||||
<button class="card-btn">Move</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kanban-card">
|
||||
<div class="card-name">Ravi Shankar</div>
|
||||
<div class="card-email">ravi.s@protonmail.com</div>
|
||||
<div class="card-date">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
May 9, 2026
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="card-source source-referral">Referral</span>
|
||||
<div class="card-actions">
|
||||
<button class="card-btn">View</button>
|
||||
<button class="card-btn">Move</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="add-card">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Add applicant
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Screening -->
|
||||
<div class="kanban-col col-screening">
|
||||
<div class="col-header">
|
||||
<span class="col-title">Screening</span>
|
||||
<span class="col-count">2</span>
|
||||
</div>
|
||||
|
||||
<div class="kanban-card">
|
||||
<div class="card-name">Sanjay Krishnan</div>
|
||||
<div class="card-email">sanjay.k@gmail.com</div>
|
||||
<div class="card-date">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
Apr 28, 2026
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="card-source source-linkedin">LinkedIn</span>
|
||||
<div class="card-actions">
|
||||
<button class="card-btn">View</button>
|
||||
<button class="card-btn">Move</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kanban-card">
|
||||
<div class="card-name">Lakshmi Iyer</div>
|
||||
<div class="card-email">lakshmi.i@yahoo.com</div>
|
||||
<div class="card-date">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
Apr 30, 2026
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="card-source source-naukri">Naukri</span>
|
||||
<div class="card-actions">
|
||||
<button class="card-btn">View</button>
|
||||
<button class="card-btn">Move</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="add-card">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Add applicant
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interview -->
|
||||
<div class="kanban-col col-interview">
|
||||
<div class="col-header">
|
||||
<span class="col-title">Interview</span>
|
||||
<span class="col-count">1</span>
|
||||
</div>
|
||||
|
||||
<div class="kanban-card" style="border-left: 3px solid #ea580c;">
|
||||
<div class="card-name">Ananya Bose</div>
|
||||
<div class="card-email">ananya.b@gmail.com</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;margin:6px 0;">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#ea580c" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
<span style="font-size:11px;color:#ea580c;font-weight:600">Interview: May 11, 10AM</span>
|
||||
</div>
|
||||
<div class="card-date">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
Apr 22, 2026
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="card-source source-referral">Referral</span>
|
||||
<div class="card-actions">
|
||||
<button class="card-btn">View</button>
|
||||
<button class="card-btn">Move</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="add-card">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Add applicant
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Offer -->
|
||||
<div class="kanban-col col-offer">
|
||||
<div class="col-header">
|
||||
<span class="col-title">Offer</span>
|
||||
<span class="col-count">1</span>
|
||||
</div>
|
||||
|
||||
<div class="kanban-card" style="border-left: 3px solid #d97706;">
|
||||
<div class="card-name">Rajesh Nambiar</div>
|
||||
<div class="card-email">rajesh.n@gmail.com</div>
|
||||
<div style="margin:6px 0;">
|
||||
<span style="font-size:11px;background:#fffbeb;color:#d97706;padding:2px 8px;border-radius:20px;font-weight:600">₹1,40,000/mo offered</span>
|
||||
</div>
|
||||
<div class="card-date">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
Apr 10, 2026
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="card-source source-linkedin">LinkedIn</span>
|
||||
<div class="card-actions">
|
||||
<button class="card-btn">View</button>
|
||||
<button class="card-btn">Move</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="add-card">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Add applicant
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hired -->
|
||||
<div class="kanban-col col-hired">
|
||||
<div class="col-header">
|
||||
<span class="col-title">Hired</span>
|
||||
<span class="col-count">1</span>
|
||||
</div>
|
||||
|
||||
<div class="kanban-card" style="border-left: 3px solid #16a34a;">
|
||||
<div class="card-name">Divya Suresh</div>
|
||||
<div class="card-email">divya.s@gmail.com</div>
|
||||
<div style="margin:6px 0;">
|
||||
<span style="font-size:11px;background:#f0fdf4;color:#16a34a;padding:2px 8px;border-radius:20px;font-weight:600">Joining: Jun 1, 2026</span>
|
||||
</div>
|
||||
<div class="card-date">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
Apr 1, 2026
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="card-source source-referral">Referral</span>
|
||||
<div class="card-actions">
|
||||
<button class="card-btn">View</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rejected -->
|
||||
<div class="kanban-col col-rejected">
|
||||
<div class="col-header">
|
||||
<span class="col-title">Rejected</span>
|
||||
<span class="col-count">0</span>
|
||||
</div>
|
||||
|
||||
<div style="padding: 20px 12px; text-align: center;">
|
||||
<div style="color:#94a3b8;font-size:12px;line-height:1.5">No rejected candidates for this position yet.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,356 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HR Portal v4 — Employee Self-Service</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; color: #0f172a; display: flex; min-height: 100vh; }
|
||||
|
||||
/* SIDEBAR */
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1e3a5f; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #2563eb; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 10px; color: #94a3b8; margin-top: 1px; }
|
||||
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #64748b; letter-spacing: 0.8px; text-transform: uppercase; padding: 8px 20px 4px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: #cbd5e1; font-size: 13.5px; font-weight: 500; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
|
||||
.nav-item.active { background: rgba(37,99,235,0.25); color: #fff; border-left-color: #2563eb; }
|
||||
.sidebar-footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-avatar { width: 34px; height: 34px; border-radius: 50%; background: #7c3aed; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #fff; }
|
||||
.sidebar-user-role { font-size: 11px; color: #94a3b8; }
|
||||
|
||||
.main { margin-left: 240px; display: flex; flex-direction: column; flex: 1; }
|
||||
.header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #e2e8f0; padding: 0 28px; height: 60px; display: flex; align-items: center; gap: 16px; }
|
||||
.header-title { font-size: 16px; font-weight: 700; flex: 1; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; color: #64748b; }
|
||||
.notif-badge { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; background: #dc2626; border-radius: 50%; font-size: 9px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
|
||||
.header-avatar-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 8px; border-radius: 8px; border: 1px solid #e2e8f0; }
|
||||
.header-avatar { width: 30px; height: 30px; border-radius: 50%; background: #7c3aed; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
|
||||
.header-user-name { font-size: 13px; font-weight: 600; color: #0f172a; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.greeting-section { margin-bottom: 24px; }
|
||||
.greeting-header { display: flex; align-items: center; justify-content: space-between; }
|
||||
.greeting-text h1 { font-size: 22px; font-weight: 700; color: #0f172a; }
|
||||
.greeting-text p { font-size: 13px; color: #64748b; margin-top: 4px; }
|
||||
.greeting-badge { display: flex; align-items: center; gap: 8px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 8px 14px; }
|
||||
.greeting-badge-text { font-size: 12px; color: #1d4ed8; font-weight: 500; }
|
||||
|
||||
/* KPI CARDS */
|
||||
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.kpi-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
|
||||
.kpi-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
|
||||
.kpi-value { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 4px; }
|
||||
.kpi-label { font-size: 12px; color: #64748b; font-weight: 500; }
|
||||
.kpi-sub { font-size: 11px; color: #94a3b8; margin-top: 4px; }
|
||||
|
||||
/* QUICK ACTIONS */
|
||||
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
|
||||
.qa-btn { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; transition: all 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
|
||||
.qa-btn:hover { border-color: #2563eb; box-shadow: 0 4px 12px rgba(37,99,235,0.1); transform: translateY(-2px); }
|
||||
.qa-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.qa-label { font-size: 13px; font-weight: 600; color: #374151; }
|
||||
|
||||
/* MAIN GRID */
|
||||
.main-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 20px; }
|
||||
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.card-header { padding: 16px 20px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; }
|
||||
.card-title { font-size: 14px; font-weight: 700; }
|
||||
.card-link { font-size: 12px; color: #2563eb; text-decoration: none; font-weight: 500; }
|
||||
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 20px; text-align: left; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
|
||||
td { padding: 12px 20px; font-size: 13px; color: #374151; border-bottom: 1px solid #f1f5f9; }
|
||||
tr:last-child td { border-bottom: none; }
|
||||
.badge { display: inline-flex; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
|
||||
.badge-approved { background: #f0fdf4; color: #16a34a; }
|
||||
.badge-pending { background: #eff6ff; color: #2563eb; }
|
||||
.badge-rejected { background: #fef2f2; color: #dc2626; }
|
||||
|
||||
/* HOLIDAY LIST */
|
||||
.holiday-item { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid #f1f5f9; }
|
||||
.holiday-item:last-child { border-bottom: none; }
|
||||
.holiday-date { width: 48px; height: 48px; border-radius: 10px; background: #eff6ff; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.holiday-date-day { font-size: 18px; font-weight: 800; color: #2563eb; line-height: 1; }
|
||||
.holiday-date-month { font-size: 10px; font-weight: 600; color: #64748b; text-transform: uppercase; }
|
||||
.holiday-name { font-size: 13px; font-weight: 600; color: #0f172a; }
|
||||
.holiday-type { font-size: 11px; color: #64748b; margin-top: 2px; }
|
||||
.holiday-days { margin-left: auto; font-size: 12px; color: #94a3b8; white-space: nowrap; }
|
||||
|
||||
/* PERFORMANCE WIDGET */
|
||||
.perf-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.perf-ring-wrap { position: relative; width: 120px; height: 120px; margin: 16px auto; }
|
||||
.perf-ring-bg { fill: none; stroke: #f1f5f9; stroke-width: 10; }
|
||||
.perf-ring-fill { fill: none; stroke: #2563eb; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 50; transform: rotate(-90deg); transform-origin: 60px 60px; }
|
||||
.perf-score { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
|
||||
.perf-score-value { font-size: 24px; font-weight: 800; color: #0f172a; }
|
||||
.perf-score-max { font-size: 12px; color: #64748b; }
|
||||
.perf-categories { width: 100%; margin-top: 16px; }
|
||||
.perf-cat { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
||||
.perf-cat-label { font-size: 12px; color: #64748b; width: 100px; flex-shrink: 0; }
|
||||
.perf-bar-bg { flex: 1; height: 6px; background: #f1f5f9; border-radius: 10px; overflow: hidden; }
|
||||
.perf-bar-fill { height: 100%; border-radius: 10px; background: #2563eb; }
|
||||
.perf-cat-score { font-size: 12px; font-weight: 700; color: #0f172a; width: 30px; text-align: right; flex-shrink: 0; }
|
||||
|
||||
.bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
|
||||
<div><div class="sidebar-logo-text">HR Portal v4</div><div class="sidebar-logo-sub">Employee Portal</div></div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">My Workspace</div>
|
||||
<a class="nav-item active" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>My Profile</a>
|
||||
|
||||
<div class="nav-section-label" style="margin-top:8px;">HR Services</div>
|
||||
<a class="nav-item" href="04-leave-management.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>My Leave</a>
|
||||
<a class="nav-item" href="06-attendance.html"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>Payslips</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Documents</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>Expenses</a>
|
||||
|
||||
<div class="nav-section-label" style="margin-top:8px;">Growth</div>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>Performance</a>
|
||||
<a class="nav-item" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>Training</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-avatar">PS</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Priya Sharma</div>
|
||||
<div class="sidebar-user-role">Sr. Software Engineer</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="header">
|
||||
<div class="header-title">My Dashboard</div>
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<div class="icon-btn">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span class="notif-badge">2</span>
|
||||
</div>
|
||||
<div class="header-avatar-wrap">
|
||||
<div class="header-avatar">PS</div>
|
||||
<div class="header-user-name">Priya Sharma</div>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<!-- Greeting -->
|
||||
<div class="greeting-section">
|
||||
<div class="greeting-header">
|
||||
<div class="greeting-text">
|
||||
<h1>Good morning, Priya</h1>
|
||||
<p>Friday, May 9, 2026 • Senior Software Engineer • Engineering • EMP-0041</p>
|
||||
</div>
|
||||
<div class="greeting-badge">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
<span class="greeting-badge-text">Clocked in at 09:02 AM today</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPI Cards -->
|
||||
<div class="kpi-grid">
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon" style="background:#eff6ff">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
</div>
|
||||
<div class="kpi-value" style="color:#2563eb">12</div>
|
||||
<div class="kpi-label">Annual Leave Balance</div>
|
||||
<div class="kpi-sub">3 used • 15 total</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon" style="background:#f0fdf4">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
</div>
|
||||
<div class="kpi-value" style="color:#16a34a">96%</div>
|
||||
<div class="kpi-label">Attendance Rate</div>
|
||||
<div class="kpi-sub">May 2026 • 25 days present</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon" style="background:#f5f3ff">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||
</div>
|
||||
<div class="kpi-value" style="color:#7c3aed">May 31</div>
|
||||
<div class="kpi-label">Next Payslip</div>
|
||||
<div class="kpi-sub">₹96,200 net expected</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon" style="background:#fff7ed">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
|
||||
</div>
|
||||
<div class="kpi-value" style="color:#d97706">₹2,400</div>
|
||||
<div class="kpi-label">Pending Expenses</div>
|
||||
<div class="kpi-sub">2 claims awaiting approval</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div style="margin-bottom:16px;font-size:14px;font-weight:700;color:#374151">Quick Actions</div>
|
||||
<div class="quick-actions">
|
||||
<div class="qa-btn">
|
||||
<div class="qa-icon" style="background:#eff6ff">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
</div>
|
||||
<div class="qa-label">Apply Leave</div>
|
||||
</div>
|
||||
<div class="qa-btn">
|
||||
<div class="qa-icon" style="background:#f0fdf4">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
</div>
|
||||
<div class="qa-label">Clock Out</div>
|
||||
</div>
|
||||
<div class="qa-btn">
|
||||
<div class="qa-icon" style="background:#fff7ed">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><line x1="12" y1="5" x2="12" y2="19"/></svg>
|
||||
</div>
|
||||
<div class="qa-label">Submit Expense</div>
|
||||
</div>
|
||||
<div class="qa-btn">
|
||||
<div class="qa-icon" style="background:#f5f3ff">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
</div>
|
||||
<div class="qa-label">View Payslip</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Grid: Leave History + Performance -->
|
||||
<div class="main-grid">
|
||||
<!-- Leave History Table -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Recent Leave History</div>
|
||||
<a href="#" class="card-link">View all</a>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Leave Type</th>
|
||||
<th>Dates</th>
|
||||
<th>Days</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Annual Leave</strong><br><span style="font-size:11px;color:#94a3b8">Family function</span></td>
|
||||
<td><span style="font-size:12px">May 12–14, 2026</span></td>
|
||||
<td><span style="font-weight:600">3</span></td>
|
||||
<td><span class="badge badge-pending">Pending</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Sick Leave</strong><br><span style="font-size:11px;color:#94a3b8">Viral fever</span></td>
|
||||
<td><span style="font-size:12px">Mar 3, 2026</span></td>
|
||||
<td><span style="font-weight:600">1</span></td>
|
||||
<td><span class="badge badge-approved">Approved</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Annual Leave</strong><br><span style="font-size:11px;color:#94a3b8">Festival holidays</span></td>
|
||||
<td><span style="font-size:12px">Jan 14–15, 2026</span></td>
|
||||
<td><span style="font-weight:600">2</span></td>
|
||||
<td><span class="badge badge-approved">Approved</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Performance Score -->
|
||||
<div class="perf-card">
|
||||
<div class="card-title">Performance Score</div>
|
||||
<div style="font-size:12px;color:#64748b;margin-top:4px">Q1 2026 — Mid-Year Review</div>
|
||||
<div class="perf-ring-wrap">
|
||||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||
<circle class="perf-ring-bg" cx="60" cy="60" r="50"/>
|
||||
<circle class="perf-ring-fill" cx="60" cy="60" r="50"/>
|
||||
</svg>
|
||||
<div class="perf-score">
|
||||
<div class="perf-score-value">4.2</div>
|
||||
<div class="perf-score-max">out of 5.0</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:16px">
|
||||
<span style="background:#f0fdf4;color:#16a34a;font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px">Exceeds Expectations</span>
|
||||
</div>
|
||||
<div class="perf-categories" style="width:100%">
|
||||
<div class="perf-cat">
|
||||
<span class="perf-cat-label">Technical Skills</span>
|
||||
<div class="perf-bar-bg"><div class="perf-bar-fill" style="width:90%"></div></div>
|
||||
<span class="perf-cat-score">4.5</span>
|
||||
</div>
|
||||
<div class="perf-cat">
|
||||
<span class="perf-cat-label">Collaboration</span>
|
||||
<div class="perf-bar-bg"><div class="perf-bar-fill" style="width:80%"></div></div>
|
||||
<span class="perf-cat-score">4.0</span>
|
||||
</div>
|
||||
<div class="perf-cat">
|
||||
<span class="perf-cat-label">Delivery</span>
|
||||
<div class="perf-bar-bg"><div class="perf-bar-fill" style="width:85%"></div></div>
|
||||
<span class="perf-cat-score">4.2</span>
|
||||
</div>
|
||||
<div class="perf-cat">
|
||||
<span class="perf-cat-label">Communication</span>
|
||||
<div class="perf-bar-bg"><div class="perf-bar-fill" style="width:76%"></div></div>
|
||||
<span class="perf-cat-score">3.8</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Holidays -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Upcoming Holidays</div>
|
||||
<a href="#" class="card-link">Full calendar</a>
|
||||
</div>
|
||||
<div class="holiday-item">
|
||||
<div class="holiday-date">
|
||||
<div class="holiday-date-day">26</div>
|
||||
<div class="holiday-date-month">May</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="holiday-name">Maharashtra Day</div>
|
||||
<div class="holiday-type">State Holiday • Restricted</div>
|
||||
</div>
|
||||
<div class="holiday-days">17 days away</div>
|
||||
</div>
|
||||
<div class="holiday-item">
|
||||
<div class="holiday-date" style="background:#fdf4ff">
|
||||
<div class="holiday-date-day" style="color:#7c3aed">15</div>
|
||||
<div class="holiday-date-month">Aug</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="holiday-name">Independence Day</div>
|
||||
<div class="holiday-type">National Holiday • Mandatory</div>
|
||||
</div>
|
||||
<div class="holiday-days">98 days away</div>
|
||||
</div>
|
||||
<div class="holiday-item">
|
||||
<div class="holiday-date" style="background:#fff7ed">
|
||||
<div class="holiday-date-day" style="color:#d97706">2</div>
|
||||
<div class="holiday-date-month">Oct</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="holiday-name">Gandhi Jayanti</div>
|
||||
<div class="holiday-type">National Holiday • Mandatory</div>
|
||||
</div>
|
||||
<div class="holiday-days">146 days away</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+574
@@ -0,0 +1,574 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HR Portal v4 — Design Mockups</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
background: #f8fafc;
|
||||
color: #0f172a;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
.site-header {
|
||||
background: linear-gradient(135deg, #0f2744 0%, #1e3a5f 60%, #1e40af 100%);
|
||||
padding: 48px 0 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.header-logo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.header-logo-icon {
|
||||
width: 48px; height: 48px;
|
||||
background: #2563eb;
|
||||
border-radius: 12px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.header-logo-text {
|
||||
font-size: 24px; font-weight: 800; color: #ffffff; letter-spacing: -0.5px;
|
||||
}
|
||||
.header-subtitle {
|
||||
font-size: 14px; color: #94a3b8; margin-top: 4px; text-align: left;
|
||||
}
|
||||
.header-tagline {
|
||||
font-size: 15px;
|
||||
color: #cbd5e1;
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.header-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.header-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: #cbd5e1;
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
border-radius: 20px;
|
||||
padding: 5px 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* MAIN CONTENT */
|
||||
.container {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 24px;
|
||||
}
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
.section-sub {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.screen-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
border-radius: 20px;
|
||||
padding: 5px 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* GRID */
|
||||
.mockup-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.mockup-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
transition: box-shadow 0.2s, transform 0.2s;
|
||||
}
|
||||
.mockup-card:hover {
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.card-preview {
|
||||
height: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.preview-icon {
|
||||
width: 56px; height: 56px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.card-number {
|
||||
position: absolute;
|
||||
top: 12px; left: 12px;
|
||||
width: 26px; height: 26px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.9);
|
||||
}
|
||||
|
||||
/* Card preview backgrounds */
|
||||
.preview-login { background: linear-gradient(135deg, #0f2744, #1e3a5f); }
|
||||
.preview-dashboard { background: linear-gradient(135deg, #1e3a5f, #1d4ed8); }
|
||||
.preview-employees { background: linear-gradient(135deg, #065f46, #047857); }
|
||||
.preview-leave { background: linear-gradient(135deg, #7c3aed, #4f46e5); }
|
||||
.preview-payroll { background: linear-gradient(135deg, #b45309, #d97706); }
|
||||
.preview-attendance { background: linear-gradient(135deg, #0e7490, #0891b2); }
|
||||
.preview-recruitment { background: linear-gradient(135deg, #9f1239, #be185d); }
|
||||
.preview-employee { background: linear-gradient(135deg, #166534, #15803d); }
|
||||
|
||||
.card-body { padding: 20px; }
|
||||
.card-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.card-desc {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.card-features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.feature-chip {
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.view-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: #1e3a5f;
|
||||
color: #ffffff;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.view-btn:hover { background: #2563eb; }
|
||||
|
||||
/* FOOTER */
|
||||
.gallery-footer {
|
||||
background: #ffffff;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
padding: 28px 0;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.footer-inner {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.footer-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.footer-logo-icon {
|
||||
width: 32px; height: 32px;
|
||||
background: #1e3a5f;
|
||||
border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.footer-logo-text { font-size: 14px; font-weight: 700; color: #0f172a; }
|
||||
.footer-copy { font-size: 12px; color: #94a3b8; }
|
||||
.footer-badges { display: flex; align-items: center; gap: 8px; }
|
||||
.footer-badge {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
display: flex; align-items: center; gap: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="site-header">
|
||||
<div class="header-logo">
|
||||
<div class="header-logo-icon">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="header-logo-text">HR Portal v4</div>
|
||||
<div class="header-subtitle">Design Mockups</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="header-tagline">
|
||||
High-fidelity UI/UX design mockups for the HR Portal v4 system — a comprehensive enterprise-grade Human Resource Management platform built for Indian organizations.
|
||||
</p>
|
||||
<div class="header-meta">
|
||||
<div class="header-badge">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
8 Screen Mockups
|
||||
</div>
|
||||
<div class="header-badge">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
|
||||
Corporate Blue Theme
|
||||
</div>
|
||||
<div class="header-badge">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||
Indian Compliance Ready
|
||||
</div>
|
||||
<div class="header-badge">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
|
||||
Pure HTML + CSS
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MAIN CONTENT -->
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<div>
|
||||
<div class="section-title">All Screen Mockups</div>
|
||||
<div class="section-sub">Click any card to open the full-screen mockup in your browser</div>
|
||||
</div>
|
||||
<div class="screen-count">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
8 of 35 screens
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mockup-grid">
|
||||
|
||||
<!-- 01 Login -->
|
||||
<div class="mockup-card">
|
||||
<div class="card-preview preview-login">
|
||||
<div class="card-number">01</div>
|
||||
<div class="preview-icon" style="background:rgba(255,255,255,0.15)">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Login Page</div>
|
||||
<div class="card-desc">Secure sign-in screen with email/password authentication and Microsoft SSO option for enterprise users.</div>
|
||||
<div class="card-features">
|
||||
<span class="feature-chip">Email Auth</span>
|
||||
<span class="feature-chip">SSO Support</span>
|
||||
<span class="feature-chip">Remember Me</span>
|
||||
<span class="feature-chip">Forgot Password</span>
|
||||
</div>
|
||||
<a href="01-login.html" class="view-btn">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
View Mockup
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 02 Admin Dashboard -->
|
||||
<div class="mockup-card">
|
||||
<div class="card-preview preview-dashboard">
|
||||
<div class="card-number">02</div>
|
||||
<div class="preview-icon" style="background:rgba(255,255,255,0.15)">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">
|
||||
<rect x="3" y="3" width="7" height="7"/>
|
||||
<rect x="14" y="3" width="7" height="7"/>
|
||||
<rect x="14" y="14" width="7" height="7"/>
|
||||
<rect x="3" y="14" width="7" height="7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Admin Dashboard</div>
|
||||
<div class="card-desc">Central command center for admins with KPI cards, leave request overview, attendance chart, and recent hires.</div>
|
||||
<div class="card-features">
|
||||
<span class="feature-chip">KPI Cards</span>
|
||||
<span class="feature-chip">Attendance Chart</span>
|
||||
<span class="feature-chip">Leave Summary</span>
|
||||
<span class="feature-chip">Recent Hires</span>
|
||||
</div>
|
||||
<a href="02-admin-dashboard.html" class="view-btn">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
View Mockup
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 03 Employee List -->
|
||||
<div class="mockup-card">
|
||||
<div class="card-preview preview-employees">
|
||||
<div class="card-number">03</div>
|
||||
<div class="preview-icon" style="background:rgba(255,255,255,0.15)">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Employee Directory</div>
|
||||
<div class="card-desc">Searchable and filterable employee table with avatar initials, status badges, department, and role data.</div>
|
||||
<div class="card-features">
|
||||
<span class="feature-chip">Filter & Search</span>
|
||||
<span class="feature-chip">Status Badges</span>
|
||||
<span class="feature-chip">Pagination</span>
|
||||
<span class="feature-chip">Add Employee</span>
|
||||
</div>
|
||||
<a href="03-employee-list.html" class="view-btn">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
View Mockup
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 04 Leave Management -->
|
||||
<div class="mockup-card">
|
||||
<div class="card-preview preview-leave">
|
||||
<div class="card-number">04</div>
|
||||
<div class="preview-icon" style="background:rgba(255,255,255,0.15)">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
||||
<line x1="16" y1="2" x2="16" y2="6"/>
|
||||
<line x1="8" y1="2" x2="8" y2="6"/>
|
||||
<line x1="3" y1="10" x2="21" y2="10"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Leave Management</div>
|
||||
<div class="card-desc">Admin view for reviewing, approving, or rejecting leave requests with a detail side panel and status tabs.</div>
|
||||
<div class="card-features">
|
||||
<span class="feature-chip">Approve/Reject</span>
|
||||
<span class="feature-chip">Detail Panel</span>
|
||||
<span class="feature-chip">Status Tabs</span>
|
||||
<span class="feature-chip">Leave Types</span>
|
||||
</div>
|
||||
<a href="04-leave-management.html" class="view-btn">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
View Mockup
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 05 Payroll -->
|
||||
<div class="mockup-card">
|
||||
<div class="card-preview preview-payroll">
|
||||
<div class="card-number">05</div>
|
||||
<div class="preview-icon" style="background:rgba(255,255,255,0.15)">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">
|
||||
<line x1="12" y1="1" x2="12" y2="23"/>
|
||||
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Payroll Processing</div>
|
||||
<div class="card-desc">Monthly payroll with Indian compliance — PF, ESI, TDS breakdowns, gross/net calculations, and payslip generation.</div>
|
||||
<div class="card-features">
|
||||
<span class="feature-chip">PF Deductions</span>
|
||||
<span class="feature-chip">ESI Compliance</span>
|
||||
<span class="feature-chip">TDS Calculation</span>
|
||||
<span class="feature-chip">Payslip Gen</span>
|
||||
</div>
|
||||
<a href="05-payroll.html" class="view-btn">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
View Mockup
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 06 Attendance -->
|
||||
<div class="mockup-card">
|
||||
<div class="card-preview preview-attendance">
|
||||
<div class="card-number">06</div>
|
||||
<div class="preview-icon" style="background:rgba(255,255,255,0.15)">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="12 6 12 12 16 14"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Attendance Dashboard</div>
|
||||
<div class="card-desc">Real-time clock-in/out tracking, GPS location data, color-coded status grid, and monthly heatmap calendar.</div>
|
||||
<div class="card-features">
|
||||
<span class="feature-chip">Live Tracking</span>
|
||||
<span class="feature-chip">GPS Location</span>
|
||||
<span class="feature-chip">Heatmap Calendar</span>
|
||||
<span class="feature-chip">Status Grid</span>
|
||||
</div>
|
||||
<a href="06-attendance.html" class="view-btn">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
View Mockup
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 07 Recruitment -->
|
||||
<div class="mockup-card">
|
||||
<div class="card-preview preview-recruitment">
|
||||
<div class="card-number">07</div>
|
||||
<div class="preview-icon" style="background:rgba(255,255,255,0.15)">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Recruitment Kanban</div>
|
||||
<div class="card-desc">Visual applicant pipeline board with 6 stages — Applied, Screening, Interview, Offer, Hired, Rejected — with drag-and-drop cards.</div>
|
||||
<div class="card-features">
|
||||
<span class="feature-chip">Kanban Board</span>
|
||||
<span class="feature-chip">6 Stages</span>
|
||||
<span class="feature-chip">Applicant Cards</span>
|
||||
<span class="feature-chip">Job Selector</span>
|
||||
</div>
|
||||
<a href="07-recruitment.html" class="view-btn">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
View Mockup
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 08 Employee Dashboard -->
|
||||
<div class="mockup-card">
|
||||
<div class="card-preview preview-employee">
|
||||
<div class="card-number">08</div>
|
||||
<div class="preview-icon" style="background:rgba(255,255,255,0.15)">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title">Employee Self-Service</div>
|
||||
<div class="card-desc">Personalized employee portal with leave balance, attendance stats, upcoming payslip, quick actions, and performance score ring.</div>
|
||||
<div class="card-features">
|
||||
<span class="feature-chip">Quick Actions</span>
|
||||
<span class="feature-chip">Performance Ring</span>
|
||||
<span class="feature-chip">Leave History</span>
|
||||
<span class="feature-chip">Holidays</span>
|
||||
</div>
|
||||
<a href="08-employee-dashboard.html" class="view-btn">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
View Mockup
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Placeholder Card -->
|
||||
<div class="mockup-card" style="border-style:dashed;background:#fafbfc">
|
||||
<div class="card-preview" style="background:#f1f5f9;height:160px">
|
||||
<div style="text-align:center;color:#94a3b8">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
<div style="font-size:12px;margin-top:8px;font-weight:500">27 more screens</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title" style="color:#94a3b8">More Screens</div>
|
||||
<div class="card-desc" style="color:#94a3b8">Profile editor, performance reviews, expense claims, document manager, reports, settings, and 20+ more screens to be designed during development.</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;padding:10px;background:#f8fafc;border-radius:8px;font-size:12px;color:#94a3b8;border:1px dashed #e2e8f0">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
Coming in development phase
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="gallery-footer">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-logo">
|
||||
<div class="footer-logo-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="footer-logo-text">HR Portal v4</div>
|
||||
<div style="font-size:11px;color:#94a3b8">Human Resource Management System</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-copy">
|
||||
Design mockups • 8 screens • May 2026
|
||||
</div>
|
||||
<div class="footer-badges">
|
||||
<div class="footer-badge">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
||||
Pure HTML/CSS
|
||||
</div>
|
||||
<div class="footer-badge">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||
PF + ESI + TDS
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user