forked from mattt/Chroma-Hash
/
example.html
71 lines (68 loc) · 3.47 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
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="Mattt Thompson">
<meta name="description" content="Chroma-Hash is a sexy, secure visualization of password field input">
<title>Chroma-Hash Demo</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript" charset="utf-8">
google.load("jquery", "1.3.2");
</script>
<script src="chroma-hash.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("input:password").chromaHash({bars: 3});
$("#username").focus();
});
</script>
<style type="text/css" media="screen">
body{background:#ddd;font-size:1.3em;font-family:"Helvetica",Helvetica,sans-serif;}
h1,h2{text-align:center;}
h1{color:#222;text-shadow:1px 1px 1px #ddd;margin-bottom:0.5em;}
h2{color:#888;width:80%;margin:0.5em auto 30px auto;font-family:"Palantino",Georgia;font-size:80%;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:440px;font-size:1.5em;margin-bottom:0.75em;}
.explanation{text-align:center;}
a{color:#444;}
a:hover{background:#ddd;}
a:visited{color:#565656;}
a:active{color:#fff;background:#444;text-shadow:none;}
fieldset{width:440px;margin:10px auto;border:none;}
hr{border:0px transparent solid;border-top:1px #fdfdfd solid;border-bottom:1px #ddd solid;margin:20px 0 30px 0;}
.container, .footer{width:480px;}
.container{padding:30px 30px;margin:100px auto 30px auto;background:#fff;-moz-border-radius:11px;-khtml-border-radius:11px;-webkit-border-radius:11px;border-radius:11px;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-webkit-box-shadow:1px 0px 5px #666;-khtml-box-sizing:content-box;box-sizing:content-box;
}
.footer{margin:0 auto;display:block;color:#555;text-align:center;font-size:0.6em;}
.footer span{display:block;line-height:1.5em;}
</style>
</head>
<body>
<a href="http://github.com/mattt/Chroma-Hash/">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" />
</a>
<div class="container">
<h1>Chroma-Hash</h1>
<h2>a sexy, secure visualization of password field input</h2>
<fieldset>
<label>Username</label>
<input type="text" name="username" value="" id="username">
<label>Password</label>
<input type="password" name="password" value="" id="password">
<label>Confirm Password</label>
<input type="password" name="confirm-password" value="" id="confirm-password">
</fieldset>
<hr/>
<div class="explanation">
<p>Looking for some more explanation? Have some feedback?<br/>Check out <a href="http://mattt.me/2009/11/chroma-hash-revisited/">my most recent blog post about Chroma-Hash</a></p>
</div>
</div>
<div class="footer">
<span class="copyright">© <a href="http://twitter.com/mattt" title="@mattt" rel="me">Mattt Thompson</a> - Released Under an MIT License</span>
<span class="version">Last Revised: November 7, 2009</span>
</div>
</body>
</html>