-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
122 lines (118 loc) · 5.22 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Password Generator</title>
<link rel="stylesheet" href="dist/style/output.css" />
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon">
</head>
<body>
<main>
<h1 class="mb-5 text-center text-body leading-headingM text-topaz">
Password Generator
</h1>
<div class="flex justify-between bg-balticSea">
<p
class="password-result self-center p-4 text-headingM leading-headingL text-mischka"
>
P4$5W0rD!
</p>
<div class="flex gap-2 pr-3">
<span
class="copied-message self-center text-body uppercase text-mintGreen"
></span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="btnCopyPaste h-6 w-6 cursor-pointer self-center text-mischka"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"
/>
</svg>
</div>
</div>
<form class="form">
<div class="form-group">
<div class="flex justify-between">
<label for="password-length">Character Length</label>
<span class="range-value text-mintGreen"></span>
</div>
<input
type="range"
min="0"
max="20"
value="10"
id="password-length"
name="password-length"
class="mt-3 w-full bg-mintGreen accent-mintGreen"
/>
</div>
<div class="form-group">
<input
type="checkbox"
id="password-uppercase"
name="password-uppercase"
/>
<label for="password-uppercase"
>include uppercase letters</label
>
</div>
<div class="form-group">
<input
type="checkbox"
id="password-lowercase"
name="password-lowercase"
/>
<label for="password-lowercase"
>include lowercase letters</label
>
</div>
<div class="form-group">
<input
type="checkbox"
id="password-numbers"
name="password-numbers"
/>
<label for="password-numbers">include numbers</label>
</div>
<div class="form-group">
<input
type="checkbox"
id="password-symbols"
name="password-symbols"
/>
<label for="password-symbols">include symbols</label>
</div>
<div
class="strength-wrapper my-5 flex justify-between bg-balticSeaDarker px-4 py-4 md:gap-12 md:px-8"
>
<p class="self-center uppercase text-topaz">strength</p>
<div class="wrapper flex gap-3">
<span
class="message-strength self-center text-body text-mischka md:text-headingM"
></span>
<div class="rectangle-wrapper flex self-center">
<div class="strength"></div>
<div class="strength"></div>
<div class="strength"></div>
<div class="strength"></div>
</div>
</div>
</div>
<div
class="submit-wrapper cursor-pointer bg-mintGreen px-8 py-4 text-center uppercase"
>
<button type="submit" class="uppercase">Generate →</button>
</div>
</form>
</main>
</body>
<script src="dist/main.js" type="module"></script>
</html>