Merge pull request #121 from safing/feature/website-restructure

Website restructure
This commit is contained in:
Luke Seers 2021-01-28 17:19:10 +01:00 committed by GitHub
commit 431e57c85e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 393 additions and 304 deletions

View file

@ -27,6 +27,7 @@ esa_bic_url: /esa-bic/
help_url: /support/
newsletter_url: /newsletter/
ownership_url: /ownership/
business_model_url: /business-model/
podcast_url: /podcast/
portmaster_url: /portmaster/
privacy_url: /privacy/
@ -36,12 +37,10 @@ team_url: /team/
terms_url: /terms/
video_url: /video/
whitepaper_url: /files/whitepaper/Gate17.pdf
vpn_comparison_url: /blog/2020/01/22/how-the-spn-compares-to-vpns/
tor_comparison_url: /blog/2020/01/22/how-the-spn-compares-to-tor/
### external
account_server_url: https://account.safing.io/
assets_server_url: https://assets.safing.io/
company_agreement_url: https://www.firmenmonitor.at/Secure/CompanyDetail.aspx?CID=761761
@ -55,6 +54,7 @@ kickstarter_url: https://www.kickstarter.com/projects/safingio/spn
reddit_url: https://reddit.com/r/safing
twitter_url: https://twitter.com/SafingIO
youtube_channel_url: https://www.youtube.com/channel/UC_6TW053IlS4M22g7CxnukA
docs_url: https://docs.safing.io/
### donations
donations:

View file

@ -38,8 +38,14 @@ spn:
- q: Is there a free trial version for people interested in the SPN?
a: No. Providing the network costs us money, so we charge accordingly. However, the privacy filter and DNS Resolver, which add a great value to your privacy, are and will remain free to use.
portmaster:
- q: How do you make money? What is the catch?
a: Our business model is Freemium. First, provide local privacy for free, forever. Second, let happy users support us by paying for a powerful VPN alternative. Third, reinvest earnings into making all our products better.
link:
text: Find out more about the VPN alternative.
url: https://safing.io/spn/
- q: Since the Portmaster can block ads and trackers, do I still need an ad-blocker for my browser?
a: Yes, we highly recommend to continue using adblockers, such as uBlock Origin, uMatrix, or similar. They give you more fine grained control over domains. iE you can allow certain domains to allow css files & images while blocking cookies & javascripts. The Portmaster cannot make this distinction.
- q: What platforms do you support?
a: Currently we support Windows and Linux. Mac and Mobile are planned, but are further down the road.
# ## The Portmaster can block ads and trackers. Do I still need a ad-blocking web extension?

View file

@ -33,9 +33,6 @@
<li class="mt-3 block mr-0">
<a href="{{ site.ownership_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Ownership</a>
</li>
<li class="mt-3 block mr-0">
<a href="{{ site.next_page_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out"> What's Next?</a>
</li>
<li class="mt-3 block mr-0">
<a href="{{ site.help_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Get Help</a>
</li>
@ -49,6 +46,9 @@
<div class="flex" style="width: max-content;">
<ul class="list-reset">
<li class="block mr-0">
<a href="{{ site.next_page_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out"> What's Next?</a>
</li>
<li class="mt-3 block mr-0">
<a href="{{ site.blog_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Blog</a>
</li>
<li class="mt-3 block mr-0">
@ -81,7 +81,10 @@
<div class="flex">
<ul class="list-reset mb-6">
<li class="block mr-0">
<a href="{{ site.portmaster_url }}#download" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Download</a>
<a href="{{ site.portmaster_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Discover</a>
</li>
<li class="mt-3 block mr-0">
<a href="{{ site.docs_url }}portmaster/architecture/overview/" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Documentation</a>
</li>
<li class="mt-3 block mr-0">
<a href="{{ site.github_url }}/portmaster/" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Source Code</a>
@ -112,7 +115,10 @@
<div class="flex">
<ul class="list-reset mb-6">
<li class="block mr-0">
<a href="{{ site.account_server_url }}pricing/" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Pricing</a>
<a href="{{ site.spn_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Discover</a>
</li>
<li class="mt-3 block mr-0">
<a href="{{ site.whitepaper_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Whitepaper</a>
</li>
<li class="mt-3 block mr-0">
<a href="{{ site.github_url }}/spn/" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Source Code</a>
@ -128,17 +134,14 @@
<li class="mt-3 block mr-0">
<a href="{{ site.vpn_comparison_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">vs VPNs</a>
</li>
<li class="mt-3 block mr-0">
<a href="{{ site.whitepaper_url }}" class="no-underline hover:opacity-100 opacity-55 text-white transition duration-150 ease-in-out">Whitepaper</a>
</li>
</ul>
</div>
</div>
</div>
<div class="text-sm pt-20">
<div class="text-sm pt-20 pb-4">
<div class="lg:flex md:mx-auto" style="width: max-content;">
<p class="md:text-center leading-6 text-white opacity-25">
&copy; 2020 Safing ICS Technologies GmbH
&copy; {{ site.time | date: '%Y' }} Safing ICS Technologies GmbH
</p>
<ul class=" pt-5 lg:pt-0 md:flex">
<li class="lg:pl-16">
@ -152,5 +155,8 @@
</li>
</ul>
</div>
<p class="md:text-center leading-6 text-white opacity-25 pt-10 md:pt-4">
Companies mentioned are by way of example and are an opinion only, not based on fact.
</p>
</div>
</footer>

