mirror of
https://github.com/safing/web
synced 2025-09-02 02:59: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 "floating_button.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