Update the tour for access tokens and diffs.

screenshots/screenshots.js

@@ -1,7 +1,10 @@
+var width = 993;
+var height = 768;
+
 var casper = require('casper').create({
   viewportSize: {
-    width: 993,
-    height: 768
+    width: width,
+    height: height
   },
   verbose: true,
   logLevel: "debug"
@@ -15,8 +18,6 @@ var repo = isDebug ? 'complex' : 'r0';
 
 var outputDir = "screenshots/";
 
-casper.start(rootUrl);
-
 casper.on("remote.message", function(msg, trace) {
     this.echo("Message: " + msg, "DEBUG");
 });
@@ -25,12 +26,8 @@ casper.on("page.error", function(msg, trace) {
     this.echo("Page error: " + msg, "ERROR");
 });
 
-casper.then(function() {
-  this.capture(outputDir + 'landing.png');
-});
-
-casper.thenOpen(rootUrl + 'signin', function () {
-  this.fill('form', {
+casper.start(rootUrl + 'signin', function () {
+  this.fill('.form-signin', {
     'username': 'devtable',
     'password': isDebug ? 'password': 'C>K98%y"_=54x"<',
   }, true);
@@ -44,7 +41,7 @@ casper.then(function() {
   this.capture(outputDir + 'user-home.png');
 });
 
-casper.thenOpen(rootUrl + 'repository/devtable/' + repo, function() {
+casper.thenOpen(rootUrl + 'repository/devtable/' + repo + '?tag=v2.0', function() {
   // Wait for the tree to initialize.
   this.waitForSelector('.image-tree', function() {
     // Wait for the tree's animation to finish.
@@ -56,6 +53,17 @@ casper.then(function() {
   this.capture(outputDir + 'repo-view.png');
 });
 
+casper.thenClick('#current-image dd a', function() {
+  this.waitForSelector('.result-count', function() {
+    this.capture(outputDir + 'repo-changes.png', {
+      top: 0,
+      left: 0,
+      width: width,
+      height: height
+    });
+  });
+})
+
 casper.thenOpen(rootUrl + 'repository/devtable/' + repo + '/admin', function() {
   this.waitForSelector('.repo-access-state');
 });

static/partials/landing.html

@@ -121,17 +121,28 @@
       </div>
     </div>
   </div>
+
+  <div class="tour-section row">
+    <div class="col-md-7"><img src="/static/img/repo-changes.png" title="View Image - Quay" data-screenshot-url="https://quay.io/repository/devtable/image/..." class="img-responsive"></div>
+    <div class="col-md-5">
+      <div class="tour-section-title">Docker diff in the cloud</div>
+      <div class="tour-section-description">
+        We wanted to know what was changing in each image of our repositories just as much as you do. So we added diffs. Now you can see exactly which files were <b>added</b>, <b>changed</b>, or <b>removed</b> for each image. We've also provided two awesome ways to view your changes, either in a filterable list, or in a drill down tree view.
+      </div>
+    </div>
+  </div>
   
   <div class="tour-section row">
-    <div class="col-md-7"><img src="/static/img/repo-admin.png" title="Repository Admin - Quay" data-screenshot-url="https://quay.io/repository/devtable/complex/admin" class="img-responsive"></div>
-    <div class="col-md-5">
+    <div class="col-md-7 col-md-push-5"><img src="/static/img/repo-admin.png" title="Repository Admin - Quay" data-screenshot-url="https://quay.io/repository/devtable/complex/admin" class="img-responsive"></div>
+    <div class="col-md-5 col-md-pull-7">
       <div class="tour-section-title">Share at your control</div>
       <div class="tour-section-description">
         Share any repository with as many (or as few) users as you choose.
       </div>
-      <div class="tour-section-description">Want to share with the world? Make your repository public.</div>
-      <div class="tour-section-description">Need a repository only for your team? Share with your team members.</div>
-      <div class="tour-section-description">Need finer grain control? Mark a user as read-only or read/write.</div>
+      <div class="tour-section-description">Need a repository only for your team? Easily <b>share</b> with your team members.</div>
+      <div class="tour-section-description">Need finer grain control? Mark a user as <b>read-only</b> or <b>read/write</b>.</div>
+      <div class="tour-section-description">Have a build script or a deploy process that needs access? Generate an <b>access token</b> to grant revocable access for pushing or pulling.</div>
+      <div class="tour-section-description">Want to share with the world? Make your repository <b>fully public</b>.</div>
     </div>
   </div>
 </div>

static/partials/signin.html

@@ -13,8 +13,8 @@
           <div id="collapseSignin" class="panel-collapse collapse in">
             <div class="panel-body">
               <form class="form-signin" ng-submit="signin();">
-                <input type="text" class="form-control input-lg" placeholder="Username" ng-model="user.username" autofocus>
-                <input type="password" class="form-control input-lg" placeholder="Password" ng-model="user.password">
+                <input type="text" class="form-control input-lg" name="username" placeholder="Username" ng-model="user.username" autofocus>
+                <input type="password" class="form-control input-lg" name="password" placeholder="Password" ng-model="user.password">
                 <button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button>
 
                 <span class="social-alternate">