LibreHacker
/
switching
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

redesign

This commit is contained in:
Tolstoevsky 2020-10-15 10:53:44 +03:00 committed by toltoevsky
parent d6ab4c806d
commit cf37c0e08b
9 changed files with 800 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
extra.html
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>
</div> </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>
</body> </body>
</html> </html>

160
im.html
View File

@ -5,7 +5,6 @@
<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>
@ -96,7 +95,7 @@
<div class="menu"> <div class="menu">
<a href="mail.html" class="pseudo button">Почта</a> <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="im.html" class="pseudo button">Соцсети</a> <a href="social.html" class="pseudo button">Соцсети</a>
<a href="search.html" class="pseudo button">Поисковики</a> <a href="search.html" class="pseudo button">Поисковики</a>
<a href="extra.html" class="pseudo button">Документы и агитматериалы</a> <a href="extra.html" class="pseudo button">Документы и агитматериалы</a>
<a href="info.html" class="pseudo button">Подробнее</a> <a href="info.html" class="pseudo button">Подробнее</a>
@ -108,22 +107,27 @@
<article class="four-fifth-1000"> <article class="four-fifth-1000">
<header>Децентрализованные мессенджеры</header> <header><h3>Децентрализованные мессенджеры<h3></header>
<p>Способы быстро списаться и созвониться с нужным человеком. Общение через сеть должно быть безопасным, приватным и неподцензурным. И вот сервисы, которые вам помогут в этом: <p>Способы быстро списаться и созвониться с нужным человеком. Общение через сеть должно быть безопасным, приватным и неподцензурным. И вот сервисы, которые вам помогут в этом:
</p> </p>
</article> </article>
<article class="four-fifth-1000"> <article class="card four-fifth-1000">
<header>XMPP (он же Jabber) - на замену WhatsApp и Telegram</header> <header><h3>XMPP (он же Jabber) — на замену WhatsApp и Telegram</h3></header>
<a href="images/movim.png" > <center><label for="modal_jab"><img src="images/movim.png" width="80%"></label> </center>
<picture> <div class="modal">
<source srcset="images/conversations.png" media="(max-width: 700px)"> <input id="modal_jab" type="checkbox" />
<source srcset="images/movim.png"> <label for="modal_jab" class="overlay"></label>
<img src="images/movim.png" width=45% max-width=100% alt="Jabber" class="zoom" > <article>
</picture></a> <header>
<h3>Jabber</h3>
<p> <label for="modal_jab" class="close">&times;</label>
<h3>XMPP (он же Jabber) - на замену WhatsApp и Telegram</h3> </header>
<section class="content">
<img src="images/movim.png" width="100%">
</section>
</article>
</div>
<span> <span>
Широко используемый свободный и открытый стандарт интернет-сообщений. Широко используемый свободный и открытый стандарт интернет-сообщений.
Весьма прост в использовании — устанавливаем приложение, регистрируем аккаунт, общаемся. Весьма прост в использовании — устанавливаем приложение, регистрируем аккаунт, общаемся.
@ -133,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 />
<a class="Button" href="https://xmpp.netwhood.online">Network Neighborhood</a> <label class="pseudo button toggle" for="tab-1">Где зарегистрироваться</label>
<a class="Button" href="https://xmpp.jp">xmpp.jp</a> <input id='tab-2' type='radio' name='tabgroupB'>
<a class="Button" href="https://blabber.im">blabber.im</a> <label class="pseudo button toggle" for="tab-2">Приложения</label>
<a class="Button" href="https://jabber.ru">jabber.ru</a>
</div> <div class="row">
<div><center><button class="warning"><a href="https://xmpp.netwhood.online">Network Neighborhood</a></button>
<button class="warning"><a href="https://xmpp.jp">XMPP.jp</a></button>
<button class="warning"><a href="https://blabber.im">Blabber</a></button>
<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>
<article class="card four-fifth-1000">
<header><h3>Jitsi Meet и Jami — на замену Skype</h3></header>
<center><label for="modal_meet"><img src="images/jitsi.png" width="80%"></label> </center>
<div class="modal">
<input id="modal_meet" type="checkbox" />
<label for="modal_meet" class="overlay"></label>
<article>
<header>
<h3>Jitsi Meet</h3>
<label for="modal_meet" class="close">&times;</label>
</header>
<section class="content">
<img src="images/jitsi.png" width="100%">
</section>
</article>
</div>
<div class="textblock">
<h4>Мобильные приложения</h4>
<a class="Button2" href="https://f-droid.org/packages/eu.sum7.conversations/">
<IMG src="images/fdroid.png" width="24" height="24">Conv6ations (Android / F-Droid)</a>
<a class="Button2" href="https://play.google.com/store/apps/details?id=de.pixart.messenger">
<IMG src="images/google.png" width="24" height="24">Pix-Art Messenger (Google Play)</a>
<a class="Button2" href="https://apps.apple.com/app/tigase-messenger/id1153516838">
<IMG src="images/apple.png" width="24" height="24">Siskin IM (iOS)</a>
</div>
</span>
</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>
Свободные открытые приложения для чатов и видеозвонков, разрабатываемые командами добровольцев. Свободные открытые приложения для чатов и видеозвонков, разрабатываемые командами добровольцев.
@ -174,35 +188,45 @@
В Jami дела обстоят схожим образом — каждому пользователю выдаётся уникальный код, В Jami дела обстоят схожим образом — каждому пользователю выдаётся уникальный код,
которым можно поделиться с другими участниками (аналог номера аськи/телефона...) которым можно поделиться с другими участниками (аналог номера аськи/телефона...)
</p> </p>
<div class="textblock" >
<h4>Приложения</h4> <center>
<a class="Button2" href="https://jami.net/download-jami-linux/"><IMG src="images/linux.png" width="24" height="24">Jami (Linux)</a> <div class="tabs two">
<a class="Button2" href="https://jami.net/download-jami-windows/"><IMG src="images/windows.png" width="24" height="24">Jami (Windows)</a> <input id='tab-11' type='radio' name='tabgroupC' checked />
<a class="Button2" href="https://jami.net/download-jami-macos/"><IMG src="images/apple.png" width="24" height="24">Jami (MacOS)</a> <label class="pseudo button toggle" for="tab-11">Приложения</label>
</div> <input id='tab-21' type='radio' name='tabgroupC'>
<div class="textblock"> <label class="pseudo button toggle" for="tab-21">Мобильные приложения</label>
<h4>Мобильные приложения</h4> <div class="row">
<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><center><button class="warning"><a href="https://jami.net/download-jami-linux/"><img src="images/linux.png">Jami (Linux)</a></button>
<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> <button class="warning"><a href="https://jami.net/download-jami-windows/"><img src="images/windows.png">Jami (Windows)</a></button>
<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> <button class="warning"><a href="https://jami.net/download-jami-macos/"><img src="images/apple.png">Jami (MacOS)</a></button>
<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> <button class="warning"><a href="https://meet.jit.si/">Jitsi (Web)</a></button>
<a class="Button2" href="https://apps.apple.com/app/jitsi-meet/id1165103905"><IMG src="images/apple.png" width="24" height="24">Jitsi (iOS)</a> </center></div>
<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>
<center><button class="pseudo"><a href="https://f-droid.org/packages/org.jitsi.meet"><img src="images/fdroid.png">Jitsi (F-Droid)</a></button>
</div> <button class="pseudo"><a href="https://f-droid.org/packages/cx.ring"><img src="images/fdroid.png">Jami (F-Droid)</a></button>
</div>
<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>
<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>
<button class="pseudo"><a href="https://apps.apple.com/app/jitsi-meet/id1165103905"><img src="images/apple.png">Jitsi (iOS)</a></button>
</div> <button class="pseudo"><a href="https://apps.apple.com/app/ring-a-gnu-package/id1306951055"><img src="images/apple.png">Jami (iOS)</a></button>
<hr> </center></div>
<a href="https://tolstoevsky.ml"><img src="banner.gif"</a> </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>

