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

резиновость, новые скриншоты

Browse Source
This commit is contained in:
tolstoevsky 2020-03-11 10:34:15 +03:00
parent 936b615c74
commit 5dc852edf2
No known key found for this signature in database
GPG Key ID: EDD59F3A654C596C
8 changed files with 45 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
css/.base.css.swp Normal file
View File

Binary file not shown.

21
css/base.css
View File

@ -20,7 +20,7 @@
border-radius:2px;
border:1px solid #667;
display:inline-block;
width: 98%;
width: 96%;
height: 99%;
color: #c5c6c7;
padding: 1% 1% 1% 1%;
@ -34,8 +34,8 @@
body {
font: 100%/150% exo2;
width: 80%%;
max-width: 90%;
width: 60%;
max-width: 80%;
margin: 0 auto;
background-color:#0b0c10;
}
@ -72,4 +72,19 @@ h1, h2, h3 {
font-family: "exo2";
}
@media screen and (max-width: 900px) {
body {
max-width: 90%;
width: 80%;
}
}
@media screen and (max-width: 716px) {
body {
max-width: 98%;
width: 96%;
}
}

4
css/menu.css
View File

@ -59,7 +59,7 @@
display: inline-block;
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 716px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
@ -69,7 +69,7 @@
}
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 716px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;

49
extra.html
View File

@ -10,7 +10,6 @@
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/popup.css">
<link rel="stylesheet" href="css/btn.css">
<script src="js/popup.js"></script>
<script src="js/menu.js"></script>
</head>
<body>
@ -35,7 +34,7 @@
<div class="textblock">
<h2>Устав сообщества</h2>
<p>
<img src="images/book.png" align="right" style="margin: 0px 0px 0px 10px;">
<img src="images/book.png" align="right" style="margin: 0px 0px 0px 10px;" alt="устав">
Свободные сообщества не регулируются жёсткими правиламии и пользвательскими соглашениями,
тем не менее существует рекомендуемый к соблюдению Устав, следуя положениям которого,
@ -63,7 +62,7 @@
<div class="textblock">
<h2>База знаний</h2>
<p>
<img src="images/know.png" align="right" style="margin: 0px 0px 0px 10px;">
<img src="images/know.png" align="right" style="margin: 0px 0px 0px 10px;" alt="база знаний">
Сообщество не было бы сообществом, если бы не свободный обмен знаниями.
Организуются группы по интересам в соцсетях, создаются тематические Вики — любой способ,
которым вы можете помочь окружащим, доступен, любая помощь приветствуется. Вот примеры информационных
@ -98,9 +97,9 @@
<p>
<div class="imgblock">
<img src="images/thumb1.png" width=15% style="float:left; margin:1%;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"/>
<img src="images/thumb2.png" width=15% style="float:left; margin:1%;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"/>
<img src="images/transport.png" width=15% style="float:left; margin:1%;" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"/>
<img src="images/thumb1.png" width=15% max-width=100% style="float:left;">
<img src="images/thumb2.png" width=15% max-width=100% style="float:left; margin:1%;">
<img src="images/transport.png" width=15% max-width=100% style="float:left; margin:1%;" >
Вы можете помочь распространению информации о свободных альтернативах централизованным сервисам,
дав ссылку на этот сайт, либо распечатав и распространив листовки
(не исключаем, что одна из них и привела вас сюда). Вливайтесь в ряды просветителей,
@ -115,44 +114,6 @@
</div>
</div>
<!-- gallery images block -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="images/thumb1.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="images/thumb2.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="images/transport.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="images/thumb1.png" style="width:100%" onclick="currentSlide(1)" alt="Пример листовки">
</div>
<div class="column">
<img class="demo cursor" src="images/thumb2.png" style="width:100%" onclick="currentSlide(2)" alt="Пример листовки">
</div>
<div class="column">
<img class="demo cursor" src="images/transport.png" style="width:100%" onclick="currentSlide(3)" alt="Для расклейки в транспорте и на стенах">
</div>
</div>
</div>
</body>
</html>