View file

@ -22,12 +22,12 @@
</h2>
<p style="max-width: 440px;" class="text-md opacity-55 max-w-4xl mx-auto lg:mx-0">
Without privacy there is no freedom of press, no freedom of speech,
not even freedom of thought. Take back your freedom.
not even freedom of thought.
</p>
<div class="pb-0 pt-10 md:py-10 lg:flex text-center">
<a href="#tools">
<a href="{{ site.portmaster_url }}">
<button type="button" class="bg-black mb-5 md:mb-0 transform hover:scale-95 inline-flex items-center px-5 px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
discover our tools
Take back your freedom
</button>
</a>
</div>

View file

@ -28,13 +28,13 @@
</a>
</li>
<li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
<a href="{{ site.spn_url }}" class=" ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-55 transition duration-150 ease-in-out opacity-100">
SPN
<a href="{{ site.docs_url }}" class=" ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-55 transition duration-150 ease-in-out opacity-100">
Docs
</a>
</li>
<li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
<a href="{{ site.spn_url }}#pricing" class="ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-55 transition duration-150 ease-in-out opacity-100">
Pricing
<a href="{{ site.github_url }}/portmaster/" class=" ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-55 transition duration-150 ease-in-out opacity-100">
Source Code
</a>
</li>
<li class="p-3 lg:p-0 text-white text-lg lg:text-sm">

View file

@ -442,6 +442,18 @@ input:checked {
animation: tooltips-vert 300ms ease-out forwards;
}
.notification {
position: relative;
opacity: 0;
animation: notification 0.5s forwards ease-in;
animation-delay: 0.1s;
}
@keyframes notification {
100% {
opacity: 1;
}
}
// This is a hacky way to solve this problem.
// I could not find away in tailwind to set a max of cols and to allow

View file

@ -40,27 +40,66 @@ redirect_from:
</div>
</div>
</div>
<div class="items-center h-full my-40 md:my-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="flex grid md:grid-cols-2">
<div class="mx-auto transform hover:scale-95 duration-150 ease-in-out">
<div class="absolute bg-white w-48 text-center mx-auto leading-tight p-3">
<span class="text-2xl font-extrabold">Get to know some of us.</span>
<div class="items-center h-full my-48">
<div class="flex items-center h-full">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-0 lg:flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-0">
<div class="inline-block max-w-3xl text-center md:text-left">
<h2 class="text-5xl w-1/1 tracking-tight font-extrabold leading-none py-10">Engage the problem at <span style="color: #6188ff;">The Core</span></h2>
<p class="text-md opacity-55">
The Internet is one of the most beautiful things there is. But every connection has the potential to betray you, leaking personal information you never wanted to share. That's where we intercept.
</p>
</div>
</div>
<video src="{{ site.assets_server_url }}video/interview_sessions/1/daniel.mp4" controls></video>
</div>
<div class="mx-auto grid md:grid-cols-2 gap-8 lg:pl-8 lg:pt-0 transform scale-90">
<div class="mx-auto transform hover:scale-95 duration-150 ease-in-out">
<video src="{{ site.assets_server_url }}video/interview_sessions/1/david.mp4" controls></video>
</div>
<div class="mx-auto transform hover:scale-95 duration-150 ease-in-out">
<video src="{{ site.assets_server_url }}video/interview_sessions/1/tabitha.mp4" controls></video>
</div>
<div class="mx-auto transform hover:scale-95 duration-150 ease-in-out">
<video src="{{ site.assets_server_url }}video/interview_sessions/1/raphael.mp4" controls></video>
</div>
<div class="mx-auto transform hover:scale-95 duration-150 ease-in-out">
<video src="{{ site.assets_server_url }}video/interview_sessions/1/martin.mp4" controls></video>
<div class="mt-10 self-center md:ml-0 lg:ml-16">
<ul class="md:grid md:grid-cols-3 md:col-gap-10 md:row-gap-10 text-center md:text-left">
<li class="pt-8 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto">
<svg class="h-8 w-8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="none">
<path stroke="#446eed" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M20 11.182c0 4.541-3.413 8.787-8 9.818-4.587-1.031-8-5.277-8-9.818V7.615c0-.812.491-1.544 1.243-1.851l5-2.046c1.126-.461 2.388-.461 3.514 0l5 2.046C19.509 6.072 20 6.803 20 7.615v3.567z" />
<path stroke="#446eed" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15.25 10.125l-3.75 3.75-2.25-2.25" />
</g>
</svg>
</div>
<div class="mt-4 ml-4">
<h5 class="text-2xl leading-6 font-bold text-gray-900">Open Source</h5>
<p class="mt-4 text-base leading-6 opacity-55 max-w-sm m-auto">
Secure software can only emerge when many smart people review and contribute to the code base.
</p>
</div>
</li>
<li class="pt-10 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto">
<svg class="heart h-8 w-8" stroke="#446eed" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 5.711C12.689 4.905 13.881 4 15.696 4 18.871 4 21 6.98 21 9.755 21 15.556 13.778 20 12 20c-1.778 0-9-4.444-9-10.245C3 6.98 5.129 4 8.304 4c1.815 0 3.007.905 3.696 1.711z" stroke-linecap="round" stroke-width="1.8" fill="none"
stroke-linejoin="round" />
</svg>
</div>
<div class="mt-4 ml-4">
<h5 class="text-2xl leading-6 font-bold text-gray-900">Transparency</h5>
<p class="mt-4 text-base leading-6 opacity-55 max-w-sm m-auto">
The trust to handle your sensitive data can only grow by being open about our company. In every aspect.
</p>
</div>
</li>
<li class="pt-10 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto ">
<svg class="h-8 w-8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g stroke-linecap="round" stroke-width="1.8" stroke="#446eed" fill="none" stroke-linejoin="round">
<path d="M13.7678 10.9822c.976311.976311.976311 2.55922 0 3.53553-.976311.976311-2.55922.976311-3.53553 0-.976311-.976311-.976311-2.55922 0-3.53553.976311-.976311 2.55922-.976311 3.53553 0M19.2538 4.98223c.976311.976311.976311 2.55922 0 3.53553-.976311.976311-2.55922.976311-3.53553 0-.976311-.976311-.976311-2.55922 0-3.53553.976311-.976311 2.55922-.976311 3.53553 0M18 12.25c1.533 0 3 .533 4 1.333M8.28177 4.98223c.976311.976311.976311 2.55922 0 3.53553-.976311.976311-2.55922.976311-3.53553 0-.976311-.976311-.976311-2.55922 0-3.53553.976311-.976311 2.55922-.976311 3.53553 0M2 13.583c1-.8 2.467-1.333 4-1.333M16.591 19.75c-1.165-.901-2.839-1.5-4.591-1.5-1.752 0-3.426.599-4.591 1.5" />
</g>
</svg>
</div>
<div class="mt-4 ml-4">
<h5 class="text-2xl leading-6 font-bold text-gray-900">Our Quest</h5>
<p class="mt-4 text-base leading-6 opacity-55 max-w-sm m-auto">
We chase freedom so our societies can flourish. Giving control back to the people is way overdue.
</p>
</div>
</li>
</ul>
</div>
</div>
</div>

