Vanilla JS UI Architecture
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');
| Tab ID | Purpose |
| :--- | :--- |
| home | Data entry for HCG and Ultrasound scans. |
| entries | Historical log of all recorded medical data. |
| analysis | Data visualization and clinical risk assessment. |
| chatbot | AI-driven support interface. |
🔐 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
#advancedBlockcontainer.
🎨 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>