muayjtp/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added chatbot

Browse source
This commit is contained in:
JSriwongsa 2023-07-22 19:43:46 -05:00
parent 1eb724f532
commit 8b1a9a1840
2 changed files with 180 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
donation_website/index.html
View file

@ -457,6 +457,32 @@
</div>
</div>
</div>
<div class="show-chatbot">
<button class="chatbot-toggler">
<span class="chatbot-icon"><i class='bx bx-message-alt'></i></span>
<span class="chatbot-icon"><i class='bx bx-x'></i></span>
</button>
<div class="chatbot">
<div class="chatbot-container">
<h2> &nbsp; Chatbot</h2>
<span class="chatbot-icon"><i class='bx bx-x'></i></span>
</div>
<ul class="chatbox">
<li class="chat incoming">
<span class="chatbot-icon"><i class='bx bx-bot' ></i></span>
<p>Hi there &#128075; <br> What can I help you with?</p>
</li>
<li class="chat outgoing">
<p>Hello!</p>
</li>
</ul>
<div class="chat-input">
<textarea placeholder="Enter your message" required></textarea>
<span id="send-btn" class="chatbot-icon"><i class='bx bx-send'></i></span>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

154
donation_website/style.css
View file

@ -663,6 +663,145 @@ form.search i{
.content-2 .show-text .icon-down{
display: none;
}
/*----- chatbot -----*/
.chatbot-toggler{
display: flex;
position: fixed;
bottom: 35px;
right: 40px;
height: 50px;
width: 50px;
background: #E34234;
color: white;
border: none;
outline: none;
border-radius: 50%;
cursor: pointer;
align-items: center;
justify-content: center;
}
.chatbot-toggler span{
position: absolute;
}
.chatbot-toggler span:last-child, .show-chatbot .chatbot-toggler span:first-child{
opacity: 0;
}
.chatbot-toggler span i{
font-size: 22px;
line-height: 40px;
}
.chatbot{
position: fixed;
background: white;
width: 420px;
right: 40px;
bottom: 100px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 0 120px 0 rgba(0, 0, 0, 0.1), 0 32px 64px -48px rgba(0, 0, 0, 0.5);
transform: scale(0.5);
opacity: 0;
pointer-events: none;
z-index: 1000;
}
.show-chatbot .chatbot{
transform: scale(1);
opacity: 1;
pointer-events: auto;
}
.show-chatbot .chatbot-toggler span:last-child{
opacity: 1;
}
.chatbot .chatbot-container{
position: relative;
background-color: #E34234;
padding: 16px 0;
}
.chatbot .chatbot-container h2{
color: white;
font-size: 20px;
text-transform: uppercase;
}
.chatbot .chatbot-container span{
display: none;
position: absolute;
right: 20px;
top: 50%;
color: white;
font-size: 22px;
transform: translateY(-50%);
cursor: pointer;
}
.chatbot .chatbox{
height: 400px;
padding: 30px 20px 70px;
overflow-y: auto;
}
.chatbox .chat{
display: flex;
}
.chatbox .chat p{
max-width: 75%;
background: #E34234;
padding: 12px 16px;
border-radius: 5px 5px 0 5px;
color: white;
font-size: 14px;
}
.chatbox .incoming span{
height: 32px;
width: 32px;
background: #E34234;
color: white;
text-align: center;
line-height: 36px;
border-radius: 5px;
margin: 0 10px 10px 0;
align-self: flex-end;
}
.chatbox .incoming i{
font-size: 22px;
}
.chatbox .outgoing{
justify-content: flex-end;
margin: 20px 0;
}
.chatbox .incoming p{
color: black;
background-color: lightgrey;
border-radius: 5px 5px 5px 0;
}
.chatbot .chat-input{
position: absolute;
display: flex;
width: 100%;
padding: 5px 20px;
gap: 5px;
bottom: 0;
background: white;
border-top: 1px solid gray;
}
.chat-input textarea{
border: none;
outline: none;
font-size: 16px;
padding: 16px 15px 16px 0;
resize: none;
height: 55px;
width: 100%;
overflow-y: hidden;
}
.chat-input textarea:valid ~ span{
visibility: visible;
}
.chat-input span{
font-size: 22px;
color: red;
cursor: pointer;
align-self: self-end;
line-height: 55px;
visibility: hidden;
}
@ -751,4 +890,19 @@ form.search i{
.guide{
padding: 1rem 7rem;
}
}
@media screen and (max-width:490px){
.chatbot{
width: 100%;
height: 100%;
right: 0;
bottom: 0;
}
.chatbot .chatbox{
height: 90%;
}
.chatbot .chatbot-container span{
display: block;
}
}