Add QE tab to plans page

Note: This does *not* implement the call to Tectonic yet.
This commit is contained in:
Joseph Schorr 2015-10-26 14:27:16 -04:00
parent d9d8f95726
commit 3a36e23142
5 changed files with 477 additions and 44 deletions

View file

@ -133,6 +133,10 @@
border-bottom: 1px dashed #495b6a;
}
.plans-panel .plan-box .qe-plan-description {
margin-bottom: 20px;
}
.plans-panel .plan-box .plan-description {
margin-top: 20px;
padding-top: 20px;
@ -148,9 +152,14 @@
color: white;
}
.plans-panel .plan-box.gray .plan-header b {
color: black;
}
.plans-panel .plan-box .plan-header .plan-box-price {
float: right;
width: 60px;
width: 75px;
text-align: right;
font-size: 18px;
position: relative;
}
@ -175,6 +184,16 @@
list-style: square;
}
.plans-panel .plan-box.gray {
background-color: #f5f5f5;
text-align: center;
color: black;
}
.plans-panel .plan-box.gray .qe-plan-description {
margin-bottom: 10px;
}
.plans-panel .plan-features {
margin: 0px;
margin-top: 10px;
@ -184,10 +203,19 @@
padding: 0px;
}
.plans-panel .plan-features li {
text-align: left;
margin-bottom: 10px;
}
.plans-panel .plan-features i.fa {
margin-right: 10px;
}
.plans-panel .plan-features li.disabled {
color: #aaa;
}
.plans-panel .faq-features {
margin-top: 15px;
border-top: 1px solid #ddd;
@ -295,3 +323,25 @@
.plans-panel .faq-col p+b {
margin-top: 20px;
}
.plans-panel .faq-sub-col {
padding: 40px;
padding-bottom: 0px;
}
.plans-panel .faq-sub-col ul {
padding: 0px;
list-style: square;
}
.plans-panel .faq-sub-col img {
width: 100%;
max-height: 70px;
margin-bottom: 20px;
}
.plans-panel .faq-sub-col b {
margin-bottom: 20px;
text-align: center;
display: block;
}

59
static/img/qe-legos.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 25 KiB

View file

@ -0,0 +1,84 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="527.219px" height="140.828px" viewBox="0 0 527.219 140.828" enable-background="new 0 0 527.219 140.828"
xml:space="preserve">
<g>
<polygon fill="#FFFFFF" points="67.269,38.855 48.501,30.496 29.737,38.849 48.501,49.689 48.501,71.358 65.124,59.28 "/>
<g>
<polygon fill="#68C28D" points="16.102,30.976 29.737,38.849 48.501,30.496 67.269,38.855 65.124,59.28 48.501,71.358
48.501,87.103 77.201,66.252 80.907,30.977 48.501,16.55 "/>
</g>
<g>
<g>
<path fill="#243A4C" d="M48.501,2.72L2.575,23.168l5.256,50.003L48.5,102.72l40.674-29.549l5.255-50L48.501,2.72z M77.2,66.254
L48.501,87.103V49.689L16.102,30.976L48.501,16.55l32.406,14.427L77.2,66.254z"/>
</g>
</g>
</g>
<g>
<path fill="#243A4C" d="M127.581,29.967h-19.48V16.548h54.757v13.419h-19.371v57.138h-15.906V29.967z"/>
<path fill="#243A4C" d="M166.666,16.548h44.259v13.419h-28.244v14.177h24.023v13.311h-24.023v16.233h29.327v13.417h-45.342V16.548z
"/>
<path fill="#243A4C" d="M244.896,15.251c8.766,0,16.125,4.328,20.885,9.2l-8.766,9.845c-3.571-3.247-6.926-5.303-11.903-5.303
c-9.848,0-17.53,8.549-17.53,22.725c0,14.501,6.816,22.942,17.097,22.942c5.843,0,9.956-2.489,13.419-6.277l8.766,9.633
c-5.844,6.816-13.638,10.387-22.4,10.387c-18.289,0-33.222-12.443-33.222-36.143C211.242,28.884,226.715,15.251,244.896,15.251z"/>
<path fill="#243A4C" d="M286.662,29.967h-19.478V16.548h54.754v13.419h-19.37v57.138h-15.907V29.967z"/>
<path fill="#243A4C" d="M318.072,51.503c0-23.052,13.095-36.252,32.032-36.252c19.045,0,32.031,13.308,32.031,36.252
c0,23.048-12.985,36.899-32.031,36.899C331.167,88.402,318.072,74.551,318.072,51.503z M365.795,51.503
c0-14.068-6.061-22.51-15.691-22.51c-9.524,0-15.691,8.441-15.691,22.51c0,14.176,6.167,23.157,15.691,23.157
C359.734,74.66,365.795,65.679,365.795,51.503z"/>
<path fill="#243A4C" d="M446.852,16.548h16.017v70.557h-16.017V16.548z"/>
<path fill="#243A4C" d="M500.401,15.251c8.765,0,16.123,4.328,20.884,9.2l-8.765,9.845c-3.571-3.247-6.925-5.303-11.905-5.303
c-9.846,0-17.529,8.549-17.529,22.725c0,14.501,6.817,22.942,17.098,22.942c5.843,0,9.954-2.489,13.417-6.277l8.767,9.633
c-5.845,6.816-13.636,10.387-22.401,10.387c-18.29,0-33.222-12.443-33.222-36.143C466.745,28.884,482.219,15.251,500.401,15.251z"
/>
<polygon fill="#243A4C" points="426.464,16.548 426.464,61.807 402.657,16.548 401.574,16.548 386.315,16.548 386.315,87.105
401.574,87.105 401.574,41.961 425.272,87.105 441.613,87.105 441.613,16.548 "/>
</g>
<g>
<path fill="#243A4C" d="M385.591,106.379h1.474v6.966l-0.066,3.148c1.641-1.373,3.583-2.512,5.559-2.512
c4.287,0,6.432,3.215,6.432,8.206c0,5.459-3.316,8.675-7.102,8.675c-1.54,0-3.315-0.737-4.822-1.909h-0.066l-0.168,1.507h-1.239
V106.379z M391.821,129.556c3.249,0,5.594-3.015,5.594-7.368c0-3.952-1.407-6.899-5.092-6.899c-1.607,0-3.349,0.938-5.258,2.646
v9.546C388.84,128.986,390.581,129.556,391.821,129.556z"/>
<path fill="#243A4C" d="M403.178,136.422c1.977,0,3.316-1.809,4.119-4.254l0.436-1.406l-6.598-16.379h1.607l3.886,10.115
c0.502,1.34,1.139,3.081,1.741,4.488h0.135c0.502-1.407,1.037-3.148,1.473-4.488l3.45-10.115h1.507l-6.363,18.087
c-0.904,2.68-2.512,5.325-5.393,5.325c-0.603,0-1.205-0.134-1.641-0.335l0.334-1.307
C402.207,136.288,402.709,136.422,403.178,136.422z"/>
<path fill="#243A4C" d="M433.158,107.986c2.578,0,4.555,1.272,5.727,2.646l-0.904,1.005c-1.205-1.34-2.812-2.244-4.822-2.244
c-4.823,0-7.838,3.852-7.838,9.981c0,6.129,2.981,10.081,7.703,10.081c2.278,0,3.986-0.904,5.594-2.713l0.904,0.972
c-1.674,1.942-3.684,3.148-6.564,3.148c-5.426,0-9.244-4.455-9.244-11.488C423.713,112.374,427.531,107.986,433.158,107.986z"/>
<path fill="#243A4C" d="M449.608,113.981c3.885,0,7.234,3.081,7.234,8.474c0,5.325-3.35,8.407-7.234,8.407
c-3.853,0-7.201-3.082-7.201-8.407C442.406,117.063,445.755,113.981,449.608,113.981z M449.608,129.556
c3.248,0,5.693-2.881,5.693-7.101c0-4.254-2.445-7.167-5.693-7.167c-3.25,0-5.661,2.913-5.661,7.167
C443.947,126.675,446.358,129.556,449.608,129.556z"/>
<path fill="#243A4C" d="M461.668,114.383h1.271l0.135,2.981h0.1c1.072-1.977,2.646-3.383,4.556-3.383
c0.603,0,1.071,0.067,1.608,0.335l-0.336,1.34c-0.535-0.201-0.837-0.269-1.473-0.269c-1.441,0-3.148,1.105-4.389,4.12v10.952
h-1.473V114.383z"/>
<path fill="#243A4C" d="M477.612,113.981c3.818,0,6.163,2.713,6.163,7.436c0,0.401,0,0.804-0.067,1.206h-11.588
c0.066,4.052,2.445,6.966,6.062,6.966c1.741,0,3.114-0.569,4.32-1.439l0.603,1.139c-1.272,0.77-2.713,1.574-5.058,1.574
c-4.119,0-7.436-3.148-7.436-8.407S474.028,113.981,477.612,113.981z M482.367,121.483c0-4.119-1.842-6.229-4.722-6.229
c-2.747,0-5.191,2.378-5.526,6.229H482.367z"/>
<path fill="#243A4C" d="M486.758,119.34c0-6.966,3.785-11.354,9.111-11.354c5.291,0,9.076,4.388,9.076,11.354
c0,7-3.785,11.522-9.076,11.522C490.543,130.862,486.758,126.34,486.758,119.34z M503.338,119.34c0-6.096-3.015-9.947-7.469-9.947
c-4.488,0-7.503,3.852-7.503,9.947c0,6.13,3.015,10.115,7.503,10.115C500.323,129.455,503.338,125.47,503.338,119.34z"/>
<path fill="#243A4C" d="M509.069,126.475c1.607,1.809,3.919,2.98,6.498,2.98c3.35,0,5.492-1.809,5.492-4.421
c0-2.746-1.809-3.65-3.984-4.622l-3.35-1.507c-1.91-0.838-4.455-2.211-4.455-5.493c0-3.182,2.746-5.426,6.397-5.426
c2.679,0,4.823,1.205,6.163,2.646l-0.904,1.038c-1.273-1.373-3.049-2.277-5.259-2.277c-2.914,0-4.856,1.541-4.856,3.952
c0,2.546,2.211,3.517,3.818,4.254l3.35,1.474c2.444,1.105,4.621,2.479,4.621,5.861c0,3.383-2.779,5.929-7.066,5.929
c-3.216,0-5.694-1.374-7.436-3.316L509.069,126.475z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.8 KiB

View file

@ -13,11 +13,22 @@
// Monitor any user changes and place the current user into the scope.
UserService.updateUserIn($scope);
$('.plan-tabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$scope.$apply(function() {
$location.search({'tab': e.target.getAttribute('data-target').substr(1)});
});
});
$scope.signedIn = function() {
$('#signinModal').modal('hide');
PlanService.handleNotedPlan();
};
$scope.qeStartTrial = function(plan) {
// TODO(jschorr): Implement.
alert('Not yet implemented!')
};
$scope.buyNow = function(plan) {
PlanService.notePlan(plan);
if ($scope.user && !$scope.user.anonymous) {
@ -42,6 +53,10 @@
if ($scope && $routeParams['trial-plan']) {
$scope.buyNow($routeParams['trial-plan']);
}
if ($scope && $routeParams['tab'] == 'enterprise') {
$('#enterpriseTab').tab('show')
}
}, /* include the personal plan */ true);
}
})();

