-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (85 loc) · 4.18 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
<!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" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./css/index.css" />
<title>Generador de contraseñas</title>
<script src="./js/index.js" defer></script>
</head>
<body>
<div class="card">
<div class="card__header">
<h1 class="card__title">Generador de contraseñas</h1>
</div>
<div class="card__body">
<div class="password__container">
<span class="password__current" id="password-current">-</span>
<svg
class="password__copy"
onclick="copyText()"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3H13C13.2652 3 13.5196 3.10536 13.7071 3.29289C13.8946 3.48043 14 3.73478 14 4V5C14 5.55228 14.4477 6 15 6C15.5523 6 16 5.55228 16 5V4C16 3.20435 15.6839 2.44129 15.1213 1.87868C14.5587 1.31607 13.7956 1 13 1H4C3.20435 1 2.44129 1.31607 1.87868 1.87868C1.31607 2.44129 1 3.20435 1 4V13C1 13.7956 1.31607 14.5587 1.87868 15.1213C2.44129 15.6839 3.20435 16 4 16H5C5.55228 16 6 15.5523 6 15C6 14.4477 5.55228 14 5 14H4C3.73478 14 3.48043 13.8946 3.29289 13.7071C3.10536 13.5196 3 13.2652 3 13V4C3 3.73478 3.10536 3.48043 3.29289 3.29289ZM10 11C10 10.4477 10.4477 10 11 10H20C20.5523 10 21 10.4477 21 11V20C21 20.5523 20.5523 21 20 21H11C10.4477 21 10 20.5523 10 20V11ZM11 8C9.34315 8 8 9.34315 8 11V20C8 21.6569 9.34315 23 11 23H20C21.6569 23 23 21.6569 23 20V11C23 9.34315 21.6569 8 20 8H11Z"
/>
</svg>
</div>
<form id="form-data" class="settings__container">
<div class="settings__length">
<h2 class="settings__title">Longitud de carácter</h2>
<strong id="count-characters" class="settings_count">0</strong>
</div>
<div class="settings__range">
<input
id="input-range"
class="settings_input"
name="countCharacters"
type="range"
min="0"
max="50"
step="1"
value="0"
/>
</div>
<div class="settings__options">
<div class="settings__option">
<input type="checkbox" class="settings__checkbox" name="UPPER_CASE" value="UPPER_CASE" id="label-upper" />
<label for="label-upper">Incluye letras mayúsculas.</label>
</div>
<div class="settings__option">
<input type="checkbox" class="settings__checkbox" name="LOWER_CASE" value="LOWER_CASE" id="label-lower" />
<label for="label-lower">Incluye letras minúsculas.</label>
</div>
<div class="settings__option">
<input type="checkbox" class="settings__checkbox" name="NUMBERS" value="NUMBERS" id="label-numbers" />
<label for="label-numbers">Incluye letras números.</label>
</div>
<div class="settings__option">
<input type="checkbox" class="settings__checkbox" name="SYMBOLS" value="SYMBOLS" id="label-simbols" />
<label for="label-simbols">Incluye letras símbolos.</label>
</div>
</div>
<div class="settings__security">
<span class="settings__security__title">Nivel de seguridad</span>
<div class="settings__security__level" id="level-security" data-level="0"></div>
</div>
<div class="card__footer">
<button type="submit" class="card__button">Generar contraseña</button>
</div>
</form>
</div>
</div>
<div class="container__alerts" id="containe-alerts"></div>
</body>
</html>