deploy: hr-panel-v3-designs
This commit is contained in:
TenX PM
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HRPanel v3 — Login</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; }
|
||||
.pattern-dots {
|
||||
background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen bg-slate-50 flex items-center justify-center p-4">
|
||||
<div class="w-full max-w-4xl bg-white rounded-2xl shadow-xl overflow-hidden flex" style="min-height: 560px;">
|
||||
<!-- Left brand panel -->
|
||||
<div class="hidden md:flex flex-col justify-between w-2/5 bg-blue-600 p-10 pattern-dots relative">
|
||||
<div>
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center gap-3 mb-12">
|
||||
<div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-blue-600" 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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-white font-bold text-xl tracking-tight">HRPanel</span>
|
||||
</div>
|
||||
<!-- Headline -->
|
||||
<h1 class="text-white font-bold text-3xl leading-snug mb-4">
|
||||
People management,<br />simplified.
|
||||
</h1>
|
||||
<p class="text-blue-200 text-sm leading-relaxed">
|
||||
Manage your entire workforce — from hiring to payroll — in one beautifully designed platform built for modern HR teams.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Feature list -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-blue-100 text-sm">Smart leave & attendance tracking</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-blue-100 text-sm">Automated payroll processing</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-blue-100 text-sm">Performance & goal management</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-blue-100 text-sm">Recruitment & onboarding pipeline</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decorative circles -->
|
||||
<div class="absolute -bottom-16 -right-16 w-48 h-48 bg-white/5 rounded-full"></div>
|
||||
<div class="absolute -bottom-8 -right-8 w-32 h-32 bg-white/5 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<!-- Right login form -->
|
||||
<div class="flex-1 flex flex-col justify-center px-8 md:px-12 py-10">
|
||||
<!-- Mobile logo -->
|
||||
<div class="flex items-center gap-2 mb-8 md:hidden">
|
||||
<div class="w-9 h-9 bg-blue-600 rounded-xl 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>
|
||||
<span class="font-bold text-slate-900 text-lg">HRPanel</span>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-bold text-slate-900 mb-1">Welcome back</h2>
|
||||
<p class="text-slate-500 text-sm mb-8">Sign in to your HR workspace</p>
|
||||
|
||||
<form class="space-y-5">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1.5">Work email</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
|
||||
</svg>
|
||||
</div>
|
||||
<input type="email" value="admin@hrpanel.com" class="w-full pl-9 pr-4 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white" placeholder="you@company.com" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<label class="block text-sm font-medium text-slate-700">Password</label>
|
||||
<a href="#" class="text-xs text-blue-600 hover:text-blue-700 font-medium">Forgot password?</a>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<input type="password" value="Admin@123" class="w-full pl-9 pr-10 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white" placeholder="••••••••" />
|
||||
<button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center">
|
||||
<svg class="w-4 h-4 text-slate-400 hover:text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="remember" type="checkbox" checked class="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500" />
|
||||
<label for="remember" class="text-sm text-slate-600">Remember me for 30 days</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 rounded-lg text-sm transition-colors flex items-center justify-center gap-2">
|
||||
Sign in to HRPanel
|
||||
<svg class="w-4 h-4" 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>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Demo accounts -->
|
||||
<div class="mt-6 p-4 bg-slate-50 border border-slate-200 rounded-lg">
|
||||
<p class="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Demo Accounts</p>
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-slate-600">Admin</span>
|
||||
<span class="text-xs font-mono text-slate-700">admin@hrpanel.com / Admin@123</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-slate-600">Manager</span>
|
||||
<span class="text-xs font-mono text-slate-700">manager@hrpanel.com / Manager@123</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-slate-600">Employee</span>
|
||||
<span class="text-xs font-mono text-slate-700">emp@hrpanel.com / Emp@123</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-6 text-center text-xs text-slate-400">
|
||||
© 2026 HRPanel v3. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user