48
index.html
View File

@ -9,7 +9,6 @@
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/popup.css">
<script src="js/popup.js"></script>
<script src="js/menu.js"></script>
</head>
<body>
@ -30,13 +29,13 @@
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="dropme()">☰</a>
</div>
<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>
Огромное количество равноправных серверов, прозрачно взаимодействующих между собой. Пользователи и администраторы взаимодействуют
@ -70,27 +69,27 @@
</div>
<div class="textblock" align="center">
<div class="textblock">
<h2>Ну ладно. Что дальше?</h2>
<p>
<h3>Просто попробуйте свободную альтернативу:</h3>
<div class="imgblock">
<img src="images/mastodon2.png" width=40% style="float:left; margin:1%;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"/>
<img src="images/mastodon2.png" width=45% style="float:left; margin:1%;">
Замените Twitter на <a href="social.html#mastodon">Mastodon</a> — он намного удобней. (На данный момент
— самая популярная из этичных социальных сетей с миллионами пользователей. Больше всего напоминает Твиттер,
только с большим лимитом символов и более гибким интерфейсом).
</div>
<div class="imgblock">
<img src="images/frendica.png" width=40% style= "float:left; margin:1%;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor" />
<img src="images/friendica.png" width=45% style= "float:left; margin:1%;">
Замените Facebook/ВК на <a href="social.html#friendica">Friendica</a>. Также, как и Мастодон,
Friendica создана из множества мелких сайтов, связанных воедино посредством федерации. Мелкие сайты, составляющие Френдику, называются "нодами".
Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей в этих сетях не составит труда.
</div>
<div class="imgblock">
<img src="images/pixelfed.png" width=40% style="float:left; margin:1%;" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"/>
<img src="images/pixelfed.png" width=45% style="float:left; margin:1%;">
А вместо Instagram есть прекрасный <a href="social.html#pixelfed">PixelFed</a> — работает в любом браузере, между прочим.
</div>
<p>И ведь на безопасные для вас альтернативы можно заменить очень многое... Пройдитесь по разделам сайта — вы будете приятно удивлены.
@ -98,41 +97,6 @@
</div>
</div>
<!-- gallery images block -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">Mastodon</div>
<img src="images/mastodon2.png" style="max-width:100%">
</div>
<div class="mySlides">
<div class="numbertext">Friendica</div>
<img src="images/frendica.png" style="max-width:100%">
</div>
<div class="mySlides">
<div class="numbertext">PixelFed</div>
<img src="images/pixelfed.png" style="max-width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="images/mastodon2.png" style="max-width:100%" onclick="currentSlide(1)" alt="Лучше, чем Twitter">
</div>
<div class="column">
<img class="demo cursor" src="images/frendica.png" style="max-width:100%" onclick="currentSlide(2)" alt="Лучше, чем Facebook">
</div>
<div class="column">
<img class="demo cursor" src="images/pixelfed.png" style="max-width:100%" onclick="currentSlide(3)" alt="Лучше, чем Instagram">
</div>
</div>
</div>
</body>

3
info.html
View File

@ -9,7 +9,6 @@
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/popup.css">
<script src="js/popup.js"></script>
<script src="js/menu.js"></script>
</head>
<body>
@ -34,7 +33,7 @@
<div class="textblock" align="center">
<div class="imgblock">
<img src="images/koshka.jpg" width=95% style="float:top; margin:1%;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"/>
<img src="images/koshka.jpg" width=50% max-width=100% style="float:top; margin:1%;" alt="До-Ре-Ми-Фа-Соль-Ля-Си. Кошка села?.. За репост!">
<h1>Знакомая картинка?</h1>
<h2>Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное
слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные

47
search.html
View File

