Skip to content

Commit 044bc46

Browse files
sudhanshu-rajsudhanshu-raj
committed
UI work
1 parent 51138ab commit 044bc46

File tree

2 files changed

+293
-56
lines changed

2 files changed

+293
-56
lines changed

‎Password-Strength-Meter/index.html‎

Lines changed: 34 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,38 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>CSS Only Password Strength Meter</title>
7-
<style>
8-
* {
9-
box-sizing: border-box;
10-
}
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>CSS Only Password Strength Checker</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
10+
<link rel="stylesheet" href="./style.css" />
11+
</head>
12+
<body>
13+
<div class="wrapper">
14+
<h2><s>No</s><br>JavaScript</h2>
15+
</div>
16+
<div class="container">
17+
18+
<h2>Password Strength Checker</h2>
19+
<form>
20+
<div class="password-box">
21+
<input
22+
id="pwd"
23+
type="password"
24+
placeholder="Enter your password"
25+
required
26+
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}"
27+
/>
28+
<div class="strength"></div>
29+
<!-- <div class="strength-text">Weak</div> -->
30+
</div>
1131

12-
input:invalid ~ .strength::before {
13-
width: 30%;
14-
background: #ff4d4d;
15-
}
16-
17-
input:valid ~ .strength::before {
18-
width: 100%;
19-
background: #4caf50;
20-
}
21-
22-
input:not(:placeholder-shown):not(:valid):not(:invalid) ~ .strength::before {
23-
width: 60%;
24-
background: #fbc02d;
25-
}
26-
27-
.hint {
28-
font-size: 13px;
29-
color: #666;
30-
margin-top: 10px;
31-
text-align: left;
32-
}
33-
34-
input:valid {
35-
border-color: #4caf50;
36-
box-shadow: 0 0 8px rgba(76,175,80,0.3);
37-
}
38-
39-
input:invalid {
40-
border-color: #ff4d4d;
41-
}
42-
</style>
43-
</head>
44-
<body>
45-
46-
<div class="container">
47-
<h2>Create Password</h2>
48-
<form>
49-
<input type="password" placeholder="Enter password"
50-
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}" required>
51-
<div class="strength"></div>
52-
<div class="hint">
53-
Must contain at least 8 characters, including<br>
54-
1 uppercase, 1 lowercase, 1 number, and 1 symbol.
55-
</div>
56-
</form>
57-
</div>
58-
59-
</body>
32+
<div class="hint">
33+
<strong>Requirements:</strong> 8+ characters with uppercase, lowercase, numbers, and symbols (@$!%*?&)
34+
</div>
35+
</form>
36+
</div>
37+
</body>
6038
</html>

