начинаем облегчение дизайна, галерея убирается, в планах переписать меню
This commit is contained in:
tolstoevsky
parent
0acba2785c
commit
936b615c74
18
css/base.css
18
css/base.css
|
|
@ -10,7 +10,7 @@
|
|||
display:inline-block;
|
||||
width: auto;
|
||||
color: #c5c6c7;
|
||||
padding: 2% 2% 2% 2%;
|
||||
padding: 1% 1% 1% 1%;
|
||||
margin: 1% 1% 1% 1%;
|
||||
|
||||
}
|
||||
|
|
@ -20,22 +20,22 @@
|
|||
border-radius:2px;
|
||||
border:1px solid #667;
|
||||
display:inline-block;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
width: 98%;
|
||||
height: 99%;
|
||||
color: #c5c6c7;
|
||||
padding: 2% 2% 2% 2%;
|
||||
margin: 3% 3% 3% 3%;
|
||||
padding: 1% 1% 1% 1%;
|
||||
margin: 1% 1% 1% 1%;
|
||||
}
|
||||
|
||||
.imgblock img {
|
||||
padding: 2% 2% 2% 2%;
|
||||
margin: 3% 3% 3% 3%;
|
||||
margin: 1% 1% 1% 1%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 100%/150% exo2;
|
||||
width: 900px;
|
||||
max-width: 96%;
|
||||
width: 80%%;
|
||||
max-width: 90%;
|
||||
margin: 0 auto;
|
||||
background-color:#0b0c10;
|
||||
}
|
||||
|
|
|
|||
82
im.html
82
im.html
|
|
@ -8,9 +8,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="css/base.css">
|
||||
<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,14 +34,13 @@
|
|||
<h2>Децентрализованные мессенджеры</h2>
|
||||
<p>Способы быстро списаться и созвониться с нужным человеком</p>
|
||||
<div class="imgblock">
|
||||
<div class="imgblock">
|
||||
<img src="images/chatsecure_messenger.png" width=40% style="float:left; margin:1%;"
|
||||
onclick="openModal();currentSlide(1)" class="hover-shadow cursor"/>
|
||||
<img src="images/movim.png" width=40% style="float:left; margin:1%;"
|
||||
onclick="openModal();currentSlide(2)" class="hover-shadow cursor"/>
|
||||
<img src="images/conversations.png" width=40% style="float:left; margin:1%;"
|
||||
onclick="openModal();currentSlide(3)" class="hover-shadow cursor"/>
|
||||
</div>
|
||||
|
||||
<picture>
|
||||
<source srcset="images/conversations.png" media="(max-width: 700px)">
|
||||
<source srcset="images/movim.png">
|
||||
<img src="images/movim.png" width=45% max-width=100% alt="Jabber">
|
||||
</picture>
|
||||
|
||||
<p>
|
||||
<h3>XMPP (он же Jabber) - на замену WhatsApp и Telegram</h3>
|
||||
<span>
|
||||
|
|
@ -94,12 +91,11 @@
|
|||
|
||||
</div>
|
||||
<div class="imgblock">
|
||||
<div class="imgblock">
|
||||
<img src="images/jitsi2.png" width=35% style="float:left; margin:1%;"
|
||||
onclick="openModal();currentSlide(4)" class="hover-shadow cursor"/>
|
||||
<img src="images/jami.jpg" width=35% style="float:left; margin:1%;"
|
||||
onclick="openModal();currentSlide(5)" class="hover-shadow cursor"/>
|
||||
</div>
|
||||
<picture>
|
||||
<source srcset="images/jitsi2.png" media="(max-width: 700px)">
|
||||
<source srcset="images/jitsi.png">
|
||||
<img src="images/jitsi.png" width=45% max-width=100% alt="Jitsi">
|
||||
</picture>
|
||||
<h3>Jitsi Meet и Jami - на замену Skype</h3>
|
||||
<span>
|
||||
Свободные открытые приложения для чатов и видеозвонков, разрабатываемые командами добровольцев.
|
||||
|
|
@ -139,60 +135,6 @@
|
|||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="myModal" class="modal">
|
||||
<span class="close cursor" onclick="closeModal()">×</span>
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="mySlides">
|
||||
<div class="numbertext">chatsecure</div>
|
||||
<img src="images/chatsecure_messenger.png" style="width:100%">
|
||||
</div>
|
||||
<div class="mySlides">
|
||||
<div class="numbertext">Movim</div>
|
||||
<img src="images/movim.png" style="width:100%">
|
||||
</div>
|
||||
<div class="mySlides">
|
||||
<div class="numbertext">Converstions</div>
|
||||
<img src="images/conversations.png" style="width:100%">
|
||||
</div>
|
||||
<div class="mySlides">
|
||||
<div class="numbertext">Jitsi</div>
|
||||
<img src="images/jitsi2.png" style="width:100%">
|
||||
</div>
|
||||
<div class="mySlides">
|
||||
<div class="numbertext">Jami</div>
|
||||
<img src="images/jami.jpg" style="width:100%">
|
||||
</div>
|
||||
|
||||
<a class="prev" onclick="plusSlides(-1)">❮</a>
|
||||
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||
|
||||
<div class="caption-container">
|
||||
<p id="caption"></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img class="demo cursor" src="images/chatsecure_messenger.png" style="width:100%" onclick="currentSlide(1)" alt="ChatSecure">
|
||||
</div>
|
||||
<div class="column">
|
||||
<img class="demo cursor" src="images/movim.png" style="width:100%" onclick="currentSlide(2)" alt="Movim">
|
||||
</div>
|
||||
<div class="column">
|
||||
<img class="demo cursor" src="images/conversations.png" style="width:100%" onclick="currentSlide(3)" alt="Conversations">
|
||||
</div>
|
||||
<div class="column">
|
||||
<img class="demo cursor" src="images/jitsi2.png" style="width:100%" onclick="currentSlide(4)" alt="Jitsi">
|
||||
</div>
|
||||
<div class="column">
|
||||
<img class="demo cursor" src="images/jami.jpg" style="width:100%" onclick="currentSlide(5)" alt="Jami">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 283 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 373 KiB |
BIN
images/im.png
BIN
images/im.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
BIN
images/jami.jpg
BIN
images/jami.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB |
BIN
images/jitsi.png
BIN
images/jitsi.png
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 983 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 503 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
12
index.html
12
index.html
|
|
@ -105,15 +105,15 @@
|
|||
|
||||
<div class="mySlides">
|
||||
<div class="numbertext">Mastodon</div>
|
||||
<img src="images/mastodon2.png" style="width:100%">
|
||||
<img src="images/mastodon2.png" style="max-width:100%">
|
||||
</div>
|
||||
<div class="mySlides">
|
||||
<div class="numbertext">Friendica</div>
|
||||
<img src="images/frendica.png" style="width:100%">
|
||||
<img src="images/frendica.png" style="max-width:100%">
|
||||
</div>
|
||||
<div class="mySlides">
|
||||
<div class="numbertext">PixelFed</div>
|
||||
<img src="images/pixelfed.png" style="width:100%">
|
||||
<img src="images/pixelfed.png" style="max-width:100%">
|
||||
</div>
|
||||
|
||||
<a class="prev" onclick="plusSlides(-1)">❮</a>
|
||||
|
|
@ -123,13 +123,13 @@
|
|||
<p id="caption"></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img class="demo cursor" src="images/mastodon2.png" style="width:100%" onclick="currentSlide(1)" alt="Лучше, чем Twitter">
|
||||
<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="width:100%" onclick="currentSlide(2)" alt="Лучше, чем Facebook">
|
||||
<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="width:100%" onclick="currentSlide(3)" alt="Лучше, чем Instagram">
|
||||
<img class="demo cursor" src="images/pixelfed.png" style="max-width:100%" onclick="currentSlide(3)" alt="Лучше, чем Instagram">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
26
mail.html
26
mail.html
|
|
@ -37,8 +37,7 @@
|
|||
|
||||
<p>Старейший инструмент сетевого общения, распределённый по своей природе. Но даже его затронула монополизация. </p>
|
||||
<div class="imgblock">
|
||||
<img src="images/mailfence.png" width=45% style="float:left; margin:1%;"
|
||||
onclick="openModal();currentSlide(5)" class="hover-shadow cursor"/>
|
||||
<img src="images/mailfence.png" width=43% max-width=100% style="float:left; margin:1%" alt="MailFence">
|
||||
<h3>MailFence</h3>
|
||||
<span>
|
||||
Бельгийский сервис электронной почты без рекламы и отслеживания. Поддерживает GPG-шифрование, не выдаёт данные пользователей
|
||||
|
|
@ -55,13 +54,17 @@
|
|||
<br>Для пользователей платных аккаунтов доступна работа с любого почтового клиента, включая встроенные.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="imgblock">
|
||||
<img src="images/tutanota.png" width=45% style="float:left; margin:1%;"
|
||||
onclick="openModal();currentSlide(1)" class="hover-shadow cursor"/>
|
||||
<picture>
|
||||
<source srcset="images/tutanota.png" media="(max-width: 600px)">
|
||||
<source srcset="images/tutanota_w.png">
|
||||
<img src="images/tutanota_w.png" width=45% max-width="100%" style="float:left; margin:1%;" alt="Tutanota">
|
||||
</picture>
|
||||
<h3>Tutanota</h3>
|
||||
<span>
|
||||
Сервис, расположенный в Германии, без рекламы и с фокусом на приватность.
|
||||
Позволяет надёжно шифровать даже сообщения, отправляемые пользователям других сервисов,
|
||||
и пользователям, не умеющим настраивать шифрование.
|
||||
Базовая учётная запись бесплатна, за деньги можно получить больше места и возможностей.<br>
|
||||
|
||||
</span>
|
||||
|
|
@ -75,8 +78,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="imgblock">
|
||||
<img src="images/posteo.jpg" width=95% style="float:left; margin:1%;"
|
||||
onclick="openModal();currentSlide(2)" class="hover-shadow cursor"/>
|
||||
<img src="images/posteo.jpg" width=45% max-width="100%" style="float:left; margin:1%;" alt="Posteo">
|
||||
<h3>Posteo</h3>
|
||||
<span>
|
||||
Почтовый сервис без рекламы, максимально приватный и использующий исключительно "зелёное" электричество.
|
||||
|
|
@ -92,8 +94,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="imgblock">
|
||||
<img src="images/cockmail.png" width=95% style="float:left; margin:1%;"
|
||||
onclick="openModal();currentSlide(3)" class="hover-shadow cursor"/>
|
||||
<img src="images/cockmail.png" width=45% max-width="100%" style="float:left; margin:1%;" alt="CockMail">
|
||||
|
||||
<h3>Cockmail</h3>
|
||||
<span>
|
||||
|
|
@ -109,8 +110,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="imgblock">
|
||||
<img src="images/thexyz.png" width=95% style="float:left; margin:1%;"
|
||||
onclick="openModal();currentSlide(4)" class="hover-shadow cursor"/>
|
||||
<picture>
|
||||
<source srcset="images/thexyz_m.png" media="(max-width: 600px)">
|
||||
<source srcset="images/thexyz.png">
|
||||
<img src="images/thexyz.png" width=45% max-width="100%" style="float:left; margin:1%;" alt="TheXYZ">
|
||||
</picture>
|
||||
<h3>TheXYZ</h3>
|
||||
<span>
|
||||
Канадская компания, предлагающая конфиденциальный почтовый сервис бизнес-уровня.
|
||||
|
|
|
|||
Loading…
Reference in New Issue