TenX PM
253 lines
9.8 KiB
HTML
253 lines
9.8 KiB
HTML
<!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>
|