2
0

Retire version 2 of the site.

This commit is contained in:
Maarten Billemont 2012-06-07 00:27:04 +02:00
parent 679990dc4b
commit f796888901
44 changed files with 0 additions and 507 deletions

View File

@ -1,214 +0,0 @@
html {
background: url("../img/back-dark.png") center 0;
}
body {
padding: 0;
margin: 0;
color: white;
font: 120% Exo, sans-serif;
font-weight: 100;
}
h1, h2, h3, h4 {
text-shadow: #000 0 1px 1px;
color: #999;
font-weight: 600;
}
strong {
font-weight: 400;
}
h1 .sub {
font-size: 0.5em;
}
h1 {
font-size: 250%;
}
h2 {
color: #666;
font-size: inherit;
font-weight: 400;
}
p, blockquote, ul {
text-shadow: #FFF 0 -1px 1px, #CCC 0 0 3px;
}
p {
text-align: justify;
}
ul {
font-weight: 600;
font-size: 90%;
font-weight: 500;
}
blockquote {
font-weight: 600;
font-size: 90%;
font-weight: bold;
}
a, .link, :link {
color: inherit;
text-decoration: underline;
cursor: pointer;
font-weight: 500;
}
a:hover, .link:hover {
text-decoration: none;
}
label {
display: inline-block;
width: 15em;
}
/* Classes */
.stripe {
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.7);
border-width: 1px 0;
-webkit-box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(200, 200, 200, 0.5);
-moz-box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(200, 200, 200, 0.5);
box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(200, 200, 200, 0.5);
}
/* Page */
header {
position: relative;
z-index: 1;
width: 900px;
margin: 2em auto 0;
}
header h1 {
display: inline-block;
margin: 0;
color: inherit;
font-size: 150%;
}
header .logo {
height: 3em;
vertical-align: middle;
}
header .divider {
position: absolute;
width: 100%;
bottom: -90px;
}
footer {
clear: both;
padding: 1em 0;
color: #333;
text-shadow: #FFF 0 -1px 1px, #999 0 0 5px;
text-align: center;
font-size: 80%;
}
section {
background: url("../img/back-light.png") center 0;
-webkit-box-shadow: 2px 2px 2px #000, 0 0 50px #CCC, inset 0 0 50px #FFF;
-moz-box-shadow: 2px 2px 2px #000, 0 0 50px #AAA, inset 0 0 50px #FFF;
box-shadow: 1px 1px 4px #000, 0 0 200px #666;
border-radius: 5px;
border: 1px solid white;
color: black;
width: 900px;
margin: 0 auto;
padding: 2em;
}
#content section.current {
opacity: 1;
z-index: 1;
}
hr {
background: url("../img/Dividers/Simple.png") center center no-repeat;
border: none;
height: 5px;
}
blockquote {
margin-left: 5em;
}
blockquote:before {
content: "❝";
position: absolute;
margin: -0.5ex 0 0 -1em;
font-size: 300%;
font-weight: 200;
font-weight: 100;
}
/* Utilities */
.side {
float: right;
margin: 1em -10em 1em 1em;
}
.sidebox {
background: url("../img/Dividers/Divider_H.png") center bottom no-repeat;
position: relative;
z-index: 1;
float: right;
margin: 1em;
width: 546px;
text-align: center;
}
.sidebox .clip {
overflow: hidden;
position: relative;
z-index: 0;
}
.frontpage .sidebox {
margin-right: -100px;
}
.frontpage .sidebox .clip {
height: 416px;
margin-bottom: 84px;
}
.hoverShow {
display: none;
}
*:hover>.hoverShow {
display: inline-block;
}
section {
position: relative;
display: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
section.active {
display: block;
}
a.previous, a.next {
display: block;
position: absolute;
width: 100%;
margin: -2.5em 0 0 0;
font-size: 150%;
font-weight: 600;
text-decoration: none;
}
a.previous {
margin-left: -3em;
}
a.previous:before {
content: "< ";
}
a.next {
margin-left: 3em;
text-align: right;
}
a.next:after {
content: " >";
}
#frontpage .sidebox {
margin-top: -50px;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 222 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 257 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 KiB

View File

@ -1,214 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Master Password &mdash; Securing your online life.</title>
<link rel="icon" href="images/resources/favicon.png" type="image/x-png" />
<link rel="shortcut icon" href="images/resources/favicon.png" type="image/x-png" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Exo:100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic' />
<link rel="stylesheet" type="text/css" href="css/sprites/glossy-black/sprites.css" />
<link rel="stylesheet" type="text/css" href="css/sprites/silk/sprites.css" />
<link rel="stylesheet" type="text/css" href="css/screen.css" />
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<script type="text/javascript">
function navigateTo(section) {
$("section").removeClass("active");
if (section.length)
$("section." + section).addClass("active");
if (!$("section.active").length)
$("section.frontpage").addClass("active");
}
$(document).ready(function() {
navigateTo(document.location.hash.substring(1));
});
</script>
<script type="text/javascript" charset="utf-8">
var is_ssl = ("https:" == document.location.protocol);
var asset_host = is_ssl ? "https://d3rdqalhjaisuu.cloudfront.net/" : "http://d3rdqalhjaisuu.cloudfront.net/";
document.write(unescape("<script src='" + asset_host + "javascripts/feedback-v2.js' type='text/javascript'></script>"));
</script>
<script type="text/javascript" charset="utf-8">
var feedback_widget_options = {};
feedback_widget_options.display = "overlay";
feedback_widget_options.company = "lyndir";
feedback_widget_options.placement = "left";
feedback_widget_options.color = "#222";
feedback_widget_options.style = "question";
var feedback_widget = new GSFN.feedback_widget(feedback_widget_options);
</script>
</head>
<body>
<header>
<img class="logo" src="img/iTunesArtwork-Bare.png" />
<h1>Master Password</h1>
<div class="divider">
</div>
</header>
<section class="frontpage">
<a class="next" href="#about" onClick="navigateTo($(this).attr('href').substring(1));">What is this thing?</a>
<div class="sidebox">
<div class="clip">
<img src="img/MasterPassword_1.png" />
</div>
</div>
<h1>Stop worrying about <em>passwords</em></h1>
<h2>Memorising passwords or even saving them in our browser, an application or the cloud just isn't good enough.</h2>
<p>Master Password is a solution that <strong>voids the need to <em>keep</em> your passwords anywhere</strong>. Not in your head, not on your computer and not in the cloud. Nothing to store means nothing to lose. At the same time it makes sure that your accounts are adequately protected with <em>exclusive</em> passwords.</p>
<p>With Master Password, you <strong>remember <em>one</em> secure password</strong> and use that with the application to <strong>generate <em>any</em> password you might need</strong>. You could even generate PIN codes with it, if you wanted. Today, it's time to <em>stop worrying</em> about passwords and get on with what we need to get done.</p>
</section>
<section class="about">
<a class="previous" href="#frontpage" onClick="navigateTo($(this).attr('href').substring(1));">Front page</a>
<a class="next" href="#algorithm" onClick="navigateTo($(this).attr('href').substring(1));">How does it work?</a>
<h1>What is this?</h1>
<p>
Master Password is a revolution in password management.
</p>
<p>
It aims to secure your online (and offline!) life by changing the way you deal with passwords.
</p>
<hr />
<h1>Revolution? Why would I need that?</h1>
<p>
You already know the problem:<br />
Passwords are confidential information between you and a site. They should never be shared with anyone else, definitely not other sites. Yet that's exactly what happens with most of us: Hundereds of online accounts to manage and authenticate, we can't help but reuse one, two or five passwords that we can remember. Maybe we keep a paper stuck to our monitor with a list of passwords on them, because we realize the truth:
</p>
<blockquote>It is impossible to remember a secure password for each of our accounts and still keep those passwords both <em>exclusive</em> and <em>confidential</em>.</blockquote>
<p>
Multiple solutions exist:<br />
Sites that realize that passwords aren't the end-all of authentication usually implement some sort of alternative authentication mechanism: OpenID, SAML, some form of mobile authentication, secure tokens, etc.<br />
The problem here is that these solutions only work for the select few sites that have chosen to implement them; and then you, the user, are stuck with whatever mechanism the site has chosen for you.
</p>
<p>
To solve the problem for other sites, there are programs that remember our passwords for us.<br />
The problem with these is that they do not actually help us with setting exclusive and confidential passwords for our accounts. They just offload the work of remembering passwords, and at a great expense: If you lose your data, you lose your online identity and are locked out of everything.
</p>
<hr />
<h1>So, I guess you claim to do better?</h1>
<p>
Master Password aims to turn the tables in favor of the user, you.<br />
In the end, <em>what we really want</em> is a way of dealing with passwords in an exclusive and confidential way without having to remember them, and without running the risk of losing our online identity to fraudsters.
</p>
<p>
Master Password does exactly this. You remember a single master password. Make it a long and secure one. Master Password uses this password along with the name of the site that you want to log into and generates a secure but unique password for that site. What's more, it doesn't store this information anywhere. If you lose your phone, the thieves can get none the wiser from it. You kick yourself for losing your phone, pick up any other phone, start the application, enter your master password, and instantly have access to all your passwords again. No sync, no backups, no hassle.
</p>
<ul>
<li>Built with the highest security considerations in mind.</li>
<li>Designed with beauty, elegance, simplicity and usability in mind.</li>
<li>Different types of passwords can be generated to curb sites with strange password policies.</li>
<li>A password counter lets you generate a new password for a site in case it gets compromised.</li>
<li>Master password can be either:
<ul>
<li>Stored securely on the device (so you don't need to enter it anymore).</li>
<li>Not stored but remembered between sessions (so you only enter it once after powering on).</li>
<li>Not stored or remembered and required for every usage of the application (safest).</li>
</ul>
</li>
<li>For those cases where you cannot change your account's password, the application will encrypt passwords with your master password and store them securely (as explained, stored passwords can get lost).</li>
<li>Integrates with iCloud to synchronize and back up your site history and stored passwords.</li>
<li>For those that care to know, the password generation algorithm is open and documented within the application.</li>
</ul>
<hr />
<h1>OK, I'm convinced. Where do I get in?</h1>
<p>
Master Password is currently in beta.<br />
Anyone interested in joining the beta is invited to <a href="http://bit.ly/vNN5Zi">join the Lyndir TestFlight team</a>. Every so often new pending testers are admitted to the Master Password beta testers team.
</p>
<p>
Participation in the beta is free of charge, but does come with the expectation that you will contribute. Comment constructively, report issues and propose improvements.
</p>
<p>
Post-beta, Master Password is expected to sell for somewhere around 7 USD. The most helpful testers will receive the final version (and all future updates) free of charge.
</p>
</section>
<section class="algorithm">
<a class="previous" href="#about" onClick="navigateTo($(this).attr('href').substring(1));">What is this thing?</a>
<a class="next" href="https://github.com/Lyndir/MasterPassword">View the code</a>
<h1>So how does it work?</h1>
<p>
The theory behind Master Password is simple. The user remembers a single, secure password. The user only ever uses that password to log into the Master Password application. This master password is then used as a seed to generate a different password based on the name of the site to generate a password for.
</p>
<p>
The result is that each master password generates its own unique sequence of passwords for any site name. Since the only input data is the master password and the site name (along with a password counter, see below), there is no need for any kind of storage to recreate a site's password. All that's needed is the correct master password and the correct algorithm implementation. What that does for you is make it almost impossible to lose your passwords. It also makes it nearly impossible for hackers to steal your online identity.
</p>
<h1>The algorithm</h1>
<p>
Alright, let's describe the process in detail. This part will likely make sense to you only if you're well versed in computer security jargon. If you're the kind of person who likes to know how the clock ticks before deciding that it can be trusted to keep ticking, read on.
</p>
<p>
The user chooses a single master password, preferably sufficiently long to harden against brute-force attacks. When the user requests a password be generated for a site, the application composes a string consisting of the site name, the master password, and a password counter, delimited in that order by a dash character, and hashes those <code>UTF-8</code> bytes using the <code>SHA-1</code> algorithm. The bytes resulting from this hashing operation are called the <code>keyBytes</code> in the next steps.
</p>
<code><pre>
keyBytes = sha1( site name "-" master password "-" password counter )
</pre></code>
<p>
Next, we need the password type that the user has chosen to use for the site. Password types determine the
<q>cipher</q> that will be used to encrypt <code>keyBytes</code> into a readable password. For
instance, the standard password type <q>Long Password</q> activates one of three pre-set ciphers:
<code>CvcvCvcvnoCvcv</code>, <code>CvcvnoCvcvCvcv</code> or <code>CvcvCvcvCvcvno</code>. Which of those
will be used, depends on the first of the <code>keyBytes</code>. Take the byte value modulo the amount of
pre-set ciphers (in this case, three), and the result tells you which of the three ciphers to use.
</p>
<code><pre>
ciphers = [ "CvcvCvcvnoCvcv", "CvcvnoCvcvCvcv", "CvcvCvcvCvcvno" ]
cipher = ciphers[ keyBytes[0] % count( ciphers ) ]
</pre></code>
<p>
Now that we know what cipher to use for building our final password, all that's left is to iterate the
cipher, and produce a character of password output for each step. When you iterate the cipher (<code>i</code>), every
character in the cipher represents a set of possible output characters (<code>passChars</code>). For instance, a <code>C</code>
character in the cipher indicates that we need to choose a capital consonant character. An <code>o</code>
character in the cipher indicates that we need to choose an <q>other</q> (symbol) character. Exactly which
character to choose in that set for the password output depends on the next byte from <code>keyBytes</code>.
Like before, take the next unused <code>keyByte</code>'s byte value modulo the amount of characters in the
set of possible output characters for the cipher iteration and use the result to choose the output
character (<code>passChar</code>). Repeat until you've iterated the whole cipher.
</p>
<code><pre>
passChar = passChars[ keyBytes[i + 1] % count( passChars ) ]
passWord += passChar
</pre></code>
</section>
<footer>
Master Password is a security and productivity product by <a href="http://www.lyndir.com">Lyndir</a>, &copy; 2011.
</footer>
</body>
</html>

View File

@ -1,61 +0,0 @@
// jQuery plugin: PutCursorAtEnd 1.0
// http://plugins.jquery.com/project/PutCursorAtEnd
// by teedyay
//
// Puts the cursor at the end of a textbox/ textarea
// codesnippet: 691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4
(function($)
{
jQuery.fn.putCursorAtEnd = function()
{
return this.each(function()
{
$(this).focus()
// If this function exists...
if (this.setSelectionRange)
{
// ... then use it
// (Doesn't work in IE)
// Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
var len = $(this).val().length * 2;
this.setSelectionRange(len, len);
}
else
{
// ... otherwise replace the contents with itself
// (Doesn't work in Google Chrome)
$(this).val($(this).val());
}
// Scroll to the bottom, in case we're in a tall textarea
// (Necessary for Firefox and Google Chrome)
this.scrollTop = 999999;
});
};
})(jQuery);
// Show the content element referenced by the document's hash
function updateHash() {
var hashContent = document.location.hash.split('/', 1)[0];
var foundCurrent = false;
var contentElement = $(hashContent + "-content");
if (contentElement.size() != 1)
contentElement = $("#about-content");
$("#content section").each(function (i) {
if (foundCurrent)
this.className = "future";
else {
if (this.id == contentElement.attr("id")) {
foundCurrent = true;
this.className = "current";
} else
this.className = "past";
}
});
}

File diff suppressed because one or more lines are too long

View File

Before

Width:  |  Height:  |  Size: 322 KiB

After

Width:  |  Height:  |  Size: 322 KiB

View File

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

View File

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

View File

Before

Width:  |  Height:  |  Size: 697 B

After

Width:  |  Height:  |  Size: 697 B

View File

Before

Width:  |  Height:  |  Size: 376 KiB

After

Width:  |  Height:  |  Size: 376 KiB

View File

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

View File

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

View File

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

Before

Width:  |  Height:  |  Size: 189 KiB

After

Width:  |  Height:  |  Size: 189 KiB

View File

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

View File

Before

Width:  |  Height:  |  Size: 109 KiB

After

Width:  |  Height:  |  Size: 109 KiB

View File

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

View File

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

View File

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View File

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

View File

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View File

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View File

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB