New plans page
This commit is contained in:
Joseph Schorr
parent
7e42915755
commit
06806c97dd
2 changed files with 229 additions and 35 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,25 +1,98 @@
|
|||
<div class="container plans content-container">
|
||||
<div class="callout">
|
||||
Plans & Pricing
|
||||
</div>
|
||||
|
||||
<div class="all-plans">
|
||||
All plans include <span class="feature">unlimited public repositories</span> and <span class="feature">unlimited sharing</span>.
|
||||
<br>
|
||||
All business plans include: <span class="business-feature">organizations</span> and <span class="business-feature">teams</span> with <span class="business-feature">delegated access</span> to the organization.
|
||||
</div>
|
||||
|
||||
<div class="row plans-list">
|
||||
<div class="col-xs-0 col-lg-1"></div>
|
||||
<div class="col-lg-2 col-xs-4 plan-container" ng-repeat="plan in plans" ng-show="plan.price > 0 && !plan.deprecated">
|
||||
<div class="col-sm-2">
|
||||
<div class="features-bar hidden-xs">
|
||||
<div class="visible-lg" style="height: 44px"></div>
|
||||
<div class="visible-md" style="height: 62px"></div>
|
||||
<div class="visible-sm" style="height: 86px"></div>
|
||||
|
||||
<div class="feature">
|
||||
<span class="feature-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
|
||||
title="All plans have unlimited public repositories">
|
||||
<span class="hidden-sm-inline">Public Repositories</span>
|
||||
<span class="visible-sm-inline">Public Repos</span>
|
||||
</span>
|
||||
<i class="fa fa-hdd visible-lg"></i>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<span class="feature-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
|
||||
title="SSL encryption is enabled end-to-end for all operations">
|
||||
SSL Encryption
|
||||
</span>
|
||||
<i class="fa fa-lock visible-lg"></i>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<span class="feature-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
|
||||
title="Allows users or organizations to grant permissions in multiple repositories to the same non-login-capable account">
|
||||
Robot accounts
|
||||
</span>
|
||||
<i class="fa fa-wrench visible-lg"></i>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<span class="feature-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
|
||||
title="Repository images can be built directly from Dockerfiles">
|
||||
Dockerfile Build
|
||||
</span>
|
||||
<i class="fa fa-upload visible-lg"></i>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<span class="feature-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
|
||||
title="Grant subsets of users in an organization their own permissions, either on a global basis or a per-repository basis">
|
||||
Teams
|
||||
</span>
|
||||
<i class="fa fa-group visible-lg"></i>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<span class="feature-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
|
||||
title="Every action take within an organization is logged in detail, with the ability to visualize logs and download them">
|
||||
Logging
|
||||
</span>
|
||||
<i class="fa fa-bar-chart-o visible-lg"></i>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<span class="feature-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
|
||||
title="Administrators can view and download the full invoice history for their organization">
|
||||
Invoice History
|
||||
</span>
|
||||
<i class="fa fa-calendar visible-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-sm-2 plan-container" ng-repeat="plan in plans" ng-show="plan.price > 0 && !plan.deprecated">
|
||||
<div class="plan" ng-class="plan.stripeId + ' ' + (plan.bus_features ? 'business-plan' : '')">
|
||||
<div class="plan-title">{{ plan.title }}</div>
|
||||
<div class="plan-price">${{ plan.price/100 }}</div>
|
||||
<div class="count"><b>{{ plan.privateRepos }}</b> private repositories</div>
|
||||
<div class="description">{{ plan.audience }}</div>
|
||||
<div class="smaller">SSL secured connections</div>
|
||||
<div class="plan-box">
|
||||
<div class="plan-title">{{ plan.title }}</div>
|
||||
<div class="plan-price">${{ plan.price/100 }}</div>
|
||||
|
||||
<div class="description">{{ plan.audience }}</div>
|
||||
</div>
|
||||
|
||||
<div class="features hidden-xs">
|
||||
<div class="feature count"><b>{{ plan.privateRepos }}</b> private repositories</div>
|
||||
<div class="feature present"></div>
|
||||
<div class="feature present"></div>
|
||||
<div class="feature present"></div>
|
||||
<div class="feature present"></div>
|
||||
<div class="feature" ng-class="plan.bus_features ? 'present' : ''"></div>
|
||||
<div class="feature" ng-class="plan.bus_features ? 'present' : ''"></div>
|
||||
<div class="feature" ng-class="plan.bus_features ? 'present' : ''"></div>
|
||||
</div>
|
||||
|
||||
<div class="features visible-xs">
|
||||
<div class="feature count"><b>{{ plan.privateRepos }}</b> private repositories</div>
|
||||
<div class="feature present">Unlimited Public Repositories</div>
|
||||
<div class="feature present">SSL Encryption</div>
|
||||
<div class="feature present">Robot accounts</div>
|
||||
<div class="feature present">Dockerfile Build</div>
|
||||
<div class="feature" ng-class="plan.bus_features ? 'present' : 'notpresent'">Teams</div>
|
||||
<div class="feature" ng-class="plan.bus_features ? 'present' : 'notpresent'">Logging</div>
|
||||
<div class="feature" ng-class="plan.bus_features ? 'present' : 'notpresent'">Invoice History</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-block" ng-class="plan.bus_features ? 'btn-success' : 'btn-primary'"
|
||||
ng-click="buyNow(plan.stripeId)">Sign Up Now</button>
|
||||
ng-click="buyNow(plan.stripeId)">Start <span class="hidden-sm-inline">Free</span> Trial</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue