mirror of
https://github.com/simple-login/app.git
synced 2024-09-30 05:31:30 +02:00
redesign new pricing page
This commit is contained in:
D-Bao
parent
03e5083d97
commit
a0a628d81e
@ -12,12 +12,14 @@
|
|||||||
}
|
}
|
||||||
</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,
|
||||||
|
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;
|
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;
|
||||||
}
|
}
|
||||||
@ -25,6 +27,20 @@
|
|||||||
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
|
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-no-pointer {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-yearly__badge {
|
||||||
|
top: -8px !important;
|
||||||
|
left: 52px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-2 {
|
||||||
|
border-width: 2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block announcement %}
|
{% block announcement %}
|
||||||
@ -39,51 +55,13 @@
|
|||||||
{% 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 class="h3">Premium</div>
|
|
||||||
<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>
|
|
||||||
<div class="col-sm-6 col-lg-6">
|
|
||||||
{% if manual_sub %}
|
{% 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 />
|
||||||
@ -91,43 +69,10 @@ Please note that the time left will <b>not</b> be taken into account in a new su
|
|||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if proton_upgrade %}
|
|
||||||
|
|
||||||
<div id="proton-upgrade">
|
|
||||||
<h4>Proton Unlimited, Business and Visionary plans include SimpleLogin premium and more!</h4>
|
|
||||||
<a class="btn btn-primary" role="button" href="https://account.proton.me/u/0/mail/upgrade">
|
|
||||||
<b>Upgrade your Proton account</b>
|
|
||||||
</a>
|
|
||||||
<p class="mt-2 small">
|
|
||||||
Starts at $9.99/month (billed yearly), starting with 500GB of storage, VPN, encrypted
|
|
||||||
calendar & file storage and more.
|
|
||||||
</p>
|
|
||||||
<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() %}
|
{% set sub = current_user.get_paddle_subscription() %}
|
||||||
{% if sub and sub.cancelled %}
|
{% if sub and sub.cancelled %}
|
||||||
|
|
||||||
<div class="alert alert-primary" role="alert">
|
<div class="alert alert-primary mt-0 mb-6" role="alert">
|
||||||
You have an active subscription until {{ sub.next_bill_date.strftime("%Y-%m-%d") }}.
|
You have an active subscription until {{ sub.next_bill_date.strftime("%Y-%m-%d") }}.
|
||||||
<br />
|
<br />
|
||||||
Please note that if you re-subscribe now, this will be a completely
|
Please note that if you re-subscribe now, this will be a completely
|
||||||
@ -137,78 +82,314 @@ your payment method will be charged <b>immediately</b>.
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
{% if coinbase_sub %}
|
{% if coinbase_sub %}
|
||||||
|
|
||||||
<div class="alert alert-info">
|
<div class="alert alert-info mt-0 mb-6">
|
||||||
You currently have a Coinbase subscription until <b>{{ coinbase_sub.end_at.format("YYYY-MM-DD") }}</b>
|
You currently have a Coinbase subscription until <b>{{ coinbase_sub.end_at.format("YYYY-MM-DD") }}</b>
|
||||||
({{ (coinbase_sub.end_at - now).days }} days left).
|
({{ (coinbase_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 Paddle subscription.
|
Please note that the time left will <b>not</b> be taken into account in a new Paddle subscription.
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<div class="mb-3">
|
<div class="nav btn-group mb-4 justify-content-center position-relative flex-nowrap d-flex" id="pills-tab" role="tablist">
|
||||||
Paddle supports bank cards
|
<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>
|
||||||
(Mastercard, Visa, American Express, etc) and PayPal.
|
<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>
|
||||||
<button class="btn btn-primary" onclick="upgrade({{ PADDLE_YEARLY_PRODUCT_ID }})">
|
<div class="tab-content">
|
||||||
Yearly billing
|
<!-- monthly tab content -->
|
||||||
<span class="badge badge-success">Save $18</span>
|
<div class="tab-pane" id="monthly-plan" role="tabpanel" aria-labelledby="monthly-plan-tab">
|
||||||
<br />
|
<div class="row row-cards">
|
||||||
<span style="font-size: 18px">$30/year</span>
|
<!-- 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>
|
</button>
|
||||||
<button class="btn btn-secondary" onclick="upgrade({{ PADDLE_MONTHLY_PRODUCT_ID }})">
|
|
||||||
Monthly billing
|
|
||||||
<br />
|
|
||||||
<b>
|
|
||||||
$4/month
|
|
||||||
</b>
|
|
||||||
</button>
|
|
||||||
<hr />
|
|
||||||
<i class="fa fa-bitcoin"></i>
|
|
||||||
Payment via
|
|
||||||
<a href="https://commerce.coinbase.com/?lang=en" target="_blank" rel="noopener noreferrer">
|
|
||||||
Coinbase Commerce<i class="fe fe-external-link"></i>
|
|
||||||
</a>
|
|
||||||
<br />
|
|
||||||
Currently Bitcoin, Bitcoin Cash, Dai, Ethereum, Litecoin and USD Coin are supported.
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-outline-primary" href="{{ url_for('dashboard.coinbase_checkout_route') }}" target="_blank" rel="noopener noreferrer">
|
|
||||||
Yearly billing - Crypto
|
|
||||||
<br />
|
|
||||||
$30/year
|
|
||||||
<i class="fe fe-external-link"></i>
|
|
||||||
</a>
|
|
||||||
<hr />
|
|
||||||
If you have bought a coupon, please go to the
|
|
||||||
<a href="{{ url_for('dashboard.coupon_route') }}">coupon page</a>
|
|
||||||
to apply the coupon code.
|
|
||||||
</div>
|
</div>
|
||||||
</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="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 $11.99 / month</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 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({
|
|
||||||
title: `Payment with credit card or PayPal via Paddle`,
|
|
||||||
message: `Paddle will ask for an email address for sending out the invoices, please feel free to use an alias. <br />
|
|
||||||
You don't have to use your SimpleLogin account email address`,
|
|
||||||
size: 'large',
|
|
||||||
onEscape: true,
|
|
||||||
backdrop: true,
|
|
||||||
buttons: {
|
|
||||||
got_it: {
|
|
||||||
label: 'Got it!',
|
|
||||||
className: 'btn-outline-primary',
|
|
||||||
callback: function () {
|
|
||||||
Paddle.Checkout.open({
|
Paddle.Checkout.open({
|
||||||
product: productId,
|
product: productId,
|
||||||
success: "{{ success_url }}",
|
success: "{{ success_url }}",
|
||||||
passthrough: "{\"user_id\": {{current_user.id}} }"
|
passthrough: "{\"user_id\": {{current_user.id}} }"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user