# JSOW Check-in — Live Time & Date Feature

## Objective
Add a prominent, beautiful live time and current-day date display to the approved photo-led check-in page. It should help members immediately confirm they are checking in for the correct day and service, without recreating the prior large empty-space problem.

## Files in scope
- `checkin.php`
- `assets/portal/css/user-portal.css`
- `assets/portal/js/portal.js`

Do not change backend processing, GPS behavior, form actions, CSRF, routes, photo URL, alerts, member/visitor pages, or admin files.

## Design placement
- Integrate the time/date into the left photographic welcome composition on desktop, below the short welcome copy.
- It must be visibly large and useful but not compete with the check-in form.
- Avoid a generic dashboard card. Prefer an editorial clock treatment using a fine divider, tabular numerals, and the existing warm brass/cream palette.
- Keep the compact header-to-copy spacing that just passed evaluation; do not reintroduce a large void.
- On mobile, the clock must fit within the photographic header without pushing the form too far down. Use a smaller but still prominent scale.

## Content and behavior
- Time example: `09:42:18 AM` with seconds updating live.
- Date example: `Sunday, 9 August 2026` or locale-equivalent full current date.
- Add semantic `<time>` elements with `datetime` values.
- Use `data-live-time` and `data-live-date` hooks.
- JavaScript updates immediately on load and then every second.
- Use the `Africa/Accra` timezone explicitly through `Intl.DateTimeFormat({timeZone:'Africa/Accra'})`, not the device timezone, so the church clock is authoritative.
- Keep tabular numeric alignment to prevent visual jumping.
- If JavaScript is unavailable, render server-side PHP time/date using the already configured Africa/Accra timezone.
- Accessible: the ticking seconds must not be an assertive live region or repeatedly interrupt screen readers. Give the whole block a useful static aria-label or visually hidden explanation.

## Validation
- PHP lint `checkin.php`.
- Existing image, member link, GPS auto-start, hidden fields, CSRF, and form action remain intact.
- Desktop 1440 and mobile 375 screenshots retain balanced spacing.
- Time changes after at least one second and date is visible.

