-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
102 lines (92 loc) · 3.24 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./assets/images/favicon-32x32.png"
/>
<link rel="stylesheet" href="normalize.css" />
<link rel="stylesheet" href="styles.css" />
<script src="script.js" defer></script>
<title>Frontend Mentor | Password generator app</title>
</head>
<body>
<header>
<h1>Password Generator</h1>
</header>
<main>
<section class="user-pw-section">
<h2 class="generated-password" id="generated-password">P4$5W0rD!</h2>
<svg
id="copy-icon"
class="copy-icon"
width="21"
height="24"
xmlns="http://www.w3.org/2000/svg"
aria-label="Copy icon"
>
<path
d="M20.341 3.091 17.909.659A2.25 2.25 0 0 0 16.319 0H8.25A2.25 2.25 0 0 0 6 2.25V4.5H2.25A2.25 2.25 0 0 0 0 6.75v15A2.25 2.25 0 0 0 2.25 24h10.5A2.25 2.25 0 0 0 15 21.75V19.5h3.75A2.25 2.25 0 0 0 21 17.25V4.682a2.25 2.25 0 0 0-.659-1.591ZM12.469 21.75H2.53a.281.281 0 0 1-.281-.281V7.03a.281.281 0 0 1 .281-.281H6v10.5a2.25 2.25 0 0 0 2.25 2.25h4.5v1.969a.282.282 0 0 1-.281.281Zm6-4.5H8.53a.281.281 0 0 1-.281-.281V2.53a.281.281 0 0 1 .281-.281H13.5v4.125c0 .621.504 1.125 1.125 1.125h4.125v9.469a.282.282 0 0 1-.281.281Zm.281-12h-3v-3h.451c.075 0 .147.03.2.082L18.667 4.6a.283.283 0 0 1 .082.199v.451Z"
fill="#FFF"
/>
</svg>
</section>
<section class="generate-pw-section">
<div class="char-length-wrapper">
<h3>
<label for="char-range">Character Length</label>
</h3>
<h4 id="char-number" class="char-number">1</h4>
</div>
<input
type="range"
id="char-range"
class="char-range"
name="char-range"
value="1"
min="1"
max="20"
/>
<div class="checkbox-wrapper">
<p>
<input type="checkbox" id="uppercase" name="include-char" />
<label for="uppercase">Include Uppercase Letters </label>
</p>
<p>
<input type="checkbox" id="lowercase" name="include-char" />
<label for="lowercase">Include Lowercase Letters</label>
</p>
<p>
<input type="checkbox" id="numbers" name="include-char" />
<label for="numbers">Include Numbers</label>
</p>
<p>
<input type="checkbox" id="symbols" name="include-char" />
<label for="symbols">Include Symbols</label>
</p>
</div>
<div class="strength-container">
<h4 class="strength-title">Strength</h4>
<img
id="strength-img-meter"
class="strength-img-meter"
src="assets/images/empty.png"
alt="Password strength"
/>
</div>
<button
id="generate-btn"
class="generate-btn"
aria-label="Generate password"
>
Generate
<img src="assets/images/icon-arrow-right.svg" role="presentation" />
</button>
</section>
</main>
</body>
</html>