gallery

2020-02-18 12:03:39 +03:00 · 2020-02-18 12:03:39 +03:00 · a90c208d65
commit a90c208d65
parent 67784ff09d
5 changed files with 220 additions and 12 deletions
--- a/css/base.css
+++ b/css/base.css
@ -6,11 +6,13 @@
 .textblock {
        background-color:#224;
        border-radius:4px;
-        border:1px solid #667;
+        border-style:solid;
+       	border-color: #667;
        display:inline-block;
 	width: 90%;
 	height: 90%;
 	color: #bbb;
+	padding: 2% 2% 2% 2%;

 }

@ -22,7 +24,7 @@
 	width: 90%;
 	height: 90%;
 	color: #bbb;
-	padding: 1% 1% 1% 1%;
+	padding: 2% 2% 2% 2%;
 	text-align: justify;
 }

@ -55,8 +57,6 @@ h1 {
 }
 h2 {
 	font-size: 1.4em;
-	border-top: solid 1px #eee;
-	padding-top: 20px;
 }
 h3 {
 	font-size: 1.1em;
--- a/css/popup.css
+++ b/css/popup.css
@ -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);
+}
--- a/index.html
+++ b/index.html
@ -7,7 +7,9 @@
        <title>У вас всегда есть выбор!</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="css/base.css">
-        </head>
+        <link rel="stylesheet" href="css/popup.css">
+	<script src="js/popup.js"></script>
+	</head>
        <body>
 <nav class="nav">
 	<ul>
@ -37,7 +39,7 @@
 			<h2>Зачем это мне?</h2>
 			<p>
 			<img src="images/q.png" align="right" style="margin: 0px 0px 0px 10px;">
-			В двух словах — <b>Неподцензурность пользователя</b><br>
+			<b>Неподцензурность пользователя, никакой рекламы и слежки.</b><br>
 			Представьте, что у вас возник конфликт с администрацией вашей любимой сети, ваши сообщения удаляют, аккаунт блокируют.
 			И заново зайти в привычный уже Вконтакте/Facebook — в лучшем случае через долгое унижение в чате техподдержки, фотографии 
 			паспорта и прочую дурь. Хотелось бы вам в этом случае просто по щелчку мышки зайти в "другой" ВК/FB и продолжить общение 
@ -50,7 +52,7 @@
 			<h2>Чем вы лучше?</h2>
 			<p>
 			<img src="images/globe.png" align="right" style="margin: 0px 0px 0px 10px;">
-			И снова два слова — <b>абсолютная взаимосвязанность</b> <br>
+			Всего два слова — <b>абсолютная взаимосвязанность</b> <br>
 	
 			У каждого есть свой предпочтительный формат общения — кто-то любит потоки молниеносных сообщений Твиттера, кто-то —
 			сложный формат взаимодействия ВК и Facebook, кто-то предпочитает видео или фото... Теперь представьте, что из Твиттера 
@ -61,31 +63,67 @@

 		<div class="textblock" align="center">

-			<div class="imgblock">
 			<h2>Ну ладно. Что дальше?</h2>
 			<p>
 			<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> — он намного удобней. (На данный момент 
 				— самая популярная из этичных социальных сетей с миллионами пользователей. Больше всего напоминает Твиттер, 
 				только с большим лимитом символов и более гибким интерфейсом.)
 			</div>
 			
 			<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> — она умеет больше. ( Также, как и Мастодон, 
 				Friendica создана из множества мелких сайтов, связанных воедино посредством федерации. Мелкие сайты, составляющие Френдику, называются "нодами".
 				Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей в этих сетях не составит труда)
 			</div>
 			<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> — работает в любом браузере, между прочим.
 			</div>
 				<p>И ведь на безопасные для вас альтернативы можно заменить очень многое... Пройдитесь по разделам сайта — вы будете приятно удивлены.
 		</p>
 		</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>
--- a/js/jquery.min.js
+++ b/js/jquery.min.js
--- a/js/popup.js
+++ b/js/popup.js
@ -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;
+}