Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

upload again all

  • Loading branch information...
commit d7c63ddbce37a7d45b02bad5a34f03ad6f993700 1 parent 49d2abf
Eric Sachs authored August 23, 2011

Showing 51 changed files with 1,834 additions and 66 deletions. Show diff stats Hide diff stats

  1. BIN  .DS_Store
  2. 65  account chooser/account chooser.html
  3. BIN  account chooser/images/.DS_Store
  4. BIN  account chooser/images/bonniep.jpg
  5. BIN  account chooser/images/bonniew.jpg
  6. BIN  account chooser/images/clyde.jpg
  7. BIN  account chooser/images/freeemail.png
  8. BIN  account chooser/images/keyhole.png
  9. BIN  account chooser/images/loading.png
  10. BIN  account chooser/images/logo.png
  11. BIN  account chooser/images/myidp.png
  12. BIN  account chooser/images/simplymail.png
  13. BIN  account chooser/images/sitelogohere.png
  14. BIN  account chooser/images/socialnetwork.png
  15. BIN  account chooser/images/x.png
  16. BIN  account chooser/images/yahoo.png
  17. 442  account chooser/style.css
  18. BIN  assets/account chooser.psd
  19. 28  how.html
  20. 28  idp.html
  21. BIN  images/.DS_Store
  22. BIN  images/background.gif
  23. BIN  images/bonniep.jpg
  24. BIN  images/bonniew.jpg
  25. BIN  images/clyde.jpg
  26. BIN  images/cursor.png
  27. BIN  images/freeemail.png
  28. BIN  images/keyhole-demo-icon.png
  29. BIN  images/keyhole-logo.png
  30. BIN  images/keyhole.png
  31. BIN  images/loading.png
  32. BIN  images/logo.png
  33. BIN  images/myidp.png
  34. BIN  images/point1.png
  35. BIN  images/point2.png
  36. BIN  images/point3.png
  37. BIN  images/point4.png
  38. BIN  images/point5.png
  39. BIN  images/point6.png
  40. BIN  images/simplymail.png
  41. BIN  images/sitelogohere.png
  42. BIN  images/socialnetwork.png
  43. BIN  images/value1.png
  44. BIN  images/value2.png
  45. BIN  images/value3.png
  46. BIN  images/x.png
  47. 228  index.html
  48. 83  learnmore.html
  49. 177  script.js
  50. 821  style.css
  51. 28  webowners.html
BIN  .DS_Store
Binary file not shown
65  account chooser/account chooser.html
... ...
@@ -0,0 +1,65 @@
  1
+<!DOCTYPE html>
  2
+<html>
  3
+<head>
  4
+	<meta charset="utf-8">
  5
+	<title>Account Chooser</title>
  6
+	<link rel="stylesheet" href="style.css">
  7
+</head>
  8
+<body>
  9
+
  10
+<div class="account-chooser">
  11
+	<div class="modal-loading">
  12
+		<a href="#"><img src="images/x.png" alt="x" /></a>
  13
+		<img src="images/loading.png" alt="" />
  14
+		<h2>Signing in</h2>
  15
+	</div>
  16
+	<div class="modal">
  17
+		<div class="modal-header">
  18
+			<img src="images/logo.png" alt="" />
  19
+			<a href="#"><img src="images/x.png" alt="x" /></a>
  20
+		</div>
  21
+		<div id="modal-emailentry">
  22
+			<h2>Enter your email address</h2>
  23
+			<form id="email_entry" action="javascript: void(0)" method="post">
  24
+				<input type="text" name="email" id="modal-email" size="25" value="" /> 
  25
+				<input type="submit" name="signin" id="modal-signin" value="Sign in" />
  26
+			</form>
  27
+		</div>
  28
+		<div id="modal-idpselection">
  29
+			<h2>Sign in with</h2>
  30
+			<ul>
  31
+				<li><a href="#"><img src="images/myidp.png" alt="my idp" /></a></li>
  32
+				<li><a href="#"><img src="images/socialnetwork.png" alt="SocialNetwork" /></a></li>
  33
+				<li><a href="#"><img src="images/simplymail.png" alt="Simply, Mail." /></a></li>
  34
+				<li><a href="#"><img src="images/freeemail.png" alt="Free Email" /></a></li>
  35
+			</ul>
  36
+		</div>
  37
+		<div id="modal-accountselection">
  38
+			<h2>Sign in</h2>
  39
+			<ul>
  40
+				<li>
  41
+					<img src="images/bonniep.jpg" alt="" />
  42
+					<p><strong>Bonnie Parker</strong>bonnie.parker1234@gmail.com</p>
  43
+					<a href="#"><img src="images/x.png" alt="x" /></a>
  44
+				</li>
  45
+				<li>
  46
+					<img src="images/bonniew.jpg" alt="" />
  47
+					<p><strong>Bonnie Parker</strong>bonnie@bcgang.com</p>
  48
+					<a href="#"><img src="images/x.png" alt="x" /></a>
  49
+				</li>
  50
+				<li>
  51
+					<img src="images/clyde.jpg" alt="" />
  52
+					<p><strong>Clyde Barrow</strong>clyde_barrow123@yahoo.com</p>
  53
+					<a href="#"><img src="images/x.png" alt="x" /></a>
  54
+				</li>
  55
+			</ul>
  56
+			<input type="submit" name="signinanother" id="modal-signin-another" value="Sign in with another account" />
  57
+		</div>
  58
+		<div class="modal-footer">
  59
+			© 2011 OpenID Foundation. <a href="http://www.accountchooser.com/">Learn more about this</a>
  60
+		</div>
  61
+	</div>
  62
+</div>
  63
+
  64
+</body>
  65
+</html>
BIN  account chooser/images/.DS_Store
Binary file not shown
BIN  account chooser/images/bonniep.jpg
BIN  account chooser/images/bonniew.jpg
BIN  account chooser/images/clyde.jpg
BIN  account chooser/images/freeemail.png
BIN  account chooser/images/keyhole.png
BIN  account chooser/images/loading.png
BIN  account chooser/images/logo.png
BIN  account chooser/images/myidp.png
BIN  account chooser/images/simplymail.png
BIN  account chooser/images/sitelogohere.png
BIN  account chooser/images/socialnetwork.png
BIN  account chooser/images/x.png
BIN  account chooser/images/yahoo.png
442  account chooser/style.css
... ...
@@ -0,0 +1,442 @@
  1
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800);
  2
+
  3
+.account-chooser {
  4
+	background: rgba(255,255,255,.78);
  5
+	font-family: 'Open Sans', arial, sans-serif;
  6
+	
  7
+	position: fixed;
  8
+	top:0;
  9
+	left: 0;
  10
+	width: 100%;
  11
+	height: 100%;
  12
+	z-index: 314159;
  13
+}
  14
+
  15
+.account-chooser .modal-loading{display: none;}
  16
+.account-chooser #modal-accountselection{display: none;}
  17
+
  18
