Merge branch 'master' into rem-git-mod

This commit is contained in:
nevfy 2024-04-19 00:04:29 +03:00
commit 06f5fb9d94
6 changed files with 136 additions and 104 deletions

View file

@ -23,7 +23,6 @@
.sp-footer span i {
margin: auto;
}
.rounded-img {
border-radius: 1rem;
}
@ -91,28 +90,18 @@
margin-top: 6rem;
}
.sp-supperted-by-img {
max-height: 5rem;
.sp-supported-by-img {
max-width: 15rem;
margin: 1rem;
}
.sp-supported-by-list {
display: flex;
align-items: center;
justify-content: space-around;
justify-content: center;
column-gap: 5vw;
flex-wrap: wrap;
}
.sp-supported-by-card {
background: white;
box-shadow: $shadow;
border-radius: 10px;
border: none;
margin-top: 1rem;
}
body {
background-color: $bg-color;
margin-top: 2rem;
}
a.nav-link.sp-coming-soon {
@ -129,3 +118,43 @@ a.nav-link.sp-coming-soon {
border-radius: .1rem;
}
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
body {
background-color: $bg-color;
}
.sp-advantages {
row-gap: 0px;
}
.sp-advantages-header {
position: sticky;
top: 10vh;
margin-bottom: 5rem;
}
.sp-feature {
position: sticky;
top: 0;
min-height: 100vh;
}
.sp-feature-green {
background-color: #e9f1da !important;
}
.sp-feature-blue {
background-color: #e1eaea !important;
}
.sp-feature-purple {
background-color: #ebe0e8 !important;
}
.container-fluid {
padding-left: 0 !important;
padding-right: 0 !important;
}

View file

@ -1,6 +1,7 @@
.td-navbar {
background: $dark;
min-height: 5rem;
z-index: 15;
.navbar-brand__name {
display: none;
}
@ -192,4 +193,8 @@ li:has(input[type="checkbox"]) {
.td-sidebar-toc {
padding-top: 2.75rem;
}
}
.carousel-control-next, .carousel-control-prev {
background-image: none;
}

View file

@ -5,19 +5,10 @@ linkTitle = "SelfPrivacy"
+++
{{< blocks/section color="dark" type="section" >}}
<div class="row">
<div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center">
<div class="col-xs-12 col-md-4">
<div class="container rounded">
<div id="screenshotsCarouselControls" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#screenshotsCarouselControls" data-slide-to="0" class="active"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="1"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="2"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="3"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="4"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="5"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="6"></li>
</ol>
<div class="carousel-inner rounded">
<div class="carousel-item">
<img class="d-block w-100" src="/images/screenshots/1-en.png" alt="First slide">
@ -41,6 +32,15 @@ linkTitle = "SelfPrivacy"
<img class="d-block w-100" src="/images/screenshots/7-en.png" alt="Seventh slide">
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#screenshotsCarouselControls" data-slide-to="0" class="active"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="1"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="2"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="3"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="4"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="5"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="6"></li>
</ol>
<a class="carousel-control-prev" href="#screenshotsCarouselControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
@ -52,7 +52,7 @@ linkTitle = "SelfPrivacy"
</div>
</div>
</div>
<div class="col-xs-12 col-md-8 my-auto">
<div class="col-xs-12 col-md-8 col-lg-6 my-auto">
<div class="container my-4">
<h1>
SelfPrivacy app allows you to set up self-hosted services and manage them
@ -65,12 +65,12 @@ linkTitle = "SelfPrivacy"
</div>
{{< /blocks/section >}}
<section class="container-fluid">
<div class="row w-100">
<section class="container">
<div class="w-100">
<h2 class="mx-auto text-center font-weight-bolder">Your personal services</h2>
</div>
<div class="row w-100 mt-5 mb-3">
<div class="w-100 mt-5 mb-3">
<h3 class="mx-auto text-center">For serious business</h3>
</div>
@ -94,7 +94,7 @@ linkTitle = "SelfPrivacy"
</div>
</div>
<div class="row w-100 mt-5 mb-3">
<div class="w-100 mt-5 mb-3">
<h3 class="mx-auto text-center">For entertainment and communication</h3>
</div>
@ -118,8 +118,7 @@ linkTitle = "SelfPrivacy"
</div>
</div>
<div class="row w-100 mt-5 mb-3">
<div class="w-100 mt-5 mb-3">
<h3 class="mx-auto text-center">For a good life</h3>
</div>
@ -139,47 +138,47 @@ linkTitle = "SelfPrivacy"
</div>
</section>
<section class="container-fluid">
<div class="row w-100">
<section class="container-fluid d-flex flex-column sp-advantages">
<div class="w-100 sp-advantages-header">
<h2 class="mx-auto text-center">Advantages</h2>
</div>
{{< landing-feature privacy "Privacy" >}}
{{< landing-feature privacy "Privacy" "-green" >}}
<p class="card-text">No registration, cookies or telemetry.</p>
{{< /landing-feature >}}
{{< landing-feature zerotrust "Zero trust" "right">}}
{{< landing-feature zerotrust "Zero trust" "-blue" "right" >}}
<p class="card-text">SelfPrivacy is developed on the «zero trust» principle, even in relation to SelfPrivacy developers. That means you're the sole owner of your data.</p>
{{< /landing-feature >}}
{{< landing-feature security "Security">}}
{{< landing-feature security "Security" "-purple" >}}
<p class="card-text">Open source. The $2,000 reward for RCE vulnerability significantly increases security compared to conventional self-hosted solutions.</p>
{{< /landing-feature >}}
{{< landing-feature simplicity "Simplicity" "right">}}
{{< landing-feature simplicity "Simplicity" "-green" "right">}}
<p class="card-text">It is simple. Without console, complicated instructions, monitoring and involvement of specialists.</p>
{{< /landing-feature >}}
{{< landing-feature arrow "No license agreements">}}
{{< landing-feature arrow "No license agreements" "-blue" >}}
<p class="card-text">What is written in the license agreements that you accept without reading? It says that you allow companies to do anything with your data. SelfPrivacy has no license agreements.</p>
{{< /landing-feature >}}
{{< landing-feature coolhack3r "Save your time and money" "right">}}
{{< landing-feature coolhack3r "Save your time and money" "-purple" "right">}}
<p class="card-text">How to save $500 or two weeks of your life? Will it take the same time and money for a specialist to set everything up from scratch?</p>
<p class="card-text">SelfPrivacy team works continuously to speed up and simplify this process to a few clicks.</p>
<p class="card-text">Now anyone will be capable to set up their own data center.</p>
{{< /landing-feature >}}
{{< landing-feature thisisfine "Functionality">}}
{{< landing-feature thisisfine "Functionality" "-green">}}
<p class="card-text">Your data will not be lost thanks to regular automatic backups to a separate data center. </p>
{{< /landing-feature >}}
{{< landing-feature smartphonecomparison "Independence" "right">}}
{{< landing-feature smartphonecomparison "Independence" "-blue" "right">}}
<p class="card-text">Your communications on the internet no longer depend on Google, Facebook, Amazon and others E-Corps.</p>
<p class="card-text">Your services, your rules! You will not be blocked or disabled, accidentally or for any other reason. Your infrastructure and data will always remain with you.</p>
{{< /landing-feature >}}
{{< landing-feature datactrl "Data control">}}
{{< landing-feature datactrl "Data control" "-purple" >}}
<p class="card-text">Why do corporations need your data? To make you buy more and vote as they want. With SelfPrivacy, only you have your data.</p>
{{< /landing-feature >}}
</section>
@ -190,13 +189,13 @@ linkTitle = "SelfPrivacy"
<h2 class="mx-auto text-center">Supported by</h2>
</div>
<div class="card sp-supported-by-card h-100">
<div class="card-body sp-supported-by-list">
<div class="container-fluid">
<div class="sp-supported-by-list">
<a href="https://nlnet.nl/project/SelfPrivacy/" target="_blank" rel="noopener noreferrer">
<img class="sp-supperted-by-img" src="/images/logos/nlnet.svg" alt="NLnet foundation">
<img class="sp-supported-by-img" src="/images/logos/nlnet.svg" alt="NLnet foundation">
</a>
<a href="https://privacyaccelerator.org" target="_blank" rel="noopener noreferrer">
<img class="sp-supperted-by-img" src="/images/logos/PrivacyAcceleratorLogo.svg" alt="Privacy Accelerator">
<img class="sp-supported-by-img" src="/images/logos/PrivacyAcceleratorLogo.svg" alt="Privacy Accelerator">
</a>
</div>
</div>

View file

@ -5,19 +5,10 @@ linkTitle = "SelfPrivacy"
+++
{{< blocks/section color="dark" type="section">}}
<div class="row">
<div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center">
<div class="col-xs-12 col-md-4">
<div class="container rounded">
<div id="screenshotsCarouselControls" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#screenshotsCarouselControls" data-slide-to="0" class="active"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="1"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="2"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="3"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="4"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="5"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="6"></li>
</ol>
<div class="carousel-inner rounded">
<div class="carousel-item">
<img class="d-block w-100" src="/images/screenshots/1-ru.png" alt="Первый слайд">
@ -40,8 +31,16 @@ linkTitle = "SelfPrivacy"
<div class="carousel-item">
<img class="d-block w-100" src="/images/screenshots/7-ru.png" alt="Седьмой слайд">
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#screenshotsCarouselControls" data-slide-to="0" class="active"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="1"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="2"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="3"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="4"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="5"></li>
<li data-target="#screenshotsCarouselControls" data-slide-to="6"></li>
</ol>
<a class="carousel-control-prev" href="#screenshotsCarouselControls" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
@ -55,13 +54,13 @@ linkTitle = "SelfPrivacy"
</div>
</div>
</div>
<div class="col-xs-12 col-md-8 my-auto">
<div class="col-xs-12 col-md-8 col-lg-6 my-auto">
<div class="container my-4">
<h1>
Приложение SelfPrivacy поможет настроить селфхост-сервисы и управлять ими
</h1>
<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding"
href="{{< relref "/download">}}">
href="{{< relref "/download" >}}">
Скачать
</a>
</div>
@ -69,12 +68,12 @@ linkTitle = "SelfPrivacy"
</div>
{{< /blocks/section>}}
<section class="container-fluid">
<div class="row w-100">
<h2 class="mx-auto text-center">Ваши личные сервисы</h2>
<section class="container">
<div class="w-100">
<h2 class="mx-auto text-center font-weight-bolder">Ваши личные сервисы</h2>
</div>
<div class="row w-100 mt-5 mb-3">
<div class="w-100 mt-5 mb-3">
<h3 class="mx-auto text-center">Для серьезных дел</h3>
</div>
@ -99,7 +98,7 @@ linkTitle = "SelfPrivacy"
</div>
</div>
<div class="row w-100 mt-5 mb-3">
<div class="w-100 mt-5 mb-3">
<h3 class="mx-auto text-center">Для развлечений и общения</h3>
</div>
@ -107,38 +106,36 @@ linkTitle = "SelfPrivacy"
<div class="col-md-4 col-xs-12 sp-services-row">
{{< landing-service "/images/services/deltachat.svg" "Мессенджер" >}}
<p class="card-text">Самый приватный мессенджер — это тот, у которого серверная часть находится
под вашим контролем. Это делает DeltaChat
приватнее Telegram и Signal.</p>
{{< /landing-service>}}
под вашим контролем. Это делает DeltaChat
приватнее Telegram и Signal.</p>
{{< /landing-service>}}
</div>
<div class="col-md-4 col-xs-12 sp-services-row">
{{< landing-service "/images/services/pleroma.svg" "Децентрализованная социальная сеть" >}}
<p class="card-text">Pleroma — социальная сеть в которой вы решаете, кого заблокировать и что
публиковать. Никакой больше рекламы и слежки.</p>
{{< /landing-service>}}
публиковать. Никакой больше рекламы и слежки.</p>
{{< /landing-service>}}
</div>
<div class="col-md-4 col-xs-12 sp-services-row">
{{< landing-service "/images/services/jitsi.svg" "Видеоконференция">}}
<p class="card-text">Zoom и Google-meet больше не нужны, когда есть Jitsi-meet. Очень простое и
удобное решение для видеоконференций.</p>
{{< /landing-service>}}
удобное решение для видеоконференций.</p>
{{< /landing-service>}}
</div>
</div>
<div class="row w-100 mt-5 mb-3">
<div class="w-100 mt-5 mb-3">
<h3 class="mx-auto text-center">Для хорошей жизни</h3>
</div>
<div class="row justify-content-md-center">
<div class="col-md-4 col-xs-12 sp-services-row">
{{< landing-service "/images/services/openconnect.svg" "VPN для друзей и близких" >}}
<p class=" card-text">Ни один публичный VPN не может быть приватным, если только он не расположен на вашем сервере.
OpenConnect — подключайте
неограниченное количество устройств.</p>
{{< /landing-service>}}
<p class=" card-text">Ни один публичный VPN не может быть приватным, если только он не расположен на вашем сервере. OpenConnect — подключайте неограниченное количество устройств.</p>
{{< /landing-service>}}
</div>
<div class="col-md-4 col-xs-12 sp-services-row">
@ -146,69 +143,69 @@ linkTitle = "SelfPrivacy"
<p class="card-text">Пароли больше не нужно запоминать, копировать между устройствами,
придумывать или вводить вручную.</p>
<p class="card-text">Bitwarden — надежный менеджер паролей для всех устройств.</p>
{{< /landing-service>}}
{{< /landing-service>}}
</div>
</div>
</section>
<section class="container-fluid">
<div class="row w-100">
<div class="w-100">
<h2 class="mx-auto text-center">Преимущества</h2>
</div>
{{< landing-feature privacy "Приватность">}}
{{< landing-feature privacy "Приватность" "-green">}}
<p class="card-text">Без регистрации, куков, телеметрии, логов, гугл аналитики и облаков.</p>
{{< /landing-feature>}}
{{< landing-feature zerotrust "Нулевое доверие" "right">}}
{{< landing-feature zerotrust "Нулевое доверие" "-blue" "right">}}
<p class="card-text">SelfPrivacy разработан по принципу "нулевого доверия", даже к самим разработчикам SelfPrivacy. Это значит, что вы — единственный владелец своих данных.</p>
{{< /landing-feature>}}
{{< landing-feature security "Безопасность">}}
{{< landing-feature security "Безопасность" "-purple" >}}
<p class="card-text">Открытый код. Вознаграждение $2000 за RCE-уязвимость значительно повышает безопасность в сравнении с обычными self-hosted решениями.</p>
{{< /landing-feature>}}
{{< landing-feature simplicity "Простота" "right">}}
{{< landing-feature simplicity "Простота" "-green" "right">}}
<p class="card-text">Это работает просто. Без консоли, сложных инструкций, мониторинга и привлечения специалистов.</p>
{{< /landing-feature>}}
{{< landing-feature arrow "Без лицензионных соглашений">}}
{{< landing-feature arrow "Без лицензионных соглашений" "-blue" >}}
<p class="card-text">Что написано в лицензионных соглашениях, которые вы принимаете, не читая? Там написано, что с вашими данными можно делать что угодно. В SelfPrivacy нет лицензионных соглашений.</p>
{{< /landing-feature>}}
{{< landing-feature coolhack3r "Экономия времени, денег и сил" "right">}}
{{< landing-feature coolhack3r "Экономия времени, денег и сил" "-purple" "right">}}
<p class="card-text">Как сэкономить $500 или две недели жизни? Столько понадобится времени и денег специалисту, чтобы настроить все самому с нуля?</p>
<p class="card-text">Команда SelfPrivacy непрерывно работает, чтобы ускорить и упростить этот процесс до нескольких кликов.</p>
<p class="card-text">Теперь создание личного дата-центра под силу любому желающему.</p>
{{< /landing-feature>}}
{{< landing-feature thisisfine "Функционал">}}
{{< landing-feature thisisfine "Функционал" "-green">}}
<p class="card-text">Ваши данные никуда не пропадут благодаря регулярному автоматическому резервному копированию в отдельный дата-центр.</p>
{{< /landing-feature>}}
{{< landing-feature smartphonecomparison "Независимость" "right" >}}
{{< landing-feature smartphonecomparison "Независимость" "-blue" "right" >}}
<p class="card-text">Ваши коммуникации в интернете не зависят от Google, Facebook, Amazon и прочих мегакорпораций.</p>
<p class="card-text">Ваши сервисы — ваши правила! Вас не заблокируют, не отключат, случайно или по какой-либо другой причине. Ваша инфраструктура и данные всегда останутся с вами.</p>
{{< /landing-feature>}}
{{< landing-feature datactrl "Контроль данных">}}
{{< landing-feature datactrl "Контроль данных" "-purple" >}}
<p class="card-text">Почему корпорациям так нужны ваши данные? Чтобы больше покупали, чтобы Вы голосовали, как им нужно. В SelfPrivacy ваши данные остаются только у вас.</p>
{{< /landing-feature>}}
</section>
<section class="container-fluid">
<div class="row w-100">
<div class="w-100">
<h2 class="mx-auto text-center">Нас поддерживают</h2>
</div>
<div class="card sp-supported-by-card h-100">
<div class="card-body sp-supported-by-list">
<div class="container-fluid">
<div class="sp-supported-by-list">
<a href="https://nlnet.nl/project/SelfPrivacy/" target="_blank" rel="noopener noreferrer">
<img class="sp-supperted-by-img" src="/images/logos/nlnet.svg" alt="NLnet foundation">
<img class="sp-supported-by-img" src="/images/logos/nlnet.svg" alt="NLnet foundation">
</a>
<a href="https://privacyaccelerator.org" target="_blank" rel="noopener noreferrer">
<img class="sp-supperted-by-img" src="/images/logos/PrivacyAcceleratorLogo.svg" alt="Privacy Accelerator">
<img class="sp-supported-by-img" src="/images/logos/PrivacyAcceleratorLogo.svg" alt="Privacy Accelerator">
</a>
</div>
</div>

View file

@ -1,26 +1,28 @@
{{ $illustration := .Page.Resources.GetMatch (printf "**%s*" (.Get 0)) }}
{{ $title := .Get 1 }}
{{ $side := .Get 2 }}
<div class="row justify-content-md-center my-2 align-items-center w-100">
{{ if eq $side "right" }}
<div class="col-md-8 col-xs-12 my-auto px-5">
{{ $bg := .Get 2 }}
{{ $side := .Get 3 }}
{{ if eq $side "right" }}
<div class="d-flex flex-column flex-lg-row flex-xl-row justify-content-center align-items-center sp-feature sp-feature{{ $bg }} my-auto">
<div class="flex-none col-xl-4 col-lg-6 col-md-8 col-xs-12 px-5">
{{ if $title }}
<h2 class="sp-feature-title">{{ $title }}</h2>
{{ end }}
{{ .Inner }}
</div>
{{ if $illustration }}
<div class="col-md-4 col-xs-12 my-auto">
<img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}" alt="">
<div class="col-lg-4 col-md-6 col-sm-8 col-xs-12">
<img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}">
</div>
{{ end }}
{{ else }}
<div class="d-flex flex-column-reverse flex-lg-row flex-xl-row justify-content-center align-items-center sp-feature sp-feature{{ $bg }}">
{{ if $illustration }}
<div class="col-md-4 col-xs-12 my-auto">
<img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}" alt="">
<div class="col-lg-4 col-md-6 col-sm-8 col-xs-12">
<img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}">
</div>
{{ end }}
<div class="col-md-8 col-xs-12 my-auto px-5">
<div class="col-xl-4 col-lg-6 col-md-8 col-xs-12 px-5">
{{ if $title }}
<h2 class="sp-feature-title">{{ $title }}</h2>
{{ end }}

View file

@ -19,6 +19,6 @@
"devDependencies": {
"autoprefixer": "^10.4.0",
"postcss": "^8.3.7",
"postcss-cli": "^9.0.2"
"postcss-cli": "^9.1.0"
}
}