{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Add Drugs</title>
<!-- ================= Favicon ================== -->
<!-- Standard -->
<link rel="shortcut icon" href="http://placehold.it/64.png/000/fff">
<!-- Retina iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="144x144" href="http://placehold.it/144.png/000/fff">
<!-- Retina iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="114x114" href="http://placehold.it/114.png/000/fff">
<!-- Standard iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="72x72" href="http://placehold.it/72.png/000/fff">
<!-- Standard iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="57x57" href="http://placehold.it/57.png/000/fff">
<!-- Styles -->
<link href="{% static 'css/lib/font-awesome.min.css' %}" rel="stylesheet">
<link href="{% static 'css/lib/themify-icons.css' %}" rel="stylesheet">
<link href="{% static 'css/lib/menubar/sidebar.css' %}" rel="stylesheet">
<link href="{% static 'css/lib/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'css/lib/helper.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<style type="text/css">
.gradient-custom-2 {
/* fallback for old browsers */
background: #fccb90;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);
}
@media (min-width: 768px) {
.gradient-form {
height: 100vh !important;
}
}
@media (min-width: 769px) {
.gradient-custom-2 {
border-top-right-radius: .3rem;
border-bottom-right-radius: .3rem;
}
}
#formFooter {
padding: 25px;
text-align: center;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
font-size: 23px;
color: rgb(236, 236, 236);
font-weight: bolder;
}
</style>
</head>
<body>
<section class="h-100 gradient-form" style="background-color: #eee;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-xl-10">
<div class="card rounded-3 text-black">
<div class="row g-0">
<div class="col-lg-6">
<div class="card-body p-md-5 mx-md-4">
<div class="text-center">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/lotus.webp"
style="width: 185px;" alt="logo">
<h4 class="mt-1 mb-5 pb-1">We are The Project-X Team</h4>
</div>
<form action="chk_user" method="POST">
{% csrf_token %}
<p>Please login to your account</p>
<div class="form-outline mb-4">
<input type="email" name="user_email" class="form-control"
placeholder="Email" />
<label class="form-label" for="form2Example11"></label>
</div>
<div class="form-outline mb-4">
<input type="password" name="user_password" class="form-control" placeholder="Password" />
<label class="form-label" for="form2Example22"></label>
</div>
{% if messages %}
<div>
{% for message in messages %}
<p style="color: red;" {% if message.tags %} class="{{ message.tags }}"{% endif %}>
{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}Important: {% endif %}
{{ message }}
</p>
{% endfor %}
</div>
{% endif %}
<div class="text-center pt-1 mb-5 pb-1">
<button type='submit' value='Login' class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" >Log
in</button>
<a class="text-muted" href="{% url 'reset_pwd' %}">Forgot password?</a>
</div>
<div class="d-flex align-items-center justify-content-center pb-4">
<p class="mb-0 me-2">Don't have an account?</p>
<button type="button" onclick="location.href = '/register'" class="btn btn-outline-danger">Create new</button>
</div>
</form>
</div>
</div>
<div class="col-lg-6 d-flex align-items-center gradient-custom-2">
<div class="text-white px-3 py-4 p-md-5 mx-md-4">
<h4 class="mb-4">An automated system to track drug products for hospitals using machine learning</h4>
<p class="small mb-0" style="color: white;font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
</div>
</section>
<!-- jquery vendor -->
<script src="{% static 'js/lib/jquery.min.js' %}"></script>
<script src="{% static 'js/lib/jquery.nanoscroller.min.js' %}"></script>
<!-- nano scroller -->
<script src="{% static 'js/lib/menubar/sidebar.js' %}"></script>
<script src="{% static 'js/lib/preloader/pace.min.js' %}"></script>
<!-- sidebar -->
<!-- bootstrap -->
<script src="{% static 'js/lib/bootstrap.min.js' %}"></script><script src="{% static 'js/scripts.js' %}"></script>
<!-- scripit init-->
</body>
</html>