Merge pull request 'redesign' (#19) from redesign into master

Reviewed-on: http://git.macaw.me:3000/Tolstoevsky/switching/pulls/19
This commit is contained in:
Tolstoevsky 2020-10-15 07:58:35 +00:00
commit b419550ab1
20 changed files with 1324 additions and 805 deletions

View file

@ -1,102 +0,0 @@
@font-face {
font-family: 'comfortaa';
src:url('../fonts/comfortaa.ttf');
}
.textblock {
background-color:#1f2833;
border-radius:2px;
border: 1px solid #667;
display:inline-block;
width: auto;
color: #c5c6c7;
padding: 1% 1% 1% 1%;
margin: 1% 1% 1% 1%;
}
.imgblock {
background-color:#1e2832;
border-radius:2px;
border:1px solid #667;
display:inline-block;
width: 96%;
height: 99%;
color: #c5c6c7;
padding: 1% 1% 1% 1%;
margin: 15% 1% 1% 1%;
}
.imgblock img {
margin: 1% 1% 1% 1%;
float: left;
}
body {
font: 100%/150% comfortaa;
width: 60%;
max-width: 80%;
margin: 0 auto;
background-color:#0b0c10;
}
p {
margin: 0 0 20px;
}
a {
color: #45a29e;
text-decoration: none;
}
a:hover {
color: #66fcf1;
}
h1, h2, h3 {
color: #eee;
margin: 20px 0 10px;
}
h1 {
font-size: 1.7em;
color: #bbb;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.1em;
}
h1, h2, h3 {
color: #999;
margin: 20px 0 10px;
font-family: "comfortaa";
}
.zoom {
transition: transform .2s;
margin: 0 auto;
}
.zoom:hover {
-ms-transform: scale(2); /* IE 9 */
-webkit-transform: scale(2); /* Safari 3-8 */
transform: scale(2);
}
@media screen and (max-width: 900px) {
body {
max-width: 90%;
width: 80%;
}
}
@media screen and (max-width: 716px) {
body {
max-width: 98%;
width: 96%;
}
}

View file

@ -1,47 +0,0 @@
.Button {
box-shadow: 0px 10px 14px -7px #3e7327;
background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
background-color:#77b55a;
border-radius:4px;
border:1px solid #4b8f29;
display:flex;
cursor:pointer;
color:#ffffff;
font-size:13px;
font-weight:bold;
padding:1% 2%;
text-decoration:none;
text-shadow:0px 1px 0px #5b8a3c;
}
.Button:hover {
background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
background-color:#72b352;
}
.Button:active {
position:relative;
top:1px;
}
.Button2 {
box-shadow:inset 0px -3px 7px 0px #29bbff;
background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
background-color:#2dabf9;
border-radius:3px;
border:1px solid #0b0e07;
display:flex;
cursor:pointer;
color:#ffffff;
font-size:15px;
padding:1% 2%;
text-decoration:none;
text-shadow:0px 1px 0px #263666;
}
.Button2:hover {
background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
background-color:#0688fa;
}
.Button2:active {
position:relative;
top:1px;
}

View file

@ -1,174 +0,0 @@
* {
box-sizing: border-box;
}
/* custom scrollbar */
::-webkit-scrollbar {
width: .95em;
}
/* dummy content */
.content {
float: left;
margin: .75em 0 0 0;
transition: margin .3s ease-in-out;
}
.content > p {
margin: .25em 0 .75em 0;
}
/* Advanced Checkbox Hack */
body {
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
position: fixed;
left: 0;
display: none;
width: 2em;
height: .5em;
padding: 20px;
font-size: 1.1em;
color: #fff;
transition: color .3s ease-in-out;
cursor: pointer;
user-select: none;
margin: 0;
# background-color:blue;
}
/* big screens */
nav[role="off-canvas"] {
position: relative;
width: 50em;
margin: 0 auto;
transition-duration: .3s, .5s;
transition-timing-function: ease-in-out;
transition-property: left, opacity, box-shadow;
}
nav[role="off-canvas"] a {
color: #fff;
text-decoration: none;
transition: color .3s ease-in-out;
display: table-cell;
vertical-align: middle;
}
nav[role="off-canvas"] ul {
padding: 0;
margin: 0 auto;
width: 100%;
}
nav[role="off-canvas"] ul > li {
float: left;
padding: .55em .55em;
width: 8em;
margin: .5em;
opacity: .8;
text-transform: uppercase;
display: table;
cursor: pointer;
text-align: center;
transition-duration: .3s;
transition-timing-function: ease-in-out;
transition-property: box-shadow, color, opacity, padding-left;
cursor: pointer;
}
nav[role="off-canvas"] ul > li:hover {
color: #fff;
opacity: 1;
box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.95);
}
nav[role="off-canvas"] ul > li
.active
{
color: #fff;
opacity: 1;
box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.95);
}
/* small screens */
@media screen and (max-width: 44em) {
html,
body {
margin: 0;
overflow-x: hidden;
}
.content {
margin: 2.5em .5em 0 .5em;
}
nav[role="off-canvas"] {
position: absolute;
top: 3em;
left: -20em;
width: 20em;
opacity: 0;
}
nav[role="off-canvas"] ul > li {
height: 100%;
width: 100%;
text-align: left;
margin: 0;
background: black;
}
nav[role="off-canvas"] ul > li:hover {
box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.45);
}
label {
display: block;
}
label:after {
position: absolute;
right: .25em;
top: 0;
content: "\2261";
font-size: 1.8em;
}
label:hover,
input:checked ~ label {
color: #000;
}
input:checked ~ nav[role="off-canvas"] {
opacity: 1;
left: 0;
box-shadow: -30em 0 0 30em rgba(0, 0, 0, 0.3);
}
input:checked ~ nav[role="off-canvas"] ul > li {
padding: .55em .55em .55em 1.5em;
}
input:checked ~ nav[role="off-canvas"] ul > li:hover {
padding-left: 3.5em;
}
input:checked ~ nav[role="off-canvas"] ul > li:after {
position: absolute;
right: .25em;
content: "\203A";
color: inherit;
}
input:checked ~ .content {
margin-left: 20.5em;
margin-right: -20.5em;
}
}

1
css/picnic.min.css vendored Normal file

File diff suppressed because one or more lines are too long

1
css/picnic.min.css.bak Normal file

File diff suppressed because one or more lines are too long

View file

@ -6,30 +6,103 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>У вас всегда есть выбор! - Документы и агитматериалы.</title> <title>У вас всегда есть выбор! - Документы и агитматериалы.</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/picnic.min.css">
<link rel="stylesheet" href="css/menu.css"> <style>aside a.top {
<link rel="stylesheet" href="css/btn.css"> font-size: 0;
</head> position: fixed;
bottom: 0;
font-weight: bold;
width: 180px;
padding: .6em 0;
margin-bottom: 0;
border-radius: .3em .3em 0 0;
transition: all .3s ease;
}
aside a.top.visible {
font-size: 1em;
}
aside .links a.button {
text-align: left;
}
@media all and (max-width: 1000px) {
aside a.pseudo.top {
background: rgba(255, 255, 255, .8);
width: 100%;
left: 0;
text-align: center;
z-index: 100;
}
}
.documentation article > h2 {
margin: -2em 0 .6em;
padding: 3em 0 0;
line-height: 1;
}
.documentation article > h3 {
margin-bottom: .6em;
}
.documentation aside h2 {
margin-top: 0;
padding: 1.25em 0;
line-height: 1;
}
.documentation aside a.pseudo {
color: #0074D9;
margin: 0;
}
.documentation > section {
background: #fff;
text-align: left;
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 80px 0 0;
}
.documentation article > h1 {
margin: 0;
padding: 0.6em 0;
font-size: 2em;
line-height: 1.5;
}
.documentation aside a.button {
display: block;
}
.documentation pre[class*="language-"] {
margin-top: 10px;
margin-bottom: 40px;
}
.documentation .index pre {
margin: 0;
font-size: .9em;
}
</style>
</head>
<body> <body>
<input type="checkbox" id="menu"> <nav class="fedi">
<label for="menu" onclick></label> <a href="https://fedi.life" class="brand">
<nav role="off-canvas"> <img class="logo" src="images/logo.png" />
<ul> <span>Fedi.Life</span>
<li><a href="index.html">Главная</a></li> </a>
<li><a href="mail.html">Почта</a></li>
<li><a href="im.html">Мессенджеры</a></li>
<li><a href="social.html">Соцсети</a></li>
<li><a href="search.html">Поисковики</a></li>
<li><a href="extra.html" class="active">Документы и агитматериалы</a></li>
<li><a href="info.html">Подробнее</a></li>
</ul>
</nav>
<!-- responsive-->
<input id="bmenub" type="checkbox" class="show">
<label for="bmenub" class="burger pseudo button">menu</label>
<div class="menu">
<a href="mail.html" class="pseudo button">Почта</a>
<a href="im.html" class="pseudo button">Мессенджеры</a>
<a href="social.html" class="pseudo button">Соцсети</a>
<a href="search.html" class="pseudo button">Поисковики</a>
<a href="extra.html" class="pseudo button">Документы и агитматериалы</a>
<a href="info.html" class="pseudo button">Подробнее</a>
</div>
</nav>
<main id="home" class="documentation">
<section class="flex">
<div class="textblock"> <article class="four-fifth-1000">
<h2>Устав сообщества</h2> <header><h2>Устав сообщества</h2></header>
<p> <p>
<img src="images/book.png" align="right" style="margin: 0px 0px 0px 10px;" alt="устав"> <img src="images/book.png" align="right" style="margin: 0px 0px 0px 10px;" alt="устав">
@ -54,10 +127,9 @@
</ul> </ul>
</div> </div>
</div> </article>
<article class="four-fifth-1000">
<div class="textblock"> <header><h2>База знаний</h2></article>
<h2>База знаний</h2>
<p> <p>
<img src="images/know.png" align="right" style="margin: 0px 0px 0px 10px;" alt="база знаний"> <img src="images/know.png" align="right" style="margin: 0px 0px 0px 10px;" alt="база знаний">
Сообщество не было бы сообществом, если бы не свободный обмен знаниями. Сообщество не было бы сообществом, если бы не свободный обмен знаниями.
@ -86,20 +158,16 @@
</div> </article>
<div class="textblock" align="center"> <article class="four-fifth-1000">
<header><h2>Агитационные материалы</h2></header>
<h2>Агитационные материалы</h2>
<p> <p>
<div class="imgblock"> <div>
<a href="images/thumb1.png" > <img src="images/thumb1.png" width=15% max-width=100% style="float:left;">
<img src="images/thumb1.png" width=15% max-width=100% style="float:left;" class="zoom"></a> <img src="images/thumb2.png" width=15% max-width=100% style="float:left; margin:1%;">
<a href="images/thumb2.png" > <img src="images/transport.png" width=15% max-width=100% style="float:left; margin:1%;">
<img src="images/thumb2.png" width=15% max-width=100% style="float:left; margin:1%;" class="zoom"></a>
<a href="images/transport.png" >
<img src="images/transport.png" width=15% max-width=100% style="float:left; margin:1%;" class="zoom" ></a>
Вы можете помочь распространению информации о свободных альтернативах централизованным сервисам, Вы можете помочь распространению информации о свободных альтернативах централизованным сервисам,
дав ссылку на этот сайт, либо распечатав и распространив листовки дав ссылку на этот сайт, либо распечатав и распространив листовки
(не исключаем, что одна из них и привела вас сюда). Вливайтесь в ряды просветителей, (не исключаем, что одна из них и привела вас сюда). Вливайтесь в ряды просветителей,
@ -107,13 +175,20 @@
</p> </p>
<p> <p>
Приветствуется распространение информации в традиционных сетях, группах, раздача листовок на митингах. Приветствуется распространение информации в традиционных сетях, группах, раздача листовок на митингах.
<a class="Button" href="files/agit.zip">Скачать архив материалов</a> <a href="files/agit.zip">Скачать архив материалов</a>
</p> </p>
</article>
</section>
</main>
<section>
<hr>
<center>
<a href="https://tolstoevsky.ml"><img src="banner.gif"></a>&nbsp;|&nbsp;Created with <a href="https://picnicss.com/">PicniCSS</a>
</center>
</section>
</div>
</div>
</body> </body>
</html> </html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

