changes for login template

content_quality_tool_public/static/css/login_new.css

@@ -0,0 +1,313 @@
+/*
+Project Name: WFM
+Date : 05-11-2020
+Author: Amar Kholambe (amar.kholambe@luminad.com)
+*/
+body {
+    background: rgb(239, 138, 227);
+    background: url('./../images/bg-l.jpg') no-repeat center center fixed;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+}
+
+.login {
+    position: absolute;
+    right: 0%;
+    top: 50%;
+    transform: translate(-20%, -50%);
+    background: rgb(255 255 255 / 50%);
+    z-index: 9;
+}
+
+.login-container {
+    width: 500px;
+    margin: 0 auto;
+    height: 300px;
+    box-shadow: 0 0 178px #9b9b9b;
+    border: 1px solid #d1d1d1;
+    /* background: #f2f2f2; */
+}
+
+.login-left {
+    background: url('./../images/Picture3.svg') no-repeat;
+    background-size: contain !important;
+    float: left;
+    width: 45%;
+    height: 100%;
+    position: relative;
+    background-position: top;
+    overflow: hidden;
+}
+
+.login-right {
+    float: left;
+    width: 55%;
+    padding: 20px 30px 0;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.form-signin,
+.form-reset-password {
+    /* padding: 0 30px 0 0; */
+    overflow: auto;
+    height: 410px;
+}
+
+.lbox {
+    width: 100%;
+    display: block;
+}
+
+.clogo {
+    /* width: 200px; */
+    /* margin: 50px 120px; */
+    display: block;
+    text-align: center;
+    font-size: 35px;
+    color: #fff;
+    z-index: 1;
+    position: absolute;
+    left: 50%;
+    bottom: 25px;
+    transform: translateX(-50%);
+}
+
+.llogo {
+    width: 175px;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 9;
+
+}
+
+.lbox p {
+    margin: 320px auto auto;
+    color: #424242;
+    font-size: 12px;
+    text-align: right;
+}
+
+.form-signin-heading {
+    padding-bottom: 30px;
+    text-align: center;
+    color: #fff;
+    margin: 0;
+}
+
+.lang_label {
+    position: initial !important;
+    display: inline-block;
+    margin-right: 5px;
+}
+
+select {
+    width: 70px !important;
+    display: inline-block !important;
+}
+
+/* form starting stylings ------------------------------- */
+
+.login .group {
+    position: relative;
+    margin-bottom: 35px;
+}
+
+.login input {
+    padding: 5px;
+    display: block;
+    width: 100%;
+    border: none;
+    border-bottom: 1px solid #fff;
+    background-color: transparent;
+}
+
+.login input:focus {
+    outline: none;
+}
+
+/* LABEL ======================================= */
+
+.login label {
+    color: #999;
+    /* font-size: 18px; */
+    font-weight: normal;
+    position: absolute;
+    pointer-events: none;
+    left: 5px;
+    top: 15px;
+    transition: 0.2s ease all;
+    -moz-transition: 0.2s ease all;
+    -webkit-transition: 0.2s ease all;
+}
+
+/* active state */
+
+.login input:focus~label,
+.login input:valid~label {
+    top: -20px;
+    font-size: 14px;
+    color: #fff;
+}
+
+/* active state */
+
+.login input:focus~.highlight {
+    -webkit-animation: inputHighlighter 0.3s ease;
+    -moz-animation: inputHighlighter 0.3s ease;
+    animation: inputHighlighter 0.3s ease;
+}
+
+/* ANIMATIONS ================ */
+
+@-webkit-keyframes inputHighlighter {
+    from {
+        background: #fff;
+    }
+
+    to {
+        width: 0;
+        background: transparent;
+    }
+}
+
+@-moz-keyframes inputHighlighter {
+    from {
+        background: #fff;
+    }
+
+    to {
+        width: 0;
+        background: transparent;
+    }
+}
+
+@keyframes inputHighlighter {
+    from {
+        background: #fff;
+    }
+
+    to {
+        width: 0;
+        background: transparent;
+    }
+}
+
+.login button {
+    border-color: #fff;
+    color: #fff;
+    font-size: 18px;
+}
+
+.login button:hover,
+.login button:active,
+.login button:focus {
+    background-color: #fff !important;
+    color: #424242 !important;
+}
+
+.forgotPass {
+    color: #fff;
+    margin-top: 25px;
+    display: block;
+}
+
+.form-reset-password input {
+    padding: 8px 8px 8px 5px;
+}
+
+.form-reset-password label {
+    top: 10px;
+}
+
+.form-reset-password .group {
+    margin-bottom: 40px;
+}
+
+.header {
+    height: 200px;
+    background: #425464;
+}
+
+.footer {
+    height: 50px;
+    background: #425464;
+}
+
+@media only screen and (max-width: 900px) {
+
+    .login,
+    .login-container {
+        width: 100%;
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .login {
+        top: 150px;
+    }
+
+    .login-left,
+    .login-right {
+        width: 100%;
+        float: none;
+    }
+
+    .form-signin,
+    .form-reset-password {
+        height: 100%;
+        display: initial;
+    }
+}
+
+/* width */
+
+::-webkit-scrollbar {
+    width: 5px;
+}
+
+/* Track */
+
+::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px grey;
+    border-radius: 2px;
+}
+
+/* Handle */
+
+::-webkit-scrollbar-thumb {
+    background: #444;
+    border-radius: 2px;
+}
+
+/* Handle on hover */
+
+::-webkit-scrollbar-thumb:hover {
+    background: #333333;
+}
+
+.alert {
+    display: none;
+}
+
+.alert {
+    z-index: 9999;
+    position: fixed;
+    top: 10px;
+    width: auto;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+#triangle-topleft {
+    clip-path: polygon(0 0, 0% 100%, 100% 0);
+    background: #C4161C;
+    width: 100%;
+    height: 430px;
+}

content_quality_tool_public/static/images/Picture3.svg

@@ -0,0 +1 @@
+<svg width="263" height="263" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><g transform="translate(-671 -176)"><path d="M807.979 365.579 807.979 380.099 797.021 380.099 797.021 365.579C790.72 363.388 786.062 357.36 786.062 349.964 786.062 340.923 793.459 333.526 802.5 333.526 811.541 333.526 818.938 340.923 818.938 349.964 818.938 357.086 814.28 363.114 807.979 365.579ZM761.406 265.036C761.406 242.298 779.761 223.943 802.5 223.943 825.239 223.943 843.594 242.298 843.594 265.036L843.594 295.446 802.5 292.432 761.406 295.446 761.406 265.036ZM860.031 296.542 860.031 265.036C860.031 233.257 834.279 207.505 802.5 207.505 770.721 207.505 744.969 233.257 744.969 265.036L744.969 296.542 725.792 297.911 725.792 402.016 802.5 407.495 879.208 402.016 879.208 297.911 860.031 296.542Z" fill="#FFFFFF"/></g></svg>

content_quality_tool_public/templates/login.html

@@ -6,87 +6,64 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Login</title>
+    <title>LUMINA INCUBATOR - Login</title>
 
     <!-- Latest compiled and minified CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
-    <link rel="stylesheet" href="{% static 'css/login.css' %}">
+    <link rel="stylesheet" href="{% static 'css/login_new.css' %}">
 </head>
 
 <body>
     <div class="container">
-                {% if messages %}
-            <div id="django-toasts" class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1080; width: 400px;">
-                {% for message in messages %}
-                    <div class="toast align-items-center text-white bg-{{ message.tags }} border-0 fade" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
-                        <div class="d-flex">
-                            <div class="toast-body">
-                                {{ message }}
-                            </div>
-                            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
-                        </div>
-                    </div>
-                {% endfor %}
-            </div>
-
-            <script>
-                document.addEventListener('DOMContentLoaded', function() {
-                    const toastElements = document.querySelectorAll('.toast');
-                    toastElements.forEach(function(toastEl) {
-                        const toast = new bootstrap.Toast(toastEl, {
-                            autohide: true,
-                            delay: 3000  // 3 seconds
-                        });
-                        toast.show();
-                    });
-                });
-            </script>
-        {% endif %}
+        <img src="{% static './images/logo-new.png' %}" alt="Lumina Datamatics" class="llogo">
+        
         <div class="login">
             <div class="login-container">
                 <div class="login-left">
                     <div class="lbox">
-                       
-                        <h2 class="clogo">LUMINA INCUBATOR</h2>
-                        <img src="{% static './images/logo.png' %}" alt="Lumina Datamatics" class="llogo">
+                        <!-- <svg viewBox="0 0 150 200" xmlns="http://www.w3.org/2000/svg" style="position: absolute;top: -235px;left: -91px;">
+                            <path fill="#C52F33" d="M45.6,-46C55.7,-45.7,58.4,-28.3,58.6,-12.5C58.7,3.2,56.4,17.2,48.3,24.7C40.2,32.2,26.3,33.3,12.3,42C-1.8,50.7,-16.1,67.1,-26.7,66.3C-37.2,65.5,-44,47.4,-53.6,30.9C-63.2,14.4,-75.6,-0.6,-75.3,-15.2C-75,-29.8,-62,-44.1,-47.3,-43.5C-32.7,-43,-16.3,-27.6,0.7,-28.4C17.7,-29.3,35.4,-46.2,45.6,-46Z" transform="translate(100 100)"></path>
+                        </svg>
+
+                          <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" style=" position: absolute; right: -191px; top: 223px; ">
+                            <path fill="#C52F33" d="M39.8,-73.6C47.6,-64.5,47.2,-45.8,46.9,-31.9C46.6,-18,46.5,-9,50,2C53.4,13.1,60.6,26.1,59.3,37.1C57.9,48.1,48,57,36.7,58.9C25.4,60.9,12.7,55.8,2.6,51.3C-7.5,46.8,-15,42.9,-25.4,40.5C-35.9,38.1,-49.2,37.1,-60.9,30.6C-72.6,24,-82.8,12,-78.5,2.5C-74.2,-7.1,-55.6,-14.2,-45.3,-23.2C-35,-32.1,-33,-42.9,-26.8,-53C-20.7,-63.1,-10.3,-72.5,2.8,-77.5C16,-82.4,32,-82.8,39.8,-73.6Z" transform="translate(100 100)" />
+                          </svg> -->
+
+                        <h2 class="clogo">INCUBATOR</h2>
+                        <!-- <img src="./dist/img/logo.png" alt="Lumina Datamatics" class="llogo"> -->
                         <!-- <p>© 2022 Lumina Datamatics Ltd. All Rights Reserved.</p> -->
                     </div>
                 </div>
                 <div class="login-right">
                     <form action="{% url 'login' %}" method="POST" class="form-signin" >
+                    <!-- <form action="{% url 'login' %}" method="POST" class="form-signin"> -->
                         {% csrf_token %}
                         <h2 class="form-signin-heading">Login</h2>
                         <div class="group">
-                            <input type="text" name="username" id="username">
-                            <label>Username</label>
+                            <input type="text" name="username"  id="username">
+                            <label>Email address</label>
                         </div>
 
                         <div class="group">
-                            <input type="password" name="password" id="password">
+                            <input type="password"  name="password"  id="password">
                             <label>Password</label>
                         </div>
                         <div class="group" style="margin-bottom: 30px;">
-                            <button class="btn btn-lg btn-outline-dark btn-block" type="submit" >Sign in</button>
+                            <button class="btn btn-lg btn-outline-dark btn-block" type="submit">Sign in</button>
                         </div>
-                       
+
                     </form>
                 </div>
             </div>
         </div>
+        <div style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.5);"></div>
     </div>
 
 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <!-- Latest compiled and minified JavaScript -->
-    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> -->
-
-        <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-        <!-- Bootstrap Bundle JS (includes Toast component JS) -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-
-
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
     <script>
         function validateLogin() {
             if ($("#username").val() == "" || $("#password").val() == "") {

content_quality_tool_public/templates/login_working.html

@@ -0,0 +1,113 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Login</title>
+
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="{% static 'css/login.css' %}">
+</head>
+
+<body>
+    <div class="container">
+                {% if messages %}
+            <div id="django-toasts" class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1080; width: 400px;">
+                {% for message in messages %}
+                    <div class="toast align-items-center text-white bg-{{ message.tags }} border-0 fade" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
+                        <div class="d-flex">
+                            <div class="toast-body">
+                                {{ message }}
+                            </div>
+                            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+
+            <script>
+                document.addEventListener('DOMContentLoaded', function() {
+                    const toastElements = document.querySelectorAll('.toast');
+                    toastElements.forEach(function(toastEl) {
+                        const toast = new bootstrap.Toast(toastEl, {
+                            autohide: true,
+                            delay: 3000  // 3 seconds
+                        });
+                        toast.show();
+                    });
+                });
+            </script>
+        {% endif %}
+        <div class="login">
+            <div class="login-container">
+                <div class="login-left">
+                    <div class="lbox">
+                       
+                        <h2 class="clogo">LUMINA INCUBATOR</h2>
+                        <img src="{% static './images/logo.png' %}" alt="Lumina Datamatics" class="llogo">
+                        <!-- <p>© 2022 Lumina Datamatics Ltd. All Rights Reserved.</p> -->
+                    </div>
+                </div>
+                <div class="login-right">
+                    <form action="{% url 'login' %}" method="POST" class="form-signin" >
+                        {% csrf_token %}
+                        <h2 class="form-signin-heading">Login</h2>
+                        <div class="group">
+                            <input type="text" name="username" id="username">
+                            <label>Username</label>
+                        </div>
+
+                        <div class="group">
+                            <input type="password" name="password" id="password">
+                            <label>Password</label>
+                        </div>
+                        <div class="group" style="margin-bottom: 30px;">
+                            <button class="btn btn-lg btn-outline-dark btn-block" type="submit" >Sign in</button>
+                        </div>
+                       
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <!-- Latest compiled and minified JavaScript -->
+    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> -->
+
+        <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+        <!-- Bootstrap Bundle JS (includes Toast component JS) -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+
+
+    <script>
+        function validateLogin() {
+            if ($("#username").val() == "" || $("#password").val() == "") {
+                $("#missing").fadeTo(2000, 500).slideUp(500, function () {
+                    $("#missing").slideUp(500);
+                });
+                return false;
+            } else if ($("#username").val() != "admin" && $("#password").val() != "admin") {
+                $("#wrong").fadeTo(2000, 500).slideUp(500, function () {
+                    $("#wrong").slideUp(500);
+                });
+                return false;
+            } else if ($("#username").val() == "admin" && $("#password").val() == "admin") {
+                $("#success").fadeTo(2000, 500).slideUp(500, function () {
+                    $("#success").slideUp(500);
+                });
+                return true;
+            }
+        }
+    </script>
+
+</body>
+
+</html>