New changes.

main
nataly 1 year ago
parent ed74b91167
commit 207074acfe

@ -26,11 +26,11 @@
</head> </head>
<body class="bg-gray-100 font-poppinsLight"> <body class="font-poppinsLight">
<div class="w-full h-full flex flex-row gap-5 lg:gap-0"> <div class="w-full h-fit xlg1:h-[100vh] grid grid-cols-1 xlg1:grid-cols-2 gap-5">
<!-- SIDE BANNER --> <!-- SIDE BANNER -->
<div <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="relative w-full h-full flex justify-center items-center">
<div <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"> 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> </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"> <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 PROVIDING
OPTIMAL OPTIMAL
<br />SOLUTIONS<br /> <br />SOLUTIONS<br />
@ -58,7 +59,7 @@
<img src="{% static 'images/ositcom.png' %}" class="w-[120px] h-auto"> <img src="{% static 'images/ositcom.png' %}" class="w-[120px] h-auto">
</div> </div>
</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"> <img src="{% static 'images/banner-logo.png' %}" class="w-full h-auto">
</div> </div>
</div> </div>
@ -66,26 +67,43 @@
<!-- LOGIN/REGISTRATION --> <!-- LOGIN/REGISTRATION -->
<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 <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"> 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 id="loginForm" method="POST" action="{% url 'signin' %}" <form id="loginForm" method="POST" action="{% url 'signin' %}"
class="w-full s:w-fit flex flex-col gap-5 justify-center items-center"> class="w-full s:w-fit flex flex-col gap-5 justify-center items-center relative">
{% csrf_token %} {% csrf_token %}
<!-- OSINA LOGO ON DESKTOP --> <!-- OSINA LOGO ON DESKTOP -->
<img src="{% static 'images/osinab.png' %}" class="w-[250px] h-auto hidden l:block"> <img src="{% static 'images/osinab.png' %}" class="w-[250px] h-auto hidden xlg1:block">
<!-- OSINA LOGO ON MOBILE --> <!-- OSINA LOGO ON MOBILE -->
<img src="{% static 'images/osinaw.png' %}" class="w-[250px] h-auto block l:hidden"> <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 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 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"> <div
class="w-full h-[60px] rounded-md bg-gray-200 flex justify-center items-center shadow-sm">
<button <button
class="w-[50%] h-full bg-white rounded-md p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer" 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"> 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 Login
</button> </button>
<button class="w-[50%] h-full p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer" <button class="w-[50%] h-full p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
@ -99,9 +117,11 @@
<div id="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"> 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 %} {% for message in messages %}
<p {% if message.tags %} {% if message.tags %}
class="{{ message.tags }} text-white text-base s:text-xl font-light text-center" <p
{% endif %}>{{ message }}</p> class="{{ message.tags }} text-white text-base s:text-[17px] font-light text-center">
{{ message }}</p>
{% endif %}
{% endfor %} {% endfor %}
</div> </div>
@ -133,22 +153,27 @@
<!-- REGISTER 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"> <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 %} {% csrf_token %}
<!-- OSINA LOGO ON MOBILE --> <!-- OSINA LOGO ON DESKTOP -->
<img src="{% static 'images/osinaw.png' %}" class="w-[250px] h-auto block l:hidden mt-32 l:mt-0"> <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 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 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"> <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" <button class="w-[50%] h-full p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
id="registerToLoginButton" type="button"> id="registerToLoginButton" type="button">
Login Login
</button> </button>
<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" 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);"> 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 Register
</button> </button>
@ -203,7 +228,8 @@
<input type="checkbox" name="" id="" required> <input type="checkbox" name="" id="" required>
<p class="text-gray-500 text-sm s:text-base"> <p class="text-gray-500 text-sm s:text-base">
I agree to OSINA's <a I agree to OSINA's <a
class="text-osiblue cursor-pointer hover:text-gray-500">Terms & class="text-osiblue cursor-pointer hover:text-gray-500">Terms
&
Conditions</a> and <a Conditions</a> and <a
class="text-osiblue cursor-pointer hover:text-gray-500">Privacy class="text-osiblue cursor-pointer hover:text-gray-500">Privacy
Policy</a> Policy</a>
@ -220,8 +246,11 @@
</div> </div>
</div> </div>
</div> </div>
</form> </form>
</div>
<script> <script>
@ -237,37 +266,6 @@
</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 ---------------> <!-------------- JS SCRIPTS --------------->
<!-- Include the intl-tel-input JS --> <!-- Include the intl-tel-input JS -->

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

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

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

Loading…
Cancel
Save