262
im.html
View file

@ -5,45 +5,129 @@
<link rel="icon" <link rel="icon"
type="image/png" type="image/png"
href="favicon.png" /> href="favicon.png" />
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>У вас всегда есть выбор! — Мессенджеры</title> <title>У вас всегда есть выбор! — Мессенджеры</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/picnic.min.css">
<link rel="stylesheet" href="css/btn.css"> <style>aside a.top {
<link rel="stylesheet" href="css/menu.css"> font-size: 0;
position: fixed;
bottom: 0;
font-weight: bold;
width: 180px;
padding: .6em 0;
margin-bottom: 0;
border-radius: .3em .3em 0 0;
transition: all .3s ease;
}
aside a.top.visible {
font-size: 1em;
}
aside .links a.button {
text-align: left;
}
@media all and (max-width: 1000px) {
aside a.pseudo.top {
background: rgba(255, 255, 255, .8);
width: 100%;
left: 0;
text-align: center;
z-index: 100;
}
}
.documentation article > h2 {
margin: -2em 0 .6em;
padding: 3em 0 0;
line-height: 1;
}
.documentation article > h3 {
margin-bottom: .6em;
}
.documentation aside h2 {
margin-top: 0;
padding: 1.25em 0;
line-height: 1;
}
.documentation aside a.pseudo {
color: #0074D9;
margin: 0;
}
.documentation > section {
background: #fff;
text-align: left;
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 80px 0 0;
}
.documentation article > h1 {
margin: 0;
padding: 0.6em 0;
font-size: 2em;
line-height: 1.5;
}
.documentation aside a.button {
display: block;
}
.documentation pre[class*="language-"] {
margin-top: 10px;
margin-bottom: 40px;
}
.documentation .index pre {
margin: 0;
font-size: .9em;
}
</style>
</head> </head>
<body> <body>
<input type="checkbox" id="menu"> <nav class="fedi">
<label for="menu" onclick></label> <a href="https://fedi.life" class="brand">
<nav role="off-canvas"> <img class="logo" src="images/logo.png" />
<ul> <span>Fedi.Life</span>
<li><a href="index.html">Главная</a></li> </a>
<li><a href="mail.html">Почта</a></li>
<li><a href="im.html" class="active">Мессенджеры</a></li>
<li><a href="social.html">Соцсети</a></li>
<li><a href="search.html">Поисковики</a></li>
<li><a href="extra.html">Документы и агитматериалы</a></li>
<li><a href="info.html">Подробнее</a></li>
</ul>
</nav>
<!-- responsive-->
<input id="bmenub" type="checkbox" class="show">
<label for="bmenub" class="burger pseudo button">menu</label>
<div class="menu">
<a href="mail.html" class="pseudo button">Почта</a>
<a href="im.html" class="pseudo button">Мессенджеры</a>
<a href="social.html" class="pseudo button">Соцсети</a>
<a href="search.html" class="pseudo button">Поисковики</a>
<a href="extra.html" class="pseudo button">Документы и агитматериалы</a>
<a href="info.html" class="pseudo button">Подробнее</a>
</div>
</nav>
<div class="textblock"> <main id="home" class="documentation">
<h2>Децентрализованные мессенджеры</h2> <section class="flex">
<p>Способы быстро списаться и созвониться с нужным человеком</p>
<div class="imgblock">
<a href="images/movim.png" >
<picture>
<source srcset="images/conversations.png" media="(max-width: 700px)">
<source srcset="images/movim.png">
<img src="images/movim.png" width=45% max-width=100% alt="Jabber" class="zoom" >
</picture></a>
<p> <article class="four-fifth-1000">
<h3>XMPP (он же Jabber) - на замену WhatsApp и Telegram</h3>
<header><h3>Децентрализованные мессенджеры<h3></header>
<p>Способы быстро списаться и созвониться с нужным человеком. Общение через сеть должно быть безопасным, приватным и неподцензурным. И вот сервисы, которые вам помогут в этом:
</p>
</article>
<article class="card four-fifth-1000">
<header><h3>XMPP (он же Jabber) — на замену WhatsApp и Telegram</h3></header>
<center><label for="modal_jab"><img src="images/movim.png" width="80%"></label> </center>
<div class="modal">
<input id="modal_jab" type="checkbox" />
<label for="modal_jab" class="overlay"></label>
<article>
<header>
<h3>Jabber</h3>
<label for="modal_jab" class="close">&times;</label>
</header>
<section class="content">
<img src="images/movim.png" width="100%">
</section>
</article>
</div>
<span> <span>
Широко используемый свободный и открытый стандарт интернет-сообщений. Широко используемый свободный и открытый стандарт интернет-сообщений.
Весьма прост в использовании — устанавливаем приложение, регистрируем аккаунт, общаемся. Весьма прост в использовании — устанавливаем приложение, регистрируем аккаунт, общаемся.
@ -53,36 +137,46 @@
все пользователи доступны для вас. все пользователи доступны для вас.
</p> </p>
</p> </p>
<div class="textblock"> <center>
<h4>Где зарегистрироваться</h4> <div class="tabs two">
<input id='tab-1' type='radio' name='tabgroupB' checked />
<label class="pseudo button toggle" for="tab-1">Где зарегистрироваться</label>
<input id='tab-2' type='radio' name='tabgroupB'>
<label class="pseudo button toggle" for="tab-2">Приложения</label>
<a class="Button" href="https://xmpp.netwhood.online">Network Neighborhood</a> <div class="row">
<a class="Button" href="https://xmpp.jp">xmpp.jp</a> <div><center><button class="warning"><a href="https://xmpp.netwhood.online">Network Neighborhood</a></button>
<a class="Button" href="https://blabber.im">blabber.im</a> <button class="warning"><a href="https://xmpp.jp">XMPP.jp</a></button>
<a class="Button" href="https://jabber.ru">jabber.ru</a> <button class="warning"><a href="https://blabber.im">Blabber</a></button>
</div> <button class="warning"><a href="https://jabber.ru">Jabber.ru</a></button>
</center></div>
<div><center><button class="pseudo"><a href="https://f-droid.org/packages/eu.sum7.conversations/"><img src="images/fdroid.png">Conv6ations</a></button><br>
<button class="pseudo"><a href="https://play.google.com/store/apps/details?id=de.pixart.messenger"><img src="images/google.png">Pix-Art Messenger</a></button>
<button class="pseudo"><a href="https://apps.apple.com/app/tigase-messenger/id1153516838"><img src="images/apple.png">Siskin IM</a></button>
</center></div>
</div>
</div>
</center>
</article>
<div class="textblock"> <article class="card four-fifth-1000">
<h4>Мобильные приложения</h4> <header><h3>Jitsi Meet и Jami — на замену Skype</h3></header>
<a class="Button2" href="https://f-droid.org/packages/eu.sum7.conversations/"> <center><label for="modal_meet"><img src="images/jitsi.png" width="80%"></label> </center>
<IMG src="images/fdroid.png" width="24" height="24">Conv6ations (Android / F-Droid)</a> <div class="modal">
<a class="Button2" href="https://play.google.com/store/apps/details?id=de.pixart.messenger"> <input id="modal_meet" type="checkbox" />
<IMG src="images/google.png" width="24" height="24">Pix-Art Messenger (Google Play)</a> <label for="modal_meet" class="overlay"></label>
<a class="Button2" href="https://apps.apple.com/app/tigase-messenger/id1153516838"> <article>
<IMG src="images/apple.png" width="24" height="24">Siskin IM (iOS)</a> <header>
</div> <h3>Jitsi Meet</h3>
</span> <label for="modal_meet" class="close">&times;</label>
</header>
<section class="content">
<img src="images/jitsi.png" width="100%">
</section>
</article>
</div>
</div>
<div class="imgblock">
<a href="images/jitsi.png" >
<picture>
<source srcset="images/jitsi2.png" media="(max-width: 700px)">
<source srcset="images/jitsi.png">
<img src="images/jitsi.png" width=45% max-width=100% alt="Jitsi" class="zoom"></a>
</picture>
<h3>Jitsi Meet и Jami - на замену Skype</h3>
<span> <span>
Свободные открытые приложения для чатов и видеозвонков, разрабатываемые командами добровольцев. Свободные открытые приложения для чатов и видеозвонков, разрабатываемые командами добровольцев.
@ -94,35 +188,45 @@
В Jami дела обстоят схожим образом — каждому пользователю выдаётся уникальный код, В Jami дела обстоят схожим образом — каждому пользователю выдаётся уникальный код,
которым можно поделиться с другими участниками (аналог номера аськи/телефона...) которым можно поделиться с другими участниками (аналог номера аськи/телефона...)
</p> </p>
<div class="textblock" >
<h4>Приложения</h4>
<a class="Button2" href="https://jami.net/download-jami-linux/"><IMG src="images/linux.png" width="24" height="24">Jami (Linux)</a>
<a class="Button2" href="https://jami.net/download-jami-windows/"><IMG src="images/windows.png" width="24" height="24">Jami (Windows)</a>
<a class="Button2" href="https://jami.net/download-jami-macos/"><IMG src="images/apple.png" width="24" height="24">Jami (MacOS)</a>
</div>
<div class="textblock">
<h4>Мобильные приложения</h4> <center>
<a class="Button2" href="https://f-droid.org/packages/org.jitsi.meet"><img src="images/fdroid.png" width="24" height="24"> Jitsi (Android / F-Droid)</a> <div class="tabs two">
<a class="Button2" href="https://f-droid.org/packages/cx.ring"><IMG src="images/fdroid.png" width="24" height="24">Jami (Android / F-Droid)</a> <input id='tab-11' type='radio' name='tabgroupC' checked />
<a class="Button2" href="https://play.google.com/store/apps/details?id=cx.ring"><IMG src="images/google.png" width="24" height="24">Jami (Google play)</a> <label class="pseudo button toggle" for="tab-11">Приложения</label>
<a class="Button2" href="https://play.google.com/store/apps/details?id=org.jitsi.meet"><img src="images/google.png" width="24" height="24"> Jitsi (Google Play)</a> <input id='tab-21' type='radio' name='tabgroupC'>
<a class="Button2" href="https://apps.apple.com/app/jitsi-meet/id1165103905"><IMG src="images/apple.png" width="24" height="24">Jitsi (iOS)</a> <label class="pseudo button toggle" for="tab-21">Мобильные приложения</label>
<a class="Button2" href="https://apps.apple.com/app/ring-a-gnu-package/id1306951055"><IMG src="images/apple.png" width="24" height="24">Jami (iOS)</a>
</div>
<div class="textblock">
<h4>Web</h4>
<a class="Button" href="https://meet.jit.si/">meet.jit.si</a>
</div> <div class="row">
<div><center><button class="warning"><a href="https://jami.net/download-jami-linux/"><img src="images/linux.png">Jami (Linux)</a></button>
<button class="warning"><a href="https://jami.net/download-jami-windows/"><img src="images/windows.png">Jami (Windows)</a></button>
<button class="warning"><a href="https://jami.net/download-jami-macos/"><img src="images/apple.png">Jami (MacOS)</a></button>
<button class="warning"><a href="https://meet.jit.si/">Jitsi (Web)</a></button>
</center></div>
</div> <div>
</div> <center><button class="pseudo"><a href="https://f-droid.org/packages/org.jitsi.meet"><img src="images/fdroid.png">Jitsi (F-Droid)</a></button>
<button class="pseudo"><a href="https://f-droid.org/packages/cx.ring"><img src="images/fdroid.png">Jami (F-Droid)</a></button>
<button class="pseudo"><a href="https://play.google.com/store/apps/details?id=cx.ring"><img src="images/google.png">Jami (G-Play)</a></button>
</div> <button class="pseudo"><a href="https://play.google.com/store/apps/details?id=cx.ring"><img src="images/google.png">Jitsi (G-Play)</a></button>
<hr> <button class="pseudo"><a href="https://apps.apple.com/app/jitsi-meet/id1165103905"><img src="images/apple.png">Jitsi (iOS)</a></button>
<a href="https://tolstoevsky.ml"><img src="banner.gif"</a>
<button class="pseudo"><a href="https://apps.apple.com/app/ring-a-gnu-package/id1306951055"><img src="images/apple.png">Jami (iOS)</a></button>
</center></div>
</div>
</div>
</center>
</article>
</article>
</section>
</main>
<section>
<hr>
<center>
<a href="https://tolstoevsky.ml"><img src="banner.gif"></a>&nbsp;|&nbsp;Created with <a href="https://picnicss.com/">PicniCSS</a>
</center>
</section>
</body> </body>
</html> </html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
images/fdroid.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
images/google.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
images/logo-big.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
images/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

