redesign new pricing page

This commit is contained in:
D-Bao 2023-04-04 11:34:56 +02:00
parent 03e5083d97
commit a0a628d81e

View File

@ -4,211 +4,392 @@
{% block title %}Pricing{% endblock %} {% block title %}Pricing{% endblock %}
{% block head %} {% block head %}
<script src="https://cdn.paddle.com/paddle/paddle.js"></script> <script src="https://cdn.paddle.com/paddle/paddle.js"></script>
<script> <script>
if (window.Paddle === undefined) { if (window.Paddle === undefined) {
console.log("cannot load Paddle from CDN"); console.log("cannot load Paddle from CDN");
document.write('<script src="/static/vendor/paddle.js"><\/script>') document.write('<script src="/static/vendor/paddle.js"><\/script>')
} }
</script> </script>
<style type="text/css"> <style type="text/css">
html.mvc__a.mvc__lot.mvc__of.mvc__classes.mvc__to.mvc__increase.mvc__the.mvc__odds.mvc__of.mvc__winning.mvc__specificity, html.mvc__a.mvc__lot.mvc__of.mvc__classes.mvc__to.mvc__increase.mvc__the.mvc__odds.mvc__of.mvc__winning.mvc__specificity > body { html.mvc__a.mvc__lot.mvc__of.mvc__classes.mvc__to.mvc__increase.mvc__the.mvc__odds.mvc__of.mvc__winning.mvc__specificity,
position: static; html.mvc__a.mvc__lot.mvc__of.mvc__classes.mvc__to.mvc__increase.mvc__the.mvc__odds.mvc__of.mvc__winning.mvc__specificity>body {
} position: static;
}
{#CSS to change collapse button display from https://stackoverflow.com/a/31967516/1428034#} {# CSS to change collapse button display from https: //stackoverflow.com/a/31967516/1428034 #}
[data-toggle="collapse"].collapsed .if-not-collapsed { [data-toggle="collapse"].collapsed .if-not-collapsed {
display: none; display: none;
} }
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
display: none;
}
.btn-no-pointer {
pointer-events: none;
}
.tab-yearly__badge {
top: -8px !important;
left: 52px !important;
}
.border-2 {
border-width: 2px !important;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
display: none;
}
</style> </style>
{% endblock %} {% endblock %}
{% block announcement %} {% block announcement %}
{# TODO: to remove#} {# TODO: to remove#}
{# <div class="alert alert-danger text-center mb-0" role="alert">#} {# <div class="alert alert-danger text-center mb-0" role="alert">#}
{# Our payment provider Paddle is experiencing#} {# Our payment provider Paddle is experiencing#}
{# <a href="https://paddle.status.io" target="_blank">server issue <i class="fe fe-external-link"></i></a>#} {# <a href="https://paddle.status.io" target="_blank">server issue <i class="fe fe-external-link"></i></a>#}
{# that can make our checkout page unusable. <br />#} {# that can make our checkout page unusable. <br />#}
{# Please retry later and sorry for this issue!#} {# Please retry later and sorry for this issue!#}
{# </div>#} {# </div>#}
{% endblock %} {% endblock %}
{% block default_content %} {% block default_content %}
<div class="row"> <div>
<div class="col-sm-6 col-lg-6"> <div class="text-center mx-md-auto mb-8 mt-6">
<div class="card"> <h2>Upgrade to unlock premium features</h2>
<div class="card-body text-center"> </div>
<div class="h3">Premium</div> {% if manual_sub %}
<ul class="list-unstyled leading-loose mb-3">
<li>
<i class="fe fe-check text-success mr-2" aria-hidden="true"></i>
Unlimited aliases
</li>
<li>
<i class="fe fe-check text-success mr-2" aria-hidden="true"></i>
Unlimited custom domains
</li>
<li>
<i class="fe fe-check text-success mr-2" aria-hidden="true"></i>
Catch-all (or wildcard) aliases
</li>
<li>
<i class="fe fe-check text-success mr-2" aria-hidden="true"></i>
Up to 50 directories (or usernames)
</li>
<li>
<i class="fe fe-check text-success mr-2" aria-hidden="true"></i>
Unlimited mailboxes
</li>
<li>
<i class="fe fe-check text-success mr-2" aria-hidden="true"></i>
PGP Encryption
</li>
</ul>
<div class="small-text">
More information on our
<a href="https://simplelogin.io/pricing" target="_blank" rel="noopener noreferrer">
Pricing
Page <i class="fe fe-external-link"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-6">
{% if manual_sub %}
<div class="alert alert-info"> <div class="alert alert-info mt-0 mb-6">
You currently have a subscription until <b>{{ manual_sub.end_at.format("YYYY-MM-DD") }}</b> You currently have a subscription until <b>{{ manual_sub.end_at.format("YYYY-MM-DD") }}</b>
({{ (manual_sub.end_at - now).days }} days left). ({{ (manual_sub.end_at - now).days }} days left).
<br /> <br />
Please note that the time left will <b>not</b> be taken into account in a new subscription. Please note that the time left will <b>not</b> be taken into account in a new subscription.
</div> </div>
<hr /> <hr />
{% endif %} {% endif %}
{% if proton_upgrade %} {% set sub = current_user.get_paddle_subscription() %}
{% if sub and sub.cancelled %}
<div id="proton-upgrade"> <div class="alert alert-primary mt-0 mb-6" role="alert">
<h4>Proton Unlimited, Business and Visionary plans include SimpleLogin premium and more!</h4> You have an active subscription until {{ sub.next_bill_date.strftime("%Y-%m-%d") }}.
<a class="btn btn-primary" role="button" href="https://account.proton.me/u/0/mail/upgrade"> <br />
<b>Upgrade your Proton account</b> Please note that if you re-subscribe now, this will be a completely
</a> new subscription and
<p class="mt-2 small"> your payment method will be charged <b>immediately</b>.
Starts at $9.99/month (billed yearly), starting with 500GB of storage, VPN, encrypted </div>
calendar & file storage and more. {% endif %}
</p> {% if coinbase_sub %}
<div class="middle-line my-5 h4">OR</div>
<div id="normal-upgrade-button">
<a class="btn btn-secondary collapsed" data-toggle="collapse" href="#normal-upgrade" role="button">
Upgrade your SimpleLogin account
<span class="if-collapsed">
<i class="fe fe-chevron-down"></i>
</span>
<span class="if-not-collapsed">
<i class="fe fe-chevron-up"></i>
</span>
</a>
<p class="mt-2 small">Starts at $2.5/month (billed yearly)</p>
</div>
</div>
{% endif %}
<div id="normal-upgrade" class="{% if proton_upgrade %} collapse{% endif %}">
<div class="display-6 my-3">
🔐 Secure payments by
<a href="https://paddle.com" target="_blank" rel="noopener noreferrer">
Paddle <i class="fe fe-external-link"></i>
</a>
</div>
{% set sub = current_user.get_paddle_subscription() %}
{% if sub and sub.cancelled %}
<div class="alert alert-primary" role="alert"> <div class="alert alert-info mt-0 mb-6">
You have an active subscription until {{ sub.next_bill_date.strftime("%Y-%m-%d") }}. You currently have a Coinbase subscription until <b>{{ coinbase_sub.end_at.format("YYYY-MM-DD") }}</b>
<br /> ({{ (coinbase_sub.end_at - now).days }} days left).
Please note that if you re-subscribe now, this will be a completely <br />
new subscription and Please note that the time left will <b>not</b> be taken into account in a new Paddle subscription.
your payment method will be charged <b>immediately</b>. </div>
</div> {% endif %}
{% endif %} <div class="nav btn-group mb-4 justify-content-center position-relative flex-nowrap d-flex" id="pills-tab" role="tablist">
{% if coinbase_sub %} <a class="btn btn-outline-primary flex-grow-0 px-8 py-2" id="monthly-plan-tab" data-toggle="tab" href="#monthly-plan" role="tab" aria-controls="monthly-plan" aria-selected="false">Monthly</a>
<a class="btn btn-outline-primary flex-grow-0 px-8 py-2 position-relative active" id="yearly-plan-tab" data-toggle="tab" href="#yearly-plan" role="tab" aria-controls="yearly-plan" aria-selected="true">Yearly<span class="badge badge-success position-absolute tab-yearly__badge" style="font-size: 12px">Save $18</span></a>
</div>
<div class="tab-content">
<!-- monthly tab content -->
<div class="tab-pane" id="monthly-plan" role="tabpanel" aria-labelledby="monthly-plan-tab">
<div class="row row-cards">
<!-- monthly free plan -->
<div class="{{ 'col-md-6 col-lg-4' if proton_upgrade else 'col-md-6' }}">
<div class="card card-md flex-grow-1">
<div class="card-body">
<div class="text-center">
<div class="h3">Free</div>
<div class="h3 my-3">$0</div>
<div class="text-center mt-4 mb-6">
{% set sub = current_user.get_paddle_subscription() %}
<button class="{{ 'invisible' if sub or manual_sub or coinbase_sub }} btn btn-lg btn-outline-secondary w-100 btn-no-pointer" aria-disabled="true" disabled>
Current plan
</button>
</div>
</div>
<ul class="list-unstyled">
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
10 aliases
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
1 mailbox
</li>
</ul>
</div>
</div>
</div>
<!-- END monthly free plan -->
<!-- monthly premium plan -->
<div class="{{ 'col-md-6 col-lg-4' if proton_upgrade else 'col-md-6' }}">
<div class="card card-md flex-grow-1 border-primary border-2">
<div class="card-body">
<div class="text-center">
<div class="h3">SimpleLogin Premium</div>
<div class="h3 my-3">$4 / month</div>
<div class="text-center mt-4 mb-6">
<button class="btn btn-primary btn-lg w-100" onclick="upgradePaddle({{ PADDLE_MONTHLY_PRODUCT_ID }})">
Upgrade to Premium
</button>
</div>
</div>
<ul class="list-unstyled">
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
Unlimited aliases
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
Unlimited mailboxes
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
Unlimited custom domains: bring your own domain to create aliases like contact@your-domain.com
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
Catch-all (or wildcard) domain
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
Initiate a new email from your alias
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
5 subdomains
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
50 directories/usernames
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
PGP Encryption
</li>
</ul>
</div>
</div>
</div>
<!-- END monthly premium plan -->
<!-- monthly Proton plan -->
{% if proton_upgrade %}
<div class="alert alert-info"> <div class="col-md-6 col-lg-4">
You currently have a Coinbase subscription until <b>{{ coinbase_sub.end_at.format("YYYY-MM-DD") }}</b> <div class="card card-md flex-grow-1">
({{ (coinbase_sub.end_at - now).days }} days left). <div class="card-body">
<br /> <div class="text-center">
Please note that the time left will <b>not</b> be taken into account in a new Paddle subscription. <div class="h3">Proton plan</div>
</div> <div class="h3 my-3">Starts at $11.99 / month</div>
{% endif %} <div class="text-center mt-4 mb-6">
<div class="mb-3"> <a class="btn btn-lg btn-outline-primary w-100" role="button" href="https://account.proton.me/u/0/mail/upgrade" target="_blank">Upgrade your Proton account</a>
Paddle supports bank cards </div>
(Mastercard, Visa, American Express, etc) and PayPal. </div>
</div> <p>Proton Unlimited / Business plans include:</p>
<button class="btn btn-primary" onclick="upgrade({{ PADDLE_YEARLY_PRODUCT_ID }})"> <ul class="list-unstyled">
Yearly billing <li class="d-flex">
<span class="badge badge-success">Save $18</span> <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
<br /> Everything in SimpleLogin Premium
<span style="font-size: 18px">$30/year</span> </li>
</button> <li class="d-flex">
<button class="btn btn-secondary" onclick="upgrade({{ PADDLE_MONTHLY_PRODUCT_ID }})"> <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
Monthly billing 500 GB storage
<br /> </li>
<b> <li class="d-flex">
$4/month <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
</b> 15 email addresses/aliases
</button> </li>
<hr /> <li class="d-flex">
<i class="fa fa-bitcoin"></i> <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
Payment via Unlimited folders, labels, and filters
<a href="https://commerce.coinbase.com/?lang=en" target="_blank" rel="noopener noreferrer"> </li>
Coinbase Commerce<i class="fe fe-external-link"></i> <li class="d-flex">
</a> <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
<br /> Unlimited messages per day
Currently Bitcoin, Bitcoin Cash, Dai, Ethereum, Litecoin and USD Coin are supported. </li>
<br /> <li class="d-flex">
<a class="btn btn-outline-primary" href="{{ url_for('dashboard.coinbase_checkout_route') }}" target="_blank" rel="noopener noreferrer"> <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
Yearly billing - Crypto 15 email addresses/aliases
<br /> </li>
$30/year <li class="d-flex">
<i class="fe fe-external-link"></i> <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
</a> 20 Calendars
<hr /> </li>
If you have bought a coupon, please go to the <li class="d-flex">
<a href="{{ url_for('dashboard.coupon_route') }}">coupon page</a> <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
to apply the coupon code. 10 high-speed VPN connections
</div> </li>
</div> <li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
3 custom email domains
</li>
</ul>
</div>
</div>
</div>
{% endif %}
<!-- END monthly Proton plan -->
</div>
</div>
<!-- END monthly tab content -->
<!-- yearly tab content -->
<div class="tab-pane show active" id="yearly-plan" role="tabpanel" aria-labelledby="yearly-plan-tab">
<div class="row row-cards">
<!-- yearly free plan (identical to monthly) -->
<div class="{{ 'col-md-6 col-lg-4' if proton_upgrade else 'col-md-6' }}">
<div class="card card-md flex-grow-1">
<div class="card-body">
<div class="text-center">
<div class="h3">Free</div>
<div class="h3 my-3">$0</div>
<div class="text-center mt-4 mb-6">
{% set sub = current_user.get_paddle_subscription() %}
<button class="{{ 'invisible' if sub or manual_sub or coinbase_sub }} btn btn-lg btn-outline-secondary w-100 btn-no-pointer" aria-disabled="true" disabled>
Current plan
</button>
</div>
</div>
<ul class="list-unstyled">
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
10 aliases
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
1 mailbox
</li>
</ul>
</div>
</div>
</div>
<!-- END yearly free plan -->
<!-- yearly premium plan -->
<div class="{{ 'col-md-6 col-lg-4' if proton_upgrade else 'col-md-6' }}">
<div class="card card-md flex-grow-1 border-primary border-2">
<div class="card-body">
<div class="text-center">
<div class="h3">SimpleLogin Premium</div>
<div class="h3 my-3">$30 / year</div>
<div class="text-center mt-4 mb-6">
<button class="btn btn-primary btn-lg w-100" onclick="upgradePaddle({{ PADDLE_YEARLY_PRODUCT_ID }})">
Upgrade to Premium
</button>
</div>
</div>
<ul class="list-unstyled">
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
Unlimited aliases
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
Unlimited mailboxes
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
Unlimited custom domains: bring your own domain to create aliases like contact@your-domain.com
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
Catch-all (or wildcard) domain
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
Initiate a new email from your alias
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
5 subdomains
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
50 directories/usernames
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
PGP Encryption
</li>
</ul>
</div>
</div>
</div>
<!-- END yearly premium plan -->
<!-- yearly Proton plan -->
{% if proton_upgrade %}
<div class="col-md-6 col-lg-4">
<div class="card card-md flex-grow-1">
<div class="card-body">
<div class="text-center">
<div class="h3">Proton plan</div>
<div class="h3 my-3">Starts at $119.88 / year</div>
<div class="text-center mt-4 mb-6">
<a class="btn btn-lg btn-outline-primary w-100" role="button" href="https://account.proton.me/u/0/mail/upgrade" target="_blank">Upgrade your Proton account</a>
</div>
</div>
<p>Proton Unlimited / Business plans include:</p>
<ul class="list-unstyled">
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
Everything in SimpleLogin Premium
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
500 GB storage
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
15 email addresses/aliases
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
Unlimited folders, labels, and filters
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
Unlimited messages per day
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
15 email addresses/aliases
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
20 Calendars
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
10 high-speed VPN connections
</li>
<li class="d-flex">
<i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
3 custom email domains
</li>
</ul>
</div>
</div>
</div>
{% endif %}
<!-- END yearly Proton plan -->
</div>
</div>
<!-- END yearly tab content -->
</div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
Paddle.Setup({vendor: {{ PADDLE_VENDOR_ID }}}); Paddle.Setup({ vendor: {{ PADDLE_VENDOR_ID }}});
function upgrade(productId) { function upgradePaddle(productId) {
bootbox.dialog({ Paddle.Checkout.open({
title: `Payment with credit card or PayPal via Paddle`, product: productId,
message: `Paddle will ask for an email address for sending out the invoices, please feel free to use an alias. <br /> success: "{{ success_url }}",
You don't have to use your SimpleLogin account email address`, passthrough: "{\"user_id\": {{current_user.id}} }"
size: 'large', });
onEscape: true, }
backdrop: true,
buttons: {
got_it: {
label: 'Got it!',
className: 'btn-outline-primary',
callback: function () {
Paddle.Checkout.open({
product: productId,
success: "{{ success_url }}",
passthrough: "{\"user_id\": {{current_user.id}} }"
});
}
},
}
});
}
</script> </script>
{% endblock %} {% endblock %}