dandri/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2026-05-24 17:25:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

deploy: a96fb2f8d1

Browse Source
This commit is contained in:
epoberezkin
2023-01-27 12:07:54 +00:00
parent d9f6a54d7c
commit e421323ad8
6 changed files with 418 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contact/index.html
+9 -10
View File
@@ -388,33 +388,32 @@ window.addEventListener('scroll',changeHeaderBg);
<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>
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{
css/tailwind.css
+240 -121
View File
@@ -660,11 +660,6 @@ video {
margin-bottom: 1rem;
}
.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.mx-5 {
margin-left: 1.25rem;
margin-right: 1.25rem;
@@ -680,11 +675,6 @@ video {
margin-bottom: 2.5rem;
}
.my-16 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.my-5 {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
@@ -714,20 +704,20 @@ video {
margin-top: auto;
}
.mb-\[32px\] {
margin-bottom: 32px;
.mb-7 {
margin-bottom: 1.75rem;
}
.mb-\[86px\] {
margin-bottom: 86px;
.mb-\[62px\] {
margin-bottom: 62px;
}
.mb-\[90px\] {
margin-bottom: 90px;
.mb-\[54px\] {
margin-bottom: 54px;
}
.mb-\[53px\] {
margin-bottom: 53px;
.mb-20 {
margin-bottom: 5rem;
}
.mb-\[50px\] {
@@ -738,30 +728,26 @@ video {
margin-bottom: 20px;
}
.mb-\[60px\] {
margin-bottom: 60px;
.mb-16 {
margin-bottom: 4rem;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-14 {
margin-bottom: 3.5rem;
}
.mb-\[21px\] {
margin-bottom: 21px;
}
.mb-\[95px\] {
margin-bottom: 95px;
}
.mb-\[30px\] {
margin-bottom: 30px;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.mb-\[80px\] {
margin-bottom: 80px;
}
@@ -790,18 +776,10 @@ video {
margin-bottom: 1.5rem;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.mb-\[76px\] {
margin-bottom: 76px;
}
.mb-7 {
margin-bottom: 1.75rem;
}
.mb-\[46px\] {
margin-bottom: 46px;
}
@@ -846,6 +824,10 @@ video {
margin-bottom: 28px;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.mr-\[-4px\] {
margin-right: -4px;
}
@@ -858,10 +840,6 @@ video {
margin-right: auto;
}
.mb-16 {
margin-bottom: 4rem;
}
.mr-\[-36px\] {
margin-right: -36px;
}
@@ -874,8 +852,12 @@ video {
margin-left: 2.5rem;
}
.mb-20 {
margin-bottom: 5rem;
.mb-24 {
margin-bottom: 6rem;
}
.mb-\[74px\] {
margin-bottom: 74px;
}
.mb-\[12px\] {
@@ -886,10 +868,6 @@ video {
margin-bottom: 75px;
}
.mb-\[44px\] {
margin-bottom: 44px;
}
.block {
display: block;
}
@@ -934,16 +912,12 @@ video {
height: 215px;
}
.h-\[152px\] {
height: 152px;
}
.h-\[110px\] {
height: 110px;
}
.h-\[470px\] {
height: 470px;
.h-\[480px\] {
height: 480px;
}
.h-\[322px\] {
@@ -954,18 +928,22 @@ video {
height: 138px;
}
.h-6 {
height: 1.5rem;
.h-\[34px\] {
height: 34px;
}
.h-\[40px\] {
height: 40px;
.h-\[52px\] {
height: 52px;
}
.h-screen {
height: 100vh;
}
.h-\[40px\] {
height: 40px;
}
.h-\[131px\] {
height: 131px;
}
@@ -1257,16 +1235,16 @@ video {
gap: 20px;
}
.gap-\[50px\] {
gap: 50px;
.gap-5 {
gap: 1.25rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-16 {
gap: 4rem;
.gap-12 {
gap: 3rem;
}
.gap-4 {
@@ -1289,12 +1267,12 @@ video {
gap: 150px;
}
.gap-6 {
gap: 1.5rem;
.gap-\[50px\] {
gap: 50px;
}
.gap-5 {
gap: 1.25rem;
.gap-6 {
gap: 1.5rem;
}
.gap-x-10 {
@@ -1302,8 +1280,8 @@ video {
column-gap: 2.5rem;
}
.gap-y-20 {
row-gap: 5rem;
.gap-y-32 {
row-gap: 8rem;
}
.self-center {
@@ -1540,9 +1518,9 @@ video {
padding-right: 1rem;
}
.py-\[85px\] {
padding-top: 85px;
padding-bottom: 85px;
.py-\[90px\] {
padding-top: 90px;
padding-bottom: 90px;
}
.px-\[34px\] {
@@ -1550,9 +1528,9 @@ video {
padding-right: 34px;
}
.py-\[60px\] {
padding-top: 60px;
padding-bottom: 60px;
.py-\[95px\] {
padding-top: 95px;
padding-bottom: 95px;
}
.py-2 {
@@ -1615,16 +1593,6 @@ video {
padding-right: 5rem;
}
.py-\[80px\] {
padding-top: 80px;
padding-bottom: 80px;
}
.py-\[90px\] {
padding-top: 90px;
padding-bottom: 90px;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
@@ -1644,6 +1612,10 @@ video {
padding-top: 1rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pt-\[66px\] {
padding-top: 66px;
}
@@ -1699,20 +1671,25 @@ video {
line-height: 1.5rem;
}
.text-\[45px\] {
font-size: 45px;
.text-\[35px\] {
font-size: 35px;
}
.text-\[20px\] {
font-size: 20px;
.text-\[18px\] {
font-size: 18px;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-\[16px\] {
font-size: 16px;
}
.text-\[18px\] {
font-size: 18px;
.text-\[20px\] {
font-size: 20px;
}
.text-\[14px\] {
@@ -1723,19 +1700,10 @@ video {
font-size: 12px;
}
.text-\[35px\] {
font-size: 35px;
}
.text-\[28px\] {
font-size: 28px;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
@@ -1761,6 +1729,10 @@ video {
font-weight: 300;
}
.leading-\[45px\] {
line-height: 45px;
}
.leading-\[28px\] {
line-height: 28px;
}
@@ -1769,14 +1741,14 @@ video {
line-height: 26px;
}
.leading-6 {
line-height: 1.5rem;
}
.leading-\[43px\] {
line-height: 43px;
}
.leading-6 {
line-height: 1.5rem;
}
.leading-\[36px\] {
line-height: 36px;
}
@@ -1939,6 +1911,42 @@ video {
transition-duration: 150ms;
}
.placeholder\:text-base::-moz-placeholder {
font-size: 1rem;
line-height: 1.5rem;
}
.placeholder\:text-base::placeholder {
font-size: 1rem;
line-height: 1.5rem;
}
.placeholder\:font-normal::-moz-placeholder {
font-weight: 400;
}
.placeholder\:font-normal::placeholder {
font-weight: 400;
}
.placeholder\:tracking-\[0\.01em\]::-moz-placeholder {
letter-spacing: 0.01em;
}
.placeholder\:tracking-\[0\.01em\]::placeholder {
letter-spacing: 0.01em;
}
.placeholder\:text-grey-black::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(63 72 75 / var(--tw-text-opacity));
}
.placeholder\:text-grey-black::placeholder {
--tw-text-opacity: 1;
color: rgb(63 72 75 / var(--tw-text-opacity));
}
.before\:absolute::before {
content: var(--tw-content);
position: absolute;
@@ -2123,6 +2131,16 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark .placeholder\:dark\:text-white::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .placeholder\:dark\:text-white::placeholder {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .dark\:before\:bg-white::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
@@ -2160,6 +2178,18 @@ video {
position: static;
}
.md\:mb-8 {
margin-bottom: 2rem;
}
.md\:mb-16 {
margin-bottom: 4rem;
}
.md\:mb-0 {
margin-bottom: 0px;
}
.md\:mt-6 {
margin-top: 1.5rem;
}
@@ -2168,10 +2198,6 @@ video {
margin-bottom: 1.5rem;
}
.md\:mb-0 {
margin-bottom: 0px;
}
.md\:block {
display: block;
}
@@ -2206,6 +2232,14 @@ video {
width: 168px;
}
.md\:w-\[30\%\] {
width: 30%;
}
.md\:w-\[70\%\] {
width: 70%;
}
.md\:w-fit {
width: -moz-fit-content;
width: fit-content;
@@ -2219,18 +2253,18 @@ video {
max-width: 1276px;
}
.md\:flex-\[1\] {
flex: 1;
}
.md\:flex-\[2\] {
flex: 2;
}
.md\:flex-1 {
flex: 1 1 0%;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:flex-row {
flex-direction: row;
}
@@ -2247,6 +2281,14 @@ video {
align-items: center;
}
.md\:gap-14 {
gap: 3.5rem;
}
.md\:gap-9 {
gap: 2.25rem;
}
.md\:p-10 {
padding: 2.5rem;
}
@@ -2284,6 +2326,10 @@ video {
line-height: 1.75rem;
}
.md\:text-\[20px\] {
font-size: 20px;
}
.md\:text-\[55px\] {
font-size: 55px;
}
@@ -2296,6 +2342,10 @@ video {
font-size: 35px;
}
.md\:leading-\[55px\] {
line-height: 55px;
}
.md\:leading-\[63px\] {
line-height: 63px;
}
@@ -2326,6 +2376,18 @@ video {
margin-bottom: 5rem;
}
.lg\:mb-\[90px\] {
margin-bottom: 90px;
}
.lg\:mb-\[54px\] {
margin-bottom: 54px;
}
.lg\:mb-8 {
margin-bottom: 2rem;
}
.lg\:mt-0 {
margin-top: 0px;
}
@@ -2346,6 +2408,18 @@ video {
display: none;
}
.lg\:h-\[888px\] {
height: 888px;
}
.lg\:h-\[642px\] {
height: 642px;
}
.lg\:h-\[950px\] {
height: 950px;
}
.lg\:h-auto {
height: auto;
}
@@ -2355,6 +2429,18 @@ video {
height: fit-content;
}
.lg\:h-\[890px\] {
height: 890px;
}
.lg\:h-\[855px\] {
height: 855px;
}
.lg\:w-full {
width: 100%;
}
.lg\:w-auto {
width: auto;
}
@@ -2363,10 +2449,6 @@ video {
max-width: 448px;
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@@ -2375,6 +2457,10 @@ video {
flex-direction: row;
}
.lg\:flex-col {
flex-direction: column;
}
.lg\:items-start {
align-items: flex-start;
}
@@ -2383,6 +2469,14 @@ video {
align-items: center;
}
.lg\:gap-16 {
gap: 4rem;
}
.lg\:gap-0 {
gap: 0px;
}
.lg\:gap-\[350px\] {
gap: 350px;
}
@@ -2453,10 +2547,23 @@ video {
text-align: left;
}
.lg\:text-center {
text-align: center;
}
.lg\:text-\[45px\] {
font-size: 45px;
}
.lg\:text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.lg\:text-\[38px\] {
font-size: 38px;
}
.lg\:text-\[65px\] {
font-size: 65px;
}
@@ -2465,6 +2572,10 @@ video {
font-size: 35px;
}
.lg\:leading-\[36px\] {
line-height: 36px;
}
.lg\:leading-\[45px\] {
line-height: 45px;
}
@@ -2538,10 +2649,18 @@ video {
height: 100%;
}
.xl\:h-\[888px\] {
height: 888px;
}
.xl\:max-h-\[888px\] {
max-height: 888px;
}
.xl\:min-h-\[565px\] {
min-height: 565px;
}
.xl\:min-w-\[600px\] {
min-width: 600px;
}
index.html
+114 -112
View File
@@ -421,21 +421,21 @@ window.addEventListener('scroll',changeHeaderBg);
</script>
<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]">
<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="/img/new/privacy-section-1.svg" 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">Advertising and price discrimination</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">Advertising and price discrimination</p>
<a href="javascript:void(0);" data-show-overlay="why-privacy-matters-1" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2 mb-[53px]">Privacy saves you money</a>
<a href="javascript:void(0);" data-show-overlay="why-privacy-matters-1" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2">Privacy saves you money</a>
<div id="why-privacy-matters-1" class="overlay hidden fixed top-0 left-0 bottom-0 right-0 before:absolute before:w-full before:h-full bg-transparent before:bg-secondary-bg-light dark:before:bg-primary-bg-dark before:opacity-90 items-center justify-center p-3 md:p-10 z-[10000]">
@@ -482,14 +482,14 @@ window.addEventListener('scroll',changeHeaderBg);
</div>
</div>
<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="/img/new/privacy-section-2.svg" 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">Manipulation of elections</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">Manipulation of elections</p>
<a href="javascript:void(0);" data-show-overlay="why-privacy-matters-2" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2 mb-[53px]">Privacy gives you power</a>
<a href="javascript:void(0);" data-show-overlay="why-privacy-matters-2" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2">Privacy gives you power</a>
<div id="why-privacy-matters-2" class="overlay hidden fixed top-0 left-0 bottom-0 right-0 before:absolute before:w-full before:h-full bg-transparent before:bg-secondary-bg-light dark:before:bg-primary-bg-dark before:opacity-90 items-center justify-center p-3 md:p-10 z-[10000]">
@@ -532,14 +532,14 @@ window.addEventListener('scroll',changeHeaderBg);
</div>
</div>
<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="/img/new/privacy-section-3.svg" 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">Prosecution due to innocent association</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">Prosecution due to innocent association</p>
<a href="javascript:void(0);" data-show-overlay="why-privacy-matters-3" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2 mb-[53px]">Privacy protects your freedom</a>
<a href="javascript:void(0);" data-show-overlay="why-privacy-matters-3" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2">Privacy protects your freedom</a>
<div id="why-privacy-matters-3" class="overlay hidden fixed top-0 left-0 bottom-0 right-0 before:absolute before:w-full before:h-full bg-transparent before:bg-secondary-bg-light dark:before:bg-primary-bg-dark before:opacity-90 items-center justify-center p-3 md:p-10 z-[10000]">
@@ -594,15 +594,15 @@ window.addEventListener('scroll',changeHeaderBg);
</section>
<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">
<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="/img/new/unique-section-1.png" alt="">
@@ -656,7 +656,7 @@ window.addEventListener('scroll',changeHeaderBg);
</div>
</div>
<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="/img/new/unique-section-2.png" alt="">
@@ -706,7 +706,7 @@ window.addEventListener('scroll',changeHeaderBg);
</div>
</div>
<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="/img/new/unique-section-3.png" alt="">
@@ -758,7 +758,7 @@ window.addEventListener('scroll',changeHeaderBg);
</div>
</div>
<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="/img/new/unique-section-4.png" alt="">
@@ -1040,11 +1040,11 @@ window.addEventListener('scroll',changeHeaderBg);
</script>
<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">
<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">
@@ -1115,15 +1115,15 @@ window.addEventListener('scroll',changeHeaderBg);
</section>
<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">
<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="/img/new/private-10.svg" alt=""/>
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-10-dark.svg" alt=""/>
@@ -1141,7 +1141,7 @@ window.addEventListener('scroll',changeHeaderBg);
</div>
</div>
<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="/img/new/private-6.svg" alt=""/>
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-6-dark.svg" alt=""/>
@@ -1159,7 +1159,7 @@ window.addEventListener('scroll',changeHeaderBg);
</div>
</div>
<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="/img/new/private-1.svg" alt=""/>
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-1-dark.svg" alt=""/>
@@ -1177,7 +1177,7 @@ window.addEventListener('scroll',changeHeaderBg);
</div>
</div>
<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="/img/new/private-7.svg" alt=""/>
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-7-dark.svg" alt=""/>
@@ -1195,7 +1195,7 @@ window.addEventListener('scroll',changeHeaderBg);
</div>
</div>
<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="/img/new/private-2.svg" alt=""/>
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-2-dark.svg" alt=""/>
@@ -1211,7 +1211,7 @@ window.addEventListener('scroll',changeHeaderBg);
</div>
</div>
<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="/img/new/private-8.svg" alt=""/>
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-8-dark.svg" alt=""/>
@@ -1227,7 +1227,7 @@ window.addEventListener('scroll',changeHeaderBg);
</div>
</div>
<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="/img/new/private-3.svg" alt=""/>
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-3-dark.svg" alt=""/>
@@ -1247,7 +1247,7 @@ window.addEventListener('scroll',changeHeaderBg);
</div>
</div>
<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="/img/new/private-4.svg" alt=""/>
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-4-dark.svg" alt=""/>
@@ -1265,7 +1265,7 @@ window.addEventListener('scroll',changeHeaderBg);
</div>
</div>
<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="/img/new/private-9.svg" alt=""/>
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-9-dark.svg" alt=""/>
@@ -1283,7 +1283,7 @@ window.addEventListener('scroll',changeHeaderBg);
</div>
</div>
<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="/img/new/private-5.svg" alt=""/>
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-5-dark.svg" alt=""/>
@@ -1313,20 +1313,20 @@ window.addEventListener('scroll',changeHeaderBg);
</section>
<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-1" class="open-overlay-btn">problems of P2P networks</a>.
@@ -1416,28 +1416,32 @@ window.addEventListener('scroll',changeHeaderBg);
</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>
@@ -1476,12 +1480,12 @@ window.addEventListener('scroll',changeHeaderBg);
}
</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>
@@ -1494,8 +1498,8 @@ window.addEventListener('scroll',changeHeaderBg);
<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">
@@ -1507,8 +1511,8 @@ window.addEventListener('scroll',changeHeaderBg);
<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">
@@ -1520,8 +1524,8 @@ window.addEventListener('scroll',changeHeaderBg);
<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">
@@ -1537,7 +1541,6 @@ window.addEventListener('scroll',changeHeaderBg);
</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");
@@ -1570,69 +1573,69 @@ window.addEventListener("load", function () {
<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>
@@ -1648,33 +1651,32 @@ window.addEventListener("load", function () {
<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>
invitation/index.html
+9 -10
View File
@@ -388,33 +388,32 @@ window.addEventListener('scroll',changeHeaderBg);
<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>
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,
}
},
});