View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g fill="none">
<path d="M0 0h24v24H0z"/>
<path stroke="#ffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 21v0c-4.971 0-9-4.029-9-9v0c0-4.971 4.029-9 9-9v0c4.971 0 9 4.029 9 9v0c0 4.971-4.029 9-9 9z"/>
<path stroke="#ffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 17v-5h-1M11.749 8c-.138 0-.25.112-.249.25 0 .138.112.25.25.25s.25-.112.25-.25-.112-.25-.251-.25"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 529 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 596 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 432 KiB

View file

@ -5,121 +5,87 @@ title: Safing - Love Freedom
{% include header.html %}
<section class="mt-20 md:mt-0" id="tools">
<div class="flex items-center h-full">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-0 lg:flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-0">
<div class="inline-block max-w-3xl text-center md:text-left">
<h2 class="text-5xl w-1/1 tracking-tight font-extrabold leading-none py-10">Engage the problem at <span style="color: #6188ff;">The Core</span></h2>
<p class="text-md opacity-55">
The Internet is one of the most beautiful things there is. But every connection has the potential to betray you, leaking personal information you never wanted to share. That's where we intercept.
</p>
</div>
<section id="features" class="my-32 md:mt-16 md:mb-40">
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col" style="max-width: 2000px;">
<div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:mr-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development
</div>
<div class="mt-10 self-center md:ml-0 lg:ml-16">
<ul class="md:grid md:grid-cols-3 md:col-gap-10 md:row-gap-10 text-center md:text-left">
<li class="pt-8 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto">
<svg class="h-8 w-8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="none">
<path stroke="#446eed" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M20 11.182c0 4.541-3.413 8.787-8 9.818-4.587-1.031-8-5.277-8-9.818V7.615c0-.812.491-1.544 1.243-1.851l5-2.046c1.126-.461 2.388-.461 3.514 0l5 2.046C19.509 6.072 20 6.803 20 7.615v3.567z" />
<path stroke="#446eed" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15.25 10.125l-3.75 3.75-2.25-2.25" />
</g>
</svg>
</div>
<div class="mt-4 ml-4">
<h5 class="text-2xl leading-6 font-bold text-gray-900">Open Source</h5>
<p class="mt-4 text-base leading-6 opacity-55 max-w-sm m-auto">
Secure software can only emerge when many smart people review and contribute to the code base.
</p>
</div>
</li>
<li class="pt-10 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto">
<svg class="heart h-8 w-8" stroke="#446eed" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 5.711C12.689 4.905 13.881 4 15.696 4 18.871 4 21 6.98 21 9.755 21 15.556 13.778 20 12 20c-1.778 0-9-4.444-9-10.245C3 6.98 5.129 4 8.304 4c1.815 0 3.007.905 3.696 1.711z" stroke-linecap="round" stroke-width="1.8" fill="none"
stroke-linejoin="round" />
</svg>
</div>
<div class="mt-4 ml-4">
<h5 class="text-2xl leading-6 font-bold text-gray-900">Transparency</h5>
<p class="mt-4 text-base leading-6 opacity-55 max-w-sm m-auto">
The trust to handle your sensitive data can only grow by being open about our company. In every aspect.
</p>
</div>
</li>
<li class="pt-10 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto ">
<svg class="h-8 w-8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g stroke-linecap="round" stroke-width="1.8" stroke="#446eed" fill="none" stroke-linejoin="round">
<path d="M13.7678 10.9822c.976311.976311.976311 2.55922 0 3.53553-.976311.976311-2.55922.976311-3.53553 0-.976311-.976311-.976311-2.55922 0-3.53553.976311-.976311 2.55922-.976311 3.53553 0M19.2538 4.98223c.976311.976311.976311 2.55922 0 3.53553-.976311.976311-2.55922.976311-3.53553 0-.976311-.976311-.976311-2.55922 0-3.53553.976311-.976311 2.55922-.976311 3.53553 0M18 12.25c1.533 0 3 .533 4 1.333M8.28177 4.98223c.976311.976311.976311 2.55922 0 3.53553-.976311.976311-2.55922.976311-3.53553 0-.976311-.976311-.976311-2.55922 0-3.53553.976311-.976311 2.55922-.976311 3.53553 0M2 13.583c1-.8 2.467-1.333 4-1.333M16.591 19.75c-1.165-.901-2.839-1.5-4.591-1.5-1.752 0-3.426.599-4.591 1.5" />
</g>
</svg>
</div>
<div class="mt-4 ml-4">
<h5 class="text-2xl leading-6 font-bold text-gray-900">Our Quest</h5>
<p class="mt-4 text-base leading-6 opacity-55 max-w-sm m-auto">
We chase freedom so our societies can flourish. Giving control back to the people is way overdue.
</p>
</div>
</li>
</ul>
<h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none pt-8 pb-10 lg:w-auto">
Monitor All Network Activity
</h2>
<p class="text-md opacity-55 max-w-lg">
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 class="py-10 sm:py-10 text-center sm:flex">
<a href="{{ site.portmaster_url }}">
<button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
Discover the Portmaster
</button>
</a>
</div>
</div>
</div>
<div class="lg:-mr-20 ml-auto row-start-1 self-end md:self-start ">
<img class="" src="{{ site.img_url }}page-specific/portmaster/monitor-network-activity.png" alt="">
</div>
</div>
</section>
<section class="mt-40 md:mt-0">
<div class="items-center mt-16 md:mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
<div class="pb-48 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
<img src="{{ site.img_url }}page-specific/spn/network.png" alt="">
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-20" style="max-width: 1700px;">
<div class="row-start-2 lg:row-start-1 lg:col-start-2 mx-auto lg:ml-0 lg:mr-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:ml-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development
</div>
<div class="inline-block max-w-lg">
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 absolute bg-top md:-ml-12">01</span>
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">Powerful VPN Alternative</h2>
<p class="text-md opacity-55 max-w-lg">
Free yourself from mass surveillance. Secure all your meta-data by decoupling yourself from your destination, inspired by Tor. Protect your whole computer, not only your browser.
</p>
<div class="py-10 lg:flex text-center sm:text-left inline-block">
<a href="{{ site.spn_url }}">
<button type="button" style="background-color: #000;" class="mb-5 md:mb-0 transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
Discover the SPN
</button>
</a>
</div>
</div>
<div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
<img src="{{ site.img_url }}page-specific/spn/network.png" alt="">
<h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none pt-8 pb-10">
Block Trackers System-Wide
</h2>
<p class="text-md opacity-55 max-w-lg" style="max-width: 471px;">
Protect your whole computer, not just your browser. Block all advertisements and trackers for every application. Easily add your own rules and block individual domains.
</p>
<div class="py-10 sm:py-10 text-center sm:flex">
<a href="{{ site.portmaster_url }}">
<button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
Discover the Portmaster
</button>
</a>
</div>
</div>
</div>
<div class="mx-auto md:ml-auto row-start-1 self-end md:self-center">
<img class="" src="{{ site.img_url }}page-specific/portmaster/block-trackers-system-wide.png" alt="">
</div>
</div>
<div class="items-center h-full mt-24 md:mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex">
<div class="pb-48 lg:pb-0 m0-0 lg:mr-32 self-center">
<img src="{{ site.img_url }}page-specific/portmaster/monitor.png" alt="">
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-20" style="max-width: 1700px;">
<div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:mr-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development
</div>
<div class="inline-block max-w-lg">
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class=" z-0 absolute bg-top md:-ml-12">02</span>
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">All-Round System Privacy</h2>
<p class="text-md opacity-55 max-w-lg">
Enforce DNS-over-TLS and block connections on a system wide level. Protect your whole computer, not only your browser. Free to use.
</p>
<div class="py-10 md:flex text-center md:text-left inline-block">
<a href="{{ site.portmaster_url }}">
<button type="button" style="background-color: #000;" class="mb-5 md:mb-0 transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
Discover the Portmaster
</button>
</a>
<a class="inline-flex pl-8 transition duration-150 ease-in-out hover:opacity-100 self-center uppercase opacity-55 text-xs font-bold" href="{{ site.github_url }}/portmaster/">Source Code</a>
</div>
<h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none pt-8 pb-10 lg:w-auto">
Set Global &amp; per&#8209;App Settings
</h2>
<p class="text-md opacity-55 max-w-lg">
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 class="py-10 sm:py-10 text-center sm:flex">
<a href="{{ site.portmaster_url }}">
<button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
Discover the Portmaster
</button>
</a>
</div>
</div>
</div>
<div class="mx-auto md:ml-auto row-start-1 self-end md:self-center">
<img class="" src="{{ site.img_url }}page-specific/portmaster/Set-global-and-per-app-configureation.png" alt="">
</div>
</div>
</section>
<section>
@ -179,4 +145,4 @@ title: Safing - Love Freedom
</div>
</div>
</div>
</section>
</section>

