# shimanto008/print-bill-calculator architecture

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

- Interactive diagram: https://gitdiagram.com/shimanto008/print-bill-calculator
- Repository: https://github.com/shimanto008/print-bill-calculator

## Overview

1. **Repository shape**
   - This is a **single-file, client-side app**: `index.html` contains the entire product, with the README describing usage and behavior.
   - There is **no backend, no build pipeline, and no separate source tree** visible in the repo.

2. **Primary runtime boundary**
   - The app runs **entirely in the user’s browser** on a local PC/laptop.
   - The main architectural boundary is **browser memory and DOM only**; nothing is sent to a server.

3. **User-facing purpose**
   - The tool calculates a printing bill by determining which pages are **colour** and which are **black & white**.
   - It supports **PDF** and **Word (.docx)** documents.

4. **Input layer**
   - The user provides:
     - a **currency selection**
     - **price per colour page**
     - **price per black & white page**
     - one or more **uploaded documents**
   - The file upload control is the entry point into the processing pipeline.

5. **Document processing pipeline**
   - Uploaded files are handled **locally in the browser**.
   - The app must parse the document content page by page, classify each page as colour or monochrome, and count totals.
   - That page classification step is the core domain logic of the app.

6. **Pricing / calculation subsystem**
   - Once page counts are known, the app multiplies them by the user-entered rates.
   - Currency is a presentation and formatting concern, while the actual bill amount is derived from:
     - colour page count × colour rate
     - black & white page count × B/W rate

7. **Output / presentation layer**
   - The result is displayed directly in the browser as the calculated bill.
   - The UI likely shows totals and cost breakdowns, since the README says “Read your bill.”

8. **Data flow**
   - The flow is: **user inputs settings → uploads document → browser parses pages locally → classifier counts colour vs B/W pages → calculator computes total → UI renders bill**.
   - There is no intermediate server-side state or external persistence in this flow.

9. **Privacy and trust boundary**
   - The app explicitly claims that **no files leave the device**.
   - That means the privacy boundary is the local machine; the repository is architected to avoid network dependence and remote storage.

10. **Technology footprint**
   - The project uses **plain HTML, CSS, and JavaScript** only.
   - There are **no frameworks, no dependencies, and no internet requirement**, so the architecture is intentionally lightweight and self-contained.

11. **Implication for an architecture diagram**
   - A good diagram would show:
     - **User/browser** as the only runtime environment
     - **index.html** as the complete UI + logic container
     - a **local file input / document parser**
     - a **page classification and billing calculator**
     - a **rendered bill output**
   - There should be **no server, database, or external API** in the diagram.

Main entry points: [`index.html`](https://github.com/shimanto008/print-bill-calculator/blob/main/index.html) (Local only), [`README.md`](https://github.com/shimanto008/print-bill-calculator/blob/main/README.md) (README)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_repo["Repository"]
  node_readme["README<br/>docs<br/>[README.md]"]
  node_index["App shell<br/>html app<br/>[index.html]"]
end

subgraph group_browser["Browser runtime"]
  node_ui["Inputs<br/>form UI<br/>[index.html]"]
  node_upload["File upload<br/>entry point<br/>[index.html]"]
  node_parse["Parser<br/>[index.html]"]
  node_classify{{"Page classifier<br/>domain logic<br/>[index.html]"}}
  node_calculate{{"Bill calc<br/>pricing logic<br/>[index.html]"}}
  node_render["Bill view<br/>output UI<br/>[index.html]"]
  node_privacy(("Local only<br/>trust boundary<br/>[index.html]"))
end

node_readme -->|"describes"| node_index
node_index -->|"hosts"| node_ui
node_ui -->|"submits"| node_upload
node_upload -->|"sends files"| node_parse
node_parse -->|"page data"| node_classify
node_classify -->|"counts"| node_calculate
node_calculate -->|"bill"| node_render
node_upload -.->|"stays local"| node_privacy
node_parse -.->|"browser only"| node_privacy
node_calculate -.->|"no backend"| node_privacy
node_render -.->|"no sync"| node_privacy

click node_readme "https://github.com/shimanto008/print-bill-calculator/blob/main/README.md"
click node_index "https://github.com/shimanto008/print-bill-calculator/blob/main/index.html"
click node_ui "https://github.com/shimanto008/print-bill-calculator/blob/main/index.html"
click node_upload "https://github.com/shimanto008/print-bill-calculator/blob/main/index.html"
click node_parse "https://github.com/shimanto008/print-bill-calculator/blob/main/index.html"
click node_classify "https://github.com/shimanto008/print-bill-calculator/blob/main/index.html"
click node_calculate "https://github.com/shimanto008/print-bill-calculator/blob/main/index.html"
click node_render "https://github.com/shimanto008/print-bill-calculator/blob/main/index.html"
click node_privacy "https://github.com/shimanto008/print-bill-calculator/blob/main/index.html"

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_readme,node_index toneBlue
class node_ui,node_upload,node_parse,node_classify,node_calculate,node_render,node_privacy toneAmber
```

## Components

### Repository

Single-file client-side calculator app and its README.

- [README](https://github.com/shimanto008/print-bill-calculator/blob/main/README.md): docs · Usage and behavior notes for the calculator. · `README.md`
- [App shell](https://github.com/shimanto008/print-bill-calculator/blob/main/index.html): html app · Single-file HTML container for UI, styles, and JavaScript logic. · `index.html`

### Browser runtime

Everything runs locally in the user’s browser with no server or persistence.

- [Inputs](https://github.com/shimanto008/print-bill-calculator/blob/main/index.html): form UI · Currency selection, colour rate, B/W rate, and document upload controls. · `index.html`
- [File upload](https://github.com/shimanto008/print-bill-calculator/blob/main/index.html): entry point · Accepts local PDF and DOCX documents from the user. · `index.html`
- [Parser](https://github.com/shimanto008/print-bill-calculator/blob/main/index.html): local parser · Reads uploaded documents entirely in-browser and extracts pages. · `index.html`
- [Page classifier](https://github.com/shimanto008/print-bill-calculator/blob/main/index.html): domain logic · Determines whether each page is colour or black and white. · `index.html`
- [Bill calc](https://github.com/shimanto008/print-bill-calculator/blob/main/index.html): pricing logic · Multiplies page counts by user-entered rates to compute totals. · `index.html`
- [Bill view](https://github.com/shimanto008/print-bill-calculator/blob/main/index.html): output UI · Displays the final bill and breakdown directly in the browser. · `index.html`
- [Local only](https://github.com/shimanto008/print-bill-calculator/blob/main/index.html): trust boundary · No files leave the device; processing stays on the local machine. · `index.html`

## Connections

- README → App shell: describes · README explains the single-page app behavior.
- App shell → Inputs: hosts · The HTML file contains the visible controls and logic.
- Inputs → File upload: submits · User settings and file selection enter the processing flow.
- File upload → Parser: sends files · Local documents are passed to the browser parser.
- Parser → Page classifier: page data · Parsed pages are analyzed for colour versus monochrome content.
- Page classifier → Bill calc: counts · Page counts feed the pricing calculation.
- Bill calc → Bill view: bill · Computed totals and breakdown are rendered for the user.
- File upload → Local only: stays local · Uploaded files remain on the device during processing.
- Parser → Local only: browser only · Parsing happens in browser memory and DOM without server calls.
- Bill calc → Local only: no backend · Billing is computed entirely client-side.
- Bill view → Local only: no sync · Results are displayed locally and not persisted remotely.