UI & Components

Frontend Architecture

The HCG AI application follows a lightweight Single Page Application (SPA) architecture using vanilla JavaScript, HTML5, and CSS3. By avoiding heavy frameworks, the UI remains highly performant and easy to modify.

The frontend communicates with the Express.js backend via a RESTful API using the fetch API.

Navigation & Tab Management

The application uses a declarative tab system to manage views without page reloads. Visibility is toggled by manipulating the active class on navigation buttons and content containers.

Available Tabs

• Home: Main dashboard for data input (HCG and Ultrasound).
• Entries: Historical view of all recorded medical data.
• Analysis: Visualization and risk assessment results.
• AI Chat: Interactive support via the OpenAI-powered chatbot.

Usage: Switching Tabs Programmatically

You can trigger view changes using the global switchTab function:

// Switches view to the Analysis tab
switchTab('analysis');

Styling & Theme Configuration

The UI is built around a centralized design system using CSS Variables. This allows for rapid white-labeling or theme adjustments (e.g., changing the primary medical red/pink color).

Key CSS Variables

Define these in your style.css to update the global look and feel:

:root {
  --primary-color: #ff4d6d;    /* Main brand color (Heart/HCG) */
  --secondary-color: #2b2d42;  /* Navigation and Text */
  --bg-light: #f8f9fa;         /* Page background */
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --border-radius: 8px;
}

Authentication UI

The ModernAuthManager class handles the authentication state and UI transitions. It manages login, registration, and session persistence.

Auth State Hooks

The UI automatically responds to authentication changes:

• Authenticated: Displays user profile, email, and logout button. Enables protected features like AI Chat and Entries.
• Guest: Displays "Login" and "Register" buttons. Limits access to core data-saving features.

Usage: Triggering Auth Modals

To manually trigger the authentication interface:

// Shows the login modal
showFullscreenAuth('login');

// Shows the registration modal
showFullscreenAuth('register');

Core Components

1. Data Input Panels

The application uses segmented forms for medical data.

• HCG Section: Inputs for β-hCG levels, units (mIU/mL), and date.
• Advanced Toggle: An optional section to input Last Menstrual Period (LMP) and cycle length for more accurate gestational age calculations.
• Ultrasound Section: Specialized inputs for Gestational Sac (GS) size, Yolk Sac (YS) size, Crown-Rump Length (CRL), and Fetal Heart Rate (FHR).

2. Visualization (Charts)

HCG trends are visualized using Chart.js.

• Usage: The system automatically pulls data from /api/hcg-entries and maps it to a time-series line chart to visualize doubling times.

3. Iconography

The app uses Feather Icons for a clean, medical-grade aesthetic. Icons are initialized via:

feather.replace();

Interactive Features

Guided Tour

A built-in walkthrough is available for first-time users to explain how to interpret HCG trends and ultrasound measurements.

• Trigger: startGuidedTour()

Share Component

Allows users to share the application or their progress via the Web Share API.

• Trigger: shareApp()