View file

@ -9,98 +9,220 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>У вас всегда есть выбор!</title> <title>У вас всегда есть выбор!</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/picnic.min.css">
<link rel="stylesheet" href="css/menu.css"> <style>
<link rel="stylesheet" href="css/popup.css"> aside a.top {
font-size: 0;
position: fixed;
bottom: 0;
font-weight: bold;
width: 180px;
padding: .6em 0;
margin-bottom: 0;
border-radius: .3em .3em 0 0;
transition: all .3s ease;
}
aside a.top.visible {
font-size: 1em;
}
aside .links a.button {
text-align: left;
}
@media all and (max-width: 1000px) {
aside a.pseudo.top {
background: rgba(255, 255, 255, .8);
width: 100%;
left: 0;
text-align: center;
z-index: 100;
}
}
.documentation article > h2 {
margin: -2em 0 .6em;
padding: 3em 0 0;
line-height: 1;
}
.documentation article > h3 {
margin-bottom: .6em;
}
.documentation aside h2 {
margin-top: 0;
padding: 1.25em 0;
line-height: 1;
}
.documentation aside a.pseudo {
color: #0074D9;
margin: 0;
}
.documentation > section {
background: #fff;
text-align: left;
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 80px 0 0;
}
.documentation article > h1 {
margin: 0;
padding: 0.6em 0;
font-size: 2em;
line-height: 1.5;
}
.documentation aside a.button {
display: block;
}
.documentation pre[class*="language-"] {
margin-top: 10px;
margin-bottom: 40px;
}
.documentation .index pre {
margin: 0;
font-size: .9em;
}
</style>
</head> </head>
<body> <body>
<input type="checkbox" id="menu">
<label for="menu" onclick></label>
<nav role="off-canvas">
<ul>
<li><a href="index.html" class="active">Главная</a></li>
<li><a href="mail.html">Почта</a></li>
<li><a href="im.html">Мессенджеры</a></li>
<li><a href="social.html">Соцсети</a></li>
<li><a href="search.html">Поисковики</a></li>
<li><a href="extra.html">Документы и агитматериалы</a></li>
<li><a href="info.html">Подробнее</a></li>
</ul>
</nav>
<div class="textblock">
<h2>Где я? О чём речь?</h2>
<p>
<img src="images/fedi-small.png" align="right" style="margin: 0px 0px 0px 10px;">
Вы на странице русского ответвления Fediverse — глобальной сети взаимосвязанных соцсетей. Мы предлагаем свободные
альтернативы популярным сервисам, сделанные людьми и для людей, а не корпорациями с целью извлечения прибыли. (Подробности -
<a href="info.html">здесь</a>).
<br>
По сути, это — <i>Сеть, как она была задумана.</i><br>
Огромное количество равноправных серверов, прозрачно взаимодействующих между собой. Пользователи и администраторы взаимодействуют
на равных и обладают равными правами.
</div>
<div class="textblock"> <nav class="fedi">
<h2>Зачем это мне?</h2> <a href="https://fedi.life" class="brand">
<img class="logo" src="images/logo.png" />
<span>Fedi.Life</span>
</a>
<!-- responsive-->
<input id="bmenub" type="checkbox" class="show">
<label for="bmenub" class="burger pseudo button">menu</label>
<div class="menu">
<a href="mail.html" class="pseudo button">Почта</a>
<a href="im.html" class="pseudo button">Мессенджеры</a>
<a href="social.html" class="pseudo button">Соцсети</a>
<a href="search.html" class="pseudo button">Поисковики</a>
<a href="extra.html" class="pseudo button">Документы и агитматериалы</a>
<a href="info.html" class="pseudo button">Подробнее</a>
</div>
</nav>
<main id="home" class="documentation">
<section class="flex">
<article class="card four-fifth-1000">
<header>Где я? О чём речь?</header>
<img src="images/fedi-small.png" align="right">
<p> <p>
<img src="images/q.png" align="right" style="margin: 0px 0px 0px 10px;"> Вы на странице русского ответвления Fediverse — глобальной сети взаимосвязанных соцсетей. Мы предлагаем свободные
альтернативы популярным сервисам, сделанные людьми и для людей, а не корпорациями с целью извлечения прибыли. (Подробности - <a href="info.html">здесь</a>).
По сути, это — <i>Сеть, как она была задумана.</i> Огромное количество равноправных серверов, прозрачно взаимодействующих между собой. Пользователи и администраторы взаимодействуют
на равных и обладают равными правами.
</p>
</article>
<article class="card four-fifth-1000">
<header>Зачем это мне?</header>
<p>
<img src="images/q.png" align="right">
<i>Неподцензурность пользователя, никакой рекламы и слежки.</i><br> <i>Неподцензурность пользователя, никакой рекламы и слежки.</i><br>
Представьте, что у вас возник конфликт с администрацией вашей любимой сети, ваши сообщения удаляют, аккаунт блокируют. Представьте, что у вас возник конфликт с администрацией вашей любимой сети, ваши сообщения удаляют, аккаунт блокируют.
И заново зайти в привычный уже Вконтакте/Facebook — в лучшем случае через долгое унижение в чате техподдержки, фотографии И заново зайти в привычный уже Вконтакте/Facebook — в лучшем случае через долгое унижение в чате техподдержки, фотографии
паспорта и прочую дурь. Хотелось бы вам в этом случае просто по щелчку мышки зайти в "другой" ВК/FB и продолжить общение паспорта и прочую дурь. Хотелось бы вам в этом случае просто по щелчку мышки зайти в "другой" ВК/FB и продолжить общение
с теми же друзьями, обсуждать те же темы, но уже в недосягаемости от обозлённой администрации? У нас так можно. И даже больше с теми же друзьями, обсуждать те же темы, но уже в недосягаемости от обозлённой администрации? У нас так можно. И даже больше
— никто не мешает самому стать полновластным админом (при наличии минимальной технической подготовки). — никто не мешает самому стать полновластным админом (при наличии минимальной технической подготовки).
</p>
</div>
<div class="textblock"> </article>
<h2>Чем вы лучше?</h2>
<article class="card four-fifth-1000">
<header>Чем вы лучше?</header>
<p> <p>
<img src="images/globe.png" align="right" style="margin: 0px 0px 0px 10px;"> <img src="images/globe.png" align="right">
Всего два слова — <i>абсолютная взаимосвязанность.</i> <br> Всего два слова — <i>абсолютная взаимосвязанность.</i>
У каждого есть свой предпочтительный формат общения — кто-то любит потоки молниеносных сообщений Твиттера, кто-то — У каждого есть свой предпочтительный формат общения — кто-то любит потоки молниеносных сообщений Твиттера, кто-то —
сложный формат взаимодействия ВК и Facebook, кто-то предпочитает видео или фото... Теперь представьте, что из Твиттера сложный формат взаимодействия ВК и Facebook, кто-то предпочитает видео или фото... Теперь представьте, что из Твиттера
вы можете комментировать/лайкать/репостить посты YouTube, Instagram, ВК, а авторы, вещающие в удобном для них формате, вы можете комментировать/лайкать/репостить посты YouTube, Instagram, ВК, а авторы, вещающие в удобном для них формате,
оттуда вам отвечают, поддерживая полноценное общение, и никуда не надо перелогиниваться. Удобно? <i>У нас так можно.</i> оттуда вам отвечают, поддерживая полноценное общение, и никуда не надо перелогиниваться. Удобно? <i>У нас так можно.</i>
</p> </p>
</div> </article>
<div class="textblock"> <article class="card four-fifth-1000">
<h2>Ну ладно. Что дальше?</h2> <header>Ну ладно. Что дальше?</header>
<p> <p>Просто попробуйте свободную альтернативу</p>
<h3>Просто попробуйте свободную альтернативу:</h3> <p>Все неэтичные сервисы, работющие против вас, можно легко заменить на свободные аналоги, которые зачастую намного удобнее и функциональнее. Ознакомьтесь с примерами ниже.</p>
</article>
<div class="imgblock"> <article class="card four-fifth-1000">
<a href="images/mastodon2.png" > <header>Twitter</header>
<img src="images/mastodon2.png" width=45% style="float:left; margin:1%;" class="zoom"></a> <center><label for="modal_masto"><img src="images/mastodon2.png" width="80%"></label> </center>
<div class="modal">
<input id="modal_masto" type="checkbox" />
<label for="modal_masto" class="overlay"></label>
<article>
<header>
<h3>Mastodon</h3>
<label for="modal_masto" class="close">&times;</label>
</header>
<section class="content">
<img src="images/mastodon2.png" width="100%">
</section>
</article>
</div>
<p>
Замените Twitter на <a href="social.html#mastodon">Mastodon</a> — он намного удобней. (На данный момент Замените Twitter на <a href="social.html#mastodon">Mastodon</a> — он намного удобней. (На данный момент
— самая популярная из этичных социальных сетей с миллионами пользователей. Больше всего напоминает Твиттер, — самая популярная из этичных социальных сетей с миллионами пользователей. Больше всего напоминает Твиттер,
только с большим лимитом символов и более гибким интерфейсом). только с большим лимитом символов и более гибким интерфейсом).</p>
</div> </article>
<br>
<article class="card four-fifth-1000">
<header>Facebook/Вконтакте</header>
<center><label for="modal_fr"><img src="images/friendica.png" width="80%"></label> </center>
<div class="modal">
<input id="modal_fr" type="checkbox" />
<label for="modal_fr" class="overlay"></label>
<article>
<header>
<h3>Friendica</h3>
<label for="modal_fr" class="close">&times;</label>
</header>
<section class="content">
<img src="images/friendica.png" width="100%">
</section>
</article>
</div>
<p>
<div class="imgblock">
<a href="images/friendica.png" >
<img src="images/friendica.png" width=45% style= "float:left; margin:1%;" class="zoom"></a>
Замените Facebook/ВК на <a href="social.html#friendica">Friendica</a>. Также, как и Мастодон, Замените Facebook/ВК на <a href="social.html#friendica">Friendica</a>. Также, как и Мастодон,
Friendica создана из множества мелких сайтов, связанных воедино посредством федерации. Мелкие сайты, составляющие Френдику, называются "нодами". Friendica создана из множества мелких сайтов, связанных воедино посредством федерации. Мелкие сайты, составляющие Френдику, называются "нодами".
Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей в этих сетях не составит труда. Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей в этих сетях не составит труда. </p>
</div> </article>
<div class="imgblock"> <article class="card four-fifth-1000">
<a href="images/pixelfed.png" > <header>Instagram</header>
<img src="images/pixelfed.png" width=45% style="float:left; margin:1%;" class="zoom"></a> <center><label for="modal_pf"><img src="images/pixelfed.png" width="80%"></label> </center>
А вместо Instagram есть прекрасный <a href="social.html#pixelfed">PixelFed</a> — работает в любом браузере, между прочим. <div class="modal">
</div> <input id="modal_pf" type="checkbox" />
<p>И ведь на безопасные для вас альтернативы можно заменить очень многое... Пройдитесь по разделам сайта — вы будете приятно удивлены. <label for="modal_pf" class="overlay"></label>
</p> <article>
</div> <header>
</div> <h3>PixelFed</h3>
<hr> <label for="modal_pf" class="close">&times;</label>
<a href="https://tolstoevsky.ml"><img src="banner.gif"</a> </header>
<section class="content">
<img src="images/pixelfed.png" width="100%">
</section>
</article>
</div>
<p>А вместо Instagram есть прекрасный <a href="social.html#pixelfed">PixelFed</a> — работает в любом браузере, между прочим.</p>
</article>
<p>И ведь на безопасные для вас альтернативы можно заменить очень многое... Пройдитесь по разделам сайта — вы будете приятно удивлены.</p>
</article>
</section>
</main>
<section>
<hr>
<center>
<a href="https://tolstoevsky.ml"><img src="banner.gif"></a>&nbsp;|&nbsp;Created with <a href="https://picnicss.com/">PicniCSS</a>
</center>
</section>
</body> </body>
</html> </html>