+.account-chooser .modal-loading {
  19
+	width: 125px;
  20
+	height: 125px;
  21
+	background: #f5f5f5;
  22
+	border: 1px solid #b8b8b8;
  23
+	-moz-box-shadow: 0 3px 10px rgba(0,0,0,.2);
  24
+	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,.2);
  25
+	box-shadow: 0 3px 10px rgba(0,0,0,.2);
  26
+	-webkit-border-radius: 4px;
  27
+	-moz-border-radius: 4px;
  28
+	border-radius: 4px;
  29
+	
  30
+	margin: 20% auto 0 auto;
  31
+	position: relative;
  32
+	top: 120px;
  33
+	text-align: center;
  34
+	cursor: pointer;
  35
+}
  36
+
  37
+.account-chooser .modal-loading:hover {
  38
+	background: #f9f9f9;
  39
+}
  40
+
  41
+.account-chooser .modal-loading:active {
  42
+	top: 121px;
  43
+	-moz-box-shadow: 0 2px 10px rgba(0,0,0,.2);
  44
+	-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
  45
+	box-shadow: 0 2px 10px rgba(0,0,0,.2);
  46
+}
  47
+
  48
+.account-chooser .modal-loading a {
  49
+	line-height: 0;
  50
+	position: absolute;
  51
+	top: 0px;
  52
+	right: 0px;
  53
+	width: 10px;
  54
+	height: 10px;
  55
+	padding: 10px;
  56
+	opacity: .4;
  57
+}
  58
+
  59
+.account-chooser .modal-loading a:hover {
  60
+	opacity: .9;
  61
+}
  62
+
  63
+.account-chooser .modal-loading a:active {
  64
+	top: 1px;
  65
+}
  66
+
  67
+.account-chooser .modal-loading > img {
  68
+	margin: 22px 0 0 0;
  69
+	-webkit-animation-name: loading;
  70
+	-webkit-animation-duration: 10s;
  71
+	-webkit-animation-timing-function: linear;
  72
+	-webkit-animation-iteration-count: infinite;
  73
+}
  74
+
  75
+@-webkit-keyframes loading {
  76
+	0% {
  77
+		-moz-transform: rotate(0deg);
  78
+		-webkit-transform: rotate(0deg); 
  79
+		transform: rotate(0deg);
  80
+	}
  81
+	50% {
  82
+		-moz-transform: rotate(180deg);
  83
+		-webkit-transform: rotate(180deg); 
  84
+		transform: rotate(180deg);	
  85
+	}
  86
+	100% {
  87
+		-moz-transform: rotate(360deg);
  88
+		-webkit-transform: rotate(360deg); 
  89
+		transform: rotate(360deg);
  90
+	}
  91
+}
  92
+
  93
+.account-chooser .modal-loading h2 {
  94
+	font-size: 1em;
  95
+	font-weight: 600;
  96
+	text-shadow: 0px 2px 0 #fff;
  97
+	margin: .25em 0 0 0;
  98
+}
  99
+
  100
+.account-chooser .modal {
  101
+	max-width: 600px;
  102
+	background: #f5f5f5;
  103
+	border: 1px solid #b8b8b8;
  104
+	-moz-box-shadow: 0 3px 10px rgba(0,0,0,.2);
  105
+	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,.2);
  106
+	box-shadow: 0 3px 10px rgba(0,0,0,.2);
  107
+	-webkit-border-radius: 4px;
  108
+	-moz-border-radius: 4px;
  109
+	border-radius: 4px;
  110
+	
  111
+	margin: 0 auto;
  112
+	position: relative;
  113
+	top: 20%;
  114
+}
  115
+
  116
+.account-chooser #accounts-select {
  117
+	width: 299px;
  118
+}
  119
+
  120
+@media only screen and (max-width: 601px) {
  121
+	.account-chooser .modal {
  122
+		max-width: 300px;
  123
+		overflow: hidden;
  124
+	}
  125
+	#modal-idpselection {
  126
+		display: none;
  127
+	}
  128
+}
  129
+
  130
+.account-chooser .modal .modal-header {
  131
+	background: #acc75a;
  132
+	border-bottom: 1px solid #efefef;
  133
+	-webkit-border-top-left-radius: 2px;
  134
+	-webkit-border-top-right-radius: 2px;
  135
+	-moz-border-radius-topleft: 2px;
  136
+	-moz-border-radius-topright: 2px;
  137
+	border-top-left-radius: 2px;
  138
+	border-top-right-radius: 2px;
  139
+	
  140
+	height: 55px;
  141
+	padding-left: 40px;
  142
+}
  143
+
  144
+.account-chooser .modal .modal-header > img {
  145
+	margin: 11px 0 12px 0;
  146
+}
  147
+
  148
+.account-chooser .modal .modal-header a {
  149
+	line-height: 0;
  150
+	position: absolute;
  151
+	top: 10px;
  152
+	right: 10px;
  153
+	width: 10px;
  154
+	height: 10px;
  155
+	opacity: .4;
  156
+}
  157
+
  158
+.account-chooser .modal .modal-header a:hover {
  159
+	opacity: .9;
  160
+}
  161
+
  162
+.account-chooser .modal .modal-header a:active {
  163
+	top: 11px;
  164
+	opacity: 1;
  165
+}
  166
+
  167
+.account-chooser h2 {
  168
+	color: #3d3d3d;
  169
+	
  170
+	font-size: .9em;
  171
+	font-weight: 600;
  172
+	padding: 0;
  173
+	margin: 15px 0;
  174
+}
  175
+
  176
+.account-chooser #accounts-select h2 {
  177
+	font-size: 1em;
  178
+	font-weight: 600;
  179
+	margin: 15px 0 10px 12px;
  180
+}
  181
+
  182
+.account-chooser .modal #modal-accountselection {
  183
+	float: left;
  184
+	height: 319px;
  185
+	width: 245px;
  186
+	padding: 0 27px;
  187
+}
  188
+
  189
+.account-chooser .modal #modal-accountselection ul {
  190
+	margin: 0;
  191
+	padding: 0;
  192
+	list-style: none;
  193
+}
  194
+
  195
+.account-chooser .modal #modal-accountselection ul li {
  196
+	position: relative;
  197
+}
  198
+
  199
+.account-chooser .modal #modal-accountselection ul li:hover a {
  200
+	display: block;
  201
+}
  202
+
  203
+.account-chooser .modal #modal-accountselection ul li a {
  204
+	display: none;
  205
+	line-height: 0;
  206
+	position: absolute;
  207
+	top: 0px;
  208
+	right: 0px;
  209
+	width: 10px;
  210
+	height: 10px;
  211
+	padding: 10px;
  212
+	opacity: .4;
  213
+}
  214
+
  215
+.account-chooser .modal #modal-accountselection ul li a:hover {
  216
+	opacity: .9;
  217
+}
  218
+
  219
+.account-chooser .modal #modal-accountselection ul li a:active {
  220
+	top: 1px;
  221
+}
  222
+
  223
+.account-chooser .modal #modal-accountselection ul li {
  224
