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-radius:2px;
border:1px solid #667; border:1px solid #667;
display:inline-block; display:inline-block;
width: 98%; width: 96%;
height: 99%; height: 99%;
color: #c5c6c7; color: #c5c6c7;
padding: 1% 1% 1% 1%; padding: 1% 1% 1% 1%;
@ -34,8 +34,8 @@
body { body {
font: 100%/150% exo2; font: 100%/150% exo2;
width: 80%%; width: 60%;
max-width: 90%; max-width: 80%;
margin: 0 auto; margin: 0 auto;
background-color:#0b0c10; background-color:#0b0c10;
} }
@ -72,4 +72,19 @@ h1, h2, h3 {
font-family: "exo2"; 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; display: inline-block;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 716px) {
.topnav a:not(:first-child), .dropdown .dropbtn { .topnav a:not(:first-child), .dropdown .dropbtn {
display: none; display: none;
} }
@ -69,7 +69,7 @@
} }
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 716px) {
.topnav.responsive {position: relative;} .topnav.responsive {position: relative;}
.topnav.responsive .icon { .topnav.responsive .icon {
position: absolute; position: absolute;

49
extra.html
View File

@ -10,7 +10,6 @@
<link rel="stylesheet" href="css/menu.css"> <link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/popup.css"> <link rel="stylesheet" href="css/popup.css">
<link rel="stylesheet" href="css/btn.css"> <link rel="stylesheet" href="css/btn.css">
<script src="js/popup.js"></script>
<script src="js/menu.js"></script> <script src="js/menu.js"></script>
</head> </head>
<body> <body>
@ -35,7 +34,7 @@
<div class="textblock"> <div class="textblock">
<h2>Устав сообщества</h2> <h2>Устав сообщества</h2>
<p> <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"> <div class="textblock">
<h2>База знаний</h2> <h2>База знаний</h2>
<p> <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> <p>
<div class="imgblock"> <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/thumb1.png" width=15% max-width=100% style="float:left;">
<img src="images/thumb2.png" width=15% style="float:left; margin:1%;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"/> <img src="images/thumb2.png" width=15% max-width=100% style="float:left; margin:1%;">
<img src="images/transport.png" width=15% style="float:left; margin:1%;" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"/> <img src="images/transport.png" width=15% max-width=100% style="float:left; margin:1%;" >
Вы можете помочь распространению информации о свободных альтернативах централизованным сервисам, Вы можете помочь распространению информации о свободных альтернативах централизованным сервисам,
дав ссылку на этот сайт, либо распечатав и распространив листовки дав ссылку на этот сайт, либо распечатав и распространив листовки
(не исключаем, что одна из них и привела вас сюда). Вливайтесь в ряды просветителей, (не исключаем, что одна из них и привела вас сюда). Вливайтесь в ряды просветителей,
@ -115,44 +114,6 @@
</div> </div>
</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> </body>
</html> </html>

48
index.html
View File

@ -9,7 +9,6 @@
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/menu.css"> <link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/popup.css"> <link rel="stylesheet" href="css/popup.css">
<script src="js/popup.js"></script>
<script src="js/menu.js"></script> <script src="js/menu.js"></script>
</head> </head>
<body> <body>
@ -30,13 +29,13 @@
</div> </div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="dropme()">☰</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="dropme()">☰</a>
</div> </div>
<div class="textblock"> <div class="textblock">
<h2>Где я? О чём речь?</h2> <h2>Где я? О чём речь?</h2>
<p> <p>
<img src="images/fedi-small.png" align="right" style="margin: 0px 0px 0px 10px;"> <img src="images/fedi-small.png" align="right" style="margin: 0px 0px 0px 10px;">
Вы на странице русского ответвления Fediverse — глобальной сети взаимосвязанных соцсетей. Мы предлагаем свободные Вы на странице русского ответвления Fediverse — глобальной сети взаимосвязанных соцсетей. Мы предлагаем свободные
альтернативы популярным сервисам, сделанные людьми и для людей, а не корпорациями с целью извлечения прибыли. альтернативы популярным сервисам, сделанные людьми и для людей, а не корпорациями с целью извлечения прибыли. (Подробности -
<a href="info.html">здесь</a>).
<br> <br>
По сути, это — <i>Сеть, как она была задумана.</i><br> По сути, это — <i>Сеть, как она была задумана.</i><br>
Огромное количество равноправных серверов, прозрачно взаимодействующих между собой. Пользователи и администраторы взаимодействуют Огромное количество равноправных серверов, прозрачно взаимодействующих между собой. Пользователи и администраторы взаимодействуют
@ -70,27 +69,27 @@
</div> </div>
<div class="textblock" align="center"> <div class="textblock">
<h2>Ну ладно. Что дальше?</h2> <h2>Ну ладно. Что дальше?</h2>
<p> <p>
<h3>Просто попробуйте свободную альтернативу:</h3> <h3>Просто попробуйте свободную альтернативу:</h3>
<div class="imgblock"> <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> — он намного удобней. (На данный момент Замените Twitter на <a href="social.html#mastodon">Mastodon</a> — он намного удобней. (На данный момент
— самая популярная из этичных социальных сетей с миллионами пользователей. Больше всего напоминает Твиттер, — самая популярная из этичных социальных сетей с миллионами пользователей. Больше всего напоминает Твиттер,
только с большим лимитом символов и более гибким интерфейсом). только с большим лимитом символов и более гибким интерфейсом).
</div> </div>
<div class="imgblock"> <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>. Также, как и Мастодон, Замените Facebook/ВК на <a href="social.html#friendica">Friendica</a>. Также, как и Мастодон,
Friendica создана из множества мелких сайтов, связанных воедино посредством федерации. Мелкие сайты, составляющие Френдику, называются "нодами". Friendica создана из множества мелких сайтов, связанных воедино посредством федерации. Мелкие сайты, составляющие Френдику, называются "нодами".
Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей в этих сетях не составит труда. Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей в этих сетях не составит труда.
</div> </div>
<div class="imgblock"> <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> — работает в любом браузере, между прочим. А вместо Instagram есть прекрасный <a href="social.html#pixelfed">PixelFed</a> — работает в любом браузере, между прочим.
</div> </div>
<p>И ведь на безопасные для вас альтернативы можно заменить очень многое... Пройдитесь по разделам сайта — вы будете приятно удивлены. <p>И ведь на безопасные для вас альтернативы можно заменить очень многое... Пройдитесь по разделам сайта — вы будете приятно удивлены.
@ -98,41 +97,6 @@
</div> </div>
</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> </body>

3
info.html
View File

@ -9,7 +9,6 @@
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/menu.css"> <link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/popup.css"> <link rel="stylesheet" href="css/popup.css">
<script src="js/popup.js"></script>
<script src="js/menu.js"></script> <script src="js/menu.js"></script>
</head> </head>
<body> <body>
@ -34,7 +33,7 @@
<div class="textblock" align="center"> <div class="textblock" align="center">
<div class="imgblock"> <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> <h1>Знакомая картинка?</h1>
<h2>Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное <h2>Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное
слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные

47
search.html
View File

@ -10,8 +10,6 @@
<link rel="stylesheet" href="css/menu.css"> <link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/popup.css"> <link rel="stylesheet" href="css/popup.css">
<link rel="stylesheet" href="css/btn.css"> <link rel="stylesheet" href="css/btn.css">
<script src="js/popup.js"></script>
<script src="js/menu.js"></script> <script src="js/menu.js"></script>
</head> </head>
<body> <body>
@ -36,7 +34,7 @@
<div class="textblock"> <div class="textblock">
<h2>Зачем вообще менять поисковик?</h2> <h2>Зачем вообще менять поисковик?</h2>
<p> <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 и Яндекс, строят поисковую выдачу на анализе ваших предыдущих запросов, формируя Google, Bing и Яндекс, строят поисковую выдачу на анализе ваших предыдущих запросов, формируя
так называемый "информационный пузырь", также известный как <b>"пузырь фильтров"</b>. Как следствие, так называемый "информационный пузырь", также известный как <b>"пузырь фильтров"</b>. Как следствие,
@ -54,7 +52,7 @@
<div class="textblock"> <div class="textblock">
<h2>Альтернативные варианты</h2> <h2>Альтернативные варианты</h2>
<p> <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> </p>
<div class="imgblock"> <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> <h4>Searx</h4>
<p> <p>
Это метапоисковик с <a href="https://github.com/asciimoo/searx">открытым</a> исходным кодом, что позволяет каждому Это метапоисковик с <a href="https://github.com/asciimoo/searx">открытым</a> исходным кодом, что позволяет каждому
@ -93,7 +91,7 @@
грантов и пожертвований наравне с доходами от неследящей рекламы в самой поисковой системе. грантов и пожертвований наравне с доходами от неследящей рекламы в самой поисковой системе.
</p> </p>
<div class="imgblock"> <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> <h4>Яркий пример — Ecosia</h4>
<p> <p>
Этот поисковик направляет часть доходов от рекламы и грантов на посадку деревьев по всему миру. Задумка проста: Этот поисковик направляет часть доходов от рекламы и грантов на посадку деревьев по всему миру. Задумка проста:
@ -109,7 +107,7 @@
ресурсы. Каждый будет индексировать малюсенький кусочек сети со своего собственного слабого сервера и делиться результатами ресурсы. Каждый будет индексировать малюсенький кусочек сети со своего собственного слабого сервера и делиться результатами
с остальными. И это действительно работает! с остальными. И это действительно работает!
<div class="imgblock"> <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> <h4>YaCy</h4>
Этот вариант подойдёт продвинутым пользователям и системным администраторам, так как проект ориентирован Этот вариант подойдёт продвинутым пользователям и системным администраторам, так как проект ориентирован
в первую очередь на развёртывание инстанции "под себя". Всё достаточно просто — вы устанавливаете приложение, в первую очередь на развёртывание инстанции "под себя". Всё достаточно просто — вы устанавливаете приложение,
@ -129,41 +127,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">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> </body>

82
social.html
View File

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