@ -10,8 +10,6 @@
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/popup.css">
<link rel="stylesheet" href="css/btn.css">
<script src="js/popup.js"></script>
<script src="js/menu.js"></script>
</head>
<body>
@ -36,7 +34,7 @@
<div class="textblock">
<h2>Зачем вообще менять поисковик?</h2>
<p>
<img src="images/q.png" align="right" style="margin: 0px 0px 0px 10px;">
<img src="images/q.png" align="right" style="margin: 0px 0px 0px 10px;" alt="question">
Централизованные поисковые системы, ярчайшими (в негативном смысле) представителями которых являются
Google, Bing и Яндекс, строят поисковую выдачу на анализе ваших предыдущих запросов, формируя
так называемый "информационный пузырь", также известный как <b>"пузырь фильтров"</b>. Как следствие,
@ -54,7 +52,7 @@
<div class="textblock">
<h2>Альтернативные варианты</h2>
<p>
<img src="images/mag.png" align="right" style="margin: 0px 0px 0px 10px;">
<img src="images/mag.png" align="right" style="margin: 0px 0px 0px 10px;" alt="searching">
Поиск в море информации современной Сети — дело ресурсозатратное. Нужны огромные мощности для анализа и индексации
всей мудрости и глупости Человечества. Как же совместить необходимость содержать громадные датацентры с безопасностью
и неприкосновенностью личных данных, да ещё и обеспечить адекватную выдачу информации?
@ -69,7 +67,7 @@
Это не требует больших затрат вычислительных мощностей и позволяет обходиться пожертвованиями или нетаргетированной рекламой.
</p>
<div class="imgblock">
<img src="images/searx.png" width=40% style="float:left; margin:1%;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"/>
<img src="images/searx.png" width=50% max-width=100% style="float:left; margin:1%;" alt="SearX">
<h4>Searx</h4>
<p>
Это метапоисковик с <a href="https://github.com/asciimoo/searx">открытым</a> исходным кодом, что позволяет каждому
@ -93,7 +91,7 @@
грантов и пожертвований наравне с доходами от неследящей рекламы в самой поисковой системе.
</p>
<div class="imgblock">
<img src="images/ecosia.png" width=40% style="float:left; margin:1%;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"/>
<img src="images/ecosia.png" width=50% max-width=100% style="float:left; margin:1%;" alt="Ecosia">
<h4>Яркий пример — Ecosia</h4>
<p>
Этот поисковик направляет часть доходов от рекламы и грантов на посадку деревьев по всему миру. Задумка проста:
@ -109,7 +107,7 @@
ресурсы. Каждый будет индексировать малюсенький кусочек сети со своего собственного слабого сервера и делиться результатами
с остальными. И это действительно работает!
<div class="imgblock">
<img src="images/yacy.png" width=40% style="float:left; margin:1%;" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"/>
<img src="images/yacy.png" width=50% max-width=100% style="float:left; margin:1%;" alt="YaCy">
<h4>YaCy</h4>
Этот вариант подойдёт продвинутым пользователям и системным администраторам, так как проект ориентирован
в первую очередь на развёртывание инстанции "под себя". Всё достаточно просто — вы устанавливаете приложение,
@ -129,41 +127,6 @@
</div>
<!-- gallery images block -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">Searx</div>
<img src="images/searx.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">Ecosia</div>
<img src="images/ecosia.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">YaCy</div>
<img src="images/yacy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="images/searx.png" style="width:100%" onclick="currentSlide(1)" alt="Searx">
</div>
<div class="column">
<img class="demo cursor" src="images/ecosia.png" style="width:100%" onclick="currentSlide(2)" alt="Ecosia">
</div>
<div class="column">
<img class="demo cursor" src="images/yacy.png" style="width:100%" onclick="currentSlide(3)" alt="YaCy">
</div>
</div>
</div>
</body>

82
social.html
View File

