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

Replace index page with new design

Browse source
This commit is contained in:
davegson 2020-04-09 10:56:11 +02:00
parent 628921d0bb
commit ac03458c53
6 changed files with 411 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
_includes/new/about-short.html
View file

@ -1,9 +0,0 @@
<content>
<div class="about-short">
<h1>You be the judge</h1>
<p>
Review and inspect everything we do and say: every page, every podcast, every line of code, every strategic decision.<br/>
If you do like what we do, please consider helping us by <a href="{{ site.reddit_url }}">contributing to the Safing community</a>.
</p>
</div>
</content>

23
_includes/new/cast.html
View file

@ -1,23 +0,0 @@
<content>
<div class="cast">
<div class="c-l">
{% assign sorted_podcasts = site.podcasts | reverse %}
{% for episode in sorted_podcasts limit: 4 %}
<a href="{{ episode.url }}">
<img src="{{ site.img_url }}podcast.png" alt="">
<div>
{% assign title_length = episode.title | size %}
<span>{{ episode.title | slice: 7, title_length }}</span>
<p>{{ episode.title | slice: 0, 4 }} - {{ episode.date | date: "%-d. %b %Y" }}</p>
</div>
</a>
{% endfor %}
</div>
<div class="c-r">
<h1>Stay up to date</h1>
<p>
Listen to our podcast where we give insight into our company. Ranging from the current development progress to our latest challenges to our thought process behind making important decisions.
</p>
</div>
</div>
</content>

26
_includes/new/header.html
View file

@ -1,26 +0,0 @@
<header class="h-bg">
<div class="h-l">
<div class="h-l-v">
<a href="{{ site.kickstarter_url }}"><img src="{{ site.img_url }}video-kickstarter.png" alt=""></a>
<!--<video playsinline="" preload="auto" src="{{ site.video_url }}interim.mp4" controls></video>-->
</div>
<span style="opacity: 0.5;">Supported by</span>
<ul>
<li><a href="{{ site.our_values_url }}#influences"><img src="{{ site.img_url }}external-logos/esa.png" alt=""></a></li>
<li><a href="{{ site.our_values_url }}#influences"><img src="{{ site.img_url }}external-logos/netidee_small.png" alt=""></a></li>
<li><a href="{{ site.our_values_url }}#influences"><img src="{{ site.img_url }}external-logos/excellence.png" alt=""></a></li>
<li><a href="{{ site.our_values_url }}#influences"><img src="{{ site.img_url }}external-logos/ffg.png" alt=""></a></li>
</ul>
</div>
<div class="h-r">
<span>Take back control</span>
<h1>Privacy Network</h1>
<p>
Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators and VPNs from collecting all your personal [meta] data. Secure your whole computer, not only your web-browser.
</p>
<div>
<a href="{{ site.kickstarter_url }}"><button><img src="{{ site.icons_url }}kickstarter.svg" alt=""><span>kickstarter</span></button></a>
<span>or <a href="{{ site.newsletter_url }}">subscribe to our newsletter</a></span>
</div>
</div>
</header>

16
_includes/new/map.html
View file

@ -1,16 +0,0 @@
<content>
<div class="map">
<div class="m-l">
<img src="{{ site.img_url }}map.gif" alt="">
</div>
<div class="m-r">
<h1>Outpacing Big Corp</h1>
<p>
With the Safing Privacy Network, all your outgoing connections are onion encrypted locally. They are then routed through our multi-hop network (blue) to prevent all current middlemen from logging and exploiting your private activities.
</p>
<p>
Each route is calculated individually to minimize exposure to the untrusted web (non-blue). Also, DNS over TLS is enforced for your whole computer. <a href="{{ site.technology_url }}">Find out more...</a>
</p>
</div>
</div>
</content>

45
_includes/new/overview.html
View file

