Skip to content

Commit

Permalink
Merge pull request PriyaGhosal#714 from Ujjwal5705/main
Browse files Browse the repository at this point in the history
Designed a new functional TrailBot
PriyaGhosal authored Oct 15, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents 138bd3c + 923c7d4 commit 3ac96fb
Showing 5 changed files with 203 additions and 64 deletions.
40 changes: 0 additions & 40 deletions auth.css
Original file line number Diff line number Diff line change
@@ -470,43 +470,3 @@ form.sign-in-form {
background: #191919;
}

/* for chatbot styling */
.chatbot-container {
position: fixed;
bottom: 20px; /* Adjust as needed */
right: 20px; /* Adjust as needed */
z-index: 1000; /* Ensure it appears above other elements */
}

.chatbot-button {
background-color: #111; /* Change to your preferred color */
border: none;
border-radius: 50%;
padding: 5px; /* Smaller padding */
cursor: pointer;
position: relative;
width: 50px; /* Adjusted size */
height: 50px; /* Adjusted size */
}

.chatbot-button img {
width: 30px; /* Adjusted image size */
height: 30px; /* Adjusted image size */
}

.tooltip-text {
display: none; /* Hide by default */
position: absolute;
top: -10%; /* Position above the button */
left: -230px;
transform: translateX(-230px, -50%);
background-color: #333; /* Background color for tooltip */
color: #fff; /* Tooltip text color */
padding: 5px;
border-radius: 5px;
white-space: nowrap; /* Prevent text from wrapping */
}

.chatbot-button:hover .tooltip-text {
display: block; /* Show on hover */
}
12 changes: 1 addition & 11 deletions auth.html
Original file line number Diff line number Diff line change
@@ -98,17 +98,7 @@ <h3>One of us ?</h3>
<a href="index.html" class="homeBtn">
<i class="fas fa-home"></i>
</a>
<a href="chatbot.html">
<div class="fixed bottom-0 right-2 chatbot-container">
<button class="chatbot-button group">
<img class="h-20" src="chatbot.gif" alt="chatbot" />
<span class="tooltip-text">
Welcome to Buddytrail! <br />
How can I help You? ^_^
</span>
</button>
</div>
</a>

<script src="auth.js"></script>
<!-- <script type="module" src="SignUpWithGoogle.js"></script> -->
<script type="module" src="SignIn-Up-withGithub.js"></script>
123 changes: 123 additions & 0 deletions chatbot.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

#chatbot {
width: 350px;
border: 1px solid #e2e2e2;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
position: fixed;
bottom: 20px;
right: 20px;
display: none;
flex-direction: column;
transition: all 0.3s ease;
overflow: hidden;
}

#chatbox {
height: 350px;
overflow-y: auto;
padding: 15px;
border-bottom: 1px solid #e2e2e2;
background-color: #f9f9f9;
}

#messages {
margin-bottom: 10px;
}

.user, .bot {
padding: 8px 12px;
border-radius: 15px;
max-width: 70%;
word-wrap: break-word;
margin: 5px 0;
}

.user {
background-color: #007bff;
color: #fff;
text-align: right;
font-size: 15px;
}

.bot {
background-color: #e1f5fe;
color: #333;
text-align: left;
font-size: 15px;
}

#user-input {
width: calc(100% - 22px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
margin: 10px 0;
}

#send-button {
padding: 10px 15px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

#send-button:hover {
background-color: #0056b3;
}

#chat-icon {
width: 60px;
height: 60px;
position: fixed;
bottom: 20px;
right: 20px;
background-color: #007bff;
color: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s;
}

#chat-icon:hover {
background-color: #0056b3;
}

#chat-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #007bff;
color: #fff;
padding-left: 10px;
font-size: 1.5rem;
}

#close-button {
background: none;
border: none;
padding: 15px;
color: rgb(229, 63, 63);
font-size: 1.5rem;
font-weight: 700;
cursor: pointer;
}

