diff --git a/browserid/app.js b/browserid/app.js
index d15177098832f7b4e9c0d516ab11875b7503f75c..d712890dd53a6391e58179556bed59e484547dbb 100644
--- a/browserid/app.js
+++ b/browserid/app.js
@@ -93,20 +93,16 @@ function router(app) {
res.render('prove.ejs', {title: 'Verify Email Address', fullpage: false});
});
- app.get(/^\/users(\.html)?$/, function(req,res) {
- res.render('users.ejs', {title: 'for Users', fullpage: false});
+ app.get(/^\/signup(\.html)?$/, function(req, res) {
+ res.render('signup.ejs', {title: 'Sign Up', fullpage: false});
});
- app.get(/^\/developers(\.html)?$/, function(req,res) {
- res.render('developers.ejs', {title: 'for Developers', fullpage: false});
+ app.get(/^\/signin(\.html)?$/, function(req, res) {
+ res.render('signin.ejs', {title: 'Sign In', fullpage: false});
});
- app.get(/^\/primaries(\.html)?$/, function(req,res) {
- res.render('primaries.ejs', {title: 'for Primary Authorities', fullpage: false});
- });
-
- app.get(/^\/manage(\.html)?$/, function(req,res) {
- res.render('manage.ejs', {title: 'My Account', fullpage: false});
+ app.get(/^\/about(\.html)?$/, function(req, res) {
+ res.render('about.ejs', {title: 'About', fullpage: false});
});
app.get(/^\/tos(\.html)?$/, function(req, res) {
diff --git a/browserid/static/css/github.css b/browserid/static/css/github.css
deleted file mode 100644
index 52bad17aa97504490e2de5750450aa7a0dcc711c..0000000000000000000000000000000000000000
--- a/browserid/static/css/github.css
+++ /dev/null
@@ -1,129 +0,0 @@
-/*
-
-github.com style (c) Vasily Polovnyov <vast@whiteants.net>
-
-*/
-
-pre code {
- display: block; padding: 0.5em;
- color: #000;
- background: #f1f1f1;
-}
-
-pre .comment,
-pre .template_comment,
-pre .diff .header,
-pre .javadoc {
- color: #998;
- font-style: italic
-}
-
-pre .keyword,
-pre .css .rule .keyword,
-pre .winutils,
-pre .javascript .title,
-pre .lisp .title,
-pre .subst {
- color: #000;
- font-weight: bold
-}
-
-pre .number,
-pre .hexcolor {
- color: #40a070
-}
-
-pre .string,
-pre .tag .value,
-pre .phpdoc,
-pre .tex .formula {
- color: #d14
-}
-
-pre .title,
-pre .id {
- color: #900;
- font-weight: bold
-}
-
-pre .javascript .title,
-pre .lisp .title,
-pre .subst {
- font-weight: normal
-}
-
-pre .class .title,
-pre .haskell .label,
-pre .tex .command {
- color: #458;
- font-weight: bold
-}
-
-pre .tag,
-pre .tag .title,
-pre .rules .property,
-pre .django .tag .keyword {
- color: #000080;
- font-weight: normal
-}
-
-pre .attribute,
-pre .variable,
-pre .instancevar,
-pre .lisp .body {
- color: #008080
-}
-
-pre .regexp {
- color: #009926
-}
-
-pre .class {
- color: #458;
- font-weight: bold
-}
-
-pre .symbol,
-pre .ruby .symbol .string,
-pre .ruby .symbol .keyword,
-pre .ruby .symbol .keymethods,
-pre .lisp .keyword,
-pre .tex .special,
-pre .input_number {
- color: #990073
-}
-
-pre .builtin,
-pre .built_in,
-pre .lisp .title {
- color: #0086b3
-}
-
-pre .preprocessor,
-pre .pi,
-pre .doctype,
-pre .shebang,
-pre .cdata {
- color: #999;
- font-weight: bold
-}
-
-pre .deletion {
- background: #fdd
-}
-
-pre .addition {
- background: #dfd
-}
-
-pre .diff .change {
- background: #0086b3
-}
-
-pre .chunk {
- color: #aaa
-}
-
-pre .tex .formula {
- opacity: 0.5;
-}
diff --git a/browserid/static/css/m.css b/browserid/static/css/m.css
new file mode 100644
index 0000000000000000000000000000000000000000..a4b9b6b9328246a5e85631d7e574c668338be1a2
--- /dev/null
+++ b/browserid/static/css/m.css
@@ -0,0 +1,210 @@
+body #wrapper {
+ width: 320px;
+}
+
+body hr {
+ width: 300px;
+}
+
+body #content {
+ padding: 122px 0 84px;
+ margin: 0 10px;
+}
+
+body #header {
+ padding: 20px 30px;
+}
+
+body #header ul.nav {
+ float: left;
+ width: 260px;
+ margin-top: 10px;
+}
+
+body #header ul.nav li {
+ margin: 0 1px 0 0;
+ text-align: center;
+}
+
+body #header ul.nav li:nth-child(1) {
+ width: 102px;
+}
+
+body #header ul.nav li:nth-child(2) {
+ width: 91px;
+}
+
+body #header ul.nav li:nth-child(3) {
+ width: 65px;
+ margin: 0;
+}
+
+body #header ul.nav li a {
+ padding: 3px 0;
+ background-color: #549FDC;
+ color: #fff;
+ display: block;
+
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -o-border-radius: 3px;
+ border-radius: 3px;
+}
+
+body #header ul.nav li:nth-child(1) a {
+
+ -webkit-border-radius: 3px 0 0 3px;
+ -moz-border-radius: 3px 0 0 3px;
+ -o-border-radius: 3px 0 0 3px;
+ border-radius: 3px 0 0 3px;
+}
+
+body #header ul.nav li:nth-child(2) a {
+ -webkit-border-radius: 0px;
+ -moz-border-radius: 0px;
+ -o-border-radius: 0px;
+ border-radius: 0px;
+}
+
+body #header ul.nav li:nth-child(3) a {
+ -webkit-border-radius: 0 3px 3px 0;
+ -moz-border-radius: 0 3px 3px 0;
+ -o-border-radius: 0 3px 3px 0;
+ border-radius: 0 3px 3px 0;
+}
+
+body #header ul.nav li a.signIn {
+ background-color: rgba(0,0,0,0.1);
+ color: #222;
+}
+
+body #header ul.nav li a:hover {
+ text-decoration: none;
+}
+
+body #signUp {
+ width: 320px;
+ padding: 0 10px;
+ font-size: 16px;
+ line-height: 21px;
+ margin: 122px 0 122px;
+}
+
+body #signUp p {
+ padding: 0 20px;
+}
+
+body #card {
+ width: 260px;
+ height: 80px;
+ background-position: center top;
+ background-size: 50%;
+ position: relative;
+ margin: 0 20px 20px;
+ top: auto;
+
+ -webkit-transition: none;
+ -moz-transition: none;
+ -o-transition: none;
+ transition: none;
+}
+
+body button.create {
+ font-size: 14px;
+ height: 28px;
+ padding: 0 12px;
+}
+
+body #card.insert {
+ background-position: center top;
+}
+
+body #card img {
+ display: none;
+}
+
+body #hint,
+body #status {
+ display: none;
+}
+
+body #legal {
+ padding: 20px;
+ text-align: left;
+}
+
+body #legal li {
+ list-style-position: inside;
+}
+
+body #about {
+ padding: 0;
+}
+
+body #about .video,
+body #about .video img {
+ width: 300px;
+ height: auto;
+}
+
+body .row {
+ padding: 20px 20px 0;
+ margin: 0;
+}
+
+body .row div {
+ width: auto;
+ height: auto;
+ vertical-align: inherit;
+ display: block;
+ padding: 20px 0;
+}
+
+body .row img {
+ float: none;
+ width: 260px;
+ height: auto;
+}
+
+body .row p {
+ float: none;
+ display: block;
+ width: 260px;
+ text-indent: -33px;
+ padding-left: 33px;
+}
+
+body #signUpFormWrap {
+ margin: 122px 10px 122px;
+}
+
+body #manage {
+ padding: 20px;
+ text-align: left;
+}
+
+body #manage .edit {
+ margin: 36px 0 14px;
+}
+
+body #manage #emails {
+ margin: 0 0 36px;
+}
+
+body #emails .email,
+body #emails .activity {
+ display: block;
+ width: 260px;
+}
+
+body #emails .activity span {
+ float: left;
+}
+
+body #disclaimer {
+ text-align: left;
+}
+
+body #footer {
+ padding: 20px 30px;
+}
diff --git a/browserid/static/css/style.css b/browserid/static/css/style.css
index 09e35763dae0f81c7167cd922978e807dbfff4d1..6cd4cf1663e90ec7843ecc716a06f41fed757e78 100644
--- a/browserid/static/css/style.css
+++ b/browserid/static/css/style.css
@@ -1,320 +1,774 @@
-@font-face {
- font-family: 'Shadows Into Light';
- font-style: normal;
+@import url("m.css") screen and (max-width: 640px);
+
+* {
+ margin: 0;
+ padding: 0;
+
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+html, body {
+ height: 100%;
+}
+
+body {
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-size: 13px;
+ line-height: 21px;
+ background-image: url('/i/bg.png');
+ overflow-y: scroll;
+}
+
+.sans {
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.serif {
+ font-family: 'Droid Serif', Georgia, serif;
+}
+
+.mono {
+ font-family: 'Monaco', monospace;
+}
+
+a {
+ color: #222;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+p:last-child {
+ margin-bottom: 0 !important;
+}
+
+button::-moz-focus-inner {
+ padding: 0;
+ border: 0
+}
+
+hr {
+ height: 1px;
+ border: none;
+ background-color: #eee;
+ width: 700px;
+}
+
+.right {
+ text-align: right;
+}
+
+#wrapper {
+ width: 700px;
+ min-height: 100%;
+ margin: 0 auto;
+ position: relative;
+}
+
+#content {
+ padding: 84px 0;
+}
+
+#about {
+ font-family: 'Droid Serif', Georgia, serif;
+ font-size: 14px;
+ line-height: 21px;
+ color: #444;
+
+ text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
+ padding: 0 0 50px 0;
+ background-color: #fff;
+
+ -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+ -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+ -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+
+ -webkit-border-radius: 0 0 5px 5px;
+ -moz-border-radius: 0 0 5px 5px;
+ -o-border-radius: 0 0 5px 5px;
+ border-radius: 0 0 5px 5px;
+}
+
+.video {
+ margin: 0 0 25px 0;
+ width: 700px;
+}
+
+.video img, .video iframe {
+ display: block;
+}
+
+.row {
+ margin: 0 0 25px 0;
+ padding: 25px 50px 0 50px;
+ position: relative;
+}
+
+.row:last-child {
+ margin: 0;
+}
+
+.row h2 {
+ font-size: 21px;
font-weight: normal;
- src: local('Shadows Into Light'), local('ShadowsIntoLight'), url('sil.ttf') format('truetype');
+ color: #222;
+ line-height: 32px;
+ display: inline-block;
+}
+
+.row div {
+ height: 140px;
+ width: 500px;
+ padding: 0 0 0 20px;
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.row p {
+ width: 380px;
+ text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
+ float: left;
+}
+
+.row img {
+ float: left;
+}
+
+.row button {
+ float: right;
+ display: inline-block;
+}
+
+.steps {
+ width: 24px;
+ height: 24px;
+ display: inline-block;
+ vertical-align: bottom;
+ margin-right: 5px;
+ background-image: url('/i/count.png');
+}
+
+.one .steps {
+ background-position: left 0;
+}
+
+.two .steps {
+ background-position: left -24px;
+}
+
+.three .steps {
+ background-position: left -48px;
+}
+
+#legal {
+ padding: 75px 125px;
+}
+
+#manage {
+ padding: 75px;
+}
+
+#legal, #manage {
+ text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
+ background-color: #fff;
+ text-align: justify;
+
+ -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+ -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+ -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -o-border-radius: 5px;
+ border-radius: 5px;
+}
+
+#legal p,
+#legal h2,
+#legal ul {
+ padding: 0 0 21px 0;
+}
+
+#legal li {
+ border-bottom: 1px solid #EEEEEE;
+ margin: 7px 0 0;
+ padding: 0 0 7px;
+ list-style-type: square;
+}
+
+#legal li:last-child {
+ border: none;
}
-@font-face {
- font-family: 'Tenor Sans';
- font-style: normal;
+#legal h2 {
+ font-size: 21px;
+ color: #222;
+}
+
+#legal h3 {
+ font-size: 18px;
+ color: #222;
+ padding: 49px 0 7px;
+}
+
+#legal h4 {
+ font-size: 14px;
+ margin: 14px 0 7px 0;
+ color: #222;
+}
+
+#legal h5,
+#legal strong {
+ font-size: 12px;
+ color: #666;
+}
+
+#legal p,
+#legal ul {
+ color: #666;
+}
+
+#legal h2,
+#legal h3 {
+ font-family: 'Droid Serif', Georgia, serif;
font-weight: normal;
- src: local('Tenor Sans'), local('TenorSans'), url('ts.ttf') format('truetype');
}
-body {
- padding: 0;
- margin: 0;
- font-size: 12px;
- font-family: 'Tenor Sans', arial, serif;
+#manage .edit {
+ margin: 72px 0 14px;
}
-header {
- border-top: 4px solid #333;
- background-color: #333;
- padding: 0 20% 0 20%;
- margin: 0;
- background: #008;
- height: 230px;
- color #fff;
- min-width: 800px;
+#manageAccounts,
+#cancelManage {
+ float: right;
+ display: inline-block;
+ text-align: center;
+ line-height: 21px;
+ font-weight: bold;
+ width: 48px;
+ font-size: 12px;
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ color: #fff;
+
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -o-border-radius: 5px;
+ border-radius: 5px;
}
-header.quarter {
- height: 50px;
+#manage .edit a:hover {
+ text-decoration: none;
}
-#labslogo {
- margin: auto;
- text-align: left;
- background: url("/i/labs-logo.png") 0 0 no-repeat;
- width: 161px;
- height: 34px;
- margin: 10px 0 0 110px;
- color: transparent;
- display: inline-block;
+#manageAccounts {
+ background-color: #37A6FF;
+ border: 1px solid #37A6FF;
+ text-shadow: -1px -1px 0 #37A6FF;
+ cursor: pointer;
+
+ -webkit-box-shadow: 0 0 0 1px #76C2FF inset;
+ -moz-box-shadow: 0 0 0 1px #76C2FF inset;
+ -o-box-shadow: 0 0 0 1px #76C2FF inset;
+ box-shadow: 0 0 0 1px #76C2FF inset;
+
+ background-image: -moz-linear-gradient(center top , #76C2FF 0pt, #37A6FF 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76C2FF), color-stop(100%, #37A6FF));
}
-.half h1 {
- padding-top: .2em;
- font-size: 3em;
- font-weight: bold;
- background: url("/i/browserid_logo.png") 0 0 no-repeat;
- width: 366px;
- height: 72px;
- margin: 43px auto 0 auto;
- clear: left;
- color: transparent;
+#cancelManage {
+ display: none;
+ background-color: #006EC6;
+ border: 1px solid #003E70;
+ color: #EEEEEE;
+ text-shadow: -1px -1px 0 #006EC6;
+
+ -webkit-box-shadow: 0 0 5px #003763 inset;
+ -moz-box-shadow: 0 0 5px #003763 inset;
+ -o-box-shadow: 0 0 5px #003763 inset;
+ box-shadow: 0 0 5px #003763 inset;
+
+ background-image: -moz-linear-gradient(center top , #3AA7FF 0%, #006EC6 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3AA7FF), color-stop(100%, #006EC6));
+}
+
+#manage #emailList {
+ list-style-type: none;
+ margin: 0 0 72px 0;
+ border-top: 1px solid #eee;
}
-.quarter h1 {
- float: left;
- width: 135px;
- height: 35px;
- margin: 7px 0 0 10px;
+#emailList li {
+ padding: 10px 0;
+ line-height: 24px;
+ border-bottom: 1px solid #eee;
+ overflow: hidden;
}
-.quarter h1 > a {
- color: transparent;
+#emailList .email,
+#emailList .activity {
+ display: inline-block;
+ float: left;
+ white-space: nowrap;
}
+#emailList .email {
+ width: 275px;
+}
-h2 {
- font-family: 'Shadows Into Light', arial, serif;
- font-size: 3em;
- font-weight: normal;
- color: #fff;
- margin: -4px auto 0 auto;
- text-align: center;
+#emailList .activity {
+ width: 275px;
+ color: #aaa;
+ text-align: right;
}
-.quarter h2 {
- font-size: 2em;
- margin: .2em 0 0 .5em;
- float: left;
+#emailList .activity button,
+#emailList .activity abbr {
+ float: right;
+ display: inline-block;
}
+#emailList .activity button {
+ width: 60px;
+ margin-left: 10px;
+ margin-right: -70px;
-header > #manageLink {
- float: right;
- background-color: #333;
- color: #fff;
- padding: 1px 10px 5px 10px;
- -webkit-border-radius: 0 0 10px 10px;
- -moz-border-radius: 0 0 10px 10px;
- border-radius: 0 0 10px 10px;
- display: none;
+ -webkit-transition: margin 0.4s ease;
+ -moz-transition: margin 0.4s ease;
+ -o-transition: margin 0.4s ease;
+ transition: margin 0.4s ease;
}
-.authenticated header > #manageLink {
- display: block;
+#emailList.remove .activity button {
+ margin-right: 0;
}
-header > #manageLink:hover {
- opacity:1;
- color: #AAA;
+button.delete {
+ background-color: #37A6FF;
+ height: 24px;
+ vertical-align: middle;
+ border: 1px solid #B13D3D;
+ font-size: 12px;
+ font-weight: bold;
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ color: #fff;
+ text-shadow: -1px -1px 0 #C84343;
+ cursor: pointer;
+
+ -webkit-box-shadow: 0 0 0 1px #EA7676 inset;
+ -moz-box-shadow: 0 0 0 1px #EA7676 inset;
+ -o-box-shadow: 0 0 0 1px #EA7676 inset;
+ box-shadow: 0 0 0 1px #EA7676 inset;
+
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -o-border-radius: 5px;
+ border-radius: 5px;
+
+ background-image: -moz-linear-gradient(center top , #EA7676 0pt, #C84343 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EA7676), color-stop(100%, #C84343));
}
-.why {
- width: 600px;
- height: 130px;
- padding: 10px 0;
- margin: 0 auto;
+button.delete:active {
+ background-color: #C84343;
+ border: 1px solid #672424;
+ color: #EEEEEE;
+ text-shadow: -1px -1px 0 #AA3D3D;
+
+ -webkit-box-shadow: 0 0 5px #003763 inset;
+ -moz-box-shadow: 0 0 5px #003763 inset;
+ -o-box-shadow: 0 0 5px #003763 inset;
+ box-shadow: 0 0 5px #003763 inset;
+
+ background-image: -moz-linear-gradient(center top , #C84343 0%, #AA3D3D 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C84343), color-stop(100%, #AA3D3D));
}
-.why p {
- font-size: 2em;
- text-align: center;
+#disclaimer {
+ color: #888;
+ text-align: right;
}
-.why a, #cancellink {
- color: #666;
- text-decoration: none;
- border-bottom: 1px dotted black;
+#disclaimer a {
+ color: #549FDC;
}
-.why a:hover {
- color: #000;
- opacity: 1;
+h1 {
+ font-size: 24px;
+ font-weight: normal;
+ text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
-a {
- color: #fff;
- text-decoration: none;
+#vAlign {
+ width: 700px;
+ display: table-cell;
+ vertical-align: middle;
+}
+
+#signUp {
+ margin: 122px 0;
+ width: 700px;
+ font-family: 'Droid Serif', Georgia, serif;
+ font-size: 24px;
+ line-height: 32px;
+ text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
+ position: relative;
+ padding: 0 0 0 250px;
}
-a:hover {
- opacity: .6;
+#signUp a {
+ color: #549FDC;
+ text-decoration: underline;
}
-footer {
- background-color: #F1F1F1;
- border-top: 2px solid #ddd;
- margin: 0;
- margin-top: 100px;
- padding: 0;
- height: 200px;
- font-size: 1.1em;
+#signUp p {
+ margin: 0 0 16px 0;
}
-footer > div {
- width: 800px;
- margin: auto;
+.create {
+ background-color: #37A6FF;
+ height: 32px;
+ padding: 0 16px;
+ vertical-align: middle;
+ border: 1px solid #37A6FF;
+ font-size: 16px;
+ font-family: 'Droid Serif', Georgia, serif;
+ color: #fff;
+ text-shadow: -1px -1px 0 #37A6FF;
+ cursor: pointer;
+
+ -webkit-box-shadow: 0 0 0 1px #76C2FF inset;
+ -moz-box-shadow: 0 0 0 1px #76C2FF inset;
+ -o-box-shadow: 0 0 0 1px #76C2FF inset;
+ box-shadow: 0 0 0 1px #76C2FF inset;
+
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -o-border-radius: 5px;
+ border-radius: 5px;
+
+ background-image: -moz-linear-gradient(center top , #76C2FF 0pt, #37A6FF 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76C2FF), color-stop(100%, #37A6FF));
}
-footer > div > div {
- width: 400px;
- padding: 10px;
+.create:active {
+ background-color: #006EC6;
+ border: 1px solid #003E70;
+ color: #EEEEEE;
+ text-shadow: -1px -1px 0 #006EC6;
+
+ -webkit-box-shadow: 0 0 5px #003763 inset;
+ -moz-box-shadow: 0 0 5px #003763 inset;
+ -o-box-shadow: 0 0 5px #003763 inset;
+ box-shadow: 0 0 5px #003763 inset;
+
+ background-image: -moz-linear-gradient(center top , #3AA7FF 0%, #006EC6 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3AA7FF), color-stop(100%, #006EC6));
}
-footer .right {
- padding-top: 13px;
- float: right;
+#card {
+ width: 200px;
+ height: 200px;
+ display: block;
+ position: absolute;
+ z-index: 1;
+ top: 50%;
+ left: 0;
+ margin-top: -100px;
+ background-image: url('/i/card.png');
+ background-position: 0px center;
+ background-repeat: no-repeat;
+
+ -webkit-transition: background-position 0.4s ease;
+ -moz-transition: background-position 0.4s ease;
+ -o-transition: background-position 0.4s ease;
+ transition: background-position 0.4s ease;
}
-footer .right img {
- margin-bottom: -5px;
+#card.insert {
+ background-position: 170px center;
}
-footer a {
- color: #666;
+#card img {
+ float: right;
}
-footer .right p {
- text-align: right;
+#status {
+ width: 6px;
+ height: 16px;
+ display: block;
+ position: absolute;
+ top: 50%;
+ margin-top: -13px;
+ left: 214px;
+ background-image: url('/i/blink.gif');
+ background-position: left center;
+ background-repeat: no-repeat;
+
+ -webkit-border-radius: 8px;
+ -moz-border-radius: 8px;
+ -o-border-radius: 8px;
+ border-radius: 8px;
+
+ -webkit-box-shadow: 0 0 4px #c15151;
+ -moz-box-shadow: 0 0 4px #c15151;
+ -o-box-shadow: 0 0 4px #c15151;
+ box-shadow: 0 0 4px #c15151;
}
-footer .copyright {
- font-weight: bold;
- font-size: .8em;
+#status.green {
+ background-position: right center;
+
+ -webkit-box-shadow: 0 0 4px #3bb421;
+ -moz-box-shadow: 0 0 4px #3bb421;
+ -o-box-shadow: 0 0 4px #3bb421;
+ box-shadow: 0 0 4px #3bb421;
}
-#steps {
- list-style: none;
- width: 800px;
- margin: 0 auto;
- padding: 0;
+#hint { /* put hints on rollover */
+ width: 200px;
+ height: 200px;
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ margin-top: -100px;
+ z-index: 0;
+ background-image: url('/i/hint.png');
+ background-repeat: no-repeat;
}
-#steps a {
- color: #666;
- text-decoration: none;
- border-bottom: 1px dotted #666;
+#hint.info{
+ background-position: left center;
}
-.step {
- margin: 1em 0 2em 0;
- padding: 0 0 0 50px;
- font-size: 14px;
- position: relative;
+#hint.signUp {
+ background-position: right center;
}
-.step .number {
- position: absolute;
- top: -5px;
- left: 0;
- font-family: 'Shadows Into Light', arial, serif;
- font-size: 4em;
- font-weight: bold;
- line-height: 1em;
+#signUpFormWrap {
+ margin: 122px 160px;
}
-.step > h3 {
- font-size: 1em;
- margin: 0;
- display: inline;
+#signUpFormWrap a.signUpIn {
+ color: #549FDC;
+ text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
-.step > pre {
- clear: both;
+#signUpFormWrap a.space {
+ margin: 10px 20px 0;
+ display: inline-block;
}
-.step > p, .step > ol {
- margin-left: 50px;
+#signUpForm {
+ padding: 20px;
+ background-color: rgba(0,0,0,0.035);
+
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -o-border-radius: 5px;
+ border-radius: 5px;
}
-.prose {
- font-size: 1.5em;
+#signUpForm ul {
+ margin: 20px 0;
+ list-style-type: none;
}
-.status {
- margin: 0 auto;
- width: 600px;
- font-size: 1.2em;
+#signUpForm li {
+ padding: 0 0 10px 0;
}
-pre code {
- padding: 10px 15px 10px 15px;
- margin: .75em;
- -webkit-border-radius: 10px;
- -moz-border-radius: 10px;
- border-radius: 10px 10px 10px 10px;
- width: 650px;
+#signUpForm label {
+ display: block;
+ color: #62615F;
+ text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}
-#emailList {
- font-size: 1.0em;
- width: 4x00px;
- margin: auto;
- font-weight:bold;
- margin-top:32px;
+#signUpForm label.half,
+.half {
+ width: 50%;
+ display: inline-block;
+ float: left;
}
-#cancelaccount {
- font-size: 1.0em;
- width: 500px;
- margin: auto;
- margin-top:35px;
+a.forgot {
+ color: #888784;
+ text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
+ font-size: 11px;
}
-.email {
- display:inline-block;
+#signUpForm .error {
+ margin-top: 20px;
+ color: red;
+ background-color: rgba(255,0,0,0.25);
+ padding: 5px;
+ line-height: 16px;
+
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -o-border-radius: 3px;
+ border-radius: 3px;
}
-.emailblock a {
- font-size:0.7em;
- color:#405090;
+
+#signUpForm .red {
+ color: red;
}
-.emailblock {
- border: 1px solid #ddd;
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
- background-color:#f0f0f0;
- width:500px;
- padding:8px;
- min-height:48px;
- margin:16px auto;
+
+#signUpForm input[type=text] {
+ width: 100%;
+ font-size: 14px;
+ padding: 5px;
+ border-width: 1px;
+ border-style: solid;
+ border-color: #A3A29D #C6C3B4 #C6C3B4 #A3A29D;
+ outline: none;
+
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -o-border-radius: 3px;
+ border-radius: 3px;
+
+ -webkit-box-shadow: 1px 1px 0 rgba(255,255,255,0.5);
+ -moz-box-shadow: 1px 1px 0 rgba(255,255,255,0.5);
+ -o-box-shadow: 1px 1px 0 rgba(255,255,255,0.5);
+ box-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}
-.meta {
- display:inline-block;
- float:right;
- font:8pt Arial;
+
+#signUpForm input[type=text]:focus {
+ border: 1px solid #549FDC;
+
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ -o-border-radius: 0;
+ border-radius: 0;
+
+ -webkit-box-shadow: 0 0 0 1px #549FDC inset;
+ -moz-box-shadow: 0 0 0 1px #549FDC inset;
+ -o-box-shadow: 0 0 0 1px #549FDC inset;
+ box-shadow: 0 0 0 1px #549FDC inset;
}
-.meta a {
- cursor:pointer;
+
+#signUpForm .submit {
+ height: 28px;
}
-.keyblock {
- font:8pt Arial;
+
+#signUpForm .remember {
+ display: inline-block;
+ line-height: 28px;
}
-.date {
- font:8pt Arial;
+
+#signUpForm .remember .checkAlign {
+ float: left;
}
-.buttonbox {
- height: 25px;
- width: 460px;
- margin: auto;
+#signUpForm .remember label {
+ margin-left: 5px;
+ float: left;
}
-.buttonbox > div {
- float: left;
- margin-right: 10px;
+
+#signUpForm .create {
+ font-size: 14px;
+ height: 28px;
+ padding: 0 10px;
+ float: right;
+}
+
+#header {
+ position: absolute;
+ top: 0;
+ font-weight: bold;
+}
+
+#header ul {
+ display: inline-block;
+}
+
+#header ul.nav {
+ float: right;
+}
+
+#header ul li {
+ display: inline-block;
+ float: left;
}
-.legal {
- font-size: 1.3em;
- width: 800px;
- margin: 0 auto;
+#header ul.nav li {
+ margin: 0 0 0 10px;
}
-.legal li {
- margin-bottom: 7px;
+#header a {
+ color: #222;
+}
+
+#header a.home {
+ width: 80px;
+ height: 21px;
+ background-image: url('/i/icon.png');
+ display: block;
+ background-position: left 4px;
+ background-repeat: no-repeat;
+}
+
+#header a.signIn {
+ background-color: rgba(0,0,0,0.1);
+ padding: 4px 8px;
+
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -o-border-radius: 3px;
+ border-radius: 3px;
+}
+
+#header a.signIn:hover {
+ background-color: rgba(0,0,0,0.25);
+ text-decoration: none;
+}
+
+#header,
+#footer {
+ display: block;
+ width: 100%;
+ padding: 20px 0;
+}
+
+#footer ul li {
+ display: inline-block;
+ float: left;
+ margin: 0 10px 0 0;
+}
+
+#footer {
+ position: absolute;
+ bottom: 0;
+ color: #aaa;
+}
+
+#footer a {
+ color: #aaa;
+}
+
+
+/* for floats */
+.cf:after {
+ content: ".";
+ display: block;
+ clear: both;
+ visibility: hidden;
+ line-height: 0;
+ height: 0;
}
-.legal h5 {
- margin-bottom: 1px;
- padding-bottom: 1px;
- line-height: 100%;
+html[xmlns] .cf {
+ display: block;
}
-.legal p {
- margin-top : 1px;
+* html .cf {
+ height: 1%;
}
diff --git a/browserid/static/i/bg.png b/browserid/static/i/bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..e367c9b811d0d8b191b19d756a666aaeef0aa02e
Binary files /dev/null and b/browserid/static/i/bg.png differ
diff --git a/browserid/static/i/blink.gif b/browserid/static/i/blink.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b0a5fbf3626cc6f2291a69b48393eb4256271e8f
Binary files /dev/null and b/browserid/static/i/blink.gif differ
diff --git a/browserid/static/i/browserid_logo.png b/browserid/static/i/browserid_logo.png
deleted file mode 100644
index b80d82f2880c2118e3f5c6860dc48e4099084600..0000000000000000000000000000000000000000
Binary files a/browserid/static/i/browserid_logo.png and /dev/null differ
diff --git a/browserid/static/i/card.png b/browserid/static/i/card.png
new file mode 100644
index 0000000000000000000000000000000000000000..eac93fc8481e85d226d934eaa30a2b3b4737837d
Binary files /dev/null and b/browserid/static/i/card.png differ
diff --git a/browserid/static/i/count.png b/browserid/static/i/count.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f031bd84fd4528f74782eb417fef154e3c7f811
Binary files /dev/null and b/browserid/static/i/count.png differ
diff --git a/browserid/static/i/developers.png b/browserid/static/i/developers.png
deleted file mode 100644
index 2ce054467eef5ae8dc937efa10167d3a344ffc71..0000000000000000000000000000000000000000
Binary files a/browserid/static/i/developers.png and /dev/null differ
diff --git a/browserid/static/i/hint.png b/browserid/static/i/hint.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ff8bf5314769e16ad6e44cbfa0f0839c321ab47
Binary files /dev/null and b/browserid/static/i/hint.png differ
diff --git a/browserid/static/i/icon.png b/browserid/static/i/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..68fb1e165c72824c3e74a7c6190ab2a5cb8e612c
Binary files /dev/null and b/browserid/static/i/icon.png differ
diff --git a/browserid/static/i/id.png b/browserid/static/i/id.png
deleted file mode 100644
index 8986681adfc3a44b16ab73df12cb24ed5e8be691..0000000000000000000000000000000000000000
Binary files a/browserid/static/i/id.png and /dev/null differ
diff --git a/browserid/static/i/labs-logo.png b/browserid/static/i/labs-logo.png
deleted file mode 100644
index 696c5d5d126202682d651c6a9ecf633d5b804703..0000000000000000000000000000000000000000
Binary files a/browserid/static/i/labs-logo.png and /dev/null differ
diff --git a/browserid/static/i/people.png b/browserid/static/i/people.png
deleted file mode 100644
index 9260e8edc9ec89be7a56d6ae3e98db28de49ded4..0000000000000000000000000000000000000000
Binary files a/browserid/static/i/people.png and /dev/null differ
diff --git a/browserid/static/i/slit.png b/browserid/static/i/slit.png
new file mode 100644
index 0000000000000000000000000000000000000000..f406cf593bd63bfd0e28e58f4d90dfa8fd8f7d37
Binary files /dev/null and b/browserid/static/i/slit.png differ
diff --git a/browserid/static/js/browserid.js b/browserid/static/js/browserid.js
index e3e9f1fa9e7f62b4febc4c483741e14eac2e46b6..04064ebfa72e5c2c46f26512fb1a3bf200b62800 100644
--- a/browserid/static/js/browserid.js
+++ b/browserid/static/js/browserid.js
@@ -35,14 +35,104 @@
* ***** END LICENSE BLOCK ***** */
$(function() {
+
+ if ($('#vAlign').length) {
+ $(window).bind('resize', function() { $('#vAlign').css({'height' : $(window).height() }); }).trigger('resize');
+ }
+
BrowserIDNetwork.checkAuth(function(authenticated) {
if (authenticated) {
- $("body").addClass("authenticated");
+ //$("body").addClass("authenticated");
if ($('#emailList').length) {
display_saved_ids();
}
}
});
+
+ _.mixin({
+ relative: function(date) {
+ var diff = (((new Date()).getTime() - date.getTime()) / 1000),
+ day_diff = Math.floor(diff / 86400),
+ dObj = { "friendly" : date.toLocaleDateString(),
+ "additional" : date.toLocaleTimeString(),
+ "utc" : date.toUTCString(),
+ "locale" : date.toLocaleString() };
+
+ /* some kind of error */
+ if (day_diff < 0) {
+ dObj.friendly = "in the future!?!";
+ return dObj;
+ } else if (isNaN(day_diff)) {
+ dObj.friendly = dObj.additional = "unknown";
+ return dObj;
+ }
+
+ if (day_diff === 0) {
+ if (diff < 60) {
+ dObj.friendly = "just now";
+ return dObj;
+ }
+ if (diff < 120 + 30) { /* 1 minute plus some fuzz */
+ dObj.friendly = "a minute ago";
+ return dObj;
+ }
+ if (diff < 3600) {
+ dObj.friendly = Math.floor(diff / 60) + " minutes ago";
+ return dObj;
+ }
+ if (diff < (60 * 60) * 2) {
+ dObj.friendly = "1 hour ago";
+ return dObj;
+ }
+ if (diff < 24 * 60 * 60) {
+ dObj.friendly = Math.floor(diff / 3600) + " hours ago";
+ return dObj;
+ }
+ }
+ if (day_diff === 1) {
+ dObj.friendly = "yesterday";
+ return dObj;
+ }
+ if (day_diff < 7) {
+ dObj.friendly = day_diff + " days ago";
+ return dObj;
+ }
+ if (day_diff < 8) {
+ dObj.friendly = "last week";
+ return dObj;
+ }
+ /* for this scope: we want day of week and the date
+ plus the month (if different) */
+ if (day_diff < 31) {
+ dObj.friendly = Math.ceil(day_diff / 7) + " weeks ago";
+ return dObj;
+ }
+
+ /* for this scope: we want month + date */
+ if (day_diff < 62) {
+ dObj.friendly = "a month ago";
+ return dObj;
+ }
+ if (day_diff < 365) {
+ dObj.friendly = Math.ceil(day_diff / 31) + " months ago";
+ return dObj;
+ }
+
+ /* for this scope: we want month + year */
+ if (day_diff >= 365 && day_diff < 730) {
+ dObj.additional = date.toLocaleDateString();
+ dObj.friendly = "a year ago";
+ return dObj;
+ }
+ if (day_diff >= 365) {
+ dObj.additional = date.toLocaleDateString();
+ dObj.friendly = Math.ceil(day_diff / 365) + " years ago";
+ return dObj;
+ }
+ return dObj;
+ }
+ });
+
});
function display_saved_ids()
@@ -50,11 +140,19 @@ function display_saved_ids()
var emails = {};
BrowserIDIdentities.syncIdentities(function() {
emails = getEmails();
- displayEmails();
+ if (_.isEmpty(emails)) {
+ console.log(emails);
+ $("#content").hide();
+ $("#vAlign").show();
+ } else {
+ $("#content").show();
+ $("#vAlign").hide();
+ displayEmails();
+ }
});
-
function displayEmails() {
+ // XXX: this is currently not displayed
$('#cancellink').click(function() {
if (confirm('Are you sure you want to cancel your account?')) {
BrowserIDNetwork.cancelUser(function() {
@@ -63,42 +161,35 @@ function display_saved_ids()
}
});
+ $('#manageAccounts').click(function() {
+ $('#emailList').addClass('remove');
+ $(this).hide();
+ $("#cancelManage").show();
+ });
+
+ $('#cancelManage').click(function() {
+ $('#emailList').removeClass('remove');
+ $(this).hide();
+ $("#manageAccounts").show();
+ });
+
$("#emailList").empty();
_(emails).each(function(data, e) {
- var block = $("<div>").addClass("emailblock");
- var label = $("<div>").addClass("email").text(e);
- var meta = $("<div>").addClass("meta");
-
- var pub = $("<div class='keyblock'>").text(data.pub);
- pub.hide();
- var linkblock = $("<div>");
- var puba = $("<a>").text("[show public key]");
- // var priva = $("<a>").text("[show private key]");
- puba.click(function() {pub.show()});
- // priva.click(function() {priv.show()});
- linkblock.append(puba);
- // linkblock.append(" / ");
- // linkblock.append(priva);
-
- var deauth = $("<button>").text("Forget this Email");
- meta.append(deauth);
- deauth.click(function() {
- // remove email from server
- BrowserIDNetwork.removeEmail(e, display_saved_ids);
- });
-
- var d = new Date(data.created);
- var datestamp = $("<div class='date'>").text("Signed in at " + d.toLocaleString());
+ var date = _.relative(new Date(data.created));
- meta.append(datestamp);
- meta.append(linkblock);
-
- block.append(label);
- block.append(meta);
- // block.append(priv);
- block.append(pub);
-
- $("#emailList").append(block);
+ $("<li class='identity cf'/>").append(
+ _.template("<div class='email'><%= email %></div>", { email : e }),
+ $("<div class='activity cf'/>").append(
+ $("<button class='delete'>remove</button>").click(function() {
+ if (confirm("Remove " + e + " from your BrowserID?")) {
+ // XXX this callback is not working as expected
+ BrowserIDNetwork.removeEmail(e, display_saved_ids);
+ }
+ }),
+ _.template("<abbr class='status' title='Registered: <%= created %>'>Registered <%= relative %></abbr>",
+ { relative: date.friendly, created : date.locale } )
+ )
+ ).appendTo($("#emailList"));
});
}
}
diff --git a/browserid/views/about.ejs b/browserid/views/about.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..165be9c6ff25a99552361f224c0789a9a1c33234
--- /dev/null
+++ b/browserid/views/about.ejs
@@ -0,0 +1,48 @@
+<div id="content">
+ <div id="about">
+
+ <div class="video">
+ <!-- <iframe width="700" height="300" src="https://www.youtube.com/embed/l0t9yDLAmFo" frameborder="0" allowfullscreen></iframe> -->
+ <img src="http://placehold.it/700x300/eee/ccc">
+ </div>
+
+ <div class="row cf">
+ <h2>Sign In. Simply.</h2>
+ <button class="create signIn">sign in</button> <!-- XXX: remove this button if user is signed in -->
+ </div>
+ <div class="row one cf">
+ <img src="http://placehold.it/200x140/eee/ccc">
+ <div>
+ <p><span class="steps"></span> Click the <em>BrowserID</em> ‘Sign In’ button.</p>
+ </div>
+ </div>
+
+ <hr>
+
+ <div class="row two cf">
+ <img src="http://placehold.it/200x140/eee/ccc">
+ <div>
+ <p><span class="steps"></span> Select your preferred Email.</p>
+ </div>
+
+ </div>
+
+ <hr>
+
+ <div class="row three cf">
+ <img src="http://placehold.it/200x140/eee/ccc">
+ <div>
+ <p><span class="steps"></span> No passwords necessary, you're done!</p>
+ </div>
+ </div>
+ </div>
+
+</div>
+
+<script type="text/javascript">
+ $(document).ready(function () {
+ $(".signIn").click(function () {
+ document.location = "/signin";
+ });
+ });
+</script>
diff --git a/browserid/views/developers.ejs b/browserid/views/developers.ejs
deleted file mode 100644
index 88deb4475b31ae10dc1aaede6cd662bbbd6ebe2a..0000000000000000000000000000000000000000
--- a/browserid/views/developers.ejs
+++ /dev/null
@@ -1,105 +0,0 @@
- <script src="js/highlight.js"></script>
- <script>hljs.initHighlightingOnLoad();</script>
- <div class="why">
- <p>
- BrowserID provides a <strong>simple</strong> and <strong>sophisticated</strong>
- sign-in process that your <strong>users will love</strong>. It can be
- integrated in three easy steps:
- </p>
- </div>
- <ol id="steps">
- <li class="step">
- <div class="number">1.</div>
- <h3>Enable BrowserID:</h3>
- Include the BrowserID JavaScript library in your site by adding a script tag to your <tt><head></tt>
-
- <pre><code><script src="https://browserid.org/include.js" type="text/javascript"></script></code></pre>
- </li>
- <li class="step">
- <div class="number">2.</div>
- <h3>Identify the User:</h3>
- Instead of displaying a form on your
- site which takes a username and password, use the BrowserID
- JavaScript API when the user clicks your sign-in button:
-<pre><code class="javascript">navigator.id.getVerifiedEmail(function(assertion) {
- if (assertion) {
- // This code will be invoked once the user has successfully
- // selected an email address they control to sign in with.
- } else {
- // something went wrong! the user isn't logged in.
- }
-});
-</code></pre>
- <p>
- Upon a successful sign-in, you'll be called back with
- an <i>assertion</i>, a string containing a signed claim that proves
- the user is who they say they are.
- </p>
- <p>
- <strong>NOTE:</strong> While completely optional, you might consider
- replacing your sign-in button with a pretty BrowserID button:
-
- <div class="buttonbox">
- <div><img src="i/sign_in_red.png"></div>
- <div><img src="i/sign_in_blue.png"></div>
- <div><img src="i/sign_in_orange.png"></div>
- <div><img src="i/sign_in_green.png"></div>
- <div><img src="i/sign_in_grey.png"></div>
- </div>
- </p>
- </li>
- <li class="step">
- <div class="number">3.</div>
- <h3>Verify the User's Identity:</h3>
- You must verify the <i>assertion</i>
- is authentic, and extract the user's email address from it.
- The easiest way to do these is to use the
- free verification service provided by BrowserID.
- <p>
- To use it, you send a request
- to <tt>https://browserid.org/verify</tt> with two POST parameters:
- </p>
- <ol>
- <li> <tt>assertion</tt>: The encoded assertion
- <li> <tt>audience</tt>: The hostname and optional port of your site
- </ol>
- <p>
- The verifier will check the the assertion was meant for your site and
- is valid, here's an example:
- </p>
- <pre><code>$ curl -d "assertion=<ASSERTION>&audience=mysite.com" "https://browserid.org/verify"
-{
- "status": "okay",
- "email": "lloyd@mozilla.com",
- "audience": "mysite.com",
- "valid-until": 1308859352261,
- "issuer": "browserid.org:443"
-}
-</pre></code>
- </p>
- <p>
- <strong>NOTE:</strong> You may choose to validate assertions on your own
- server. While a bit more complicated you can reduce your
- dependencies on others. Refer
- to <a href="https://wiki.mozilla.org/Identity/Verified_Email_Protocol">the
- specification</a> and the <a href="https://github.com/mozilla/browserid/tree/master/verifier">source for the reference
- validator</a>.
- </p>
- </li>
- <li class="step">
- <h3>Complete the sign in!</h3>
- Having completed the steps
- above, you can trust that the present user really owns the
- email address returned by the verifier. You don't need to
- perform any additional authentication unless you want to!
- From here, you can perform whatever post-authentication steps
- you like.
- </li>
- </ol>
- <div class="why">
- <p>
- You're done! <strong>Welcome to BrowserID!</strong> For more details, have a look at
- our <a href="http://myfavoritebeer.org/">demonstration</a>, and view
- <a href="https://github.com/lloyd/myfavoritebeer.org/">the code</a> behind it.
- </p>
- </div>
diff --git a/browserid/views/index.ejs b/browserid/views/index.ejs
index a12cdc093387756dd98259a4a794646b66e4224e..30474ac87812a786217c88db4296400af03f7b6b 100644
--- a/browserid/views/index.ejs
+++ b/browserid/views/index.ejs
@@ -1,12 +1,58 @@
- <div class="why">
- <img style="float: right;" src="i/people.png">
- <p>For <b>users</b>, BrowserID provides a <b>safer and easier</b> way to sign in. <a href="/users">How it works.</a></p>
+ <div id="content" style="display:none;">
+ <div id="manage">
+ <h1 class="serif">Account Manager</h1>
+ <div class="edit cf">
+ <strong>Your Accounts</strong>
+
+ <a id="manageAccounts" href="javascript:void(0);">edit</a>
+ <a id="cancelManage" href="javascript:void(0);">done</a>
+ </div>
+ <ul id="emailList">
+ <li class="cf">
+ <div class="email">me@andychung.ca</div>
+ <div class="activity cf">
+ <button class="delete">remove</button>
+ <span class="status">Last login at 15:55:57, 6/2/2011</span>
+ </div>
+ </li>
+ <li class="cf">
+ <div class="email">animalyouth@gmail.com</div>
+ <div class="activity cf">
+ <button class="delete">remove</button>
+ <span class="status">Last login at 8:34:31, 6/1/2011</span>
+ </div>
+ </li>
+ </ul>
+ <!-- <div id="disclaimer">You may, at any time, <a href="#">cancel your account</a></div> -->
+ </div>
</div>
- <div class="why">
- <img style="float: left;" src="i/developers.png">
- <p>For <b>developers</b>, BrowserID offers a world class sign-in experience with only a couple lines of code. <a href="developers">Get Started.</a></p>
- </div>
- <div class="why">
- <img style="float: right;" src="i/id.png">
- <p>For <b>identity providers</b>, BrowserID lets you give your users an identity they can <b>use everywhere</b>. <a href="primaries">Dig Deeper.</a> </p>
+
+ <div id="vAlign">
+ <div id="signUp">
+ <div id="card"><img src="/i/slit.png"></div>
+ <div id="hint"></div>
+ <div id="status"></div>
+
+ <p>Connect with <em>BrowserID</em>, the safest & easiest way to sign in.</p>
+ <p><a class="granted info" href="/about">Take the tour</a> or <button class="granted create">sign up</button></p>
+ </div>
</div>
+
+<script type="text/javascript">
+$(document).ready(function () {
+ $('.granted').hover(function() {
+ $('#card').toggleClass('insert');
+ $('#status').delay(400).toggleClass('green');
+ });
+
+ $('.create').hover(function() {
+ $('#hint').addClass('signUp').removeClass('info');
+ }).click(function () {
+ document.location = '/signup';
+ });
+
+ $('.info').hover(function() {
+ $('#hint').removeClass('signUp').addClass('info');
+ });
+});
+</script>
diff --git a/browserid/views/layout.ejs b/browserid/views/layout.ejs
index 969eaad11cb97cc519a42d03813aaa0181a9dc34..50df1e2dadcdfd9bf6edd0422e59c161a8ec2658 100644
--- a/browserid/views/layout.ejs
+++ b/browserid/views/layout.ejs
@@ -1,48 +1,54 @@
<!DOCTYPE html>
<html>
<head>
- <meta charset=utf-8">
+ <meta charset='utf-8'>
+ <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;">
<title><%- title %></title>
+
<% if (production) { %>
- <link rel="stylesheet" type="text/css" href="/css/browserid.min.css">
- <script src="/js/lib.min.js" type="text/javascript"></script>
+ <link rel="stylesheet" type="text/css" href="/css/browserid.min.css">
+ <script src="/js/lib.min.js" type="text/javascript"></script>
<% } else { %>
- <link rel="stylesheet" type="text/css" href="/css/github.css">
- <link rel="stylesheet" type="text/css" href="/css/style.css">
- <script src="/js/jquery-1.6.2.min.js" type="text/javascript"></script>
- <script src="/dialog/resources/storage.js" type="text/javascript"></script>
- <script src="/dialog/resources/browserid-network.js" type="text/javascript"></script>
- <script src="/dialog/resources/browserid-identities.js" type="text/javascript"></script>
- <script src="/dialog/resources/underscore-min.js" type="text/javascript"></script>
- <script src="/js/browserid.js" type="text/javascript"></script>
+ <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
+ <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
+
+ <script src="/js/jquery-1.6.2.min.js" type="text/javascript"></script>
+ <script src="/dialog/resources/storage.js" type="text/javascript"></script>
+ <script src="/dialog/resources/browserid-network.js" type="text/javascript"></script>
+ <script src="/dialog/resources/browserid-identities.js" type="text/javascript"></script>
+ <script src="/dialog/resources/underscore-min.js" type="text/javascript"></script>
+ <script src="/js/browserid.js" type="text/javascript"></script>
<% } %>
</head>
<body>
- <header class="<% if(fullpage) { %> half <% } else { %> quarter <% } %>">
- <a id="manageLink" href="manage">my account</a>
- <hgroup>
- <% if (fullpage) { %>
- <span id="labslogo">Mozilla Labs</span>
- <h1>BrowserID</h1>
- <h2>A better way to sign in.</h2>
- <% } else { %>
- <h1><a href="/"><img src="i/browserid_logo_lil.png">BrowserID</a></h1>
- <h2><%- title %></h2>
- <% } %>
- </hgroup>
- </header>
+
+<div id="wrapper">
+
+ <header id="header">
+ <ul class="cf">
+ <li><a class="home" href="/"></a></li>
+ </ul>
+ <ul class="nav cf">
+ <li><a href="/about">How it works</a></li>
+ <li><a href="https://github.com/mozilla/browserid/wiki/How-to-Use-BrowserID-on-Your-Site" target="_blank">Developers</a></li>
+
+ <li><a class="signIn" href="/signin">Sign In</a></li>
+ </ul>
+ </header>
+
<%- body %>
- <footer>
- <div>
- <div class="right">
- <p><img src="i/browserid_logo_sm.png"> is an <b>open source experiment</b><br />from the <a href="http://identity.mozilla.com">Identity Team</a> at
- <a href="https://mozillalabs.com">Mozilla Labs</a>.</p>
- </div>
- <div class="left">
- <p> <a href="https://github.com/mozilla/browserid">Code</a> <a href="http://lloyd.io/how-browserid-works">Documentation</a> <a href="https://lists.mozilla.org/listinfo/dev-identity">Mailing list</a> <a href="/privacy">Privacy</a> <a href="/tos">TOS</a> </p>
- <p class="copyright">Copyright © 2011 Mozilla. All rights reserved. </p>
- </div>
- </div>
- </footer>
+
+ <footer id="footer">
+ <ul class="cf">
+ <li>By the <a href="http://identity.mozilla.com">Identity Team</a> @ <a href="http://mozillalabs.com">Mozilla Labs</a></li>
+ <li>—</li>
+ <li><a href="/privacy">Privacy</a></li>
+ <li><a href="/tos">TOS</a></li>
+ <!--<li>Copyright © 2011 Mozilla. All rights reserved</li>-->
+ </ul>
+ </footer>
+
+</div>
+
</body>
</html>
diff --git a/browserid/views/manage.ejs b/browserid/views/manage.ejs
deleted file mode 100644
index f48ac42d97b917162a7bc7338a9795d4f5e8bcbf..0000000000000000000000000000000000000000
--- a/browserid/views/manage.ejs
+++ /dev/null
@@ -1,10 +0,0 @@
- <div class="why">
- <p>
- Manage your email addresses in BrowserID.
- </p>
- </div>
- <div id="emailList">
- </div>
- <div id="cancelaccount">
- You may, at any time, <a href="#" id="cancellink">cancel your account</a>.
- </div>
diff --git a/browserid/views/primaries.ejs b/browserid/views/primaries.ejs
deleted file mode 100644
index 93a1c4617310021b4a8f3cd311c53719c7858aa2..0000000000000000000000000000000000000000
--- a/browserid/views/primaries.ejs
+++ /dev/null
@@ -1,12 +0,0 @@
- <div class="why">
- <p>
- This page is dedicated to the <b>Identity Providers</b> who certify users' email addresses without requiring a mailback. These are dudes like Yahoo!, Google, Twitter, Facebook, and
- even github. If someone new wants to join they party, hey,
- they <a href="http://www.mozilla.org/about/manifesto">should
- be able to</a>.
- </p>
- <p>
- We'll have more information on this in the near future.
- </p>
- <br><br><br>
- </div>
diff --git a/browserid/views/privacy.ejs b/browserid/views/privacy.ejs
index e3fe25f0985484fd9af0f985a8391ee0632947dd..d775425d4e03fa54b4085287baa064a0de75188c 100644
--- a/browserid/views/privacy.ejs
+++ b/browserid/views/privacy.ejs
@@ -1,5 +1,6 @@
- <div class="legal">
- <h3>What You Should Know About Privacy & BrowserID</h3>
+<div id="content">
+ <div id="legal">
+ <h2>Privacy & BrowserID</h2>
<ul>
<li>We need your verified email address to register a BrowserID Account, but we don't ask for other personal information.</li>
@@ -88,3 +89,4 @@
</pre>
</blockquote>
</div>
+</div>
diff --git a/browserid/views/prove.ejs b/browserid/views/prove.ejs
index d3fdddbd3a142ba39bb5faea29332faae4ec3aa6..ef2d767fb8e552411e5eca4e50bfa94fd42dc907 100644
--- a/browserid/views/prove.ejs
+++ b/browserid/views/prove.ejs
@@ -1,3 +1,4 @@
+<div id="content">
<div class="why">
<p>
Email Verification
@@ -6,6 +7,7 @@
<div class="status">
One moment while we attempt to confirm your email address...
</div>
+</div>
<script>
function getParameterByName( name )
{
@@ -21,13 +23,11 @@ function getParameterByName( name )
function success() {
$("div.status").text("Address confirmed!");
- setTimeout(function() {
- $("body").fadeOut(1500, function() {
- // if the close didn't work, then let's redirect the the management page where they'll
- // get to see the ids that they've created.
- document.location = '/manage';
- });
- }, 1000);
+ $("body").delay(1000).fadeOut(1500, function() {
+ // if the close didn't work, then let's redirect the the main page where they'll
+ // get to see the ids that they've created.
+ document.location = '/';
+ });
}
function failure(why) {
diff --git a/browserid/views/signin.ejs b/browserid/views/signin.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..3eae1fd67069ae55d84b7a28f3618ddc78b5a2bf
--- /dev/null
+++ b/browserid/views/signin.ejs
@@ -0,0 +1,38 @@
+<div id="vAlign">
+ <div id="signUpFormWrap">
+ <!-- XXX this form submits to nowhere -->
+ <form id="signUpForm" class="cf">
+ <h1 class="serif">Sign In</h1>
+ <ul class="inputs">
+ <li>
+ <label class="serif" for="email">Email Address</label>
+ <input class="sans" id="email" placeholder="Your Email" type="text">
+ </li>
+ <li>
+ <label class="serif half" for="password">Password</label>
+ <div class="half right">
+ <!-- XXX: this needs to be fixed -->
+ <a class="forgot" href="/signup">forgot your password?</a>
+ </div>
+ <input class="sans" id="password" placeholder="Your Password" type="text">
+ </li>
+ </ul>
+ <div class="submit cf">
+ <div class="remember cf">
+ <div class="checkAlign">
+ <input id="memorize" type="checkbox">
+ </div>
+ <label for="memorize">remember me</label>
+ </div>
+ <input type="submit" class="create" value="Sign In"/>
+ </div>
+ </form>
+ <a class="signUpIn space" href="/signup">New to BrowserID? Sign up today.</a>
+ </div>
+</div>
+
+<script type="text/javascript">
+ $(document).ready(function () {
+ $('form input:visible:first').focus();
+ });
+</script>
diff --git a/browserid/views/signup.ejs b/browserid/views/signup.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..6207496ff024a94fb01934e27115e0e6c75bfc9e
--- /dev/null
+++ b/browserid/views/signup.ejs
@@ -0,0 +1,34 @@
+<div id="vAlign">
+ <div id="signUpFormWrap">
+ <!-- XXX this form submits to nowhere -->
+ <form id="signUpForm" class="cf">
+ <h1 class="serif">Create Account</h1>
+ <ul class="inputs">
+ <li>
+ <label class="serif" for="email">Email Address</label>
+ <input class="sans" id="email" placeholder="Your Email" type="text">
+ </li>
+ <li>
+ <label class="serif" for="password">New Password</label>
+ <input class="sans" id="password" placeholder="Enter a Password" type="text">
+ </li>
+ <li>
+ <label class="serif" for="vpassword">Verify Password</label>
+ <input class="sans" id="vpassword" placeholder="Repeat Password" type="text">
+ </li>
+ </ul>
+ <div class="submit cf">
+ <div class="remember cf">
+ <a class="signUpIn" href="/signin">Existing account? Sign in.</a>
+ </div>
+ <input type="submit" class="create" value="Create Account"/>
+ </div>
+ </form>
+ </div>
+</div>
+
+<script type="text/javascript">
+ $(document).ready(function () {
+ $('form input:visible:first').focus();
+ });
+</script>
diff --git a/browserid/views/tos.ejs b/browserid/views/tos.ejs
index 3a194fd99c4ead2cac5573015857d927edaa07b2..53bae5ecb4ceed9c3164dcacbb091e6d6f9f892c 100644
--- a/browserid/views/tos.ejs
+++ b/browserid/views/tos.ejs
@@ -1,5 +1,6 @@
-<div class="legal">
- <h3>Terms of Service — Overview</h3>
+<div id="content">
+ <div id="legal">
+ <h2>Terms of Service — Overview</h2>
<ul>
<li>
@@ -88,5 +89,5 @@
<h4>Miscellaneous</h4>
<p>This TOS constitutes the entire agreement between you and Mozilla Corporation (“Mozilla†or we) concerning the Services. These terms are governed by the laws of the state of California, U.S.A., excluding its conflict of law provisions. The United Nations Convention on Contracts for the International Sale of Goods is expressly disclaimed. If any portion of these terms is held to be invalid or unenforceable, the remaining portions will remain in full force and effect. In the event of a conflict between a translated version of these terms and the English language version, the English language version shall control.</p>
-
+ </div>
</div>
diff --git a/browserid/views/users.ejs b/browserid/views/users.ejs
deleted file mode 100644
index 97b25729dd23968bffd40153b97c3f1000f57e48..0000000000000000000000000000000000000000
--- a/browserid/views/users.ejs
+++ /dev/null
@@ -1,8 +0,0 @@
- <div class="why" style="height:500px;">
- <p>
- As a user of BrowserID, you confirm your email addresses once. Then, you can sign into any web site that supports BrowserID with just two clicks.
- </p>
-
- <center><iframe width="480" height="390" src="https://www.youtube.com/embed/l0t9yDLAmFo" frameborder="0" allowfullscreen></iframe></center>
-
- </div>