╔════════════════════════════════════════════════════════════════════════════╗ ║ LOGIN PAGE - VISUAL MOCKUP ║ ║ (Material 3 - Light Mode) ║ ╚════════════════════════════════════════════════════════════════════════════╝ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ ┌──────────────┐ │ │ │ ╔════════╗ │ │ │ │ ║ ║ │ <- Purple container │ │ │ ║ 🏪 ║ │ with store icon │ │ │ ║ ║ │ │ │ │ ╚════════╝ │ │ │ └──────────────┘ │ │ │ │ Retail POS │ │ Welcome back! Please login to continue. │ │ │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ 📧 Email │ │ │ │ │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ ^ Light gray filled background │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ 🔒 Password 👁 │ │ │ │ │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ ^ Password dots obscured, eye icon for toggle │ │ │ │ ☑ Remember me Forgot Password? │ │ ^ Purple link │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ Login │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ ^ Purple elevated button, full width │ │ │ │ ────────────────────────── OR ────────────────────────── │ │ │ │ Don't have an account? Register │ │ ^ Purple bold │ │ │ └──────────────────────────────────────────────────────────────────────────┘ Max width: 400px (centered on large screens) Padding: 24px horizontal ═══════════════════════════════════════════════════════════════════════════ ╔════════════════════════════════════════════════════════════════════════════╗ ║ REGISTER PAGE - VISUAL MOCKUP ║ ║ (Material 3 - Light Mode) ║ ╚════════════════════════════════════════════════════════════════════════════╝ ┌──────────────────────────────────────────────────────────────────────────┐ │ ← Back │ │ ^ Transparent app bar │ │ │ │ ┌──────────────┐ │ │ │ ╔════════╗ │ │ │ │ ║ 🏪 ║ │ │ │ │ ╚════════╝ │ │ │ └──────────────┘ │ │ │ │ Create Account │ │ Join us and start managing your retail business. │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ 👤 Full Name │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ 📧 Email │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ 🔒 Password 👁 │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ 🔒 Confirm Password 👁 │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ │ ☑ I agree to the Terms and Conditions and Privacy Policy │ │ ^ Purple text links │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ Create Account │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ │ ────────────────────────── OR ────────────────────────── │ │ │ │ Already have an account? Login │ │ ^ Purple bold │ │ │ └──────────────────────────────────────────────────────────────────────────┘ ═══════════════════════════════════════════════════════════════════════════ ╔════════════════════════════════════════════════════════════════════════════╗ ║ LOADING STATE - VISUAL MOCKUP ║ ╚════════════════════════════════════════════════════════════════════════════╝ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ ┌──────────────┐ │ │ │ ╔════════╗ │ │ │ │ ║ 🏪 ║ │ │ │ │ ╚════════╝ │ │ │ └──────────────┘ │ │ │ │ Retail POS │ │ Welcome back! Please login to continue. │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ 📧 Email │ │ <- Disabled │ │ │ │ (grayed) │ └────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ 🔒 Password 👁 │ │ <- Disabled │ └────────────────────────────────────────────────────────────────────┘ │ │ │ │ ☐ Remember me Forgot Password? │ │ ^ Disabled ^ Disabled │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ ⏳ Loading... │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ ^ Spinner animation, button disabled │ │ │ │ ────────────────────────── OR ────────────────────────── │ │ │ │ Don't have an account? Register │ │ ^ Disabled │ └──────────────────────────────────────────────────────────────────────────┘ ═══════════════════════════════════════════════════════════════════════════ ╔════════════════════════════════════════════════════════════════════════════╗ ║ ERROR STATE - VISUAL MOCKUP ║ ╚════════════════════════════════════════════════════════════════════════════╝ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ Retail POS │ │ Welcome back! Please login to continue. │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ 📧 Email │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ 🔒 Password 👁 │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ │ ☑ Remember me Forgot Password? │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ Login │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ │ ────────────────────────── OR ────────────────────────── │ │ │ │ Don't have an account? Register │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐│ │ │ ❌ Invalid email or password Dismiss ││ │ └─────────────────────────────────────────────────────────────────────┘│ │ ^ Red SnackBar floating at bottom │ │ │ └──────────────────────────────────────────────────────────────────────────┘ ═══════════════════════════════════════════════════════════════════════════ ╔════════════════════════════════════════════════════════════════════════════╗ ║ VALIDATION ERROR - VISUAL MOCKUP ║ ╚════════════════════════════════════════════════════════════════════════════╝ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ Retail POS │ │ Welcome back! Please login to continue. │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ 📧 Email │ │ │ │ test@ │ │ <- Invalid │ └────────────────────────────────────────────────────────────────────┘ │ │ Please enter a valid email address │ │ ^ Red error text below field │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ 🔒 Password 👁 │ │ │ │ 123 │ │ <- Too short │ └────────────────────────────────────────────────────────────────────┘ │ │ Password must be at least 8 characters │ │ ^ Red error text below field │ │ │ │ ☑ Remember me Forgot Password? │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ Login │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────────────────────┘ ═══════════════════════════════════════════════════════════════════════════ ╔════════════════════════════════════════════════════════════════════════════╗ ║ DARK MODE - VISUAL MOCKUP ║ ╚════════════════════════════════════════════════════════════════════════════╝ ┌──────────────────────────────────────────────────────────────────────────┐ │ Background: Dark Gray (#1C1B1F) │ │ │ │ ┌──────────────┐ │ │ │ ╔════════╗ │ <- Light purple container │ │ │ ║ 🏪 ║ │ (#EADDFF) │ │ │ ╚════════╝ │ │ │ └──────────────┘ │ │ │ │ Retail POS (White Text) │ │ Welcome back! Please login to continue. (60% white) │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ 📧 Email (Light purple icon) │ │ │ │ │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ ^ Dark gray filled (#424242) │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ 🔒 Password (Light purple) 👁 │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ │ ☑ Remember me (White) Forgot Password? (Light purple) │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ Login (Black text on light purple) │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ ^ Light purple button (#D0BCFF) │ │ │ │ ────────────────────────── OR ────────────────────────── │ │ │ │ Don't have an account? Register (Light purple, bold) │ │ │ └──────────────────────────────────────────────────────────────────────────┘ ═══════════════════════════════════════════════════════════════════════════ COLOR PALETTE: ═════════════ LIGHT MODE: ────────── Background: #FFFBFE (White) Primary: #6750A4 (Purple) Primary Container: #EADDFF (Light Purple) Surface: #F5F5F5 (Light Gray - for fields) On Surface: #000000 (Black text) Error: #B3261E (Red) DARK MODE: ───────── Background: #1C1B1F (Dark Gray) Primary: #D0BCFF (Light Purple) Primary Container: #EADDFF (Light Purple) Surface: #424242 (Dark Gray - for fields) On Surface: #FFFFFF (White text) Error: #F2B8B5 (Light Red) ═══════════════════════════════════════════════════════════════════════════ SPACING & SIZES: ═══════════════ Logo Container: 100x100px, border radius 20px Text Field: Full width, height auto, border radius 8px Button: Full width, height 50px, border radius 8px Padding: 24px horizontal Field Spacing: 16px vertical Section Spacing: 24-48px vertical Max Width: 400px (constrained) ICONS: ═════ Logo: Icons.store (size 60) Email: Icons.email_outlined Password: Icons.lock_outline Visibility: Icons.visibility / visibility_off Person: Icons.person_outline TYPOGRAPHY: ══════════ App Title: Display Small, Bold Subtitle: Body Large, 60% opacity Labels: Body Medium Body Text: Body Medium Button Text: Title Medium, Bold Error Text: Body Small, Error color