Browse Source

начинаем облегчение дизайна, галерея убирается, в планах переписать меню

tags/2.2
tolstoevsky 6 months ago
parent
commit
936b615c74
Signed by: Tolstoevsky <tolstoevsky@phreedom.tk> GPG Key ID: EDD59F3A654C596C
17 changed files with 42 additions and 96 deletions
  1. +9
    -9
      css/base.css
  2. +12
    -70
      im.html
  3. BIN
      images/chatsecure_messenger.png
  4. BIN
      images/fedilab.png
  5. BIN
      images/frendica.png
  6. BIN
      images/friendica.png
  7. BIN
      images/hubzilla.png
  8. BIN
      images/im.png
  9. BIN
      images/jami.jpg
  10. BIN
      images/jitsi.png
  11. BIN
      images/jitsi2.png
  12. BIN
      images/mastodon.png
  13. BIN
      images/mastodon3.png
  14. BIN
      images/thexyz_m.png
  15. BIN
      images/tutanota_w.png
  16. +6
    -6
      index.html
  17. +15
    -11
      mail.html

+ 9
- 9
css/base.css View File

@@ -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;
}


+ 12
- 70
im.html View File

@@ -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()">&times;</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)">&#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/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>


BIN
images/chatsecure_messenger.png View File

Before After
Width: 1015  |  Height: 509  |  Size: 68 KiB

BIN
images/fedilab.png View File

Before After
Width: 500  |  Height: 979  |  Size: 283 KiB

BIN
images/frendica.png View File

Before After
Width: 600  |  Height: 450  |  Size: 55 KiB

BIN
images/friendica.png View File

Before After
Width: 1171  |  Height: 851  |  Size: 149 KiB

BIN
images/hubzilla.png View File

Before After
Width: 1024  |  Height: 635  |  Size: 373 KiB

BIN
images/im.png View File

Before After
Width: 282  |  Height: 179  |  Size: 3.7 KiB

BIN
images/jami.jpg View File

Before After
Width: 392  |  Height: 696  |  Size: 78 KiB

BIN
images/jitsi.png View File

Before After
Width: 346  |  Height: 640  |  Size: 55 KiB Width: 1394  |  Height: 888  |  Size: 983 KiB

BIN
images/jitsi2.png View File

Before After
Width: 375  |  Height: 620  |  Size: 44 KiB Width: 375  |  Height: 620  |  Size: 99 KiB

BIN
images/mastodon.png View File

Before After
Width: 1024  |  Height: 573  |  Size: 503 KiB

BIN
images/mastodon3.png View File

Before After
Width: 1920  |  Height: 1055  |  Size: 113 KiB

BIN
images/thexyz_m.png View File

Before After
Width: 399  |  Height: 665  |  Size: 58 KiB

BIN
images/tutanota_w.png View File

Before After
Width: 1024  |  Height: 640  |  Size: 84 KiB

+ 6
- 6
index.html View File

@@ -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)">&#10094;</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>


+ 15
- 11
mail.html View File

@@ -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…
Cancel
Save