Permalink
Show file tree
Hide file tree
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
2 changed files
with
161 additions
and
0 deletions.
There are no files selected for viewing
BIN
+143 KB
templates/chattybot.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <title>ChatBot</title> | ||
| <head> | ||
| <link | ||
| rel="shortcut icon" | ||
| type="image/x-icon" | ||
| href="https://cdn0.iconfinder.com/data/icons/business-management-78/66/63-512.png" | ||
| /> | ||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | ||
|
|
||
| <style> | ||
| body { | ||
| font-family: monospace; | ||
| color: #20C20E; | ||
| background-color: black; | ||
| } | ||
| h1 { | ||
| background-color: black; | ||
| display: inline-block; | ||
| font-size: 3em; | ||
| margin: 0; | ||
| padding: 14px; | ||
|
|
||
| } | ||
| h3 { | ||
| color: #20C20E; | ||
| font-size: 20px; | ||
| margin-top: 3px; | ||
| text-align: center; | ||
|
|
||
| } | ||
| #chatbox { | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| width: 40%; | ||
| margin-top: 60px; | ||
| color: black; | ||
| } | ||
| #userInput { | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| width: 40%; | ||
| margin-top: 60px; | ||
| color: #20C20E; | ||
| } | ||
| #textInput { | ||
| width: 90%; | ||
| border: solid green; | ||
| border-bottom: 3px solid black; | ||
| font-family: monospace; | ||
| font-size: 17px; | ||
| color: #20C20E; | ||
| font-color: solid green; | ||
| background-color: black; | ||
| } | ||
| .userText { | ||
| color: black;; | ||
| font-family: monospace; | ||
| font-size: 17px; | ||
| text-align: right; | ||
| line-height: 30px; | ||
| } | ||
| .userText span { | ||
| background-color: #60C454; | ||
| padding: 10px; | ||
| border-radius: 2px; | ||
| } | ||
| .botText { | ||
| color: black; | ||
| font-family: monospace; | ||
| font-size: 17px; | ||
| text-align: left; | ||
| line-height: 30px; | ||
| font-weight: bold; | ||
| } | ||
| .botText span { | ||
| background-color: #20C20E; | ||
| 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 green; | ||
| } | ||
| .Button { | ||
| position: relative; | ||
| bottom: 0; | ||
| right: 10; | ||
| left: 0; | ||
| width: 300px; | ||
|
|
||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <center> | ||
| <h1>Your Personal ChatBot | ||
| </h1> | ||
| </center> | ||
| <div class="box"></div> | ||
| <div class="boxed"> | ||
| <div> | ||
| <div id="chatbox"> | ||
| <img | ||
| src="https://cdn0.iconfinder.com/data/icons/business-management-78/66/63-512.png" | ||
| alt="LazyBot" | ||
| style="width:200px;height:200px;" | ||
| /> | ||
| /> | ||
| <p class="botText"> | ||
| <span>Hi! I'm your personal ChatBot</span> | ||
| </p> | ||
| </div> | ||
| <div id="userInput"> | ||
| <div> | ||
| <form method="post" action="/" class="Button"> | ||
| <input type="submit" value="Talk" name="Talk"/></div> | ||
| </form> | ||
| <input id="textInput" type="text" name="msg" placeholder="Type Your Message Here" /> | ||
| </div> | ||
| </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(botText1) { | ||
| var botHtml = '<p class="botText"><span>' + botText1 + "</span></p>"; | ||
| $("#chatbox").append(botHtml); | ||
| document | ||
| .getElementById("userInput") | ||
| .scrollIntoView({ block: "start", behavior: "smooth" }); | ||
| }); | ||
| } | ||
| $("#textInput").keypress(function(e) { | ||
| if (e.which == 13) { | ||
| getBotResponse(); | ||
| } | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |