You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
7.0 KiB
HTML
137 lines
7.0 KiB
HTML
{% load static %}
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Osina</title>
|
|
|
|
<link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
</head>
|
|
|
|
|
|
<body class="font-poppinsLight">
|
|
<div class="w-full h-fit xlg1:h-[100vh] grid grid-cols-1 xlg1:grid-cols-2 gap-5">
|
|
<!-- SIDE BANNER -->
|
|
<div
|
|
class="bg-gradient-to-b from-gray-100 to-blue-950 p-5 s:p-9 overflow-hidden w-full h-full border-r border-gray-100 duration-500 hidden xlg1:block relative">
|
|
<div class="relative w-full h-full flex justify-center items-center">
|
|
<div
|
|
class="absolute top-0 left-32 w-[400px] h-[400px] bg-slate-800 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
|
|
</div>
|
|
<div
|
|
class="absolute top-20 right-0 w-[400px] h-[400px] bg-osiblue mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
|
|
</div>
|
|
<div
|
|
class="absolute bottom-0 left-10 w-[400px] h-[400px] bg-blue-900 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
|
|
</div>
|
|
<div
|
|
class="absolute bottom-0 right-36 w-[400px] h-[400px] bg-gray-400 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="absolute w-full h-full hidden xlg1:flex justify-between items-center m-auto inset-0 z-10 p-9">
|
|
<div class="flex flex-col">
|
|
<p class="text-white text-[30px] lg:text-[48px] xll:text-[70px] font-poppinsExtraBold">
|
|
PROVIDING
|
|
OPTIMAL
|
|
<br />SOLUTIONS<br />
|
|
</p>
|
|
<div class="flex justify-start items-center gap-2 mt-5">
|
|
<div class="w-[30px] h-[3px] bg-blue-500"></div>
|
|
<img src="{% static 'images/ositcom_logos/ositcomwhite.png' %}" class="w-[120px] h-auto">
|
|
</div>
|
|
</div>
|
|
<div class="absolute w-[400px] lg:w-[480px] xll:w-[550px] h-auto -right-40 bottom-5 animate-bouncePop">
|
|
<img src="{% static 'images/ositcom_logos/ositcomwhite(o).png' %}" class="w-full h-auto">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- FORGOT PASSWORD FORM -->
|
|
<div class="w-full h-[100vh] xlg1:h-full flex justify-center py-9 px-0 s:px-5 relative overflow-hidden xlg1:overflow-visible bg-gradient-to-b from-gray-100 to-blue-950 xlg1:from-white xlg1:to-white"
|
|
id="loginRegisterContainer">
|
|
|
|
<!-- Background blobs -->
|
|
<div class="relative w-full flex justify-center items-center">
|
|
<div
|
|
class="absolute top-0 left-32 w-[400px] h-[400px] bg-slate-800 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
|
|
</div>
|
|
<div
|
|
class="absolute top-20 right-0 w-[400px] h-[400px] bg-osiblue mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
|
|
</div>
|
|
<div
|
|
class="absolute bottom-0 left-10 w-[400px] h-[400px] bg-blue-900 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
|
|
</div>
|
|
<div
|
|
class="absolute bottom-0 right-36 w-[400px] h-[400px] bg-gray-400 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
|
|
</div>
|
|
|
|
|
|
<!-- LOGIN FORM -->
|
|
<form method="POST" action="{% url 'forgot-password' %}"
|
|
class="w-full s:w-fit flex flex-col gap-5 justify-center items-center relative">
|
|
{% csrf_token %}
|
|
|
|
<!-- OSINA LOGO ON DESKTOP -->
|
|
<img src="{% static 'images/ositcom_logos/osinablue.png' %}" class="w-[250px] h-auto hidden xlg1:block">
|
|
|
|
<!-- OSINA LOGO ON MOBILE -->
|
|
<img src="{% static 'images/ositcom_logos/osinawhite.png' %}" class="w-[220px] h-auto block xlg1:hidden">
|
|
|
|
<div class="w-full flex justify-center items-center px-5 s:px-0">
|
|
<div class="w-full s:w-[550px] h-fit bg-slate-50 rounded-md shadow-md p-5 s:p-9">
|
|
<p class="text-secondosiblue text-center font-light">Enter your email address below, and
|
|
we'll email you instructions for setting a new password.</p>
|
|
|
|
<div id="error-message"
|
|
class="messages opacity-0 absolute top-20 w-[85%] s:w-fit left-0 right-0 mx-auto px-9 s:px-14 py-3 rounded-md bg-red-500 bg-opacity-80 text-white text-center rounded-t-md shadow-md text-xl z-10 pointer-events-none">
|
|
{% for message in messages %}
|
|
<p
|
|
class="{{ message.tags }} text-white text-base s:text-[17px] font-light text-center">
|
|
{{ message }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<input type="email" placeholder="Email" name="email"
|
|
class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-8"
|
|
required>
|
|
|
|
<button type="submit"
|
|
class="w-full bg-osiblue text-white rounded-md mt-3 px-3 py-2 border border-osiblue hover:bg-transparent hover:text-osiblue cursor-pointer duration-300 text-xl">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showError() {
|
|
const errorMessage = document.getElementById('error-message');
|
|
errorMessage.classList.add("show-message");
|
|
|
|
// Automatically hide the message container after 10 seconds
|
|
setTimeout(() => {
|
|
errorMessage.classList.add("hide-message");
|
|
}, 10000);
|
|
}
|
|
|
|
// Check if error messages are present in the rendered HTML
|
|
const errorMessages = document.querySelectorAll('.messages p');
|
|
if (errorMessages.length > 0) {
|
|
showError();
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |