{% extends "layouts/base-fullscreen.html" %} {% load static %} {% block title %} Sign In {% endblock %} <!-- Specific Page CSS goes HERE --> {% block stylesheets %}{% endblock stylesheets %} {% block body_class %}{% endblock %} {% block content %} {% include 'includes/navigation-transparent.html' %} <style type="text/css"> .body-p{ background-image: url('{% static "/img/bg/login-bg.jpg" %}'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; } .div-p{ max-width:700px; background: rgb(0,0,0); background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6404762588629201) 35%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6404762588629201) 35%, rgba(255,255,255,0) 100%); background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6404762588629201) 35%, rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#ffffff",GradientType=1); } </style> <div class="d-flex flex-column body-p vh-100" loading="lazy"> <div class="d-flex flex-grow-1 div-p"> <form class="p-3 bg-body m-auto border border-2 border-info-subtle rounded bg-opacity-75" style="width: 23rem;" role="form" method="post" action=""> {% csrf_token %} <h3 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;"> <i class="nf nf-md-login"></i> Log in </h3> <div class="row mb-3"> <p class="mb-0 text-danger text-center"> {% if msg %} {{ msg | safe }} {% else %} Add your credentials {% endif %} </p> </div> <div class="input-group input-group-outline mb-3"> {{ form.username }} </div> <div class="input-group input-group-outline mb-3"> {{ form.password }} </div> <div class="form-check form-switch d-flex align-items-center mb-3"> <input class="form-check-input" type="checkbox" id="rememberMe"> <label class="form-check-label mb-0 ms-2" for="rememberMe">Remember me</label> </div> <div class="text-center"> <button type="submit" name="login" class="btn btn-outline-primary bg-gradient-primary w-100 my-4 mb-2 text-light">Sign in</button> </div> <p class="mt-4 text-sm text-center"> Don't have an account? <a href="{% url 'register' %}" class="text-primary text-gradient font-weight-bold">Sign UP</a> </p> </form> </div> {% include 'includes/footer-auth.html' %} </div> {% endblock content %} <!-- Specific Page JS goes HERE --> {% block javascripts %}{% endblock javascripts %}