-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathport.html
176 lines (155 loc) · 6.49 KB
/
port.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="port.css" />
<link href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap" rel="stylesheet"/>
<style>
.goog-te-gadget {
position: fixed;
bottom: 0;
left: 0%;
transform: translateX(0%);
width: auto;
height: 50px;
line-height: 15px;
line-width: 1000px;
background-color: #fff;
border: 0px solid #ccc;
border-radius: 0px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
padding: 0 10px;
}
</style>
</head>
<body>
<nav id="navbar" class="nav">
<div class="left-nav-list">
<div id="chatbot-icon" onclick="toggleChatbox()">
<img src="edubotKaLogo.png" height="90px">
</div>
</br>
<div id="chatbox-container">
<div id="chatbox-header"><b>Chatbot</b></div>
<div id="chatbox"></div>
<div style="display: flex; align-items: center;">
<input type="text" id="userInput" placeholder="Type a question...">
<button onclick="sendMessage()">Send</button>
</div>
</div>
<div class="todoKaIcon">
<a href="todo.html"><img src="todolisticonimage-removebg-preview.png" alt="TO-DO" id="todo-icon"></a>
</div>
</div>
<div class="right-nav-list">
<a href="LandingPage.html">Logout</a>
<a href="#projects">Activities</a>
<a href="#contact">Contacts</a>
</div>
</nav>
<section id="welcome-section" class="welcome-section">
<h1>EduQuest</h1>
<p><u>Explore</u> <u>Learn</u> <u>Experience</u></p>
</section>
<section id="projects" class="projects-section">
<h2 class="projects-section-header">Interesting Activities</h2>
<div class="projects-grid">
<a href="main_roadmap.html" target="_blank" class="project project-tile">
<img class="project-image" src="tree.jpg" alt="project" />
<p class="project-title"><span class="code"><</span>Learning Career<span class="code">/></span></p>
</a>
<a href="gameportal.html" target="_blank" class="project project-tile">
<img class="project-image" src="brain.jpg" alt="project"/>
<p class="project-title"><span class="code"><</span>Memory Game<span class="code">/></span></p>
</a>
<a href="library.html" target="_blank" class="project project-tile">
<img class="project-image" src="library.jpg" alt="project"/>
<p class="project-title">
<span class="code"><</span>
Library
<span class="code">/></span>
</p>
</a>
</div>
</section>
<section id="contact" class="contact-section">
<div class="contact-section-header">
<h2>Let's Learn Together...</h2>
<p>Want to learn more?</p>
</div>
<div class="contact-links">
<a target="_blank" class="btn contact-details"> Facebook</a>
<a id="profile-link" href="https://github.com/viveknair6915/BIT-BUSTERS" target="_blank"
class="btn contact-details"> GitHub</a>
<a target="_blank"
class="btn contact-details"> Twitter</a>
<a class="btn contact-details"> Send a mail</a>
</div>
</section>
<footer>
<p>Created by @BIT BUSTERS</p>
</footer>
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
const knowledgeBase = {
"WHAT IS THE CAPITAL OF INDIA": "The capital of India is New Delhi.",
"TELL ME SOMETHING ABOUT EIFFEL TOWER": "The Eiffel Tower is a famous landmark in Paris, France.",
"HELLO HOW ARE YOU?": "I AM FINE HOW CAN I HELP YOU",
"CAN YOU TRANSLATE THE TEXT TO HINDI?": "YEAH SURE JUST CLICK ON SELECT LANGUAGE AT THE BOTTOM RIGHT CORNER AND SELECT THE LANGUAGE YOU WANT",
"HI": "Hi, EduChat is here to assist you",
"HOW MANY STATES ARE THERE IN INDIA": "There are 29 states and 8 union teritorries in India",
"WHO IS THE NATIONALANIMALOF INDIA": "National Bengal Tiger is the Natioinal Animal of India",
"WHO IS THE FATHER OF MATHS": "Archemidis is known as Father of Mathematics",
"HOW IS THE WEATHER TODAY": "The weather is awesome just like YOU.",
};
const chatbox = document.getElementById("chatbox");
const chatboxContainer = document.getElementById("chatbox-container");
const userInput = document.getElementById("userInput");
function displayUserMessage(message) {
chatbox.innerHTML += `<div class="user-message" style="float:right;display: block; background-color:yellow; opacity:0.65 ; color: blue"><br>${message}</div>`;
}
function displayChatbotMessage(message) {
chatbox.innerHTML += `<div class="chatbot-message" style="display:block; float:left; background-color:pink; opacity:0.65 ; color: black">${message}<br></div>`;
}
function getChatbotResponse(userMessage) {
const keys = Object.keys(knowledgeBase);
for (const key of keys) {
if (userMessage.toLowerCase().includes(key.toLowerCase())) {
return knowledgeBase[key];
}
}
return "I'm sorry, I don't have an answer to that question.";
}
function sendMessage() {
const userMessage = userInput.value;
displayUserMessage(userMessage);
userInput.value = "";
const chatbotResponse = getChatbotResponse(userMessage);
displayChatbotMessage(chatbotResponse);
}
function toggleChatbox() {
if (chatboxContainer.style.display === "inline") {
chatboxContainer.style.display = "none";
}
else {
chatboxContainer.style.display = "inline";
}
}
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
</body>
</html>