vikarti.anatra/safing-web
1
0
Fork 0
mirror of https://github.com/safing/web synced 2025-04-18 01:49:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Move pricing cards to their own includes

Browse source 
simplify editing them, so they immediately are edited everywhere
This commit is contained in:
davegson 2023-02-09 10:52:13 +01:00
parent 59e7d6cc3a
commit b9255251a9
5 changed files with 137 additions and 504 deletions

29
_includes/pricing_card_free.html Normal file
View file

@ -0,0 +1,29 @@
<div class="card-package darkmode" style="height: 650px;">
<div class="card-package-top">
<div class="flex">
<span class="card-package-top-title">Portmaster Free</span>
</div>
<span class="card-package-top-amount">
Free
<span class="card-package-top-amount-monthly">/ Forever</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">Increase your privacy and security.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Privacy Filter
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Secure DNS
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Network Monitor
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Community Support
</span>
</div>
<div class="card-package-bottom" style="bottom: 36px;">
<div class="hidden lg:block">
{% include download_button.html unique_id=include.unique_id %}
</div>
</div>
</div>

51
_includes/pricing_card_supporter.html Normal file
View file

@ -0,0 +1,51 @@
<form class="new_charge" id="new_charge" action="https://account.safing.io/charges/checkout" accept-charset="UTF-8" method="get">
<input value="{{ include.plan_id }}" autocomplete="off" type="hidden" name="charge[plan_id]" id="charge_package_id">
<input type="hidden" name="new_user" value="true" autocomplete="off" >
<div class="card-package darkmode mt-0" style="height: 650px;">
<div class="absolute -top-8 -right-11 hidden xl:block">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-big.png" alt="">
</div>
<div class="card-package-top" style="margin-top: 0;">
<div class="flex">
<span class="card-package-top-title">Portmaster <span style="color: #2fcfae;">Supporter</span> </span>
</div>
<span class="card-package-top-amount">
{{ include.price }}€
<span class="card-package-top-amount-monthly">/ {{ include.interval }}</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">We truly appreciate your support.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Everything in Free
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Priority Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Discord Benefits
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-triangle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Reddit Benefits
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-triangle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes-feature">
<span tooltip="coming in the future"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i></span> Early Access to Features
</span>
</div>
<div class="card-package-bottom" style="display: block;">
<div class="mx-auto space-x-2 flex w-percent-80">
<input class="btn-secondary less-round w-full h-auto py-5" type="submit" name="commit" value="Buy Package" data-disable-with="Buy Package">
<nojs>
<div class="input-counter darkmode h-full">
<input class="input-counter-right" value="1" step="1" min="1" max="4" required="required" class="input-counter-right" type="number" name="charge[quantity]" id="charge_quantity">
</div>
</nojs>
</div>
</div>
</div>
</form>

45
_includes/pricing_card_unlimited.html Normal file
View file

@ -0,0 +1,45 @@
<form class="new_charge" id="new_charge" action="https://account.safing.io/charges/checkout" accept-charset="UTF-8" method="get">
<input value="{{ include.plan_id }}" autocomplete="off" type="hidden" name="charge[plan_id]" id="charge_package_id">
<input type="hidden" name="new_user" value="true" autocomplete="off" >
<div class="card-package darkmode mt-0" style="height: 650px;">
<div class="absolute -top-8 -right-11 hidden xl:block">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/triangle-big.png" alt="">
</div>
<div class="card-package-top" style="margin-top: 0;">
<div class="flex">
<span class="card-package-top-title">Portmaster <span style="color: #029ad0;">Unlimited</span></span>
</div>
<span class="card-package-top-amount">
{{ include.price }}€
<span class="card-package-top-amount-monthly">/ {{ include.interval }}</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">It's time to ditch VPN's.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Everything in <span style="color: #2fcfae; margin-left: 0.3rem;">Supporter</span>
</span>
<span class="card-package-middle-includes">SPN Access
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Multiple Identities
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Geo-Unblocking
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Built for Privacy
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Up to 5 Devices
</span>
</div>
<div class="card-package-bottom" style="display: block;">
<div class="mx-auto space-x-2 flex w-percent-80">
<input class="btn-secondary less-round w-full h-auto py-5" type="submit" name="commit" value="Buy Package" data-disable-with="Buy Package">
<nojs>
<div class="input-counter darkmode h-full">
<input class="input-counter-right" value="1" step="1" min="1" max="4" required="required" class="input-counter-right" type="number" name="charge[quantity]" id="charge_quantity">
</div>
</nojs>
</div>
</div>
</div>
</form>

