This commit is contained in:
tolstoevsky 2020-02-18 12:03:39 +03:00
parent 67784ff09d
commit a90c208d65
No known key found for this signature in database
GPG Key ID: EDD59F3A654C596C
5 changed files with 220 additions and 12 deletions

View File

@ -6,11 +6,13 @@
.textblock { .textblock {
background-color:#224; background-color:#224;
border-radius:4px; border-radius:4px;
border:1px solid #667; border-style:solid;
border-color: #667;
display:inline-block; display:inline-block;
width: 90%; width: 90%;
height: 90%; height: 90%;
color: #bbb; color: #bbb;
padding: 2% 2% 2% 2%;
} }
@ -22,7 +24,7 @@
width: 90%; width: 90%;
height: 90%; height: 90%;
color: #bbb; color: #bbb;
padding: 1% 1% 1% 1%; padding: 2% 2% 2% 2%;
text-align: justify; text-align: justify;
} }
@ -55,8 +57,6 @@ h1 {
} }
h2 { h2 {
font-size: 1.4em; font-size: 1.4em;
border-top: solid 1px #eee;
padding-top: 20px;
} }
h3 { h3 {
font-size: 1.1em; font-size: 1.1em;

130
css/popup.css Normal file
View File

@ -0,0 +1,130 @@
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

View File

@ -7,6 +7,8 @@
<title>У вас всегда есть выбор!</title> <title>У вас всегда есть выбор!</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/popup.css">
<script src="js/popup.js"></script>
</head> </head>
<body> <body>
<nav class="nav"> <nav class="nav">
@ -37,7 +39,7 @@
<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;">
В двух словах — <b>Неподцензурность пользователя</b><br> <b>Неподцензурность пользователя, никакой рекламы и слежки.</b><br>
Представьте, что у вас возник конфликт с администрацией вашей любимой сети, ваши сообщения удаляют, аккаунт блокируют. Представьте, что у вас возник конфликт с администрацией вашей любимой сети, ваши сообщения удаляют, аккаунт блокируют.
И заново зайти в привычный уже Вконтакте/Facebook — в лучшем случае через долгое унижение в чате техподдержки, фотографии И заново зайти в привычный уже Вконтакте/Facebook — в лучшем случае через долгое унижение в чате техподдержки, фотографии
паспорта и прочую дурь. Хотелось бы вам в этом случае просто по щелчку мышки зайти в "другой" ВК/FB и продолжить общение паспорта и прочую дурь. Хотелось бы вам в этом случае просто по щелчку мышки зайти в "другой" ВК/FB и продолжить общение
@ -50,7 +52,7 @@
<h2>Чем вы лучше?</h2> <h2>Чем вы лучше?</h2>
<p> <p>
<img src="images/globe.png" align="right" style="margin: 0px 0px 0px 10px;"> <img src="images/globe.png" align="right" style="margin: 0px 0px 0px 10px;">
И снова два слова — <b>абсолютная взаимосвязанность</b> <br> Всего два слова — <b>абсолютная взаимосвязанность</b> <br>
У каждого есть свой предпочтительный формат общения — кто-то любит потоки молниеносных сообщений Твиттера, кто-то — У каждого есть свой предпочтительный формат общения — кто-то любит потоки молниеносных сообщений Твиттера, кто-то —
сложный формат взаимодействия ВК и Facebook, кто-то предпочитает видео или фото... Теперь представьте, что из Твиттера сложный формат взаимодействия ВК и Facebook, кто-то предпочитает видео или фото... Теперь представьте, что из Твиттера
@ -61,31 +63,67 @@
<div class="textblock" align="center"> <div class="textblock" align="center">
<div class="imgblock">
<h2>Ну ладно. Что дальше?</h2> <h2>Ну ладно. Что дальше?</h2>
<p> <p>
<h3>Просто попробуйте свободную альтернативу:</h3> <h3>Просто попробуйте свободную альтернативу:</h3>
<img src="images/mastodon2.png" width=40% style="float:left; margin:1%;"/>
<div class="imgblock">
<img src="images/mastodon2.png" width=40% style="float:left; margin:1%;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"/>
Замените 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%;"/> <img src="images/frendica.png" width=40% style= "float:left; margin:1%;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor" />
Замените 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%;"/> <img src="images/pixelfed.png" width=40% style="float:left; margin:1%;" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"/>
А вместо Instagram есть прекрасный <a href="social.html#pixelfed">PixelFed</a> — работает в любом браузере, между прочим. А вместо Instagram есть прекрасный <a href="social.html#pixelfed">PixelFed</a> — работает в любом браузере, между прочим.
</div> </div>
<p>И ведь на безопасные для вас альтернативы можно заменить очень многое... Пройдитесь по разделам сайта — вы будете приятно удивлены. <p>И ведь на безопасные для вас альтернативы можно заменить очень многое... Пройдитесь по разделам сайта — вы будете приятно удивлены.
</p> </p>
</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="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>
<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="width:100%" onclick="currentSlide(1)" alt="Лучше, чем Twitter">
</div>
<div class="column">
<img class="demo cursor" src="images/frendica.png" style="width:100%" onclick="currentSlide(2)" alt="Лучше, чем Facebook">
</div>
<div class="column">
<img class="demo cursor" src="images/pixelfed.png" style="width:100%" onclick="currentSlide(3)" alt="Лучше, чем Instagram">
</div>
</div>
</div>
</body> </body>

4
js/jquery.min.js vendored Normal file

File diff suppressed because one or more lines are too long

36
js/popup.js Normal file
View File

@ -0,0 +1,36 @@
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}