API tools faq
paste
amank8

chatPage.html of chatbot

amank8
Jul 7th, 2022 (edited)
80
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.71 KB | None | 0 0
raw download clone embed print report
  1. <!-- Thank You larainfo-->
  2. {% load static %}
  3.  
  4.   <!DOCTYPE html>
  5.   <html lang="en">
  6.  
  7.     <head>
  8.       <meta charset="UTF-8" />
  9.       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  10.       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  11.       <title> Chatbot Eva </title>
  12.       <link src="{% static 'css/style.css' %}">
  13.       <script src="https://cdn.tailwindcss.com"></script>
  14.     </head>
  15.  
  16.     <body>
  17.       {% if request.user.is_authenticated %}
  18.       {% csrf_token %}
  19.       <div class="container mx-auto">
  20.         <div class="max-w-2xl border rounded">
  21.           <div>
  22.             <div class="w-full">
  23.               <div class="relative flex items-center p-3 border-b border-gray-300">
  24.                 <img class="object-cover w-10 h-10 rounded-full"
  25.                  src="{% static 'img/evabot.ico' %}" alt="username" />
  26.                 <span class="block ml-2 font-bold text-gray-600">Eva</span>
  27.                 <span class="absolute w-3 h-3 bg-green-600 rounded-full left-10 top-3">
  28.                 </span>
  29.               </div>
  30.               <div class="relative w-full p-6 overflow-y-auto h-auto" id="chat" class="chat">
  31.                 <div id="chat-log" class="flex flex-col overflow-scroll h-[470px]">
  32.                 <!--text-area-->
  33.                 </div>
  34.  
  35.  
  36.               <div class="relative flex items-center justify-between w-full p-3 border-t border-gray-300">
  37.                 <input id="chat-message-input" autofocus="true" type="text" placeholder="Message"
  38.                  class="block w-full py-2 pl-4 mx-3 bg-gray-100 rounded-full outline-none focus:text-gray-700"
  39.                  name="message" autocomplete="off" autofocus="true" required />
  40.                   <span class="px-2 py-2">
  41.                 <button>
  42.                   <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24"
  43.                    stroke="currentColor">
  44.                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
  45.                      d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
  46.                   </svg>
  47.                 </button>
  48.               </span>
  49.               <span class="px-2 py-2">
  50.                 <input id="chat-message-submit" type="button" value="Send">
  51.                   <svg class="w-5 h-5 text-gray-500 origin-center transform rotate-90" xmlns="http://www.w3.org/2000/svg"
  52.                    viewBox="0 0 20 20" fill="currentColor">
  53.                     <path
  54.                      d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
  55.                   </svg>
  56.                 </input>
  57.               </div>
  58.             </span>
  59.             </div>
  60.           </div>
  61.         </div>
  62.       </div>
  63.     </body>
  64.   </html>
  65.  
  66. <!-- Your custom script here -->
  67. {{ username|json_script:"user-name" }}
  68.     <script>
  69.         const roomName = JSON.parse(document.getElementById('user-name').textContent);
  70.  
  71.         const chatSocket = new WebSocket(
  72.             'ws://'
  73.             + window.location.host
  74.             + '/ws/'
  75.             + roomName
  76.             + '/'
  77.         );
  78.  
  79.         chatSocket.onmessage = function(e) {
  80.             const data = JSON.parse(e.data);
  81.             document.querySelector('#chat-log').value += (data.message + '\n');
  82.         };
  83.  
  84.         chatSocket.onclose = function(e) {
  85.             console.error('Chat socket closed unexpectedly');
  86.         };
  87.  
  88.         document.querySelector('#chat-message-input').focus();
  89.         document.querySelector('#chat-message-input').onkeyup = function(e) {
  90.             if (e.keyCode === 13) {  // enter, return
  91.                 document.querySelector('#chat-message-submit').click();
  92.             }
  93.         };
  94.  
  95.         document.querySelector('#chat-message-submit').onclick = function(e) {
  96.             const messageInputDom = document.querySelector('#chat-message-input');
  97.             const message = messageInputDom.value;
  98.             chatSocket.send(JSON.stringify({
  99.                 'message': message
  100.             }));
  101.             messageInputDom.value = '';
  102.         };
  103.     </script>
  104.  
  105.  
  106. {% else %}
  107. <div class="mt-5 text-sm font-display font-semibold text-gray-700 text-center">
  108.   Don't have an account? <a class="cursor-pointer text-indigo-600 hover:text-indigo-800" href="{% url 'signup' %}">Sign up</a>
  109. </div>
  110. <br/>
  111. <div class="mt-5 text-sm font-display font-semibold text-gray-700 text-center">
  112.   Already have an account? <a class="cursor-pointer text-indigo-600 hover:text-indigo-800" href="{% url 'signin' %}">Sign in</a>
  113. </div>
  114. {% endif %}
  115. </body>
  116. </html>
  117.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!