-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
107 lines (107 loc) · 6.59 KB
/
popup.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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unique Passwords</title>
<meta charset="utf-8" />
<meta name="description" content="Unique Passwords" />
<meta name="author" content="Sandor Balazsi" />
<link rel="shortcut icon" href="icons/icon.svg" />
<link href="styles/popup.css" rel="stylesheet" />
</head>
<body>
<svg id="icons" xmlns="http://www.w3.org/2000/svg">
<symbol id="cog-icon" viewBox="0 0 48 48">
<path pointer-events="none" d="M42.3,26.4c0-.72.25-1.68.25-2.4a8,8,0,0,0-.25-2.4L47.48,18a1.1,1.1,0,0,0,.25-1.68l-4.94-8.4a1.11,1.11,0,0,0-1.48-.72L35.39,9.84a15.85,15.85,0,0,0-4.44-2.4L30.21,1.2A1.15,1.15,0,0,0,29,0H19.1a1.15,1.15,0,0,0-1.23,1.2l-.74,6a19.11,19.11,0,0,0-4.44,2.4L6.76,7.2a1.2,1.2,0,0,0-1.48.48L.34,16.08c-.49.72-.49,1.44.25,1.68L5.77,21.6c0,.72-.25,1.68-.25,2.4a8,8,0,0,0,.25,2.4L.59,30a1.1,1.1,0,0,0-.25,1.68l4.94,8.4a1.11,1.11,0,0,0,1.48.72l5.92-2.64a15.85,15.85,0,0,0,4.44,2.4l.74,6.24A1.15,1.15,0,0,0,19.1,48H29a1.15,1.15,0,0,0,1.23-1.2l.74-6.24a19.11,19.11,0,0,0,4.44-2.4l5.92,2.64a1.2,1.2,0,0,0,1.48-.48l4.94-8.4a1.45,1.45,0,0,0-.25-1.68ZM24,34A10,10,0,1,1,34,24,10,10,0,0,1,24,34Z" />
</symbol>
<symbol id="eye" viewBox="0 0 24 24">
<path pointer-events="none" d="M12,19 C9.42745609,19 6.8041638,17.7966329 4.36477545,15.8264801 C2.59600576,14.3979473 1,12.5712738 1,12 C1,11.4287262 2.59600576,9.60205274 4.36477545,8.17351986 C6.8041638,6.20336713 9.42745609,5 12,5 C14.5725439,5 17.1958362,6.20336713 19.6352245,8.17351986 C21.4039942,9.60205274 23,11.4287262 23,12 C23,12.5712738 21.4039942,14.3979473 19.6352245,15.8264801 C17.1958362,17.7966329 14.5725439,19 12,19 Z M12,18 C14.3053635,18 16.729106,16.8881711 19.0069111,15.0485199 C19.8631039,14.3570225 20.6458538,13.5999166 21.2594988,12.8975827 C21.5120855,12.6084901 21.7210733,12.3448236 21.8644104,12.1380223 C21.9433747,12.0240956 22,11.917126 22,12 C22,12.082874 21.9433747,11.9759044 21.8644104,11.8619777 C21.7210733,11.6551764 21.5120855,11.3915099 21.2594988,11.1024173 C20.6458538,10.4000834 19.8631039,9.64297754 19.0069111,8.95148014 C16.729106,7.11182886 14.3053635,6 12,6 C9.69463651,6 7.27089399,7.11182886 4.99308892,8.95148014 C4.13689606,9.64297754 3.35414618,10.4000834 2.74050119,11.1024173 C2.48791447,11.3915099 2.27892669,11.6551764 2.1355896,11.8619777 C2.05662527,11.9759044 2,12.082874 2,12 C2,11.917126 2.05662527,12.0240956 2.1355896,12.1380223 C2.27892669,12.3448236 2.48791447,12.6084901 2.74050119,12.8975827 C3.35414618,13.5999166 4.13689606,14.3570225 4.99308892,15.0485199 C7.27089399,16.8881711 9.69463651,18 12,18 Z M12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 Z M12,15 C13.6568542,15 15,13.6568542 15,12 C15,10.3431458 13.6568542,9 12,9 C10.3431458,9 9,10.3431458 9,12 C9,13.6568542 10.3431458,15 12,15 Z" />
</symbol>
<symbol id="check-box" viewBox="0 0 18 18">
<path pointer-events="none" d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z" />
</symbol>
<symbol id="check-mark" viewBox="0 0 18 18">
<polyline pointer-events="none" points="1 9 7 14 15 4" />
</symbol>
<symbol id="copy" viewBox="0 0 17 17">
<path d="M8 2C7.44772 2 7 2.44772 7 3C7 3.55228 7.44772 4 8 4H10C10.5523 4 11 3.55228 11 3C11 2.44772 10.5523 2 10 2H8Z" />
<path d="M3 5C3 3.89543 3.89543 3 5 3C5 4.65685 6.34315 6 8 6H10C11.6569 6 13 4.65685 13 3C14.1046 3 15 3.89543 15 5V11H10.4142L11.7071 9.70711C12.0976 9.31658 12.0976 8.68342 11.7071 8.29289C11.3166 7.90237 10.6834 7.90237 10.2929 8.29289L7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L10.2929 15.7071C10.6834 16.0976 11.3166 16.0976 11.7071 15.7071C12.0976 15.3166 12.0976 14.6834 11.7071 14.2929L10.4142 13H15V16C15 17.1046 14.1046 18 13 18H5C3.89543 18 3 17.1046 3 16V5Z" />
<path d="M15 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H15V11Z" />
</symbol>
</svg>
<header>
<h1>Unique Passwords</h1>
<svg id="cog">
<use xlink:href="#cog-icon" />
</svg>
</header>
<hr />
<div class="group">
<input type="text" id="domain" placeholder=" " />
<label for="domain">Domain</label>
</div>
<div class="group">
<input type="text" id="username" placeholder=" " list="username-list" />
<label for="username">Username</label>
<datalist id="username-list"></datalist>
</div>
<div class="group">
<input type="password" id="master" placeholder=" " autofocus />
<label for="master">Master Password</label>
<svg id="show-master">
<use xlink:href="#eye" />
</svg>
</div>
<div class="group">
<input type="range" id="password-length" class="slider" min="3" max="20" value="20" />
<label for="password-length">Length</label>
<span id="password-length-value">20</span>
</div>
<input type="checkbox" id="use-lowercase" checked />
<label for="use-lowercase">Lowercase:
<svg>
<use xlink:href="#check-box" class="check-box" />
<use xlink:href="#check-mark" class="check-mark" />
</svg>
</label>
<span class="checkbox-spacing"></span>
<input type="checkbox" id="use-number" checked />
<label for="use-number">Number:
<svg>
<use xlink:href="#check-box" class="check-box" />
<use xlink:href="#check-mark" class="check-mark" />
</svg>
</label>
<br>
<input type="checkbox" id="use-uppercase" checked />
<label for="use-uppercase">Uppercase:
<svg>
<use xlink:href="#check-box" class="check-box" />
<use xlink:href="#check-mark" class="check-mark" />
</svg>
</label>
<span class="checkbox-spacing"></span>
<input type="checkbox" id="use-special" checked />
<label for="use-special">Special:
<svg>
<use xlink:href="#check-box" class="check-box" />
<use xlink:href="#check-mark" class="check-mark" />
</svg>
</label>
<br />
<button id="generate" disabled>Generate
<svg id="progress">
<use xlink:href="#cog-icon">
<animateTransform attributeName="transform" begin="0s" dur="4s" type="rotate" from="0 8 8" to="360 8 8" repeatCount="indefinite" />
</use>
</svg>
</button>
<button id="show-password">Show</button>
<button id="copy-password" title="Copy to clipboard">
<svg id="copy">
<use xlink:href="#copy" />
</svg>
</button>
<script src="scripts/popup.js"></script>
<script src="scripts/scrypt.js"></script>
</body>
</html>