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