vikarti.anatra/safing-web
1
0
Fork 0
mirror of https://github.com/safing/web synced 2025-04-12 23:19:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add includes download_button

Browse source
This commit is contained in:
Luke Seers 2022-10-12 12:58:04 +02:00
parent 92ce9a8594
commit 53e986a122
39 changed files with 330063 additions and 0 deletions

23
_includes/download_button.html Normal file
View file

@ -0,0 +1,23 @@
<div class="download-button-container">
<label class="download-select-label" for="select-{{ include.unique_id }}"><i class="icon-arrow text-white"></i></label>
<input type="checkbox" id="select-{{ include.unique_id }}" class="download-select-input">
<label class="download-os download-os-windows" for="windows-{{ include.unique_id }}">Windows (.exe)</label>
<input checked="" id="windows-{{ include.unique_id }}" type="radio" class="download-os" name="os-{{ include.unique_id }}">
<div class="download-os-actions">
<a class="button-left" href="{{ site.download_windows_url }}">Download for</a>
<button class="button-right">Windows</button>
</div>
<label class="download-os download-os-ubuntu" for="ubuntu-{{ include.unique_id }}">Debian/Ubuntu (.deb)</label>
<input id="ubuntu-{{ include.unique_id }}" type="radio" class="download-os" name="os-{{ include.unique_id }}">
<div class="download-os-actions">
<a class="button-left" href="{{ site.download_linux_deb_url }}">Download for</a>
<button class="button-right">Ubuntu</button>
</div>
<label class="download-os download-os-fedora" for="fedora-{{ include.unique_id }}">Fedora (.rpm)</label>
<input id="fedora-{{ include.unique_id }}" type="radio" class="download-os" name="os-{{ include.unique_id }}">
<div class="download-os-actions">
<a class="button-left" href="{{ site.download_linux_rpm_url }}">Download for</a>
<button class="button-right">Fedora</button>
</div>
<div class="download-os-menu"></div>
</div>

BIN
assets/img/external/ghacks.png vendored Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 9.1 KiB

BIN
assets/img/external/itsfoss.png vendored Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 4.4 KiB

BIN
assets/img/external/privacytools.png vendored Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 8.7 KiB

BIN
assets/img/external/techlore.png vendored Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 3.8 KiB

32
assets/img/page-specific/landing/wave2.svg Normal file
View file

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
viewBox="0 0 1600 450.9" style="enable-background:new 0 0 1600 450.9;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:url(#SVGID_1_);stroke-width:5.71;stroke-miterlimit:10;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:url(#SVGID_00000104685481286792457230000008921605452208958646_);stroke-width:5.71;stroke-miterlimit:10;}
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:url(#SVGID_00000142152001746109812370000004608932352994816649_);stroke-width:5.71;stroke-miterlimit:10;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-3.753804e-02" y1="180.7746" x2="1600.0376" y2="180.7746">
<stop offset="0" style="stop-color:#3C63AE"/>
<stop offset="0.6238" style="stop-color:#32BDEE"/>
<stop offset="1" style="stop-color:#3C63AE"/>
</linearGradient>
<path class="st0" d="M1600,293.7c-199.2,0-248.6-209.2-490.2-279.2S708.8,271.8,440.2,336.4S111.7,290.6,0,293.7"/>
<linearGradient id="SVGID_00000145019140477983162140000017651460401676970138_" gradientUnits="userSpaceOnUse" x1="-3.753804e-02" y1="226.7746" x2="1600.0376" y2="226.7746">
<stop offset="0" style="stop-color:#3C63AE"/>
<stop offset="0.3845" style="stop-color:#32BDEE"/>
<stop offset="1" style="stop-color:#3C63AE"/>
</linearGradient>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:url(#SVGID_00000145019140477983162140000017651460401676970138_);stroke-width:5.71;stroke-miterlimit:10;" d="
M1600,339.7c-199.2,0-248.6-209.2-490.2-279.2S708.8,317.8,440.2,382.4S111.7,336.6,0,339.7"/>
<linearGradient id="SVGID_00000156552187348551885030000007483777474792072604_" gradientUnits="userSpaceOnUse" x1="-3.753804e-02" y1="270.7746" x2="1600.0376" y2="270.7746">
<stop offset="0" style="stop-color:#3C63AE"/>
<stop offset="0.7236" style="stop-color:#32BDEE"/>
<stop offset="1" style="stop-color:#3C63AE"/>
</linearGradient>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:url(#SVGID_00000156552187348551885030000007483777474792072604_);stroke-width:5.71;stroke-miterlimit:10;" d="
M1600,383.7c-199.2,0-248.6-209.2-490.2-279.2S708.8,361.8,440.2,426.4S111.7,380.6,0,383.7"/>
</svg>
Side by side

After

(image error) Size: 2.4 KiB

BIN
assets/img/page-specific/pricing/filter-list.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 6 KiB

BIN
assets/img/page-specific/pricing/getting-started.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 6.1 KiB

BIN
assets/img/page-specific/pricing/multi-identity.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 7.3 KiB

BIN
assets/img/page-specific/pricing/package-icons/circle-big.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 2.8 KiB

BIN
assets/img/page-specific/pricing/package-icons/circle-triangle.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 3.1 KiB

BIN
assets/img/page-specific/pricing/package-icons/circle.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 2.7 KiB

BIN
assets/img/page-specific/pricing/package-icons/triangle-big.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 2.5 KiB

BIN
assets/img/page-specific/pricing/package-icons/triangle.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 2.3 KiB

BIN
assets/img/page-specific/pricing/payment-methods/amex.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 921 B

BIN
assets/img/page-specific/pricing/payment-methods/bitcoin.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 1.6 KiB

BIN
assets/img/page-specific/pricing/payment-methods/cash.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 803 B

BIN
assets/img/page-specific/pricing/payment-methods/mastercard.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 780 B

BIN
assets/img/page-specific/pricing/payment-methods/monero.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 1.7 KiB

BIN
assets/img/page-specific/pricing/payment-methods/paypal.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 1.1 KiB

BIN
assets/img/page-specific/pricing/payment-methods/visacard.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 1.1 KiB

30
assets/img/page-specific/pricing/wave3.svg Normal file
View file

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
viewBox="0 0 1600 450.9" style="enable-background:new 0 0 1600 450.9;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:url(#SVGID_1_);stroke-width:5.71;stroke-miterlimit:10;}
.st1{fill:none;stroke:url(#SVGID_00000155866279590369718120000006497566973382577570_);stroke-width:5.71;stroke-miterlimit:10;}
.st2{fill:none;stroke:url(#SVGID_00000114036739990644578370000015393792611237818807_);stroke-width:5.71;stroke-miterlimit:10;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-7.920422e-02" y1="270.2201" x2="1600" y2="270.2201" gradientTransform="matrix(1 0 0 -1 0 450.9476)">
<stop offset="0" style="stop-color:#43EA80"/>
<stop offset="0.7174" style="stop-color:#38F8D4"/>
<stop offset="1" style="stop-color:#43EA80"/>
</linearGradient>
<path class="st0" d="M1600,293.7c-199.2,0-248.6-209.2-490.2-279.2s-401,257.3-669.6,321.9S111.7,290.6,0,293.7"/>
<linearGradient id="SVGID_00000145763225531825905070000000587777309620014999_" gradientUnits="userSpaceOnUse" x1="-7.920422e-02" y1="224.2201" x2="1600" y2="224.2201" gradientTransform="matrix(1 0 0 -1 0 450.9476)">
<stop offset="0" style="stop-color:#3C63AE"/>
<stop offset="0.5697" style="stop-color:#32BDEE"/>
<stop offset="1" style="stop-color:#3C63AE"/>
</linearGradient>
<path style="fill:none;stroke:url(#SVGID_00000145763225531825905070000000587777309620014999_);stroke-width:5.71;stroke-miterlimit:10;" d="
M1600,339.7c-199.2,0-248.6-209.2-490.2-279.2s-401,257.3-669.6,321.9S111.7,336.6,0,339.7"/>
<linearGradient id="SVGID_00000094579821163550307540000011785392846497457795_" gradientUnits="userSpaceOnUse" x1="-7.920422e-02" y1="180.2201" x2="1600" y2="180.2201" gradientTransform="matrix(1 0 0 -1 0 450.9476)">
<stop offset="0" style="stop-color:#9866EC"/>
<stop offset="0.7236" style="stop-color:#715DD3"/>
<stop offset="1" style="stop-color:#9866EC"/>
</linearGradient>
<path style="fill:none;stroke:url(#SVGID_00000094579821163550307540000011785392846497457795_);stroke-width:5.71;stroke-miterlimit:10;" d="
M1600,383.7c-199.2,0-248.6-209.2-490.2-279.2s-401,257.3-669.6,321.9S111.7,380.6,0,383.7"/>
</svg>
Side by side

After

(image error) Size: 2.3 KiB

269
download/index.html Normal file
View file

@ -0,0 +1,269 @@
---
layout: page
title: Download
---
<header class="header-three-container mt-16" style="max-width: 90rem; z-index: 1;">
<div class="header-three-left ">
<h1 class="header-three-left-title ml-auto mr-auto lg:mx-0" style="max-width: 250px;">
Download
Portmaster
</h1>
<p class="header-three-left-desc">
It's about time there was a software that gave you the user power and instead of takening it away from you.
</p>
<div class="space-y-4">
<div class="element-x-center-max lg:ml-0">
{% include download_button.html unique_id="1" %}
</div>
<div class="header-three-left-data">
<div class="element-x-center-max lg:ml-0 items-center" style="display: flex;">
<div class="flex items-center">
<span class="block">Version:</span>
<img src="{{ site.img_shields_io_release_url }}" style="filter: invert(1); width: 80px; height: 38px; margin-left: -8px;">
</div>
<div class="flex items-center">
<span class="block">Github Stars:</span>
<img src="{{ site.img_shields_io_stars_url }}" style="filter: invert(1); width: 50px; height: 38px; margin-left: -8px;">
</div>
</div>
</div>
</div>
</div>
<div class="header-three-right">
<div class="absolute space-y-5 hidden xl:block xl:bottom-28 z-20">
<div class="space-y-2" style="width: max-content;">
<div class="flex items-center">
<div>
<span class="block text-white inline-flex">PORTMASTER
</span>
</div>
<div class="horizontal-line" style="height: unset; margin-left: 10px;"></div>
</div>
<div class="flex space-x-5">
<a class="card-blog" target="_blank" href="{{ site.youtube_portmaster_tut_getting_started }}" style="border-width: 2px; border-color: #464646; background-color: #0d0d0d; border-radius: 8px;">
<div class="card-blog-thumbnail">
<img src="{{ site.img_url }}page-specific/pricing/getting-started.png" style="max-width: 365px; max-height: 223px; border-radius: 5px; overflow: hidden;">
<span class="box-icon" style=" margin-top: -1.1rem; margin-left: -0.65rem;">
<i class="icon-youtube text-sm" style="padding: 0.55rem;"></i>
</span>
</div>
</a>
<a class="card-blog" target="_blank" href="{{ site.youtube_portmaster_tut_filter_lists }}" style="border-width: 2px; border-color: #464646; background-color: #0d0d0d; border-radius: 8px;">
<div class="card-blog-thumbnail">
<img src="{{ site.img_url }}page-specific/pricing/filter-list.png" style="max-width: 365px; max-height: 223px; border-radius: 5px; overflow: hidden;">
<span class="box-icon" style=" margin-top: -1.1rem; margin-left: -0.65rem;">
<i class="icon-youtube text-sm" style="padding: 0.55rem;"></i>
</span>
</div>
</a>
</div>
</div>
<div class="space-y-2" style="width: max-content;">
<div class="flex items-center">
<div>
<span class="block text-white inline-flex">SPN
</span>
</div>
<div class="horizontal-line" style="height: unset; margin-left: 10px;"></div>
</div>
<div class="flex space-x-5">
<a class="card-blog" target="_blank" href="{{ site.youtube_spn_tut_multi_identity }}" style="border-width: 2px; border-color: #464646; background-color: #0d0d0d; border-radius: 8px;">
<div class="card-blog-thumbnail">
<img src="{{ site.img_url }}page-specific/pricing/multi-identity.png" style="max-width: 365px; max-height: 223px; border-radius: 5px; overflow: hidden;">
<span class="box-icon" style=" margin-top: -1.1rem; margin-left: -0.65rem;">
<i class="icon-youtube text-sm" style="padding: 0.55rem;"></i>
</span>
</div>
</a>
</div>
</div>
</div>
<div class="element-x-center max-w-4xl mx-auto xl:opacity-50">
<video class="md:mt-20" loop autoplay width="auto" height="auto">
<source src="{{ site.assets_url }}/video/page-specific/landing/video.webm" type="video/webm">
</video>
</div>
</div>
</header>
<section class="general-layout">
<div class="influence-container" id="influences">
<div class="influence-container-top">
<div class="influence-container-top-title-date">
<h2 class="influence-container-top-title">
Desktops
</h2>
</div>
</div>
<div class="influence-container-bottom">
<div class="card-influence darkmode hover-scale-out">
<div class="card-influence-top ">
<div class="card-influence-title-date flex space-x-2" style="align-items: center;">
<span class="card-influence-top-title">Windows</span>
<span class="card-influence-top-date">64bit</span>
</div>
</div>
<div class="card-influence-bottom">
<div class="card-influence-bottom-funding">
<span class="card-influence-bottom-funding-date">Additional</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="{{ site.installer_checksums }}" class="link-primary-external">Installer Checksums</a>
</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="https://docs.safing.io/portmaster/faq#install" class="link-primary">Installing FAQ</a>
</span>
</div>
<div class="card-influence-bottom-funding">
<br>
<br>
</div>
<div class="col-container-center w-full md:w-max text-center md:text-left pt-10">
<a class="btn-primary" href="{{ site.download_windows_url }}"><i class="icon-windows text-md mr-2"></i>Download</a>
<a target="_blank" class="btn-secondary" href="https://docs.safing.io/portmaster/install/windows">Go to Docs</a>
</div>
</div>
</div>
<div class="card-influence darkmode hover-scale-out">
<div class="card-influence-top ">
<div class="card-influence-title-date flex space-x-2" style="align-items: center;">
<span class="card-influence-top-title">Debian/Ubuntu</span>
<span class="card-influence-top-date">64bit</span>
</div>
</div>
<div class="card-influence-bottom">
<div class="card-influence-bottom-funding">
<span class="card-influence-bottom-funding-date">Dependencies</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="https://wiki.gnome.org/Projects/NetworkManager" class="link-primary-external">Network Manager</a>
<span> (Optional)</span>
<span tooltip="This is for better integration. It is recommended, but optional."> <i class="icon-info text-gray-500 ml-1"></i></span>
</span>
</div>
<div class="card-influence-bottom-funding">
<span class="card-influence-bottom-funding-date">Additional</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="{{ site.installer_checksums }}" class="link-primary-external">Installer Checksums</a>
</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="https://docs.safing.io/portmaster/faq#install" class="link-primary">Installing FAQ</a>
</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="https://linuxconfig.org/install-deb-file-on-ubuntu-20-04-focal-fossa-linux" class="link-primary-external">How to install .deb file?</a>
</span>
</div>
<div class="col-container-center w-full md:w-max text-center md:text-left pt-10">
<a class="btn-primary" href="{{ site.download_linux_deb_url }}"><i class="icon-ubuntu text-md mr-2"></i>Download</a>
<a target="_blank" class="btn-secondary" href="https://docs.safing.io/portmaster/install/linux">Go to Docs</a>
</div>
</div>
</div>
<div class="card-influence darkmode hover-scale-out">
<div class="card-influence-top ">
<div class="card-influence-title-date flex space-x-2" style="align-items: center;">
<span class="card-influence-top-title">Fedora</span>
<span class="card-influence-top-date">64bit</span>
</div>
</div>
<div class="card-influence-bottom">
<div class="card-influence-bottom-funding">
<span class="card-influence-bottom-funding-date">Dependencies</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="https://wiki.gnome.org/Projects/NetworkManager" class="link-primary-external">Network Manager</a>
<span> (Optional)</span>
<span tooltip="This is for better integration. It is recommended, but optional."> <i class="icon-info text-gray-500 ml-1"></i></span>
</span>
</div>
<div class="card-influence-bottom-funding">
<span class="card-influence-bottom-funding-date">Additional</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="{{ site.installer_checksums }}" class="link-primary-external">Installer Checksums</a>
</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="https://docs.safing.io/portmaster/faq#install" class="link-primary">Installing FAQ</a>
</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="https://itsfoss.com/install-rpm-files-fedora/" class="link-primary-external">How to install .rpm file?</a>
</span>
</div>
<div class="col-container-center w-full md:w-max text-center md:text-left pt-10">
<a class="btn-primary" href="{{ site.download_linux_rpm_url }}"><i class="icon-fedora text-md mr-2"></i>Download</a>
<a target="_blank" class="btn-secondary" href="https://docs.safing.io/portmaster/install/linux">Go to Docs</a>
</div>
</div>
</div>
<div class="card-influence darkmode hover-scale-out">
<div class="card-influence-top ">
<div class="card-influence-title-date flex space-x-2" style="align-items: center;">
<span class="card-influence-top-title">Arch</span>
<span class="card-influence-top-date">64bit</span>
</div>
</div>
<div class="card-influence-bottom">
<div class="card-influence-bottom-funding">
<span class="card-influence-bottom-funding-date">Dependencies</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="https://wiki.gnome.org/Projects/NetworkManager" class="link-primary-external">Network Manager</a>
<span> (Optional)</span>
<span tooltip="This is for better integration. It is recommended, but optional."> <i class="icon-info text-gray-500 ml-1"></i></span>
</span>
</div>
<div class="card-influence-bottom-funding">
<span class="card-influence-bottom-funding-date">Additional</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="{{ site.installer_checksums }}" class="link-primary-external">Installer Checksums</a>
</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="https://docs.safing.io/portmaster/faq#install" class="link-primary">Installing FAQ</a>
</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="https://itsfoss.com/aur-arch-linux/" class="link-primary-external">How to install from AUR?</a>
</span>
</div>
<div class="pt-5">
<div class="input-counter darkmode">
<span class="input-counter-left opacity-75" style="user-select: none;">
Package Name
</span>
<input class="input-counter-right text-base font-normal" disabled value="portmaster-stub-bin" type="text" >
</div>
</div>
<div class="col-container-center w-full md:w-max text-center md:text-left">
<a target="_blank" class="btn-primary" href="{{ site.download_arch_url }}">Download (AUR)</a>
<a target="_blank" class="btn-secondary" href="https://docs.safing.io/portmaster/install/linux">Go to Docs</a>
</div>
</div>
</div>
<div class="card-influence darkmode hover-scale-out">
<div class="card-influence-top ">
<div class="card-influence-title-date flex space-x-2" style="align-items: center;">
<span class="card-influence-top-title">Other Linux</span>
<span class="card-influence-top-date">64bit</span>
</div>
</div>
<div class="card-influence-bottom">
<div class="card-influence-bottom-funding">
<span class="card-influence-bottom-funding-date">Dependencies</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="https://wiki.gnome.org/Projects/NetworkManager" class="link-primary-external">Network Manager</a>
<span> (Optional)</span>
<span tooltip="This is for better integration. It is recommended, but optional."> <i class="icon-info text-gray-500 ml-1"></i></span>
</span>
</div>
<div class="card-influence-bottom-funding">
<span class="card-influence-bottom-funding-date">Additional</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="{{ site.installer_checksums }}" class="link-primary-external">Installer Checksums</a>
</span>
<span class="card-influence-bottom-funding-amount">
<a target="_blank" href="https://docs.safing.io/portmaster/faq#install" class="link-primary">Installing FAQ</a>
</span>
</div>
<div class="col-container-center w-full md:w-max text-center md:text-left pt-10">
<a target="_blank" class="btn-primary" href="https://docs.safing.io/portmaster/install/linux#manual-install-and-launching">Manual Install Guide</a>
</div>
</div>
</div>
</div>
</div>
</section>

162
features/index.html Normal file
View file

@ -0,0 +1,162 @@
---
layout: page
title: Features
---
<section class="general-layout" style="margin-top: -5rem;">
<div class="space-y-28">
<div class="download-container" id="features">
<h2 class="download-container-title">
Explore All Portmaster Features
</h2>
<div class="space-y-8 max-w-3xl mx-auto">
<p class="download-container-extra">
With Portmaster's great defaults your privacy improves without any effort. And if you want to configure and control everything down to the last detail - Portmaster has you covered too!
</p>
</div>
</div>
<div class="showcase-one-container-reverse">
<div class="showcase-one-left" style="max-width: 1150px;">
<img src="{{ site.img_url }}page-specific/portmaster/monitor-network-activity.png" alt="">
</div>
<div class="showcase-one-right">
<h2 class="showcase-one-right-title" style="max-width: 350px;">
Monitor All Network Activity
</h2>
<p class="showcase-one-right-desc">
Discover everything that is happening on your computer. Expose every
connection your applications make and detect evil ones. Finally get
the power to act accordingly.
</p>
</div>
</div>
</div>
<div class="showcase-one-container">
<div class="showcase-one-left" style="max-width: 850px;">
<img src="{{ site.img_url }}page-specific/portmaster/manually-allow-ord-block-connections.png" alt="">
</div>
<div class="showcase-one-right">
<h2 class="showcase-one-right-title" style="max-width: 350px;">
Block Domains
</h2>
<p class="showcase-one-right-desc">
Many programs connect to the Internet without your knowledge. When you
find unwanted connections, you can now simply block them.
</p>
</div>
</div>
<div class="showcase-one-container-reverse">
<div class="showcase-one-left" style="max-width: 850px;">
<img src="{{ site.img_url }}page-specific/portmaster/block-trackers-system-wide.png" alt="">
</div>
<div class="showcase-one-right">
<h2 class="showcase-one-right-title" style="max-width: 450px;">
Auto-Block via Selected Filter Lists
</h2>
<p class="showcase-one-right-desc">
Automatically block ads, trackers and malware hosts via trusted domain-lists,
which are also used by Ad-Blockers, etc. Easily change the defaults to fit
your needs.
</p>
</div>
</div>
<div class="showcase-one-container">
<div class="showcase-one-left" style="max-width: 950px;">
<img src="{{ site.img_url }}page-specific/portmaster/enforce-dns-over-tls.png" alt="">
</div>
<div class="showcase-one-right">
<h2 class="showcase-one-right-title" style="max-width: 250px;">
Enforce Secure DNS
</h2>
<p class="showcase-one-right-desc">
Even with invasive connections gone, you do not want to share your dns requests
out in the open. With the Portmaster, you can easily re-route all your dns
queries to a DNS-over-TLS provider of your choice.
</p>
</div>
</div>
<div class="showcase-two-container">
<div class="showcase-two-top-left" style="max-width: 73rem;">
<h2 class="showcase-two-top-title" style="max-width: 550px;">
Portmaster News
</h2>
<p class="showcase-two-top-desc" style="max-width: 430px;">
Discover everything that is happing on your computer. Expose every connection your applications make.
</p>
</div>
<div class="showcase-two-bottom" style="max-width: 100%;">
<div class="blogpod-container" style="margin-top: 0;">
<div class="blogpod-container-bottom">
{% assign all_publications = site.publications | sort: "date" | reverse %}
{% for publication in all_publications limit: 3 %}
{% if publication.category == "blog" %}
{% assign post = publication %}
{% include thumbnail_blog.html pre_header="BLOG" %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
<!-- <div class="showcase-bg"></div> -->
</div>
<div class="showcase-one-container-reverse">
<div class="showcase-one-left" style="max-width: 850px;">
<img src="{{ site.img_url }}page-specific/portmaster/explore-the-docs-and-source-code.png" alt="">
</div>
<div class="showcase-one-right">
<h2 class="showcase-one-right-title" style="max-width: 350px;">
Explore the Docs and Source Code
</h2>
<p class="showcase-one-right-desc">
In the age of Mass Surveillance, what good is a service when you cannot see what
it is really doing? We believe in open source. We also document everything
as good as we can.
</p>
<div class="col-container w-full text-left md:text-center lg:w-max lg:text-left">
<a class="btn-secondary" href="{{ site.docs_url }}">Checkout the docs</a>
<a class="btn-tertiary hover-opacity-out" href="{{ site.github_url }}/portmaster"><i class="icon-github text-md mr-2"></i>Inspect source code</a>
</div>
</div>
</div>
<div class="showcase-one-container-reverse">
<div class="showcase-one-left" style="max-width: 950px;">
<img src="{{ site.img_url }}page-specific/portmaster/set-global-and-per-app-configuration.png" alt="">
</div>
<div class="showcase-one-right">
<h2 class="showcase-one-right-title" style="max-width: 350px;">
Set Global & per‑App Settings
</h2>
<p class="showcase-one-right-desc">
Make your own rules. Completely cut off applications from the
Internet. Or block all p2p connections except for certain apps.
Or never connect to specific countries. The Portmaster has you
covered.
</p>
</div>
</div>
<div class="download-container">
<div class="card-package darkmode relative mx-auto" style="max-width: 1210px; width: 100%;">
<div class="card-package-top" style="margin-top: 0;">
<span class="card-package-top-amount" style="font-size: 2rem;">
Open Source & Free
</span>
<p class="card-package-top-desc" style="max-width: 480px;">The free version is very powerful tool, but by buying a package you support the devlopment of the portmaster.</p>
</div>
<div class="card-package-bottom transform scale-105" style="position: absolute; width: 100%; left: 0; bottom: 0px; display: flex; justify-content: end; height: 100%;">
<div class="hidden lg:block" style="display: flex; align-items: center; margin-right: 4rem;">
{% include download_button.html unique_id="2" %}
</div>
</div>
</div>
<div class="flex mx-auto w-max mt-8 space-x-8 items-center" style="align-items: center;">
<p class="block text-safing-gray-400">Seen and featured on</p>
<div class=" space-x-8 hidden lg:flex" style="align-items: center;">
<a href="{{ site.seen_itsfoss_url }}" class="hover-scale-in cursor-pointer hover-grayscale-in"><img src="{{ site.img_url }}/external/itsfoss.png"></a>
<a href="{{ site.seen_ghacks_url }}" class="hover-scale-in cursor-pointer hover-grayscale-in"><img src="{{ site.img_url }}/external/ghacks.png"></a>
<a href="{{ site.seen_techlore_url }}" class="hover-scale-in cursor-pointer hover-grayscale-in"><img src="{{ site.img_url }}/external/techlore.png"></a>
<a href="{{ site.seen_privacytools_url }}" class="hover-scale-in cursor-pointer hover-grayscale-in"><img src="{{ site.img_url }}/external/privacytools.png"></a>
</div>
</div>
</div>
</section>

490
pricing/index.html Normal file
View file

@ -0,0 +1,490 @@
---
layout: page
title: Prcing
---
<header class="header-two-container mb-64 mt-20">
<div class="header-two-top">
<h1 class="header-two-top-title" style="margin-top: 0.3rem;">
Pricing
</h1>
<p class="header-two-top-desc" style="max-width: 650px;">
Built from scratch and designed to truly protect your privacy from mass surveillance.
</p>
</div>
<div class="header-two-bottom" style="margin-top: 1.85rem;">
<div class="element-x-center max-w-sm md:max-w-7xl">
<div class="package-billing darkmode">
<div class="package-billing-top">
<div class="package-billing-top-line-left"></div>
<div class="package-billingtop-top-center">
<div class="package-billingtop-top-center-inner">
<span>Per Month</span>
<span>Per Year</span>
</div>
</div>
<div class="package-billing-top-line-right"></div>
</div>
<input class="package-billing-toggle darkmode" type="checkbox" id="consent_text" name="consent_text" value="yes">
<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 tooltip="Portmaster is the base that deals with all our plugins"> <i class="icon-info text-gray-500 ml-1"></i></span>
</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="1" autocomplete="off" type="hidden" name="charge[package_id]" id="charge_package_id">
<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 tooltip="Portmaster is the base that deals with all our plugins"> <i class="icon-info text-gray-500 ml-1"></i></span>
</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"></span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Early Access to Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl 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>
</div>
<div class="card-package-bottom" style="display: block;">
<span class="element-x-center-max mt-4 text-sm">Billing does <strong>NOT</strong> auto-renew</span>
<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[package_id]" id="charge_package_id">
<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 tooltip="Portmaster is the base that deals with all our plugins"> <i class="icon-info text-gray-500 ml-1"></i></span>
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Everything in <span style="color: #2fcfae;">Supporter</span>
</span>
<span class="card-package-middle-includes">SPN Accress
</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>
</div>
<div class="card-package-bottom" style="display: block;">
<span class="element-x-center-max mt-4 text-sm">Billing does <strong>NOT</strong> auto-renew</span>
<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>
</div>
</div>
<div class="content-two">
</div>
</div>
</div>
<div class="flex mx-auto w-max mt-8 space-x-8 items-center opacity-50">
<div class="space-x-8 hidden lg:flex items-center">
<img src="{{ site.img_url }}page-specific/pricing/payment-methods/mastercard.png">
<img src="{{ site.img_url }}page-specific/pricing/payment-methods/visacard.png">
<img src="{{ site.img_url }}page-specific/pricing/payment-methods/amex.png">
<img src="{{ site.img_url }}page-specific/pricing/payment-methods/paypal.png">
<img src="{{ site.img_url }}page-specific/pricing/payment-methods/cash.png">
<img src="{{ site.img_url }}page-specific/pricing/payment-methods/monero.png">
<img src="{{ site.img_url }}page-specific/pricing/payment-methods/bitcoin.png">
</div>
</div>
</div>
<div class=" mt-10">
<div class="card-package darkmode relative mx-auto" style="max-width: 1210px; width: 100%;">
<div class="card-package-top" style="margin-top: 0;">
<span class="card-package-top-amount" style="font-size: 2rem;">
Open Source & Free
</span>
<p class="card-package-top-desc" style="max-width: 480px;">The free version is very powerful tool, but by buying a package you support the devlopment of the portmaster.</p>
</div>
<div class="card-package-bottom transform scale-105" style="position: absolute; width: 100%; left: 0; bottom: 0px; display: flex; justify-content: end; height: 100%;">
<div class="hidden lg:block" style="display: flex; align-items: center; margin-right: 4rem;">
{% include download_button.html unique_id="2" %}
</div>
</div>
</div>
<div class="flex mx-auto w-max mt-8 space-x-8 items-center">
<p class="block text-safing-gray-400">Seen and featured on</p>
<div class="space-x-8 hidden lg:flex items-center">
<a href="{{ site.seen_itsfoss_url }}" class="hover-scale-in cursor-pointer hover-grayscale-in"><img src="{{ site.img_url }}/external/itsfoss.png"></a>
<a href="{{ site.seen_ghacks_url }}" class="hover-scale-in cursor-pointer hover-grayscale-in"><img src="{{ site.img_url }}/external/ghacks.png"></a>
<a href="{{ site.seen_techlore_url }}" class="hover-scale-in cursor-pointer hover-grayscale-in"><img src="{{ site.img_url }}/external/techlore.png"></a>
<a href="{{ site.seen_privacytools_url }}" class="hover-scale-in cursor-pointer hover-grayscale-in"><img src="{{ site.img_url }}/external/privacytools.png"></a>
</div>
</div>
</div>
</div>
</div>
<div class="header-bg">
<div class="wave-contrainer" style="z-index: -1; bottom: unset; top: 440px; opacity: .45;">
<div class="wave-background" style="background-image: url({{ site.img_url }}page-specific/pricing/wave3.svg); height: 195px; position: unset;"></div>
</div>
</div>
</header>
<section class="general-layout">
<div class="showcase-two-container">
<div class="showcase-two-top-left" style="max-width: 73rem;">
<h2 class="showcase-two-top-title" style="max-width: 550px;">
Comparison Chart
</h2>
<p class="showcase-two-top-desc" style="max-width: 430px;">
Discover everything that is happing on your computer. Expose every connection your applications make.
</p>
</div>
<div class="showcase-two-bottom" style="max-width: 100%;">
<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-10 justify-center justify-items-center mx-auto" style="align-items: center;">
<div class="card-package darkmode" style="height: 1016px;">
<div class="card-package-top">
<div class="flex">
<span class="card-package-top-title">Portmaster Free</span>
<!-- <span tooltip="Compared to Monthly &quot;Beta&quot; Prices" class="ml-auto bg-safing-gray-100 text-center rounded-full px-5 py-1 inline-flex text-sm">Save 36%</span> -->
</div>
<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"> Portmaster 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"></span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Record App History
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Early Access to Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> VM Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Docker Support
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> SPN
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Multiple Identities
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Auto Geo-Unblocking
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes"> Socials
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Discord User Flair
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Private Discord Channel
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Reddit User Flair
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes"> Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Community Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Priority Support
</span>
</div>
<div class="card-package-bottom" style="bottom: 36px;">
<div class="hidden lg:block">
{% include download_button.html unique_id="3" %}
</div>
</div>
</div>
<div class="card-package darkmode mt-0" style="height: 1016px;">
<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>
<!-- <span tooltip="Compared to Monthly &quot;Beta&quot; Prices" class="ml-auto bg-safing-gray-100 text-center rounded-full px-5 py-1 inline-flex text-sm">Save 36%</span> -->
</div>
<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"> Portmaster 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"></span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Record App History
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Early Access to Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> VM Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Docker Support
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> SPN
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Multiple Identities
</span>
<span class="card-package-middle-includes-feature"><i class="icon-cross text-red-500 mr-1"></i> Auto Geo-Unblocking
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes"> Socials
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Discord User Flair
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle.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> Private Discord Channel
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Reddit User Flair
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/circle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes"> Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Community Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Priority Support
</span>
</div>
<div class="card-package-bottom">
<a class="btn-secondary justify-center less-round" href="" style="background-color: #2a2a2a; width: 80%; border-radius: 7px !important; padding-top: 1.2rem; padding-bottom: 1.2rem;">Get Started</a>
</div>
</div>
<div class="card-package darkmode" style="height: 1016px;">
<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>
<!-- <span tooltip="Compared to Monthly &quot;Beta&quot; Prices" class="ml-auto bg-safing-gray-100 text-center rounded-full px-5 py-1 inline-flex text-sm">Save 36%</span> -->
</div>
<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"> Portmaster 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"></span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Record App History
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Early Access to Features
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> VM Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Docker Support
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> SPN
</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> Auto Geo-Unblocking
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes"> Socials
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Discord User Flair
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/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> Private Discord Channel
</span>
<span class="card-package-middle-includes-feature"><i class="icon-alarm-clock-time-timer text-gray-500 text-xl mr-1"></i> Reddit User Flair
<span class="ml-1">
<img src="{{ site.img_url }}page-specific/pricing/package-icons/triangle.png" style="width: 19px; display: inline-block;" alt="">
</span>
</span>
<span class="card-package-middle-includes"></span>
<span class="card-package-middle-includes"> Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Community Support
</span>
<span class="card-package-middle-includes-feature"><i class="icon-tick text-green-500 mr-1"></i> Priority Support
</span>
</div>
<div class="card-package-bottom">
<a class="btn-primary justify-center less-round" href="" style=" width: 80%; border-radius: 7px !important; padding-top: 1.2rem; padding-bottom: 1.2rem;">Get Started</a>
</div>
</div>
</div>
</div>
<!-- <div class="showcase-bg"></div> -->
</div>
<div class="showcase-one-container-reverse">
<div class="showcase-one-left" style="max-width: 1050px;">
<img src="{{ site.img_url }}page-specific/business-model/provide-local-value-for-free-forever.png" alt="">
</div>
<div class="showcase-one-right">
<h2 class="showcase-one-right-title" style="max-width: 450px;">
Our Transparent Business Model
</h2>
<p class="showcase-one-right-desc">
Everybody deserves privacy, not only the wealthy. That is why
all local privacy features are free, and will remain so forever.
This fits perfectly into the Freemium business model.
</p>
<a class="btn-secondary" href="{{ site.portmaster_url }}">Discover the portmaster</a>
</div>
</div>
<div class="faq-container mb-60" id="faq">
<div class="faq-container-top">
<h2 class="faq-container-top-title">
FAQ
</h2>
<p class="faq-container-top-desc">
You have a question? We answered some already, but you
can always contact us at <a class="link-primary" href="mailto:hello@safing.io">hello@safing.io</a>
</p>
</div>
<div class="faq-container-bottom">
{% for faq in site.data.faq.spn %}
<div class="faq-container-bottom-question">
<div class="card-faq darkmode hover-scale-out">
<label class="card-label" for="card-toggle-anchor-{{ forloop.index }}">
<div class="wrapper-left">
<div class="card-title">
<h3 class="title">
{{ faq.q }}
</h3>
</div>
</div>
<div class="wrapper-right">
<i class="icon-arrow"></i>
</div>
</label>
<input class="card-input-toggle" id="card-toggle-anchor-{{ forloop.index }}" type="checkbox">
<div class="card-dropdown-toggle">
<div class="card-dropdown-content">
{{ faq.a }}
{% if faq.link %}
<br>
<br>
<a class="link-primary" href="{{ faq.link.url }}">{{ faq.link.text }}</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
{% include source_code_faq.html %}
</div>
</div>
</section>

BIN
vendor/safingTailwind-1.10.zip vendored Normal file
View file

Binary file not shown.

7
vendor/safingTailwind/fonts/safing-icons-v1.6/Read Me.txt vendored Normal file
View file

@ -0,0 +1,7 @@
Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

152
vendor/safingTailwind/fonts/safing-icons-v1.6/demo-files/demo.css vendored Normal file
View file

@ -0,0 +1,152 @@
body {
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: 1em;
line-height: 1.5;
color: #555;
background: #fff;
}
h1 {
font-size: 1.5em;
font-weight: normal;
}
small {
font-size: .66666667em;
}
a {
color: #e74c3c;
text-decoration: none;
}
a:hover, a:focus {
box-shadow: 0 1px #e74c3c;
}
.bshadow0, input {
box-shadow: inset 0 -2px #e7e7e7;
}
input:hover {
box-shadow: inset 0 -2px #ccc;
}
input, fieldset {
font-family: sans-serif;
font-size: 1em;
margin: 0;
padding: 0;
border: 0;
}
input {
color: inherit;
line-height: 1.5;
height: 1.5em;
padding: .25em 0;
}
input:focus {
outline: none;
box-shadow: inset 0 -2px #449fdb;
}
.glyph {
font-size: 16px;
width: 15em;
padding-bottom: 1em;
margin-right: 4em;
margin-bottom: 1em;
float: left;
overflow: hidden;
}
.liga {
width: 80%;
width: calc(100% - 2.5em);
}
.talign-right {
text-align: right;
}
.talign-center {
text-align: center;
}
.bgc1 {
background: #f1f1f1;
}
.fgc1 {
color: #999;
}
.fgc0 {
color: #000;
}
p {
margin-top: 1em;
margin-bottom: 1em;
}
.mvm {
margin-top: .75em;
margin-bottom: .75em;
}
.mtn {
margin-top: 0;
}
.mtl, .mal {
margin-top: 1.5em;
}
.mbl, .mal {
margin-bottom: 1.5em;
}
.mal, .mhl {
margin-left: 1.5em;
margin-right: 1.5em;
}
.mhmm {
margin-left: 1em;
margin-right: 1em;
}
.mls {
margin-left: .25em;
}
.ptl {
padding-top: 1.5em;
}
.pbs, .pvs {
padding-bottom: .25em;
}
.pvs, .pts {
padding-top: .25em;
}
.unit {
float: left;
}
.unitRight {
float: right;
}
.size1of2 {
width: 50%;
}
.size1of1 {
width: 100%;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.hidden-true {
display: none;
}
.textbox0 {
width: 3em;
background: #f1f1f1;
padding: .25em .5em;
line-height: 1.5;
height: 1.5em;
}
#testDrive {
display: block;
padding-top: 24px;
line-height: 1.5;
}
.fs0 {
font-size: 16px;
}
.fs1 {
font-size: 32px;
}

30
vendor/safingTailwind/fonts/safing-icons-v1.6/demo-files/demo.js vendored Normal file
View file

@ -0,0 +1,30 @@
if (!('boxShadow' in document.body.style)) {
document.body.setAttribute('class', 'noBoxShadow');
}
document.body.addEventListener("click", function(e) {
var target = e.target;
if (target.tagName === "INPUT" &&
target.getAttribute('class').indexOf('liga') === -1) {
target.select();
}
});
(function() {
var fontSize = document.getElementById('fontSize'),
testDrive = document.getElementById('testDrive'),
testText = document.getElementById('testText');
function updateTest() {
testDrive.innerHTML = testText.value || String.fromCharCode(160);
if (window.icomoonLiga) {
window.icomoonLiga(testDrive);
}
}
function updateSize() {
testDrive.style.fontSize = fontSize.value + 'px';
}
fontSize.addEventListener('change', updateSize, false);
testText.addEventListener('input', updateTest, false);
testText.addEventListener('change', updateTest, false);
updateSize();
}());

29256
vendor/safingTailwind/fonts/safing-icons-v1.6/demo.html vendored Normal file
View file

File diff suppressed because it is too large Load diff

2097
vendor/safingTailwind/fonts/safing-icons-v1.6/fonts/safing-icons.svg vendored Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

(image error) Size: 5 MiB

BIN
vendor/safingTailwind/fonts/safing-icons-v1.6/fonts/safing-icons.ttf vendored Normal file
View file

Binary file not shown.

BIN
vendor/safingTailwind/fonts/safing-icons-v1.6/fonts/safing-icons.woff vendored Normal file
View file

Binary file not shown.

1
vendor/safingTailwind/fonts/safing-icons-v1.6/selection.json vendored Normal file
View file

File diff suppressed because one or more lines are too long

6287
vendor/safingTailwind/fonts/safing-icons-v1.6/style.css vendored Normal file
View file

File diff suppressed because it is too large Load diff

10464
vendor/safingTailwind/fonts/safing-icons-v1.6/style.scss vendored Normal file
View file

File diff suppressed because it is too large Load diff

2091
vendor/safingTailwind/fonts/safing-icons-v1.6/variables.scss vendored Normal file
View file

File diff suppressed because it is too large Load diff

BIN
vendor/safingTailwind/fonts/safing-icons.woff2 vendored Normal file
View file

Binary file not shown.

278672
vendor/safingTailwind/safingTailwind-1.10.css vendored Normal file
View file

File diff suppressed because it is too large Load diff