-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (150 loc) · 5.66 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
141
142
143
144
145
146
147
148
149
150
151
152
153
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Jodie Addis" />
<meta
name="description"
content="Random password generator. Passwords are generated based on the length and characters selected by the users. The strength of the generated password is also measured. A copy/paste button allows users to copy the generated password."
/>
<title>Password Generator</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!--<link rel="stylesheet" href="dist/output.css" /> Dev -->
<link rel="stylesheet" href="public/output.css" />
</head>
<body class="flex h-full w-full items-center bg-darkBalticSea">
<main class="flex h-5/6 w-full flex-col items-center justify-center">
<h1
class="text-jetbrains mb-5 self-center text-center text-2xl font-bold text-topaz"
>
Password Generator
</h1>
<div
class="mb-4 flex h-16 w-11/12 flex-row justify-between bg-balticSea px-4 text-mischka md:mb-5 md:w-6/12 lg:w-1/3"
>
<p
id="display-password"
class="flex self-center text-2xl font-bold text-mischka md:text-3xl"
></p>
<div class="flex self-center">
<span
id="copiedText"
class="mr-2 text-lg font-bold uppercase text-mintGreen"
></span>
<button id="copyBtn">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
heigh="8"
width="16"
id="copyIcon"
class="cursor-pointer text-mintGreen hover: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>
</button>
</div>
</div>
<form
class="form w-11/12 bg-balticSea px-4 py-4 capitalize text-mischka md:w-6/12 lg:w-1/3"
>
<div class="form-group mb-8 flex flex-col">
<div class="flex flex-row justify-between">
<label for="password-length" class="mb-3 text-lg"
>Character Length</label
>
<p class="text-2xl font-bold text-mintGreen" id="lengthDisplay">
10
</p>
</div>
<input
type="range"
min="0"
max="20"
value="10"
id="password-length"
name="password-length"
class="password-length range-sm bg-darkBalticSea accent-mintGreen"
step="1"
/>
</div>
<div class="form-group mb-2">
<input
type="checkbox"
id="password-uppercase"
name="password-uppercase"
class="input_checkbox h-5 w-5 text-darkBalticSea accent-mintGreen"
/>
<label for="password-uppercase" class="ml-3"
>include uppercase letters</label
>
</div>
<div class="form-group mb-2">
<input
type="checkbox"
id="password-lowercase"
name="password-lowercase"
class="input_checkbox h-5 w-5 accent-mintGreen"
/>
<label for="password-lowercase" class="ml-3"
>include lowercase letters</label
>
</div>
<div class="form-group mb-2">
<input
type="checkbox"
id="password-numbers"
name="password-numbers"
class="input_checkbox h-5 w-5 accent-mintGreen"
/>
<label for="password-numbers" class="ml-3">include numbers</label>
</div>
<div class="form-group mb-5">
<input
type="checkbox"
id="password-symbols"
name="password-symbols"
class="input_checkbox h-5 w-5 accent-mintGreen"
/>
<label for="password-symbols" class="ml-3">include symbols</label>
</div>
<div
class="mb-4 flex h-16 justify-between bg-darkBalticSea px-4 text-lg font-bold uppercase text-topaz"
>
<p class="self-center text-base md:text-lg">strength</p>
<div class="wrapper flex flex-row">
<span
id="strengthLevel"
class="mr-3 self-center text-lg text-mischka md:text-xl"
></span>
<div class="wrapper_rectangle flex flex-row self-center">
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
</div>
</div>
</div>
<div class="flex justify-center">
<button
type="submit"
class="h-14 w-full bg-mintGreen text-center text-base font-bold uppercase text-darkBalticSea"
id="submit_btn"
>
Generate →
</button>
</div>
</form>
</main>
<!--<script type="module" src="/dist/index.js"></script> Dev-->
<script type="module" src="index.js"></script>
</body>
</html>