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

updated chatbot

Browse source
This commit is contained in:
JSriwongsa 2023-07-24 09:43:24 -05:00
parent 8b1a9a1840
commit dcdbc0c1e3
3 changed files with 139 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
donation_website/index.html
View file

@ -323,10 +323,10 @@
<div class="accordion">
<div class="container">
<div class="content-2">
<h2>How we can make a difference</h2>
<h2>Why blood donation is important</h2>
<div class="question-answ">
<div class="question">
<h3 class="title-question">Give blood</h3>
<h3 class="title-question">Saving Lives</h3>
<button class="question-btn">
<span class="icon-up">
<i class='bx bx-chevron-up'></i>
@ -337,12 +337,12 @@
</button>
</div>
<div class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>Blood donations are critical in medical emergencies and surgeries where patients may need blood transfusions due to accidents, organ transplants, and various medical conditions. By donating blood, you can directly contribute to saving someone's life.</p>
</div>
</div>
<div class="question-answ">
<div class="question">
<h3 class="title-question">Host a Blood Drive</h3>
<h3 class="title-question">Treating Medical Conditions</h3>
<button class="question-btn">
<span class="icon-up">
<i class='bx bx-chevron-up'></i>
@ -353,12 +353,12 @@
</button>
</div>
<div class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>Many medical conditions, such as anemia, thalassemia, and certain cancers, require regular blood transfusions to manage the symptoms and improve the quality of life for patients.</p>
</div>
</div>
<div class="question-answ">
<div class="question">
<h3 class="title-question">Volunteer</h3>
<h3 class="title-question">Supporting Healthcare Systems</h3>
<button class="question-btn">
<span class="icon-up">
<i class='bx bx-chevron-up'></i>
@ -369,12 +369,12 @@
</button>
</div>
<div class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>Hospitals and medical facilities need a steady and reliable blood supply to handle emergencies and provide proper care to patients.</p>
</div>
</div>
<div class="question-answ">
<div class="question">
<h3 class="title-question">Join Our Team</h3>
<h3 class="title-question">Supporting Specific Blood Types</h3>
<button class="question-btn">
<span class="icon-up">
<i class='bx bx-chevron-up'></i>
@ -385,9 +385,41 @@
</button>
</div>
<div class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>By donating blood, individuals with rarer blood types can help meet the needs of patients who share their blood type.</p>
</div>
</div>
</div>
<div class="question-answ">
<div class="question">
<h3 class="title-question">Health Benefits for Donors</h3>
<button class="question-btn">
<span class="icon-up">
<i class='bx bx-chevron-up'></i>
</span>
<span class="icon-down">
<i class='bx bx-chevron-down'></i>
</span>
</button>
</div>
<div class="answer">
<p>Donating blood can help reduce the risk of certain health conditions, such as hemochromatosis, by lowering the iron levels in the body.</p>
</div>
</div>
<div class="question-answ">
<div class="question">
<h3 class="title-question">Screening for Health Conditions</h3>
<button class="question-btn">
<span class="icon-up">
<i class='bx bx-chevron-up'></i>
</span>
<span class="icon-down">
<i class='bx bx-chevron-down'></i>
</span>
</button>
</div>
<div class="answer">
<p>Before blood is used for transfusions, it undergoes rigorous testing for infectious diseases, ensuring the safety of the blood supply. Donating blood can also act as an opportunity to identify potential health issues in donors.</p>
</div>
</div>
</div>
<div class="content-2-img">
<img src="images/accordion.png" alt="">
@ -458,7 +490,7 @@
</div>
</div>
<div class="show-chatbot">
<div class="chatbot-aid">
<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>
@ -466,16 +498,13 @@
<div class="chatbot">
<div class="chatbot-container">
<h2> &nbsp; Chatbot</h2>
<span class="chatbot-icon"><i class='bx bx-x'></i></span>
<span class="chatbot-close-btn 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>

80
donation_website/main.js
View file