@ -10,7 +10,6 @@
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/popup.css">
<link rel="stylesheet" href="css/btn.css">
<script src="js/popup.js"></script>
<script src="js/menu.js"></script>
</head>
<body>
@ -37,13 +36,8 @@
<p>Ключевой инструмент взаимодействия в современной Сети. Познакомьтесь с альтернативами</p>
<div class="imgblock">
<img src="images/mastodon.png" width=40% style="float:none; margin:1%;"
onclick="openModal();currentSlide(1)" class="hover-shadow cursor"/>
<img src="images/mastodon3.png" width=40% style="float:none; margin:1%;"
onclick="openModal();currentSlide(3)" class="hover-shadow cursor"/>
<img src="images/mastodon2.png" width=80% style="float:none; margin:1%;"
onclick="openModal();currentSlide(2)" class="hover-shadow cursor"/>
<h3>#вместотвиттера Mastodon</h3>
<img src="images/mastodon2.png" width="45%" max-width="100%" style="float:left; margin:1%;">
<h3 id="mastodon" >#вместотвиттера Mastodon</h3>
<span>
<span>На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей.
Больше всего напоминает Твиттер, только с большим лимитом символов и более гибким интерфейсом.
@ -86,9 +80,8 @@
</div>
</div>
<div class="imgblock">
<img src="images/frendica.png" width=80% style="display:flex; margin:1%;"
onclick="openModal();currentSlide(4)" class="hover-shadow cursor"/>
<h3>#вместоВК Friendica</h3>
<img src="images/friendica.png" width=45% max-width="100%" style="float:left; margin:1%;">
<h3 id="friendica">#вместоВК Friendica</h3>
<span>
Альтернатива Вконтакте и Facebook, с теми же фишками, включая события и фотоальбомы
@ -120,10 +113,9 @@
</div>
</div>
<div class="imgblock">
<img src="images/pixelfed.png" width=50% style="float:left; margin:1%;"
onclick="openModal();currentSlide(5)" class="hover-shadow cursor"/>
<img src="images/pixelfed.png" width=45% max-width=100% style="float:left; margin:1%;">
<h3>#вместоinstagram PixelFed</h3>
<h3 id="pixelfed" >#вместоinstagram PixelFed</h3>
<span>
@ -160,9 +152,8 @@
</div>
</div>
<div class="imgblock">
<img src="images/peertube.png" width=50% style="float:left; margin:1%;"
onclick="openModal();currentSlide(6)" class="hover-shadow cursor"/>
<h3>#вместоyoutube PeerTube</h3>
<img src="images/peertube.png" width=45% max-width=100% style="float:left; margin:1%;">
<h3 id="peertube">#вместоyoutube PeerTube</h3>
<span>
PeerTube — открытая распределённая альтернатива YouTube (принадлежит Google).
@ -199,63 +190,6 @@
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">Mastodon</div>
<img src="images/mastodon.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">Mastodon</div>
<img src="images/mastodon2.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">Mastodon</div>
<img src="images/mastodon3.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">Friendica</div>
<img src="images/frendica.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">PixelFed</div>
<img src="images/pixelfed.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">PeerTube</div>
<img src="images/peertube.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="images/mastodon.png" style="width:100%" onclick="currentSlide(1)" alt="Mastodon">
</div>
<div class="column">
<img class="demo cursor" src="images/mastodon2.png" style="width:100%" onclick="currentSlide(2)" alt="Mastodon">
</div>
<div class="column">
<img class="demo cursor" src="images/mastodon3.png" style="width:100%" onclick="currentSlide(3)" alt="Mastodon">
</div>
<div class="column">
<img class="demo cursor" src="images/frendica.png" style="width:100%" onclick="currentSlide(4)" alt="Friendica">
</div>
<div class="column">
<img class="demo cursor" src="images/pixelfed.png" style="width:100%" onclick="currentSlide(5)" alt="PixelFed">
</div>
<div class="column">
<img class="demo cursor" src="images/peertube.png" style="width:100%" onclick="currentSlide(6)" alt="PeerTube">
</div>
</div>
</div>
</div>
</body>
</html>