85 lines
3.3 KiB
JavaScript
85 lines
3.3 KiB
JavaScript
function handleOptionClick() {
|
|
const chatBody = document.getElementById('chatBody');
|
|
const userMsg = this.innerText;
|
|
|
|
// Add User Message
|
|
const userDiv = document.createElement('div');
|
|
userDiv.className = 'msg user';
|
|
userDiv.style.background = '#DCF8C6';
|
|
userDiv.style.alignSelf = 'flex-end';
|
|
userDiv.style.padding = '0.75rem 1rem';
|
|
userDiv.style.borderRadius = '12px';
|
|
userDiv.style.borderTopRightRadius = '0';
|
|
userDiv.style.fontSize = '0.9rem';
|
|
userDiv.style.maxWidth = '85%';
|
|
userDiv.innerText = userMsg;
|
|
chatBody.appendChild(userDiv);
|
|
|
|
// Hide the options that were just clicked
|
|
this.parentElement.style.display = 'none';
|
|
|
|
// Bot Response
|
|
setTimeout(() => {
|
|
const botDiv = document.createElement('div');
|
|
botDiv.className = 'msg bot';
|
|
botDiv.style.background = 'white';
|
|
botDiv.style.alignSelf = 'flex-start';
|
|
botDiv.style.padding = '0.75rem 1rem';
|
|
botDiv.style.borderRadius = '12px';
|
|
botDiv.style.borderTopLeftRadius = '0';
|
|
botDiv.style.fontSize = '0.9rem';
|
|
botDiv.style.maxWidth = '85%';
|
|
|
|
if (userMsg === 'Book Token' || userMsg === 'Book for Today') {
|
|
botDiv.innerText = "Great! Please select your preferred time slot:";
|
|
|
|
const optDiv = document.createElement('div');
|
|
optDiv.className = 'msg-options';
|
|
optDiv.style.display = 'flex';
|
|
optDiv.style.flexDirection = 'column';
|
|
optDiv.style.gap = '0.5rem';
|
|
optDiv.style.paddingTop = '1rem';
|
|
optDiv.innerHTML = `
|
|
<button class="opt">10:00 AM</button>
|
|
<button class="optSource-tag online">10:30 AM</button>
|
|
`;
|
|
chatBody.appendChild(botDiv);
|
|
chatBody.appendChild(optDiv);
|
|
bindOptions();
|
|
} else if (userMsg === '10:00 AM' || userMsg === '10:30 AM') {
|
|
botDiv.innerHTML = `✅ Confirmed! Your token is *#ON-3* for the ${userMsg} slot.<br><br>💳 *Payment Required*: Please pay ₹500 to activate your token: <a href="#">razorpay.me/curaflow</a><br><br>Also, to help Dr. Sharma prepare, could you briefly describe your symptoms?`;
|
|
chatBody.appendChild(botDiv);
|
|
} else if (userMsg === 'Check Queue' || userMsg === 'Check Queue Status') {
|
|
botDiv.innerText = "Current status: 5 people ahead of you. Estimated wait time: 25 minutes.";
|
|
chatBody.appendChild(botDiv);
|
|
} else {
|
|
botDiv.innerText = "Got it. I've shared these details with Dr. Sharma. Your token is active. See you soon! 🏥";
|
|
chatBody.appendChild(botDiv);
|
|
}
|
|
|
|
chatBody.scrollTop = chatBody.scrollHeight;
|
|
}, 1000);
|
|
}
|
|
|
|
function bindOptions() {
|
|
document.querySelectorAll('.opt').forEach(button => {
|
|
button.onclick = null;
|
|
button.addEventListener('click', handleOptionClick);
|
|
});
|
|
}
|
|
|
|
// Initial bind
|
|
bindOptions();
|
|
|
|
// Scroll animations placeholder
|
|
window.addEventListener('scroll', () => {
|
|
const nav = document.querySelector('.glass-nav');
|
|
if (window.scrollY > 50) {
|
|
nav.style.height = '70px';
|
|
nav.style.background = 'rgba(255, 255, 255, 0.9)';
|
|
} else {
|
|
nav.style.height = '80px';
|
|
nav.style.background = 'rgba(255, 255, 255, 0.7)';
|
|
}
|
|
});
|