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

some styling, some screenshots

Browse Source
This commit is contained in:
Blue 2019-07-28 01:08:55 +03:00
parent 1261bc0f2d
commit 1ad1cfe592
18 changed files with 111 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
im.html
View File

@ -8,9 +8,19 @@
</head> </head>
<body> <body>
<div class="mainContainer"> <div class="mainContainer">
<nav id="header">
<a href="index.html"><div>Главная</div></a>
<a href="social.html"><div>Социальные сети</div></a>
<a class="current" href="im.html"><div>Сервисы мгновенных сообщений</div></a>
<a href="mail.html"><div>Почтовые сервисы</div></a>
<a href="search.html"><div>Поисковые сервисы</div></a>
<a href="info.html"><div>Зачем?</div></a>
</nav>
<h1>Сервисы мгновенных сообщений</h1> <h1>Сервисы мгновенных сообщений</h1>
<h2>Альтернативы WhatsApp, Viber, Skype</h2> <h2>Альтернативы WhatsApp, Viber, Skype</h2>
<h3 id="xmpp">XMPP (он же Jabber)</h3> <h3 id="xmpp">XMPP (он же Jabber)</h3>
<img src="images/conversations.jpg" class="margin" style="float: right;" width="560">
<p> <p>
Широко используемый свободный и открытый стандарт интернет-сообщений. Широко используемый свободный и открытый стандарт интернет-сообщений.
Весьма прост в использовании — регистрируем аккаунт, устанавливаем приложение. Весьма прост в использовании — регистрируем аккаунт, устанавливаем приложение.
@ -29,6 +39,7 @@
<li><a href="https://404.city">404.city</a></li> <li><a href="https://404.city">404.city</a></li>
<li><a href="https://jabber.ru">jabber.ru</a></li> <li><a href="https://jabber.ru">jabber.ru</a></li>
</ul> </ul>
<img src="images/kaidan.png" class="margin" style="float: right;" width="560">
<h4>Приложения</h4> <h4>Приложения</h4>
<ul> <ul>
<li> <li>
@ -64,6 +75,8 @@
</ul> </ul>
</li> </li>
<li> <li>
<img src="images/movim.png" class="margin" style="float: right;" width="560">
<h5>Mac</h5> <h5>Mac</h5>
<ul> <ul>
<li><a href="https://apps.apple.com/us/app/beagleim-by-tigase-inc/id1445349494">BeagleIM</a></li> <li><a href="https://apps.apple.com/us/app/beagleim-by-tigase-inc/id1445349494">BeagleIM</a></li>
@ -78,8 +91,10 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<hr style="clear: right">
<h3 id="quicksy">Quicksy</h3> <h3 id="quicksy">Quicksy</h3>
<img src="images/quicksy.png" class="margin" style="float: right;">
<p> <p>
Очень простой в использовании чатик. Регистрация по номеру телефона. Очень простой в использовании чатик. Регистрация по номеру телефона.
</p> </p>
@ -95,7 +110,9 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<hr style="clear: right">
<img src="images/signal.jpg" class="margin" style="float: right;" width="560">
<h3 id="signal">Signal</h3> <h3 id="signal">Signal</h3>
<p> <p>
Популярное приложение для обмена сообщениями, голосовых- и видеозвонков, для регистрации нужен номер телефона. Популярное приложение для обмена сообщениями, голосовых- и видеозвонков, для регистрации нужен номер телефона.
@ -125,6 +142,7 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<hr style="clear: right">
<h3 id="jami">Jami (ранее Ring)</h3> <h3 id="jami">Jami (ранее Ring)</h3>
<p> <p>
@ -158,6 +176,7 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<hr style="clear: right">
<h3 id="jitsi">Jitsi Meet</h3> <h3 id="jitsi">Jitsi Meet</h3>
<p> <p>

BIN
images/conversations.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
images/diaspora.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

BIN
images/dino.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 332 KiB

BIN
images/frendica.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 522 KiB

BIN
images/kaidan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB

0
koshka.jpg → images/koshka.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

BIN
images/mastodon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 700 KiB

BIN
images/movim.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
images/pixelfed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 175 KiB

BIN
images/quicksy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
images/signal.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

20
index.html
View File

