|
|
|
@ -92,19 +92,6 @@
|
|
|
|
|
|
|
|
|
|
<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-secondosiblue 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-secondosiblue 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 -->
|
|
|
|
@ -146,101 +133,6 @@
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- REGISTER FORM -->
|
|
|
|
|
<form id="registerForm" style="display: none;" method="POST" action="{% url 'signup' %}"
|
|
|
|
|
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-[200px] xxlg:w-[250px] h-auto hidden xlg1:block">
|
|
|
|
|
|
|
|
|
|
<!-- OSINA LOGO ON MOBILE -->
|
|
|
|
|
<img src="{% static 'images/ositcom_logos/osinawhite.png' %}" class="w-[200px] h-auto block xlg1:hidden">
|
|
|
|
|
|
|
|
|
|
<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-secondosiblue 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-secondosiblue 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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -254,7 +146,6 @@
|
|
|
|
|
|
|
|
|
|
<script src='{% static "js/login_register/login-register.js" %}'></script>
|
|
|
|
|
|
|
|
|
|
<script src='{% static "js/login_register/registration.js" %}'></script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|