-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_eng.html
314 lines (277 loc) · 16.6 KB
/
index_eng.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
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secure Password Generator</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="language-selector">
<a href="index.html" id="es-lang">ES</a>
<a href="index_eng.html" id="en-lang">ENG</a>
</div>
<div class="dark-mode-switch">
<div class="switch">
<label>
<input type="checkbox" id="darkModeToggle">
<span class="lever"></span>
<i class="material-icons">brightness_4</i>
</label>
</div>
</div>
<div class="menu-icon" onclick="toggleMenu()" aria-label="Open side menu" tabindex="0" role="button">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="sideMenu" class="side-menu">
<h3><i class="material-icons">stars</i>Other Projects</h3>
<ul>
<li><a href="https://www.ghu.life" target="_blank"><i class="material-icons">account_circle</i>GHU</a></li>
</ul>
<h3><i class="material-icons">article</i>Articles</h3>
<ul>
<li><a href="#what-is-entropy">What is entropy?</a></li>
<li><a href="#what-is-brute-force">What is brute force?</a></li>
<li><a href="#password-security-tips">Security tips</a></li>
</ul>
</div>
<div class="container">
<h1 id="generador-de-contraseñas-seguras" class="center-align blue-text text-darken-2">Secure Password Generator</h1>
<div class="row">
<div class="col s12">
<div class="card-panel wide-card">
<h2 id="lock-cómo-quieres-generar-la-contraseña-lock" class="center-align blue-text text-darken-2">
<i class="material-icons">lock</i> How do you want to generate the password? <i class="material-icons">lock</i>
</h2>
<div class="row">
<div class="col s12 input-field">
<input type="number" id="length" name="length" min="14" value="14" onchange="updateLengthValue(this.value)">
<label for="length" class="password-length-label">Password Length:</label>
<span id="length-warning" class="warning-text" style="display: none;"></span>
</div>
</div>
<div class="row switch-align-left">
<div class="col s12 switch">
<label>
<input type="checkbox" id="lowercase" checked onchange="toggleOtherOptions('lowercase')">
<span class="lever blue darken-2"></span>
Lowercase (a-z)
</label>
</div>
</div>
<div class="row switch-align-left">
<div class="col s12 switch">
<label>
<input type="checkbox" id="uppercase" checked onchange="toggleOtherOptions('uppercase')">
<span class="lever blue darken-2"></span>
Uppercase (A-Z)
</label>
</div>
</div>
<div class="row switch-align-left">
<div class="col s12 switch">
<label>
<input type="checkbox" id="numbers" checked onchange="toggleOtherOptions('numbers')">
<span class="lever blue darken-2"></span>
Numbers (0-9)
</label>
</div>
</div>
<div class="row switch-align-left">
<div class="col s12 switch">
<label>
<input type="checkbox" id="symbols" checked onchange="toggleOtherOptions('symbols')">
<span class="lever blue darken-2"></span>
Symbols (!@#$%^&*)
</label>
</div>
</div>
<div class="row switch-align-left">
<div class="col s12 switch">
<label>
<input type="checkbox" id="brackets" onchange="toggleOtherOptions('brackets')">
<span class="lever blue darken-2"></span>
Brackets ([]{}())
</label>
</div>
</div>
<div class="row switch-align-left">
<div class="col s12 switch">
<label>
<input type="checkbox" id="high-ansi" onchange="toggleOtherOptions('high-ansi')">
<span class="lever blue darken-2"></span>
High ANSI characters (±¥µç)
</label>
</div>
</div>
<div class="row switch-align-left">
<div class="col s12 switch">
<label>
<input type="checkbox" id="words" onchange="toggleWordCount()">
<span class="lever blue darken-2"></span>
Words (e.g., childbirth-=-chirographic-=-tricentenaries)
</label>
</div>
</div>
<div id="word-options-row" style="display:none;">
<div class="row">
<div class="col s12 input-field">
<input type="number" id="word-count" name="word-count" min="3" value="3">
<label for="word-count">Number of Words</label>
</div>
</div>
<div class="row">
<div class="col s12 input-field">
<select id="language-select">
<option value="en">🇬🇧 English</option>
<option value="es">🇪🇸 Spanish</option>
<option value="fr">🇫🇷 French</option>
<option value="de">🇩🇪 German</option>
<option value="it">🇮🇹 Italian</option>
</select>
<label>Choose language</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card-panel wide-card">
<h2 id="mouse-mueve-el-ratón-para-generar-la-contraseña" class="center-align blue-text text-darken-2">
<i class="material-icons">mouse</i> Move the mouse to generate the password
</h2>
<div id="password-generator-area" class="password-generator-area" aria-live="polite">
<ul>
<li><i class="material-icons">sync</i> Move the mouse within the box to generate the password</li>
<li><i class="material-icons">content_copy</i> Click the box to copy the password to the clipboard</li>
</ul>
</div>
<div id="generated-password" class="generated-password-text center-align"></div>
<div class="password-info">
<div class="password-stats-container">
<div class="entropy-container">
<span class="entropy-label">Entropy:</span>
<span id="entropia-valor"></span>
</div>
<div class="crack-time-container">
<span class="crack-time-label">Estimated crack time:</span>
<span id="tiempo-craqueo"></span>
</div>
<div class="strength-container">
<span class="strength-label">Strength:</span>
<span id="fortaleza-valor"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card-panel wide-card">
<div class="row center-align">
<div class="col s12">
<button id="copy-button" class="btn waves-effect waves-light blue darken-2">COPY PASSWORD</button>
</div>
</div>
<div class="row center-align">
<div class="col s12">
<button id="generate-button" class="btn waves-effect waves-light blue darken-2">GENERATE PASSWORD</button>
</div>
</div>
</div>
</div>
</div>
<div id="what-is-entropy" class="row">
<div class="col s12">
<div class="card-panel wide-card">
<h3 class="center-align blue-text text-darken-2">What is password entropy?</h3>
<p>Password entropy is a measure of its strength or unpredictability. In the context of computer security, entropy is expressed in bits and represents the amount of information or randomness contained in a password.</p>
<p>A password with high entropy is more difficult to guess or crack through brute force or dictionary attacks. Entropy is calculated using the following formula:</p>
<div class="formula">
<p><strong>E = L * log<sub>2</sub>(R)</strong></p>
<p>Where:</p>
<ul>
<li><strong>E</strong> is the entropy in bits</li>
<li><strong>L</strong> is the length of the password</li>
<li><strong>R</strong> is the size of the possible character set</li>
</ul>
</div>
<p>For example, for an 8-character password that uses lowercase and uppercase letters (52 characters) and numbers (10 characters), the calculation would be:</p>
<div class="formula">
<p>E = 8 * log<sub>2</sub>(62) ≈ 47.6 bits</p>
</div>
<p>In the case of word-based passwords, the calculation is slightly different. The dictionary size is used instead of the character set:</p>
<div class="formula">
<p>E = N * log<sub>2</sub>(D)</p>
<p>Where:</p>
<ul>
<li><strong>N</strong> is the number of words in the password</li>
<li><strong>D</strong> is the dictionary size</li>
</ul>
</div>
<p>Higher entropy indicates a more secure password. In general, a minimum entropy of 60 bits is recommended for adequate security, although higher values may be required for highly sensitive information.</p>
</div>
</div>
</div>
<div id="what-is-brute-force" class="row">
<div class="col s12">
<div class="card-panel wide-card">
<h3 class="center-align blue-text text-darken-2">What is brute force and its variants?</h3>
<h4><i class="material-icons">security</i> Brute force attack</h4>
<p>A brute force attack is a method of password cracking that involves systematically trying all possible combinations of characters until the correct one is found. Although it is a guaranteed method for finding any password, it can be extremely slow for long and complex passwords.</p>
<h4><i class="material-icons">content_paste</i> Credential stuffing</h4>
<p>Credential stuffing is a technique that uses username and password pairs leaked from a security breach to try and access other accounts. This method exploits users' tendency to reuse the same credentials across multiple sites.</p>
<h4><i class="material-icons">book</i> Dictionary attack</h4>
<p>A dictionary attack uses a predefined list of common words and phrases to try to guess the password. It is faster than pure brute force but less exhaustive. It is especially effective against passwords that use common words.</p>
<h4><i class="material-icons">shuffle</i> Hybrid brute force attacks</h4>
<p>Hybrid attacks combine elements of dictionary and brute force attacks. They may start with words from a dictionary and then apply common transformations (such as adding numbers at the end) or combine dictionary words with brute force-generated character sequences.</p>
<h4><i class="material-icons">flip_to_back</i> Reverse brute force attacks</h4>
<p>Instead of attempting to crack a specific password, reverse brute force attacks generate hashes of common passwords and compare them to a database of stolen hashes. This method is effective at cracking multiple passwords simultaneously if access to a hash database is available.</p>
<h4><i class="material-icons">memory</i> GPU-accelerated brute force</h4>
<p>GPU acceleration uses the processing power of graphics cards to perform brute force attacks much faster than traditional CPUs. GPUs are particularly efficient at performing many simple calculations in parallel, making them ideal for quickly testing a large number of password combinations.</p>
</div>
</div>
</div>
<div id="password-security-tips" class="row">
<div class="col s12">
<div class="card-panel wide-card">
<h3 class="center-align blue-text text-darken-2">Tips for creating secure passwords</h3>
<ul>
<li><i class="material-icons">text_fields</i> Use a combination of uppercase and lowercase letters.</li>
<li><i class="material-icons">dialpad</i> Include numbers and symbols.</li>
<li><i class="material-icons">person_outline</i> Avoid using personal information such as birthdays or names.</li>
<li><i class="material-icons">block</i> Do not reuse passwords across different websites.</li>
<li><i class="material-icons">update</i> Change your passwords regularly.</li>
</ul>
</div>
</div>
</div>
<div class="row center-align">
<div class="col s12">
<a href="https://en.wikipedia.org/wiki/Password_security" class="blue-text text-darken-2" target="_blank">Go to the article on Password Security</a>
</div>
</div>
</div>
<div id="notification" class="notification" style="display: none;">
Password copied to clipboard!
</div>
<footer class="page-footer blue darken-2">
<div class="container">
Generate Passwords and Secure Passwords with ❤️ by 00B in 2024
</div>
</footer>
<script src="entropia.js"></script>
<script src="palabras.js"></script>
<script src="script.js"></script>
<script src="modoNoche.js"></script>
</body>
</html>