quay/static/partials/plans.html

<div class="container plans content-container">
  <div class="row plans-list">
    <div class="col-sm-2">
      <div class="features-bar hidden-xs">
          <div class="visible-lg" style="height: 50px"></div>
          <div class="visible-md visible-sm" style="height: 70px"></div>

          <div class="feature">
            <span class="context-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
                  data-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-o visible-lg"></i> 
          </div>
          <div class="feature">
             <span class="context-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
                  data-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="context-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
                  data-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="context-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
                  data-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="context-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
                  data-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="context-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
                  data-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="context-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
                  data-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 class="feature">
            <span class="context-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
                  data-title="All plans have a free trial">
              <span class="hidden-sm-inline">Free Trial</span>
              <span class="visible-sm-inline">Free Trial</span>
            </span>
            <i class="fa fa-clock-o 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-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="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 class="feature present"></div>
        </div>

        <div class="features visible-xs">
          <div class="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 class="feature present">Free Trial</div>
        </div>

        <button class="btn btn-block" ng-class="plan.bus_features ? 'btn-success' : 'btn-primary'"
                ng-click="buyNow(plan.stripeId)">Start <span class="hidden-sm-inline">Free</span> Trial</button>

      </div>
    </div>
  </div>

  <div class="row plan-faq">
    <div class="col-md-6">
      <dl>
        <dt>Can I use Quay for free?</dt>
        <dd>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!</dd>

        <dt>Does my plan have secure communication?</dt>
        <dd>Yes! All plans provide <b>secure</b> communication to and from Quay via <b>SSL</b>.</dd>

        <dt>What types of payment do you accept?</dt>
        <dd>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.</dd>
      </dl>
    </div>
    <div class="col-md-6">
      <dl>
        <dt>Can I change my plan?</dt>
        <dd>Yes, you can change your plan at any time and your account will be pro-rated for the difference.</dd>
        <dt>Do you offer special plans for business or academic institutions?</dt>
        <dd>Please contact us at our <a href="mailto:support@quay.io">support email address</a> to discuss the details of your organization and intended usage.</dd>
      </dl>
    </div>
  </div>

  <div class="row enterprise-plan">
    <div class="col-md-6">
      <h2>Run Quay.io Behind Your Firewall</h2>
      <div class="plan-combine">
        <img src="/static/img/quay-logo.png">
        <span class="plus">+</span>
        <img src="/static/img/coreos.svg" style="height: 50px">
      </div>
      <div>Quay.io has partnered with CoreOS to offer Enterprise Registry, a version
      of Quay.io that can be hosted behind your firewall. More information
        can be found on the <a href="https://coreos.com/products/enterprise-registry">CoreOS website</a>.</div>
      <a href="https://coreos.com/products/enterprise-registry" class="btn btn-default">Learn more about Enterprise Registry</a>
    </div>
  </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 -->