# khairulkalil-01/justwork architecture

> Architecture diagram of the GitHub repository khairulkalil-01/justwork, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/khairulkalil-01/justwork
- Repository: https://github.com/khairulkalil-01/justwork

## Overview

This is a browser-based document evaluation interface: users provide a PDF and evaluation questions/weights, submit them to a remote processing service, then view returned Markdown. The excerpt supports the upload validation and request/result flow, plus consent and page navigation behavior. The HTML and CSS contents and the remainder of the JavaScript are not sampled, so page structure and additional features cannot be confirmed.

Main entry points: [`js/main.js`](https://github.com/khairulkalil-01/justwork/blob/main/js/main.js) (Evaluation client), [`index.html`](https://github.com/khairulkalil-01/justwork/blob/main/index.html) (Evaluation page), [`js/handshake-animation.js`](https://github.com/khairulkalil-01/justwork/blob/main/js/handshake-animation.js) (Handshake animation), [`css/styles.css`](https://github.com/khairulkalil-01/justwork/blob/main/css/styles.css) (Page styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_submission["Document submission"]
  node_client["Evaluation client<br/>[main.js]"]
  node_pdf["Selected PDF"]
  node_questions["Questions and weights"]
  node_result["Markdown evaluation"]
end

subgraph group_experience["Page experience"]
  node_consent["Consent controls<br/>[main.js]"]
  node_navigation["Scroll navigation<br/>[main.js]"]
  node_animation["Handshake animation"]
  node_styles["Page styling<br/>[styles.css]"]
end

node_visitor(("Visitor"))
node_page["Evaluation page<br/>[index.html]"]
node_processor["Document processor"]

node_visitor -->|"opens"| node_page
node_page -->|"loads"| node_client
node_visitor -->|"selects and submits"| node_client
node_client -->|"validates PDF"| node_pdf
node_client -->|"collects weights"| node_questions
node_client -->|"posts form data"| node_processor
node_processor -->|"returns evaluation"| node_client
node_client -->|"displays Markdown"| node_result
node_visitor -->|"sets consent"| node_consent
node_visitor -->|"scrolls page"| node_navigation
node_page -->|"loads"| node_animation
node_page -->|"uses"| node_styles

click node_page "https://github.com/khairulkalil-01/justwork/blob/main/index.html"
click node_client "https://github.com/khairulkalil-01/justwork/blob/main/js/main.js"
click node_consent "https://github.com/khairulkalil-01/justwork/blob/main/js/main.js"
click node_navigation "https://github.com/khairulkalil-01/justwork/blob/main/js/main.js"
click node_animation "https://github.com/khairulkalil-01/justwork/blob/main/js/handshake-animation.js"
click node_styles "https://github.com/khairulkalil-01/justwork/blob/main/css/styles.css"

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_client,node_pdf,node_questions,node_result toneBlue
class node_consent,node_navigation,node_animation,node_styles toneAmber
class node_visitor,node_processor toneIndigo
class node_page toneTeal
```

## Components

### Document submission

- [Evaluation client](https://github.com/khairulkalil-01/justwork/blob/main/js/main.js): `js/main.js`
- **Selected PDF**
- **Questions and weights**
- **Markdown evaluation**

### Page experience

- [Consent controls](https://github.com/khairulkalil-01/justwork/blob/main/js/main.js): `js/main.js`
- [Scroll navigation](https://github.com/khairulkalil-01/justwork/blob/main/js/main.js): `js/main.js`
- [Handshake animation](https://github.com/khairulkalil-01/justwork/blob/main/js/handshake-animation.js): `js/handshake-animation.js`
- [Page styling](https://github.com/khairulkalil-01/justwork/blob/main/css/styles.css): `css/styles.css`

### Other components

- **Visitor**
- [Evaluation page](https://github.com/khairulkalil-01/justwork/blob/main/index.html): `index.html`
- **Document processor**

## Connections

- Visitor → Evaluation page: opens
- Evaluation page → Evaluation client: loads
- Visitor → Evaluation client: selects and submits
- Evaluation client → Selected PDF: validates PDF
- Evaluation client → Questions and weights: collects weights
- Evaluation client → Document processor: posts form data
- Document processor → Evaluation client: returns evaluation
- Evaluation client → Markdown evaluation: displays Markdown
- Visitor → Consent controls: sets consent
- Visitor → Scroll navigation: scrolls page
- Evaluation page → Handshake animation: loads
- Evaluation page → Page styling: uses