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

Update spn styling

Browse source
This commit is contained in:
Luke Seers 2022-10-12 13:24:02 +02:00
parent 2e79b4531f
commit 882ad321cd
1 changed files with 328 additions and 294 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

336
spn/index.html
View file

@ -3,95 +3,23 @@ title: Safing Privacy Network
layout: page layout: page
--- ---
<a class="alert-primary hover-scale-out rounded-none text-md" data-method="get" href="https://docs.safing.io/spn/alpha/status"> <section class="general-layout" style="margin-top: -5rem;">
<i class="icon-info text-md"></i> <div class="space-y-28">
<span> <div class="download-container" id="features">
SPN is in "Alpha". View <h2 class="download-container-title">
<span class="underline">what to expect</span> It's Time to Ditch VPNs
from current speeds and features </h2>
</span> <div class="space-y-8 max-w-3xl mx-auto">
</a> <p class="download-container-extra">
<header class="header-two-container mb-64 mt-20"> Stop paying for out-dated technology that was never intended to protect your privacy. Get peace of mind with SPN. Built from scratch and designed to truly protect your privacy from mass surveillance.
<div class="header-two-top">
<div class="alert max-w-md bg-transparent mx-auto">
<i class="icon-add text-xl" style="color: rgba(46, 98, 255, 1);"></i>
<span style="color: rgba(0, 0, 0, 0.6);" class="text-md">Portmaster Add-on</span>
</div>
<h1 class="header-two-top-title" style="margin-top: 0.3rem;">
It's Time to <span class="text-safing-blue-600">Ditch VPNs</span>
</h1>
<p class="header-two-top-desc" style="max-width: 650px;">
Stop paying for out-dated technology that was never intended to protect your privacy.
Get peace of mind with SPN. Built from scratch and designed to truly protect your privacy
from mass surveillance.
</p> </p>
</div> </div>
<div class="header-two-bottom" style="margin-top: 3.5rem;">
<div class="element-x-center max-w-sm md:max-w-4xl">
<div class="package-billing">
<div class="package-billing-line-left"></div>
<span class="package-billing-center">Billing: <span class="text-safing-blue-600">One-Time Payment</span></span>
<div class="package-billing-line-right"></div>
</div> </div>
<div class="grid md:grid-cols-2 space-y-3 space-x-3 mt-12 justify-center justify-items-center">
<div>
<div class="card-package most-popular card-shadow">
<div class="card-package-most-popular">
<span>Most Popular</span>
</div>
<div class="card-package-top">
<div class="flex">
<span class="card-package-top-title">Early Adopter</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>
<span class="card-package-top-amount">
99.00€
</span>
</div>
<div class="card-package-middle space-y-4">
<span class="card-package-middle-includes-feature"> Use SPN for 1-Year </span>
</div>
<div class="card-package-bottom">
<a class="btn-secondary w-full justify-center" href="{{ site.account_server_url }}charges/checkout?charge[quantity]=1&charge[package_id]=2&commit=Buy">Buy Package</a>
</div>
</div>
<span class="element-x-center-max mt-4 text-sm">Billing does <strong>NOT</strong> auto-renew</span>
</div>
<div class="mt-2">
<div class="card-package">
<div class="card-package-top">
<div class="flex">
<span class="card-package-top-title">Early Adopter</span>
<span tooltip="Compared to &quot;Beta&quot; Prices" class="ml-auto bg-safing-gray-100 text-center rounded-full px-5 py-1 inline-flex text-sm">Save 23%</span>
</div>
<span class="card-package-top-amount">
9.90€
</span>
</div>
<div class="card-package-middle space-y-4">
<span class="card-package-middle-includes-feature"> Use SPN for 1-Month </span>
</div>
<div class="card-package-bottom">
<a class="btn-secondary w-full justify-center" href="{{ site.account_server_url }}charges/checkout?charge[quantity]=1&charge[package_id]=1&commit=Buy">Buy Package</a>
</div>
</div>
<span class="element-x-center-max mt-4 text-sm">Billing does <strong>NOT</strong> auto-renew</span>
</div>
</div>
</div>
</div>
</header>
<section class="space-y-40">
<div class="general-layout">
<div class="showcase-one-container-reverse"> <div class="showcase-one-container-reverse">
<div class="showcase-one-left" style="max-width: 850px;"> <div class="showcase-one-left" style="max-width: 850px;">
<img src="{{ site.img_url }}page-specific/spn/multiple-identities-for-each-app.png" alt=""> <img src="{{ site.img_url }}page-specific/spn/multiple-identities-for-each-app.png" alt="">
</div> </div>
<div class="showcase-one-right"> <div class="showcase-one-right">
<div class="alert-tiny w-max pr-6 bg-safing-blue-600 ml-0 md:mx-auto">
<i class="icon-info text-md"></i>
<span>Alpha Software: SPN is in active development </span>
</div>
<h2 class="showcase-one-right-title" style="max-width: 450px;"> <h2 class="showcase-one-right-title" style="max-width: 450px;">
Get Multiple Identities for Each App Get Multiple Identities for Each App
</h2> </h2>
@ -100,15 +28,12 @@ layout: page
</p> </p>
</div> </div>
</div> </div>
</div>
<div class="showcase-one-container"> <div class="showcase-one-container">
<div class="showcase-one-left" style="max-width: 850px;"> <div class="showcase-one-left" style="max-width: 850px;">
<img src="{{ site.img_url }}page-specific/spn/access-regional-content-easily.png" alt=""> <img src="{{ site.img_url }}page-specific/spn/access-regional-content-easily.png" alt="">
</div> </div>
<div class="showcase-one-right"> <div class="showcase-one-right">
<div class="alert-tiny w-max pr-6 bg-safing-blue-600 ml-0 md:mx-auto">
<i class="icon-info text-md"></i>
<span>Alpha Software: SPN is in active development </span>
</div>
<h2 class="showcase-one-right-title" style="max-width: 450px;"> <h2 class="showcase-one-right-title" style="max-width: 450px;">
Simply Access Regional Content Simply Access Regional Content
</h2> </h2>
@ -118,14 +43,10 @@ layout: page
</div> </div>
</div> </div>
<div class="showcase-one-container-reverse"> <div class="showcase-one-container-reverse">
<div class="showcase-one-left" style="max-width: 850px;"> <div class="showcase-one-left" style="max-width: 950px;">
<img src="{{ site.img_url }}page-specific/spn/easily-control-your-privacy.png" alt=""> <img src="{{ site.img_url }}page-specific/spn/easily-control-your-privacy.png" alt="">
</div> </div>
<div class="showcase-one-right"> <div class="showcase-one-right">
<div class="alert-tiny w-max pr-6 bg-safing-blue-600 ml-0 md:mx-auto">
<i class="icon-info text-md"></i>
<span>Alpha Software: SPN is in active development </span>
</div>
<h2 class="showcase-one-right-title" style="max-width: 350px;"> <h2 class="showcase-one-right-title" style="max-width: 350px;">
Easily Adjust Your Privacy Easily Adjust Your Privacy
</h2> </h2>
@ -134,17 +55,36 @@ layout: page
</p> </p>
</div> </div>
</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;">
SPN 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>
<div class="showcase-one-container"> <div class="showcase-one-container">
<div class="showcase-one-left" style="max-width: 850px;"> <div class="showcase-one-left" style="max-width: 850px;">
<img src="{{ site.img_url }}page-specific/spn/built-from-the-ground-up.png" alt=""> <img src="{{ site.img_url }}page-specific/spn/built-from-the-ground-up.png" alt="">
</div> </div>
<div class="showcase-one-right"> <div class="showcase-one-right">
<div class="alert-tiny w-max pr-6 bg-safing-blue-600 ml-0 md:mx-auto">
<i class="icon-info text-md"></i>
<span>Alpha Software: SPN is in active development </span>
</div>
<h2 class="showcase-one-right-title" style="max-width: 450px;"> <h2 class="showcase-one-right-title" style="max-width: 450px;">
Built from Scratch,<br> for <span class="text-safing-blue-600">Your Privacy</span> Built from Scratch,<br> for Your Privacy
</h2> </h2>
<p class="showcase-one-right-desc"> <p class="showcase-one-right-desc">
SPN is built from the ground up. Privacy is cooked right into it. Inspired by Tor, it comes with onion routing and state of the art encryption. Fully open source so all our claims can be validated. SPN is built from the ground up. Privacy is cooked right into it. Inspired by Tor, it comes with onion routing and state of the art encryption. Fully open source so all our claims can be validated.
@ -152,7 +92,6 @@ layout: page
<a class="btn-tertiary px-2" href="{{ site.github_url }}/spn"><i class="icon-github text-md mr-2"></i>Inspect source code</a> <a class="btn-tertiary px-2" href="{{ site.github_url }}/spn"><i class="icon-github text-md mr-2"></i>Inspect source code</a>
</div> </div>
</div> </div>
<div class="showcase-two-container"> <div class="showcase-two-container">
<div class="showcase-two-top-break-left"> <div class="showcase-two-top-break-left">
<h2 class="showcase-two-top-title" style="max-width: 550px;"> <h2 class="showcase-two-top-title" style="max-width: 550px;">
@ -170,17 +109,13 @@ layout: page
</div> </div>
</div> </div>
</div> </div>
<div class="showcase-bg"></div> <!-- <div class="showcase-bg"></div> -->
</div> </div>
<div class="showcase-one-container"> <div class="showcase-one-container">
<div class="showcase-one-left" style="max-width: 850px;"> <div class="showcase-one-left" style="max-width: 850px;">
<img src="{{ site.img_url }}page-specific/spn/bye-bye-vpns.png" alt=""> <img src="{{ site.img_url }}page-specific/spn/bye-bye-vpns.png" alt="">
</div> </div>
<div class="showcase-one-right"> <div class="showcase-one-right">
<div class="alert-tiny w-max pr-6 bg-safing-blue-600 ml-0 md:mx-auto">
<i class="icon-info text-md"></i>
<span>Alpha Software: SPN is in active development </span>
</div>
<h2 class="showcase-one-right-title" style="max-width: 450px;"> <h2 class="showcase-one-right-title" style="max-width: 450px;">
Bye Bye, VPNs Bye Bye, VPNs
</h2> </h2>
@ -192,7 +127,6 @@ layout: page
</a> </a>
</div> </div>
</div> </div>
<div class="showcase-two-container"> <div class="showcase-two-container">
<div class="showcase-two-top-break-left"> <div class="showcase-two-top-break-left">
<h2 class="showcase-two-top-title" id="feature-comparison-chart" style="max-width: 550px;"> <h2 class="showcase-two-top-title" id="feature-comparison-chart" style="max-width: 550px;">
@ -202,74 +136,172 @@ layout: page
{% include spn_vs_others.html %} {% include spn_vs_others.html %}
</div> </div>
<div class="showcase-two-container">
<div class="showcase-two-container" id="pricing"> <div class="showcase-two-top-break-left">
<div class="showcase-two-top" style="max-width: 690px;"> <h2 class="showcase-two-top-title" id="feature-comparison-chart" style="max-width: 550px;">
<a class="alert-primary hover-scale-out" data-method="get" href="{{ site.spn_alpha_status_page_url }}"> Pricing
<span>
SPN is in "Alpha". View
<span class="underline">what to expect</span>
from current speeds and features
</span>
</a>
<h2 class="showcase-two-top-title">
Protect Your Connections Today
</h2> </h2>
<p class="showcase-two-top-desc"> <p class="showcase-two-top-desc">
Subscribe to SPN and lock in the lower Alpha prices forever. Built from scratch and designed to truly protect your privacy from mass surveillance.
</p> </p>
</div> </div>
<div class="showcase-two-bottom" style="max-width: 850px;"> <div class="element-x-center max-w-sm md:max-w-7xl">
<div class="element-x-center max-w-sm md:max-w-4xl"> <div class="package-billing darkmode">
<div class="package-billing"> <div class="package-billing-top">
<div class="package-billing-line-left"></div> <div class="package-billing-top-line-left"></div>
<span class="package-billing-center">Billing: <span class="text-safing-blue-600">One-Time Payment</span></span> <div class="package-billingtop-top-center">
<div class="package-billing-line-right"></div> <div class="package-billingtop-top-center-inner">
<span>Per Month</span>
<span>Per Year</span>
</div> </div>
<div class="grid md:grid-cols-2 space-y-3 space-x-3 mt-12 justify-center justify-items-center">
<div>
<div class="card-package most-popular card-shadow">
<div class="card-package-most-popular">
<span>Most Popular</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 md:grid-cols-3 space-y-3 lg:space-y-0 space-x-3 mt-14 justify-center justify-items-center items-baseline mx-auto" style="align-items: center;">
<div class="card-package darkmode" style="height: 650px;">
<div class="card-package-top"> <div class="card-package-top">
<div class="flex"> <div class="flex">
<span class="card-package-top-title">Early Adopter</span> <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> </div>
<span class="card-package-top-amount"> <span class="card-package-top-amount">
99.00€ 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> </span>
</div> </div>
<div class="card-package-middle space-y-4"> <div class="card-package-bottom" style="bottom: 36px;">
<span class="card-package-middle-includes-feature"> Use SPN for 1-Year </span> <div class="hidden lg:block">
</div> {% include download_button.html unique_id="1" %}
<div class="card-package-bottom">
<a class="btn-secondary w-full justify-center" href="{{ site.account_server_url }}charges/checkout?charge[quantity]=1&charge[package_id]=2&commit=Buy">Buy Package</a>
</div> </div>
</div> </div>
<span class="element-x-center-max mt-4 text-sm">Billing does <strong>NOT</strong> auto-renew</span>
</div> </div>
<div> <form class="new_charge" id="new_charge" action="https://account.safing.io/charges/checkout" accept-charset="UTF-8" method="get">
<div class="card-package"> <input value="1" autocomplete="off" type="hidden" name="charge[package_id]" id="charge_package_id">
<div class="card-package-top"> <div class="card-package darkmode mt-0" style="height: 650px;">
<div class="absolute -top-8 -right-11">
<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"> <div class="flex">
<span class="card-package-top-title">Early Adopter</span> <span class="card-package-top-title">Portmaster <span style="color: #2fcfae;">Supporter</span> </span>
<span tooltip="Compared to &quot;Beta&quot; Prices" class="ml-auto bg-safing-gray-100 text-center rounded-full px-5 py-1 inline-flex text-sm">Save 23%</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">
<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> </div>
<span class="card-package-top-amount"> <span class="card-package-top-amount">
9.90€ 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> </span>
</div> </div>
<div class="card-package-middle space-y-4"> <div class="card-package-bottom" style="display: block;">
<span class="card-package-middle-includes-feature"> Use SPN for 1-Month </span>
</div>
<div class="card-package-bottom">
<a class="btn-secondary w-full justify-center" href="{{ site.account_server_url }}charges/checkout?charge[quantity]=1&charge[package_id]=1&commit=Buy">Buy Package</a>
</div>
</div>
<span class="element-x-center-max mt-4 text-sm">Billing does <strong>NOT</strong> auto-renew</span> <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> </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>
</div> </div>
@ -287,7 +319,7 @@ layout: page
<div class="faq-container-bottom"> <div class="faq-container-bottom">
{% for faq in site.data.faq.spn %} {% for faq in site.data.faq.spn %}
<div class="faq-container-bottom-question"> <div class="faq-container-bottom-question">
<div class="card-faq card-shadow hover-scale-out"> <div class="card-faq darkmode hover-scale-out">
<label class="card-label" for="card-toggle-anchor-{{ forloop.index }}"> <label class="card-label" for="card-toggle-anchor-{{ forloop.index }}">
<div class="wrapper-left"> <div class="wrapper-left">
<div class="card-title"> <div class="card-title">
@ -303,9 +335,7 @@ layout: page
<input class="card-input-toggle" id="card-toggle-anchor-{{ forloop.index }}" type="checkbox"> <input class="card-input-toggle" id="card-toggle-anchor-{{ forloop.index }}" type="checkbox">
<div class="card-dropdown-toggle"> <div class="card-dropdown-toggle">
<div class="card-dropdown-content"> <div class="card-dropdown-content">
<div class="text-safing-gray-500">
{{ faq.a }} {{ faq.a }}
</div>
{% if faq.link %} {% if faq.link %}
<br> <br>
<br> <br>
@ -319,5 +349,9 @@ layout: page
{% include source_code_faq.html %} {% include source_code_faq.html %}
</div> </div>
</div> </div>
</div>
</section> </section>