Skip to content

Commit cd47418

Browse files
DanShindeDanShinde
committed
updated Login Page
1 parent 98557d8 commit cd47418

8 files changed

Lines changed: 278 additions & 234 deletions

File tree

‎accounts/urls.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
from django.contrib import admin
1818
from django.urls import path, include
1919
from rest_framework.routers import DefaultRouter
20-
from .views import RegisterViewA, LoginViewA,ProfileView, LogoutViewA, InfoViewSet, registerw
20+
from .views import RegisterViewA, LoginViewA,ProfileView, LogoutViewA, InfoViewSet, registerw, LoginViewW
2121
from rest_framework_simplejwt.views import TokenRefreshView
2222
from django.contrib.auth.views import LoginView, LogoutView
2323

@@ -34,7 +34,7 @@
3434
path('logout/', LogoutViewA.as_view(), name ='logout'),
3535
path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
3636
path('', include(router.urls)),
37-
path('loginw/', LoginView.as_view(template_name='accounts/login.html'), name='loginw'),
37+
path('loginw/', LoginViewW.as_view(), name='loginw'),
3838
path('logoutw/', LogoutView.as_view(next_page='loginw'), name='logoutw'),
3939
path('registerw/', registerw, name='registerw'),
4040
# path('registerw/', RegisterView.as_view(template_name='accounts/register.html'), name='registerw'),

‎accounts/views.py‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
from django.shortcuts import get_object_or_404, redirect
1313
from django.core.cache import cache
1414
from .forms import CustomUserForm
15+
from django.contrib.auth.views import LoginView
1516

1617
# ViewSets define the view behavior.
1718
class InfoViewSet(viewsets.ReadOnlyModelViewSet):
@@ -118,6 +119,9 @@ def get(self, request):
118119
serializer = UserProfileSerializer(userProfile)
119120
return Response(serializer.data)
120121

122+
class LoginViewW(LoginView):
123+
redirect_authenticated_user = True
124+
template_name='accounts/login.html'
121125

122126

123127
def registerw(request):

‎static/accounts/login.css‎

Lines changed: 154 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,203 +1,210 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
1+
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
22

33
*{
44
margin: 0;
55
padding: 0;
66
box-sizing: border-box;
7-
font-family: "Poppins", sans-serif;
8-
}
7+
font-family: 'Montserrat', sans-serif;
8+
}
99

