# JSOW User UI — Focused Corrective Iteration

## Objective
Fix four concrete production issues without reimagining the approved photo-led design:
1. The required background photo does not render on the check-in page.
2. Desktop has an unjustified large vertical gap between the header/logo and “Welcome to church”.
3. Member Portal link returns Not Found.
4. Location acquisition should start automatically on page load; users should not have to understand that they must click first.

## Files in scope
- `checkin.php`
- `visitor.php` only if its member link shares the bug
- `assets/portal/css/user-portal.css`
- `assets/portal/js/portal.js`
- `.htaccess` only if needed to keep directory routes valid; preferably also make links explicitly target `member/index.php`.

Do not touch backend processing, admin UI, database, security helpers, forms, CSRF, alerts, or member logic.

## Required fixes

### Background photo reliability
- Current CSS variable URL is relative and is resolving incorrectly through the external stylesheet context.
- Ensure the exact image reliably loads at `http://localhost/jsowbkm/assets/imgs/ECWA-Gospel-1-Church-in-Jos-where-bombs-were-planted.-Morning-Star-News.jpg`.
- Use a document-root/application-root-safe URL in the PHP inline CSS variable, or another robust method that works from checkin, visitor and member directory depths.
- Keep overlay/legibility and responsive cropping.

### Desktop vertical composition
- Remove `.photo-copy{align-self:end;padding-bottom:7vh}` behavior or equivalent that pushes welcome copy far down.
- On desktop, the welcome label/headline should begin within a visually intentional distance below the 88px header, while the form remains vertically balanced.
- Avoid a giant blank band. Do not jam content against the header.
- Mobile photo header behavior should remain compact and attractive.

### Member portal route
- Change all public links from ambiguous `member/` to a route that is verified to exist, preferably `member/index.php` (extensionless `member/index` is acceptable only if tested).
- If `.htaccess` is adjusted, protect actual directories with `RewriteCond %{REQUEST_FILENAME} !-d` before extensionless rewriting.
- Verify HTTP 200 for the exact href emitted by checkin and visitor pages.

### Automatic location acquisition
- Refactor current click-only geolocation code into a reusable `requestLocation()` function.
- Automatically call it after DOM readiness whenever `[data-location-state]` exists.
- The browser may show its normal permission prompt. Do not attempt to bypass browser security.
- Keep the “Use location / Try again / Refresh” button as a fallback/retry.
- Initial state should immediately become “Finding your location…” when automatic detection begins.
- Success fills latitude, longitude, accuracy, captured_at as now.
- Denied, unavailable, timeout and inaccurate states remain accessible alert states with helpful concise text.
- Do not submit the check-in form automatically.
- Avoid duplicate simultaneous location requests if the user taps during the automatic attempt.

## Validation
- PHP lint affected PHP pages.
- Required image URL returns HTTP 200.
- Member Portal exact link returns HTTP 200.
- Check-in HTML contains the corrected image URL.
- GPS auto-call exists and retry button remains.
- Desktop 1440 screenshot has no large header-to-welcome void; mobile 375 remains correct.