BIN
images/linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
images/windows.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

2
index.html
View File

@ -96,7 +96,7 @@
<div class="menu"> <div class="menu">
<a href="mail.html" class="pseudo button">Почта</a> <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="im.html" class="pseudo button">Соцсети</a> <a href="social.html" class="pseudo button">Соцсети</a>
<a href="search.html" class="pseudo button">Поисковики</a> <a href="search.html" class="pseudo button">Поисковики</a>
<a href="extra.html" class="pseudo button">Документы и агитматериалы</a> <a href="extra.html" class="pseudo button">Документы и агитматериалы</a>
<a href="info.html" class="pseudo button">Подробнее</a> <a href="info.html" class="pseudo button">Подробнее</a>

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,11 +230,16 @@
</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>

2
mail.html
View File

@ -95,7 +95,7 @@
<div class="menu"> <div class="menu">
<a href="mail.html" class="pseudo button">Почта</a> <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="im.html" class="pseudo button">Соцсети</a> <a href="social.html" class="pseudo button">Соцсети</a>
<a href="search.html" class="pseudo button">Поисковики</a> <a href="search.html" class="pseudo button">Поисковики</a>
<a href="extra.html" class="pseudo button">Документы и агитматериалы</a> <a href="extra.html" class="pseudo button">Документы и агитматериалы</a>
<a href="info.html" class="pseudo button">Подробнее</a> <a href="info.html" class="pseudo button">Подробнее</a>

258
search.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>

377
social.html
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">
<h4>Где зарегистрироваться</h4> <center>
<a class="Button" href="https://pixelfed.de">pixelfed.de</a> <div class="tabs two">
<a class="Button" href="https://pxlfd.me">pxlfd.me</a> <input id='tab-31' type='radio' name='tabgroupD' checked />
<a class="Button" href="https://pixelfed.tokyo">pixelfed.tokyo</a> <label class="pseudo button toggle" for="tab-31">Где зарегистрироваться</label>
<a class="Button" href="https://pixelfed.se">pixelfed.se</a> <input id='tab-32' type='radio' name='tabgroupD'>
<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> </center></div>
<h3 id="peertube">#вместоyoutube PeerTube</h3> </div>
</div>
</center>
</article>
<span> <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>