forked from mattt/Chroma-Hash
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
60 lines (58 loc) · 3.01 KB
/
example.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
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>Chroma-Hash</title>
<meta name="author" content="Mattt Thompson"/>
<meta name="description" content="Chroma-Hash displays a series of colored bars at the end of field inputs so you can instantly see if your password is right. The resulting color pattern is non-reversible, so no one could know what your password just from the colors."/>
<meta name="viewport" content="width=device-width"/>
<link href="http://opensource.org/licenses/mit-license" rel="license"/>
<style type="text/css" media="screen">
body{background:#ddd;font-size:120%;font-family:"Helvetica",Helvetica,sans-serif;}
hgroup{text-align:center;margin-bottom: 2em;}
h1{color:#222;text-shadow:1px 1px 1px #ddd;margin-bottom:0.5em;}
h2{color:#888;font-family:"Palantino",Georgia; font-size:0.75em;font-style:italic;font-weight:normal;}
p,label, span{text-shadow:1px 1px 1px #f2f2f2;}
label{color:#444;display:block;font-variant:small-caps;text-transform:lowercase;}
p{font-size:77%;color:#444;}
input{width: 100%;font-size:1.5em;margin-bottom:0.75em;}
a{color:#444;}
a:hover{background:#ddd;}
a:visited{color:#565656;}
a:active{color:#fff;background:#444;text-shadow:none;}
fieldset{border:none;}
hr{border:0px transparent solid;border-top:1px #fdfdfd solid;border-bottom:1px #ddd solid;margin:20px 0 30px 0;}
.container, .footer{max-width:480px;}
.container{padding:1em;margin:2em auto;background:#fff;border-radius:11px;box-shadow:0px 2px 5px #888;
}
footer{margin:0 auto;display:block;color:#555;text-align:center;font-size:1em; width: 100%;}
footer p{display:block;line-height:1.5em;}
</style>
</head>
<body>
<div class="container">
<hgroup>
<h1>Chroma-Hash</h1>
<h2>a sexy, secure visualization of password field input</h2>
</hgroup>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" tabindex="1" autofocus="autofocus"/>
<label for="confirm-password">Confirm Password</label>
<input type="password" name="confirm-password" id="confirm-password" tabindex="2"/>
</fieldset>
</div>
<footer>
<p><nobr>Created by <a href="http://twitter.com/mattt" title="@mattt" rel="me">Mattt Thompson</a></nobr>, and <nobr>released under the <a href="http://opensource.org/licenses/mit-license" rel="license">MIT License</a></nobr>.</p>
<p>Source code <a href="https://github.com/mattt/Chroma-Hash/" title="Source code available on GitHub" rel="nofollow">available on GitHub</a>.</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.chroma-hash.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("input:password").chromaHash({bars: 3});
$("#username").focus();
});
</script>
</body>
</html>