deploy: hr-panel-v3-designs
This commit is contained in:
TenX PM
@@ -0,0 +1,655 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HRPanel v3 — Design Gallery</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.page-card:hover .page-arrow { opacity: 1; transform: translateX(0); }
|
||||
.page-arrow { opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.2s; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-slate-50 min-h-screen">
|
||||
<!-- Header -->
|
||||
<header class="bg-white border-b border-slate-200 sticky top-0 z-10">
|
||||
<div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-bold text-slate-900 text-base">HRPanel</span>
|
||||
<span class="text-xs bg-blue-100 text-blue-600 font-semibold px-1.5 py-0.5 rounded ml-1.5">v3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm text-slate-500">Design Mockups</span>
|
||||
<span class="w-1 h-1 rounded-full bg-slate-300"></span>
|
||||
<span class="text-sm font-medium text-slate-700">13 screens</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero -->
|
||||
<div class="bg-white border-b border-slate-200">
|
||||
<div class="max-w-6xl mx-auto px-6 py-12">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="text-xs font-semibold text-blue-600 bg-blue-50 px-2.5 py-1 rounded-full uppercase tracking-wide">Design Review</span>
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold text-slate-900 mb-2">HRPanel v3 — Design Mockups</h1>
|
||||
<p class="text-slate-500 text-base max-w-xl">
|
||||
Full HRMS design system with 13 polished screens. Clean all-light theme inspired by BambooHR and Rippling. Click any card to preview the mockup.
|
||||
</p>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-3">
|
||||
<div class="text-center">
|
||||
<p class="text-2xl font-bold text-slate-900">13</p>
|
||||
<p class="text-xs text-slate-500">Screens</p>
|
||||
</div>
|
||||
<div class="w-px h-8 bg-slate-200"></div>
|
||||
<div class="text-center">
|
||||
<p class="text-2xl font-bold text-slate-900">9</p>
|
||||
<p class="text-xs text-slate-500">Modules</p>
|
||||
</div>
|
||||
<div class="w-px h-8 bg-slate-200"></div>
|
||||
<div class="text-center">
|
||||
<p class="text-2xl font-bold text-blue-600">100%</p>
|
||||
<p class="text-xs text-slate-500">Responsive</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Design system preview -->
|
||||
<div class="mt-8 flex items-center gap-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-slate-500 font-medium uppercase tracking-wide">Colors</span>
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-5 h-5 rounded-md bg-blue-600" title="Primary"></div>
|
||||
<div class="w-5 h-5 rounded-md bg-blue-100" title="Primary Light"></div>
|
||||
<div class="w-5 h-5 rounded-md bg-emerald-500" title="Success"></div>
|
||||
<div class="w-5 h-5 rounded-md bg-amber-500" title="Warning"></div>
|
||||
<div class="w-5 h-5 rounded-md bg-red-500" title="Danger"></div>
|
||||
<div class="w-5 h-5 rounded-md bg-slate-900" title="Text Primary"></div>
|
||||
<div class="w-5 h-5 rounded-md bg-slate-400" title="Text Secondary"></div>
|
||||
<div class="w-5 h-5 rounded-md bg-slate-100 border border-slate-200" title="Surface"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-px h-4 bg-slate-200"></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-slate-500 font-medium uppercase tracking-wide">Font</span>
|
||||
<span class="text-sm font-medium text-slate-900">Inter</span>
|
||||
</div>
|
||||
<div class="w-px h-4 bg-slate-200"></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-slate-500 font-medium uppercase tracking-wide">Framework</span>
|
||||
<span class="text-sm font-medium text-slate-900">Tailwind CSS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gallery grid -->
|
||||
<div class="max-w-6xl mx-auto px-6 py-10">
|
||||
<div class="grid grid-cols-3 gap-5">
|
||||
|
||||
<!-- 01 Login -->
|
||||
<a href="01-login.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
|
||||
<div class="h-36 bg-gradient-to-br from-blue-600 to-blue-700 relative overflow-hidden flex items-center justify-center">
|
||||
<div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 20px 20px;"></div>
|
||||
<div class="bg-white/90 backdrop-blur rounded-xl p-4 shadow-lg w-32">
|
||||
<div class="w-6 h-1.5 bg-blue-600 rounded mb-2"></div>
|
||||
<div class="w-full h-2 bg-slate-200 rounded mb-1.5"></div>
|
||||
<div class="w-full h-2 bg-slate-200 rounded mb-2"></div>
|
||||
<div class="w-full h-5 bg-blue-600 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xs font-semibold text-slate-400">01</span>
|
||||
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Login</h3>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500">Split-panel auth screen with brand identity</p>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1 mt-3">
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Auth</span>
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">No sidebar</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 02 Dashboard -->
|
||||
<a href="02-dashboard.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
|
||||
<div class="h-36 bg-slate-50 relative overflow-hidden flex items-end justify-center p-3 gap-1.5">
|
||||
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
|
||||
<div class="ml-16 flex gap-1.5 items-end">
|
||||
<div class="w-8 h-14 bg-blue-200 rounded-t-md"></div>
|
||||
<div class="w-8 h-10 bg-blue-400 rounded-t-md"></div>
|
||||
<div class="w-8 h-16 bg-blue-600 rounded-t-md"></div>
|
||||
<div class="w-8 h-12 bg-blue-300 rounded-t-md"></div>
|
||||
<div class="flex flex-col gap-1 ml-3">
|
||||
<div class="w-16 h-3 bg-white rounded border border-slate-200"></div>
|
||||
<div class="w-16 h-3 bg-white rounded border border-slate-200"></div>
|
||||
<div class="w-16 h-3 bg-white rounded border border-slate-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xs font-semibold text-slate-400">02</span>
|
||||
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Dashboard</h3>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500">KPIs, attendance chart, leave requests, quick actions</p>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1 mt-3">
|
||||
<span class="text-xs bg-blue-50 text-blue-600 px-2 py-0.5 rounded-full font-medium">Active</span>
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Analytics</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 03 Employees -->
|
||||
<a href="03-employees.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
|
||||
<div class="h-36 bg-slate-50 relative overflow-hidden p-4 flex gap-2 flex-wrap">
|
||||
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
|
||||
<div class="ml-16 flex gap-2 flex-wrap content-start">
|
||||
<div class="w-20 h-20 bg-white rounded-xl border border-slate-200 p-2 flex flex-col items-center gap-1">
|
||||
<div class="w-7 h-7 rounded-full bg-blue-400"></div>
|
||||
<div class="w-12 h-1.5 bg-slate-200 rounded"></div>
|
||||
<div class="w-9 h-1 bg-slate-100 rounded"></div>
|
||||
</div>
|
||||
<div class="w-20 h-20 bg-white rounded-xl border border-slate-200 p-2 flex flex-col items-center gap-1">
|
||||
<div class="w-7 h-7 rounded-full bg-violet-400"></div>
|
||||
<div class="w-12 h-1.5 bg-slate-200 rounded"></div>
|
||||
<div class="w-9 h-1 bg-slate-100 rounded"></div>
|
||||
</div>
|
||||
<div class="w-20 h-20 bg-white rounded-xl border border-slate-200 p-2 flex flex-col items-center gap-1">
|
||||
<div class="w-7 h-7 rounded-full bg-emerald-400"></div>
|
||||
<div class="w-12 h-1.5 bg-slate-200 rounded"></div>
|
||||
<div class="w-9 h-1 bg-slate-100 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xs font-semibold text-slate-400">03</span>
|
||||
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Employee Directory</h3>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500">Card grid with filters, search, and status badges</p>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1 mt-3">
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Card Grid</span>
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Pagination</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 04 Employee Profile -->
|
||||
<a href="04-employee-profile.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
|
||||
<div class="h-36 bg-slate-50 relative overflow-hidden p-4">
|
||||
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
|
||||
<div class="ml-16 flex gap-3">
|
||||
<div class="w-20 bg-white rounded-xl border border-slate-200 p-2 flex flex-col items-center gap-1">
|
||||
<div class="w-8 h-8 rounded-full bg-blue-500"></div>
|
||||
<div class="w-12 h-1.5 bg-slate-200 rounded mt-1"></div>
|
||||
<div class="w-9 h-1 bg-slate-100 rounded"></div>
|
||||
<div class="w-full h-4 bg-emerald-100 rounded mt-1"></div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white rounded-xl border border-slate-200 p-2">
|
||||
<div class="flex gap-1.5 mb-2 border-b border-slate-100 pb-1.5">
|
||||
<div class="w-10 h-2.5 bg-blue-600 rounded"></div>
|
||||
<div class="w-8 h-2.5 bg-slate-100 rounded"></div>
|
||||
<div class="w-10 h-2.5 bg-slate-100 rounded"></div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div class="w-full h-2 bg-slate-100 rounded"></div>
|
||||
<div class="w-full h-2 bg-slate-100 rounded"></div>
|
||||
<div class="w-3/4 h-2 bg-slate-100 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xs font-semibold text-slate-400">04</span>
|
||||
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Employee Profile</h3>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500">Tabbed profile with personal, job, and payroll info</p>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1 mt-3">
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Tabs</span>
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Detail View</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 05 Leave Management -->
|
||||
<a href="05-leave-management.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
|
||||
<div class="h-36 bg-slate-50 relative overflow-hidden p-4">
|
||||
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
|
||||
<div class="ml-16">
|
||||
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||||
<div class="flex gap-2 px-3 py-2 border-b border-slate-100">
|
||||
<div class="w-8 h-2 bg-blue-600 rounded"></div>
|
||||
<div class="w-8 h-2 bg-slate-100 rounded"></div>
|
||||
<div class="w-8 h-2 bg-slate-100 rounded"></div>
|
||||
</div>
|
||||
<div class="px-3 py-1.5 space-y-1.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-4 h-4 rounded-full bg-violet-300 flex-shrink-0"></div>
|
||||
<div class="flex-1 h-2 bg-slate-100 rounded"></div>
|
||||
<div class="w-8 h-2 bg-amber-100 rounded"></div>
|
||||
<div class="flex gap-1">
|
||||
<div class="w-5 h-3 bg-emerald-100 rounded"></div>
|
||||
<div class="w-5 h-3 bg-red-100 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-4 h-4 rounded-full bg-emerald-300 flex-shrink-0"></div>
|
||||
<div class="flex-1 h-2 bg-slate-100 rounded"></div>
|
||||
<div class="w-8 h-2 bg-emerald-100 rounded"></div>
|
||||
<div class="w-10 h-3 bg-slate-100 rounded"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-4 h-4 rounded-full bg-blue-300 flex-shrink-0"></div>
|
||||
<div class="flex-1 h-2 bg-slate-100 rounded"></div>
|
||||
<div class="w-8 h-2 bg-red-100 rounded"></div>
|
||||
<div class="w-10 h-3 bg-slate-100 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xs font-semibold text-slate-400">05</span>
|
||||
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Leave Management</h3>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500">Admin view of leave requests with approve/reject</p>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1 mt-3">
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Table</span>
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Filters</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 06 Attendance -->
|
||||
<a href="06-attendance.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
|
||||
<div class="h-36 bg-slate-50 relative overflow-hidden p-4">
|
||||
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
|
||||
<div class="ml-16">
|
||||
<div class="bg-white rounded-xl border border-slate-200 p-2">
|
||||
<div class="grid grid-cols-7 gap-0.5">
|
||||
<div class="h-4 bg-slate-100 rounded-sm"></div>
|
||||
<div class="h-4 bg-emerald-200 rounded-sm"></div>
|
||||
<div class="h-4 bg-emerald-200 rounded-sm"></div>
|
||||
<div class="h-4 bg-red-200 rounded-sm"></div>
|
||||
<div class="h-4 bg-amber-200 rounded-sm"></div>
|
||||
<div class="h-4 bg-slate-100 rounded-sm"></div>
|
||||
<div class="h-4 bg-slate-100 rounded-sm"></div>
|
||||
<div class="h-4 bg-emerald-300 rounded-sm"></div>
|
||||
<div class="h-4 bg-emerald-300 rounded-sm"></div>
|
||||
<div class="h-4 bg-emerald-300 rounded-sm"></div>
|
||||
<div class="h-4 bg-emerald-300 rounded-sm"></div>
|
||||
<div class="h-4 bg-blue-400 rounded-sm ring-2 ring-blue-500"></div>
|
||||
<div class="h-4 bg-slate-100 rounded-sm"></div>
|
||||
<div class="h-4 bg-slate-100 rounded-sm"></div>
|
||||
<div class="h-4 bg-blue-200 rounded-sm"></div>
|
||||
<div class="h-4 bg-blue-200 rounded-sm"></div>
|
||||
<div class="h-4 bg-blue-200 rounded-sm"></div>
|
||||
<div class="h-4 bg-slate-50 rounded-sm"></div>
|
||||
<div class="h-4 bg-slate-50 rounded-sm"></div>
|
||||
<div class="h-4 bg-slate-100 rounded-sm"></div>
|
||||
<div class="h-4 bg-slate-100 rounded-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xs font-semibold text-slate-400">06</span>
|
||||
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Attendance</h3>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500">Monthly calendar view with color-coded statuses</p>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1 mt-3">
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Calendar</span>
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Clock In/Out</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 07 Payroll -->
|
||||
<a href="07-payroll.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
|
||||
<div class="h-36 bg-slate-50 relative overflow-hidden p-4 flex items-center justify-center">
|
||||
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
|
||||
<div class="ml-16 w-full">
|
||||
<div class="flex gap-2 mb-2">
|
||||
<div class="flex-1 h-10 bg-emerald-100 rounded-lg border border-emerald-200 flex items-center justify-center">
|
||||
<div class="w-8 h-2 bg-emerald-400 rounded"></div>
|
||||
</div>
|
||||
<div class="flex-1 h-10 bg-blue-100 rounded-lg border border-blue-200 flex items-center justify-center">
|
||||
<div class="w-8 h-2 bg-blue-400 rounded"></div>
|
||||
</div>
|
||||
<div class="flex-1 h-10 bg-amber-100 rounded-lg border border-amber-200 flex items-center justify-center">
|
||||
<div class="w-8 h-2 bg-amber-400 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-slate-200 px-2 py-1.5 space-y-1">
|
||||
<div class="flex gap-2">
|
||||
<div class="w-8 h-2 bg-slate-200 rounded"></div>
|
||||
<div class="flex-1 h-2 bg-slate-100 rounded"></div>
|
||||
<div class="w-8 h-2 bg-emerald-200 rounded"></div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<div class="w-8 h-2 bg-slate-200 rounded"></div>
|
||||
<div class="flex-1 h-2 bg-slate-100 rounded"></div>
|
||||
<div class="w-8 h-2 bg-emerald-200 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xs font-semibold text-slate-400">07</span>
|
||||
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Payroll</h3>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500">Payroll runs history, summaries, and processing</p>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1 mt-3">
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">History</span>
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Payslips</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 08 Recruitment -->
|
||||
<a href="08-recruitment.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
|
||||
<div class="h-36 bg-slate-50 relative overflow-hidden p-4">
|
||||
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
|
||||
<div class="ml-16 space-y-2">
|
||||
<div class="bg-white rounded-xl border border-slate-200 p-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-5 h-5 rounded-lg bg-violet-100"></div>
|
||||
<div>
|
||||
<div class="w-20 h-2 bg-slate-200 rounded mb-1"></div>
|
||||
<div class="w-12 h-1.5 bg-slate-100 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-8 h-5 bg-emerald-100 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-slate-200 p-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-5 h-5 rounded-lg bg-blue-100"></div>
|
||||
<div>
|
||||
<div class="w-16 h-2 bg-slate-200 rounded mb-1"></div>
|
||||
<div class="w-10 h-1.5 bg-slate-100 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-8 h-5 bg-emerald-100 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xs font-semibold text-slate-400">08</span>
|
||||
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Recruitment</h3>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500">Job postings with pipeline progress indicators</p>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1 mt-3">
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Job Cards</span>
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Pipeline</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 09 Kanban -->
|
||||
<a href="09-recruitment-kanban.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
|
||||
<div class="h-36 bg-slate-50 relative overflow-hidden p-4">
|
||||
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
|
||||
<div class="ml-16 flex gap-1.5">
|
||||
<div class="flex-1 space-y-1">
|
||||
<div class="h-2 bg-slate-300 rounded-sm"></div>
|
||||
<div class="h-12 bg-white rounded-lg border border-slate-200 p-1">
|
||||
<div class="flex items-center gap-1 mb-1">
|
||||
<div class="w-3 h-3 rounded-full bg-blue-300"></div>
|
||||
<div class="w-8 h-1.5 bg-slate-200 rounded"></div>
|
||||
</div>
|
||||
<div class="w-full h-1 bg-slate-100 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 space-y-1">
|
||||
<div class="h-2 bg-blue-200 rounded-sm"></div>
|
||||
<div class="h-12 bg-white rounded-lg border border-blue-200 p-1">
|
||||
<div class="flex items-center gap-1 mb-1">
|
||||
<div class="w-3 h-3 rounded-full bg-blue-500"></div>
|
||||
<div class="w-8 h-1.5 bg-slate-200 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 space-y-1">
|
||||
<div class="h-2 bg-violet-200 rounded-sm"></div>
|
||||
<div class="h-12 bg-white rounded-lg border border-violet-200 p-1">
|
||||
<div class="flex items-center gap-1 mb-1">
|
||||
<div class="w-3 h-3 rounded-full bg-violet-500"></div>
|
||||
<div class="w-8 h-1.5 bg-slate-200 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 space-y-1">
|
||||
<div class="h-2 bg-emerald-200 rounded-sm"></div>
|
||||
<div class="h-12 bg-white rounded-lg border border-emerald-200 p-1">
|
||||
<div class="flex items-center gap-1 mb-1">
|
||||
<div class="w-3 h-3 rounded-full bg-emerald-500"></div>
|
||||
<div class="w-6 h-1.5 bg-slate-200 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xs font-semibold text-slate-400">09</span>
|
||||
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Applicant Kanban</h3>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500">5-stage hiring pipeline kanban board</p>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1 mt-3">
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Kanban</span>
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Drag & Drop</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 10 Performance -->
|
||||
<a href="10-performance.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
|
||||
<div class="h-36 bg-slate-50 relative overflow-hidden p-4">
|
||||
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
|
||||
<div class="ml-16 flex gap-2">
|
||||
<div class="flex-1 bg-white rounded-xl border border-slate-200 p-2">
|
||||
<div class="w-full h-2 bg-slate-200 rounded mb-2"></div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-1.5 mb-1"><div class="h-1.5 rounded-full bg-blue-500" style="width:75%"></div></div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-1.5 mb-1"><div class="h-1.5 rounded-full bg-emerald-500" style="width:60%"></div></div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-1.5 mb-2"><div class="h-1.5 rounded-full bg-amber-500" style="width:30%"></div></div>
|
||||
<div class="w-8 h-2 bg-blue-100 rounded"></div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white rounded-xl border border-slate-200 p-2">
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="w-4 h-4 rounded-full bg-violet-200"></div>
|
||||
<div class="flex-1 h-1.5 bg-slate-100 rounded"></div>
|
||||
<div class="flex gap-0.5">
|
||||
<div class="w-2 h-2 text-amber-400">★</div>
|
||||
<div class="w-2 h-2 text-amber-400">★</div>
|
||||
<div class="w-2 h-2 text-amber-400">★</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="w-4 h-4 rounded-full bg-pink-200"></div>
|
||||
<div class="flex-1 h-1.5 bg-slate-100 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xs font-semibold text-slate-400">10</span>
|
||||
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Performance</h3>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500">OKR goals with progress bars and team reviews</p>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1 mt-3">
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Goals</span>
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Reviews</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 11 Reports -->
|
||||
<a href="11-reports.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
|
||||
<div class="h-36 bg-slate-50 relative overflow-hidden p-4">
|
||||
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
|
||||
<div class="ml-16">
|
||||
<div class="bg-white rounded-xl border border-slate-200 p-2">
|
||||
<div class="flex items-end gap-1 h-16">
|
||||
<div class="flex-1 bg-blue-200 rounded-t" style="height:50%"></div>
|
||||
<div class="flex-1 bg-blue-300 rounded-t" style="height:60%"></div>
|
||||
<div class="flex-1 bg-blue-400 rounded-t" style="height:75%"></div>
|
||||
<div class="flex-1 bg-blue-500 rounded-t" style="height:65%"></div>
|
||||
<div class="flex-1 bg-blue-600 rounded-t" style="height:90%"></div>
|
||||
<div class="flex-1 bg-blue-700 rounded-t" style="height:80%"></div>
|
||||
<div class="flex-col justify-end ml-1 space-y-1">
|
||||
<div class="w-12 h-1.5 bg-blue-100 rounded"></div>
|
||||
<div class="w-10 h-1.5 bg-emerald-100 rounded"></div>
|
||||
<div class="w-8 h-1.5 bg-violet-100 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xs font-semibold text-slate-400">11</span>
|
||||
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Reports</h3>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500">Workforce, leave, and payroll analytics dashboards</p>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1 mt-3">
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Charts</span>
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Analytics</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 12 Settings -->
|
||||
<a href="12-settings.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
|
||||
<div class="h-36 bg-slate-50 relative overflow-hidden p-4">
|
||||
<div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
|
||||
<div class="ml-16 flex gap-2">
|
||||
<div class="w-24 bg-white rounded-xl border border-slate-200 p-2 space-y-1">
|
||||
<div class="w-full h-2 bg-blue-200 rounded"></div>
|
||||
<div class="w-full h-2 bg-slate-100 rounded"></div>
|
||||
<div class="w-full h-2 bg-slate-100 rounded"></div>
|
||||
<div class="w-full h-2 bg-slate-100 rounded"></div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white rounded-xl border border-slate-200 p-2 space-y-1.5">
|
||||
<div class="w-full h-8 bg-slate-50 border border-slate-200 rounded-lg p-1.5">
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="w-5 h-5 bg-blue-600 rounded-md flex-shrink-0"></div>
|
||||
<div class="w-12 h-2 bg-slate-200 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-1">
|
||||
<div class="h-5 bg-slate-50 border border-slate-200 rounded"></div>
|
||||
<div class="h-5 bg-slate-50 border border-slate-200 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xs font-semibold text-slate-400">12</span>
|
||||
<h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Settings</h3>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500">Company profile, work schedule, and system config</p>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1 mt-3">
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Forms</span>
|
||||
<span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Config</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="max-w-6xl mx-auto px-6 pb-10 mt-4">
|
||||
<div class="border-t border-slate-200 pt-6 flex items-center justify-between">
|
||||
<p class="text-xs text-slate-400">HRPanel v3 Design System — Built with Tailwind CSS + Inter</p>
|
||||
<p class="text-xs text-slate-400">13 screens · 9 modules · BambooHR-inspired clean theme</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user