1010
body{
11+
background-color: #c9d6ff;
12+
background: linear-gradient(to right, #e2e2e2, #c9d6ff);
1113
display: flex;
12-
justify-content: center;
1314
align-items: center;
14-
min-height: 100vh;
15-
background: #23252a;
15+
justify-content: center;
16+
flex-direction: column;
17+
height: 100vh;
1618
}
1719

18-
.box {
20+
.container{
21+
background-color: #fff;
22+
border-radius: 30px;
23+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
1924
position: relative;
20-
width: 400px;
21-
height: 450px;
22-
background: #1c1c1c;
23-
border-radius: 8px;
2425
overflow: hidden;
25-
padding: 10px;
26-
align-items: center;
26+
width: 768px;
27+
max-width: 100%;
28+
min-height: 75%;
2729
}
2830

29-
.box::before{
30-
content: '';
31-
position: absolute;
32-
top: -50%;
33-
left: -50%;
34-
width: 380px;
35-
height: 420px;
36-
background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff, #45f3ff);
37-
z-index: 1;
38-
transform-origin: bottom right;
39-
animation: animate 6s linear infinite;
31+
.container p{
32+
font-size: 14px;
33+
line-height: 20px;
34+
letter-spacing: 0.3px;
35+
margin: 20px 0;
4036
}
4137

42-
.box::after{
43-
content: '';
44-
position: absolute;
45-
top: -50%;
46-
left: -50%;
47-
width: 380px;
48-
height: 420px;
49-
background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff, #45f3ff);
50-
z-index: 1;
51-
transform-origin: bottom right;
52-
animation: animate 6s linear infinite;
53-
animation-delay: -3s;
38+
.container span{
39+
font-size: 12px;
5440
}
5541

56-
.borderLine::before{
57-
content: '';
58-
position: absolute;
59-
top: -50%;
60-
left: -50%;
61-
width: 380px;
62-
height: 420px;
63-
background: linear-gradient(0deg, transparent, transparent, #ff2770, #ff2770, #ff2770);
64-
z-index: 1;
65-
transform-origin: bottom right;
66-
animation: animate 6s linear infinite;
67-
animation-delay: -1.5s;
42+
.container a{
43+
color: #333;
44+
font-size: 13px;
45+
text-decoration: none;
46+
margin: 15px 0 10px;
6847
}
6948

70-
.borderLine::after
71-
{
72-
content: '';
73-
position: absolute;
74-
top: -50%;
75-
left: -50%;
76-
width: 380px;
77-
height: 420px;
78-
background: linear-gradient(0deg, transparent, transparent, #ff2770, #ff2770, #ff2770);
79-
z-index: 1;
80-
transform-origin: bottom right;
81-
animation: animate 6s linear infinite;
82-
animation-delay: -4.5s;
49+
.container button{
50+
background-color: #2da0a8;
51+
color: #fff;
52+
font-size: 12px;
53+
padding: 10px 45px;
54+
border: 1px solid transparent;
55+
border-radius: 8px;
56+
font-weight: 600;
57+
letter-spacing: 0.5px;
58+
text-transform: uppercase;
59+
margin-top: 10px;
60+
cursor: pointer;
8361
}
8462

85-
86-
@keyframes animate {
87-
0% {
88-
transform: rotate(0deg);
89-
}
90-
100% {
91-
transform: rotate(360deg);
92-
}
93-
63+
.container button.hidden{
64+
background-color: transparent;
65+
border-color: #fff;
9466
}
9567

96-
.box form{
97-
position: absolute;
98-
inset: 4px;
99-
background: #222;
100-
padding: 50px 40px;
101-
border-radius: 8px;
102-
z-index: 2;
68+
.container form{
69+
background-color: #fff;
10370
display: flex;
71+
align-items: center;
72+
justify-content: center;
10473
flex-direction: column;
74+
padding: 0 40px;
75+
height: 100%;
10576
}
10677

107-
.box form h2{
108-
color: #fff;
109-
font-weight: 500;
110-
text-align: center;
111-
letter-spacing: 0.1em;
78+
.container input{
79+
background-color: #eee;
80+
border: none;
81+
margin: 8px 0;
82+
padding: 10px 15px;
83+
font-size: 13px;
84+
border-radius: 8px;
85+
width: 100%;
86+
outline: none;
11287
}
11388

114-
.box form .inputBox{
115-
position: relative;
116-
width: 300px;
117-
margin-top: 35px;
89+
.form-container{
90+
position: absolute;
91+
top: 0;
92+
height: 100%;
93+
transition: all 0.6s ease-in-out;
11894
}
11995

120-
.box form .inputBox input{
121-
position: relative;
122-
width: 100%;
123-
padding: 20px 10px 10px;
124-
background: transparent;
125-
outline: none;
126-
border: none;
127-
box-shadow: none;
128-
color: #23242a;
129-
font-size: 1em;
130-
letter-spacing: 0.05em;
131-
transition: 0.5s;
132-
z-index: 10;
96+
.sign-in{
97+
left: 0;
98+
width: 50%;
99+
z-index: 2;
133100
}
134101

135-
.box form .inputBox span{
136-
position: absolute;
102+
.container.active .sign-in{
103+
transform: translateX(100%);
104+
}
105+
106+
.sign-up{
137107
left: 0;
138-
padding: 20px 0px 10px;
139-
pointer-events: none;
140-
color: #8f8f8f;
141-
font-size: 1em;
142-
letter-spacing: 0.05em;
143-
transition: 0.5s;
108+
width: 50%;
109+
opacity: 0;
110+
z-index: 1;
144111
}
145112

146-
.box form .inputBox input:valid ~ span,
147-
.box form .inputBox input:focus ~ span {
148-
color: #fff;
149-
font-size: 0.75em;
150-
transform: translateY((-34px));
113+
.container.active .sign-up{
114+
transform: translateX(100%);
115+
opacity: 1;
116+
z-index: 5;
117+
animation: move 0.6s;
151118
}
152119

153-
.box form .inputBox i{
120+
@keyframes move{
121+
0%, 49.99%{
122+
opacity: 0;
123+
z-index: 1;
124+
}
125+
50%, 100%{
126+
opacity: 1;
127+
z-index: 5;
128+
}
129+
}
130+
131+
.social-icons{
132+
margin: 20px 0;
133+
}
134+
135+
.social-icons a{
136+
border: 1px solid #ccc;
137+
border-radius: 20%;
138+
display: inline-flex;
139+
justify-content: center;
140+
align-items: center;
141+
margin: 0 3px;
142+
width: 40px;
143+
height: 40px;
144+
}
145+
146+
.toggle-container{
154147
position: absolute;
155-
left: 0;
156-
bottom: 0;
157-
width: 100%;
158-
height: 2px;
159-
background: #fff;
160-
border-radius: 4px;
148+
top: 0;
149+
left: 50%;
150+
width: 50%;
151+
height: 100%;
161152
overflow: hidden;
162-
transition: 0.5s;
163-
pointer-events: none;
153+
transition: all 0.6s ease-in-out;
154+
border-radius: 150px 0 0 100px;
155+
z-index: 1000;
164156
}
165157

166-
.box form .inputBox input:valid ~ i,
167-
.box form .inputBox input:focus ~ i {
168-
height: 44px;
158+
.container.active .toggle-container{
159+
transform: translateX(-100%);
160+
border-radius: 0 150px 100px 0;
169161
}
170162

171-
.box form .links{
172-
display: flex;
173-
justify-content: space-between;
163+
.toggle{
164+
background-color: #2da0a8;
165+
height: 100%;
166+
background: linear-gradient(to right, #5c6bc0, #2da0a8);
167+
color: #fff;
168+
position: relative;
169+
left: -100%;
170+
height: 100%;
171+
width: 200%;
172+
transform: translateX(0);
173+
transition: all 0.6s ease-in-out;
174174
}
175175

176-
.box form .links a{
177-
margin: 10px 0;
178-
font-size: 0.75em;
179-
color: #8f8f8f;
180-
text-decoration: none;
176+
.container.active .toggle{
177+
transform: translateX(50%);
181178
}
182179

183-
.box form .links a:hover,
184-
.box form .links a:nth-child(2){
185-
color: #fff;
180+
.toggle-panel{
181+
position: absolute;
182+
width: 50%;
183+
height: 100%;
184+
display: flex;
185+
align-items: center;
186+
justify-content: center;
187+
flex-direction: column;
188+
padding: 0 30px;
189+
text-align: center;
190+
top: 0;
191+
transform: translateX(0);
192+
transition: all 0.6s ease-in-out;
186193
}
187194

188-
#submit{
189-
border: none;
190-
outline: none;
191-
padding: 9px 25px;
192-
cursor: pointer;
193-
font-size: 0.9em;
194-
border-radius: 4px;
195-
font-weight: 600;
196-
width: 100px;
197-
margin-top: 10px;
195+
.toggle-left{
196+
transform: translateX(-200%);
197+
}
198+
199+
.container.active .toggle-left{
200+
transform: translateX(0);
198201
}
199202

200-
#submit:active{
201-
opacity: 0.8;
203+
.toggle-right{
204+
right: 0;
205+
transform: translateX(0);
202206
}
203207

208+
.container.active .toggle-right{
209+
transform: translateX(200%);
210+
}

0 commit comments

Comments
 (0)