# diegomonterocrc/vidrios-universal-web architecture

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

- Interactive diagram: https://gitdiagram.com/diegomonterocrc/vidrios-universal-web
- Repository: https://github.com/diegomonterocrc/vidrios-universal-web

## Overview

#### Purpose and Delivery
Vidrios y Espejos Universal is a production marketing/catalog website for a family glass and mirror business. It is a static frontend deployed at `https://vidriosuniversal.com`, with no backend or build system represented. The document entry point is `index.html`; the custom-domain deployment marker is `CNAME`.

#### Page Composition and Content
`index.html` is the application shell and likely owns the business-facing sections: service/product presentation, gallery, contact/social links, SEO metadata, structured data, and external analytics embeds. Static visual content is organized under `assets/img/`, including hero imagery in `assets/img/portada/`, brand assets in `assets/img/logos/`, and gallery media in `assets/img/galeria/`.

#### Presentation Layer
Responsive, mobile-first layout, themes, animations, navigation states, and gallery/lightbox styling are centralized in `assets/css/styles.css`. This is the primary visual boundary: HTML supplies semantic structure and CSS controls responsive and dark/light presentation without a component framework.

#### Client Interaction Layer
Vanilla browser-side behavior is concentrated in `assets/js/main.js`. It implements the dynamic UI lifecycle described by the project: initial loader, responsive menu/navigation behavior, persisted dark mode, scroll-driven animation, gallery filtering, interactive lightbox, and outbound interaction tracking. `index.html` loads this script and provides the DOM hooks it operates on.

#### Gallery Data Flow
Gallery content is file-based rather than API-backed. `index.html` references categorized assets, while `assets/js/main.js` filters or opens selected items and `assets/css/styles.css` renders responsive gallery and lightbox states. Product categories are represented physically in paths such as `assets/img/galeria/puertas/`, `assets/img/galeria/ventanas/`, and `assets/img/galeria/espejos/`.

#### Discovery, Conversion, and External Boundaries
SEO and crawler boundaries are static: `robots.txt` defines crawl guidance and `sitemap.xml` exposes discoverable URLs. Conversion actions route users to external channels, notably WhatsApp and social platforms, from page links/events. Google Analytics is an external telemetry dependency, with click/event instrumentation coordinated from `assets/js/main.js` and page-level integration in `index.html`.

#### Hosting and Infrastructure
The site is intended for GitHub Pages static hosting, using `CNAME` for the custom domain. Cloudflare provides DNS/infrastructure integration in front of the hosted site. Assets are served directly from the repository, with WebP-oriented image optimization implied by the image asset organization; no server-side quote, catalog, CMS, or WhatsApp Business API integration currently exists.

Main entry points: [`index.html`](https://github.com/diegomonterocrc/vidrios-universal-web/blob/main/index.html) (Page shell), [`assets/js/main.js`](https://github.com/diegomonterocrc/vidrios-universal-web/blob/main/assets/js/main.js) (UI lifecycle), [`assets/css/styles.css`](https://github.com/diegomonterocrc/vidrios-universal-web/blob/main/assets/css/styles.css) (Responsive presentation), [`robots.txt`](https://github.com/diegomonterocrc/vidrios-universal-web/blob/main/robots.txt) (Crawler guidance)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Static site"]
  node_index["Page shell<br/>HTML entry point<br/>[index.html]"]
  node_styles["Responsive presentation<br/>CSS stylesheet<br/>[styles.css]"]
  node_mainjs["UI lifecycle<br/>vanilla JavaScript<br/>[main.js]"]
end

subgraph group_media["Media catalog"]
  node_hero["Hero imagery<br/>image assets"]
  node_logos["Brand assets<br/>image assets"]
  node_gallery["Gallery media<br/>categorized image assets"]
  node_doors["Door gallery<br/>category assets"]
  node_windows["Window gallery<br/>category assets"]
  node_mirrors["Mirror gallery<br/>category assets"]
end

subgraph group_discovery["Discovery &amp; conversion"]
  node_robots["Crawler guidance<br/>robots policy<br/>[robots.txt]"]
  node_sitemap["URL discovery<br/>XML sitemap<br/>[sitemap.xml]"]
  node_channels["WhatsApp &amp; social<br/>external conversion channels"]
  node_analytics["Google Analytics<br/>external telemetry"]
end

subgraph group_delivery["Delivery"]
  node_githubpages{{"GitHub Pages<br/>static host"}}
  node_cname["Custom domain marker<br/>deployment marker"]
  node_cloudflare{{"Cloudflare<br/>DNS and edge infrastructure"}}
end

node_browser(("Visitor browser<br/>client runtime"))

node_browser -->|"requests site"| node_cloudflare
node_cloudflare -->|"routes domain"| node_githubpages
node_cname -->|"configures domain"| node_githubpages
node_githubpages -->|"serves"| node_index
node_index -->|"loads"| node_styles
node_index -->|"loads"| node_mainjs
node_index -->|"references"| node_hero
node_index -->|"references"| node_logos
node_index -->|"references categorized media"| node_gallery
node_gallery -->|"contains"| node_doors
node_gallery -->|"contains"| node_windows
node_gallery -->|"contains"| node_mirrors
node_mainjs -->|"operates DOM hooks"| node_index
node_mainjs -->|"filters and opens items"| node_gallery
node_styles -->|"renders gallery states"| node_gallery
node_index -->|"conversion links"| node_channels
node_mainjs -.->|"tracks outbound actions"| node_channels
node_index -->|"page integration"| node_analytics
node_mainjs -.->|"sends interaction events"| node_analytics
node_robots -.->|"crawler discovery"| node_sitemap

click node_index "https://github.com/diegomonterocrc/vidrios-universal-web/blob/main/index.html"
click node_styles "https://github.com/diegomonterocrc/vidrios-universal-web/blob/main/assets/css/styles.css"
click node_mainjs "https://github.com/diegomonterocrc/vidrios-universal-web/blob/main/assets/js/main.js"
click node_robots "https://github.com/diegomonterocrc/vidrios-universal-web/blob/main/robots.txt"
click node_sitemap "https://github.com/diegomonterocrc/vidrios-universal-web/blob/main/sitemap.xml"
click node_cname "https://github.com/diegomonterocrc/vidrios-universal-web/blob/main/CNAME"

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_styles,node_mainjs toneBlue
class node_hero,node_logos,node_gallery,node_doors,node_windows,node_mirrors toneAmber
class node_robots,node_sitemap,node_channels,node_analytics toneMint
class node_githubpages,node_cname,node_cloudflare toneRose
class node_browser toneNeutral
```

## Components

### Static site

- [Page shell](https://github.com/diegomonterocrc/vidrios-universal-web/blob/main/index.html): HTML entry point · Semantic sections, metadata, embeds, and DOM hooks. · `index.html`
- [Responsive presentation](https://github.com/diegomonterocrc/vidrios-universal-web/blob/main/assets/css/styles.css): CSS stylesheet · Owns layout, themes, animation, and lightbox states. · `assets/css/styles.css`
- [UI lifecycle](https://github.com/diegomonterocrc/vidrios-universal-web/blob/main/assets/js/main.js): vanilla JavaScript · Controls navigation, theme persistence, gallery, lightbox, and tracking. · `assets/js/main.js`

### Media catalog

- **Hero imagery**: image assets
- **Brand assets**: image assets
- **Gallery media**: categorized image assets
- **Door gallery**: category assets
- **Window gallery**: category assets
- **Mirror gallery**: category assets

### Discovery & conversion

- [Crawler guidance](https://github.com/diegomonterocrc/vidrios-universal-web/blob/main/robots.txt): robots policy · `robots.txt`
- [URL discovery](https://github.com/diegomonterocrc/vidrios-universal-web/blob/main/sitemap.xml): XML sitemap · `sitemap.xml`
- **WhatsApp & social**: external conversion channels
- **Google Analytics**: external telemetry

### Delivery

- **GitHub Pages**: static host
- [Custom domain marker](https://github.com/diegomonterocrc/vidrios-universal-web/blob/main/CNAME): deployment marker · `CNAME`
- **Cloudflare**: DNS and edge infrastructure

### Other components

- **Visitor browser**: client runtime

## Connections

- Visitor browser → Cloudflare: requests site
- Cloudflare → GitHub Pages: routes domain
- Custom domain marker → GitHub Pages: configures domain
- GitHub Pages → Page shell: serves
- Page shell → Responsive presentation: loads
- Page shell → UI lifecycle: loads
- Page shell → Hero imagery: references
- Page shell → Brand assets: references
- Page shell → Gallery media: references categorized media
- Gallery media → Door gallery: contains
- Gallery media → Window gallery: contains
- Gallery media → Mirror gallery: contains
- UI lifecycle → Page shell: operates DOM hooks
- UI lifecycle → Gallery media: filters and opens items
- Responsive presentation → Gallery media: renders gallery states
- Page shell → WhatsApp & social: conversion links
- UI lifecycle → WhatsApp & social: tracks outbound actions
- Page shell → Google Analytics: page integration
- UI lifecycle → Google Analytics: sends interaction events
- Crawler guidance → URL discovery: crawler discovery