Vanilla JS UI Architecture

The HCG AI application is built as a Single Page Application (SPA) using a "Vanilla" approach—leveraging standard HTML5, CSS3, and modern JavaScript without the overhead of heavy frameworks like React or Vue. This architecture ensures fast load times and high maintainability.

🏗️ SPA Structure & Tab Management

The UI resides in a single index.html file where different functional areas (Home, Entries, Analysis, Chat) are defined as "tabs." State is managed by toggling CSS classes to show or hide content dynamically.

Usage: Switching Tabs

To programmatically switch views or extend the navigation, the switchTab function is used:

// Switches the UI to the specified section
switchTab('analysis');

🔐 Authentication & UI State

The UI's state is driven by the ModernAuthManager (found in auth.js). This class handles the transition between "Guest" and "Authenticated" views.

Initialization: On page load, auth.init() checks the session with the server.
Protected UI: Specific UI elements (like the "Entries" tab or "Save" buttons) are enabled or disabled based on isAuthenticated.

Public Interface:

If you need to trigger the authentication flow from a custom UI element:

// Initialize the manager
const auth = new ModernAuthManager();
await auth.init();

// Manually trigger the login/register modal
auth.showAuthModal('login'); // or 'register'

📊 Data Visualization & Icons

The application integrates specialized libraries to handle complex UI requirements:

Chart.js: Used for rendering HCG doubling curves and ultrasound growth trends.
Feather Icons: Provides the iconography. Icons are initialized via feather.replace().
Ybug: Integrated via a snippet in the <head> to handle user feedback and bug reporting.

📝 Form Logic (Advanced vs. Basic)

The UI supports a dual-mode data entry system. The "Advanced details" toggle allows users to switch between a simplified HCG input and a comprehensive clinical form (including LMP, cycle length, and ovulation dates).

Logic: Controlled by an event listener on #advancedToggle.
Visuals: Uses CSS transitions to expand the #advancedBlock container.

🎨 Styling System

Styles are centralized in style.css, following a component-based organization:

Layout: Flexbox and CSS Grid for the dashboard and input panels.
Modals: Custom-built auth modals with overlay logic.
Responsiveness: Mobile-first media queries ensure the tracker works on handheld devices for bedside data entry.

🛠️ External Dependencies (CDN)

The UI architecture relies on the following external assets:

<!-- Data Visualization -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Iconography -->
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>