blade/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2024-12-17 17:20:21 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

website: improvements to design (#1405)

Browse Source 
* updated the design of join simplex

* updated the design of Comparison section

* updated the design of Simplex explained

* updated the design of Simplex network

* updated the design of private section

* updated the design of features section

* updated the design of unique section

* updated the design of privacy matters

* added improvements in design

Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>
This commit is contained in:
M Sarmad Qadeer
2023-01-27 17:07:22 +05:00
committed by GitHub
parent 148261a1ee
commit a96fb2f8d1
6 changed files with 138 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/_includes/sections/join_simplex.html
+9 -10
View File
@@ -1,31 +1,30 @@
{# join simplex #}
<section class="bg-primary-bg-light dark:bg-primary-bg-dark py-[85px] px-5">
<section class="bg-primary-bg-light dark:bg-primary-bg-dark lg:h-[855px] py-[90px] px-5">
<div class="container flex flex-col items-center">
<p class="text-[35px] lg:text-[45px] text-grey-black dark:text-white text-center font-bold mb-4"><span class="text-active-blue">Join</span> SimpleX</p>
<p class="text-black dark:text-white text-base text-center mb-10">We invite you to join the conversation</p>
<p class="text-[38px] leading-[36px] md:leading-[55px] text-grey-black dark:text-white text-center font-bold mb-5"><span class="text-active-blue">Join</span> SimpleX</p>
<p class="text-black dark:text-white text-base text-center mb-14">We invite you to join the conversation</p>
<div class="flex flex-col items-center gap-5 self-stretch mb-10">
<div class="flex flex-col items-center gap-5 self-stretch mb-12">
<a href="https://www.reddit.com/r/SimpleXChat/" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border bg-[#D9ECFF]">Join the REDDIT community</a>
<a href="https://github.com/simplex-chat" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border bg-[#D9ECFF]">Join us on GitHub</a>
<a href="https://github.com/simplex-chat/simplex-chat#help-us-with-donations" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border-none bg-white dark:bg-[rgba(112,240,249,0.2)] border border-[#0053D0]">Donate here to help us</a>
</div>
<p class="text-black dark:text-white text-base text-center mb-5">Sign up to receive our updates</p>
<p class="text-grey-black dark:text-white text-base text-center mb-7">Sign up to receive our updates</p>
<form class="flex items-center w-full max-w-[540px] mb-4"
<form class="flex items-center w-full max-w-[540px] mb-20"
action="https://chat.us2.list-manage.com/subscribe/post?u=ddd892b258ae36e5438e6d4e1&amp;id=ad6037a2fe"
method="post" target="_blank" novalidate>
<input name="EMAIL" type="text" class="h-[44px] rounded-l-[34px] bg-transparent border border-primary-light focus:outline-none text-primary-light dark:text-primary-dark text-base w-full max-w-[400px] px-5"
placeholder="Enter your email address">
<input name="EMAIL" type="text" class="h-[44px] rounded-l-[34px] bg-transparent border border-primary-light focus:outline-none text-primary-light dark:text-primary-dark text-base w-full max-w-[400px] px-5 placeholder:text-grey-black placeholder:dark:text-white placeholder:text-base placeholder:font-normal placeholder:tracking-[0.01em]" placeholder="Enter your email address">
<span style="position: absolute; left: -5000px" aria-hidden="true">
<input type="text" name="b_ddd892b258ae36e5438e6d4e1_ad6037a2fe" tabindex="-1" value="" />
</span>
<input type="submit" class="h-[44px] rounded-r-[34px] bg-primary-light text-white text-center px-8">
</form>
<hr class="block my-10 mx-5 dark:opacity-[0.2] w-full">
<hr class="block mb-7 mx-5 dark:opacity-[0.2] w-full">
<p class="text-black dark:text-white text-center mb-5">Get SimpleX</p>
<p class="text-grey-black dark:text-white text-center mb-7">Get SimpleX</p>
<div class="flex items-center justify-center gap-4 flex-wrap">
<a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apple_store.svg" /></a>
<a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img class="h-[40px] w-auto" src="/img/new/google_play.svg" /></a>
website/src/_includes/sections/simplex_unique.html
+3 -3
View File
@@ -1,12 +1,12 @@
<section id="why-simplex" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[90px] overflow-hidden px-0 sm:px-1">
<section id="why-simplex" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[90px] overflow-hidden px-0 sm:px-1 xl:h-[888px]">
<div class="container scale-100">
<p class="text-grey-black dark:text-white text-[35px] lg:text-[45px] text-center font-bold mb-[44px] px-5 sm:px-4">Why SimpleX is <span class="gradient-text">unique</span></p>
<p class="text-grey-black dark:text-white text-[35px] leading-[45px] md:leading-[55px] lg:text-[45px] text-center font-bold mb-14 px-5 sm:px-4">Why SimpleX is <span class="gradient-text">unique</span></p>
<div class="swiper unique-swiper px-5 sm:px-4 py-2">
<div class="swiper-wrapper mb-16">
{% for section in why_simplex_is_unique.sections %}
<div class="swiper-slide overflow-hidden flex items-center md:items-start flex-col xl:flex-row-reverse xl:items-center min-h-[620px] md:min-h-fit px-4 md:px-10 lg:px-[50px] py-8 lg:py-[50px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient relative simplex-unique-card">
<div class="swiper-slide overflow-hidden flex items-center md:items-start flex-col xl:flex-row-reverse xl:items-center min-h-[620px] md:min-h-fit xl:min-h-[565px] px-4 md:px-10 lg:px-[50px] py-8 lg:py-[50px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient relative simplex-unique-card">
<div class="md:flex-1 flex items-center justify-center h-[55%] md:h-fit w-full card-image">
<img class="w-full max-w-[400px] dark:hidden" src="{{ section.imgLight }}" alt="">
website/src/_includes/simplex_explained.html
+9 -10
View File
@@ -23,12 +23,12 @@
}
</style>
<section id="simplex-explained" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[80px] px-5">
<section id="simplex-explained" class="bg-primary-bg-light dark:bg-primary-bg-dark lg:h-[890px] py-[90px] px-5">
<div class="container">
<p class="text-[35px] lg:text-[45px] text-center font-bold text-grey-black dark:text-white mb-[40px]">Simplex explained</p>
<p class="text-[35px] leading-[45px] md:leading-[55px] lg:text-[38px] text-center font-bold text-grey-black dark:text-white mb-9">Simplex explained</p>
<!-- Tab links -->
<div class="tabs hidden md:flex gap-2 mb-16">
<div class="tabs hidden md:flex gap-2 mb-24">
<div data-btn-index="0" class="flex-1 tab-button tab-1 p-2 text-[20px] text-center font-bold cursor-pointer active">1. What users experience</div>
<div data-btn-index="1" class="flex-1 tab-button tab-2 p-2 text-[20px] text-center font-bold cursor-pointer">2. How does it work</div>
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. What servers see</div>
@@ -41,8 +41,8 @@
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. What users experience</div>
<div class="flex flex-col justify-center items-center">
<img class="h-[340px] my-16" src="/img/new/explained-1.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center mt-[30px]">
<img class="h-[340px] mb-[74px]" src="/img/new/explained-1.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center">
You can create contacts and groups, and have two-way conversations, as in any other messenger.
</p>
<p class="text-black dark:text-white text-[16px] font-normal text-center">
@@ -54,8 +54,8 @@
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. How does it work</div>
<div class="flex flex-col justify-center items-center">
<img class="h-[340px] my-16" src="/img/new/explained-2.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center mt-[30px]">
<img class="h-[340px] mb-[74px]" src="/img/new/explained-2.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center">
For each connection you use two separate messaging queues to send and receive messages via different servers.
</p>
<p class="text-black dark:text-white text-[16px] font-normal text-center">
@@ -67,8 +67,8 @@
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. What servers see</div>
<div class="flex flex-col justify-center items-center">
<img class="h-[340px] my-16" src="/img/new/explained-3.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center mt-[30px]">
<img class="h-[340px] mb-[74px]" src="/img/new/explained-3.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center">
The servers have separate anonymous credentials for each queue, and do not know which users they belong to.
</p>
<p class="text-black dark:text-white text-[16px] font-normal text-center">
@@ -84,7 +84,6 @@
</section>
<script>
window.addEventListener("load", function () {
const simplexExplainedSwiper__bullets = document.querySelectorAll(".simplex-explained-swiper .swiper-pagination > span");
const simplexExplainedSwiper__tabs = document.querySelectorAll("#simplex-explained .tabs .tab-button");
website/src/css/style.css
+32 -18
View File
@@ -159,7 +159,8 @@ html {
#network::before {
display: block;
content: " ";
margin-top: -26px;
position: absolute;
top: -26px;
height: 66px;
visibility: hidden;
pointer-events: none;
@@ -357,7 +358,7 @@ header nav {
}
.swiper-scrollbar-drag {
width: 112px !important;
/* width: 112px !important; */
height: 8px !important;
background-color: #0197FF;
}
@@ -387,24 +388,24 @@ header nav {
transform: translateY(40px);
}
.card:hover > div:nth-child(1) {
.card:not(.no-hover):hover > div:nth-child(1) {
height: 200px;
padding: 12px 10px;
}
.card:hover > div:nth-child(2) {
.card:not(.no-hover):hover > div:nth-child(2) {
height: 270px;
padding: 8px 24px;
}
.card.card-active > div:nth-child(2) {
height: 470px;
height: 480px;
}
.card:hover > div:nth-child(2) > *:nth-child(2),
.card:hover > div:nth-child(2) > *:nth-child(3),
.card:not(.no-hover):hover > div:nth-child(2) > *:nth-child(2),
.card:not(.no-hover):hover > div:nth-child(2) > *:nth-child(3),
.card.card-active > div:nth-child(2) > *:nth-child(2),
.card.card-active > div:nth-child(2) > *:nth-child(3) {
opacity: 1;
max-height: 470px;
max-height: 480px;
transform: translateY(0px);
}
@@ -417,7 +418,7 @@ header nav {
.simplex-unique-card .card-content{
transition: all .5s ease-out;
}
@media (max-width: 768px) {
@media (max-width: 767px) {
.simplex-unique-card .card-content .content-body{
height: 0;
opacity: 0;
@@ -446,16 +447,29 @@ header nav {
/* comparison */
#comparison table td,
#comparison table th {
font-size: 15px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.4;
letter-spacing: 0.47px;
#comparison table thead th{
font-size: 16px;
line-height: 36px;
font-weight: 500;
text-align: center;
}
#comparison table tbody td{
font-size: 16px;
line-height: 24px;
font-weight: 500;
}
#comparison table tbody tr > td:first-child{
font-size: 16px;
line-height: 24px;
font-weight: 500;
text-align: left;
}
@media (min-width: 1024px) {
#comparison table tbody tr > td:first-child{
font-size: 18px;
line-height: 36px;
}
}
/* hero */
header{
website/src/index.html
+71 -67
View File
@@ -9,21 +9,21 @@ active_home: true
{% include "hero.html" %}
<section class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[85px] px-5">
<section class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[90px] px-5 lg:h-[888px]">
<div class="container">
<p class="text-grey-black dark:text-white text-[45px] text-center font-bold mb-[32px]">Why privacy <span class="gradient-text">matters</span></p>
<p class="text-center text-[20px] font-medium mb-[86px] text-black dark:text-white">Preserving the privacy of your metadata &mdash; <span class="text-active-blue">who you talk with</span> &mdash; protects you from:</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[20px] mb-[90px]">
<p class="text-grey-black dark:text-white text-[35px] leading-[45px] md:leading-[55px] lg:text-[45px] text-center font-bold mb-4 md:mb-8">Why privacy <span class="gradient-text">matters</span></p>
<p class="text-center text-[18px] md:text-[20px] font-medium mb-7 md:mb-16 lg:mb-20 text-black dark:text-white">Preserving the privacy of your metadata &mdash; <span class="text-active-blue">who you talk with</span> &mdash; protects you from:</p>
<div class="flex flex-col lg:flex-row gap-[20px] mb-[62px] lg:mb-[90px]">
{% for section in why_privacy_matters.sections %}
<div class="bg-white dark:bg-transparent px-[34px] flex flex-col rounded-[12px] dark:rounded-[6px] shadow-[0px_50px_61px_rgba(0,0,0,0.12)] dark:shadow-none flex-[1] border-gradient">
<div class="flex items-center justify-center h-[215px]">
<div class="bg-white dark:bg-transparent px-[34px] flex flex-col md:flex-row lg:flex-col items-center rounded-[12px] dark:rounded-[6px] shadow-[0px_50px_61px_rgba(0,0,0,0.12)] dark:shadow-none flex-[1] border-gradient">
<div class="md:w-[30%] lg:w-full flex items-center justify-center h-[215px]">
<img src="{{ section.imgLight }}" alt="">
</div>
<div class="h-[152px] flex flex-col items-center justify-between">
<p class="text-center font-medium leading-[28px] text-grey-black dark:text-white">{{ section.title }}</p>
<div class="md:w-[70%] lg:w-full flex flex-col items-center md:items-start lg:items-center gap-5 mb-[54px] md:mb-0 lg:mb-[54px]">
<p class="font-medium text-xl text-center text-grey-black dark:text-white">{{ section.title }}</p>
{% if section.overlayContent %}
<a href="javascript:void(0);" data-show-overlay="{{ section.overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2 mb-[53px]">{{ section.overlayContent.linkText }}</a>
<a href="javascript:void(0);" data-show-overlay="{{ section.overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2">{{ section.overlayContent.linkText }}</a>
{{ overlay(section) }}
{% endif %}
</div>
@@ -39,11 +39,11 @@ active_home: true
{% include "sections/simplex_unique.html" %}
{# Features #}
<section id="features" class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[60px] px-5">
<div class="container flex flex-col items-center gap-[50px]">
<p class="text-[45px] text-center font-bold gradient-text">Features</p>
<section id="features" class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[95px] px-5 lg:h-[888px]">
<div class="container">
<p class="text-[35px] leading-[45px] md:leading-[55px] lg:text-[45px] text-center font-bold gradient-text mb-20">Features</p>
<div class="mb-[50px] grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-10 gap-y-20">
<div class="mb-[50px] grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-10 gap-y-32">
{% for feature in features.sections %}
<div class="flex flex-col items-center">
<div class="bg-white flex items-center justify-center w-[175px] h-[110px] rounded-[20px] border-[#859096] border-solid border-[1px] shadow-[2px_2px_0px_#859096] dark:border-none dark:shadow-none mb-[20px] border-gradient">
@@ -58,15 +58,15 @@ active_home: true
</section>
{# what makes simplex private #}
<section id="privacy" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[85px] overflow-hidden px-5">
<section id="privacy" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[90px] overflow-hidden px-5 lg:h-[888px]">
<div class="container scale-100">
<p class="text-grey-black dark:text-white text-[45px] text-center font-bold mb-[60px]">What makes SimpleX <span class="gradient-text">private</span></p>
<p class="text-grey-black dark:text-white text-[35px] leading-[45px] md:leading-[55px] lg:text-[45px] text-center font-bold mb-20">What makes SimpleX <span class="gradient-text">private</span></p>
<div class="swiper private-swiper overflow-hidden px-4 py-2">
<div class="swiper-wrapper mb-14">
<div class="swiper-wrapper mb-16">
{% for section in what_makes_simplex_private.sections %}
<div class="card swiper-slide relative h-[470px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
<div class="card swiper-slide relative h-[480px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
<div class="flex items-center justify-center py-12 px-6 h-[322px]">
<img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="{{ section.imgLight }}" alt=""/>
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="{{ section.imgDark }}" alt=""/>
@@ -94,20 +94,20 @@ active_home: true
</section>
{# Network #}
<section id="network" class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[85px] px-5">
<section id="network" class="bg-secondary-bg-light dark:bg-secondary-bg-dark lg:h-[642px] py-[95px] px-5">
<div class="container">
<p class="text-grey-black dark:text-white text-[45px] text-center font-bold mb-[21px]">SimpleX <span class="gradient-text">Network</span></p>
<p class="text-black dark:text-white text-[16px] font-normal text-center mb-[95px]">Simplex Chat provides the best privacy by combining the advantages of P2P and federated networks.</p>
<p class="text-grey-black dark:text-white text-[35px] leading-[45px] md:leading-[55px] lg:text-[45px] text-center font-bold mb-5">SimpleX <span class="gradient-text">Network</span></p>
<p class="text-black dark:text-white text-[16px] font-normal text-center mb-16">Simplex Chat provides the best privacy by combining the advantages of P2P and federated networks.</p>
<div class="flex flex-col lg:flex-row justify-between gap-16">
<div class="flex flex-col items-center">
<div class="mb-[30px]">
<div class="flex flex-col lg:flex-row justify-between gap-12 md:gap-14 lg:gap-16">
<div class="flex flex-col md:flex-row lg:flex-col items-center md:gap-9 lg:gap-0">
<div class="mb-4 md:mb-0 lg:mb-8 md:flex-[1] flex items-center justify-center">
<img src="/img/new/network-1.svg" alt="" class="dark:hidden"/>
<img src="/img/new/network-1-dark.svg" alt="" class="hidden dark:block"/>
</div>
<div class="flex flex-col items-center justify-center">
<p class="text-active-blue text-[20px] font-bold text-center">Unlike P2P networks</p>
<p class="text-black dark:text-white text-[16px] font-normal text-center mb-[32px]">
<div class="md:flex-[2] flex flex-col items-center justify-center">
<p class="text-active-blue text-xl font-bold text-center md:text-left lg:text-center self-stretch">Unlike P2P networks</p>
<p class="text-black dark:text-white text-base font-normal text-center md:text-left lg:text-center">
All messages are sent via the servers, both providing better
metadata privacy and reliable asynchronous message delivery,
while avoiding many <a href="javascript:void(0)" data-show-overlay="{{ simplex_network_overlay.sections[0].overlayContent.overlayId }}" class="open-overlay-btn">problems of P2P networks</a>.
@@ -116,28 +116,32 @@ active_home: true
</div>
</div>
<div class="flex flex-col items-center ">
<div class="mb-[30px]">
<hr class="hidden md:block lg:hidden mx-5 dark:opacity-[0.2]">
<div class="flex flex-col md:flex-row lg:flex-col items-center md:gap-9 lg:gap-0">
<div class="mb-4 md:mb-0 lg:mb-8 md:flex-[1] flex items-center justify-center">
<img src="/img/new/network-2.svg" alt="" class="dark:hidden"/>
<img src="/img/new/network-2-dark.svg" alt="" class="hidden dark:block"/>
</div>
<div class="flex flex-col items-center justify-center">
<p class="text-active-blue text-[20px] font-bold text-center">Unlike federated networks</p>
<p class="text-black dark:text-white text-[16px] font-normal text-center mb-[32px]">
<div class="md:flex-[2] flex flex-col items-center justify-center">
<p class="text-active-blue text-xl font-bold text-center md:text-left lg:text-center self-stretch">Unlike federated networks</p>
<p class="text-black dark:text-white text-base font-normal text-center md:text-left lg:text-center">
SimpleX relay servers do NOT store user profiles, contacts and delivered messages,
do NOT connect to each other, and there is NO servers directory.
</p>
</div>
</div>
<div class="flex flex-col items-center ">
<div class="mb-[30px]">
<hr class="hidden md:block lg:hidden mx-5 dark:opacity-[0.2]">
<div class="flex flex-col md:flex-row lg:flex-col items-center md:gap-9 lg:gap-0">
<div class="mb-4 md:mb-0 lg:mb-8 md:flex-[1] flex items-center justify-center">
<img src="/img/new/network-3.svg" alt="" class="dark:hidden"/>
<img src="/img/new/network-3-dark.svg" alt="" class="hidden dark:block"/>
</div>
<div class="flex flex-col items-center justify-center">
<p class="text-active-blue text-[20px] font-bold text-center">SimpleX network</p>
<p class="text-black dark:text-white text-[16px] font-normal text-center">
<div class="md:flex-[2] flex flex-col items-center justify-center">
<p class="text-active-blue text-xl font-bold text-center md:text-left lg:text-center self-stretch">SimpleX network</p>
<p class="text-black dark:text-white text-base font-normal text-center md:text-left lg:text-center">
servers provide <span class="text-active-blue">unidirectional queues</span>
to connect the users, but they have no visibility of the network connection graph &mdash; only the users do.
</p>
@@ -155,69 +159,69 @@ active_home: true
{# Comparison #}
<section id="comparison" class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[85px] px-5">
<section id="comparison" class="bg-secondary-bg-light dark:bg-secondary-bg-dark lg:h-[950px] py-[90px] px-5">
<div class="text-grey-black dark:text-white container flex flex-col">
<p class="text-[35px] lg:text-[45px] text-center font-bold mb-10 lg:mb-20">Comparison with other protocols</p>
<p class="text-[35px] leading-[43px] md:leading-[55px] lg:leading-[36px] text-center font-bold mb-12 lg:mb-[90px]">Comparison with other protocols</p>
<div class="w-full overflow-auto">
<table class="w-full border-separate border-spacing-x-5 border-spacing-y-2">
<table class="w-full border-separate border-spacing-x-5 border-spacing-y-2 mb-14">
<thead>
<tr>
<th></th>
<th class="flex items-center justify-center">
<img class="h-6 dark:hidden" alt="simplex logo" src="/img/new/logo-light.png"/>
<img class="h-6 hidden dark:block" alt="simplex logo" src="/img/new/logo-dark.png"/>
<th class="flex items-center justify-center pb-4">
<img class="h-[34px] dark:hidden" alt="simplex logo" src="/img/new/logo-light.png"/>
<img class="h-[34px] hidden dark:block" alt="simplex logo" src="/img/new/logo-dark.png"/>
</th>
<th>Signal, big platforms</th>
<th>XMPP, Matrix</th>
<th>P2P protocols</th>
<th class="pb-4">Signal, big platforms</th>
<th class="pb-4">XMPP, Matrix</th>
<th class="pb-4">P2P protocols</th>
</tr>
</thead>
<tbody>
<tr>
<td class="min-w-[210px]">Requires global identity</td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - private</td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>1</sup></td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>2</sup></td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>3</sup></td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - private</td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>1</sup></td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>2</sup></td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>3</sup></td>
</tr>
<tr>
<td class="min-w-[210px]">Possibility of MITM</td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - secure</td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>4</sup></td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - secure</td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>4</sup></td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
</tr>
<tr>
<td class="min-w-[210px]">Dependence on DNS</td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - resilient</td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No</td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - resilient</td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No</td>
</tr>
<tr>
<td class="min-w-[210px]">Single or centralized network</td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - decentralized</td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - federated <sup>5</sup></td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>6</sup></td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - decentralized</td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - federated <sup>5</sup></td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>6</sup></td>
</tr>
<tr>
<td class="min-w-[210px]">Central component or other network-wide attack</td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - resilient</td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>2</sup></td>
<td class="text-center font-medium min-w-[152px] h-[40px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>7</sup></td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#48F6C2] text-grey-black rounded-[4px]">No - resilient</td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes</td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>2</sup></td>
<td class="text-center font-medium min-w-[152px] h-[52px] bg-[#fff] dark:bg-[#171F3A] text-[#DD0000] rounded-[4px]">Yes <sup>7</sup></td>
</tr>
</tbody>
</table>
</div>
<hr class="block my-12 mx-5 dark:opacity-[0.2]">
<hr class="block mb-8 mx-5 dark:opacity-[0.2]">
<div>
<div class="px-5">
<ol class="text-base leading-6 list-decimal list-inside">
<ol class="text-sm lg:text-base font-medium leading-6 list-decimal list-inside">
<li> Usually based on a phone number, in some cases on usernames</li>
<li> DNS-based addresses</li>
<li> Public key or some other globally unique ID</li>
website/src/js/script.js
+14 -10
View File
@@ -23,34 +23,38 @@ const isMobile = {
const privateSwiper = new Swiper('.private-swiper', {
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: 20,
// autoplay: {
// delay: 3000,
// },
direction: 'horizontal',
allowTouchMove: true,
scrollbar: {
el: ".swiper-scrollbar",
el: '.swiper-scrollbar',
draggable: true,
snapOnRelease: true,
dragSize: 100,
},
direction: 'horizontal',
navigation: {
nextEl: '.private-swiper-button-next',
prevEl: '.private-swiper-button-prev',
},
breakpoints: {
1280: {
1400: {
slidesPerView: 4,
slidesPerGroup: 4,
spaceBetween: 20,
allowTouchMove: false,
},
1024: {
1200: {
slidesPerView: 3,
slidesPerGroup: 3,
spaceBetween: 20,
allowTouchMove: true,
},
768: {
slidesPerView: 2,
slidesPerGroup: 2,
spaceBetween: 20,
allowTouchMove: true,
}
},
});