+	display: block;
  225
+	min-height: 42px;
  226
+	margin: 0 0 5px 0;
  227
+	padding: 8px 12px;
  228
+	border: 1px solid transparent;
  229
+	cursor: pointer;
  230
+}
  231
+
  232
+.account-chooser .modal #modal-accountselection ul li:hover {
  233
+	background: #fff;
  234
+	border: 1px solid #d9d9d9;
  235
+}
  236
+
  237
+.account-chooser .modal #modal-accountselection ul li > img {
  238
+	float: left;
  239
+	margin-right: 15px;
  240
+	-webkit-border-radius: 2px;
  241
+	-moz-border-radius: 2px;
  242
+	border-radius: 2px;
  243
+}
  244
+
  245
+.account-chooser .modal #modal-accountselection ul li p {
  246
+	font-size: .7em;
  247
+	color: #6d6d6d;
  248
+	line-height: 1.35em;
  249
+	padding: .35em 0 0 0;
  250
+	margin: 0;
  251
+	overflow: hidden;
  252
+}
  253
+
  254
+.account-chooser .modal #modal-accountselection ul li p strong {
  255
+	display: block;
  256
+	font-size: 1.25em;
  257
+	font-weight: 600;
  258
+	color: #222;
  259
+}
  260
+
  261
+.account-chooser .modal #modal-accountselection #modal-signin-another {
  262
+	font-size: .72em;
  263
+	font-weight: 600;
  264
+	-moz-border-radius: 2px;
  265
+	-webkit-border-radius: 2px;
  266
+	border-radius: 2px;
  267
+	color: #fff;
  268
+	background-color: #5b5b5b;
  269
+	background-image: url("images/keyhole.png"), -moz-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5));
  270
+	background-image: url("images/keyhole.png"), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.1)), to(rgba(0,0,0,.5)));
  271
+	background-image: url("images/keyhole.png"), -webkit-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5)); 
  272
+	background-image: url("images/keyhole.png"), -o-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5));
  273
+	background-position: left center;
  274
+	background-repeat: no-repeat;
  275
+	border: 1px solid #4d4d4d;
  276
+	text-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  277
+	padding: .58em .975em .58em 2.6em;
  278
+	
  279
+	cursor: pointer;
  280
+	display: block;
  281
+	margin: 1.3em 13px 0 13px;
  282
+	text-decoration: none;
  283
+}
  284
+
  285
+.account-chooser .modal #modal-accountselection #modal-signin-another:hover {
  286
+	background-color: #6b6b6b;
  287
+	background-image: url("images/keyhole.png"), -moz-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5));
  288
+	background-image: url("images/keyhole.png"), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.1)), to(rgba(0,0,0,.5)));
  289
+	background-image: url("images/keyhole.png"), -webkit-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5)); 
  290
+	background-image: url("images/keyhole.png"), -o-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5));
  291
+	background-position: left center;
  292
+	background-repeat: no-repeat;
  293
+}
  294
+
  295
+.account-chooser .modal #modal-accountselection #modal-signin-another:active {
  296
+	background-color: #4b4b4b;
  297
+}
  298
+
  299
+.account-chooser .modal #modal-emailentry {
  300
+	border-right: 1px solid #ebebeb;
  301
+	
  302
+	float: left;
  303
+	height: 319px;
  304
+	width: 219px;
  305
+	padding: 0 40px;
  306
+}
  307
+
  308
+.account-chooser .modal #modal-emailentry {
  309
+	border-right: 1px solid #ebebeb;
  310
+	
  311
+	float: left;
  312
+	height: 319px;
  313
+	width: 219px;
  314
+	padding: 0 40px;
  315
+}
  316
+
  317
+.account-chooser .modal #modal-emailentry #modal-email {
  318
+	border: 1px solid #bbb;
  319
+	font-family: arial, sans-serif;
  320
+	
  321
+	display: block;
  322
+	min-width: 203px;
  323
+	font-size: .9em;
  324
+	padding: .4em 7px;
  325
+	margin: 0 0 12px 0;
  326
+	outline: none;
  327
+}
  328
+
  329
+.account-chooser .modal #modal-emailentry #modal-email:focus {
  330
+	border: 1px solid #4d4d4d;
  331
+}
  332
+
  333
+.account-chooser .modal #modal-emailentry #modal-signin {
  334
+	font-size: .72em;
  335
+	font-weight: 600;
  336
+	-moz-border-radius: 2px;
  337
+	-webkit-border-radius: 2px;
  338
+	border-radius: 2px;
  339
+	color: #fff;
  340
+	background-color: #5b5b5b;
  341
+	background-image: url("images/keyhole.png"), -moz-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5));
  342
+	background-image: url("images/keyhole.png"), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.1)), to(rgba(0,0,0,.5)));
  343
+	background-image: url("images/keyhole.png"), -webkit-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5)); 
  344
+	background-image: url("images/keyhole.png"), -o-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5));
  345
+	background-position: left center;
  346
+	background-repeat: no-repeat;
  347
+	border: 1px solid #4d4d4d;
  348
+	text-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  349
+	padding: .58em 1em .58em 2.6em;
  350
+	
  351
+	cursor: pointer;
  352
+	display: block;
  353
+	margin: 0;
  354
+	text-decoration: none;
  355
+}
  356
+
  357
+.account-chooser .modal #modal-emailentry #modal-signin:hover {
  358
+	background-color: #6b6b6b;
  359
+	background-image: url("images/keyhole.png"), -moz-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5));
  360
+	background-image: url("images/keyhole.png"), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.1)), to(rgba(0,0,0,.5)));
  361
+	background-image: url("images/keyhole.png"), -webkit-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5)); 
  362
+	background-image: url("images/keyhole.png"), -o-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.5));
  363
+	background-position: left center;
  364
+	background-repeat: no-repeat;
  365
+}
  366
+
  367
+.account-chooser .modal #modal-emailentry #modal-signin:active {
  368
+	background-color: #4b4b4b;
  369
+}
  370
+
  371
+.account-chooser .modal #modal-idpselection {
  372
+	float: left;
  373
+	height: 319px;
  374
+	width: 260px;
  375
+	padding-left: 40px;
  376
+}
  377
+
  378
+.account-chooser .modal #modal-idpselection ul {
  379
+	margin: 0;
  380
+	padding: 0;
  381
+	list-style: none;
  382
+	text-align: center;
  383
+}
  384
+
  385
+.account-chooser .modal #modal-idpselection ul li {
  386
+	background: #fff;
  387
+	border: 1px solid #d8d8d8;
  388
+	-moz-border-radius: 2px;
  389
+	-webkit-border-radius: 2px;
  390
+	border-radius: 2px;
  391
+	
  392
+	margin: 0 0 10px 0;
  393
+	padding: 0;
  394
+	width: 219px;
  395
+}
  396
+
  397
+.account-chooser .modal #modal-idpselection ul li:hover {
  398
+	position: relative;
  399
+	bottom: 1px;
  400
+	-moz-box-shadow: 0 2px 3px rgba(0,0,0,.07);
  401
