# erfanxh/moshify architecture

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

- Interactive diagram: https://gitdiagram.com/erfanxh/moshify
- Repository: https://github.com/erfanxh/moshify

## Overview

1. **Project type and runtime**
   - This is a **static marketing website** called **Moshify**.
   - The architecture is centered on **plain HTML, CSS, and a small JavaScript entry file**, with no backend, database, or build pipeline visible in the repo.

2. **Primary entry points**
   - `index.html` is the main site entry.
   - `playground.html` is likely a secondary/demo page for experimenting with layout or components.
   - These pages are the top-level composition layer that assemble the site from shared pieces and assets.

3. **Content structure**
   - The site is split into reusable HTML fragments under `Components/`.
   - `Components/callout.html` and `Components/plans.html` suggest section-level building blocks used to keep repeated content consistent across the site.
   - This indicates a manual component model rather than a framework-based one.

4. **Styling system**
   - All presentation lives in `CSS/styles.css`, with `CSS/normalize.css` used as the base reset for cross-browser consistency.
   - The styling layer is the main architectural boundary: HTML provides structure, while CSS defines layout, responsive behavior, and visual design.

5. **Asset layer**
   - `Images/` contains all visual media used by the pages.
   - The website likely depends heavily on these assets for branding, feature illustration, and section visuals, making the image directory a distinct presentation dependency.

6. **JavaScript layer**
   - `main.js` exists as a separate client-side script entry.
   - Based on the README’s “Pure HTML & CSS” emphasis, JavaScript is probably minimal or auxiliary rather than a core application layer.
   - If used, it would be confined to progressive enhancement or small UI behaviors.

7. **Component composition flow**
   - The overall flow is: **page entry HTML → reusable component fragments → shared CSS → images/assets**.
   - This keeps repeated sections such as pricing or callout content isolated from the main page markup, reducing duplication.

8. **Responsiveness and layout**
   - The README explicitly positions the site as **fast and responsive**.
   - That means the architectural emphasis is on CSS-driven responsive layout rather than dynamic rendering or client-side state management.

9. **Technology boundaries**
   - There is no evidence of frameworks, templating engines, package management, or server-side rendering.
   - The repo is organized around direct browser delivery of static files, so the deployment boundary is simply the file bundle served as-is.

10. **How to draw the diagram**
   - Show two or more **HTML entry pages** at the top.
   - Connect them to **shared HTML components**, **global CSS/reset**, **images**, and optionally **main.js**.
   - Treat `Components/` and `CSS/` as shared layers reused by all pages, with `Images/` as a supporting asset store.

