# quandz24-ui/originos_web architecture

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

- Interactive diagram: https://gitdiagram.com/quandz24-ui/originos_web
- Repository: https://github.com/quandz24-ui/originos_web
- Video tour (about a minute): https://gitdiagram.com/quandz24-ui/originos_web/video

## Overview

OriginOS WEB is a browser-based phone-interface simulation. Users interact with the simulated lock and home screens, open system surfaces and apps, and customize settings such as wallpapers, icons, and animations; browser storage preserves configuration. The root files appear to be the main version, with `bt/` and `publicBeta/` containing parallel variants. The README identifies the project but does not document its runtime wiring, and the excerpts do not establish most cross-module calls, so uncertain connections are shown only as unverified dashed links.

Main entry points: [`all.js`](https://github.com/quandz24-ui/originos_web/blob/main/all.js) (Phone shell), [`settingsApp/settingsApp.js`](https://github.com/quandz24-ui/originos_web/blob/main/settingsApp/settingsApp.js) (Settings app), [`loading.js`](https://github.com/quandz24-ui/originos_web/blob/main/loading.js) (Startup restore), [`controlsCenter/controlsCenterEvent_Animtion.js`](https://github.com/quandz24-ui/originos_web/blob/main/controlsCenter/controlsCenterEvent_Animtion.js) (Quick controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Phone interface"]
  node_phone["Phone shell<br/>[all.js]"]
  node_startup["Startup restore<br/>[loading.js]"]
  node_controls["Quick controls"]
end

subgraph group_settings["Personalization"]
  node_settingsui["Settings app<br/>[settingsApp.js]"]
  node_animations["Animation editor<br/>[customOpening.js]"]
  node_language["Language selection<br/>[language.js]"]
end

subgraph group_system["System features"]
  node_music["Music player<br/>[music.js]"]
  node_lock["Passcode and lock<br/>[pass.js]"]
  node_toast["System toasts<br/>[phone_sysToast.js]"]
  node_watch["Clock and timer<br/>[watchstop.js]"]
  node_calculator["Calculator<br/>[calc.js]"]
end

subgraph group_assets["Local assets"]
  node_data["UI data<br/>[data.js]"]
  node_media["OriginOS media"]
end

node_user(("User"))

node_user -.->|"interacts with"| node_phone
node_phone -.->|"restores state"| node_startup
node_phone -.->|"opens settings"| node_settingsui
node_phone -.->|"opens controls"| node_controls
node_settingsui -.->|"configures"| node_animations
node_settingsui -.->|"sets language"| node_language
node_phone -.->|"opens player"| node_music
node_phone -.->|"handles locking"| node_lock
node_phone -.->|"shows notices"| node_toast
node_phone -.->|"shows clock"| node_watch
node_phone -.->|"opens calculator"| node_calculator
node_settingsui -.->|"selects assets"| node_media

click node_phone "https://github.com/quandz24-ui/originos_web/blob/main/all.js"
click node_startup "https://github.com/quandz24-ui/originos_web/blob/main/loading.js"
click node_controls "https://github.com/quandz24-ui/originos_web/blob/main/controlsCenter/controlsCenterEvent_Animtion.js"
click node_settingsui "https://github.com/quandz24-ui/originos_web/blob/main/settingsApp/settingsApp.js"
click node_animations "https://github.com/quandz24-ui/originos_web/blob/main/settingsApp/animationUnlockOpeningApp/customOpening.js"
click node_language "https://github.com/quandz24-ui/originos_web/blob/main/language.js"
click node_music "https://github.com/quandz24-ui/originos_web/blob/main/music.js"
click node_lock "https://github.com/quandz24-ui/originos_web/blob/main/pass.js"
click node_toast "https://github.com/quandz24-ui/originos_web/blob/main/phone_sysToast.js"
click node_watch "https://github.com/quandz24-ui/originos_web/blob/main/watchstop.js"
click node_calculator "https://github.com/quandz24-ui/originos_web/blob/main/calc.js"
click node_data "https://github.com/quandz24-ui/originos_web/blob/main/data.js"
click node_media "https://github.com/quandz24-ui/originos_web/tree/main/originos_data"

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_phone,node_startup,node_controls,node_user toneBlue
class node_settingsui,node_animations,node_language toneAmber
class node_music,node_lock,node_toast,node_watch,node_calculator toneMint
class node_data,node_media toneRose
```

## Components

### Phone interface

- [Phone shell](https://github.com/quandz24-ui/originos_web/blob/main/all.js): `all.js`
- [Startup restore](https://github.com/quandz24-ui/originos_web/blob/main/loading.js): `loading.js`
- [Quick controls](https://github.com/quandz24-ui/originos_web/blob/main/controlsCenter/controlsCenterEvent_Animtion.js): `controlsCenter/controlsCenterEvent_Animtion.js`

### Personalization

- [Settings app](https://github.com/quandz24-ui/originos_web/blob/main/settingsApp/settingsApp.js): `settingsApp/settingsApp.js`
- [Animation editor](https://github.com/quandz24-ui/originos_web/blob/main/settingsApp/animationUnlockOpeningApp/customOpening.js): `settingsApp/animationUnlockOpeningApp/customOpening.js`
- [Language selection](https://github.com/quandz24-ui/originos_web/blob/main/language.js): `language.js`

### System features

- [Music player](https://github.com/quandz24-ui/originos_web/blob/main/music.js): `music.js`
- [Passcode and lock](https://github.com/quandz24-ui/originos_web/blob/main/pass.js): `pass.js`
- [System toasts](https://github.com/quandz24-ui/originos_web/blob/main/phone_sysToast.js): `phone_sysToast.js`
- [Clock and timer](https://github.com/quandz24-ui/originos_web/blob/main/watchstop.js): `watchstop.js`
- [Calculator](https://github.com/quandz24-ui/originos_web/blob/main/calc.js): `calc.js`

### Local assets

- [UI data](https://github.com/quandz24-ui/originos_web/blob/main/data.js): `data.js`
- [OriginOS media](https://github.com/quandz24-ui/originos_web/tree/main/originos_data): `originos_data`

### Other components

- **User**

## Connections

- User → Phone shell: interacts with
- Phone shell → Startup restore: restores state
- Phone shell → Settings app: opens settings
- Phone shell → Quick controls: opens controls
- Settings app → Animation editor: configures
- Settings app → Language selection: sets language
- Phone shell → Music player: opens player
- Phone shell → Passcode and lock: handles locking
- Phone shell → System toasts: shows notices
- Phone shell → Clock and timer: shows clock
- Phone shell → Calculator: opens calculator
- Settings app → OriginOS media: selects assets