deploy: betterhuman-designs
This commit is contained in:
TenX PM
@@ -0,0 +1,252 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BetterHuman — Login</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; display: flex; height: 100vh; overflow: hidden; background: #F8FAFC; }
|
||||
|
||||
/* Left Panel */
|
||||
.left-panel {
|
||||
width: 50%;
|
||||
background: #0F172A;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 64px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.left-panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -120px; right: -120px;
|
||||
width: 400px; height: 400px;
|
||||
background: radial-gradient(circle, rgba(99,102,241,0.18) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.left-panel::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -80px; left: -80px;
|
||||
width: 300px; height: 300px;
|
||||
background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.logo-wrap {
|
||||
display: flex; align-items: center; gap: 12px; margin-bottom: 56px;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 44px; height: 44px;
|
||||
background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
|
||||
border-radius: 10px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.logo-icon svg { width: 24px; height: 24px; }
|
||||
.logo-text { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 700; color: #FFFFFF; }
|
||||
.hero-tagline {
|
||||
font-family: 'Sora', sans-serif;
|
||||
font-size: 36px; font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 16px;
|
||||
max-width: 420px;
|
||||
}
|
||||
.hero-sub {
|
||||
font-size: 15px; color: #64748B; margin-bottom: 48px; line-height: 1.6; max-width: 380px;
|
||||
}
|
||||
.feature-list { display: flex; flex-direction: column; gap: 20px; }
|
||||
.feature-item { display: flex; align-items: center; gap: 14px; }
|
||||
.feature-check {
|
||||
width: 28px; height: 28px; border-radius: 50%;
|
||||
background: rgba(99,102,241,0.2);
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.feature-check svg { width: 14px; height: 14px; color: #6366F1; }
|
||||
.feature-text { font-size: 14px; color: #94A3B8; }
|
||||
.feature-text strong { color: #CBD5E1; font-weight: 500; }
|
||||
|
||||
/* Right Panel */
|
||||
.right-panel {
|
||||
width: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 48px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.login-card { width: 100%; max-width: 420px; }
|
||||
.login-title { font-family: 'Sora', sans-serif; font-size: 28px; font-weight: 700; color: #0F172A; margin-bottom: 6px; }
|
||||
.login-sub { font-size: 14px; color: #64748B; margin-bottom: 36px; }
|
||||
|
||||
.google-btn {
|
||||
width: 100%;
|
||||
display: flex; align-items: center; justify-content: center; gap: 10px;
|
||||
padding: 11px 20px;
|
||||
border: 1.5px solid #E2E8F0; border-radius: 8px;
|
||||
background: #FFFFFF; color: #0F172A;
|
||||
font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
|
||||
cursor: pointer; margin-bottom: 28px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.google-btn:hover { background: #F8FAFC; }
|
||||
.google-btn svg { width: 20px; height: 20px; }
|
||||
|
||||
.divider { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
|
||||
.divider-line { flex: 1; height: 1px; background: #E2E8F0; }
|
||||
.divider-text { font-size: 12px; color: #94A3B8; font-weight: 500; }
|
||||
|
||||
.form-group { margin-bottom: 20px; }
|
||||
.form-label { display: block; font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 6px; }
|
||||
.form-input {
|
||||
width: 100%; padding: 10px 14px;
|
||||
border: 1.5px solid #E2E8F0; border-radius: 8px;
|
||||
font-family: 'Inter', sans-serif; font-size: 14px; color: #0F172A;
|
||||
background: #FFFFFF; outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: #6366F1; }
|
||||
.form-input::placeholder { color: #94A3B8; }
|
||||
|
||||
.form-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
|
||||
.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #64748B; cursor: pointer; }
|
||||
.checkbox-label input { width: 15px; height: 15px; accent-color: #6366F1; }
|
||||
.forgot-link { font-size: 13px; color: #6366F1; font-weight: 500; text-decoration: none; }
|
||||
.forgot-link:hover { color: #4F46E5; }
|
||||
|
||||
.signin-btn {
|
||||
width: 100%; padding: 11px 20px;
|
||||
background: #6366F1; color: #FFFFFF;
|
||||
border: none; border-radius: 8px;
|
||||
font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
|
||||
cursor: pointer; margin-bottom: 24px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.signin-btn:hover { background: #4F46E5; }
|
||||
|
||||
.signup-row { text-align: center; font-size: 13px; color: #64748B; }
|
||||
.signup-row a { color: #6366F1; font-weight: 500; text-decoration: none; }
|
||||
|
||||
.badge-row { display: flex; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
|
||||
.trust-badge { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: #F8FAFC; border-radius: 9999px; font-size: 11px; color: #64748B; }
|
||||
.trust-badge svg { width: 13px; height: 13px; color: #10B981; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Left Panel -->
|
||||
<div class="left-panel">
|
||||
<div class="logo-wrap">
|
||||
<div class="logo-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="white" 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>
|
||||
<span class="logo-text">BetterHuman</span>
|
||||
</div>
|
||||
|
||||
<h1 class="hero-tagline">The HR platform<br>built for 2026</h1>
|
||||
<p class="hero-sub">Streamline hiring, payroll, performance, and people ops — all in one intelligent workspace.</p>
|
||||
|
||||
<div class="feature-list">
|
||||
<div class="feature-item">
|
||||
<div class="feature-check">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#6366F1" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="feature-text"><strong>Unified People Management</strong> — One source of truth for your entire workforce</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-check">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#6366F1" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="feature-text"><strong>AI-Powered Payroll</strong> — Auto-calculate PF, ESI, TDS, and compliance reports</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-check">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#6366F1" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="feature-text"><strong>Performance & Engagement</strong> — OKRs, 360° reviews, real-time pulse surveys</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="badge-row">
|
||||
<div class="trust-badge">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
SOC2 Compliant
|
||||
</div>
|
||||
<div class="trust-badge">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
GDPR Ready
|
||||
</div>
|
||||
<div class="trust-badge">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
India Payroll Compliant
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Panel -->
|
||||
<div class="right-panel">
|
||||
<div class="login-card">
|
||||
<h2 class="login-title">Welcome back</h2>
|
||||
<p class="login-sub">Sign in to your BetterHuman workspace</p>
|
||||
|
||||
<button class="google-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
|
||||
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
|
||||
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
|
||||
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
|
||||
</svg>
|
||||
Sign in with Google
|
||||
</button>
|
||||
|
||||
<div class="divider">
|
||||
<div class="divider-line"></div>
|
||||
<span class="divider-text">or continue with email</span>
|
||||
<div class="divider-line"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Work Email</label>
|
||||
<input type="email" class="form-input" placeholder="priya@techcorp.in" value="priya@techcorp.in">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-input" placeholder="••••••••" value="••••••••">
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" checked>
|
||||
Remember me for 30 days
|
||||
</label>
|
||||
<a href="#" class="forgot-link">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<button class="signin-btn">Sign In</button>
|
||||
|
||||
<div class="signup-row">
|
||||
Don't have an account? <a href="#">Start free trial</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,696 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BetterHuman — Dashboard</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; display: flex; min-height: 100vh; font-size: 14px; color: #0F172A; }
|
||||
|
||||
/* SIDEBAR */
|
||||
.sidebar {
|
||||
width: 240px; background: #0F172A; min-height: 100vh;
|
||||
display: flex; flex-direction: column;
|
||||
position: fixed; top: 0; left: 0; bottom: 0; z-index: 10;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sidebar-logo {
|
||||
padding: 20px 20px 16px;
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.logo-icon {
|
||||
width: 36px; height: 36px;
|
||||
background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
|
||||
border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.logo-icon svg { width: 20px; height: 20px; }
|
||||
.logo-name { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; color: #FFFFFF; }
|
||||
.logo-company { font-size: 11px; color: #475569; font-weight: 500; }
|
||||
|
||||
.sidebar-search {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.sidebar-search input {
|
||||
width: 100%; padding: 7px 10px 7px 32px;
|
||||
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 6px; color: #94A3B8; font-size: 12px; font-family: 'Inter', sans-serif;
|
||||
outline: none;
|
||||
}
|
||||
.sidebar-search input::placeholder { color: #475569; }
|
||||
.search-wrap { position: relative; }
|
||||
.search-wrap svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: #475569; }
|
||||
|
||||
.sidebar-nav { padding: 8px 0; flex: 1; }
|
||||
.nav-section-label {
|
||||
font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
|
||||
color: #334155; padding: 16px 20px 6px; text-transform: uppercase;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 8px 16px; margin: 1px 8px; border-radius: 7px;
|
||||
color: #64748B; font-size: 13px; font-weight: 500; cursor: pointer;
|
||||
transition: all 0.15s; text-decoration: none;
|
||||
}
|
||||
.nav-item:hover { background: #1E293B; color: #CBD5E1; }
|
||||
.nav-item.active { background: #6366F1; color: #FFFFFF; }
|
||||
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.nav-badge {
|
||||
margin-left: auto; background: #EF4444; color: white;
|
||||
font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9999px;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06);
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
.avatar-sm {
|
||||
width: 32px; height: 32px; border-radius: 50%;
|
||||
background: linear-gradient(135deg, #6366F1, #8B5CF6);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 12px; font-weight: 700; color: white; flex-shrink: 0;
|
||||
}
|
||||
.footer-name { font-size: 12px; font-weight: 600; color: #CBD5E1; }
|
||||
.footer-role { font-size: 11px; color: #475569; }
|
||||
|
||||
/* MAIN LAYOUT */
|
||||
.main { margin-left: 240px; flex: 1; min-height: 100vh; display: flex; flex-direction: column; }
|
||||
|
||||
/* TOP BAR */
|
||||
.topbar {
|
||||
height: 64px; background: #FFFFFF; border-bottom: 1px solid #E2E8F0;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0 32px; position: sticky; top: 0; z-index: 5;
|
||||
}
|
||||
.topbar-left { display: flex; flex-direction: column; }
|
||||
.page-title { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; color: #0F172A; }
|
||||
.page-breadcrumb { font-size: 12px; color: #94A3B8; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.topbar-search {
|
||||
position: relative; display: flex; align-items: center;
|
||||
}
|
||||
.topbar-search input {
|
||||
padding: 8px 12px 8px 36px; border: 1.5px solid #E2E8F0; border-radius: 8px;
|
||||
font-family: 'Inter', sans-serif; font-size: 13px; color: #0F172A;
|
||||
background: #F8FAFC; width: 220px; outline: none;
|
||||
}
|
||||
.topbar-search svg { position: absolute; left: 10px; width: 16px; height: 16px; color: #94A3B8; }
|
||||
.icon-btn {
|
||||
width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E2E8F0;
|
||||
background: #FFFFFF; display: flex; align-items: center; justify-content: center;
|
||||
cursor: pointer; position: relative;
|
||||
}
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot {
|
||||
position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
|
||||
background: #EF4444; border-radius: 50%; border: 2px solid #FFFFFF;
|
||||
}
|
||||
.topbar-avatar {
|
||||
width: 36px; height: 36px; border-radius: 50%;
|
||||
background: linear-gradient(135deg, #6366F1, #8B5CF6);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; font-weight: 700; color: white; cursor: pointer;
|
||||
}
|
||||
|
||||
/* CONTENT */
|
||||
.content { padding: 32px; flex: 1; }
|
||||
|
||||
/* QUICK ACTIONS */
|
||||
.quick-actions { display: flex; gap: 12px; margin-bottom: 28px; }
|
||||
.btn-primary {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 9px 18px; background: #6366F1; color: #FFFFFF;
|
||||
border: none; border-radius: 8px; font-family: 'Inter', sans-serif;
|
||||
font-size: 13px; font-weight: 600; cursor: pointer;
|
||||
}
|
||||
.btn-primary svg { width: 15px; height: 15px; }
|
||||
.btn-secondary {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 9px 18px; background: #FFFFFF; color: #0F172A;
|
||||
border: 1.5px solid #E2E8F0; border-radius: 8px; font-family: 'Inter', sans-serif;
|
||||
font-size: 13px; font-weight: 500; cursor: pointer;
|
||||
}
|
||||
.btn-secondary svg { width: 15px; height: 15px; color: #64748B; }
|
||||
|
||||
/* METRIC CARDS */
|
||||
.metrics-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
|
||||
.metrics-row-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.metric-card {
|
||||
background: #FFFFFF; border-radius: 12px; padding: 20px 24px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||
display: flex; align-items: flex-start; justify-content: space-between;
|
||||
}
|
||||
.metric-label { font-size: 12px; color: #64748B; font-weight: 500; margin-bottom: 8px; }
|
||||
.metric-value { font-family: 'Sora', sans-serif; font-size: 28px; font-weight: 700; color: #0F172A; }
|
||||
.metric-delta { font-size: 12px; color: #10B981; margin-top: 4px; }
|
||||
.metric-delta.down { color: #EF4444; }
|
||||
.metric-icon {
|
||||
width: 44px; height: 44px; border-radius: 10px;
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.metric-icon svg { width: 22px; height: 22px; }
|
||||
.icon-indigo { background: linear-gradient(135deg, #EEF2FF, #C7D2FE); }
|
||||
.icon-indigo svg { color: #6366F1; }
|
||||
.icon-green { background: linear-gradient(135deg, #ECFDF5, #A7F3D0); }
|
||||
.icon-green svg { color: #10B981; }
|
||||
.icon-amber { background: linear-gradient(135deg, #FFFBEB, #FDE68A); }
|
||||
.icon-amber svg { color: #F59E0B; }
|
||||
.icon-red { background: linear-gradient(135deg, #FEF2F2, #FECACA); }
|
||||
.icon-red svg { color: #EF4444; }
|
||||
.icon-blue { background: linear-gradient(135deg, #EFF6FF, #BFDBFE); }
|
||||
.icon-blue svg { color: #3B82F6; }
|
||||
.icon-purple { background: linear-gradient(135deg, #F5F3FF, #DDD6FE); }
|
||||
.icon-purple svg { color: #8B5CF6; }
|
||||
|
||||
/* MAIN GRID */
|
||||
.main-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
|
||||
|
||||
/* CHART CARD */
|
||||
.card { background: #FFFFFF; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
||||
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.card-title { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; color: #0F172A; }
|
||||
.card-action { font-size: 12px; color: #6366F1; font-weight: 500; cursor: pointer; }
|
||||
|
||||
/* BAR CHART */
|
||||
.bar-chart { display: flex; flex-direction: column; gap: 12px; }
|
||||
.bar-row { display: flex; align-items: center; gap: 12px; }
|
||||
.bar-label { font-size: 12px; color: #64748B; width: 90px; text-align: right; flex-shrink: 0; }
|
||||
.bar-track { flex: 1; height: 28px; background: #F1F5F9; border-radius: 6px; overflow: hidden; position: relative; }
|
||||
.bar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 10px; }
|
||||
.bar-fill.indigo { background: linear-gradient(90deg, #6366F1, #818CF8); }
|
||||
.bar-fill.green { background: linear-gradient(90deg, #10B981, #34D399); }
|
||||
.bar-fill.amber { background: linear-gradient(90deg, #F59E0B, #FCD34D); }
|
||||
.bar-fill.blue { background: linear-gradient(90deg, #3B82F6, #60A5FA); }
|
||||
.bar-fill.purple { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }
|
||||
.bar-fill.teal { background: linear-gradient(90deg, #14B8A6, #2DD4BF); }
|
||||
.bar-count { font-size: 12px; font-weight: 700; color: white; }
|
||||
.bar-num { font-size: 12px; color: #64748B; width: 30px; flex-shrink: 0; text-align: right; }
|
||||
|
||||
/* SIDE CARDS */
|
||||
.side-cards { display: flex; flex-direction: column; gap: 16px; }
|
||||
|
||||
.list-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F1F5F9; }
|
||||
.list-item:last-child { border-bottom: none; padding-bottom: 0; }
|
||||
.list-item:first-child { padding-top: 0; }
|
||||
.avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; }
|
||||
.av-1 { background: linear-gradient(135deg, #6366F1, #8B5CF6); }
|
||||
.av-2 { background: linear-gradient(135deg, #10B981, #059669); }
|
||||
.av-3 { background: linear-gradient(135deg, #F59E0B, #D97706); }
|
||||
.av-4 { background: linear-gradient(135deg, #EF4444, #DC2626); }
|
||||
.av-5 { background: linear-gradient(135deg, #3B82F6, #2563EB); }
|
||||
.list-name { font-size: 13px; font-weight: 600; color: #0F172A; }
|
||||
.list-sub { font-size: 11px; color: #94A3B8; }
|
||||
.list-right { margin-left: auto; text-align: right; }
|
||||
.list-date { font-size: 11px; color: #64748B; }
|
||||
.badge { padding: 2px 10px; border-radius: 9999px; font-size: 11px; font-weight: 500; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.badge-blue { background: #EFF6FF; color: #2563EB; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-indigo { background: #EEF2FF; color: #6366F1; }
|
||||
|
||||
.pending-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F1F5F9; }
|
||||
.pending-item:last-child { border-bottom: none; }
|
||||
.pending-info { flex: 1; }
|
||||
.pending-name { font-size: 13px; font-weight: 600; color: #0F172A; }
|
||||
.pending-detail { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.pending-actions { display: flex; gap: 6px; }
|
||||
.btn-xs-green {
|
||||
padding: 4px 10px; background: #ECFDF5; color: #059669;
|
||||
border: none; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer;
|
||||
}
|
||||
.btn-xs-red {
|
||||
padding: 4px 10px; background: #FEF2F2; color: #DC2626;
|
||||
border: none; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer;
|
||||
}
|
||||
|
||||
.birthday-icon { font-size: 18px; margin-left: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- SIDEBAR -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="white" 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>
|
||||
<div class="logo-name">BetterHuman</div>
|
||||
<div class="logo-company">TechCorp India Pvt. Ltd.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-search">
|
||||
<div class="search-wrap">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
</svg>
|
||||
<input type="text" placeholder="Search people, docs...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main</div>
|
||||
<a class="nav-item active" href="02-dashboard.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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-people.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
|
||||
People
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
|
||||
</svg>
|
||||
Org Chart
|
||||
</a>
|
||||
|
||||
<div class="nav-section-label">Workforce</div>
|
||||
<a class="nav-item" href="07-recruitment.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>
|
||||
</svg>
|
||||
Recruitment
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
|
||||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"/>
|
||||
</svg>
|
||||
Onboarding
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
|
||||
</svg>
|
||||
Attendance
|
||||
</a>
|
||||
<a class="nav-item" href="05-leave.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="4" width="18" height="18" rx="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
|
||||
<span class="nav-badge">5</span>
|
||||
</a>
|
||||
<a class="nav-item" href="06-payroll.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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>
|
||||
|
||||
<div class="nav-section-label">Talent</div>
|
||||
<a class="nav-item" href="08-performance.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"/><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
|
||||
</svg>
|
||||
Performance
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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>
|
||||
Learning
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||||
</svg>
|
||||
Benefits
|
||||
</a>
|
||||
|
||||
<div class="nav-section-label">Culture</div>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
|
||||
</svg>
|
||||
Engagement
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/>
|
||||
</svg>
|
||||
Recognition
|
||||
</a>
|
||||
|
||||
<div class="nav-section-label">Insights</div>
|
||||
<a class="nav-item" href="09-analytics.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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>
|
||||
Analytics
|
||||
</a>
|
||||
|
||||
<div class="nav-section-label">Admin</div>
|
||||
<a class="nav-item" href="10-settings.html">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
||||
</svg>
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="avatar-sm">PS</div>
|
||||
<div>
|
||||
<div class="footer-name">Priya Sharma</div>
|
||||
<div class="footer-role">HR Admin</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- MAIN -->
|
||||
<div class="main">
|
||||
<!-- TOP BAR -->
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<span class="page-title">Dashboard</span>
|
||||
<span class="page-breadcrumb">Good morning, Priya — Monday, 5 May 2026</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<div class="topbar-search">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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="icon-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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>
|
||||
<div class="notif-dot"></div>
|
||||
</div>
|
||||
<div class="topbar-avatar">PS</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content">
|
||||
<!-- Quick Actions -->
|
||||
<div class="quick-actions">
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
Add Employee
|
||||
</button>
|
||||
<button class="btn-secondary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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>
|
||||
Run Payroll
|
||||
</button>
|
||||
<button class="btn-secondary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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>
|
||||
View Reports
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Metrics Row 1 -->
|
||||
<div class="metrics-row">
|
||||
<div class="metric-card">
|
||||
<div>
|
||||
<div class="metric-label">Total Employees</div>
|
||||
<div class="metric-value">247</div>
|
||||
<div class="metric-delta">+8 this month</div>
|
||||
</div>
|
||||
<div class="metric-icon icon-indigo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
|
||||
<div class="metric-card">
|
||||
<div>
|
||||
<div class="metric-label">Open Positions</div>
|
||||
<div class="metric-value">12</div>
|
||||
<div class="metric-delta">3 urgent</div>
|
||||
</div>
|
||||
<div class="metric-icon icon-amber">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div>
|
||||
<div class="metric-label">On Leave Today</div>
|
||||
<div class="metric-value">8</div>
|
||||
<div class="metric-delta" style="color:#64748B">3.2% of workforce</div>
|
||||
</div>
|
||||
<div class="metric-icon icon-blue">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="4" width="18" height="18" rx="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="metric-card">
|
||||
<div>
|
||||
<div class="metric-label">Pending Approvals</div>
|
||||
<div class="metric-value">5</div>
|
||||
<div class="metric-delta down">2 overdue</div>
|
||||
</div>
|
||||
<div class="metric-icon icon-red">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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>
|
||||
|
||||
<!-- Metrics Row 2 -->
|
||||
<div class="metrics-row-2">
|
||||
<div class="metric-card">
|
||||
<div>
|
||||
<div class="metric-label">Monthly Payroll — May 2026</div>
|
||||
<div class="metric-value">₹48.2L</div>
|
||||
<div class="metric-delta">+2.4% vs last month</div>
|
||||
</div>
|
||||
<div class="metric-icon icon-green">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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="metric-card">
|
||||
<div>
|
||||
<div class="metric-label">Avg Engagement Score</div>
|
||||
<div class="metric-value">78%</div>
|
||||
<div class="metric-delta">+3pts from last survey</div>
|
||||
</div>
|
||||
<div class="metric-icon icon-purple">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main grid -->
|
||||
<div class="main-grid">
|
||||
<!-- Left: Chart -->
|
||||
<div style="display:flex;flex-direction:column;gap:16px;">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">Headcount by Department</span>
|
||||
<span class="card-action">View All</span>
|
||||
</div>
|
||||
<div class="bar-chart">
|
||||
<div class="bar-row">
|
||||
<div class="bar-label">Engineering</div>
|
||||
<div class="bar-track">
|
||||
<div class="bar-fill indigo" style="width:89%"><span class="bar-count">89</span></div>
|
||||
</div>
|
||||
<div class="bar-num">89</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<div class="bar-label">Sales</div>
|
||||
<div class="bar-track">
|
||||
<div class="bar-fill green" style="width:45%"><span class="bar-count">45</span></div>
|
||||
</div>
|
||||
<div class="bar-num">45</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<div class="bar-label">Operations</div>
|
||||
<div class="bar-track">
|
||||
<div class="bar-fill teal" style="width:35%"><span class="bar-count">35</span></div>
|
||||
</div>
|
||||
<div class="bar-num">35</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<div class="bar-label">Product</div>
|
||||
<div class="bar-track">
|
||||
<div class="bar-fill amber" style="width:28%"><span class="bar-count">28</span></div>
|
||||
</div>
|
||||
<div class="bar-num">28</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<div class="bar-label">Finance</div>
|
||||
<div class="bar-track">
|
||||
<div class="bar-fill blue" style="width:18%"><span class="bar-count">18</span></div>
|
||||
</div>
|
||||
<div class="bar-num">18</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<div class="bar-label">HR</div>
|
||||
<div class="bar-track">
|
||||
<div class="bar-fill purple" style="width:12%"><span class="bar-count">12</span></div>
|
||||
</div>
|
||||
<div class="bar-num">12</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pending Leave Approvals -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">Pending Leave Approvals</span>
|
||||
<span class="card-action">View All (5)</span>
|
||||
</div>
|
||||
<div class="pending-item">
|
||||
<div class="avatar av-2">AK</div>
|
||||
<div class="pending-info">
|
||||
<div class="pending-name">Ananya Krishnan</div>
|
||||
<div class="pending-detail">Annual Leave · May 8–12 · 5 days · Engineering</div>
|
||||
</div>
|
||||
<div class="pending-actions">
|
||||
<button class="btn-xs-green">Approve</button>
|
||||
<button class="btn-xs-red">Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pending-item">
|
||||
<div class="avatar av-3">VS</div>
|
||||
<div class="pending-info">
|
||||
<div class="pending-name">Vikram Singh</div>
|
||||
<div class="pending-detail">Sick Leave · May 6 · 1 day · Sales</div>
|
||||
</div>
|
||||
<div class="pending-actions">
|
||||
<button class="btn-xs-green">Approve</button>
|
||||
<button class="btn-xs-red">Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pending-item">
|
||||
<div class="avatar av-5">RD</div>
|
||||
<div class="pending-info">
|
||||
<div class="pending-name">Rohan Das</div>
|
||||
<div class="pending-detail">Compensatory Off · May 9 · 1 day · Product</div>
|
||||
</div>
|
||||
<div class="pending-actions">
|
||||
<button class="btn-xs-green">Approve</button>
|
||||
<button class="btn-xs-red">Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Side cards -->
|
||||
<div class="side-cards">
|
||||
<!-- Upcoming Birthdays -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">Upcoming Birthdays</span>
|
||||
<span class="card-action">This Month</span>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<div class="avatar av-1">MN</div>
|
||||
<div>
|
||||
<div class="list-name">Meera Nair</div>
|
||||
<div class="list-sub">Engineering · May 7</div>
|
||||
</div>
|
||||
<span class="birthday-icon">🎂</span>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<div class="avatar av-3">KP</div>
|
||||
<div>
|
||||
<div class="list-name">Karan Patel</div>
|
||||
<div class="list-sub">Sales · May 11</div>
|
||||
</div>
|
||||
<span class="birthday-icon">🎂</span>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<div class="avatar av-4">SR</div>
|
||||
<div>
|
||||
<div class="list-name">Sanya Reddy</div>
|
||||
<div class="list-sub">Product · May 18</div>
|
||||
</div>
|
||||
<span class="birthday-icon">🎂</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Hires -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">Recent Hires</span>
|
||||
<span class="card-action">This Month</span>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<div class="avatar av-2">AR</div>
|
||||
<div>
|
||||
<div class="list-name">Arjun Rao</div>
|
||||
<div class="list-sub">Backend Engineer · May 1</div>
|
||||
</div>
|
||||
<div class="list-right">
|
||||
<span class="badge badge-green">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<div class="avatar av-5">PJ</div>
|
||||
<div>
|
||||
<div class="list-name">Pooja Joshi</div>
|
||||
<div class="list-sub">Sales Executive · May 2</div>
|
||||
</div>
|
||||
<div class="list-right">
|
||||
<span class="badge badge-blue">Probation</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<div class="avatar av-3">NB</div>
|
||||
<div>
|
||||
<div class="list-name">Nikhil Bhat</div>
|
||||
<div class="list-sub">DevOps Engineer · May 3</div>
|
||||
</div>
|
||||
<div class="list-right">
|
||||
<span class="badge badge-blue">Probation</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<div class="avatar av-4">DK</div>
|
||||
<div>
|
||||
<div class="list-name">Divya Kumar</div>
|
||||
<div class="list-sub">UX Designer · May 5</div>
|
||||
</div>
|
||||
<div class="list-right">
|
||||
<span class="badge badge-blue">Probation</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,383 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BetterHuman — People Directory</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; display: flex; min-height: 100vh; font-size: 14px; color: #0F172A; }
|
||||
|
||||
/* SIDEBAR (shared) */
|
||||
.sidebar { width: 240px; background: #0F172A; min-height: 100vh; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 10; overflow-y: auto; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.logo-icon svg { width: 20px; height: 20px; }
|
||||
.logo-name { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; color: #FFFFFF; }
|
||||
.logo-company { font-size: 11px; color: #475569; font-weight: 500; }
|
||||
.sidebar-search { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.sidebar-search input { width: 100%; padding: 7px 10px 7px 32px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: #94A3B8; font-size: 12px; font-family: 'Inter', sans-serif; outline: none; }
|
||||
.search-wrap { position: relative; }
|
||||
.search-wrap svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: #475569; }
|
||||
.sidebar-nav { padding: 8px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: #334155; padding: 16px 20px 6px; text-transform: uppercase; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; margin: 1px 8px; border-radius: 7px; color: #64748B; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; text-decoration: none; }
|
||||
.nav-item:hover { background: #1E293B; color: #CBD5E1; }
|
||||
.nav-item.active { background: #6366F1; color: #FFFFFF; }
|
||||
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #EF4444; color: white; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9999px; }
|
||||
.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; }
|
||||
.footer-name { font-size: 12px; font-weight: 600; color: #CBD5E1; }
|
||||
.footer-role { font-size: 11px; color: #475569; }
|
||||
|
||||
/* MAIN */
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; position: sticky; top: 0; z-index: 5; }
|
||||
.topbar-left { display: flex; flex-direction: column; }
|
||||
.page-title { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; color: #0F172A; }
|
||||
.page-breadcrumb { font-size: 12px; color: #94A3B8; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.topbar-search { position: relative; display: flex; align-items: center; }
|
||||
.topbar-search input { padding: 8px 12px 8px 36px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; color: #0F172A; background: #F8FAFC; width: 220px; outline: none; }
|
||||
.topbar-search svg { position: absolute; left: 10px; width: 16px; height: 16px; color: #94A3B8; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E2E8F0; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #FFFFFF; }
|
||||
.topbar-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: white; cursor: pointer; }
|
||||
.content { padding: 32px; flex: 1; }
|
||||
|
||||
/* PAGE SPECIFIC */
|
||||
.btn-primary { display: flex; align-items: center; gap: 8px; padding: 9px 18px; background: #6366F1; color: #FFFFFF; border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.btn-primary svg { width: 15px; height: 15px; }
|
||||
.btn-secondary { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #FFFFFF; color: #0F172A; border: 1.5px solid #E2E8F0; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; }
|
||||
|
||||
.filter-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
|
||||
.filter-input-wrap { position: relative; flex: 1; min-width: 200px; max-width: 320px; }
|
||||
.filter-input-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #94A3B8; }
|
||||
.filter-input { width: 100%; padding: 9px 12px 9px 34px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; color: #0F172A; background: #FFFFFF; outline: none; }
|
||||
.filter-select { padding: 9px 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; color: #64748B; background: #FFFFFF; outline: none; cursor: pointer; }
|
||||
|
||||
.stats-row { display: flex; gap: 16px; margin-bottom: 24px; }
|
||||
.stat-chip { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #FFFFFF; border: 1.5px solid #E2E8F0; border-radius: 8px; }
|
||||
.stat-dot { width: 8px; height: 8px; border-radius: 50%; }
|
||||
.stat-dot.green { background: #10B981; }
|
||||
.stat-dot.amber { background: #F59E0B; }
|
||||
.stat-dot.red { background: #EF4444; }
|
||||
.stat-label { font-size: 13px; color: #64748B; }
|
||||
.stat-val { font-size: 13px; font-weight: 700; color: #0F172A; }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #FFFFFF; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th { background: #F8FAFC; padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid #E2E8F0; white-space: nowrap; }
|
||||
tbody tr { border-bottom: 1px solid #F1F5F9; transition: background 0.12s; }
|
||||
tbody tr:last-child { border-bottom: none; }
|
||||
tbody tr:hover { background: #F8FAFC; }
|
||||
tbody td { padding: 14px 16px; font-size: 13px; color: #374151; vertical-align: middle; }
|
||||
.td-right { text-align: right; }
|
||||
|
||||
.emp-cell { display: flex; align-items: center; gap: 12px; }
|
||||
.emp-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; }
|
||||
.av-1 { background: linear-gradient(135deg, #6366F1, #8B5CF6); }
|
||||
.av-2 { background: linear-gradient(135deg, #10B981, #059669); }
|
||||
.av-3 { background: linear-gradient(135deg, #F59E0B, #D97706); }
|
||||
.av-4 { background: linear-gradient(135deg, #EF4444, #DC2626); }
|
||||
.av-5 { background: linear-gradient(135deg, #3B82F6, #2563EB); }
|
||||
.av-6 { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }
|
||||
.av-7 { background: linear-gradient(135deg, #14B8A6, #0D9488); }
|
||||
.av-8 { background: linear-gradient(135deg, #F97316, #EA580C); }
|
||||
.av-9 { background: linear-gradient(135deg, #EC4899, #DB2777); }
|
||||
.av-10 { background: linear-gradient(135deg, #06B6D4, #0891B2); }
|
||||
.emp-name { font-size: 13px; font-weight: 600; color: #0F172A; }
|
||||
.emp-code { font-size: 11px; color: #94A3B8; }
|
||||
|
||||
.badge { padding: 2px 10px; border-radius: 9999px; font-size: 11px; font-weight: 500; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.badge-blue { background: #EFF6FF; color: #2563EB; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
|
||||
.action-btn { width: 28px; height: 28px; border: 1px solid #E2E8F0; border-radius: 6px; background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 4px; }
|
||||
.action-btn svg { width: 13px; height: 13px; color: #64748B; }
|
||||
.action-btn:hover { background: #F8FAFC; }
|
||||
|
||||
/* PAGINATION */
|
||||
.pagination { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-top: 1px solid #F1F5F9; }
|
||||
.pagination-info { font-size: 12px; color: #64748B; }
|
||||
.pagination-btns { display: flex; gap: 6px; align-items: center; }
|
||||
.page-btn { width: 32px; height: 32px; border: 1.5px solid #E2E8F0; border-radius: 6px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: #64748B; cursor: pointer; }
|
||||
.page-btn.active { background: #6366F1; border-color: #6366F1; color: #FFFFFF; }
|
||||
.page-btn.arrow svg { width: 14px; height: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- SIDEBAR -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="white" 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><div class="logo-name">BetterHuman</div><div class="logo-company">TechCorp India Pvt. Ltd.</div></div>
|
||||
</div>
|
||||
<div class="sidebar-search"><div class="search-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input type="text" placeholder="Search people, docs..."></div></div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main</div>
|
||||
<a class="nav-item" href="02-dashboard.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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="03-people.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>People</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>Org Chart</a>
|
||||
<div class="nav-section-label">Workforce</div>
|
||||
<a class="nav-item" href="07-recruitment.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>Recruitment</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>Onboarding</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="05-leave.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="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<span class="nav-badge">5</span></a>
|
||||
<a class="nav-item" href="06-payroll.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
<div class="nav-section-label">Talent</div>
|
||||
<a class="nav-item" href="08-performance.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Performance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Learning</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>Benefits</a>
|
||||
<div class="nav-section-label">Culture</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Engagement</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>Recognition</a>
|
||||
<div class="nav-section-label">Insights</div>
|
||||
<a class="nav-item" href="09-analytics.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Analytics</a>
|
||||
<div class="nav-section-label">Admin</div>
|
||||
<a class="nav-item" href="10-settings.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer"><div class="avatar-sm">PS</div><div><div class="footer-name">Priya Sharma</div><div class="footer-role">HR Admin</div></div></div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<span class="page-title">People Directory</span>
|
||||
<span class="page-breadcrumb">Manage your workforce</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<div class="topbar-search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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><div class="notif-dot"></div></div>
|
||||
<div class="topbar-avatar">PS</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<!-- Filters -->
|
||||
<div class="filter-row">
|
||||
<div class="filter-input-wrap">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
<input type="text" class="filter-input" placeholder="Search employees...">
|
||||
</div>
|
||||
<select class="filter-select">
|
||||
<option>All Departments</option>
|
||||
<option>Engineering</option><option>Sales</option><option>Product</option>
|
||||
<option>HR</option><option>Finance</option><option>Operations</option>
|
||||
</select>
|
||||
<select class="filter-select">
|
||||
<option>All Status</option>
|
||||
<option>Active</option><option>On Leave</option><option>Probation</option><option>Terminated</option>
|
||||
</select>
|
||||
<select class="filter-select">
|
||||
<option>All Locations</option>
|
||||
<option>Bengaluru</option><option>Mumbai</option><option>Delhi NCR</option><option>Hyderabad</option>
|
||||
</select>
|
||||
<div style="margin-left:auto;display:flex;gap:10px;">
|
||||
<button class="btn-secondary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;color:#64748B"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Export
|
||||
</button>
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Add Employee
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-chip"><div class="stat-dot green"></div><span class="stat-label">Active</span><span class="stat-val">247</span></div>
|
||||
<div class="stat-chip"><div class="stat-dot amber"></div><span class="stat-label">On Leave</span><span class="stat-val">8</span></div>
|
||||
<div class="stat-chip"><div class="stat-dot red"></div><span class="stat-label">Terminated this month</span><span class="stat-val">3</span></div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="table-card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" style="accent-color:#6366F1"></th>
|
||||
<th>Employee</th>
|
||||
<th>Department</th>
|
||||
<th>Position</th>
|
||||
<th>Location</th>
|
||||
<th>Status</th>
|
||||
<th>Manager</th>
|
||||
<th>Start Date</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><input type="checkbox" style="accent-color:#6366F1"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-1">PS</div><div><div class="emp-name">Priya Sharma</div><div class="emp-code">EMP-0001</div></div></div></td>
|
||||
<td>Engineering</td>
|
||||
<td>Sr. Software Engineer</td>
|
||||
<td>Bengaluru</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>Rahul Mehta</td>
|
||||
<td>Jan 15, 2022</td>
|
||||
<td>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></button>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" style="accent-color:#6366F1"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-2">AK</div><div><div class="emp-name">Ananya Krishnan</div><div class="emp-code">EMP-0024</div></div></div></td>
|
||||
<td>Engineering</td>
|
||||
<td>Frontend Engineer</td>
|
||||
<td>Bengaluru</td>
|
||||
<td><span class="badge badge-amber">On Leave</span></td>
|
||||
<td>Priya Sharma</td>
|
||||
<td>Mar 10, 2023</td>
|
||||
<td>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></button>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" style="accent-color:#6366F1"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-3">VS</div><div><div class="emp-name">Vikram Singh</div><div class="emp-code">EMP-0037</div></div></div></td>
|
||||
<td>Sales</td>
|
||||
<td>Sales Manager</td>
|
||||
<td>Mumbai</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>Neha Gupta</td>
|
||||
<td>Jul 4, 2021</td>
|
||||
<td>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></button>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" style="accent-color:#6366F1"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-4">MN</div><div><div class="emp-name">Meera Nair</div><div class="emp-code">EMP-0052</div></div></div></td>
|
||||
<td>Product</td>
|
||||
<td>Product Manager</td>
|
||||
<td>Bengaluru</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>Arjun Rao</td>
|
||||
<td>Nov 22, 2020</td>
|
||||
<td>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></button>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" style="accent-color:#6366F1"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-5">RD</div><div><div class="emp-name">Rohan Das</div><div class="emp-code">EMP-0068</div></div></div></td>
|
||||
<td>Engineering</td>
|
||||
<td>DevOps Engineer</td>
|
||||
<td>Hyderabad</td>
|
||||
<td><span class="badge badge-blue">Probation</span></td>
|
||||
<td>Priya Sharma</td>
|
||||
<td>Apr 1, 2026</td>
|
||||
<td>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></button>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" style="accent-color:#6366F1"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-6">KP</div><div><div class="emp-name">Karan Patel</div><div class="emp-code">EMP-0079</div></div></div></td>
|
||||
<td>Sales</td>
|
||||
<td>Account Executive</td>
|
||||
<td>Delhi NCR</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>Vikram Singh</td>
|
||||
<td>Sep 16, 2022</td>
|
||||
<td>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></button>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" style="accent-color:#6366F1"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-7">SR</div><div><div class="emp-name">Sanya Reddy</div><div class="emp-code">EMP-0091</div></div></div></td>
|
||||
<td>Product</td>
|
||||
<td>UX Designer</td>
|
||||
<td>Bengaluru</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>Meera Nair</td>
|
||||
<td>Jun 20, 2023</td>
|
||||
<td>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></button>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" style="accent-color:#6366F1"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-8">AR</div><div><div class="emp-name">Arjun Rao</div><div class="emp-code">EMP-0102</div></div></div></td>
|
||||
<td>Engineering</td>
|
||||
<td>Backend Engineer</td>
|
||||
<td>Bengaluru</td>
|
||||
<td><span class="badge badge-blue">Probation</span></td>
|
||||
<td>Priya Sharma</td>
|
||||
<td>May 1, 2026</td>
|
||||
<td>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></button>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" style="accent-color:#6366F1"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-9">PJ</div><div><div class="emp-name">Pooja Joshi</div><div class="emp-code">EMP-0115</div></div></div></td>
|
||||
<td>Finance</td>
|
||||
<td>Financial Analyst</td>
|
||||
<td>Mumbai</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>Deepak Verma</td>
|
||||
<td>Feb 14, 2024</td>
|
||||
<td>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></button>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" style="accent-color:#6366F1"></td>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-10">NB</div><div><div class="emp-name">Nikhil Bhat</div><div class="emp-code">EMP-0128</div></div></div></td>
|
||||
<td>Operations</td>
|
||||
<td>Operations Lead</td>
|
||||
<td>Hyderabad</td>
|
||||
<td><span class="badge badge-amber">On Leave</span></td>
|
||||
<td>Suresh Pillai</td>
|
||||
<td>Aug 8, 2019</td>
|
||||
<td>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></button>
|
||||
<button class="action-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<div class="pagination-info">Showing 1–10 of 247 employees</div>
|
||||
<div class="pagination-btns">
|
||||
<div class="page-btn arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="page-btn">...</div>
|
||||
<div class="page-btn">25</div>
|
||||
<div class="page-btn arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,431 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BetterHuman — Employee Profile</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; display: flex; min-height: 100vh; font-size: 14px; color: #0F172A; }
|
||||
|
||||
.sidebar { width: 240px; background: #0F172A; min-height: 100vh; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 10; overflow-y: auto; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.logo-icon svg { width: 20px; height: 20px; }
|
||||
.logo-name { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; color: #FFFFFF; }
|
||||
.logo-company { font-size: 11px; color: #475569; font-weight: 500; }
|
||||
.sidebar-search { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.sidebar-search input { width: 100%; padding: 7px 10px 7px 32px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: #94A3B8; font-size: 12px; font-family: 'Inter', sans-serif; outline: none; }
|
||||
.search-wrap { position: relative; }
|
||||
.search-wrap svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: #475569; }
|
||||
.sidebar-nav { padding: 8px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: #334155; padding: 16px 20px 6px; text-transform: uppercase; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; margin: 1px 8px; border-radius: 7px; color: #64748B; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; text-decoration: none; }
|
||||
.nav-item:hover { background: #1E293B; color: #CBD5E1; }
|
||||
.nav-item.active { background: #6366F1; color: #FFFFFF; }
|
||||
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #EF4444; color: white; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9999px; }
|
||||
.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; }
|
||||
.footer-name { font-size: 12px; font-weight: 600; color: #CBD5E1; }
|
||||
.footer-role { font-size: 11px; color: #475569; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; position: sticky; top: 0; z-index: 5; }
|
||||
.topbar-left { display: flex; align-items: center; gap: 8px; }
|
||||
.breadcrumb { font-size: 13px; color: #94A3B8; }
|
||||
.breadcrumb a { color: #6366F1; text-decoration: none; }
|
||||
.breadcrumb-sep { color: #CBD5E1; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E2E8F0; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #FFFFFF; }
|
||||
.topbar-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: white; }
|
||||
.content { padding: 32px; flex: 1; }
|
||||
|
||||
/* PROFILE HEADER */
|
||||
.profile-header {
|
||||
background: #FFFFFF; border-radius: 12px; padding: 28px 32px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 24px;
|
||||
display: flex; align-items: center; gap: 24px;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.profile-header::before {
|
||||
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
|
||||
background: linear-gradient(90deg, #6366F1, #8B5CF6, #EC4899);
|
||||
}
|
||||
.profile-avatar-lg {
|
||||
width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0;
|
||||
background: linear-gradient(135deg, #6366F1, #8B5CF6);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 28px; font-weight: 700; color: white;
|
||||
border: 3px solid #EEF2FF;
|
||||
}
|
||||
.profile-info { flex: 1; }
|
||||
.profile-name { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.profile-title { font-size: 14px; color: #64748B; margin-bottom: 10px; }
|
||||
.profile-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
|
||||
.meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #64748B; }
|
||||
.meta-item svg { width: 14px; height: 14px; color: #94A3B8; }
|
||||
.badge { padding: 2px 10px; border-radius: 9999px; font-size: 11px; font-weight: 500; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.badge-blue { background: #EFF6FF; color: #2563EB; }
|
||||
.profile-actions { display: flex; gap: 10px; flex-shrink: 0; }
|
||||
.btn-primary { display: flex; align-items: center; gap: 8px; padding: 9px 18px; background: #6366F1; color: #FFFFFF; border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.btn-secondary { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #FFFFFF; color: #0F172A; border: 1.5px solid #E2E8F0; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; }
|
||||
.btn-danger { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #FEF2F2; color: #DC2626; border: 1.5px solid #FECACA; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; }
|
||||
.btn-secondary svg, .btn-primary svg, .btn-danger svg { width: 14px; height: 14px; }
|
||||
|
||||
/* TABS */
|
||||
.tabs { display: flex; gap: 0; background: #FFFFFF; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 24px; overflow: hidden; border: 1px solid #E2E8F0; }
|
||||
.tab { padding: 12px 20px; font-size: 13px; font-weight: 500; color: #64748B; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: all 0.15s; }
|
||||
.tab.active { color: #6366F1; border-bottom-color: #6366F1; background: #EEF2FF; }
|
||||
.tab:hover:not(.active) { background: #F8FAFC; color: #374151; }
|
||||
|
||||
/* CONTENT GRID */
|
||||
.profile-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
|
||||
.col-left { display: flex; flex-direction: column; gap: 16px; }
|
||||
.col-right { display: flex; flex-direction: column; gap: 16px; }
|
||||
|
||||
.card { background: #FFFFFF; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
||||
.card-title { font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700; color: #0F172A; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.card-edit { font-size: 12px; color: #6366F1; cursor: pointer; }
|
||||
|
||||
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
.info-item { display: flex; flex-direction: column; gap: 3px; }
|
||||
.info-label { font-size: 11px; font-weight: 600; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.info-value { font-size: 13px; color: #0F172A; font-weight: 500; }
|
||||
|
||||
/* LEAVE BALANCE */
|
||||
.leave-bars { display: flex; flex-direction: column; gap: 12px; }
|
||||
.leave-row { display: flex; flex-direction: column; gap: 5px; }
|
||||
.leave-meta { display: flex; justify-content: space-between; align-items: center; }
|
||||
.leave-type { font-size: 12px; font-weight: 600; color: #374151; }
|
||||
.leave-count { font-size: 12px; color: #64748B; }
|
||||
.leave-used { font-size: 11px; color: #94A3B8; }
|
||||
.leave-track { height: 6px; background: #F1F5F9; border-radius: 9999px; overflow: hidden; }
|
||||
.leave-fill { height: 100%; border-radius: 9999px; }
|
||||
.fill-indigo { background: linear-gradient(90deg, #6366F1, #818CF8); }
|
||||
.fill-green { background: linear-gradient(90deg, #10B981, #34D399); }
|
||||
.fill-amber { background: linear-gradient(90deg, #F59E0B, #FCD34D); }
|
||||
.fill-blue { background: linear-gradient(90deg, #3B82F6, #60A5FA); }
|
||||
|
||||
/* ACTIVITY */
|
||||
.activity-list { display: flex; flex-direction: column; gap: 0; }
|
||||
.activity-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F1F5F9; }
|
||||
.activity-item:last-child { border-bottom: none; padding-bottom: 0; }
|
||||
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: #6366F1; margin-top: 5px; flex-shrink: 0; }
|
||||
.activity-text { font-size: 12px; color: #374151; line-height: 1.5; }
|
||||
.activity-time { font-size: 11px; color: #94A3B8; margin-top: 2px; }
|
||||
|
||||
/* DOCUMENTS */
|
||||
.doc-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.doc-item { display: flex; align-items: center; gap: 10px; padding: 10px; background: #F8FAFC; border-radius: 8px; }
|
||||
.doc-icon { width: 32px; height: 32px; background: #EEF2FF; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.doc-icon svg { width: 16px; height: 16px; color: #6366F1; }
|
||||
.doc-name { font-size: 12px; font-weight: 600; color: #0F172A; }
|
||||
.doc-exp { font-size: 11px; color: #94A3B8; }
|
||||
.doc-download { margin-left: auto; color: #6366F1; cursor: pointer; }
|
||||
.doc-download svg { width: 14px; height: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="white" 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><div class="logo-name">BetterHuman</div><div class="logo-company">TechCorp India Pvt. Ltd.</div></div>
|
||||
</div>
|
||||
<div class="sidebar-search"><div class="search-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input type="text" placeholder="Search people, docs..."></div></div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main</div>
|
||||
<a class="nav-item" href="02-dashboard.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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="03-people.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>People</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>Org Chart</a>
|
||||
<div class="nav-section-label">Workforce</div>
|
||||
<a class="nav-item" href="07-recruitment.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>Recruitment</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>Onboarding</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="05-leave.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="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<span class="nav-badge">5</span></a>
|
||||
<a class="nav-item" href="06-payroll.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
<div class="nav-section-label">Talent</div>
|
||||
<a class="nav-item" href="08-performance.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Performance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Learning</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>Benefits</a>
|
||||
<div class="nav-section-label">Culture</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Engagement</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>Recognition</a>
|
||||
<div class="nav-section-label">Insights</div>
|
||||
<a class="nav-item" href="09-analytics.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Analytics</a>
|
||||
<div class="nav-section-label">Admin</div>
|
||||
<a class="nav-item" href="10-settings.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer"><div class="avatar-sm">PS</div><div><div class="footer-name">Priya Sharma</div><div class="footer-role">HR Admin</div></div></div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<div class="breadcrumb">
|
||||
<a href="03-people.html">People</a>
|
||||
<span class="breadcrumb-sep"> / </span>
|
||||
<span style="color:#0F172A;font-weight:500;">Priya Sharma</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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><div class="notif-dot"></div></div>
|
||||
<div class="topbar-avatar">PS</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<!-- Profile Header -->
|
||||
<div class="profile-header">
|
||||
<div class="profile-avatar-lg">PS</div>
|
||||
<div class="profile-info">
|
||||
<div class="profile-name">Priya Sharma</div>
|
||||
<div class="profile-title">Senior Software Engineer · Engineering</div>
|
||||
<div class="profile-meta">
|
||||
<span class="badge badge-green">Active</span>
|
||||
<div class="meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
Bengaluru
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>
|
||||
EMP-0001 · Full-time
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="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>
|
||||
Joined Jan 15, 2022
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-actions">
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
||||
Edit Profile
|
||||
</button>
|
||||
<button class="btn-secondary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
|
||||
Transfer
|
||||
</button>
|
||||
<button class="btn-danger">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
|
||||
Terminate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="tabs">
|
||||
<div class="tab active">Overview</div>
|
||||
<div class="tab">Documents</div>
|
||||
<div class="tab">Leave</div>
|
||||
<div class="tab">Payroll</div>
|
||||
<div class="tab">Performance</div>
|
||||
<div class="tab">Assets</div>
|
||||
</div>
|
||||
|
||||
<!-- Profile Grid -->
|
||||
<div class="profile-grid">
|
||||
<!-- Left Column -->
|
||||
<div class="col-left">
|
||||
<!-- Personal Info -->
|
||||
<div class="card">
|
||||
<div class="card-title">Personal Information <span class="card-edit">Edit</span></div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-label">Date of Birth</span>
|
||||
<span class="info-value">March 12, 1994</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Gender</span>
|
||||
<span class="info-value">Female</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Nationality</span>
|
||||
<span class="info-value">Indian</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Blood Group</span>
|
||||
<span class="info-value">O+</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Phone</span>
|
||||
<span class="info-value">+91 98765 43210</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Personal Email</span>
|
||||
<span class="info-value">priya.s@gmail.com</span>
|
||||
</div>
|
||||
<div class="info-item" style="grid-column:1/-1">
|
||||
<span class="info-label">Emergency Contact</span>
|
||||
<span class="info-value">Rajesh Sharma (Father) · +91 98123 45678</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Work Info -->
|
||||
<div class="card">
|
||||
<div class="card-title">Work Information <span class="card-edit">Edit</span></div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-label">Employee ID</span>
|
||||
<span class="info-value">EMP-0001</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Employment Type</span>
|
||||
<span class="info-value">Full-time Permanent</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Work Email</span>
|
||||
<span class="info-value">priya@techcorp.in</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Department</span>
|
||||
<span class="info-value">Engineering</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Manager</span>
|
||||
<span class="info-value" style="color:#6366F1">Rahul Mehta</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Location</span>
|
||||
<span class="info-value">Bengaluru HQ</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Start Date</span>
|
||||
<span class="info-value">January 15, 2022</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Probation End</span>
|
||||
<span class="info-value">April 15, 2022 (Cleared)</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">PAN Number</span>
|
||||
<span class="info-value">ABCDE1234F</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">PF Account No.</span>
|
||||
<span class="info-value">KA/BLR/0123456/001</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column -->
|
||||
<div class="col-right">
|
||||
<!-- Leave Balance -->
|
||||
<div class="card">
|
||||
<div class="card-title">Leave Balance</div>
|
||||
<div class="leave-bars">
|
||||
<div class="leave-row">
|
||||
<div class="leave-meta">
|
||||
<span class="leave-type">Annual Leave</span>
|
||||
<span class="leave-count">18 / 24 days</span>
|
||||
</div>
|
||||
<div class="leave-track"><div class="leave-fill fill-indigo" style="width:75%"></div></div>
|
||||
<div class="leave-used">6 days used</div>
|
||||
</div>
|
||||
<div class="leave-row">
|
||||
<div class="leave-meta">
|
||||
<span class="leave-type">Sick Leave</span>
|
||||
<span class="leave-count">6 / 12 days</span>
|
||||
</div>
|
||||
<div class="leave-track"><div class="leave-fill fill-green" style="width:50%"></div></div>
|
||||
<div class="leave-used">6 days used</div>
|
||||
</div>
|
||||
<div class="leave-row">
|
||||
<div class="leave-meta">
|
||||
<span class="leave-type">Compensatory Off</span>
|
||||
<span class="leave-count">2 / 5 days</span>
|
||||
</div>
|
||||
<div class="leave-track"><div class="leave-fill fill-amber" style="width:40%"></div></div>
|
||||
<div class="leave-used">3 days used</div>
|
||||
</div>
|
||||
<div class="leave-row">
|
||||
<div class="leave-meta">
|
||||
<span class="leave-type">Emergency Leave</span>
|
||||
<span class="leave-count">3 / 3 days</span>
|
||||
</div>
|
||||
<div class="leave-track"><div class="leave-fill fill-blue" style="width:100%"></div></div>
|
||||
<div class="leave-used">0 days used</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div class="card">
|
||||
<div class="card-title">Recent Activity</div>
|
||||
<div class="activity-list">
|
||||
<div class="activity-item">
|
||||
<div class="activity-dot"></div>
|
||||
<div>
|
||||
<div class="activity-text">Leave request approved for Apr 18–19 (2 days Sick Leave)</div>
|
||||
<div class="activity-time">2 days ago</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-item">
|
||||
<div class="activity-dot" style="background:#10B981"></div>
|
||||
<div>
|
||||
<div class="activity-text">Self-assessment submitted for Q1 2026 Performance Review</div>
|
||||
<div class="activity-time">5 days ago</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-item">
|
||||
<div class="activity-dot" style="background:#F59E0B"></div>
|
||||
<div>
|
||||
<div class="activity-text">Payslip downloaded for March 2026</div>
|
||||
<div class="activity-time">Apr 1, 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-item">
|
||||
<div class="activity-dot" style="background:#8B5CF6"></div>
|
||||
<div>
|
||||
<div class="activity-text">Completed "Advanced React Patterns" learning module</div>
|
||||
<div class="activity-time">Mar 28, 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Documents -->
|
||||
<div class="card">
|
||||
<div class="card-title">Documents <span class="card-edit">Upload</span></div>
|
||||
<div class="doc-list">
|
||||
<div class="doc-item">
|
||||
<div class="doc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
<div>
|
||||
<div class="doc-name">Offer Letter</div>
|
||||
<div class="doc-exp">Signed Jan 10, 2022</div>
|
||||
</div>
|
||||
<div class="doc-download"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></div>
|
||||
</div>
|
||||
<div class="doc-item">
|
||||
<div class="doc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
<div>
|
||||
<div class="doc-name">Aadhar Card</div>
|
||||
<div class="doc-exp">No expiry</div>
|
||||
</div>
|
||||
<div class="doc-download"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></div>
|
||||
</div>
|
||||
<div class="doc-item">
|
||||
<div class="doc-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
<div>
|
||||
<div class="doc-name">Passport</div>
|
||||
<div class="doc-exp">Expires Dec 18, 2030</div>
|
||||
</div>
|
||||
<div class="doc-download"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,336 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BetterHuman — Leave Management</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; display: flex; min-height: 100vh; font-size: 14px; color: #0F172A; }
|
||||
|
||||
.sidebar { width: 240px; background: #0F172A; min-height: 100vh; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 10; overflow-y: auto; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.logo-icon svg { width: 20px; height: 20px; }
|
||||
.logo-name { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; color: #FFFFFF; }
|
||||
.logo-company { font-size: 11px; color: #475569; font-weight: 500; }
|
||||
.sidebar-search { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.sidebar-search input { width: 100%; padding: 7px 10px 7px 32px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: #94A3B8; font-size: 12px; font-family: 'Inter', sans-serif; outline: none; }
|
||||
.search-wrap { position: relative; }
|
||||
.search-wrap svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: #475569; }
|
||||
.sidebar-nav { padding: 8px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: #334155; padding: 16px 20px 6px; text-transform: uppercase; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; margin: 1px 8px; border-radius: 7px; color: #64748B; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; text-decoration: none; }
|
||||
.nav-item:hover { background: #1E293B; color: #CBD5E1; }
|
||||
.nav-item.active { background: #6366F1; color: #FFFFFF; }
|
||||
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #EF4444; color: white; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9999px; }
|
||||
.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; }
|
||||
.footer-name { font-size: 12px; font-weight: 600; color: #CBD5E1; }
|
||||
.footer-role { font-size: 11px; color: #475569; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; position: sticky; top: 0; z-index: 5; }
|
||||
.topbar-left { display: flex; flex-direction: column; }
|
||||
.page-title { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; color: #0F172A; }
|
||||
.page-breadcrumb { font-size: 12px; color: #94A3B8; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E2E8F0; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #FFFFFF; }
|
||||
.topbar-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: white; }
|
||||
.content { padding: 32px; flex: 1; }
|
||||
|
||||
.btn-primary { display: flex; align-items: center; gap: 8px; padding: 9px 18px; background: #6366F1; color: #FFFFFF; border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.btn-primary svg { width: 15px; height: 15px; }
|
||||
|
||||
/* LEAVE BALANCE CARDS */
|
||||
.balance-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
|
||||
.section-title { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; color: #0F172A; }
|
||||
.balance-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
|
||||
.balance-card {
|
||||
background: #FFFFFF; border-radius: 12px; padding: 18px 20px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08); border-top: 3px solid transparent;
|
||||
display: flex; flex-direction: column; gap: 10px;
|
||||
}
|
||||
.bc-indigo { border-top-color: #6366F1; }
|
||||
.bc-green { border-top-color: #10B981; }
|
||||
.bc-amber { border-top-color: #F59E0B; }
|
||||
.bc-red { border-top-color: #EF4444; }
|
||||
.bal-type { font-size: 11px; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
.bal-days { font-family: 'Sora', sans-serif; font-size: 26px; font-weight: 700; color: #0F172A; }
|
||||
.bal-days span { font-family: 'Inter', sans-serif; font-size: 12px; color: #94A3B8; font-weight: 400; }
|
||||
.bal-bar { height: 4px; background: #F1F5F9; border-radius: 9999px; overflow: hidden; }
|
||||
.bal-fill { height: 100%; border-radius: 9999px; }
|
||||
.fill-indigo { background: #6366F1; }
|
||||
.fill-green { background: #10B981; }
|
||||
.fill-amber { background: #F59E0B; }
|
||||
.fill-red { background: #EF4444; }
|
||||
.bal-sub { font-size: 11px; color: #94A3B8; }
|
||||
|
||||
/* MAIN GRID */
|
||||
.leave-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
|
||||
|
||||
/* CALENDAR */
|
||||
.card { background: #FFFFFF; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
||||
.card-title { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; color: #0F172A; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.cal-nav { display: flex; align-items: center; gap: 12px; }
|
||||
.cal-nav-btn { width: 28px; height: 28px; border: 1.5px solid #E2E8F0; border-radius: 6px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
||||
.cal-nav-btn svg { width: 14px; height: 14px; color: #64748B; }
|
||||
.cal-month { font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700; color: #0F172A; }
|
||||
|
||||
.calendar { width: 100%; }
|
||||
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
|
||||
.cal-weekday { text-align: center; font-size: 11px; font-weight: 600; color: #94A3B8; padding: 6px 0; text-transform: uppercase; }
|
||||
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
|
||||
.cal-day {
|
||||
height: 48px; border-radius: 8px; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center; cursor: pointer;
|
||||
font-size: 13px; color: #374151; position: relative;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.cal-day:hover { background: #F8FAFC; }
|
||||
.cal-day.other-month { color: #CBD5E1; }
|
||||
.cal-day.today { background: #EEF2FF; color: #6366F1; font-weight: 700; }
|
||||
.cal-day.today::after { content: ''; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #6366F1; }
|
||||
.cal-day.leave-approved { background: #ECFDF5; color: #059669; font-weight: 600; }
|
||||
.cal-day.leave-pending { background: #FFFBEB; color: #D97706; font-weight: 600; }
|
||||
.cal-day.holiday { background: #FEF2F2; color: #DC2626; font-weight: 600; }
|
||||
|
||||
/* LEGEND */
|
||||
.cal-legend { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
|
||||
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #64748B; }
|
||||
.legend-dot { width: 10px; height: 10px; border-radius: 3px; }
|
||||
|
||||
/* TEAM ON LEAVE */
|
||||
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 0; }
|
||||
.team-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #F8FAFC; border-radius: 8px; border: 1px solid #E2E8F0; }
|
||||
.t-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; flex-shrink: 0; }
|
||||
.av-1 { background: linear-gradient(135deg, #6366F1, #8B5CF6); }
|
||||
.av-2 { background: linear-gradient(135deg, #10B981, #059669); }
|
||||
.av-3 { background: linear-gradient(135deg, #F59E0B, #D97706); }
|
||||
.av-4 { background: linear-gradient(135deg, #3B82F6, #2563EB); }
|
||||
.t-name { font-size: 12px; font-weight: 600; color: #0F172A; }
|
||||
.t-dates { font-size: 11px; color: #94A3B8; }
|
||||
|
||||
/* LEAVE HISTORY */
|
||||
.badge { padding: 2px 10px; border-radius: 9999px; font-size: 11px; font-weight: 500; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-blue { background: #EFF6FF; color: #2563EB; }
|
||||
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th { background: #F8FAFC; padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #E2E8F0; }
|
||||
tbody tr { border-bottom: 1px solid #F1F5F9; }
|
||||
tbody tr:last-child { border-bottom: none; }
|
||||
tbody td { padding: 11px 12px; font-size: 12px; color: #374151; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="white" 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><div class="logo-name">BetterHuman</div><div class="logo-company">TechCorp India Pvt. Ltd.</div></div>
|
||||
</div>
|
||||
<div class="sidebar-search"><div class="search-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input type="text" placeholder="Search people, docs..."></div></div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main</div>
|
||||
<a class="nav-item" href="02-dashboard.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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-people.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>People</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>Org Chart</a>
|
||||
<div class="nav-section-label">Workforce</div>
|
||||
<a class="nav-item" href="07-recruitment.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>Recruitment</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>Onboarding</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
|
||||
<a class="nav-item active" href="05-leave.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="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<span class="nav-badge">5</span></a>
|
||||
<a class="nav-item" href="06-payroll.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
<div class="nav-section-label">Talent</div>
|
||||
<a class="nav-item" href="08-performance.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Performance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Learning</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>Benefits</a>
|
||||
<div class="nav-section-label">Culture</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Engagement</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>Recognition</a>
|
||||
<div class="nav-section-label">Insights</div>
|
||||
<a class="nav-item" href="09-analytics.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Analytics</a>
|
||||
<div class="nav-section-label">Admin</div>
|
||||
<a class="nav-item" href="10-settings.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer"><div class="avatar-sm">PS</div><div><div class="footer-name">Priya Sharma</div><div class="footer-role">HR Admin</div></div></div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<span class="page-title">Leave Management</span>
|
||||
<span class="page-breadcrumb">Your leave balance and requests</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Request Leave
|
||||
</button>
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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><div class="notif-dot"></div></div>
|
||||
<div class="topbar-avatar">PS</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<!-- Leave Balance -->
|
||||
<div class="balance-header">
|
||||
<span class="section-title">My Leave Balance · 2026</span>
|
||||
</div>
|
||||
<div class="balance-cards">
|
||||
<div class="balance-card bc-indigo">
|
||||
<div class="bal-type">Annual Leave</div>
|
||||
<div class="bal-days">18 <span>/ 24 days</span></div>
|
||||
<div class="bal-bar"><div class="bal-fill fill-indigo" style="width:75%"></div></div>
|
||||
<div class="bal-sub">6 days used · 0 pending</div>
|
||||
</div>
|
||||
<div class="balance-card bc-green">
|
||||
<div class="bal-type">Sick Leave</div>
|
||||
<div class="bal-days">6 <span>/ 12 days</span></div>
|
||||
<div class="bal-bar"><div class="bal-fill fill-green" style="width:50%"></div></div>
|
||||
<div class="bal-sub">6 days used · 0 pending</div>
|
||||
</div>
|
||||
<div class="balance-card bc-amber">
|
||||
<div class="bal-type">Compensatory Off</div>
|
||||
<div class="bal-days">2 <span>/ 5 days</span></div>
|
||||
<div class="bal-bar"><div class="bal-fill fill-amber" style="width:40%"></div></div>
|
||||
<div class="bal-sub">3 days used · 1 pending</div>
|
||||
</div>
|
||||
<div class="balance-card bc-red">
|
||||
<div class="bal-type">Emergency Leave</div>
|
||||
<div class="bal-days">3 <span>/ 3 days</span></div>
|
||||
<div class="bal-bar"><div class="bal-fill fill-red" style="width:100%"></div></div>
|
||||
<div class="bal-sub">0 days used · 0 pending</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Grid -->
|
||||
<div class="leave-grid">
|
||||
<!-- Left: Calendar + Team -->
|
||||
<div style="display:flex;flex-direction:column;gap:16px;">
|
||||
<!-- Calendar -->
|
||||
<div class="card">
|
||||
<div class="card-title">
|
||||
<span>May 2026</span>
|
||||
<div class="cal-nav">
|
||||
<div class="cal-nav-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg></div>
|
||||
<span class="cal-month">May 2026</span>
|
||||
<div class="cal-nav-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar">
|
||||
<div class="cal-weekdays">
|
||||
<div class="cal-weekday">Sun</div><div class="cal-weekday">Mon</div><div class="cal-weekday">Tue</div>
|
||||
<div class="cal-weekday">Wed</div><div class="cal-weekday">Thu</div><div class="cal-weekday">Fri</div><div class="cal-weekday">Sat</div>
|
||||
</div>
|
||||
<div class="cal-days">
|
||||
<!-- Row 1 -->
|
||||
<div class="cal-day other-month">27</div><div class="cal-day other-month">28</div><div class="cal-day other-month">29</div>
|
||||
<div class="cal-day other-month">30</div><div class="cal-day">1</div><div class="cal-day">2</div><div class="cal-day">3</div>
|
||||
<!-- Row 2 -->
|
||||
<div class="cal-day">4</div><div class="cal-day today">5</div><div class="cal-day">6</div>
|
||||
<div class="cal-day">7</div><div class="cal-day leave-approved">8</div><div class="cal-day leave-approved">9</div><div class="cal-day">10</div>
|
||||
<!-- Row 3 -->
|
||||
<div class="cal-day">11</div><div class="cal-day leave-approved">12</div><div class="cal-day leave-approved">13</div>
|
||||
<div class="cal-day leave-approved">14</div><div class="cal-day leave-approved">15</div><div class="cal-day leave-approved">16</div><div class="cal-day">17</div>
|
||||
<!-- Row 4 -->
|
||||
<div class="cal-day">18</div><div class="cal-day">19</div><div class="cal-day leave-pending">20</div>
|
||||
<div class="cal-day leave-pending">21</div><div class="cal-day">22</div><div class="cal-day">23</div><div class="cal-day">24</div>
|
||||
<!-- Row 5 -->
|
||||
<div class="cal-day holiday">25</div><div class="cal-day">26</div><div class="cal-day">27</div>
|
||||
<div class="cal-day">28</div><div class="cal-day">29</div><div class="cal-day">30</div><div class="cal-day">31</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cal-legend">
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#EEF2FF;border:2px solid #6366F1"></div>Today</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#ECFDF5"></div>Approved Leave</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#FFFBEB"></div>Pending</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#FEF2F2"></div>Public Holiday</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team on Leave -->
|
||||
<div class="card">
|
||||
<div class="card-title">Team on Leave Today</div>
|
||||
<div class="team-grid">
|
||||
<div class="team-card">
|
||||
<div class="t-avatar av-2">AK</div>
|
||||
<div><div class="t-name">Ananya Krishnan</div><div class="t-dates">Annual · May 8–12</div></div>
|
||||
</div>
|
||||
<div class="team-card">
|
||||
<div class="t-avatar av-3">NB</div>
|
||||
<div><div class="t-name">Nikhil Bhat</div><div class="t-dates">Sick · May 5</div></div>
|
||||
</div>
|
||||
<div class="team-card">
|
||||
<div class="t-avatar av-4">SR</div>
|
||||
<div><div class="t-name">Sanya Reddy</div><div class="t-dates">Annual · May 5–7</div></div>
|
||||
</div>
|
||||
<div class="team-card">
|
||||
<div class="t-avatar av-1">KP</div>
|
||||
<div><div class="t-name">Karan Patel</div><div class="t-dates">Comp Off · May 5</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Leave History -->
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-title">My Leave History</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Period</th>
|
||||
<th>Type</th>
|
||||
<th>Days</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Apr 18–19</td>
|
||||
<td>Sick</td>
|
||||
<td style="text-align:center">2</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mar 22</td>
|
||||
<td>Annual</td>
|
||||
<td style="text-align:center">1</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>May 20–21</td>
|
||||
<td>Annual</td>
|
||||
<td style="text-align:center">2</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Feb 14</td>
|
||||
<td>Annual</td>
|
||||
<td style="text-align:center">1</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jan 26</td>
|
||||
<td>Comp Off</td>
|
||||
<td style="text-align:center">1</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,361 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BetterHuman — Payroll</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; display: flex; min-height: 100vh; font-size: 14px; color: #0F172A; }
|
||||
|
||||
.sidebar { width: 240px; background: #0F172A; min-height: 100vh; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 10; overflow-y: auto; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.logo-icon svg { width: 20px; height: 20px; }
|
||||
.logo-name { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; color: #FFFFFF; }
|
||||
.logo-company { font-size: 11px; color: #475569; font-weight: 500; }
|
||||
.sidebar-search { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.sidebar-search input { width: 100%; padding: 7px 10px 7px 32px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: #94A3B8; font-size: 12px; font-family: 'Inter', sans-serif; outline: none; }
|
||||
.search-wrap { position: relative; }
|
||||
.search-wrap svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: #475569; }
|
||||
.sidebar-nav { padding: 8px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: #334155; padding: 16px 20px 6px; text-transform: uppercase; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; margin: 1px 8px; border-radius: 7px; color: #64748B; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; text-decoration: none; }
|
||||
.nav-item:hover { background: #1E293B; color: #CBD5E1; }
|
||||
.nav-item.active { background: #6366F1; color: #FFFFFF; }
|
||||
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #EF4444; color: white; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9999px; }
|
||||
.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; }
|
||||
.footer-name { font-size: 12px; font-weight: 600; color: #CBD5E1; }
|
||||
.footer-role { font-size: 11px; color: #475569; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; position: sticky; top: 0; z-index: 5; }
|
||||
.topbar-left { display: flex; flex-direction: column; }
|
||||
.page-title { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; color: #0F172A; }
|
||||
.page-breadcrumb { font-size: 12px; color: #94A3B8; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 12px; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E2E8F0; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #FFFFFF; }
|
||||
.topbar-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: white; }
|
||||
.content { padding: 32px; flex: 1; }
|
||||
|
||||
.btn-primary { display: flex; align-items: center; gap: 8px; padding: 9px 18px; background: #6366F1; color: #FFFFFF; border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.btn-secondary { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #FFFFFF; color: #0F172A; border: 1.5px solid #E2E8F0; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; }
|
||||
.btn-primary svg, .btn-secondary svg { width: 15px; height: 15px; }
|
||||
|
||||
/* STATUS BANNER */
|
||||
.status-banner {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 12px 20px; background: #ECFDF5; border: 1px solid #A7F3D0;
|
||||
border-radius: 10px; margin-bottom: 24px;
|
||||
}
|
||||
.status-icon { width: 32px; height: 32px; background: #10B981; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.status-icon svg { width: 16px; height: 16px; color: white; }
|
||||
.status-text { font-size: 13px; font-weight: 600; color: #065F46; }
|
||||
.status-sub { font-size: 12px; color: #059669; }
|
||||
|
||||
/* METRICS */
|
||||
.metrics-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.metric-card { background: #FFFFFF; border-radius: 12px; padding: 20px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
||||
.metric-label { font-size: 12px; color: #64748B; font-weight: 500; margin-bottom: 6px; }
|
||||
.metric-value { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 700; color: #0F172A; }
|
||||
.metric-delta { font-size: 11px; color: #64748B; margin-top: 4px; }
|
||||
|
||||
/* PAYROLL GRID */
|
||||
.payroll-grid { display: grid; grid-template-columns: 1fr 280px; gap: 20px; margin-bottom: 24px; }
|
||||
|
||||
.card { background: #FFFFFF; border-radius: 12px; padding: 20px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
||||
.card-title { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; color: #0F172A; margin-bottom: 16px; }
|
||||
|
||||
.ded-list { display: flex; flex-direction: column; gap: 12px; }
|
||||
.ded-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #F1F5F9; }
|
||||
.ded-item:last-child { border-bottom: none; }
|
||||
.ded-label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #374151; font-weight: 500; }
|
||||
.ded-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
.ded-amount { font-size: 13px; font-weight: 700; color: #0F172A; font-family: 'Sora', sans-serif; }
|
||||
.ded-pct { font-size: 11px; color: #94A3B8; margin-top: 1px; text-align: right; }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #FFFFFF; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; }
|
||||
.table-header { padding: 16px 20px; border-bottom: 1px solid #E2E8F0; display: flex; justify-content: space-between; align-items: center; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th { background: #F8FAFC; padding: 11px 14px; text-align: left; font-size: 11px; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid #E2E8F0; white-space: nowrap; }
|
||||
th.td-right, td.td-right { text-align: right; }
|
||||
tbody tr { border-bottom: 1px solid #F1F5F9; transition: background 0.12s; }
|
||||
tbody tr:last-child { border-bottom: none; }
|
||||
tbody tr:hover { background: #F8FAFC; }
|
||||
tbody td { padding: 13px 14px; font-size: 13px; color: #374151; vertical-align: middle; }
|
||||
|
||||
.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: white; flex-shrink: 0; }
|
||||
.av-1 { background: linear-gradient(135deg, #6366F1, #8B5CF6); }
|
||||
.av-2 { background: linear-gradient(135deg, #10B981, #059669); }
|
||||
.av-3 { background: linear-gradient(135deg, #F59E0B, #D97706); }
|
||||
.av-4 { background: linear-gradient(135deg, #EF4444, #DC2626); }
|
||||
.av-5 { background: linear-gradient(135deg, #3B82F6, #2563EB); }
|
||||
.av-6 { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }
|
||||
.av-7 { background: linear-gradient(135deg, #14B8A6, #0D9488); }
|
||||
.av-8 { background: linear-gradient(135deg, #F97316, #EA580C); }
|
||||
.emp-name { font-size: 13px; font-weight: 600; color: #0F172A; }
|
||||
.emp-dept { font-size: 11px; color: #94A3B8; }
|
||||
|
||||
.badge { padding: 2px 10px; border-radius: 9999px; font-size: 11px; font-weight: 500; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
|
||||
.dl-btn { width: 28px; height: 28px; border: 1px solid #E2E8F0; border-radius: 6px; background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
|
||||
.dl-btn svg { width: 13px; height: 13px; color: #6366F1; }
|
||||
|
||||
.month-select { padding: 8px 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; color: #0F172A; background: #FFFFFF; outline: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="white" 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><div class="logo-name">BetterHuman</div><div class="logo-company">TechCorp India Pvt. Ltd.</div></div>
|
||||
</div>
|
||||
<div class="sidebar-search"><div class="search-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input type="text" placeholder="Search people, docs..."></div></div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main</div>
|
||||
<a class="nav-item" href="02-dashboard.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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-people.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>People</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>Org Chart</a>
|
||||
<div class="nav-section-label">Workforce</div>
|
||||
<a class="nav-item" href="07-recruitment.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>Recruitment</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>Onboarding</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="05-leave.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="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<span class="nav-badge">5</span></a>
|
||||
<a class="nav-item active" href="06-payroll.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
<div class="nav-section-label">Talent</div>
|
||||
<a class="nav-item" href="08-performance.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Performance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Learning</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>Benefits</a>
|
||||
<div class="nav-section-label">Culture</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Engagement</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>Recognition</a>
|
||||
<div class="nav-section-label">Insights</div>
|
||||
<a class="nav-item" href="09-analytics.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Analytics</a>
|
||||
<div class="nav-section-label">Admin</div>
|
||||
<a class="nav-item" href="10-settings.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer"><div class="avatar-sm">PS</div><div><div class="footer-name">Priya Sharma</div><div class="footer-role">HR Admin</div></div></div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<span class="page-title">Payroll</span>
|
||||
<span class="page-breadcrumb">Manage salaries, deductions, and payslips</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<select class="month-select">
|
||||
<option>April 2026</option>
|
||||
<option>March 2026</option>
|
||||
<option>February 2026</option>
|
||||
</select>
|
||||
<button class="btn-secondary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Export
|
||||
</button>
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
Run Payroll
|
||||
</button>
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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><div class="notif-dot"></div></div>
|
||||
<div class="topbar-avatar">PS</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<!-- Status Banner -->
|
||||
<div class="status-banner">
|
||||
<div class="status-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<div>
|
||||
<div class="status-text">April 2026 Payroll — Completed</div>
|
||||
<div class="status-sub">Processed on Apr 28, 2026 · 247 employees paid · All transfers successful</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metrics -->
|
||||
<div class="metrics-row">
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Gross Pay</div>
|
||||
<div class="metric-value">₹48,24,000</div>
|
||||
<div class="metric-delta">247 employees</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Net Pay Disbursed</div>
|
||||
<div class="metric-value">₹38,96,000</div>
|
||||
<div class="metric-delta">After all deductions</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Total Deductions</div>
|
||||
<div class="metric-value">₹9,28,000</div>
|
||||
<div class="metric-delta">PF + ESI + TDS + PT</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Employees Paid</div>
|
||||
<div class="metric-value">247</div>
|
||||
<div class="metric-delta" style="color:#10B981">100% success rate</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payroll Grid -->
|
||||
<div class="payroll-grid">
|
||||
<div class="card">
|
||||
<div class="card-title">Payslip Summary — April 2026</div>
|
||||
<p style="font-size:13px;color:#64748B;margin-bottom:16px;">Individual payroll breakdown for all active employees this cycle.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Deduction Breakdown</div>
|
||||
<div class="ded-list">
|
||||
<div class="ded-item">
|
||||
<div class="ded-label"><div class="ded-dot" style="background:#6366F1"></div>PF (Employee)</div>
|
||||
<div><div class="ded-amount">₹2,88,000</div><div class="ded-pct">12% of basic</div></div>
|
||||
</div>
|
||||
<div class="ded-item">
|
||||
<div class="ded-label"><div class="ded-dot" style="background:#8B5CF6"></div>PF (Employer)</div>
|
||||
<div><div class="ded-amount">₹2,88,000</div><div class="ded-pct">12% of basic</div></div>
|
||||
</div>
|
||||
<div class="ded-item">
|
||||
<div class="ded-label"><div class="ded-dot" style="background:#10B981"></div>ESI</div>
|
||||
<div><div class="ded-amount">₹36,000</div><div class="ded-pct">0.75% of gross</div></div>
|
||||
</div>
|
||||
<div class="ded-item">
|
||||
<div class="ded-label"><div class="ded-dot" style="background:#F59E0B"></div>TDS</div>
|
||||
<div><div class="ded-amount">₹3,16,000</div><div class="ded-pct">As per IT slab</div></div>
|
||||
</div>
|
||||
<div class="ded-item">
|
||||
<div class="ded-label"><div class="ded-dot" style="background:#EF4444"></div>Professional Tax</div>
|
||||
<div><div class="ded-amount">₹18,000</div><div class="ded-pct">₹200/month</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payslip Table -->
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<div style="font-family:'Sora',sans-serif;font-size:15px;font-weight:700;color:#0F172A;">Employee Payslips</div>
|
||||
<button class="btn-secondary" style="font-size:12px;padding:7px 12px">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:13px;height:13px;color:#64748B"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Export All
|
||||
</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th class="td-right">Gross</th>
|
||||
<th class="td-right">PF</th>
|
||||
<th class="td-right">ESI</th>
|
||||
<th class="td-right">TDS</th>
|
||||
<th class="td-right">Prof Tax</th>
|
||||
<th class="td-right">Net Pay</th>
|
||||
<th>Status</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-1">PS</div><div><div class="emp-name">Priya Sharma</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td class="td-right" style="font-weight:600">₹1,85,000</td>
|
||||
<td class="td-right">₹13,320</td>
|
||||
<td class="td-right">₹1,388</td>
|
||||
<td class="td-right">₹22,400</td>
|
||||
<td class="td-right">₹200</td>
|
||||
<td class="td-right" style="font-weight:700;color:#0F172A">₹1,47,692</td>
|
||||
<td><span class="badge badge-green">Paid</span></td>
|
||||
<td><button class="dl-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-2">RM</div><div><div class="emp-name">Rahul Mehta</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td class="td-right" style="font-weight:600">₹2,40,000</td>
|
||||
<td class="td-right">₹17,280</td>
|
||||
<td class="td-right">₹1,800</td>
|
||||
<td class="td-right">₹38,500</td>
|
||||
<td class="td-right">₹200</td>
|
||||
<td class="td-right" style="font-weight:700;color:#0F172A">₹1,82,220</td>
|
||||
<td><span class="badge badge-green">Paid</span></td>
|
||||
<td><button class="dl-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-3">AK</div><div><div class="emp-name">Ananya Krishnan</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td class="td-right" style="font-weight:600">₹1,20,000</td>
|
||||
<td class="td-right">₹8,640</td>
|
||||
<td class="td-right">₹900</td>
|
||||
<td class="td-right">₹9,200</td>
|
||||
<td class="td-right">₹200</td>
|
||||
<td class="td-right" style="font-weight:700;color:#0F172A">₹1,01,060</td>
|
||||
<td><span class="badge badge-green">Paid</span></td>
|
||||
<td><button class="dl-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-4">VS</div><div><div class="emp-name">Vikram Singh</div><div class="emp-dept">Sales</div></div></div></td>
|
||||
<td class="td-right" style="font-weight:600">₹1,60,000</td>
|
||||
<td class="td-right">₹11,520</td>
|
||||
<td class="td-right">₹1,200</td>
|
||||
<td class="td-right">₹16,800</td>
|
||||
<td class="td-right">₹200</td>
|
||||
<td class="td-right" style="font-weight:700;color:#0F172A">₹1,30,280</td>
|
||||
<td><span class="badge badge-green">Paid</span></td>
|
||||
<td><button class="dl-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-5">MN</div><div><div class="emp-name">Meera Nair</div><div class="emp-dept">Product</div></div></div></td>
|
||||
<td class="td-right" style="font-weight:600">₹1,90,000</td>
|
||||
<td class="td-right">₹13,680</td>
|
||||
<td class="td-right">₹1,425</td>
|
||||
<td class="td-right">₹24,200</td>
|
||||
<td class="td-right">₹200</td>
|
||||
<td class="td-right" style="font-weight:700;color:#0F172A">₹1,50,495</td>
|
||||
<td><span class="badge badge-green">Paid</span></td>
|
||||
<td><button class="dl-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-6">KP</div><div><div class="emp-name">Karan Patel</div><div class="emp-dept">Sales</div></div></div></td>
|
||||
<td class="td-right" style="font-weight:600">₹95,000</td>
|
||||
<td class="td-right">₹6,840</td>
|
||||
<td class="td-right">₹713</td>
|
||||
<td class="td-right">₹4,800</td>
|
||||
<td class="td-right">₹200</td>
|
||||
<td class="td-right" style="font-weight:700;color:#0F172A">₹82,447</td>
|
||||
<td><span class="badge badge-green">Paid</span></td>
|
||||
<td><button class="dl-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-7">PJ</div><div><div class="emp-name">Pooja Joshi</div><div class="emp-dept">Finance</div></div></div></td>
|
||||
<td class="td-right" style="font-weight:600">₹1,10,000</td>
|
||||
<td class="td-right">₹7,920</td>
|
||||
<td class="td-right">₹825</td>
|
||||
<td class="td-right">₹7,600</td>
|
||||
<td class="td-right">₹200</td>
|
||||
<td class="td-right" style="font-weight:700;color:#0F172A">₹93,455</td>
|
||||
<td><span class="badge badge-green">Paid</span></td>
|
||||
<td><button class="dl-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-8">NB</div><div><div class="emp-name">Nikhil Bhat</div><div class="emp-dept">Operations</div></div></div></td>
|
||||
<td class="td-right" style="font-weight:600">₹1,35,000</td>
|
||||
<td class="td-right">₹9,720</td>
|
||||
<td class="td-right">₹1,013</td>
|
||||
<td class="td-right">₹12,400</td>
|
||||
<td class="td-right">₹200</td>
|
||||
<td class="td-right" style="font-weight:700;color:#0F172A">₹1,11,667</td>
|
||||
<td><span class="badge badge-green">Paid</span></td>
|
||||
<td><button class="dl-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,322 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BetterHuman — Recruitment</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; display: flex; min-height: 100vh; font-size: 14px; color: #0F172A; }
|
||||
|
||||
.sidebar { width: 240px; background: #0F172A; min-height: 100vh; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 10; overflow-y: auto; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.logo-icon svg { width: 20px; height: 20px; }
|
||||
.logo-name { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; color: #FFFFFF; }
|
||||
.logo-company { font-size: 11px; color: #475569; font-weight: 500; }
|
||||
.sidebar-search { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.sidebar-search input { width: 100%; padding: 7px 10px 7px 32px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: #94A3B8; font-size: 12px; font-family: 'Inter', sans-serif; outline: none; }
|
||||
.search-wrap { position: relative; }
|
||||
.search-wrap svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: #475569; }
|
||||
.sidebar-nav { padding: 8px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: #334155; padding: 16px 20px 6px; text-transform: uppercase; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; margin: 1px 8px; border-radius: 7px; color: #64748B; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; text-decoration: none; }
|
||||
.nav-item:hover { background: #1E293B; color: #CBD5E1; }
|
||||
.nav-item.active { background: #6366F1; color: #FFFFFF; }
|
||||
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #EF4444; color: white; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9999px; }
|
||||
.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; }
|
||||
.footer-name { font-size: 12px; font-weight: 600; color: #CBD5E1; }
|
||||
.footer-role { font-size: 11px; color: #475569; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; position: sticky; top: 0; z-index: 5; }
|
||||
.topbar-left { display: flex; flex-direction: column; }
|
||||
.page-title { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; color: #0F172A; }
|
||||
.page-breadcrumb { font-size: 12px; color: #94A3B8; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 12px; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E2E8F0; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #FFFFFF; }
|
||||
.topbar-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: white; }
|
||||
|
||||
.btn-primary { display: flex; align-items: center; gap: 8px; padding: 9px 18px; background: #6366F1; color: #FFFFFF; border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.btn-primary svg { width: 15px; height: 15px; }
|
||||
|
||||
/* LAYOUT */
|
||||
.ats-layout { display: flex; height: calc(100vh - 64px); overflow: hidden; }
|
||||
|
||||
/* LEFT PANEL — Jobs list */
|
||||
.jobs-panel { width: 280px; background: #FFFFFF; border-right: 1px solid #E2E8F0; display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; }
|
||||
.jobs-header { padding: 16px; border-bottom: 1px solid #E2E8F0; }
|
||||
.jobs-title { font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700; color: #0F172A; margin-bottom: 10px; }
|
||||
.new-job-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; background: #F8FAFC; border: 1.5px dashed #CBD5E1; border-radius: 8px; font-size: 12px; color: #6366F1; font-weight: 600; cursor: pointer; }
|
||||
.new-job-btn svg { width: 14px; height: 14px; }
|
||||
|
||||
.job-item { padding: 14px 16px; border-bottom: 1px solid #F1F5F9; cursor: pointer; transition: background 0.12s; position: relative; }
|
||||
.job-item:hover { background: #F8FAFC; }
|
||||
.job-item.active { background: #EEF2FF; border-right: 3px solid #6366F1; }
|
||||
.job-title { font-size: 13px; font-weight: 600; color: #0F172A; margin-bottom: 4px; }
|
||||
.job-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||||
.job-tag { font-size: 10px; padding: 2px 8px; border-radius: 9999px; font-weight: 500; }
|
||||
.tag-indigo { background: #EEF2FF; color: #6366F1; }
|
||||
.tag-green { background: #ECFDF5; color: #059669; }
|
||||
.job-count { margin-left: auto; font-size: 11px; font-weight: 700; color: #6366F1; background: #EEF2FF; padding: 2px 8px; border-radius: 9999px; }
|
||||
.job-dept { font-size: 11px; color: #94A3B8; }
|
||||
|
||||
/* RIGHT PANEL */
|
||||
.ats-right { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
||||
.job-header-bar { padding: 16px 24px; background: #FFFFFF; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; }
|
||||
.job-header-info { display: flex; flex-direction: column; }
|
||||
.job-header-title { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; color: #0F172A; }
|
||||
.job-header-meta { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
|
||||
.jh-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #64748B; }
|
||||
.jh-item svg { width: 13px; height: 13px; color: #94A3B8; }
|
||||
.job-header-actions { display: flex; gap: 10px; }
|
||||
.btn-sm { padding: 7px 14px; border-radius: 7px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; border: 1.5px solid #E2E8F0; background: #FFFFFF; color: #374151; }
|
||||
|
||||
/* KANBAN */
|
||||
.kanban { display: flex; gap: 14px; padding: 20px 24px; flex: 1; overflow-x: auto; align-items: flex-start; }
|
||||
.kanban-col { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
|
||||
.col-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
|
||||
.col-name { font-size: 12px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
.col-count { font-size: 11px; font-weight: 700; color: #6366F1; background: #EEF2FF; padding: 2px 8px; border-radius: 9999px; }
|
||||
.col-body { display: flex; flex-direction: column; gap: 10px; }
|
||||
|
||||
.cand-card { background: #FFFFFF; border-radius: 10px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid #E2E8F0; cursor: pointer; transition: box-shadow 0.15s; }
|
||||
.cand-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.10); }
|
||||
.cand-card.hired { border-color: #10B981; background: #F0FDF4; }
|
||||
.cand-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
||||
.cand-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; flex-shrink: 0; }
|
||||
.av-1 { background: linear-gradient(135deg, #6366F1, #8B5CF6); }
|
||||
.av-2 { background: linear-gradient(135deg, #10B981, #059669); }
|
||||
.av-3 { background: linear-gradient(135deg, #F59E0B, #D97706); }
|
||||
.av-4 { background: linear-gradient(135deg, #EF4444, #DC2626); }
|
||||
.av-5 { background: linear-gradient(135deg, #3B82F6, #2563EB); }
|
||||
.av-6 { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }
|
||||
.av-7 { background: linear-gradient(135deg, #14B8A6, #0D9488); }
|
||||
.av-8 { background: linear-gradient(135deg, #F97316, #EA580C); }
|
||||
.av-9 { background: linear-gradient(135deg, #EC4899, #DB2777); }
|
||||
.cand-name { font-size: 12px; font-weight: 700; color: #0F172A; }
|
||||
.cand-sub { font-size: 10px; color: #94A3B8; }
|
||||
.cand-tags { display: flex; gap: 5px; flex-wrap: wrap; }
|
||||
.tag { font-size: 10px; padding: 2px 7px; border-radius: 9999px; font-weight: 500; }
|
||||
.tag-indigo { background: #EEF2FF; color: #6366F1; }
|
||||
.tag-green { background: #ECFDF5; color: #059669; }
|
||||
.tag-amber { background: #FFFBEB; color: #D97706; }
|
||||
.tag-blue { background: #EFF6FF; color: #2563EB; }
|
||||
|
||||
.add-cand-btn { width: 100%; padding: 9px; background: transparent; border: 1.5px dashed #CBD5E1; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 11px; color: #94A3B8; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.add-cand-btn:hover { background: #F8FAFC; color: #6366F1; border-color: #6366F1; }
|
||||
.add-cand-btn svg { width: 13px; height: 13px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="white" 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><div class="logo-name">BetterHuman</div><div class="logo-company">TechCorp India Pvt. Ltd.</div></div>
|
||||
</div>
|
||||
<div class="sidebar-search"><div class="search-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input type="text" placeholder="Search people, docs..."></div></div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main</div>
|
||||
<a class="nav-item" href="02-dashboard.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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-people.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>People</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>Org Chart</a>
|
||||
<div class="nav-section-label">Workforce</div>
|
||||
<a class="nav-item active" href="07-recruitment.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>Recruitment</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>Onboarding</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="05-leave.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="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<span class="nav-badge">5</span></a>
|
||||
<a class="nav-item" href="06-payroll.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
<div class="nav-section-label">Talent</div>
|
||||
<a class="nav-item" href="08-performance.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Performance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Learning</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>Benefits</a>
|
||||
<div class="nav-section-label">Culture</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Engagement</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>Recognition</a>
|
||||
<div class="nav-section-label">Insights</div>
|
||||
<a class="nav-item" href="09-analytics.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Analytics</a>
|
||||
<div class="nav-section-label">Admin</div>
|
||||
<a class="nav-item" href="10-settings.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer"><div class="avatar-sm">PS</div><div><div class="footer-name">Priya Sharma</div><div class="footer-role">HR Admin</div></div></div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<span class="page-title">Recruitment — ATS</span>
|
||||
<span class="page-breadcrumb">Track candidates across your hiring pipeline</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Post New Job
|
||||
</button>
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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><div class="notif-dot"></div></div>
|
||||
<div class="topbar-avatar">PS</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="ats-layout">
|
||||
<!-- Jobs List Panel -->
|
||||
<div class="jobs-panel">
|
||||
<div class="jobs-header">
|
||||
<div class="jobs-title">Open Positions (3)</div>
|
||||
<button class="new-job-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
New Position
|
||||
</button>
|
||||
</div>
|
||||
<div class="job-item active">
|
||||
<div class="job-title">Senior Frontend Engineer</div>
|
||||
<div class="job-dept" style="margin-bottom:6px">Engineering · Bengaluru</div>
|
||||
<div class="job-meta">
|
||||
<span class="job-tag tag-green">Active</span>
|
||||
<span class="job-tag tag-indigo">Senior</span>
|
||||
<span class="job-count">12</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-item">
|
||||
<div class="job-title">Product Manager</div>
|
||||
<div class="job-dept" style="margin-bottom:6px">Product · Bengaluru / Remote</div>
|
||||
<div class="job-meta">
|
||||
<span class="job-tag tag-green">Active</span>
|
||||
<span class="job-tag tag-indigo">Mid-Sr</span>
|
||||
<span class="job-count">8</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-item">
|
||||
<div class="job-title">Regional Sales Lead</div>
|
||||
<div class="job-dept" style="margin-bottom:6px">Sales · Delhi NCR</div>
|
||||
<div class="job-meta">
|
||||
<span class="job-tag tag-green">Active</span>
|
||||
<span class="job-tag tag-indigo">Senior</span>
|
||||
<span class="job-count">4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Kanban + Job Details -->
|
||||
<div class="ats-right">
|
||||
<!-- Job Header Bar -->
|
||||
<div class="job-header-bar">
|
||||
<div class="job-header-info">
|
||||
<div class="job-header-title">Senior Frontend Engineer</div>
|
||||
<div class="job-header-meta">
|
||||
<div class="jh-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Bengaluru HQ</div>
|
||||
<div class="jh-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>₹25–40L CTC</div>
|
||||
<div class="jh-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>Senior · Engineering</div>
|
||||
<div class="jh-item" style="color:#10B981"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Posted 18 days ago</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-header-actions">
|
||||
<button class="btn-sm">Edit Job</button>
|
||||
<button class="btn-sm" style="background:#ECFDF5;color:#059669;border-color:#A7F3D0">Share Link</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kanban Board -->
|
||||
<div class="kanban">
|
||||
<!-- Applied -->
|
||||
<div class="kanban-col">
|
||||
<div class="col-header">
|
||||
<span class="col-name">Applied</span>
|
||||
<span class="col-count">12</span>
|
||||
</div>
|
||||
<div class="col-body">
|
||||
<div class="cand-card">
|
||||
<div class="cand-top"><div class="cand-avatar av-1">RV</div><div><div class="cand-name">Rahul Verma</div><div class="cand-sub">Applied 1d ago</div></div></div>
|
||||
<div class="cand-tags"><span class="tag tag-indigo">LinkedIn</span><span class="tag tag-amber">React</span></div>
|
||||
</div>
|
||||
<div class="cand-card">
|
||||
<div class="cand-top"><div class="cand-avatar av-3">SM</div><div><div class="cand-name">Shreya Malhotra</div><div class="cand-sub">Applied 2d ago</div></div></div>
|
||||
<div class="cand-tags"><span class="tag tag-blue">Referral</span><span class="tag tag-amber">Vue.js</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="add-cand-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Add Candidate</button>
|
||||
</div>
|
||||
|
||||
<!-- Screening -->
|
||||
<div class="kanban-col">
|
||||
<div class="col-header">
|
||||
<span class="col-name">Screening</span>
|
||||
<span class="col-count">7</span>
|
||||
</div>
|
||||
<div class="col-body">
|
||||
<div class="cand-card">
|
||||
<div class="cand-top"><div class="cand-avatar av-2">AP</div><div><div class="cand-name">Aryan Patel</div><div class="cand-sub">Screened 3d ago</div></div></div>
|
||||
<div class="cand-tags"><span class="tag tag-green">Naukri</span><span class="tag tag-amber">TypeScript</span></div>
|
||||
</div>
|
||||
<div class="cand-card">
|
||||
<div class="cand-top"><div class="cand-avatar av-5">NK</div><div><div class="cand-name">Naina Kapoor</div><div class="cand-sub">Screened 4d ago</div></div></div>
|
||||
<div class="cand-tags"><span class="tag tag-indigo">LinkedIn</span><span class="tag tag-blue">Next.js</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="add-cand-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Add Candidate</button>
|
||||
</div>
|
||||
|
||||
<!-- Interview -->
|
||||
<div class="kanban-col">
|
||||
<div class="col-header">
|
||||
<span class="col-name">Interview</span>
|
||||
<span class="col-count">4</span>
|
||||
</div>
|
||||
<div class="col-body">
|
||||
<div class="cand-card">
|
||||
<div class="cand-top"><div class="cand-avatar av-4">DM</div><div><div class="cand-name">Dev Mehrotra</div><div class="cand-sub">Round 2 · May 8</div></div></div>
|
||||
<div class="cand-tags"><span class="tag tag-blue">Direct</span><span class="tag tag-amber">React · Node</span></div>
|
||||
</div>
|
||||
<div class="cand-card">
|
||||
<div class="cand-top"><div class="cand-avatar av-7">PR</div><div><div class="cand-name">Pooja Rao</div><div class="cand-sub">Round 1 · May 9</div></div></div>
|
||||
<div class="cand-tags"><span class="tag tag-green">Referral</span><span class="tag tag-indigo">Angular</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="add-cand-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Add Candidate</button>
|
||||
</div>
|
||||
|
||||
<!-- Offer -->
|
||||
<div class="kanban-col">
|
||||
<div class="col-header">
|
||||
<span class="col-name">Offer</span>
|
||||
<span class="col-count">2</span>
|
||||
</div>
|
||||
<div class="col-body">
|
||||
<div class="cand-card">
|
||||
<div class="cand-top"><div class="cand-avatar av-6">KS</div><div><div class="cand-name">Kunal Sharma</div><div class="cand-sub">Offer sent 2d ago</div></div></div>
|
||||
<div class="cand-tags"><span class="tag tag-amber">Negotiating</span><span class="tag tag-indigo">React</span></div>
|
||||
</div>
|
||||
<div class="cand-card">
|
||||
<div class="cand-top"><div class="cand-avatar av-9">AS</div><div><div class="cand-name">Anika Singh</div><div class="cand-sub">Offer accepted</div></div></div>
|
||||
<div class="cand-tags"><span class="tag tag-green">Accepted</span><span class="tag tag-blue">Vue</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="add-cand-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Add Candidate</button>
|
||||
</div>
|
||||
|
||||
<!-- Hired -->
|
||||
<div class="kanban-col">
|
||||
<div class="col-header">
|
||||
<span class="col-name" style="color:#10B981">Hired</span>
|
||||
<span class="col-count" style="background:#ECFDF5;color:#059669">1</span>
|
||||
</div>
|
||||
<div class="col-body">
|
||||
<div class="cand-card hired">
|
||||
<div class="cand-top"><div class="cand-avatar av-2">RD</div><div><div class="cand-name">Rohan Das</div><div class="cand-sub">Joined May 1, 2026</div></div></div>
|
||||
<div class="cand-tags"><span class="tag tag-green">Onboarded</span><span class="tag tag-indigo">React</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="add-cand-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Add Candidate</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,386 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BetterHuman — Performance</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; display: flex; min-height: 100vh; font-size: 14px; color: #0F172A; }
|
||||
|
||||
.sidebar { width: 240px; background: #0F172A; min-height: 100vh; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 10; overflow-y: auto; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.logo-icon svg { width: 20px; height: 20px; }
|
||||
.logo-name { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; color: #FFFFFF; }
|
||||
.logo-company { font-size: 11px; color: #475569; font-weight: 500; }
|
||||
.sidebar-search { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.sidebar-search input { width: 100%; padding: 7px 10px 7px 32px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: #94A3B8; font-size: 12px; font-family: 'Inter', sans-serif; outline: none; }
|
||||
.search-wrap { position: relative; }
|
||||
.search-wrap svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: #475569; }
|
||||
.sidebar-nav { padding: 8px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: #334155; padding: 16px 20px 6px; text-transform: uppercase; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; margin: 1px 8px; border-radius: 7px; color: #64748B; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; text-decoration: none; }
|
||||
.nav-item:hover { background: #1E293B; color: #CBD5E1; }
|
||||
.nav-item.active { background: #6366F1; color: #FFFFFF; }
|
||||
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #EF4444; color: white; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9999px; }
|
||||
.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; }
|
||||
.footer-name { font-size: 12px; font-weight: 600; color: #CBD5E1; }
|
||||
.footer-role { font-size: 11px; color: #475569; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; position: sticky; top: 0; z-index: 5; }
|
||||
.topbar-left { display: flex; flex-direction: column; }
|
||||
.page-title { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; color: #0F172A; }
|
||||
.page-breadcrumb { font-size: 12px; color: #94A3B8; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 12px; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E2E8F0; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #FFFFFF; }
|
||||
.topbar-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: white; }
|
||||
.content { padding: 32px; flex: 1; }
|
||||
|
||||
.btn-primary { display: flex; align-items: center; gap: 8px; padding: 9px 18px; background: #6366F1; color: #FFFFFF; border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
|
||||
/* CYCLE BANNER */
|
||||
.cycle-banner {
|
||||
background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
|
||||
border-radius: 12px; padding: 20px 24px; margin-bottom: 24px;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
}
|
||||
.cycle-left { color: white; }
|
||||
.cycle-title { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
|
||||
.cycle-sub { font-size: 13px; opacity: 0.8; margin-bottom: 12px; }
|
||||
.cycle-progress-wrap { display: flex; align-items: center; gap: 12px; }
|
||||
.cycle-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.25); border-radius: 9999px; max-width: 200px; overflow: hidden; }
|
||||
.cycle-fill { height: 100%; background: #A5B4FC; border-radius: 9999px; }
|
||||
.cycle-pct { font-size: 13px; font-weight: 700; color: white; }
|
||||
.cycle-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
|
||||
.cycle-end { font-size: 12px; color: rgba(255,255,255,0.7); }
|
||||
.cycle-end strong { color: white; }
|
||||
.btn-white { padding: 8px 16px; background: white; color: #4F46E5; border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
|
||||
/* METRICS */
|
||||
.metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.metric-card { background: #FFFFFF; border-radius: 12px; padding: 20px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); display: flex; justify-content: space-between; align-items: flex-start; }
|
||||
.metric-label { font-size: 12px; color: #64748B; font-weight: 500; margin-bottom: 6px; }
|
||||
.metric-value { font-family: 'Sora', sans-serif; font-size: 24px; font-weight: 700; color: #0F172A; }
|
||||
.metric-sub { font-size: 11px; color: #94A3B8; margin-top: 4px; }
|
||||
.metric-mini-bar { height: 4px; background: #F1F5F9; border-radius: 9999px; overflow: hidden; margin-top: 10px; width: 80px; }
|
||||
.mini-fill { height: 100%; border-radius: 9999px; }
|
||||
.fill-indigo { background: #6366F1; }
|
||||
.fill-green { background: #10B981; }
|
||||
.fill-amber { background: #F59E0B; }
|
||||
|
||||
/* RATING STARS */
|
||||
.stars { display: flex; gap: 2px; margin-top: 8px; }
|
||||
.star { width: 16px; height: 16px; }
|
||||
.star.filled { color: #F59E0B; }
|
||||
.star.empty { color: #E2E8F0; }
|
||||
|
||||
/* MAIN GRID */
|
||||
.perf-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; }
|
||||
.card { background: #FFFFFF; border-radius: 12px; padding: 20px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
||||
.card-title { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; color: #0F172A; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
|
||||
.card-action { font-size: 12px; color: #6366F1; cursor: pointer; font-weight: 500; }
|
||||
|
||||
/* REVIEWS TABLE */
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th { background: #F8FAFC; padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid #E2E8F0; }
|
||||
tbody tr { border-bottom: 1px solid #F1F5F9; transition: background 0.12s; }
|
||||
tbody tr:last-child { border-bottom: none; }
|
||||
tbody tr:hover { background: #F8FAFC; }
|
||||
tbody td { padding: 12px 14px; font-size: 13px; color: #374151; vertical-align: middle; }
|
||||
|
||||
.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: white; flex-shrink: 0; }
|
||||
.av-1 { background: linear-gradient(135deg, #6366F1, #8B5CF6); }
|
||||
.av-2 { background: linear-gradient(135deg, #10B981, #059669); }
|
||||
.av-3 { background: linear-gradient(135deg, #F59E0B, #D97706); }
|
||||
.av-4 { background: linear-gradient(135deg, #EF4444, #DC2626); }
|
||||
.av-5 { background: linear-gradient(135deg, #3B82F6, #2563EB); }
|
||||
.emp-name { font-size: 13px; font-weight: 600; color: #0F172A; }
|
||||
.emp-dept { font-size: 11px; color: #94A3B8; }
|
||||
|
||||
.badge { padding: 2px 10px; border-radius: 9999px; font-size: 11px; font-weight: 500; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-blue { background: #EFF6FF; color: #2563EB; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-indigo { background: #EEF2FF; color: #6366F1; }
|
||||
|
||||
.start-btn { padding: 5px 12px; background: #6366F1; color: white; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
|
||||
|
||||
/* OKRs */
|
||||
.okr-list { display: flex; flex-direction: column; gap: 16px; }
|
||||
.okr-item { padding: 14px; background: #F8FAFC; border-radius: 8px; border: 1px solid #E2E8F0; }
|
||||
.okr-title { font-size: 13px; font-weight: 600; color: #0F172A; margin-bottom: 6px; }
|
||||
.okr-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.okr-owner { font-size: 11px; color: #94A3B8; }
|
||||
.okr-pct { font-size: 12px; font-weight: 700; }
|
||||
.okr-pct.high { color: #10B981; }
|
||||
.okr-pct.mid { color: #F59E0B; }
|
||||
.okr-pct.low { color: #EF4444; }
|
||||
.okr-bar { height: 6px; background: #E2E8F0; border-radius: 9999px; overflow: hidden; }
|
||||
.okr-fill { height: 100%; border-radius: 9999px; }
|
||||
.okr-fill.green { background: linear-gradient(90deg, #10B981, #34D399); }
|
||||
.okr-fill.amber { background: linear-gradient(90deg, #F59E0B, #FCD34D); }
|
||||
.okr-fill.indigo { background: linear-gradient(90deg, #6366F1, #818CF8); }
|
||||
|
||||
/* 1:1 CARD */
|
||||
.one-on-one {
|
||||
background: linear-gradient(135deg, #EEF2FF, #F5F3FF);
|
||||
border: 1px solid #C7D2FE; border-radius: 10px; padding: 16px; margin-top: 0;
|
||||
}
|
||||
.o-title { font-size: 12px; font-weight: 600; color: #4F46E5; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
|
||||
.o-meeting { font-size: 14px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.o-time { font-size: 12px; color: #6366F1; font-weight: 600; }
|
||||
.o-agenda { margin-top: 10px; padding-top: 10px; border-top: 1px solid #C7D2FE; font-size: 12px; color: #64748B; }
|
||||
.o-join { display: flex; margin-top: 12px; }
|
||||
.o-join button { padding: 7px 14px; background: #6366F1; color: white; border: none; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="white" 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><div class="logo-name">BetterHuman</div><div class="logo-company">TechCorp India Pvt. Ltd.</div></div>
|
||||
</div>
|
||||
<div class="sidebar-search"><div class="search-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input type="text" placeholder="Search people, docs..."></div></div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main</div>
|
||||
<a class="nav-item" href="02-dashboard.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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-people.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>People</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>Org Chart</a>
|
||||
<div class="nav-section-label">Workforce</div>
|
||||
<a class="nav-item" href="07-recruitment.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>Recruitment</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>Onboarding</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="05-leave.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="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<span class="nav-badge">5</span></a>
|
||||
<a class="nav-item" href="06-payroll.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
<div class="nav-section-label">Talent</div>
|
||||
<a class="nav-item active" href="08-performance.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Performance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Learning</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>Benefits</a>
|
||||
<div class="nav-section-label">Culture</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Engagement</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>Recognition</a>
|
||||
<div class="nav-section-label">Insights</div>
|
||||
<a class="nav-item" href="09-analytics.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Analytics</a>
|
||||
<div class="nav-section-label">Admin</div>
|
||||
<a class="nav-item" href="10-settings.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer"><div class="avatar-sm">PS</div><div><div class="footer-name">Priya Sharma</div><div class="footer-role">HR Admin</div></div></div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<span class="page-title">Performance Management</span>
|
||||
<span class="page-breadcrumb">Reviews, OKRs, and 1:1s</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Start Review Cycle
|
||||
</button>
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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><div class="notif-dot"></div></div>
|
||||
<div class="topbar-avatar">PS</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<!-- Cycle Banner -->
|
||||
<div class="cycle-banner">
|
||||
<div class="cycle-left">
|
||||
<div class="cycle-title">Q1 2026 Performance Review</div>
|
||||
<div class="cycle-sub">Annual review cycle — 360° feedback + OKR assessment</div>
|
||||
<div class="cycle-progress-wrap">
|
||||
<div class="cycle-bar"><div class="cycle-fill" style="width:68%"></div></div>
|
||||
<span class="cycle-pct">68% submitted</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cycle-right">
|
||||
<div class="cycle-end">Cycle ends <strong>June 30, 2026</strong></div>
|
||||
<button class="btn-white">Manage Cycle</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metrics -->
|
||||
<div class="metrics-row">
|
||||
<div class="metric-card">
|
||||
<div>
|
||||
<div class="metric-label">Reviews Submitted</div>
|
||||
<div class="metric-value">168/247</div>
|
||||
<div class="metric-sub">68% completion</div>
|
||||
<div class="metric-mini-bar"><div class="mini-fill fill-indigo" style="width:68%"></div></div>
|
||||
</div>
|
||||
<div style="width:36px;height:36px;background:linear-gradient(135deg,#EEF2FF,#C7D2FE);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6366F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div>
|
||||
<div class="metric-label">Self Reviews Done</div>
|
||||
<div class="metric-value">201/247</div>
|
||||
<div class="metric-sub">81% completion</div>
|
||||
<div class="metric-mini-bar"><div class="mini-fill fill-green" style="width:81%"></div></div>
|
||||
</div>
|
||||
<div style="width:36px;height:36px;background:linear-gradient(135deg,#ECFDF5,#A7F3D0);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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="metric-card">
|
||||
<div>
|
||||
<div class="metric-label">Avg Team Rating</div>
|
||||
<div class="metric-value">3.8/5</div>
|
||||
<div class="metric-sub">+0.3 from last cycle</div>
|
||||
<div class="stars">
|
||||
<svg class="star filled" viewBox="0 0 24 24" fill="#F59E0B" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
<svg class="star filled" viewBox="0 0 24 24" fill="#F59E0B" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
<svg class="star filled" viewBox="0 0 24 24" fill="#F59E0B" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
<svg class="star filled" viewBox="0 0 24 24" fill="#F59E0B" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
<svg class="star empty" viewBox="0 0 24 24" fill="#E2E8F0" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:36px;height:36px;background:linear-gradient(135deg,#FFFBEB,#FDE68A);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="#F59E0B" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Perf Grid -->
|
||||
<div class="perf-grid">
|
||||
<div style="display:flex;flex-direction:column;gap:16px;">
|
||||
<!-- My Reviews -->
|
||||
<div class="card">
|
||||
<div class="card-title">My Pending Reviews <span class="card-action">View All</span></div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Review Type</th>
|
||||
<th>Due Date</th>
|
||||
<th>Status</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-1">PS</div><div><div class="emp-name">Priya Sharma</div><div class="emp-dept">Self Review</div></div></div></td>
|
||||
<td><span class="badge badge-indigo">Self</span></td>
|
||||
<td>June 15, 2026</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><button class="start-btn">Start</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-2">AK</div><div><div class="emp-name">Ananya Krishnan</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><span class="badge badge-blue">Manager</span></td>
|
||||
<td>June 20, 2026</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><button class="start-btn">Start</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-3">RD</div><div><div class="emp-name">Rohan Das</div><div class="emp-dept">Engineering</div></div></div></td>
|
||||
<td><span class="badge badge-blue">Manager</span></td>
|
||||
<td>June 20, 2026</td>
|
||||
<td><span class="badge badge-green">Submitted</span></td>
|
||||
<td><button class="start-btn" style="background:#ECFDF5;color:#059669">View</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="emp-cell"><div class="emp-avatar av-4">MN</div><div><div class="emp-name">Meera Nair</div><div class="emp-dept">Product</div></div></div></td>
|
||||
<td><span class="badge badge-indigo">Peer</span></td>
|
||||
<td>June 18, 2026</td>
|
||||
<td><span class="badge badge-red">Overdue</span></td>
|
||||
<td><button class="start-btn">Start</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- OKRs -->
|
||||
<div class="card">
|
||||
<div class="card-title">My OKRs — Q1 2026 <span class="card-action">Edit Goals</span></div>
|
||||
<div class="okr-list">
|
||||
<div class="okr-item">
|
||||
<div class="okr-title">Launch BetterHuman v2.0 Mobile App</div>
|
||||
<div class="okr-meta">
|
||||
<span class="okr-owner">Engineering · Owner: Priya Sharma</span>
|
||||
<span class="okr-pct high">72%</span>
|
||||
</div>
|
||||
<div class="okr-bar"><div class="okr-fill green" style="width:72%"></div></div>
|
||||
</div>
|
||||
<div class="okr-item">
|
||||
<div class="okr-title">Achieve Q2 Revenue Target of ₹8.5Cr</div>
|
||||
<div class="okr-meta">
|
||||
<span class="okr-owner">Company · Owner: Neha Gupta</span>
|
||||
<span class="okr-pct mid">45%</span>
|
||||
</div>
|
||||
<div class="okr-bar"><div class="okr-fill amber" style="width:45%"></div></div>
|
||||
</div>
|
||||
<div class="okr-item">
|
||||
<div class="okr-title">Reduce Customer Churn from 12% to 8%</div>
|
||||
<div class="okr-meta">
|
||||
<span class="okr-owner">Product · Owner: Meera Nair</span>
|
||||
<span class="okr-pct high">88%</span>
|
||||
</div>
|
||||
<div class="okr-bar"><div class="okr-fill green" style="width:88%"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right column -->
|
||||
<div style="display:flex;flex-direction:column;gap:16px;">
|
||||
<div class="card">
|
||||
<div class="card-title">Upcoming 1:1</div>
|
||||
<div class="one-on-one">
|
||||
<div class="o-title">Scheduled 1:1</div>
|
||||
<div class="o-meeting">1:1 with Rahul Mehta</div>
|
||||
<div class="o-time">Tomorrow — Wednesday, May 6 · 3:00 PM</div>
|
||||
<div class="o-agenda">Agenda: Q1 review progress, career development discussion, team expansion plans.</div>
|
||||
<div class="o-join"><button>Join Meeting</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">Rating Distribution</div>
|
||||
<div style="display:flex;flex-direction:column;gap:10px;margin-top:4px;">
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<div style="font-size:11px;color:#64748B;width:80px">Outstanding (5)</div>
|
||||
<div style="flex:1;height:14px;background:#F1F5F9;border-radius:9999px;overflow:hidden"><div style="height:100%;width:12%;background:#6366F1;border-radius:9999px"></div></div>
|
||||
<div style="font-size:11px;color:#64748B;width:20px;text-align:right">12%</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<div style="font-size:11px;color:#64748B;width:80px">Exceeds (4)</div>
|
||||
<div style="flex:1;height:14px;background:#F1F5F9;border-radius:9999px;overflow:hidden"><div style="height:100%;width:28%;background:#10B981;border-radius:9999px"></div></div>
|
||||
<div style="font-size:11px;color:#64748B;width:20px;text-align:right">28%</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<div style="font-size:11px;color:#64748B;width:80px">Meets (3)</div>
|
||||
<div style="flex:1;height:14px;background:#F1F5F9;border-radius:9999px;overflow:hidden"><div style="height:100%;width:45%;background:#F59E0B;border-radius:9999px"></div></div>
|
||||
<div style="font-size:11px;color:#64748B;width:20px;text-align:right">45%</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<div style="font-size:11px;color:#64748B;width:80px">Below (2)</div>
|
||||
<div style="flex:1;height:14px;background:#F1F5F9;border-radius:9999px;overflow:hidden"><div style="height:100%;width:12%;background:#EF4444;border-radius:9999px"></div></div>
|
||||
<div style="font-size:11px;color:#64748B;width:20px;text-align:right">12%</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<div style="font-size:11px;color:#64748B;width:80px">Needs Impr (1)</div>
|
||||
<div style="flex:1;height:14px;background:#F1F5F9;border-radius:9999px;overflow:hidden"><div style="height:100%;width:3%;background:#94A3B8;border-radius:9999px"></div></div>
|
||||
<div style="font-size:11px;color:#64748B;width:20px;text-align:right">3%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,373 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BetterHuman — Analytics</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; display: flex; min-height: 100vh; font-size: 14px; color: #0F172A; }
|
||||
|
||||
.sidebar { width: 240px; background: #0F172A; min-height: 100vh; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 10; overflow-y: auto; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.logo-icon svg { width: 20px; height: 20px; }
|
||||
.logo-name { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; color: #FFFFFF; }
|
||||
.logo-company { font-size: 11px; color: #475569; font-weight: 500; }
|
||||
.sidebar-search { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.sidebar-search input { width: 100%; padding: 7px 10px 7px 32px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: #94A3B8; font-size: 12px; font-family: 'Inter', sans-serif; outline: none; }
|
||||
.search-wrap { position: relative; }
|
||||
.search-wrap svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: #475569; }
|
||||
.sidebar-nav { padding: 8px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: #334155; padding: 16px 20px 6px; text-transform: uppercase; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; margin: 1px 8px; border-radius: 7px; color: #64748B; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; text-decoration: none; }
|
||||
.nav-item:hover { background: #1E293B; color: #CBD5E1; }
|
||||
.nav-item.active { background: #6366F1; color: #FFFFFF; }
|
||||
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #EF4444; color: white; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9999px; }
|
||||
.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; }
|
||||
.footer-name { font-size: 12px; font-weight: 600; color: #CBD5E1; }
|
||||
.footer-role { font-size: 11px; color: #475569; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; position: sticky; top: 0; z-index: 5; }
|
||||
.topbar-left { display: flex; flex-direction: column; }
|
||||
.page-title { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; color: #0F172A; }
|
||||
.page-breadcrumb { font-size: 12px; color: #94A3B8; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 12px; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E2E8F0; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #FFFFFF; }
|
||||
.topbar-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: white; }
|
||||
.content { padding: 32px; flex: 1; }
|
||||
|
||||
.btn-primary { display: flex; align-items: center; gap: 8px; padding: 9px 18px; background: #6366F1; color: #FFFFFF; border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.btn-secondary { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #FFFFFF; color: #0F172A; border: 1.5px solid #E2E8F0; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; }
|
||||
.btn-primary svg, .btn-secondary svg { width: 15px; height: 15px; }
|
||||
|
||||
/* KPI CARDS */
|
||||
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.kpi-card { background: #FFFFFF; border-radius: 12px; padding: 20px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
||||
.kpi-label { font-size: 12px; color: #64748B; font-weight: 500; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.kpi-value { font-family: 'Sora', sans-serif; font-size: 26px; font-weight: 700; color: #0F172A; }
|
||||
.kpi-delta { font-size: 12px; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
|
||||
.delta-up { color: #10B981; }
|
||||
.delta-down { color: #EF4444; }
|
||||
.delta-neutral { color: #64748B; }
|
||||
|
||||
/* MAIN GRID */
|
||||
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
|
||||
.analytics-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; margin-bottom: 20px; }
|
||||
.card { background: #FFFFFF; border-radius: 12px; padding: 20px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
||||
.card-title { font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700; color: #0F172A; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
|
||||
.card-action { font-size: 12px; color: #6366F1; cursor: pointer; }
|
||||
|
||||
/* HORIZONTAL BAR CHART */
|
||||
.h-bar-chart { display: flex; flex-direction: column; gap: 12px; }
|
||||
.h-bar-row { display: flex; align-items: center; gap: 12px; }
|
||||
.h-bar-label { font-size: 12px; color: #64748B; width: 90px; text-align: right; flex-shrink: 0; }
|
||||
.h-bar-track { flex: 1; height: 24px; background: #F1F5F9; border-radius: 6px; overflow: hidden; }
|
||||
.h-bar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 8px; }
|
||||
.h-bar-fill.indigo { background: linear-gradient(90deg, #6366F1, #818CF8); }
|
||||
.h-bar-fill.green { background: linear-gradient(90deg, #10B981, #34D399); }
|
||||
.h-bar-fill.teal { background: linear-gradient(90deg, #14B8A6, #2DD4BF); }
|
||||
.h-bar-fill.amber { background: linear-gradient(90deg, #F59E0B, #FCD34D); }
|
||||
.h-bar-fill.blue { background: linear-gradient(90deg, #3B82F6, #60A5FA); }
|
||||
.h-bar-fill.purple { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }
|
||||
.h-bar-count { font-size: 11px; font-weight: 700; color: white; }
|
||||
.h-bar-num { font-size: 12px; color: #64748B; width: 30px; text-align: right; flex-shrink: 0; }
|
||||
|
||||
/* GENDER DISTRIBUTION */
|
||||
.gender-bar { height: 28px; border-radius: 8px; overflow: hidden; display: flex; margin-bottom: 16px; }
|
||||
.gender-segment { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; }
|
||||
.g-male { background: #6366F1; }
|
||||
.g-female { background: #EC4899; }
|
||||
.g-other { background: #94A3B8; }
|
||||
.gender-legend { display: flex; gap: 16px; }
|
||||
.g-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #64748B; }
|
||||
.g-dot { width: 10px; height: 10px; border-radius: 50%; }
|
||||
|
||||
/* TENURE CARDS */
|
||||
.tenure-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
|
||||
.tenure-card { background: #FFFFFF; border-radius: 10px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); text-align: center; }
|
||||
.tenure-label { font-size: 11px; color: #64748B; margin-bottom: 8px; }
|
||||
.tenure-value { font-family: 'Sora', sans-serif; font-size: 28px; font-weight: 700; color: #0F172A; }
|
||||
.tenure-sub { font-size: 11px; color: #94A3B8; margin-top: 4px; }
|
||||
|
||||
/* ATTRITION CHART */
|
||||
.att-chart { display: flex; align-items: flex-end; gap: 10px; height: 100px; }
|
||||
.att-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
|
||||
.att-bar { width: 100%; border-radius: 4px 4px 0 0; }
|
||||
.att-label { font-size: 10px; color: #94A3B8; }
|
||||
|
||||
/* REPORTS TABLE */
|
||||
.table-card { background: #FFFFFF; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th { background: #F8FAFC; padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid #E2E8F0; }
|
||||
tbody tr { border-bottom: 1px solid #F1F5F9; transition: background 0.12s; }
|
||||
tbody tr:last-child { border-bottom: none; }
|
||||
tbody tr:hover { background: #F8FAFC; }
|
||||
tbody td { padding: 13px 16px; font-size: 13px; color: #374151; vertical-align: middle; }
|
||||
.dl-btn { width: 28px; height: 28px; border: 1px solid #E2E8F0; border-radius: 6px; background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
|
||||
.dl-btn svg { width: 13px; height: 13px; color: #6366F1; }
|
||||
|
||||
.date-range { padding: 8px 14px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; color: #374151; background: #FFFFFF; outline: none; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="white" 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><div class="logo-name">BetterHuman</div><div class="logo-company">TechCorp India Pvt. Ltd.</div></div>
|
||||
</div>
|
||||
<div class="sidebar-search"><div class="search-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input type="text" placeholder="Search people, docs..."></div></div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main</div>
|
||||
<a class="nav-item" href="02-dashboard.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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-people.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>People</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>Org Chart</a>
|
||||
<div class="nav-section-label">Workforce</div>
|
||||
<a class="nav-item" href="07-recruitment.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>Recruitment</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>Onboarding</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="05-leave.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="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<span class="nav-badge">5</span></a>
|
||||
<a class="nav-item" href="06-payroll.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
<div class="nav-section-label">Talent</div>
|
||||
<a class="nav-item" href="08-performance.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Performance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Learning</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>Benefits</a>
|
||||
<div class="nav-section-label">Culture</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Engagement</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>Recognition</a>
|
||||
<div class="nav-section-label">Insights</div>
|
||||
<a class="nav-item active" href="09-analytics.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Analytics</a>
|
||||
<div class="nav-section-label">Admin</div>
|
||||
<a class="nav-item" href="10-settings.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer"><div class="avatar-sm">PS</div><div><div class="footer-name">Priya Sharma</div><div class="footer-role">HR Admin</div></div></div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<span class="page-title">Analytics & Reports</span>
|
||||
<span class="page-breadcrumb">People insights and workforce trends</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<input type="text" class="date-range" value="Jan 1, 2026 — May 5, 2026">
|
||||
<button class="btn-secondary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
Export
|
||||
</button>
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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><div class="notif-dot"></div></div>
|
||||
<div class="topbar-avatar">PS</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<!-- KPI Cards -->
|
||||
<div class="kpi-row">
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">Headcount Growth <span style="font-size:10px;background:#ECFDF5;color:#059669;padding:2px 6px;border-radius:9999px">vs Q1</span></div>
|
||||
<div class="kpi-value">+12%</div>
|
||||
<div class="kpi-delta delta-up">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
|
||||
+27 employees this quarter
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">Attrition Rate <span style="font-size:10px;background:#FFFBEB;color:#D97706;padding:2px 6px;border-radius:9999px">YTD</span></div>
|
||||
<div class="kpi-value">8.2%</div>
|
||||
<div class="kpi-delta delta-up">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
|
||||
Down from 11.4% last year
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">Avg Time to Hire <span style="font-size:10px;background:#EEF2FF;color:#6366F1;padding:2px 6px;border-radius:9999px">Days</span></div>
|
||||
<div class="kpi-value">24 days</div>
|
||||
<div class="kpi-delta delta-up">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
|
||||
3 days faster than Q4
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">Engagement Score <span style="font-size:10px;background:#F5F3FF;color:#8B5CF6;padding:2px 6px;border-radius:9999px">eNPS</span></div>
|
||||
<div class="kpi-value">78%</div>
|
||||
<div class="kpi-delta delta-up">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
|
||||
+3 pts from last survey
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Charts Row 1 -->
|
||||
<div class="analytics-grid">
|
||||
<!-- Headcount by Dept -->
|
||||
<div class="card">
|
||||
<div class="card-title">Headcount by Department <span class="card-action">Details</span></div>
|
||||
<div class="h-bar-chart">
|
||||
<div class="h-bar-row">
|
||||
<div class="h-bar-label">Engineering</div>
|
||||
<div class="h-bar-track"><div class="h-bar-fill indigo" style="width:89%"><span class="h-bar-count">89</span></div></div>
|
||||
<div class="h-bar-num">89</div>
|
||||
</div>
|
||||
<div class="h-bar-row">
|
||||
<div class="h-bar-label">Sales</div>
|
||||
<div class="h-bar-track"><div class="h-bar-fill green" style="width:45%"><span class="h-bar-count">45</span></div></div>
|
||||
<div class="h-bar-num">45</div>
|
||||
</div>
|
||||
<div class="h-bar-row">
|
||||
<div class="h-bar-label">Operations</div>
|
||||
<div class="h-bar-track"><div class="h-bar-fill teal" style="width:35%"><span class="h-bar-count">35</span></div></div>
|
||||
<div class="h-bar-num">35</div>
|
||||
</div>
|
||||
<div class="h-bar-row">
|
||||
<div class="h-bar-label">Product</div>
|
||||
<div class="h-bar-track"><div class="h-bar-fill amber" style="width:28%"><span class="h-bar-count">28</span></div></div>
|
||||
<div class="h-bar-num">28</div>
|
||||
</div>
|
||||
<div class="h-bar-row">
|
||||
<div class="h-bar-label">Finance</div>
|
||||
<div class="h-bar-track"><div class="h-bar-fill blue" style="width:18%"><span class="h-bar-count">18</span></div></div>
|
||||
<div class="h-bar-num">18</div>
|
||||
</div>
|
||||
<div class="h-bar-row">
|
||||
<div class="h-bar-label">HR</div>
|
||||
<div class="h-bar-track"><div class="h-bar-fill purple" style="width:12%"><span class="h-bar-count">12</span></div></div>
|
||||
<div class="h-bar-num">12</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gender + Attrition -->
|
||||
<div style="display:flex;flex-direction:column;gap:20px;">
|
||||
<div class="card">
|
||||
<div class="card-title">Gender Distribution</div>
|
||||
<div class="gender-bar">
|
||||
<div class="gender-segment g-male" style="width:60%">60%</div>
|
||||
<div class="gender-segment g-female" style="width:36%">36%</div>
|
||||
<div class="gender-segment g-other" style="width:4%">4%</div>
|
||||
</div>
|
||||
<div class="gender-legend">
|
||||
<div class="g-item"><div class="g-dot" style="background:#6366F1"></div>Male · 148</div>
|
||||
<div class="g-item"><div class="g-dot" style="background:#EC4899"></div>Female · 89</div>
|
||||
<div class="g-item"><div class="g-dot" style="background:#94A3B8"></div>Other · 10</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">Monthly Attrition <span class="card-action">Last 6 Months</span></div>
|
||||
<div class="att-chart">
|
||||
<div class="att-col">
|
||||
<div class="att-bar" style="height:40px;background:linear-gradient(180deg,#6366F1,#818CF8);border-radius:4px 4px 0 0"></div>
|
||||
<div class="att-label">Nov</div>
|
||||
</div>
|
||||
<div class="att-col">
|
||||
<div class="att-bar" style="height:60px;background:linear-gradient(180deg,#6366F1,#818CF8);border-radius:4px 4px 0 0"></div>
|
||||
<div class="att-label">Dec</div>
|
||||
</div>
|
||||
<div class="att-col">
|
||||
<div class="att-bar" style="height:45px;background:linear-gradient(180deg,#6366F1,#818CF8);border-radius:4px 4px 0 0"></div>
|
||||
<div class="att-label">Jan</div>
|
||||
</div>
|
||||
<div class="att-col">
|
||||
<div class="att-bar" style="height:30px;background:linear-gradient(180deg,#10B981,#34D399);border-radius:4px 4px 0 0"></div>
|
||||
<div class="att-label">Feb</div>
|
||||
</div>
|
||||
<div class="att-col">
|
||||
<div class="att-bar" style="height:50px;background:linear-gradient(180deg,#6366F1,#818CF8);border-radius:4px 4px 0 0"></div>
|
||||
<div class="att-label">Mar</div>
|
||||
</div>
|
||||
<div class="att-col">
|
||||
<div class="att-bar" style="height:35px;background:linear-gradient(180deg,#10B981,#34D399);border-radius:4px 4px 0 0"></div>
|
||||
<div class="att-label">Apr</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tenure -->
|
||||
<div class="tenure-grid" style="margin-bottom:20px">
|
||||
<div class="tenure-card">
|
||||
<div class="tenure-label">Less than 1 year</div>
|
||||
<div class="tenure-value" style="color:#6366F1">42</div>
|
||||
<div class="tenure-sub">17% of workforce</div>
|
||||
</div>
|
||||
<div class="tenure-card">
|
||||
<div class="tenure-label">1–3 years</div>
|
||||
<div class="tenure-value" style="color:#10B981">89</div>
|
||||
<div class="tenure-sub">36% of workforce</div>
|
||||
</div>
|
||||
<div class="tenure-card">
|
||||
<div class="tenure-label">3–5 years</div>
|
||||
<div class="tenure-value" style="color:#F59E0B">67</div>
|
||||
<div class="tenure-sub">27% of workforce</div>
|
||||
</div>
|
||||
<div class="tenure-card">
|
||||
<div class="tenure-label">5+ years</div>
|
||||
<div class="tenure-value" style="color:#8B5CF6">49</div>
|
||||
<div class="tenure-sub">20% of workforce</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reports Table -->
|
||||
<div class="table-card">
|
||||
<div style="padding:16px 20px;border-bottom:1px solid #E2E8F0;display:flex;justify-content:space-between;align-items:center">
|
||||
<div style="font-family:'Sora',sans-serif;font-size:15px;font-weight:700;color:#0F172A">Saved Reports</div>
|
||||
<button class="btn-primary" style="padding:7px 14px;font-size:12px">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
New Report
|
||||
</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Report Name</th>
|
||||
<th>Type</th>
|
||||
<th>Generated By</th>
|
||||
<th>Date</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="font-weight:600;color:#0F172A">Monthly Headcount Report — April 2026</td>
|
||||
<td><span style="padding:2px 8px;background:#EEF2FF;color:#6366F1;border-radius:9999px;font-size:11px;font-weight:500">People</span></td>
|
||||
<td>Priya Sharma</td>
|
||||
<td>May 1, 2026</td>
|
||||
<td><button class="dl-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:600;color:#0F172A">Q1 2026 Attrition Analysis</td>
|
||||
<td><span style="padding:2px 8px;background:#ECFDF5;color:#059669;border-radius:9999px;font-size:11px;font-weight:500">Attrition</span></td>
|
||||
<td>Rahul Mehta</td>
|
||||
<td>Apr 15, 2026</td>
|
||||
<td><button class="dl-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:600;color:#0F172A">Payroll Summary — March 2026</td>
|
||||
<td><span style="padding:2px 8px;background:#FFFBEB;color:#D97706;border-radius:9999px;font-size:11px;font-weight:500">Payroll</span></td>
|
||||
<td>Priya Sharma</td>
|
||||
<td>Apr 1, 2026</td>
|
||||
<td><button class="dl-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-weight:600;color:#0F172A">Engagement Survey Results — Q1</td>
|
||||
<td><span style="padding:2px 8px;background:#F5F3FF;color:#8B5CF6;border-radius:9999px;font-size:11px;font-weight:500">Engagement</span></td>
|
||||
<td>Priya Sharma</td>
|
||||
<td>Mar 31, 2026</td>
|
||||
<td><button class="dl-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,320 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BetterHuman — Settings</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #F8FAFC; display: flex; min-height: 100vh; font-size: 14px; color: #0F172A; }
|
||||
|
||||
.sidebar { width: 240px; background: #0F172A; min-height: 100vh; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 10; overflow-y: auto; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.logo-icon svg { width: 20px; height: 20px; }
|
||||
.logo-name { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; color: #FFFFFF; }
|
||||
.logo-company { font-size: 11px; color: #475569; font-weight: 500; }
|
||||
.sidebar-search { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
.sidebar-search input { width: 100%; padding: 7px 10px 7px 32px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: #94A3B8; font-size: 12px; font-family: 'Inter', sans-serif; outline: none; }
|
||||
.search-wrap { position: relative; }
|
||||
.search-wrap svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: #475569; }
|
||||
.sidebar-nav { padding: 8px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: #334155; padding: 16px 20px 6px; text-transform: uppercase; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; margin: 1px 8px; border-radius: 7px; color: #64748B; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; text-decoration: none; }
|
||||
.nav-item:hover { background: #1E293B; color: #CBD5E1; }
|
||||
.nav-item.active { background: #6366F1; color: #FFFFFF; }
|
||||
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.nav-badge { margin-left: auto; background: #EF4444; color: white; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9999px; }
|
||||
.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; }
|
||||
.footer-name { font-size: 12px; font-weight: 600; color: #CBD5E1; }
|
||||
.footer-role { font-size: 11px; color: #475569; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; position: sticky; top: 0; z-index: 5; }
|
||||
.topbar-left { display: flex; flex-direction: column; }
|
||||
.page-title { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; color: #0F172A; }
|
||||
.page-breadcrumb { font-size: 12px; color: #94A3B8; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 12px; }
|
||||
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E2E8F0; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #FFFFFF; }
|
||||
.topbar-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: white; }
|
||||
.content { padding: 32px; flex: 1; }
|
||||
|
||||
/* SETTINGS LAYOUT */
|
||||
.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
|
||||
|
||||
/* SETTINGS MENU */
|
||||
.settings-menu { background: #FFFFFF; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; align-self: start; }
|
||||
.settings-menu-section { padding: 8px 0; border-bottom: 1px solid #F1F5F9; }
|
||||
.settings-menu-section:last-child { border-bottom: none; }
|
||||
.settings-menu-label { font-size: 10px; font-weight: 600; color: #94A3B8; letter-spacing: 0.07em; text-transform: uppercase; padding: 10px 16px 6px; }
|
||||
.settings-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; color: #64748B; cursor: pointer; transition: all 0.12s; }
|
||||
.settings-menu-item:hover { background: #F8FAFC; color: #374151; }
|
||||
.settings-menu-item.active { background: #EEF2FF; color: #6366F1; font-weight: 600; }
|
||||
.settings-menu-item svg { width: 15px; height: 15px; flex-shrink: 0; }
|
||||
|
||||
/* SETTINGS CONTENT */
|
||||
.settings-content { display: flex; flex-direction: column; gap: 20px; }
|
||||
|
||||
.card { background: #FFFFFF; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
||||
.card-title { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.card-desc { font-size: 13px; color: #64748B; margin-bottom: 24px; }
|
||||
|
||||
/* LOGO UPLOAD */
|
||||
.logo-upload { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; padding: 20px; background: #F8FAFC; border: 2px dashed #E2E8F0; border-radius: 10px; }
|
||||
.logo-preview { width: 72px; height: 72px; border-radius: 12px; background: #0F172A; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.logo-preview span { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 700; color: white; }
|
||||
.logo-info { flex: 1; }
|
||||
.logo-name-text { font-size: 14px; font-weight: 600; color: #0F172A; margin-bottom: 4px; }
|
||||
.logo-hint { font-size: 12px; color: #94A3B8; }
|
||||
.upload-btn { padding: 8px 16px; background: #FFFFFF; border: 1.5px solid #E2E8F0; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: #374151; cursor: pointer; }
|
||||
|
||||
/* FORM */
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 5px; }
|
||||
.form-group.full { grid-column: 1/-1; }
|
||||
.form-label { font-size: 12px; font-weight: 600; color: #374151; }
|
||||
.form-input { padding: 10px 14px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; color: #0F172A; background: #FFFFFF; outline: none; transition: border-color 0.15s; }
|
||||
.form-input:focus { border-color: #6366F1; }
|
||||
.form-select { padding: 10px 14px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; color: #0F172A; background: #FFFFFF; outline: none; }
|
||||
.form-hint { font-size: 11px; color: #94A3B8; }
|
||||
|
||||
.form-divider { border: none; border-top: 1px solid #E2E8F0; margin: 4px 0; }
|
||||
|
||||
.btn-primary { display: flex; align-items: center; gap: 8px; padding: 9px 18px; background: #6366F1; color: #FFFFFF; border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.btn-secondary { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #FFFFFF; color: #0F172A; border: 1.5px solid #E2E8F0; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; }
|
||||
|
||||
/* DANGER ZONE */
|
||||
.danger-card { background: #FFFFFF; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1.5px solid #FECACA; }
|
||||
.danger-title { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; color: #DC2626; margin-bottom: 4px; }
|
||||
.danger-desc { font-size: 13px; color: #64748B; margin-bottom: 16px; }
|
||||
.danger-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid #FEE2E2; }
|
||||
.danger-item:last-child { border-bottom: none; padding-bottom: 0; }
|
||||
.danger-item-text { font-size: 13px; font-weight: 500; color: #374151; }
|
||||
.danger-item-sub { font-size: 12px; color: #94A3B8; margin-top: 2px; }
|
||||
.btn-danger { padding: 8px 16px; background: #FEF2F2; color: #DC2626; border: 1.5px solid #FECACA; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="white" 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><div class="logo-name">BetterHuman</div><div class="logo-company">TechCorp India Pvt. Ltd.</div></div>
|
||||
</div>
|
||||
<div class="sidebar-search"><div class="search-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input type="text" placeholder="Search people, docs..."></div></div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main</div>
|
||||
<a class="nav-item" href="02-dashboard.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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-people.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>People</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>Org Chart</a>
|
||||
<div class="nav-section-label">Workforce</div>
|
||||
<a class="nav-item" href="07-recruitment.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>Recruitment</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>Onboarding</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
|
||||
<a class="nav-item" href="05-leave.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="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<span class="nav-badge">5</span></a>
|
||||
<a class="nav-item" href="06-payroll.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
<div class="nav-section-label">Talent</div>
|
||||
<a class="nav-item" href="08-performance.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Performance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Learning</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>Benefits</a>
|
||||
<div class="nav-section-label">Culture</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>Engagement</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>Recognition</a>
|
||||
<div class="nav-section-label">Insights</div>
|
||||
<a class="nav-item" href="09-analytics.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Analytics</a>
|
||||
<div class="nav-section-label">Admin</div>
|
||||
<a class="nav-item active" href="10-settings.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>Settings</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer"><div class="avatar-sm">PS</div><div><div class="footer-name">Priya Sharma</div><div class="footer-role">HR Admin</div></div></div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<span class="page-title">Settings</span>
|
||||
<span class="page-breadcrumb">Manage your workspace configuration</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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><div class="notif-dot"></div></div>
|
||||
<div class="topbar-avatar">PS</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="settings-layout">
|
||||
<!-- Settings Menu -->
|
||||
<div class="settings-menu">
|
||||
<div class="settings-menu-section">
|
||||
<div class="settings-menu-label">Organization</div>
|
||||
<div class="settings-menu-item active">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>
|
||||
Company
|
||||
</div>
|
||||
<div class="settings-menu-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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
|
||||
</div>
|
||||
<div class="settings-menu-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>
|
||||
Positions
|
||||
</div>
|
||||
<div class="settings-menu-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
Locations
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-menu-section">
|
||||
<div class="settings-menu-label">Access</div>
|
||||
<div class="settings-menu-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
|
||||
Roles & Permissions
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-menu-section">
|
||||
<div class="settings-menu-label">Preferences</div>
|
||||
<div class="settings-menu-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
Notifications
|
||||
</div>
|
||||
<div class="settings-menu-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
Integrations
|
||||
</div>
|
||||
<div class="settings-menu-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
Billing
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Content -->
|
||||
<div class="settings-content">
|
||||
<!-- Company Profile -->
|
||||
<div class="card">
|
||||
<div class="card-title">Company Profile</div>
|
||||
<div class="card-desc">Update your company's basic information and branding.</div>
|
||||
|
||||
<!-- Logo -->
|
||||
<div class="logo-upload">
|
||||
<div class="logo-preview"><span>TC</span></div>
|
||||
<div class="logo-info">
|
||||
<div class="logo-name-text">TechCorp India Pvt. Ltd.</div>
|
||||
<div class="logo-hint">PNG, JPG, SVG — Max 2MB · Recommended 400x400px</div>
|
||||
</div>
|
||||
<button class="upload-btn">Upload Logo</button>
|
||||
</div>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Company Name</label>
|
||||
<input type="text" class="form-input" value="TechCorp India Pvt. Ltd.">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Domain</label>
|
||||
<input type="text" class="form-input" value="techcorp.in">
|
||||
<span class="form-hint">Used for SSO and employee email validation</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Industry</label>
|
||||
<select class="form-select">
|
||||
<option selected>Technology / Software</option>
|
||||
<option>E-commerce</option>
|
||||
<option>Financial Services</option>
|
||||
<option>Healthcare</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Company Size</label>
|
||||
<select class="form-select">
|
||||
<option>51–200 employees</option>
|
||||
<option selected>201–500 employees</option>
|
||||
<option>501–1000 employees</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Timezone</label>
|
||||
<select class="form-select">
|
||||
<option selected>Asia/Kolkata (IST +5:30)</option>
|
||||
<option>UTC</option>
|
||||
<option>America/New_York</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Country</label>
|
||||
<select class="form-select">
|
||||
<option selected>India</option>
|
||||
<option>United States</option>
|
||||
<option>Singapore</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Fiscal Year Start</label>
|
||||
<select class="form-select">
|
||||
<option selected>April (Indian FY)</option>
|
||||
<option>January</option>
|
||||
<option>July</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">CIN Number</label>
|
||||
<input type="text" class="form-input" value="U72200KA2018PTC120456">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="form-divider" style="margin:20px 0">
|
||||
|
||||
<div style="font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:#0F172A;margin-bottom:14px">Currency & Locale</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Primary Currency</label>
|
||||
<select class="form-select">
|
||||
<option selected>INR — Indian Rupee (₹)</option>
|
||||
<option>USD — US Dollar ($)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Date Format</label>
|
||||
<select class="form-select">
|
||||
<option selected>DD/MM/YYYY</option>
|
||||
<option>MM/DD/YYYY</option>
|
||||
<option>YYYY-MM-DD</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:10px;margin-top:24px">
|
||||
<button class="btn-primary">Save Changes</button>
|
||||
<button class="btn-secondary">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Danger Zone -->
|
||||
<div class="danger-card">
|
||||
<div class="danger-title">Danger Zone</div>
|
||||
<div class="danger-desc">Actions in this section are irreversible. Please proceed with extreme caution.</div>
|
||||
<div class="danger-item">
|
||||
<div>
|
||||
<div class="danger-item-text">Export All Company Data</div>
|
||||
<div class="danger-item-sub">Download a full JSON/CSV export of all employee data, payroll records, and settings.</div>
|
||||
</div>
|
||||
<button class="btn-danger">Export Data</button>
|
||||
</div>
|
||||
<div class="danger-item">
|
||||
<div>
|
||||
<div class="danger-item-text">Delete Company Account</div>
|
||||
<div class="danger-item-sub">Permanently delete this workspace and all associated data. This cannot be undone.</div>
|
||||
</div>
|
||||
<button class="btn-danger" style="background:#EF4444;color:white;border-color:#EF4444">Delete Account</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,363 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BetterHuman — Design Gallery</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #0F172A;
|
||||
min-height: 100vh;
|
||||
color: #CBD5E1;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
.header {
|
||||
padding: 48px 64px 36px;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
position: relative;
|
||||
}
|
||||
.header::before {
|
||||
content: '';
|
||||
position: absolute; top: 0; left: 0; right: 0; height: 3px;
|
||||
background: linear-gradient(90deg, #6366F1, #8B5CF6, #EC4899, #F59E0B);
|
||||
}
|
||||
.logo-wrap { display: flex; align-items: center; gap: 14px; }
|
||||
.logo-icon {
|
||||
width: 52px; height: 52px;
|
||||
background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
|
||||
border-radius: 12px; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.logo-icon svg { width: 28px; height: 28px; }
|
||||
.logo-text { display: flex; flex-direction: column; }
|
||||
.logo-name { font-family: 'Sora', sans-serif; font-size: 26px; font-weight: 700; color: #FFFFFF; line-height: 1.1; }
|
||||
.logo-tagline { font-size: 13px; color: #475569; margin-top: 2px; }
|
||||
|
||||
.header-right { text-align: right; }
|
||||
.design-version { font-size: 12px; color: #475569; }
|
||||
.design-count { font-family: 'Sora', sans-serif; font-size: 28px; font-weight: 700; color: #6366F1; }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
padding: 40px 64px 48px;
|
||||
background: linear-gradient(180deg, rgba(99,102,241,0.08) 0%, transparent 100%);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.hero-title {
|
||||
font-family: 'Sora', sans-serif; font-size: 36px; font-weight: 700;
|
||||
color: #FFFFFF; max-width: 640px; line-height: 1.25; margin-bottom: 12px;
|
||||
}
|
||||
.hero-title span { color: #818CF8; }
|
||||
.hero-desc { font-size: 15px; color: #64748B; max-width: 560px; line-height: 1.7; margin-bottom: 24px; }
|
||||
.hero-pills { display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
.pill {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 6px 14px; border-radius: 9999px;
|
||||
background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.25);
|
||||
font-size: 12px; color: #818CF8; font-weight: 500;
|
||||
}
|
||||
.pill svg { width: 13px; height: 13px; }
|
||||
|
||||
/* GALLERY */
|
||||
.gallery { padding: 48px 64px; }
|
||||
.gallery-title {
|
||||
font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700;
|
||||
color: #334155; text-transform: uppercase; letter-spacing: 0.1em;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.design-card {
|
||||
background: #1E293B; border-radius: 14px;
|
||||
border: 1px solid rgba(255,255,255,0.07);
|
||||
overflow: hidden; transition: transform 0.2s, box-shadow 0.2s;
|
||||
cursor: pointer; text-decoration: none; display: block;
|
||||
}
|
||||
.design-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,0.4);
|
||||
border-color: rgba(99,102,241,0.4);
|
||||
}
|
||||
|
||||
.card-preview {
|
||||
height: 160px; display: flex; align-items: center; justify-content: center;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.preview-bg-login { background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #312E81 100%); }
|
||||
.preview-bg-dashboard { background: linear-gradient(135deg, #0F172A 50%, #1E293B 100%); }
|
||||
.preview-bg-people { background: linear-gradient(135deg, #F8FAFC 0%, #EEF2FF 100%); }
|
||||
.preview-bg-profile { background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%); }
|
||||
.preview-bg-leave { background: linear-gradient(135deg, #ECFDF5 0%, #EEF2FF 100%); }
|
||||
.preview-bg-payroll { background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%); }
|
||||
.preview-bg-recruitment { background: linear-gradient(135deg, #0F172A 0%, #1E293B 70%, #312E81 100%); }
|
||||
.preview-bg-performance { background: linear-gradient(135deg, #F5F3FF 0%, #EEF2FF 100%); }
|
||||
.preview-bg-analytics { background: linear-gradient(135deg, #EEF2FF 0%, #F0FDF4 100%); }
|
||||
.preview-bg-settings { background: linear-gradient(135deg, #F8FAFC 0%, #FFFFFF 100%); }
|
||||
|
||||
.preview-icon {
|
||||
width: 56px; height: 56px; border-radius: 14px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.preview-icon svg { width: 28px; height: 28px; }
|
||||
.preview-icon.indigo { background: linear-gradient(135deg, #6366F1, #8B5CF6); box-shadow: 0 8px 24px rgba(99,102,241,0.4); }
|
||||
.preview-icon.green { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 8px 24px rgba(16,185,129,0.4); }
|
||||
.preview-icon.amber { background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 8px 24px rgba(245,158,11,0.4); }
|
||||
.preview-icon.red { background: linear-gradient(135deg, #EF4444, #DC2626); box-shadow: 0 8px 24px rgba(239,68,68,0.4); }
|
||||
.preview-icon.blue { background: linear-gradient(135deg, #3B82F6, #2563EB); box-shadow: 0 8px 24px rgba(59,130,246,0.4); }
|
||||
.preview-icon.purple { background: linear-gradient(135deg, #8B5CF6, #7C3AED); box-shadow: 0 8px 24px rgba(139,92,246,0.4); }
|
||||
.preview-icon.teal { background: linear-gradient(135deg, #14B8A6, #0D9488); box-shadow: 0 8px 24px rgba(20,184,166,0.4); }
|
||||
.preview-icon.pink { background: linear-gradient(135deg, #EC4899, #DB2777); box-shadow: 0 8px 24px rgba(236,72,153,0.4); }
|
||||
.preview-icon.navy { background: linear-gradient(135deg, #1E40AF, #1E3A8A); box-shadow: 0 8px 24px rgba(30,64,175,0.3); }
|
||||
.preview-icon.gray { background: linear-gradient(135deg, #475569, #334155); box-shadow: 0 8px 24px rgba(71,85,105,0.4); }
|
||||
|
||||
/* Decorative elements in preview */
|
||||
.preview-dots { position: absolute; top: 16px; left: 16px; display: flex; gap: 5px; }
|
||||
.preview-dot { width: 8px; height: 8px; border-radius: 50%; }
|
||||
.preview-bar { position: absolute; bottom: 20px; left: 20px; right: 20px; height: 4px; border-radius: 9999px; background: rgba(255,255,255,0.08); overflow: hidden; }
|
||||
.preview-bar-fill { height: 100%; border-radius: 9999px; background: rgba(99,102,241,0.6); }
|
||||
.preview-grid-lines { position: absolute; inset: 0; opacity: 0.05; background-image: repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(255,255,255,1) 20px, rgba(255,255,255,1) 21px), repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(255,255,255,1) 20px, rgba(255,255,255,1) 21px); }
|
||||
|
||||
.card-body { padding: 16px 18px; }
|
||||
.card-number { font-size: 10px; font-weight: 700; color: #475569; letter-spacing: 0.08em; margin-bottom: 4px; }
|
||||
.card-title-text { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; color: #E2E8F0; margin-bottom: 6px; }
|
||||
.card-desc-text { font-size: 12px; color: #475569; line-height: 1.5; margin-bottom: 12px; }
|
||||
.view-btn {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 7px 14px; border-radius: 7px;
|
||||
background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3);
|
||||
color: #818CF8; font-size: 12px; font-weight: 600;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.view-btn svg { width: 12px; height: 12px; transition: transform 0.15s; }
|
||||
.design-card:hover .view-btn { background: #6366F1; border-color: #6366F1; color: white; }
|
||||
.design-card:hover .view-btn svg { transform: translateX(2px); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer {
|
||||
padding: 32px 64px;
|
||||
border-top: 1px solid rgba(255,255,255,0.06);
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
}
|
||||
.footer-left { font-size: 13px; color: #334155; }
|
||||
.footer-right { display: flex; gap: 8px; }
|
||||
.tech-badge {
|
||||
padding: 4px 10px; border-radius: 9999px;
|
||||
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
|
||||
font-size: 11px; color: #475569;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="header">
|
||||
<div class="logo-wrap">
|
||||
<div class="logo-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="white" 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">
|
||||
<div class="logo-name">BetterHuman</div>
|
||||
<div class="logo-tagline">HR Platform — Design Mockups</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="design-version">Version 1.0 · May 2026</div>
|
||||
<div class="design-count">10 Screens</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HERO -->
|
||||
<div class="hero">
|
||||
<div class="hero-title">Design System &<br><span>Mockup Gallery</span></div>
|
||||
<div class="hero-desc">A comprehensive set of UI mockups for BetterHuman — the modern HR platform for India's growing SMB and mid-market companies. All mockups are fully responsive, use realistic data, and follow a consistent design system.</div>
|
||||
<div class="hero-pills">
|
||||
<div class="pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Inter + Sora Fonts</div>
|
||||
<div class="pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Indigo Design System</div>
|
||||
<div class="pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>8px Grid</div>
|
||||
<div class="pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>India-First Data</div>
|
||||
<div class="pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Pure HTML/CSS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- GALLERY -->
|
||||
<div class="gallery">
|
||||
<div class="gallery-title">All Screens</div>
|
||||
<div class="gallery-grid">
|
||||
|
||||
<!-- 01 Login -->
|
||||
<a class="design-card" href="01-login.html">
|
||||
<div class="card-preview preview-bg-login">
|
||||
<div class="preview-grid-lines"></div>
|
||||
<div class="preview-dots">
|
||||
<div class="preview-dot" style="background:#EF4444"></div>
|
||||
<div class="preview-dot" style="background:#F59E0B"></div>
|
||||
<div class="preview-dot" style="background:#10B981"></div>
|
||||
</div>
|
||||
<div class="preview-icon navy"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg></div>
|
||||
<div class="preview-bar" style="width:60%"><div class="preview-bar-fill" style="width:70%"></div></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">01 · Authentication</div>
|
||||
<div class="card-title-text">Login Page</div>
|
||||
<div class="card-desc-text">Split-panel login with Google OAuth, email/password, and brand storytelling on the left.</div>
|
||||
<div class="view-btn">View Design <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 02 Dashboard -->
|
||||
<a class="design-card" href="02-dashboard.html">
|
||||
<div class="card-preview preview-bg-dashboard">
|
||||
<div class="preview-grid-lines"></div>
|
||||
<div class="preview-dots">
|
||||
<div class="preview-dot" style="background:#6366F1"></div>
|
||||
<div class="preview-dot" style="background:#475569"></div>
|
||||
</div>
|
||||
<div class="preview-icon indigo"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="preview-bar"><div class="preview-bar-fill" style="width:85%"></div></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">02 · Overview</div>
|
||||
<div class="card-title-text">HR Admin Dashboard</div>
|
||||
<div class="card-desc-text">KPI metrics, headcount charts, pending approvals, upcoming birthdays, and recent hires.</div>
|
||||
<div class="view-btn">View Design <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 03 People -->
|
||||
<a class="design-card" href="03-people.html">
|
||||
<div class="card-preview preview-bg-people">
|
||||
<div class="preview-icon blue"><svg viewBox="0 0 24 24" fill="none" stroke="white" 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>
|
||||
<div class="card-body">
|
||||
<div class="card-number">03 · People</div>
|
||||
<div class="card-title-text">Employee Directory</div>
|
||||
<div class="card-desc-text">Searchable employee table with filters, status badges, manager info, and bulk actions.</div>
|
||||
<div class="view-btn">View Design <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 04 Profile -->
|
||||
<a class="design-card" href="04-employee-profile.html">
|
||||
<div class="card-preview preview-bg-profile">
|
||||
<div class="preview-icon purple"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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-number">04 · People</div>
|
||||
<div class="card-title-text">Employee Profile</div>
|
||||
<div class="card-desc-text">Detailed employee view with tabbed sections: personal info, work details, leave balance, documents.</div>
|
||||
<div class="view-btn">View Design <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 05 Leave -->
|
||||
<a class="design-card" href="05-leave.html">
|
||||
<div class="card-preview preview-bg-leave">
|
||||
<div class="preview-icon green"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="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-number">05 · Workforce</div>
|
||||
<div class="card-title-text">Leave Management</div>
|
||||
<div class="card-desc-text">Leave balance tracker, monthly calendar with color-coded days, team absence view.</div>
|
||||
<div class="view-btn">View Design <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 06 Payroll -->
|
||||
<a class="design-card" href="06-payroll.html">
|
||||
<div class="card-preview preview-bg-payroll">
|
||||
<div class="preview-icon teal"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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-number">06 · Workforce</div>
|
||||
<div class="card-title-text">Payroll</div>
|
||||
<div class="card-desc-text">Monthly payroll summary with PF, ESI, TDS breakdown and per-employee payslips.</div>
|
||||
<div class="view-btn">View Design <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 07 Recruitment -->
|
||||
<a class="design-card" href="07-recruitment.html">
|
||||
<div class="card-preview preview-bg-recruitment">
|
||||
<div class="preview-grid-lines"></div>
|
||||
<div class="preview-dots">
|
||||
<div class="preview-dot" style="background:#6366F1"></div>
|
||||
<div class="preview-dot" style="background:#475569"></div>
|
||||
</div>
|
||||
<div class="preview-icon amber"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg></div>
|
||||
<div class="preview-bar"><div class="preview-bar-fill" style="width:55%"></div></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">07 · Workforce</div>
|
||||
<div class="card-title-text">Recruitment — ATS</div>
|
||||
<div class="card-desc-text">Full Kanban pipeline: Applied → Screening → Interview → Offer → Hired. Jobs sidebar included.</div>
|
||||
<div class="view-btn">View Design <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 08 Performance -->
|
||||
<a class="design-card" href="08-performance.html">
|
||||
<div class="card-preview preview-bg-performance">
|
||||
<div class="preview-icon pink"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">08 · Talent</div>
|
||||
<div class="card-title-text">Performance Management</div>
|
||||
<div class="card-desc-text">Active review cycle banner, OKR progress bars, pending reviews table, and 1:1 scheduling.</div>
|
||||
<div class="view-btn">View Design <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 09 Analytics -->
|
||||
<a class="design-card" href="09-analytics.html">
|
||||
<div class="card-preview preview-bg-analytics">
|
||||
<div class="preview-icon indigo"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">09 · Insights</div>
|
||||
<div class="card-title-text">Analytics Dashboard</div>
|
||||
<div class="card-desc-text">KPIs, headcount charts, gender distribution, tenure breakdown, attrition trends, saved reports.</div>
|
||||
<div class="view-btn">View Design <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 10 Settings -->
|
||||
<a class="design-card" href="10-settings.html">
|
||||
<div class="card-preview preview-bg-settings">
|
||||
<div class="preview-icon gray"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">10 · Admin</div>
|
||||
<div class="card-title-text">Settings</div>
|
||||
<div class="card-desc-text">Company profile, logo upload, departments, locations, integrations, billing, and danger zone.</div>
|
||||
<div class="view-btn">View Design <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<div class="footer">
|
||||
<div class="footer-left">BetterHuman HR Platform · Design Mockups v1.0 · May 2026 · India</div>
|
||||
<div class="footer-right">
|
||||
<div class="tech-badge">HTML5</div>
|
||||
<div class="tech-badge">CSS3</div>
|
||||
<div class="tech-badge">Inter + Sora</div>
|
||||
<div class="tech-badge">Inline SVG Icons</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user