# mhmdmhd6/mac-os-desktop architecture

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

- Interactive diagram: https://gitdiagram.com/mhmdmhd6/mac-os-desktop
- Repository: https://github.com/mhmdmhd6/mac-os-desktop

## Overview

This repository is a browser-based macOS Monterey desktop simulator. The principal workflow is a user interacting with the desktop shell, then opening and using simulated apps or system panels; JavaScript handles these interactions and updates the displayed interface. README-listed capabilities include Launchpad search, Spotlight, menus, notifications, Control Center, desktop shortcuts, and several apps. The sampled code confirms some event wiring and app behavior, but not all feature implementations, so uncertain internal links are omitted. A small service-worker registration and lifecycle stub are also present.

Main entry points: [`javascript/script.js`](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js) (Desktop interactions), [`index.html`](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/index.html) (Desktop interface), [`sw.js`](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/sw.js) (Service worker)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_desktop["Desktop shell"]
  node_shell["Desktop interface<br/>[index.html]"]
  node_controller["Desktop interactions<br/>[script.js]"]
  node_styles["Desktop styling<br/>[style.css]"]
  node_serviceworker["Service worker<br/>[sw.js]"]
end

subgraph group_navigation["App navigation"]
  node_launchpad["Launchpad search<br/>[script.js]"]
  node_spotlight["Spotlight search<br/>[script.js]"]
end

subgraph group_applications["Simulated apps"]
  node_terminal["Terminal<br/>[script.js]"]
  node_notes["Notes<br/>[script.js]"]
  node_calculator["Calculator<br/>[script.js]"]
  node_maps["Maps<br/>[script.js]"]
  node_vscode["VSCode app<br/>[script.js]"]
end

subgraph group_system["System panels"]
  node_menubar["Menu bar<br/>[index.html]"]
  node_dock["Dock<br/>[index.html]"]
  node_controlcenter["Control Center<br/>[index.html]"]
  node_notifications["Notifications<br/>[index.html]"]
  node_widgets["Clock widgets<br/>[script.js]"]
  node_battery["Battery status<br/>[script.js]"]
end

node_user(("User"))

node_user -->|"interacts with"| node_shell
node_shell -->|"handles events"| node_controller
node_controller -->|"updates interface"| node_shell
node_controller -->|"opens and filters"| node_launchpad
node_controller -->|"opens search"| node_spotlight
node_controller -->|"opens and handles commands"| node_terminal
node_controller -->|"opens and edits"| node_notes
node_controller -->|"opens and calculates"| node_calculator
node_controller -->|"opens app"| node_maps
node_controller -->|"opens app"| node_vscode
node_controller -->|"toggles panel"| node_widgets
node_controller -->|"toggles popup"| node_battery
node_controller -->|"registers"| node_serviceworker
node_serviceworker -.->|"serves fetches"| node_user

click node_shell "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/index.html"
click node_controller "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js"
click node_styles "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/Css/style.css"
click node_launchpad "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js"
click node_spotlight "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js"
click node_terminal "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js"
click node_notes "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js"
click node_calculator "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js"
click node_maps "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js"
click node_vscode "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js"
click node_menubar "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/index.html"
click node_dock "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/index.html"
click node_controlcenter "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/index.html"
click node_notifications "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/index.html"
click node_widgets "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js"
click node_battery "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js"
click node_serviceworker "https://github.com/mhmdmhd6/mac-os-desktop/blob/master/sw.js"

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_shell,node_controller,node_styles,node_serviceworker,node_user toneBlue
class node_launchpad,node_spotlight toneAmber
class node_terminal,node_notes,node_calculator,node_maps,node_vscode toneMint
class node_menubar,node_dock,node_controlcenter,node_notifications,node_widgets,node_battery toneRose
```

## Components

### Desktop shell

- [Desktop interface](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/index.html): `index.html`
- [Desktop interactions](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js): `javascript/script.js`
- [Desktop styling](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/Css/style.css): `Css/style.css`
- [Service worker](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/sw.js): `sw.js`

### App navigation

- [Launchpad search](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js): `javascript/script.js`
- [Spotlight search](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js): `javascript/script.js`

### Simulated apps

- [Terminal](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js): `javascript/script.js`
- [Notes](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js): `javascript/script.js`
- [Calculator](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js): `javascript/script.js`
- [Maps](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js): `javascript/script.js`
- [VSCode app](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js): `javascript/script.js`

### System panels

- [Menu bar](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/index.html): `index.html`
- [Dock](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/index.html): `index.html`
- [Control Center](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/index.html): `index.html`
- [Notifications](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/index.html): `index.html`
- [Clock widgets](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js): `javascript/script.js`
- [Battery status](https://github.com/mhmdmhd6/mac-os-desktop/blob/master/javascript/script.js): `javascript/script.js`

### Other components

- **User**

## Connections

- User → Desktop interface: interacts with
- Desktop interface → Desktop interactions: handles events
- Desktop interactions → Desktop interface: updates interface
- Desktop interactions → Launchpad search: opens and filters
- Desktop interactions → Spotlight search: opens search
- Desktop interactions → Terminal: opens and handles commands
- Desktop interactions → Notes: opens and edits
- Desktop interactions → Calculator: opens and calculates
- Desktop interactions → Maps: opens app
- Desktop interactions → VSCode app: opens app
- Desktop interactions → Clock widgets: toggles panel
- Desktop interactions → Battery status: toggles popup
- Desktop interactions → Service worker: registers
- Service worker → User: serves fetches