152
info.html
View file

@ -10,40 +10,127 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>У вас всегда есть выбор!</title> <title>У вас всегда есть выбор!</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/picnic.min.css">
<link rel="stylesheet" href="css/menu.css"> <style>aside a.top {
<link rel="stylesheet" href="css/popup.css"> font-size: 0;
</head> position: fixed;
bottom: 0;
font-weight: bold;
width: 180px;
padding: .6em 0;
margin-bottom: 0;
border-radius: .3em .3em 0 0;
transition: all .3s ease;
}
aside a.top.visible {
font-size: 1em;
}
aside .links a.button {
text-align: left;
}
@media all and (max-width: 1000px) {
aside a.pseudo.top {
background: rgba(255, 255, 255, .8);
width: 100%;
left: 0;
text-align: center;
z-index: 100;
}
}
.documentation article > h2 {
margin: -2em 0 .6em;
padding: 3em 0 0;
line-height: 1;
}
.documentation article > h3 {
margin-bottom: .6em;
}
.documentation aside h2 {
margin-top: 0;
padding: 1.25em 0;
line-height: 1;
}
.documentation aside a.pseudo {
color: #0074D9;
margin: 0;
}
.documentation > section {
background: #fff;
text-align: left;
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 80px 0 0;
}
.documentation article > h1 {
margin: 0;
padding: 0.6em 0;
font-size: 2em;
line-height: 1.5;
}
.documentation aside a.button {
display: block;
}
.documentation pre[class*="language-"] {
margin-top: 10px;
margin-bottom: 40px;
}
.documentation .index pre {
margin: 0;
font-size: .9em;
}
</style>
</head>
<body> <body>
<nav class="fedi">
<a href="https://fedi.life" class="brand">
<img class="logo" src="images/logo.png" />
<span>Fedi.Life</span>
</a>
<input type="checkbox" id="menu"> <!-- responsive-->
<label for="menu" onclick></label> <input id="bmenub" type="checkbox" class="show">
<nav role="off-canvas"> <label for="bmenub" class="burger pseudo button">menu</label>
<ul>
<li><a href="index.html">Главная</a></li> <div class="menu">
<li><a href="mail.html">Почта</a></li> <a href="mail.html" class="pseudo button">Почта</a>
<li><a href="im.html">Мессенджеры</a></li> <a href="im.html" class="pseudo button">Мессенджеры</a>
<li><a href="social.html">Соцсети</a></li> <a href="social.html" class="pseudo button">Соцсети</a>
<li><a href="search.html">Поисковики</a></li> <a href="search.html" class="pseudo button">Поисковики</a>
<li><a href="extra.html">Документы и агитматериалы</a></li> <a href="extra.html" class="pseudo button">Документы и агитматериалы</a>
<li><a href="info.html" class="active">Подробнее</a></li> <a href="info.html" class="pseudo button">Подробнее</a>
</ul> </div>
</nav> </nav>
<main id="home" class="documentation">
<section class="flex">
<div class="textblock"> <article class="four-fifth-1000">
<div class="imgblock"> <center><label for="modal_k"><img src="images/koshka.jpg" width="80%"></label> </center>
<a href="images/koshka.jpg" > <div class="modal">
<img src="images/koshka.jpg" width=45% max-width=100% alt="До-Ре-Ми-Фа-Соль-Ля-Си. Кошка села за репост." class="zoom" > <input id="modal_k" type="checkbox" />
</a> <label for="modal_k" class="overlay"></label>
<article>
<header>
<h3>...кошка села за репост...</h3>
<label for="modal_k" class="close">&times;</label>
</header>
<section class="content">
<img src="images/koshka.jpg" width="100%">
</section>
</article>
</div>
<h1>Знакомая картинка?</h1>
<h2> Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное
<h2>Знакомая картинка?</h2>
<h3> Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное
слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные
картинки, хочется делиться своим творчеством и наслаждаться чужим, но без страха? картинки, хочется делиться своим творчеством и наслаждаться чужим, но без страха?
</h2> </h3>
<p> <p>
Забудьте. Хочется открыто высказывать своё мнение, и не попадать под цензуру администрации сети, просто Забудьте. Хочется открыто высказывать своё мнение, и не попадать под цензуру администрации сети, просто
за непопулярную там точку зрения? А может, вам ещё и не нравится быть товаром, да не штучным, за непопулярную там точку зрения? А может, вам ещё и не нравится быть товаром, да не штучным,
а мелочью в крупнооптовой партии? А может, вы ещё и о тайне личной переписки мечтаете? <b>Забудьте</b>. а мелочью в крупнооптовой партии? А может, вы ещё и о тайне личной переписки мечтаете? <b>Забудьте</b>.
@ -143,10 +230,15 @@
</article>
</div> </section>
</main>
</div> <section>
<hr>
<center>
<a href="https://tolstoevsky.ml"><img src="banner.gif"></a>&nbsp;|&nbsp;Created with <a href="https://picnicss.com/">PicniCSS</a>
</center>
</section>

340
mail.html
View file

