Skip to content

Commit b659214

Browse files
omroy07omroy07
authored
Merge pull request #203 from abbasDD/fix-login-register-design
Fixed design issues on login and register pages for consistency
2 parents 4496bfa + 587e03f commit b659214

4 files changed

Lines changed: 107 additions & 35 deletions

File tree

‎login.css‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,25 @@ body {
7575
animation: shimmer 3s ease-in-out infinite;
7676
}
7777

78+
.form-container p {
79+
text-align: center;
80+
margin: 0;
81+
font-size: 15px;
82+
color: #666;
83+
}
84+
85+
.form-container a {
86+
color: #2e7d32;
87+
text-decoration: none;
88+
font-weight: 600;
89+
transition: all 0.2s ease;
90+
}
91+
92+
.form-container a:hover {
93+
color: #1b5e20;
94+
text-decoration: underline;
95+
}
96+
7897
@keyframes shimmer {
7998

8099
0%,
@@ -150,6 +169,7 @@ body {
150169
flex-direction: column;
151170
}
152171

172+
153173
.input-group {
154174
position: relative;
155175
margin-bottom: 20px;
@@ -165,9 +185,11 @@ body {
165185
z-index: 1;
166186
}
167187

188+
.form-container select,
189+
.form-container input[type="text"],
168190
.form-container input[type="email"],
169191
.form-container input[type="password"] {
170-
padding: 15px 15px 15px 15px;
192+
padding: 15px 15px 15px 45px;
171193
border: 2px solid #e8f5e8;
172194
border-radius: 12px;
173195
font-size: 16px;

‎login.html‎

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,51 @@
44
<head>
55
<meta charset="UTF-8">
66
<title>Login - AgriTech</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
78
<link rel="stylesheet" href="login.css">
9+
<link rel="stylesheet" href="theme.css">
810
</head>
911

1012
<body
1113
style="background-image: url('images/login.avif'); background-size: cover; background-position: center; background-repeat: no-repeat;">
1214
<div class="form-container">
13-
<h2>Login</h2>
15+
<!-- Add the theme toggle button -->
16+
<div style="position: absolute; top: 20px; right: 20px;">
17+
<button class="theme-toggle" aria-label="Toggle dark/light mode" style="background: rgba(46, 125, 50, 0.1); border: 1px solid rgba(46, 125, 50, 0.3); color: #2e7d32;">
18+
<i class="fas fa-sun sun-icon"></i>
19+
<i class="fas fa-moon moon-icon"></i>
20+
<span class="theme-text">Light</span>
21+
</button>
22+
</div>
23+
24+
<!-- Brand section -->
25+
<div class="brand-section">
26+
<div class="brand-icon">
27+
<i class="fas fa-seedling"></i>
28+
</div>
29+
<h2>Login AgriTech</h2>
30+
<p class="form-subtitle">Login to get started</p>
31+
</div>
32+
33+
<!-- Login form -->
1434
<form onsubmit="handleLogin(event)">
15-
<input type="email" placeholder="Email" required>
16-
<input type="password" placeholder="Password" required>
35+
<div class="input-group">
36+
<i class="fas fa-envelope"></i>
37+
<input type="email" id="email" placeholder="Enter your email" required>
38+
</div>
39+
<div class="input-group">
40+
<i class="fas fa-lock"></i>
41+
<input type="password" id="password" placeholder="Create a strong password" required oninput="checkPasswordStrength()">
42+
<button type="button" class="password-toggle" onclick="togglePassword()">
43+
<i class="fas fa-eye" id="password-eye"></i>
44+
</button>
45+
</div>
1746
<button type="submit">Login</button>
18-
<p>Don't have an account? <a href="register.html">Register here</a></p>
47+
<p>Don't have an account? <a href="register.html">Register</a></p>
1948
</form>
2049
</div>
2150
<script src="login.js"></script>
51+
<script src="theme.js"></script>
2252
</body>
2353

2454
</html>

‎login.js‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,24 @@
11
function handleRegister(event) {
2-
event.preventDefault();
3-
alert("Registration Successful! Redirecting to Login...");
4-
window.location.href = "login.html";
2+
event.preventDefault();
3+
alert("Registration Successful! Redirecting to Login...");
4+
window.location.href = "login.html";
55
}
66

77
function handleLogin(event) {
8-
event.preventDefault();
9-
alert("Login Successful! Redirecting to Dashboard...");
10-
window.location.href = "main.html";
8+
event.preventDefault();
9+
alert("Login Successful! Redirecting to Dashboard...");
10+
window.location.href = "main.html";
11+
}
12+
13+
function togglePassword() {
14+
const passwordInput = document.getElementById("password");
15+
const eyeIcon = document.getElementById("password-eye");
16+
17+
if (passwordInput.type === "password") {
18+
passwordInput.type = "text";
19+
eyeIcon.className = "fas fa-eye-slash";
20+
} else {
21+
passwordInput.type = "password";
22+
eyeIcon.className = "fas fa-eye";
23+
}
1124
}

‎register.css‎

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,9 @@
1010

1111
body {
1212
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
13-
background-image: linear-gradient(
14-
135deg,
13+
background-image: linear-gradient(135deg,
1514
rgba(46, 125, 50, 0.15) 0%,
16-
rgba(27, 94, 32, 0.25) 100%
17-
),
15+
rgba(27, 94, 32, 0.25) 100%),
1816
url("images/registration.avif");
1917
background-size: cover;
2018
background-position: center;
@@ -37,33 +35,30 @@ body::before {
3735
left: 0;
3836
right: 0;
3937
bottom: 0;
40-
background: radial-gradient(
41-
circle at 20% 80%,
38+
background: radial-gradient(circle at 20% 80%,
4239
rgba(46, 125, 50, 0.1) 0%,
43-
transparent 50%
44-
),
45-
radial-gradient(
46-
circle at 80% 20%,
40+
transparent 50%),
41+
radial-gradient(circle at 80% 20%,
4742
rgba(27, 94, 32, 0.08) 0%,
48-
transparent 50%
49-
),
50-
radial-gradient(
51-
circle at 40% 40%,
43+
transparent 50%),
44+
radial-gradient(circle at 40% 40%,
5245
rgba(46, 125, 50, 0.05) 0%,
53-
transparent 50%
54-
);
46+
transparent 50%);
5547
animation: float 20s ease-in-out infinite;
5648
pointer-events: none;
5749
}
5850

5951
@keyframes float {
52+
6053
0%,
6154
100% {
6255
transform: translateY(0px) rotate(0deg);
6356
}
57+
6458
33% {
6559
transform: translateY(-10px) rotate(1deg);
6660
}
61+
6762
66% {
6863
transform: translateY(5px) rotate(-1deg);
6964
}
@@ -106,10 +101,12 @@ body::before {
106101
}
107102

108103
@keyframes shimmer {
104+
109105
0%,
110106
100% {
111107
background-position: -200% 0;
112108
}
109+
113110
50% {
114111
background-position: 200% 0;
115112
}
@@ -135,10 +132,12 @@ body::before {
135132
}
136133

137134
@keyframes pulse {
135+
138136
0%,
139137
100% {
140138
transform: scale(1);
141139
}
140+
142141
50% {
143142
transform: scale(1.05);
144143
}
@@ -195,7 +194,7 @@ body::before {
195194
.form-container input[type="text"],
196195
.form-container input[type="email"],
197196
.form-container input[type="password"] {
198-
padding: 15px 15px 15px 15px;
197+
padding: 15px 15px 15px 45px;
199198
border: 2px solid #e8f5e8;
200199
border-radius: 12px;
201200
font-size: 16px;
@@ -258,14 +257,17 @@ body::before {
258257
background: #f44336;
259258
width: 25%;
260259
}
260+
261261
.strength-fair {
262262
background: #ff9800;
263263
width: 50%;
264264
}
265+
265266
.strength-good {
266267
background: #4caf50;
267268
width: 75%;
268269
}
270+
269271
.strength-strong {
270272
background: #2e7d32;
271273
width: 100%;
@@ -338,12 +340,10 @@ body::before {
338340
left: -100%;
339341
width: 100%;
340342
height: 100%;
341-
background: linear-gradient(
342-
90deg,
343-
transparent,
344-
rgba(255, 255, 255, 0.2),
345-
transparent
346-
);
343+
background: linear-gradient(90deg,
344+
transparent,
345+
rgba(255, 255, 255, 0.2),
346+
transparent);
347347
transition: left 0.5s;
348348
}
349349

@@ -375,6 +375,7 @@ body::before {
375375
0% {
376376
transform: rotate(0deg);
377377
}
378+
378379
100% {
379380
transform: rotate(360deg);
380381
}
@@ -413,13 +414,16 @@ body::before {
413414
}
414415

415416
@keyframes shake {
417+
416418
0%,
417419
100% {
418420
transform: translateX(0);
419421
}
422+
420423
25% {
421424
transform: translateX(-5px);
422425
}
426+
423427
75% {
424428
transform: translateX(5px);
425429
}
@@ -429,12 +433,15 @@ body::before {
429433
.role-buyer {
430434
color: #2196f3;
431435
}
436+
432437
.role-farmer {
433438
color: #4caf50;
434439
}
440+
435441
.role-equipment {
436442
color: #ff9800;
437443
}
444+
438445
.role-grocery {
439446
color: #9c27b0;
440447
}
@@ -507,4 +514,4 @@ body::before {
507514
.brand-section {
508515
margin-bottom: 25px;
509516
}
510-
}
517+
}

0 commit comments

Comments
 (0)