Skip to content

Commit

Permalink
Many theme updates, new "Colors" generator
Browse files Browse the repository at this point in the history 
The following have been changed:

* New "Colors" generator, using color names for the passphrase.
* Each color name is styled with the foreground color for that name.
* The colors names have come from Wikipedia, W3C, X11, and "Name That Generator" ntg.js
* Hyphenating passphrases has been removed. This is due to a couple bugs that
  were present, and the complexity of what would be needed for the new Colors
  generator. Rather, the client is now presented with the passphrase, and they
  can do with it as they please.
* The buttons and select have been styled to look more like default for cross
  browser consistency.
* The style.css filename has been renamed to include the SHA-224 hash.
* The main.js filename has also been renamed to include its SHA-224 hash.
  • Loading branch information
@atoponce
atoponce committed Sep 15, 2017
1 parent 439d25c commit d4e4d0f
Show file tree
Hide file tree
Showing 7 changed files with 118 additions and 121 deletions.
77 changes: 66 additions & 11 deletions assets/style.css → ...161cb899d256198f0084279d37db1d3a3f14d.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,96 @@
font-family: "Noto Emoji";
src: url("NotoEmoji-Regular.ttf");
}

/* body tags */
body { margin: 0; }
select {
/* get consistency across all browsers */
-moz-appearance: none;
-moz-border-radius: 2px;
-webkit-appearance: none;
background-color: white;
background-image: -webkit-gradient(
linear, left bottom, left top,
color-stop(0.16, rgb(207,207,207)), color-stop(0.79, rgb(252,252,252))
);
background-image: -moz-linear-gradient(
center bottom, rgb(207,207,207) 16%, rgb(252,252,252) 79%
);
border:1px solid black;
border-radius: 2px;
color: black;
cursor: pointer;
font-size: 12px;
padding: 5px 22px 5px 6px;
padding: 3px 22px 3px 6px;
width: 120px;
}
select option {
background-color: white;
background-color: #DDD;
color :black;
}
select::-ms-expand{
display:none;
}
select:hover {
-moz-box-shadow: 1px 1px 0px #CCC;
-webkit-box-shadow: 1px 1px 0px #CCC;
box-shadow: 1px 1px 0px #CCC;
}
select:active, select:focus {
background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0.16, rgb(207,207,207)), color-stop(0.79, rgb(252,252,252))
);
background-image: -moz-linear-gradient(
center top, rgb(207,207,207) 16%, rgb(252,252,252) 79%
);
}
button {
/* get consistency across all browsers */
-moz-appearance: none;
-moz-border-radius: 2px;
-webkit-appearance: none;
background: #fff;
background-image: -webkit-gradient(
linear, left bottom, left top,
color-stop(0.16, rgb(207,207,207)), color-stop(0.79, rgb(252,252,252))
);
background-image: -moz-linear-gradient(
center bottom, rgb(207,207,207) 16%, rgb(252,252,252) 79%
);
border:1px solid black;
position: absolute;
right: 10px;
top: 40px;
border-radius: 2px;
color: black;
cursor: pointer;
font-size: 12px;
padding: 5px 10px;
padding: 3px 10px;
position: absolute;
right: 10px;
top: 40px;
}
button:active {
background-image: -webkit-gradient(
linear, left top, left bottom,
color-stop(0.16, rgb(207,207,207)), color-stop(0.79, rgb(252,252,252))
);
background-image: -moz-linear-gradient(
center top, rgb(207,207,207) 16%, rgb(252,252,252) 79%
);
}
button:hover {
-moz-box-shadow: 1px 1px 0px #CCC;
-webkit-box-shadow: 1px 1px 0px #CCC;
box-shadow: 1px 1px 0px #CCC;
}
/* classes */
.contrast {
text-shadow:
-1px -1px 0 #444, 0px -1px 0 #444,
1px -1px 0 #444, -1px 0px 0 #444,
-1px 1px 0 #444, 0px 1px 0 #444,
1px 1px 0 #444, 1px 0px #444;
}
.bold {
font-weight: bold;
}
.stats {
bottom: 5px;
left: 5px;
Expand Down Expand Up @@ -91,8 +146,8 @@ button {
-webkit-transform: rotate(90deg);
bottom: 3px;
color: black;
content: '⊳';
font-size: 18px;
content: '▶';
font-size: 13px;
left: 100px;
pointer-events: none;
position: absolute;
Expand Down
33 changes: 6 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<link integrity="sha256-DwMZFBA9D9hwt+Xd8LCz3zdinwlkpOF99hzgH1WUSIY=" crossorigin="anonymous" rel="stylesheet" href="assets/style.css">
<link integrity="sha256-9/9KxqnFd4t2SFFARr7bsUEykjpVcxMrBrSXHegok/o=" crossorigin="anonymous" rel="stylesheet" href="assets/style.b61a1f0bbbe2b5a8a9d161cb899d256198f0084279d37db1d3a3f14d.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Passphrase and Password Generator</title>
Expand Down Expand Up @@ -31,12 +31,13 @@ <h1>Passphrase and Password Generator</h1>
<p class="cell-title"><strong>Alternate</strong></p>
<div class="optional">
<select>
<option name="alternate_list" selected>Colors</option>
<option name="alternate_list">Elvish</option>
<option name="alternate_list">Klingon</option>
<option name="alternate_list">PGP</option>
<option name="alternate_list">RockYou</option>
<option name="alternate_list">Simpsons</option>
<option name="alternate_list" selected="selected">Trump</option>
<option name="alternate_list">Trump</option>
</select>
</div>
<button value="Generate" onclick="generate_passphrase('alternate');">Generate</button>
Expand All @@ -45,9 +46,6 @@ <h1>Passphrase and Password Generator</h1>
<span id="alt-entropy"></span>
<span id="alt-length"></span>
</div>
<div class="passphrase-separator">
<input type="checkbox" id="hyphen8_3" onclick="toggle_hyphens('hyphen8_3', 'alt-pass')"><label for="hyphen8_3">Hyphenate</label>
</div>
</div>
<div id="btc-default" class="cell">
<p class="cell-title"><strong>Bitcoin</strong></p>
Expand All @@ -69,9 +67,6 @@ <h1>Passphrase and Password Generator</h1>
<span id="btc-entropy"></span>
<span id="btc-length"></span>
</div>
<div class="passphrase-separator">
<input type="checkbox" id="hyphen8_4" onclick="toggle_hyphens('hyphen8_4', 'btc-pass')"><label for="hyphen8_4">Hyphenate</label>
</div>
</div>
<div id="diceware-default" class="cell">
<p class="cell-title"><strong>Diceware</strong></p>
Expand Down Expand Up @@ -109,9 +104,6 @@ <h1>Passphrase and Password Generator</h1>
<span id="diceware-entropy"></span>
<span id="diceware-length"></span>
</div>
<div class="passphrase-separator">
<input type="checkbox" id="hyphen8_1" onclick="toggle_hyphens('hyphen8_1', 'diceware-pass')"><label for="hyphen8_1">Hyphenate</label>
</div>
</div>
<div id="eff-default" class="cell">
<p class="cell-title"><strong>EFF</strong></p>
Expand All @@ -128,18 +120,15 @@ <h1>Passphrase and Password Generator</h1>
<span id="eff-entropy"></span>
<span id="eff-length"></span>
</div>
<div class="passphrase-separator">
<input type="checkbox" id="hyphen8_2" onclick="toggle_hyphens('hyphen8_2', 'eff-pass')"><label for="hyphen8_2">Hyphenate</label>
</div>
</div>
<div id="pseudo-default" class="cell">
<p class="cell-title"><strong>Pseudowords</strong></p>
<div class="optional">
<select>
<option name="pseudowords" selected="selected">Bubble Babble</option>
<option name="pseudowords">Secret Ninja</option>
<option name="pseudowords">Cosby Bebop</option>
<option name="pseudowords">Korean K-pop</option>
<option name="pseudowords">Secret Ninja</option>
</select>
</div>
<button value="Generate" onclick="generate_pseudowords();">Generate</button>
Expand Down Expand Up @@ -168,17 +157,6 @@ <h1>Passphrase and Password Generator</h1>
<span id="random-length"></span>
</div>
</div>
<!--
<div id="emoji-default" class="cell">
<p class="cell-title"><strong>Emoji</strong></p>
<button value="Generate" onclick="generate_emoji();">Generate</button>
<p id="emoji-pass" class="password"></p>
<div class="stats length">
<span id="emoji-entropy"></span>
<span id="emoji-length"></span>
</div>
</div>
-->
</div>
<div id="footer">
<center>
Expand All @@ -193,7 +171,7 @@ <h1>Passphrase and Password Generator</h1>
</div>

<!-- core functions -->
<script integrity="sha256-FGwlubgnj4DJa4xL0Rhz614SCk43FK0l2itUoGyMHtg=" crossorigin="anonymous" src="js/main.js"></script>
<script integrity="sha256-KrWb60zdn6V44md6ooFZsRQHoF67TTCVaViSl4+GEvg=" crossorigin="anonymous" src="js/main.ea82abb18c98f08df48e72b0c554dc3051e7e616b3b0dd8a86e2b33b.js"></script>

<!--
Because the word lists are static, and not changing, the filename is given a SHA-224 digest of its content. The web server can then be
Expand All @@ -219,6 +197,7 @@ <h1>Passphrase and Password Generator</h1>
-->

<!-- alternate passphrase generator -->
<script async integrity="sha256-nznH+wsyyEvNGfN+usQJQcXUdjE4HdQeefzDI62EjpU=" crossorigin="anonymous" src="lists/alternate_colors.839a0fa52f90cad21ec4b8d3c4a13050a3de8679bd8fe4255bbb3648.js"></script>
<script async integrity="sha256-jLj4ANLLEAPsBcxKTfN6+VlbAPsGRxDwRPD3QGj+tB4=" crossorigin="anonymous" src="lists/alternate_elvish.6e050ba74c9e95152d34c8ccec06c3de911b4162c6ff4823c627be80.js"></script>
<script async integrity="sha256-zB6XiJSvafdgaQi7VeZq7EPS6Vv2P3kAZszIT+NV3Ug=" crossorigin="anonymous" src="lists/alternate_klingon.a962fde40acd05c7bcbed20513f82686319a885b38578f1ee2aa257c.js"></script>
<script async integrity="sha256-AOaWJIyzaksIVdEza5z2daHul9b5bCIIul2nxxmV1rQ=" crossorigin="anonymous" src="lists/alternate_pgp.9408ae5448225fe9f6363d9a56ed4a2ca672790af688fea9fd3b306b.js"></script>
Expand Down
Loading

0 comments on commit d4e4d0f

Please sign in to comment.