256
pricing/index.html
View file

@ -29,260 +29,16 @@ title: Safing Portmaster - Pricing
<div class="package-billing-bottom">
<div class="content-one">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 transform scale-90 xl:scale-100 gap-5 lg:gap-28 xl:gap-0 justify-center justify-items-center mx-auto" style="align-items: center;">
<div class="card-package darkmode" style="height: 650px;">
<div class="card-package-top">
<div class="flex">
<span class="card-package-top-title">Portmaster Free</span>
</div>
<span class="card-package-top-amount">
Free
<span class="card-package-top-amount-monthly">/ Forever</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">Increase your privacy and security.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Privacy Filter
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Secure DNS
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Network Monitor
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Community Support
</span>
</div>
<div class="card-package-bottom" style="bottom: 36px;">
<div class="hidden lg:block">
{% include download_button.html unique_id="1" %}
</div>
</div>
</div>
<form class="new_charge" id="new_charge" action="https://account.safing.io/charges/checkout" accept-charset="UTF-8" method="get">
<input value="9" autocomplete="off" type="hidden" name="charge[plan_id]" id="charge_package_id">
<input type="hidden" name="new_user" value="true" autocomplete="off" >
<div class="card-package darkmode mt-0" style="height: 650px;">
<div class="absolute -top-8 -right-11 hidden xl:block">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-big.png" alt="">
</div>
<div class="card-package-top" style="margin-top: 0;">
<div class="flex">
<span class="card-package-top-title">Portmaster <span style="color: #2fcfae;">Supporter</span> </span>
</div>
<span class="card-package-top-amount">
3€
<span class="card-package-top-amount-monthly">/ 1-Month</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">We truly appreciate your support.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Everything in Free
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Priority Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Discord Benefits
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-triangle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Reddit Benefits
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-triangle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes-feature">
<span tooltip="coming in the future"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i></span> Early Access to Features
</span>
</div>
<div class="card-package-bottom" style="display: block;">
<div class="mx-auto space-x-2 flex w-percent-80">
<input class="btn-secondary less-round w-full h-auto py-5" type="submit" name="commit" value="Buy Package" data-disable-with="Buy Package">
<nojs>
<div class="input-counter darkmode h-full">
<input class="input-counter-right" value="1" step="1" min="1" max="4" required="required" class="input-counter-right" type="number" name="charge[quantity]" id="charge_quantity">
</div>
</nojs>
</div>
</div>
</div>
</form>
<form class="new_charge" id="new_charge" action="https://account.safing.io/charges/checkout" accept-charset="UTF-8" method="get">
<input value="1" autocomplete="off" type="hidden" name="charge[plan_id]" id="charge_package_id">
<input type="hidden" name="new_user" value="true" autocomplete="off" >
<div class="card-package darkmode mt-0" style="height: 650px;">
<div class="absolute -top-8 -right-11 hidden xl:block">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/triangle-big.png" alt="">
</div>
<div class="card-package-top" style="margin-top: 0;">
<div class="flex">
<span class="card-package-top-title">Portmaster <span style="color: #029ad0;">Unlimited</span></span>
</div>
<span class="card-package-top-amount">
9.90€
<span class="card-package-top-amount-monthly">/ 1-Month</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">It's time to ditch VPN's.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Everything in <span style="color: #2fcfae; margin-left: 0.3rem;">Supporter</span>
</span>
<span class="card-package-middle-includes">SPN Access
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Multiple Identities
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Geo-Unblocking
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Built for Privacy
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Up to 5 Devices
</span>
</div>
<div class="card-package-bottom" style="display: block;">
<div class="mx-auto space-x-2 flex w-percent-80">
<input class="btn-secondary less-round w-full h-auto py-5" type="submit" name="commit" value="Buy Package" data-disable-with="Buy Package">
<nojs>
<div class="input-counter darkmode h-full">
<input class="input-counter-right" value="1" step="1" min="1" max="4" required="required" class="input-counter-right" type="number" name="charge[quantity]" id="charge_quantity">
</div>
</nojs>
</div>
</div>
</div>
</form>
{% include pricing_card_free.html unique_id="1" %}
{% include pricing_card_supporter.html price="3" interval="1-Month" plan_id="9" %}
{% include pricing_card_unlimited.html price="9.90" interval="1-Month" plan_id="1" %}
</div>
</div>
<div class="content-two">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 transform scale-90 xl:scale-100 gap-5 lg:gap-28 xl:gap-0 justify-center justify-items-center mx-auto" style="align-items: center;">
<div class="card-package darkmode" style="height: 650px;">
<div class="card-package-top">
<div class="flex">
<span class="card-package-top-title">Portmaster Free</span>
</div>
<span class="card-package-top-amount">
Free
<span class="card-package-top-amount-monthly">/ Forever</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">Increase your privacy and security.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Privacy Filter
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Secure DNS
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Network Monitor
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Community Support
</span>
</div>
<div class="card-package-bottom" style="bottom: 36px;">
<div class="hidden lg:block">
{% include download_button.html unique_id="2" %}
</div>
</div>
</div>
<form class="new_charge" id="new_charge" action="https://account.safing.io/charges/checkout" accept-charset="UTF-8" method="get">
<input value="10" autocomplete="off" type="hidden" name="charge[plan_id]" id="charge_package_id">
<input type="hidden" name="new_user" value="true" autocomplete="off" >
<div class="card-package darkmode mt-0" style="height: 650px;">
<div class="absolute -top-8 -right-11 hidden xl:block">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-big.png" alt="">
</div>
<div class="card-package-top" style="margin-top: 0;">
<div class="flex">
<span class="card-package-top-title">Portmaster <span style="color: #2fcfae;">Supporter</span> </span>
</div>
<span class="card-package-top-amount">
30€
<span class="card-package-top-amount-monthly">/ 1-Year</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">We truly appreciate your support.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Everything in Free
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Priority Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Discord Benefits
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-triangle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Reddit Benefits
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-triangle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes-feature">
<span tooltip="coming in the future"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i></span> Early Access to Features
</span>
</div>
<div class="card-package-bottom" style="display: block;">
<div class="mx-auto space-x-2 flex w-percent-80">
<input class="btn-secondary less-round w-full h-auto py-5" type="submit" name="commit" value="Buy Package" data-disable-with="Buy Package">
<nojs>
<div class="input-counter darkmode h-full">
<input class="input-counter-right" value="1" step="1" min="1" max="4" required="required" class="input-counter-right" type="number" name="charge[quantity]" id="charge_quantity">
</div>
</nojs>
</div>
</div>
</div>
</form>
<form class="new_charge" id="new_charge" action="https://account.safing.io/charges/checkout" accept-charset="UTF-8" method="get">
<input value="2" autocomplete="off" type="hidden" name="charge[plan_id]" id="charge_package_id">
<input type="hidden" name="new_user" value="true" autocomplete="off" >
<div class="card-package darkmode mt-0" style="height: 650px;">
<div class="absolute -top-8 -right-11 hidden xl:block">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/triangle-big.png" alt="">
</div>
<div class="card-package-top" style="margin-top: 0;">
<div class="flex">
<span class="card-package-top-title">Portmaster <span style="color: #029ad0;">Unlimited</span></span>
</div>
<span class="card-package-top-amount">
99€
<span class="card-package-top-amount-monthly">/ 1-Year</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">It's time to ditch VPN's.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Everything in <span style="color: #2fcfae; margin-left: 0.3rem;">Supporter</span>
</span>
<span class="card-package-middle-includes">SPN Access
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Multiple Identities
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Geo-Unblocking
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Built for Privacy
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Up to 5 Devices
</span>
</div>
<div class="card-package-bottom" style="display: block;">
<div class="mx-auto space-x-2 flex w-percent-80">
<input class="btn-secondary less-round w-full h-auto py-5" type="submit" name="commit" value="Buy Package" data-disable-with="Buy Package">
<nojs>
<div class="input-counter darkmode h-full">
<input class="input-counter-right" value="1" step="1" min="1" max="4" required="required" class="input-counter-right" type="number" name="charge[quantity]" id="charge_quantity">
</div>
</nojs>
</div>
</div>
</div>
</form>
{% include pricing_card_free.html unique_id="2" %}
{% include pricing_card_supporter.html price="30" interval="1-Year" plan_id="10" %}
{% include pricing_card_unlimited.html price="99" interval="1-Year" plan_id="2" %}
</div>
</div>
</div>

