mirror of
https://github.com/spiral-project/ihatemoney.git
synced 2025-05-05 20:51:49 +02:00
introduce chat feature(beta) in ihatemoney
This commit is contained in:
Dr-blue-cyber
parent
4ebda06f39
commit
50c473ddfe
5 changed files with 389 additions and 0 deletions
214
ihatemoney/static/css/chatbox_styles.css
Normal file
214
ihatemoney/static/css/chatbox_styles.css
Normal file
|
|
@ -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 */
|
||||||
|
|
||||||
|
|
||||||
53
ihatemoney/static/css/chatbox_typing.css
Normal file
53
ihatemoney/static/css/chatbox_typing.css
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
9
ihatemoney/static/js/chatbox_app.js
Normal file
9
ihatemoney/static/js/chatbox_app.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
const chatButton = document.querySelector('.chatbox__button');
|
||||||
|
const chatContent = document.querySelector('.chatbox__support');
|
||||||
|
const icons = {
|
||||||
|
isClicked: '<img src="https://img.icons8.com/material-rounded/24/000000/chat--v2.png"/>',
|
||||||
|
isNotClicked: '<img src="https://img.icons8.com/material-rounded/40/000000/chat--v2.png"/> '
|
||||||
|
}
|
||||||
|
const chatbox = new InteractiveChatbox(chatButton, chatContent, icons);
|
||||||
|
chatbox.display();
|
||||||
|
chatbox.toggleIcon(false, chatButton);
|
||||||
42
ihatemoney/static/js/chatbox_chat.js
Normal file
42
ihatemoney/static/js/chatbox_chat.js
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
71
ihatemoney/templates/chat_window.html
Normal file
71
ihatemoney/templates/chat_window.html
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="stylesheet" href="static/css/chatbox_styles.css">
|
||||||
|
<link rel="stylesheet" href="static/css/chatbox_typing.css">
|
||||||
|
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>XChatbox</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="chatbox">
|
||||||
|
<div class="chatbox__support">
|
||||||
|
<div class="chatbox__header">
|
||||||
|
<div class="chatbox-image--header">
|
||||||
|
<img src="#" alt="profile pic">
|
||||||
|
</div>
|
||||||
|
<div class="chatbox__content--header">
|
||||||
|
<h4 class="chatbox__heading--header">Site Helper</h4>
|
||||||
|
<p class="chatbox__description--header">We here to guide you,Please feel free to ask your
|
||||||
|
querries..</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="messages">
|
||||||
|
<div>
|
||||||
|
<div class="messages__item--visitor">
|
||||||
|
Hi! What is your querry?
|
||||||
|
</div>
|
||||||
|
<div class="messages__item--visitor">
|
||||||
|
What is your alert name?
|
||||||
|
</div>
|
||||||
|
<div class="messages__item--operator">
|
||||||
|
What is it?
|
||||||
|
</div>
|
||||||
|
<div class="messages__item--visitor">
|
||||||
|
What is your alert name?
|
||||||
|
</div>
|
||||||
|
<div class="messages__item--operator">
|
||||||
|
What is it?
|
||||||
|
</div>
|
||||||
|
<div class="messages__item--visitor">
|
||||||
|
What is your alert name?
|
||||||
|
</div>
|
||||||
|
.<div class="messages__item--typing">
|
||||||
|
<span class="messages__dot"></span>
|
||||||
|
<span class="messages__dot"></span>
|
||||||
|
<span class="messages__dot"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chatbox__footer">
|
||||||
|
<input type="text" placeholder="Write a message">
|
||||||
|
<p class="chatbox__send--footer">Send</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chatbox__button">
|
||||||
|
<button class="chatbox__button--footer"> button!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="static/js/chatbox_app.css"></script>
|
||||||
|
<script src="static/css/chatbox_chat.css"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue