Relevant source files

The following files were used as context for generating this wiki page: - [design-ui/barber\_profile\_1/code.html](https://github.com/YosefHayim/get-barber/blob/main/design-ui/barber_profile_1/code.html) - [design-ui/manage\_addresses/code.html](https://github.com/YosefHayim/get-barber/blob/main/design-ui/manage_addresses/code.html) - [design-ui/notification\_settings/code.html](https://github.com/YosefHayim/get-barber/blob/main/design-ui/notification_settings/code.html) - [design-ui/barber\_reviews/code.html](https://github.com/YosefHayim/get-barber/blob/main/design-ui/barber_reviews/code.html) - [design-ui/welcome\_to\_barber\_app\_2/code.html](https://github.com/YosefHayim/get-barber/blob/main/design-ui/welcome_to_barber_app_2/code.html) - [design-ui/searching\_for\_barber\_2/code.html](https://github.com/YosefHayim/get-barber/blob/main/design-ui/searching_for_barber_2/code.html) - [design-ui/my\_bookings/code.html](https://github.com/YosefHayim/get-barber/blob/main/design-ui/my_bookings/code.html) - [design-ui/user\_profile/code.html](https://github.com/YosefHayim/get-barber/blob/main/design-ui/user_profile/code.html)

# Design Assets & HTML Mockups The Design Assets and HTML Mockups represent the visual architecture and user interface definitions for the Get-Barber platform. These mockups provide a high-fidelity reference for both Customer and Barber user journeys, utilizing Tailwind CSS for styling and Material Symbols for iconography. The system is designed with a mobile-first approach, featuring responsive layouts, dark mode support, and interactive components like progress trackers, map overlays, and feedback systems. The scope of these assets covers critical application flows including onboarding, real-time barber searching, profile management, booking tracking, and system configuration. These files serve as the primary blueprint for the React Native implementation found in the `app/` directory. Sources: [design-ui/welcome_to_barber_app_2/code.html](), [design-ui/searching_for_barber_2/code.html](), [design-ui/barber_profile_1/code.html]() ## 1. UI Architecture and Design System The project employs a consistent design system defined through Tailwind CSS configurations. It supports dual-theme modes (Light/Dark) and utilizes high-contrast color palettes for accessibility and visual hierarchy. ### Core Design Tokens | Token Category | Values | Application | | :--- | :--- | :--- | | **Primary Color** | `#135bec` (Blue) / `#11a4d4` (Cyan) | Action buttons, active states, progress bars | | **Background** | `#f6f6f8` (Light) / `#101622` (Dark) | Main viewport background | | **Surface/Card** | `#ffffff` (Light) / `#1c2533` (Dark) | Content containers, list items, cards | | **Typography** | Inter, Plus Jakarta Sans | Display and body text | | **Border Radius** | `0.75rem` (xl), `1rem` (2xl), `9999px` (full) | Buttons, cards, and avatars | Sources: [design-ui/manage_addresses/code.html:26-44](), [design-ui/notification_settings/code.html:27-46](), [design-ui/user_profile/code.html:26-44]() ### Visual Flow Diagram The following diagram illustrates the relationship between various UI states from onboarding to post-service feedback. ```mermaid graph TD Welcome[Welcome Screen] --> Search[Searching for Barber] Search --> Profile[Barber Profile View] Profile --> Booking[Booking Confirmation] Booking --> Tracking[En Route / Arrived] Tracking --> Review[Rate Your Barber] Review --> History[My Bookings] subgraph Management Profile_Mgmt[User Profile] Addr_Mgmt[Manage Addresses] Notif_Mgmt[Notification Settings] end Profile_Mgmt --> Addr_Mgmt Profile_Mgmt --> Notif_Mgmt ``` Sources: [design-ui/welcome_to_barber_app_2/code.html](), [design-ui/searching_for_barber_2/code.html](), [design-ui/barber_profile_1/code.html](), [design-ui/my_bookings/code.html](), [design-ui/user_profile/code.html]() ## 2. Component Specifications ### 2.1 Map Integration and Search UI The search interface utilizes a "Radar" metaphor to visualize real-time matching. It combines abstract map layers with pulsing CSS animations to indicate background processing. * **Radar Animation**: Uses concentric `radar-ring` circles with delayed ripple animations. * **Progress Indicators**: Shimmer-effect bars showing the percentage of "Contacting Barbers." * **Map Overlays**: Linear gradients (e.g., `map-bg-overlay`) ensure text readability over complex map street layouts. Sources: [design-ui/searching_for_barber_2/code.html:43-85](), [design-ui/manage_addresses/code.html:125-139]() ### 2.2 Booking Management System The booking UI distinguishes between different appointment states through color-coded badges and status-specific action buttons. ```mermaid flowchart TD Req[Booking Request] -- Barber Accepts --> Confirmed[Confirmed State] Confirmed -- Barber Starts Trip --> EnRoute[En Route State] EnRoute -- Proximity Trigger --> Arrived[Arrived State] Arrived -- User Acknowledges --> Meet[Meet Barber] style Confirmed fill:#dcfce7,stroke:#16a34a style EnRoute fill:#dbeafe,stroke:#2563eb style Arrived fill:#fef9c3,stroke:#ca8a04 ``` * **Confirmed**: Green theme, features "Track Arrival" actions. * **Pending**: Yellow/Dashed border, features "Cancel Request" actions. * **Upcoming**: Blue theme, features "View Details" actions. Sources: [design-ui/my_bookings/code.html:70-130](), [design-ui/barber_arrived/code.html:105-125]() ### 2.3 Barber Profile & Reviews The profile component is structured as an immersive header with a service menu and social proofing (reviews). * **Barber Info Overlay**: Displays online status (green pinging dot) and verification badges. * **Service Cards**: List item components containing service name, price, duration (min), and a selection toggle. * **Review Summary**: A grid-based rating breakdown (1-5 stars) showing percentage distribution. Sources: [design-ui/barber_profile_1/code.html:56-105](), [design-ui/barber_reviews/code.html:61-105]() ## 3. Configuration & Settings ### 3.1 Notification Control Logic The system implements granular notification settings using toggle switches. | Feature Toggle | Description | UI File | | :--- | :--- | :--- | | **Pause All** | Global suppress for all alerts | `notification_settings/code.html` | | **Appointment Reminders** | Alert 1 hour before scheduled cut | `notification_settings/code.html` | | **Barber Arrival** | Notification when barber is en route | `notification_settings/code.html` | | **Discovery/Offers** | Marketing and new availability alerts | `notification_settings/code.html` | Sources: [design-ui/notification_settings/code.html:86-150]() ### 3.2 Location Management The address management interface supports multiple saved locations (Home, Office, etc.) with a specific "Default" status and serviceability validation. * **Service Area Validation**: Includes a "Warning State" (e.g., Summer House) with a `location_off` icon and red text indicating the service is unavailable in that specific area. Sources: [design-ui/manage_addresses/code.html:70-115]() ## 4. Technical Implementation Details ### CSS Animations The mockups define several keyframe animations for real-time feedback: 1. **Pulse Ring**: `pulse-ring 2s cubic-bezier` used for map markers. 2. **Ripple**: `ripple 2.5s linear infinite` used for the search radar. 3. **Shimmer/Slide**: Used on progress bars to indicate active network requests. Sources: [design-ui/barber_arrived/code.html:43-65](), [design-ui/searching_for_barber_2/code.html:48-69]() ### Navigation and Header Patterns Most screens follow a standardized sticky header pattern: ```html

[Page Title]

``` Sources: [design-ui/my_bookings/code.html:46-59](), [design-ui/user_profile/code.html:48-55]() ## Summary The "Design Assets & HTML Mockups" module provides a comprehensive UI kit and state-machine representation for the Get-Barber application. By utilizing standardized Tailwind configurations and semantic HTML structures, these assets ensure a unified experience across the barber search, booking management, and profile customization workflows. The heavy use of CSS-based animations for "Live" states (Searching, En Route, Arrived) bridges the gap between static design and real-time application logic.