@ -10,36 +10,123 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>У вас всегда есть выбор! — Электронная почта</title> <title>У вас всегда есть выбор! — Электронная почта</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/picnic.min.css">
<link rel="stylesheet" href="css/menu.css"> <style>aside a.top {
<link rel="stylesheet" href="css/btn.css"> font-size: 0;
</head> position: fixed;
bottom: 0;
font-weight: bold;
width: 180px;
padding: .6em 0;
margin-bottom: 0;
border-radius: .3em .3em 0 0;
transition: all .3s ease;
}
aside a.top.visible {
font-size: 1em;
}
aside .links a.button {
text-align: left;
}
@media all and (max-width: 1000px) {
aside a.pseudo.top {
background: rgba(255, 255, 255, .8);
width: 100%;
left: 0;
text-align: center;
z-index: 100;
}
}
.documentation article > h2 {
margin: -2em 0 .6em;
padding: 3em 0 0;
line-height: 1;
}
.documentation article > h3 {
margin-bottom: .6em;
}
.documentation aside h2 {
margin-top: 0;
padding: 1.25em 0;
line-height: 1;
}
.documentation aside a.pseudo {
color: #0074D9;
margin: 0;
}
.documentation > section {
background: #fff;
text-align: left;
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 80px 0 0;
}
.documentation article > h1 {
margin: 0;
padding: 0.6em 0;
font-size: 2em;
line-height: 1.5;
}
.documentation aside a.button {
display: block;
}
.documentation pre[class*="language-"] {
margin-top: 10px;
margin-bottom: 40px;
}
.documentation .index pre {
margin: 0;
font-size: .9em;
}
</style>
</head>
<body> <body>
<input type="checkbox" id="menu"> <nav class="fedi">
<label for="menu" onclick></label> <a href="https://fedi.life" class="brand">
<nav role="off-canvas"> <img class="logo" src="images/logo.png" />
<ul> <span>Fedi.Life</span>
<li><a href="index.html">Главная</a></li> </a>
<li><a href="mail.html" class="active">Почта</a></li>
<li><a href="im.html">Мессенджеры</a></li>
<li><a href="social.html">Соцсети</a></li>
<li><a href="search.html">Поисковики</a></li>
<li><a href="extra.html">Документы и агитматериалы</a></li>
<li><a href="info.html">Подробнее</a></li>
</ul>
</nav>
<!-- responsive-->
<input id="bmenub" type="checkbox" class="show">
<label for="bmenub" class="burger pseudo button">menu</label>
<div class="menu">
<a href="mail.html" class="pseudo button">Почта</a>
<a href="im.html" class="pseudo button">Мессенджеры</a>
<a href="social.html" class="pseudo button">Соцсети</a>
<a href="search.html" class="pseudo button">Поисковики</a>
<a href="extra.html" class="pseudo button">Документы и агитматериалы</a>
<a href="info.html" class="pseudo button">Подробнее</a>
</div>
</nav>
<main id="home" class="documentation">
<section class="flex">
<div class="textblock"> <article class="four-fifth-1000">
<h2>Электронная почта</h2> <header><h3>Электронная почта<h3></header>
<p>Старейший инструмент сетевого общения, распределённый по своей природе. Но даже его затронула монополизация. Куда же деваться человеку, не желающему быть товаром и не готовому мириться с копающимися в его переписке маркетологами? Есть варианты.</p>
</article>
<article class="card four-fifth-1000">
<header>MailFence</header>
<center><label for="modal_mf"><img src="images/mailfence.png" width="80%"></label> </center>
<div class="modal">
<input id="modal_mf" type="checkbox" />
<label for="modal_mf" class="overlay"></label>
<article>
<header>
<h3>MailFence</h3>
<label for="modal_mf" class="close">&times;</label>
</header>
<section class="content">
<img src="images/mailfence.png" width="100%">
</section>
</article>
</div>
<p>Старейший инструмент сетевого общения, распределённый по своей природе. Но даже его затронула монополизация. </p>
<div class="imgblock">
<a href="images/mailfence.png" >
<img src="images/mailfence.png" width=43% max-width=100% style="float:left; margin:1%" alt="MailFence" class="zoom"></a>
<h3>MailFence</h3>
<span> <span>
Бельгийский сервис электронной почты без рекламы и отслеживания. Поддерживает GPG-шифрование, не выдаёт данные пользователей Бельгийский сервис электронной почты без рекламы и отслеживания. Поддерживает GPG-шифрование, не выдаёт данные пользователей
третьим лицам. Базовая учётная запись бесплатна, но можно докупить себе больше места и расширенную техподдержку.<br> третьим лицам. Базовая учётная запись бесплатна, но можно докупить себе больше места и расширенную техподдержку.<br>
@ -47,22 +134,39 @@
<a href="https://edri.org/">Европейского фонда цифровых прав</a><br> <a href="https://edri.org/">Европейского фонда цифровых прав</a><br>
</span> </span>
<div class="textblock"> <center>
<h4>Где зарегистрироваться</h4> <div class="tabs two">
<a class="Button" href="https://mailfence.com/ru/index.jsp#register">MailFence</a> <input id='tab-1' type='radio' name='tabgroupB' checked />
<h4>Приложения</h4> <label class="pseudo button toggle" for="tab-1">Где зарегистрироваться</label>
<a class="Button" href="https://mailfence.com/ru/">MailFence Web</a> <input id='tab-2' type='radio' name='tabgroupB'>
<br>Для пользователей платных аккаунтов доступна работа с любого почтового клиента, включая встроенные. <label class="pseudo button toggle" for="tab-2">Приложения</label>
<div class="row">
<div><center><button class="warning"><a href="https://mailfence.com/ru/index.jsp#register">MailFence</a></button></center></div>
<div><center><button class="pseudo"><a href="https://mailfence.com/ru/">MailFence Web</a></button><br> (Для пользователей платных аккаунтов доступна работа с любого почтового клиента, включая встроенные.)</center></div>
</div>
</div> </div>
</div> </center>
<div class="imgblock">
<a href="images/tutanota_w.png" > </article>
<picture> <article class="card four-fifth-1000">
<source srcset="images/tutanota.png" media="(max-width: 600px)"> <header>Tutanota</header>
<source srcset="images/tutanota_w.png"> <center><label for="modal_tn"><img src="images/tutanota_w.png" width="80%"></label> </center>
<img src="images/tutanota_w.png" width=45% max-width="100%" style="float:left; margin:1%;" alt="Tutanota" class="zoom"> <div class="modal">
</picture></a> <input id="modal_tn" type="checkbox" />
<h3>Tutanota</h3> <label for="modal_tn" class="overlay"></label>
<article>
<header>
<h3>Tutanota</h3>
<label for="modal_tn" class="close">&times;</label>
</header>
<section class="content">
<img src="images/tutanota_w.png" width="100%">
</section>
</article>
</div>
<span> <span>
Сервис, расположенный в Германии, без рекламы и с фокусом на приватность. Сервис, расположенный в Германии, без рекламы и с фокусом на приватность.
Позволяет надёжно шифровать даже сообщения, отправляемые пользователям других сервисов, Позволяет надёжно шифровать даже сообщения, отправляемые пользователям других сервисов,
@ -70,79 +174,117 @@
Базовая учётная запись бесплатна, за деньги можно получить больше места и возможностей.<br> Базовая учётная запись бесплатна, за деньги можно получить больше места и возможностей.<br>
</span> </span>
<div class="textblock"> <center>
<h4>Где зарегистрироваться</h4> <div class="tabs two">
<a class="Button" href="https://tutanota.com">Tutanota</a> <input id='tab-11' type='radio' name='tabgroupC' checked />
<h4>Мобильные приложения</h4> <label class="pseudo button toggle" for="tab-11">Где зарегистрироваться</label>
<a class="Button2" href="https://play.google.com/store/apps/details?id=de.tutao.tutanota"><IMG src="images/google.png" width="24" height="24">Tutanota</a> <input id='tab-21' type='radio' name='tabgroupC'>
<a class="Button2" href="https://f-droid.org/en/packages/de.tutao.tutanota/"><IMG src="images/fdroid.png" width="24" height="24">Tutanota</a> <label class="pseudo button toggle" for="tab-21">Мобильные приложения</label>
<a class="Button2" href="https://itunes.apple.com/app/tutanota/id922429609"><IMG src="images/apple.png" width="24" height="24">Tutanota</a> <div class="row">
<div>
<center>
<button class="warning">
<a href="https://tutanota.com">Tutanota</a>
</button>
</center>
</div>
<div><center>
<button class="pseudo">
<a href="https://play.google.com/store/apps/details?id=de.tutao.tutanota"><img src="images/google.png">Tutanota</a>
</button>
<button class="pseudo">
<a href="https://f-droid.org/en/packages/de.tutao.tutanota/"><img class="logo" src="images/fdroid.png">Tutanota</a>
</button>
<button class="pseudo">
<a href="https://itunes.apple.com/app/tutanota/id922429609"><IMG src="images/apple.png" width="24" height="24">Tutanota</a>
</button>
</center></div>
</div>
</div> </div>
</div> </center>
<div class="imgblock"> </article>
<a href="images/posteo.jpg" > <article class="card four-fifth-1000">
<img src="images/posteo.jpg" width=45% max-width="100%" style="float:left; margin:1%;" alt="Posteo" class="zoom"></a> <header>Posteo</header>
<h3>Posteo</h3> <center><label for="modal_po"><img src="images/posteo.jpg" width="80%"></label> </center>
<div class="modal">
<input id="modal_po" type="checkbox" />
<label for="modal_po" class="overlay"></label>
<article>
<header>
<h3>Posteo</h3>
<label for="modal_po" class="close">&times;</label>
</header>
<section class="content">
<img src="images/posteo.jpg" width="100%">
</section>
</article>
</div>
<span> <span>
Почтовый сервис без рекламы, максимально приватный и использующий исключительно "зелёное" электричество. Почтовый сервис без рекламы, максимально приватный и использующий исключительно "зелёное" электричество.
Оплачивается полностью за счёт пользователей. Отдельных мобильных приложений нет и не требуется — Оплачивается полностью за счёт пользователей. Отдельных мобильных приложений нет и не требуется —
можно использовать встроенные или любые другие, поддерживающие протокол IMAP.<br> можно использовать встроенные или любые другие, поддерживающие протокол IMAP.<br>
</span> </span>
<center>
<div class="tabs two">
<input id='tab-12' type='radio' name='tabgroupD' checked />
<label class="pseudo button toggle" for="tab-12">Где зарегистрироваться</label>
<input id='tab-22' type='radio' name='tabgroupD'>
<label class="pseudo button toggle" for="tab-22">Приложения</label>
<div class="textblock"> <div class="row">
<h4>Где зарегистрироваться</h4> <div><center><button class="warning"><a href="https://posteo.de/en">Posteo</a></button></center></div>
<a class="Button" href="https://posteo.de/en">Posteo</a> <div><center>Любое приложение электронной почты, включая встроенные
<h4>Мобильные приложения</h4> </div>
<p>Любое приложение электронной почты, включая встроенные</p> </center>
</div>
</div> </article>
<div class="imgblock"> <article class="card four-fifth-1000">
<a href="images/cockmail.png" > <header>Cockmail</header>
<img src="images/cockmail.png" width=45% max-width="100%" style="float:left; margin:1%;" alt="CockMail" class="zoom"></a> <center><label for="modal_cm"><img src="images/cockmail.png" width="80%"></label> </center>
<div class="modal">
<input id="modal_cm" type="checkbox" />
<label for="modal_cm" class="overlay"></label>
<article>
<header>
<h3>Cockmail</h3>
<label for="modal_cm" class="close">&times;</label>
</header>
<section class="content">
<img src="images/cockmail.png" width="100%">
</section>
</article>
</div>
<h3>Cockmail</h3>
<span> <span>
Сервис, поддерживающий множество доменов. Существует на добровольные пожертвования пользователей, которые Сервис, поддерживающий множество доменов. Существует на добровольные пожертвования пользователей, которые
принимаются в том числе в криптовалютах. Быстр, бесплатен и надёжен. Как и в случае с Posteo, принимаются в том числе в криптовалютах. Быстр, бесплатен и надёжен. Как и в случае с Posteo,
отдельных приложений не требуется - POP3, IMAP, SMTP поддерживаются.<br> отдельных приложений не требуется - POP3, IMAP, SMTP поддерживаются.<br>
</span> </span>
<div class="textblock"> <center>
<h4>Где зарегистрироваться</h4> <div class="tabs two">
<a class="Button" href="https://cock.li/register">Cock.li</a> <input id='tab-13' type='radio' name='tabgroupE' checked />
<h4>Мобильные приложения</h4> <label class="pseudo button toggle" for="tab-13">Где зарегистрироваться</label>
<p>Любое приложение электронной почты, включая встроенные</p> <input id='tab-23' type='radio' name='tabgroupE'>
</div> <label class="pseudo button toggle" for="tab-23">Приложения</label>
</div>
<div class="imgblock"> <div class="row">
<a href="images/thexyz.png" > <div><center><button class="warning"><a href="https://cock.li/register">Cock.li</a></button></center></div>
<picture> <div><center>Любое приложение электронной почты, включая встроенные
<source srcset="images/thexyz_m.png" media="(max-width: 600px)"> </div>
<source srcset="images/thexyz.png"> </div>
<img src="images/thexyz.png" width=45% max-width="100%" style="float:left; margin:1%;" alt="TheXYZ" class="zoom"></a> </center>
</picture> </article>
<h3>TheXYZ</h3> </article>
<span> </section>
Канадская компания, предлагающая конфиденциальный почтовый сервис бизнес-уровня. </main>
Есть дешёвые базовые аккаунты с дополнительными платными опциями для профессиональных <section>
сервисов вроде MS Exchange и синхронизации календаря. Наряду с собственными мобильными приложениями, <hr>
сервис может использоваться встроенными приложениями, равно как и любыми другими, <center>
поддерживающими IMAP или Exchange (за дополнительную плату).<br> <a href="https://tolstoevsky.ml"><img src="banner.gif"></a>&nbsp;|&nbsp;Created with <a href="https://picnicss.com/">PicniCSS</a>
<br> </center>
</span> </section>
<div class="textblock">
<h4>Где зарегистрироваться</h4>
<a class="Button" href="https://www.thexyz.com/webmail.html">TheXYZ</a>
</div>
<div class="textblock">
<h4>Мобильные приложения</h4>
<a class="Button2" href="https://play.google.com/store/apps/details?id=com.perrythexyz.com.perry2.thexyzwebmail"><IMG src="images/google.png" width="24" height="24">Thexyz</a>
<a class="Button2" href="https://itunes.apple.com/us/app/thexyz-webmail/id741897892"><IMG src="images/apple.png" width="24" height="24">Thexyz</a>
</div>
</div>
</div>
</div>
<hr>
<a href="https://tolstoevsky.ml"><img src="banner.gif"</a>
</body> </body>
</html> </html>

