-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpasswordmanager.html
93 lines (93 loc) · 2.81 KB
/
passwordmanager.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
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 40px;
outline: none;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
font-size: medium;
background-color: azure;
}
button:hover {
background-color: rgb(207, 224, 224);
}
#result {
width: 100%;
display: none;
text-align: center;
color: whitesmoke;
margin: auto;
}
#resultBox {
width: 100%;
display: none;
text-align: center;
margin: auto;
}
label {
color: whitesmoke;
}
h1 {
font-size: larger;
color: whitesmoke;
text-align: center;
}
body {
background-color: rgb(94, 92, 92);
width: 200px;
}
.body {
background-color: rgb(94, 92, 92);
width: 200px;
/* outline: 1px solid black; */
display: block;
margin: 0;
}
.box {
/* outline: 3px solid whitesmoke; */
padding-left: 1px;
background-color: black;
box-sizing: border-box
}
.inputBox {
width: 40px;
height: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="mainBox" class="body"> <!-- Doing this so I can test easier without having to upload to chrome, and change boxes. -->
<div class="box">
<h1>Password Manager</h1>
</div>
<button id="generatePassword" style="cursor:pointer">Generate a Password <img src="/Images/rightArrow.png" width="10"></button>
<button id="openVault" style="cursor:pointer">Open Password Vault <img src="/Images/rightArrow.png" width="10"></button>
<script src="main.js"></script>
</div>
<div id="generatePasswordBox" class="body" style="display: none;">
<div class="box">
<h1><img id="backToHome1" src="/Images/leftArrowWhite.png" width="10" style="cursor:pointer"> Generate a Password</h1>
</div>
<div>
<input type="range" id="lengthInputRange" min="5" max="30" value="15">
<input type="number" id="lengthInput" value="15" class="inputBox">
<input type="checkbox" id="capitalsBox" name="capitalsBox" value="Capitals" checked>
<label for="capitalsBox"> Use Capitals</label><br>
<input type="checkbox" id="numbersBox" name="numbersBox" value="Numbers" checked>
<label for="numbersBox"> Use Numbers</label><br>
<input type="checkbox" id="symbolsBox" name="symbolsBox" value="Symbols" checked>
<label for="symbolsBox"> Use Symbols</label><br><br>
<button id="createPassword">Create Password</button>
</div>
<div id="resultBox" class="resultBox">
<p id="result"></p>
</div>
</div>
</body>
</html>