-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (140 loc) · 5.04 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
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="icon"
type="image/svg+xml"
href="/assets/images/favicon-32x32.png"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Password Generator App - A frontendmentor challenge</title>
<style>
@font-face {
font-family: "Jetbrains Mono";
src: url("./assets/fonts/JetBrainsMono-VariableFont_wght.woff2")
format("woff2"),
format("truetype");
font-style: normal;
font-weight: 400 700;
font-display: swap;
}
</style>
<link rel="stylesheet" href="./scss/main.scss" />
<script src="main.js" defer></script>
</head>
<body>
<main class="main">
<div class="app">
<h1 class="app__title">Password Generator</h1>
<form class="form" novalidate aria-live="polite">
<div class="password-wrapper">
<output class="output-password"></output>
<button class="btn-copy">
<span class="sr-only">Copy password</span>
<svg
width="21"
height="24"
xmlns="http://www.w3.org/2000/svg"
focusable="false"
aria-hidden="true"
>
<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"
/>
</svg>
</button>
</div>
<div class="form__controls">
<div class="form__controls__heading-wrapper">
<h2 class="form__controls__title" id="character-length">
Character Length
</h2>
<output
id="rangeOutput"
class="range-value"
aria-labelledby="character-length"
>8</output
>
</div>
<input
class="input-range"
name="input-range"
id="input-range"
type="range"
min="4"
max="16"
aria-labelledby="character-length"
oninput="rangeOutput.value = this.value"
/>
<div class="checks-wrapper">
<div class="checkbox-group">
<input
type="checkbox"
id="upper-option"
class="include-uppercase"
/>
<label for="upper-option">Include Uppercase Letters</label>
</div>
<div class="checkbox-group">
<input
type="checkbox"
id="lower-option"
class="include-lowercase"
/>
<label for="lower-option">Include Lowercase Letters</label>
</div>
<div class="checkbox-group">
<input
type="checkbox"
id="numbers-option"
class="include-numbers"
/>
<label for="numbers-option">Include Numbers</label>
</div>
<div class="checkbox-group">
<input
type="checkbox"
id="symbols-option"
class="include-symbols"
/>
<label for="symbols-option">Include Symbols</label>
</div>
</div>
<div class="strength">
<p class="strength-label">Strength</p>
<div class="strength-level-wrapper">
<p class="strength-level-text"></p>
<div class="scale" data-strength="0">
<span class="scale-item"></span>
<span class="scale-item"></span>
<span class="scale-item"></span>
<span class="scale-item"></span>
</div>
</div>
</div>
<button
type="submit"
aria-label="Generate password"
class="btn-generate"
>
Generate
<svg
width="12"
height="12"
xmlns="http://www.w3.org/2000/svg"
focusable="false"
role="img"
aria-hidden="true"
>
<path
d="m5.106 12 6-6-6-6-1.265 1.265 3.841 3.84H.001v1.79h7.681l-3.841 3.84z"
/>
</svg>
</button>
</div>
</form>
</div>
</main>
</body>
</html>