View file

@ -12,30 +12,104 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>У вас всегда есть выбор! - Поисковые системы.</title> <title>У вас всегда есть выбор! - Поисковые системы.</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/picnic.min.css">
<link rel="stylesheet" href="css/menu.css"> <style>aside a.top {
<link rel="stylesheet" href="css/btn.css"> font-size: 0;
</head> position: fixed;
bottom: 0;
font-weight: bold;
width: 180px;
padding: .6em 0;
margin-bottom: 0;
border-radius: .3em .3em 0 0;
transition: all .3s ease;
}
aside a.top.visible {
font-size: 1em;
}
aside .links a.button {
text-align: left;
}
@media all and (max-width: 1000px) {
aside a.pseudo.top {
background: rgba(255, 255, 255, .8);
width: 100%;
left: 0;
text-align: center;
z-index: 100;
}
}
.documentation article > h2 {
margin: -2em 0 .6em;
padding: 3em 0 0;
line-height: 1;
}
.documentation article > h3 {
margin-bottom: .6em;
}
.documentation aside h2 {
margin-top: 0;
padding: 1.25em 0;
line-height: 1;
}
.documentation aside a.pseudo {
color: #0074D9;
margin: 0;
}
.documentation > section {
background: #fff;
text-align: left;
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 80px 0 0;
}
.documentation article > h1 {
margin: 0;
padding: 0.6em 0;
font-size: 2em;
line-height: 1.5;
}
.documentation aside a.button {
display: block;
}
.documentation pre[class*="language-"] {
margin-top: 10px;
margin-bottom: 40px;
}
.documentation .index pre {
margin: 0;
font-size: .9em;
}
</style>
</head>
<body> <body>
<input type="checkbox" id="menu"> <nav class="fedi">
<label for="menu" onclick></label> <a href="https://fedi.life" class="brand">
<nav role="off-canvas"> <img class="logo" src="images/logo.png" />
<ul> <span>Fedi.Life</span>
<li><a href="index.html">Главная</a></li> </a>
<li><a href="mail.html">Почта</a></li>
<li><a href="im.html">Мессенджеры</a></li>
<li><a href="social.html">Соцсети</a></li>
<li><a href="search.html" class="active">Поисковики</a></li>
<li><a href="extra.html">Документы и агитматериалы</a></li>
<li><a href="info.html">Подробнее</a></li>
</ul>
</nav>
<!-- responsive-->
<input id="bmenub" type="checkbox" class="show">
<label for="bmenub" class="burger pseudo button">menu</label>
<div class="menu">
<a href="mail.html" class="pseudo button">Почта</a>
<a href="im.html" class="pseudo button">Мессенджеры</a>
<a href="social.html" class="pseudo button">Соцсети</a>
<a href="search.html" class="pseudo button">Поисковики</a>
<a href="extra.html" class="pseudo button">Документы и агитматериалы</a>
<a href="info.html" class="pseudo button">Подробнее</a>
</div>
</nav>
<main id="home" class="documentation">
<section class="flex">
<div class="textblock"> <article class="four-fifth-1000">
<h2>Зачем вообще менять поисковик?</h2> <header><h2>Зачем вообще менять поисковик?</h2></header>
<p> <p>
<img src="images/q.png" align="right" style="margin: 0px 0px 0px 10px;" alt="question"> <img src="images/q.png" align="right" style="margin: 0px 0px 0px 10px;" alt="question">
Централизованные поисковые системы, ярчайшими (в негативном смысле) представителями которых являются Централизованные поисковые системы, ярчайшими (в негативном смысле) представителями которых являются
@ -48,12 +122,9 @@
зомбирования и манипуляции. Ну и не забывайте о вездесущей рекламе, порой залезающей в весьма интимные зомбирования и манипуляции. Ну и не забывайте о вездесущей рекламе, порой залезающей в весьма интимные
сферы вашей жизни. сферы вашей жизни.
</p> </p>
</article>
<article class="four-fifth-1000">
</div> <header><h2>Альтернативные варианты</h2></header>
<div class="textblock">
<h2>Альтернативные варианты</h2>
<p> <p>
<img src="images/mag.png" align="right" style="margin: 0px 0px 0px 10px;" alt="searching"> <img src="images/mag.png" align="right" style="margin: 0px 0px 0px 10px;" alt="searching">
Поиск в море информации современной Сети — дело ресурсозатратное. Нужны огромные мощности для анализа и индексации Поиск в море информации современной Сети — дело ресурсозатратное. Нужны огромные мощности для анализа и индексации
@ -65,22 +136,43 @@
пользователями), нас не устраивает. Рассмотрим остальные. пользователями), нас не устраивает. Рассмотрим остальные.
</p> </p>
<p> <p>
<h3>Вариант первый - открытый метапоиск</h3> <article class="four-fifth-1000">
<header><h3>Вариант первый - открытый метапоиск</h3></header>
Поисковые системы, избравшие этот вариант, используют выдачу поисковых гигантов, проксируя и обезличивая ваши запросы. Поисковые системы, избравшие этот вариант, используют выдачу поисковых гигантов, проксируя и обезличивая ваши запросы.
Это не требует больших затрат вычислительных мощностей и позволяет обходиться пожертвованиями или нетаргетированной рекламой. Это не требует больших затрат вычислительных мощностей и позволяет обходиться пожертвованиями или нетаргетированной рекламой.
</p> </p>
<div class="imgblock">
<a href="images/searx.png" >
<img src="images/searx.png" width=50% max-width=100% style="float:left; margin:1%;" alt="SearX" class="zoom"></a> <article class="card four-fifth-1000">
<h4>Searx</h4> <header>SearX</header>
<center><label for="modal_sx"><img src="images/searx.png" width="80%"></label> </center>
<div class="modal">
<input id="modal_sx" type="checkbox" />
<label for="modal_sx" class="overlay"></label>
<article>
<header>
<h3>SearX</h3>
<label for="modal_sx" class="close">&times;</label>
</header>
<section class="content">
<img src="images/searx.png" width="100%">
</section>
</article>
</div>
<span>
<p> <p>
Это метапоисковик с <a href="https://github.com/asciimoo/searx">открытым</a> исходным кодом, что позволяет каждому Это метапоисковик с <a href="https://github.com/asciimoo/searx">открытым</a> исходным кодом, что позволяет каждому
желающему поднять свой поисковый сервер. Обычный же пользователь может выбрать из множества уже существующих. желающему поднять свой поисковый сервер. Обычный же пользователь может выбрать из множества уже существующих.
Например, этих:<br> Например, этих:
<a class="Button" href="https://search.fedi.life/">search.fedi.life</a> <ul>
<a class="Button" href="https://a.searx.space/">a.searx.space</a> <li><a href="https://a.searx.space/">a.searx.space</a></li>
<a class="Button" href="https://searx.info">searx.info</a> <li><a href="https://searx.info">searx.info</a></li>
<a class="Button" href="https://searx.be">searx.be</a> <br> <li><a class="Button" href="https://searx.be">searx.be</a></li>
</ul>
<br>
(полный список доступен <a href="https://searx.space">здесь</a>) (полный список доступен <a href="https://searx.space">здесь</a>)
</p> </p>
<p> <p>
@ -88,33 +180,75 @@
(Выбрать предпочтительные вы можете в настройках), что обеспечивает релевантную и гибко настраиваемую лично вами (Выбрать предпочтительные вы можете в настройках), что обеспечивает релевантную и гибко настраиваемую лично вами
поисковую выдачу. поисковую выдачу.
</p> </p>
</div> </span>
<p> </article>
<h3>Вариант второй - гранты и общественные проекты</h3> </article>
<article class="four-fifth-1000">
<header><h3>Вариант второй - гранты и общественные проекты</h3></header>
<span>
В этом случае команда поддержки поисковика интегрируется с общественными движениям и делит финансирование от В этом случае команда поддержки поисковика интегрируется с общественными движениям и делит финансирование от
грантов и пожертвований наравне с доходами от неследящей рекламы в самой поисковой системе. грантов и пожертвований наравне с доходами от неследящей рекламы в самой поисковой системе.
</p> </span>
<div class="imgblock"> <article class="card four-fifth-1000">
<a href="images/ecosia.png" > <header>Ecosia</header>
<img src="images/ecosia.png" width=50% max-width=100% style="float:left; margin:1%;" alt="Ecosia" class="zoom"></a> <center><label for="modal_ec"><img src="images/ecosia.png" width="80%"></label> </center>
<h4>Яркий пример — Ecosia</h4> <div class="modal">
<input id="modal_ec" type="checkbox" />
<label for="modal_ec" class="overlay"></label>
<article>
<header>
<h3>Ecosia</h3>
<label for="modal_ec" class="close">&times;</label>
</header>
<section class="content">
<img src="images/ecosia.png" width="100%">
</section>
</article>
</div>
<span>
<p> <p>
Этот поисковик направляет часть доходов от рекламы и грантов на посадку деревьев по всему миру. Задумка проста: Этот поисковик направляет часть доходов от рекламы и грантов на посадку деревьев по всему миру. Задумка проста:
хотите помочь озеленить планету — отключите блокировку рекламы на этом сайте и вперёд — сажайте хотите помочь озеленить планету — отключите блокировку рекламы на этом сайте и вперёд — сажайте
деревья, просто используя поисковик! деревья, просто используя поисковик!
</p> </p>
<a class="Button" href="https://ecosia.org">Ecosia</a> <a href="https://ecosia.org">Ecosia</a>
</div> </span>
<p> </article>
<h3>Вариант третий - федерация</h3> </article>
<article class="four-fifth-1000">
<header><h3>Вариант третий - федерация</h3></header>
<span>
Приверженцы этого подхода зашли с другой стороны. Основная проблема поиска — в огромных вычислительных ресурсах, необходимых Приверженцы этого подхода зашли с другой стороны. Основная проблема поиска — в огромных вычислительных ресурсах, необходимых
для его нормальной работы, а купить датацентр может позволить себе далеко не каждый? Не проблема — мы просто распределим для его нормальной работы, а купить датацентр может позволить себе далеко не каждый? Не проблема — мы просто распределим
ресурсы. Каждый будет индексировать малюсенький кусочек сети со своего собственного слабого сервера и делиться результатами ресурсы. Каждый будет индексировать малюсенький кусочек сети со своего собственного слабого сервера и делиться результатами
с остальными. И это действительно работает! с остальными. И это действительно работает!
<div class="imgblock"> </span>
<a href="images/yacy.png" > <article class="card four-fifth-1000">
<img src="images/yacy.png" width=50% max-width=100% style="float:left; margin:1%;" alt="YaCy" class="zoom"></a> <header>YaCy</header>
<h4>YaCy</h4> <center><label for="modal_yc"><img src="images/yacy.png" width="80%"></label> </center>
<div class="modal">
<input id="modal_yc" type="checkbox" />
<label for="modal_yc" class="overlay"></label>
<article>
<header>
<h3>YaCy</h3>
<label for="modal_yc" class="close">&times;</label>
</header>
<section class="content">
<img src="images/yacy.png" width="100%">
</section>
</article>
</div>
<span>
<p>
Этот вариант подойдёт продвинутым пользователям и системным администраторам, так как проект ориентирован Этот вариант подойдёт продвинутым пользователям и системным администраторам, так как проект ориентирован
в первую очередь на развёртывание инстанции "под себя". Всё достаточно просто — вы устанавливаете приложение, в первую очередь на развёртывание инстанции "под себя". Всё достаточно просто — вы устанавливаете приложение,
выбираете режим работы (P2P Mode — основной режим, при котором вы можете делиться своими результатами индексации выбираете режим работы (P2P Mode — основной режим, при котором вы можете делиться своими результатами индексации
@ -123,18 +257,18 @@
по локальному сайту или внутренней сети). Далее — индекируйте, всё, что вам вздумается, предоставляйте результаты по локальному сайту или внутренней сети). Далее — индекируйте, всё, что вам вздумается, предоставляйте результаты
сообществу, если хотите, а можете открыть свой портал остальным, например, друзьям и знакомым. сообществу, если хотите, а можете открыть свой портал остальным, например, друзьям и знакомым.
<br> <br>
<a class="Button" href="https://yacy.net/">Yacy</a> <a href="https://yacy.net/">Yacy</a>
</div> </article>
</article>
</div>
<hr>
<a href="https://tolstoevsky.ml"><img src="banner.gif"</a>
</section>
</main>
<section>
<hr>
<center>
<a href="https://tolstoevsky.ml"><img src="banner.gif"></a>&nbsp;|&nbsp;Created with <a href="https://picnicss.com/">PicniCSS</a>
</center>
</section>
</body> </body>

