feat: add chat

luccas-specht · Aug 30, 2024 · 77c5d9b · 77c5d9b
1 parent f374a26
commit 77c5d9b
Show file tree

Hide file tree

Showing 4 changed files with 195 additions and 0 deletions.
diff --git a/src/global/storage.js b/src/global/storage.js
@@ -129,3 +129,28 @@ function setPersonasOnLocalStorage() {
 (function main() {
   setPersonasOnLocalStorage();
 })();
+
+
+
+/**
+ * 
+ * 1 - 
+ - return in string
+ - if two mark, order the names by alphabetical order
+ - sortByMarkDescending('[name: Alice, mark: 90]')
+ * 2 - contact form in react
+   3 - clicable card, initially only one card is face up. Whenever a card is clicked
+   the card that was face up is turned over to face down and the clicked card is turned over
+   to face up. Only one card is ever face up
+   when an up card is clicked it remains up
+
+
+   // example case:
+   document.body.innerHTML = `
+    <table>
+    </table>
+   `
+
+
+ */
+
diff --git a/src/ui/pages/chat/index.html b/src/ui/pages/chat/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="../../assets/svg/logo-speak-comigo.svg"
+    />
+    <meta name="description" content="Chat content" />
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Chat</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="./style.css" />
+    <link rel="stylesheet" href="../../styles/global.css" />
+    <script src="../../components/headerMenu/script.js" defer></script>
+  </head>
+  <body>
+    <header-menu></header-menu>
+    <div class="main-layout">
+      <div class="chat-container">
+        <main></main>
+      </div>
+    </div>
+  </body>
+  <script src="./script.js"></script>
+</html>
diff --git a/src/ui/pages/chat/script.js b/src/ui/pages/chat/script.js
@@ -0,0 +1,39 @@
+function renderHeadInfos({ persona, HTMLElementToAppend }) {
+  const { imgPath, flagClass, from, name, accent } = persona;
+
+  const htmlStructure = `
+    <div class="chat-container">
+      <header class="header">
+          <img src=${imgPath} alt=${name} />
+          <div class="wrapper-header-info">
+            <strong>${name}</strong>
+            <div class="header-info">
+              <div>
+                <i class="world"></i>
+                <span>From</span>
+              </div>
+              <div>
+                <i class="${flagClass} custom-flag"></i>
+                <span>Speaks</span>
+              </div>
+            </div>
+            <div class="header-info-locales">
+              <span>${from}</span>
+              <span class="last-span-wrapper">${accent} English</span>
+            </div>
+          </div>
+        </header>
+        <div class="border"></div>
+      </div>
+  `;
+  HTMLElementToAppend.innerHTML = htmlStructure;
+}
+
+(async function main() {
+  if (window.location) {
+    const personaData = localStorage.getItem('personaData');
+    const persona = JSON.parse(personaData);
+    const HTMLElementToAppend = document.querySelector('.main-layout');
+    renderHeadInfos({ persona, HTMLElementToAppend });
+  }
+})();
diff --git a/src/ui/pages/chat/style.css b/src/ui/pages/chat/style.css
@@ -0,0 +1,103 @@
+.main-layout {
+  padding-bottom: 0 !important;
+}
+
+.chat-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  max-width: 375px;
+  flex-direction: column;
+  margin-top: 20px;
+}
+
+.header {
+  display: flex;
+  width: 100%;
+  height: min-content;
+
+  img {
+    max-width: 50px;
+    max-height: 50px;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    margin: 0 10px 10px 0;
+  }
+}
+
+.border {
+  width: 100%;
+  margin-top: 10px;
+  border-bottom: 1.5px solid #e2e2e2;
+  box-shadow: 0px 0px 4px 0px #e2e2e2;
+}
+
+.wrapper-header-info {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-left: 10px;
+
+  strong {
+    font-weight: 800;
+    font-size: 18px;
+    margin-bottom: 5px;
+    color: #333333;
+  }
+}
+
+.header-info {
+  display: flex;
+  width: 100%;
+  align-content: flex-start;
+  justify-content: space-between;
+  margin-bottom: 2px;
+}
+
+.header-info div {
+  display: flex;
+  align-items: flex-end;
+}
+
+.header-info div span {
+  font-size: 14px;
+  color: #babec1;
+  font-weight: bolder;
+}
+
+.header-info div i {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.header-info .custom-flag {
+  width: 24px;
+  height: 16px;
+  margin-left: 2px;
+}
+
+.header-info-locales {
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.header-info-locales .last-span-wrapper {
+  text-align: right;
+}
+
+.header-info-locales span {
+  font-size: 15px;
+  font-weight: 700;
+  color: #333333;
+  width: 100%;
+}