Add a plans/pricing page

static/css/quay.css

@@ -1,3 +1,84 @@
+.plans .callout {
+  font-size: 2em;
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 30px;
+}
+
+.plans-list {
+  text-align: center;
+}
+
+.plans-list .plan {
+  width: 245px;
+  height: 260px;
+  vertical-align: top;
+
+  display: inline-block;
+  padding: 10px;
+  margin-right: 10px;
+  border: 1px solid #eee;
+  border-top: 4px solid #94C9F7;
+
+  margin-top: 10px;
+
+  font-size: 1.4em;
+}
+
+.plans-list .plan:last-child {
+  margin-right:  0px;
+}
+
+.plans-list .plan .plan-title {
+  margin-bottom: 10px;
+  display: block;
+  font-weight: bold;
+}
+
+.plan-price {
+  margin-bottom: 10px;
+  display: block;
+  font-weight: bold;
+  font-size: 1.8em;
+
+  position: relative;
+}
+
+.plan-price:after {
+  content: "/ month";
+  position: absolute;
+  bottom: 0px;
+  right: 20px;
+  font-size: 12px;
+  color: #aaa;  
+}
+
+.plans-list .plan .count {
+  margin-bottom: 10px;
+}
+
+.plans-list .plan .count b {
+  color: #428bca;
+}
+
+.plans-list .plan .description {
+  font-size: 1em;
+  font-size: 16px;
+  margin-bottom: 30px;
+}
+
+.plans-list .plan.focus {
+  border: 1px solid #ddd;
+  border-top: 4px solid #428bca;
+  margin-top: 0px;
+  font-size: 1.6em;
+  height: 270px;
+}
+
+.plans-list .plan button {
+
+}
+
 .loading {
   padding: 20px;
 }

static/js/app.js

@@ -74,6 +74,7 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment'], function($pro
       when('/repository/', {title: 'Repositories', templateUrl: '/static/partials/repo-list.html', controller: RepoListCtrl}).
       when('/user', {title: 'User Admin', templateUrl: '/static/partials/user-admin.html', controller: UserAdminCtrl}).
       when('/guide/', {title: 'Getting Started Guide', templateUrl: '/static/partials/guide.html', controller: GuideCtrl}).
+      when('/plans/', {title: 'Quay Plans', templateUrl: '/static/partials/plans.html', controller: PlansCtrl}).
       when('/', {title: 'Quay', templateUrl: '/static/partials/landing.html', controller: LandingCtrl}).
         otherwise({redirectTo: '/'});
   }]).

static/js/controllers.js

@@ -77,6 +77,20 @@ function HeaderCtrl($scope, UserService) {
   });
 }
 
+function PlansCtrl($scope, UserService) {
+  $scope.$watch( function () { return UserService.currentUser(); }, function (currentUser) {
+    $scope.user = currentUser;
+  }, true);
+
+  $scope.buyNow = function(plan) {
+    if ($scope.user && !$scope.user.anonymous) {
+      document.location = '#/user?plan=' + plan;
+    } else {
+      $('#signinModal').modal({});
+    }
+  };
+}
+
 function GuideCtrl($scope, Restangular) {
 }
 
@@ -439,7 +453,7 @@ function UserAdminCtrl($scope, Restangular) {
       stripeId: 'micro',
     },
     {
-      title: 'Small',
+      title: 'Basic',
       price: 1200,
       privateRepos: 10,
       stripeId: 'small',
@@ -542,4 +556,20 @@ function UserAdminCtrl($scope, Restangular) {
       $scope.planChanging = false;
     });
   };
+
+  // Show the subscribe dialog if a plan was requested.
+  if (location.hash.indexOf('?') >= 0) {
+      var query = location.hash.substr(1).split('?')[1];
+      var data = query.split("&");
+      for (var i = 0; i < data.length; i++) {
+          var item = data[i].split("=");
+          if (item[0] == 'plan') {
+              var planId = item[1];
+              if (planDict[planId]) {
+                  $scope.subscribe(planId);
+              }
+              break;
+          }
+      }
+  }
 }

static/partials/landing.html

