diff --git a/README.md b/README.md
index 4d88151..0f7aad6 100644
--- a/README.md
+++ b/README.md
@@ -1,811 +1,127 @@
-# Dataverse Chat
+# El Chat de los Anillos
-## Índice
-
-* [1. Preámbulo](#1-preámbulo)
-* [2. Resumen del proyecto](#2-resumen-del-proyecto)
-* [3. Consideraciones generales](#3-consideraciones-generales)
-* [4. Funcionalidades](#4-funcionalidades)
-* [5. Consideraciones técnicas](#5-consideraciones-técnicas)
-* [6. Hitos](#6-hitos)
-* [7. Criterios de aceptación mínimos del proyecto](#7-criterios-de-aceptación-mínimos-del-proyecto)
-* [8. Objetivos de aprendizaje](#8-objetivos-de-aprendizaje)
-* [9. Pistas, tips y lecturas complementarias](#9-pistas-tips-y-lecturas-complementarias)
-* [10. Consideraciones para pedir tu Project Feedback](#10-consideraciones-para-pedir-tu-project-feedback)
-
-***
-
-## 1. Preámbulo
-
-En nuestro día a día, las aplicaciones web son como amigas
-inseparables. Desde las redes sociales hasta las herramientas de
-trabajo, las usamos todo el tiempo. Pero lo que hace que este
-momento sea realmente especial es que estas aplicaciones nos pueden
-abrir una puerta a algo asombroso: la interacción con inteligencia
-artificial.
-
-¿Qué tal si pudiéramos conversar con alguien que vivió hace más de
-cien años o incluso con los personajes de nuestras series y
-películas favoritas o con entidades que normalmente no pueden hablar
-como por ejemplo planetas o animales? La inteligencia artificial nos
-puede ayudar a entender el pasado y a conectarnos con figuras
-históricas, así como a sumergirnos en mundos ficticios.
-
-
-
-## 2. Resumen del proyecto
-
-En este proyecto convertirás la aplicación desarrollada
-en Dataverse en una
-[Single Page Application (SPA)](https://es.wikipedia.org/wiki/Single-page_application),
-manteniendo las funcionalidades de visualizar, filtrar, ordenar y
-calcular alguna estadística, adicionando una nueva vista para
-consultar información detallada de cada personaje/entidad y agregando
-la posibilidad de interactuar con un personaje/entidad o todos ellos
-a través de un sistema de chat impulsado por la
-[API de OpenAI](https://openai.com/product).
-
-### Los objetivos generales de este proyecto son los siguientes
-
-* Desarrollar una [Single Page Application (SPA)](https://es.wikipedia.org/wiki/Single-page_application)
-* Aplicar los conceptos de responsividad en el desarrollo de las vistas
-* Implementar un router para la navegación entre las diferentes
-vistas de la aplicación
-* Integrar una API externa
-* Entender la asincronía en JavaScript
-* Crear una suite de pruebas unitarias que permitan testear código asíncrono
-
-## 3. Consideraciones generales
-
-* Este proyecto se debe resolver en duplas.
-
-* El rango de tiempo estimado para completar el proyecto es de 4 a 5 Sprints.
-
-* La lógica del proyecto debe estar implementada completamente en JavaScript
- (ES6+), HTML y CSS. Para este proyecto **no está permitido** utilizar
- _frameworks_ o librerías de CSS y JS.
-
-* Reutilizar cierta parte del código del proyecto Dataverse, sobre todo el dataset.
- Además debes refactorizar el código para que sea más modular y reutilizable
- implementando nuevas funciones para lograr las funcionalidades requeridas
- en este proyecto.
-
-* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la
- interfaz será desplegada usando cualquiera de estas opciones:
- [Vercel](https://vercel.com/) o [Netlify](https://www.netlify.com/).
-
-* La división y organización del trabajo debe permitir, sin excepciones, que
- **cada integrante** del equipo practique el aprendizaje de todo lo involucrado
- en **cada historia**. _No se dividan el trabajo como en una fábrica._
- - ¿Hasta acá has avanzado en tus proyectos con cierta fluidez y sin mayores
- problemas? Sé generosa con tus compañeras, permíteles aprender y practicar
- sin restricciones, aunque tome un poco más de tiempo. Aprovecha de
- _coachearlas_, de hacer _pair programming_, una de las mejores maneras de
- aprender es explicando verbalmente.
- - ¿Se te está haciendo difícil y te cuesta un poco más avanzar? No te quedes
- con las partes "fáciles" del proyecto, conversa, negocia, exige tu oportunidad
- para practicar y aprender lo que se te hace más difícil.
- Para comenzar tendrás que hacer un _fork_ y _clonar_ este repositorio.
-
-## 4. Funcionalidades
-
-Como entregable final tendrás una Single Page Application (SPA) que permita,
-además de **visualizar la data, filtrarla, ordenarla y calcular alguna
-estadística** tal como se hizo en Dataverse, acceder a una página de detalle
-de cada personaje y poder _interactuar_ con
-los personajes o entidades del set de data que utilizaste anteriormente.
-
-Aquí definimos en más detalle las funcionalidades mínimas que debe tener:
-
-* La aplicación debe ser _responsive_
-* La aplicación debe ser una SPA con múltiples vistas:
- - Implementar un sistema de enrutamiento que permita la navegación
- dentro de la aplicación.
- - Cada vista de la aplicación debe ser cargada dinámicamente
- mediante JavaScript.
- - Asegurarse de que la URL se actualice de manera acorde a la vista
- cargada al igual que el `title` del documento (la pestaña del navegador).
- - La aplicación debe ser capaz de cargar la vista correspondiente a
- la URL actual al iniciar la aplicación.
-* La aplicación debe mantener las funcionalidades de Dataverse: visualizar,
- filtrar, ordenar y calcular estadística de la data.
-* Al hacer clic en una tarjeta de personaje/entidad, la aplicación debe
- redirigirse a una vista **con su propia URL** que muestre la información
- detallada sobre ese personaje/entidad en particular
-* La aplicación debe permitir a la usuaria configurar la API Key para
- interactuar con la API de Open AI
-* Usando la API de Open AI, la aplicación debe permitir al usuario
- interactuar con un personaje/entidad a través de un chat.
- Por ejemplo, si usamos la data de ejemplo de Dataverse, correspondiente
- a las mujeres con mayores contribuciones a la programación en la historia,
- una usuaria puede establecer una conversación
- interactiva con
- [Ada Lovelace](https://es.wikipedia.org/wiki/Ada_Lovelace)
- a través del sistema de chat, obteniendo
- información sobre sus logros, desafíos y contribuciones a la informática.
- La inteligencia artificial de OpenAI permite que las respuestas sean
- informativas y personalizadas según las preguntas de los usuarios.
-
-```text
-Usuaria: "Hola, Ada. Cuéntame más sobre tus contribuciones a la informática."
-
-Ada Lovelace (AI de OpenAI): "¡Hola! Claro, estaré encantada de hablar sobre eso.
-Mis contribuciones más destacadas se relacionan con el trabajo junto a Charles Babbage
-en el diseño de la Máquina Analítica. Además, desarrollé el primer algoritmo destinado
-a ser procesado por una máquina, lo que me convierte en la primera programadora de la historia.
-¿Hay algo más en particular que te gustaría saber?"
-
-Usuaria: "¡Eso es fascinante! ¿Qué desafíos enfrentaste en ese tiempo?"
-
-Ada Lovelace (AI de OpenAI): "En ese tiempo, enfrenté varios desafíos, uno de los
-principales fue la limitación de recursos y la falta de reconocimiento del potencial
-de la Máquina Analítica. También tuve que superar las restricciones sociales de
-la época, ya que las mujeres tenían un acceso limitado a la educación en
-matemáticas y ciencias. Sin embargo, mi pasión por la matemática y la visión
-de lo que estas máquinas podrían lograr me impulsaron a seguir adelante."
-```
-
-* La aplicación debe permitir al usuario interactuar de manera simultánea
- con **todos** los personajes/entidades a través de un chat:
- - Esta funcionalidad debe cargarse en la URL `/panel`
- - La usuaria puede ingresar su pregunta o mensaje para todos los
- personajes/entidades en un cuadro de texto y enviarlo con un botón
- - El mensaje de la usuaria debe ser ajustado para cada personaje/entidad,
- con el objetivo que este genere una respuesta basada en su personalidad
- y conocimiento
- - Las respuestas de todos los personajes se muestran de acuerdo al orden
- respuesta.
- - Indicar visualmente cuando uno o varios personajes/entidades esten
- generando una respuesta al mensaje enviado
-* La aplicación debe informar a la usuaria los errores que puedan surgir al
- interactuar con la API, como por ejemplo alcanzar la cuota de tokens por
- minuto o cualquier otro error relacionado con la API. Debería
- proporcionarse una descripción clara de la causa del problema y posibles
- soluciones.
-
-Para que los chats anteriores puedan funcionar, es esencial que la aplicación
-se integre con la IA a través de la API de OpenAI. Para ello, el equipo de
-Laboratoria te proporcionará una API Key que la usuaria deberá poder ingresar
-en la aplicación que tu construirás.
-
-_Nota_: puedes revisar esta [implementación](https://laboratoria-dataverse-talks.netlify.app/)
-de ejemplo, cuyo principal objetivo es mostrarte cómo se vería la
-funcionalidad de chat en tu aplicación, más no tomes el diseño como
-referencia para tu proyecto, siente libre de hacer volar tu imaginación
-diseñando tu propia interfaz.
-
-## 5. Consideraciones técnicas
-
-La lógica del proyecto debe estar implementada completamente en JavaScript
-(ES6), HTML y CSS. En este proyecto NO está permitido usar librerías o
-frameworks, solo [vanilla JavaScript](https://medium.com/laboratoria-how-to/vanillajs-vs-jquery-31e623bbd46e).
-
-El _boilerplate_ que viene con el proyecto es una estructura inicial. Ustedes
-deben ir agregando más archivos conforme vayan avanzando en su proyecto.
-La siguiente es una estructura de archivos que recomendamos:
-
-```text
-.
-├── src
-| ├── components
-| ├── data
-| | └── dataset.js
-| ├── lib
-| | └── dataFunctions.js
-| ├── views
-| ├── index.html
-| ├── index.js
-| ├── router.js
-| └── style.css
-├── test
-| └── dataFunctions.spec.js
-| └── example.spec.js
-├── README.md
-└── package.json
-
-```
-
-### `src/components`
-
-Esta carpeta contendrá archivos JavaScript
-que representan [componentes](https://lenguajejs.com/vuejs/componentes/que-es-un-componente/)
-reutilizables de tu aplicación. Estos componentes
-pueden ser elementos de la interfaz de usuario que se utilizan en varias partes
-de tu aplicación. Organizar tus componentes de esta manera ayuda a mantener un
-código más modular y reutilizable.
-
-### `src/data`
-
-En esta carpeta están los datos con los que vas a trabajar (los datos de ejemplo
-o los datos que generarías con ayuda de la inteligencia artificial).
-
-### `src/lib`
-
-En esta carpeta, crearás módulos que contengan funcionalidades no relacionadas
-al DOM. Aquí podrás incluir el archivo
-`dataFunctions.js` que contiene las funciones que te permiten filtrar,
-ordenar y hacer cálculos agregados. También podrás crear archivos con
-las funciones que
-interactúen con la API de inteligencia artificial o utilidades destinadas
-a almacenar datos en el local storage.
-
-### `src/views`
-
-Esta carpeta generalmente contiene archivos de los componentes que
-representan las diferentes páginas o vistas de tu aplicación.
-Cada vista (view) puede tener su propio archivo
-JavaScript, que exporta una función que es responsable de generar
-los elementos del DOM.
-
-### `src/index.html`
-
-Como en el proyecto anterior, existe un archivo `index.html`. En este archivo
-HTML encontrarás un elemento DOM `` donde vas a
-renderizar las diferentes vistas de tu aplicación.
-
-### `src/index.js`
-
-El punto de partida para tu SPA sera el archivo `src/index.js`. Acá encontrarás
-algunas instrucciones y comentarios para guiarte en el inicio del desarrollo
-de tu aplicación.
-
-### `src/router.js`
-
-En este archivo vas a manejar el enrutamiento de tu aplicación. Es un archivo
-que debes crearlo por tu cuenta.
-
-### `src/style.css`
-
-Es un archivo que debes crearlo por tu cuenta para agregar los estilos que
-necesites para tu aplicación.
-
-### `src/test`
-
-Esta carpeta contiene los tests de tus funciones y componentes. Por ejemplo
-los tests de dataFunctions deben estar aquí.
-
-## 6. Hitos
-
-Para resolver un problema,
-es importante comprenderlo en profundidad.
-Una forma de hacerlo es descomponerlo en problemas más pequeños.
-Esto nos ayudará a identificar las causas del problema y
-a desarrollar soluciones más efectivas.
+## Introducción
-En este proyecto, te sugerimos que trabajes por hitos.
-Esto te permitirá enfocarte en un problema a la vez y
-hacer un seguimiento de tu progreso.
-A continuación, te presentamos un cronograma de hitos que
-te puede ayudar a organizar tu trabajo.
+Bienvenid@ a El Chat de Los Anillos, una aplicación que te permite explorar y profundizar en el fascinante mundo de "El Señor de los Anillos". Aquí podrás descubrir información detallada sobre tus personajes favoritos, interactuar con ellos a través de un chat impulsado por la API de OpenAI y disfrutar de una experiencia única e interactiva. Sumérgete en este viaje épico y descubre todos los secretos de la Tierra Media.
-* [Hito 1](./docs/01-milestone.md)
-* [Hito 2](./docs/02-milestone.md)
-* [Hito 3](./docs/03-milestone.md)
-* [Hito 4](./docs/04-milestone.md)
-* [Hito 5](./docs/05-milestone.md)
-
-## 7. Criterios de aceptación mínimos del proyecto
+## Índice
-Además de las funcionalidades que definimos en la sección de
-[Funcionalidades](#4-funcionalidades), tu proyecto debe cumplir con los
-siguientes requisitos:
+* [Introducción](#introducción)
+* [Resumen del proyecto](#resumen-del-proyecto)
+* [Definición del producto](#definición-del-producto)
+* [Funcionalidades](#funcionalidades)
+* [Historias de usuario](#historias-de-usuario)
+* [Diseño de la interfaz de usuario](#diseño-de-la-interfaz-de-usuario)
+ * [Prototipo de baja fidelidad](#prototipo-de-baja-fidelidad)
+ * [Prototipo de alta fidelidad - Mobile](#prototipo-de-alta-fidelidad---mobile)
+ * [Prototipo de alta fidelidad - Desktop](#prototipo-de-alta-fidelidad---desktop)
+* [Testeos de usabilidad](#testeos-de-usabilidad)
+* [Responsividad](#responsividad)
+* [Cierre del Proyecto](#cierre-del-proyecto)
+
+## Resumen del proyecto
+
+En este proyecto, se ha creado una Single Page Application (SPA) centrada en los personajes del universo de "El Señor de los Anillos". Además de tener funcionalidades de visualización, filtrado, ordenamiento y cálculo de estadísticas sobre sus datos, se ha añadido una nueva vista para consultar información detallada de cada personaje y la posibilidad de interactuar con ellos a través de un sistema de chat.
+
+**Objetivos generales:**
+- Desarrollar una Single Page Application (SPA).
+- Aplicar los conceptos de responsividad en el desarrollo de las vistas.
+- Implementar un router para la navegación entre las diferentes vistas de la aplicación.
+- Integrar una API externa (OpenAI).
+- Entender la asincronía en JavaScript.
+- Crear una suite de pruebas unitarias que permitan testear código asíncrono.
+
+**Tecnologías utilizadas:** JavaScript (ES6), HTML, CSS.
+
+**Herramientas Adicionales:** Jest, utilizado para el desarrollo de pruebas unitarias en JavaScript, garantizando la calidad y robustez del código al verificar su funcionamiento y rendimiento.
+
+Estos lenguajes y herramientas han permitido crear una aplicación web completa y funcional, con un diseño atractivo y una experiencia de usuario optimizada.
+
+### Entregable final:
+- Single Page Application (SPA) responsive.
+- Implementación de múltiples vistas.
+- Sistema de enrutamiento para la navegación dentro de la aplicación.
+- Carga dinámica de cada vista mediante JavaScript.
+- Actualización de la URL y el título del documento según la vista cargada.
+- Funcionalidades de: visualización, filtrado, ordenamiento y cálculo estadístico.
+- Redirección a una vista con información detallada al hacer clic en una tarjeta de personaje.
+- Configuración de la API Key para interactuar con la API de Open AI.
+- Interacción con un personaje a través de un chat individual o con todos los personajes a la vez a través de un chat grupal utilizando la API de Open AI.
### Definición del producto
-
-Documenta brevemente tu trabajo en el archivo `README.md` de tu repositorio,
-contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve
-el problema (o problemas) que tiene tu usuaria.
-
-### Historias de usuaria
-
-Una vez que entiendas las necesidades de tus usuarias, escribe las [Historias
-de Usuaria](https://es.wikipedia.org/wiki/Historias_de_usuario) que representen
-todo lo que la usuaria necesita hacer/ver. Las **Historias de Usuaria** deben
-ser el resultado de tu proceso de investigación o _research_ de tus usuarias.
-
-Asegúrate de incluir la definición de terminado (_definition of done_) y los
-Criterios de Aceptación para cada una.
-
-Usa tus historias de usuaria para planificar tus sprints dividiendo
-cada historia en tareas.
-
-En la medida de lo posible, termina una Historia de Usuaria antes de pasar
-a la siguiente (cumpliendo con la Definición de Terminado y los Criterios
-de Aceptación).
-
-### Diseño de la Interfaz de Usuaria
+El producto está diseñado para brindar una experiencia intuitiva y eficiente a los usuarios, permitiendo explorar y obtener información detallada sobre los personajes del Señor de los Anillos de manera interactiva y atractiva.
+
+## Funcionalidades
+1. **Visualización de Datos:** Muestra detallada de cada personaje, incluyendo su nombre, descripción, imagen y datos clave como raza, edad, estatura y año de nacimiento.
+2. **Filtrado:** Permite filtrar los personajes por raza y edad.
+3. **Ordenado:** Posibilidad de ordenar los personajes de forma ascendente o descendente según el nombre.
+4. **Cálculo Estadístico:** Calcula el promedio de edad de los personajes con datos de edad conocidos.
+5. **Interacción:** Interactuar con uno o todos los personajes a través de un chat.
+
+### Historias de usuario
+**Historia 1:**
+- Como usuario, quiero poder visualizar la información de los personajes en la pantalla principal.
+ - Definición de terminado: La información se muestra claramente con opciones de filtrado y ordenamiento.
+ - Criterios de aceptación: Se puede ver la lista completa de personajes con opciones de filtrado y ordenamiento.
+
+**Historia 2:**
+- Como usuario, quiero poder ingresar mi API Key para interactuar con la API de Open AI.
+ - Definición de terminado: Se proporciona un input tipo modal para ingresar la API Key.
+ - Criterios de aceptación: El usuario puede ingresar su API Key y confirmar su configuración.
+
+**Historia 3:**
+- Como usuario, quiero ver una página con más detalles de cada personaje.
+ - Definición de terminado: Se implementa una vista detallada para cada personaje.
+ - Criterios de aceptación: Al hacer clic en una tarjeta de personaje en su botón "Ver Info", se abre un modal con información detallada.
+
+**Historia 4:**
+- Como usuario, quiero poder interactuar con uno o todos los personajes a través de un chat.
+ - Definición de terminado: Se integra un sistema de chat, tanto individual como grupal impulsado por la API de Open AI.
+ - Criterios de aceptación: Se puede iniciar una conversación interactiva con uno o todos los personaje y obtener respuestas informativas y personalizadas.
+
+### Diseño de la interfaz de usuario
+La interfaz está diseñada para ofrecer una experiencia intuitiva y atractiva para los usuarios que deseen explorar el mundo de "El Señor de los Anillos".
#### Prototipo de baja fidelidad
-
-Durante tu trabajo deberás haber hecho e iterado bocetos (_sketches_) de tu
-solución usando papel y lápiz. Te recomendamos tomar fotos de todas las
-iteraciones que hagas, que las subas a tu repositorio y las menciones en tu
-`README.md`.
-
-Recuerda pedir feedback de tu prototipo a tus compañeras y/o coaches.
-
-#### Prototipo de alta fidelidad
-
-Lo siguiente es diseñar tu Interfaz de Usuaria (UI por sus siglas en inglés -
-_User Interface_). Para eso debes aprender a utilizar alguna herramienta de
-diseño visual. Nosotros te recomendamos [Figma](https://www.figma.com/) que es
-una herramienta que funciona en el navegador y, además, puedes crear una cuenta
-gratis. Sin embargo, eres libre de utilizar otros editores gráficos como
-Illustrator, Photoshop, etc.
-
-El diseño debe representar el _ideal_ de tu solución. Digamos que es lo que
-desearías implementar si tuvieras tiempo ilimitado para trabajar. Además, tu
-diseño debe seguir los fundamentos de _visual design_.
-
-Recuerda pedir feedback de tu prototipo a tus compañeras y/o coaches.
+- Iteraciones de bocetos realizados utilizando papel y lápiz, tanto de la interfaz como de los modales para la API Key.
+- 
+- 
+
+#### Prototipo de alta fidelidad - Mobile
+- Diseño de la interfaz de usuario realizado utilizando Figma, tanto de la página principal, los modales, y la vista de los chats.
+- 
+- 
+- 
+- 
+
+#### Prototipo de alta fidelidad - Desktop
+- Diseño de la interfaz de usuario realizado utilizando Figma, tanto de la página principal, los modales, y la vista de los chats.
+- 
+- 
+- 
+
+---
+Con estos prototipos, se logró diseñar una interfaz atractiva y funcional brindando una experiencia de usuario enriquecedora para los fans de "El Señor de los Anillos".
### Testeos de usabilidad
+- Se realizaron tests de usabilidad con distintos usuarios y se iteró en los diseños en base a los resultados obtenidos.
-Durante el reto deberás hacer _tests_ de usabilidad con distintos usuarias,
-y con base en los resultados, deberás iterar tus diseños. Cuéntanos
-qué problemas de usabilidad detectaste a través de los _tests_ y cómo los
-mejoraste en tu propuesta final.
-
-### Implementación de la Interfaz de Usuaria (HTML/CSS/JS)
-
-Luego de diseñar tu interfaz de usuaria deberás trabajar en su implementación.
-**No** es necesario que construyas la interfaz exactamente como la diseñaste.
-Tu tiempo de hacking es escaso, así que deberás priorizar.
-
-Revisa [las funcionalidades](#4-funcionalidades) que el proyecto pide del interfaz.
-
-### Pruebas unitarias
-
-El _boilerplate_ de este proyecto no incluye Pruebas Unitarias (_tests_), así es
-que tendrás que escribirlas tú para las funciones encargadas de _procesar_,
-_filtrar_ y _ordenar_ la data, así como _calcular_ estadísticas.
-Te recomendamos usar
-el framework [Jest](https://jestjs.io/) para ejecutar las pruebas unitarias.
-Consultar su documentación.
-
-Tus _pruebas unitarias_ deben dar una cobertura del 70% de _statements_
-(_sentencias_), _functions_ (_funciones_), _lines_ (_líneas_), y _branches_
-(_ramas_) del archivo `src/dataFunctions.js` que contenga tus funciones y
-está detallado en la sección de [Consideraciones técnicas](#5-consideraciones-técnicas).
-
-## 8. Objetivos de aprendizaje
-
-
-Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.
-
-### HTML
-
-- [ ] **Uso de HTML semántico**
-
- Links
-
- * [Fetch API - MDN](https://developer.mozilla.org/es/docs/Web/API/Fetch_API)
-
-
-#### DOM (Document Object Model)
-
-- [ ] **Uso de selectores del DOM**
-
- Links
-
- * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/dom/1-dom-methods-selection)
- * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction)
- * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
-
-
-- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)**
-
- Links
-
- * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/basics/values-variables-and-types)
- * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/basics/variables)
-
-
- * [Códigos de estado de respuesta HTTP - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Status)
- * [The Complete Guide to Status Codes for Meaningful ReST APIs - dev.to](https://dev.to/khaosdoctor/the-complete-guide-to-status-codes-for-meaningful-rest-apis-1-5c5)
-
-
-### Control de Versiones (Git y GitHub)
-
-#### Git
-
-- [ ] **Git: Instalación y configuración**
-
-- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)**
-
-- [ ] **Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)**
-
-#### GitHub
-
-- [ ] **GitHub: Creación de cuenta y repos, configuración de llaves SSH**
-
-- [ ] **GitHub: Despliegue con GitHub Pages**
-
- Links
-
- * [Sitio oficial de GitHub Pages](https://pages.github.com/)
-
-
-- [ ] **GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)**
-
-### Centrado en el usuario
-
-- [ ] **Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro**
-
-### Diseño de producto
-
-- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones**
-
-- [ ] **Seguir los principios básicos de diseño visual**
-
-### Investigación
-
-- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad**
-
- Links
-
- * [Intro a testeos usabilidad](https://coda.io/@bootcamp-laboratoria/contenido-ux/test-de-usabilidad-15)
- * [Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?](https://eugeniacasabona.medium.com/pruebas-con-usuarios-1-qu%C3%A9-cu%C3%A1ndo-y-para-qu%C3%A9-testeamos-7c3a89b4b5e7)
-
Te has desviado del sendero, viajero.
+ Regresa a la Comarca y continúa tu aventura.
+
+
+
+ `;
+
+ const buttonGoHome = notFoundElement.querySelector("#button-goHome");
+ buttonGoHome.addEventListener("click", () => {
+ window.location.href = "index.html";
+ });
+
+ return notFoundElement;
+};
diff --git a/src/data/dataset.js b/src/data/dataset.js
new file mode 100644
index 0000000..20c4c8b
--- /dev/null
+++ b/src/data/dataset.js
@@ -0,0 +1,339 @@
+export const data = [
+
+ {
+ "id": "frodo_bolson",
+ "name": "Frodo Bolsón",
+ "shortDescription": "Portador del Anillo Único",
+ "description": "Frodo Bolsón, un hobbit de la Comarca, es elegido para llevar el Anillo Único a Mordor y destruirlo en el Monte del Destino. A pesar de su modesta estatura, muestra una valentía extraordinaria y una determinación inquebrantable en su peligroso viaje. Su carga lo lleva al borde de la desesperación, pero su amistad con Sam y el apoyo de sus compañeros lo guían en su difícil tarea, enfrentando peligros inimaginables para salvar a la Tierra Media de la oscuridad que amenaza con consumirla. ",
+ "imageUrl": "data/img/Frodo.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 33,
+ "height": "1.5m",
+ "yearOfBirth": 2968
+ }
+ },
+
+ {
+ "id": "sam_gamyi",
+ "name": "Sam Gamyi",
+ "shortDescription": "Fiel compañero de Frodo",
+ "description": "Sam Gamyi, leal compañero de Frodo, demuestra una valentía y lealtad inquebrantables en su viaje para destruir el Anillo Único. Como jardinero de la Comarca, inicialmente se une a Frodo como su cocinero, pero su papel se vuelve crucial cuando se convierte en el soporte emocional y físico de Frodo en los momentos más oscuros. Su coraje y sacrificio son ejemplares, y su amor por su hogar y sus amigos lo impulsan a superar desafíos aparentemente insuperables en su búsqueda para salvar a la Tierra Media.",
+ "imageUrl": "data/img/sam.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 38,
+ "height": "1.4m",
+ "yearOfBirth": 2980
+ }
+ },
+
+ {
+ "id": "gandalf",
+ "name": "Gandalf",
+ "shortDescription": "El mago gris",
+ "description": "Gandalf, conocido como el Mago Gris, es una figura venerada y poderosa en la Tierra Media. Su sabiduría y habilidades mágicas lo convierten en un guía esencial para la Comunidad del Anillo en su lucha contra las fuerzas oscuras de Sauron. Aunque puede parecer distante y enigmático, Gandalf tiene un profundo amor por los pueblos libres y está dispuesto a arriesgar todo por su protección. Su papel como mentor y estratega es crucial en la guerra contra la oscuridad, y su sacrificio final en la batalla contra el Balrog es un acto de pura valentía y devoción.",
+ "imageUrl": "data/img/gandalf.jpg",
+ "facts": {
+ "race": "Maia",
+ "age": 2019,
+ "height": "2.1m",
+ "yearOfBirth": 1000
+ }
+ },
+
+ {
+ "id": "aragorn",
+ "name": "Aragorn",
+ "shortDescription": "El heredero de Isildur",
+ "description": "Aragorn, también conocido como Strider, es un guerrero noble y valiente, destinado a reclamar su derecho como rey de Gondor. Heredero de Isildur, lleva consigo la carga de una gran responsabilidad y un legado de honor y coraje. Aunque inicialmente renuente a asumir su destino, Aragorn se convierte en un líder indiscutible de la Comunidad del Anillo, guiándola con sabiduría y determinación en su búsqueda para destruir el Anillo Único y derrotar a Sauron. Su valentía y compasión lo convierten en un héroe legendario en la historia de la Tierra Media.",
+ "imageUrl": "data/img/aragorn.jpg",
+ "facts": {
+ "race": "Hombre",
+ "age": 87,
+ "height": "1.86m",
+ "yearOfBirth": 2931
+ }
+ },
+
+ {
+ "id": "legolas",
+ "name": "Legolas",
+ "shortDescription": "El arquero elfo",
+ "description": "Legolas, un elfo de bosque del reino de Mirkwood, es un arquero experto y ágil guerrero. Miembro de la Comunidad del Anillo, su destreza con el arco y su agudeza visual son inigualables, haciendo de él un aliado valioso en la lucha contra las fuerzas de Sauron. Aunque a menudo se muestra reservado y serio, Legolas demuestra un profundo respeto por sus compañeros de viaje y una lealtad inquebrantable hacia su causa. Su habilidad para percibir el peligro y su habilidad en la batalla lo convierten en un activo invaluable en la misión para salvar a la Tierra Media.",
+ "imageUrl": "data/img/legolas.jpg",
+ "facts": {
+ "race": "Elfo",
+ "age": 2931,
+ "height": "1.83m",
+ "yearOfBirth": 87
+ }
+ },
+
+ {
+ "id": "gimli",
+ "name": "Gimli",
+ "shortDescription": "El enano de Erebor",
+ "description": "Un enano de la Montaña Solitaria, es un guerrero valiente y un amigo leal. Su amor por la herencia de su pueblo lo impulsan a unirse a la Comunidad del Anillo en su peligroso viaje. Aunque a menudo se encuentra en desacuerdo con Legolas debido a la rivalidad entre elfos y enanos, Gimli demuestra un respeto profundo por sus compañeros y una disposición para sacrificar todo en la lucha contra el mal. Su fuerza y su coraje son legendarios, y su amistad con Legolas es una prueba de que lazos inquebrantables pueden formarse incluso en los momentos más oscuros.",
+ "imageUrl": "data/img/gimli.jpg",
+ "facts": {
+ "race": "Enano",
+ "age": 139,
+ "height": "1.45m",
+ "yearOfBirth": 2879
+ }
+ },
+
+ {
+ "id": "boromir",
+ "name": "Boromir",
+ "shortDescription": "Hijo de Gondor",
+ "description": "Boromir, un valiente guerrero de Gondor, es un miembro de la Comunidad del Anillo con un corazón noble pero atormentado por la sombra del poder. Lucha con la tentación de usar el Anillo Único para proteger a su pueblo, pero su determinación y coraje son innegables. Aunque cae en la tentación y enfrenta su destino trágico, su sacrificio final por sus compañeros y su arrepentimiento son un recordatorio de la fuerza del espíritu humano y la redención. Su legado perdura como un símbolo de la lucha contra el mal y la búsqueda de redención.",
+ "imageUrl": "data/img/boromirdel.jpg",
+ "facts": {
+ "race": "Hombre",
+ "age": 41,
+ "height": "1.83m",
+ "yearOfBirth": 2978
+ }
+ },
+
+ {
+ "id": "arwen",
+ "name": "Arwen",
+ "shortDescription": "La estrella vespertina",
+ "description": "Arwen Undómiel, una elfa noble de la estirpe de los Noldor, es conocida por su belleza y su amor por Aragorn. Su decisión de renunciar a la inmortalidad por amor es un acto de valentía y sacrificio que la define como una de las figuras más poderosas y nobles de la Tierra Media. Aunque su papel en la trama principal puede ser secundario, su influencia y su conexión con Aragorn son fundamentales para el éxito de la Comunidad del Anillo y la restauración de la paz en la Tierra Media. ",
+ "imageUrl": "data/img/arwen .jpg",
+ "facts": {
+ "race": "Elfo",
+ "age": 2921,
+ "height": "1.70m",
+ "yearOfBirth": 241
+ }
+ },
+
+ {
+ "id": "saruman",
+ "name": "Saruman",
+ "shortDescription": "El mago traidor",
+ "description": "Saruman el Blanco, líder de los Istari, se corrompe por el deseo de poder y se alía con Sauron en su búsqueda del Anillo Único. Una vez respetado como sabio consejero y protector de la Tierra Media, su caída en la oscuridad lo convierte en un enemigo temible. Su traición a sus compañeros magos y su papel en la guerra contra los pueblos libres lo hacen un adversario formidable. Sin embargo, su soberbia y ambición eventualmente lo conducen a su propia destrucción, demostrando que incluso los más poderosos pueden caer ante la tentación.",
+ "imageUrl": "data/img/saruman.jpg",
+ "facts": {
+ "race": "Maia",
+ "age": 2019,
+ "height": "2.1m",
+ "yearOfBirth": 1000
+ }
+ },
+
+ {
+ "id": "sauron",
+ "name": "Sauron",
+ "shortDescription": "El Señor Oscuro",
+ "description": "Sauron, el principal antagonista de la trilogía, es un antiguo Maia corrompido que busca recuperar su poder forjando un nuevo Anillo Único. Conocido como el Señor Oscuro, su influencia se extiende sobre la Tierra Media, sembrando terror y destrucción dondequiera que vaya. Su deseo de dominación lo lleva a cometer atrocidades inimaginables, manipulando a aquellos que lo rodean en su búsqueda de dominación total. Su única debilidad es el mismo Anillo que desea poseer, y su obsesión lo consume hasta su eventual derrota. ",
+ "imageUrl": "data/img/sauron.jpg",
+ "facts": {
+ "race": "Maia",
+ "age": 2019,
+ "height": "3.2m",
+ "yearOfBirth": 1000
+ }
+ },
+
+ {
+ "id": "gollum",
+ "name": "Gollum",
+ "shortDescription": "Antiguo poseedor del Anillo Único",
+ "description": "Gollum, anteriormente conocido como Sméagol, fue corrompido por el Anillo Único y se convirtió en una criatura deforme y obsesionada con recuperar su posesión. Una vez un hobbit inocente, su lucha interna entre su antiguo yo y su alter ego, Gollum, lo consume. Su relación con el Anillo es tanto su perdición como su redención, ya que lo impulsa a traicionar a Frodo y Sam para recuperar su precioso. Sin embargo, su papel en la destrucción del Anillo finalmente le otorga la redención que tanto anhelaba, demostrando que incluso los más oscuros pueden encontrar la luz.",
+ "imageUrl": "data/img/gollum.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 589,
+ "height": "0.8m",
+ "yearOfBirth": 2430
+ }
+ },
+
+ {
+ "id": "treebeard",
+ "name": "Treebeard",
+ "shortDescription": "El pastor de los árboles",
+ "description": "También conocido como Barbárbol, es el líder de los Ents, antiguas criaturas que protegen los bosques de la Tierra Media. Conocido por su sabiduría y su profundo amor por la naturaleza es un defensor apasionado de su hogar, decidido a protegerlo de la destrucción causada por Saruman y sus aliados. Su paciencia y su habilidad para ver el panorama completo lo convierten en un aliado valioso para la Comunidad del Anillo en su lucha contra la oscuridad. Su voz se alza como un eco de los antiguos tiempos, recordando a todos la importancia de proteger y preservar la Tierra Media.",
+ "imageUrl": "data/img/treebeard.jpg",
+ "facts": {
+ "race": "Ent",
+ "age": 3872,
+ "height": "4.2m",
+ "yearOfBirth": 990
+ }
+ },
+
+ {
+ "id": "shadowfax",
+ "name": "Shadowfax",
+ "shortDescription": "El Señor de los Caballos",
+ "description": "Shadowfax es un caballo noble y veloz, conocido como el Señor de los Caballos, leal a Gandalf y capaz de llevarlo a grandes velocidades. Criado en las praderas de Rohan, Shadowfax es más que un mero corcel; es un símbolo de libertad y poderío. Su inteligencia y su conexión con Gandalf son incomparables, y su papel en la lucha contra las fuerzas de la oscuridad es crucial. Montado por el mago en sus misiones más peligrosas, Shadowfax demuestra una valentía y un coraje dignos de elogio, inspirando a aquellos que lo rodean con su nobleza y gracia.",
+ "imageUrl": "data/img/shadowfax.jpg",
+ "facts": {
+ "race": "Caballo",
+ "age": 30,
+ "height": "1.7m",
+ "yearOfBirth": 1994
+ }
+ },
+
+ {
+ "id": "nazgul",
+ "name": "Nazgûl",
+ "shortDescription": "Los Nueve Espectros del Anillo",
+ "description": "Los Nazgûl, también conocidos como los Nueve Espectros del Anillo, son los antiguos reyes humanos corrompidos por los Anillos de Poder de Sauron. Ahora esclavos de la voluntad del Señor Oscuro, estos espectros aterradores son sus más temidos servidores, encargados de cazar y capturar al Portador del Anillo. Montados en sus dragones alados y envueltos en sombras, los Nazgûl son una presencia ominosa que infunde terror en el corazón de quienes los encuentran. Su única debilidad es la luz del día y el coraje de aquellos que se atreven a enfrentarlos en la batalla.",
+ "imageUrl": "data/img/nazgul.jpg",
+ "facts": {
+ "race": "Hombre",
+ "age": "Desconocida",
+ "height": "Variable",
+ "yearOfBirth": "Desconocido"
+ }
+ },
+
+ {
+ "id": "wargs",
+ "name": "Wargs",
+ "shortDescription": "Bestias lobunas",
+ "description": "Los Wargs son criaturas lobunas inteligentes y feroces, utilizadas por los Uruk-hai y otros servidores de Sauron en la guerra contra los pueblos libres. Dotados de una astucia natural y una ferocidad implacable, los Wargs son temidos por su capacidad para acechar en las sombras y atacar con rapidez y brutalidad. Montados por jinetes orcos, estas bestias son utilizadas como instrumentos de terror y destrucción, sembrando el caos y la desolación a su paso. Su presencia en el campo de batalla es un recordatorio constante del poder oscuro que amenaza con engullir a la Tierra Media.",
+ "imageUrl": "data/img/wargos_720.jpg",
+ "facts": {
+ "race": "Criatura",
+ "age": "Desconocida",
+ "height": "Variable",
+ "yearOfBirth": "Desconocido"
+ }
+ },
+
+ {
+ "id": "balrog",
+ "name": "Balrog",
+ "shortDescription": "El demonio de las sombras",
+ "description": "Los Balrogs son antiguos espíritus de fuego y sombra, criaturas temibles que sirven a Morgoth y que fueron despertadas por Sauron en la Tercera Edad. Conocidos por su inmensa fuerza y su habilidad para manipular el fuego, los Balrogs son enemigos mortales capaces de sembrar el caos y la destrucción dondequiera que vayan. El Balrog de Moria, enfrentado por Gandalf en una batalla legendaria, es un recordatorio del poder oscuro que yace en las profundidades de la Tierra Media, una fuerza que debe ser enfrentada con valentía y determinación.",
+ "imageUrl": "data/img/balrog.jpeg",
+ "facts": {
+ "race": "Maia",
+ "age": "Desconocida",
+ "height": "Variable",
+ "yearOfBirth": "Desconocido"
+ }
+ },
+
+ {
+ "id": "shelob",
+ "name": "Shelob",
+ "shortDescription": "La araña gigante",
+ "description": "Shelob es una antigua araña gigante que habita en los túneles de Cirith Ungol y es temida por su veneno y su astucia. Conocida como el Terror de las Oscuridades, Shelob es una criatura solitaria y retorcida, cuya única pasión es la caza y la devoración de sus presas. Su guarida, un laberinto de túneles y telarañas, es un lugar de pesadilla que pocos se atreven a explorar. Atrapando a sus víctimas en su red mortal, Shelob se deleita en su sufrimiento antes de consumirlas, una pesadilla viviente en la sombra de la Tierra Media.",
+ "imageUrl": "data/img/shelob_720.jpg",
+ "facts": {
+ "race": "Criatura",
+ "age": "Desconocida",
+ "height": "Variable",
+ "yearOfBirth": "Desconocido"
+ }
+ },
+
+ {
+ "id": "mouth_of_sauron",
+ "name": "Boca de Sauron",
+ "shortDescription": "El heraldo del Señor Oscuro",
+ "description": "La Boca de Sauron es el portavoz y heraldo del Señor Oscuro, que negocia con la Compañía del Anillo en la Puerta Negra antes de la Batalla de Morannon. Una figura ominosa y siniestra, la Boca de Sauron es una manifestación de la corrupción y el mal que emana de Mordor. Su presencia inspira terror y desesperación, y sus palabras están llenas de engaño y manipulación. Como representante de Sauron, su propósito es sembrar discordia y desconfianza entre los enemigos del Señor Oscuro, socavando su determinación y esperanza antes de la batalla final.",
+ "imageUrl": "data/img/boca_de_sauron_720.jpg",
+ "facts": {
+ "race": "Hombre",
+ "age": "Desconocida",
+ "height": "Variable",
+ "yearOfBirth": "Desconocido"
+ }
+ },
+
+ {
+ "id": "faramir",
+ "name": "Faramir",
+ "shortDescription": "Hijo de Denethor",
+ "description": "Faramir es el hijo menor de Denethor II, el Senescal de Gondor, y es conocido por su sabiduría, nobleza y valentía en la batalla. A diferencia de su hermano Boromir, Faramir demuestra compasión y comprensión, resistiendo la tentación del Anillo Único cuando lo encuentra. Como capitán de los Rangers de Ithilien, protege las fronteras de Gondor de las incursiones de los enemigos de Mordor. Su amor por su pueblo y su determinación para protegerlo lo convierten en un líder respetado y admirado, un símbolo de esperanza en tiempos de oscuridad.",
+ "imageUrl": "data/img/faramir_720.jpg",
+ "facts": {
+ "race": "Hombre",
+ "age": 37,
+ "height": "1.83m",
+ "yearOfBirth": 2983
+ }
+ },
+
+ {
+ "id": "eowyn",
+ "name": "Eowyn",
+ "shortDescription": "La dama de Rohan",
+ "description": "Éowyn es la sobrina del rey Théoden de Rohan y se disfraza de hombre para unirse a la batalla y derrotar al Rey Brujo de Angmar. Cansada de la vida confinada de las mujeres de Rohan, anhela la gloria de la batalla y la oportunidad de demostrar su valentía. Su encuentro con el Rey Brujo en la batalla de Pelennor Fields es legendario, ya que es ella quien finalmente lo derrota. Su coraje y determinación la convierten en un símbolo de la fuerza femenina y la resistencia en un mundo dominado por la guerra y la adversidad.",
+ "imageUrl": "data/img/eowyn_720.jpg",
+ "facts": {
+ "race": "Hombre",
+ "age": 25,
+ "height": "1.68m",
+ "yearOfBirth": 2995
+ }
+ },
+
+ {
+ "id": "denethor",
+ "name": "Denethor",
+ "shortDescription": "El Senescal de Gondor",
+ "description": "Denethor II es el último Senescal de Gondor antes del regreso del rey legítimo. Gobierna con mano dura y cae en la desesperación ante la guerra. Consumido por el pesar y la pérdida, su mente se oscurece y se vuelve cada vez más irracional. Aunque es un líder competente en tiempos de paz, su incapacidad para enfrentar la creciente amenaza de Mordor lo lleva a tomar decisiones desesperadas y destructivas, causando la división y el sufrimiento dentro de su propio reino. Su caída en la locura es un recordatorio sombrío del poder corruptor del miedo y la desesperación.",
+ "imageUrl": "data/img/denethor_720.jpg",
+ "facts": {
+ "race": "Hombre",
+ "age": 89,
+ "height": "1.83m",
+ "yearOfBirth": 2901
+ }
+ },
+
+ {
+ "id": "bilbo_bolson",
+ "name": "Bilbo Bolsón",
+ "shortDescription": "El antiguo portador del Anillo",
+ "description": "Bilbo Bolsón es un hobbit que encontró el Anillo Único durante su aventura con los enanos para reclamar Erebor. Aunque inicialmente lo ve como un simple tesoro, su encuentro con Gollum y la influencia del Anillo lo cambian para siempre. A medida que envejece, su conexión con el Anillo lo lleva a sentir el peso de su poder y su maldición, y eventualmente decide dejarlo a Frodo, comenzando así la misión para destruirlo. A pesar de su papel modesto en la trama principal, Bilbo es un símbolo de coraje y determinación en tiempos de gran adversidad.",
+ "imageUrl": "data/img/bilbo_720.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 131,
+ "height": "1.2m",
+ "yearOfBirth": 2890
+ }
+ },
+
+ {
+ "id": "elrond",
+ "name": "Elrond",
+ "shortDescription": "Señor de Rivendel",
+ "description": "Elrond Medio Elfo es el Señor de Rivendel y un sabio consejero. Ayuda a la Comunidad del Anillo en su misión para destruir el Anillo Único. Conocido por su paciencia y sabiduría, Elrond posee un profundo conocimiento de la historia y el destino de la Tierra Media. Su influencia se extiende mucho más allá de los límites de Rivendel, ya que es respetado y admirado por pueblos de todas las razas. Como guardián de uno de los Últimos Hogares Seguros, su papel en la lucha contra Sauron es fundamental para el destino de toda la Tierra Media.",
+ "imageUrl": "data/img/elrond_720.jpg",
+ "facts": {
+ "race": "Elfo",
+ "age": "Desconocida",
+ "height": "Variable",
+ "yearOfBirth": "Desconocido"
+ }
+ },
+
+ {
+ "id": "galadriel",
+ "name": "Galadriel",
+ "shortDescription": "La dama de Lórien",
+ "description": "Galadriel es una poderosa elfa y la señora de Lothlórien, conocida por su sabiduría, belleza y habilidades mágicas. Aunque su papel en la trama principal puede parecer secundario, su influencia y su conexión con el destino de la Tierra Media son fundamentales. Como portadora de uno de los Tres Anillos de los Elfos, Galadriel posee un poder incomparable, pero su sabiduría y compasión son igualmente impresionantes. Su papel como guía y protectora de la Comunidad del Anillo en Lothlórien es esencial para su éxito en la misión para destruir el Anillo Único y derrotar a Sauron.",
+ "imageUrl": "data/img/galadriel_720.jpg",
+ "facts": {
+ "race": "Elfo",
+ "age": "Desconocida",
+ "height": "Variable",
+ "yearOfBirth": "Desconocido"
+ }
+ }
+];
+export default data;
\ No newline at end of file
diff --git a/src/data/img/ChatGrupalMobile.png b/src/data/img/ChatGrupalMobile.png
new file mode 100644
index 0000000..2c4bf7b
Binary files /dev/null and b/src/data/img/ChatGrupalMobile.png differ
diff --git a/src/data/img/ChatIndividualDesktop.png b/src/data/img/ChatIndividualDesktop.png
new file mode 100644
index 0000000..53bc94b
Binary files /dev/null and b/src/data/img/ChatIndividualDesktop.png differ
diff --git a/src/data/img/ChatIndividualMobile.png b/src/data/img/ChatIndividualMobile.png
new file mode 100644
index 0000000..09375de
Binary files /dev/null and b/src/data/img/ChatIndividualMobile.png differ
diff --git a/src/data/img/Frodo.jpg b/src/data/img/Frodo.jpg
new file mode 100644
index 0000000..f53db6a
Binary files /dev/null and b/src/data/img/Frodo.jpg differ
diff --git a/src/data/img/Group-Typing.svg b/src/data/img/Group-Typing.svg
new file mode 100644
index 0000000..fe48879
--- /dev/null
+++ b/src/data/img/Group-Typing.svg
@@ -0,0 +1,24 @@
+
diff --git a/src/data/img/InfoDesktop.png b/src/data/img/InfoDesktop.png
new file mode 100644
index 0000000..0493fad
Binary files /dev/null and b/src/data/img/InfoDesktop.png differ
diff --git a/src/data/img/InfoMobile.png b/src/data/img/InfoMobile.png
new file mode 100644
index 0000000..0e81d43
Binary files /dev/null and b/src/data/img/InfoMobile.png differ
diff --git a/src/data/img/InicioDesktop.png b/src/data/img/InicioDesktop.png
new file mode 100644
index 0000000..8002cbf
Binary files /dev/null and b/src/data/img/InicioDesktop.png differ
diff --git a/src/data/img/InicioMobile.png b/src/data/img/InicioMobile.png
new file mode 100644
index 0000000..e7831a0
Binary files /dev/null and b/src/data/img/InicioMobile.png differ
diff --git a/src/data/img/OneRingFavicon.png b/src/data/img/OneRingFavicon.png
new file mode 100644
index 0000000..ae7fe94
Binary files /dev/null and b/src/data/img/OneRingFavicon.png differ
diff --git a/src/data/img/WireframeBaja.png b/src/data/img/WireframeBaja.png
new file mode 100644
index 0000000..e6f80f9
Binary files /dev/null and b/src/data/img/WireframeBaja.png differ
diff --git a/src/data/img/WireframeModal.jpg b/src/data/img/WireframeModal.jpg
new file mode 100644
index 0000000..95f8f31
Binary files /dev/null and b/src/data/img/WireframeModal.jpg differ
diff --git a/src/data/img/aragorn.jpg b/src/data/img/aragorn.jpg
new file mode 100644
index 0000000..a0d9e47
Binary files /dev/null and b/src/data/img/aragorn.jpg differ
diff --git a/src/data/img/arwen .jpg b/src/data/img/arwen .jpg
new file mode 100644
index 0000000..51502e9
Binary files /dev/null and b/src/data/img/arwen .jpg differ
diff --git a/src/data/img/balrog.jpeg b/src/data/img/balrog.jpeg
new file mode 100644
index 0000000..e508ca2
Binary files /dev/null and b/src/data/img/balrog.jpeg differ
diff --git a/src/data/img/bilbo_720.jpg b/src/data/img/bilbo_720.jpg
new file mode 100644
index 0000000..95585a3
Binary files /dev/null and b/src/data/img/bilbo_720.jpg differ
diff --git a/src/data/img/boca_de_sauron_720.jpg b/src/data/img/boca_de_sauron_720.jpg
new file mode 100644
index 0000000..b24e14a
Binary files /dev/null and b/src/data/img/boca_de_sauron_720.jpg differ
diff --git a/src/data/img/boromirdel.jpg b/src/data/img/boromirdel.jpg
new file mode 100644
index 0000000..89bcf79
Binary files /dev/null and b/src/data/img/boromirdel.jpg differ
diff --git a/src/data/img/chevron-left.svg b/src/data/img/chevron-left.svg
new file mode 100644
index 0000000..6241830
--- /dev/null
+++ b/src/data/img/chevron-left.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/data/img/denethor_720.jpg b/src/data/img/denethor_720.jpg
new file mode 100644
index 0000000..f46a3d2
Binary files /dev/null and b/src/data/img/denethor_720.jpg differ
diff --git a/src/data/img/elrond_720.jpg b/src/data/img/elrond_720.jpg
new file mode 100644
index 0000000..ccdcafd
Binary files /dev/null and b/src/data/img/elrond_720.jpg differ
diff --git a/src/data/img/eowyn_720.jpg b/src/data/img/eowyn_720.jpg
new file mode 100644
index 0000000..95df5c5
Binary files /dev/null and b/src/data/img/eowyn_720.jpg differ
diff --git a/src/data/img/error-image.png b/src/data/img/error-image.png
new file mode 100644
index 0000000..c6664f5
Binary files /dev/null and b/src/data/img/error-image.png differ
diff --git a/src/data/img/faramir_720.jpg b/src/data/img/faramir_720.jpg
new file mode 100644
index 0000000..9739cc6
Binary files /dev/null and b/src/data/img/faramir_720.jpg differ
diff --git a/src/data/img/fondo.jpg b/src/data/img/fondo.jpg
new file mode 100644
index 0000000..767420a
Binary files /dev/null and b/src/data/img/fondo.jpg differ
diff --git a/src/data/img/galadriel_720.jpg b/src/data/img/galadriel_720.jpg
new file mode 100644
index 0000000..e245251
Binary files /dev/null and b/src/data/img/galadriel_720.jpg differ
diff --git a/src/data/img/gandalf.jpg b/src/data/img/gandalf.jpg
new file mode 100644
index 0000000..8ed2efb
Binary files /dev/null and b/src/data/img/gandalf.jpg differ
diff --git a/src/data/img/gimli.jpg b/src/data/img/gimli.jpg
new file mode 100644
index 0000000..d214557
Binary files /dev/null and b/src/data/img/gimli.jpg differ
diff --git a/src/data/img/gollum.jpg b/src/data/img/gollum.jpg
new file mode 100644
index 0000000..3967185
Binary files /dev/null and b/src/data/img/gollum.jpg differ
diff --git a/src/data/img/legolas.jpg b/src/data/img/legolas.jpg
new file mode 100644
index 0000000..d203221
Binary files /dev/null and b/src/data/img/legolas.jpg differ
diff --git a/src/data/img/logo.png b/src/data/img/logo.png
new file mode 100644
index 0000000..ae7fe94
Binary files /dev/null and b/src/data/img/logo.png differ
diff --git a/src/data/img/lupa-buscar.svg b/src/data/img/lupa-buscar.svg
new file mode 100644
index 0000000..ec11eaf
--- /dev/null
+++ b/src/data/img/lupa-buscar.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/data/img/nazgul.jpg b/src/data/img/nazgul.jpg
new file mode 100644
index 0000000..dad10cf
Binary files /dev/null and b/src/data/img/nazgul.jpg differ
diff --git a/src/data/img/sam.jpg b/src/data/img/sam.jpg
new file mode 100644
index 0000000..a5c42b2
Binary files /dev/null and b/src/data/img/sam.jpg differ
diff --git a/src/data/img/saruman.jpg b/src/data/img/saruman.jpg
new file mode 100644
index 0000000..df38b07
Binary files /dev/null and b/src/data/img/saruman.jpg differ
diff --git a/src/data/img/sauron.jpg b/src/data/img/sauron.jpg
new file mode 100644
index 0000000..7b4577d
Binary files /dev/null and b/src/data/img/sauron.jpg differ
diff --git a/src/data/img/shadowfax.jpg b/src/data/img/shadowfax.jpg
new file mode 100644
index 0000000..a5817fa
Binary files /dev/null and b/src/data/img/shadowfax.jpg differ
diff --git a/src/data/img/shelob_720.jpg b/src/data/img/shelob_720.jpg
new file mode 100644
index 0000000..9406052
Binary files /dev/null and b/src/data/img/shelob_720.jpg differ
diff --git a/src/data/img/treebeard.jpg b/src/data/img/treebeard.jpg
new file mode 100644
index 0000000..51c091f
Binary files /dev/null and b/src/data/img/treebeard.jpg differ
diff --git a/src/data/img/wargos_720.jpg b/src/data/img/wargos_720.jpg
new file mode 100644
index 0000000..9364c0b
Binary files /dev/null and b/src/data/img/wargos_720.jpg differ
diff --git a/src/fonts/Inter/Inter-VariableFont_slnt,wght.ttf b/src/fonts/Inter/Inter-VariableFont_slnt,wght.ttf
new file mode 100644
index 0000000..e724708
Binary files /dev/null and b/src/fonts/Inter/Inter-VariableFont_slnt,wght.ttf differ
diff --git a/src/fonts/Inter/OFL.txt b/src/fonts/Inter/OFL.txt
new file mode 100644
index 0000000..d05ec4b
--- /dev/null
+++ b/src/fonts/Inter/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/src/fonts/Inter/README.txt b/src/fonts/Inter/README.txt
new file mode 100644
index 0000000..3078f19
--- /dev/null
+++ b/src/fonts/Inter/README.txt
@@ -0,0 +1,72 @@
+Inter Variable Font
+===================
+
+This download contains Inter as both a variable font and static fonts.
+
+Inter is a variable font with these axes:
+ slnt
+ wght
+
+This means all the styles are contained in a single file:
+ Inter-VariableFont_slnt,wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Inter:
+ static/Inter-Thin.ttf
+ static/Inter-ExtraLight.ttf
+ static/Inter-Light.ttf
+ static/Inter-Regular.ttf
+ static/Inter-Medium.ttf
+ static/Inter-SemiBold.ttf
+ static/Inter-Bold.ttf
+ static/Inter-ExtraBold.ttf
+ static/Inter-Black.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+ https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+ https://variablefonts.typenetwork.com
+ https://medium.com/variable-fonts
+
+In desktop apps
+
+ https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+ https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+ https://developers.google.com/fonts/docs/getting_started
+ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+ https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+ MacOS: https://support.apple.com/en-us/HT201749
+ Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+ Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+ https://developers.google.com/fonts/docs/android
+ https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.
diff --git a/src/fonts/Inter/static/Inter-Black.ttf b/src/fonts/Inter/static/Inter-Black.ttf
new file mode 100644
index 0000000..b27822b
Binary files /dev/null and b/src/fonts/Inter/static/Inter-Black.ttf differ
diff --git a/src/fonts/Inter/static/Inter-Bold.ttf b/src/fonts/Inter/static/Inter-Bold.ttf
new file mode 100644
index 0000000..fe23eeb
Binary files /dev/null and b/src/fonts/Inter/static/Inter-Bold.ttf differ
diff --git a/src/fonts/Inter/static/Inter-ExtraBold.ttf b/src/fonts/Inter/static/Inter-ExtraBold.ttf
new file mode 100644
index 0000000..874b1b0
Binary files /dev/null and b/src/fonts/Inter/static/Inter-ExtraBold.ttf differ
diff --git a/src/fonts/Inter/static/Inter-ExtraLight.ttf b/src/fonts/Inter/static/Inter-ExtraLight.ttf
new file mode 100644
index 0000000..c993e82
Binary files /dev/null and b/src/fonts/Inter/static/Inter-ExtraLight.ttf differ
diff --git a/src/fonts/Inter/static/Inter-Light.ttf b/src/fonts/Inter/static/Inter-Light.ttf
new file mode 100644
index 0000000..71188f5
Binary files /dev/null and b/src/fonts/Inter/static/Inter-Light.ttf differ
diff --git a/src/fonts/Inter/static/Inter-Medium.ttf b/src/fonts/Inter/static/Inter-Medium.ttf
new file mode 100644
index 0000000..a01f377
Binary files /dev/null and b/src/fonts/Inter/static/Inter-Medium.ttf differ
diff --git a/src/fonts/Inter/static/Inter-SemiBold.ttf b/src/fonts/Inter/static/Inter-SemiBold.ttf
new file mode 100644
index 0000000..ecc7041
Binary files /dev/null and b/src/fonts/Inter/static/Inter-SemiBold.ttf differ
diff --git a/src/fonts/Inter/static/Inter-Thin.ttf b/src/fonts/Inter/static/Inter-Thin.ttf
new file mode 100644
index 0000000..fe77243
Binary files /dev/null and b/src/fonts/Inter/static/Inter-Thin.ttf differ
diff --git a/src/index.html b/src/index.html
index fd6186f..1a0cae8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,11 +2,19 @@
- Dataverse Chat
-
+ El Chat de Los Anillos
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index a0e2d57..f75bcfb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,19 +1,30 @@
-// En este archivo definirás tus rutas e importarás los componentes que vas a renderizar.
+import {home} from "./views/Home.js";
+import {error} from './views/Error.js';
+import chatGrupal from "./views/ChatGrupal.js";
+import chatIndividual from "./views/ChatIndividual.js";
+import { setRootElement, setRoutes, onURLChange } from './router.js';
-/*
-import Example from './views/Example.js';
-
-Ejemplo de definición de rutas:
+const viewContainer = document.getElementById("root");
const routes = {
- "/": Example,
- ...
-}
-*/
+ "/": home,
+ "/error": error,
+ "/ChatGrupal": chatGrupal,
+ "/ChatIndividual": chatIndividual,
+
+};
+
+// Asignar las rutas y el elemento raíz dentro del evento DOMContentLoaded
+setRoutes(routes);
+setRootElement(viewContainer);
+
+// Definir el contenedor de la vista dentro del evento DOMContentLoaded
+document.addEventListener("DOMContentLoaded", () => {
+ onURLChange(window.location.pathname);
+});
+
+window.addEventListener("popstate", () => {
+ onURLChange(window.location);
+
+});
-/*
-TODO:
-1.- Definir rutas en router.
-2.- Pasar "root element" a router.
-3.- Invocar el router para renderizar la vista correcta.
-*/
\ No newline at end of file
diff --git a/src/lib/apiKey.js b/src/lib/apiKey.js
new file mode 100644
index 0000000..8819136
--- /dev/null
+++ b/src/lib/apiKey.js
@@ -0,0 +1,10 @@
+export const getApiKey = () => {
+ // Implementa el código para obtener la API KEY desde Local Storage
+ const apiKey = localStorage.getItem("apikey");
+ return apiKey;
+};
+
+export const setApiKey = (key) => {
+ // Implementa el código para guardar la API KEY en Local Storage
+ localStorage.setItem("apikey", key);
+};
\ No newline at end of file
diff --git a/src/lib/dataFunctions.js b/src/lib/dataFunctions.js
new file mode 100644
index 0000000..1b32922
--- /dev/null
+++ b/src/lib/dataFunctions.js
@@ -0,0 +1,78 @@
+// Lógica para la función "Filtrar"
+export const filterData = (data, filterBy, value) => {
+ let resultadoFiltro = []
+ resultadoFiltro = data.filter((element)=>{
+ return element.facts[filterBy] === value
+ })
+
+ return resultadoFiltro
+}
+
+export const filterData2 = (data, filterBy, value) => {
+ let resultadoFiltro2 = []
+ resultadoFiltro2 = data.filter((element)=>{
+
+ if(value.split(' ').length === 2){
+ const edad = value.split(' ');
+ return element.facts[filterBy] >= edad[0] && element.facts[filterBy] <= edad[1]
+ }if(value === '100'){
+ return element.facts[filterBy] <= value
+ }if(value === '2000'){
+ return element.facts[filterBy] >= value && element.facts[filterBy] <= 4000
+ }if(value === 'Desconocida'){
+ return element.facts[filterBy] === value
+ }
+ })
+
+ return resultadoFiltro2
+}
+
+//Lógica para la función "Ordenar"
+export const sortData = (data, sortBy, sortOrder) => {
+
+ // Verificar el tipo de orden especificado
+ if (sortOrder === 'asc') {
+
+ // Ordenar los datos de acuerdo a la propiedad especificada
+ return data.sort((a, b) => {
+ if (a[sortBy] < b[sortBy]) { // Compara las propiedades de los objetos 'a' y 'b'
+ return -1; // Retorna -1 si 'a' debe estar antes que 'b'
+ }
+ if (a[sortBy] > b[sortBy]) { // Compara las propiedades de los objetos 'a' y 'b'
+ return 1; // Retorna 1 si 'a' debe estar después que 'b'
+ }
+ return 0; // Retorna 0 si los elementos son iguales
+ });
+ }
+
+ // Si es orden descendente (Z - A)
+
+ // Ordenar los datos de acuerdo a la propiedad especificada y luego revertir el orden
+ if (sortOrder === 'desc') {
+ return data.sort((a, b) => {
+ if (a[sortBy] < b[sortBy]) { // Compara las propiedades de los objetos 'a' y 'b'
+ return 1; // Retorna 1 si 'a' debe estar antes que 'b' (inverso para orden descendente)
+ }
+ if (a[sortBy] > b[sortBy]) { // Compara las propiedades de los objetos 'a' y 'b'
+ return -1; // Retorna -1 si 'a' debe estar después que 'b' (inverso para orden descendente)
+ }
+ return 0; // Retorna 0 si los elementos son iguales
+ });
+ }
+}
+
+//Lógica para la función calcular
+export const computeStats = (data) => {
+
+ const personasConEdadConocida = data.filter(persona => typeof persona.facts.age === 'number');
+
+ if (personasConEdadConocida.length === 0) return 0;
+
+ const edades = personasConEdadConocida.map(persona => persona.facts.age);
+
+ const totalEdad = edades.reduce((acumulador, edad) => {
+ return acumulador + edad;
+ }, 0);
+
+ return Math.floor(totalEdad / personasConEdadConocida.length);
+}
\ No newline at end of file
diff --git a/src/lib/openAIApi.js b/src/lib/openAIApi.js
new file mode 100644
index 0000000..98f0b2c
--- /dev/null
+++ b/src/lib/openAIApi.js
@@ -0,0 +1,53 @@
+import { getApiKey } from "../lib/apiKey.js";
+
+export const communicateWithOpenAI = (messages, id) => {
+ const promises = [];
+ if (Array.isArray(id)) {
+ for (let i = 0; i < id.length; i++) {
+ const result = solicitude(id[i]);
+ promises.push(result);
+ }
+ } else {
+ const result = solicitude(id);
+ promises.push(result);
+ }
+ function solicitude(id) {
+ const OPENAI_API_KEY = getApiKey();
+ //console.log("API Key:", OPENAI_API_KEY); // Agregar esta línea para verificar la API Key
+ const data = {
+ model: "gpt-3.5-turbo",
+ messages: [
+ { role: "user", content: `${messages}` },
+ {
+ role: "system",
+ content: `Responde en primera persona como si fuera este personaje del Señor de los Anillos:${id}`,
+ },
+ ],
+ temperature: 0.7,
+ };
+ return fetch("https://api.openai.com/v1/chat/completions", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${OPENAI_API_KEY}`,
+ },
+ body: JSON.stringify(data),
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ return data.choices;
+ })
+ .catch((error) => {
+ //console.error("Error en la solicitud a OpenAI:", error); // Agregar esta línea para imprimir errores
+ throw error;
+ });
+ }
+ return Promise.all(promises)
+ .then((results) => {
+ return results;
+ })
+ .catch((error) => {
+ throw error;
+ });
+};
+
diff --git a/src/responsive.css b/src/responsive.css
new file mode 100644
index 0000000..70b2361
--- /dev/null
+++ b/src/responsive.css
@@ -0,0 +1,297 @@
+@media (max-width: 768px) {
+ /* Estilos para pantallas más pequeñas */
+ header {
+ height: 49px;
+ }
+
+ .logo {
+ width: 28px;
+ height: 27px;
+ margin-left: 9px;
+ margin-top: 15px;
+ }
+
+ h1 {
+ font-size: 13px;
+ font-weight: 500;
+ }
+
+ .hero {
+ height: 275px;
+ width: 100%;
+ background-size: cover;
+ background-position: center;
+ }
+
+ .hero h1 {
+ text-align: left;
+ font-size: 32px;
+ font-weight: 600;
+ margin-left: 16px;
+ margin-top: 232px;
+ margin-right: 16px;
+ margin-bottom: 16px;
+ }
+
+ .hero h2 {
+ text-align: left;
+ font-size: 15px;
+ font-weight: 400;
+ margin-left: 16px;
+ }
+
+ h2 {
+ font-size: 19px;
+ font-weight: 700;
+ text-align: left;
+ margin-left: 16px;
+ }
+
+ h3 {
+ text-align: left;
+ font-size: 15px;
+ font-weight: 400;
+ margin-left: 16px;
+ }
+
+ #BtnChatGrupal {
+ margin-left: 16px;
+ font-size: 15px;
+ font-weight: 600;
+ width: 343px;
+ height: 38px;
+ }
+
+ .linea {
+ width: 343px;
+ }
+
+ h4 {
+ font-weight: 600;
+ font-size: 19px;
+ text-align: center;
+ margin-left: 17px;
+ margin-right: 16px;
+ margin-top: 32px;
+ }
+
+ h5 {
+ text-align: center;
+ font-size: 15px;
+ font-weight: 400;
+ margin-left: 17px;
+ margin-right: 16px;
+ margin-bottom: 32px;
+ }
+
+ .barraBuscar::before {
+
+ left: 10px;
+ width: 16px;
+ height: 16px;
+ margin-left: 55px;
+ margin-top: 20px;
+ }
+
+ .barraBuscar input[type="search"] {
+ width: 343px;
+ height: 40px;
+ margin-top: 32px;
+ font-size: 15px;
+ font-weight: 400;
+ }
+
+ .filtros {
+ flex-direction: column;
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ .filtros select {
+ font-size: 15px;
+ font-weight: 400;
+ width: 342px;
+ height: 40px;
+ margin-left: 10px;
+ margin-right: 16px;
+ margin-bottom: 24px;
+ }
+
+ .empty-state {
+ font-size: 16px;
+ padding: 16px;
+ }
+
+ #limpiar {
+ width: 342px;
+ height: 38px;
+ font-weight: 600;
+ font-size: 15px;
+ margin-left: 10px;
+ margin-right: 16px;
+ margin-top: 24px;
+ margin-bottom: 12px;
+ }
+
+ .mostrar {
+ width: 343px;
+ height: 38px;
+ font-weight: 600;
+ font-size: 15px;
+ margin-left: 19px;
+ margin-right: 16px;
+ margin-top: 12px;
+ margin-bottom: 30px;
+ }
+
+ .conten-estadisticas {
+ font-size: 15px;
+ font-weight: 600;
+ margin: 20px auto; /* Centra el contenedor horizontalmente */
+ padding: 10px;
+ background-color: #242427; /* Asegúrate de tener el fondo para verificar la visualización */
+ border-radius: 24px;
+ }
+
+ .frase-edad {
+ font-size: 15px;
+ font-weight: 600;
+ }
+
+ .edad-promedio {
+ font-size: 56px;
+ font-weight: 500;
+ }
+
+ .años {
+ font-size: 19px;
+ font-weight: 400;
+ }
+
+ .modal-container-individual {
+ width: auto;
+ height: auto;
+ }
+
+ .info-modal-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .info-modal-content {
+ max-width: 100%;
+ max-height: 100%;
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ overflow-y: auto;
+ }
+
+ .info-modal-content img {
+ width: 100%;
+ height: auto;
+ margin-top: 0px;
+ }
+
+ .info-details {
+ margin-left: 16px;
+ font-size: 14px;
+ text-align: left;
+ }
+
+ .info-modal-content h2 {
+ font-size: 20px;
+ margin-top: 20px;
+ }
+
+ .info-modal-content h3 {
+ font-size: 18px;
+ padding-top: 10px;
+ }
+
+ .info-modal-content p {
+ margin-top: 20px;
+ }
+
+ .btn-close-modal {
+ margin-top: 0px;
+ margin-left: 52px;
+ border: none;
+ cursor: pointer;
+ margin-bottom: 10px;
+ margin-top: 20px;
+ }
+
+ .info-modal-content .btn-chat {
+ padding: 8px 16px;
+ width: 295px;
+ height: 38px;
+ border: none;
+ border-radius: 5px;
+ margin-left: 50px;
+ margin-top: 20px;
+ margin-bottom: 16px;
+ }
+
+ .message-input {
+ width: 239px;
+ height: 30px;
+ }
+
+ .button-Send {
+ width: auto;
+ height: 50px;
+ }
+
+ .chat-groupal .header-container h1 {
+ font-size: 15px;
+ margin-left: 40px;
+ margin-top: 60px;
+ }
+
+ .chat-individual .first-chat .character-name {
+ margin-left: 40px;
+ margin-top: 70px;
+ }
+
+ .overlay {
+ align-items: left;
+ text-align: left;
+ padding: 10px;
+ }
+
+ .overlay p {
+ font-size: 16px;
+ margin-bottom: 20px;
+ margin-left: 0; /* Elimina el margen izquierdo */
+ margin-bottom: 40px;
+ }
+
+ .overlay button {
+ width: 100%; /* Ajusta el ancho del botón para pantallas pequeñas */
+ max-width: 300px; /* Establece un ancho máximo */
+ height: auto; /* Ajusta la altura automáticamente */
+ margin-left: 0; /* Elimina el margen izquierdo */
+ margin-bottom: 600px; /* Ajusta el margen inferior */
+ }
+
+ .overlay a {
+ font-size: 19px; /* Ajusta el tamaño de fuente para pantallas pequeñas */
+ }
+
+ .error-image {
+ width: 100%;
+ height: 1200px;
+ display: block;
+ }
+
+ .empty-state{
+ font-size: 19px;
+ text-align: center;
+ margin-bottom: 50px;
+ }
+
+}
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 0000000..c3f526c
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,53 @@
+let ROUTES = {};
+let rootElement = "";
+
+export const setRootElement= (el) => {
+ rootElement = el;
+};
+
+
+export const setRoutes = (routes) => {
+ if (typeof routes !== 'object') {
+ throw new Error("Las rutas deben ser un objeto.");
+ }
+ if (!routes['/error']) {
+ throw new Error("Debes definir una ruta /error en tus rutas.");
+ }
+ ROUTES = routes;
+};
+
+
+const queryStringToObject = (queryString) => {
+ const params = new URLSearchParams (queryString);
+ const object = Object.fromEntries(params);
+
+ return object;
+}
+
+
+const renderView = (pathname, props = {}) => {
+ rootElement.innerHTML = "";
+ const view = ROUTES[pathname] || ROUTES["/error"];
+ const viewElement = view(props);
+
+ rootElement.appendChild(viewElement);
+};
+
+
+export const navigateTo = (pathname, props = {}) => {
+ const queryString = Object.keys(props)
+ .map((key) => `${key}=${props[key]}`)
+ .join("&");
+
+ const fullPath = `${pathname}?${queryString}`;
+ window.history.pushState({}, "", fullPath);
+
+ renderView(pathname, props);
+};
+
+
+export const onURLChange = (pathname) => {
+ const searchURL = window.location.search;
+ const objectProps = queryStringToObject(searchURL);
+ renderView(pathname, objectProps);
+};
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..372bd7a
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,987 @@
+@font-face {
+ font-family: 'Inter', sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ src: url('../fonts/static/Inter-Regular.ttf') format('truetype');
+ /* Repite este bloque para cada variante de la fuente que desees utilizar */
+}
+
+
+body {
+ background-color: #151517;
+ background-attachment: fixed;
+ width: 100%;
+ height: 100%;
+ font-family: 'Inter', sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+header {
+ background-color: #000000;
+ height: 85px;
+ display: flex;
+ flex-direction: row;
+ position: sticky;
+ align-items: center;
+
+}
+
+.logo {
+ width: 38px;
+ height: 37px;
+ margin-top: 24px;
+ margin-left: 80px;
+ margin-right: 24px;
+ margin-bottom: 24px;
+}
+
+h1 {
+ color: #ffffff;
+ font-size: 19px;
+ font-weight: 500;
+ margin-left: 24px;
+ align-items: center;
+ display: flex;
+
+}
+
+.hero {
+ background-image: url('data/img/fondo.jpg');
+ background-size: cover;
+ background-position: center;
+ width: 100%;
+ height: 626px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ color: white;
+ position: relative;
+ overflow: hidden;
+}
+
+.hero:after {
+ content: '';
+ position: absolute;
+ bottom: -100px; /* Altura del difuminado */
+ left: 0;
+ width: 100%;
+ height: 100px; /* Altura del difuminado */
+ background-image: linear-gradient(to bottom, rgba(21, 21, 23, 0) 0%, rgba(21, 21, 23, 0.8) 100%);
+}
+
+
+.hero h1 {
+ text-align: left;
+ font-size: 56px;
+ font-weight: 600;
+ margin-left: 80px;
+ margin-top: 337px;
+ margin-bottom: 12px;
+}
+
+.hero h2 {
+ text-align: left;
+ font-size: 19px;
+ font-weight: 300;
+ margin-left: 80px;
+ margin-top: 12px;
+ margin-bottom: 232px;
+ color: #FFFFFF;
+}
+
+h2 {
+ text-align: left;
+ color: #FFFFFF;
+ font-size: 30px;
+ font-weight: 700;
+ margin-left: 80px;
+ margin-top: 56px;
+ margin-bottom: 8px;
+}
+
+h3 {
+ text-align: left;
+ color: #C1C1C1;
+ font-size: 15px;
+ font-weight: 400;
+ margin-left: 80px;
+ margin-top: 8px;
+ text-align: left;
+}
+
+#BtnChatGrupal {
+ margin-left: 80px;
+ background-color: #EDA83F;
+ color: #28242B;
+ font-size: 15px;
+ font-weight: 500;
+ border-radius: 4px;
+ border: none;
+ margin-top: 32px;
+ padding: 12px 46px 12px 46px;
+ cursor: pointer;
+}
+
+#BtnChatGrupal:hover {
+ background-color: #CC871F;
+}
+
+/* Estilos para el modal del Chat Grupal */
+.modal-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 999;
+}
+
+.modal-content {
+ background-color: #FFFFFF;
+ padding: 20px;
+ border-radius: 5px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ max-width: 400px;
+ width: 100%;
+ font-size: 16px;
+}
+
+#apiKeyInput {
+ margin-top: 16px;
+ width: 210px;
+}
+
+.cerrarX {
+ float: right;
+ cursor: pointer;
+ font-size: 20px;
+ color: #0E1E2F;
+}
+
+.cerrarX:hover {
+ color: #EDA83F;
+}
+
+/* Estilos opcionales para el botón "Enviar" del modal del Chat Grupal */
+#submitApiKeyBtn {
+ margin-top: 10px;
+ padding: 8px 16px;
+ background-color: #EDA83F;
+ color: #28242B;
+ font-weight: 600px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ float: right;
+}
+
+#submitApiKeyBtn:hover {
+ background-color: #CC871F;
+}
+
+.linea {
+ border-top: 1px solid #454545; /* Estilo de la línea (1px de grosor, sólida y color negro) */
+ margin-top: 40px;
+ margin-bottom: 40px;
+ width: 1280px;
+ display: flex;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+h4 {
+ text-align: center;
+ color: #ffffff;
+ font-size: 19px;
+ font-weight: 600;
+ margin-top: 80px;
+ margin-left: 297px;
+ margin-right: 297px;
+ margin-bottom: 8px;
+}
+
+h5 {
+ text-align: center;
+ color: #C1C1C1;
+ font-size: 15px;
+ font-weight: 400;
+ margin-top: 8px;
+ margin-left: 297px;
+ margin-right: 297px;
+}
+
+.barraBuscar {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.barraBuscar::before {
+ content: url('data/img/lupa-buscar.svg');
+ position: absolute;
+ left: 10px;
+ width: 16px;
+ height: 16px;
+ margin-left: 205px;
+ margin-top: 20px;
+ }
+
+.barraBuscar input[type="search"] {
+ width: 1068px;
+ height: 40px;
+ margin-top: 32px;
+ border-radius: 5px;
+ border: 1px solid #8C8D91;
+ background-color: #242427;
+ color: #E7E9EB;
+ padding-left: 44px;
+ margin-bottom: 12px;
+ font-size: 15px;
+ font-weight: 400;
+ cursor: pointer;
+ }
+
+.filtros {
+ margin-top: 12px;
+ margin-left: 15px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 20px;
+ padding-left: 164px;
+ padding-right: 204px;
+}
+
+.filtros select {
+ background-color: #242427;
+ color: #E7E9EB;
+ width: 290px;
+ height: 40px;
+ margin: 15px;
+ padding: 10px;
+ border-radius: 5px;
+ font-size: 15px;
+ font-weight: 400;
+ flex-wrap: wrap;
+ cursor: pointer;
+ margin-left: 24px;
+ margin-right: 24px;
+}
+
+.empty-state{
+ color: white;
+ font-weight: normal;
+ font-size: 19px;
+ text-align: center;
+ margin-bottom: 50px;
+}
+
+ #limpiar {
+ background-color: #FFFFFF;
+ color: #0E1E2F;
+ width: 127px;
+ height: 40px;
+ font-size: 14px;
+ font-weight: 500;
+ padding: 10px 15px 10px 15px;
+ margin-left: 24px;
+ cursor: pointer;
+ border-radius: 5px;
+ border: none;
+}
+
+#limpiar:hover{
+ border: 1px solid #EDA83F;
+}
+
+.contenedor-botones {
+ display: flex;
+ justify-content: center;
+}
+
+.mostrar{
+ background-color: #EDA83F;
+ color: #000000;
+ font-size: 15px;
+ font-weight: 500;
+ width: 269px;
+ height: 38px;
+ border-radius: 5px;
+ border: none;
+ margin-top: 12px;
+ margin-bottom: 30px;
+ cursor: pointer;
+}
+
+.mostrar:hover{
+ background-color: #CC871F;
+}
+
+.conten-estadisticas {
+ margin-left: 549px;
+ width: 343px;
+ border-radius: 24px;
+ color: #ffffff;
+ font-size: 15px;
+ font-weight: 600;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ background-color: #242427;
+ border: 2px;
+ opacity: 0;
+ visibility: hidden;
+ height: 0;
+ overflow: hidden;
+ margin-bottom: 0;
+ padding: 10px; /* Agrega un poco de espacio interior */
+}
+
+.conten-estadisticas.visible {
+ opacity: 1;
+ visibility: visible;
+ height: auto; /* Ajusta automáticamente la altura */
+ margin-bottom: 20px; /* Ajusta el margen según sea necesario */
+}
+
+.frase-edad {
+ font-size: 15px;
+ font-weight: 600;
+ margin-left: 16px;
+}
+
+.edad-promedio {
+ color: #EDA83F;
+ font-size: 56px;
+ font-weight: 500;
+ margin-left: 16px;
+}
+.años {
+ font-size: 19px;
+ font-weight: 400;
+ margin-left: 16px;
+}
+
+#root {
+ overflow: hidden; /* Clear float */
+}
+
+.item {
+ display: flex;
+ width: 304px;
+ height: 525px;
+ background: #242427;
+ border-radius: 24px;
+ margin-top: 50px;
+ flex-direction: column;
+ justify-content: left;
+ align-items: left;
+ margin-right: 1.5rem; /* Ajusta el margen derecho para separar más los elementos */
+ margin-bottom: 2rem;
+ text-align: left;
+ float: left; /* Hace que los elementos floten a la izquierda */
+ color: #ffffff;
+ box-sizing: border-box;
+ transition: box-shadow 0.5s ease-in-out; /* Agrega transición suave al cambio de sombra */
+ overflow: hidden; /* Evita que el contenido desborde del contenedor */
+}
+
+.item:hover{
+ box-shadow: 0 0 0 2px #C1C1C1; /* Agrega una sombra al hover sin afectar el tamaño */
+}
+
+.item h3 {
+ font-size: 23px;
+ margin: 12px;
+ padding-left: 16px;
+}
+
+.item p {
+ color: #EDA83F;
+ font-size: 17px;
+ text-align: left;
+ padding-left: 16px;
+}
+
+.race-color,
+.age-color,
+.height-color,
+.year-color {
+ color: #C1C1C1;
+ font-size: 13px;
+ padding-left: 8px;
+ padding-bottom: 8px;
+}
+
+.item h4 {
+ color: #FFFFFF;
+ font-size: 15px;
+ margin: 8px 0;
+ padding-left: 16px;
+ text-align: left;
+}
+
+.item img {
+ width: 304px;
+ height: 245px;
+ border-radius: 24px 24px 0 0;
+}
+
+button.Info {
+ width: 100px;
+ height: 40px;
+ background-color: #FFFFFF;
+ color: #0E1E2F;
+ font-size: 15px;
+ font-weight: 600;
+ border-radius: 5px;
+ border: none;
+ margin-top: 24px;
+ margin-bottom: 24px;
+ padding: 10px 20px 10px 20px;
+ cursor: pointer;
+ margin-left: 20px;
+}
+
+button.Info:hover {
+ border: solid 1px #EDA83F;
+ background-color: #FAFAFA;
+}
+
+.ChatIndividual {
+ width: 147px;
+ height: 38px;
+ background-color: #EDA83F;
+ color: #28242B;
+ font-size: 15px;
+ font-weight: 600;
+ border-radius: 5px;
+ border: none;
+ margin-top: 24px;
+ margin-bottom: 24px;
+ padding: 10px 20px 10px 20px;
+ cursor: pointer;
+ margin-left: 20px;
+}
+
+.ChatIndividual:hover {
+ background-color: #CC871F;
+}
+
+/* Estilos para el modal del Chat Individual */
+.modal-container-individual {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 999;
+}
+
+.modal-content-individual {
+ background-color: #FFFFFF;
+ padding: 20px;
+ border-radius: 5px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ max-width: 400px;
+ width: 100%;
+ font-size: 16px;
+}
+
+#individualApiKeyInput {
+ margin-top: 8px;
+ width: 210px;
+}
+
+.close-btn {
+ float: right;
+ cursor: pointer;
+ font-size: 20px;
+ color: #0E1E2F;
+}
+
+.close-btn:hover {
+ color: #EDA83F;
+}
+
+/* Estilos opcionales para el botón "Enviar" del modal del Chat Individual */
+#submitIndividualApiKeyBtn {
+ margin-top: 10px;
+ padding: 8px 16px;
+ background-color: #EDA83F;
+ color: #28242B;
+ font-weight: 600px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ float: right;
+}
+
+#submitIndividualApiKeyBtn:hover {
+ background-color: #CC871F;
+}
+
+.footerDetails {
+ background-color: #242427;
+ height: 136px;
+ display: flex;
+ text-align: left;
+}
+
+.details strong {
+ color: #FFFFFF;
+}
+
+.details {
+ color: #C1C1C1;
+ margin-top: 12px;
+ margin-left: 80px;
+ font-size: 13px;
+ font-weight: 500;
+}
+
+/* Ajuste de espacios entre líneas */
+.details:nth-child(2),
+.details:nth-child(3),
+.details:nth-child(4) {
+ margin-top: 6px; /* Espacio más estrecho entre líneas */
+}
+
+/* Espacio desde el borde superior del footer */
+.details:first-child {
+ margin-top: 12px;
+}
+
+/* Estilos para el contenedor del modal para el botón Ver Info*/
+.info-modal-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 9999;
+ display: grid;
+ place-items: center;
+ }
+
+ /* Estilos para el contenido del modal */
+ .info-modal-content {
+ position: relative;
+ background-color: #242427;
+ padding: 20px;
+ border-radius: 24px;
+ max-width: 846px;
+ max-height: 571px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ align-items: center;
+ }
+
+ /* Estilos para la imagen dentro del modal */
+ .info-modal-content img {
+ width: 100%;
+ height: 100%;
+ border-radius: 8px;
+ grid-column: 1; /* Asegura que la imagen esté en la primera columna */
+ grid-row: 1; /* Asegura que la imagen ocupe toda la fila */
+ }
+
+ .info-details {
+ color: #FFFFFF;
+ margin-left: 52px;
+ font-size: 15px;
+ }
+
+ .info-modal-content h2{
+ font-size: 23px;
+ font-weight: 700;
+ margin-top: 56px;
+ margin-left: 2px;
+ color: #FFFFFF;
+ }
+
+ .info-modal-content h3{
+ font-size: 19px;
+ font-weight: 500;
+ padding-top: 4px;
+ margin-left: 2px;
+ color: #EDA83F;
+ }
+
+ .info-modal-content p {
+ color: #C1C1C1;
+ font-size: 14px;
+ font-weight: 400;
+ margin-top: 50px;
+ }
+
+ .info-modal-content .race-color,
+ .info-modal-content .age-color,
+ .info-modal-content .height-color,
+ .info-modal-content .year-color {
+ color: #C1C1C1;
+ font-size: 14px;
+ font-weight: 400;
+ margin-top: 50px;
+ line-height: 1.8em;
+ }
+
+ /* Estilos para el botón de cerrar */
+ .info-modal-content .close-btn {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ cursor: pointer;
+ color: #fafefa;
+ }
+
+ .info-modal-content .close-btn:hover {
+ color: #CC871F;
+ }
+
+ /* Estilos para los botones */
+ .info-modal-content .btn-chat {
+ padding: 8px 16px;
+ background-color: #EDA83F;
+ color: #28242B;
+ width: 125px;
+ height: 38px;
+ border: none;
+ border-radius: 5px;
+ font-size: 15px;
+ font-weight: 600;
+ cursor: pointer;
+ margin-left: 50px;
+ margin-top: 38px;
+ }
+
+ .btn-close-modal {
+ background-color: #242427;
+ color: #FFFFFF;
+ font-size: 13px;
+ font-weight: 600;
+ margin-left: 52px;
+ border: none;
+ cursor: pointer;
+ }
+
+ .btn-close-modal:hover {
+ text-decoration: underline;
+
+ }
+
+ .btn-chat:hover {
+ background-color: #CC871F;
+ }
+
+/* Estilos comunes para ambos chats */
+.flex-Input {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ margin-top: 10px;
+}
+
+.message-input {
+ flex: 1;
+ padding: 10px;
+ border: 1px solid #8C8D91;
+ background-color: #28242B;
+ border-radius: 5px;
+ margin-right: 10px;
+ color: #FFFFFF;
+ font-size: 15px;
+}
+
+.message-input::placeholder {
+ color: #FFFFFF;
+}
+
+.button-Send {
+ padding: 10px 15px;
+ border: none;
+ background-color: #EDA83F;
+ font-size: 15px;
+ font-weight: 600;
+ color: #28242B;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.button-Send:hover {
+ background-color: #CC871F;
+}
+
+/* Estilos para mensajes */
+.user-message,
+.ia-message,
+.error-message {
+ margin-bottom: 10px;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ justify-content: flex-start;
+}
+
+.user-message {
+ justify-content: flex-end;
+}
+
+.user-message .message-bubble,
+ .ia-message .message-bubble,
+ .error-message .message-bubble {
+ padding: 10px;
+ border-radius: 10px;
+ max-width: 60%;
+ border-radius: 10px 10px 0 10px;
+ }
+
+.user-message .message-bubble {
+ background-color: #724500;
+ color: #FFFFFF;
+ font-size: 15px;
+ font-weight: 400;
+}
+
+.ia-message .message-bubble {
+ background-color: #242427;
+ color: #FFFFFF;
+ font-size: 15px;
+ font-weight: 400;
+ border-radius: 10px 10px 10px 0;
+}
+
+.error-message .message-bubble {
+ background-color: #F0932B;
+}
+
+.character-image {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ margin-right: 10px;
+ border: 1px solid #FFFFFF;
+}
+
+.writing-container {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+ color: #FFFFFF;
+}
+
+.writing-container img {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ margin-right: 10px;
+ border: 1px solid #FFFFFF;
+}
+
+.writing {
+ font-style: italic;
+}
+
+/* Estilos específicos para el chat individual */
+.chat-body.chat-individual {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ max-width: 800px; /* Limita el ancho máximo para mejorar la legibilidad */
+ height: 100%;
+ padding: 10px;
+ }
+
+.chat-individual .first-chat {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ margin-bottom: 10px;
+}
+
+.chat-individual .first-chat .character-name {
+ font-size: 19px;
+ font-weight: 600;
+ color: #FFFFFF;
+ margin-left: 351px;
+ margin-top: 50px;
+}
+
+.chat-individual #back-home {
+ cursor: pointer;
+}
+
+/* Estilos específicos para el chat grupal */
+.chat-body.chat-groupal{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ max-width: 800px; /* Limita el ancho máximo para mejorar la legibilidad */
+ height: 100%;
+ padding: 10px;
+}
+
+/* Nuevo estilo para el contenedor del encabezado */
+.header-container {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ margin-bottom: 10px;
+}
+
+.chat-groupal .header-container {
+ display: flex;
+ align-items: center;
+}
+
+.chat-groupal .header-container h1 {
+ color: #FFFFFF;
+ font-size: 19px;
+ font-weight: 600;
+ margin-left: 230px;
+ margin-top: 50px;
+}
+
+.back-button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ color: #F0932B;
+ margin-top: 50px;
+ }
+
+ .back-button img {
+ width: 20px;
+ height: 20px;
+}
+
+.input-Container{
+ width: 100%;
+ max-width: 850px; /* Limita el ancho máximo para mejorar la legibilidad */
+ height: 100%;
+}
+
+.message-input{
+ width: 80%;
+ margin: 20px;
+}
+
+.imageCharacter{
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ margin-right: 10px;
+ border: 1px solid #FFFFFF;
+}
+
+.response-message {
+ display: flex;
+ align-items: flex-start;
+ margin-bottom: 10px;
+ width: 100%;
+}
+
+.message-text-container {
+ background-color: #242427;
+ color: #FFFFFF;
+ font-size: 15px;
+ font-weight: 400;
+ padding: 10px;
+ border-radius: 10px 10px 10px 0;
+ max-width: 60%;
+ }
+
+ .user-message-container {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 10px;
+ width: 100%;
+ }
+
+ .user-message-container .message-bubble {
+ background-color: #724500;
+ color: #FFFFFF;
+ font-size: 15px;
+ font-weight: 400;
+ padding: 10px;
+ border-radius: 10px;
+ max-width: 60%;
+ }
+
+
+/*Estilos de la página Not Found */
+.not-found {
+ position: relative;
+ width: 100%;
+ height: 100vh;
+ }
+
+ .overlay {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ flex-direction: column; /* Cambia la dirección de distribución a vertical */
+ align-items: flex-start; /* Centra horizontalmente los elementos */
+ padding: 20px;
+ width: 100%;
+ color: white;
+ z-index: 1;
+ }
+
+ .overlay p {
+ font-size: 19px;
+ margin-bottom: 20px;
+ margin-left: 350px;
+ }
+
+ .overlay button {
+ padding: 10px 20px;
+ font-size: 15px;
+ font-weight: 600;
+ border: none;
+ background-color: #CC871F;
+ color: #28242B;
+ border-radius: 5px;
+ cursor: pointer;
+ width: 147px;
+ height: 38px;
+ margin-left: 350px;
+ margin-bottom: 200px;
+ }
+
+ .overlay a{
+ color: #CC871F;
+ text-decoration: underline;
+ font-weight: bold;
+ }
+
+ .error-image {
+ width: 100%;
+ height: auto;
+ display: block;
+ }
+
+
+ #button-goHome:hover {
+ background-color: #CC871F;
+ }
+
diff --git a/src/vercel.json b/src/vercel.json
new file mode 100644
index 0000000..8934be6
--- /dev/null
+++ b/src/vercel.json
@@ -0,0 +1,8 @@
+{
+ "rewrites": [
+ {"source": "/(.*)", "destination": "/"}
+ ]
+}
+
+
+
\ No newline at end of file
diff --git a/src/view.js b/src/view.js
new file mode 100644
index 0000000..ce37d5b
--- /dev/null
+++ b/src/view.js
@@ -0,0 +1,145 @@
+import { navigateTo } from "../router.js";
+
+export const renderItems = (data) => {
+ const ulElement = document.createElement('ul');
+
+ data.forEach(item => {
+ const liElement = document.createElement('li');
+ const liImg = document.createElement('img');
+ const liName = document.createElement('h3');
+ const liShortDescription = document.createElement('p');
+ const liDetails = document.createElement('h4');
+ const liInfo = document.createElement('button');
+ liInfo.classList.add('Info');
+ const liChat = document.createElement('button');
+ liChat.classList.add('ChatIndividual');
+
+ liElement.classList.add("item");
+
+ liImg.src = item.imageUrl;
+ liName.textContent = item.name;
+ liShortDescription.textContent = item.shortDescription;
+ const combinedDetails = `Raza:${item.facts.race}
+ Edad:${item.facts.age}
+ Estatura:${item.facts.height}
+ Año de nacimiento:${item.facts.yearOfBirth}`;
+ liDetails.innerHTML = combinedDetails;
+ liInfo.textContent = "Ver Info";
+ liChat.textContent = "Chatear";
+
+ liElement.setAttribute("itemtype", "actors");
+ liElement.setAttribute("itemscope", "");
+ liName.setAttribute("itemprop", "name");
+ liShortDescription.setAttribute("itemprop", "description");
+ liDetails.setAttribute("itemprop", "details");
+ liInfo.setAttribute("itemprop", "details");
+ liChat.setAttribute("itemprop", "details");
+
+ const buttonContainer = document.createElement('div');
+ buttonContainer.classList.add('item-buttons-container');
+ buttonContainer.appendChild(liInfo);
+ buttonContainer.appendChild(liChat);
+
+ liElement.appendChild(liImg);
+ liElement.appendChild(liName);
+ liElement.appendChild(liShortDescription);
+ liElement.appendChild(liDetails);
+ liElement.appendChild(buttonContainer);
+ ulElement.appendChild(liElement);
+
+ liInfo.addEventListener('click', () => {
+ const infoModalContainer = document.createElement('div');
+ infoModalContainer.classList.add('info-modal-container');
+
+ const infoModalContent = document.createElement('div');
+ infoModalContent.classList.add('info-modal-content');
+
+ infoModalContent.innerHTML = `
+ ×
+
+
+
${item.name}
+
${item.shortDescription}
+ Raza:${item.facts.race}
+ Edad:${item.facts.age}
+ Estatura:${item.facts.height}
+ Año de nacimiento:${item.facts.yearOfBirth}
+
+ Ingresa tu API KEY y forja amistades en esta épica conversación.
+
+
+
+ `;
+
+ modalContainer.appendChild(modalContent);
+ document.body.appendChild(modalContainer);
+
+ const apiKeyInput = modalContent.querySelector('#apiKeyInput');
+ const closeBtn = modalContent.querySelector('.cerrarX');
+
+ closeBtn.addEventListener('click', () => {
+ closeModal(modalContainer);
+ });
+
+ const submitBtn = modalContent.querySelector('#submitApiKeyBtn');
+ submitBtn.addEventListener('click', () => {
+ const apiKeyValue = apiKeyInput.value;
+ if (apiKeyValue === "") {
+ alert("Debes ingresar una ApiKey válida");
+ } else {
+ setApiKey(apiKeyValue);
+ closeModal(modalContainer);
+ modalShown = true; // Set modalShown to true after API key is set
+ }
+ });
+
+ modalContainer.addEventListener('click', (e) => {
+ if (e.target === modalContainer) {
+ closeModal(modalContainer);
+ }
+ });
+ }
+};
+
+const closeModal = (modalContainer) => {
+ if (modalContainer) {
+ modalContainer.remove();
+ }
+};
+
+const chatGroup = () => {
+ const container = document.createElement("div");
+ container.classList.add("chat-body", "chat-groupal");
+
+ // Crear un contenedor para el botón de regresar y el título
+ const headerContainer = document.createElement("div");
+ headerContainer.classList.add("header-container");
+
+ const backButton = document.createElement("button");
+ const backButtonImage = document.createElement("img");
+ backButtonImage.src = "data/img/chevron-left.svg";
+ backButton.appendChild(backButtonImage);
+ backButton.classList.add("back-button");
+ headerContainer.appendChild(backButton);
+
+ const title = document.createElement("h1");
+ title.textContent = "Chismorreos de la Tierra Media";
+ headerContainer.appendChild(title);
+
+ container.appendChild(headerContainer);
+
+ backButton.addEventListener("click", () => {
+ navigateTo("/");
+ });
+
+ // Añadir línea decorativa
+ const line = document.createElement("div");
+ line.innerHTML = `
+
+ `;
+ container.appendChild(line);
+
+
+ const idCharacter = [];
+
+ for (let i = 0; i < data.length; i++) {
+ idCharacter.push(data[i].id);
+ }
+
+ const chatContainer = document.createElement("div");
+ chatContainer.classList.add("chat-container");
+ container.appendChild(chatContainer);
+
+ // Añadir línea decorativa2
+ const line2 = document.createElement("div");
+ line2.innerHTML = `
+
+ `;
+ container.appendChild(line2);
+
+ const inputContainer = document.createElement("form");
+ inputContainer.classList.add("input-Container");
+ container.appendChild(inputContainer);
+
+ const inputText = document.createElement("input");
+ inputText.setAttribute("type", "text");
+ inputText.setAttribute("placeholder", "Escribe un mensaje...");
+ inputText.classList.add("message-input");
+ inputContainer.appendChild(inputText);
+
+ const buttonSend = document.createElement("button");
+ buttonSend.textContent = "Enviar";
+ buttonSend.classList.add("button-Send");
+
+ inputContainer.appendChild(buttonSend);
+
+ // Check if API Key is set, if not show modal
+ if (!getApiKey()) {
+ showModal();
+ }
+
+ buttonSend.addEventListener("click", async (e) => {
+ e.preventDefault();
+
+ // Check if API Key is set, if not show modal
+ if (!getApiKey()) {
+ showModal();
+ return;
+ }
+
+ const userMessageContainer = document.createElement("div");
+ userMessageContainer.classList.add("user-message-container");
+
+ const userMessageBubble = document.createElement("div");
+ userMessageBubble.classList.add("message-bubble");
+
+ const userMessageText = document.createElement("p");
+ userMessageText.textContent = inputText.value;
+
+ userMessageBubble.appendChild(userMessageText);
+ userMessageContainer.appendChild(userMessageBubble);
+ chatContainer.appendChild(userMessageContainer);
+
+ const userMessage = inputText.value;
+ inputText.value = "";
+
+ // Crear el contenedor para el texto y la imagen
+ const writingContainer = document.createElement("div");
+ writingContainer.classList.add("writing-container");
+
+ const writing = document.createElement("p");
+ writing.classList.add("writing");
+ writing.textContent = "24 personas de la Comarca están escribiendo...";
+
+ // Crear el elemento de imagen de chat de personas escribiendo
+ const writingImage = document.createElement("img");
+ writingImage.src = "/data/img/Group-Typing.svg";
+ writingImage.style.border = "none";
+ writingImage.style.width = "90px";
+ writingImage.style.height = "90px";
+
+ writingImage.alt = "Imagen de personas escribiendo";
+
+ // Añadir la imagen y el texto al contenedor
+ writingContainer.appendChild(writingImage);
+ writingContainer.appendChild(writing);
+
+ // Añadir el contenedor al chatContainer
+ chatContainer.appendChild(writingContainer);
+
+ try {
+ const apiKey = getApiKey();
+ const respuesta = await communicateWithOpenAI(userMessage, idCharacter, apiKey);
+
+ chatContainer.removeChild(writingContainer);
+
+ respuesta.forEach((elemento, i) => {
+ const messageContainer = document.createElement("div");
+ messageContainer.classList.add("response-message");
+
+ // Imagen del personaje
+ const characterImage = document.createElement("img");
+ characterImage.classList.add("imageCharacter");
+ characterImage.src = data[i].imageUrl; // URL de la imagen del personaje
+ characterImage.alt = data[i].name; // Nombre del personaje
+
+ // Contenedor para el texto del mensaje
+ const messageTextContainer = document.createElement("div");
+ messageTextContainer.classList.add("message-text-container");
+
+ // Texto del mensaje de respuesta
+ const messageText = document.createElement("p");
+ messageText.innerHTML = `${data[i].name}: ${elemento[0].message.content}`;
+
+ // Agregar el texto del mensaje al contenedor de texto
+ messageTextContainer.appendChild(messageText);
+
+ // Agregar la imagen del personaje y el contenedor de texto al contenedor principal del mensaje
+ messageContainer.appendChild(characterImage);
+ messageContainer.appendChild(messageTextContainer);
+
+ // Agregar el contenedor del mensaje al contenedor principal del chat
+ chatContainer.appendChild(messageContainer);
+ });
+
+ } catch (error) {
+ chatContainer.removeChild(writingContainer);
+
+ const errorDiv = document.createElement("div");
+ errorDiv.classList.add("error-message");
+ const messageBubblep = document.createElement("p");
+ messageBubblep.textContent =
+ "Habla, amigo y entra... surgió un problema, por favor revisa tu Api Key para acceder";
+ errorDiv.appendChild(messageBubblep);
+ chatContainer.appendChild(errorDiv);
+ inputText.value = "";
+ }
+
+ chatContainer.style.overflowY = "auto";
+ });
+
+ return container;
+};
+
+export default chatGroup;
\ No newline at end of file
diff --git a/src/views/ChatIndividual.js b/src/views/ChatIndividual.js
new file mode 100644
index 0000000..c03a6a3
--- /dev/null
+++ b/src/views/ChatIndividual.js
@@ -0,0 +1,148 @@
+import { data } from "../data/dataset.js";
+import { communicateWithOpenAI } from "../lib/openAIApi.js";
+import { navigateTo } from "../router.js";
+
+//Definición de chatIndividual
+const ChatIndividual = (props) => {
+
+ //Selección del Personaje
+ const characterId = props.id;
+ const character = data.find((character) => character.id === characterId);
+
+ //Creación de la Interfaz de Chat
+ const chat = document.createElement("div");
+ chat.classList.add("chat-body", "chat-individual");
+ chat.innerHTML = `
+
+
+
+
+
${character.name}
+
+
+
+
+
+
+
+
+ `;
+
+ //Navegación
+ const backButton = chat.querySelector("#back-home");
+ backButton.addEventListener("click", () => {
+ navigateTo("/");
+ });
+
+ //Referencias a Elementos del Chat
+ const chatContainer = chat.querySelector("#text-container");
+ const sendMessage = chat.querySelector("#send-message");
+ const inputMessage = chat.querySelector("#input-message");
+
+ //Funciones para Crear Mensajes
+ function createUserMessage(messageContent) {
+ const userMessageDiv = document.createElement("div");
+ userMessageDiv.classList.add("user-message");
+ const messageBubble = document.createElement("div");
+ messageBubble.classList.add("message-bubble");
+ messageBubble.textContent = messageContent;
+ userMessageDiv.appendChild(messageBubble);
+ return userMessageDiv;
+ }
+
+ //Crea un elemento para el mensaje de la IA
+ function createIAMessage(messageContent) {
+ const IAMessageDiv = document.createElement("div");
+ IAMessageDiv.classList.add("ia-message");
+
+ const characterImage = document.createElement("img");
+ characterImage.classList.add("character-image");
+ characterImage.src = `${character.imageUrl}`;
+ characterImage.alt = `Imagen de ${character.name}`;
+
+ const messageBubble = document.createElement("div");
+ messageBubble.classList.add("message-bubble");
+ messageBubble.textContent = messageContent;
+
+ IAMessageDiv.appendChild(characterImage);
+ IAMessageDiv.appendChild(messageBubble);
+ return IAMessageDiv;
+ }
+
+ //Crea un elemento para indicar que el personaje está escribiendo.
+ function createWritingMessage(character) {
+ const writingContainer = document.createElement("div");
+ writingContainer.classList.add("writing-container");
+
+ const writing = document.createElement("p");
+ writing.classList.add("writing");
+ writing.textContent = `${character.name} está escribiendo...`;
+
+ const writingImage = document.createElement("img");
+ writingImage.src = `${character.imageUrl}`; // Usa la imagen del personaje
+ writingImage.alt = `Imagen de ${character.name} escribiendo`;
+
+ writingContainer.appendChild(writingImage);
+ writingContainer.appendChild(writing);
+
+ return writingContainer;
+ }
+
+ //Manejo del Envío de Mensajes
+ async function sendMessageHandler() {
+ const userMessage = inputMessage.value;
+
+ // Limpiar el campo de entrada inmediatamente después de obtener el valor
+ inputMessage.value = "";
+
+ // Crear y mostrar el mensaje del usuario inmediatamente
+ const userMessageDiv = createUserMessage(userMessage);
+ chatContainer.appendChild(userMessageDiv);
+
+ // Desplazar el contenedor de chat hacia abajo para mostrar el mensaje del usuario
+ chatContainer.scrollTop = chatContainer.scrollHeight;
+
+ // Crear y mostrar el indicador de que el personaje está escribiendo
+ const writingContainer = createWritingMessage(character);
+ chatContainer.appendChild(writingContainer);
+ chatContainer.scrollTop = chatContainer.scrollHeight;
+
+ try {
+ const respuesta = await communicateWithOpenAI(userMessage, characterId);
+ const messageContent = respuesta[0][0].message.content;
+
+ // Crear y mostrar el mensaje de la IA
+ const IAMessageDiv = createIAMessage(messageContent);
+ chatContainer.appendChild(IAMessageDiv);
+
+ // Eliminar el indicador de que el personaje está escribiendo
+ chatContainer.removeChild(writingContainer);
+
+ // Desplazar el contenedor de chat hacia abajo para mostrar el nuevo mensaje
+ chatContainer.scrollTop = chatContainer.scrollHeight;
+ } catch (error) {
+ const errorDiv = document.createElement("div");
+ errorDiv.classList.add("error-message");
+ const messageBubble = document.createElement("div");
+ messageBubble.classList.add("message-bubble");
+ messageBubble.textContent =
+ "Habla, amigo y entra... surgió un problema, por favor revisa tu Api Key para acceder";
+ errorDiv.appendChild(messageBubble);
+ chatContainer.appendChild(errorDiv);
+ chatContainer.removeChild(writingContainer);
+ }
+ }
+
+ //Añadir Evento de Envío de Mensajes
+ sendMessage.addEventListener("click", (e) => {
+ e.preventDefault();
+ sendMessageHandler();
+ });
+
+ return chat;
+};
+
+export default ChatIndividual;
diff --git a/src/views/Error.js b/src/views/Error.js
new file mode 100644
index 0000000..6e970a7
--- /dev/null
+++ b/src/views/Error.js
@@ -0,0 +1,11 @@
+import { notFound } from "../components/NotFound.js";
+
+export const error = () => {
+ const errorView = document.createElement("div");
+ errorView.className = "viewError";
+
+ const notFoundElement = notFound();
+ errorView.appendChild(notFoundElement);
+
+ return errorView;
+};
diff --git a/src/views/Example.js b/src/views/Example.js
deleted file mode 100644
index baca444..0000000
--- a/src/views/Example.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const Example = () => {
-
-};
-
-export default Example;
\ No newline at end of file
diff --git a/src/views/Home.js b/src/views/Home.js
new file mode 100644
index 0000000..8199a4b
--- /dev/null
+++ b/src/views/Home.js
@@ -0,0 +1,26 @@
+import { header } from "../components/Header.js";
+import { hero } from "../components/Hero.js";
+import { filters } from "../components/Filters.js";
+import { footer } from "../components/Footer.js";
+
+
+export const home = () => {
+ const homeView = document.createElement("div");
+
+ const headerElement = header();
+ homeView.appendChild(headerElement);
+
+ const heroElement = hero();
+ homeView.appendChild(heroElement);
+
+ const filtersElement = filters();
+ homeView.appendChild(filtersElement);
+
+ const footerElement = footer();
+ homeView.appendChild(footerElement);
+
+
+ return homeView;
+};
+
+
diff --git a/test/apiKey.spec.js b/test/apiKey.spec.js
new file mode 100644
index 0000000..7bf96da
--- /dev/null
+++ b/test/apiKey.spec.js
@@ -0,0 +1,29 @@
+import { getApiKey, setApiKey } from '../src/lib/apiKey.js';
+
+describe('Devolver el valor de la API Key', () => {
+ it('La aplicación debe devolver el valor de la API Key', () => {
+ // Configuración inicial: establecer una API Key en localStorage
+ const testApiKey = 'test123';
+ localStorage.setItem('apikey', testApiKey);
+
+ // Ejecutar la función getApiKey
+ const apiKey = getApiKey();
+
+ // Aserción: verificar que la API Key devuelta sea la misma que la establecida
+ expect(apiKey).toBe(testApiKey);
+ });
+});
+
+describe('Establecer la API Key', () => {
+ it('La aplicación debe establecer correctamente la API Key', () => {
+ // Llamar a la función setApiKey para establecer una nueva API Key
+ const newApiKey = 'newTestKey';
+ setApiKey(newApiKey);
+
+ // Obtener la API Key almacenada en localStorage
+ const storedApiKey = localStorage.getItem('apikey');
+
+ // Aserción: verificar que la API Key almacenada sea la misma que la establecida
+ expect(storedApiKey).toBe(newApiKey);
+ });
+});
diff --git a/test/data.js b/test/data.js
new file mode 100644
index 0000000..29e2a22
--- /dev/null
+++ b/test/data.js
@@ -0,0 +1,46 @@
+export const data = [
+
+ {
+ "id": "frodo_bolson",
+ "name": "Frodo Bolsón",
+ "shortDescription": "Portador del Anillo Único",
+ "description": "Frodo Bolsón, un hobbit de la Comarca, es elegido para llevar el Anillo Único a Mordor y destruirlo en el Monte del Destino. A pesar de su modesta estatura, muestra una valentía extraordinaria y una determinación inquebrantable en su peligroso viaje. Su carga lo lleva al borde de la desesperación, pero su amistad con Sam y el apoyo de sus compañeros lo guían en su difícil tarea, enfrentando peligros inimaginables para salvar a la Tierra Media de la oscuridad que amenaza con consumirla. ",
+ "imageUrl": "data/img/Frodo.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 33,
+ "height": "1.5m",
+ "yearOfBirth": 2968
+ }
+ },
+
+ {
+ "id": "sam_gamyi",
+ "name": "Sam Gamyi",
+ "shortDescription": "Fiel compañero de Frodo",
+ "description": "Sam Gamyi, leal compañero de Frodo, demuestra una valentía y lealtad inquebrantables en su viaje para destruir el Anillo Único. Como jardinero de la Comarca, inicialmente se une a Frodo como su cocinero, pero su papel se vuelve crucial cuando se convierte en el soporte emocional y físico de Frodo en los momentos más oscuros. Su coraje y sacrificio son ejemplares, y su amor por su hogar y sus amigos lo impulsan a superar desafíos aparentemente insuperables en su búsqueda para salvar a la Tierra Media.",
+ "imageUrl": "data/img/sam.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 38,
+ "height": "1.4m",
+ "yearOfBirth": 2980
+ }
+ },
+
+ {
+ "id": "gandalf",
+ "name": "Gandalf",
+ "shortDescription": "El mago gris",
+ "description": "Gandalf, conocido como el Mago Gris, es una figura venerada y poderosa en la Tierra Media. Su sabiduría y habilidades mágicas lo convierten en un guía esencial para la Comunidad del Anillo en su lucha contra las fuerzas oscuras de Sauron. Aunque puede parecer distante y enigmático, Gandalf tiene un profundo amor por los pueblos libres y está dispuesto a arriesgar todo por su protección. Su papel como mentor y estratega es crucial en la guerra contra la oscuridad, y su sacrificio final en la batalla contra el Balrog es un acto de pura valentía y devoción.",
+ "imageUrl": "data/img/gandalf.jpg",
+ "facts": {
+ "race": "Maia",
+ "age": 2019,
+ "height": "2.1m",
+ "yearOfBirth": 1000
+ }
+ },
+];
+
+
\ No newline at end of file
diff --git a/test/dataFunctions.spec.js b/test/dataFunctions.spec.js
new file mode 100644
index 0000000..3f950e8
--- /dev/null
+++ b/test/dataFunctions.spec.js
@@ -0,0 +1,271 @@
+import { filterData, filterData2, sortData, computeStats} from '../src/lib/dataFunctions.js';
+import { data as fakeData } from './data.js';
+
+describe ('Filtrar la data por Raza',()=>{
+ it("La aplicación debe filtrar la data por Raza", () =>{
+ const resultadoDeFiltros = [
+ {
+ "id": "frodo_bolson",
+ "name": "Frodo Bolsón",
+ "shortDescription": "Portador del Anillo Único",
+ "description": "Frodo Bolsón, un hobbit de la Comarca, es elegido para llevar el Anillo Único a Mordor y destruirlo en el Monte del Destino. A pesar de su modesta estatura, muestra una valentía extraordinaria y una determinación inquebrantable en su peligroso viaje. Su carga lo lleva al borde de la desesperación, pero su amistad con Sam y el apoyo de sus compañeros lo guían en su difícil tarea, enfrentando peligros inimaginables para salvar a la Tierra Media de la oscuridad que amenaza con consumirla. ",
+ "imageUrl": "data/img/Frodo.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 33,
+ "height": "1.5m",
+ "yearOfBirth": 2968
+ }
+ },
+ {
+ "id": "sam_gamyi",
+ "name": "Sam Gamyi",
+ "shortDescription": "Fiel compañero de Frodo",
+ "description": "Sam Gamyi, leal compañero de Frodo, demuestra una valentía y lealtad inquebrantables en su viaje para destruir el Anillo Único. Como jardinero de la Comarca, inicialmente se une a Frodo como su cocinero, pero su papel se vuelve crucial cuando se convierte en el soporte emocional y físico de Frodo en los momentos más oscuros. Su coraje y sacrificio son ejemplares, y su amor por su hogar y sus amigos lo impulsan a superar desafíos aparentemente insuperables en su búsqueda para salvar a la Tierra Media.",
+ "imageUrl": "data/img/sam.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 38,
+ "height": "1.4m",
+ "yearOfBirth": 2980
+ }
+ },
+ ];
+ expect(filterData(fakeData, "race", "Hobbit")).toEqual(resultadoDeFiltros);
+ });
+});
+
+
+describe ('Filtrar la data por Edad',()=>{
+ it("La aplicación debe filtrar la data por Edad", () =>{
+ const resultadoDeEdad = [
+ {
+ "id": "gandalf",
+ "name": "Gandalf",
+ "shortDescription": "El mago gris",
+ "description": "Gandalf, conocido como el Mago Gris, es una figura venerada y poderosa en la Tierra Media. Su sabiduría y habilidades mágicas lo convierten en un guía esencial para la Comunidad del Anillo en su lucha contra las fuerzas oscuras de Sauron. Aunque puede parecer distante y enigmático, Gandalf tiene un profundo amor por los pueblos libres y está dispuesto a arriesgar todo por su protección. Su papel como mentor y estratega es crucial en la guerra contra la oscuridad, y su sacrificio final en la batalla contra el Balrog es un acto de pura valentía y devoción.",
+ "imageUrl": "data/img/gandalf.jpg",
+ "facts": {
+ "race": "Maia",
+ "age": 2019,
+ "height": "2.1m",
+ "yearOfBirth": 1000
+ }
+ },
+ ];
+ expect(filterData2(fakeData, "age", "2000")).toEqual(resultadoDeEdad);
+ });
+
+ it('La aplicación debe filtrar la data por rango de edad "30 40"', () => {
+ const resultadoDeEdad = [
+ {
+ "id": "frodo_bolson",
+ "name": "Frodo Bolsón",
+ "shortDescription": "Portador del Anillo Único",
+ "description": "Frodo Bolsón, un hobbit de la Comarca, es elegido para llevar el Anillo Único a Mordor y destruirlo en el Monte del Destino. A pesar de su modesta estatura, muestra una valentía extraordinaria y una determinación inquebrantable en su peligroso viaje. Su carga lo lleva al borde de la desesperación, pero su amistad con Sam y el apoyo de sus compañeros lo guían en su difícil tarea, enfrentando peligros inimaginables para salvar a la Tierra Media de la oscuridad que amenaza con consumirla. ",
+ "imageUrl": "data/img/Frodo.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 33,
+ "height": "1.5m",
+ "yearOfBirth": 2968
+ }
+ },
+ {
+ "id": "sam_gamyi",
+ "name": "Sam Gamyi",
+ "shortDescription": "Fiel compañero de Frodo",
+ "description": "Sam Gamyi, leal compañero de Frodo, demuestra una valentía y lealtad inquebrantables en su viaje para destruir el Anillo Único. Como jardinero de la Comarca, inicialmente se une a Frodo como su cocinero, pero su papel se vuelve crucial cuando se convierte en el soporte emocional y físico de Frodo en los momentos más oscuros. Su coraje y sacrificio son ejemplares, y su amor por su hogar y sus amigos lo impulsan a superar desafíos aparentemente insuperables en su búsqueda para salvar a la Tierra Media.",
+ "imageUrl": "data/img/sam.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 38,
+ "height": "1.4m",
+ "yearOfBirth": 2980
+ }
+ }
+ ];
+ expect(filterData2(fakeData, "age", "30 40")).toEqual(resultadoDeEdad);
+ });
+
+ it('La aplicación debe filtrar la data por edad "100"', () => {
+ const resultadoDeEdad = [
+ {
+ "id": "frodo_bolson",
+ "name": "Frodo Bolsón",
+ "shortDescription": "Portador del Anillo Único",
+ "description": "Frodo Bolsón, un hobbit de la Comarca, es elegido para llevar el Anillo Único a Mordor y destruirlo en el Monte del Destino. A pesar de su modesta estatura, muestra una valentía extraordinaria y una determinación inquebrantable en su peligroso viaje. Su carga lo lleva al borde de la desesperación, pero su amistad con Sam y el apoyo de sus compañeros lo guían en su difícil tarea, enfrentando peligros inimaginables para salvar a la Tierra Media de la oscuridad que amenaza con consumirla. ",
+ "imageUrl": "data/img/Frodo.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 33,
+ "height": "1.5m",
+ "yearOfBirth": 2968
+ }
+ },
+ {
+ "id": "sam_gamyi",
+ "name": "Sam Gamyi",
+ "shortDescription": "Fiel compañero de Frodo",
+ "description": "Sam Gamyi, leal compañero de Frodo, demuestra una valentía y lealtad inquebrantables en su viaje para destruir el Anillo Único. Como jardinero de la Comarca, inicialmente se une a Frodo como su cocinero, pero su papel se vuelve crucial cuando se convierte en el soporte emocional y físico de Frodo en los momentos más oscuros. Su coraje y sacrificio son ejemplares, y su amor por su hogar y sus amigos lo impulsan a superar desafíos aparentemente insuperables en su búsqueda para salvar a la Tierra Media.",
+ "imageUrl": "data/img/sam.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 38,
+ "height": "1.4m",
+ "yearOfBirth": 2980
+ }
+ }
+ ];
+ expect(filterData2(fakeData, "age", "100")).toEqual(resultadoDeEdad);
+ });
+
+});
+
+
+
+describe ('Filtrar la data por Orden',()=>{
+ it("La aplicación debe filtrar la data por Orden Ascendente", () =>{
+ const resultadoOrden = [
+ {
+ "id": "frodo_bolson",
+ "name": "Frodo Bolsón",
+ "shortDescription": "Portador del Anillo Único",
+ "description": "Frodo Bolsón, un hobbit de la Comarca, es elegido para llevar el Anillo Único a Mordor y destruirlo en el Monte del Destino. A pesar de su modesta estatura, muestra una valentía extraordinaria y una determinación inquebrantable en su peligroso viaje. Su carga lo lleva al borde de la desesperación, pero su amistad con Sam y el apoyo de sus compañeros lo guían en su difícil tarea, enfrentando peligros inimaginables para salvar a la Tierra Media de la oscuridad que amenaza con consumirla. ",
+ "imageUrl": "data/img/Frodo.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 33,
+ "height": "1.5m",
+ "yearOfBirth": 2968
+ }
+ },
+
+ {
+ "id": "sam_gamyi",
+ "name": "Sam Gamyi",
+ "shortDescription": "Fiel compañero de Frodo",
+ "description": "Sam Gamyi, leal compañero de Frodo, demuestra una valentía y lealtad inquebrantables en su viaje para destruir el Anillo Único. Como jardinero de la Comarca, inicialmente se une a Frodo como su cocinero, pero su papel se vuelve crucial cuando se convierte en el soporte emocional y físico de Frodo en los momentos más oscuros. Su coraje y sacrificio son ejemplares, y su amor por su hogar y sus amigos lo impulsan a superar desafíos aparentemente insuperables en su búsqueda para salvar a la Tierra Media.",
+ "imageUrl": "data/img/sam.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 38,
+ "height": "1.4m",
+ "yearOfBirth": 2980
+ }
+ },
+
+ {
+ "id": "gandalf",
+ "name": "Gandalf",
+ "shortDescription": "El mago gris",
+ "description": "Gandalf, conocido como el Mago Gris, es una figura venerada y poderosa en la Tierra Media. Su sabiduría y habilidades mágicas lo convierten en un guía esencial para la Comunidad del Anillo en su lucha contra las fuerzas oscuras de Sauron. Aunque puede parecer distante y enigmático, Gandalf tiene un profundo amor por los pueblos libres y está dispuesto a arriesgar todo por su protección. Su papel como mentor y estratega es crucial en la guerra contra la oscuridad, y su sacrificio final en la batalla contra el Balrog es un acto de pura valentía y devoción.",
+ "imageUrl": "data/img/gandalf.jpg",
+ "facts": {
+ "race": "Maia",
+ "age": 2019,
+ "height": "2.1m",
+ "yearOfBirth": 1000
+ }
+ },
+ ];
+ expect(sortData(fakeData, "orden", "asc")).toEqual(resultadoOrden);
+ });
+
+ it("La aplicación debe filtrar la data por Orden Descendente", () =>{
+ const resultadoOrdenDescendente = [
+ {
+ "id": "frodo_bolson",
+ "name": "Frodo Bolsón",
+ "shortDescription": "Portador del Anillo Único",
+ "description": "Frodo Bolsón, un hobbit de la Comarca, es elegido para llevar el Anillo Único a Mordor y destruirlo en el Monte del Destino. A pesar de su modesta estatura, muestra una valentía extraordinaria y una determinación inquebrantable en su peligroso viaje. Su carga lo lleva al borde de la desesperación, pero su amistad con Sam y el apoyo de sus compañeros lo guían en su difícil tarea, enfrentando peligros inimaginables para salvar a la Tierra Media de la oscuridad que amenaza con consumirla. ",
+ "imageUrl": "data/img/Frodo.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 33,
+ "height": "1.5m",
+ "yearOfBirth": 2968
+ }
+ },
+
+ {
+ "id": "sam_gamyi",
+ "name": "Sam Gamyi",
+ "shortDescription": "Fiel compañero de Frodo",
+ "description": "Sam Gamyi, leal compañero de Frodo, demuestra una valentía y lealtad inquebrantables en su viaje para destruir el Anillo Único. Como jardinero de la Comarca, inicialmente se une a Frodo como su cocinero, pero su papel se vuelve crucial cuando se convierte en el soporte emocional y físico de Frodo en los momentos más oscuros. Su coraje y sacrificio son ejemplares, y su amor por su hogar y sus amigos lo impulsan a superar desafíos aparentemente insuperables en su búsqueda para salvar a la Tierra Media.",
+ "imageUrl": "data/img/sam.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 38,
+ "height": "1.4m",
+ "yearOfBirth": 2980
+ }
+ },
+
+ {
+ "id": "gandalf",
+ "name": "Gandalf",
+ "shortDescription": "El mago gris",
+ "description": "Gandalf, conocido como el Mago Gris, es una figura venerada y poderosa en la Tierra Media. Su sabiduría y habilidades mágicas lo convierten en un guía esencial para la Comunidad del Anillo en su lucha contra las fuerzas oscuras de Sauron. Aunque puede parecer distante y enigmático, Gandalf tiene un profundo amor por los pueblos libres y está dispuesto a arriesgar todo por su protección. Su papel como mentor y estratega es crucial en la guerra contra la oscuridad, y su sacrificio final en la batalla contra el Balrog es un acto de pura valentía y devoción.",
+ "imageUrl": "data/img/gandalf.jpg",
+ "facts": {
+ "race": "Maia",
+ "age": 2019,
+ "height": "2.1m",
+ "yearOfBirth": 1000
+ }
+ },
+ ];
+ expect(sortData(fakeData, "orden", "desc")).toEqual(resultadoOrdenDescendente);
+ });
+});
+
+
+describe ('Filtrar la data por Estadísticas',()=>{
+ it("La aplicación debe filtrar la data por cálculo estadístico ", () =>{
+ const resultadoCalculo = [
+ {
+ "id": "frodo_bolson",
+ "name": "Frodo Bolsón",
+ "shortDescription": "Portador del Anillo Único",
+ "description": "Frodo Bolsón, un hobbit de la Comarca, es elegido para llevar el Anillo Único a Mordor y destruirlo en el Monte del Destino. A pesar de su modesta estatura, muestra una valentía extraordinaria y una determinación inquebrantable en su peligroso viaje. Su carga lo lleva al borde de la desesperación, pero su amistad con Sam y el apoyo de sus compañeros lo guían en su difícil tarea, enfrentando peligros inimaginables para salvar a la Tierra Media de la oscuridad que amenaza con consumirla. ",
+ "imageUrl": "data/img/Frodo.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 33,
+ "height": "1.5m",
+ "yearOfBirth": 2968
+ }
+ },
+
+ {
+ "id": "sam_gamyi",
+ "name": "Sam Gamyi",
+ "shortDescription": "Fiel compañero de Frodo",
+ "description": "Sam Gamyi, leal compañero de Frodo, demuestra una valentía y lealtad inquebrantables en su viaje para destruir el Anillo Único. Como jardinero de la Comarca, inicialmente se une a Frodo como su cocinero, pero su papel se vuelve crucial cuando se convierte en el soporte emocional y físico de Frodo en los momentos más oscuros. Su coraje y sacrificio son ejemplares, y su amor por su hogar y sus amigos lo impulsan a superar desafíos aparentemente insuperables en su búsqueda para salvar a la Tierra Media.",
+ "imageUrl": "data/img/sam.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 38,
+ "height": "1.4m",
+ "yearOfBirth": 2980
+ }
+ },
+
+ {
+ "id": "gandalf",
+ "name": "Gandalf",
+ "shortDescription": "El mago gris",
+ "description": "Gandalf, conocido como el Mago Gris, es una figura venerada y poderosa en la Tierra Media. Su sabiduría y habilidades mágicas lo convierten en un guía esencial para la Comunidad del Anillo en su lucha contra las fuerzas oscuras de Sauron. Aunque puede parecer distante y enigmático, Gandalf tiene un profundo amor por los pueblos libres y está dispuesto a arriesgar todo por su protección. Su papel como mentor y estratega es crucial en la guerra contra la oscuridad, y su sacrificio final en la batalla contra el Balrog es un acto de pura valentía y devoción.",
+ "imageUrl": "data/img/gandalf.jpg",
+ "facts": {
+ "race": "Maia",
+ "age": 2019,
+ "height": "2.1m",
+ "yearOfBirth": 1000
+ }
+ },
+ ];
+ expect(computeStats(resultadoCalculo)).toEqual(696);
+ });
+});
\ No newline at end of file
diff --git a/test/openAIApi.spec.js b/test/openAIApi.spec.js
new file mode 100644
index 0000000..fa2afff
--- /dev/null
+++ b/test/openAIApi.spec.js
@@ -0,0 +1,69 @@
+import { communicateWithOpenAI } from "../src/lib/openAIApi.js";
+
+window.fetch = jest.fn();
+
+describe("El valor de retorno esperado de communicateWithOpenAI", () => {
+ test("La aplicación debe devolver un mensaje de la API de OpenAI", async () => {
+ const messages = "cual es tu hechizo favorito";
+ const id = "gandalf";
+ const expectedResponse = {
+ choices: [
+ { text: "Mi hechizo favorito es sin duda el hechizo de fuego, donde puedo conjurar llamas para iluminar la oscuridad y proteger a mis compañeros en la batalla." },
+ ],
+ };
+
+ fetch.mockResolvedValueOnce({
+ json: () => Promise.resolve(expectedResponse),
+ });
+
+ const result = await communicateWithOpenAI(messages, id);
+
+ expect(fetch).toHaveBeenCalledWith(
+ "https://api.openai.com/v1/chat/completions",
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: expect.any(String),
+ },
+ body: JSON.stringify({
+ model: "gpt-3.5-turbo",
+ messages: [
+ { role: "user", content: messages },
+ {
+ role: "system",
+ content: `Responde en primera persona como si fuera este personaje del Señor de los Anillos:${id}`,
+ },
+ ],
+ temperature: 0.7,
+ }),
+ }
+ );
+
+ expect(result).toEqual([expectedResponse.choices]);
+ });
+
+
+ test("La aplicación debe manejar una respuesta inválida", async () => {
+ const messages = "cual es tu hechizo favorito";
+ const id = "gandalf";
+
+ fetch.mockRejectedValueOnce(new Error("404 Not Found"));
+
+ await expect(communicateWithOpenAI(messages, id)).rejects.toThrow(
+ "404 Not Found"
+ );
+ });
+
+
+ test("La aplicación debe manejar errores en la solicitud", async () => {
+ const messages = "cual es tu hechizo favorito";
+ const id = "gandalf";
+
+ fetch.mockRejectedValueOnce(new Error("Error en la solicitud a OpenAI"));
+
+ await expect(communicateWithOpenAI(messages, id)).rejects.toThrow(
+ "Error en la solicitud a OpenAI"
+ );
+ });
+});
+
+ 
+ 
+ `;
+
+ const buttonGoHome = notFoundElement.querySelector("#button-goHome");
+ buttonGoHome.addEventListener("click", () => {
+ window.location.href = "index.html";
+ });
+
+ return notFoundElement;
+};
diff --git a/src/data/dataset.js b/src/data/dataset.js
new file mode 100644
index 0000000..20c4c8b
--- /dev/null
+++ b/src/data/dataset.js
@@ -0,0 +1,339 @@
+export const data = [
+
+ {
+ "id": "frodo_bolson",
+ "name": "Frodo Bolsón",
+ "shortDescription": "Portador del Anillo Único",
+ "description": "Frodo Bolsón, un hobbit de la Comarca, es elegido para llevar el Anillo Único a Mordor y destruirlo en el Monte del Destino. A pesar de su modesta estatura, muestra una valentía extraordinaria y una determinación inquebrantable en su peligroso viaje. Su carga lo lleva al borde de la desesperación, pero su amistad con Sam y el apoyo de sus compañeros lo guían en su difícil tarea, enfrentando peligros inimaginables para salvar a la Tierra Media de la oscuridad que amenaza con consumirla. ",
+ "imageUrl": "data/img/Frodo.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 33,
+ "height": "1.5m",
+ "yearOfBirth": 2968
+ }
+ },
+
+ {
+ "id": "sam_gamyi",
+ "name": "Sam Gamyi",
+ "shortDescription": "Fiel compañero de Frodo",
+ "description": "Sam Gamyi, leal compañero de Frodo, demuestra una valentía y lealtad inquebrantables en su viaje para destruir el Anillo Único. Como jardinero de la Comarca, inicialmente se une a Frodo como su cocinero, pero su papel se vuelve crucial cuando se convierte en el soporte emocional y físico de Frodo en los momentos más oscuros. Su coraje y sacrificio son ejemplares, y su amor por su hogar y sus amigos lo impulsan a superar desafíos aparentemente insuperables en su búsqueda para salvar a la Tierra Media.",
+ "imageUrl": "data/img/sam.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 38,
+ "height": "1.4m",
+ "yearOfBirth": 2980
+ }
+ },
+
+ {
+ "id": "gandalf",
+ "name": "Gandalf",
+ "shortDescription": "El mago gris",
+ "description": "Gandalf, conocido como el Mago Gris, es una figura venerada y poderosa en la Tierra Media. Su sabiduría y habilidades mágicas lo convierten en un guía esencial para la Comunidad del Anillo en su lucha contra las fuerzas oscuras de Sauron. Aunque puede parecer distante y enigmático, Gandalf tiene un profundo amor por los pueblos libres y está dispuesto a arriesgar todo por su protección. Su papel como mentor y estratega es crucial en la guerra contra la oscuridad, y su sacrificio final en la batalla contra el Balrog es un acto de pura valentía y devoción.",
+ "imageUrl": "data/img/gandalf.jpg",
+ "facts": {
+ "race": "Maia",
+ "age": 2019,
+ "height": "2.1m",
+ "yearOfBirth": 1000
+ }
+ },
+
+ {
+ "id": "aragorn",
+ "name": "Aragorn",
+ "shortDescription": "El heredero de Isildur",
+ "description": "Aragorn, también conocido como Strider, es un guerrero noble y valiente, destinado a reclamar su derecho como rey de Gondor. Heredero de Isildur, lleva consigo la carga de una gran responsabilidad y un legado de honor y coraje. Aunque inicialmente renuente a asumir su destino, Aragorn se convierte en un líder indiscutible de la Comunidad del Anillo, guiándola con sabiduría y determinación en su búsqueda para destruir el Anillo Único y derrotar a Sauron. Su valentía y compasión lo convierten en un héroe legendario en la historia de la Tierra Media.",
+ "imageUrl": "data/img/aragorn.jpg",
+ "facts": {
+ "race": "Hombre",
+ "age": 87,
+ "height": "1.86m",
+ "yearOfBirth": 2931
+ }
+ },
+
+ {
+ "id": "legolas",
+ "name": "Legolas",
+ "shortDescription": "El arquero elfo",
+ "description": "Legolas, un elfo de bosque del reino de Mirkwood, es un arquero experto y ágil guerrero. Miembro de la Comunidad del Anillo, su destreza con el arco y su agudeza visual son inigualables, haciendo de él un aliado valioso en la lucha contra las fuerzas de Sauron. Aunque a menudo se muestra reservado y serio, Legolas demuestra un profundo respeto por sus compañeros de viaje y una lealtad inquebrantable hacia su causa. Su habilidad para percibir el peligro y su habilidad en la batalla lo convierten en un activo invaluable en la misión para salvar a la Tierra Media.",
+ "imageUrl": "data/img/legolas.jpg",
+ "facts": {
+ "race": "Elfo",
+ "age": 2931,
+ "height": "1.83m",
+ "yearOfBirth": 87
+ }
+ },
+
+ {
+ "id": "gimli",
+ "name": "Gimli",
+ "shortDescription": "El enano de Erebor",
+ "description": "Un enano de la Montaña Solitaria, es un guerrero valiente y un amigo leal. Su amor por la herencia de su pueblo lo impulsan a unirse a la Comunidad del Anillo en su peligroso viaje. Aunque a menudo se encuentra en desacuerdo con Legolas debido a la rivalidad entre elfos y enanos, Gimli demuestra un respeto profundo por sus compañeros y una disposición para sacrificar todo en la lucha contra el mal. Su fuerza y su coraje son legendarios, y su amistad con Legolas es una prueba de que lazos inquebrantables pueden formarse incluso en los momentos más oscuros.",
+ "imageUrl": "data/img/gimli.jpg",
+ "facts": {
+ "race": "Enano",
+ "age": 139,
+ "height": "1.45m",
+ "yearOfBirth": 2879
+ }
+ },
+
+ {
+ "id": "boromir",
+ "name": "Boromir",
+ "shortDescription": "Hijo de Gondor",
+ "description": "Boromir, un valiente guerrero de Gondor, es un miembro de la Comunidad del Anillo con un corazón noble pero atormentado por la sombra del poder. Lucha con la tentación de usar el Anillo Único para proteger a su pueblo, pero su determinación y coraje son innegables. Aunque cae en la tentación y enfrenta su destino trágico, su sacrificio final por sus compañeros y su arrepentimiento son un recordatorio de la fuerza del espíritu humano y la redención. Su legado perdura como un símbolo de la lucha contra el mal y la búsqueda de redención.",
+ "imageUrl": "data/img/boromirdel.jpg",
+ "facts": {
+ "race": "Hombre",
+ "age": 41,
+ "height": "1.83m",
+ "yearOfBirth": 2978
+ }
+ },
+
+ {
+ "id": "arwen",
+ "name": "Arwen",
+ "shortDescription": "La estrella vespertina",
+ "description": "Arwen Undómiel, una elfa noble de la estirpe de los Noldor, es conocida por su belleza y su amor por Aragorn. Su decisión de renunciar a la inmortalidad por amor es un acto de valentía y sacrificio que la define como una de las figuras más poderosas y nobles de la Tierra Media. Aunque su papel en la trama principal puede ser secundario, su influencia y su conexión con Aragorn son fundamentales para el éxito de la Comunidad del Anillo y la restauración de la paz en la Tierra Media. ",
+ "imageUrl": "data/img/arwen .jpg",
+ "facts": {
+ "race": "Elfo",
+ "age": 2921,
+ "height": "1.70m",
+ "yearOfBirth": 241
+ }
+ },
+
+ {
+ "id": "saruman",
+ "name": "Saruman",
+ "shortDescription": "El mago traidor",
+ "description": "Saruman el Blanco, líder de los Istari, se corrompe por el deseo de poder y se alía con Sauron en su búsqueda del Anillo Único. Una vez respetado como sabio consejero y protector de la Tierra Media, su caída en la oscuridad lo convierte en un enemigo temible. Su traición a sus compañeros magos y su papel en la guerra contra los pueblos libres lo hacen un adversario formidable. Sin embargo, su soberbia y ambición eventualmente lo conducen a su propia destrucción, demostrando que incluso los más poderosos pueden caer ante la tentación.",
+ "imageUrl": "data/img/saruman.jpg",
+ "facts": {
+ "race": "Maia",
+ "age": 2019,
+ "height": "2.1m",
+ "yearOfBirth": 1000
+ }
+ },
+
+ {
+ "id": "sauron",
+ "name": "Sauron",
+ "shortDescription": "El Señor Oscuro",
+ "description": "Sauron, el principal antagonista de la trilogía, es un antiguo Maia corrompido que busca recuperar su poder forjando un nuevo Anillo Único. Conocido como el Señor Oscuro, su influencia se extiende sobre la Tierra Media, sembrando terror y destrucción dondequiera que vaya. Su deseo de dominación lo lleva a cometer atrocidades inimaginables, manipulando a aquellos que lo rodean en su búsqueda de dominación total. Su única debilidad es el mismo Anillo que desea poseer, y su obsesión lo consume hasta su eventual derrota. ",
+ "imageUrl": "data/img/sauron.jpg",
+ "facts": {
+ "race": "Maia",
+ "age": 2019,
+ "height": "3.2m",
+ "yearOfBirth": 1000
+ }
+ },
+
+ {
+ "id": "gollum",
+ "name": "Gollum",
+ "shortDescription": "Antiguo poseedor del Anillo Único",
+ "description": "Gollum, anteriormente conocido como Sméagol, fue corrompido por el Anillo Único y se convirtió en una criatura deforme y obsesionada con recuperar su posesión. Una vez un hobbit inocente, su lucha interna entre su antiguo yo y su alter ego, Gollum, lo consume. Su relación con el Anillo es tanto su perdición como su redención, ya que lo impulsa a traicionar a Frodo y Sam para recuperar su precioso. Sin embargo, su papel en la destrucción del Anillo finalmente le otorga la redención que tanto anhelaba, demostrando que incluso los más oscuros pueden encontrar la luz.",
+ "imageUrl": "data/img/gollum.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 589,
+ "height": "0.8m",
+ "yearOfBirth": 2430
+ }
+ },
+
+ {
+ "id": "treebeard",
+ "name": "Treebeard",
+ "shortDescription": "El pastor de los árboles",
+ "description": "También conocido como Barbárbol, es el líder de los Ents, antiguas criaturas que protegen los bosques de la Tierra Media. Conocido por su sabiduría y su profundo amor por la naturaleza es un defensor apasionado de su hogar, decidido a protegerlo de la destrucción causada por Saruman y sus aliados. Su paciencia y su habilidad para ver el panorama completo lo convierten en un aliado valioso para la Comunidad del Anillo en su lucha contra la oscuridad. Su voz se alza como un eco de los antiguos tiempos, recordando a todos la importancia de proteger y preservar la Tierra Media.",
+ "imageUrl": "data/img/treebeard.jpg",
+ "facts": {
+ "race": "Ent",
+ "age": 3872,
+ "height": "4.2m",
+ "yearOfBirth": 990
+ }
+ },
+
+ {
+ "id": "shadowfax",
+ "name": "Shadowfax",
+ "shortDescription": "El Señor de los Caballos",
+ "description": "Shadowfax es un caballo noble y veloz, conocido como el Señor de los Caballos, leal a Gandalf y capaz de llevarlo a grandes velocidades. Criado en las praderas de Rohan, Shadowfax es más que un mero corcel; es un símbolo de libertad y poderío. Su inteligencia y su conexión con Gandalf son incomparables, y su papel en la lucha contra las fuerzas de la oscuridad es crucial. Montado por el mago en sus misiones más peligrosas, Shadowfax demuestra una valentía y un coraje dignos de elogio, inspirando a aquellos que lo rodean con su nobleza y gracia.",
+ "imageUrl": "data/img/shadowfax.jpg",
+ "facts": {
+ "race": "Caballo",
+ "age": 30,
+ "height": "1.7m",
+ "yearOfBirth": 1994
+ }
+ },
+
+ {
+ "id": "nazgul",
+ "name": "Nazgûl",
+ "shortDescription": "Los Nueve Espectros del Anillo",
+ "description": "Los Nazgûl, también conocidos como los Nueve Espectros del Anillo, son los antiguos reyes humanos corrompidos por los Anillos de Poder de Sauron. Ahora esclavos de la voluntad del Señor Oscuro, estos espectros aterradores son sus más temidos servidores, encargados de cazar y capturar al Portador del Anillo. Montados en sus dragones alados y envueltos en sombras, los Nazgûl son una presencia ominosa que infunde terror en el corazón de quienes los encuentran. Su única debilidad es la luz del día y el coraje de aquellos que se atreven a enfrentarlos en la batalla.",
+ "imageUrl": "data/img/nazgul.jpg",
+ "facts": {
+ "race": "Hombre",
+ "age": "Desconocida",
+ "height": "Variable",
+ "yearOfBirth": "Desconocido"
+ }
+ },
+
+ {
+ "id": "wargs",
+ "name": "Wargs",
+ "shortDescription": "Bestias lobunas",
+ "description": "Los Wargs son criaturas lobunas inteligentes y feroces, utilizadas por los Uruk-hai y otros servidores de Sauron en la guerra contra los pueblos libres. Dotados de una astucia natural y una ferocidad implacable, los Wargs son temidos por su capacidad para acechar en las sombras y atacar con rapidez y brutalidad. Montados por jinetes orcos, estas bestias son utilizadas como instrumentos de terror y destrucción, sembrando el caos y la desolación a su paso. Su presencia en el campo de batalla es un recordatorio constante del poder oscuro que amenaza con engullir a la Tierra Media.",
+ "imageUrl": "data/img/wargos_720.jpg",
+ "facts": {
+ "race": "Criatura",
+ "age": "Desconocida",
+ "height": "Variable",
+ "yearOfBirth": "Desconocido"
+ }
+ },
+
+ {
+ "id": "balrog",
+ "name": "Balrog",
+ "shortDescription": "El demonio de las sombras",
+ "description": "Los Balrogs son antiguos espíritus de fuego y sombra, criaturas temibles que sirven a Morgoth y que fueron despertadas por Sauron en la Tercera Edad. Conocidos por su inmensa fuerza y su habilidad para manipular el fuego, los Balrogs son enemigos mortales capaces de sembrar el caos y la destrucción dondequiera que vayan. El Balrog de Moria, enfrentado por Gandalf en una batalla legendaria, es un recordatorio del poder oscuro que yace en las profundidades de la Tierra Media, una fuerza que debe ser enfrentada con valentía y determinación.",
+ "imageUrl": "data/img/balrog.jpeg",
+ "facts": {
+ "race": "Maia",
+ "age": "Desconocida",
+ "height": "Variable",
+ "yearOfBirth": "Desconocido"
+ }
+ },
+
+ {
+ "id": "shelob",
+ "name": "Shelob",
+ "shortDescription": "La araña gigante",
+ "description": "Shelob es una antigua araña gigante que habita en los túneles de Cirith Ungol y es temida por su veneno y su astucia. Conocida como el Terror de las Oscuridades, Shelob es una criatura solitaria y retorcida, cuya única pasión es la caza y la devoración de sus presas. Su guarida, un laberinto de túneles y telarañas, es un lugar de pesadilla que pocos se atreven a explorar. Atrapando a sus víctimas en su red mortal, Shelob se deleita en su sufrimiento antes de consumirlas, una pesadilla viviente en la sombra de la Tierra Media.",
+ "imageUrl": "data/img/shelob_720.jpg",
+ "facts": {
+ "race": "Criatura",
+ "age": "Desconocida",
+ "height": "Variable",
+ "yearOfBirth": "Desconocido"
+ }
+ },
+
+ {
+ "id": "mouth_of_sauron",
+ "name": "Boca de Sauron",
+ "shortDescription": "El heraldo del Señor Oscuro",
+ "description": "La Boca de Sauron es el portavoz y heraldo del Señor Oscuro, que negocia con la Compañía del Anillo en la Puerta Negra antes de la Batalla de Morannon. Una figura ominosa y siniestra, la Boca de Sauron es una manifestación de la corrupción y el mal que emana de Mordor. Su presencia inspira terror y desesperación, y sus palabras están llenas de engaño y manipulación. Como representante de Sauron, su propósito es sembrar discordia y desconfianza entre los enemigos del Señor Oscuro, socavando su determinación y esperanza antes de la batalla final.",
+ "imageUrl": "data/img/boca_de_sauron_720.jpg",
+ "facts": {
+ "race": "Hombre",
+ "age": "Desconocida",
+ "height": "Variable",
+ "yearOfBirth": "Desconocido"
+ }
+ },
+
+ {
+ "id": "faramir",
+ "name": "Faramir",
+ "shortDescription": "Hijo de Denethor",
+ "description": "Faramir es el hijo menor de Denethor II, el Senescal de Gondor, y es conocido por su sabiduría, nobleza y valentía en la batalla. A diferencia de su hermano Boromir, Faramir demuestra compasión y comprensión, resistiendo la tentación del Anillo Único cuando lo encuentra. Como capitán de los Rangers de Ithilien, protege las fronteras de Gondor de las incursiones de los enemigos de Mordor. Su amor por su pueblo y su determinación para protegerlo lo convierten en un líder respetado y admirado, un símbolo de esperanza en tiempos de oscuridad.",
+ "imageUrl": "data/img/faramir_720.jpg",
+ "facts": {
+ "race": "Hombre",
+ "age": 37,
+ "height": "1.83m",
+ "yearOfBirth": 2983
+ }
+ },
+
+ {
+ "id": "eowyn",
+ "name": "Eowyn",
+ "shortDescription": "La dama de Rohan",
+ "description": "Éowyn es la sobrina del rey Théoden de Rohan y se disfraza de hombre para unirse a la batalla y derrotar al Rey Brujo de Angmar. Cansada de la vida confinada de las mujeres de Rohan, anhela la gloria de la batalla y la oportunidad de demostrar su valentía. Su encuentro con el Rey Brujo en la batalla de Pelennor Fields es legendario, ya que es ella quien finalmente lo derrota. Su coraje y determinación la convierten en un símbolo de la fuerza femenina y la resistencia en un mundo dominado por la guerra y la adversidad.",
+ "imageUrl": "data/img/eowyn_720.jpg",
+ "facts": {
+ "race": "Hombre",
+ "age": 25,
+ "height": "1.68m",
+ "yearOfBirth": 2995
+ }
+ },
+
+ {
+ "id": "denethor",
+ "name": "Denethor",
+ "shortDescription": "El Senescal de Gondor",
+ "description": "Denethor II es el último Senescal de Gondor antes del regreso del rey legítimo. Gobierna con mano dura y cae en la desesperación ante la guerra. Consumido por el pesar y la pérdida, su mente se oscurece y se vuelve cada vez más irracional. Aunque es un líder competente en tiempos de paz, su incapacidad para enfrentar la creciente amenaza de Mordor lo lleva a tomar decisiones desesperadas y destructivas, causando la división y el sufrimiento dentro de su propio reino. Su caída en la locura es un recordatorio sombrío del poder corruptor del miedo y la desesperación.",
+ "imageUrl": "data/img/denethor_720.jpg",
+ "facts": {
+ "race": "Hombre",
+ "age": 89,
+ "height": "1.83m",
+ "yearOfBirth": 2901
+ }
+ },
+
+ {
+ "id": "bilbo_bolson",
+ "name": "Bilbo Bolsón",
+ "shortDescription": "El antiguo portador del Anillo",
+ "description": "Bilbo Bolsón es un hobbit que encontró el Anillo Único durante su aventura con los enanos para reclamar Erebor. Aunque inicialmente lo ve como un simple tesoro, su encuentro con Gollum y la influencia del Anillo lo cambian para siempre. A medida que envejece, su conexión con el Anillo lo lleva a sentir el peso de su poder y su maldición, y eventualmente decide dejarlo a Frodo, comenzando así la misión para destruirlo. A pesar de su papel modesto en la trama principal, Bilbo es un símbolo de coraje y determinación en tiempos de gran adversidad.",
+ "imageUrl": "data/img/bilbo_720.jpg",
+ "facts": {
+ "race": "Hobbit",
+ "age": 131,
+ "height": "1.2m",
+ "yearOfBirth": 2890
+ }
+ },
+
+ {
+ "id": "elrond",
+ "name": "Elrond",
+ "shortDescription": "Señor de Rivendel",
+ "description": "Elrond Medio Elfo es el Señor de Rivendel y un sabio consejero. Ayuda a la Comunidad del Anillo en su misión para destruir el Anillo Único. Conocido por su paciencia y sabiduría, Elrond posee un profundo conocimiento de la historia y el destino de la Tierra Media. Su influencia se extiende mucho más allá de los límites de Rivendel, ya que es respetado y admirado por pueblos de todas las razas. Como guardián de uno de los Últimos Hogares Seguros, su papel en la lucha contra Sauron es fundamental para el destino de toda la Tierra Media.",
+ "imageUrl": "data/img/elrond_720.jpg",
+ "facts": {
+ "race": "Elfo",
+ "age": "Desconocida",
+ "height": "Variable",
+ "yearOfBirth": "Desconocido"
+ }
+ },
+
+ {
+ "id": "galadriel",
+ "name": "Galadriel",
+ "shortDescription": "La dama de Lórien",
+ "description": "Galadriel es una poderosa elfa y la señora de Lothlórien, conocida por su sabiduría, belleza y habilidades mágicas. Aunque su papel en la trama principal puede parecer secundario, su influencia y su conexión con el destino de la Tierra Media son fundamentales. Como portadora de uno de los Tres Anillos de los Elfos, Galadriel posee un poder incomparable, pero su sabiduría y compasión son igualmente impresionantes. Su papel como guía y protectora de la Comunidad del Anillo en Lothlórien es esencial para su éxito en la misión para destruir el Anillo Único y derrotar a Sauron.",
+ "imageUrl": "data/img/galadriel_720.jpg",
+ "facts": {
+ "race": "Elfo",
+ "age": "Desconocida",
+ "height": "Variable",
+ "yearOfBirth": "Desconocido"
+ }
+ }
+];
+export default data;
\ No newline at end of file
diff --git a/src/data/img/ChatGrupalMobile.png b/src/data/img/ChatGrupalMobile.png
new file mode 100644
index 0000000..2c4bf7b
Binary files /dev/null and b/src/data/img/ChatGrupalMobile.png differ
diff --git a/src/data/img/ChatIndividualDesktop.png b/src/data/img/ChatIndividualDesktop.png
new file mode 100644
index 0000000..53bc94b
Binary files /dev/null and b/src/data/img/ChatIndividualDesktop.png differ
diff --git a/src/data/img/ChatIndividualMobile.png b/src/data/img/ChatIndividualMobile.png
new file mode 100644
index 0000000..09375de
Binary files /dev/null and b/src/data/img/ChatIndividualMobile.png differ
diff --git a/src/data/img/Frodo.jpg b/src/data/img/Frodo.jpg
new file mode 100644
index 0000000..f53db6a
Binary files /dev/null and b/src/data/img/Frodo.jpg differ
diff --git a/src/data/img/Group-Typing.svg b/src/data/img/Group-Typing.svg
new file mode 100644
index 0000000..fe48879
--- /dev/null
+++ b/src/data/img/Group-Typing.svg
@@ -0,0 +1,24 @@
+
diff --git a/src/data/img/InfoDesktop.png b/src/data/img/InfoDesktop.png
new file mode 100644
index 0000000..0493fad
Binary files /dev/null and b/src/data/img/InfoDesktop.png differ
diff --git a/src/data/img/InfoMobile.png b/src/data/img/InfoMobile.png
new file mode 100644
index 0000000..0e81d43
Binary files /dev/null and b/src/data/img/InfoMobile.png differ
diff --git a/src/data/img/InicioDesktop.png b/src/data/img/InicioDesktop.png
new file mode 100644
index 0000000..8002cbf
Binary files /dev/null and b/src/data/img/InicioDesktop.png differ
diff --git a/src/data/img/InicioMobile.png b/src/data/img/InicioMobile.png
new file mode 100644
index 0000000..e7831a0
Binary files /dev/null and b/src/data/img/InicioMobile.png differ
diff --git a/src/data/img/OneRingFavicon.png b/src/data/img/OneRingFavicon.png
new file mode 100644
index 0000000..ae7fe94
Binary files /dev/null and b/src/data/img/OneRingFavicon.png differ
diff --git a/src/data/img/WireframeBaja.png b/src/data/img/WireframeBaja.png
new file mode 100644
index 0000000..e6f80f9
Binary files /dev/null and b/src/data/img/WireframeBaja.png differ
diff --git a/src/data/img/WireframeModal.jpg b/src/data/img/WireframeModal.jpg
new file mode 100644
index 0000000..95f8f31
Binary files /dev/null and b/src/data/img/WireframeModal.jpg differ
diff --git a/src/data/img/aragorn.jpg b/src/data/img/aragorn.jpg
new file mode 100644
index 0000000..a0d9e47
Binary files /dev/null and b/src/data/img/aragorn.jpg differ
diff --git a/src/data/img/arwen .jpg b/src/data/img/arwen .jpg
new file mode 100644
index 0000000..51502e9
Binary files /dev/null and b/src/data/img/arwen .jpg differ
diff --git a/src/data/img/balrog.jpeg b/src/data/img/balrog.jpeg
new file mode 100644
index 0000000..e508ca2
Binary files /dev/null and b/src/data/img/balrog.jpeg differ
diff --git a/src/data/img/bilbo_720.jpg b/src/data/img/bilbo_720.jpg
new file mode 100644
index 0000000..95585a3
Binary files /dev/null and b/src/data/img/bilbo_720.jpg differ
diff --git a/src/data/img/boca_de_sauron_720.jpg b/src/data/img/boca_de_sauron_720.jpg
new file mode 100644
index 0000000..b24e14a
Binary files /dev/null and b/src/data/img/boca_de_sauron_720.jpg differ
diff --git a/src/data/img/boromirdel.jpg b/src/data/img/boromirdel.jpg
new file mode 100644
index 0000000..89bcf79
Binary files /dev/null and b/src/data/img/boromirdel.jpg differ
diff --git a/src/data/img/chevron-left.svg b/src/data/img/chevron-left.svg
new file mode 100644
index 0000000..6241830
--- /dev/null
+++ b/src/data/img/chevron-left.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/data/img/denethor_720.jpg b/src/data/img/denethor_720.jpg
new file mode 100644
index 0000000..f46a3d2
Binary files /dev/null and b/src/data/img/denethor_720.jpg differ
diff --git a/src/data/img/elrond_720.jpg b/src/data/img/elrond_720.jpg
new file mode 100644
index 0000000..ccdcafd
Binary files /dev/null and b/src/data/img/elrond_720.jpg differ
diff --git a/src/data/img/eowyn_720.jpg b/src/data/img/eowyn_720.jpg
new file mode 100644
index 0000000..95df5c5
Binary files /dev/null and b/src/data/img/eowyn_720.jpg differ
diff --git a/src/data/img/error-image.png b/src/data/img/error-image.png
new file mode 100644
index 0000000..c6664f5
Binary files /dev/null and b/src/data/img/error-image.png differ
diff --git a/src/data/img/faramir_720.jpg b/src/data/img/faramir_720.jpg
new file mode 100644
index 0000000..9739cc6
Binary files /dev/null and b/src/data/img/faramir_720.jpg differ
diff --git a/src/data/img/fondo.jpg b/src/data/img/fondo.jpg
new file mode 100644
index 0000000..767420a
Binary files /dev/null and b/src/data/img/fondo.jpg differ
diff --git a/src/data/img/galadriel_720.jpg b/src/data/img/galadriel_720.jpg
new file mode 100644
index 0000000..e245251
Binary files /dev/null and b/src/data/img/galadriel_720.jpg differ
diff --git a/src/data/img/gandalf.jpg b/src/data/img/gandalf.jpg
new file mode 100644
index 0000000..8ed2efb
Binary files /dev/null and b/src/data/img/gandalf.jpg differ
diff --git a/src/data/img/gimli.jpg b/src/data/img/gimli.jpg
new file mode 100644
index 0000000..d214557
Binary files /dev/null and b/src/data/img/gimli.jpg differ
diff --git a/src/data/img/gollum.jpg b/src/data/img/gollum.jpg
new file mode 100644
index 0000000..3967185
Binary files /dev/null and b/src/data/img/gollum.jpg differ
diff --git a/src/data/img/legolas.jpg b/src/data/img/legolas.jpg
new file mode 100644
index 0000000..d203221
Binary files /dev/null and b/src/data/img/legolas.jpg differ
diff --git a/src/data/img/logo.png b/src/data/img/logo.png
new file mode 100644
index 0000000..ae7fe94
Binary files /dev/null and b/src/data/img/logo.png differ
diff --git a/src/data/img/lupa-buscar.svg b/src/data/img/lupa-buscar.svg
new file mode 100644
index 0000000..ec11eaf
--- /dev/null
+++ b/src/data/img/lupa-buscar.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/data/img/nazgul.jpg b/src/data/img/nazgul.jpg
new file mode 100644
index 0000000..dad10cf
Binary files /dev/null and b/src/data/img/nazgul.jpg differ
diff --git a/src/data/img/sam.jpg b/src/data/img/sam.jpg
new file mode 100644
index 0000000..a5c42b2
Binary files /dev/null and b/src/data/img/sam.jpg differ
diff --git a/src/data/img/saruman.jpg b/src/data/img/saruman.jpg
new file mode 100644
index 0000000..df38b07
Binary files /dev/null and b/src/data/img/saruman.jpg differ
diff --git a/src/data/img/sauron.jpg b/src/data/img/sauron.jpg
new file mode 100644
index 0000000..7b4577d
Binary files /dev/null and b/src/data/img/sauron.jpg differ
diff --git a/src/data/img/shadowfax.jpg b/src/data/img/shadowfax.jpg
new file mode 100644
index 0000000..a5817fa
Binary files /dev/null and b/src/data/img/shadowfax.jpg differ
diff --git a/src/data/img/shelob_720.jpg b/src/data/img/shelob_720.jpg
new file mode 100644
index 0000000..9406052
Binary files /dev/null and b/src/data/img/shelob_720.jpg differ
diff --git a/src/data/img/treebeard.jpg b/src/data/img/treebeard.jpg
new file mode 100644
index 0000000..51c091f
Binary files /dev/null and b/src/data/img/treebeard.jpg differ
diff --git a/src/data/img/wargos_720.jpg b/src/data/img/wargos_720.jpg
new file mode 100644
index 0000000..9364c0b
Binary files /dev/null and b/src/data/img/wargos_720.jpg differ
diff --git a/src/fonts/Inter/Inter-VariableFont_slnt,wght.ttf b/src/fonts/Inter/Inter-VariableFont_slnt,wght.ttf
new file mode 100644
index 0000000..e724708
Binary files /dev/null and b/src/fonts/Inter/Inter-VariableFont_slnt,wght.ttf differ
diff --git a/src/fonts/Inter/OFL.txt b/src/fonts/Inter/OFL.txt
new file mode 100644
index 0000000..d05ec4b
--- /dev/null
+++ b/src/fonts/Inter/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/src/fonts/Inter/README.txt b/src/fonts/Inter/README.txt
new file mode 100644
index 0000000..3078f19
--- /dev/null
+++ b/src/fonts/Inter/README.txt
@@ -0,0 +1,72 @@
+Inter Variable Font
+===================
+
+This download contains Inter as both a variable font and static fonts.
+
+Inter is a variable font with these axes:
+ slnt
+ wght
+
+This means all the styles are contained in a single file:
+ Inter-VariableFont_slnt,wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Inter:
+ static/Inter-Thin.ttf
+ static/Inter-ExtraLight.ttf
+ static/Inter-Light.ttf
+ static/Inter-Regular.ttf
+ static/Inter-Medium.ttf
+ static/Inter-SemiBold.ttf
+ static/Inter-Bold.ttf
+ static/Inter-ExtraBold.ttf
+ static/Inter-Black.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+ https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+ https://variablefonts.typenetwork.com
+ https://medium.com/variable-fonts
+
+In desktop apps
+
+ https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+ https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+ https://developers.google.com/fonts/docs/getting_started
+ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+ https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+ MacOS: https://support.apple.com/en-us/HT201749
+ Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+ Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+ https://developers.google.com/fonts/docs/android
+ https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.
diff --git a/src/fonts/Inter/static/Inter-Black.ttf b/src/fonts/Inter/static/Inter-Black.ttf
new file mode 100644
index 0000000..b27822b
Binary files /dev/null and b/src/fonts/Inter/static/Inter-Black.ttf differ
diff --git a/src/fonts/Inter/static/Inter-Bold.ttf b/src/fonts/Inter/static/Inter-Bold.ttf
new file mode 100644
index 0000000..fe23eeb
Binary files /dev/null and b/src/fonts/Inter/static/Inter-Bold.ttf differ
diff --git a/src/fonts/Inter/static/Inter-ExtraBold.ttf b/src/fonts/Inter/static/Inter-ExtraBold.ttf
new file mode 100644
index 0000000..874b1b0
Binary files /dev/null and b/src/fonts/Inter/static/Inter-ExtraBold.ttf differ
diff --git a/src/fonts/Inter/static/Inter-ExtraLight.ttf b/src/fonts/Inter/static/Inter-ExtraLight.ttf
new file mode 100644
index 0000000..c993e82
Binary files /dev/null and b/src/fonts/Inter/static/Inter-ExtraLight.ttf differ
diff --git a/src/fonts/Inter/static/Inter-Light.ttf b/src/fonts/Inter/static/Inter-Light.ttf
new file mode 100644
index 0000000..71188f5
Binary files /dev/null and b/src/fonts/Inter/static/Inter-Light.ttf differ
diff --git a/src/fonts/Inter/static/Inter-Medium.ttf b/src/fonts/Inter/static/Inter-Medium.ttf
new file mode 100644
index 0000000..a01f377
Binary files /dev/null and b/src/fonts/Inter/static/Inter-Medium.ttf differ
diff --git a/src/fonts/Inter/static/Inter-SemiBold.ttf b/src/fonts/Inter/static/Inter-SemiBold.ttf
new file mode 100644
index 0000000..ecc7041
Binary files /dev/null and b/src/fonts/Inter/static/Inter-SemiBold.ttf differ
diff --git a/src/fonts/Inter/static/Inter-Thin.ttf b/src/fonts/Inter/static/Inter-Thin.ttf
new file mode 100644
index 0000000..fe77243
Binary files /dev/null and b/src/fonts/Inter/static/Inter-Thin.ttf differ
diff --git a/src/index.html b/src/index.html
index fd6186f..1a0cae8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,11 +2,19 @@
-