@ -15,6 +15,7 @@ for (let x = 0; x < menuTrigger.length; x++){
closeTrigger[x].addEventListener('click', closeMenu);
overlay.addEventListener('click', closeMenu)
}
//submenu
const submenu = document.querySelectorAll('.sub-trigger');
submenu.forEach((menu) => menu.addEventListener('click', toggle));
@ -25,6 +26,7 @@ const submenu = document.querySelectorAll('.sub-trigger');
this.classList.toggle('expand')
}
}
//progress
function progressBar(progressBarNum, progressStart, progressEnd, speed) {
@ -76,6 +78,7 @@ const swiper = new Swiper('.swiper', {
prevEl: '.button-prev',
},
});
//accordion
const questions = document.querySelectorAll('.question-answ');
questions.forEach(function(question){
@ -88,4 +91,79 @@ const questions = document.querySelectorAll('.question-answ');
})
question.classList.toggle('show-text');
})
})
})
//chatbot
const sendBtn = document.querySelector(".chat-input span");
const chatInput = document.querySelector(".chat-input textarea");
const chatbox = document.querySelector(".chatbox");
const chatbotToggler = document.querySelector(".chatbot-toggler");
const chatbotCloseBtn = document.querySelector(".chatbot-close-btn");
let userMessage;
const api_key = "API KEY";
const inputHeight = chatInput.scrollHeight;
const createChat = (message, className) => {
const chat_ = document.createElement("li");
chat_.classList.add("chat", className);
let chatContent = className === "outgoing" ? `<p></p>`:`<span class="chatbot-icon"><i class='bx bx-bot'></i></span><p></p>`;
chat_.innerHTML = chatContent;
chat_.querySelector("p").textContent = message;
return chat_;
}
const generateRespond = (incomingChat_) => {
const api_url = "https://api.openai.com/v1/chat/completions";
const messageElement = incomingChat_.querySelector("p");
const requestOptions = {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${api_key}`
},
body:JSON.stringify({
model: "gpt-3.5-turbo",
messages: [{role: "user", content: userMessage}]
})
}
fetch(api_url, requestOptions).then(res => res.json()).then(data => {
messageElement.textContent = data.choices[0].message.content;
}).catch((error) => {
messageElement.classList.add("error");
messageElement.textContent = "Something went wrong, please try again!";
}).finally(() => chatbox.scrollTo(0, chatbox.scrollHeight));
}
const handleChat = () =>{
userMessage = chatInput.value.trim();
if(!userMessage) return;
chatInput.value = "";
chatInput.style.height = `${inputHeight}px`
chatbox.appendChild(createChat(userMessage, "outgoing"));
chatbox.scrollTo(0, chatbox.scrollHeight);
setTimeout (() => {
const incomingChat_ = createChat("Typing...", "incoming")
chatbox.appendChild(incomingChat_);
chatbox.scrollTo(0, chatbox.scrollHeight);
generateRespond(incomingChat_);
}, 600);
}
chatInput.addEventListener("input", () => {
chatInput.style.height = `${inputHeight}px`
chatInput.style.height = `${chatInput.scrollHeight}px`
});
chatInput.addEventListener("keydown", (x) => {
if(x.key === "Enter" && !x.shiftKey && window.innerWidth > 800){
x.preventDefault();
handleChat();
}
});
sendBtn.addEventListener("click", handleChat);
chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot"));
chatbotCloseBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot"));

17
donation_website/style.css
View file

@ -477,6 +477,7 @@ form.search i{
}
.content-1-text p{
margin: 0.5rem 0 2.5rem;
color: #625a71;
text-align: justify;
}
.content-1-text .primary-btn:hover{
@ -679,6 +680,11 @@ form.search i{
cursor: pointer;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 1000;
}
.show-chatbot .chatbot-toggler{
transform: rotate(90deg);
}
.chatbot-toggler span{
position: absolute;
@ -700,6 +706,8 @@ form.search i{
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);
transition: all 0.1s ease;
transform-origin: bottom right;
opacity: 0;
pointer-events: none;
z-index: 1000;
@ -734,7 +742,7 @@ form.search i{
}
.chatbot .chatbox{
height: 400px;
padding: 30px 20px 70px;
padding: 30px 20px 100px;
overflow-y: auto;
}
.chatbox .chat{
@ -742,12 +750,17 @@ form.search i{
}
.chatbox .chat p{
max-width: 75%;
white-space: pre-wrap;
background: #E34234;
padding: 12px 16px;
border-radius: 5px 5px 0 5px;
color: white;
font-size: 14px;
}
.chatbox .chat p.error{
color: red;
background-color: rgb(250, 225, 225);
}
.chatbox .incoming span{
height: 32px;
width: 32px;
@ -790,6 +803,7 @@ form.search i{
height: 55px;
width: 100%;
overflow-y: hidden;
max-height: 200px;
}
.chat-input textarea:valid ~ span{
visibility: visible;
@ -802,6 +816,7 @@ form.search i{
line-height: 55px;
visibility: hidden;
}
/**/