+	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.07);
  402
+	box-shadow: 0 2px 3px rgba(0,0,0,.07);
  403
+} 
  404
+
  405
+.account-chooser .modal #modal-idpselection ul li:active {
  406
+	-moz-box-shadow: 0 1px 0px rgba(0,0,0,.05);
  407
+	-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.05);
  408
+	box-shadow: 0 1px 0px rgba(0,0,0,.05);
  409
+	top: 0;
  410
+}
  411
+
  412
+.account-chooser .modal #modal-idpselection ul li a {
  413
+	display: block;
  414
+	min-height: 50px;
  415
+	line-height: 47px;
  416
+}
  417
+
  418
+.account-chooser .modal #modal-idpselection ul li a img {
  419
+	vertical-align: middle;
  420
+}
  421
+
  422
+.account-chooser .modal #modal-idpselection ul .disabled-idp a img {opacity: .2;}
  423
+.account-chooser .modal #modal-idpselection ul .disabled-idp:hover a img {opacity: 1;}
  424
+.account-chooser .modal #modal-idpselection ul .enabled-idp {
  425
+	position: relative;
  426
+	bottom: 1px;
  427
+	-moz-box-shadow: 0 2px 3px rgba(0,0,0,.07);
  428
+	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.07);
  429
+	box-shadow: 0 2px 3px rgba(0,0,0,.07);
  430
+}
  431
+
  432
+.account-chooser .modal .modal-footer {
  433
+	color: #999;
  434
+	
  435
+	padding: 1.5em 40px;
  436
+	clear: both;
  437
+	font-size: .5em;
  438
+}
  439
+
  440
+.account-chooser .modal .modal-footer a {
  441
+	color: #1155cc;
  442
+}
BIN  assets/account chooser.psd
Binary file not shown
28  how.html
... ...
@@ -0,0 +1,28 @@
  1
+<!DOCTYPE html>
  2
+<html>
  3
+<head>
  4
+	<meta charset="utf-8">
  5
+	<title>Account Chooser | How it Works</title>
  6
+	<link rel="stylesheet" href="style.css">
  7
+</head>
  8
+<body>
  9
+	
  10
+<div class="header">
  11
+	<a href="index.html">
  12
+		<img src="images/keyhole-logo.png" alt="" />
  13
+		<h1>Account Chooser</h1>
  14
+	</a>
  15
+	<ul>
  16
+		<li><a href="index.html">Home</a></li>
  17
+		<li><a href="how.html" id="current-page">How it works</a></li>
  18
+		<li><a href="webowners.html">For website owners</a></li>
  19
+		<li><a href="idp.html">For identity providers</a></li>
  20
+	</ul>
  21
+</div>
  22
+
  23
+
  24
+
  25
+<div class="footer">&copy; 2011 OpenID Foundation.</div>
  26
+
  27
+</body>
  28
+</html>
28  idp.html
... ...
@@ -0,0 +1,28 @@
  1
+<!DOCTYPE html>
  2
+<html>
  3
+<head>
  4
+	<meta charset="utf-8">
  5
+	<title>Account Chooser | For Identity Providers</title>
  6
+	<link rel="stylesheet" href="style.css">
  7
+</head>
  8
+<body>
  9
+	
  10
+<div class="header">
  11
+	<a href="index.html">
  12
+		<img src="images/keyhole-logo.png" alt="" />
  13
+		<h1>Account Chooser</h1>
  14
+	</a>
  15
+	<ul>
  16
+		<li><a href="index.html">Home</a></li>
  17
+		<li><a href="how.html">How it works</a></li>
  18
+		<li><a href="webowners.html">For website owners</a></li>
  19
+		<li><a href="idp.html" id="current-page">For identity providers</a></li>
  20
+	</ul>
  21
+</div>
  22
+
  23
+
  24
+
  25
+<div class="footer">&copy; 2011 OpenID Foundation.</div>
  26
+
  27
+</body>
  28
+</html>
BIN  images/.DS_Store
Binary file not shown
BIN  images/background.gif
BIN  images/bonniep.jpg
BIN  images/bonniew.jpg
BIN  images/clyde.jpg
BIN  images/cursor.png
BIN  images/freeemail.png
BIN  images/keyhole-demo-icon.png
BIN  images/keyhole-logo.png
BIN  images/keyhole.png
BIN  images/loading.png
BIN  images/logo.png
BIN  images/myidp.png
BIN  images/point1.png
BIN  images/point2.png
BIN  images/point3.png
BIN  images/point4.png
BIN  images/point5.png
BIN  images/point6.png
BIN  images/simplymail.png
BIN  images/sitelogohere.png
BIN  images/socialnetwork.png
BIN  images/value1.png
BIN  images/value2.png
BIN  images/value3.png
BIN  images/x.png
228  index.html 100644 → 100755
... ...
@@ -1,77 +1,173 @@
1 1
 <!DOCTYPE html>
2 2
 <html>
3 3
 <head>