View file

@ -47,7 +47,8 @@ redirect_from:
We are thankful for all the partnerships & possibilities that are emerging from our R&D heavy years in which we are exploring new privacy frontiers.
</p>
<p class="text-md opacity-55 max-w-lg pt-4">
Slowly but surely we are migrating into our dream scenario where we only have to rely on the support and trust of our users. Help us get there by using and purchasing our privacy software.
Slowly but surely we are migrating into our dream scenario where we only have to rely on the support and trust of our users. Help us get there by using the Portmaster and later down the road, purchasing the SPN.
</p>
<div class="py-10 flex">
<a href="#influences">

View file

@ -6,30 +6,34 @@ redirect_from:
- /download/
---
<div class="notification w-full text-center text-white p-2" style="background-color: #6188ff;">
<div class="mx-auto flex" style="width: max-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
<span class="w-auto text-sm">Portmaster is Alpha Software - expect hickups here and there</span>
</div>
</div>
<header class="h-full my-20 md:my-40">
<div class="flex items-center h-ful">
<div class="h-full mx-auto ">
<div class="text-center">
<h2 class="text-5xl sm:text-6xl tracking-tight font-extrabold leading-none py-10">
Portmaster
Take Back Control of Your Computer
</h2>
<div class="self-center">
<p class="text-md opacity-55 max-w-lg mx-auto">
The privacy app that gives you back control over all your computer's network connections.
Portmaster is a free and open-source application that puts you back in charge over all your computer's network connections.
</p>
<div class="py-10 sm:py-10 block mx-auto">
<a href="#downloads">
<button type="button" style="background-color: #000;" class="mb-5 transform hover:scale-95 inline-flex items-center px-5 px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
download the alpha
download for free
</button>
</a>
<a class="inline-flex pl-8 transition duration-150 ease-in-out hover:opacity-100 self-center uppercase opacity-55 text-xs font-bold" href="{{ site.github_url }}/portmaster/">Source Code</a>
</div>
</div>
</div>
<div class="pt-6 lg:pt-0 ">
<!-- <video style="box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.3), 0 0px 5px 0 rgba(0, 0, 0, 0.05);" class="z-30 rounded-md lg:max-w-5xl mx-auto transform scale-70 lg:scale-75" preload="auto" src="{{ site.assets_url }}video/interim.mp4" controls muted></video> -->
<img style="box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.3), 0 0px 5px 0 rgba(0, 0, 0, 0.05);" class="z-30 rounded-md lg:max-w-5xl mx-auto transform scale-70 lg:scale-75 max-w-sm" height="1220" width="1220" src="{{ site.img_url }}/placeholder.png" alt="">
<div class="pt-6">
<img src="{{ site.img_url }}page-specific/portmaster/full-interface.png" class="z-30 rounded-md mx-auto transform " style="box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.3), 0 0px 5px 0 rgba(0, 0, 0, 0.05);" alt="">
</div>
<span style="margin-top: -45rem; margin-left: -8rem; z-index: -1;" class="absolute transform scale-50 lg:scale-105 xl:scale-150 bg-cover opacity-75 hidden lg:block">
<img src="{{ site.img_url }}page-specific/portmaster/wave.png" alt="">
@ -37,116 +41,160 @@ redirect_from:
</div>
</div>
</header>
<section class="my-20 md:my-40">
<div class="text-center py-24 lg:pt-0 lg:pb-48">
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 mr-auto ml-auto">
A Bundle of Privacy Features
</h2>
<p class="text-md opacity-55 w-auto mx-auto max-w-lg">
At its core, the Portmaster sits on your kernel and simply intercepts all your network connections. You decide which privacy features you want to enable or disable as you desire.
</p>
</div>
<div class="items-center h-full mt-8 md:mt-16 lg:mt-12">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
<div class="ml-0 lg:ml-32 lg:hidden self-center">
<img src="{{ site.img_url }}page-specific/portmaster/monitor.gif" alt="">
</div>
<div class="inline-block max-w-lg">
<h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-auto">
Block Trackers System&#8209;Wide
</h2>
<p class="text-md opacity-55 max-w-lg">
Since the Portmaster sits on your kernel, you can finally protect your whole computer, not just your browser. Do you want to block Ads and Analytics for your whole operating system? Or whole countries? The Portmaster has you covered.
</p>
<p class="text-sm opacity-55 max-w-lg pt-4">
Your kernel is a cricital part of your computer, so be encouraged to validate our claims.
</p>
<div class="py-10 flex">
<a href="{{ site.github_url }}/portmaster/">
<button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
Inspect Source Code
</button>
</a>
</div>
</div>
<div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
<img src="{{ site.img_url }}page-specific/portmaster/monitor.gif" alt="">
<section id="features" class="my-32 md:pt-32 md:mb-40 ">
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col" style="max-width: 2000px;">
<div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:mr-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development
</div>
<h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none pt-8 pb-10 lg:w-auto">
Monitor All Network Activity
</h2>
<p class="text-md opacity-55 max-w-lg">
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="items-center h-full mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex items-center">
<div class="m0-0 lg:mr-40 self-center">
<img src="{{ site.img_url }}page-specific/portmaster/control.png" alt="">
</div>
<div class="inline-block max-w-lg">
<h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10">
Set Global &amp; per&#8209;App Configuration
</h2>
<p class="text-md opacity-55 max-w-lg">
Cut off apps from the Internet entirely, block system processes or limit applications to specific domains only.
</p>
<p class="text-md opacity-55 max-w-lg pt-4">
With the Portmaster, your power becomes limitless.
</p>
</div>
</div>
<div class="lg:-mr-20 ml-auto row-start-1 self-end md:self-start ">
<img class="" src="{{ site.img_url }}page-specific/portmaster/monitor-network-activity.png" alt="">
</div>
</div>
<div class="items-center h-full mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto items-center">
<div class="pb-8 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
<img src="{{ site.img_url }}page-specific/portmaster/tls.png" alt="">
</div>
<div class="inline-block max-w-lg">
<h2 style="line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">
Enforce DNS&#8209;over&#8209;TLS
</h2>
<p class="text-md opacity-55 max-w-lg">
Even with invasive connections gone, you might 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 class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
<img src="{{ site.img_url }}page-specific/portmaster/tls.png" alt="">
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64" style="max-width: 1700px;">
<div class="row-start-2 lg:row-start-1 lg:col-start-2 mx-auto lg:ml-0 lg:mr-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:ml-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development
</div>
<h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none pt-8 pb-10">
Manually Allow or Block Connections
</h2>
<p class="text-md opacity-55 max-w-lg" style="max-width: 471px;">
Add your own rules to block specific domains you dislike. Enable Prompt Mode and decide the fate of every new connection. Block or Allow.
</p>
</div>
</div>
<div class="mx-auto md:ml-auto row-start-1 self-end md:self-center">
<img class="" src="{{ site.img_url }}page-specific/portmaster/manually-allow-ord-block-connections.png" alt="">
</div>
</div>
<div class="items-center h-full mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex items-center">
<div class="m0-0 lg:mr-48 self-center">
<img src="{{ site.img_url }}page-specific/portmaster/modular.png" alt="">
</div>
<div class="inline-block max-w-lg">
<h2 style="max-width: 470px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none py-10 ">
Modular Design to Fit Your Needs
</h2>
<p class="text-md opacity-55 max-w-lg">
One shoe does not fit all. That is why you can enable or disable privacy features at your will. And the best thing? Everything is FOSS, free and open-source software.
</p>
<p class="text-md opacity-55 max-w-lg pt-4">
You can use all local features free of charge as well, only the coolest one, the SPN, requires a subscription to unlock.
</p>
<div class="py-10 flex">
<a href="{{ site.spn_url }}">
<button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
Discover the SPN
</button>
</a>
</div>
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-12" style="max-width: 1700px;">
<div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:mr-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development
</div>
<h2 style="max-width: 403px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none pt-8 pb-10 lg:w-auto">
Auto-Block via Selected Filter Lists
</h2>
<p class="text-md opacity-55 max-w-lg">
Block ads, trackers, malware and NSFW sites via trusted domain-lists, which are also used by Ad-Blockers, etc. Easily change the defaults to fit your needs.
</p>
</div>
<!-- <div class="py-10 sm:py-10 text-center sm:flex">
<a href="{{ site.docs_url }}">
<button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
Checkout our Docs
</button>
</a>
</div> -->
</div>
<div class="mx-auto md:ml-auto row-start-1 self-end md:self-center">
<img class="" src="{{ site.img_url }}page-specific/portmaster/block-trackers-system-wide.png" alt="">
</div>
</div>
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-20" style="max-width: 1700px;">
<div class="row-start-2 lg:row-start-1 lg:col-start-2 mx-auto lg:ml-0 lg:mr-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:ml-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development
</div>
<h2 style="max-width: 384px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none pt-8 pb-10">
Enforce DNS-over-TLS
</h2>
<p class="text-md opacity-55 max-w-lg" style="max-width: 471px;">
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="mx-auto md:ml-auto row-start-1 self-end md:self-center">
<img class="" src="{{ site.img_url }}page-specific/portmaster/enforce-dns-over-tls.png" alt="">
</div>
</div>
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64" style="max-width: 1700px;">
<div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:mr-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development
</div>
<h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none pt-8 pb-10 lg:w-auto">
Explore the Docs and Source Code
</h2>
<p class="text-md opacity-55 max-w-lg">
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>
<div class="py-10 sm:py-10 text-center sm:flex">
<a href="{{ site.docs_url }}">
<button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
Check out the Docs
</button>
</a>
<br>
<a href="{{ site.github_url }}/portmaster" class="sm:pl-8 transition duration-150 ease-in-out hover:opacity-100 self-center uppercase opacity-55 text-xs font-bold">
Inspect Source Code
</a>
</div>
</div>
<div class="mx-auto md:ml-auto row-start-1 self-end md:self-center">
<img class="" src="{{ site.img_url }}page-specific/portmaster/explore-the-docs-and-source-code.png" alt="">
</div>
</div>
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64" style="max-width: 1700px;">
<div class="row-start-2 lg:row-start-1 lg:col-start-2 mx-auto lg:ml-0 lg:mr-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:ml-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development
</div>
<h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none pt-8 pb-10">
Configure Settings for Different Networks
</h2>
<p class="text-md opacity-55 max-w-lg" style="max-width: 471px;">
The Wi-Fi in your local coffee shop is riskier than yours at home. Set up your settings for different networks and then simply press a button when changing location. All settings will adjust immediately.
</p>
</div>
</div>
<div class="mx-auto md:ml-auto row-start-1 self-end md:self-center">
<img class="" src="{{ site.img_url }}page-specific/portmaster/configure-settings-for-different-networks.png" alt="">
</div>
</div>
<div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-20" style="max-width: 1700px;">
<div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0">
<div class="inline-block max-w-lg lg:mr-32">
<div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Alpha Software: Portmaster is in active development
</div>
<h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none pt-8 pb-10 lg:w-auto">
Set Global &amp; per&#8209;App Settings
</h2>
<p class="text-md opacity-55 max-w-lg">
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="mx-auto md:ml-auto row-start-1 self-end md:self-center">
<img class="" src="{{ site.img_url }}page-specific/portmaster/Set-global-and-per-app-configureation.png" alt="">
</div>
</div>
</section>
<section class="mt-16 lg:mt-48 pb-20 lg:pb-40">
<section class="mt-16 lg:mt-48">
<div class="items-center h-full">
<div class="">
<div class="max-w-full mx-auto px-4 sm:px-6">
@ -156,20 +204,13 @@ redirect_from:
<h2 id="downloads" class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">
Download
</h2>
<p class="text-md opacity-55">
Easy install. Easy uninstall.
</p>
</div>
<div>
<div class="text-center lg:text-left lg:inline-flex items-center mt-16 mb-16 spn-shadow p-10 rounded-lg">
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto mr-auto ml-auto">
<img src="{{ site.img_url }}icons/warning.svg" class="h-8 w-8">
</div>
<p class="pt-5 lg:pt-0 md:pl-10 md:pr-10 text-sm opacity-75">
The Portmaster is still in its early "alpha" development stage. While some features might still have bugs, it runs quite stable and can easily be uninstalled again. We'll push updates and fixes as we go. Limited support is available, see below.
</p>
<div class="mx-auto p-5 pl-5 rounded-md text-white flex break-words" style="font-size: .85rem; background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
Portmaster is Alpha Software, treat as such; expect bugs here and there. Early Adopters welcome.
</div>
<div class="py-10 block grid lg:flex lg:grid-cols-3 gap-10 justify-center">
</div>
<div class="py-10">
<div class="pb-6 pt-2 block grid lg:flex lg:grid-cols-3 gap-10 justify-center">
<a href="{{ site.download_windows_url }}" class="flex items-center">
<button type="button" style="background-color: #000;" class="mx-auto transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
<svg class="h-4 w-4 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88">
@ -199,54 +240,13 @@ redirect_from:
<svg class="h-5 w-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1187.198">
<path fill="#fff" d="M979.04184 925.18785c-17.95397 41.47737-39.20563 79.65705-63.82824 114.75895-33.56298 47.8528-61.04356 80.9761-82.22194 99.3698-32.83013 30.192-68.00529 45.6544-105.67203 46.5338-27.04089 0-59.6512-7.6946-97.61105-23.3035-38.08442-15.5358-73.08371-23.2303-105.08578-23.2303-33.56296 0-69.55888 7.6945-108.06101 23.2303-38.5608 15.6089-69.62484 23.7432-93.37541 24.5493-36.12049 1.5389-72.1237-14.3632-108.06101-47.7796-22.93711-20.0059-51.62684-54.3017-85.99592-102.8874-36.875274-51.88328-67.191862-112.04745-90.942422-180.639C12.750995 781.70252 0 709.95986 0 640.50361c0-79.5618 17.191859-148.18267 51.626869-205.68673 27.062885-46.18935 63.066121-82.62496 108.126941-109.37275 45.06086-26.74775 93.74914-40.37812 146.18212-41.25019 28.68971 0 66.3125 8.8744 113.06613 26.31542 46.62174 17.49964 76.55727 26.37404 89.68198 26.37404 9.8124 0 43.06758-10.37669 99.4431-31.06405 53.31237-19.18512 98.30724-27.12887 135.16787-23.99975 99.8828 8.06098 174.92313 47.43518 224.82789 118.37174-89.33023 54.12578-133.51903 129.93556-132.63966 227.18753.8061 75.75115 28.28668 138.78795 82.2952 188.8393 24.47603 23.23022 51.81008 41.18421 82.22186 53.93522-6.59525 19.12648-13.557 37.44688-20.95846 55.03446zM749.96366 23.751237c0 59.37343-21.69138 114.810233-64.92748 166.121963-52.17652 60.99961-115.28658 96.24803-183.72426 90.68597-.87204-7.12298-1.37769-14.61967-1.37769-22.49743 0-56.99843 24.81315-117.99801 68.87738-167.873453 21.99909-25.25281 49.978-46.25018 83.90738-63.00018 33.85608-16.50008 65.88014-25.6249796 95.99884-27.18757966.87944 7.93730006 1.24583 15.87509966 1.24583 23.74993966z" />
</svg>
MacOS (expect ~2021)
MacOS (not supported)
</button>
</a>
</div>
<div class="support" class="max-w-screen-lg mx-auto" style="margin-bottom: 6rem; margin-top: 6rem;">
<h2 class="line text-md opacity-55 text-xl"><span>Support</span></h2>
<p style="color: #727272;" class="pt-12 max-w-lg mx-auto text-center font-medium">
Please report technical issues on the <a class="link" href="{{ site.github_url }}/portmaster/issues">portmaster</a>
repository, problems with the user interface on the <a class="link" href="{{ site.github_url }}/portmaster-ui/issues">portmaster-ui</a>
repo and ask for help on <a class="link" href="{{ site.reddit_url }}">Reddit</a>
</p>
<p style="color: #727272;" class="pt-8 max-w-lg mx-auto text-center font-medium">
<a class="link" href="/support/#portmaster-faq">Check out the FAQ</a> or ask us <a class="link" href="/support/">any question</a> we did not answer yet.
</p>
</div>
<div>
<div class="max-w-screen-lg mx-auto">
<h2 class="line text-md opacity-55 text-xl"><span>Limited Support</span></h2>
</div>
<div class="text-center lg:text-left lg:inline-flex items-center mt-12 mb-16 spn-shadow p-10 rounded-lg ml-0 mr-0 md:ml-32 md:mr-32">
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto mr-auto ml-auto">
<img src="{{ site.img_url }}icons/warning.svg" class="h-8 w-8">
</div>
<p class="pt-5 lg:pt-0 md:pl-10 md:pr-10 text-sm opacity-75">
These platforms are compatible, but not all functionality is implemented or tested. <span class="font-extrabold">Probability of encountering unknown issues is high.</span> UI components may be impaired or completely broken. Issues we know about are listed:
</p>
</div>
<div class="py-10 block grid lg:flex lg:grid-cols-3 gap-10 justify-center">
<a href="{{ site.github_windows_wiki_url }}" class="flex items-center">
<button type="button" style="background-color: #000;" class="mx-auto opacity-55 hover:opacity-100 transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
<svg class="h-5 w-5 mr-3" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0z" />
</svg>
Windows 7, 8
</button>
</a>
<a href="{{ site.github_linux_wiki_url }}" class="flex items-center">
<button type="button" style="background-color: #000;" class="mx-auto opacity-55 hover:opacity-100 lg:ml-3 lg:mr-3 transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
<svg class="h-5 w-5 mr-3" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0z" />
</svg>
Linux 2.4+
</button>
</a>
</div>
</div>
<p style="color: #727272;" class="pt-6 max-w-lg mx-auto text-center font-medium text-sm">
View guide and status for <a class="link" href="{{ site.github_windows_wiki_url }}">Windows 7, 8</a> or <a class="link" href="{{ site.github_linux_wiki_url }}">other Linux 2.4+ distributions</a>
</p>
</div>
</div>
</div>
@ -254,3 +254,48 @@ redirect_from:
</div>
</div>
</section>
<section class="mb-16 lg:pb-32" id="faq">
<div class="bg-white">
<div class="max-w-screen-xl mx-auto pt-12 pb-16 sm:pt-16 sm:pb-20 px-4 sm:px-6 lg:pt-20 lg:pb-28 lg:px-8">
<div class="text-center pb-12">
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">
FAQ
</h2>
<p class="text-md opacity-55">
You have a question? We answered some already, but you can always contact us at <a href="mailto:hello@safing.io">hello@safing.io</a>
</p>
</div>
<div class="mt-6 pt-10 text-center md:text-left">
<dl class="md:grid md:grid-cols-2 md:gap-8">
{% for faq in site.data.faq.portmaster %}
<div>
<h1 class="text-xl pb-4">
{{ faq.q }}
</h1>
<dd class="mt-2">
<p class="text-md opacity-55">
{{ faq.a }}
</p>
</dd>
{% if faq.link %}
<p class="text-md pt-4" style="color: #727272;">
<a class="link" href="{{ faq.link.url }}">
{{ faq.link.text }}
</a>
</p>
{% endif %}
</div>
{% endfor %}
<div>
<h1 class="text-xl pb-4">Where can I find your source code?</h1>
<dd class="mt-2">
<p class="text-md" style="color: #727272;">
You can find our code on <a href="{{ site.github_url }}" class="link">Github</a>. <a href="{{ site.github_url }}/portmaster/" class="link">The Portmaster</a>, the <a href="{{ site.github_url }}/portmaster-ui/" class="link">Portmaster UI</a>, the <a href="{{ site.github_url }}/spn/" class="link">SPN</a> and <a href="{{ site.github_url }}/web/" class="link">this website</a> have their respective repositories. <a href="{{ site.github_url }}/jess/" class="link">Jess</a>, the heart of the SPN, which got <a href="https://cure53.de/pentest-report_safing-jess.pdf">audited by Cure53</a>, can also be found online.
</p>
</dd>
</div>
</dl>
</div>
</div>
</div>
</section>

View file

@ -3,6 +3,13 @@ title: Safing Privacy Network
layout: page
---
<div class="notification w-full text-center text-white p-2 " style="background-color: #6188ff;">
<div class="mx-auto flex" style="width: max-content;">
<img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
<span class="w-auto text-sm self-center">SPN is in Pre-Alpha and not publicily available. That is why there are no screenshots of the software on this page.</span>
<a href="/spn/#faq" class="underline text-sm self-center ml-2">Read FAQ</a>
</div>
</div>
<header class="h-full">
<div class="flex items-center h-full pt-20 md:pt-32 md:pb-40">
<div class="container mx-auto sm:px-8 sm:px-0">
@ -229,7 +236,7 @@ layout: page
</div>
</div>
</section>
<section class="mb-16 lg:pb-32">
<section class="mb-16 lg:pb-32" id="faq">
<div class="bg-white">
<div class="max-w-screen-xl mx-auto pt-12 pb-16 sm:pt-16 sm:pb-20 px-4 sm:px-6 lg:pt-20 lg:pb-28 lg:px-8">
<div class="text-center pb-12">