diff --git a/static/css/quay.css b/static/css/quay.css index ab085d01f..c60f258b6 100644 --- a/static/css/quay.css +++ b/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; } diff --git a/static/js/app.js b/static/js/app.js index a5194e3ce..9c286a4fa 100644 --- a/static/js/app.js +++ b/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: '/'}); }]). diff --git a/static/js/controllers.js b/static/js/controllers.js index 7b947f9b2..a2af08a9f 100644 --- a/static/js/controllers.js +++ b/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; + } + } + } } \ No newline at end of file diff --git a/static/partials/landing.html b/static/partials/landing.html index 120e0d34a..9a862f7d5 100644 --- a/static/partials/landing.html +++ b/static/partials/landing.html @@ -4,7 +4,7 @@
Secure hosting for private docker containers
Use the docker images your team needs with the safety of private storage
-
Starting at $7/mo
+
Starting at $7/mo
@@ -84,8 +84,7 @@ @@ -100,7 +99,7 @@ diff --git a/static/partials/plans.html b/static/partials/plans.html new file mode 100644 index 000000000..f39fed726 --- /dev/null +++ b/static/partials/plans.html @@ -0,0 +1,52 @@ +
+
+ Plans and Pricing +
+ +
+
+
Micro
+
$7
+
5 private repositories
+
For smaller teams
+ + +
+ +
+
Basic
+
$12
+
10 private repositories
+
For your basic team
+ + +
+ +
+
Medium
+
$22
+
20 private repositories
+
For medium-sized teams
+ + +
+
+
+ + + diff --git a/static/partials/user-admin.html b/static/partials/user-admin.html index 185aa2959..53fcb252b 100644 --- a/static/partials/user-admin.html +++ b/static/partials/user-admin.html @@ -11,13 +11,14 @@
- {{ plan.title }} + {{ plan.title }} Subscribed
+
${{ plan.price / 100 }}
{{ plan.privateRepos }} Private Repositories
diff --git a/templates/index.html b/templates/index.html index 335a7690c..f8aad7792 100644 --- a/templates/index.html +++ b/templates/index.html @@ -51,6 +51,7 @@