diff --git a/src/global/storage.js b/src/global/storage.js index 6bd1dea..33b2abb 100644 --- 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 = ` + +
+ ` + + + */ + diff --git a/src/ui/pages/chat/index.html b/src/ui/pages/chat/index.html new file mode 100644 index 0000000..df6dd65 --- /dev/null +++ b/src/ui/pages/chat/index.html @@ -0,0 +1,28 @@ + + + + + + + + Chat + + + + + + + + +
+
+
+
+
+ + + diff --git a/src/ui/pages/chat/script.js b/src/ui/pages/chat/script.js new file mode 100644 index 0000000..133600c --- /dev/null +++ b/src/ui/pages/chat/script.js @@ -0,0 +1,39 @@ +function renderHeadInfos({ persona, HTMLElementToAppend }) { + const { imgPath, flagClass, from, name, accent } = persona; + + const htmlStructure = ` +
+
+ ${name} +
+ ${name} +
+
+ + From +
+
+ + Speaks +
+
+
+ ${from} + ${accent} English +
+
+
+
+
+ `; + 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 new file mode 100644 index 0000000..7b73b47 --- /dev/null +++ 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%; +}