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

10
info.html
View File

@ -8,9 +8,17 @@
</head>
<body>
<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>
<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>
Знакомая картинка? Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное
слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные

14
mail.html
View File

@ -8,6 +8,15 @@
</head>
<body>
<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>
<h2>Альтернативы Gmail/Яндекс.почте/mail.ru</h2>
@ -51,6 +60,7 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="proton">ProtonMail</h3>
<p>
@ -82,6 +92,7 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="posteo">Posteo</h3>
<p>
@ -120,6 +131,7 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="thexyz">Thexyz</h3>
<p>
@ -148,6 +160,7 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="kolab">Kolab now</h3>
<p>
@ -158,6 +171,7 @@
<ul>
<li><a href="https://kolabnow.com/">kolabnow.com</a></li>
</ul>
<hr style="clear: right">
<h3 id="mailbox">Mailbox.org</h3>
<p>

26
main.css
View File

@ -28,12 +28,38 @@ nav > a {
font-weight: bold;
color: inherit;
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 {
color: inherit;
}
.margin {
margin: 15px;
}
nav > a > div {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
}
.thumbnails {
text-align: center;
overflow: hidden;

15
search.html
View File

@ -8,6 +8,14 @@
</head>
<body>
<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>
<h3 id="duckduckgo">DuckDuckGo</h3>
<p>
@ -41,6 +49,7 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="qwant">Qwant</h3>
<p>
@ -71,6 +80,7 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="searx">Searx</h3>
<p>
@ -103,6 +113,7 @@
<a href="https://github.com/asciimoo/searx/wiki/Searx-instances">Полный список</a>
</li>
</ul>
<hr style="clear: right">
<h3 id="startpage">StartPage</h3>
<p>
@ -129,6 +140,7 @@
<a href="https://www.startpage.com/">www.ptartpage.com</a>
</li>
</ul>
<hr style="clear: right">
<h3 id="yacy">Анонимная поисковая система Yacy</h3>
<p>
@ -155,8 +167,9 @@
<a href="https://yacy.net/">yacy.net</a>
</li>
</ul>
<hr style="clear: right">
<h3 id="other">список других поисковиков</h3>
<h3 id="other">Список других поисковых систем</h3>
<ul>
<li>
<a href="https://www.oscobo.com/">www.oscobo.com</a>

21
social.html
View File

@ -8,10 +8,19 @@
</head>
<body>
<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>
<h2>Альтернативы Вконтакте/Facebook и Twitter</h2>
<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>
На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей.
Выше приведено официальное англоязычное видео, объясняющее, как работает эта сеть.
@ -63,6 +72,7 @@
гуманитарию локальная лента может показаться скучноватой.
</p>
<h4>Приложения</h4>
<img src="images/mastodon.png" class="margin" style="float: right;" width="560">
<ul>
<li>
<h5>Android</h5>
@ -89,6 +99,7 @@
P.S.: Если Мастодон заинтересовал вас настолько, что вы готовы запустить
собственную инстанцию, став частью сети, вы можете сделать это в пару кликов на <a href="https://masto.host">masto.host</a>
</p>
<hr>
<h3 id="frendica">Friendica</h3>
<p>Альтернатива Вконтакте и Facebook, с теми же фишками, включая события и фотоальбомы.</p>
@ -97,6 +108,7 @@
связанных воедино посредством федерации. Мелкие сайты, составляющие
Френдику, называются "нодами".
</p>
<img src="images/frendica.png" class="margin" style="float: right;" width="560">
<p>
Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и
всеми остальными альтернативными соцсетями, так что завести друзей
@ -123,8 +135,10 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3>Diaspora</h3>
<img src="images/diaspora.png" class="margin" style="float: right;" width="560">
<p>
Одна из старейших альтернатив ВК и Facebook.
Диаспора также состоит из множества мелких сайтов,
@ -143,6 +157,7 @@
<li><a href="https://russiandiaspora.org">russiandiaspora.org</a></li>
<li><a href="https://pod.disroot.org">pod.disroot.org</a></li>
</ul>
<hr style="clear: right">
<h2>Альтернатива Instagram</h2>
<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/p/earth/22346">https://pixelfed.social/p/earth/22346</a>
</p>
<img src="images/pixelfed.png" class="margin" style="float: right;" width="560">
<p>
Сеть состоит из мелких независимых сайтов, способных общаться между собой,
так что вы можете свободно фолловить людей с других сайтов PixelFed,
@ -176,10 +192,11 @@
<li><a href="https://pix.tedomum.net">pix.tedomum.net</a></li>
<li><a href="https://pix.diaspodon.fr">pix.diaspodon.fr</a></li>
</ul>
<hr style="clear: right">
<h2>Альтернатива YouTube</h2>
<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>
PeerTube — открытая распределённая альтернатива YouTube (принадлежащей Google).
Это соцсеть, приспособленная для распространения видео, без рекламы и слежки.