Delivery Area

CON-003 | Service Area Check

Screen Overview

• Type: Standard screen with status bar and header (no bottom nav)
• Purpose: Verify the user's address is within the delivery service area before signup
• Navigation: Back → CON-002-onboarding-welcome.html | Continue (success) → CON-010-login-phone.html

Layout Specifications

• Status bar: 44px height, white background, 9:41 time display
• Header: 56px height | White BG | 1px bottom border #E5E7EB | Back button + centered title
• Map placeholder: Full width, 220px height | BG: #E9EFE7 | Grid overlay + dashed zone circle
• Content area: Scrollable flex column

Component Specs

• Back button: 40x40px | Transparent BG | 12px radius | Chevron left icon 24px
• Header title: Alexandria 17px / Semi-bold | Color: #1A1A1A | Centered (offset by back button width)
• Map pin: 48x48px SVG | Pin: #043F2D | Dot: #C9F06B
• Map zone circle: 180x180px | 2px dashed border rgba(4, 63, 45, 0.2) | BG: rgba(4, 63, 45, 0.04)
• Info text: Alatsi 15px | Color: #6B7280 | Centered | Line-height: 1.5 | Padding: 24px sides
• Address input: Full width, 52px height | 14px radius | 1.5px border #E5E7EB | Focus border: #043F2D | Left icon: search 20px | Padding-left: 48px
• Check button: Full width, 52px height | BG: #043F2D | White text | Alexandria 15px semi-bold | 14px radius | Top margin: 12px

Data States

• Default: No result visible. Map + input + check button only.
• Loading: Spinner (36px, 3px border, #043F2D top) + "Checking your area..." text + skeleton shimmer block
• Populated (success): Green success banner (#ECFDF5 bg, #A7F3D0 border) with checkmark icon + "Great news!" message + "Continue" lime accent button (56px, 16px radius)
• Error: Red error banner (#FEF2F2 bg, #FECACA border) with X icon + "Sorry" message + email input (52px, 14px radius, mail icon) + "Notify Me When Available" button (52px, #043F2D)

State Switcher

• Purpose: Dev/wireframe tool to toggle between states for review
• Location: Inline within content, below the address input
• Buttons: Loading | Success | Error | Default
• Note: This switcher would be removed in production; it's for wireframe review only

Behavior Notes

• "Check Availability" triggers loading state, then resolves to success or error
• Address input supports autocomplete from Google Places API (implementation detail)
• Email collection on error state feeds into marketing notification list
• "Continue" button on success advances to phone login/signup flow

Accessibility

• Back button has aria-label="Go back"
• Address input has aria-label="Enter your delivery address"
• Email input has aria-label="Enter your email address"
• Loading spinner has role="status" and aria-label
• All interactive elements are keyboard accessible