mirror of
https://github.com/safing/web
synced 2025-09-02 11:09:03 +00:00
Add portmaster tour
This commit is contained in:
davegson
parent
4f07301e68
commit
9ab9cae701
3 changed files with 291 additions and 0 deletions
65
_sass/_portmaster_tour.scss
Normal file
65
_sass/_portmaster_tour.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
#portmaster-tour {
|
||||||
|
font-size: 1.25em;
|
||||||
|
|
||||||
|
|
||||||
|
.row {
|
||||||
|
padding: 3.5em 0;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
.column{
|
||||||
|
&:first-child {
|
||||||
|
padding-bottom: 3.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.two.cards {
|
||||||
|
.content p {
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding-right: 1.2em;
|
||||||
|
padding-left: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $main_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
padding-bottom: 7em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.three.cards.middle.lowered {
|
||||||
|
.card:first-child {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:nth-child(2) {
|
||||||
|
margin-top: 25px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:last-child {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.two.cards {
|
||||||
|
.content {
|
||||||
|
img {
|
||||||
|
height: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin-top: 0.25em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -14,3 +14,4 @@
|
||||||
@import "button.scss";
|
@import "button.scss";
|
||||||
@import "floating_button.scss";
|
@import "floating_button.scss";
|
||||||
@import "our-values.scss";
|
@import "our-values.scss";
|
||||||
|
@import "portmaster_tour.scss";
|
||||||
|
|
|
||||||
225
portmaster/index.html
Normal file
225
portmaster/index.html
Normal file
|
|
@ -0,0 +1,225 @@
|
||||||
|
---
|
||||||
|
layout: page
|
||||||
|
title: Portmaster Tour
|
||||||
|
heading: Portmaster Tour
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="stackable very relaxed doubling grid ui container" id="portmaster-tour">
|
||||||
|
<div class="centered middle aligned row">
|
||||||
|
<div class="seven wide centered column">
|
||||||
|
<h2>Application Firewall</h2>
|
||||||
|
<p>
|
||||||
|
Portmaster manages and protects data that goes
|
||||||
|
<i>out</i> of your computer. Monitor your applications with scrutiny and easily prevent data leakage.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="nine wide middle aligned column">
|
||||||
|
<img class="ui middle aligned image" style="height: 20em;" src="{{ site.assets_url }}img/portmasterbig.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ui divider"></div>
|
||||||
|
<div class="row" id="managing">
|
||||||
|
<div class="seven wide middle aligned column">
|
||||||
|
<h2>Manage App Permissions</h2>
|
||||||
|
<p>
|
||||||
|
Want to deny an app access to the Internet? Or cut off specific endpoints? Easy peasy.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Create a global profile and then tweak and manage your rules on each app individually.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="nine wide column">
|
||||||
|
<div class="ui three cards middle lowered">
|
||||||
|
<div class="card">
|
||||||
|
<div class="center aligned content">
|
||||||
|
<div class="ui image">
|
||||||
|
<i class="huge black globe africa icon"></i>
|
||||||
|
</div>
|
||||||
|
<div class="ui small header">
|
||||||
|
Global Config
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="extra content">
|
||||||
|
<div class="ui list">
|
||||||
|
<div class="item">
|
||||||
|
<i class="green checkmark icon"></i>
|
||||||
|
<div class="content">
|
||||||
|
Internet
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<i class="green checkmark icon"></i>
|
||||||
|
<div class="content">
|
||||||
|
LAN
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<i class="red x icon"></i>
|
||||||
|
<div class="content">
|
||||||
|
p2p
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<h4>Blacklist</h4>
|
||||||
|
<p>/</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="center aligned content">
|
||||||
|
<div class="ui image">
|
||||||
|
<i class="huge grey file word icon"></i>
|
||||||
|
</div>
|
||||||
|
<div class="ui small header">
|
||||||
|
Microsoft Word
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="extra content">
|
||||||
|
<div class="ui list">
|
||||||
|
<div class="item">
|
||||||
|
<i class="red x icon"></i>
|
||||||
|
<div class="content">
|
||||||
|
Internet
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<i class="red x icon"></i>
|
||||||
|
<div class="content">
|
||||||
|
LAN
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<i class="red x icon"></i>
|
||||||
|
<div class="content">
|
||||||
|
p2p
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<h4>Blacklist</h4>
|
||||||
|
<p>/</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="center aligned content">
|
||||||
|
<div class="ui image">
|
||||||
|
<i class="huge grey steam icon"></i>
|
||||||
|
</div>
|
||||||
|
<div class="ui small header">
|
||||||
|
Steam
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="extra content">
|
||||||
|
<div class="ui list">
|
||||||
|
<div class="item">
|
||||||
|
<i class="green checkmark icon"></i>
|
||||||
|
<div class="content">
|
||||||
|
Internet
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<i class="green checkmark icon"></i>
|
||||||
|
<div class="content">
|
||||||
|
LAN
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<i class="red x icon"></i>
|
||||||
|
<div class="content">
|
||||||
|
p2p
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<h4>Blacklist</h4>
|
||||||
|
<a>
|
||||||
|
tracker.steam.com
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ui divider"></div>
|
||||||
|
<div class="row" id="security-levels">
|
||||||
|
<div class="seven wide middle aligned column">
|
||||||
|
<h2 class="ui large header">Configure the different Security Levels</h2>
|
||||||
|
<p>
|
||||||
|
Adjust your rules depending on your environment. Easily transition from being at home to lurking in your local Starbucks (and its WiFi).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="nine wide column">
|
||||||
|
<div class="ui centered two cards">
|
||||||
|
<div class="card">
|
||||||
|
<div class="content">
|
||||||
|
<img class="right floated ui image" src="{{ site.assets_url }}img/tour/level_dynamic.svg">
|
||||||
|
<div class="header">
|
||||||
|
Dynamic
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
Your home and other trusted networks.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="content">
|
||||||
|
<img class="right floated ui image" src="{{ site.assets_url }}img/tour/level_secure.svg">
|
||||||
|
<div class="header">
|
||||||
|
Secure
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
For Starbucks´ public WiFi or other untrusted networks.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="content">
|
||||||
|
<img class="right floated ui image" src="{{ site.assets_url }}img/tour/level_fortress.svg">
|
||||||
|
<div class="header">
|
||||||
|
Fortress
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
Prepare for worst case scenarios - so you can take away the panic from panic mode.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ui divider"></div>
|
||||||
|
|
||||||
|
<div class="centered row">
|
||||||
|
<div class="sixteen wide column">
|
||||||
|
<h3 class="ui huge centered header">
|
||||||
|
Dive into it
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="nine wide column">
|
||||||
|
<div class="ui two stackable cards">
|
||||||
|
<a class="card" href="/technology#portmaster">
|
||||||
|
<div class="content">
|
||||||
|
<p>Explore the mechanics behind Portmaster</p>
|
||||||
|
</div>
|
||||||
|
<div class="extra content">
|
||||||
|
<button class='ui safing-secondary button'>
|
||||||
|
Technical Details
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="ui raised card" href='https://github.com/Safing/portmaster/releases/' target="_blank">
|
||||||
|
<div class="content">
|
||||||
|
<p>Our Alpha is out for Linux 🎉 </p>
|
||||||
|
</div>
|
||||||
|
<div class="extra content">
|
||||||
|
<button class='ui safing-primary button'>
|
||||||
|
Download from <i class="ui github icon"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Add table
Reference in a new issue