@ -9,18 +9,18 @@
<body> <body>
<div class="mainContainer"> <div class="mainContainer">
<nav id="header"> <nav id="header">
<a href="index.html">Главная</a> <a class="current" href="index.html"><div>Главная</div></a>
<a href="social.html">Социальные сети</a> <a href="social.html"><div>Социальные сети</div></a>
<a href="im.html">Сервисы мгновенных сообщений</a> <a href="im.html"><div>Сервисы мгновенных сообщений</div></a>
<a href="mail.html">Почтовые сервисы</a> <a href="mail.html"><div>Почтовые сервисы</div></a>
<a href="search.html">Поисковые сервисы</a> <a href="search.html"><div>Поисковые сервисы</div></a>
<a href="info.html">Зачем?</a> <a href="info.html"><div>Зачем?</div></a>
</nav> </nav>
<h1> <h1>
Альтернативы есть. Альтернативы - есть.<br>
Выбор есть. Выбор - есть.<br>
Ваш выбор важен. Ваш выбор - важен.<br>
Вы важны Вы - важны!<br>
</h1> </h1>
</div> </div>
</body> </body>

10
info.html
View File

@ -8,9 +8,17 @@
</head> </head>
<body> <body>
<div class="mainContainer"> <div class="mainContainer">
<nav id="header">
<a href="index.html"><div>Главная</div></a>
<a href="social.html"><div>Социальные сети</div></a>
<a href="im.html"><div>Сервисы мгновенных сообщений</div></a>
<a href="mail.html"><div>Почтовые сервисы</div></a>
<a href="search.html"><div>Поисковые сервисы</div></a>
<a class="current" href="info.html"><div>Зачем?</div></a>
</nav>
<h1>Fediverse или как стать Неуловимым Джо</h1> <h1>Fediverse или как стать Неуловимым Джо</h1>
<h3>Чем плохи централизованные соцсети и сервисы? Почему ими опасно пользоваться? Почему они никогда не станут лучше? И - главное - что со всем этим делать?</h3> <h3>Чем плохи централизованные соцсети и сервисы? Почему ими опасно пользоваться? Почему они никогда не станут лучше? И - главное - что со всем этим делать?</h3>
<img src="koshka.jpg" style="float: left; width: 500px; margin: 20px"/> <img src="images/koshka.jpg" class="margin" style="float: left; width: 500px"/>
<p> <p>
Знакомая картинка? Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное Знакомая картинка? Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное
слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные

14
mail.html
View File

@ -8,6 +8,15 @@
</head> </head>
<body> <body>
<div class="mainContainer"> <div class="mainContainer">
<nav id="header">
<a href="index.html"><div>Главная</div></a>
<a href="social.html"><div>Социальные сети</div></a>
<a href="im.html"><div>Сервисы мгновенных сообщений</div></a>
<a class="current" href="mail.html"><div>Почтовые сервисы</div></a>
<a href="search.html"><div>Поисковые сервисы</div></a>
<a href="info.html"><div>Зачем?</div></a>
</nav>
<h1>Почтовые сервисы</h1> <h1>Почтовые сервисы</h1>
<h2>Альтернативы Gmail/Яндекс.почте/mail.ru</h2> <h2>Альтернативы Gmail/Яндекс.почте/mail.ru</h2>
@ -51,6 +60,7 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<hr style="clear: right">
<h3 id="proton">ProtonMail</h3> <h3 id="proton">ProtonMail</h3>
<p> <p>
@ -82,6 +92,7 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<hr style="clear: right">
<h3 id="posteo">Posteo</h3> <h3 id="posteo">Posteo</h3>
<p> <p>
@ -120,6 +131,7 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<hr style="clear: right">
<h3 id="thexyz">Thexyz</h3> <h3 id="thexyz">Thexyz</h3>
<p> <p>
@ -148,6 +160,7 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<hr style="clear: right">
<h3 id="kolab">Kolab now</h3> <h3 id="kolab">Kolab now</h3>
<p> <p>
@ -158,6 +171,7 @@
<ul> <ul>
<li><a href="https://kolabnow.com/">kolabnow.com</a></li> <li><a href="https://kolabnow.com/">kolabnow.com</a></li>
</ul> </ul>
<hr style="clear: right">
<h3 id="mailbox">Mailbox.org</h3> <h3 id="mailbox">Mailbox.org</h3>
<p> <p>

26
main.css
View File

