Live Attendance
Face match, assigned location, and attendance window check
Front camera
Keep one full face centered
Recognizing...Please hold still
Allow camera access, then keep one full face centered in the frame
Models not loaded
GPS required
Liveness required
Admin manual attendance
Manual punch is available only after admin login. Admin can mark any enrolled employee attendance at any time.
Choose an enrolled employee to mark attendance manually.
Use Chrome on Android for the best result. On first run, face models load from CDN and may take a few seconds.
Punch Rules
Attendance windows for daily in and out punch
Morning punch opens first, afternoon punch opens later, and each employee is matched with the location assigned during registration.
First punch
Allowed from 06:00 AM to 09:30 AM
Second punch
Allowed from 11:00 AM to 06:00 PM
Location check
Attendance compares with the employee's assigned location: Senior Wing, Junior Wing, or Gate (Villa).
Daily limit
Only two attendance punches are accepted in one day unless admin marks manually.
Today attendance log
See each employee with photo, first in time, and latest out time for today.
| S.No. | Employee ID | Picture | Name | Date | In Time | Out Time | Duration |
|---|
CULTURE
Login
Use your employee ID to open your personal attendance portal.
OR
My profile
Only your own details are visible here. You can update your name, class or team, and assigned location.
Change password
Use your current password, then set a new one for future login.
◉
No image
Look straight
↶
No image
Turn slightly left
↷
No image
Turn slightly right
↑
No image
Lift chin a little
↓
No image
Lower chin a little
Start camera here to update your own face angles after login.
Login first to load your profile.
Enroll employee or student
Save a face template with class, department, and geofence settings. After admin login, templates are stored permanently in Postgres.
◉
No image
Look straight
↶
No image
Turn slightly left
↷
No image
Turn slightly right
↑
No image
Lift chin a little
↓
No image
Lower chin a little
Start camera from Live Attendance, then return here to capture employee images with the live stream visible.
Capture five angles of the real employee, then save the face template.
Bulk user registration
Upload Excel with columns: Employee ID, Name, Type, Group, Location. Face capture can be completed later by editing each employee.
Choose an Excel file to import many employees at once.
Enrolled templates
Each record stores metadata plus five 128-value face descriptors instead of raw biometric images.
Attendance log
See each employee with photo, first in time, latest out time, and total duration.
| S.NO. | EMPLOYEE ID | PICTURE | NAME | DATE | IN TIME | OUT TIME | DURATION |
|---|
Admin notes
This demo is front-end only. For production, connect it to a secure backend, encrypted template store, role-based access, and audit logs.
Recommended stackFlutter or PWA front end, Node API, MongoDB, encrypted blob store.
BuildableAnti-proxy controlsLiveness, GPS, device binding, selfie challenge, and duplicate punch lock.
ImportantSchool modeBatch by class section, teacher device only, daily CSV export.
Ready
![School logo]()
CULTURE
Admin login
Sign in to unlock user registration, reports, and system management.
Forgot password
Reset the admin password using the reset code.
GPS locations
Save location name with latitude and longitude. Registered employees will use these saved campus locations automatically.
Saved locations will appear here and automatically feed the employee location dropdown.
Manual attendance
Admin can mark attendance directly from this panel for any enrolled employee.
Choose an enrolled employee to mark attendance manually.
Offline sync
Pending offline attendance from this device can be synced when the server is reachable.
No pending offline attendance yet.
LogoutSign out from the admin panel on this device.
School details
Fill the school details and upload the school logo. These values will appear in reports while the CULTURE brand remains unchanged in the app.
Save school details once and the same school name and logo will appear in reports automatically.
Admin report page
Select a date from the calendar, choose an employee, then generate the attendance report.
Choose a date range and employee, then load the report.
How this system works
Use the same architecture for schools, offices, coaching centers, or field staff attendance.
Camera captureUse getUserMedia and detect one face continuously.
Face descriptorConvert the live face into a numerical vector in the device browser.
Secure matchCompare the vector with stored descriptors and apply a confidence threshold.
Attendance writeSave only metadata and score; sync to cloud when online.
For real deploymentAdd admin login, encrypted database, consent screen, privacy policy, and server-side duplicate prevention.
Next stepLiveness ideaAsk user to blink twice or turn left-right before attendance is accepted.
SecurityOffline modeCache descriptors on device and queue uploads until network returns.
Useful