View file

@ -50,7 +50,7 @@
</a>
</li>
<li role="presentation">
<a href="javascript:void(0)" role="tab" data-toggle="tab" data-target="#enterprise">
<a href="javascript:void(0)" role="tab" data-toggle="tab" data-target="#enterprise" id="enterpriseTab">
<div class="tab-logo">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
preserveAspectRatio="xMidYMin" viewBox="0 0 636.213 79.308" enable-background="new 0 0 636.213 79.308"
@ -156,7 +156,7 @@
</g>
<polygon fill="#003764" points="16.276,68.857 0,34.428 16.276,0 30.132,0 13.856,34.428 30.132,68.857 "/>
</g>
</svg>
</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>
@ -280,56 +280,55 @@
<!-- Features -->
<div class="col-md-5 col-md-push-7 features-col">
<div class="features-title">All plans include:</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12">
<ul class="features-list">
<li><i class="fa fa-refresh"></i>
<b>Continuous Integration</b>
<p>Build your containers in response to git pushes: GitHub, BitBucket, Gitlab and others</p>
</li>
<ul class="features-list">
<li><i class="fa fa-refresh"></i>
<b>Continuous Integration</b>
<p>Build your containers in response to git pushes: GitHub, BitBucket, Gitlab and others</p>
</li>
<li><i class="fa fa-clock-o"></i>
<b>30-Day Free Trial</b>
<p>Your first 30 days are free on Quay.io. Test it out and start building containers!</p>
</li>
<li><i class="fa fa-clock-o"></i>
<b>30-Day Free Trial</b>
<p>Your first 30 days are free on Quay.io. Test it out and start building containers!</p>
</li>
<li><i class="fa fa-hdd-o"></i>
<b>Public Repositories</b>
<p>Provide a public download page for your container. The best part, they're free!</p>
</li>
<li><i class="fa fa-hdd-o"></i>
<b>Public Repositories</b>
<p>Provide a public download page for your container. The best part, they're free!</p>
</li>
<li><i class="fa ci-robot"></i>
<b>Robot Accounts</b>
<p>Create credentials designed for deploying software automatically.</p>
</li>
</ul>
<li><i class="fa ci-robot"></i>
<b>Robot Accounts</b>
<p>Create credentials designed for deploying software automatically.</p>
</li>
</ul>
</div>
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12">
<ul class="features-list">
<li><i class="fa fa-group"></i>
<b>Teams</b>
<p>Teams can collectively have access to manage specific repositories on your account.</p>
</li>
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12">
<ul class="features-list">
<li><i class="fa fa-group"></i>
<b>Teams</b>
<p>Teams can collectively have access to manage specific repositories on your account.</p>
</li>
<li><i class="fa fa-lock"></i>
<b>SSL Encryption</b>
<p>Transit between Quay.io and your servers is secured automatically.</p>
</li>
<li><i class="fa fa-lock"></i>
<b>SSL Encryption</b>
<p>Transit between Quay.io and your servers is secured automatically.</p>
</li>
<li><i class="fa fa-bar-chart"></i>
<b>Logging &amp; Auditing</b>
<p>Auditing is essential for everything in your CI pipeline. Actions via API and UI are tracked.</p>
</li>
<li><i class="fa fa-bar-chart"></i>
<b>Logging &amp; Auditing</b>
<p>Auditing is essential for everything in your CI pipeline. Actions via API and UI are tracked.</p>
</li>
<li><i class="fa fa-calendar"></i>
<b>Invoice History</b>
<p>Download past invoices for your billing team or purchasing departement.</p>
</li>
</ul>
</div>
</div>
<li><i class="fa fa-calendar"></i>
<b>Invoice History</b>
<p>Download past invoices for your billing team or purchasing departement.</p>
</li>
</ul>
</div>
</div>
</div>
<!-- FAQ -->
@ -372,7 +371,233 @@
</div>
<!-- Enterprise -->
<div class="tab-pane" id="enterprise">...</div>
<div class="tab-pane" id="enterprise">
<!-- Plan columns -->
<div class="row-container">
<div class="row">
<!-- Basic Plan -->
<div class="col-md-3 col-sm-6 plan-col">
<div class="plan-box">
<div class="plan-header">
<span class="plan-box-price">$450/mo</span>
<b>Basic</b>
</div>
<div class="qe-plan-description">Single region deployment of Quay with unlimited users and repos.</div>
<div class="qe-plan-description">Great for smaller companies that are getting started with containers.</div>
<a href="javascript:void(0)" class="btn btn-primary trial-button" ng-click="qeStartTrial('basic')">
Start Free Trial
<i class="fa fa-angle-double-right"></i>
</a>
</div>
<ul class="plan-features">
<li><i class="fa fa-clock-o"></i>30-day free trial</li>
<li><i class="fa fa-ticket"></i>Support via ticket</li>
<li><i class="fa fa-check"></i>Unlimited repos, users and teams</li>
<li class="disabled"><i class="fa fa-times"></i>No dedicated builders</li>
<li class="disabled"><i class="fa fa-times"></i>No geo replication</li>
</ul>
</div>
<!-- Shared Plan -->
<div class="col-md-3 col-sm-6 plan-col popular">
<div class="plan-box">
<div class="plan-header">
<span class="plan-box-price">$1,800/mo</span>
<b>Standard</b>
</div>
<div class="qe-plan-description">Up to 5 dedicated build workers allow for horizontal scaling of container builds, which will speed up developer workflows.</div>
<div class="qe-plan-description">Replicate container images to 3 different regions for faster pulls to your servers.</div>
<a href="javascript:void(0)" class="btn btn-primary trial-button" ng-click="qeStartTrial('standard')">
Start Free Trial
<i class="fa fa-angle-double-right"></i>
</a>
</div>
<ul class="plan-features">
<li><i class="fa fa-clock-o"></i>30-day free trial</li>
<li><i class="fa fa-user"></i>Support from 9 AM - 5 PM PT</li>
<li><i class="fa fa-check"></i>Unlimited repos, users and teams</li>
<li><i class="fa fa-gears"></i>Up to 5 dedicated container builders</li>
<li><i class="fa fa-globe"></i>Geo replication between 3 regions</li>
</ul>
</div>
<!-- Enterprise Plan -->
<div class="col-md-3 col-sm-6 plan-col">
<div class="plan-box">
<div class="plan-header">
<span class="plan-box-price">$9,000/mo</span>
<b>Enterprise</b>
</div>
<div class="qe-plan-description">Perfect for an enterprise with production deployment of containers. Replicate container images between your datacenter regions.</div>
<div class="qe-plan-description">Dedicated build workers speed up the workflow for multiple distributed development teams.</div>
<a href="javascript:void(0)" class="btn btn-primary trial-button" ng-click="qeStartTrial('enterprise')">
Start Free Trial
<i class="fa fa-angle-double-right"></i>
</a>
</div>
<ul class="plan-features">
<li><i class="fa fa-clock-o"></i>30-day free trial</li>
<li><i class="fa fa-user"></i>Support from 9 AM - 5 PM PT</li>
<li><i class="fa fa-check"></i>Unlimited repos, users and teams</li>
<li><i class="fa fa-gears"></i>Up to 25 dedicated container builders</li>
<li><i class="fa fa-globe"></i>Geo replication between <b>5 regions</b></li>
</ul>
</div>
<!-- Other Plans -->
<div class="col-md-3 col-sm-6 plan-col">
<div class="plan-box gray">
<div class="plan-header">
<b>Larger Plans</b>
</div>
<div class="qe-plan-description">Looking for a larger plan?</div>
<div class="qe-plan-description"><a href="tel:800-774-3507"><i class="fa fa-phone"></i> (800) 774-3507</a></div>
<div class="qe-plan-description"><a href="mailto:sales@coreos.com"><i class="fa fa-envelope"></i> Send an E-mail</a></div>
</div>
</div>
</div>
</div>
<!-- FAQ and features -->
<div class="faq-features">
<div class="row-container-no-margin">
<div class="row">
<!-- Features -->
<div class="col-md-5 col-md-push-7 features-col">
<div class="features-title">Enterprise features:</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12">
<ul class="features-list">
<li><i class="fa fa-sign-in"></i>
<b>Enterprise Authentication</b>
<p>Integrate to your existing identity infrastructure: LDAP, Keystone, Tectonic Identity and more</p>
</li>
<li><i class="fa fa-database"></i>
<b>Flexible Storage Backends</b>
<p>Store your container images on Amazon S3, OpenStack SWift, Google Cloud Storage, or directly to disk.</p>
</li>
</ul>
</div>
</div>
<div class="features-title">All plans include:</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12">
<ul class="features-list">
<li><i class="fa fa-refresh"></i>
<b>Continuous Integration</b>
<p>Build your containers in response to git pushes: GitHub, BitBucket, Gitlab and others</p>
</li>
<li><i class="fa fa-clock-o"></i>
<b>30-Day Free Trial</b>
<p>Your first 30 days are free on Quay.io. Test it out and start building containers!</p>
</li>
<li><i class="fa fa-hdd-o"></i>
<b>Public Repositories</b>
<p>Provide a public download page for your container. The best part, they're free!</p>
</li>
<li><i class="fa ci-robot"></i>
<b>Robot Accounts</b>
<p>Create credentials designed for deploying software automatically.</p>
</li>
</ul>
</div>
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12">
<ul class="features-list">
<li><i class="fa fa-group"></i>
<b>Teams</b>
<p>Teams can collectively have access to manage specific repositories on your account.</p>
</li>
<li><i class="fa fa-lock"></i>
<b>SSL Encryption</b>
<p>Transit between Quay.io and your servers is secured automatically.</p>
</li>
<li><i class="fa fa-bar-chart"></i>
<b>Logging &amp; Auditing</b>
<p>Auditing is essential for everything in your CI pipeline. Actions via API and UI are tracked.</p>
</li>
<li><i class="fa fa-calendar"></i>
<b>Invoice History</b>
<p>Download past invoices for your billing team or purchasing departement.</p>
</li>
</ul>
</div>
</div>
</div>
<!-- FAQ -->
<div class="col-md-7 col-md-pull-5 faq-col">
<h4>How can I run Quay Enterprise?</h4>
<p>Quay Enterprise is delivered as a set of containers that is self-managed, or run it as an application on top of a Tectonic cluster. Quay Enterprise is included for free with all Tectonic clusters.</p>
<p>Running as a single container excels for the Basic plan. Quickly get started during your trial.</p>
<p>For production setups, Tectonic provides a level of consistency between your regions, allows Quay to share the same identity infrastructure powering Tectonic, provides easy scaling of your builders, and seamless recovery from a machine failure.</p>
<div class="row">
<div class="col-md-6 faq-sub-col">
<img src="/static/img/qe-legos.svg">
<b>Deploy Individual Containers</b>
<ul>
<li>Fits into your existing deployment
<li>Runs anywhere a container does
<li>Orchestration is up to you
</ul>
</div>
<div class="col-md-6 faq-sub-col">
<img src="/static/img/tectonic-bycoreos-color.svg">
<b>Deploy on Tectonic</b>
<ul>
<li>Deployment is consistent between regions
<li>Machine failure is handled automatically
<li>Orchestration is handled by the cluster
</ul>
</div>
</div>
<h4>How is Quay Enterprise different than Quay.io?</h4>
<p>Quay Enterprise is closely related to Quay.io, but runs on your own hardware or in your cloud environment. Running the application yourself is more secure and is more performant when running on the same cluster as your containerized applications.</p>
<p>When running behind your firewall, Quay Enterprise can connect to private Git repositories, LDAP insfrastructure, and more.</p>
<h4>Additional FAQs</h4>
<b>Is there a free trial for Quay Enterprise?</b>
<p>Yes, the first 30 days of usage are free, and then your license will be automatically converted to the standard rate. Well send you an email before that happens as a reminder.</p>
<b>What types of payment do you accept?</b>
<p>Quay Enterprise is billed monthly through your Tectonic account. Major credit cards are accepted and invoices are available by request.</p>
<b>Can I pay annually?</b>
<p>Yes, you can annually. During the purchase process, you can choose between using a credit card or paying via an invoice.</p>
<b>Can I change my plan?</b>
<p>Yes, you can change or cancel your license at any time via your Tectonic account.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal message dialog -->