@ -1,45 +0,0 @@
<content>
<div class="overview">
<div class="o-l">
<h1>Transparency enforces Accountability</h1>
<p>
Being transparent means you and others can examine us; it gives insight whether we really walk our talk. It's the reason we believe in open source. But we don't want to stop there:
</p>
</div>
<div class="o-r">
<div class="left">
<div>
<img src="{{ site.icons_url }}lock.svg" alt="">
<div>
<span>Team</span>
<p>
We're human, just like you.
<br/>
<a href="{{ site.our_values_url }}#ownership">Meet the team</a> behind this venture!
</p>
</div>
</div>
<div>
<img src="{{ site.icons_url }}shield.svg" alt="">
<div>
<span>Ownership</span>
<p>
Many have fallen because they were not <i>really</i> in charge of their company. So, <a href="{{ site.our_values_url }}#ownership">who is in charge</a> of Safing?
</p>
</div>
</div>
</div>
<div>
<div class="right">
<img src="{{ site.icons_url }}community.svg" alt="">
<div>
<span>Ethical Funding</span>
<p>
We believe that we must also be open about all our financial influences & partnerships to truly become a privacy first company. <a href="{{ site.our_values_url }}#finances">Have a look!</a>
</p>
</div>
</div>
</div>
</div>
</div>
</content>

418
index.html
View file