4  
-  <meta charset='utf-8'>
5  
-
6  
-  <title>ericsachs/ChooserV4 @ GitHub</title>
7  
-
8  
-  <style type="text/css">
9  
-    body {
10  
-      margin-top: 1.0em;
11  
-      background-color: #ddfc2a;
12  
-      font-family: Helvetica, Arial, FreeSans, san-serif;
13  
-      color: #000000;
14  
-    }
15  
-    #container {
16  
-      margin: 0 auto;
17  
-      width: 700px;
18  
-    }
19  
-    h1 { font-size: 3.8em; color: #2203d5; margin-bottom: 3px; }
20  
-    h1 .small { font-size: 0.4em; }
21  
-    h1 a { text-decoration: none }
22  
-    h2 { font-size: 1.5em; color: #2203d5; }
23  
-    h3 { text-align: center; color: #2203d5; }
24  
-    a { color: #2203d5; }
25  
-    .description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
26  
-    .download { float: right; }
27  
-    pre { background: #000; color: #fff; padding: 15px;}
28  
-    hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
29  
-    .footer { text-align:center; padding-top:30px; font-style: italic; }
30  
-  </style>
  4
+	<meta charset="utf-8">
  5
+	<title>Account Chooser</title>
  6
+	<link rel="stylesheet" href="style.css">
  7
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  8
+	<script src="script.js" type="text/javascript"></script>
  9
+	<script src="https://github.com/jeresig/jquery.hotkeys/raw/master/jquery.hotkeys.js"></script>
31 10
 </head>
32  
-
33 11
 <body>
34  
-  <a href="http://github.com/ericsachs/ChooserV4"><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>
35  
-
36  
-  <div id="container">
37  
-
38  
-    <div class="download">
39  
-      <a href="http://github.com/ericsachs/ChooserV4/zipball/master">
40  
-        <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a>
41  
-      <a href="http://github.com/ericsachs/ChooserV4/tarball/master">
42  
-        <img border="0" width="90" src="http://github.com/images/modules/download/tar.png"></a>
43  
-    </div>
44  
-
45  
-    <h1><a href="http://github.com/ericsachs/ChooserV4">ChooserV4</a>
46  
-      <span class="small">by <a href="http://github.com/ericsachs">ericsachs</a></span></h1>
47  
-
48  
-    <div class="description">
49  
-      ChooserV4
50  
-    </div>
51  
-
52  
-    <h2>Authors</h2>
53  
-<p>Eric Sachs (eric.sachs@gmail.com)
<br/>
<br/>      </p>
54  
-<h2>Contact</h2>
55  
-<p>Eric Sachs (eric.sachs@gmail.com)
<br/>      </p>
  12
+<ol id="slideshow-slides">
  13
+	<li id="help-text">Click on the slide numbers or use the arrow keys to navigate:</li>
  14
+	<li id="1" class="current-slide">1</li>
  15
+	<li id="2">2</li>
  16
+	<li id="3">3</li>
  17
+	<li id="4">4</li>
  18
+	<li id="5">5</li>
  19
+	<li id="close-everything">close</li>
  20
+</ol>	
  21
+<span id="cursor"><img src="images/cursor.png" alt=""></span>
  22
+	
  23
+<div class="account-chooser">
  24
+	<div class="modal-loading">
  25
+		<a href="#"><img src="images/x.png" alt="x" /></a>
  26
+		<img src="images/loading.png" alt="" />
  27
+		<h2>Signing in</h2>
  28
+	</div>
  29
+	<div class="modal">
  30
+		<div class="modal-header">
  31
+			<img src="images/logo.png" alt="" />
  32
+			<a href="#"><img src="images/x.png" alt="x" /></a>
  33
+		</div>
  34
+		<div id="modal-emailentry">
  35
+			<h2>Enter your email address</h2>
  36
+			<form id="email_entry" action="javascript: void(0)" method="post">
  37
+				<input type="text" name="email" id="modal-email" size="25" value="" /> 
  38
+				<input type="submit" name="signin" id="modal-signin" value="Sign in" />
  39
+			</form>
  40
+		</div>
  41
+		<div id="modal-idpselection">
  42
+			<h2>Sign in with</h2>
  43
+			<ul>
  44
+				<li><a href="#"><img src="images/myidp.png" alt="my idp" /></a></li>
  45
+				<li><a href="#"><img src="images/socialnetwork.png" alt="SocialNetwork" /></a></li>
  46
+				<li><a href="#"><img src="images/simplymail.png" alt="Simply, Mail." /></a></li>
  47
+				<li><a href="#"><img src="images/freeemail.png" alt="Free Email" /></a></li>
  48
+			</ul>
  49
+		</div>
  50
+		<div id="modal-accountselection">
  51
+			<h2>Sign in</h2>
  52
+			<ul>
  53
+				<li>
  54
+					<img src="images/bonniep.jpg" alt="" />
  55
+					<p><strong>Bonnie Parker</strong>bonnie.parker1234@gmail.com</p>
  56
+					<a href="#"><img src="images/x.png" alt="x" /></a>
  57
+				</li>
  58
+				<li>
  59
+					<img src="images/bonniew.jpg" alt="" />
  60
+					<p><strong>Bonnie Parker</strong>bonnie@bcgang.com</p>
  61
+					<a href="#"><img src="images/x.png" alt="x" /></a>
  62
+				</li>
  63
+				<li>
  64
+					<img src="images/clyde.jpg" alt="" />
  65
+					<p><strong>Clyde Barrow</strong>clyde_barrow123@yahoo.com</p>
  66
+					<a href="#"><img src="images/x.png" alt="x" /></a>
  67
+				</li>
  68
+			</ul>
  69
+			<input type="submit" name="signinanother" id="modal-signin-another" value="Sign in with another account" />
  70
+		</div>
  71
+		<div class="modal-footer">
  72
+			© 2011 OpenID Foundation. <a href="http://www.accountchooser.com/">Learn more about this</a>
  73
+		</div>
  74
+	</div>
  75
+</div>
  76
+	
  77
+<div class="header">
  78
+	<a href="#">
  79
+		<img src="images/keyhole-logo.png" alt="" />
  80
+		<h1>Account Chooser</h1>
  81
+	</a>
  82
+	<ul>
  83
+		<li><a href="#" id="current-page">Home</a></li>
  84
+		<li><a href="how.html">How it works</a></li>
  85
+		<li><a href="webowners.html">For website owners</a></li>
  86
+		<li><a href="idp.html">For identity providers</a></li>
  87
+	</ul>
  88
+</div>
56 89
 
  90
+<div class="pitch">
  91
+	<h2>An open standard and user interface guidelines for the next generation of web sign in.</h2>
  92
+	<div id="demo">
  93
+		<p>See a demo</p>
  94
+		<a href="#">
  95
+			<img src="images/keyhole-demo-icon.png" alt="" />
  96
+			<p>sign in</p>
  97
+		</a>
  98
+	</div>
  99
+</div>
57 100
 
58  
-    <h2>Download</h2>
59  
-    <p>
60  
-      You can download this project in either
61  
-      <a href="http://github.com/ericsachs/ChooserV4/zipball/master">zip</a> or
62  
-      <a href="http://github.com/ericsachs/ChooserV4/tarball/master">tar</a> formats.
63  
-    </p>
64  
-    <p>You can also clone the project with <a href="http://git-scm.com">Git</a>
65  
-      by running:
66  
-      <pre>$ git clone git://github.com/ericsachs/ChooserV4</pre>
67  
-    </p>
  101
+<div class="values">
  102
+	<div class="value1">
  103
+		<img src="images/value1.png" alt="" />
  104
+		<div class="proposition">
  105
+			<h3><a href="learnmore.html#simpleupgrade">Simple Upgrade</a></h3>
  106
+			<p>If a user has been logging into a website for a long time with a password, then the account chooser experience makes it easy for the website to upgrade them to use an identity provider.  After the website upgrades their login flow to use an account chooser, the user will either click a button or type their email address.  The user can then be redirected to an identity provider, and give their consent to be identified to the website. <a href="learnmore.html#simpleupgrade">Learn more</a></p>
  107
+		</div>
  108
+	</div>
  109
+	<div class="value2">
  110
+		<img src="images/value2.png" alt="" />
  111
+		<div class="proposition">
  112
+			<h3><a href="learnmore.html#easesswitching">Eases switching between multiple accounts.</a></h3>
  113
+			<p>Many computers are shared by multiple people who each of their own accounts. Many more are used to access multiple accounts used by the same person such as their personal and work accounts.  It is frustrating for end users to log into a traditional website where multiple accounts on the same computer are used. However if the website deploys an account chooser, then the process is much simpler.  The website can make it even more simpler by providing a navigation bar or button to let the user switch accounts. <a href="learnmore.html#easesswitching">Learn more</a></p>
  114
+		</div>
  115
+	</div>
  116
+	<div class="value3">
  117
+		<img src="images/value3.png" alt="" />
  118
+		<div class="proposition">
  119
+			<h3><a href="learnmore.html#reducessignuppains">Reduces signup pains on any website.</a></h3>
  120
+			<p>By deploying an account chooser on your website you should expect to increase sign up and log in rates on your websites, as well as reduce costs from hijacked accounts and users who have trouble logging into their account. <a href="learnmore.html#reducessignuppains">Learn more</a></p>
  121
+		</div>
  122
+	</div>
  123
+</div>
68 124
 
69  
-    <div class="footer">
70  
-      get the source code on GitHub : <a href="http://github.com/ericsachs/ChooserV4">ericsachs/ChooserV4</a>
71  
-    </div>
  125
+<div class="tertiary">
  126
+	<div class="point">
  127
+		<span id="point1"></span>
  128
+		<div class="point-content">
  129
+			<h4><a href="learnmore.html#security">Security</a></h4>
  130
+			<p>The use of identity providers not only makes it easier for people to use websites, but also makes their accounts more secure.  With traditional websites, people tend to reuse password across sites.  If hackers are able to compromise even a single website, they can then use that password to break into the person’s accounts on other websites.  Unless a user’s password is extremely complex, there are unfortunately very simple techniques, such as dictionary attacks, that hackers can use to identity a person’s password on almost any small to medium website.  Fortunately identity providers can be certified to confirm they offer protection against those types of techniques. <a href="learnmore.html#security">Learn more</a></p>
  131
+		</div>
  132
+	</div>
  133
+	<div class="point">
  134
+		<span id="point2"></span>
  135
+		<div class="point-content">
  136
+			<h4><a href="learnmore.html#consistency">Consistency</a></h4>
  137
+			<p>Websites can deploy the account chooser in a very visually consistent manner.  One a user has used this technique on one website, they will be able to easily recognize and use it on another website.  That visual recognition generally causes an increase in the set of users who are willing to log into a website they have never visited before. <a href="learnmore.html#consistency">Learn more</a></p>
  138
+		</div>
  139
+	</div>
  140
+	<div class="point">
  141
+		<span id="point3"></span>
  142
+		<div class="point-content">
  143
+			<h4><a href="learnmore.html#forgottenaccounts">Forgotten Accounts</a></h4>
  144
+			<p>One common problem end users encounter is when they visit a website and do not remember that they already have an account.  Generally they would try to go to the account creation step, and they would get an error about their existing account.  With the account chooser, this problem goes away.  They will either type their email or choose their identity provider.  In either case the website can then immediately log them in if they have an identity provider, or ask for their password if they don’t. <a href="learnmore.html#forgottenaccounts">Learn more</a></p>
  145
+		</div>
  146
+	</div>
  147
+	<div class="point">
  148
+		<span id="point4"></span>
  149
+		<div class="point-content">
  150
+			<h4><a href="learnmore.html#futurecompatability">Future Compatibility</a></h4>
  151
+			<p>Today there are a few identity providers, but in the future we expect many more.  A website could simply add buttons to its login box for 3-4 identity providers, but they could not add more without visually overwhelming users. The account chooser experience splits the process of adding an account from the process of signing into an account.  When the website shows a page to add an account, it can generally show 3-4 identity providers.  That list can be modified over time, and can even be varied based on information like the user’s location and preferred language. <a href="learnmore.html#futurecompatability">Learn more</a></p>
  152
+		</div>
  153
+	</div>
  154
+	<div class="point">
  155
+		<span id="point5"></span>
  156
+		<div class="point-content">
  157
+			<h4><a href="learnmore.html#legacycompatability">Legacy Compatibility</a></h4>
  158
+			<p>Most websites today offer a traditional login box with fields for a user’s email address and password.  The website could offer support for identity providers by simply adding buttons around the existing login box.  However that generally creates significant confusion for users because they think there are two ways to login, and they don’t know which one is the correct method to use.  This problem is greatly reduced by splitting the process of adding an account from the process of signing into an account.  It also avoids showing the password field to any users except those who absolutely need to use a password. <a href="learnmore.html#legacycompatability">Learn more</a></p>
  159
+		</div>
  160
+	</div>
  161
+	<div class="point">
  162
+		<span id="point6"></span>
  163
+		<div class="point-content">
  164
+			<h4><a href="learnmore.html#protocolagnostic">Protocol Agnostic</a></h4>
  165
+			<p>There are many technical protocols support by identity providers (OpenID v2, SAML, OAuth2, OpenIDConnect, etc.)  The Account Chooser is not specific to the protocol, and the website can even use different protocols to support different identity providers.  As protocols evolve in the future, the website can continue to use the Account Chooser experience to hide the protocol details from the user. <a href="learnmore.html#protocolagnostic">Learn more</a></p>
  166
+		</div>
  167
+	</div>
  168
+</div>
72 169
 
73  
-  </div>
  170
+<div class="footer">&copy; 2011 OpenID Foundation.</div>
74 171
 
75  
-  
76 172
 </body>
77  
-</html>
  173
+</html>
83  learnmore.html
... ...
@@ -0,0 +1,83 @@
  1
+<!DOCTYPE html>
  2
+<html>
  3
+<head>
  4
+	<meta charset="utf-8">
  5
+	<title>Account Chooser | Learn More</title>
  6
+	<link rel="stylesheet" href="style.css">
  7
+</head>
  8
+<body>
  9
+	
  10
+<div class="header">
  11
+	<a href="index.html">
  12
+		<img src="images/keyhole-logo.png" alt="" />
  13
+		<h1>Account Chooser</h1>
  14
+	</a>
  15
+	<ul>
  16
+		<li><a href="index.html">Home</a></li>
  17
+		<li><a href="how.html">How it works</a></li>
  18
+		<li><a href="webowners.html">For website owners</a></li>
  19
+		<li><a href="idp.html">For identity providers</a></li>
  20
+	</ul>
  21
+</div>
  22
+
  23
+<div class="values">
  24
+	<div class="value1">
  25
+		<div class="proposition" id="simpleupgrade">
  26
+			<h3>Simple Upgrade</h3>
  27
+			<p>If a user has been logging into a website for a long time with a password, then the account chooser experience makes it easy for the website to upgrade them to use an identity provider.  After the website upgrades their login flow to use an account chooser, the user will either click a button or type their email address.  The user can then be redirected to an identity provider, and give their consent to be identified to the website.<br /><br />If the identity provider is also the user’s email provider, then the website can simply log the user into their existing account.  It is generally not even necessary to show the user an extra page to explain what happened, though some websites might want to send an email message to the user (especially if the website has an iphone or Android app that will require the user to connect to their account at the website again).<br /><br />If the identity provider is not the user’s email provider, then the website needs to confirm that the same person controls the existing account on the website, and the account at the identity provider. There are some <a href="https://sites.google.com/site/oauthgoog/UXFedLogin/loginlogic">standard best practices</a> for that scenario.</p>
  28
+		</div>
  29
+	</div>
  30
+	<div class="value2">
  31
+		<div class="proposition" id="easesswitching">
  32
+			<h3>Eases switching between multiple accounts.</h3>
  33
+			<p>Many computers are shared by multiple people who each of their own accounts.  Many more are used to access multiple accounts used by the same person such as their personal and work accounts.  It is frustrating for end users to log into a traditional website where multiple accounts on the same computer are used.  However if the website deploys an account chooser, then the process is much simpler.  The website can make it even more simpler by providing a navigation bar or button to let the user switch accounts.<br /><br />One particularly tricky problem is when the different accounts on a computer use the same identity provider.  When users try to log into a website by simply clicking the button of an identity provider, they frequently get logged in use a different account than the one they wanted to use.  If they do not notice this fact, they can embarassas themselves (and the other account owner) by accidentally posting information to the wrong account.  Fortunately the account chooser solves this problem because the user clicks the specific account they want to use, instead of just the identity provider.  The website and identity provider can then make sure that the person uses that particular account.</p>
  34
+		</div>
  35
+	</div>
  36
+	<div class="value3">
  37
+		<div class="proposition" id="reducessignuppains">
  38
+			<h3>Reduces signup pains on any website.</h3>
  39
+			<p>The marketing team of a website generally considers the login page to be an important one to help attract new users.  However with a traditional website the same login page is shown both to existing users and new users.  With the account chooser, a website can detect if the computer is being used by someone who probably already has an account, because there will be an existing list of accounts.  In that case, the website can show different marketing material that is optimized to educate existing users about features of the website, instead of trying to attract new users.</p>
  40
+		</div>
  41
+	</div>
  42
+	<div class="value4">
  43
+		<div class="proposition" id="security">
  44
+			<h3>Security</h3>
  45
+			<p>The use of identity providers not only makes it easier for people to use websites, but also makes their accounts more secure.  With traditional websites, people tend to reuse password across sites.  If hackers are able to compromise even a single website, they can then use that password to break into the person’s accounts on other websites.  Unless a user’s password is extremely complex, there are unfortunately very simple techniques, such as dictionary attacks, that hackers can use to identity a person’s password on almost any small to medium website.  Fortunately identity providers can be certified to confirm they offer protection against those types of techniques.  Once a website upgrades a person’s account to use an identity provider, the website can simply delete the existing password it had for the user to minimize the threats of password reuse.  Though as noted above, if the identity provider is not the user’s email provider, then the website needs to confirm that the same person controls the existing account on the website, and the account at the identity provider.<br /><br />In addition, many identity providers offer users the ability to add more protection to their identity provider account, such as using multiple factors of authentication such as a one-time code send to the user’s phone number.  Identity providers also frequently have advanced systems in place to detect hijacked accounts, and suspend them until the real owner goes through an account recovery process.  During the time the account is suspended, the hijackers will be unable to log into websites where the user’s account is linked to this identity provider.</p>
  46
+		</div>
  47
+	</div>
  48
+	<div class="value5">
  49
+		<div class="proposition" id="consistency">
  50
+			<h3>Consistency</h3>
  51
+			<p>Websites can deploy the account chooser in a very visually consistent manner.  One a user has used this technique on one website, they will be able to easily recognize and use it on another website.  That visual recognition generally causes an increase in the set of users who are willing to log into a website they have never visited before.</p>
  52
+		</div>
  53
+	</div>
  54
+	<div class="value6">
  55
+		<div class="proposition" id="forgottenaccounts">
  56
+			<h3>Forgotten Accounts</h3>
  57
+			<p>One common problem end user’s encounter is when they visit a website and do not remember that they already have an account.  Generally they would try to go to the account creation step, and they would get an error about their existing account.  With the account chooser, this problem goes away.  They will either type their email or choose their identity provider.  In either case the website can then immediately log them in if they have an identity provider, or ask for their password if they don’t.</p>
  58
+		</div>
  59
+	</div>
  60
+	<div class="value7">
  61
+		<div class="proposition" id="futurecompatability">
  62
+			<h3>Future Compatibility</h3>
  63
+			<p>Today there are a few identity providers, but in the future we expect many more.  A website could simply add buttons to its login box for 3-4 identity providers, but they could not add more without visually overwhelming users.  In addition, if one of the identity providers became less popular (which has happened with some social networks and email providers) then it is very hard for the website to remove that button and replace it with a different identity provider.<br /><br />The account chooser experience splits the process of adding an account from the process of signing into an account.  When the website shows a page to add an account, it can generally show 3-4 identity providers.  That list can be modified over time, and can even be varied based on information like the user’s location and preferred language.  For example, if a user’s language is Russian, then the website might list one of the popular identity providers in Russia.  If a user’s location is in South Korea, then the website might list one of the popular identity providers in South Korea.<br /><br />If the user’s identity provider is not known, they still have the option to type their email address.  The website can then check its account database to see if there is a known identity provider for that account.  That can be especially helpful if the user cannot remember which identity provider they used at the site.  If there is not an identity provider associated with their account, it can then check if there is a known identity provider for that email domain.  If an identity provider still cannot be found, then the website can have the user login or sign up the traditional way with a password.</p>
  64
+		</div>
  65
+	</div>
  66
+	<div class="value8">
  67
+		<div class="proposition" id="legacycompatability">
  68
+			<h3>Legacy Compatibility</h3>
  69
+			<p>Most websites today offer a traditional login box with fields for a user’s email address and password.  The website could offer support for identity providers by simply adding buttons around the existing login box.  However that generally creates significant confusion for users because they think there are two ways to login, and they don’t know which one is the correct method to use.  This problem is greatly reduced by splitting the process of adding an account from the process of signing into an account.  It also avoids showing the password field to any users except those who absolutely need to use a password.</p>
  70
+		</div>
  71
+	</div>
  72
+	<div class="value9">
  73
+		<div class="proposition" id="protocolagnostic">
  74
+			<h3>Protocol Agnostic</h3>
  75
+			<p>There are many technical protocols support by identity providers (OpenID v2, SAML, OAuth2, OpenIDConnect, etc.)  The Account Chooser is not specific to the protocol, and the website can even use different protocols to support different identity providers.  As protocols evolve in the future, the website can continue to use the Account Chooser experience to hide the protocol details from the user.</p>
  76
+		</div>
  77
+	</div>
  78
+</div>
  79
+
  80
+<div class="footer">&copy; 2011 OpenID Foundation.</div>
  81
+
  82
+</body>
  83
+</html>
177  script.js
... ...
@@ -0,0 +1,177 @@
  1
+$(document).ready(function(){
  2
+	
  3
+	$('#demo a').click(function() {
  4
+		$('.account-chooser').toggle();
  5
+		$('#slideshow-slides').toggle();
  6
+	});
  7
+	
  8
+	$('#slideshow-slides #1').click(function() {
  9
+		$('.account-chooser .modal-loading').fadeOut();
  10
+		if (slideNumber() > 2) {
  11
+			animateModalOut(0);
  12
+			$('.account-chooser .modal #modal-accountselection').fadeOut(200, function() {
  13
+				$('.account-chooser .modal').attr('id','');
  14
+				$('.account-chooser .modal #modal-emailentry, .account-chooser .modal #modal-idpselection').fadeIn(0, function() {
  15
+					animateModalIn(200);
  16
+				});	
  17
+			});
  18
+		}
  19
+		slideNumber(1);
  20
+		$('#cursor').hide();
  21
+		resetCursor();
  22
+		resetInput();
  23
+	});
  24
+	
  25
+	$('#slideshow-slides #2').click(function() {
  26
+		$('.account-chooser .modal-loading').fadeOut();
  27
+		if (slideNumber() == 1) {}
  28
+		else if (slideNumber() > 2) {
  29
+			animateModalOut(0);
  30
+			$('.account-chooser .modal #modal-accountselection').fadeOut(200, function() {
  31
+				$('.account-chooser .modal').attr('id','');
  32
+				$('.account-chooser .modal #modal-emailentry, .account-chooser .modal #modal-idpselection').fadeIn(0, function() {
  33
+					animateModalIn(200);
  34
+				});	
  35
+			});
  36
+		}
  37
+		else {
  38
+			resetCursor();
  39
+			resetInput();
  40
+		}
  41
+		slideNumber(2);
  42
+		animateEmailEntry();
  43
+	});
  44
+	
  45
+	$('#slideshow-slides #3').click(function() {
  46
+		$('.account-chooser .modal-loading').fadeOut();
  47
+		resetCursor();
  48
+		resetAccountHover()
  49
+		$('#cursor').hide();
  50
+		if (slideNumber() != 3 && slideNumber() != 4) {
  51
+			animateModalOut(0);
  52
+			$('.account-chooser .modal #modal-emailentry, .account-chooser .modal #modal-idpselection').fadeOut(200, function() {
  53
+				$('.account-chooser .modal').attr('id','accounts-select');
  54
+				$('.account-chooser .modal #modal-accountselection').fadeIn(0, function() {
  55
+					animateModalIn(200);
  56
+				});	
  57
+			});
  58
+		}
  59
+		slideNumber(3);
  60
+	});
  61
+	
  62
+	$('#slideshow-slides #4').click(function() {
  63
+		$('.account-chooser .modal-loading').fadeOut();
  64
+		resetAccountHover()
  65
+		resetCursor();
  66
+		if (slideNumber() != 3 && slideNumber() != 4) {
  67
+			animateModalOut(0);
  68
+			$('.account-chooser .modal #modal-emailentry, .account-chooser .modal #modal-idpselection').fadeOut(200, function() {
  69
+				$('.account-chooser .modal').attr('id','accounts-select');
  70
+				$('.account-chooser .modal #modal-accountselection').fadeIn(0, function() {
  71
+					animateModalIn(200);
  72
+				});	
  73
+			});
  74
+		}
  75
+		slideNumber(4);
  76
+		animateAccountSelection()
  77
+	});	
  78
+	
  79
+	$('#slideshow-slides #5').click(function() {
  80
+		slideNumber(5);
  81
+		resetAccountHover();
  82
+		$('#cursor').hide();
  83
+		resetCursor();
  84
+		resetInput();
  85
+		animateModalOut(0);
  86
+		$('.account-chooser .modal-loading').animate({'opacity':'1'}).fadeIn();
  87
+	});
  88
+	
  89
+	$('#slideshow-slides #close-everything').click(function() {
  90
+		$('.account-chooser .modal-loading').fadeOut();
  91
+		if (slideNumber() > 2) {
  92
+			animateModalOut(0);
  93
+			$('.account-chooser .modal #modal-accountselection').fadeOut(200, function() {
  94
+				$('.account-chooser .modal').attr('id','');
  95
+				$('.account-chooser .modal #modal-emailentry, .account-chooser .modal #modal-idpselection').fadeIn(0, function() {
  96
+					animateModalIn(200);
  97
+				});	
  98
+			});
  99
+		}
  100
+		slideNumber(1);
  101
+		resetAccountHover();
  102
+		$('#cursor').hide();
  103
+		resetCursor();
  104
+		resetInput();
  105
+		$('.account-chooser').toggle();
  106
+		$('#slideshow-slides').toggle();
  107
+	});	
  108
+	
  109
+	$('html').bind('keydown', 'right', function(){
  110
+		var nextSlide = snumber + 1;
  111
+		if (nextSlide <= 5) {
  112
+			$('#slideshow-slides #' + nextSlide).click()
  113
+		}
  114
+	});
  115
+	
  116
+	$('html').bind('keydown', 'left', function(){
  117
+		var nextSlide = snumber - 1;
  118
+		if (nextSlide > 0) {
  119
+			$('#slideshow-slides #' + nextSlide).click()
  120
+		}
  121
+	});
  122
+	
  123
+	var snumber = 1;
  124
+	function slideNumber(num) {
  125
+		if (num) {
  126
+			$('#slideshow-slides #' + snumber).toggleClass('current-slide');
  127
+			$('#slideshow-slides #' + num).toggleClass('current-slide');
  128
+			snumber = num;
  129
+		}
  130
+		else {return snumber;}
  131
+	}
  132
+	
  133
+	function animateModalOut(delay) {
  134
+		$('.account-chooser .modal, .account-chooser .modal-loading').delay(delay).animate({'opacity' : '0'}, 200);
  135
+	}
  136
+	
  137
+	function animateModalIn(delay) {
  138
+		$('.account-chooser .modal, .account-chooser .modal-loading').delay(delay).animate({'opacity' : '1'}, 200);
  139
+	}
  140
+	
  141
+	function animateEmailEntry() {
  142
+		$('#cursor').show();
  143
+		$('#cursor img').animate({
  144
+		    top: '+=95px',
  145
+			left: '-=235px',
  146
+		  }, 500, function() {
  147
+			$('.account-chooser .modal #modal-emailentry #modal-email').attr('value', 'bonnie.parker1234@gmail.com');
  148
+		});
  149
+		$('#cursor img').delay(600).animate({top: '+=40px'}, 500);
  150
+	}
  151
+	
  152
+	function animateAccountSelection() {
  153
+		$('#cursor').show();
  154
+		$('#cursor img').animate({
  155
+		    top: '+=105px',
  156
+			left: '-=55px',
  157
+		  }, 500, function() {
  158
+			$('.account-chooser .modal #modal-accountselection ul li:first-child').addClass('hover');
  159
+		});
  160
+	}
  161
+	
  162
+	function resetAccountHover() {
  163
+		$('.account-chooser .modal #modal-accountselection ul li:first-child').removeClass('hover');
  164
+	}
  165
+	
  166
+	function resetCursor() {
  167
+		$('#cursor img').animate({
  168
+		    top: '20%',
  169
+			left: '0',
  170
+		  }, 500);
  171
+	}
  172
+	
  173
+	function resetInput() {
  174
+		$('.account-chooser .modal #modal-emailentry #modal-email').attr('value', '');
  175
+	}
  176
+	
  177
+});
821  style.css
... ...
@@ -0,0 +1,821 @@