mirror of
https://github.com/hastagAB/Awesome-Python-Scripts.git
synced 2025-02-23 08:38:26 +00:00
145 lines
3.4 KiB
HTML
145 lines
3.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<title>Candice</title>
|
||
|
|
<head>
|
||
|
|
<link
|
||
|
|
rel="shortcut icon"
|
||
|
|
type="image/x-icon"
|
||
|
|
href="https://user-images.githubusercontent.com/20112458/49326597-773b7280-f57a-11e8-853d-20ed61d18b0d.png"
|
||
|
|
/>
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: monospace;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
background-color: #FFC9BE;
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 3em;
|
||
|
|
margin: 0;
|
||
|
|
padding: 14px;
|
||
|
|
}
|
||
|
|
h3 {
|
||
|
|
color: black;
|
||
|
|
font-size: 20px;
|
||
|
|
margin-top: 3px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
#chatbox {
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
width: 40%;
|
||
|
|
margin-top: 60px;
|
||
|
|
}
|
||
|
|
#userInput {
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
width: 40%;
|
||
|
|
margin-top: 60px;
|
||
|
|
}
|
||
|
|
#textInput {
|
||
|
|
width: 90%;
|
||
|
|
border: none;
|
||
|
|
border-bottom: 3px solid black;
|
||
|
|
font-family: monospace;
|
||
|
|
font-size: 17px;
|
||
|
|
}
|
||
|
|
.userText {
|
||
|
|
color: black;
|
||
|
|
font-family: monospace;
|
||
|
|
font-size: 17px;
|
||
|
|
text-align: right;
|
||
|
|
line-height: 30px;
|
||
|
|
}
|
||
|
|
.userText span {
|
||
|
|
background-color: #FDFF60;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
.botText {
|
||
|
|
color: black;
|
||
|
|
font-family: monospace;
|
||
|
|
font-size: 17px;
|
||
|
|
text-align: left;
|
||
|
|
line-height: 30px;
|
||
|
|
}
|
||
|
|
.botText span {
|
||
|
|
background-color: #BEE3FF;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
#tidbit {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
width: 300px;
|
||
|
|
}
|
||
|
|
.boxed {
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
width: 78%;
|
||
|
|
margin-top: 60px;
|
||
|
|
border: 1px solid green;
|
||
|
|
}
|
||
|
|
.box {
|
||
|
|
border: 2px solid black;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<img />
|
||
|
|
<center>
|
||
|
|
<h1>
|
||
|
|
<img
|
||
|
|
src="https://www.logolynx.com/images/logolynx/s_b9/b9075efd5754f8eb0b28894bbff5f1f0.jpeg"
|
||
|
|
alt="CANDICE"
|
||
|
|
style="width:50px;height:50px;"
|
||
|
|
/>Sunanda's Resume ChatBot
|
||
|
|
</h1>
|
||
|
|
</center>
|
||
|
|
<div class="box"></div>
|
||
|
|
<div class="boxed">
|
||
|
|
<div>
|
||
|
|
<div id="chatbox">
|
||
|
|
<img
|
||
|
|
src="https://www.logolynx.com/images/logolynx/s_b9/b9075efd5754f8eb0b28894bbff5f1f0.jpeg"
|
||
|
|
alt="CANDICE"
|
||
|
|
style="width:50px;height:50px;"
|
||
|
|
/>
|
||
|
|
<p class="botText">
|
||
|
|
<span>Hello there! I am Sunanda's Resume ChatBot</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div id="userInput">
|
||
|
|
<input id="textInput" type="text" name="msg" placeholder="Message" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
function getBotResponse() {
|
||
|
|
var rawText = $("#textInput").val();
|
||
|
|
var userHtml = '<p class="userText"><span>' + rawText + "</span></p>";
|
||
|
|
$("#textInput").val("");
|
||
|
|
$("#chatbox").append(userHtml);
|
||
|
|
document
|
||
|
|
.getElementById("userInput")
|
||
|
|
.scrollIntoView({ block: "start", behavior: "smooth" });
|
||
|
|
$.get("/get", { msg: rawText }).done(function(data) {
|
||
|
|
var botHtml = '<p class="botText"><span>' + data + "</span></p>";
|
||
|
|
$("#chatbox").append(botHtml);
|
||
|
|
document
|
||
|
|
.getElementById("userInput")
|
||
|
|
.scrollIntoView({ block: "start", behavior: "smooth" });
|
||
|
|
});
|
||
|
|
}
|
||
|
|
$("#textInput").keypress(function(e) {
|
||
|
|
if (e.which == 13) {
|
||
|
|
getBotResponse();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|