@ -1,12 +1,416 @@
---
layout: page
title: Safing
home: true
---
{% include new/header.html %}
{% include new/features.html %}
{% include new/map.html %}
{% include new/overview.html %}
{% include new/about-short.html %}
{% include new/cast.html %}
<header class="h-screen bg-local bg-no-repeat bg-cover bg-center" style="background-image: url(../images/bg.png)">
<div class="flex items-center h-full">
<div class="container mx-auto px-8 sm:px-0">
<div class="text-center">
<h2 class="text-5xl tracking-tight font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl md:mx-auto md:w-2/3">
We <span style="color: #6188ff;">fight surveillance</span> because we <span style="color: #6188ff;">love freedom</span>.
</h2>
<p class="pt-10 sm:pt-5 text-base text-black opacity-50 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-8 md:text-xl">
it's the foundation we build our products on. We make sacrifices on
all other fronts to protect your privacy and push the limits of
technology to do so.
</p>
<div class="pt-12 sm:mt-8 sm:flex sm:justify-center sm:pt-5">
<div class="shake-horizontal">
<a href="#tools" class="transform hover:scale-95 w-full flex justify-center px-8 py-4 border border-transparent leading-5 rounded-full text-white bg-black transition duration-150 ease-in-out md:text-sm md:px-10 uppercase">
discover our tools
</a>
</div>
</div>
<div class="justify-end pt-16 max-w-3xl mx-auto">
<span class="opacity-25">Supported by</span>
<div class="flex grid grid-flow-col justify-between my-3 opacity-75 items-center">
<a href="">
<img class="scale-75 md:scale-100 transform hover:scale-95 hover:opacity-50 transition duration-150 ease-in-out" src="../images/esa copy.png" alt="">
</a>
<a href="">
<img class="scale-75 md:scale-100 transform hover:scale-95 hover:opacity-50 transition duration-150 ease-in-out" src="../images/excellence copy.png" alt="">
</a>
<a href="">
<img class="scale-75 md:scale-100 transform hover:scale-95 hover:opacity-50 transition duration-150 ease-in-out" src="../images/ffg copy.png" alt="">
</a>
<a href="">
<img class="scale-75 md:scale-100 transform hover:scale-95 hover:opacity-50 transition duration-150 ease-in-out" src="../images/netidee_small copy.png" alt="">
</a>
</div>
</div>
</div>
</div>
</header>
<section style="margin-top: 4rem;" 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">What are the tools we make?</h2>
<p class="text-md opacity-50">
Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators and VPNs from collecting all your personal [meta] data. Secure your whole computer, not only your web-browser.
</p>
</div>
</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">Privacy</h5>
<p class="mt-4 text-base leading-6 opacity-50 max-w-sm m-auto">
Stay private while surfing the
Web with you are in charge of
where.
</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">Privacy</h5>
<p class="mt-4 mt-2 text-base leading-6 opacity-50 max-w-sm m-auto">
Stay private while surfing the
Web with you are in charge of
where.
</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">Privacy</h5>
<p class="mt-4 mt-2 text-base leading-6 opacity-50 max-w-sm m-auto">
Stay private while surfing the
Web with you are in charge of
where.
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section style="margin-top: 20rem;">
<div class="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: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="../images/spn/network.png" alt="">
</div>
<div class="inline-block max-w-lg">
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; margin-left: -3rem; opacity: 0.05;" class=" z-0 absolute bg-top">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-50 max-w-lg">
Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators
and VPNs from collecting all your personal [meta] data. Secure
your whole computer, not only your web-browser.
</p>
<div class="py-10 lg:flex text-center sm:text-left inline-block">
<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">
<a href="/spn.html">Discover the spn</a>
</button>
<a class="inline-flex pl-8 transition duration-150 ease-in-out hover:opacity-100 self-center uppercase opacity-50 text-xs font-bold" href="#">Source code</a>
</div>
</div>
<div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
<img src="../images/spn/network.png" alt="">
</div>
</div>
</div>
<div class="items-center h-full 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="../images/portmaster/monitor.png" alt="">
</div>
<div class="inline-block max-w-lg">
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; margin-left: -3rem; opacity: 0.05;" class=" z-0 absolute bg-top">02</span>
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">All Around System Privacy</h2>
<p class="text-md opacity-50 max-w-lg">
Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators
and VPNs from collecting all your personal [meta] data. Secure
your whole computer, not only your web-browser.
</p>
<div class="py-10 md:flex text-center md:text-left inline-block">
<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">
<a href="/portmaster.html">Discover the Portmaster</a>
</button>
<a class="inline-flex pl-8 transition duration-150 ease-in-out hover:opacity-100 self-center uppercase opacity-50 text-xs font-bold" href="#">Source code</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section style="margin-top: 17rem;">
<div class="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:flex text-center lg:text-left">
<div class="lg:w-2/3">
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10">You be the judge</h2>
</div>
<div class="self-center">
<p class="text-md opacity-50 w-auto mx-auto md:w-2/3">
Review and inspect everything we do and say: every page, every
podcast, every line of code, every strategic decision. If you do like
what we do, please consider helping us by contributing to the
Safing community.
</p>
</div>
</div>
</div>
</div>
</section>
<section style="margin-top: 20rem;">
<div class="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:flex">
<div class="py-12 bg-white">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 ml-0 w-full left-0 text-center absolute bg-top">Follow Us</span>
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">Blogs & Podcasts</h2>
</div>
<div class="mt-32">
<ul class="md:grid md:grid-cols-2 lg:grid-cols-3 md:col-gap-8 md:row-gap-10">
<li>
<div class="block transform hover:scale-95 duration-150 ease-in-out">
<a href="">
<img src="../images/podcast_blank.png" alt="">
<div class="pt-6">
<span class="opacity-25">4 FEB 2020</span>
<p>The Two Steps it takes</p>
</div>
</a>
</div>
</li>
<li class="mt-10 md:mt-0">
<div class="block transform hover:scale-95 duration-150 ease-in-out">
<a href="">
<img src="../images/podcast_blank.png" alt="">
<span style="font-size: 12rem; font-weight: 800; margin-top: -13.8rem; margin-left: -0.8rem;" class=" z-0 absolute bg-top">
<button type="button" style="background-color: #6188ff;" class="inline-flex items-center px-4 py-4 rounded-md border border-transparent text-xs leading-5 font-extrabold text-white">
<svg class="h-8 w-auto lg:h-5 fill-current text-white" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.41 11">
<path d="M8.43 4.62l-6.34-4A1 1 0 00.5 1.5v8a1 1 0 001.59.88l6.34-4a1 1 0 000-1.76z" stroke-miterlimit="10" /></svg>
</button>
</span>
<div class="pt-6">
<span class="opacity-25">4 FEB 2020</span>
<p>The Two Steps it takes</p>
</div>
</a>
</div>
</li>
<li class="mt-10 md:mt-0">
<div class="block transform hover:scale-95 duration-150 ease-in-out">
<a href="">
<img src="../images/podcast_blank.png" alt="">
<div class="pt-6">
<span class="opacity-25">4 FEB 2020</span>
<p>The Two Steps it takes</p>
</div>
</a>
</div>
</li>
<li class="mt-10 md:mt-0">
<div class="block transform hover:scale-95 duration-150 ease-in-out">
<a href="">
<img src="../images/podcast_blank.png" alt="">
<span style="font-size: 12rem; font-weight: 800; margin-top: -13.8rem; margin-left: -0.8rem;" class=" z-0 absolute bg-top">
<button type="button" style="background-color: #6188ff;" class="inline-flex items-center px-4 py-4 rounded-md border border-transparent text-xs leading-5 font-extrabold text-white">
<svg class="h-8 w-auto lg:h-5 fill-current text-white" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.41 11">
<path d="M8.43 4.62l-6.34-4A1 1 0 00.5 1.5v8a1 1 0 001.59.88l6.34-4a1 1 0 000-1.76z" stroke-miterlimit="10" /></svg>
</button>
</span>
<div class="pt-6">
<span class="opacity-25">4 FEB 2020</span>
<p>The Two Steps it takes</p>
</div>
</a>
</div>
</li>
<li class="mt-10 md:mt-0">
<div class="block transform hover:scale-95 duration-150 ease-in-out">
<a href="">
<img src="../images/podcast_blank.png" alt="">
<span style="font-size: 12rem; font-weight: 800; margin-top: -13.8rem; margin-left: -0.8rem;" class=" z-0 absolute bg-top">
<button type="button" style="background-color: #6188ff;" class="inline-flex items-center px-4 py-4 rounded-md border border-transparent text-xs leading-5 font-extrabold text-white">
<svg class="h-8 w-auto lg:h-5 fill-current text-white" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.41 11">
<path d="M8.43 4.62l-6.34-4A1 1 0 00.5 1.5v8a1 1 0 001.59.88l6.34-4a1 1 0 000-1.76z" stroke-miterlimit="10" /></svg>
</button>
</span>
<div class="pt-6">
<span class="opacity-25">4 FEB 2020</span>
<p>The Two Steps it takes</p>
</div>
</a>
</div>
</li>
<li class="mt-10 md:mt-0">
<div class="block transform hover:scale-95 duration-150 ease-in-out">
<img src="../images/podcast_blank.png" alt="">
<div class="pt-6">
<span class="opacity-25">4 FEB 2020</span>
<p>The Two Steps it takes</p>
</div>
</div>
</li>
</ul>
<div class="py-20 text-center">
<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">
<a href="/blogpod.html">Show me more!</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
.shake-horizontal {
-webkit-animation: shake-horizontal .8s cubic-bezier(.455, .03, .515, .955) both;
animation: shake-horizontal .8s cubic-bezier(.455, .03, .515, .955) both
}
@-webkit-keyframes shake-horizontal {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
10%,
30%,
50%,
70% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px)
}
20%,
40%,
60% {
-webkit-transform: translateX(10px);
transform: translateX(10px)
}
80% {
-webkit-transform: translateX(8px);
transform: translateX(8px)
}
90% {
-webkit-transform: translateX(-8px);
transform: translateX(-8px)
}
}
@keyframes shake-horizontal {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
10%,
30%,
50%,
70% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px)
}
20%,
40%,
60% {
-webkit-transform: translateX(10px);
transform: translateX(10px)
}
80% {
-webkit-transform: translateX(8px);
transform: translateX(8px)
}
90% {
-webkit-transform: translateX(-8px);
transform: translateX(-8px)
}
}
.spin {
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.heart {
animation: 1.8s infinite beatHeart;
}
@keyframes beatHeart {
0% {
transform: scale(1);
}
25% {
transform: scale(1.1);
}
40% {
transform: scale(1);
}
60% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#menu-toggle:checked+#menu {
display: block;
}
</style>