#close-button:hover {
color: #ffcccc;
}
61 changes: 61 additions & 0 deletions chatbot.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
const messagesDiv = document.getElementById('messages');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');
const chatIcon = document.getElementById('chat-icon');
const chatbotContainer = document.getElementById('chatbot');

// Function to append messages to the chatbox
function appendMessage(sender, text) {
const messageElement = document.createElement('div');
messageElement.classList.add(sender);
messageElement.textContent = text;
messagesDiv.appendChild(messageElement);
messagesDiv.scrollTop = messagesDiv.scrollHeight; // Scroll to the bottom
}

// Simple bot responses
function getBotResponse(userText) {
userText = userText.toLowerCase();

if (userText.includes('hello')) {
return "Hello! How can I help you today?";
} else if (userText.includes('how are you')) {
return "I'm just a bot, but thanks for asking!";
} else if (userText.includes('bye')) {
return "Goodbye! Have a great day!";
} else if (userText.includes('what is buddytrail?') || userText.includes('what is buddytrail ?') || userText.includes('what is buddytrail')){
return "BuddyTrail is your premier travel companion designed to assist you in planning and organizing your trips. Whether you are arranging a family vacation or an adventure with friends, BuddyTrail helps you discover and explore remarkable destinations. We simplify the process of finding the best hotels and securing affordable flights, ensuring a seamless travel experience from start to finish.";
} else {
return "I'm sorry, I don't understand that.";
}
}

// Show/hide chatbot on icon click
chatIcon.addEventListener('click', () => {
const isVisible = chatbotContainer.style.display === 'flex';
chatbotContainer.style.display = isVisible ? 'none' : 'flex';
console.log("Chatbot visibility: ", chatbotContainer.style.display); // Debugging statement
});

// Event listener for the send button
sendButton.addEventListener('click', () => {
const userText = userInput.value;
if (userText) {
appendMessage('user', userText);
userInput.value = ''; // Clear input field
const botResponse = getBotResponse(userText);
appendMessage('bot', botResponse);
}
});

// Optional: Allow pressing 'Enter' to send messages
userInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
sendButton.click();
}
});

// Event listener for the close button
document.getElementById('close-button').addEventListener('click', () => {
chatbotContainer.style.display = 'none'; // Hide chatbot on close
});
31 changes: 18 additions & 13 deletions index.html
Original file line number Diff line number Diff line change
@@ -24,7 +24,7 @@
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>

<link rel="stylesheet" href="chatbot.css">
<title>BuddyTrail</title>
<style>
* {
@@ -169,10 +169,10 @@
<body class="light-mode">

<!-- Google Translate Button -->
<div class="translate-container">
<!-- <div class="translate-container">
<button class="language-toggle" id="languageToggle">🌐</button>
<div id="google_translate_element"></div>
</div>
</div> -->

<script>
// Initialization function
@@ -1019,18 +1019,23 @@ <h2>Rate your experience</h2>
</section>


<!-- Chatbot icon -->
<div id="chat-icon">🤖</div>

<a href="chatbot.html">
<div class="fixed bottom-0 right-2 chatbot-container">
<button class="chatbot-button group">
<img class="h-20" src="chatbot.gif" alt="chatbot" />
<span class="tooltip-text">
Welcome to Buddytrail! <br />
How can I help You? ^_^
</span>
</button>
<!-- Chatbot container -->
<div id="chatbot">
<div id="chat-header">
<span>TrailBot</span>
<button id="close-button"></button> <!-- Close button -->
</div>
<div id="chatbox">
<div id="messages"></div>
</div>
</a>
<input type="text" id="user-input" placeholder="Type your message here..." />
<button id="send-button">Send</button>
</div>

<script src="chatbot.js"></script>
<div class="fixed bottom-0 right-2 scroll-container">
<button class="scroll-button group" id="scrollTopBtn">
<span class="tooltip-text-scroll">

0 comments on commit 3ac96fb

Please sign in to comment.