fix
This commit is contained in:
Phuoc Nguyen
302
AUTH_UI_VISUAL_MOCKUP.txt
Normal file
302
AUTH_UI_VISUAL_MOCKUP.txt
Normal file
@@ -0,0 +1,302 @@
|
||||
╔════════════════════════════════════════════════════════════════════════════╗
|
||||
║ 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
|
||||
|
||||
Reference in New Issue
Block a user