@@ -4,7 +4,7 @@
   <div class="message-container" ng-show="user.anonymous">
     <div class="message">Secure hosting for <b>private</b> docker containers</div>
     <div class="sub-message">Use the docker images <b>your team</b> needs with the safety of <b>private</b> storage</div>
-    <div class="sellcall"><a href="">Starting at $7/mo</a></div>
+    <div class="sellcall"><a href="#/plans">Starting at $7/mo</a></div>
   </div>
 
   <div class="message-container" ng-show="!user.anonymous">
@@ -84,8 +84,7 @@
   <div class="footer-column">
     <h4>About</h4>
     <ul>
-      <li><a href="">Blog</a></li>
-      <li><a href="">About Us</a></li>
+      <li><a href="http://blog.devtable.com/">Blog</a></li>
     </ul>
   </div>
 
@@ -100,7 +99,7 @@
  <div class="footer-column">
     <h4>Support</h4>
     <ul>
-      <li><a href="">Contact Support</a></li>
+      <li><a href="mailto:support@quay.io">Contact Support</a></li>
       <li><a href="#/guide/">Getting Started Guide</a></li>
     </ul>
   </div>

static/partials/plans.html

@@ -0,0 +1,52 @@
+<div class="container plans">
+  <div class="callout">
+    Plans and Pricing
+  </div>
+
+  <div class="plans-list">
+    <div class="plan">
+      <div class="plan-title">Micro</div>
+      <div class="plan-price">$7</div>
+      <div class="count"><b>5</b> private repositories</div>
+      <div class="description">For smaller teams</div>
+
+      <button class="btn btn-primary btn-block" ng-click="buyNow('micro')">Buy Now</button>
+    </div>
+
+    <div class="plan focus">
+      <div class="plan-title">Basic</div>
+      <div class="plan-price">$12</div>
+      <div class="count"><b>10</b> private repositories</div>
+      <div class="description">For your basic team</div>      
+
+      <button class="btn btn-primary btn-block" ng-click="buyNow('small')">Buy Now</button>
+    </div>
+
+    <div class="plan">
+      <div class="plan-title">Medium</div>
+      <div class="plan-price">$22</div>
+      <div class="count"><b>20</b> private repositories</div>
+      <div class="description">For medium-sized teams</div>      
+
+      <button class="btn btn-primary btn-block" ng-click="buyNow('medium')">Buy Now</button>
+    </div>
+  </div>
+</div>
+
+  <!-- Modal message dialog -->
+  <div class="modal fade" id="signinModal">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          <h4 class="modal-title">Please Sign In</h4>
+        </div>
+        <div class="modal-body">
+          Please sign into Quay in order to continue
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        </div>
+      </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+  </div><!-- /.modal -->

static/partials/user-admin.html

@@ -11,13 +11,14 @@
     <div class="col-md-4" ng-repeat='plan in plans'>
       <div class="panel" ng-class="{'panel-success': subscription.plan == plan.stripeId, 'panel-default': subscription.plan != plan.stripeId}">
         <div class="panel-heading">
-          {{ plan.title }}
+	  {{ plan.title }}
           <span class="pull-right" ng-show="subscription.plan == plan.stripeId">
             <i class="icon-ok"></i>
             Subscribed
           </span>
         </div>
         <div class="panel-body panel-plan">
+          <div class="plan-price">${{ plan.price / 100 }}</div>
           <div class="plan-description"><b>{{ plan.privateRepos }}</b> Private Repositories</div>
           <button class="btn btn-primary" ng-hide="subscription" ng-click="subscribe(plan.stripeId)">Subscribe</button>
           <button class="btn" ng-show="subscription && (subscription.plan != plan.stripeId)" ng-click="changeSubscription(plan.stripeId)">Change</button>

templates/index.html

@@ -51,6 +51,7 @@
         <ul class="nav navbar-nav">
           <li><a ng-href="#/repository/">Repositories</a></li>
           <li><a ng-href="#/guide/">Getting Started Guide</a></li>
+          <li><a ng-href="#/plans/">Plans and Pricing</a></li>
         </ul>