# cc366072-prog/carlos architecture

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

- Interactive diagram: https://gitdiagram.com/cc366072-prog/carlos
- Repository: https://github.com/cc366072-prog/carlos

## Overview

1. **Tipo de sistema**
   - Es una **aplicación web estática** de un solo archivo principal, centrada en el navegador.
   - No hay backend, base de datos ni servicios externos; toda la lógica ocurre en el cliente.

2. **Punto de entrada**
   - El repositorio tiene como pieza funcional principal **`index.html`**.
   - Por la estructura del repo, la app probablemente concentra ahí la interfaz y la lógica JavaScript, con estilos posiblemente embebidos o mínimos.

3. **Capa de presentación**
   - La interfaz expone los controles básicos del generador:
     - longitud de contraseña,
     - inclusión de mayúsculas,
     - minúsculas,
     - números,
     - símbolos,
     - botón para generar,
     - área para mostrar el resultado,
     - acción para copiar.
   - Esta capa es la única visible para el usuario y actúa como front-end completo.

4. **Entrada del usuario**
   - El usuario define primero la **longitud deseada**.
   - Luego selecciona una o más **clases de caracteres** mediante casillas.
   - Estos valores forman el estado de configuración que alimenta la generación.

5. **Validación**
   - Antes de generar, la app verifica que exista **al menos una opción de caracteres seleccionada**.
   - También debe validar que la longitud sea válida para evitar resultados vacíos o inconsistentes.
   - Esta validación es parte de la lógica del cliente, no depende de ningún servicio remoto.

6. **Motor de generación**
   - JavaScript construye un **conjunto de caracteres permitidos** según las opciones elegidas.
   - A partir de ese conjunto, selecciona caracteres aleatorios hasta completar la longitud solicitada.
   - El objetivo funcional es producir una contraseña aleatoria y personalizada.

7. **Salida del sistema**
   - El resultado se muestra directamente en la interfaz, normalmente en un campo de texto o área de salida.
   - Esta salida es transitoria: se genera en pantalla y puede ser reutilizada por el usuario, pero no se persiste en servidor.

8. **Función de copia**
   - La app incluye una acción para **copiar la contraseña al portapapeles**.
   - Esto cierra el flujo principal: configurar → generar → visualizar → copiar.
   - Es una interacción puramente de navegador, orientada a facilitar el uso inmediato en otras cuentas o servicios.

9. **Flujo de datos principal**
   - El flujo es lineal:
     - Usuario configura parámetros,
     - JavaScript valida,
     - JavaScript genera la contraseña,
     - la UI la renderiza,
     - el usuario la copia.
   - No hay bifurcaciones de arquitectura complejas ni sincronización entre subsistemas.

10. **Límites y dependencias**
   - El sistema está delimitado por el navegador: HTML define estructura, CSS la presentación y JavaScript el comportamiento.
   - No existen integraciones con APIs, autenticación, almacenamiento remoto ni colas/eventos.
   - Esto hace que el diagrama de arquitectura sea el de una **single-page utility app** completamente local.

11. **Implicación para un diagrama**
   - El dibujo correcto debería mostrar:
     - **Usuario**
     - **Interfaz en navegador**
     - **Lógica de validación/generación en JavaScript**
     - **Portapapeles del sistema**
   - Todo dentro de un único bloque de aplicación cliente, sin capa de servidor.

Main entry points: [`index.html`](https://github.com/cc366072-prog/carlos/blob/main/index.html) (Password app)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Browser app"]
  node_index_html["Password app<br/>single-file web app<br/>[index.html]"]
  node_controls["Inputs<br/>ui controls<br/>[index.html]"]
  node_actions["Actions<br/>[index.html]"]
  node_validation{{"Validation<br/>client logic<br/>[index.html]"}}
  node_generator{{"Generator<br/>client logic<br/>[index.html]"}}
  node_output["Result<br/>ui output<br/>[index.html]"]
end

node_user(("User<br/>actor"))
node_clipboard[("Clipboard<br/>browser API")]

node_user -->|"sets options"| node_controls
node_controls -->|"submits config"| node_validation
node_validation -->|"passes valid input"| node_generator
node_generator -->|"renders password"| node_output
node_user -->|"clicks"| node_actions
node_actions -->|"generate"| node_generator
node_actions -->|"copy"| node_clipboard
node_output -.->|"reused by"| node_actions
node_index_html -->|"contains"| node_controls
node_index_html -->|"contains"| node_validation
node_index_html -->|"contains"| node_generator
node_index_html -->|"contains"| node_output

click node_index_html "https://github.com/cc366072-prog/carlos/blob/main/index.html"
click node_controls "https://github.com/cc366072-prog/carlos/blob/main/index.html"
click node_actions "https://github.com/cc366072-prog/carlos/blob/main/index.html"
click node_validation "https://github.com/cc366072-prog/carlos/blob/main/index.html"
click node_generator "https://github.com/cc366072-prog/carlos/blob/main/index.html"
click node_output "https://github.com/cc366072-prog/carlos/blob/main/index.html"

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_html,node_controls,node_actions,node_validation,node_generator,node_output toneBlue
class node_user,node_clipboard toneNeutral
```

## Components

### Browser app

Single-file client-side utility running entirely in the browser

- [Password app](https://github.com/cc366072-prog/carlos/blob/main/index.html): single-file web app · Main browser entry point containing UI and client logic · `index.html`
- [Inputs](https://github.com/cc366072-prog/carlos/blob/main/index.html): ui controls · Length selector and character-class options · `index.html`
- [Actions](https://github.com/cc366072-prog/carlos/blob/main/index.html): ui actions · Generate password and copy to clipboard · `index.html`
- [Validation](https://github.com/cc366072-prog/carlos/blob/main/index.html): client logic · Checks selected character sets and length before generation · `index.html`
- [Generator](https://github.com/cc366072-prog/carlos/blob/main/index.html): client logic · Builds the allowed character set and assembles a random password · `index.html`
- [Result](https://github.com/cc366072-prog/carlos/blob/main/index.html): ui output · Displays the generated password in the page · `index.html`

### Other components

- **User**: actor · Configures password options and copies the result
- **Clipboard**: browser API · Receives copied password text from the app

## Connections

- User → Inputs: sets options · Chooses length and character classes
- Inputs → Validation: submits config · Configuration is checked before generation
- Validation → Generator: passes valid input · Only valid settings continue to password generation
- Generator → Result: renders password · Generated password is shown in the interface
- User → Actions: clicks · Triggers generate or copy actions
- Actions → Generator: generate · Requests a new password
- Actions → Clipboard: copy · Copies the displayed password to the system clipboard
- Result → Actions: reused by · Displayed result can be copied after generation
- Password app → Inputs: contains · Main file defines the input UI
- Password app → Validation: contains · Validation logic lives in the same client file
- Password app → Generator: contains · Password generation logic lives in the same client file
- Password app → Result: contains · Main file renders the result area