From 06806c97ddc73185401717583bb42a2ea657c1b9 Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Mon, 23 Dec 2013 15:04:52 -0500 Subject: [PATCH] New plans page --- static/css/quay.css | 155 +++++++++++++++++++++++++++++++++---- static/partials/plans.html | 109 +++++++++++++++++++++----- 2 files changed, 229 insertions(+), 35 deletions(-) diff --git a/static/css/quay.css b/static/css/quay.css index b0e981909..93af07091 100644 --- a/static/css/quay.css +++ b/static/css/quay.css @@ -662,42 +662,163 @@ i.toggle-icon:hover { .plans-list .plan { vertical-align: top; - - padding: 10px; - border: 1px solid #eee; - border-top: 4px solid #94C9F7; font-size: 1.4em; - margin-top: 5px; -} - -.plans-list .plan.business-plan { - border: 1px solid #eee; - border-top: 4px solid #94F794; } .plans-list .plan.bus-small { - border: 1px solid #ddd; - border-top: 4px solid #47A447; - margin-top: 0px; - font-size: 1.6em; + border-top: 6px solid #46ac39; + margin-top: -10px; +} + +.plans-list .plan.bus-small .plan-box { + background: black !important; } .plans-list .plan:last-child { margin-right: 0px; } +.plans-list .plan .plan-box { + background: #444; + padding: 10px; + color: white; +} + .plans-list .plan .plan-title { + text-transform: uppercase; + padding-top: 25px; + padding-bottom: 20px; margin-bottom: 10px; - display: block; font-weight: bold; + border-bottom: 1px solid #eee; +} + +.visible-sm-inline { + display: none; +} + +.hidden-sm-inline { + display: inline; +} + +@media (max-width: 991px) and (min-width: 768px) { + .visible-sm-inline { + display: inline; + } + + .hidden-sm-inline { + display: none; + } +} + +.plans-list .plan-box .description { + color: white; + margin-top: 6px; + font-size: 12px !important; +} + +.plans-list .plan button { + margin-top: 6px; + margin-bottom: 6px; +} + +.plans-list .plan.bus-small button { + font-size: 1em; +} + +.plans-list .features-bar { + padding-top: 248px; +} + +.plans-list .features-bar .feature .count { + padding: 10px; +} + +.plans-list .features-bar .feature { + height: 43px; + text-align: right; + white-space: nowrap; +} + +.plans-list .features-bar .feature .feature-tooltip { + border-bottom: 1px dotted black; + cursor: default; +} + +.plans-list .features-bar .feature i { + margin-left: 16px; + float: right; + width: 16px; + font-size: 16px; + text-align: center; + margin-top: 2px; +} + +.plans-list .plan .features { + padding: 6px; + background: #eee; + padding-bottom: 0px; +} + +.plans-list .plan .feature { + text-align: center; + padding: 10px; + border-bottom: 1px solid #ddd; + font-size: 14px; +} + +.plans-list .plan .feature:after { + content: ""; + border-radius: 50%; + display: inline-block; + width: 16px; + height: 16px; +} + +.plans-list .plan .visible-xs .feature { + text-align: left; +} + +.plans-list .plan .visible-xs .feature:after { + float: left; + margin-right: 10px; +} + +.plans-list .plan .feature.notpresent { + color: #ccc; +} + +.plans-list .plan .feature.present:after { + background: #428bca; +} + +.plans-list .plan.business-plan .feature.present:after { + background: #46ac39; +} + +.plans-list .plan .count, .plans-list .features-bar .count { + background: white; + border-bottom: 0px; + text-align: center !important; +} + +.plans-list .plan .count b, .plans-list .features-bar .count b { + font-size: 1.5em; + display: block; +} + +.plans-list .plan .feature:last-child { + border-bottom: 0px; +} + +.plans-list .plan-price { + margin-bottom: 10px; } .plan-price { - margin-bottom: 10px; display: block; font-weight: bold; font-size: 1.8em; - position: relative; } diff --git a/static/partials/plans.html b/static/partials/plans.html index ab90bd927..400c646c7 100644 --- a/static/partials/plans.html +++ b/static/partials/plans.html @@ -1,25 +1,98 @@
-
- Plans & Pricing -
- -
- All plans include unlimited public repositories and unlimited sharing. -
- All business plans include: organizations and teams with delegated access to the organization. -
-
-
-
+
+ + +
+
-
{{ plan.title }}
-
${{ plan.price/100 }}
-
{{ plan.privateRepos }} private repositories
-
{{ plan.audience }}
-
SSL secured connections
+
+
{{ plan.title }}
+
${{ plan.price/100 }}
+ +
{{ plan.audience }}
+
+ + + +
+
{{ plan.privateRepos }} private repositories
+
Unlimited Public Repositories
+
SSL Encryption
+
Robot accounts
+
Dockerfile Build
+
Teams
+
Logging
+
Invoice History
+
+ + ng-click="buyNow(plan.stripeId)">Start Free Trial +