# JSOW Public & Member Experience — Human-Crafted Redesign

## Objective
Redesign the user-facing public check-in, visitor registration, and member portal because the current UI feels generic/AI-generated and its colors/guideline blocks are disliked. Keep all existing PHP logic, CSRF fields, dynamic service values, check-in result data, GPS hooks, and member login behavior intact. This is a production iteration, not a mockup.

## Files in scope
- `checkin.php`
- `visitor.php`
- `member/index.php`
- Create `assets/portal/css/user-portal.css` specifically for public/member pages.
- Update `assets/portal/js/portal.js` only if needed for accessible alerts/tooltips; do not break management pages.

Do not edit admin portal pages, backend processing, database, migrations, or application security helpers.

## Required image
Use this exact project image as the defining full-bleed background/visual:
`assets/imgs/ECWA-Gospel-1-Church-in-Jos-where-bombs-were-planted.-Morning-Star-News.jpg`

On pages one directory deep (member), use the correct relative path. Treat it as a real editorial church photograph: preserve recognizable architecture, use careful object positioning, and add a controlled overlay for legibility. Do not generate or use other images.

## New aesthetic direction
“Sunday morning editorial, not dashboard.” The public experience should feel like a carefully designed church welcome desk:
- full-height photographic backdrop;
- restrained dark navy/ink overlay with warm sunlight tint;
- one confident cream/white interaction surface;
- small brass/golden accent used sparingly;
- fresh teal/green only for success/location-ready;
- brick/coral only for errors;
- no purple gradients, rainbow app tiles, excessive glass, decorative blobs, huge generic slogans, or fake statistics;
- strong composition and generous whitespace, with subtle asymmetry on desktop and a direct one-column flow on mobile.

## Typography
Use the local system font stack, but with editorial hierarchy: calm medium weights, slightly condensed/negative heading tracking, smaller upper labels, and no oversized marketing headline. Keep primary heading around 42–52px desktop and 30–36px mobile.

## Check-in page structure
- Desktop: photograph occupies the canvas; a compact header floats over it; a well-proportioned check-in card is positioned to the right/center-right, with a small contextual service panel integrated rather than several competing cards.
- Mobile: background remains visible in a purposeful photo header (not hidden entirely); the form surface flows below/overlaps slightly; bottom navigation remains accessible.
- Display real dynamic service name/time/venue from existing PHP.
- Phone/member ID field and large “Check in” action are the focus.
- Location action should be a compact status row/button, not a separate tutorial card.
- Visitor entry is a small secondary action.
- Remove paragraphs that explain process steps or privacy guidelines from the main surface.
- Replace removed guidance with small question-mark/info tooltip buttons. Tooltips must work on hover, keyboard focus, and tap, with concise text.

## Alerts and messages
Every user-facing message must render as a polished alert box rather than plain notices/text:
- success: green check icon, tinted green surface, clear title;
- error/rejected: coral/red icon and tint;
- warning/already checked in/location issue: amber icon and tint;
- informational/service unavailable: blue icon and tint.
- Alert uses `$result['success']` and `$result['code']` to choose the correct style.
- Alerts must have `role="status"` or `role="alert"` appropriately.
- Visitor/member login errors and session messages must also use these alert styles.
- Do not expose stack traces or technical codes.

## Visitor page
- Same photographic brand system.
- Friendly compact title and form, not a large hero plus generic guidelines.
- Fields: name, phone, visitor type stay intact.
- Privacy text moves into an info tooltip next to the submit area.
- Mobile bottom navigation stays usable.

## Member portal
- Signed-out view uses the same image-led welcome with a refined login panel.
- Display `$loginError` as a proper error alert.
- Authenticated member view should feel like a personal church home, not a dashboard full of generic app tiles. Use a calmer editorial feed: service/check-in feature, membership card, upcoming/announcement rows. Preserve existing links/hooks and safe session handling.
- Keep theme toggle only if it looks intentional; dark mode is optional for user pages, but contrast must remain excellent.

## Color direction
- Ink: #10231f or similarly deep green-black/navy.
- Cream: #f7f2e8.
- Paper: #fffdf8.
- Brass accent: #c18b32.
- Success: #167456.
- Error: #b7443e.
- Warning: #a76516.
- Info: #285f8f.
Tune based on the photograph so the palette feels derived from the image, not pasted on.

## Interaction/accessibility requirements
- Keep 44px minimum touch targets.
- Visible focus states.
- Tooltips use buttons with `aria-describedby` or `aria-expanded`; CSS hover/focus plus JS tap behavior if needed.
- Bottom nav never covers alerts or submit actions and hides/moves for mobile keyboard if current behavior supports it.
- Geolocation states must remain connected to existing `data-location-*` hooks and hidden form fields.
- No permanent preloader.
- No external CDN, package, or font request.
- PHP 8.0 compatible and semantic HTML.

## Content tone
Short, warm, direct, human. Examples: “Welcome. Let’s check you in.”, “Use the phone number or member ID on your church profile.” Avoid generic marketing language and excessive explanation.

## Validation
Ensure all three PHP pages lint, desktop/mobile layouts render, all dynamic/CSRF fields remain present, check-in form still posts to `process_checkin.php`, visitor form to `process_visitor.php`, and member login remains functional.

