# nirravv/hospital-management-html architecture

> Architecture diagram of the GitHub repository nirravv/hospital-management-html, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-18). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nirravv/hospital-management-html
- Repository: https://github.com/nirravv/hospital-management-html

## Overview

1. This repository is a static, client-rendered hospital website: each route is a separate HTML file, and there is no backend, API layer, database, or build pipeline. The site is meant to run directly from the filesystem or a static host such as GitHub Pages.

2. The architecture has three main layers: page content in the root HTML files, shared presentation in `assets/css/modern.css`, and shared interaction logic in `assets/js/modern.js`. Those two asset files are the common dependency for nearly every page.

3. The navigation is not a framework component; it is part of the shared front-end shell behavior. The JavaScript handles nav injection/behavior, mobile drawer interaction, and auto-hide-on-scroll behavior, so the same navigation experience is reused across pages.

4. The site uses a dark-first visual system with an optional light mode. Theme persistence is handled on the client side, likely through browser storage, so the appearance state survives refreshes without any server involvement.

5. Core “marketing” and informational content is split into dedicated pages: `index.html` for the landing page, `about.html` for hospital background and values, `doctors.html` for staff profiles, `gallery.html` for media, `blog.html` for articles, and `contact.html` for contact details plus a message form. `privacy.html` and `terms.html` are standalone legal/prose pages.

6. The action-oriented pages form a separate functional cluster: `appointment.html` is the booking flow, while `registration.html` and `login.html` are authentication-style entry points. In this repo they are front-end-only forms, so they function as UI demos rather than wired transactional systems.

7. The JavaScript adds progressive enhancement rather than application state management. According to the README, it drives scroll-reveal animations, animated counters, the gallery lightbox, hover interactions, theme toggling, and form demos. There is no SPA routing or client-side data fetching.

8. The CSS is the main source of layout and visual system design. It uses a single stylesheet with custom properties, grid-based layouts, backdrop blur/glass effects, and keyframe animations. That means the visual language is centralized and shared, rather than repeated per page.

9. Asset organization is content-based rather than component-based. Images are grouped by purpose under `assets/img/bg`, `blogs`, `gallery`, `slider`, and `team`, which maps directly to page sections like hero backgrounds, blog cards, gallery items, hero sliders, and doctor portraits.

10. The primary data flow is static: browser loads an HTML page, that page pulls in the shared CSS/JS, the JS enhances the DOM after load, and user actions like theme toggling or gallery viewing stay entirely in the browser. The only durable client state called out is the theme preference.

11. From an architecture-diagram perspective, the key boundaries are: page content vs shared assets, presentation vs behavior, and static public pages vs interactive UI affordances. The repo is deliberately simple and monolithic at the source level, but functionally organized by page type and shared enhancement layer.

