Spaces:
Sleeping
Sleeping
| <html lang="zh"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <title>聊天机器人</title> | |
| <style> | |
| body { | |
| padding:0; | |
| margin:0; | |
| background:-moz-linear-gradient(-45deg,#183850 0,#183850 25%,#192C46 50%,#22254C 75%,#22254C 100%); | |
| background:-webkit-linear-gradient(-45deg,#183850 0,#183850 25%,#192C46 50%,#22254C 75%,#22254C 100%); | |
| background-repeat:no-repeat; | |
| background-attachment:fixed | |
| } | |
| ::-webkit-scrollbar { | |
| width:10px | |
| } | |
| ::-webkit-scrollbar-track { | |
| border-radius:10px; | |
| background-color:rgba(25,147,147,0.1) | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| border-radius:10px; | |
| background-color:rgba(25,147,147,0.2) | |
| } | |
| .chat-thread { | |
| margin:24px auto 0 auto; | |
| padding:0 20px 0 0; | |
| list-style:none; | |
| overflow-y:scroll; | |
| overflow-x:hidden | |
| } | |
| .chat-thread li { | |
| position:relative; | |
| clear:both; | |
| display:inline-block; | |
| padding:16px 40px 16px 20px; | |
| margin:0 0 20px 0; | |
| font:16px/20px "Noto Sans",sans-serif; | |
| border-radius:10px; | |
| background-color:rgba(25,147,147,0.2) | |
| } | |
| .chat-thread li:before { | |
| position:absolute; | |
| top:0; | |
| width:50px; | |
| height:50px; | |
| border-radius:50px; | |
| content:"" | |
| } | |
| .chat-thread li:after { | |
| position:absolute; | |
| top:15px; | |
| content:""; | |
| width:0; | |
| height:0; | |
| border-top:15px solid rgba(25,147,147,0.2) | |
| } | |
| .chat-thread li:nth-child(odd) { | |
| animation:show-chat-odd .15s 1 ease-in; | |
| -moz-animation:show-chat-odd .15s 1 ease-in; | |
| -webkit-animation:show-chat-odd .15s 1 ease-in; | |
| float:right; | |
| margin-right:80px; | |
| color:#0AD5C1 | |
| } | |
| .chat-thread li:nth-child(odd):before { | |
| right:-80px; | |
| background-image:url(data:image/jpeg;base64,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) | |
| } | |
| .chat-thread li:nth-child(odd):after { | |
| border-right:15px solid transparent; | |
| right:-15px | |
| } | |
| .chat-thread li:nth-child(even) { | |
| animation:show-chat-even .15s 1 ease-in; | |
| -moz-animation:show-chat-even .15s 1 ease-in; | |
| -webkit-animation:show-chat-even .15s 1 ease-in; | |
| float:left; | |
| margin-left:80px; | |
| color:#0EC879 | |
| } | |
| .chat-thread li:nth-child(even):before { | |
| left:-80px; | |
| background-image:url(data:image/jpeg;base64,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) | |
| } | |
| .chat-thread li:nth-child(even):after { | |
| border-left:15px solid transparent; | |
| left:-15px | |
| } | |
| .chat-window { | |
| position:fixed; | |
| bottom:18px | |
| } | |
| .chat-window-message { | |
| width:100%; | |
| height:48px; | |
| font:32px/48px "Noto Sans",sans-serif; | |
| background:0; | |
| color:#0AD5C1; | |
| border:0; | |
| border-bottom:1px solid rgba(25,147,147,0.2); | |
| outline:0 | |
| } | |
| @media all and (max-width:767px) { | |
| .chat-thread { | |
| width:90%; | |
| height:90% | |
| } | |
| .chat-window { | |
| left:5%; | |
| width:90% | |
| } | |
| } | |
| @media all and (min-width:768px) { | |
| .chat-thread { | |
| width:50%; | |
| height:90% | |
| } | |
| .chat-window { | |
| left:25%; | |
| width:50% | |
| } | |
| } | |
| @keyframes show-chat-even { | |
| 0% { | |
| margin-left:-480px | |
| } | |
| 100% { | |
| margin-left:0 | |
| } | |
| } | |
| @-moz-keyframes show-chat-even { | |
| 0% { | |
| margin-left:-480px | |
| } | |
| 100% { | |
| margin-left:0 | |
| } | |
| } | |
| @-webkit-keyframes show-chat-even { | |
| 0% { | |
| margin-left:-480px | |
| } | |
| 100% { | |
| margin-left:0 | |
| } | |
| } | |
| @keyframes show-chat-odd { | |
| 0% { | |
| margin-right:-480px | |
| } | |
| 100% { | |
| margin-right:0 | |
| } | |
| } | |
| @-moz-keyframes show-chat-odd { | |
| 0% { | |
| margin-right:-480px | |
| } | |
| 100% { | |
| margin-right:0 | |
| } | |
| } | |
| @-webkit-keyframes show-chat-odd { | |
| 0% { | |
| margin-right:-480px | |
| } | |
| 100% { | |
| margin-right:0 | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body onload="loadhistory()"> | |
| <ul class="chat-thread"> | |
| </ul> | |
| <div class="chat-window"> | |
| <input class="chat-window-message" name="chat-window-message" type="text" autocomplete="off" autofocus="" placeholder="对我说HELP，看看我能干什么~"> | |
| </div> | |
| <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script> | |
| var chat_window = document.querySelector(".chat-window"); | |
| chat_window.onkeydown=function(event){ | |
| var e = event || window.event || arguments.callee.caller.arguments[0]; | |
| if (e && e.keyCode == 13 ) { | |
| send_data(); | |
| } | |
| } | |
| function send_data() { | |
| var chat_thread = document.querySelector(".chat-thread"); | |
| var chat_window_message = document.querySelector(".chat-window-message"); | |
| chat_window_message.disabled = true; | |
| var text = chat_window_message.value; | |
| var new_li_label = document.createElement("li"), new_li_text = document.createTextNode(text); | |
| new_li_label.appendChild(new_li_text); | |
| chat_thread.appendChild(new_li_label); | |
| chat_thread.scrollTop = chat_thread.scrollHeight; | |
| chat_window_message.value = ""; | |
| document.title = "聊天机器人 ~ 对方正在输入…" | |
| $.ajax({ | |
| url: "/chitchat/chat?text="+text, | |
| dataType: 'json', | |
| success: function(data){ | |
| var new_li_label = document.createElement("li"); | |
| data.forEach(function(item){ | |
| var new_text = document.createTextNode(item); | |
| var new_span = document.createElement("span"); | |
| new_span.appendChild(new_text); | |
| var new_br = document.createElement("br"); | |
| new_li_label.appendChild(new_span); | |
| new_li_label.appendChild(new_br); | |
| }); | |
| chat_thread.appendChild(new_li_label); | |
| chat_thread.scrollTop = chat_thread.scrollHeight; | |
| document.title = "聊天机器人" | |
| chat_window_message.disabled = false; | |
| }, | |
| timeout: 60000, | |
| error: function(jqXHR, status, errorThrown){ | |
| var new_li_label = document.createElement("li"); | |
| var new_text = document.createTextNode("网络超时1分钟，请重试"); | |
| new_li_label.appendChild(new_text); | |
| chat_thread.appendChild(new_li_label); | |
| chat_thread.scrollTop = chat_thread.scrollHeight; | |
| document.title = "聊天机器人" | |
| chat_window_message.disabled = false; | |
| } | |
| }); | |
| // $.getJSON("/chitchat/chat?text="+text, function(data){ | |
| // var new_li_label = document.createElement("li"); | |
| // data.forEach(function(item){ | |
| // var new_text = document.createTextNode(item); | |
| // var new_span = document.createElement("span"); | |
| // new_span.appendChild(new_text); | |
| // var new_br = document.createElement("br"); | |
| // new_li_label.appendChild(new_span); | |
| // new_li_label.appendChild(new_br); | |
| // }); | |
| // chat_thread.appendChild(new_li_label); | |
| // chat_thread.scrollTop = chat_thread.scrollHeight; | |
| // document.title = "聊天机器人" | |
| // chat_window_message.disabled = false; | |
| // }); | |
| } | |
| function loadhistory() { | |
| var chat_thread = document.querySelector(".chat-thread"); | |
| var chat_window_message = document.querySelector(".chat-window-message"); | |
| chat_window_message.disabled = true; | |
| document.title = "聊天机器人 ~ 正在回忆…" | |
| $.getJSON("/chitchat/history", function(data){ | |
| data.forEach(function(item) { | |
| var new_li_label = document.createElement("li"),new_li_text = document.createTextNode(item); | |
| new_li_label.appendChild(new_li_text); | |
| chat_thread.appendChild(new_li_label); | |
| }); | |
| chat_thread.scrollTop = chat_thread.scrollHeight; | |
| chat_window_message.disabled = false; | |
| document.title = "聊天机器人" | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |