BAMU_Hiring / mysite / hiring / templates / accounts / login.html
login.html
Raw
{% load static %}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="{% static 'assets/fonts/icomoon/style.css' %}">

    <link rel="stylesheet" href="{% static 'assets/css/owl.carousel.min.css' %}">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{% static 'assets/css/bootstrap.min.css' %}">
    
    <!-- Style -->
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">

    <title>Hiring App : Login</title>
    <style>
      .nav-text{
        padding: 0px 10px 0 10px;
        font-weight: bold;
        text-align: center;
        font-size: 1.5rem;
        color: rgb(77,66,255);

      }
      @media screen and (max-width: 450px) {
        .nav-text{
          font-size: 1.2rem;
        }
      }
      /* #notification-bar {
    font-size: large;
    font-weight: bolder;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    color: #fff;
    padding: 20px;
    text-align: center;
    z-index: 9999;
  }
  .hidden {
    display: none;
  }
  .success {
    background-color: #4caf50;
  }
  .error {
    background-color: #f44336;
  } */

  nav{
  font-family: "Montserrat", sans-serif;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding:20px  ;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
    transition: 0.35s;
    box-shadow: 0 1px 10px 0px rgba(0, 0, 0, .2);
    background-color:white;
    transition: 0.5s;
}

.logo{
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo img {
        max-width: 50px;
      }

.logo-text{

  font-weight: bold;
  font-size: 20px;
  margin-left: 20px;
  color: rgb(0, 0, 113);
}
.footer{
  padding: 15px;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.162);
  background-color: rgb(230 228 228 / 40%);}

@media screen and (max-width: 500px) {
    .logo img {
      max-width: 35px;
      }
      .footer{
        font-size: small;
      }
      nav{
        padding: 15px;
      }
}
    </style>
  </head>
  <body>
    <!-- <div id="notification-bar" class="hidden"></div> -->

    <nav>
   
        <a href="/login.html">
        <div class="logo">
                  <div>
                    <img
                    class="nitLogo"
                    src="{% static 'assets/images/bamuLogoNew.png' %}"
                    alt="Logo"
                  />
                </div>
                  <div class="logo-text">B.A.M.U</div>
                </div>
              </a>
      
              
      
            </nav>
            
            <div class="content">
    <h1 class="nav-text text-center">Apply for the post of Vice-Chancellor</h1>
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <img src="{% static 'assets/images/undraw_remotely_2j6y.svg' %}" alt="Image" class="img-fluid">
        </div>
        <div class="col-md-6 contents">
          <div class="row justify-content-center">
            <div class="col-md-8">
              <div class="mb-4">
              <h3>Login</h3>
              <p class="mb-4">Dr. Babasaheb Ambedkar Marathwada University
            </p>
            </div>
            <form method="post" action="{% url 'loginuser' %}">
                {% csrf_token %}
                
              <div class="form-group first">
                <!--<label for="username"></label>-->
                <input type="email" class="form-control" id="username" name="username" placeholder="Email" required autocomplete="username">

                
              </div>
              <div class="form-group last mb-4">
                <!--<label for="password">Password</label>-->
                <input type="password" class="form-control" id="password" name="password" placeholder="Password" required autocomplete="current-password">

                
              </div>
              
              
              <input type="submit" value="Log In" class="btn btn-block btn-primary">

              <div class="d-flex my-3 mb-5 align-items-center">
                <!--<label class="control control--checkbox mb-0"><span class="caption">Remember me</span>
                  <input type="checkbox" checked="checked"/>
                  <div class="control__indicator"></div>
                </label>-->
                <span class="text-center">
                    <a href="{% url 'registerpage.html' %}">Register?</a>
                </span>
                <span class="ml-auto"><a href="{% url 'password_reset_page' %}" class="forgot-pass">Forgot Password</a></span> 
              </div>

              <!--<span class="d-block text-left my-4 text-muted">&mdash; or login with &mdash;</span>
              
              <div class="social-login">
                <a href="#" class="facebook">
                  <span class="icon-facebook mr-3"></span> 
                </a>
                <a href="#" class="twitter">
                  <span class="icon-twitter mr-3"></span> 
                </a>
                <a href="#" class="google">
                  <span class="icon-google mr-3"></span> 
                </a>
              </div>-->
            </form>
            </div>
          </div>
          
        </div>
        
      </div>
    </div>
  </div>

  <!-- ======= Footer ======= -->
<footer id="footer" class="footer">

  <div class="copyright-text">Created by <strong>Accretion Devs</strong> © <span id="current-year"></span> All rights reserved!</div>

</footer><!-- End Footer -->
  <!-- <script>
    document.addEventListener("DOMContentLoaded", function () {
      const notificationBar = document.getElementById("notification-bar");
  
      function showNotification(status, message) {
        notificationBar.textContent = message;
        notificationBar.classList.add(status);
        notificationBar.classList.remove("hidden");
        setTimeout(function () {
          hideNotification();
        }, 3000);
      }
  
      function hideNotification() {
        notificationBar.textContent = "";
        notificationBar.classList.remove("success", "error");
        notificationBar.classList.add("hidden");
      }
  
      const successMessage = "{{ success_message }}";
      const errorMessage = "{{ error_message  }}";
      console.log(successMessage, errorMessage);
      if (successMessage.trim() !== "") {
        showNotification("success", successMessage.trim());
      }
  
      
    });
    </script> -->
  
    <script src="{% static 'assets/js/script.js' %}"></script>
    <script src="{% static 'assets/js/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static 'assets/js/popper.min.js' %}"></script>
    <script src="{% static 'assets/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'assets/js/main.js' %}"></script>
    <script>
      const currentYear = new Date().getFullYear();
      document.getElementById("current-year").textContent = currentYear;
    </script>
  </body>
</html>