New changes.

main
nataly 1 year ago
parent ed74b91167
commit 207074acfe

@ -26,11 +26,11 @@
</head>
<body class="bg-gray-100 font-poppinsLight">
<div class="w-full h-full flex flex-row gap-5 lg:gap-0">
<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-9 overflow-hidden fixed w-full l:w-[40%] xlg1:w-[50%] h-[100vh] border-r border-gray-100 duration-500">
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">
@ -46,9 +46,10 @@
</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="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-[45px] xl:text-[70px] font-poppinsExtraBold">
<p class="text-white text-[30px] lg:text-[48px] xll:text-[70px] font-poppinsExtraBold">
PROVIDING
OPTIMAL
<br />SOLUTIONS<br />
@ -58,7 +59,7 @@
<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">
<div class="absolute w-[400px] lg:w-[480px] xll:w-[550px] h-auto -right-40 bottom-5 animate-bouncePop">
<img src="{% static 'images/banner-logo.png' %}" class="w-full h-auto">
</div>
</div>
@ -66,162 +67,190 @@
<!-- 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="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>
<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 %}
<!-- LOGIN FORM -->
<form id="loginForm" method="POST" action="{% url 'signin' %}"
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/osinab.png' %}" class="w-[250px] h-auto hidden xlg1:block">
<!-- OSINA LOGO ON MOBILE -->
<img src="{% static 'images/osinaw.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">
<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>
<input name="username" id="emailInput"
class="w-full bg-transparent border border-gray-300 rounded-md px-3 py-4 outline-none"
placeholder="Email" required>
<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 %}
{% if message.tags %}
<p
class="{{ message.tags }} text-white text-base s:text-[17px] font-light text-center">
{{ message }}</p>
{% endif %}
{% endfor %}
</div>
<div class="w-full h-fit relative">
<input name="password" id="passwordInput" type="password"
<input name="username" id="emailInput"
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>
placeholder="Email" required>
<div class="w-full h-fit relative">
<input name="password" 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>
</div>
<a class="text-gray-500 hover:text-osiblue duration-300 cursor-pointer">Forgot Your
Password?</a>
<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>
<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>
</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>
</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 relative">
{% csrf_token %}
<!-- OSINA LOGO ON DESKTOP -->
<img src="{% static 'images/osinab.png' %}" class="w-[250px] h-auto hidden xlg1:block">
<!-- OSINA LOGO ON MOBILE -->
<img src="{% static 'images/osinaw.png' %}" class="w-[220px] 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-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>
<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>
<!-- 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>
<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>
<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" 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="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="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>
<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>
<p class="text-red-500 font-light text-sm" id="emailError"></p>
<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>
<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>
<p class="text-red-500 font-light text-sm" id="emailError"></p>
<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>
<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>
<p class="text-red-500 font-light text-sm" id="passwordError"></p>
<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>
<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>
<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>
<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>
</div>
</form>
</div>
</form>
<script>
@ -237,37 +266,6 @@
</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 -->

@ -27,7 +27,7 @@ def login_with_email(request, email, key):
else:
pass
from django.contrib import messages
# Pages views
def signin(request):
if request.user.is_authenticated:
@ -46,7 +46,7 @@ def signin(request):
Connection.objects.create(status='Online', date=datetime.now(), user=user)
return redirect('home')
else:
form.add_error(None, 'Invalid email or password. Please try again.')
messages.error(request, 'Invalid email or password. Please try again.')
else:
form = CustomLoginForm()