‎Password-Strength-Meter/style.css‎

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
body {
8+
font-family: "Inter", "Poppins", sans-serif;
9+
background: #fffbf0;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
min-height: 100vh;
14+
gap: 60px;
15+
padding: 40px;
16+
}
17+
18+
.wrapper {
19+
background: #fff;
20+
padding: 50px 40px;
21+
border: 3px solid #f4c430;
22+
max-width: 300px;
23+
text-align: center;
24+
position: relative;
25+
}
26+
27+
.wrapper::before {
28+
content: '';
29+
position: absolute;
30+
top: -3px;
31+
left: -3px;
32+
right: -3px;
33+
bottom: -3px;
34+
background: #f4c430;
35+
z-index: -1;
36+
transform: rotate(2deg);
37+
}
38+
39+
.wrapper h2 {
40+
font-size: 2.5rem;
41+
font-weight: 300;
42+
color: #2c2c2c;
43+
margin: 0;
44+
line-height: 1.1;
45+
letter-spacing: -1px;
46+
}
47+
48+
.wrapper h2 s {
49+
color: #d32f2f;
50+
text-decoration: line-through;
51+
text-decoration-thickness: 3px;
52+
}
53+
54+
/* Checker Section */
55+
.container {
56+
background: #fff;
57+
padding: 50px 40px;
58+
border: 3px solid #ffcc02;
59+
max-width: 450px;
60+
width: 100%;
61+
text-align: left;
62+
position: relative;
63+
}
64+
65+
.container::before {
66+
content: '';
67+
position: absolute;
68+
top: -3px;
69+
left: -3px;
70+
right: -3px;
71+
bottom: -3px;
72+
background: #ffcc02;
73+
z-index: -1;
74+
transform: rotate(-1deg);
75+
}
76+
77+
.container h2 {
78+
font-size: 1.8rem;
79+
font-weight: 500;
80+
color: #2c2c2c;
81+
margin-bottom: 30px;
82+
text-align: center;
83+
}
84+
85+
h2 {
86+
margin-bottom: 20px;
87+
}
88+
89+
.password-box {
90+
width: 100%;
91+
margin: 0;
92+
font-family: inherit;
93+
}
94+
95+
label {
96+
display: block;
97+
margin-bottom: 12px;
98+
font-weight: 500;
99+
color: #2c2c2c;
100+
font-size: 14px;
101+
text-transform: uppercase;
102+
letter-spacing: 0.5px;
103+
}
104+
105+
input[type="password"] {
106+
width: 100%;
107+
padding: 18px 20px;
108+
border: 2px solid #f0f0f0;
109+
background: #fefefe;
110+
font-size: 16px;
111+
font-weight: 400;
112+
outline: none;
113+
transition: all 0.2s ease;
114+
color: #2c2c2c;
115+
font-family: 'Courier New', monospace;
116+
}
117+
118+
input[type="password"]:focus {
119+
border-color: #f4c430;
120+
background: #fffef8;
121+
}
122+
123+
input[type="password"]::placeholder {
124+
color: #999;
125+
font-family: "Inter", "Poppins", sans-serif;
126+
}
127+
128+
.strength {
129+
position: relative;
130+
height: 4px;
131+
width: 100%;
132+
margin-top: 15px;
133+
background: #f0f0f0;
134+
overflow: hidden;
135+
transition: all 0.3s ease;
136+
}
137+
138+
/* Strength levels with solid colors */
139+
input:not(:placeholder-shown):not(:valid):not(:invalid) ~ .strength {
140+
background: #ffe0e0;
141+
}
142+
143+
input:invalid:not(:placeholder-shown) ~ .strength {
144+
background: #fff8e1;
145+
}
146+
147+
input:valid ~ .strength {
148+
background: #f0f8e1;
149+
}
150+
151+
.strength::after {
152+
content: "";
153+
position: absolute;
154+
top: 0;
155+
left: 0;
156+
height: 100%;
157+
width: 100%;
158+
transform: scaleX(0);
159+
transform-origin: left;
160+
transition: transform 0.4s ease;
161+
}
162+
163+
/* Optional */
164+
input:not(:placeholder-shown):not(:valid):not(:invalid) ~ .strength::after {
165+
background: #f57c00;
166+
}
167+
168+
input:invalid:not(:placeholder-shown) ~ .strength::after {
169+
background: #d32f2f;
170+
}
171+
172+
input:valid ~ .strength::after {
173+
background: #388e3c;
174+
}
175+
176+
/* Trigger animation when password is being typed */
177+
input:not(:placeholder-shown) ~ .strength::after {
178+
transform: scaleX(1);
179+
}
180+
181+
182+
.strength-text {
183+
font-size: 12px;
184+
margin-top: 8px;
185+
font-weight: 500;
186+
text-transform: uppercase;
187+
letter-spacing: 1px;
188+
opacity: 0;
189+
transition: opacity 0.3s ease;
190+
}
191+
192+
input:not(:placeholder-shown):not(:valid):not(:invalid) ~ .strength-text {
193+
opacity: 1;
194+
color: #d32f2f;
195+
}
196+
197+
input:invalid:not(:placeholder-shown) ~ .strength-text {
198+
opacity: 1;
199+
color: #f57c00;
200+
}
201+
202+
input:valid ~ .strength-text {
203+
opacity: 1;
204+
color: #388e3c;
205+
}
206+
207+
.hint {
208+
font-size: 13px;
209+
color: #666;
210+
margin-top: 25px;
211+
line-height: 1.5;
212+
padding: 20px;
213+
background: #fffbf0;
214+
border-left: 4px solid #f4c430;
215+
}
216+
217+
218+
@media (max-width: 768px) {
219+
body {
220+
flex-direction: column;
221+
gap: 40px;
222+
padding: 30px 20px;
223+
}
224+
225+
.wrapper, .container {
226+
max-width: 100%;
227+
}
228+
229+
.wrapper {
230+
padding: 40px 30px;
231+
}
232+
233+
.wrapper h2 {
234+
font-size: 2rem;
235+
}
236+
237+
.container {
238+
padding: 40px 30px;
239+
}
240+
241+
.container h2 {
242+
font-size: 1.5rem;
243+
}
244+
}
245+
246+
@media (max-width: 480px) {
247+
.wrapper h2 {
248+
font-size: 1.8rem;
249+
}
250+
251+
.container h2 {
252+
font-size: 1.3rem;
253+
}
254+
255+
input[type="password"] {
256+
padding: 16px 18px;
257+
font-size: 15px;
258+
}
259+
}

0 commit comments

Comments
 (0)