deploy: hr-portal-designs
This commit is contained in:
TenX PM
@@ -0,0 +1,347 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Attendance</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;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; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1E293B; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: #818CF8; background: rgba(79,70,229,0.15); border-left-color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #fff; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-bottom: 24px; }
|
||||
|
||||
.attendance-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; }
|
||||
|
||||
/* CALENDAR */
|
||||
.calendar-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.cal-title { font-size: 18px; font-weight: 700; color: #0F172A; }
|
||||
.cal-nav { display: flex; align-items: center; gap: 8px; }
|
||||
.cal-nav-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #E2E8F0; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
|
||||
.cal-nav-btn:hover { background: #F1F5F9; }
|
||||
.cal-nav-btn svg { width: 16px; height: 16px; color: #64748B; }
|
||||
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
|
||||
.cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 0 10px; }
|
||||
.cal-cell {
|
||||
aspect-ratio: 1; border-radius: 8px; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: #374151;
|
||||
cursor: default; position: relative;
|
||||
}
|
||||
.cal-cell .day-num { font-size: 13px; font-weight: 600; }
|
||||
.cal-cell.weekend { background: #F8FAFC; color: #94A3B8; }
|
||||
.cal-cell.present { background: #ECFDF5; color: #065F46; }
|
||||
.cal-cell.present .day-num { color: #065F46; }
|
||||
.cal-cell.absent { background: #FEF2F2; color: #991B1B; }
|
||||
.cal-cell.wfh { background: #EFF6FF; color: #1E40AF; }
|
||||
.cal-cell.half-day { background: #FFF7ED; color: #9A3412; }
|
||||
.cal-cell.holiday { background: #F5F3FF; color: #5B21B6; }
|
||||
.cal-cell.future { background: transparent; color: #CBD5E1; border: 1px dashed #E2E8F0; }
|
||||
.cal-cell.today {
|
||||
border: 2px solid #4F46E5 !important;
|
||||
background: #EEF2FF;
|
||||
}
|
||||
.cal-cell .day-label { font-size: 9px; font-weight: 600; margin-top: 2px; text-transform: uppercase; }
|
||||
.cal-cell .mark-btn {
|
||||
font-size: 9px; font-weight: 700; background: #4F46E5; color: #fff;
|
||||
padding: 2px 6px; border-radius: 4px; margin-top: 3px; border: none; cursor: pointer;
|
||||
}
|
||||
.cal-cell.empty { background: transparent; }
|
||||
|
||||
/* LEGEND */
|
||||
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #F1F5F9; }
|
||||
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #64748B; }
|
||||
.legend-dot { width: 12px; height: 12px; border-radius: 3px; }
|
||||
|
||||
/* SIDE PANEL */
|
||||
.side-panel { display: flex; flex-direction: column; gap: 16px; }
|
||||
.summary-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.summary-title { font-size: 13px; font-weight: 700; color: #0F172A; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.summary-rows { display: flex; flex-direction: column; gap: 12px; }
|
||||
.summary-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.summary-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; }
|
||||
.summary-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
|
||||
.summary-val { font-size: 16px; font-weight: 700; color: #0F172A; }
|
||||
.divider { border: none; border-top: 1px solid #F1F5F9; }
|
||||
.total-row { display: flex; justify-content: space-between; align-items: center; padding-top: 4px; }
|
||||
.total-label { font-size: 13px; font-weight: 700; color: #0F172A; }
|
||||
.total-val { font-size: 16px; font-weight: 700; color: #0F172A; }
|
||||
.attendance-pct { text-align: center; padding: 12px 0 0; }
|
||||
.pct-num { font-size: 32px; font-weight: 800; color: #10B981; }
|
||||
.pct-label { font-size: 12px; color: #64748B; margin-top: 2px; }
|
||||
.pct-bar { height: 8px; background: #F1F5F9; border-radius: 999px; margin-top: 10px; }
|
||||
.pct-fill { height: 100%; border-radius: 999px; background: #10B981; }
|
||||
|
||||
/* TODAY STATUS CARD */
|
||||
.today-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.today-header { font-size: 14px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.today-date { font-size: 12px; color: #64748B; margin-bottom: 16px; }
|
||||
select { width: 100%; padding: 9px 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; color: #374151; background: #fff; outline: none; margin-bottom: 10px; }
|
||||
select:focus { border-color: #4F46E5; }
|
||||
.btn-submit { width: 100%; padding: 11px; background: #4F46E5; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer; }
|
||||
.btn-submit:hover { background: #4338CA; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" 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="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Employee Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main Menu</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"><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="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>My Profile</a>
|
||||
<a class="nav-item active" href="#"><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" ry="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>Attendance</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="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>Leave</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"><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>Payslips</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="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>Reimbursements</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="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>Tax & Form 16</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="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>Announcements</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">RS</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Rahul Sharma</div>
|
||||
<div class="sidebar-user-role">EMP-00247 · Engineering</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-title">My Attendance</div>
|
||||
<div class="topbar-right">
|
||||
<button 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>
|
||||
<span class="notif-dot"></span>
|
||||
</button>
|
||||
<div class="topbar-user">
|
||||
<div><div class="topbar-user-name">Rahul Sharma</div><div class="topbar-user-id">EMP-00247</div></div>
|
||||
<div class="avatar">RS</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-title">Attendance Calendar</div>
|
||||
<div class="page-subtitle">Your monthly attendance record — May 2026</div>
|
||||
|
||||
<div class="attendance-layout">
|
||||
<!-- CALENDAR -->
|
||||
<div>
|
||||
<div class="calendar-card">
|
||||
<div class="cal-header">
|
||||
<div class="cal-title">May 2026</div>
|
||||
<div class="cal-nav">
|
||||
<button 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></button>
|
||||
<button 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></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cal-grid">
|
||||
<!-- Day of week headers -->
|
||||
<div class="cal-dow">Sun</div>
|
||||
<div class="cal-dow">Mon</div>
|
||||
<div class="cal-dow">Tue</div>
|
||||
<div class="cal-dow">Wed</div>
|
||||
<div class="cal-dow">Thu</div>
|
||||
<div class="cal-dow">Fri</div>
|
||||
<div class="cal-dow">Sat</div>
|
||||
|
||||
<!-- Week 1: May starts on Friday -->
|
||||
<div class="cal-cell empty"></div>
|
||||
<div class="cal-cell empty"></div>
|
||||
<div class="cal-cell empty"></div>
|
||||
<div class="cal-cell empty"></div>
|
||||
<div class="cal-cell present"><div class="day-num">1</div><div class="day-label">P</div></div>
|
||||
<div class="cal-cell present"><div class="day-num">2</div><div class="day-label">P</div></div>
|
||||
<div class="cal-cell weekend"><div class="day-num">3</div></div>
|
||||
|
||||
<!-- Week 2 -->
|
||||
<div class="cal-cell weekend"><div class="day-num">4</div></div>
|
||||
<div class="cal-cell today">
|
||||
<div class="day-num">5</div>
|
||||
<button class="mark-btn">Mark</button>
|
||||
</div>
|
||||
<div class="cal-cell future"><div class="day-num">6</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">7</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">8</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">9</div></div>
|
||||
<div class="cal-cell weekend"><div class="day-num">10</div></div>
|
||||
|
||||
<!-- Week 3 -->
|
||||
<div class="cal-cell weekend"><div class="day-num">11</div></div>
|
||||
<div class="cal-cell holiday"><div class="day-num">12</div><div class="day-label" style="font-size:8px;">Holiday</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">13</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">14</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">15</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">16</div></div>
|
||||
<div class="cal-cell weekend"><div class="day-num">17</div></div>
|
||||
|
||||
<!-- Week 4 - back-fill April data -->
|
||||
<div class="cal-cell weekend"><div class="day-num">18</div></div>
|
||||
<div class="cal-cell holiday"><div class="day-num">19</div><div class="day-label" style="font-size:8px;">Holiday</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">20</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">21</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">22</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">23</div></div>
|
||||
<div class="cal-cell weekend"><div class="day-num">24</div></div>
|
||||
|
||||
<!-- Week 5 -->
|
||||
<div class="cal-cell weekend"><div class="day-num">25</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">26</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">27</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">28</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">29</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">30</div></div>
|
||||
<div class="cal-cell weekend"><div class="day-num">31</div></div>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#ECFDF5;border:1px solid #D1FAE5;"></div>Present</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#FEF2F2;border:1px solid #FECACA;"></div>Absent</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#EFF6FF;border:1px solid #BFDBFE;"></div>WFH</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#FFF7ED;border:1px solid #FED7AA;"></div>Half-day</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#F5F3FF;border:1px solid #DDD6FE;"></div>Holiday</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#F8FAFC;border:1px solid #E2E8F0;"></div>Weekend</div>
|
||||
</div>
|
||||
|
||||
<!-- Note: Showing April data below for a fuller view -->
|
||||
<div style="margin-top:20px;padding-top:20px;border-top:1px solid #F1F5F9;">
|
||||
<div style="font-size:12px;font-weight:600;color:#64748B;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px;">April 2026 — Recent History</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:6px;">
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 1 — Present</span>
|
||||
<span style="padding:4px 10px;background:#EFF6FF;color:#1E40AF;font-size:11px;font-weight:600;border-radius:6px;">Apr 2 — WFH</span>
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 3 — Present</span>
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 4 — Present</span>
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 7 — Present</span>
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 8 — Present</span>
|
||||
<span style="padding:4px 10px;background:#EFF6FF;color:#1E40AF;font-size:11px;font-weight:600;border-radius:6px;">Apr 9 — WFH</span>
|
||||
<span style="padding:4px 10px;background:#FFF7ED;color:#9A3412;font-size:11px;font-weight:600;border-radius:6px;">Apr 10 — Half-day</span>
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 11 — Present</span>
|
||||
<span style="padding:4px 10px;background:#FEF2F2;color:#991B1B;font-size:11px;font-weight:600;border-radius:6px;">Apr 14 — Absent</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SIDE PANEL -->
|
||||
<div class="side-panel">
|
||||
<div class="summary-card">
|
||||
<div class="summary-title">May Summary</div>
|
||||
<div class="attendance-pct">
|
||||
<div class="pct-num">81.8%</div>
|
||||
<div class="pct-label">Attendance Rate (2 days so far)</div>
|
||||
<div class="pct-bar"><div class="pct-fill" style="width:81.8%;"></div></div>
|
||||
</div>
|
||||
<div style="height:1px;background:#F1F5F9;margin:16px 0;"></div>
|
||||
<div class="summary-rows">
|
||||
<div class="summary-row">
|
||||
<div class="summary-label">
|
||||
<div class="summary-dot" style="background:#ECFDF5;border:1px solid #D1FAE5;"></div>
|
||||
Present
|
||||
</div>
|
||||
<div class="summary-val" style="color:#10B981;">2</div>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<div class="summary-label">
|
||||
<div class="summary-dot" style="background:#FEF2F2;border:1px solid #FECACA;"></div>
|
||||
Absent
|
||||
</div>
|
||||
<div class="summary-val" style="color:#EF4444;">0</div>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<div class="summary-label">
|
||||
<div class="summary-dot" style="background:#EFF6FF;border:1px solid #BFDBFE;"></div>
|
||||
WFH
|
||||
</div>
|
||||
<div class="summary-val" style="color:#3B82F6;">0</div>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<div class="summary-label">
|
||||
<div class="summary-dot" style="background:#FFF7ED;border:1px solid #FED7AA;"></div>
|
||||
Half-day
|
||||
</div>
|
||||
<div class="summary-val" style="color:#F59E0B;">0</div>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<div class="summary-label">
|
||||
<div class="summary-dot" style="background:#F5F3FF;border:1px solid #DDD6FE;"></div>
|
||||
Holidays
|
||||
</div>
|
||||
<div class="summary-val" style="color:#7C3AED;">2</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="divider" style="margin:12px 0;" />
|
||||
<div class="total-row">
|
||||
<span class="total-label">Total Working Days</span>
|
||||
<span class="total-val">23</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="today-card">
|
||||
<div class="today-header">Mark Today's Attendance</div>
|
||||
<div class="today-date">Monday, May 4, 2026</div>
|
||||
<select>
|
||||
<option value="">Select attendance status</option>
|
||||
<option value="present">Present (Office)</option>
|
||||
<option value="wfh">Work From Home</option>
|
||||
<option value="half-day">Half-day</option>
|
||||
</select>
|
||||
<select style="margin-bottom:14px;">
|
||||
<option>Select check-in time</option>
|
||||
<option>8:30 AM</option>
|
||||
<option>9:00 AM</option>
|
||||
<option>9:30 AM</option>
|
||||
<option>10:00 AM</option>
|
||||
</select>
|
||||
<button class="btn-submit">Submit Attendance</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user