<!DOCTYPE HTML>
<html>

        <head profile="https://fedi.life">
	<link rel="icon" 
	      type="image/png" 
	      href="favicon.png" />
	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>У вас всегда есть выбор!</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/picnic.min.css">
	<style>
	 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>
        <body>

	<nav class="fedi">
        <!--	        <font size="1.5em"> -->
        <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">меню</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>
      <!--    </font> -->
	</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>
			Вы на странице русского ответвления 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>
			Представьте, что у вас возник конфликт с администрацией вашей любимой сети, ваши сообщения удаляют, аккаунт блокируют.
			И заново зайти в привычный уже Вконтакте/Facebook — в лучшем случае через долгое унижение в чате техподдержки, фотографии 
			паспорта и прочую дурь. Хотелось бы вам в этом случае просто по щелчку мышки зайти в "другой" ВК/FB и продолжить общение 
			с теми же друзьями, обсуждать те же темы, но уже в недосягаемости от обозлённой администрации? У нас так можно. И даже больше
			— никто не мешает самому стать полновластным админом (при наличии минимальной технической подготовки).
			
		</article>

		
		<article class="card four-fifth-1000">
	
			<header>Чем вы лучше?</header>
			<p>
			<img src="images/globe.png" align="right">
			Всего два слова — <i>абсолютная взаимосвязанность.</i>
	
			У каждого есть свой предпочтительный формат общения — кто-то любит потоки молниеносных сообщений Твиттера, кто-то —
			сложный формат взаимодействия ВК и Facebook, кто-то предпочитает видео или фото... Теперь представьте, что из Твиттера 
			вы можете комментировать/лайкать/репостить посты YouTube, Instagram, ВК, а авторы, вещающие в удобном для них формате, 
			оттуда вам отвечают, поддерживая полноценное общение, и никуда не надо перелогиниваться. Удобно? <i>У нас так можно.</i>
			</p>
		</article>
		

		<article class="card four-fifth-1000">

			<header>Ну ладно. Что дальше?</header>
			<p>Просто попробуйте свободную альтернативу</p>
			<p>Все неэтичные сервисы, работющие против вас, можно легко заменить на свободные аналоги, которые зачастую намного удобнее и функциональнее. Ознакомьтесь с примерами ниже.</p>
		</article>
			<article class="card four-fifth-1000">
			<header>Twitter</header>
				<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> — он намного удобней. (На данный момент 
				— самая популярная из этичных социальных сетей с миллионами пользователей. Больше всего напоминает Твиттер, 
				только с большим лимитом символов и более гибким интерфейсом).</p>
			</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>

				Замените Facebook/ВК на <a href="social.html#friendica">Friendica</a>. Также, как и Мастодон, 
				Friendica создана из множества мелких сайтов, связанных воедино посредством федерации. Мелкие сайты, составляющие Френдику, называются "нодами".
				Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей в этих сетях не составит труда. </p>
			</article>
			<article class="card four-fifth-1000">
			<header>Instagram</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>
				<p>А вместо Instagram есть прекрасный <a href="social.html#pixelfed">PixelFed</a> — работает в любом браузере, между прочим.</p>
			</article>
				<p>И ведь на безопасные для вас альтернативы можно заменить очень многое... Пройдитесь по разделам сайта — вы будете приятно удивлены.</p>
		</article>
	</section>
</main>	
	<section>
	<hr>
	<center>
		<a href="https://rawtext.club/~tolstoevsky"><img src="banner.gif"></a>&nbsp;|&nbsp;Created with <a href="https://picnicss.com/">PicniCSS</a> |  <a href="https://matrix.to/#/!RoqEgEZqaHJbSNoacp:m.phreedom.tk?via=m.phreedom.tk&via=matrix.org">Чат поддержки</a>
	</center>
	</section>
	</body>
</html>