Main entry points: [`index.html`](https://github.com/erfanxh/moshify/blob/main/index.html) (Home page), [`playground.html`](https://github.com/erfanxh/moshify/blob/main/playground.html) (Playground), [`Images`](https://github.com/erfanxh/moshify/tree/main/Images) (Images), [`main.js`](https://github.com/erfanxh/moshify/blob/main/main.js) (Main JS)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Pages"]
  node_index["Home page<br/>html entry<br/>[index.html]"]
  node_playground["Playground<br/>html page<br/>[playground.html]"]
end

subgraph group_components["Shared UI"]
  node_components["Components<br/>html fragments"]
  node_callout["Callout<br/>section fragment<br/>[callout.html]"]
  node_plans["Plans<br/>section fragment<br/>[plans.html]"]
end

subgraph group_styles["Styling"]
  node_css["CSS system<br/>style layer"]
  node_normalize["Normalize<br/>reset stylesheet<br/>[normalize.css]"]
  node_stylescss["Main styles<br/>site stylesheet<br/>[styles.css]"]
end

subgraph group_assets["Assets"]
  node_images[("Images<br/>asset library")]
end

node_site["Moshify site<br/>static site"]
node_mainjs["Main JS<br/>client script<br/>[main.js]"]

node_site -->|"entry"| node_index
node_site -->|"demo"| node_playground
node_index -->|"uses"| node_components
node_playground -->|"uses"| node_components
node_components -->|"includes"| node_callout
node_components -->|"includes"| node_plans
node_index -->|"styles"| node_css
node_playground -->|"styles"| node_css
node_css -->|"base"| node_normalize
node_css -->|"defines"| node_stylescss
node_index -->|"assets"| node_images
node_playground -->|"assets"| node_images
node_index -.->|"script"| node_mainjs
node_playground -.->|"script"| node_mainjs

click node_index "https://github.com/erfanxh/moshify/blob/main/index.html"
click node_playground "https://github.com/erfanxh/moshify/blob/main/playground.html"
click node_callout "https://github.com/erfanxh/moshify/blob/main/Components/callout.html"
click node_plans "https://github.com/erfanxh/moshify/blob/main/Components/plans.html"
click node_normalize "https://github.com/erfanxh/moshify/blob/main/CSS/normalize.css"
click node_stylescss "https://github.com/erfanxh/moshify/blob/main/CSS/styles.css"
click node_mainjs "https://github.com/erfanxh/moshify/blob/main/main.js"
click node_images "https://github.com/erfanxh/moshify/tree/main/Images"

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_playground toneBlue
class node_components,node_callout,node_plans toneAmber
class node_css,node_normalize,node_stylescss toneMint
class node_images toneRose
class node_site,node_mainjs toneNeutral
```

## Components

### Pages

Top-level HTML entry points

- [Home page](https://github.com/erfanxh/moshify/blob/main/index.html): html entry · Primary landing page composition · `index.html`
- [Playground](https://github.com/erfanxh/moshify/blob/main/playground.html): html page · Secondary demo or experimentation page · `playground.html`

### Shared UI

Reusable HTML fragments

- **Components**: html fragments · Reusable section-level markup shared across pages
- [Callout](https://github.com/erfanxh/moshify/blob/main/Components/callout.html): section fragment · Reusable callout section markup · `Components/callout.html`
- [Plans](https://github.com/erfanxh/moshify/blob/main/Components/plans.html): section fragment · Reusable pricing or plan section markup · `Components/plans.html`

### Styling

Global presentation layer

- **CSS system**: style layer · Global styling and layout boundary for the site
- [Normalize](https://github.com/erfanxh/moshify/blob/main/CSS/normalize.css): reset stylesheet · Base browser normalization layer · `CSS/normalize.css`
- [Main styles](https://github.com/erfanxh/moshify/blob/main/CSS/styles.css): site stylesheet · Primary responsive design and visual styling · `CSS/styles.css`

### Assets

Static media used by the site

- [Images](https://github.com/erfanxh/moshify/tree/main/Images): asset library · Branding, illustrations, and other visual media · `Images`

### Other components

- **Moshify site**: static site · Browser-delivered marketing website assembled from shared static files
- [Main JS](https://github.com/erfanxh/moshify/blob/main/main.js): client script · Small browser-side script entry for enhancement or interaction · `main.js`

## Connections

- Moshify site → Home page: entry · Main site is served through the home page
- Moshify site → Playground: demo · Secondary page for experimentation or alternate composition
- Home page → Components: uses · Home page composes reusable fragments
- Playground → Components: uses · Playground can reuse the same shared fragments
- Components → Callout: includes · Shared component set includes the callout section
- Components → Plans: includes · Shared component set includes the plans section
- Home page → CSS system: styles · Home page depends on the global styling layer
- Playground → CSS system: styles · Playground depends on the global styling layer
- CSS system → Normalize: base · Core styles build on the normalize reset
- CSS system → Main styles: defines · Primary stylesheet contains the site design system
- Home page → Images: assets · Home page pulls from the shared image library
- Playground → Images: assets · Playground also depends on the shared image library
- Home page → Main JS: script · Optional client-side enhancement entry
- Playground → Main JS: script · Optional client-side enhancement entry