-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
114 lines (109 loc) · 5.25 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Password Generator - Passphrase</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<div class="navbar-brand">
<p class="navbar-item"><strong>Password Generator</strong></p>
</div>
<div class="navbar-menu" id="navbarLinks">
<div class="navbar-start">
<a id="settings-button" class="navbar-item" href="#">Settings</a>
<a id="about-button" class="navbar-item" href="#">About</a>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<p id="status-text" class="navbar-item has-text-primary-30 is-size-7"></p>
</div>
</div>
</nav>
<br>
<div class="container is-widescreen">
<br>
<div class="grid">
<div class="cell">
<h3 class="title is-3 has-text-centered has-text-weight-normal" id="password-field">Click Generate!</h3>
</div>
</div>
<div class="grid">
<div class="cell">
<h6 class="title is-6 has-text-centered has-text-weight-normal" id="crack-field">We use zxcvbn for password strength.</h6>
</div>
</div>
<br>
<div class="buttons is-centered">
<button type="button" id="generate-password" class="button is-success is-centered">Get Password</button>
<button type="button" id="generate-passphrase" class="button is-success is-centered">Get Passphrase</button>
<button type="button" id="copy-clipboard" class="button is-info is-centered">Copy</button>
<button type="button" id="copy-pwpush" class="button is-info is-centered">Copy PWPush</button>
</div>
</div>
<div id="about-modal" class="modal">
<div class="modal-content has-text-centered">
<h3 class="title is-3 has-text-weight-normal">password-generator-js</h3>
<p>A simple, client side password and passphrase generator.</p>
<p>Built with just HTML, CSS and JavaScript.</p>
<p>Thanks to <a href="https://github.com/dropbox/zxcvbn" target="blank">zxcvbn</a> for providing a password strength library.</p>
<br>
<a href="https://github.com/andrewtwelch/password-generator-js" target="_blank" id="github-link" class="button is-info">GitHub</a>
<button type="button" id="about-close" class="button is-primary">Close</button>
</div>
</div>
<div id="settings-modal" class="modal">
<div class="modal-content has-text-centered">
<h3 class="title is-3 has-text-weight-normal">Settings</h3>
<div class="field">
<label class="label">Password Length</label>
<div class="field">
<input id="password-length" type="number" min="8" max="128" class="input modal-text-input">
</div>
</div>
<div class="field">
<label class="label">Include Symbols in Password</label>
<div class="field">
<button id="password-symbols" type="button" class="button is-light is-success">Yes</button>
</div>
</div>
<div class="field">
<label class="label">Passphrase Length</label>
<div class="field">
<input id="passphrase-length" type="number" min="8" max="128" class="input modal-text-input">
</div>
</div>
<div class="field">
<label class="label">Include Symbols and Numbers in Passphrase</label>
<div class="field">
<button id="passphrase-separator" type="button" class="button is-light is-success">Yes</button>
</div>
</div>
<div class="field">
<label class="label">PWPush Expire After - Days</label>
<div class="field">
<input id="pwpush-expire-days" type="number" min="1" max="30" class="input modal-text-input">
</div>
</div>
<div class="field">
<label class="label">PWPush Expire After - Views</label>
<div class="field">
<input id="pwpush-expire-views" type="number" min="1" max="30" class="input modal-text-input">
</div>
</div>
<br>
<button type="button" id="reset-settings" class="button is-danger">Reset Settings</button>
<button type="button" id="settings-close" class="button is-primary">Close</button>
</div>
</div>
<script src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/zxcvbn@4.4.2/dist/zxcvbn.min.js"></script>
</body>
</html>