TenX PM
597 lines
35 KiB
HTML
597 lines
35 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HR Portal v5 — Design Mockups</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; min-height: 100vh; }
|
|
|
|
header {
|
|
background: #FFFFFF; border-bottom: 1px solid #E5E7EB;
|
|
padding: 0 48px;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
height: 64px; position: sticky; top: 0; z-index: 10;
|
|
}
|
|
.header-logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; }
|
|
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
|
.logo-icon svg { width: 16px; height: 16px; }
|
|
.header-badge { background: #EEF2FF; color: #4F46E5; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
|
|
|
|
.hero {
|
|
background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
|
|
padding: 60px 48px; color: #FFFFFF; text-align: center;
|
|
}
|
|
.hero-title { font-size: 40px; font-weight: 800; margin-bottom: 12px; letter-spacing: -1px; }
|
|
.hero-sub { font-size: 18px; color: rgba(255,255,255,0.8); max-width: 560px; margin: 0 auto 28px; line-height: 1.6; }
|
|
.hero-stats { display: flex; justify-content: center; gap: 40px; }
|
|
.hero-stat-num { font-size: 28px; font-weight: 700; }
|
|
.hero-stat-label { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 2px; }
|
|
|
|
.main { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
|
|
|
|
.section { margin-bottom: 48px; }
|
|
.section-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 2px solid #E5E7EB; }
|
|
.section-num { width: 32px; height: 32px; border-radius: 8px; background: #4F46E5; color: #FFF; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
.section-title { font-size: 20px; font-weight: 700; color: #111827; }
|
|
.section-count { background: #F3F4F6; color: #6B7280; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 10px; margin-left: 4px; }
|
|
|
|
.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
|
|
.cards-grid.three { grid-template-columns: repeat(3, 1fr); }
|
|
.cards-grid.two { grid-template-columns: repeat(2, 1fr); }
|
|
|
|
.mockup-card {
|
|
background: #FFFFFF; border-radius: 12px; border: 1px solid #E5E7EB;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
|
overflow: hidden; text-decoration: none; color: inherit;
|
|
transition: all 0.2s; display: block;
|
|
}
|
|
.mockup-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); transform: translateY(-3px); border-color: #C7D2FE; }
|
|
|
|
.card-preview {
|
|
height: 140px; display: flex; align-items: center; justify-content: center;
|
|
font-size: 32px; font-weight: 800; color: rgba(255,255,255,0.9);
|
|
position: relative; overflow: hidden;
|
|
flex-direction: column; gap: 8px;
|
|
}
|
|
.card-preview-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; }
|
|
.card-preview-icon svg { width: 22px; height: 22px; }
|
|
.card-preview-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); }
|
|
.card-preview-num { font-size: 10px; font-weight: 600; background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 10px; color: rgba(255,255,255,0.7); position: absolute; top: 10px; left: 10px; }
|
|
|
|
/* MOCK SIDEBAR IN PREVIEW */
|
|
.preview-sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: rgba(255,255,255,0.15); border-right: 1px solid rgba(255,255,255,0.15); }
|
|
.preview-topbar { position: absolute; top: 0; right: 0; left: 30%; height: 20%; background: rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.15); }
|
|
.preview-content { position: absolute; top: 20%; right: 0; bottom: 0; left: 30%; padding: 8px; }
|
|
.preview-row { height: 6px; background: rgba(255,255,255,0.25); border-radius: 3px; margin-bottom: 5px; }
|
|
.preview-row.short { width: 60%; }
|
|
.preview-row.shorter { width: 40%; }
|
|
.preview-card-row { display: flex; gap: 4px; margin-bottom: 5px; }
|
|
.preview-mini-card { flex: 1; height: 22px; background: rgba(255,255,255,0.2); border-radius: 3px; }
|
|
.preview-table-row { height: 5px; background: rgba(255,255,255,0.15); border-radius: 2px; margin-bottom: 3px; }
|
|
|
|
.card-info { padding: 14px 16px; }
|
|
.card-num { font-size: 11px; font-weight: 700; color: #9CA3AF; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.card-name { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 3px; }
|
|
.card-desc { font-size: 12px; color: #9CA3AF; line-height: 1.4; }
|
|
.card-tag { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
|
|
|
|
.tag-admin { background: #EEF2FF; color: #4F46E5; }
|
|
.tag-employee { background: #ECFDF5; color: #10B981; }
|
|
.tag-public { background: #F5F3FF; color: #7C3AED; }
|
|
|
|
footer {
|
|
background: #111827; padding: 32px 48px; text-align: center;
|
|
color: #9CA3AF; font-size: 14px; margin-top: 24px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<div class="header-logo">
|
|
<div class="logo-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="9" cy="7" r="4"/>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
|
</svg>
|
|
</div>
|
|
HR Portal v5
|
|
</div>
|
|
<div class="header-badge">Design Mockups</div>
|
|
</header>
|
|
|
|
<div class="hero">
|
|
<div class="hero-title">HR Portal v5 — Design Mockups</div>
|
|
<div class="hero-sub">Pixel-perfect HTML/CSS mockups for all 20 screens of the HR management system. Click any card to preview.</div>
|
|
<div class="hero-stats">
|
|
<div>
|
|
<div class="hero-stat-num">20</div>
|
|
<div class="hero-stat-label">Design Screens</div>
|
|
</div>
|
|
<div>
|
|
<div class="hero-stat-num">3</div>
|
|
<div class="hero-stat-label">Page Sections</div>
|
|
</div>
|
|
<div>
|
|
<div class="hero-stat-num">100%</div>
|
|
<div class="hero-stat-label">Self-contained HTML/CSS</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main">
|
|
|
|
<!-- PUBLIC PAGES -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<div class="section-num" style="background:#7C3AED;">P</div>
|
|
<div>
|
|
<div class="section-title">Public Pages <span class="section-count">3 screens</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="cards-grid three">
|
|
|
|
<a href="01-landing.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#4F46E5,#7C3AED);">
|
|
<div class="card-preview-num">01</div>
|
|
<div class="preview-content" style="top:0;left:0;right:0;">
|
|
<div style="padding:8px;border-bottom:1px solid rgba(255,255,255,0.2);display:flex;justify-content:space-between;align-items:center;"><div style="width:40px;height:6px;background:rgba(255,255,255,0.4);border-radius:3px;"></div><div style="width:50px;height:10px;background:rgba(255,255,255,0.25);border-radius:3px;"></div></div>
|
|
<div style="padding:12px 8px;">
|
|
<div style="width:70%;height:12px;background:rgba(255,255,255,0.4);border-radius:3px;margin-bottom:6px;"></div>
|
|
<div style="width:50%;height:8px;background:rgba(255,255,255,0.25);border-radius:3px;margin-bottom:12px;"></div>
|
|
<div style="display:flex;gap:6px;"><div style="width:50px;height:14px;background:rgba(255,255,255,0.4);border-radius:3px;"></div><div style="width:40px;height:14px;background:rgba(255,255,255,0.2);border-radius:3px;"></div></div>
|
|
</div>
|
|
<div style="display:flex;gap:6px;padding:0 8px;"><div style="flex:1;height:50px;background:rgba(255,255,255,0.15);border-radius:6px;"></div><div style="flex:1;height:50px;background:rgba(255,255,255,0.15);border-radius:6px;"></div><div style="flex:1;height:50px;background:rgba(255,255,255,0.15);border-radius:6px;"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 01</div>
|
|
<div class="card-name">Landing Page</div>
|
|
<div class="card-desc">Public marketing page with hero, features, stats, testimonials</div>
|
|
<span class="card-tag tag-public">Public</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="02-login.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#6366F1,#4F46E5);">
|
|
<div class="card-preview-num">02</div>
|
|
<div style="width:90px;background:rgba(255,255,255,0.2);border-radius:8px;padding:10px;text-align:center;">
|
|
<div style="width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.3);margin:0 auto 6px;"></div>
|
|
<div style="width:60px;height:5px;background:rgba(255,255,255,0.4);border-radius:3px;margin:0 auto 8px;"></div>
|
|
<div style="height:16px;background:rgba(255,255,255,0.2);border-radius:3px;margin-bottom:5px;"></div>
|
|
<div style="height:16px;background:rgba(255,255,255,0.2);border-radius:3px;margin-bottom:8px;"></div>
|
|
<div style="height:16px;background:rgba(255,255,255,0.5);border-radius:3px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 02</div>
|
|
<div class="card-name">Login Page</div>
|
|
<div class="card-desc">Employee and admin sign-in with Google SSO option</div>
|
|
<span class="card-tag tag-public">Public</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="03-register.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#7C3AED,#6366F1);">
|
|
<div class="card-preview-num">03</div>
|
|
<div style="width:100px;background:rgba(255,255,255,0.15);border-radius:8px;padding:10px;">
|
|
<div style="display:flex;justify-content:space-between;margin-bottom:8px;">
|
|
<div style="width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.5);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:rgba(0,0,0,0.5);">1</div>
|
|
<div style="flex:1;height:2px;background:rgba(255,255,255,0.4);margin:9px 4px;"></div>
|
|
<div style="width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:rgba(255,255,255,0.7);">2</div>
|
|
<div style="flex:1;height:2px;background:rgba(255,255,255,0.2);margin:9px 4px;"></div>
|
|
<div style="width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:9px;color:rgba(255,255,255,0.5);">3</div>
|
|
</div>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;">
|
|
<div style="height:12px;background:rgba(255,255,255,0.2);border-radius:2px;"></div>
|
|
<div style="height:12px;background:rgba(255,255,255,0.2);border-radius:2px;"></div>
|
|
<div style="height:12px;background:rgba(255,255,255,0.2);border-radius:2px;"></div>
|
|
<div style="height:12px;background:rgba(255,255,255,0.2);border-radius:2px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 03</div>
|
|
<div class="card-name">Company Registration</div>
|
|
<div class="card-desc">Multi-step company setup with admin account creation</div>
|
|
<span class="card-tag tag-public">Public</span>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ADMIN PAGES -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<div class="section-num">A</div>
|
|
<div>
|
|
<div class="section-title">Admin Pages <span class="section-count">15 screens</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="cards-grid">
|
|
|
|
<a href="04-admin-dashboard.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#4F46E5,#6366F1);">
|
|
<div class="card-preview-num">04</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content">
|
|
<div class="preview-card-row"><div class="preview-mini-card"></div><div class="preview-mini-card"></div><div class="preview-mini-card"></div><div class="preview-mini-card"></div></div>
|
|
<div class="preview-card-row"><div class="preview-mini-card" style="height:35px;"></div><div class="preview-mini-card" style="height:35px;"></div></div>
|
|
<div class="preview-card-row"><div class="preview-mini-card" style="height:25px;flex:3;"></div><div class="preview-mini-card" style="height:25px;flex:2;"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 04</div>
|
|
<div class="card-name">Admin Dashboard</div>
|
|
<div class="card-desc">Stats, pending approvals, activity feed, announcements</div>
|
|
<span class="card-tag tag-admin">Admin</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="05-employee-directory.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#3B82F6,#4F46E5);">
|
|
<div class="card-preview-num">05</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content">
|
|
<div style="height:6px;background:rgba(255,255,255,0.3);border-radius:3px;margin-bottom:5px;width:70%;"></div>
|
|
<div class="preview-table-row" style="background:rgba(255,255,255,0.3);"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 05</div>
|
|
<div class="card-name">Employee Directory</div>
|
|
<div class="card-desc">Filterable table of all employees with search and actions</div>
|
|
<span class="card-tag tag-admin">Admin</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="06-employee-profile.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#06B6D4,#3B82F6);">
|
|
<div class="card-preview-num">06</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content">
|
|
<div style="display:flex;gap:4px;margin-bottom:5px;"><div style="width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,0.4);"></div><div style="flex:1;"><div style="height:5px;background:rgba(255,255,255,0.3);border-radius:2px;margin-bottom:3px;"></div><div style="height:4px;background:rgba(255,255,255,0.2);border-radius:2px;width:70%;"></div></div></div>
|
|
<div style="display:flex;gap:3px;margin-bottom:4px;"><div style="flex:1;height:4px;background:rgba(255,255,255,0.3);border-radius:2px;"></div><div style="flex:1;height:4px;background:rgba(255,255,255,0.2);border-radius:2px;"></div><div style="flex:1;height:4px;background:rgba(255,255,255,0.2);border-radius:2px;"></div></div>
|
|
<div class="preview-card-row"><div class="preview-mini-card" style="height:28px;"></div><div class="preview-mini-card" style="height:28px;"></div></div>
|
|
<div class="preview-card-row"><div class="preview-mini-card" style="height:12px;"></div><div class="preview-mini-card" style="height:12px;"></div><div class="preview-mini-card" style="height:12px;"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 06</div>
|
|
<div class="card-name">Employee Profile</div>
|
|
<div class="card-desc">Detailed profile with tabs: overview, leave, attendance, payslips</div>
|
|
<span class="card-tag tag-admin">Admin</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="07-add-employee.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#10B981,#059669);">
|
|
<div class="card-preview-num">07</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content">
|
|
<div style="margin-bottom:4px;background:rgba(255,255,255,0.15);border-radius:4px;padding:5px;">
|
|
<div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;margin-bottom:4px;"></div>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:3px;"><div style="height:10px;background:rgba(255,255,255,0.2);border-radius:2px;"></div><div style="height:10px;background:rgba(255,255,255,0.2);border-radius:2px;"></div></div>
|
|
</div>
|
|
<div style="background:rgba(255,255,255,0.15);border-radius:4px;padding:5px;">
|
|
<div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;margin-bottom:4px;"></div>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:3px;"><div style="height:10px;background:rgba(255,255,255,0.2);border-radius:2px;"></div><div style="height:10px;background:rgba(255,255,255,0.2);border-radius:2px;"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 07</div>
|
|
<div class="card-name">Add Employee</div>
|
|
<div class="card-desc">Multi-section form for personal info, employment, compensation</div>
|
|
<span class="card-tag tag-admin">Admin</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="08-department-management.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#F59E0B,#EF4444);">
|
|
<div class="card-preview-num">08</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content">
|
|
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;">
|
|
<div style="height:35px;background:rgba(255,255,255,0.25);border-radius:4px;"></div>
|
|
<div style="height:35px;background:rgba(255,255,255,0.25);border-radius:4px;"></div>
|
|
<div style="height:35px;background:rgba(255,255,255,0.25);border-radius:4px;"></div>
|
|
<div style="height:35px;background:rgba(255,255,255,0.2);border-radius:4px;"></div>
|
|
<div style="height:35px;background:rgba(255,255,255,0.2);border-radius:4px;"></div>
|
|
<div style="height:35px;background:rgba(255,255,255,0.2);border-radius:4px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 08</div>
|
|
<div class="card-name">Department Management</div>
|
|
<div class="card-desc">Department cards with heads, employee counts, edit/delete</div>
|
|
<span class="card-tag tag-admin">Admin</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="09-leave-requests.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#EF4444,#EC4899);">
|
|
<div class="card-preview-num">09</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content">
|
|
<div style="display:flex;gap:3px;margin-bottom:5px;"><div style="height:4px;background:rgba(255,255,255,0.5);border-radius:2px;width:20px;"></div><div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;flex:1;"></div></div>
|
|
<div class="preview-table-row" style="background:rgba(255,255,255,0.3);"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 09</div>
|
|
<div class="card-name">Leave Requests</div>
|
|
<div class="card-desc">Tabbed leave request management with approve/reject actions</div>
|
|
<span class="card-tag tag-admin">Admin</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="10-leave-types.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#7C3AED,#EC4899);">
|
|
<div class="card-preview-num">10</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content">
|
|
<div class="preview-table-row" style="background:rgba(255,255,255,0.3);"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 10</div>
|
|
<div class="card-name">Leave Types</div>
|
|
<div class="card-desc">Configure leave policies, days/year, carry forward, toggles</div>
|
|
<span class="card-tag tag-admin">Admin</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="11-attendance.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#0EA5E9,#06B6D4);">
|
|
<div class="card-preview-num">11</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content">
|
|
<div class="preview-card-row" style="margin-bottom:5px;"><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div></div>
|
|
<div class="preview-table-row" style="background:rgba(255,255,255,0.3);"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 11</div>
|
|
<div class="card-name">Attendance Log</div>
|
|
<div class="card-desc">Daily attendance with check-in/out times, status badges</div>
|
|
<span class="card-tag tag-admin">Admin</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="12-payroll-dashboard.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#059669,#10B981);">
|
|
<div class="card-preview-num">12</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content">
|
|
<div style="background:rgba(255,255,255,0.15);border-radius:4px;padding:6px;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center;"><div><div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;margin-bottom:3px;width:60px;"></div><div style="height:3px;background:rgba(255,255,255,0.2);border-radius:2px;width:40px;"></div></div><div style="width:40px;height:14px;background:rgba(255,255,255,0.4);border-radius:3px;"></div></div>
|
|
<div class="preview-card-row"><div class="preview-mini-card" style="height:14px;"></div><div class="preview-mini-card" style="height:14px;"></div><div class="preview-mini-card" style="height:14px;"></div><div class="preview-mini-card" style="height:14px;"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 12</div>
|
|
<div class="card-name">Payroll Dashboard</div>
|
|
<div class="card-desc">Monthly payroll status, salary structures, history</div>
|
|
<span class="card-tag tag-admin">Admin</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="13-recruitment.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#D97706,#F59E0B);">
|
|
<div class="card-preview-num">13</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content">
|
|
<div class="preview-card-row" style="margin-bottom:5px;"><div class="preview-mini-card" style="height:22px;"></div><div class="preview-mini-card" style="height:22px;"></div><div class="preview-mini-card" style="height:22px;"></div><div class="preview-mini-card" style="height:22px;"></div></div>
|
|
<div style="display:flex;gap:3px;"><div style="flex:1;min-height:30px;background:rgba(255,255,255,0.15);border-radius:3px;"></div><div style="flex:1;min-height:30px;background:rgba(255,255,255,0.15);border-radius:3px;"></div><div style="flex:1;min-height:30px;background:rgba(255,255,255,0.15);border-radius:3px;"></div><div style="flex:1;min-height:30px;background:rgba(255,255,255,0.15);border-radius:3px;"></div><div style="flex:1;min-height:30px;background:rgba(255,255,255,0.2);border-radius:3px;"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 13</div>
|
|
<div class="card-name">Recruitment</div>
|
|
<div class="card-desc">Job listings with Kanban pipeline for applicant stages</div>
|
|
<span class="card-tag tag-admin">Admin</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="14-expense-claims.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#8B5CF6,#7C3AED);">
|
|
<div class="card-preview-num">14</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content">
|
|
<div class="preview-table-row" style="background:rgba(255,255,255,0.3);"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 14</div>
|
|
<div class="card-name">Expense Claims</div>
|
|
<div class="card-desc">Expense submissions with category badges and receipt links</div>
|
|
<span class="card-tag tag-admin">Admin</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="15-performance-reviews.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#4F46E5,#9333EA);">
|
|
<div class="card-preview-num">15</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content">
|
|
<div style="background:rgba(255,255,255,0.2);border-radius:4px;padding:6px;margin-bottom:5px;"><div style="height:4px;background:rgba(255,255,255,0.4);border-radius:2px;margin-bottom:4px;"></div><div style="height:4px;background:rgba(255,255,255,0.25);border-radius:2px;margin-bottom:6px;width:70%;"></div><div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;"></div></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
<div class="preview-table-row"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 15</div>
|
|
<div class="card-name">Performance Reviews</div>
|
|
<div class="card-desc">Active review cycle with progress bar and history table</div>
|
|
<span class="card-tag tag-admin">Admin</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="16-reports.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#1D4ED8,#4F46E5);">
|
|
<div class="card-preview-num">16</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content">
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:3px;">
|
|
<div style="height:28px;background:rgba(255,255,255,0.2);border-radius:3px;"></div>
|
|
<div style="height:28px;background:rgba(255,255,255,0.2);border-radius:3px;"></div>
|
|
<div style="height:28px;background:rgba(255,255,255,0.15);border-radius:3px;"></div>
|
|
<div style="height:28px;background:rgba(255,255,255,0.15);border-radius:3px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 16</div>
|
|
<div class="card-name">Reports & Analytics</div>
|
|
<div class="card-desc">6 CSS-based charts: line, bar, donut, horizontal bars</div>
|
|
<span class="card-tag tag-admin">Admin</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="17-settings.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#374151,#6B7280);">
|
|
<div class="card-preview-num">17</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content" style="display:flex;gap:4px;">
|
|
<div style="width:28%;background:rgba(255,255,255,0.1);border-radius:3px;"></div>
|
|
<div style="flex:1;"><div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;margin-bottom:4px;"></div><div style="height:3px;background:rgba(255,255,255,0.15);border-radius:2px;margin-bottom:6px;width:70%;"></div><div style="height:22px;background:rgba(255,255,255,0.15);border-radius:3px;margin-bottom:4px;"></div><div style="height:18px;background:rgba(255,255,255,0.15);border-radius:3px;"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 17</div>
|
|
<div class="card-name">Settings</div>
|
|
<div class="card-desc">Company profile, logo upload, work hours config, sub-nav</div>
|
|
<span class="card-tag tag-admin">Admin</span>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- EMPLOYEE PAGES -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<div class="section-num" style="background:#10B981;">E</div>
|
|
<div>
|
|
<div class="section-title">Employee Pages <span class="section-count">3 screens</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="cards-grid three">
|
|
|
|
<a href="18-employee-dashboard.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#059669,#10B981);">
|
|
<div class="card-preview-num">18</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content">
|
|
<div style="background:rgba(255,255,255,0.2);border-radius:4px;padding:5px;margin-bottom:4px;display:flex;justify-content:space-between;"><div style="height:5px;background:rgba(255,255,255,0.4);border-radius:2px;width:60%;"></div><div style="height:12px;background:rgba(255,255,255,0.3);border-radius:3px;width:30%;"></div></div>
|
|
<div class="preview-card-row"><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div></div>
|
|
<div class="preview-card-row"><div class="preview-mini-card" style="height:25px;"></div><div class="preview-mini-card" style="height:25px;"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 18</div>
|
|
<div class="card-name">Employee Dashboard</div>
|
|
<div class="card-desc">Personal dashboard: quick actions, leave balance, payslip, announcements</div>
|
|
<span class="card-tag tag-employee">Employee</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="19-my-leave.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#2DD4BF,#059669);">
|
|
<div class="card-preview-num">19</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content">
|
|
<div class="preview-card-row" style="margin-bottom:4px;"><div class="preview-mini-card" style="height:20px;"></div><div class="preview-mini-card" style="height:20px;"></div><div class="preview-mini-card" style="height:20px;"></div></div>
|
|
<div style="background:rgba(255,255,255,0.2);border-radius:4px;padding:5px;margin-bottom:4px;"><div style="display:grid;grid-template-columns:1fr 1fr;gap:3px;"><div style="height:10px;background:rgba(255,255,255,0.3);border-radius:2px;"></div><div style="height:10px;background:rgba(255,255,255,0.3);border-radius:2px;"></div></div></div>
|
|
<div class="preview-table-row"></div><div class="preview-table-row"></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 19</div>
|
|
<div class="card-name">My Leave</div>
|
|
<div class="card-desc">Leave balances, inline request form, and leave history</div>
|
|
<span class="card-tag tag-employee">Employee</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="20-org-chart.html" class="mockup-card">
|
|
<div class="card-preview" style="background:linear-gradient(135deg,#6366F1,#8B5CF6);">
|
|
<div class="card-preview-num">20</div>
|
|
<div class="preview-sidebar"></div>
|
|
<div class="preview-topbar"></div>
|
|
<div class="preview-content" style="display:flex;flex-direction:column;align-items:center;padding-top:4px;">
|
|
<div style="width:40px;height:18px;background:rgba(255,255,255,0.35);border-radius:4px;margin-bottom:4px;"></div>
|
|
<div style="width:2px;height:8px;background:rgba(255,255,255,0.3);"></div>
|
|
<div style="display:flex;gap:6px;align-items:flex-start;">
|
|
<div style="display:flex;flex-direction:column;align-items:center;"><div style="width:2px;height:8px;background:rgba(255,255,255,0.3);"></div><div style="width:30px;height:16px;background:rgba(255,255,255,0.3);border-radius:3px;"></div></div>
|
|
<div style="display:flex;flex-direction:column;align-items:center;"><div style="width:2px;height:8px;background:rgba(255,255,255,0.3);"></div><div style="width:30px;height:16px;background:rgba(255,255,255,0.3);border-radius:3px;"></div></div>
|
|
<div style="display:flex;flex-direction:column;align-items:center;"><div style="width:2px;height:8px;background:rgba(255,255,255,0.3);"></div><div style="width:30px;height:16px;background:rgba(255,255,255,0.3);border-radius:3px;"></div></div>
|
|
<div style="display:flex;flex-direction:column;align-items:center;"><div style="width:2px;height:8px;background:rgba(255,255,255,0.3);"></div><div style="width:30px;height:16px;background:rgba(255,255,255,0.3);border-radius:3px;"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-info">
|
|
<div class="card-num">Screen 20</div>
|
|
<div class="card-name">Org Chart</div>
|
|
<div class="card-desc">CSS-based org tree with CEO, department heads, and team members</div>
|
|
<span class="card-tag tag-admin">Admin</span>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<footer>
|
|
<strong style="color:#FFF;">HR Portal v5</strong> — Design Mockup Gallery · 21 files total · All designs self-contained HTML/CSS · May 2026
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|