From 50c473ddfea7c63250ea1f6344ee158f453e365b Mon Sep 17 00:00:00 2001 From: Dr-blue-cyber Date: Mon, 30 Aug 2021 09:06:06 +0530 Subject: [PATCH] introduce chat feature(beta) in ihatemoney --- ihatemoney/static/css/chatbox_styles.css | 214 +++++++++++++++++++++++ ihatemoney/static/css/chatbox_typing.css | 53 ++++++ ihatemoney/static/js/chatbox_app.js | 9 + ihatemoney/static/js/chatbox_chat.js | 42 +++++ ihatemoney/templates/chat_window.html | 71 ++++++++ 5 files changed, 389 insertions(+) create mode 100644 ihatemoney/static/css/chatbox_styles.css create mode 100644 ihatemoney/static/css/chatbox_typing.css create mode 100644 ihatemoney/static/js/chatbox_app.js create mode 100644 ihatemoney/static/js/chatbox_chat.js create mode 100644 ihatemoney/templates/chat_window.html diff --git a/ihatemoney/static/css/chatbox_styles.css b/ihatemoney/static/css/chatbox_styles.css new file mode 100644 index 00000000..80a7ac69 --- /dev/null +++ b/ihatemoney/static/css/chatbox_styles.css @@ -0,0 +1,214 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +*, html { + --primaryGradient: linear-gradient(93.12deg, #588018 0.52%, #9add31 100%); + --secondaryGradient: linear-gradient(268.91deg, #588018 -2.14%, #9add31 99.69%); + --primaryBoxShadow: 0px 10px 15px #0ce0301a; + --secondaryBoxShadow: 0px -10px 15px rgba(0, 0, 0, 0.1); + --light: 300; + --regular: 400; + --semiBold: 600; + --extraLight: 300; + --italic: 300; + --primary: #9add31; +} + +/* 300;0,400;0,600;1,300 */ + +body { + font-family: 'Nunito', sans-serif; + font-weight: 400; + font-size: 100%; + +} + +.chatbox__support { + background: #f9f9f9; + height: 450px; + width: 350px; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} + +/* HEADER */ +.chatbox__header { + background: var(--primaryGradient); + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 15px 20px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + box-shadow: var(--primaryBoxShadow); +} + +.chatbox__image--header { + margin-right: 10px; +} + +.chatbox__heading--header { + font-size: 1.2rem; + color: white; +} + +.chatbox__description--header { + font-size: .9rem; + color: white; +} + +/* Messages */ +.chatbox__messages { + padding: 0 20px; +} + +.messages__item { + margin-top: 10px; + background: #E0E0E0; + padding: 8px 12px; + max-width: 70%; +} + +.messages__item--visitor, +.messages__item--typing { + border-top-left-radius: 20px; + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; +} + +.messages__item--operator { + border-top-left-radius: 20px; + border-top-right-radius: 20px; + border-bottom-left-radius: 20px; + background: var(--primary); + color: white; +} + +/* FOOTER */ +.chatbox__footer { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 20px 20px; + background: var(--secondaryGradient); + box-shadow: var(--secondaryBoxShadow); + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; + margin-top: 20px; +} + +.chatbox__footer input { + border: none; + padding: 10px 10px; + border-radius: 30px; + text-align: center; +} + +.chatbox__send--footer { + color: white; +} + +.chatbox__button button, +.chatbox__button button:focus, +.chatbox__button button:visited { + padding: 10px; + background: #9add31; + border: none; + outline: none; + border-top-left-radius: 50px; + border-top-right-radius: 50px; + border-bottom-left-radius: 50px; + box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1); + cursor: pointer; +} + +/* CHATBOX +=============== */ +.chatbox { + position: absolute; + bottom: 30px; + right: 30px; +} + +/* CONTENT IS CLOSE */ +.chatbox__support { + display: flex; + flex-direction: column; + background: #eee; + width: 300px; + height: 350px; + z-index: -123456; + opacity: 0; + transition: all .5s ease-in-out; +} + +/* CONTENT ISOPEN */ +.chatbox--active { + transform: translateY(-40px); + z-index: 123456; + opacity: 1; + +} + +/* BUTTON */ +.chatbox__button { + text-align: right; +} + + +/* HEADER */ +.chatbox__header { + position: sticky; + top: 0; + background: #9add31; +} + +/* MESSAGES */ +.chatbox__messages { + margin-top: auto; + display: flex; + flex-direction: column; + overflow-y: scroll; + flex-direction: column-reverse; +} + +.messages__item { + background: #9add31; + max-width: 60.6%; + width: fit-content; +} + + + +.messages__item--operator { + margin-left: auto; +} + +.messages__item--visitor { + margin-right: auto; +} + +/* FOOTER */ +.chatbox__footer { + position: sticky; + bottom: 0; + background: #9add31; + +} + +.chatbox__button button{ + padding: 10px; + border: none; + color: #9add31; +} + + + /* changes */ + + \ No newline at end of file diff --git a/ihatemoney/static/css/chatbox_typing.css b/ihatemoney/static/css/chatbox_typing.css new file mode 100644 index 00000000..ed0ff4f7 --- /dev/null +++ b/ihatemoney/static/css/chatbox_typing.css @@ -0,0 +1,53 @@ +.messages__item--typing { + will-change: transform; + width: auto; + border-top-right-radius: 20px; + border-top-left-radius: 20px; + border-bottom-right-radius: 20px; + padding: 15px 20px; + display: table; + margin-right: auto; + position: relative; + animation: 2s bulge infinite ease-out; +} + +.messages__item--typing::before, +.messages__item--typing::after { + content: ''; + position: absolute; + bottom: -2px; + left: -2px; + height: 10px; + width: 10px; + border-radius: 50%; +} +.messages__item--typing::after { + height: 10px; + width: 10px; + left: -10px; + bottom: -10px; +} +span.messages__dot { + height: 8px; + width: 8px; + float: left; + margin: 0 1px; + background-color: #9E9EA1; + display: block; + border-radius: 50%; + opacity: 0.4; + animation: 1s blink infinite; +} + +@keyframes blink { + 50% { + opacity: 1; + } +} + +@keyframes bulge { + 50% { + transform: scale(1.05); + } +} + \ No newline at end of file diff --git a/ihatemoney/static/js/chatbox_app.js b/ihatemoney/static/js/chatbox_app.js new file mode 100644 index 00000000..b13f7851 --- /dev/null +++ b/ihatemoney/static/js/chatbox_app.js @@ -0,0 +1,9 @@ +const chatButton = document.querySelector('.chatbox__button'); +const chatContent = document.querySelector('.chatbox__support'); +const icons = { + isClicked: '', + isNotClicked: ' ' +} +const chatbox = new InteractiveChatbox(chatButton, chatContent, icons); +chatbox.display(); +chatbox.toggleIcon(false, chatButton); \ No newline at end of file diff --git a/ihatemoney/static/js/chatbox_chat.js b/ihatemoney/static/js/chatbox_chat.js new file mode 100644 index 00000000..3f95b50d --- /dev/null +++ b/ihatemoney/static/js/chatbox_chat.js @@ -0,0 +1,42 @@ +class InteractiveChatbox { + constructor(a, b, c) { + this.args = { + button: a, + chatbox: b + } + this.icons = c; + this.state = false; + } + + display() { + const {button, chatbox} = this.args; + + button.addEventListener('click', () => this.toggleState(chatbox)) + } + + toggleState(chatbox) { + this.state = !this.state; + this.showOrHideChatBox(chatbox, this.args.button); + } + + showOrHideChatBox(chatbox, button) { + if(this.state) { + chatbox.classList.add('chatbox--active') + this.toggleIcon(true, button); + } else if (!this.state) { + chatbox.classList.remove('chatbox--active') + this.toggleIcon(false, button); + } + } + + toggleIcon(state, button) { + const { isClicked, isNotClicked } = this.icons; + let b = button.children[0].innerHTML; + + if(state) { + button.children[0].innerHTML = isClicked; + } else if(!state) { + button.children[0].innerHTML = isNotClicked; + } + } +} \ No newline at end of file diff --git a/ihatemoney/templates/chat_window.html b/ihatemoney/templates/chat_window.html new file mode 100644 index 00000000..682a52d9 --- /dev/null +++ b/ihatemoney/templates/chat_window.html @@ -0,0 +1,71 @@ + + + + + + + + + + + XChatbox + + + +
+
+
+
+
+ profile pic +
+
+

Site Helper

+

We here to guide you,Please feel free to ask your + querries..

+
+
+
+
+
+ Hi! What is your querry? +
+
+ What is your alert name? +
+
+ What is it? +
+
+ What is your alert name? +
+
+ What is it? +
+
+ What is your alert name? +
+ .
+ + + +
+
+
+
+ +

Send

+
+
+ +
+ +
+
+
+ + + + + + \ No newline at end of file