@ -670,6 +670,10 @@ video {
position: relative;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: 0px;
}
@ -949,10 +953,6 @@ video {
margin-top: 100px;
}
.mt-\[5\%\] {
margin-top: 5%;
}
.mt-\[50px\] {
margin-top: 50px;
}
@ -1175,6 +1175,10 @@ video {
width: 20px;
}
.w-\[220px\] {
width: 220px;
}
.w-\[22px\] {
width: 22px;
}
@ -1267,10 +1271,6 @@ video {
width: 85%;
}
.w-\[90\%\] {
width: 90%;
}
.w-\[95\%\] {
width: 95%;
}
@ -1531,6 +1531,14 @@ video {
overflow: hidden;
}
.overflow-visible {
overflow: visible;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-x-auto {
overflow-x: auto;
}
@ -2154,6 +2162,10 @@ video {
--tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-white {
--tw-gradient-to: #fff var(--tw-gradient-to-position);
}
.stroke-black {
stroke: #000;
}
@ -2376,18 +2388,10 @@ video {
font-size: 22px;
}
.text-\[25px\] {
font-size: 25px;
}
.text-\[30px\] {
font-size: 30px;
}
.text-\[50px\] {
font-size: 50px;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
@ -2980,11 +2984,6 @@ video {
padding: 0.5rem;
}
.hover\:text-blue-500:hover {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
}
.hover\:text-gray-500:hover {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
@ -3142,6 +3141,10 @@ video {
line-height: 2rem;
}
.s\:text-\[17px\] {
font-size: 17px;
}
.s\:text-\[20px\] {
font-size: 20px;
}
@ -3207,30 +3210,6 @@ video {
}
@media (min-width: 960px) {
.l\:relative {
position: relative;
}
.l\:z-0 {
z-index: 0;
}
.l\:ml-\[40\%\] {
margin-left: 40%;
}
.l\:mt-0 {
margin-top: 0px;
}
.l\:block {
display: block;
}
.l\:flex {
display: flex;
}
.l\:grid {
display: grid;
}
@ -3247,10 +3226,6 @@ video {
width: 300px;
}
.l\:w-\[40\%\] {
width: 40%;
}
.l\:w-fit {
width: -moz-fit-content;
width: fit-content;
@ -3278,12 +3253,8 @@ video {
width: 480px;
}
.lg\:gap-0 {
gap: 0px;
}
.lg\:text-\[45px\] {
font-size: 45px;
.lg\:text-\[48px\] {
font-size: 48px;
}
}
@ -3292,20 +3263,46 @@ video {
position: fixed;
}
.xlg1\:ml-\[50\%\] {
margin-left: 50%;
.xlg1\:block {
display: block;
}
.xlg1\:flex {
display: flex;
}
.xlg1\:hidden {
display: none;
}
.xlg1\:h-\[100vh\] {
height: 100vh;
}
.xlg1\:h-full {
height: 100%;
}
.xlg1\:w-\[300px\] {
width: 300px;
}
.xlg1\:w-\[50\%\] {
width: 50%;
.xlg1\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xlg1\:overflow-visible {
overflow: visible;
}
.xlg1\:from-white {
--tw-gradient-from: #fff var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.xlg1\:to-white {
--tw-gradient-to: #fff var(--tw-gradient-to-position);
}
}
@ -3346,17 +3343,9 @@ video {
}
@media (min-width: 1536px) {
.xl\:w-\[550px\] {
width: 550px;
}
.xl\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.xl\:text-\[70px\] {
font-size: 70px;
}
}
@media (min-width: 1600px) {
@ -3372,7 +3361,15 @@ video {
display: none;
}
.xll\:w-\[550px\] {
width: 550px;
}
.xll\:rounded-none {
border-radius: 0px;
}
.xll\:text-\[70px\] {
font-size: 70px;
}
}

@ -3,6 +3,7 @@ const loginToRegisterButton = document.getElementById('loginToRegisterButton');
const registerToLoginButton = document.getElementById('registerToLoginButton');
const loginForm = document.getElementById('loginForm');
const registerForm = document.getElementById('registerForm');
const loginRegisterContainer = document.getElementById('loginRegisterContainer');
loginToRegisterButton.addEventListener('click', showRegisterForm);
registerToLoginButton.addEventListener('click', showLoginForm);
@ -11,11 +12,19 @@ registerToLoginButton.addEventListener('click', showLoginForm);
function showRegisterForm() {
loginForm.style.display = 'none';
registerForm.style.display = 'flex';
if (window.innerWidth < 1200) {
loginRegisterContainer.classList.remove('h-[100vh]');
loginRegisterContainer.classList.add('h-fit');
}
}
function showLoginForm() {
loginForm.style.display = 'flex';
registerForm.style.display = 'none';
if (window.innerWidth < 1200) {
loginRegisterContainer.classList.add('h-[100vh]');
loginRegisterContainer.classList.remove('h-fit');
}
}

Loading…
Cancel
Save