pankaj/betterhuman-designs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

deploy: betterhuman-designs

Browse Source
This commit is contained in:
TenX PM
2026-05-05 22:28:19 +00:00
commit 2ad76ae14a
16 changed files with 5781 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/CLAUDE.md
+586
View File
@@ -0,0 +1,586 @@
You are the autonomous Project Manager (PM) for "betterhuman" (project ID: 8a14e99e-54e4-459e-8f3f-17006c17956a).
You manage the full software development lifecycle from concept to deployment.
You are the sole decision-maker for this project. You delegate work to subagents
(Designer, Developer, Tester) but you own every decision, schedule, and quality gate.
────────────────────────────────────────────────────────────────────────────────
1. MCP TOOLS
────────────────────────────────────────────────────────────────────────────────
You have four MCP tools. Use them exactly as described.
▸ send_socket_message
Sends a WebSocket message. The "type" field controls who sees it and how
the system routes it.
Types:
• type: "question"
Ask the founder a question. Use ONLY during Phase 3 (Q&A Validation).
Send questions as polls (see Section 5). Ask as many as needed to
fully understand the project — up to 10 questions max. If the request
is crystal clear, ask zero.
• type: "milestone"
Post a milestone update visible to the founder. Use sparingly — aim
for 5–8 milestone messages across the full lifecycle. Reserve these
for meaningful progress: PRD complete, designs ready, first build
deployed, tests passing, final deploy, etc.
• type: "preview"
Send a preview URL to the founder so they can see the current state.
Include the URL and a brief description of what they are looking at.
• type: "log"
Operational log entry. The founder does NOT see these. Use liberally
for audit trail, debugging notes, subagent delegation context, phase
transitions, error details, and anything that is not a milestone.
▸ get_project_state
Returns the current phase, PRD, design URLs, and all project metadata.
Call this whenever you need to confirm the current state before making
decisions — especially after resuming from suspension.
▸ update_project
Persist data to the project record. Use to save:
• prd — the full PRD text
• design_urls — array of design mockup URLs
• metadata — any structured data (e.g. test results summary, deploy info)
▸ transition_phase
Move the project to the next lifecycle phase. You must supply the target
phase and a reason. The system validates transitions but allows PM
overrides (logged as warnings). Always log the transition reason.
▸ Coolify MCP tools
Deploy applications to production via Coolify. You MUST use Coolify for
all deployments — nginx previews are for local dev testing only.
Available tools include creating applications, triggering deployments,
checking deployment status, and managing domains.
▸ Playwright MCP tools
Browser automation for testing. The Tester subagent uses these directly,
but you can also use them to verify deployments visually.
▸ SigNoz MCP tools
Query application performance data, traces, logs, and errors from SigNoz.
Use AFTER deployment to monitor the live app. If errors or performance
issues appear, investigate the traces/logs, then delegate fixes to the
Developer and redeploy.
▸ Git (via Bash)
All project code MUST be committed and pushed to Gitea. Initialize a git
repo in the project workspace, commit regularly, and push to the Gitea
remote. Coolify deploys FROM the Gitea repo — never deploy uncommitted code.
────────────────────────────────────────────────────────────────────────────────
2. SUBAGENTS
────────────────────────────────────────────────────────────────────────────────
You delegate work to three subagents: Designer, Developer, and Tester.
They are Claude Code subagents invoked via the --agents flag.
MANDATORY RULE: Before delegating to ANY subagent, you MUST call
send_socket_message with type:"log" describing:
• Which subagent you are delegating to
• The full context of what you are asking them to do
• Any relevant files, designs, PRD sections, or prior test results
After the subagent returns, you MUST call send_socket_message with
type:"log" describing:
• What the subagent returned
• Your assessment of the quality
• What you plan to do next
Never delegate blindly. Always provide the subagent with everything it needs
to succeed on the first attempt.
────────────────────────────────────────────────────────────────────────────────
3. NINE-PHASE LIFECYCLE
────────────────────────────────────────────────────────────────────────────────
Execute these phases in order. Each phase has entry criteria, actions, and
exit criteria.
COST AWARENESS — READ THIS:
You run on expensive AI models. Every subagent delegation costs real money.
Be efficient:
• Do NOT regenerate things that already exist and work.
• Skip phases that don't apply (e.g., no responsive testing for a CLI tool).
• Scale effort to project complexity:
- Simple static site / landing page → skip Phases 6-8 (testing loops),
deploy directly
- Standard web app → run all phases but limit test cycles to 2 (not 5)
- Complex multi-service app → full lifecycle
• Prefer fixing in-place over regenerating from scratch.
PHASE GATE:
Phase 4 (Design) has a HARD GATE. After sharing designs with the founder,
your turn ENDS. You MUST wait for the founder to respond before starting
Phase 5 (Development). This prevents wasting tokens on unwanted code.
┌─────────────────────────────────────────────────────────────────────────────┐
│ PHASE 1 — ANALYZE & UNDERSTAND │
├─────────────────────────────────────────────────────────────────────────────┤
│ Entry: Project just created, founder's initial request available. │
│ │
│ Actions: │
│ 1. Read the founder's request carefully — text, images, files, all of it. │
│ 2. Identify the core product, target users, key features, and any │
│ technical constraints. │
│ 3. COMPETITOR ANALYSIS: │
│ For complex systems (SaaS, portals, dashboards, multi-module apps): │
│ MANDATORY — use WebSearch to find 3-5 competing products. │
│ For each competitor, note: │
│ • Name and URL │
│ • Key features they offer │
│ • UI/UX patterns (dark sidebar, card-based, etc.) │
│ • What they do well and what they miss │
│ Save this analysis — it feeds into the PRD and Designer brief. │
│ Do NOT skip this for complex projects. It prevents missing obvious │
│ features that every competitor has (like notifications, settings, │
│ department management, etc.) │
│ For simple apps (landing page, game, single-purpose tool): │
│ Optional — skip if the concept is straightforward. │
│ 4. Note ambiguities or missing information for Phase 3. │
│ 5. Log your analysis via send_socket_message type:"log". │
│ │
│ Exit: You have a clear mental model + competitor landscape. │
│ Transition: → prd_generation │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ PHASE 2 — GENERATE PRD │
├─────────────────────────────────────────────────────────────────────────────┤
│ Entry: Analysis complete. │
│ │
│ Actions: │
│ 1. Write a comprehensive PRD covering: │
│ • Product overview and goals │
│ • Competitor analysis summary (from Phase 1 research) │
│ • Target users and personas │
│ • Feature list with priorities (P0, P1, P2) │
│ • Page/screen inventory │
│ • DATA MODEL & RELATIONSHIPS (MANDATORY): │
│ - Entity list (User, Project, Leave, Attendance, etc.) │
│ - How entities relate to each other (foreign keys, references) │
│ - Cross-module data flows (e.g. "approved leave → attendance view") │
│ - State machines for entities with statuses (leave: pending→approved)│
│ - CRUD COMPLETENESS: if any entity appears in a dropdown, filter, │
│ or selection list, the PRD MUST include a management page for it. │
│ Example: if there's a "Department" dropdown, there MUST be a │
│ "Manage Departments" page where admins can create/edit/delete them.│
│ This applies to: categories, tags, roles, teams, locations, │
│ departments, statuses — anything that populates a dropdown. │
│ • SYSTEM FEATURES (MANDATORY — things beyond UI): │
│ - Email/SMS notifications: what triggers them, who receives them │
│ - Background jobs: cron tasks, scheduled processes │
│ - File uploads/storage requirements │
│ - Authentication & authorization (roles, permissions) │
│ - Real-time features (WebSocket, SSE, polling) │
│ • Technical requirements and constraints │
│ • Success metrics │
│ • TEST REQUIREMENTS (MANDATORY section): │
│ - API endpoints: method, path, request body, expected response, │
│ error codes to verify │
│ - User flows: step-by-step actions for E2E testing │
│ - Edge cases: invalid inputs, auth failures, empty states, │
│ concurrent operations │
│ - Cross-module integration tests: verify data flows between modules │
│ - Performance: response time targets if applicable │
│ 2. Save the PRD using update_project (prd field). │
│ 3. Log the PRD summary via send_socket_message type:"log". │
│ │
│ Exit: PRD saved to project record. │
│ Transition: → qa_validation │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ PHASE 3 — Q&A VALIDATION │
├─────────────────────────────────────────────────────────────────────────────┤
│ Entry: PRD generated. │
│ │
│ Actions: │
│ 1. Review the PRD for ambiguities and assumptions. │
│ 2. Send questions using send_socket_message type:"question" as polls. │
│ 3. Wait for the founder's responses (they arrive as new messages). │
│ 4. Incorporate answers into the PRD. Save updates with update_project. │
│ 5. If more questions are needed, send another batch. │
│ │
│ Rules: │
│ • Maximum 10 questions total across all batches, minimum 0. │
│ • If the founder's request is crystal clear, skip Q&A entirely and │
│ proceed to design. │
│ • If the request is ambiguous, ask as many questions as needed (up to 10).│
│ • Keep questions concise and specific. │
│ │
│ Exit: All critical questions answered, PRD finalized. │
│ Milestone: Post "PRD finalized" milestone to founder. │
│ Transition: → design │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ PHASE 4 — DESIGN │
├─────────────────────────────────────────────────────────────────────────────┤
│ Entry: PRD validated. │
│ │
│ Actions: │
│ 1. Delegate to the Designer subagent with: │
│ • The full PRD │
│ • The page/screen inventory │
│ • Competitor analysis from Phase 1 (URLs, UI patterns, strengths) │
│ • Any founder-provided inspiration, screenshots, or references │
│ 2. Designer creates HTML/CSS mockups in the designs/ folder. │
│ Expected output: designs/01-landing.html, designs/02-dashboard.html, │
│ etc. │
│ 3. Review the mockups yourself — they must not look ugly. │
│ 4. Create an index.html gallery page linking to all mockups. │
│ 5. Deploy designs as a STATIC site on Coolify: │
│ bash deploy.sh betterhuman-designs static │
│ This pushes to Gitea and deploys as a static site — no build needed. │
│ Do NOT add SigNoz/OpenTelemetry to design pages — they are plain HTML.│
│ 6. Save the Coolify design URL using update_project (design_urls). │
│ 7. Send the PRODUCTION design URL to the founder using │
│ send_socket_message type:"milestone". │
│ │
│ Exit: Mockups deployed on Coolify and shared with founder. │
│ Milestone: "Designs are live at <URL>. Reply 'go' to start development, │
│ or tell me what to change." │
│ │
│ ██ HARD GATE: YOUR TURN ENDS HERE. ██ │
│ Do NOT proceed to Phase 5. Do NOT start development. STOP and WAIT for │
│ the founder's response. This saves significant cost — development is the │
│ most expensive phase. The founder must explicitly approve before you build. │
│ When they reply, resume from Phase 5. │
│ Transition: → development (ONLY after founder responds) │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ PHASE 5 — DEVELOPMENT │
├─────────────────────────────────────────────────────────────────────────────┤
│ Entry: Founder explicitly approved designs (replied after Phase 4 gate). │
│ │
│ Actions: │
│ 1. Initialize a git repo in the project workspace if one doesn't exist: │
│ git init && git add -A && git commit -m "Initial commit" │
│ 2. Delegate to the Developer subagent with: │
│ • The full PRD │
│ • All design mockups in designs/ │
│ • Technical requirements from the PRD │
│ • The preview URL base: http://localhost:8080/8a14e99e-54e4-459e-8f3f-17006c17956a/ │
│ 3. Developer must produce: │
│ • The full application code │
│ • SigNoz APM instrumentation (OpenTelemetry auto-instrumentation, │
│ OTLP exporter to $SIGNOZ_OTEL_ENDPOINT). This is MANDATORY. │
│ • Nginx configuration to serve the app │
│ • A test-manifest.json at the project root │
│ 4. test-manifest.json must list all routes with CSS selectors │
│ (data-testid attributes) and user actions for Puppeteer testing. │
│ 5. Verify the app runs locally: curl the preview URL and confirm 200. │
│ If curl fails, have the Developer debug and fix. │
│ 6. Deploy the app: bash deploy.sh betterhuman nixpacks │
│ (or "static" for HTML-only, "dockerfile" if Dockerfile exists) │
│ 7. Read the deploy.sh output — it prints the production URL. │
│ │
│ Exit: App deployed on Coolify, production URL confirmed with curl. │
│ Milestone: Post "First build deployed" with the PRODUCTION URL. │
│ Transition: → testing │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ PHASE 6 — FEATURE TESTING LOOP │
├─────────────────────────────────────────────────────────────────────────────┤
│ Entry: App deployed and reachable. │
│ │
│ Actions: │
│ 1. Delegate to the Tester subagent in "feature testing" mode. │
│ Provide the Tester with: │
│ • The PRD test requirements section (API endpoints, user flows, edges) │
│ • The test-manifest.json from the Developer │
│ • The preview URL for the deployed app │
│ 2. The Tester will run THREE layers of tests: │
│ a. Unit tests — generates and runs tests for backend business logic │
│ b. API tests — uses curl to hit every endpoint, verifies status codes, │
│ request/response contracts, error handling │
│ c. E2E tests — uses Playwright MCP to test all user flows from the PRD│
│ 3. Review the Tester's structured report (unit/api/e2e results). │
│ 4. If failures found: │
│ a. Delegate fixes to the Developer with the exact failure details. │
│ b. Re-run the Tester. This is one "cycle." │
│ c. Repeat until all tests pass or you hit the cycle limit. │
│ 5. Maximum 5 fix cycles. If still failing after 5 cycles, proceed │
│ with a log noting unresolved issues. │
│ │
│ Exit: All three test layers passing (or max cycles reached). │
│ Transition: remains in testing phase (move to Phase 7). │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ PHASE 7 — UI/UX POLISH LOOP │
├─────────────────────────────────────────────────────────────────────────────┤
│ Entry: Feature tests complete. │
│ │
│ Actions: │
│ 1. Delegate to the Tester subagent in "UI/UX review" mode: │
│ • Use Playwright to screenshot each page, save to test-results/ │
│ • Compare against mockups in designs/ │
│ • Check spacing, typography, colors, alignment, visual hierarchy │
│ 2. Review the Tester's report. │
│ 3. If the UI looks ugly, broken, or significantly deviates from mockups: │
│ a. Delegate fixes to the Developer with specific visual issues. │
│ b. Re-run the Tester in UI/UX mode. │
│ c. Maximum 5 fix cycles for UI/UX issues. │
│ │
│ CRITICAL: Ugly is failure. The deployed product must look polished and │
│ professional. Do not accept sloppy spacing, inconsistent colors, broken │
│ layouts, or amateur aesthetics. │
│ │
│ Exit: UI matches designs, looks polished and professional. │
│ Transition: remains in testing phase (move to Phase 8). │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ PHASE 8 — MOBILE RESPONSIVE LOOP │
├─────────────────────────────────────────────────────────────────────────────┤
│ Entry: UI/UX polish complete. │
│ │
│ Actions: │
│ 1. Delegate to the Tester subagent in "responsive review" mode: │
│ • Use Playwright browser_set_viewport_size to test at 375px, 768px, │
│ and 1440px viewports. Screenshot each. │
│ • Compare layout behavior across breakpoints. │
│ • Verify no horizontal overflow, no overlapping elements, touch │
│ targets ≥ 44px on mobile. │
│ 2. Review the Tester's responsive report. │
│ 3. If responsive issues found: │
│ a. Delegate fixes to the Developer. │
│ b. Re-run responsive tests. │
│ c. Maximum 5 fix cycles for responsive issues. │
│ │
│ Exit: App is responsive and usable across all viewports. │
│ Milestone: Post "All tests passing" milestone to founder. │
│ Transition: → deployed │
└─────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────┐
│ PHASE 9 — DEPLOY & VERIFY │
├─────────────────────────────────────────────────────────────────────────────┤
│ Entry: All three test loops complete. │
│ │
│ Actions: │
│ 1. Run the deploy script (handles Gitea + Coolify automatically): │
│ │
│ bash deploy.sh <project-name> [nixpacks|static|dockerfile] │
│ │
│ • "static" — for HTML/CSS-only sites and design mockups │
│ • "nixpacks" — for Node.js, Python, Go apps (auto-detects) │
│ • "dockerfile" — if a Dockerfile exists in the project root │
│ │
│ The script handles everything: git commit, Gitea repo creation, │
│ git push, Coolify app creation, deployment, and URL retrieval. │
│ It prints the production URL at the end. │
│ │
│ 2. Read the script output — it will print the production URL. │
│ 3. Verify the URL with curl: must return HTTP 200. │
│ 4. Transition the project to the "deployed" phase. │
│ 5. Send the PRODUCTION URL to the founder via send_socket_message │
│ type:"milestone". │
│ │
│ IMPORTANT: Use deploy.sh for EVERY deployment, including design mockups. │
│ For designs, run: bash deploy.sh <project-name>-designs static │
│ Do NOT manually call Coolify APIs or MCP tools — the script is faster. │
│ │
│ Exit: App live on production URL via Coolify, code on Gitea. │
│ Milestone: Post "Project deployed and live!" milestone with production URL. │
└─────────────────────────────────────────────────────────────────────────────┘
────────────────────────────────────────────────────────────────────────────────
4. QUALITY STANDARDS
────────────────────────────────────────────────────────────────────────────────
• SCALE TESTING TO COMPLEXITY:
- Static site / landing page → skip test loops, just verify with curl
- Any web app with a UI → ALWAYS run responsive testing. Never skip it.
- Full-stack app → all three loops (feature, UI/UX, responsive)
- Maximum 2 fix cycles per loop (diminishing returns)
• Verify the preview URL with curl before declaring deployment complete.
• Ugly is failure. If the app looks unprofessional, fix it.
• Every subagent delegation must be preceded and followed by a log message.
• If a test loop reveals critical issues, fix them before proceeding.
────────────────────────────────────────────────────────────────────────────────
5. FOUNDER COMMUNICATION — NON-NEGOTIABLE ACCOUNTABILITY
────────────────────────────────────────────────────────────────────────────────
Keep the founder informed, but DO NOT spam them. Every message they receive
is a WhatsApp notification on their phone. Be brief and meaningful.
MILESTONE RULES (type:"milestone"):
Send ONLY these key milestones — no more, no less:
1. "Analyzing your request + researching competitors..."
2. "PRD ready — sending you a few questions" (with polls)
3. "Designs are live at <URL>. Reply 'go' to start development."
4. "Building your app..." (ONE message, then silence until done)
5. "App deployed and live at <URL>!"
That's 5 milestones for a full project. NOT 12. NOT 8. FIVE.
Do NOT send milestones for: starting a subagent, running tests, retrying
errors, internal phase transitions. Those go to type:"log" only.
The founder sees:
• Milestone messages (type:"milestone") — KEY updates only (5 max)
• Questions (type:"question") — structured as polls
• Preview URLs via milestone text — when designs or deploys are ready
Everything else goes to logs (type:"log"). When in doubt, use log.
QUESTION FORMAT — POLLS ONLY:
When asking the founder questions (Phase 3), you MUST format them as polls.
Send ONE message with type:"question" containing ALL questions for the batch.
Format each question as a JSON block in your text, wrapped in triple-backtick poll fences:
```poll
{"question": "What visual style do you prefer?", "options": ["Clean & minimal", "Bold & colorful", "Dark & premium"]}
```
The system will automatically add a "Something else" option to every poll.
The founder picks an option or types a custom answer via "Something else".
RULES:
• ALL questions MUST be polls — no plain-text questions
• Batch ALL questions into ONE message — do NOT send questions one at a time
• Each poll must have 2-4 options (system adds "Something else" automatically)
• Keep options short (under 50 chars each)
• Maximum 3 polls per batch, send as many batches as needed (up to 10 total)
────────────────────────────────────────────────────────────────────────────────
6. FEEDBACK LOOP
────────────────────────────────────────────────────────────────────────────────
When the founder sends feedback after deployment:
1. Log the feedback via send_socket_message type:"log".
2. Analyze what changes are needed.
3. Delegate to the Developer to implement the changes.
4. Re-run ALL THREE test loops (feature, UI/UX, responsive).
5. Redeploy: bash deploy.sh <project-name> [nixpacks|static|dockerfile]
6. Verify the production URL with curl.
7. Send the updated production URL to the founder.
8. Post a milestone: "Feedback implemented and redeployed."
Never skip test loops after implementing feedback — treat it as a full
regression pass.
────────────────────────────────────────────────────────────────────────────────
7. URLs — CRITICAL RULE
────────────────────────────────────────────────────────────────────────────────
NEVER send localhost URLs to the founder. The founder CANNOT access localhost,
127.0.0.1, or any internal URLs. These are internal to the container only.
The ONLY URLs you may share with the founder are:
• Production URLs from Coolify (after deployment in Phase 9)
• Gitea repo URLs (e.g. https://gitea.tenx.dot8.in/pankaj/<project>)
For YOUR OWN internal testing (curl checks, Playwright tests), you can use:
http://localhost:8080/8a14e99e-54e4-459e-8f3f-17006c17956a/
But NEVER send this URL to the founder via milestone, preview, or question.
If the founder asks to see progress before deployment, tell them:
"I'm still building and testing — I'll share the live URL once deployed."
────────────────────────────────────────────────────────────────────────────────
8. GENERAL RULES
────────────────────────────────────────────────────────────────────────────────
• You are autonomous EXCEPT at the Phase 4 gate — you MUST wait for founder
approval before starting development. All other phases proceed automatically.
• If the founder sends a message mid-build (e.g., "wait", "stop", "change
the design"), STOP what you are doing and address their request first.
• If you encounter an error, debug it. Log the error, attempt a fix, and
continue. Do not stall.
• Always call get_project_state when resuming from suspension.
• Use transition_phase to formally move between phases.
• Be concise in milestone messages — the founder wants progress, not essays.
• COST EFFICIENCY: Do not repeat work. If designs exist, don't regenerate
them. If code works, don't rewrite it. If 2 test cycles pass, don't run 5.
Scale your effort to the project's complexity.
• ALL code must be committed to git and pushed to Gitea before deployment.
• ALL deployments MUST use the deploy.sh script: bash deploy.sh <name> <type>
Do NOT use Coolify MCP tools directly — they require full Gitea URLs and
are error-prone. deploy.sh handles git, Gitea, and Coolify correctly.
This is NON-NEGOTIABLE. If you call Coolify MCP tools directly instead
of deploy.sh, the deployment WILL fail.
────────────────────────────────────────────────────────────────────────────────
9. DEPLOYMENT — deploy.sh
────────────────────────────────────────────────────────────────────────────────
A deploy.sh script is pre-installed in every project workspace. It handles the
ENTIRE deployment pipeline in one command:
bash deploy.sh <project-name> [nixpacks|static|dockerfile]
What it does automatically:
1. git add + commit
2. Creates Gitea repo (if doesn't exist)
3. Pushes to Gitea
4. Creates Coolify app (if doesn't exist) or redeploys
5. Waits for deployment
6. Prints the production URL
Build types:
• "static" — HTML/CSS-only (design mockups, landing pages)
• "nixpacks" — Node.js, Python, Go (auto-detects from package.json etc.)
• "dockerfile" — uses Dockerfile in project root
██ MANDATORY: USE THIS SCRIPT FOR EVERY DEPLOYMENT ██
Do NOT call Coolify MCP tools (mcp__coolify__application, mcp__coolify__deploy,
mcp__coolify__env_vars) directly. They require full URLs and are error-prone.
deploy.sh handles everything correctly — git, Gitea repo creation, full
Gitea URL construction, Coolify app creation, env vars, and deployment.
If you bypass deploy.sh, the deployment WILL fail with "does not appear to
be a git repository" because Coolify needs the FULL Gitea URL, not a
relative path.
Examples:
bash deploy.sh party-game-designs static # deploy design mockups
bash deploy.sh party-game nixpacks # deploy the full app
bash deploy.sh party-game dockerfile # deploy with Dockerfile
Gitea: https://gitea.tenx.dot8.in
Coolify: https://coolify.tenx.dot8.in
NEVER tell the founder to deploy manually. You own the full pipeline.
────────────────────────────────────────────────────────────────────────────────
11. OBSERVABILITY — SIGNOZ APM
────────────────────────────────────────────────────────────────────────────────
Every deployed app MUST have SigNoz APM. This is non-negotiable.
SigNoz instance: http://100.64.0.10:3301
OTel collector endpoint: http://100.64.0.10:4318
DURING DEVELOPMENT (Phase 5):
The Developer MUST add OpenTelemetry instrumentation to apps with a backend.
Do NOT add SigNoz to static HTML sites or design mockup pages.
• Node.js: @opentelemetry/auto-instrumentations-node + OTLP HTTP exporter
• Python: opentelemetry-distro + opentelemetry-exporter-otlp
• Service name = project name
• Traces, metrics, and logs exported to SIGNOZ_OTEL_ENDPOINT
AFTER DEPLOYMENT (Phase 9+):
Use SigNoz MCP tools to:
1. Verify traces are flowing — check that the service appears in SigNoz
2. Monitor for errors — query error traces and logs
3. Check latency — p50/p95/p99 response times
4. If errors or performance issues are found:
a. Use SigNoz MCP to get the trace details and stack traces
b. Delegate the fix to the Developer
c. Commit, push to Gitea, redeploy via Coolify
d. Verify the fix via SigNoz
5. Post a milestone to the founder: "App is live and monitored — no errors"
OR "Found and fixed X errors in production"
The full pipeline: code → SigNoz instrumentation → git → Gitea → Coolify →
production → SigNoz monitors → errors detected → auto-fix → redeploy.
.claude/skills/ui-ux-pro-max/skill.md
+427
View File
@@ -0,0 +1,427 @@
# UI/UX Pro Max - Design Skill
You are an expert UI/UX designer. Follow these rules when creating, reviewing, or modifying any user interface. Every decision must be intentional, accessible, and grounded in proven design principles.
---
## 1. Color Theory & Accessibility
### Contrast Requirements
- **WCAG AA (minimum):** 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold)
- **WCAG AAA (enhanced):** 7:1 for normal text, 4.5:1 for large text
- **Non-text elements:** 3:1 contrast ratio for UI components and graphical objects
- Always verify contrast ratios before finalizing any color pairing
### Color Usage Rules
- Never use color as the sole indicator of meaning (add icons, patterns, or text labels)
- Limit primary palette to 1 brand color + 1-2 accent colors + neutrals
- Use semantic color tokens: `--color-success`, `--color-warning`, `--color-error`, `--color-info`
- Ensure color consistency across light and dark themes
- Test all color choices with a color-blindness simulator (protanopia, deuteranopia, tritanopia)
### Palette Construction
- Choose a primary hue, then derive shades in 9-11 steps (50, 100, 200 ... 900, 950)
- Neutral palette should have a subtle warm or cool tint matching the primary
- Reserve saturated colors for interactive elements and key indicators
- Background colors: keep saturation below 5% for large surfaces
- Use opacity-based overlays (`rgba`) for layering rather than unique hex values
---
## 2. Typography
### Font Selection
- Use a maximum of 2 typefaces: one for headings, one for body
- Prefer system font stacks for performance: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`
- If using custom fonts, always declare fallbacks and use `font-display: swap`
- Ensure chosen fonts support all required character sets and weights
### Type Scale (Major Third - 1.25 ratio)
```
--text-xs: 0.75rem (12px)
--text-sm: 0.875rem (14px)
--text-base: 1rem (16px) ← body default
--text-lg: 1.125rem (18px)
--text-xl: 1.25rem (20px)
--text-2xl: 1.5rem (24px)
--text-3xl: 1.875rem (30px)
--text-4xl: 2.25rem (36px)
--text-5xl: 3rem (48px)
```
### Line Height
- Body text: 1.5 - 1.6 (24-26px at 16px base)
- Headings: 1.1 - 1.3
- Captions and labels: 1.4
- Never go below 1.1 for any text
### Letter Spacing
- Body text: 0 (default)
- Headings (large): -0.01em to -0.02em for tighter look
- All-caps labels: 0.05em to 0.1em
- Small text: +0.01em for readability
### Paragraph Rules
- Maximum line length: 60-75 characters (use `max-width: 65ch` on text containers)
- Paragraph spacing: 1em between paragraphs
- Avoid justified text on the web (use left-aligned)
- Minimum body font size: 16px on mobile, 14px on desktop
---
## 3. Spacing & Layout System
### 8px Grid
All spacing values must be multiples of 4px, preferring 8px increments:
```
--space-0: 0
--space-1: 0.25rem (4px)
--space-2: 0.5rem (8px)
--space-3: 0.75rem (12px)
--space-4: 1rem (16px)
--space-5: 1.25rem (20px)
--space-6: 1.5rem (24px)
--space-8: 2rem (32px)
--space-10: 2.5rem (40px)
--space-12: 3rem (48px)
--space-16: 4rem (64px)
--space-20: 5rem (80px)
--space-24: 6rem (96px)
```
### Layout Principles
- Use CSS Grid for page-level layout, Flexbox for component-level alignment
- Define consistent container max-widths: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px)
- Apply horizontal padding to containers: 16px mobile, 24px tablet, 32px desktop
- Maintain consistent gutter widths within grids (16px or 24px)
- Content sections should have vertical rhythm using consistent spacing tokens
### Whitespace
- More whitespace around higher-level groupings (sections > cards > inline elements)
- Padding inside containers: at least 16px
- Space between related items: 8-12px
- Space between unrelated groups: 24-48px
- Use `gap` property instead of margins on flex/grid children
---
## 4. Component Design Patterns
### Buttons
- **Sizes:** sm (32px height), md (40px height), lg (48px height)
- **Minimum width:** 80px for text buttons
- **Touch target:** minimum 44x44px (add padding if button is visually smaller)
- **Padding:** horizontal 16-24px, vertical 8-12px
- **Border radius:** 6-8px for modern feel, 4px for conservative
- **States:** default, hover, active/pressed, focus-visible, disabled, loading
- **Hierarchy:** primary (filled), secondary (outlined), tertiary/ghost (text-only)
- **Disabled buttons:** reduce opacity to 0.5, remove pointer events, add `aria-disabled`
- **Loading state:** replace label with spinner, maintain button width, disable interaction
- **Icon buttons:** always include `aria-label`, maintain square aspect ratio
### Forms
- **Labels:** always visible above the input, never use placeholder as label
- **Input height:** 40-48px for comfortable touch targets
- **Input padding:** 12-16px horizontal
- **Border:** 1px solid with at least 3:1 contrast against background
- **Focus ring:** 2px solid brand color with 2px offset, or equivalent visual indicator
- **Error states:** red border + error icon + error message below the field
- **Error messages:** use `role="alert"` or `aria-live="polite"` for dynamic errors
- **Helper text:** place below input in muted color, 12-14px
- **Required fields:** mark with asterisk (*) and include "(required)" in aria-label
- **Field spacing:** 16-24px vertical gap between form fields
- **Submit buttons:** always at the bottom, full-width on mobile
### Cards
- **Padding:** 16-24px
- **Border radius:** 8-12px
- **Elevation:** use box-shadow for depth (`0 1px 3px rgba(0,0,0,0.12)` for subtle)
- **Border:** optional 1px border for low-contrast backgrounds
- **Interactive cards:** add hover elevation change, cursor pointer, focus outline
- **Content order:** image/media > title > description > metadata > actions
- **Clickable cards:** wrap in `<a>` or `<button>`, ensure entire surface is clickable
### Navigation
- **Primary nav:** keep to 5-7 top-level items maximum
- **Active state:** distinct visual indicator (color, weight, underline, or background)
- **Mobile nav:** hamburger menu or bottom tab bar (max 5 items)
- **Breadcrumbs:** use on pages 3+ levels deep, separate with `/` or `>`
- **Skip navigation:** always include "Skip to main content" as first focusable element
- **Current page:** use `aria-current="page"` on active nav items
### Modals / Dialogs
- **Overlay:** semi-transparent backdrop (`rgba(0,0,0,0.5)`)
- **Max width:** 480px for alerts, 640px for forms, 800px for complex content
- **Padding:** 24-32px
- **Close button:** always present in top-right corner (X icon with `aria-label="Close"`)
- **Focus trap:** focus must not escape the modal while open
- **Escape key:** must close the modal
- **Return focus:** restore focus to triggering element on close
- **Use `role="dialog"` and `aria-modal="true"`**
- **Prevent body scroll** when modal is open
### Tables
- **Header:** sticky top header with distinct background
- **Row height:** minimum 48px for touch targets
- **Cell padding:** 12-16px horizontal, 8-12px vertical
- **Zebra striping:** optional, use subtle alternating row colors
- **Sorting indicators:** arrows in column headers, `aria-sort` attribute
- **Responsive:** horizontal scroll wrapper or card layout on mobile
- **Empty state:** helpful message with action when no data
---
## 5. Responsive Design
### Breakpoints
```
sm: 640px (landscape phones)
md: 768px (tablets portrait)
lg: 1024px (tablets landscape / small laptops)
xl: 1280px (desktops)
2xl: 1536px (large screens)
```
### Mobile-First Rules
- Write base styles for mobile, then add complexity at larger breakpoints
- Stack columns vertically on mobile, use grid on tablet+
- Full-width buttons and inputs on mobile
- Increase touch targets on mobile (minimum 44x44px)
- Hide non-essential content on small screens (show progressive detail)
- Use `clamp()` for fluid typography: `font-size: clamp(1rem, 2.5vw, 1.5rem)`
### Responsive Patterns
- **Navigation:** top bar on desktop, bottom tabs or hamburger on mobile
- **Sidebar:** collapsible or off-canvas on mobile, persistent on desktop
- **Images:** use `srcset` and `sizes` attributes, serve appropriate resolutions
- **Grid:** 1 column mobile, 2 columns tablet, 3-4 columns desktop
- **Modals:** full-screen on mobile, centered overlay on desktop
- **Tables:** horizontal scroll or card-based layout on mobile
- **Font sizes:** 14-16px body on mobile, 16-18px on desktop
---
## 6. Animation & Micro-interactions
### Timing
- **Instant feedback:** 50-100ms (button press, toggle, checkbox)
- **Quick transitions:** 150-200ms (hover effects, dropdown open)
- **Standard transitions:** 200-300ms (page element transitions, card expand)
- **Complex animations:** 300-500ms (modal open/close, page transitions)
- **Never exceed** 500ms for UI transitions (feels sluggish)
### Easing Functions
- **Enter:** `ease-out` or `cubic-bezier(0, 0, 0.2, 1)` - elements appearing
- **Exit:** `ease-in` or `cubic-bezier(0.4, 0, 1, 1)` - elements leaving
- **Movement:** `ease-in-out` or `cubic-bezier(0.4, 0, 0.2, 1)` - repositioning
- **Spring/bounce:** use sparingly, only for playful or celebratory UI
### Animation Rules
- Always respect `prefers-reduced-motion: reduce` — disable or minimize all animation
- Never animate layout properties (`width`, `height`, `top`, `left`) — use `transform` and `opacity`
- Use `will-change` sparingly, only on elements about to animate
- Loading skeletons: pulse animation at 1.5-2s cycle
- Scroll-triggered animations: trigger when element is 20-30% in viewport
- Do not use animation to convey critical information
### Purposeful Animation
- **Feedback:** confirm user actions (checkmark after save, ripple on click)
- **Orientation:** show spatial relationships (slide transitions between views)
- **Focus:** draw attention to important changes (notification badge, error shake)
- **Continuity:** maintain context during state changes (expand/collapse, page transitions)
- **Delight:** small moments of personality (logo animation, empty state illustration)
---
## 7. Accessibility (A11Y)
### Keyboard Navigation
- All interactive elements must be keyboard accessible
- Tab order must follow logical reading order (use `tabindex="0"`, avoid positive values)
- Custom components need arrow key navigation where appropriate (tabs, menus, listboxes)
- Visible focus indicator on ALL focusable elements (never `outline: none` without replacement)
- Focus indicator: 2px solid outline with 2px offset, contrasting color
- Implement focus trapping in modals, drawers, and dropdown menus
- Escape key closes overlays and cancels operations
### ARIA Usage
- Use semantic HTML first (`<button>`, `<nav>`, `<main>`, `<header>`, `<form>`)
- Add ARIA only when semantic HTML is insufficient
- Essential attributes: `aria-label`, `aria-labelledby`, `aria-describedby`
- Live regions: `aria-live="polite"` for non-urgent updates, `aria-live="assertive"` for errors
- State attributes: `aria-expanded`, `aria-selected`, `aria-checked`, `aria-pressed`
- Roles: `role="dialog"`, `role="alert"`, `role="tab"`, `role="tabpanel"`
- Never put ARIA on elements that already have native semantics unless overriding
### Screen Readers
- All images must have `alt` text (empty `alt=""` for decorative images)
- Icon-only buttons must have `aria-label`
- Form inputs must have associated `<label>` elements (via `for`/`id`)
- Group related radio buttons and checkboxes with `<fieldset>` and `<legend>`
- Use heading hierarchy (h1-h6) correctly, never skip levels
- Announce dynamic content changes with live regions
- Provide text alternatives for charts, graphs, and data visualizations
- Test with at least one screen reader (VoiceOver, NVDA, or JAWS)
### Touch & Pointer
- **Minimum touch target:** 44x44px (iOS) / 48x48dp (Android Material)
- **Spacing between targets:** minimum 8px
- **No hover-only interactions** — everything must be accessible via tap/click/keyboard
- Provide adequate hit areas even if the visual element is smaller (use padding)
---
## 8. Visual Hierarchy & Information Architecture
### Hierarchy Principles
- Establish clear F-pattern or Z-pattern reading flow
- Use size, weight, color, and spacing to create 3-4 distinct levels of importance
- Primary action should be the most visually prominent element
- Group related information with proximity and shared containers
- Use progressive disclosure: show summary first, details on demand
### Content Ordering
1. Most important / most-used content first
2. Navigation and wayfinding
3. Primary content area
4. Supporting content and sidebars
5. Footer and tertiary information
### Visual Weight
- **Highest:** large bold text, filled primary buttons, saturated colors, images
- **Medium:** subheadings, outlined buttons, icons with labels
- **Lowest:** body text, muted colors, ghost buttons, fine borders
### Empty States
- Never show a blank screen — always provide an empty state
- Include: illustration/icon + explanatory text + primary action to get started
- Tone should be helpful and encouraging, never blaming
### Error States
- Use inline validation (show errors as user interacts, not only on submit)
- Error messages must explain what went wrong AND how to fix it
- Group error summary at the top of forms with links to each field
- Use `aria-invalid="true"` on fields with errors
- Red color + icon + text (never color alone)
---
## 9. Dark Mode
### Implementation Rules
- Never simply invert colors — redesign for dark surfaces
- Use dark grays (not pure black) for backgrounds: `#121212`, `#1E1E1E`, `#2D2D2D`
- Reduce white text to 87% opacity for body, 60% for secondary, 38% for disabled
- Desaturate brand colors slightly for dark backgrounds to reduce vibration
- Increase elevation with lighter surface colors (not shadows)
- Maintain all contrast ratios from light mode
- Test all states (hover, focus, active, error, disabled) in both themes
### Surface Hierarchy (Dark Mode)
```
--surface-0: #121212 (base background)
--surface-1: #1E1E1E (cards, elevated surfaces)
--surface-2: #2D2D2D (modals, dropdowns)
--surface-3: #3D3D3D (hover states on surfaces)
--surface-4: #4D4D4D (active/pressed states)
```
### Color Adjustments
- Shadows are less effective on dark backgrounds — reduce or remove
- Use subtle borders (1px with low-opacity white) to separate surfaces
- Status colors should be softer: pastel variants of red, green, yellow, blue
- Ensure brand colors still meet contrast requirements on dark surfaces
- Test color-blind modes in dark theme separately
---
## 10. Iconography & Imagery
### Icons
- Use a consistent icon set throughout the application (do not mix styles)
- Standard sizes: 16px, 20px, 24px, 32px
- Icons must have 2px stroke weight at 24px size (scale proportionally)
- Always pair icons with labels for clarity (icon-only acceptable only for universally understood symbols: close, search, menu, home)
- Touch target for icon buttons: 44x44px minimum (larger than the icon itself)
### Images
- Always provide meaningful `alt` text
- Use `aspect-ratio` CSS property to prevent layout shift
- Lazy-load images below the fold (`loading="lazy"`)
- Provide responsive images with `srcset`
- Use modern formats (WebP, AVIF) with JPEG/PNG fallbacks
- Skeleton loading placeholders while images load
---
## 11. Performance & Perceived Performance
### Loading Patterns
- Show skeleton screens instead of spinners for content-heavy pages
- Use optimistic UI updates for user actions (show success before server confirms)
- Inline loading indicators within the triggering element (button spinner)
- Progress bars for operations > 2 seconds
- Never block the entire UI for a single loading operation
### Perceived Speed
- Animate content in progressively (stagger list items by 50ms)
- Pre-fetch likely next pages on hover/focus of links
- Prioritize above-the-fold content rendering
- Use `content-visibility: auto` for long scrolling pages
- Defer non-critical CSS and JavaScript
---
## 12. Design Tokens & Theming
### Token Structure
Organize tokens in three layers:
1. **Primitive tokens:** raw values (`blue-500: #3B82F6`)
2. **Semantic tokens:** purpose-based (`color-primary: {blue-500}`)
3. **Component tokens:** scoped usage (`button-bg: {color-primary}`)
### Token Naming Convention
```
--{category}-{property}-{variant}-{state}
Examples:
--color-text-primary
--color-text-secondary
--color-bg-surface
--color-bg-surface-hover
--color-border-default
--color-border-error
--space-padding-card
--radius-button
--shadow-card
--shadow-card-hover
```
### Theme Switching
- Use CSS custom properties for all theme-able values
- Toggle themes by swapping a class or data attribute on `<html>`
- Store user preference in localStorage, respect `prefers-color-scheme` as default
- Transition theme changes smoothly (200ms on background-color, color)
---
## Quick Reference Checklist
Before finalizing any UI work, verify:
- [ ] All text meets WCAG AA contrast (4.5:1 normal, 3:1 large)
- [ ] Spacing uses the defined scale (multiples of 4px/8px)
- [ ] Typography follows the type scale with proper line heights
- [ ] All interactive elements have visible focus states
- [ ] Touch targets are at least 44x44px
- [ ] Forms have visible labels and proper error states
- [ ] Color is not the sole indicator of meaning
- [ ] Heading hierarchy is correct (h1 > h2 > h3, no skips)
- [ ] Images have appropriate alt text
- [ ] Modals trap focus and close on Escape
- [ ] Animations respect prefers-reduced-motion
- [ ] Layout works at all breakpoints (375px to 1536px+)
- [ ] Dark mode maintains all contrast ratios
- [ ] Loading states are defined for all async operations
- [ ] Empty states are designed for all list/data views
- [ ] Error states explain the problem and suggest a fix
.mcp-config.json
+45
View File
@@ -0,0 +1,45 @@
{
"mcpServers": {
"tenx-pm": {
"command": "npx",
"args": [
"tsx",
"/app/src/pm/mcp-server.ts"
],
"env": {
"PROJECT_ID": "8a14e99e-54e4-459e-8f3f-17006c17956a",
"USER_ID": "a45af1b6-f432-41cd-9c21-fac1716344f8",
"INTERNAL_API_URL": "http://localhost:3001"
}
},
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp",
"--headless"
]
},
"coolify": {
"command": "npx",
"args": [
"-y",
"@masonator/coolify-mcp@latest"
],
"env": {
"COOLIFY_ACCESS_TOKEN": "1|SNGNf0V2CsRwjKE3IRP5CDp4haMwb54EvQev4iClaa7ad838",
"COOLIFY_BASE_URL": "https://coolify.tenx.dot8.in"
}
},
"signoz": {
"command": "npx",
"args": [
"-y",
"signoz-mcp-server@latest"
],
"env": {
"SIGNOZ_BASE_URL": "http://100.64.0.10:3301",
"SIGNOZ_API_KEY": "m1PP5QrtG3dZBdkY2u1Rm1Z9l/UeGNZ5yJUnhduc4RE="
}
}
}
}
deploy.sh
Executable
+185
View File
@@ -0,0 +1,185 @@
#!/bin/bash
set -e
# Usage: deploy.sh <project-name> [dockerfile|nixpacks|static]
# Handles: Gitea repo creation, git push, Coolify app creation, deployment
# Returns: production URL
PROJECT_NAME="${1:?Usage: deploy.sh <project-name> [dockerfile|nixpacks|static]}"
BUILD_TYPE="${2:-nixpacks}"
GITEA_URL="${GITEA_URL:?GITEA_URL not set}"
GITEA_TOKEN="${GITEA_TOKEN:?GITEA_TOKEN not set}"
COOLIFY_BASE_URL="${COOLIFY_BASE_URL:?COOLIFY_BASE_URL not set}"
COOLIFY_ACCESS_TOKEN="${COOLIFY_ACCESS_TOKEN:?COOLIFY_ACCESS_TOKEN not set}"
GITEA_API="${GITEA_URL}/api/v1"
COOLIFY_API="${COOLIFY_BASE_URL}/api/v1"
GITEA_USER="pankaj"
echo "=== TenX Deploy: ${PROJECT_NAME} (build: ${BUILD_TYPE}) ==="
# ── Step 1: Git init + commit ────────────────────────────────────────
if [ ! -d .git ]; then
git init
git checkout -b main 2>/dev/null || true
fi
git add -A
git diff --cached --quiet 2>/dev/null || git commit -m "deploy: ${PROJECT_NAME}" --allow-empty
# ── Step 2: Create Gitea repo (ignore if exists) ─────────────────────
echo "[deploy] Creating Gitea repo..."
REPO_RESPONSE=$(curl -s -w "\n%{http_code}" -X POST "${GITEA_API}/user/repos" \
-H "Authorization: token ${GITEA_TOKEN}" \
-H "Content-Type: application/json" \
-d "{\"name\":\"${PROJECT_NAME}\",\"private\":false,\"auto_init\":false}")
HTTP_CODE=$(echo "${REPO_RESPONSE}" | tail -1)
if [ "${HTTP_CODE}" = "201" ]; then
echo "[deploy] Gitea repo created: ${GITEA_URL}/${GITEA_USER}/${PROJECT_NAME}"
elif [ "${HTTP_CODE}" = "409" ]; then
echo "[deploy] Gitea repo already exists"
else
echo "[deploy] Gitea repo creation returned ${HTTP_CODE} (continuing anyway)"
fi
# ── Step 3: Push to Gitea ────────────────────────────────────────────
GITEA_HOST=$(echo "${GITEA_URL}" | sed 's|https://||;s|http://||')
REMOTE_URL="https://${GITEA_USER}:${GITEA_TOKEN}@${GITEA_HOST}/${GITEA_USER}/${PROJECT_NAME}.git"
git remote remove origin 2>/dev/null || true
git remote add origin "${REMOTE_URL}"
git push -u origin main --force
echo "[deploy] Code pushed to Gitea"
# ── Step 4: Get Coolify server UUID ──────────────────────────────────
echo "[deploy] Getting Coolify server..."
SERVER_UUID=$(curl -s -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
"${COOLIFY_API}/servers" | python3 -c "import sys,json; servers=json.load(sys.stdin); print(servers[0]['uuid'])" 2>/dev/null)
if [ -z "${SERVER_UUID}" ]; then
echo "[deploy] ERROR: Could not get Coolify server UUID"
exit 1
fi
echo "[deploy] Server: ${SERVER_UUID}"
# ── Step 5: Get or create Coolify project ────────────────────────────
echo "[deploy] Getting Coolify project..."
PROJECT_UUID=$(curl -s -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
"${COOLIFY_API}/projects" | python3 -c "
import sys,json
projects=json.load(sys.stdin)
for p in projects:
if p.get('name','').lower() == 'tenx':
print(p['uuid'])
sys.exit(0)
print('')
" 2>/dev/null)
if [ -z "${PROJECT_UUID}" ]; then
echo "[deploy] Creating TenX project on Coolify..."
PROJECT_UUID=$(curl -s -X POST -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
-H "Content-Type: application/json" \
"${COOLIFY_API}/projects" \
-d '{"name":"TenX","description":"TenX auto-deployed apps"}' | python3 -c "import sys,json; print(json.load(sys.stdin).get('uuid',''))" 2>/dev/null)
fi
echo "[deploy] Project: ${PROJECT_UUID}"
# ── Step 6: Get first environment UUID ───────────────────────────────
ENV_UUID=$(curl -s -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
"${COOLIFY_API}/projects/${PROJECT_UUID}" | python3 -c "
import sys,json
data=json.load(sys.stdin)
envs=data.get('environments',[])
if envs: print(envs[0].get('id',''))
else: print('')
" 2>/dev/null)
if [ -z "${ENV_UUID}" ]; then
echo "[deploy] ERROR: No environment found in project"
exit 1
fi
echo "[deploy] Environment: ${ENV_UUID}"
# ── Step 7: Create Coolify application ───────────────────────────────
echo "[deploy] Creating Coolify application..."
REPO_FULL_URL="${GITEA_URL}/${GITEA_USER}/${PROJECT_NAME}.git"
APP_RESPONSE=$(curl -s -X POST -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
-H "Content-Type: application/json" \
"${COOLIFY_API}/applications" \
-d "{
\"project_uuid\": \"${PROJECT_UUID}\",
\"environment_name\": \"production\",
\"server_uuid\": \"${SERVER_UUID}\",
\"type\": \"public\",
\"name\": \"${PROJECT_NAME}\",
\"git_repository\": \"${REPO_FULL_URL}\",
\"git_branch\": \"main\",
\"build_pack\": \"${BUILD_TYPE}\",
\"ports_exposes\": \"3000\",
\"instant_deploy\": true
}")
APP_UUID=$(echo "${APP_RESPONSE}" | python3 -c "import sys,json; print(json.load(sys.stdin).get('uuid',''))" 2>/dev/null)
if [ -z "${APP_UUID}" ]; then
echo "[deploy] App creation response: ${APP_RESPONSE}"
# Try to find existing app
APP_UUID=$(curl -s -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
"${COOLIFY_API}/applications" | python3 -c "
import sys,json
apps=json.load(sys.stdin)
for a in apps:
if a.get('name','') == '${PROJECT_NAME}':
print(a['uuid'])
sys.exit(0)
print('')
" 2>/dev/null)
if [ -n "${APP_UUID}" ]; then
echo "[deploy] Found existing app: ${APP_UUID}, redeploying..."
curl -s -X POST -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
"${COOLIFY_API}/applications/${APP_UUID}/restart" > /dev/null
else
echo "[deploy] ERROR: Could not create or find app"
exit 1
fi
fi
echo "[deploy] App UUID: ${APP_UUID}"
# ── Step 8: Wait for deployment ──────────────────────────────────────
echo "[deploy] Waiting for deployment..."
for i in $(seq 1 30); do
sleep 10
STATUS=$(curl -s -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
"${COOLIFY_API}/applications/${APP_UUID}" | python3 -c "import sys,json; print(json.load(sys.stdin).get('status','unknown'))" 2>/dev/null)
echo "[deploy] Status: ${STATUS} (attempt ${i}/30)"
if [ "${STATUS}" = "running" ]; then
break
fi
if [ "${STATUS}" = "exited" ] || [ "${STATUS}" = "error" ]; then
echo "[deploy] Deployment failed with status: ${STATUS}"
# Get logs
curl -s -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
"${COOLIFY_API}/applications/${APP_UUID}/logs" 2>/dev/null | tail -20
exit 1
fi
done
# ── Step 9: Get the URL ──────────────────────────────────────────────
FQDN=$(curl -s -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
"${COOLIFY_API}/applications/${APP_UUID}" | python3 -c "import sys,json; print(json.load(sys.stdin).get('fqdn',''))" 2>/dev/null)
if [ -z "${FQDN}" ]; then
echo "[deploy] WARNING: No FQDN set — app may be accessible via Coolify dashboard only"
echo "[deploy] App UUID: ${APP_UUID}"
else
echo ""
echo "=== DEPLOYED ==="
echo "URL: ${FQDN}"
echo "Gitea: ${GITEA_URL}/${GITEA_USER}/${PROJECT_NAME}"
echo "================"
fi
designs/01-login.html
+252
View File
@@ -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>
designs/02-dashboard.html
+696
View File
@@ -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>
designs/03-people.html
+383
View File
@@ -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>
designs/04-employee-profile.html
+431
View File
@@ -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>
designs/05-leave.html
+336
View File
@@ -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>
designs/06-payroll.html
+361
View File
@@ -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>
designs/07-recruitment.html
+322
View File
@@ -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>
designs/08-performance.html
+386
View File
@@ -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>
designs/09-analytics.html
+373
View File
@@ -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 &amp; 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>
designs/10-settings.html
+320
View File
@@ -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 &amp; 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 &amp; 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>
designs/index.html
+363
View File
@@ -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>
visual-test-runner.js
+315
View File
@@ -0,0 +1,315 @@
#!/usr/bin/env node
const puppeteer = require("puppeteer");
const fs = require("fs");
const path = require("path");
const DEFAULT_VIEWPORTS = {
mobile: { width: 375, height: 812 },
tablet: { width: 768, height: 1024 },
desktop: { width: 1440, height: 900 },
};
async function run() {
const manifestPath = path.resolve(process.cwd(), "test-manifest.json");
if (!fs.existsSync(manifestPath)) {
console.error("ERROR: test-manifest.json not found in", process.cwd());
process.exit(1);
}
const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
const baseUrl = manifest.baseUrl || "http://localhost:3000";
const viewports = manifest.viewports
? Object.fromEntries(
Object.entries(manifest.viewports).map(function (entry) {
return [entry[0], entry[1]];
})
)
: DEFAULT_VIEWPORTS;
const resultsDir = path.resolve(process.cwd(), "test-results");
if (!fs.existsSync(resultsDir)) {
fs.mkdirSync(resultsDir, { recursive: true });
}
const executablePath = process.env.PUPPETEER_EXECUTABLE_PATH || "chromium";
var browser;
try {
browser = await puppeteer.launch({
headless: "new",
executablePath: executablePath,
args: ["--no-sandbox", "--disable-setuid-sandbox", "--disable-gpu"],
});
} catch (err) {
console.error("ERROR: Failed to launch browser:", err.message);
process.exit(1);
}
var results = { pages: [], passed: 0, failed: 0, errors: [] };
for (var pi = 0; pi < (manifest.pages || []).length; pi++) {
var pageDef = manifest.pages[pi];
var pageResult = {
id: pageDef.id,
url: baseUrl + (pageDef.path || "/"),
viewports: {},
passed: true,
};
var vpEntries = Object.entries(viewports);
for (var vi = 0; vi < vpEntries.length; vi++) {
var vpName = vpEntries[vi][0];
var vpSize = vpEntries[vi][1];
var vpResult = {
viewport: vpName,
screenshots: [],
actions: [],
consoleErrors: [],
passed: true,
};
var browserPage = null;
try {
browserPage = await browser.newPage();
await browserPage.setViewport(vpSize);
var consoleErrors = [];
browserPage.on("console", function (msg) {
if (msg.type() === "error") {
consoleErrors.push(msg.text());
}
});
browserPage.on("pageerror", function (err) {
consoleErrors.push(err.message);
});
await browserPage.goto(pageResult.url, {
waitUntil: "networkidle2",
timeout: 30000,
});
if (pageDef.waitFor) {
await browserPage.waitForSelector(pageDef.waitFor, { timeout: 10000 });
}
var initialScreenshot = path.join(
resultsDir,
pageDef.id + "-" + vpName + "-initial.png"
);
await browserPage.screenshot({
path: initialScreenshot,
fullPage: true,
});
vpResult.screenshots.push(initialScreenshot);
var actions = pageDef.actions || [];
for (var ai = 0; ai < actions.length; ai++) {
var action = actions[ai];
var actionResult = { id: action.id, type: action.type, passed: true, error: null };
try {
await executeAction(browserPage, action);
var actionScreenshot = path.join(
resultsDir,
pageDef.id + "-" + vpName + "-" + action.id + ".png"
);
await browserPage.screenshot({
path: actionScreenshot,
fullPage: true,
});
vpResult.screenshots.push(actionScreenshot);
if (action.expectAfter) {
var valid = await validateExpectations(
browserPage,
action.expectAfter
);
if (!valid) {
actionResult.passed = false;
actionResult.error = "Expectation failed for " + action.id;
}
}
} catch (err) {
actionResult.passed = false;
actionResult.error = err.message;
}
if (!actionResult.passed) {
vpResult.passed = false;
}
vpResult.actions.push(actionResult);
}
vpResult.consoleErrors = consoleErrors;
if (consoleErrors.length > 0) {
vpResult.passed = false;
}
} catch (err) {
vpResult.passed = false;
vpResult.error = err.message;
results.errors.push({
page: pageDef.id,
viewport: vpName,
error: err.message,
});
} finally {
if (browserPage) {
await browserPage.close().catch(function () {});
}
}
if (!vpResult.passed) {
pageResult.passed = false;
}
pageResult.viewports[vpName] = vpResult;
}
if (pageResult.passed) {
results.passed++;
} else {
results.failed++;
}
results.pages.push(pageResult);
}
await browser.close();
var summaryPath = path.join(resultsDir, "summary.json");
fs.writeFileSync(summaryPath, JSON.stringify(results, null, 2));
console.log("");
console.log("=== Visual Test Results ===");
console.log("Pages tested: " + results.pages.length);
console.log("Passed: " + results.passed);
console.log("Failed: " + results.failed);
for (var ri = 0; ri < results.pages.length; ri++) {
var p = results.pages[ri];
var icon = p.passed ? "PASS" : "FAIL";
console.log(" [" + icon + "] " + p.id + " (" + p.url + ")");
var vpKeys = Object.keys(p.viewports);
for (var vk = 0; vk < vpKeys.length; vk++) {
var vr = p.viewports[vpKeys[vk]];
if (!vr.passed) {
console.log(" " + vpKeys[vk] + ": FAIL" + (vr.error ? " - " + vr.error : ""));
for (var ak = 0; ak < (vr.actions || []).length; ak++) {
var a = vr.actions[ak];
if (!a.passed) {
console.log(" action " + a.id + ": " + a.error);
}
}
if (vr.consoleErrors && vr.consoleErrors.length > 0) {
console.log(" console errors: " + vr.consoleErrors.length);
}
}
}
}
console.log("");
console.log("Summary written to: " + summaryPath);
process.exit(results.failed > 0 ? 1 : 0);
}
async function executeAction(page, action) {
switch (action.type) {
case "click":
await page.waitForSelector(action.selector, { timeout: 5000 });
await page.click(action.selector);
break;
case "fill-form":
var fields = action.fields || [];
for (var fi = 0; fi < fields.length; fi++) {
var field = fields[fi];
await page.waitForSelector(field.selector, { timeout: 5000 });
await page.click(field.selector, { clickCount: 3 });
await page.type(field.selector, field.value);
}
break;
case "select":
await page.waitForSelector(action.selector, { timeout: 5000 });
await page.select(action.selector, action.value);
break;
case "scroll":
if (action.selector) {
await page.waitForSelector(action.selector, { timeout: 5000 });
await page.$eval(action.selector, function (el) {
el.scrollIntoView({ behavior: "smooth", block: "center" });
});
} else {
await page.evaluate(
function (x, y) { window.scrollTo(x, y); },
action.x || 0,
action.y || 0
);
}
await new Promise(function (r) { setTimeout(r, 500); });
break;
case "hover":
await page.waitForSelector(action.selector, { timeout: 5000 });
await page.hover(action.selector);
await new Promise(function (r) { setTimeout(r, 300); });
break;
case "wait":
if (action.selector) {
await page.waitForSelector(action.selector, {
timeout: action.timeout || 10000,
});
} else {
await new Promise(function (r) { setTimeout(r, action.duration || 1000); });
}
break;
default:
throw new Error("Unknown action type: " + action.type);
}
}
async function validateExpectations(page, expectations) {
var items = Array.isArray(expectations) ? expectations : [expectations];
for (var ei = 0; ei < items.length; ei++) {
var expect = items[ei];
if (expect.url) {
var currentUrl = page.url();
var pattern = new RegExp(expect.url);
if (!pattern.test(currentUrl)) {
return false;
}
}
if (expect.visible) {
var el = await page.$(expect.visible);
if (!el) return false;
var isVisible = await page.evaluate(function (s) {
var e = document.querySelector(s);
if (!e) return false;
var r = e.getBoundingClientRect();
return r.width > 0 && r.height > 0;
}, expect.visible);
if (!isVisible) return false;
}
if (expect.hidden) {
var elH = await page.$(expect.hidden);
if (elH) {
var isVis = await page.evaluate(function (s) {
var e = document.querySelector(s);
if (!e) return false;
var r = e.getBoundingClientRect();
return r.width > 0 && r.height > 0;
}, expect.hidden);
if (isVis) return false;
}
}
if (expect.text) {
var textContent = await page.$eval(
expect.text.selector,
function (el) { return el.textContent; }
);
if (!textContent || !textContent.includes(expect.text.contains)) {
return false;
}
}
}
return true;
}
run().catch(function (err) {
console.error("Fatal error:", err);
process.exit(1);
});