View file

@ -11,36 +11,125 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>У вас всегда есть выбор! — Соцсети</title> <title>У вас всегда есть выбор! — Соцсети</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/picnic.min.css">
<link rel="stylesheet" href="css/menu.css"> <style>aside a.top {
<link rel="stylesheet" href="css/btn.css"> font-size: 0;
</head> position: fixed;
bottom: 0;
font-weight: bold;
width: 180px;
padding: .6em 0;
margin-bottom: 0;
border-radius: .3em .3em 0 0;
transition: all .3s ease;
}
aside a.top.visible {
font-size: 1em;
}
aside .links a.button {
text-align: left;
}
@media all and (max-width: 1000px) {
aside a.pseudo.top {
background: rgba(255, 255, 255, .8);
width: 100%;
left: 0;
text-align: center;
z-index: 100;
}
}
.documentation article > h2 {
margin: -2em 0 .6em;
padding: 3em 0 0;
line-height: 1;
}
.documentation article > h3 {
margin-bottom: .6em;
}
.documentation aside h2 {
margin-top: 0;
padding: 1.25em 0;
line-height: 1;
}
.documentation aside a.pseudo {
color: #0074D9;
margin: 0;
}
.documentation > section {
background: #fff;
text-align: left;
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 80px 0 0;
}
.documentation article > h1 {
margin: 0;
padding: 0.6em 0;
font-size: 2em;
line-height: 1.5;
}
.documentation aside a.button {
display: block;
}
.documentation pre[class*="language-"] {
margin-top: 10px;
margin-bottom: 40px;
}
.documentation .index pre {
margin: 0;
font-size: .9em;
}
</style>
</head>
<body> <body>
<input type="checkbox" id="menu">
<label for="menu" onclick></label>
<nav role="off-canvas">
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="mail.html">Почта</a></li>
<li><a href="im.html">Мессенджеры</a></li>
<li><a href="social.html" class="active">Соцсети</a></li>
<li><a href="search.html">Поисковики</a></li>
<li><a href="extra.html">Документы и агитматериалы</a></li>
<li><a href="info.html">Подробнее</a></li>
</ul>
</nav>
<nav class="fedi">
<a href="https://fedi.life" class="brand">
<img class="logo" src="images/logo.png" />
<span>Fedi.Life</span>
</a>
<!-- responsive-->
<input id="bmenub" type="checkbox" class="show">
<label for="bmenub" class="burger pseudo button">menu</label>
<div class="textblock"> <div class="menu">
<h2>Социальные сети</h2> <a href="mail.html" class="pseudo button">Почта</a>
<a href="im.html" class="pseudo button">Мессенджеры</a>
<a href="im.html" class="pseudo button">Соцсети</a>
<a href="search.html" class="pseudo button">Поисковики</a>
<a href="extra.html" class="pseudo button">Документы и агитматериалы</a>
<a href="info.html" class="pseudo button">Подробнее</a>
</div>
</nav>
<main id="home" class="documentation">
<section class="flex">
<article class="four-fifth-1000">
<header><h3>Социальные сети</h3></header>
<p>Ключевой инструмент взаимодействия в современной Сети. Познакомьтесь с альтернативами</p> <p>Ключевой инструмент взаимодействия в современной Сети. Познакомьтесь с альтернативами</p>
<div class="imgblock"> </article>
<a href="images/mastodon2.png" > <article class="card four-fifth-1000">
<img src="images/mastodon2.png" width="45%" max-width="100%" style="float:left; margin:1%;" class="zoom"></a> <header>#вместотвиттера Mastodon</header>
<h3 id="mastodon" >#вместотвиттера Mastodon</h3> <center><label for="modal_md"><img src="images/mastodon2.png" width="80%"></label> </center>
<span> <div class="modal">
<input id="modal_md" type="checkbox" />
<label for="modal_md" class="overlay"></label>
<article>
<header>
<h3>Mastodon</h3>
<label for="modal_md" class="close">&times;</label>
</header>
<section class="content">
<img src="images/mastodon2.png" width="100%">
</section>
</article>
</div>
<span>На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей. <span>На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей.
Больше всего напоминает Твиттер, только с большим лимитом символов и более гибким интерфейсом. Больше всего напоминает Твиттер, только с большим лимитом символов и более гибким интерфейсом.
</span> </span>
@ -57,35 +146,51 @@
</p> </p>
</span> </span>
<div class="textblock"> <center>
<h4>Где зарегистрироваться</h4> <div class="tabs two">
<a class="Button" href="https://mastodon.ml">Russian Mastodon</a> <input id='tab-1' type='radio' name='tabgroupB' checked />
<a class="Button" href="https://quey.org">Quey</a> <label class="pseudo button toggle" for="tab-1">Где зарегистрироваться</label>
<a class="Button" href="https://lor.sh">LOR.sh</a> <input id='tab-2' type='radio' name='tabgroupB'>
<a class="Button" href="https://mstdn.netwhood.online">Network Neighborhood</a> <label class="pseudo button toggle" for="tab-2">Приложения</label>
</div>
<div class="textblock">
<h4>Мобильные приложения</h4>
<a class="Button2" href="https://play.google.com/store/apps/details?id=app.fedilab.android"><IMG src="images/google.png" width="24" height="24">Fedilab (Платно)</a>
<a class="Button2" href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/"><IMG src="images/fdroid.png" width="24" height="24">Fedilab (бесплатно)</a>
<a class="Button2" href="https://play.google.com/store/apps/details?id=jp.juggler.subwaytooter"><IMG src="images/google.png" width="24" height="24">Subway Tooter</a>
<a class="Button2" href="https://f-droid.org/en/packages/com.keylesspalace.tusky"><IMG src="images/fdroid.png" width="24" height="24">Tusky (F-Droid)</a>
<a class="Button2" href="https://play.google.com/store/apps/details?id=com.keylesspalace.tusky"><IMG src="images/google.png" width="24" height="24">Tusky (Google Play)</a>
<a class="Button2" href="https://itunes.apple.com/app/toot/id1229021451"><IMG src="images/apple.png" width="24" height="24">Toot!</a> <div class="row">
<a class="Button2" href="https://itunes.apple.com/app/mast/id1437429129"><IMG src="images/apple.png" width="24" height="24">Mast</a> <div><center><button class="warning"><a href="https://phreedom.tk">Свобода</a></button>
<a class="Button2" href="https://itunes.apple.com/app/amarok-for-mastodon/id1214116200"><IMG src="images/apple.png" width="24" height="24">Amaroq</a> <button class="warning"><a href="https://mastodon.ml">Русский Мастодон</a></button>
<button class="warning"><a href="https://quey.org">Quey</a></button>
<button class="warning"><a href="https://lor.sh">LOR.sh</a></button>
<button class="warning"><a href="https://mstdn.netwhood.online/">Network Neighborhood</a></button>
</div> </center></div>
</div> <div><center><button class="pseudo"><a href="https://play.google.com/store/apps/details?id=app.fedilab.android"><img src="images/google.png">Fedilab (платно)</a></button><br>
<div class="imgblock"> <button class="pseudo"><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/"><img src="images/fdroid.png">Fedilab (бесплатно)</a></button>
<a href="images/friendica.png" > <button class="pseudo"><a href="https://itunes.apple.com/app/toot/id1229021451"><img src="images/apple.png">Toot!</a></button>
<img src="images/friendica.png" width=45% max-width="100%" style="float:left; margin:1%;" class="zoom"></a> <button class="pseudo"><a href="https://itunes.apple.com/app/amarok-for-mastodon/id1214116200"><img src="images/apple.png">Amaroq</a></button>
<h3 id="friendica">#вместоВК Friendica</h3>
</center></div>
</div>
</div>
</center>
</article>
<article class="card four-fifth-1000">
<header>#вместоВК Friendica</header>
<center><label for="modal_fr"><img src="images/friendica.png" width="80%"></label> </center>
<div class="modal">
<input id="modal_fr" type="checkbox" />
<label for="modal_fr" class="overlay"></label>
<article>
<header>
<h3>Friandica</h3>
<label for="modal_fr" class="close">&times;</label>
</header>
<section class="content">
<img src="images/friendica.png" width="100%">
</section>
</article>
</div>
<span> <span>
Альтернатива Вконтакте и Facebook, с теми же фишками, включая события и фотоальбомы <p> Альтернатива Вконтакте и Facebook, с теми же фишками, включая события и фотоальбомы</p>
</span>
<p> <p>
Также, как и Мастодон, Friendica создана из множества мелких сайтов, Также, как и Мастодон, Friendica создана из множества мелких сайтов,
@ -100,29 +205,51 @@
в этих сетях не составит труда. в этих сетях не составит труда.
</p> </p>
</span>
<div class="textblock"> <center>
<h4>Где зарегистрироваться</h4> <div class="tabs two">
<a class="Button" href="https://nerdica.net">Nerdica</a> <input id='tab-21' type='radio' name='tabgroupC' checked />
<a class="Button" href="https://friendica.xyz">Friendica.XYZ</a> <label class="pseudo button toggle" for="tab-21">Где зарегистрироваться</label>
<a class="Button" href="https://venera.social">Venera</a> <input id='tab-22' type='radio' name='tabgroupC'>
<a class="Button" href="https://loma.ml">Loma</a> <label class="pseudo button toggle" for="tab-22">Приложения</label>
<h4>Мобильные приложения</h4>
<a class="Button2" href="https://play.google.com/store/apps/details?id=app.fedilab.android"><IMG src="images/google.png" width="24" height="24">Fedilab (Платно)</a>
<a class="Button2" href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/"><IMG src="images/fdroid.png" width="24" height="24">Fedilab (бесплатно)</a>
</div>
</div>
<div class="imgblock">
<a href="images/pixelfed.png" >
<img src="images/pixelfed.png" width=45% max-width=100% style="float:left; margin:1%;" class="zoom"></a>
<h3 id="pixelfed" >#вместоinstagram PixelFed</h3> <div class="row">
<div><center><button class="warning"><a href="https://nerdica.net">Nerdica</a></button>
<button class="warning"><a href="https://friendica.xyz">Friendica.xyz</a></button>
<button class="warning"><a href="https://venera.social">Venera</a></button>
<button class="warning"><a href="https://loma.ml">Loma</a></button>
</center></div>
<div><center><button class="pseudo"><a href="https://play.google.com/store/apps/details?id=app.fedilab.android"><img src="images/google.png">Fedilab (платно)</a></button><br>
<button class="pseudo"><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/"><img src="images/fdroid.png">Fedilab (бесплатно)</a></button>
</center></div>
</div>
</div>
</center>
</article>
<article class="card four-fifth-1000">
<header>#вместоInstagram PixelFed</header>
<center><label for="modal_pf"><img src="images/pixelfed.png" width="80%"></label> </center>
<div class="modal">
<input id="modal_pf" type="checkbox" />
<label for="modal_pf" class="overlay"></label>
<article>
<header>
<h3>PixelFed</h3>
<label for="modal_pf" class="close">&times;</label>
</header>
<section class="content">
<img src="images/pixelfed.png" width="100%">
</section>
</article>
</div>
<span> <span>
Открытая распределённая альтернатива Instagram — с фильтрами, комментариями, лайками, репостами и так далее, но без рекламы и слежки. <p>Открытая распределённая альтернатива Instagram — с фильтрами, комментариями, лайками, репостами и так далее, но без рекламы и слежки.</p>
</span>
<p> <p>
Сеть состоит из мелких независимых сайтов, способных общаться между собой, Сеть состоит из мелких независимых сайтов, способных общаться между собой,
@ -138,30 +265,53 @@
в любом браузере на компьютере, телефоне или планшете. в любом браузере на компьютере, телефоне или планшете.
</p> </p>
</span>
<div class="textblock"> <center>
<h4>Где зарегистрироваться</h4> <div class="tabs two">
<a class="Button" href="https://pixelfed.de">pixelfed.de</a> <input id='tab-31' type='radio' name='tabgroupD' checked />
<a class="Button" href="https://pxlfd.me">pxlfd.me</a> <label class="pseudo button toggle" for="tab-31">Где зарегистрироваться</label>
<a class="Button" href="https://pixelfed.tokyo">pixelfed.tokyo</a> <input id='tab-32' type='radio' name='tabgroupD'>
<a class="Button" href="https://pixelfed.se">pixelfed.se</a> <label class="pseudo button toggle" for="tab-32">Приложения</label>
<h4>Мобильные приложения</h4> <div class="row">
<a class="Button2" href="https://play.google.com/store/apps/details?id=app.fedilab.android"><IMG src="images/google.png" width="24" height="24">Fedilab (Платно)</a> <div><center><button class="warning"><a href="https://pix.phreedom.tk">Phreedom Pix</a></button>
<a class="Button2" href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/"><IMG src="images/fdroid.png" width="24" height="24">Fedilab (бесплатно)</a> <button class="warning"><a href="https://pxlfd.me">pxlfd.me</a></button>
<button class="warning"><a href="https://pixelfed.tokyo">Tokyo</a></button>
<button class="warning"><a href="https://pixelfed.se">Pixelfed.se</a></button>
</div> </center></div>
</div> <div><center><button class="pseudo"><a href="https://play.google.com/store/apps/details?id=app.fedilab.android"><img src="images/google.png">Fedilab (платно)</a></button><br>
<div class="imgblock"> <button class="pseudo"><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/"><img src="images/fdroid.png">Fedilab (бесплатно)</a></button>
<a href="images/peertube.png" >
<img src="images/peertube.png" width=45% max-width=100% style="float:left; margin:1%;" class="zoom"></a>
<h3 id="peertube">#вместоyoutube PeerTube</h3>
<span> </center></div>
</div>
</div>
</center>
</article>
<article class="card four-fifth-1000">
<header>#вместоyoutube PeerTube</header>
<center><label for="modal_pt"><img src="images/peertube.png" width="80%"></label> </center>
<div class="modal">
<input id="modal_pt" type="checkbox" />
<label for="modal_pt" class="overlay"></label>
<article>
<header>
<h3>PeerTube</h3>
<label for="modal_pt" class="close">&times;</label>
</header>
<section class="content">
<img src="images/peertube.png" width="100%">
</section>
</article>
</div>
<span><p>
PeerTube — открытая распределённая альтернатива YouTube (принадлежит Google). PeerTube — открытая распределённая альтернатива YouTube (принадлежит Google).
Это соцсеть, приспособленная для распространения видео, без рекламы и слежки. Это соцсеть, приспособленная для распространения видео, без рекламы и слежки.
</p>
</span>
<p> <p>
В отличие от YouTube, PeerTube состоит из множества независимых сайтов, В отличие от YouTube, PeerTube состоит из множества независимых сайтов,
@ -177,24 +327,45 @@
Friendica и так далее. Friendica и так далее.
</p> </p>
</span>
<center>
<div class="tabs two">
<input id='tab-41' type='radio' name='tabgroupE' checked />
<label class="pseudo button toggle" for="tab-41">Где зарегистр
ироваться</label>
<input id='tab-42' type='radio' name='tabgroupE'>
<label class="pseudo button toggle" for="tab-42">Приложения</label>
<div class="textblock"> <div class="row">
<h4>Где зарегистрироваться</h4> <div><center><button class="warning"><a href="https://video.qoto.org">QOTO Peertube</a></button>
<a class="Button" href="https://video.qoto.org/signup">QOTO Peertube</a> <button class="warning"><a href="https://video.tedomum.net">video.tedomum.net</a></button>
<a class="Button" href="https://video.tedomum.net">video.tedomum.net</a> <button class="warning"><a href="https://peertube.linuxrocks.online">peertube.linuxrocks.online</a></button>
<a class="Button" href="https://peertube.linuxrocks.online">peertube.linuxrocks.online</a> <button class="warning"><a href="https://share.tube">share.tube</a></button>
<a class="Button" href="https://share.tube">share.tube</a>
<h4>Мобильные приложения</h4> </center></div>
<a class="Button2" href="https://play.google.com/store/apps/details?id=app.fedilab.android"><IMG src="images/google.png" width="24" height="24">Fedilab (Платно)</a> <div><center>
<a class="Button2" href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/"><IMG src="images/fdroid.png" width="24" height="24">Fedilab (бесплатно)</a> <div><center><button class="pseudo"><a href="https://play.google.com/store/apps/details?id=app.fedilab.
<a class="Button2" href="https://f-droid.org/en/packages/net.schueller.peertube/"><IMG src="images/fdroid.png" width="24" height="24">Thorium</a> android"><img src="images/google.png">Fedilab (платно)</a></button><br>
<a class="Button2" href="https://play.google.com/store/apps/details?id=net.schueller.peertube"><IMG src="images/google.png" width="24" height="24">PeerTube Player</a> <button class="pseudo"><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/"><img src="images
</div> /fdroid.png">Fedilab (бесплатно)</a></button>
</div> <div><center><button class="pseudo"><a href="https://f-droid.org/en/packages/net.schueller.peertube/"><img src="images/fdroid.png">Thorium</a></button><br>
</div> <button class="pseudo"><a href="https://https://play.google.com/store/apps/details?id=net.schueller.peertube"><img src="images/google.png">Peertube Player</a></button>
</div>
<hr> </center></div>
<a href="https://tolstoevsky.ml"><img src="banner.gif"</a> </div>
</div>
</center>
</article>
</article>
</article>
</section>
</main>
<section>
<hr>
<center>
<a href="https://tolstoevsky.ml"><img src="banner.gif"></a>&nbsp;|&nbsp;Created with <a href="https://picnicss.com/">PicniCSS</a>
</center>
</section>
</body> </body>
</html> </html>