Main entry points: [`assets/js/modern.js`](https://github.com/nirravv/hospital-management-html/blob/master/assets/js/modern.js) (Modern JS), [`assets/css/modern.css`](https://github.com/nirravv/hospital-management-html/blob/master/assets/css/modern.css) (Modern CSS), [`index.html`](https://github.com/nirravv/hospital-management-html/blob/master/index.html) (Home), [`doctors.html`](https://github.com/nirravv/hospital-management-html/blob/master/doctors.html) (Doctors)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_content["Page content"]
  node_index["Home<br/>landing page<br/>[index.html]"]
  node_about["About<br/>info page<br/>[about.html]"]
  node_doctors["Doctors<br/>staff page<br/>[doctors.html]"]
  node_gallery["Gallery<br/>media page<br/>[gallery.html]"]
  node_blog["Blog<br/>articles page<br/>[blog.html]"]
  node_contact["Contact<br/>[contact.html]"]
  node_appointment["Appointment<br/>booking form<br/>[appointment.html]"]
  node_login["Login<br/>auth form<br/>[login.html]"]
  node_registration["Register<br/>auth form<br/>[registration.html]"]
  node_privacy["Privacy<br/>legal page<br/>[privacy.html]"]
  node_terms["Terms<br/>legal page<br/>[terms.html]"]
end

subgraph group_shared["Shared assets"]
  node_moderncss["Modern CSS<br/>global stylesheet<br/>[modern.css]"]
  node_modernjs["Modern JS<br/>ui behavior<br/>[modern.js]"]
  node_theme(("Theme state<br/>client preference"))
  node_navshell["Nav shell<br/>shared navigation"]
  node_reveal["Enhancements<br/>progressive UX"]
end

subgraph group_media["Media library"]
  node_bgimg[("Backgrounds<br/>image set")]
  node_blogsimg[("Blog images<br/>image set")]
  node_galleryimg[("Gallery images<br/>image set")]
  node_sliderimg[("Slider images<br/>image set")]
  node_teamimg[("Team images<br/>image set")]
end

node_index -->|"styles"| node_moderncss
node_index -->|"behavior"| node_modernjs
node_about -->|"styles"| node_moderncss
node_about -->|"behavior"| node_modernjs
node_doctors -->|"styles"| node_moderncss
node_doctors -->|"behavior"| node_modernjs
node_gallery -->|"styles"| node_moderncss
node_gallery -->|"behavior"| node_modernjs
node_blog -->|"styles"| node_moderncss
node_blog -->|"behavior"| node_modernjs
node_contact -->|"styles"| node_moderncss
node_contact -->|"behavior"| node_modernjs
node_appointment -->|"styles"| node_moderncss
node_appointment -->|"behavior"| node_modernjs
node_login -->|"styles"| node_moderncss
node_login -->|"behavior"| node_modernjs
node_registration -->|"styles"| node_moderncss
node_registration -->|"behavior"| node_modernjs
node_privacy -->|"styles"| node_moderncss
node_terms -->|"styles"| node_moderncss
node_modernjs -->|"injects"| node_navshell
node_modernjs -->|"persists"| node_theme
node_modernjs -->|"drives"| node_reveal
node_modernjs -->|"uses"| node_bgimg
node_modernjs -->|"uses"| node_blogsimg
node_modernjs -->|"uses"| node_galleryimg
node_modernjs -->|"uses"| node_sliderimg
node_modernjs -->|"uses"| node_teamimg
node_gallery -->|"renders"| node_galleryimg
node_blog -->|"renders"| node_blogsimg
node_doctors -->|"renders"| node_teamimg
node_index -->|"renders"| node_sliderimg
node_index -->|"renders"| node_bgimg
node_contact -->|"renders"| node_bgimg

click node_index "https://github.com/nirravv/hospital-management-html/blob/master/index.html"
click node_about "https://github.com/nirravv/hospital-management-html/blob/master/about.html"
click node_doctors "https://github.com/nirravv/hospital-management-html/blob/master/doctors.html"
click node_gallery "https://github.com/nirravv/hospital-management-html/blob/master/gallery.html"
click node_blog "https://github.com/nirravv/hospital-management-html/blob/master/blog.html"
click node_contact "https://github.com/nirravv/hospital-management-html/blob/master/contact.html"
click node_appointment "https://github.com/nirravv/hospital-management-html/blob/master/appointment.html"
click node_login "https://github.com/nirravv/hospital-management-html/blob/master/login.html"
click node_registration "https://github.com/nirravv/hospital-management-html/blob/master/registration.html"
click node_privacy "https://github.com/nirravv/hospital-management-html/blob/master/privacy.html"
click node_terms "https://github.com/nirravv/hospital-management-html/blob/master/terms.html"
click node_moderncss "https://github.com/nirravv/hospital-management-html/blob/master/assets/css/modern.css"
click node_modernjs "https://github.com/nirravv/hospital-management-html/blob/master/assets/js/modern.js"
click node_bgimg "https://github.com/nirravv/hospital-management-html/tree/master/assets/img/bg"
click node_blogsimg "https://github.com/nirravv/hospital-management-html/tree/master/assets/img/blogs"
click node_galleryimg "https://github.com/nirravv/hospital-management-html/tree/master/assets/img/gallery"
click node_sliderimg "https://github.com/nirravv/hospital-management-html/tree/master/assets/img/slider"
click node_teamimg "https://github.com/nirravv/hospital-management-html/tree/master/assets/img/team"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_index,node_about,node_doctors,node_gallery,node_blog,node_contact,node_appointment,node_login,node_registration,node_privacy,node_terms toneBlue
class node_moderncss,node_modernjs,node_theme,node_navshell,node_reveal toneAmber
class node_bgimg,node_blogsimg,node_galleryimg,node_sliderimg,node_teamimg toneMint
```

## Components

### Page content

Standalone HTML pages for the public site and form entry points.

- [Home](https://github.com/nirravv/hospital-management-html/blob/master/index.html): landing page · Primary entry page with hero content and site overview. · `index.html`
- [About](https://github.com/nirravv/hospital-management-html/blob/master/about.html): info page · Hospital background, values, and organization story. · `about.html`
- [Doctors](https://github.com/nirravv/hospital-management-html/blob/master/doctors.html): staff page · Provider profiles and team presentation. · `doctors.html`
- [Gallery](https://github.com/nirravv/hospital-management-html/blob/master/gallery.html): media page · Photo and visual showcase with enhanced viewing. · `gallery.html`
- [Blog](https://github.com/nirravv/hospital-management-html/blob/master/blog.html): articles page · Informational posts and editorial content. · `blog.html`
- [Contact](https://github.com/nirravv/hospital-management-html/blob/master/contact.html): contact page · Contact details and message form. · `contact.html`
- [Appointment](https://github.com/nirravv/hospital-management-html/blob/master/appointment.html): booking form · Front-end booking flow presented as a static form. · `appointment.html`
- [Login](https://github.com/nirravv/hospital-management-html/blob/master/login.html): auth form · Client-side sign-in style entry screen. · `login.html`
- [Register](https://github.com/nirravv/hospital-management-html/blob/master/registration.html): auth form · Client-side registration style entry screen. · `registration.html`
- [Privacy](https://github.com/nirravv/hospital-management-html/blob/master/privacy.html): legal page · Standalone privacy policy content. · `privacy.html`
- [Terms](https://github.com/nirravv/hospital-management-html/blob/master/terms.html): legal page · Standalone terms and conditions content. · `terms.html`

### Shared assets

Common presentation and interaction layer reused across pages.

- [Modern CSS](https://github.com/nirravv/hospital-management-html/blob/master/assets/css/modern.css): global stylesheet · Single shared stylesheet defining layout, theme, and visual system. · `assets/css/modern.css`
- [Modern JS](https://github.com/nirravv/hospital-management-html/blob/master/assets/js/modern.js): ui behavior · Shared front-end shell logic for navigation, theme, animations, and demos. · `assets/js/modern.js`
- **Theme state**: client preference · Persistent dark/light mode preference stored in the browser.
- **Nav shell**: shared navigation · Injected and reused navigation with mobile drawer and scroll behavior.
- **Enhancements**: progressive UX · Scroll reveals, counters, lightbox, hover effects, and form demos.

### Media library

Static image folders organized by page purpose.

- [Backgrounds](https://github.com/nirravv/hospital-management-html/tree/master/assets/img/bg): image set · Hero and section background imagery. · `assets/img/bg`
- [Blog images](https://github.com/nirravv/hospital-management-html/tree/master/assets/img/blogs): image set · Images used in article cards and posts. · `assets/img/blogs`
- [Gallery images](https://github.com/nirravv/hospital-management-html/tree/master/assets/img/gallery): image set · Photos used in gallery sections and lightbox. · `assets/img/gallery`
- [Slider images](https://github.com/nirravv/hospital-management-html/tree/master/assets/img/slider): image set · Carousel and hero slider artwork. · `assets/img/slider`
- [Team images](https://github.com/nirravv/hospital-management-html/tree/master/assets/img/team): image set · Doctor and staff portrait assets. · `assets/img/team`

## Connections

- Home → Modern CSS: styles · Uses the shared visual system.
- Home → Modern JS: behavior · Uses shared navigation and enhancement logic.
- About → Modern CSS: styles · Uses the shared visual system.
- About → Modern JS: behavior · Uses shared navigation and enhancement logic.
- Doctors → Modern CSS: styles · Uses the shared visual system.
- Doctors → Modern JS: behavior · Uses shared navigation and enhancement logic.
- Gallery → Modern CSS: styles · Uses the shared visual system.
- Gallery → Modern JS: behavior · Uses shared navigation and enhancement logic.
- Blog → Modern CSS: styles · Uses the shared visual system.
- Blog → Modern JS: behavior · Uses shared navigation and enhancement logic.
- Contact → Modern CSS: styles · Uses the shared visual system.
- Contact → Modern JS: behavior · Uses shared navigation and enhancement logic.
- Appointment → Modern CSS: styles · Uses the shared visual system.
- Appointment → Modern JS: behavior · Uses shared navigation and enhancement logic.
- Login → Modern CSS: styles · Uses the shared visual system.
- Login → Modern JS: behavior · Uses shared navigation and enhancement logic.
- Register → Modern CSS: styles · Uses the shared visual system.
- Register → Modern JS: behavior · Uses shared navigation and enhancement logic.
- Privacy → Modern CSS: styles · Uses the shared visual system.
- Terms → Modern CSS: styles · Uses the shared visual system.
- Modern JS → Nav shell: injects · Builds shared navigation and mobile drawer behavior.
- Modern JS → Theme state: persists · Stores and restores client-side theme preference.
- Modern JS → Enhancements: drives · Provides scroll reveals, counters, lightbox, hover, and form demos.
- Modern JS → Backgrounds: uses · Loads background imagery where needed.
- Modern JS → Blog images: uses · Loads blog imagery where needed.
- Modern JS → Gallery images: uses · Loads gallery imagery where needed.
- Modern JS → Slider images: uses · Loads slider imagery where needed.
- Modern JS → Team images: uses · Loads team portraits where needed.
- Gallery → Gallery images: renders · Consumes gallery photos for the gallery page.
- Blog → Blog images: renders · Consumes blog images for article presentation.
- Doctors → Team images: renders · Consumes team portraits for staff profiles.
- Home → Slider images: renders · Consumes hero/slider imagery on the landing page.
- Home → Backgrounds: renders · Uses background art for page sections.
- Contact → Backgrounds: renders · Uses background art for section presentation.