Skip to content

Commit 80cfeb2

Browse files
gbassetgbasset
committed
Update css
1 parent 8314dba commit 80cfeb2

File tree

3 files changed

+202
-25
lines changed

3 files changed

+202
-25
lines changed

‎Password-generator/index.html

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,47 +5,47 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66

77
<link rel="stylesheet" href="./style.css" />
8-
<title>Password Generator</title>
8+
<title> Password Generator</title>
99
</head>
1010
<body>
1111
<div class="container">
12-
<h2>Password Generator</h2>
12+
<h2>Strong password Generator</h2>
1313
<span id="result"></span>
1414
<div class="result-container">
1515
<button class="btn" id="clipboard">
1616
Copy
1717
</button>
1818
</div>
1919
<div class="settings">
20-
<div class="setting">
21-
<label>Password Length</label>
22-
<input type="number" id="length" min="4" max="20" value="20">
20+
<div class="setting ">
21+
<label >Length</label>
22+
<input type="number" id="length" min="4" max="20" value="20" >
2323
</div>
24-
<div class="setting">
25-
<label>Include uppercase letters</label>
26-
<input type="checkbox" id="uppercase" checked>
24+
<div class="setting checkbox-wrapper-14">
25+
<label for="uppercase">Include uppercase letters</label>
26+
<input type="checkbox" id="uppercase" checked class="switch">
2727
</div>
28-
<div class="setting">
29-
<label>Include lowercase letters</label>
30-
<input type="checkbox" id="lowercase" checked>
28+
<div class="setting checkbox-wrapper-14">
29+
<label for="lowercase">Include lowercase letters</label>
30+
<input type="checkbox" id="lowercase" checked class="switch">
3131
</div>
32-
<div class="setting">
33-
<label>Include numbers</label>
34-
<input type="checkbox" id="numbers" checked>
32+
<div class="setting checkbox-wrapper-14">
33+
<label for="numbers">Include numbers</label>
34+
<input type="checkbox" id="numbers" checked class="switch">
3535
</div>
36-
<div class="setting">
37-
<label>Include symbols</label>
38-
<input type="checkbox" id="symbols" checked>
36+
<div class="setting checkbox-wrapper-14">
37+
<label for="symbols">Include symbols</label>
38+
<input type="checkbox" id="symbols" checked class="switch">
3939
</div>
40-
<div class="setting">
40+
<div class="text">
4141
<label>Include text</label>
42-
<input type="text" id="text" >
42+
<input type="text" id="text" class="input_class">
4343
</div>
44+
<button class="btn btn-large" id="generate">
45+
Generate Password
46+
</button>
4447
</div>
4548

46-
<button class="btn btn-large" id="generate">
47-
Generate Password
48-
</button>
4949
</div>
5050
<script src="./main.js"></script>
5151
</body>

‎Password-generator/main.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,7 @@ function generatePassword(lower, upper, number, symbol, text, length) {
5050
}
5151

5252

53-
const finalPassword = generatedPassword.slice(0, length)
54-
55-
return finalPassword
53+
return generatedPassword.slice(0, length)
5654
}
5755

5856
function getRandomLower() {

‎Password-generator/style.css

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,192 @@
33
body{
44
display: flex;
55
justify-content: center;
6+
background-color: #f2f2f2;
7+
}
8+
.result-container{
9+
height: 15px;
10+
text-align: center;
11+
font-weight: bold;
12+
}
13+
.input_class {
14+
border: 0;
15+
outline: 0;
16+
color: rgb(60, 66, 87);
17+
background-color: rgb(255, 255, 255);
18+
border-radius: 4px;
19+
font-size: 14px;
20+
line-height: 20px;
21+
font-weight: 400;
22+
padding: 4px 8px;
23+
min-height: 28px;
24+
vertical-align: middle;
25+
transition: background-color .24s, box-shadow .24s;
26+
transition-property: background-color, box-shadow;
27+
transition-duration: 0.24s, 0.24s;
28+
transition-timing-function: ease, ease;
29+
transition-delay: 0s, 0s;
30+
margin-top: 10px;
31+
}
32+
33+
34+
h1, h2 {
35+
color: #86b0ff;
36+
text-align: center;
637
}
738
.container {
839
display: flex;
940
flex-direction: column;
1041
justify-content: center;
42+
height: 100vh;
1143
}
1244
#clipboard{
1345
opacity: 0;
1446
}
1547

48+
.settings{
49+
display: flex;
50+
flex-direction: column;
51+
justify-content: space-between;
52+
height: 50%;
53+
54+
}
55+
.setting{
56+
display: flex;
57+
justify-content: space-between;
58+
}
59+
.text{
60+
display: flex;
61+
flex-direction: column;
62+
}
63+
button {
64+
display: inline-block;
65+
outline: none;
66+
cursor: pointer;
67+
line-height: 20px;
68+
border-radius: 8px;
69+
font-size: 20px;
70+
border: 1px solid #222222;
71+
font-weight: bold;
72+
padding: 15px;
73+
background: #fff;
74+
color: #222222;
75+
76+
}
77+
78+
.checkbox-wrapper-14 input[type=checkbox] {
79+
--active: #86b0ff;
80+
--active-inner: #fff;
81+
--focus: 2px rgba(39, 94, 254, .3);
82+
--border: #BBC1E1;
83+
--border-hover: #275EFE;
84+
--background: #fff;
85+
--disabled: #F6F8FF;
86+
--disabled-inner: #E1E6F9;
87+
-webkit-appearance: none;
88+
-moz-appearance: none;
89+
height: 20px;
90+
outline: none;
91+
display: inline-block;
92+
vertical-align: top;
93+
position: relative;
94+
margin: 0;
95+
cursor: pointer;
96+
border: 1px solid var(--bc, var(--border));
97+
background: var(--b, var(--background));
98+
transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
99+
}
100+
.checkbox-wrapper-14 input[type=checkbox]:after {
101+
content: "";
102+
display: block;
103+
left: 0;
104+
top: 0;
105+
position: absolute;
106+
transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
107+
}
108+
.checkbox-wrapper-14 input[type=checkbox]:checked {
109+
--b: var(--active);
110+
--bc: var(--active);
111+
--d-o: .3s;
112+
--d-t: .6s;
113+
--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
114+
}
115+
.checkbox-wrapper-14 input[type=checkbox]:disabled {
116+
--b: var(--disabled);
117+
cursor: not-allowed;
118+
opacity: 0.9;
119+
}
120+
.checkbox-wrapper-14 input[type=checkbox]:disabled:checked {
121+
--b: var(--disabled-inner);
122+
--bc: var(--border);
123+
}
124+
.checkbox-wrapper-14 input[type=checkbox]:disabled + label {
125+
cursor: not-allowed;
126+
}
127+
.checkbox-wrapper-14 input[type=checkbox]:hover:not(:checked):not(:disabled) {
128+
--bc: var(--border-hover);
129+
}
130+
.checkbox-wrapper-14 input[type=checkbox]:focus {
131+
box-shadow: 0 0 0 var(--focus);
132+
}
133+
.checkbox-wrapper-14 input[type=checkbox]:not(.switch) {
134+
width: 21px;
135+
}
136+
.checkbox-wrapper-14 input[type=checkbox]:not(.switch):after {
137+
opacity: var(--o, 0);
138+
}
139+
.checkbox-wrapper-14 input[type=checkbox]:not(.switch):checked {
140+
--o: 1;
141+
}
142+
.checkbox-wrapper-14 input[type=checkbox] + label {
143+
display: inline-block;
144+
vertical-align: middle;
145+
cursor: pointer;
146+
margin-left: 4px;
147+
}
148+
149+
.checkbox-wrapper-14 input[type=checkbox]:not(.switch) {
150+
border-radius: 7px;
151+
}
152+
.checkbox-wrapper-14 input[type=checkbox]:not(.switch):after {
153+
width: 5px;
154+
height: 9px;
155+
border: 2px solid var(--active-inner);
156+
border-top: 0;
157+
border-left: 0;
158+
left: 7px;
159+
top: 4px;
160+
transform: rotate(var(--r, 20deg));
161+
}
162+
.checkbox-wrapper-14 input[type=checkbox]:not(.switch):checked {
163+
--r: 43deg;
164+
}
165+
.checkbox-wrapper-14 input[type=checkbox].switch {
166+
width: 38px;
167+
border-radius: 11px;
168+
}
169+
.checkbox-wrapper-14 input[type=checkbox].switch:after {
170+
left: 2px;
171+
top: 2px;
172+
border-radius: 50%;
173+
width: 17px;
174+
height: 17px;
175+
background: var(--ab, var(--border));
176+
transform: translateX(var(--x, 0));
177+
}
178+
.checkbox-wrapper-14 input[type=checkbox].switch:checked {
179+
--ab: var(--active-inner);
180+
--x: 17px;
181+
}
182+
.checkbox-wrapper-14 input[type=checkbox].switch:disabled:not(:checked):after {
183+
opacity: 0.6;
184+
}
185+
186+
.checkbox-wrapper-14 * {
187+
box-sizing: inherit;
188+
}
189+
.checkbox-wrapper-14 *:before,
190+
.checkbox-wrapper-14 *:after {
191+
box-sizing: inherit;
192+
}
193+
194+

0 commit comments

Comments
 (0)