Skip to content

Commit 93209cb

Browse files
thinkswellthinkswell
authored
Merge pull request #157 from karabo-r/randomPassword_karabo-r_improvements
UI improvements
2 parents abfb94f + dda3729 commit 93209cb

File tree

2 files changed

+82
-44
lines changed

2 files changed

+82
-44
lines changed

‎randomPassword/sebabratakundu/index.html‎

Lines changed: 41 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,49 @@
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">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Random Password Generator</title>
7-
<link rel="stylesheet" href="style.css">
8-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
9-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
10-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
11-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
12-
</head>
13-
<body>
7+
<link rel="stylesheet" href="style.css" />
8+
<link
9+
rel="stylesheet"
10+
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
11+
/>
12+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
14+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
15+
</head>
16+
<body>
1417
<div class="container py-5">
15-
<div class="main-box my-3 bg-light rounded shadow-lg">
16-
<h1 style="font-family:sans-serif;">Random Password Generator</h1>
17-
<hr>
18-
<form class="gen-pass-form my-4">
19-
<div class="form-group">
20-
<input type="number" name="digit" id="digit" placeholder="set password limit" class="form-control">
21-
</div>
22-
<div class="form-group">
23-
<input type="text" readonly name="password" id="password" class="form-control">
24-
</div>
18+
<div class="main-box my-3 bg-light rounded shadow-lg">
19+
<h1 style="font-family: sans-serif">Random Password Generator</h1>
20+
<hr />
21+
<form class="gen-pass-form my-4">
22+
<div class="form-group">
23+
<input
24+
type="number"
25+
name="digit"
26+
id="digit"
27+
placeholder="Set Password Limit"
28+
class="form-control"
29+
/>
30+
</div>
31+
<div class="form-group">
32+
<input
33+
type="text"
34+
readonly
35+
name="password"
36+
id="password"
37+
class="form-control"
38+
/>
39+
</div>
2540

26-
<button class="btn btn-block btn-outline-primary" type="submit">Generate</button>
27-
</form>
28-
<div class="alert alert-warning d-none notice"></div>
29-
</div>
41+
<button type="submit">Generate</button>
42+
</form>
43+
<div class="alert alert-warning d-none notice"></div>
44+
</div>
3045
</div>
3146

3247
<script src="app.js"></script>
33-
</body>
34-
</html>
48+
</body>
49+
</html>

‎randomPassword/sebabratakundu/style.css‎

Lines changed: 41 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,48 @@
11
@charset "utf-8";
22

3-
*{
4-
outline: none;
5-
box-sizing: border-box;
6-
box-shadow: none;
3+
* {
4+
outline: none;
5+
box-sizing: border-box;
6+
box-shadow: none;
77
}
88

9-
body{
10-
padding: 0;
11-
margin : 0;
12-
background-image : url("https://source.unsplash.com/random/1920x1080");
13-
background-size : cover;
14-
background-repeat: no-repeat;
9+
body {
10+
padding: 0;
11+
margin: 0;
12+
background-image: url("https://source.unsplash.com/random/1920x1080");
13+
background-size: cover;
14+
background-repeat: no-repeat;
1515
}
1616

17-
.main-box{
18-
width : 50%;
19-
padding : 30px;
20-
position : absolute;
21-
top : 50%;
22-
left : 50%;
23-
transform: translate(-50%,-50%);
17+
.main-box {
18+
transform: translate(-50%, -50%);
19+
position: absolute;
20+
padding: 30px;
21+
height: 55%;
22+
width: 35%;
23+
top: 50%;
24+
left: 50%;
25+
}
2426

25-
}
27+
.main-box > h1 {
28+
padding: 20px;
29+
font-size: 30px;
30+
text-align: center;
31+
}
32+
button {
33+
transform: translate(70%, 80%);
34+
border-radius: 5px !important;
35+
background-color: #011b56;
36+
outline: none !important;
37+
color: #ffff;
38+
padding: 15px;
39+
border: none;
40+
width: 40%;
41+
}
42+
button:hover {
43+
background-color: #0269a4;
44+
}
45+
.form-group {
46+
width: 80%;
47+
margin: auto;
48+
}

0 commit comments

Comments
 (0)