+
+
+ `;
+ apiKeyModal
+ .querySelector("button#apiKeyButton")
+ .addEventListener("click", () => {
+ navigateTo("/apikey");
+ });
+ return apiKeyModal;
+};
diff --git a/src/components/chatContainer.js b/src/components/chatContainer.js
new file mode 100644
index 00000000..0a8ec4d9
--- /dev/null
+++ b/src/components/chatContainer.js
@@ -0,0 +1,77 @@
+import data from "../data/dataset.js";
+import { chatCompletions } from "../lib/openIaAPI.js";
+export const ChatPanel = () => {
+ const id = window.location.pathname.replace("/chat-", "");
+ const element = data.find((personaje) => personaje.id === id);
+
+ console.log(element);
+ // Contenedor principal
+ const chatContainer = document.createElement("div");
+ chatContainer.classList.add("chatContainer");
+
+ // Info personaje (Trabajar llamado desde el dataset)
+ const characterInfoContainer = document.createElement("div");
+ characterInfoContainer.classList.add("characterInfoContainer");
+ const nameCharacter = document.createElement("p");
+ nameCharacter.id = "nameCharacter";
+ nameCharacter.innerHTML = `CHAT WITH
${element.name}`; + const characterPhoto = document.createElement("figure"); + characterPhoto.classList.add("characterPhoto"); + characterPhoto.innerHTML = `
`;
+ const characterDescription = document.createElement("div");
+ characterDescription.id = "characterDescription";
+ characterDescription.classList.add("characterDescription");
+ characterDescription.innerHTML = `Dataverse Chat
-
+ Warsiepedia
+
+
diff --git a/src/index.js b/src/index.js
index a0e2d57c..71f7ccb6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,17 @@
+import { setRootElement, setRoutes } from "./router.js";
+import { Home } from "./views/home.js";
+import { onURLChange } from "./router.js";
+//import {Example} from './views/example.js';
+import { Error } from "./views/error.js";
+import { ApiKey } from "./views/apiKey.js";
+import { CharacterChat } from "./views/chat.js";
+import dataset from "./data/dataset.js";
// En este archivo definirás tus rutas e importarás los componentes que vas a renderizar.
/*
import Example from './views/Example.js';
Ejemplo de definición de rutas:
-
-const routes = {
- "/": Example,
- ...
-}
*/
/*
@@ -16,4 +19,39 @@ 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
+*/
+/*const routes = {
+ "/": home,
+}
+//utilizamos el setRoutes para que se vincule con el router
+setRoutes(routes);//toma este objeto y lo lleva al router y definirlo como si fuera el objeto routes
+
+window.addEventListener('DOMContentLoaded', ({objetivo}) => {
+ setRootElement(document.getElementById('root'))
+ onURLChange('/');
+ });
+
+window.addEventListener('popstate', ({objetivo}) => {
+ onURLChange('/');
+ });
+ */
+const routes = {
+ "/": Home,
+ "/apikey": ApiKey,
+ "/error": Error,
+ "/chat": CharacterChat,
+};
+// importar la data
+// recorrer la data
+dataset.forEach((elem) => {
+ routes[`/chat-${elem.id}`] = CharacterChat;
+});
+const viewContainer = document.getElementById("root");
+setRoutes(routes);
+setRootElement(viewContainer);
+
+document.addEventListener("DOMContentLoaded", (event) => {
+ console.log("DOM fully loaded and parsed");
+ console.log(event.target.location.pathname);
+ onURLChange(event.target.location.pathname);
+});
diff --git a/src/lib/apikey.js b/src/lib/apikey.js
new file mode 100644
index 00000000..2bc54dd3
--- /dev/null
+++ b/src/lib/apikey.js
@@ -0,0 +1,6 @@
+export const saveApikey = (key) => {
+ // key es parametro
+ // console.log(key);
+ // localStorage.setItem('test', 1);
+ localStorage.setItem("apikey", key);
+};
diff --git a/src/lib/chatAPI.js b/src/lib/chatAPI.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/lib/dataAPI.js b/src/lib/dataAPI.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/lib/dataFunctions.js b/src/lib/dataFunctions.js
new file mode 100644
index 00000000..f0a9b3ec
--- /dev/null
+++ b/src/lib/dataFunctions.js
@@ -0,0 +1,32 @@
+// Función para filtrar por Afiliación
+export function filterAffiliation(dataset, selectedAffiliation) {
+ if (!selectedAffiliation) {
+ return dataset;
+ }
+ const filteredData = dataset.filter(item => item.facts.affiliation === selectedAffiliation);
+ return filteredData;
+ }
+ // Función para ordenar asc y desc A-Z
+ export function sortData(data, sortBy) {
+ const sortedData = [...data];
+
+ if (sortBy === "asc") {
+ sortedData.sort((a, b) => a.name.localeCompare(b.name));
+ } else if (sortBy === "desc") {
+ sortedData.sort((a, b) => b.name.localeCompare(a.name));
+ } else {
+ sortedData.sort((a, b) => a.name.localeCompare(b.name));
+ }
+
+ return sortedData;
+ }
+
+ // Función estadística para la cantidad de resultados filtrados
+ export const computeStats = (filteredData) => {
+ return filteredData.reduce((count, item) => {
+ const name = item.name;
+ const countResult = parseInt(count[name], 10) || 0;
+ count[name] = countResult + 1;
+ return count;
+ }, {});
+ };
\ No newline at end of file
diff --git a/src/lib/openIaAPI.js b/src/lib/openIaAPI.js
new file mode 100644
index 00000000..bc22358f
--- /dev/null
+++ b/src/lib/openIaAPI.js
@@ -0,0 +1,31 @@
+export const chatCompletions = ( ChatMessage, item) => {
+ // console.log(ChatMessage, item);
+ const URL = 'https://api.openai.com/v1/chat/completions'
+ const APIKEY = localStorage.getItem('apikey')
+ const data = {
+ model: "gpt-3.5-turbo",
+ messages: [
+ {
+ role: 'system',
+ content: `You are ${item.name} respond to all the questions`
+ },
+ {
+ role: 'user',
+ content: ChatMessage
+ }
+ ]
+ }
+
+ return fetch(URL, {
+ method: "POST",
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${APIKEY}`,
+ },
+ body: JSON.stringify(data),
+ }).then((response)=> response.json())
+
+
+
+}
+
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 00000000..c0fbfad8
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,62 @@
+//este objeto mapea las rutas del sitio
+let routes = {};
+// es la referencia al elemento html en donde se van a dibujar los componentes
+let rootElement = "";
+
+export const setRoutes = (newRoutesValue) => {
+ //arroja los errores en caso tal de que el string no sea un objeto, valida
+ console.log(newRoutesValue);
+
+ if (typeof newRoutesValue === "object") {
+ if (newRoutesValue["/error"]) {
+ // se accede a los valores de un objeto, se hace de esta forma ya que el . no distingue cáracteres especiales
+ routes = newRoutesValue;
+ }
+ }
+};
+
+//setters, antes de asignarlo, verifica si es correcto, este export asigna funciones a los lets de arriba
+export const setRootElement = (newRootElementValue) => {
+ //es importante que el setter haga validaciones
+
+ rootElement = newRootElementValue;
+};
+
+const renderView = (pathname, props = {}) => {
+ //Vaciar,limpiar el elemento root
+ const root = rootElement;
+ root.innerHTML = "";
+ // find the correct view in ROUTES for the pathname
+ console.log(pathname, routes);
+ if (routes[pathname]) {
+ const template = routes[pathname](props);
+ //devuelve un elemento html y lo guarda un template
+ root.appendChild(template);
+ } else {
+ root.appendChild(routes["/error"](props));
+ }
+ // carga la vista de error si no existe una ruta asignada al pathname
+ // render the correct view passing the value of props
+ // add the view element to the DOM root element
+};
+
+export const navigateTo = (pathname, props = {}) => {
+ // actualizar el historial del navegador a partir de las urls con pushState
+ const URLvisited = window.location.origin + pathname;
+ history.pushState({}, "", URLvisited);
+ // render the view with the pathname and props
+ renderView(pathname, props);
+};
+
+export const onURLChange = () => {
+ const pathname = window.location.pathname;
+ renderView(pathname);
+};
+window.onpopstate = onURLChange;
+//export const onURLChange = (location) => {
+// console.log(location,"location")
+// parse the location for the pathname and search params
+// convert the search params to an object
+// render the view with the pathname and object
+// renderView(location.pathname);
+//}
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 00000000..9334d628
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,866 @@
+@import url("https://fonts.googleapis.com/css?family=Jura");
+@import url("https://fonts.googleapis.com/css?family=Days+One");
+@import url("https://db.onlinewebfonts.com/c/cc3019aa6439ef893839b8a0d6d0391d?family=Star+Jedi");
+@import url("https://db.onlinewebfonts.com/c/636d3dac53dffe0023a68f90abacf4c1?family=JuraLight");
+@import url("https://db.onlinewebfonts.com/c/a575960e7b96141e7ec34bc95aa772e2?family=SF+Atarian+System+Extended+V2+V1");
+@import url("https://db.onlinewebfonts.com/c/28cac7a2ebb776327ddf96d71c30fe9b?family=SF+Atarian+System+Extended+Bold+V2+V1");
+@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap");
+
+* {
+ padding: 0%;
+ margin: 0%;
+}
+
+header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 2%;
+ background-color: black;
+ background-image: url(images/header.png);
+ background-repeat: no-repeat;
+ background-size: 100%;
+ font-size: large;
+ font-family: "Star Jedi", sans-serif;
+ width: 100%;
+ height: 150px;
+}
+
+body {
+ background-image: url(https://cdn.wallpapersafari.com/38/0/tNfnSd.png);
+ align-content: baseline;
+}
+
+h1 {
+ color: transparent;
+ padding-top: 0px;
+ text-align: center;
+ font-family: "Star Jedi", sans-serif;
+ -webkit-text-stroke: 2px yellow;
+ font-size: 60px;
+}
+
+h1:hover {
+ text-shadow: 0 0 30px rgb(232, 232, 101);
+}
+
+h2 {
+ color: aliceblue;
+ text-align: center;
+ font-family: "jura";
+}
+
+h2:hover {
+ text-shadow: 0 0 25px yellow;
+}
+
+h3 {
+ color: yellow;
+ background-color: black;
+ text-align: center;
+ font-family: "JuraLight";
+ font-size: larger;
+ margin-top: 2%;
+}
+
+.statistic {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+}
+
+/* p {
+ display: flex;
+ margin-top: 5px;
+ color: white;
+ font-family: "jura";
+ font-size: larger;
+ font-weight: 700;
+ line-height: 40px;
+ text-indent: 5px;
+ word-spacing: 3px;
+ letter-spacing: 3px;
+ background-color: #091e78;
+} */
+
+select {
+ display: flex;
+ justify-content: space-around;
+}
+
+.navBar {
+ margin-top: 2%;
+ display: flex;
+ justify-content: space-evenly;
+ align-content: space-around;
+}
+
+#naviBar {
+ display: flex;
+ font-family: "jura";
+ font-weight: 700;
+ color: #f0f0f0;
+}
+
+#affiliation {
+ max-width: 250px;
+}
+
+#affiliation {
+ display: inline-flex;
+ margin-left: 3px;
+ margin-right: 10px;
+ width: 187px;
+ cursor: pointer;
+ padding: 7px 10px;
+ height: 42px;
+ outline: 0;
+ border: 0;
+ border-radius: 0;
+ background: #f8f6f6;
+ color: #faf5f5;
+ font-size: 1em;
+ font-weight: 900;
+ color: #070707;
+ font-family: "jura";
+ border: 2px solid rgba(0, 0, 0, 0.2);
+ border-radius: 12px;
+ position: relative;
+ transition: all 0.25s ease;
+}
+
+#affiliation:hover {
+ box-shadow: 0 0 15px rgb(212, 168, 213);
+}
+
+#sortAZ {
+ max-width: 250px;
+}
+
+#sortAZ {
+ display: inline-flex;
+ margin-left: 3px;
+ margin-right: 10px;
+ width: 159px;
+ transition: 0.3s;
+ cursor: pointer;
+ padding: 7px 10px;
+ height: 42px;
+ outline: 0;
+ border: 0;
+ border-radius: 0;
+ background: #f0f0f0;
+ color: #1a1919;
+ font-size: 1em;
+ font-weight: 900;
+ color: #060606;
+ font-family: "jura";
+ border: 2px solid rgba(0, 0, 0, 0.2);
+ border-radius: 12px;
+ position: relative;
+}
+
+#sortAZ:hover {
+ box-shadow: 0 0 15px rgb(212, 168, 213);
+}
+
+#clearBtn {
+ display: inline-flex;
+ font-family: "jura";
+ font-weight: 900;
+ font-size: medium;
+ padding: 10px 20px;
+ background-color: yellow;
+ color: rgb(12, 12, 12);
+ border: none;
+ border-radius: 10px;
+ cursor: pointer;
+}
+
+#clearBtn:hover {
+ box-shadow: 0 0 15px #f0f06e;
+}
+
+#clearBtn:active {
+ background-color: black;
+ color: yellow;
+}
+
+.cardsContainer {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-content: stretch;
+ justify-content: space-around;
+ margin-top: 50px;
+}
+
+#root {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-content: stretch;
+ justify-content: space-around;
+}
+
+.cards {
+ display: flex;
+ justify-content: space-between;
+ align-content: center;
+ background-color: #f2eee9;
+ background-image: url(https://www.creativefabrica.com/wp-content/uploads/2023/05/01/Rich-Galaxy-Background-Ultra-HD-Detail-Black-And-White-Colors-68559297-1-580x1031.png);
+ width: 300px;
+ border-radius: 10px;
+ overflow: hidden;
+ margin: 20px;
+ transition: 0.3s;
+}
+
+.cards:hover {
+ box-shadow: 0 0 20px rgb(212, 168, 213);
+ transform: scale(1.1);
+}
+
+strong {
+ display: flex;
+ justify-content: center;
+ font-family: "SF Atarian System Extended Bold V2 V1";
+ font-size: 20px;
+ font-weight: 100;
+ padding-top: 4%;
+}
+
+img {
+ width: 100%;
+ height: auto;
+ border-radius: 10px;
+}
+
+span {
+ text-align: center;
+ vertical-align: middle;
+ justify-content: center;
+}
+
+dl {
+ font: 1rem "days one", sans-serif;
+ text-align: center;
+ font-weight: 100;
+}
+
+dd {
+ margin-bottom: 1rem;
+ text-align: center;
+}
+#root ul {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+@media only screen and (max-width: 768px) {
+ .cards {
+ width: 40vh;
+ }
+}
+
+footer {
+ display: flex;
+ color: yellow;
+ letter-spacing: 3px;
+ font-family: "Star Jedi";
+ justify-content: center;
+}
+
+/*APIKEY JS*/
+textarea[name="user-input"] {
+ align-items: center;
+ display: flex;
+ border-radius: 25px;
+ background: rgba(255, 255, 255, 0.7);
+ width: 700px;
+ height: 30px;
+ flex-shrink: 0;
+ padding: 10px;
+ font-family: "jura";
+ font-size: larger;
+ text-transform: uppercase;
+ text-align: center;
+ color: #fff;
+ resize: none;
+}
+
+/*APIKEY JS*/
+.containerAll {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+/*APIKEY JS*/
+.message {
+ display: flex;
+ margin-top: 0px;
+ margin-left: 15px;
+ color: yellow;
+ font-family: "jura";
+ font-size: larger;
+ font-weight: 700;
+ font-size: 30px;
+ text-align: center;
+ padding-bottom: 20px;
+}
+
+/*APIKEY JS*/
+.title {
+ color: white;
+ background-color: black;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ font-family: "Star Jedi", sans-serif;
+ font-size: larger;
+ margin: 5%;
+ font-size: 80px;
+}
+
+/*APIKEY JS*/
+#buttonsContainer {
+ display: flex;
+ justify-content: center;
+}
+
+/*APIKEY JS*/
+#confirmButton {
+ display: inline-flex;
+ color: #fff;
+ align-items: center;
+ text-align: center;
+ font-family: "jura";
+ font-weight: 900;
+ text-transform: uppercase;
+ font-size: medium;
+ padding: 10px 20px;
+ border-radius: 25px;
+ border: 3px solid #fff;
+ background: #000;
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+ margin-right: 15px;
+}
+
+#confirmButton:hover {
+ box-shadow: 0 0 15px #f0f06e;
+}
+
+#confirmButton:active {
+ background-color: black;
+ color: yellow;
+}
+
+/*APIKEY JS*/
+#returnButton {
+ display: inline-flex;
+ color: #fff;
+ text-align: center;
+ font-family: "jura";
+ font-weight: 900;
+ text-transform: uppercase;
+ font-size: medium;
+ padding: 10px 20px;
+ border-radius: 25px;
+ border: 3px solid #fff;
+ background: #000;
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+ margin-left: 15px;
+}
+
+#returnButton:hover {
+ box-shadow: 0 0 15px #f0f06e;
+}
+
+#returnButton:active {
+ background-color: black;
+ color: yellow;
+}
+
+/*APIKEY JS*/
+.customImage {
+ max-width: 50%;
+}
+
+/*error JS*/
+.customError {
+ max-width: 70%;
+}
+
+/*error JS*/
+.errorMessage {
+ display: flex;
+ margin-top: 0px;
+ align-items: center;
+ color: rgb(255, 255, 255);
+ font-family: "jura";
+ font-size: larger;
+ font-weight: 700;
+ font-size: 30px;
+ text-align: center;
+ padding-bottom: 20px;
+}
+/*error JS*/
+.errorContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+/* #returnButton {
+ position: relative;
+ left: 520px;
+} */
+
+/* CHAT*/
+.chatContainer {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ text-transform: uppercase;
+ margin-top: 100px;
+ margin-left: 50px;
+ margin-right: 50px;
+ margin-bottom: 100px;
+ border: 3px solid yellow;
+ border-radius: 20px;
+}
+
+.characterInfoContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+#nameCharacter {
+ text-align: center;
+ font-family: Raleway;
+ font-size: 50px;
+ font-style: normal;
+ color: yellow ;
+ font-weight: 900;
+ /*-webkit-text-stroke: 2px yellow;*/
+ font-size: 60px;
+ background-color: transparent;
+}
+
+.characterPhoto {
+ justify-content: center;
+ width: 40%;
+ border-radius: 50%;
+}
+
+.characterDescription {
+ justify-content: center;
+ margin-top: 10px;
+ margin-left: 100px;
+ margin-right: 100px;
+ text-align: center;
+ color: white;
+ font-family: "jura";
+ font-size: large;
+ font-weight: 900;
+ line-height: 40px;
+ text-indent: 5px;
+ word-spacing: 3px;
+ letter-spacing: 3px;
+}
+
+/* .panelConversation {
+
+ margin-left: 10px;
+} */
+
+#chatTextarea {
+ display: flex;
+ width: 830px;
+ height: 400px;
+ resize: none;
+ overflow-y: auto;
+}
+
+article {
+ display: flex;
+ flex-direction: column;
+ background: linear-gradient(#3c3c3d, #edeeee);
+ opacity: 90%;
+ margin-top: 70px;
+ margin-left: 20px;
+ margin-right: 20px;
+ border-radius: 15px;
+}
+
+.chatInput {
+ width: 860px;
+ height: 100px;
+ display: flex;
+ align-items: center;
+}
+
+#messageInput {
+ width: 650px;
+ height: 35px;
+ padding: 8px;
+ margin-left: 20px;
+ color: #000;
+ background-color: #edeeee;
+ border: 2px solid yellow;
+ border-radius: 10px;
+ opacity: 70%;
+}
+
+/*User*/
+h5 {
+ text-align: right;
+ color: white;
+ font-family: "jura";
+ font-size: larger;
+ font-weight: 700;
+ line-height: 40px;
+ text-indent: 5px;
+ word-spacing: 3px;
+ letter-spacing: 3px;
+ background-color: #240dd5;
+}
+
+/*AI*/
+h4 {
+ text-align: left;
+ color: white;
+ font-family: "jura";
+ font-size: larger;
+ font-weight: 700;
+ line-height: 40px;
+ text-indent: 5px;
+ word-spacing: 3px;
+ letter-spacing: 3px;
+ background-color: #425cdf;
+}
+
+#sendMessageBtn {
+ width: 155px;
+ height: 55px;
+ margin-left: 5px;
+ padding: 5px;
+ background-color: #3e3e3e;
+ opacity: 70%;
+ color: white;
+ border: 2px solid yellow;
+ border-radius: 10px;
+ cursor: pointer;
+}
+
+#sendMessageBtn:hover {
+ box-shadow: 0 0 15px #f0f06e;
+}
+
+#sendMessageBtn:active {
+ background-color: black;
+ color: yellow;
+}
+
+/*Responsive CHAT TABLET*/
+@media (min-width: 690px) and (max-width: 1039px) {
+ body {
+ /* CHAT*/
+ .chatContainer {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-top: 30px;
+ margin-left: 100px;
+ margin-right: 100px;
+ margin-bottom: 40px;
+ border: 3px solid yellow;
+ border-radius: 20px;
+ }
+
+ .characterInfoContainer {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ #nameCharacter {
+ display: flex;
+ text-align: center;
+ font-family: Raleway;
+ font-size: 40px;
+ font-style: normal;
+ color: yellow;
+ font-weight: 900;
+ /*-webkit-text-stroke: 2px yellow;*/
+ background-color: transparent;
+ margin-top: 10px;
+ margin-bottom: 5px;
+ }
+
+ .characterPhoto {
+ display: flex;
+ justify-content: center;
+ width: 40%;
+ border-radius: 50%;
+ }
+
+ .characterDescription {
+ display: flex;
+ justify-content: center;
+ margin-top: 10px;
+ margin-left: 100px;
+ margin-right: 100px;
+ text-align: center;
+ color: white;
+ font-family: "jura";
+ font-size: large;
+ font-weight: 900;
+ line-height: 40px;
+ text-indent: 5px;
+ word-spacing: 3px;
+ letter-spacing: 3px;
+ background-color: black;
+ }
+
+ #chatTextarea {
+ display: flex;
+ justify-content: center;
+ width: 700px;
+ height: 200px;
+ resize: none;
+ overflow-y: auto;
+ }
+
+ article {
+ display: flex;
+ justify-content: center;
+ background: linear-gradient(#3c3c3d, #edeeee);
+ opacity: 90%;
+ margin-top: 10px;
+ margin-left: 40px;
+ margin-right: 40px;
+ border-radius: 15px;
+ }
+
+ .chatInput {
+ width: 740px;
+ height: 100px;
+ display: flex;
+ align-items: center;
+ }
+
+
+ #messageInput {
+ padding: 8px;
+ margin-left: 40px;
+ color: #000;
+ background-color: #edeeee;
+ border: 2px solid yellow;
+ border-radius: 10px;
+ opacity: 70%;
+ }
+
+ #sendMessageBtn {
+ width: 150px;
+ height: 55px;
+ margin-left: 5px;
+ padding: 5px;
+ background-color: #3e3e3e;
+ opacity: 70%;
+ color: white;
+ border: 2px solid yellow;
+ border-radius: 10px;
+ cursor: pointer;
+ }
+
+ #sendMessageBtn:hover {
+ box-shadow: 0 0 15px #f0f06e;
+ }
+
+ #sendMessageBtn:active {
+ background-color: black;
+ color: yellow;
+ }
+ }
+}
+
+/* CHAT DESKTOP*/
+@media (min-width: 1040px) {
+ body {
+ /* CHAT*/
+ .chatContainer {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-top: 30px;
+ margin-left: 100px;
+ margin-right: 100px;
+ margin-bottom: 40px;
+ border: 3px solid rgb(206, 30, 215);
+ border-radius: 20px;
+ }
+
+ .characterInfoContainer {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ #nameCharacter {
+ display: flex;
+ text-align: center;
+ font-family: Raleway;
+ font-size: 40px;
+ font-style: normal;
+ color: yellow;
+ font-weight: 900;
+ /*-webkit-text-stroke: 2px yellow;*/
+ background-color: transparent;
+ margin-top: 10px;
+ margin-bottom: 5px;
+ }
+
+ .characterPhoto {
+ display: flex;
+ justify-content: center;
+ width: 40%;
+ border-radius: 50%;
+ }
+
+ .characterDescription {
+ display: flex;
+ justify-content: center;
+ margin-top: 10px;
+ margin-left: 100px;
+ margin-right: 100px;
+ text-align: center;
+ color: white;
+ font-family: "jura";
+ font-size: large;
+ font-weight: 900;
+ line-height: 40px;
+ text-indent: 5px;
+ word-spacing: 3px;
+ letter-spacing: 3px;
+ background-color: black;
+ }
+
+ #chatTextarea {
+ display: flex;
+ justify-content: center;
+ width: 700px;
+ height: 200px;
+ resize: none;
+ overflow-y: auto;
+ }
+
+ article {
+ display: flex;
+ justify-content: center;
+ background: linear-gradient(#3c3c3d, #edeeee);
+ opacity: 90%;
+ margin-top: 10px;
+ margin-left: 40px;
+ margin-right: 40px;
+ border-radius: 15px;
+ }
+
+ .chatInput {
+ width: 740px;
+ height: 100px;
+ display: flex;
+ align-items: center;
+ }
+
+ #messageInput {
+ padding: 8px;
+ margin-left: 40px;
+ color: #000;
+ background-color: #edeeee;
+ border: 2px solid yellow;
+ border-radius: 10px;
+ opacity: 70%;
+ }
+
+ #sendMessageBtn {
+ width: 150px;
+ height: 55px;
+ margin-left: 5px;
+ padding: 5px;
+ background-color: #3e3e3e;
+ opacity: 70%;
+ color: white;
+ border: 2px solid yellow;
+ border-radius: 10px;
+ cursor: pointer;
+ }
+
+ #sendMessageBtn:hover {
+ box-shadow: 0 0 15px #f0f06e;
+ }
+
+ #sendMessageBtn:active {
+ background-color: black;
+ color: yellow;
+ }
+ }
+}
+
+/*apikey Modal*/
+.containerModal {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 950px;
+ margin: 0 auto;
+ background-color: rgba(255, 255, 255, 0.055);
+ padding: 20px;
+ border: 4px solid yellow;
+ border-radius: 15px;
+ text-align: center;
+}
+/*apikey Modal*/
+.messageModal {
+ font-size: 2rem;
+ color: white;
+ margin-bottom: 10px;
+ display: flex;
+ margin-top: 0px;
+ margin-left: 15px;
+ font-family: "jura";
+ font-weight: 200;
+ font-size: 22px;
+ text-align: center;
+ padding-bottom: 20px;
+}
+
+/*apikey Modal*/
+#apiKeyButton {
+ display: inline-flex;
+ color: #fff;
+ align-items: center;
+ text-align: center;
+ font-family: "jura";
+ font-weight: 900;
+ text-transform: uppercase;
+ font-size: medium;
+ padding: 10px 20px;
+ border-radius: 25px;
+ border: 3px solid #fff;
+ background: #000;
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+ margin-right: 15px;
+}
+
+#apiKeyButton:hover {
+ box-shadow: 0 0 15px #f0f06e;
+}
diff --git a/src/test/data.js b/src/test/data.js
new file mode 100644
index 00000000..002bfb19
--- /dev/null
+++ b/src/test/data.js
@@ -0,0 +1,87 @@
+// Aqui puedes agregar los datos que necesites para tus pruebas
+// al menos debe tener uno que se llame "data"
+
+export const data = [
+ {
+ id: "luke-skywalker",
+ name: "Luke Skywalker",
+ shortDescription: "Jedi hero of the Rebel Alliance",
+ description:
+ "Luke Skywalker, a young Jedi from Tatooine, played a crucial role in the defeat of the Galactic Empire.",
+ imageUrl: "https://th.bing.com/th/id/OIG.yIV1esu7jte4XceFnmBh?pid=ImgGn",
+ facts: {
+ occupation: "Jedi",
+ affiliation: "Rebel Alliance",
+ placeOfBirth: "Tatooine",
+ specie: "Human",
+ age: "23 years",
+ height: "1.72 meters",
+ },
+ },
+ {
+ id: "princess-leia-organa",
+ name: "Princess Leia Organa",
+ shortDescription: "Rebel leader and diplomat",
+ description:
+ "Princess Leia Organa, a strong-willed leader, fought tirelessly for the Rebel Alliance and the freedom of the galaxy.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.xIxw7ysBKRKu_Y99z7P9?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Rebel leader",
+ affiliation: "Rebel Alliance",
+ placeOfBirth: "Alderaan",
+ specie: "Human",
+ age: "19 years",
+ height: "1.50 meters",
+ },
+ },
+ {
+ id: "han-solo",
+ name: "Han Solo",
+ shortDescription: "Charming smuggler and pilot",
+ description:
+ "Han Solo, the charming rogue from Corellia, piloted the Millennium Falcon and aided the Rebel cause.",
+ imageUrl: "https://th.bing.com/th/id/OIG.0tj2sfmViKkpBHy5noxi?pid=ImgGn",
+ facts: {
+ occupation: "Smuggler",
+ affiliation: "Rebel Alliance",
+ placeOfBirth: "Corellia",
+ specie: "Human",
+ age: "29 years",
+ height: "1.80 meters",
+ },
+ },
+ {
+ id: "darth-vader",
+ name: "Darth Vader",
+ shortDescription: "Sith Lord and former Jedi",
+ description:
+ "Darth Vader, once the Jedi Anakin Skywalker, fell to the dark side and served as the enforcer of the Galactic Empire.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.x9NV3AU8hE3loP2kOqma?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Sith Lord",
+ affiliation: "Galactic Empire",
+ placeOfBirth: "Tatooine",
+ specie: "Human",
+ age: "45 years",
+ height: "2.02 meters",
+ },
+ },
+ {
+ id: "yoda",
+ name: "Yoda",
+ shortDescription: "Wise Jedi Master",
+ description:
+ "Yoda, the ancient Jedi Master from Dagobah, was known for his wisdom and guidance to Jedi knights for centuries.",
+ imageUrl: "https://th.bing.com/th/id/OIG.vIhU0yRAiwCJIy3g0AZU?pid=ImgGn",
+ facts: {
+ occupation: "Jedi Master",
+ affiliation: "Jedi Order",
+ placeOfBirth: "Dagobah",
+ specie: "Unknown",
+ age: "900 years",
+ height: "0.66 meters",
+ },
+ },
+];
diff --git a/src/test/dataFunctions.spec.js b/src/test/dataFunctions.spec.js
new file mode 100644
index 00000000..5ae29701
--- /dev/null
+++ b/src/test/dataFunctions.spec.js
@@ -0,0 +1,40 @@
+import { filterAffiliation, sortData, computeStats } from '../lib/dataFunctions.js';
+import { data as fakeData } from './data.js';
+
+console.log(fakeData);
+
+describe('filterAffiliation', () => {
+ it ('la data se filtra por afiliación', () => {
+ const characters = filterAffiliation(fakeData, "Galactic Empire");
+ expect(characters.length).toBe(1);
+ });
+});
+
+describe('filterAffiliation', () => {
+ it ('la data se filtra por afiliación', () => {
+ const characters = filterAffiliation(fakeData, "Rebel Alliance");
+ expect(characters.length).toBe(3);
+ });
+});
+
+
+describe('sortData', () => {
+
+ it('retorna el array ordenado ascendentemente de acuerdo a la propiedad name', () => {
+ const unsortedData = [
+ {name: "Han Solo"},
+ {name: "Ashoka Tano"},
+ {name: "Princess Leia Organa"},
+ ]
+
+ const sortedData = [
+ {name: "Ashoka Tano"},
+ {name: "Han Solo"},
+ {name: "Princess Leia Organa"},
+ ]
+
+ const result = sortData (unsortedData)
+
+ expect(result).toEqual(sortedData);
+ });
+});
diff --git a/src/views/Example.js b/src/views/Example.js
deleted file mode 100644
index baca4441..00000000
--- 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/apiKey.js b/src/views/apiKey.js
new file mode 100644
index 00000000..931ababf
--- /dev/null
+++ b/src/views/apiKey.js
@@ -0,0 +1,45 @@
+import { Footer } from "../components/footer.js";
+import { ReturnButton } from "../components/returnButton.js";
+import { Title } from "../components/title.js";
+import { saveApikey } from "../lib/apikey.js";
+
+export const ApiKey = () => {
+ const apiKeyView = document.createElement("div");
+ const message = document.createElement("div");
+ message.innerHTML = `
+
+
+
+
+
+
+ +
+
+ `
+ // Seleccionar el boton
+ // console.log(message.querySelector('button#confirmButton'))
+ // Añadir manejador de eventos al boton
+ message
+ .querySelector("button#confirmButton")
+ .addEventListener("click", () => {
+ // Capturar el valor del text
+
+ // console.log(message.querySelector('textarea[name="user-input"]').value);
+ // mostramos el valor del textarea en consola
+ const apikeyValue = message.querySelector(
+ 'textarea[name="user-input"]'
+ ).value;
+ alert(apikeyValue);
+ saveApikey(apikeyValue); // argumento
+ });
+
+ apiKeyView.append(Title(), message, ReturnButton(), Footer());
+
+ return apiKeyView;
+};
diff --git a/src/views/chat.js b/src/views/chat.js
new file mode 100644
index 00000000..4997d458
--- /dev/null
+++ b/src/views/chat.js
@@ -0,0 +1,22 @@
+import { ChatPanel } from "../components/chatContainer.js";
+import { ReturnButton } from "../components/returnButton.js";
+import { Footer } from "../components/footer.js";
+import { chatCompletions } from "../lib/openIaAPI.js";
+
+export const CharacterChat = () => {
+ const chatView = document.createElement("body");
+
+ //chatView.append();
+ //chatView.appendChild(nameCharacter);
+
+ chatView.append(ChatPanel(), ReturnButton(), Footer());
+
+ //chatView.querySelector('button#sendMessageBtn').addEventListener('click', () =>{
+ // console.log('okbtn');
+ // const msg = chatView.querySelector('input#messageInput').value
+ //console.log(msg);
+ // chatCompletions(msg, personaje)
+ //})
+
+ return chatView;
+};
diff --git a/src/views/error.js b/src/views/error.js
new file mode 100644
index 00000000..06efd6cc
--- /dev/null
+++ b/src/views/error.js
@@ -0,0 +1,25 @@
+import { Footer } from "../components/footer.js";
+import { Title } from "../components/title.js";
+import { ReturnButton } from "../components/returnButton.js";
+
+export const Error = () => {
+ const errorView = document.createElement('div');
+ errorView.id= "ErrorView"
+
+ const errorMessage = document.createElement('section');
+ errorMessage.innerHTML = `
+
+ 
+
+
+
+ `
+ errorView.append(Title(), errorMessage, ReturnButton(), Footer());
+ console.log (errorView)
+
+ return errorView
+};
\ No newline at end of file
diff --git a/src/views/example.js b/src/views/example.js
new file mode 100644
index 00000000..760051ff
--- /dev/null
+++ b/src/views/example.js
@@ -0,0 +1,3 @@
+export const example = () => {
+ return document.createElement('p').textContent("hola mundo");
+};
\ No newline at end of file
diff --git a/src/views/home.js b/src/views/home.js
new file mode 100644
index 00000000..5b1ee429
--- /dev/null
+++ b/src/views/home.js
@@ -0,0 +1,175 @@
+import data from "../data/dataset.js";
+import {
+ filterAffiliation,
+ sortData,
+ //computeStats,
+} from "../lib/dataFunctions.js";
+import { Footer } from "../components/footer.js";
+import { Header } from "../components/header.js";
+import { listItems } from "../components/listItems.js";
+import { NavBar } from "../components/navBar.js";
+//import { navigateTo } from "../router.js";
+import { apiKeyModal } from "../components/apiMessage.js";
+
+export const Home = () => {
+ let currentData = data;
+ const divContainerHome = document.createElement("div"); //se crea una sección para contener Home
+ const ul = document.createElement("ul");
+ ul.id = "ul";
+ const nodesCreated = listItems(data);
+
+ nodesCreated.forEach((element) => {
+ // console.log(element);
+
+ ul.append(element);
+ });
+
+ //se llaman componentes
+ //const headerComponent = Header();
+ //se reemplazan las const en la línea 16 que llaman a los componentes de listItems, Header y Footer. Se usa append, en lugar de appendChild para llamar a todos
+
+ //se agregan los componentes al contenedor de toda la vista Home
+ console.log(ul);
+ divContainerHome.append(Header(), apiKeyModal(), NavBar(), ul, Footer());
+
+ //Filtrado
+ const optionFilter = divContainerHome.querySelector('[name="affiliation"]');
+ optionFilter.addEventListener("change", (event) => {
+ currentData = filterAffiliation(data, event.target.value);
+ const ul = divContainerHome.querySelector("#ul");
+ ul.innerHTML = "";
+ const nodesCreated = listItems(currentData);
+
+ nodesCreated.forEach((element) => {
+ ul.append(element);
+ });
+
+ console.log(currentData.length);
+ });
+
+ //Ordenamiento
+
+ //const optionSort = divContainerHome.querySelector('[name="sortAZ"]');
+ //optionSort.addEventListener("change",function(event) => {
+ //const sortedData = sortData (data, event.target.value);
+
+ //// Sección ordenar
+ const optionSort = divContainerHome.querySelector('[name="sortAZ"]');
+
+ // Evento para cambiar el orden
+ optionSort.addEventListener("change", function (event) {
+ const sortBy = event.target.value;
+ console.log(sortBy, " sortBy");
+ // ordena la data filtrada o la que ya se encuentra por default
+ // const dataToSort = selectedAffiliation
+ // ? filterAffiliation(data, selectedAffiliation)
+ // : data;
+ const sortedData = sortData(currentData, sortBy);
+ console.log(sortedData, "");
+ const nodesCreated = listItems(sortedData);
+ ul.innerHTML = "";
+
+ nodesCreated.forEach((element) => {
+ ul.append(element);
+ });
+ });
+
+ const clearButton = divContainerHome.querySelector(
+ '[data-testid="button-clear"]'
+ );
+ clearButton.addEventListener("click", () => {
+ ul.innerHTML = "";
+ const nodesCreated = listItems(data);
+ nodesCreated.forEach((element) => {
+ ul.append(element);
+ });
+ });
+
+ return divContainerHome;
+};
+
+//sortBy = event.target.value;
+
+/*
+//Manipulación de eventos
+// Sección renderizador tarjetas
+const cardsContainer = document.getElementById("root")
+cardsContainer.appendChild(listItems(data));
+
+// Sección filtro
+const optionFilter = document.querySelector('[name="affiliation"]');
+const clearButton = document.querySelector("#clearBtn");
+let selectedAffiliation = "";
+
+// Función actualizar filtro
+const updateFilter = () => {
+ // Filtrar data y renderizar tarjetas de nuevo
+ const filteredData = filterAffiliation(data, selectedAffiliation);
+
+ cardsContainer.innerHTML = "";
+ cardsContainer.appendChild(renderItems(filteredData));
+
+ // actializa estádísticas del filtrado
+ const statsElement = document.querySelector("#statsFilter");
+ const statsResult = computeStats(filteredData);
+
+ const totalCount = Object.values(statsResult).reduce((total, count) => total + count, 0);
+
+ // establece el contenido del HTML
+ statsElement.innerHTML = `Total characters: ${totalCount}`;
+};
+
+// Evento para cambiar el filtro
+optionFilter.addEventListener("change", (event) => {
+ selectedAffiliation = event.target.value;
+ updateFilter();
+});
+
+/// Sección botón de limpiar
+clearButton.addEventListener("click", () => {
+ selectedAffiliation = "";
+
+ // Reestablece Afiliación
+ optionFilter.value = "• Select Affiliation •";
+ updateFilter();
+
+ // Reestablece orden
+ optionSort.value = "• Select Order •";
+ sortBy = ""; // Reset the sorting option
+ const sortedData = sortData(data, sortBy);
+
+ cardsContainer.innerHTML = "";
+ cardsContainer.appendChild(renderItems(sortedData));
+});
+//// Sección ordenar
+const optionSort = document.querySelector('[name="sortAZ"]');
+let sortBy = "";
+
+// Evento para cambiar el orden
+optionSort.addEventListener("change", function (event) {
+ sortBy = event.target.value;
+
+ // ordena la data filtrada o la que ya se encuentra por default
+ const dataToSort = selectedAffiliation ? filterAffiliation(data, selectedAffiliation) : data;
+ const sortedData = sortData(dataToSort, sortBy);
+
+ cardsContainer.innerHTML = "";
+ cardsContainer.appendChild(renderItems(sortedData));
+});
+
+//// Sección estadística
+const statsElement = document.querySelector("#statsFilter");
+const filteredData = filterAffiliation(data, selectedAffiliation);
+const statsResult = computeStats(filteredData);
+
+// obtiene total de personajes
+const totalCount = Object.values(statsResult).reduce((total, count) => total + count, 0);
+
+// contenido del HTML
+statsElement.innerHTML = "Total characters: " + totalCount;
+
+// Evento para limpiar el filtro
+clearButton.addEventListener("click", updateFilter);
+
+//console.log(example, renderItems(data), data);
+*/
diff --git a/src/views/teamChat.js b/src/views/teamChat.js
new file mode 100644
index 00000000..e69de29b
${element.name}`; + const characterPhoto = document.createElement("figure"); + characterPhoto.classList.add("characterPhoto"); + characterPhoto.innerHTML = `
${element.description}
`; + + // Ventana chat + const panelConversation = document.createElement("div"); + panelConversation.classList.add("panelConversation"); + const chatWindow = document.createElement("article"); + chatWindow.id = "chatTextarea"; + + // Espacio para escribir y enviar + const chatInput = document.createElement("div"); + chatInput.classList.add("chatInput"); + + const messageInput = document.createElement("input"); + messageInput.type = "text"; + messageInput.id = "messageInput"; + messageInput.placeholder = "TYPE YOUR MESSAGE"; + + const sendMessageBtn = document.createElement('button'); + sendMessageBtn.addEventListener('click', ()=> { + messageInput.value + const messageUser = messageInput.value + chatCompletions(messageUser, element).then((data)=>{ + const pQuestion = document.createElement('h5'); + pQuestion.textContent = messageUser + const pAswer = document.createElement('h4') + pAswer.textContent = data.choices[0].message.content + chatWindow.append(pQuestion, pAswer) + messageInput.value = ''; + // console.log(data.choices[0].message.content); + + }) + + }) ; + + sendMessageBtn.id = 'sendMessageBtn'; + sendMessageBtn.innerText = 'SEND'; + + // Llamado de los elemtos + characterInfoContainer.appendChild(nameCharacter); + characterInfoContainer.appendChild(characterPhoto); + characterInfoContainer.appendChild(characterDescription); + + //panelConversation.appendChild(nameCharacter); + panelConversation.appendChild(chatWindow); + panelConversation.appendChild(chatInput); + + chatInput.appendChild(messageInput); + chatInput.appendChild(sendMessageBtn); + + chatContainer.appendChild(characterInfoContainer); + chatContainer.appendChild(panelConversation); + + return chatContainer; +}; diff --git a/src/components/footer.js b/src/components/footer.js new file mode 100644 index 00000000..48992747 --- /dev/null +++ b/src/components/footer.js @@ -0,0 +1,7 @@ +export const Footer = () => { + const Footer = document.createElement("footer"); + Footer.id = "footer" + Footer.innerHTML = ``; + + return Footer +} \ No newline at end of file diff --git a/src/components/header.js b/src/components/header.js new file mode 100644 index 00000000..99f4c96b --- /dev/null +++ b/src/components/header.js @@ -0,0 +1,7 @@ +export const Header = () => { + const Header = document.createElement("header"); + Header.id = "header" + Header.innerHTML = `w a r s i e p e d i a
May the Force be with you
`; + + return Header +} \ No newline at end of file diff --git a/src/components/listItems.js b/src/components/listItems.js new file mode 100644 index 00000000..3efa98da --- /dev/null +++ b/src/components/listItems.js @@ -0,0 +1,27 @@ +import { navigateTo } from "../router.js"; +import { ChatPanel } from "./chatContainer.js"; + +export const listItems = (data) => { + return data.map((item) => { + const listCharacters = document.createElement("li"); + listCharacters.classList.add("cards"); + listCharacters.setAttribute("itemtype", "card"); + listCharacters.innerHTML += ` +
+
+ `;
+ listCharacters.addEventListener("click", () => {
+ // console.log(item);
+ navigateTo(`/chat-${item.id}`, item);
+ ChatPanel(item);
+ });
+ return listCharacters;
+ });
+};
diff --git a/src/components/navBar.js b/src/components/navBar.js
new file mode 100644
index 00000000..621af988
--- /dev/null
+++ b/src/components/navBar.js
@@ -0,0 +1,33 @@
+export const NavBar = () => {
+ const NavBar = document.createElement ('section');
+ NavBar.id = 'section';
+
+ NavBar.innerHTML =
+ ``
+
+ return NavBar
+
+};
diff --git a/src/components/returnButton.js b/src/components/returnButton.js
new file mode 100644
index 00000000..f6d1874f
--- /dev/null
+++ b/src/components/returnButton.js
@@ -0,0 +1,13 @@
+import { navigateTo } from "../router.js";
+
+export const ReturnButton = () => {
+ const button = document.createElement("button");
+
+ button.id = "returnButton";
+ button.textContent = "Back to home";
+ button.addEventListener("click", () => {
+ navigateTo("/");
+ });
+
+ return button;
+};
diff --git a/src/components/title.js b/src/components/title.js
new file mode 100644
index 00000000..696c1f2f
--- /dev/null
+++ b/src/components/title.js
@@ -0,0 +1,7 @@
+export const Title = () => {
+ const Title = document.createElement("p");
+ Title.className = "title"
+ Title.textContent= "warsiepedia";
+
+ return Title
+}
\ No newline at end of file
diff --git a/src/data/dataset.js b/src/data/dataset.js
new file mode 100644
index 00000000..18a2ae07
--- /dev/null
+++ b/src/data/dataset.js
@@ -0,0 +1,403 @@
+export default [
+ {
+ id: "luke-skywalker",
+ name: "Luke Skywalker",
+ shortDescription: "Jedi hero of the Rebel Alliance",
+ description:
+ "Luke Skywalker, a young Jedi from Tatooine, played a crucial role in the defeat of the Galactic Empire.",
+ imageUrl: "https://th.bing.com/th/id/OIG.yIV1esu7jte4XceFnmBh?pid=ImgGn",
+ facts: {
+ occupation: "Jedi",
+ affiliation: "Rebel Alliance",
+ placeOfBirth: "Tatooine",
+ specie: "Human",
+ age: "23 years",
+ height: "1.72 meters",
+ },
+ },
+ {
+ id: "princess-leia-organa",
+ name: "Princess Leia Organa",
+ shortDescription: "Rebel leader and diplomat",
+ description:
+ "Princess Leia Organa, a strong-willed leader, fought tirelessly for the Rebel Alliance and the freedom of the galaxy.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.xIxw7ysBKRKu_Y99z7P9?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Rebel leader",
+ affiliation: "Rebel Alliance",
+ placeOfBirth: "Alderaan",
+ specie: "Human",
+ age: "19 years",
+ height: "1.50 meters",
+ },
+ },
+ {
+ id: "han-solo",
+ name: "Han Solo",
+ shortDescription: "Charming smuggler and pilot",
+ description:
+ "Han Solo, the charming rogue from Corellia, piloted the Millennium Falcon and aided the Rebel cause.",
+ imageUrl: "https://th.bing.com/th/id/OIG.0tj2sfmViKkpBHy5noxi?pid=ImgGn",
+ facts: {
+ occupation: "Smuggler",
+ affiliation: "Rebel Alliance",
+ placeOfBirth: "Corellia",
+ specie: "Human",
+ age: "29 years",
+ height: "1.80 meters",
+ },
+ },
+ {
+ id: "darth-vader",
+ name: "Darth Vader",
+ shortDescription: "Sith Lord and former Jedi",
+ description:
+ "Darth Vader, once the Jedi Anakin Skywalker, fell to the dark side and served as the enforcer of the Galactic Empire.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.x9NV3AU8hE3loP2kOqma?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Sith Lord",
+ affiliation: "Galactic Empire",
+ placeOfBirth: "Tatooine",
+ specie: "Human",
+ age: "45 years",
+ height: "2.02 meters",
+ },
+ },
+ {
+ id: "din-djarin",
+ name: "Din Djarin (The Mandalorian)",
+ shortDescription: "Bounty Hunter and Protector",
+ description:
+ "Din Djarin, known as The Mandalorian, is a skilled bounty hunter and protector of the Child (Grogu) in the outer reaches of the galaxy.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.c3jlwCXOB8gc1DWYfx37?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Bounty Hunter and Protector",
+ affiliation: "Independent/Mandalorian",
+ placeOfBirth: "Mandalore",
+ specie: "Human",
+ age: "38 years",
+ height: "1.83 meters",
+ },
+ },
+ {
+ id: "yoda",
+ name: "Yoda",
+ shortDescription: "Wise Jedi Master",
+ description:
+ "Yoda, the ancient Jedi Master from Dagobah, was known for his wisdom and guidance to Jedi knights for centuries.",
+ imageUrl: "https://th.bing.com/th/id/OIG.vIhU0yRAiwCJIy3g0AZU?pid=ImgGn",
+ facts: {
+ occupation: "Jedi Master",
+ affiliation: "Jedi Order",
+ placeOfBirth: "Dagobah",
+ specie: "Unknown",
+ age: "900 years",
+ height: "0.66 meters",
+ },
+ },
+ {
+ id: "obi-wan-kenobi",
+ name: "Obi-Wan Kenobi",
+ shortDescription: "Jedi Master and mentor",
+ description:
+ "Obi-Wan Kenobi, a wise Jedi Master, trained Anakin and later mentored Luke Skywalker in the ways of the Force.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.475bMk6y6dyHLQ9sDfkz?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Jedi Master",
+ affiliation: "Jedi Order",
+ placeOfBirth: "Stewjon",
+ specie: "Human",
+ age: "57 years",
+ height: "1.82 meters",
+ },
+ },
+ {
+ id: "chewbacca",
+ name: "Chewbacca",
+ shortDescription: "Loyal Wookiee co-pilot",
+ description:
+ "Chewbacca, the loyal Wookiee co-pilot of the Millennium Falcon, played a vital role in the Rebel Alliance's victories.",
+ imageUrl: "https://th.bing.com/th/id/OIG.eWX_w0KczF2PJQzq9p6x?pid=ImgGn",
+ facts: {
+ occupation: "Wookiee Co-pilot",
+ affiliation: "Rebel Alliance",
+ placeOfBirth: "Kashyyyk",
+ specie: "Wookiee",
+ age: "200 years",
+ height: "2.28 meters",
+ },
+ },
+ {
+ id: "r2-d2",
+ name: "R2-D2",
+ shortDescription: "Resourceful astromech droid",
+ description:
+ "R2-D2, the resourceful astromech droid, played a critical role in numerous galactic conflicts and missions for the Rebel Alliance.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.Fj3xAKiLncd8aZ9S0pJ8?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Astromech droid",
+ affiliation: "Rebel Alliance",
+ placeOfBirth: "Naboo",
+ specie: "Astromech droid",
+ age: "Unknown",
+ height: "0.96 meters",
+ },
+ },
+ {
+ id: "c-3po",
+ name: "C-3PO",
+ shortDescription: "Polite protocol droid",
+ description:
+ "C-3PO, the polite protocol droid fluent in over six million forms of communication, provided invaluable assistance to the Rebel Alliance.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.nJE9NbLmao2YwZdmORyc?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Protocol droid",
+ affiliation: "Rebel Alliance",
+ placeOfBirth: "Tatooine",
+ specie: "Protocol droid",
+ age: "Unknown",
+ height: "1.71 meters",
+ },
+ },
+ {
+ id: "lando-calrissian",
+ name: "Lando Calrissian",
+ shortDescription: "Smooth-talking city administrator",
+ description:
+ "Lando Calrissian, the smooth-talking city administrator of Cloud City, joined the Rebel Alliance and became a hero in the fight against the Empire.",
+ imageUrl: "https://th.bing.com/th/id/OIG.oSNYsOWipQRZUnZTKSjD?pid=ImgGn",
+ facts: {
+ occupation: "City administrator",
+ affiliation: "Rebel Alliance",
+ placeOfBirth: "Socorro",
+ specie: "Human",
+ age: "41 years",
+ height: "1.78 meters",
+ },
+ },
+ {
+ id: "emperor-palpatine",
+ name: "Emperor Palpatine",
+ shortDescription: "Sith Emperor and Galactic ruler",
+ description:
+ "Emperor Palpatine, a Sith Lord, manipulated the galaxy's politics and rose to become the ruler of the Galactic Empire.",
+ imageUrl: "https://th.bing.com/th/id/OIG.XE5VaYVPkawm2h7jaF35?pid=ImgGn",
+ facts: {
+ occupation: "Emperor",
+ affiliation: "Galactic Empire",
+ placeOfBirth: "Naboo",
+ specie: "Human",
+ age: "88 years",
+ height: "1.73 meters",
+ },
+ },
+ {
+ id: "darth-maul",
+ name: "Darth Maul",
+ shortDescription: "Darth Maul",
+ description:
+ "Darth Maul, a deadly Sith Lord, wielded a double-bladed lightsaber and sought to exact revenge on the Jedi Order.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.VAZd1SFOZ6Y6_Izvq3uD?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Sith Lord",
+ affiliation: "Sith",
+ placeOfBirth: "Dathomir",
+ specie: "Dathomirian (Zabrak)",
+ age: "30 years",
+ height: "1.75 meters",
+ },
+ },
+ {
+ id: "padme-amidala",
+ name: "Padmé Amidala",
+ shortDescription: "Queen and Senator",
+ description:
+ "Padmé Amidala, a skilled diplomat, served as the queen of Naboo and later as a senator in the Galactic Republic.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.zpaxWyUJ8u3ArxMrwAbD?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Queen and Senator",
+ affiliation: "Rebel Alliance",
+ placeOfBirth: "Naboo",
+ specie: "Human",
+ age: "24 years",
+ height: "1.65 meters",
+ },
+ },
+ {
+ id: "mace-windu",
+ name: "Mace Windu",
+ shortDescription: "Respected Jedi Master",
+ description:
+ "Mace Windu, a highly respected Jedi Master, was a key figure in the Jedi Order and a fierce defender of the Republic.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.85Idk0d_e0aBiSdJ7zLA?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Jedi Master",
+ affiliation: "Jedi Order",
+ placeOfBirth: "Haruun Kal",
+ specie: "Human",
+ age: "53 years",
+ height: "1.92 meters",
+ },
+ },
+ {
+ id: "rey",
+ name: "Rey",
+ shortDescription: "Jedi-in-training",
+ description:
+ "Rey, a young scavenger from Jakku, discovered her Force sensitivity and became a Jedi under the guidance of General Leia Organa.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.h0BBW3ZpsmQKKuHQAHBh?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Jedi",
+ affiliation: "Rebel Alliance",
+ placeOfBirth: "Jakku",
+ specie: "Human",
+ age: "19 years",
+ height: "1.70 meters",
+ },
+ },
+ {
+ id: "kylo-ren",
+ name: "Kylo Ren",
+ shortDescription: "Leader of the Knights of Ren",
+ description:
+ "Kylo Ren, formerly Ben Solo, fell to the dark side and became the leader of the Knights of Ren within the First Order.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.OU5BZjMgO_r37DTMvaib?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Leader of the Knights of Ren",
+ affiliation: "First Order",
+ placeOfBirth: "Chandrila",
+ specie: "Human",
+ age: "29 years",
+ height: "1.89 meters",
+ },
+ },
+ {
+ id: "finn",
+ name: "Finn",
+ shortDescription: "Former stormtrooper turned hero",
+ description:
+ "Finn, a former stormtrooper FN-2187, defected from the First Order and joined the Rebel Alliance as a hero of the Resistance.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.AzHPLSn2hW_67hjSL9Wj?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Hero of the Resistance",
+ affiliation: "Rebel Alliance",
+ placeOfBirth: "Unknown",
+ specie: "Human",
+ age: "23 years",
+ height: "1.78 meters",
+ },
+ },
+ {
+ id: "ahsoka-tano",
+ name: "Ahsoka Tano",
+ shortDescription: "Skilled Togruta Jedi",
+ description:
+ "Ahsoka Tano, a skilled Togruta Jedi, played a vital role in the Clone Wars and later became a key figure in the Rebel Alliance.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.MXZkW_BG6ZDvjrVzT3fo?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Jedi",
+ affiliation: "Jedi Order",
+ placeOfBirth: "Shili",
+ specie: "Togruta",
+ age: "32 years",
+ height: "1.70 meters",
+ },
+ },
+ {
+ id: "boba-fett",
+ name: "Boba Fett",
+ shortDescription: "Notorious bounty hunter",
+ description:
+ "Boba Fett, a notorious bounty hunter, was known for his formidable skills and ruthless pursuit of his targets.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.VbQzST0Ci2vPVrmKe57l?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Bounty hunter",
+ affiliation: "Neutral",
+ placeOfBirth: "Kamino",
+ specie: "Human (clone)",
+ age: "33 years",
+ height: "1.83 meters",
+ },
+ },
+ {
+ id: "jango-fett",
+ name: "Jango Fett",
+ shortDescription: "Bounty hunter and clone template",
+ description:
+ "Jango Fett, a skilled bounty hunter and the genetic template for the clone army, was a formidable figure in the galaxy.",
+ imageUrl: "https://th.bing.com/th/id/OIG.J3zl49qVftAAlfjugie.?pid=ImgGn",
+ facts: {
+ occupation: "Bounty hunter",
+ affiliation: "Neutral",
+ placeOfBirth: "Concord Dawn",
+ specie: "Human",
+ age: "36 years",
+ height: "1.83 meters",
+ },
+ },
+ {
+ id: "count-dooku",
+ name: "Count Dooku",
+ shortDescription: "Sith Lord and Separatist leader",
+ description:
+ "Count Dooku, a former Jedi Master, became a powerful Sith Lord and leader of the Separatist movement in the Clone Wars.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.lHkAXvT84qxjLkpWhq_y?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Sith Lord",
+ affiliation: "Separatists",
+ placeOfBirth: "Serenno",
+ specie: "Human",
+ age: "93 years",
+ height: "1.93 meters",
+ },
+ },
+ {
+ id: "admiral-ackbar",
+ name: "Admiral Ackbar",
+ shortDescription: "Respected Mon Calamari leader",
+ description:
+ "Admiral Ackbar, a respected Mon Calamari leader, played a key role in the Rebel Alliance's naval operations and strategies.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.gj_oe8LpHqYNYGy.xdEz?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Admiral",
+ affiliation: "Rebel Alliance",
+ placeOfBirth: "Mon Cala",
+ specie: "Mon Calamari",
+ age: "62 years",
+ height: "1.71 meters",
+ },
+ },
+ {
+ id: "hera-syndulla",
+ name: "Hera Syndulla",
+ shortDescription: "Leader of the Ghost crew",
+ description:
+ "Hera Syndulla, a Twi'lek, was a skilled pilot and the leader of the Ghost crew, which carried out missions for the Rebel Alliance.",
+ imageUrl:
+ "https://th.bing.com/th/id/OIG.arPIIMIpy8_2.5bqweV4?pid=ImgGn&w=1024&h=1024&rs=1",
+ facts: {
+ occupation: "Leader of the Ghost crew",
+ affiliation: "Rebel Alliance",
+ placeOfBirth: "Ryloth",
+ specie: "Twi'lek",
+ age: "33 years",
+ height: "1.70 meters",
+ },
+ },
+];
diff --git a/src/images/404.png b/src/images/404.png
new file mode 100644
index 00000000..b6479ee5
Binary files /dev/null and b/src/images/404.png differ
diff --git a/src/images/R2D2.png b/src/images/R2D2.png
new file mode 100644
index 00000000..01eab8a0
Binary files /dev/null and b/src/images/R2D2.png differ
diff --git a/src/images/apikey.png b/src/images/apikey.png
new file mode 100644
index 00000000..2d57db50
Binary files /dev/null and b/src/images/apikey.png differ
diff --git a/src/images/deathStar.png b/src/images/deathStar.png
new file mode 100644
index 00000000..605f1b1e
Binary files /dev/null and b/src/images/deathStar.png differ
diff --git a/src/images/favicon-warsiepedia.png b/src/images/favicon-warsiepedia.png
new file mode 100644
index 00000000..d5386e30
Binary files /dev/null and b/src/images/favicon-warsiepedia.png differ
diff --git a/src/images/header.png b/src/images/header.png
new file mode 100644
index 00000000..ee057137
Binary files /dev/null and b/src/images/header.png differ
diff --git a/src/index.html b/src/index.html
index fd6186f2..061c7531 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,8 +2,9 @@
- -
+
- ${item.name} +
- ${item.facts.occupation} +
- Affiliation:
- ${item.facts.affiliation} +
- Description:
- ${item.description} +
+ +
+
+ THIS PAGE IS NOT ARMED AND OPERATIONAL
+ OR MAYBE IT WAS DESTROYED
+
+
+ + OR MAYBE IT WAS DESTROYED
+