Skip to content

Commit c29d1ea

Browse files
gyanshankar1708gyanshankar1708
authored
Merge pull request #837 from Riya-Kharade/issue-750-login-signup-forgot
Login Signup and forgot page added in project
2 parents 8ed0206 + adb46cb commit c29d1ea

File tree

3 files changed

+684
-0
lines changed

3 files changed

+684
-0
lines changed

‎forgot_password.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>GrowCraft - Forgot Password</title>
7+
<!-- Google Fonts -->
8+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
9+
<style>
10+
*{margin:0; padding:0; box-sizing:border-box; font-family:'Poppins', sans-serif;}
11+
body{
12+
background:linear-gradient(135deg,#e6f9ec,#c8f3d6);
13+
display:flex;
14+
justify-content:center;
15+
align-items:center;
16+
min-height:100vh;
17+
animation:fadeIn 1s ease forwards;
18+
}
19+
20+
@keyframes fadeIn {
21+
from{opacity:0; transform:translateY(20px);}
22+
to{opacity:1; transform:translateY(0);}
23+
}
24+
25+
.container{
26+
width:400px;
27+
max-width:90%;
28+
background:#fff;
29+
border-radius:12px;
30+
padding:30px 25px;
31+
box-shadow:0 12px 30px rgba(0,0,0,0.2);
32+
text-align:center;
33+
animation:slideUp 1s ease forwards;
34+
}
35+
36+
@keyframes slideUp {
37+
from{opacity:0; transform:translateY(30px);}
38+
to{opacity:1; transform:translateY(0);}
39+
}
40+
41+
h2{color:#2e7d32; margin-bottom:10px;}
42+
p{color:#4f4f4f; font-size:14px; margin-bottom:20px;}
43+
44+
input{
45+
width:100%;
46+
padding:14px;
47+
margin-bottom:15px;
48+
border-radius:6px;
49+
border:none;
50+
outline:none;
51+
font-size:14px;
52+
transition:all 0.3s ease;
53+
}
54+
55+
input:focus{
56+
border:2px solid #a5d6a7;
57+
box-shadow:0 4px 10px rgba(0,0,0,0.1);
58+
}
59+
60+
button{
61+
width:100%;
62+
padding:14px;
63+
background:#1b5e20;
64+
border:none;
65+
border-radius:6px;
66+
color:white;
67+
font-size:16px;
68+
cursor:pointer;
69+
transition:all 0.3s ease;
70+
}
71+
72+
button:hover{
73+
background:#2e7d32;
74+
transform:scale(1.05);
75+
}
76+
77+
.back-login{
78+
margin-top:15px;
79+
font-size:13px;
80+
}
81+
.back-login a{
82+
color:#2e7d32;
83+
text-decoration:none;
84+
transition:all 0.3s ease;
85+
}
86+
.back-login a:hover{
87+
color:#1b5e20;
88+
}
89+
</style>
90+
</head>
91+
<body>
92+
<div class="container">
93+
<h2>Forgot Password</h2>
94+
<p>Enter your email below to reset your password.</p>
95+
<form id="forgotForm">
96+
<input type="email" id="email" placeholder="Enter your email" required>
97+
<button type="submit">Reset Password</button>
98+
</form>
99+
<div class="back-login">
100+
<p>Remembered your password? <a href="login.html">Login here</a></p>
101+
</div>
102+
</div>
103+
104+
<script>
105+
document.getElementById("forgotForm").addEventListener("submit", function(e){
106+
e.preventDefault();
107+
const email = document.getElementById("email").value.trim();
108+
if(!email){ alert("Please enter your email."); return; }
109+
alert("Password reset link sent to: " + email);
110+
});
111+
</script>
112+
</body>
113+
</html>

‎login.html‎

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>GrowCraft - Login</title>
7+
<!-- Google Fonts -->
8+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
9+
<!-- Font Awesome -->
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11+
<style>
12+
*{margin:0; padding:0; box-sizing:border-box; font-family:'Poppins', sans-serif;}
13+
body{
14+
background:linear-gradient(135deg,#e6f9ec,#c8f3d6);
15+
display:flex;
16+
justify-content:center;
17+
align-items:center;
18+
min-height:100vh;
19+
animation:fadeIn 1s ease forwards;
20+
}
21+
22+
@keyframes fadeIn {
23+
from{opacity:0; transform:translateY(20px);}
24+
to{opacity:1; transform:translateY(0);}
25+
}
26+
27+
.auth-container{
28+
display:flex;
29+
width:850px;
30+
max-width:95%;
31+
background:#fff;
32+
border-radius:12px;
33+
overflow:hidden;
34+
box-shadow:0 12px 30px rgba(0,0,0,0.2);
35+
align-items:center;
36+
transition:all 0.4s ease;
37+
animation:slideUp 1s ease forwards;
38+
}
39+
40+
@keyframes slideUp {
41+
from{opacity:0; transform:translateY(30px);}
42+
to{opacity:1; transform:translateY(0);}
43+
}
44+
45+
.auth-image{
46+
flex:1;
47+
background:linear-gradient(160deg,#a8e6cf,#dcedc8);
48+
padding:20px;
49+
display:flex;
50+
flex-direction:column;
51+
align-items:center;
52+
gap:20px;
53+
position:relative;
54+
overflow:hidden;
55+
}
56+
57+
.auth-image img{
58+
width:140px;
59+
border-radius:8px;
60+
margin-bottom:10px;
61+
transition:transform 0.3s ease;
62+
}
63+
.auth-image img:hover{
64+
transform:scale(1.05);
65+
}
66+
67+
.info-card{
68+
background:white;
69+
border-radius:12px;
70+
padding:12px 15px;
71+
width:85%;
72+
display:flex;
73+
align-items:center;
74+
gap:12px;
75+
box-shadow:0 4px 10px rgba(0,0,0,0.1);
76+
transition:all 0.4s ease;
77+
animation:float 3s ease-in-out infinite;
78+
}
79+
.info-card:hover{
80+
transform:translateY(-10px) scale(1.03);
81+
box-shadow:0 8px 20px rgba(0,0,0,0.2);
82+
}
83+
@keyframes float{
84+
0%,100%{transform:translateY(0);}
85+
50%{transform:translateY(-6px);}
86+
}
87+
.info-card i{font-size:20px; color:#2e7d32; min-width:25px;}
88+
.info-card span{font-size:14px; color:#2e7d32; font-weight:500;}
89+
90+
.auth-form{
91+
flex:1;
92+
padding:40px 30px;
93+
background:linear-gradient(135deg,#66bb6a,#43a047);
94+
color:white;
95+
display:flex;
96+
flex-direction:column;
97+
justify-content:center;
98+
border-radius:0 12px 12px 0;
99+
transition:all 0.4s ease;
100+
}
101+
102+
.auth-form h2{text-align:center; font-size:28px; margin-bottom:5px;}
103+
.auth-form p{text-align:center; font-size:14px; margin-bottom:20px; color:#dcedc8;}
104+
105+
.auth-form form{display:flex; flex-direction:column; gap:14px;}
106+
.auth-form input, .auth-form select{
107+
padding:14px;
108+
border:none;
109+
border-radius:6px;
110+
outline:none;
111+
font-size:14px;
112+
transition:all 0.3s ease;
113+
}
114+
.auth-form input:focus, .auth-form select:focus{
115+
border:2px solid #a5d6a7;
116+
box-shadow:0 4px 10px rgba(0,0,0,0.1);
117+
}
118+
119+
/* Password wrapper for eye icon */
120+
.password-wrapper{
121+
position:relative;
122+
display:flex;
123+
align-items:center;
124+
}
125+
.password-wrapper input{
126+
flex:1;
127+
padding-right:40px;
128+
}
129+
.password-wrapper i{
130+
position:absolute;
131+
right:12px;
132+
cursor:pointer;
133+
color:#1b5e20;
134+
}
135+
136+
.auth-form button{
137+
padding:14px;
138+
background:#1b5e20;
139+
border:none;
140+
border-radius:6px;
141+
color:white;
142+
font-size:16px;
143+
cursor:pointer;
144+
margin-top:5px;
145+
transition:all 0.3s ease;
146+
}
147+
.auth-form button:hover{
148+
background:#2e7d32;
149+
transform:scale(1.05);
150+
}
151+
152+
.forgot-pass{text-align:right; font-size:13px; margin-top:-5px;}
153+
.forgot-pass a{color:#dcedc8; text-decoration:none;}
154+
.forgot-pass a:hover{color:#ffffff;}
155+
156+
.social-login{
157+
display:flex;
158+
justify-content:center;
159+
gap:10px;
160+
margin-top:12px;
161+
}
162+
.social-login a{
163+
flex:1;
164+
display:flex;
165+
align-items:center;
166+
justify-content:center;
167+
gap:6px;
168+
padding:10px;
169+
border-radius:6px;
170+
text-decoration:none;
171+
font-weight:600;
172+
color:#fff;
173+
border:2px solid white;
174+
transition:all 0.3s ease;
175+
}
176+
.social-login a.google:hover{
177+
background:#fff;
178+
color:#db4437;
179+
transform:scale(1.05);
180+
}
181+
.social-login a.linkedin:hover{
182+
background:#fff;
183+
color:#0077b5;
184+
transform:scale(1.05);
185+
}
186+
187+
.signup-link{text-align:center; margin-top:14px; font-size:13px;}
188+
.signup-link a{color:#dcedc8; text-decoration:none;}
189+
190+
@media(max-width:1024px){
191+
.auth-container{flex-direction:column;width:90%;}
192+
.auth-image{flex-direction:row; flex-wrap:wrap; justify-content:center; padding:15px; border-radius:12px 12px 0 0;}
193+
.info-card{width:45%; margin-bottom:10px;}
194+
.auth-form{border-radius:0 0 12px 12px; padding:25px 20px;}
195+
}
196+
@media(max-width:600px){
197+
.auth-form h2{font-size:24px;}
198+
.auth-form input, .auth-form select{padding:10px; font-size:13px;}
199+
.auth-form button{padding:10px; font-size:14px;}
200+
.info-card i{font-size:18px;}
201+
.info-card span{font-size:12px;}
202+
.social-login a{font-size:12px; padding:8px;}
203+
}
204+
</style>
205+
</head>
206+
<body>
207+
<div class="auth-container">
208+
<div class="auth-image">
209+
<img src="images/Logo_new.png" alt="GrowCraft Logo">
210+
<div class="info-card"><i class="fas fa-laptop-code"></i><span>Website Development</span></div>
211+
<div class="info-card"><i class="fas fa-bullhorn"></i><span>Digital Marketing</span></div>
212+
<div class="info-card"><i class="fas fa-share-alt"></i><span>Social Media Management</span></div>
213+
</div>
214+
215+
<div class="auth-form">
216+
<h2>Login</h2>
217+
<p>Welcome back! Login to your account.</p>
218+
<form id="loginForm">
219+
<input type="email" id="email" placeholder="Enter your email" required>
220+
<div class="password-wrapper">
221+
<input type="password" id="password" placeholder="Password" required>
222+
<i class="fas fa-eye" onclick="togglePassword('password', this)"></i>
223+
</div>
224+
225+
<div class="forgot-pass">
226+
<a href="forgot_password.html">Forgot Password?</a>
227+
</div>
228+
229+
<button type="submit">Login</button>
230+
231+
<p style="text-align:center;margin-top:10px;">or continue with</p>
232+
<div class="social-login">
233+
<a class="google" href="https://accounts.google.com" target="_blank"><i class="fab fa-google"></i> Google</a>
234+
<a class="linkedin" href="https://www.linkedin.com" target="_blank"><i class="fab fa-linkedin"></i> LinkedIn</a>
235+
</div>
236+
237+
<div class="signup-link">
238+
<p>Don't have an account? <a href="signup.html">Sign up</a></p>
239+
</div>
240+
</form>
241+
</div>
242+
</div>
243+
244+
<script>
245+
function togglePassword(id, icon){
246+
const input = document.getElementById(id);
247+
if(input.type === "password"){
248+
input.type = "text";
249+
icon.classList.replace('fa-eye','fa-eye-slash');
250+
} else {
251+
input.type = "password";
252+
icon.classList.replace('fa-eye-slash','fa-eye');
253+
}
254+
}
255+
256+
document.getElementById("loginForm").addEventListener("submit", function(e){
257+
e.preventDefault();
258+
const email = document.getElementById("email").value.trim();
259+
const password = document.getElementById("password").value;
260+
261+
if(!email){alert("Please enter your email."); return;}
262+
if(!password){alert("Please enter your password."); return;}
263+
264+
alert("Login successful!\nEmail: "+email);
265+
});
266+
</script>
267+
</body>
268+
</html>

0 commit comments

Comments
 (0)