This repository has been archived on 2020-03-24. You can view files and clone it, but cannot push or open issues or pull requests.
quay/static/partials/plans.html
Joseph Schorr 9a39859221 Start on revamp of the plans page
This PR implements the hosted side; QE side will come in the next PR

First steps in #559
2015-11-02 14:34:16 -05:00

230 lines
9.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="co-main-content-panel plans-panel">
<!-- Header -->
<div class="plans-header">Use Quay in the cloud or hosted on your servers:</div>
<!-- Tabs -->
<ul class="nav nav-tabs plan-tabs" role="tablist">
<li role="presentation" class="active">
<a href="javascript:void(0)" role="tab" data-toggle="tab" data-target="#hosted">
<div class="tab-logo">
<img src="/static/img/Quay_horizontal_color.svg">
</div>
<div class="tab-title">Hosted in the cloud and scales with you.</div>
<div class="tab-title">Priced by the number of private repositories.</div>
</a>
</li>
<li role="presentation">
<a href="javascript:void(0)" role="tab" data-toggle="tab" data-target="#enterprise">
<div class="tab-logo">
<img src="/static/img/QuayEnterprise_horizontal_color.svg">
</div>
<div class="tab-title">Runs privately anywhere you can run a Docker container.</div>
<div class="tab-title">Fixed price for unlimited users and repositories</div>
</a>
</li>
</ul>
<div class="tab-content">
<!-- Hosted -->
<div class="tab-pane active" id="hosted">
<!-- Plan columns -->
<div class="row-container">
<div class="row">
<!-- Personal Plan -->
<div class="col-md-3 plan-col">
<div class="plan-box">
<div class="plan-header">
<span class="plan-box-price">$12</span>
<b>Personal</b>
</div>
<ul>
<li>5 private repositories</li>
<li>Unlimited public repos</li>
</ul>
<div class="plan-description">Great for individuals</div>
<button class="btn btn-primary trial-button" ng-click="buyNow('personal-30')">Start Free Trial</button>
</div>
<ul class="plan-features">
<li><i class="fa fa-clock-o"></i>30-day free trial</li>
</ul>
</div>
<!-- Skiff Plan -->
<div class="col-md-3 plan-col">
<div class="plan-box">
<div class="plan-header">
<span class="plan-box-price">$25</span>
<b>Skiff</b>
</div>
<ul>
<li>10 private repositories</li>
<li>Unlimited public repos</li>
<li>Team-based permissions</li>
</ul>
<div class="plan-description">Great for startups</div>
<button class="btn btn-primary trial-button" ng-click="buyNow('bus-micro-30')">Start Free Trial</button>
</div>
<ul class="plan-features">
<li><i class="fa fa-clock-o"></i>30-day free trial</li>
</ul>
</div>
<!-- Yacht Plan -->
<div class="col-md-3 plan-col popular">
<div class="plan-box">
<div class="plan-header">
<span class="plan-box-price">$50</span>
<b>Yacht</b>
</div>
<ul>
<li>20 private repositories</li>
<li>Unlimited public repos</li>
<li>Team-based permissions</li>
</ul>
<div class="plan-description">Great for small businesses</div>
<button class="btn btn-primary trial-button" ng-click="buyNow('bus-small-30')">Start Free Trial</button>
</div>
<ul class="plan-features">
<li><i class="fa fa-clock-o"></i>30-day free trial</li>
</ul>
</div>
<!-- Larger Plans -->
<div class="col-md-3 plan-col">
<div class="plan-box">
<div class="plan-header">
<b>Larger Plans</b>
</div>
<select ng-model="dropdownPlan" class="form-control">
<option ng-repeat="plan in plans" ng-if="plan.privateRepos > 20 && !plan.plans_page_hidden"
value="{{ plan.stripeId }}">
{{ plan.privateRepos }} private repositories
</option>
</select>
<ul>
<li>Unlimited public repos</li>
<li>Team-based permissions</li>
</ul>
<div class="plan-description">Great for enterprises</div>
<button class="btn btn-primary trial-button" ng-click="buyNow(dropdownPlan)">Start Free Trial</button>
</div>
<ul class="plan-features">
<li><i class="fa fa-clock-o"></i>30-day free trial</li>
</ul>
</div>
</div>
</div>
<!-- FAQ and features -->
<div class="faq-features">
<div class="row-container-no-margin">
<div class="row">
<!-- Features -->
<div class="col-md-3 col-md-push-9 features-col">
<div class="features-title">All plans include:</div>
<ul class="features-list">
<li><i class="fa fa-refresh"></i>
<b>Continuous Integration</b>
Build your containers in response to git pushes: GitHub, BitBucket, Gitlab and others
</li>
<li><i class="fa fa-clock-o"></i>
<b>30-Day Free Trial</b>
Your first 30 days are free on Quay.io. Test it out and start building containers!
</li>
<li><i class="fa fa-hdd-o"></i>
<b>Public Repositories</b>
Provide a public download page for your container. The best part, theyre free!
</li>
<li><i class="fa ci-robot"></i>
<b>Robot Accounts</b>
Create credentials designed for deploying software automatically.
</li>
<li><i class="fa fa-group"></i>
<b>Teams</b>
Teams can collectively have access to manage specific repositories on your account.
</li>
<li><i class="fa fa-lock"></i>
<b>SSL Encryption</b>
Transit between Quay.io and your servers is secured automatically.
</li>
<li><i class="fa fa-bar-chart"></i>
<b>Logging &amp; Auditing</b>
Auditing is essential for everything in your CI pipeline. Actions via API and UI are tracked.
</li>
<li><i class="fa fa-calendar"></i>
<b>Invoice History</b>
Download past invoices for your billing team or purchasing departement.
</li>
</ul>
</div>
<!-- FAQ -->
<div class="col-md-9 col-md-pull-3 faq-col">
<h4>How do I use Quay with my servers and code?</h4>
<p>Using Quay with your infrastructure is separated into two main actions: <b>building containers</b> and <b>distributing them to your servers</b>.</p>
<p>You can configure Quay to automatically build containers of your code on each commit. Integrations with GitHub, Bitbucket, GitLab and self-hosted Git repositories are supported. Each built container is stored on Quay and is available to be pulled down onto your servers.</p>
<p>To distribute your private containers onto your servers, Docker or rkt must be configured with the correct credientials. Quay has sophisticated access controls organizations, teams, robot accounts, and more to give you full control over which servers can pull down your containers. An API can be used to automate the creation and management of these credentials.</p>
<h4>How is Quay optimized for a team environment?</h4>
<p>Quays permission model is designed for teams. Each new user can be assigned to one or more teams, with specific permissions. Robot accounts, used for automated deployments, can be managed per team as well. This system allows for each development team to manage their own credentials.</p>
<p>Full logging and auditing is integrated into every part of the application and API. Quay helps you dig into every action for more details.</p>
<h4>Additional FAQs</h4>
<b>Can I change my plan?</b>
<p>Yes, you can change your plan at any time and your account will be pro-rated for the difference. For large organizations, Quay Enterprise offers unlimited users and repos.</p>
<b>Do you offer special plans for business or academic institutions?</b>
<p>Please contact us at our support email address to discuss the details of your organization and intended usage.</p>
<b>Can I use Quay for free?</b>
<p>Yes! We offer unlimited storage and serving of public repositories. We strongly believe in the open source community and will do what we can to help!</p>
<b>What types of payment do you accept?</b>
<p>Quay uses Stripe as our payment processor, so we can accept any of the payment options they offer, which are currently: Visa, MasterCard, American Express, JCB, Discover and Diners Club.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Enterprise -->
<div class="tab-pane" id="enterprise">...</div>
</div>
<!-- Modal message dialog -->
<div class="modal fade" id="signinModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="user-setup" signed-in="signedIn()" redirect-url="'/plans/'"></div>
</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 -->