303 lines
31 KiB
Plaintext
303 lines
31 KiB
Plaintext
╔════════════════════════════════════════════════════════════════════════════╗
|
|
║ 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
|
|
|