signin.html of chatbot

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Sign In</title>
        <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

    </head>
    <body >
        <div class="lg:flex">
            <div class="lg:w-1/2 xl:max-w-screen-sm">
                <div class="py-12 bg-indigo-100 lg:bg-white flex justify-center lg:justify-start lg:px-12">
                    <div class="cursor-pointer flex items-center">
                        <div>
                            <svg class="w-10 text-indigo-500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 225 225" style="enable-background:new 0 0 225 225;" xml:space="preserve">
                                <style type="text/css">
                                    .st{fill:none;stroke:currentColor;stroke-width:17;stroke-linecap:square;stroke-miterlimit:3;}
                                </style>
                                <g transform="matrix( 1, 0, 0, 1, 0,0) ">
                                <g>
                                <path id="Layer0_0_1_STROKES" class="st" d="M173.8,151.5l13.6-13.6 M35.4,89.9l29.1-29 M89.4,34.9v1 M137.4,187.9l-0.6-0.4     M36.6,138.7l0.2-0.2 M56.1,169.1l27.7-27.6 M63.8,111.5l74.3-74.4 M87.1,188.1L187.6,87.6 M110.8,114.5l57.8-57.8"/>
                                </g>
                                </g>
                            </svg>
                        </div>
                        <div class="text-2xl text-indigo-800 tracking-wide ml-2 font-semibold">Chat-Bot Eva</div>
                    </div>
                </div>
                <div class="mt-10 px-12 sm:px-24 md:px-48 lg:px-12 lg:mt-16 xl:px-24 xl:max-w-2xl">
                    <h2 class="text-center text-4xl text-indigo-900 font-display font-semibold lg:text-left xl:text-5xl
                    xl:text-bold">Log in</h2>
                    <div class="mt-12">

{% include 'partials/_flash_messages.html'%}
                        <form action="{% url 'signin' %}" method="post">
                            {% csrf_token %}
                            <div>
                                <div class="text-sm font-bold text-gray-700 tracking-wide">Username</div>
                <input class="w-full text-lg py-2 border-b border-gray-300 focus:outline-none focus:border-indigo-500" type="text" placeholder="Enter Your Username" id="username" name="username" value="{{data.username}}" Required>
                            </div>
                            <div class="mt-8">
                                <div class="flex justify-between items-center">
                                    <div class="text-sm font-bold text-gray-700 tracking-wide">
                                        Password
                </div>
                <div>
                <a class="text-xs font-display font-semibold text-indigo-600 hover:text-indigo-800
                          cursor-pointer" href="{% url 'forgotpassword' %}">
                                            Forgot Password?
                                        </a>
                                    </div>
                                </div>
                                <input class="w-full text-lg py-2 border-b border-gray-300 focus:outline-none focus:border-indigo-500" type="password" placeholder="Enter your password" id="pass1" name="pass1" Required>
                            </div>
                            <div class="mt-10">
                                <button type="submit" class= "bg-indigo-500 text-gray-100 p-4 w-full rounded-full tracking-wide font-semibold font-display focus:outline-none focus:shadow-outline hover:bg-indigo-600 shadow-lg" id="loginButton">
                                    Log In
                                </button>
                                <script type="text/javascript">
                                    document.querySelector('#username').focus();
                                    document.querySelector('#username').onkeyup = function(e) {
                                        if (e.keyCode === 13) {  // enter, return
                                            document.querySelector('#loginButton').click();
                                        }
                                    };

                                    document.querySelector('#loginButton').onclick = function(e) {
                                        var roomName = document.querySelector('#username').value;
                                        window.location.pathname = window.location.hostname + roomName + '/';
                                    };
                                </script>
                            </div>
                        </form>
                        <div class="mt-5 text-sm font-display font-semibold text-gray-700 text-center">
                Don't have an account? <a class="cursor-pointer text-indigo-600 hover:text-indigo-800" href="{% url 'signup' %}">Sign up</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hidden lg:flex items-center justify-center bg-indigo-100 flex-r h-screen">
                <div class="max-w-xs transform duration-200 hover:scale-110 cursor-pointer">
                </div>
            </div>
        </div>
    </body>
</html>