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.
282 lines
15 KiB
HTML
282 lines
15 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>
|
|
|
|
<!-- INTERNATIONAL PHONE NUMBER INPUT TAG -->
|
|
<script src="https://unpkg.com/libphonenumber-js/bundle/libphonenumber-js.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
|
|
|
|
<style>
|
|
.iti {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
|
|
<body class="bg-gray-100 font-poppinsLight">
|
|
<div class="w-full h-full flex flex-row gap-5 lg:gap-0">
|
|
<!-- SIDE BANNER -->
|
|
<div
|
|
class="bg-gradient-to-b from-gray-100 to-blue-950 p-9 overflow-hidden fixed w-full l:w-[40%] xlg1:w-[50%] h-[100vh] border-r border-gray-100 duration-500">
|
|
<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 l: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-[45px] xl:text-[70px] font-extrabold">
|
|
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.png' %}" class="w-[120px] h-auto">
|
|
</div>
|
|
</div>
|
|
<div class="absolute w-[400px] lg:w-[480px] xl:w-[550px] h-auto -right-40 bottom-5 animate-bouncePop">
|
|
<img src="{% static 'images/banner-logo.png' %}" class="w-full h-auto">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- LOGIN/REGISTRATION -->
|
|
<div
|
|
class="w-full h-[100vh] flex flex-col gap-5 justify-center items-center py-9 px-0 s:px-5 ml-0 l:ml-[40%] xlg1:ml-[50%] absolute l:relative z-30 l:z-0">
|
|
|
|
|
|
<form id="loginForm" method="POST" action="{% url 'signin' %}"
|
|
class="w-full s:w-fit flex flex-col gap-5 justify-center items-center">
|
|
{% csrf_token %}
|
|
|
|
<!-- OSINA LOGO ON DESKTOP -->
|
|
<img src="{% static 'images/osinab.png' %}" class="w-[250px] h-auto hidden l:block">
|
|
|
|
<!-- OSINA LOGO ON MOBILE -->
|
|
<img src="{% static 'images/osinaw.png' %}" class="w-[250px] h-auto block l: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">
|
|
<div class="w-full h-[60px] rounded-md bg-gray-200 flex justify-center items-center shadow-sm">
|
|
<button
|
|
class="w-[50%] h-full bg-white rounded-md p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
|
|
style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);" type="button">
|
|
Login
|
|
</button>
|
|
<button class="w-[50%] h-full p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
|
|
id="loginToRegisterButton" type="button">
|
|
Register
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-5 w-full flex flex-col gap-3">
|
|
<!-- LOGIN ERROR MESSAGE -->
|
|
<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 {% if message.tags %}
|
|
class="{{ message.tags }} text-white text-base s:text-xl font-light text-center"
|
|
{% endif %}>{{ message }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<input name="emailInput" id="emailInput" type="email"
|
|
class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
|
|
placeholder="Email" required>
|
|
|
|
<div class="w-full h-fit relative">
|
|
<input name="passwordInput" id="passwordInput" type="password"
|
|
class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
|
|
placeholder="Password" id="passwordInput" required>
|
|
<div class="absolute top-[14px] right-3 text-[20px] text-gray-500 cursor-pointer"
|
|
id="showPasswordButton">
|
|
<i class="fa fa-eye"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<a class="text-gray-500 hover:text-osiblue duration-300 cursor-pointer">Forgot Your
|
|
Password?</a>
|
|
|
|
<button type="submit"
|
|
class="w-full bg-osiblue text-white rounded-md px-3 py-2 mt-5 border border-osiblue hover:bg-transparent hover:text-osiblue cursor-pointer duration-300 text-xl">
|
|
Login
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
|
|
<!-- REGISTER FORM -->
|
|
<form id="registerForm" style="display: none;" method="POST" action="" class="w-full s:w-fit flex flex-col gap-5 justify-center items-center">
|
|
{% csrf_token %}
|
|
|
|
<!-- OSINA LOGO ON MOBILE -->
|
|
<img src="{% static 'images/osinaw.png' %}" class="w-[250px] h-auto block l:hidden mt-32 l:mt-0">
|
|
|
|
|
|
<div class="w-full h-fit 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">
|
|
<div class="w-full h-[60px] rounded-md bg-gray-200 flex justify-center items-center shadow-sm">
|
|
<button class="w-[50%] h-full p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
|
|
id="registerToLoginButton" type="button">
|
|
Login
|
|
</button>
|
|
<button
|
|
class="w-[50%] h-full bg-white rounded-md p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer" type="button"
|
|
style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);">
|
|
Register
|
|
</button>
|
|
</div>
|
|
|
|
<!-- REGISTARTION ERROR MESSAGE -->
|
|
<div id="register-error-message"
|
|
class="opacity-0 absolute top-10 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">
|
|
<p>Please Fill Out All The Fields</p>
|
|
</div>
|
|
|
|
<div class="mt-5 w-full flex flex-col gap-3">
|
|
<div class="w-full py-1">
|
|
<p class="text-red-500 text-center font-light hidden" id="registrationErrorMessage">
|
|
Please fill out all the fields.</p>
|
|
</div>
|
|
|
|
<input type="text" placeholder="Username" name="username" id="username"
|
|
class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4 hidden"
|
|
required>
|
|
|
|
<input type="text" name="first_name"
|
|
class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
|
|
placeholder="First Name" required>
|
|
|
|
<input type="text" name="last_name"
|
|
class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
|
|
placeholder="Last Name" required>
|
|
|
|
<input type="email" id="emailAddressInput" name="email"
|
|
class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
|
|
placeholder="Email" required>
|
|
|
|
<p class="text-red-500 font-light text-sm" id="emailError"></p>
|
|
|
|
|
|
<input type="number" id="phone" name="mobile_number"
|
|
class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none"
|
|
placeholder="Mobile Number" required>
|
|
|
|
<input type="password" name="password1"
|
|
class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
|
|
placeholder="Password" required>
|
|
|
|
<input type="password" name="password2"
|
|
class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
|
|
placeholder="Password Confirmation" required>
|
|
|
|
<p class="text-red-500 font-light text-sm" id="passwordError"></p>
|
|
|
|
<div class="w-full flex justify-start items-center gap-3 mt-5">
|
|
<input type="checkbox" name="" id="" required>
|
|
<p class="text-gray-500 text-sm s:text-base">
|
|
I agree to OSINA's <a
|
|
class="text-osiblue cursor-pointer hover:text-gray-500">Terms &
|
|
Conditions</a> and <a
|
|
class="text-osiblue cursor-pointer hover:text-gray-500">Privacy
|
|
Policy</a>
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
class="w-full bg-osiblue text-white rounded-md px-3 py-2 mt-3 border border-osiblue hover:bg-transparent hover:text-osiblue cursor-pointer duration-300 text-[20px]"
|
|
type="submit" id="openOtpModalButton">
|
|
Register
|
|
</button>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
|
|
<script>
|
|
// FETCH THE ENTERED EMAIL AND DISPLAY IT IN THE HIDDEN USERNAME INPUT TAG
|
|
const emailInput = document.getElementById('emailAddressInput');
|
|
const usernameInput = document.getElementById('username');
|
|
|
|
emailInput.addEventListener('input', function () {
|
|
usernameInput.value = emailInput.value;
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- <div class="w-full flex flex-col justify-center items-center">
|
|
<div class="w-full flex justify-center items-center mt-[5%]">
|
|
<h1 class="text-[50px] text-slate-800 font-semibold">OSINA</h1>
|
|
</div>
|
|
<div class="w-[90%] s:w-[500px] h-fit rounded-md bg-white shadow-lg mt-5 flex flex-col items-center pt-3 pb-5 px-3">
|
|
<h1 class="text-blue-500 text-[25px] text-center font-light mt-2">Login To Dashboard</h1>
|
|
<form class="w-full mt-5" method="post" action="{% url 'signin' %}">
|
|
{% csrf_token %}
|
|
<input type="text" name="username" placeholder="Username" class="w-full bg-transparent border border-gray-300 rounded-md py-2 px-3 outline-none">
|
|
<input type="password" name="password" placeholder="Password" class="w-full bg-transparent border border-gray-300 rounded-md py-2 px-3 outline-none mt-4">
|
|
{% if form.non_field_errors %}
|
|
<ul class="messages">
|
|
<li style="text-align: center; color:red; margin-top:20px;">{{ form.non_field_errors }}</li>
|
|
</ul>
|
|
{% endif %}
|
|
<div class="w-full flex justify-start items-center gap-1 mt-5">
|
|
<input type="checkbox" checked>
|
|
<p class="text-base text-gray-400 font-light">Keep me logged in</p>
|
|
</div>
|
|
<div class="w-full flex justify-center items-center mt-5">
|
|
<button type="submit" class="w-full px-3 py-1 bg-blue-500 border border-blue-500 text-white text-base s:text-xl rounded-md font-medium hover:bg-white hover:text-blue-500 duration-300">LOGIN</button>
|
|
</div>
|
|
<div class="mt-3 w-full flex justify-center items-center">
|
|
<p class="text-base text-gray-400 font-light cursor-pointer">Forgot Password?</p>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div> -->
|
|
|
|
|
|
<!-------------- JS SCRIPTS --------------->
|
|
|
|
<!-- Include the intl-tel-input JS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>
|
|
<script src='{% static "js/international-mobile-input-tag.js" %}'></script>
|
|
|
|
<script src='{% static "js/login-register.js" %}'></script>
|
|
|
|
<script src='{% static "js/registration.js" %}'></script>
|
|
</body>
|
|
|
|
</html> |