-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (124 loc) · 3.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Password Generator</title>
<link rel="stylesheet" href="dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body class="bg-dark-subtle">
<header class="d-flex position-absolute min-vw-100 justify-content-end">
<a
href="https://github.com/Feerse/password-generator"
style="color: #000"
class="github-a">
<!-- <i class="bx bxl-github bx-lg bx-tada-hover m-2"></i> -->
<img src="assets/github-logo.png" alt="github" class="m-2" />
</a>
</header>
<!-- MAIN CONTAINER -->
<div
class="container d-flex min-vh-100 justify-content-center align-items-center">
<!-- CONTAINER 1 -->
<div class="d-flex flex-column bg-body-tertiary p-5 rounded c1">
<h1 class="fw-bold">PASSWORD GENERATOR</h1>
<p class="mb-0" style="font-size: 14px; color: gray">
by
<a href="https://github.com/Feerse" style="text-decoration: none"
>Feerse</a
>
</p>
<hr />
<!-- FORM CONTAINER -->
<form class="d-flex flex-column gap-2 mt-3" id="formId">
<!-- PASSWORD LENGTH INPUT -->
<label for="passwordLength" class="text-uppercase fw-bold"
>Password length</label
>
<input
class="form-control"
id="passwordLength"
type="number"
required />
<div class="row mt-3">
<div class="col">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="uppercaseCheck"
checked />
<label class="form-check-label">Uppercase</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="lowercaseCheck"
checked />
<label class="form-check-label">Lowercase</label>
</div>
</div>
<div class="col">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="numbersCheck"
checked />
<label class="form-check-label">Numbers</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="symbolsCheck"
checked />
<label class="form-check-label">Symbols</label>
</div>
</div>
</div>
<!-- GENERATE BUTTON -->
<button
class="btn btn-dark text-uppercase mt-3 fw-bold"
onclick="getPassword()"
type="submit">
generate password
</button>
<!-- PASSWORD OUTPUT -->
<label for="password" class="text-uppercase mt-3 fw-bold"
>Password output</label
>
<input class="form-control password" id="password" disabled />
<!-- COPY & SAVE BUTTON -->
<button
class="btn btn-warning text-uppercase mt-3 fw-bold"
onclick="copyPassword()"
id="copyButton"
disabled>
copy password
</button>
<a
class="btn btn-primary disabled text-uppercase mt-3 fw-bold"
onclick="savePassword()"
id="saveButton">
save password
</a>
</form>
</div>
<!-- FOOTER -->
<footer class="position-absolute m-1">
<a
style="text-decoration: none; font-size: 12px"
href="https://github.com/Feerse/password-generator/edit/main/README.md"
>Improve this page</a
>
</footer>
</div>
<!-- SCRIPT -->
<script src="dist/js/bootstrap.bundle.min.js"></script>
<script src="index.js"></script>
</body>
</html>