260
spn/index.html
View file

@ -147,264 +147,16 @@ layout: page
<div class="package-billing-bottom">
<div class="content-one">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 transform scale-90 xl:scale-100 gap-5 lg:gap-28 xl:gap-0 justify-center justify-items-center mx-auto" style="align-items: center;">
<div class="card-package darkmode" style="height: 650px;">
<div class="card-package-top">
<div class="flex">
<span class="card-package-top-title">Portmaster Free</span>
</div>
<span class="card-package-top-amount">
Free
<span class="card-package-top-amount-monthly">/ Forever</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">Increase your privacy and security.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Privacy Filter
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Secure DNS
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Network Monitor
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Community Support
</span>
</div>
<div class="card-package-bottom" style="bottom: 36px;">
<div class="hidden lg:block">
{% include download_button.html unique_id="1" %}
</div>
</div>
</div>
<form class="new_charge" id="new_charge" action="https://account.safing.io/charges/checkout" accept-charset="UTF-8" method="get">
<input value="9" autocomplete="off" type="hidden" name="charge[plan_id]" id="charge_package_id">
<input type="hidden" name="new_user" value="true" autocomplete="off" >
<div class="card-package darkmode mt-0" style="height: 650px;">
<div class="absolute -top-8 -right-11 hidden xl:block">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-big.png" alt="">
</div>
<div class="card-package-top" style="margin-top: 0;">
<div class="flex">
<span class="card-package-top-title">Portmaster <span style="color: #2fcfae;">Supporter</span> </span>
</div>
<span class="card-package-top-amount">
3€
<span class="card-package-top-amount-monthly">/ 1-Month</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">We truly appreciate your support.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Everything in Free
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Priority Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Discord Benefits
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-triangle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Reddit Benefits
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-triangle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes-feature">
<span tooltip="coming in the future">
<i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i>
</span> Early Access to Features
</span>
</div>
<div class="card-package-bottom" style="display: block;">
<div class="mx-auto space-x-2 flex w-percent-80">
<input class="btn-secondary less-round w-full h-auto py-5" type="submit" name="commit" value="Buy Package" data-disable-with="Buy Package">
<nojs>
<div class="input-counter darkmode h-full">
<input class="input-counter-right" value="1" step="1" min="1" max="4" required="required" class="input-counter-right" type="number" name="charge[quantity]" id="charge_quantity">
</div>
</nojs>
</div>
</div>
</div>
</form>
<form class="new_charge" id="new_charge" action="https://account.safing.io/charges/checkout" accept-charset="UTF-8" method="get">
<input value="1" autocomplete="off" type="hidden" name="charge[plan_id]" id="charge_package_id">
<input type="hidden" name="new_user" value="true" autocomplete="off" >
<div class="card-package darkmode mt-0" style="height: 650px;">
<div class="absolute -top-8 -right-11 hidden xl:block">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/triangle-big.png" alt="">
</div>
<div class="card-package-top" style="margin-top: 0;">
<div class="flex">
<span class="card-package-top-title">Portmaster <span style="color: #029ad0;">Unlimited</span></span>
</div>
<span class="card-package-top-amount">
9.90€
<span class="card-package-top-amount-monthly">/ 1-Month</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">It's time to ditch VPN's.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Everything in <span style="color: #2fcfae; margin-left: 0.3rem;">Supporter</span>
</span>
<span class="card-package-middle-includes">SPN Access
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Multiple Identities
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Geo-Unblocking
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Built for Privacy
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Up to 5 Devices
</span>
</div>
<div class="card-package-bottom" style="display: block;">
<div class="mx-auto space-x-2 flex w-percent-80">
<input class="btn-primary less-round w-full h-auto py-5" type="submit" name="commit" value="Buy Package" data-disable-with="Buy Package">
<nojs>
<div class="input-counter darkmode h-full">
<input class="input-counter-right" value="1" step="1" min="1" max="4" required="required" class="input-counter-right" type="number" name="charge[quantity]" id="charge_quantity">
</div>
</nojs>
</div>
</div>
</div>
</form>
{% include pricing_card_free.html unique_id="1" %}
{% include pricing_card_supporter.html price="3" interval="1-Month" plan_id="9" %}
{% include pricing_card_unlimited.html price="9.90" interval="1-Month" plan_id="1" %}
</div>
</div>
<div class="content-two">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 transform scale-90 xl:scale-100 gap-5 lg:gap-28 xl:gap-0 justify-center justify-items-center mx-auto" style="align-items: center;">
<div class="card-package darkmode" style="height: 650px;">
<div class="card-package-top">
<div class="flex">
<span class="card-package-top-title">Portmaster Free</span>
</div>
<span class="card-package-top-amount">
Free
<span class="card-package-top-amount-monthly">/ Forever</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">Increase your privacy and security.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Privacy Filter
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Secure DNS
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Network Monitor
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Community Support
</span>
</div>
<div class="card-package-bottom" style="bottom: 36px;">
<div class="hidden lg:block">
{% include download_button.html unique_id="2" %}
</div>
</div>
</div>
<form class="new_charge" id="new_charge" action="https://account.safing.io/charges/checkout" accept-charset="UTF-8" method="get">
<input value="10" autocomplete="off" type="hidden" name="charge[plan_id]" id="charge_package_id">
<input type="hidden" name="new_user" value="true" autocomplete="off" >
<div class="card-package darkmode mt-0" style="height: 650px;">
<div class="absolute -top-8 -right-11 hidden xl:block">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-big.png" alt="">
</div>
<div class="card-package-top" style="margin-top: 0;">
<div class="flex">
<span class="card-package-top-title">Portmaster <span style="color: #2fcfae;">Supporter</span> </span>
</div>
<span class="card-package-top-amount">
30€
<span class="card-package-top-amount-monthly">/ 1-Year</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">We truly appreciate your support.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Everything in Free
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Priority Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Discord Benefits
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-triangle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Reddit Benefits
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle-triangle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes-feature">
<span tooltip="coming in the future">
<i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i>
</span> Early Access to Features
</span>
</div>
<div class="card-package-bottom" style="display: block;">
<div class="mx-auto space-x-2 flex w-percent-80">
<input class="btn-secondary less-round w-full h-auto py-5" type="submit" name="commit" value="Buy Package" data-disable-with="Buy Package">
<nojs>
<div class="input-counter darkmode h-full">
<input class="input-counter-right" value="1" step="1" min="1" max="4" required="required" class="input-counter-right" type="number" name="charge[quantity]" id="charge_quantity">
</div>
</nojs>
</div>
</div>
</div>
</form>
<form class="new_charge" id="new_charge" action="https://account.safing.io/charges/checkout" accept-charset="UTF-8" method="get">
<input value="2" autocomplete="off" type="hidden" name="charge[plan_id]" id="charge_package_id">
<input type="hidden" name="new_user" value="true" autocomplete="off" >
<div class="card-package darkmode mt-0" style="height: 650px;">
<div class="absolute -top-8 -right-11 hidden xl:block">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/triangle-big.png" alt="">
</div>
<div class="card-package-top" style="margin-top: 0;">
<div class="flex">
<span class="card-package-top-title">Portmaster <span style="color: #029ad0;">Unlimited</span></span>
</div>
<span class="card-package-top-amount">
99€
<span class="card-package-top-amount-monthly">/ 1-Year</span>
</span>
<p class="card-package-top-desc" style="max-width: 480px;">It's time to ditch VPN's.</p>
</div>
<div class="card-package-middle">
<span class="card-package-middle-includes">Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Everything in <span style="color: #2fcfae; margin-left: 0.3rem;">Supporter</span>
</span>
<span class="card-package-middle-includes">SPN Access
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Multiple Identities
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Geo-Unblocking
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Built for Privacy
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Up to 5 Devices
</span>
</div>
<div class="card-package-bottom" style="display: block;">
<div class="mx-auto space-x-2 flex w-percent-80">
<input class="btn-primary less-round w-full h-auto py-5" type="submit" name="commit" value="Buy Package" data-disable-with="Buy Package">
<nojs>
<div class="input-counter darkmode h-full">
<input class="input-counter-right" value="1" step="1" min="1" max="4" required="required" class="input-counter-right" type="number" name="charge[quantity]" id="charge_quantity">
</div>
</nojs>
</div>
</div>
</div>
</form>
{% include pricing_card_free.html unique_id="2" %}
{% include pricing_card_supporter.html price="30" interval="1-Year" plan_id="10" %}
{% include pricing_card_unlimited.html price="99" interval="1-Year" plan_id="2" %}
</div>
</div>
</div>