-
Notifications
You must be signed in to change notification settings - Fork 3
/
Password.html
296 lines (246 loc) · 11.4 KB
/
Password.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="Image/logo.png">
<title>Password Generator </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/css/bootstrap-switch-button.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/dist/bootstrap-switch-button.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Titillium Web', sans-serif;
}
.btn2 {
margin-left: 85px
}
#button:hover {
color: white;
background-color: black;
}
.navbar {
background-color: black;
z-index: 999;
}
.navbar::before {
content: "";
position: absolute;
top: 0%;
bottom: 0%;
left: 0;
right: 0;
z-index: -1;
}
.nav-item a {
color: white;
font-weight: 500;
font-size: 17px;
transition: 0.5s ease;
}
.nav-item a:hover {
color: rgb(0, 195, 255);
border-bottom: 1px solid rgb(0, 195, 255);
}
.navbar-brand {
color: white;
font-weight: 600;
font-size: 20px;
}
.nav-item {
margin-right: 20px;
}
.center {
width: 100vw;
height: 100vh;
background-color: #f9c1b1;
background-image: linear-gradient(315deg, #f9c1b1 0%, #fb8085 74%);
}
.box {
margin: 20px;
width: 600px;
height: auto;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
#bgc {
border-bottom: 2px solid black;
font-size: 25px;
}
.gbtn {
margin: 25px 25px;
font-size: 1.2rem;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.gbtn:hover {
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.Smalltxt {
font-size: 20px;
font-weight: 500;
}
#password {
padding: autp 5px;
user-select: none;
height: 50px;
width: auto;
border-radius: 6px;
border: none;
border: 2px solid #13061d;
outline: none;
font-size: 22px;
font-weight: 500;
text-align: center;
transition: 0.5s ease-in-out;
}
#password::placeholder {
font-size: 23px;
text-align: center;
}
@media screen and (max-width: 250px) {
#password {
width: 150px;
font-size: 15px;
}
#password::placeholder{
font-size: 15px;
}
}
p {
text-align: left;
font-size: 15px;
background-color: rgb(227, 238, 197);
}
#typeNumber {
display: inline;
width: 65px;
border: 2px solid black;
}
#toast {
position: absolute;
bottom: 0;
border-radius: 5px;
padding: 15px 50px;
background: black;
opacity: 0;
color: white;
font-weight: 500;
visibility: hidden;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
transition: 0.3s;
}
#toast.show {
visibility: visible;
opacity: 1;
z-index: 1000;
bottom: 50px;
}
</style>
</head>
<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" data-aos="fade-in">
<div class="container">
<a class="navbar-brand" href="#">Random Script</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" style="margin-right: 30px;" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Exit</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<section class="center d-flex align-items-center justify-content-center">
<div class="box bg-light" data-aos="zoom-out-up">
<div class="box2">
<div class="row">
<div class="col-lg-12 md-6 text-center mt-5">
<label for="TEXT"><input type="text" name="" placeholder="Create password" id="password"
readonly></label>
</div>
</div>
<div class="row">
<div class="col-lg-6 text-center mt-5">
<span class="Smalltxt">Include Symbol: </span>
<input type="checkbox" id="checkbox" data-toggle="switchbutton" checked data-onstyle="dark"
data-height="10">
</div>
<div class="form-outline col-lg-6 text-center mt-5">
<span class="Smalltxt">Size: </span>
<input type="number" id="typeNumber" class="form-control" min="6" max="12" value="6" />
</div>
<div class="col-lg-12 text-center mt-3">
<span><button type="button" class="btn gbtn btn-dark bg-dark text-white"
onclick="genPassword()">Generator Password</button></span>
</div>
<div class="col-lg-12 text-center mt-1 mb-3">
<span><button type="button" class="btn gbtn btn-dark bg-dark text-white" onclick="copyPassword()"
id="copy">Copy Password</button></span>
<button class="btn gbtn btn-dark bg-dark text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">About</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">why you should use</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p> ➡A random password generator is a software program, hardware device, or online tool that automatically generates a password using parameters that a user sets, including mixed-case letters, numbers, symbols, pronounceability, length, and strength.
<br><BR>
➡“random password generators” create truly random results. If I use a generic random password generator to create 10,000 new passwords, the passwords I generated are the result of a phenomenon called pseudo-random, meaning the results appear random when they really aren’t.
<br><br>
➡it is safer to have a password generated by an online random password generator than to use a password even a toddler or weak hacking software can figure out.
<br><BR>
➡this password generators safe? Password generators can be one way to create strong passwords. It is important to use best practices, such as creating lengthy passwords, using a different password for every account, and changing passwords every 90 days, even when using a password generator.
<br> <br>
➡ Great, so now you know, but how on earth are you to remember them? While you can set up your personal gadgets with a 'remember me', what if you need to access that particular account from someone else's' machine - or you clear your browser history. Now you're in trouble. No more automatic logins.
<br> <br>
➡The problems with common tricks to remembering the special characters in your passwords is that these tricks make your password less secure than if the special characters were random. For example, a lot of people use the special character @ as a substitute for the letter a. In this case, they would write "trampoline" as "tr@mpoline". While this is using a special character, it doesn't help the security of the password much because hackers know this is a common substitute people make. The same can be said of substituting "!" for an "i" or an "l". Using emoticons at the beginning or end of passwords is also common.
<br><BR>
➡For these reasons, it's much more secure to have a random password generated even though it might be a bit more difficult to remember. If you find it easier to remember certain special characters over others, then you can select to only have those placed in the random password which should make it a bit easier to remember. The key is to understand that if you opt to use common tricks to help you remember your password over generating a random password, you're going to end up with one that is less secure.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="toast" data-aos="fade-in">Successfully Generated</div>
</section>
<script src="Script.js/Password.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<!-- AOS -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
offset: 150,
duration: 500,
});
</script>
</body>
</html>