@ -28,12 +28,38 @@ nav > a {
font-weight: bold; font-weight: bold;
color: inherit; color: inherit;
text-align: center; text-align: center;
background-color: transparent;
transition: background-color 0.2s;
}
nav > a.current {
background-color: #5db9ef;
}
nav > a:hover {
background-color: rgba(0, 0, 0, 0.2);
}
nav > a.current:hover {
background-color: #5397ca;
} }
nav > a:visited { nav > a:visited {
color: inherit; color: inherit;
} }
.margin {
margin: 15px;
}
nav > a > div {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
}
.thumbnails { .thumbnails {
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;

15
search.html
View File

@ -8,6 +8,14 @@
</head> </head>
<body> <body>
<div class="mainContainer"> <div class="mainContainer">
<nav id="header">
<a href="index.html"><div>Главная</div></a>
<a href="social.html"><div>Социальные сети</div></a>
<a href="im.html"><div>Сервисы мгновенных сообщений</div></a>
<a href="mail.html"><div>Почтовые сервисы</div></a>
<a class="current" href="search.html"><div>Поисковые сервисы</div></a>
<a href="info.html"><div>Зачем?</div></a>
</nav>
<h1>Поисковые сервисы</h1> <h1>Поисковые сервисы</h1>
<h3 id="duckduckgo">DuckDuckGo</h3> <h3 id="duckduckgo">DuckDuckGo</h3>
<p> <p>
@ -41,6 +49,7 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<hr style="clear: right">
<h3 id="qwant">Qwant</h3> <h3 id="qwant">Qwant</h3>
<p> <p>
@ -71,6 +80,7 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<hr style="clear: right">
<h3 id="searx">Searx</h3> <h3 id="searx">Searx</h3>
<p> <p>
@ -103,6 +113,7 @@
<a href="https://github.com/asciimoo/searx/wiki/Searx-instances">Полный список</a> <a href="https://github.com/asciimoo/searx/wiki/Searx-instances">Полный список</a>
</li> </li>
</ul> </ul>
<hr style="clear: right">
<h3 id="startpage">StartPage</h3> <h3 id="startpage">StartPage</h3>
<p> <p>
@ -129,6 +140,7 @@
<a href="https://www.startpage.com/">www.ptartpage.com</a> <a href="https://www.startpage.com/">www.ptartpage.com</a>
</li> </li>
</ul> </ul>
<hr style="clear: right">
<h3 id="yacy">Анонимная поисковая система Yacy</h3> <h3 id="yacy">Анонимная поисковая система Yacy</h3>
<p> <p>
@ -155,8 +167,9 @@
<a href="https://yacy.net/">yacy.net</a> <a href="https://yacy.net/">yacy.net</a>
</li> </li>
</ul> </ul>
<hr style="clear: right">
<h3 id="other">список других поисковиков</h3> <h3 id="other">Список других поисковых систем</h3>
<ul> <ul>
<li> <li>
<a href="https://www.oscobo.com/">www.oscobo.com</a> <a href="https://www.oscobo.com/">www.oscobo.com</a>

21
social.html
View File

@ -8,10 +8,19 @@
</head> </head>
<body> <body>
<div class="mainContainer"> <div class="mainContainer">
<nav id="header">
<a href="index.html"><div>Главная</div></a>
<a class="current" href="social.html"><div>Социальные сети</div></a>
<a href="im.html"><div>Сервисы мгновенных сообщений</div></a>
<a href="mail.html"><div>Почтовые сервисы</div></a>
<a href="search.html"><div>Поисковые сервисы</div></a>
<a href="info.html"><div>Зачем?</div></a>
</nav>
<h1>Социальные сети</h1> <h1>Социальные сети</h1>
<h2>Альтернативы Вконтакте/Facebook и Twitter</h2> <h2>Альтернативы Вконтакте/Facebook и Twitter</h2>
<h3 id="mastodon">Mastodon</h3> <h3 id="mastodon">Mastodon</h3>
<iframe style="float: right" width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://video.deadsuperhero.com/videos/embed/adffa7af-6063-4e09-8c1c-e8252167315d" frameborder="0" allowfullscreen=""></iframe> <iframe class="margin" style="float: right" width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://video.deadsuperhero.com/videos/embed/adffa7af-6063-4e09-8c1c-e8252167315d" frameborder="0" allowfullscreen=""></iframe>
<p> <p>
На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей. На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей.
Выше приведено официальное англоязычное видео, объясняющее, как работает эта сеть. Выше приведено официальное англоязычное видео, объясняющее, как работает эта сеть.
@ -63,6 +72,7 @@
гуманитарию локальная лента может показаться скучноватой. гуманитарию локальная лента может показаться скучноватой.
</p> </p>
<h4>Приложения</h4> <h4>Приложения</h4>
<img src="images/mastodon.png" class="margin" style="float: right;" width="560">
<ul> <ul>
<li> <li>
<h5>Android</h5> <h5>Android</h5>
@ -89,6 +99,7 @@
P.S.: Если Мастодон заинтересовал вас настолько, что вы готовы запустить P.S.: Если Мастодон заинтересовал вас настолько, что вы готовы запустить
собственную инстанцию, став частью сети, вы можете сделать это в пару кликов на <a href="https://masto.host">masto.host</a> собственную инстанцию, став частью сети, вы можете сделать это в пару кликов на <a href="https://masto.host">masto.host</a>
</p> </p>
<hr>
<h3 id="frendica">Friendica</h3> <h3 id="frendica">Friendica</h3>
<p>Альтернатива Вконтакте и Facebook, с теми же фишками, включая события и фотоальбомы.</p> <p>Альтернатива Вконтакте и Facebook, с теми же фишками, включая события и фотоальбомы.</p>
@ -97,6 +108,7 @@
связанных воедино посредством федерации. Мелкие сайты, составляющие связанных воедино посредством федерации. Мелкие сайты, составляющие
Френдику, называются "нодами". Френдику, называются "нодами".
</p> </p>
<img src="images/frendica.png" class="margin" style="float: right;" width="560">
<p> <p>
Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и
всеми остальными альтернативными соцсетями, так что завести друзей всеми остальными альтернативными соцсетями, так что завести друзей
@ -123,8 +135,10 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<hr style="clear: right">
<h3>Diaspora</h3> <h3>Diaspora</h3>
<img src="images/diaspora.png" class="margin" style="float: right;" width="560">
<p> <p>
Одна из старейших альтернатив ВК и Facebook. Одна из старейших альтернатив ВК и Facebook.
Диаспора также состоит из множества мелких сайтов, Диаспора также состоит из множества мелких сайтов,
@ -143,6 +157,7 @@
<li><a href="https://russiandiaspora.org">russiandiaspora.org</a></li> <li><a href="https://russiandiaspora.org">russiandiaspora.org</a></li>
<li><a href="https://pod.disroot.org">pod.disroot.org</a></li> <li><a href="https://pod.disroot.org">pod.disroot.org</a></li>
</ul> </ul>
<hr style="clear: right">
<h2>Альтернатива Instagram</h2> <h2>Альтернатива Instagram</h2>
<h3 id="pixelfed">Pixelfed</h3> <h3 id="pixelfed">Pixelfed</h3>
@ -152,6 +167,7 @@
Пример аккаунта — <a href="https://pixelfed.social/earth">https://pixelfed.social/earth</a> , Пример аккаунта — <a href="https://pixelfed.social/earth">https://pixelfed.social/earth</a> ,
пример поста — <a href="https://pixelfed.social/p/earth/22346">https://pixelfed.social/p/earth/22346</a> пример поста — <a href="https://pixelfed.social/p/earth/22346">https://pixelfed.social/p/earth/22346</a>
</p> </p>
<img src="images/pixelfed.png" class="margin" style="float: right;" width="560">
<p> <p>
Сеть состоит из мелких независимых сайтов, способных общаться между собой, Сеть состоит из мелких независимых сайтов, способных общаться между собой,
так что вы можете свободно фолловить людей с других сайтов PixelFed, так что вы можете свободно фолловить людей с других сайтов PixelFed,
@ -176,10 +192,11 @@
<li><a href="https://pix.tedomum.net">pix.tedomum.net</a></li> <li><a href="https://pix.tedomum.net">pix.tedomum.net</a></li>
<li><a href="https://pix.diaspodon.fr">pix.diaspodon.fr</a></li> <li><a href="https://pix.diaspodon.fr">pix.diaspodon.fr</a></li>
</ul> </ul>
<hr style="clear: right">
<h2>Альтернатива YouTube</h2> <h2>Альтернатива YouTube</h2>
<h3 id="peertube">PeerTube</h3> <h3 id="peertube">PeerTube</h3>
<iframe style="float: right" width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://peertube.video/videos/embed/217eefeb-883d-45be-b7fc-a788ad8507d3" frameborder="0" allowfullscreen=""></iframe> <iframe class="margin" style="float: right" width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://peertube.video/videos/embed/217eefeb-883d-45be-b7fc-a788ad8507d3" frameborder="0" allowfullscreen=""></iframe>
<p> <p>
PeerTube — открытая распределённая альтернатива YouTube (принадлежащей Google). PeerTube — открытая распределённая альтернатива YouTube (принадлежащей Google).
Это соцсеть, приспособленная для распространения видео, без рекламы и слежки. Это соцсеть, приспособленная для распространения видео, без рекламы и слежки.