website internationalization (#1922)

* website Internationalization (#1904)

* added devcontainer config

* internationalization under dev

* internationalization of _data done

* overlays internationalization done

* improved routing

* updated gitignore

* remove .devcontainer

* internationalization in progess
deleted all the intermediate files
added translation of few sections

* remaining website strings are added to translation

* done internationalization
- fully converted to i18n plugin
- wrote bash script for creating a combined translations.json

* internationalization UI done

* a quick fix

* remove jq installation

* Added translation using Weblate (German)

* Translated using Weblate (French)

Currently translated at 100.0% (212 of 212 strings)

Translation: SimpleX Chat/SimpleX Chat website
Translate-URL: https://hosted.weblate.org/projects/simplex-chat/website/fr/

* Translated using Weblate (German)

Currently translated at 42.9% (91 of 212 strings)

Translation: SimpleX Chat/SimpleX Chat website
Translate-URL: https://hosted.weblate.org/projects/simplex-chat/website/de/

* fixes of web Internationalization (#1925)

* a quick fix

* blog route for all languages is shifted to root blog route

* wrote merge_translations.js

* remove language label from dropdown

* update language names

* refactor scripts

* remove catch from script

* Added translation using Weblate (Dutch)

* Added translation using Weblate (Norwegian Bokmål)

* Translated using Weblate (Dutch)

Currently translated at 33.0% (70 of 212 strings)

Translation: SimpleX Chat/SimpleX Chat website
Translate-URL: https://hosted.weblate.org/projects/simplex-chat/website/nl/

* website: internationalization fixes (#1931)

* added devcontainer config

* internationalization under dev

* internationalization of _data done

* overlays internationalization done

* improved routing

* updated gitignore

* remove .devcontainer

* internationalization in progess
deleted all the intermediate files
added translation of few sections

* remaining website strings are added to translation

* done internationalization
- fully converted to i18n plugin
- wrote bash script for creating a combined translations.json

* internationalization UI done

* a quick fix

* blog route for all languages is shifted to root blog route

* wrote merge_translations.js

* remove flag from blog

* updated nav stylings & logo links

* add enabled key

* updated nav dropdown styling

* gave specific lang to i18n plugin.
overlay translations are now working.

* enable nl & nb_NO

* updated nav stylings

* updated contact.js

---------

Co-authored-by: M Sarmad Qadeer <msarmadqadeer@gmail.com>

* Translated using Weblate (German)

Currently translated at 47.6% (101 of 212 strings)

Translation: SimpleX Chat/SimpleX Chat website
Translate-URL: https://hosted.weblate.org/projects/simplex-chat/website/de/

* fixed internationalization issues

* updated strings, refactor contact.js

* updated nav stylings for mobile

* a bit smaller padding on mobile

* Added translation using Weblate (Czech)

* Translated using Weblate (Czech)

Currently translated at 100.0% (212 of 212 strings)

Translation: SimpleX Chat/SimpleX Chat website
Translate-URL: https://hosted.weblate.org/projects/simplex-chat/website/cs/

* Translated using Weblate (French)

Currently translated at 100.0% (212 of 212 strings)

Translation: SimpleX Chat/SimpleX Chat website
Translate-URL: https://hosted.weblate.org/projects/simplex-chat/website/fr/

* Translated using Weblate (German)

Currently translated at 100.0% (212 of 212 strings)

Translation: SimpleX Chat/SimpleX Chat website
Translate-URL: https://hosted.weblate.org/projects/simplex-chat/website/de/

* enabled languages

* check/correct (#1949)

---------

Co-authored-by: M Sarmad Qadeer <MSarmadQadeer@gmail.com>
Co-authored-by: Ophiushi <Ophiushi@users.noreply.hosted.weblate.org>
Co-authored-by: mlanp <github@lang.xyz>
Co-authored-by: John m <jvanmanen@gmail.com>
Co-authored-by: zenobit <zen@osowoso.xyz>
Co-authored-by: Ophiushi <41908476+ishi-sama@users.noreply.github.com>
This commit is contained in:
Evgeny Poberezkin
2023-02-24 21:03:57 +00:00
committed by GitHub
co-authored by M Sarmad Qadeer Ophiushi mlanp John m zenobit Ophiushi
parent a2e5733be6
commit cee8f3a4b6
56 changed files with 2061 additions and 398 deletions
+2 -2
View File
@@ -1,8 +1,8 @@
{% macro overlay(section) %}
{% macro overlay(section, lang='en') %}
{# Overlay is either hidder or flex #}
<div id="{{ section.overlayContent.overlayId }}" 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]">
<div class="overlay-card w-full md:w-fit md:max-w-[1276px] bg-white dark:bg-card-bg-dark opacity-100 h-full md:h-fit md:max-h-[660px] z-[10001] rounded-md shadow-[0px_3px_12px_rgba(0,0,0,0.2)] p-6 py-10 sm:p-14 overflow-auto scale-100">
<h1 class="text-3xl font-bold text-active-blue mb-6">{{ section.overlayContent.title | safe }}</h1>
<h1 class="text-3xl font-bold text-active-blue mb-6 {% if not section.overlayContent.showImage %}lg:max-w-[448px]{% endif %}">{{ section.overlayContent.title | i18n({}, lang ) | safe }}</h1>
<div class="flex flex-col-reverse lg:flex-row gap-10 justify-between">
{% if section.overlayContent.contentBody %}
<div class="lg:max-w-[448px]">
+24 -25
View File
@@ -1,4 +1,5 @@
{% block js_scripts %}
<script src="/js/flag-anchor.js"></script>
<script src="/js/qrcode.js"></script>
<script async defer src="/js/contact.js"></script>
{% endblock %}
@@ -6,14 +7,13 @@
<section class="hidden xl:block h-screen pt-[66px] bg-white dark:bg-gradient-radial-mobile dark:lg:bg-gradient-radial">
<div class="container m-auto h-full flex items-center justify-between px-5">
<div class="flex flex-col items-start justify-center w-full h-full">
<p class="text-[38px] leading-[43px] font-bold max-w-[500px] mb-[30px] primary-header-contact">{{ header }}</p>
<p class="text-[20px] leading-[28px] text-[#606C71] dark:text-white font-bold max-w-[475px] mb-[80px] secondary-header-contact">Scan the QR code with the SimpleX Chat app on your phone or tablet.</p>
<p class="text-[38px] leading-[43px] font-bold max-w-[500px] mb-[30px] primary-header-contact">{{ header | i18n({}, lang ) | safe }}</p>
<p class="text-[20px] leading-[28px] text-[#606C71] dark:text-white font-bold max-w-[475px] mb-[80px] secondary-header-contact">{{ "contact-hero-subheader" | i18n({}, lang ) | safe }}</p>
<p class="text-grey-black dark:text-white text-base mb-[16px]">
The public keys and message queue address in this link are NOT sent over the network when you view this page &mdash;
they are contained in the hash fragment of the link URL.
{{ "contact-hero-p-1" | i18n({}, lang ) | safe }}
</p>
<p class="text-grey-black dark:text-white text-base">Not downloaded the SimpleX Chat yet?</p>
<p class="text-grey-black dark:text-white text-base mb-[24px]">Use the links below to download the app.</p>
<p class="text-grey-black dark:text-white text-base">{{ "contact-hero-p-2" | i18n({}, lang ) | safe }}</p>
<p class="text-grey-black dark:text-white text-base mb-[24px]">{{ "contact-hero-p-3" | i18n({}, lang ) | safe }}</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>
@@ -31,7 +31,7 @@
</div>
<div class="z-10 flex flex-col items-center pt-[40px] ml-[-15px]">
<p class="text-base font-medium">Scan QR code from mobile app</p>
<p class="text-base font-medium text-center max-w-[234px]">{{ "scan-qr-code-from-mobile-app" | i18n({}, lang ) | safe }}</p>
<canvas class="conn_req_uri_qrcode"></canvas>
</div>
</div>
@@ -43,11 +43,11 @@
<section class="block xl:hidden pt-[106px] pb-[90px] bg-white dark:bg-gradient-radial-mobile dark:lg:bg-gradient-radial">
<div class="container m-auto h-full px-5">
<div class="flex flex-col items-center">
<p class="text-[28px] font-bold text-center max-w-[602px] mb-[40px] primary-header-contact">{{ header }}</p>
<p class="text-[20px] leading-[28px] text-grey-black dark:text-white font-medium mb-[30px]">To make a connection:</p>
<p class="text-[28px] font-bold text-center max-w-[602px] mb-[40px] primary-header-contact">{{ header | i18n({}, lang ) | safe }}</p>
<p class="text-[20px] leading-[28px] text-grey-black dark:text-white font-medium mb-[30px]">{{ "to-make-a-connection" | i18n({}, lang ) | safe }}</p>
<div class="flex flex-col justify-center items-center p-4 w-full max-w-[468px] min-h-[131px] rounded-[30px] border-[1px] border-[#A8B0B4] dark:border-white border-opacity-60 mb-6 relative">
<p class="text-xl font-medium text-grey-black dark:text-white mb-4">Install SimpleX app</p>
<p class="text-xl font-medium text-grey-black dark:text-white mb-4">{{ "install-simplex-app" | i18n({}, lang ) | safe }}</p>
<div class="flex flex-wrap items-center justify-center gap-2">
<a class="apple-store-btn hidden" 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 class="google-play-btn hidden" 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>
@@ -60,8 +60,8 @@
</div>
<div class="flex flex-col justify-center items-center w-full max-w-[468px] h-[131px] rounded-[30px] border-[1px] border-[#A8B0B4] dark:border-white border-opacity-60 mb-6 relative">
<p class="text-xl font-medium text-grey-black dark:text-white mb-4">Connect in app</p>
<a id="mobile_conn_req_uri" class="bg-[#0053D0] text-white py-3 px-8 rounded-[34px] h-[44px] text-[16px] leading-[19px] tracking-[0.02em]">Open Simplex app</a>
<p class="text-xl font-medium text-grey-black dark:text-white mb-4">{{ "connect-in-app" | i18n({}, lang ) | safe }}</p>
<a id="mobile_conn_req_uri" class="bg-[#0053D0] text-white py-3 px-8 rounded-[34px] h-[44px] text-[16px] leading-[19px] tracking-[0.02em]">{{ "open-simplex-app" | i18n({}, lang ) | safe }}</a>
<div class="absolute bg-[#0197FF] h-[44px] w-[44px] rounded-full flex items-center justify-center top-0 left-0 translate-x-[-30%] translate-y-[-30%]">
<p class="text-base text-white font-bold leading-[36px]">2</p>
@@ -69,7 +69,7 @@
</div>
<div class="flex flex-col justify-center items-center w-full max-w-[468px] h-[131px] rounded-[30px] border-[1px] border-[#A8B0B4] dark:border-white border-opacity-60 relative">
<p class="text-xl font-medium text-grey-black dark:text-white max-w-[230px] text-center">Tap the <span class="text-active-blue">connect</span> button in the app</p>
<p class="text-xl font-medium text-grey-black dark:text-white max-w-[230px] text-center">{{ "tap-the-connect-button-in-the-app" | i18n({}, lang ) | safe }}</p>
<div class="absolute bg-[#0197FF] h-[44px] w-[44px] rounded-full flex items-center justify-center top-0 left-0 translate-x-[-30%] translate-y-[-30%]">
<p class="text-base text-white font-bold leading-[36px]">3</p>
@@ -88,7 +88,7 @@
<div class="hidden md:block xl:hidden for-tablet">
<div class="contact-tab">
<div class="flex items-center justify-between my-[40px] contact-tab-btn cursor-pointer">
<p class="text-xl font-bold">Scan the QR code with the SimpleX Chat app</p>
<p class="text-xl font-bold">{{ "scan-the-qr-code-with-the-simplex-chat-app" | i18n({}, lang ) | safe }}</p>
<svg class="fill-grey-black dark:fill-white" width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.40813 4.79332C8.69689 5.06889 9.16507 5.06889 9.45384 4.79332C9.7426 4.51775 9.7426 4.07097 9.45384 3.7954L5.69327 0.206676C5.65717 0.17223 5.61827 0.142089 5.57727 0.116255C5.29026 -0.064587 4.90023 -0.0344467 4.64756 0.206676L0.886983 3.7954C0.598219 4.07097 0.598219 4.51775 0.886983 4.79332C1.17575 5.06889 1.64393 5.06889 1.93269 4.79332L5.17041 1.70356L8.40813 4.79332Z"/>
</svg>
@@ -97,8 +97,7 @@
<div class="contact-tab-content flex flex-col gap-10">
<p class="text-base mb-5">
The public keys and message queue address in this link are NOT sent over the network when you view this page &mdash;<br>
they are contained in the hash fragment of the link URL.
{{ "scan-the-qr-code-with-the-simplex-chat-app-description" | i18n({}, lang ) | safe }}
</p>
<canvas class="self-center conn_req_uri_qrcode"></canvas>
</div>
@@ -109,7 +108,7 @@
<div class="hidden xl:block">
<div class="contact-tab">
<div class="flex items-center justify-between my-[40px] contact-tab-btn cursor-pointer">
<p class="text-xl font-bold">Installing SimpleX chat to terminal</p>
<p class="text-xl font-bold">{{ "installing-simplex-chat-to-terminal" | i18n({}, lang ) | safe }}</p>
<svg class="fill-grey-black dark:fill-white" width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.40813 4.79332C8.69689 5.06889 9.16507 5.06889 9.45384 4.79332C9.7426 4.51775 9.7426 4.07097 9.45384 3.7954L5.69327 0.206676C5.65717 0.17223 5.61827 0.142089 5.57727 0.116255C5.29026 -0.064587 4.90023 -0.0344467 4.64756 0.206676L0.886983 3.7954C0.598219 4.07097 0.598219 4.51775 0.886983 4.79332C1.17575 5.06889 1.64393 5.06889 1.93269 4.79332L5.17041 1.70356L8.40813 4.79332Z"/>
</svg>
@@ -117,22 +116,22 @@
<div class="contact-tab-content">
<p class="text-base mb-4">Use this command:</p>
<p class="text-base mb-4">{{ "use-this-command" | i18n({}, lang ) | safe }}</p>
<p class="bg-white flex items-center justify-between rounded p-3 shadow-[inset_0px_2px_2px_rgba(0,0,0,0.15)] mb-8">
<span class="text-grey-black font-light text-[14px] leading-6">curl -o- https://raw.githubusercontent.com/simplex-chat/simplex-chat/master/install.sh | bash</span>
<!-- <img class="content_copy" src="/img/new/content-copy.svg" /> -->
</p>
<p class="flex text-base font-medium mb-[76px]">See SimpleX Chat &nbsp;
<p class="flex text-base font-medium mb-[76px]">{{ "see-simplex-chat" | i18n({}, lang ) | safe }} &nbsp;
<a href="" class="flex gap-1 no-underline">
<span class="text-primary-light dark:text-primary-dark underline underline-offset-4 text-base font-medium">GitHub repository</span>
<span class="text-primary-light dark:text-primary-dark underline underline-offset-4 text-base font-medium">{{ "github-repository" | i18n({}, lang ) | safe }}</span>
<svg class="fill-primary-light dark:fill-primary-dark" width="24" height="24" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.2907 0.926758C9.24635 0.926758 0.290527 10.1075 0.290527 21.4331C0.290527 30.4933 6.02118 38.18 13.9679 40.8915C14.9674 41.0813 15.3344 40.4467 15.3344 39.905C15.3344 39.4161 15.3158 37.8007 15.3072 36.0872C9.74314 37.3277 8.56906 33.6677 8.56906 33.6677C7.65927 31.2975 6.3484 30.6672 6.3484 30.6672C4.53379 29.3945 6.48519 29.4206 6.48519 29.4206C8.49355 29.5653 9.55105 31.5338 9.55105 31.5338C11.3349 34.6688 14.2298 33.7624 15.3711 33.2385C15.5506 31.9131 16.069 31.0085 16.6409 30.4964C12.1986 29.9779 7.52878 28.2195 7.52878 20.3621C7.52878 18.1232 8.31007 16.294 9.58947 14.8579C9.38181 14.3414 8.69723 12.2557 9.78322 9.43111C9.78322 9.43111 11.4627 8.87998 15.2847 11.5331C16.8801 11.0787 18.591 10.8509 20.2907 10.8431C21.9904 10.8509 23.7027 11.0787 25.301 11.5331C29.1183 8.87998 30.7955 9.43111 30.7955 9.43111C31.8842 12.2557 31.1992 14.3414 30.9916 14.8579C32.274 16.294 33.05 18.1232 33.05 20.3621C33.05 28.2382 28.3712 29.9724 23.9176
30.4801C24.635 31.1165 25.2742 32.3644 25.2742 34.2776C25.2742 37.0214 25.251 39.2296 25.251 39.905C25.251 40.4507 25.611 41.0902 26.6248 40.8888C34.5672 38.1742 40.2905 30.4903 40.2905 21.4331C40.2905 10.1075 31.336 0.926758 20.2907 0.926758Z" />
</svg>
</a>
&nbsp;
the instructions how to download or compile it from the source code.</p>
{{ "the-instructions--source-code" | i18n({}, lang ) | safe }}</p>
</div>
</div>
@@ -140,16 +139,16 @@
<div class="contact-tab">
<div class="flex items-center justify-between my-[40px] contact-tab-btn cursor-pointer">
<p class="text-xl font-bold">If you already installed SimpleX Chat for the terminal</p>
<p class="text-xl font-bold">{{ "if-you-already-installed-simplex-chat-for-the-terminal" | i18n({}, lang ) | safe }}</p>
<svg class="fill-grey-black dark:fill-white" width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.40813 4.79332C8.69689 5.06889 9.16507 5.06889 9.45384 4.79332C9.7426 4.51775 9.7426 4.07097 9.45384 3.7954L5.69327 0.206676C5.65717 0.17223 5.61827 0.142089 5.57727 0.116255C5.29026 -0.064587 4.90023 -0.0344467 4.64756 0.206676L0.886983 3.7954C0.598219 4.07097 0.598219 4.51775 0.886983 4.79332C1.17575 5.06889 1.64393 5.06889 1.93269 4.79332L5.17041 1.70356L8.40813 4.79332Z"/>
</svg>
</div>
<div class="contact-tab-content">
<p class="text-base font-medium mb-[46px]">If you already installed&nbsp;
<a href="" class="text-base font-medium">SimpleX Chat for the terminal</a>&nbsp;
v1.0.0+, copy the command below and use it in the chat:
<p class="text-base font-medium mb-[46px]">{{ "if-you-already-installed" | i18n({}, lang ) | safe }}&nbsp;
<a href="" class="text-base font-medium">{{ "simplex-chat-for-the-terminal" | i18n({}, lang ) | safe }}</a>&nbsp;
v1.0.0+, {{ "copy-the-command-below-text" | i18n({}, lang ) | safe }}
</p>
<p class="bg-white flex items-center justify-between rounded p-3 shadow-[inset_0px_2px_2px_rgba(0,0,0,0.15)] mb-[36px]">
<span id="conn_req_uri_text" class="text-grey-black font-light text-[14px] leading-6">/c https://simplex.chat/contact#/?v=1&smp=smp://u2dS9sG8nMNURyZwqASV4yROM28Er0luVTx5X1CsMrU=@smp4.simplex.im/KBCmxJ3-lEjpWLPPkI6OWPk-YJneU5uY%23MCowBQYDK2VuAyEAtixHJWDXvYWcoe-77vIfjvI6XWEuzUsapMS9nVHP_Go=</span>
+7 -7
View File
@@ -2,8 +2,8 @@
<div class="container">
<div class="flex flex-col lg:flex-row justify-between">
<div class="flex flex-col items-center lg:items-start">
<a href="/" class="h-full mb-14 dark:hidden"><img class="w-auto h-[32px]" src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/" class="h-full mb-14 hidden dark:inline-block"><img class="w-auto h-[32px]" src="/img/new/logo-dark.png" alt="logo" /></a>
<a href="{% getlangRoute page.url %}/" class="h-full mb-14 dark:hidden"><img class="w-auto h-[32px]" src="/img/new/logo-light.png" alt="logo" /></a>
<a href="{% getlangRoute page.url %}/" class="h-full mb-14 hidden dark:inline-block"><img class="w-auto h-[32px]" src="/img/new/logo-dark.png" alt="logo" /></a>
<div class="flex flex-col items-center lg:items-start lg:flex-row gap-[150px] lg:gap-[350px]">
<div class="flex flex-col items-center lg:items-start">
@@ -14,21 +14,21 @@
<a href="https://github.com/simplex-chat/simplex-chat/blob/stable/docs/protocol/simplex-chat.md"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
SimpleX Chat protocol</a>
{{ "simplex-chat-protocol" | i18n({}, lang ) | safe }}</a>
<a href="https://github.com/simplex-chat/simplex-chat/blob/stable/PRIVACY.md"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
Terms & Privacy Policy</a>
{{ "terms-and-privacy-policy" | i18n({}, lang ) | safe }}</a>
<a href="https://github.com/simplex-chat/simplex-chat#help-us-with-donations"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
Donate</a>
{{ "donate" | i18n({}, lang ) | safe }}</a>
</div>
<div class="flex flex-col items-center lg:items-start">
<a href="https://github.com/simplex-chat/simplex-chat/blob/stable/docs/CLI.md"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
Terminal CLI</a>
{{ "terminal-cli" | i18n({}, lang ) | safe }}</a>
<a href="https://github.com/simplex-chat/simplex-chat/tree/stable/packages/simplex-chat-client/typescript"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
@@ -66,6 +66,6 @@
</div>
</article>
</div>
<a href="#" class="text-grey-black dark:text-white text-[16px] text-center lg:text-left font-medium leading-[28px] tracking-[0.01em] block mt-[60px]">© 2020-2022 SimpleX | Open-Source Project</a>
<a href="#" class="text-grey-black dark:text-white text-[16px] text-center lg:text-left font-medium leading-[28px] tracking-[0.01em] block mt-[60px]">{{ "copyright-label" | i18n({}, lang ) | safe }}</a>
</div>
</section>
+14 -17
View File
@@ -7,20 +7,18 @@
<img class="static-phone-mobile md:hidden" src="/img/new/mobile-hero.png" alt="" />
<article class="w-full xl:max-w-[600px] landing-page-header-article">
<p class="primary-header text-center xl:text-left font-bold text-[38px] md:text-[55px] leading-[46px] md:leading-[63px] mb-2 xl:mb-8">Privacy redefined</p>
<p class="secondary-header text-center xl:text-left font-bold text-[28px] md:text-[38px] leading-[36px] md:leading-[43px] mb-2 xl:mb-8 tracking-[0.01em]">The first messenger<br>without user IDs</p>
<p class="primary-header text-center xl:text-left font-bold text-[38px] md:text-[55px] leading-[46px] md:leading-[63px] mb-2 xl:mb-8">{{ "hero-header" | i18n({}, lang ) | safe }}</p>
<p class="secondary-header text-center xl:text-left font-bold text-[28px] md:text-[38px] leading-[36px] md:leading-[43px] mb-2 xl:mb-8 tracking-[0.01em]">{{ "hero-subheader" | i18n({}, lang ) | safe }}</p>
<p class="landing-page-header-article-paragraph text-black dark:text-white text-center xl:text-justify text-[16px] leading-[24px] mb-[20px] header-description">
Other apps have user IDs: Signal, Matrix, Session, Briar, Jami, Cwtch, etc.<br>
SimpleX does not, <strong>not even random numbers</strong>.<br>
This radically improves your privacy.
{{ "hero-p-1" | i18n({}, lang ) | safe }}
</p>
<a href="javascript:void(0)" data-show-overlay="{{ hero_overlays.sections[1].overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-center xl:text-left text-[14px] xl:text-[16px] leading-[34px] underline-offset-2">Why user IDs are bad for privacy?</a>
{{ overlay(hero_overlays.sections[1]) }}
<a href="javascript:void(0)" data-show-overlay="{{ hero_overlays.sections[0].overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-center xl:text-left text-[14px] xl:text-[16px] leading-[34px] underline-offset-2">How does SimpleX work?</a>
{{ overlay(hero_overlays.sections[0]) }}
<a href="javascript:void(0)" data-show-overlay="{{ hero_overlays.sections[1].overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-center xl:text-left text-[14px] xl:text-[16px] leading-[34px] underline-offset-2">{{ "hero-overlay-1-textlink" | i18n({}, lang ) | safe }}</a>
{{ overlay(hero_overlays.sections[1], lang) }}
<a href="javascript:void(0)" data-show-overlay="{{ hero_overlays.sections[0].overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-center xl:text-left text-[14px] xl:text-[16px] leading-[34px] underline-offset-2">{{ "hero-overlay-2-textlink" | i18n({}, lang ) | safe }}</a>
{{ overlay(hero_overlays.sections[0], lang) }}
</article>
<article class="w-full xl:max-w-[600px]">
<p class="text-black dark:text-white hidden md:block text-center xl:text-left text-[16px] leading-[26px] mb-[11px] md:mt-6">Get SimpleX</p>
<p class="text-black dark:text-white hidden md:block text-center xl:text-left text-[16px] leading-[26px] mb-[11px] md:mt-6">{{ "get-simplex" | i18n({}, lang ) | safe }}</p>
<div class="socials flex items-center justify-center xl:justify-start gap-4 flex-wrap mt-[30px]">
<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>
@@ -65,19 +63,18 @@
<article class="w-full xl:max-w-[600px] landing-page-header-article px-5">
<p class="text-active-blue text-center xl:text-left font-bold text-[28px] md:text-[35px] leading-[36px] md:leading-[43px] mb-[28px]">
Make a private connection
{{ "hero-2-header" | i18n({}, lang ) | safe }}
</p>
<p class="text-center text-black dark:text-white xl:text-justify leading-[24px] text-[16px] mb-10 xl:mb-[25px] header-description">
The video shows how you connect to your friend via their 1-time QR-code, in person or via a video link.
You can also connect by sharing an invitation link.
{{ "hero-2-header-desc" | i18n({}, lang ) | safe }}
</p>
</article>
<div class="w-full container px-5 hidden md:flex items-center justify-center gap-[50px] py-[24px] xl:absolute bottom-0 z-10">
<a href="#why-simplex" class="menu-link">Why SimpleX</a>
<a href="#features" class="menu-link">Features</a>
<a href="#privacy" class="menu-link">SimpleX privacy</a>
<a href="#network" class="menu-link">SimpleX network</a>
<a href="#why-simplex" class="menu-link">{{ "why-simplex" | i18n({}, lang ) | safe }}</a>
<a href="#features" class="menu-link">{{ "features" | i18n({}, lang ) | safe }}</a>
<a href="#privacy" class="menu-link">{{ "simplex-privacy" | i18n({}, lang ) | safe }}</a>
<a href="#network" class="menu-link">{{ "simplex-network" | i18n({}, lang ) | safe }}</a>
</div>
</div>
</section>
+2 -1
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="{% getlang page.url %}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -25,6 +25,7 @@
<link href="/css/tailwind.css" rel="stylesheet"/>
<link rel="stylesheet" href="/css/style.css">
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="/js/flag-anchor.js"></script>
{% block js_scripts %}{% endblock %}
</head>
<body class="bg-white dark:bg-[#0C0B13]">
+50 -29
View File
@@ -1,17 +1,17 @@
<header class="">
<div class="flex items-center justify-end m-auto px-4 lg:px-7 h-[66px]">
<a href="/" class="h-full hidden dark:hidden lg:flex items-center mr-auto"><img class="w-auto h-[50px]" src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/" class="h-full hidden dark:lg:flex items-center mr-auto"><img class="w-auto h-[50px]" src="/img/new/logo-dark.png" alt="logo" /></a>
<a href="/" class="dark:hidden lg:hidden mr-auto"><img class="h-[32px]" src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/" class="hidden dark:inline-block dark:lg:hidden lg:hidden mr-auto"><img class="h-[32px]" src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<a href="{% getlangRoute page.url %}/" class="h-full hidden dark:hidden lg:flex items-center mr-auto"><img class="w-auto max-h-[50px] pr-10" src="/img/new/logo-light.png" alt="logo" /></a>
<a href="{% getlangRoute page.url %}/" class="h-full hidden dark:lg:flex items-center mr-auto"><img class="w-auto max-h-[50px] pr-10" src="/img/new/logo-dark.png" alt="logo" /></a>
<a href="{% getlangRoute page.url %}/" class="dark:hidden lg:hidden mr-auto"><img class="h-[32px]" src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="{% getlangRoute page.url %}/" class="hidden dark:inline-block dark:lg:hidden lg:hidden mr-auto"><img class="h-[32px]" src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<nav class="bg-[#F0F1F2] dark:bg-gradient-radial-mobile dark:lg:bg-none lg:bg-transparent fixed top-[66px] left-0 right-0 bottom-0 lg:top-0 lg:relative" id="menu">
<div class="flex flex-col lg:flex-row justify-between lg:items-center gap-10 px-4 lg:px-7 h-full">
<ul class="flex flex-col lg:flex-row lg:items-center gap-3 py-4 lg:py-0 lg:gap-10">
<div class="flex flex-col lg:flex-row justify-between lg:items-center gap-5 xl:gap-10 px-4 lg:px-0 h-full">
<ul class="flex flex-col lg:flex-row lg:items-center gap-3 py-4 lg:py-0 lg:gap-5 xl:gap-8">
<li class="nav-link relative {% if active_home %}active{% endif %}">
<a href="/" class="flex items-center justify-between gap-2 lg:py-5 ">
<span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text text-black dark:text-white before:bg-black dark:before:bg-white">Home</span>
<a href="{% getlangRoute page.url %}/" class="flex items-center justify-between gap-2 lg:py-5 ">
<span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text text-black dark:text-white before:bg-black dark:before:bg-white">{{ "home" | i18n({}, lang ) | safe }}</span>
</a>
</li>
@@ -19,7 +19,7 @@
<li class="nav-link relative">
<a href="javascript:void(0);" class="flex items-center justify-between gap-2 lg:py-5">
<span class="text-[16px] leading-[26px] tracking-[0.01em] text-black dark:text-white before:bg-black dark:before:bg-white">Developers</span>
<span class="text-[16px] leading-[26px] tracking-[0.01em] text-black dark:text-white before:bg-black dark:before:bg-white">{{ "developers" | i18n({}, lang ) | safe }}</span>
<span href="" id="btn-mobile" class="flex items-center justify-center h-[36px] w-[36px] lg:h-auto lg:w-auto mt-1">
<svg class="fill-black dark:fill-white" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
@@ -27,18 +27,18 @@
</span>
</a>
<ul class="flex flex-col items-start gap-2 lg:h-fit lg:absolute lg:bg-white dark:lg:bg-black top-full lg:mt-[10px] lg:py-4 min-w-[180px] rounded-md lg:shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu">
<ul class="flex flex-col items-start gap-2 lg:h-fit lg:absolute lg:bg-white dark:lg:bg-black top-full lg:mt-[10px] lg:py-4 min-w-[200px] rounded-md lg:shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu">
<li><a href="https://github.com/simplex-chat/simplex-chat/blob/stable/apps/simplex-bot-advanced/Main.hs"
target="_blank" class="py-[10px] lg:px-[20px]"
>Chat bot example</a></li>
target="_blank" class="lg:px-[20px] inline-block"
>{{ "chat-bot-example" | i18n({}, lang ) | safe }}</a></li>
<li><a href="https://github.com/simplex-chat/simplex-chat/tree/stable/packages/simplex-chat-client/typescript"
target="_blank" class="py-[10px] lg:px-[20px]"
target="_blank" class="lg:px-[20px] inline-block"
>TypeScript SDK</a></li>
<li><a href="https://github.com/simplex-chat/simplex-chat/blob/stable/docs/CLI.md"
target="_blank" class="py-[10px] lg:px-[20px]"
>Terminal CLI</a></li>
target="_blank" class="lg:px-[20px] inline-block"
>{{ "terminal-cli" | i18n({}, lang ) | safe }}</a></li>
<li><a href="https://github.com/simplex-chat/simplexmq"
target="_blank" class="py-[10px] lg:px-[20px]"
target="_blank" class="lg:px-[20px] inline-block"
>SimpleXMQ</a></li>
</ul>
</li>
@@ -47,7 +47,7 @@
<li class="nav-link relative">
<a href="javascript:void(0);" class="flex items-center justify-between gap-2 lg:py-5">
<span class="text-[16px] leading-[26px] tracking-[0.01em] text-black dark:text-white before:bg-black dark:before:bg-white">Reference</span>
<span class="text-[16px] leading-[26px] tracking-[0.01em] text-black dark:text-white before:bg-black dark:before:bg-white">{{ "reference" | i18n({}, lang ) | safe }}</span>
<span href="" id="btn-mobile" class="flex items-center justify-center h-[36px] w-[36px] lg:h-auto lg:w-auto mt-1">
<svg class="fill-black dark:fill-white" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
@@ -57,14 +57,14 @@
<ul class="flex flex-col items-start gap-2 lg:h-fit lg:absolute lg:bg-white dark:lg:bg-black top-full lg:mt-[10px] lg:py-4 min-w-[180px] rounded-md lg:shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu">
<li><a href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md"
target="_blank" class="py-[10px] lg:px-[20px]"
target="_blank" class="lg:px-[20px] inline-block"
>Whitepaper</a></li>
<li><a href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/simplex-messaging.md"
target="_blank" class="py-[10px] lg:px-[20px]"
>SMP protocol</a></li>
target="_blank" class="lg:px-[20px] inline-block"
>{{ "smp-protocol" | i18n({}, lang ) | safe }}</a></li>
<li><a href="https://github.com/simplex-chat/simplex-chat/blob/stable/docs/protocol/simplex-chat.md"
target="_blank" class="py-[10px] lg:px-[20px]"
>Chat protocol</a></li>
target="_blank" class="lg:px-[20px] inline-block"
>{{ "chat-protocol" | i18n({}, lang ) | safe }}</a></li>
</ul>
</li>
@@ -72,21 +72,21 @@
<li class="nav-link relative {% if active_blog %}active{% endif %}">
<a href="/blog" class="flex items-center justify-between gap-2 lg:py-5">
<span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text text-black dark:text-white before:bg-black dark:before:bg-white">Blog</span>
<span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text text-black dark:text-white before:bg-black dark:before:bg-white">{{ "blog" | i18n({}, lang ) | safe }}</span>
</a>
</li>
</ul>
<a href="https://github.com/simplex-chat/simplex-chat#help-us-with-donations"
target="_blank" class="inline-block self-center text-white dark:text-black text-[16px] font-medium tracking-[0.02em] rounded-[34px] bg-primary-light dark:bg-primary-dark py-3 lg:py-2 px-20 lg:px-5 mb-16 lg:mb-0"
>Donate</a>
target="_blank" class="whitespace-nowrap inline-block self-center text-white dark:text-black text-[16px] font-medium tracking-[0.02em] rounded-[34px] bg-primary-light dark:bg-primary-dark py-3 lg:py-2 px-20 lg:px-5 mb-16 lg:mb-0"
>{{ "donate" | i18n({}, lang ) | safe }}</a>
<div class=" inline-block self-center dark:hidden mr-[-36px] mt-[8px]">
<div class="inline-block dark:hidden self-center mt-[8px]">
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
</div>
<div class="inline-block self-center hidden dark:block mr-[-36px] mt-[8px]">
<div class="hidden dark:inline-block self-center mt-[8px]">
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
data-color-scheme="no-preference: dark; light: dark; dark: dark;"
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
@@ -94,12 +94,33 @@
</div>
</nav>
<button href="#" class="flex items-center justify-center h-[36px] w-[36px] ml-10 theme-switch-btn">
{% if 'blog' not in page.url %}
<div class="nav-link relative">
<a href="javascript:void(0);" class="flex items-center justify-end ml-8 lg:ml-5 xl:ml-10 h-6 w-8">
<img src="/img/flags/{% getlang page.url %}.svg" alt="" srcset="">
</a>
<ul class="flex flex-col items-start gap-2 h-fit absolute top-11 -left-10 bg-white dark:bg-black mt-[10px] py-4 min-w-[170px] rounded-md shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu overflow-auto">
{% for language in languages.languages %}
{% if language.enabled %}
<li>
<a href="{% completeRoute {url:page.url,lang:language.label} %}" class="px-[20px] flex items-center gap-4 flag-anchor">
<img class="h-4" src="{{ language.flag }}" alt="" srcset="">
<p>{{ language.name }}</p>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
<button href="#" class="flex items-center justify-center h-[36px] w-[36px] ml-8 lg:ml-4 xl:ml-8 theme-switch-btn">
<img src="/img/new/sun.svg" alt="" srcset="" class="sun">
<img src="/img/new/moon.svg" alt="" srcset="" class="moon">
</button>
<button href="" id="btn-mobile" class="flex lg:hidden items-center justify-center h-[36px] w-[36px] ml-10 nav-toggle-btn">
<button href="" id="btn-mobile" class="flex lg:hidden items-center justify-center h-[36px] w-[36px] ml-8 lg:ml-5 xl:ml-10 nav-toggle-btn">
<img src="/img/new/hamburger.svg" id="hamburger" alt="" srcset="">
<svg class="fill-black dark:fill-white hidden" id="cross" width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
<path d="M12.7973 11.5525L7.59762 6.49833L12.7947 1.44675C13.055 1.19371 13.0658 0.771991 12.8188 0.505331C12.5718 0.238674 12.1602 0.227644 11.8999 0.480681L6.65343 5.58028L1.09979 0.182228C0.839522 -0.070157 0.427909 -0.059127 0.18094 0.207531C-0.0660305 0.474191 -0.0552645 0.895911 0.205003 1.14894L5.70862 6.49833L0.20247 11.851C-0.0577975 12.104 -0.0685635 12.5257 0.178407 12.7924C0.306324 12.9306 0.477936 13 0.650181 13C0.811033 13 0.971873 12.9397 1.09726 12.817L6.65343 7.41639L11.9025 12.5186C12.0285 12.6406 12.1893 12.7015 12.3495 12.7015C12.5218 12.7015 12.6934 12.6321 12.8213 12.4939C13.0689 12.2273 13.0582 11.8062 12.7973 11.5525Z" />
@@ -1,23 +1,18 @@
<p>
Many users asked: <em>if SimpleX has no user identifiers, how can it know where to deliver messages?</em>
{{ "hero-overlay-card-1-p-1" | i18n({}, lang ) | safe }}
</p>
<p>
To deliver mesages, instead of user IDs used by all other platforms,
SimpleX uses temporary anonymous pairwise identifiers of message queues,
separate for each of your connections &mdash; there are no long term identifiers.
{{ "hero-overlay-card-1-p-2" | i18n({}, lang ) | safe }}
</p>
<p>
You define which server(s) to use to receive the messages,
your contacts &mdash; the servers you use to send the messages to them.
Every conversation is likely to use two different servers.
{{ "hero-overlay-card-1-p-3" | i18n({}, lang ) | safe }}
</p>
<p>
This design prevents leaking any users&apos; metadata on the application level.
To further improve privacy and protect your IP address you can connect to messaging servers via Tor.
</p>
<p>
Only client devices store user profiles, contacts and groups; the messages are sent with 2-layer end-to-end encryption.
{{ "hero-overlay-card-1-p-4" | i18n({}, lang ) | safe }}
</p>
<p>
Read more in <a href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md" target="_blank">SimpleX whitepaper</a>.
{{ "hero-overlay-card-1-p-5" | i18n({}, lang ) | safe }}
</p>
<p>
{{ "hero-overlay-card-1-p-6" | i18n({}, lang ) | safe }}
</p>
@@ -1,21 +1,12 @@
<p>
When users have persistent identities,
even if this is just a random number, like a Session ID,
there is a risk that the provider or an attacker can observe
how the users are connected and how many messages they send.
{{ "hero-overlay-card-2-p-1" | i18n({}, lang ) | safe }}
</p>
<p>
They could then correlate this information with the existing
public social networks, and determine some real identities.
{{ "hero-overlay-card-2-p-2" | i18n({}, lang ) | safe }}
</p>
<p>
Even with the most private apps that use Tor v3 services,
if you talk to two different contacts via the same profile
they can prove that they are connected to the same person.
{{ "hero-overlay-card-2-p-3" | i18n({}, lang ) | safe }}
</p>
<p>
SimpleX protects against these attacks by not having any
user IDs in its design. And, if you use Incognito mode,
you will have a different display name for each contact,
avoiding any shared data between them.
</p>
{{ "hero-overlay-card-2-p-4" | i18n({}, lang ) | safe }}
</p>
@@ -1,53 +1,23 @@
<p>
<a href="https://en.wikipedia.org/wiki/Peer-to-peer">P2P</a>
messaging protocols and apps have various problems that make
them less reliable than SimpleX, more complex to analyse,
and vulnerable to several types of attack.
{{ "simplex-network-overlay-card-1-p-1" | i18n({}, lang ) | safe }}
</p>
<ol style="list-style: auto; padding-left: 1em;">
<li>
P2P networks rely on some variant of
<a href="https://en.wikipedia.org/wiki/Distributed_hash_table">DHT</a>
to route messages. DHT designs have to balance delivery guarantee and latency.
SimpleX has both better delivery guarantee and lower latency than P2P, because
the message can be redundantly passed via several servers in parallel,
using the servers chosen by the recipient.
In P2P networks the message is passed through <em>O(log N)</em> nodes
sequentially, using nodes chosen by the algorithm.
{{ "simplex-network-overlay-card-1-li-1" | i18n({}, lang ) | safe }}
</li>
<li>
SimpleX design, unlike most P2P networks, has no global user identifiers
of any kind, even temporary, and only uses temporary pairwise identifiers,
providing better anonymity and metadata protection.
{{ "simplex-network-overlay-card-1-li-2" | i18n({}, lang ) | safe }}
</li>
<li>
P2P does not solve
<a href="https://en.wikipedia.org/wiki/Man-in-the-middle_attack">MITM attack</a>
problem, and most existing implementations do not use out-of-band messages
for the initial key exchange. SimpleX uses out-of-band messages or, in some
cases, pre-existing secure and trusted connections for the initial key exchange.
{{ "simplex-network-overlay-card-1-li-3" | i18n({}, lang ) | safe }}
</li>
<li>
P2P implementations can be blocked by some Internet providers (like
<a href="https://en.wikipedia.org/wiki/BitTorrent">BitTorrent</a>).
SimpleX is transport agnostic - it can work over standard web protocols, e.g. WebSockets.
{{ "simplex-network-overlay-card-1-li-4" | i18n({}, lang ) | safe }}
</li>
<li>
All known P2P networks may be vulnerable to
<a href="https://en.wikipedia.org/wiki/Sybil_attack">Sybil attack</a>,
because each node is discoverable, and the network operates as a whole.
Known measures to mitigate it require either a centralized component or expensive
<a href="https://en.wikipedia.org/wiki/Proof_of_work">proof of work</a>.
SimpleX network has no server discoverability, it is fragmented and operates
as multiple isolated sub-networks,
making network-wide attacks impossible.
{{ "simplex-network-overlay-card-1-li-5" | i18n({}, lang ) | safe }}
</li>
<li>
P2P networks may be vulnerable to
<a href="https://www.usenix.org/conference/woot15/workshop-program/presentation/p2p-file-sharing-hell-exploiting-bittorrent">DRDoS attack</a>,
when the clients can rebroadcast and amplify traffic, resulting in network-wide
denial of service.
SimpleX clients only relay traffic from known connection
and cannot be used by an attacker to amplify the traffic in the whole network.
{{ "simplex-network-overlay-card-1-li-6" | i18n({}, lang ) | safe }}
</li>
</ol>
@@ -1,19 +1,12 @@
<p>
Many large companies use information about who you are connected with to estimate your income,
sell you the products you don't really need, and to determine the prices.
{{ "privacy-matters-overlay-card-1-p-1" | i18n({}, lang ) | safe }}
</p>
<p>
Online retailers know that people with lower incomes are more likely to make urgent purchases,
so they may charge higher prices or remove discounts.
{{ "privacy-matters-overlay-card-1-p-2" | i18n({}, lang ) | safe }}
</p>
<p>
Some financial and insurance companies use social graphs
to determine interest rates and premiums.
It often makes people with lower incomes pay more &mdash;
it is known as <a href="https://fairbydesign.com/povertypremium/" target="_blank">"poverty premium"</a>.
{{ "privacy-matters-overlay-card-1-p-3" | i18n({}, lang ) | safe }}
</p>
<p>
SimpleX platform protects the privacy of your connections better than any alternative,
fully preventing your social graph becoming available to any companies or organizations.
Even when people use servers provided by SimpleX Chat, we do not know the number of users or their connections.
{{ "privacy-matters-overlay-card-1-p-4" | i18n({}, lang ) | safe }}
</p>
@@ -1,15 +1,9 @@
<p>
Not so long ago we observed the major elections being manipulated
by <a href="https://en.wikipedia.org/wiki/FacebookCambridge_Analytica_data_scandal" target="_blank">a reputable consulting company</a>
that used our social graphs to distort our view of the real world and manipulate our votes.
{{ "privacy-matters-overlay-card-2-p-1" | i18n({}, lang ) | safe }}
</p>
<p>
To be objective and to make independent decisions
you need to be in control of your information space.
It is only possible if you use private communication platform
that does not have access to your social graph.
{{ "privacy-matters-overlay-card-2-p-2" | i18n({}, lang ) | safe }}
</p>
<p>
SimpleX is the first platform that doesn't have any user identifiers by design,
in this way protecting your connections graph better than any known alternative.
{{ "privacy-matters-overlay-card-2-p-3" | i18n({}, lang ) | safe }}
</p>
@@ -1,20 +1,12 @@
<p>
Everyone should care about privacy and security of their communications &mdash;
harmless conversations can put you in danger, even if you have nothing to hide.
{{ "privacy-matters-overlay-card-3-p-1" | i18n({}, lang ) | safe }}
</p>
<p>
One of the most shocking stories is the experience of
<a href="https://en.wikipedia.org/wiki/Mohamedou_Ould_Slahi" target="_blank">Mohamedou Ould Salahi</a>
described in his memoir and shown in The Mauritanian movie.
He was put into Guantanamo camp, without trial, and was tortured there for 15 years
after a phone call to his relative in Afghanistan, under suspicion of being involved
in 9/11 attacks, even though he lived in Germany for the previous 10 years.
{{ "privacy-matters-overlay-card-3-p-2" | i18n({}, lang ) | safe }}
</p>
<p>
Ordinary people get arrested for what they share online, even via their "anonymous" accounts,
<a href="https://www.dailymail.co.uk/news/article-11282263/Moment-police-swoop-house-devout-catholic-mother-malicious-online-posts.html" target="_blank">even in democratic countries</a>.
{{ "privacy-matters-overlay-card-3-p-3" | i18n({}, lang ) | safe }}
</p>
<p>
It is not enough to use an end-to-end encrypted messenger,
we all should use the messengers that protect the privacy of our personal networks &mdash; who we are connected with.
{{ "privacy-matters-overlay-card-3-p-4" | i18n({}, lang ) | safe }}
</p>
@@ -1,19 +1,9 @@
<p>
Unlike other messaging platforms, SimpleX has <strong>no identifiers assigned to the users</strong>.
It does not rely on phone numbers, domain-based addresses (like email or XMPP),
usernames, public keys or even random numbers to identify its users &mdash;
we don&apos;t know how many people use our SimpleX servers.
{{ "simplex-unique-overlay-card-1-p-1" | i18n({}, lang ) | safe }}
</p>
<p>
To deliver messages SimpleX uses
<a href="https://csrc.nist.gov/glossary/term/Pairwise_Pseudonymous_Identifier">pairwise anonymous addresses</a>
of unidirectional message queues, separate for received and sent messages,
usually via different servers.
Using SimpleX is like having <strong>a different &ldquo;burner&rdquo; email or phone
for each contact</strong>, and no hassle to manage them.
{{ "simplex-unique-overlay-card-1-p-2" | i18n({}, lang ) | safe }}
</p>
<p>
This design protects the privacy of who you are communicating with,
hiding it from SimpleX platform servers and from any observers.
To hide your IP address from the servers, you can <strong>connect to SimpleX servers via Tor</strong>.
{{ "simplex-unique-overlay-card-1-p-3" | i18n({}, lang ) | safe }}
</p>
@@ -1,9 +1,6 @@
<p>
Because you have no identifier on the SimpleX platform,
nobody can contact you unless you share a one-time
or temporary user address, as a QR code or a link.
{{ "simplex-unique-overlay-card-2-p-1" | i18n({}, lang ) | safe }}
</p>
<p>
Even with the optional user address, while it can be used to send spam contact requests,
you can change or completely delete it without losing any of your connections.
{{ "simplex-unique-overlay-card-2-p-2" | i18n({}, lang ) | safe }}
</p>
@@ -1,21 +1,12 @@
<p>
SimpleX Chat stores all user data only on client devices
using a <strong>portable encrypted database format</strong>
that can be exported and transferred to any supported device.
{{ "simplex-unique-overlay-card-3-p-1" | i18n({}, lang ) | safe }}
</p>
<p>
The end-to-end encrypted messages are held temporarily
on SimpleX relay servers until received,
then they are permanently deleted.
{{ "simplex-unique-overlay-card-3-p-2" | i18n({}, lang ) | safe }}
</p>
<p>
Unlike federated networks servers (email, XMPP or Matrix),
SimpleX servers don&apos;t store user accounts,
they only relay messages, protecting the privacy of both parties.
{{ "simplex-unique-overlay-card-3-p-3" | i18n({}, lang ) | safe }}
</p>
<p>
There are no identifiers or ciphertext in common
between sent and received server traffic &mdash;
if anybody is observing it, they cannot easily determine
who communicates with whom, even if TLS is compromised.
{{ "simplex-unique-overlay-card-3-p-4" | i18n({}, lang ) | safe }}
</p>
@@ -1,19 +1,9 @@
<p>
You can <strong>use SimpleX with your own servers</strong>
and still communicate with people who use
the pre-configured servers provided by us.
{{ "simplex-unique-overlay-card-4-p-1" | i18n({}, lang ) | safe }}
</p>
<p>
SimpleX platform uses an <a href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md" target="_blank">open protocol</a>
and provides <a href="https://github.com/simplex-chat/simplex-chat/tree/stable/packages/simplex-chat-client/typescript" target="_blank">SDK to create chat bots</a>,
allowing implementation of services that users can interact with
via SimpleX Chat apps &mdash; we&apos;re really looking forward to see
what SimpleX services you can build.
{{ "simplex-unique-overlay-card-4-p-2" | i18n({}, lang ) | safe }}
</p>
<p>
If you are considering developing for the SimpleX platform,
for example, the chat bot for SimpleX app users, or
the integration of the SimpleX Chat library into your mobile apps,
please <a href="https://simplex.chat/contact#/?v=1&smp=smp%3A%2F%2FPQUV2eL0t7OStZOoAsPEV2QYWt4-xilbakvGUGOItUo%3D%40smp6.simplex.im%2FK1rslx-m5bpXVIdMZg9NLUZ_8JBm8xTt%23MCowBQYDK2VuAyEALDeVe-sG8mRY22LsXlPgiwTNs9dbiLrNuA7f3ZMAJ2w%3D" target="_blank">get in touch</a>
for any advice and support.
{{ "simplex-unique-overlay-card-4-p-3" | i18n({}, lang ) | safe }}
</p>
@@ -1,21 +1,21 @@
{# join simplex #}
<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-[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>
<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" | i18n({}, lang ) | safe }}</span> SimpleX</p>
<p class="text-black dark:text-white text-base text-center mb-14">{{ "we-invite-you-to-join-the-conversation" | i18n({}, lang ) | safe }}</p>
<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>
<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" | i18n({}, lang ) | safe }}</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" | i18n({}, lang ) | safe }}</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" | i18n({}, lang ) | safe }}</a>
</div>
<p class="text-grey-black dark:text-white text-base text-center mb-7">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" | i18n({}, lang ) | safe }}</p>
<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:text-grey-black placeholder:dark:text-white placeholder:text-base placeholder:font-normal placeholder:tracking-[0.01em]" 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" | i18n({}, lang ) | safe }}">
<span style="position: absolute; left: -5000px" aria-hidden="true">
<input type="text" name="b_ddd892b258ae36e5438e6d4e1_ad6037a2fe" tabindex="-1" value="" />
</span>
@@ -24,7 +24,7 @@
<hr class="block mb-7 mx-5 dark:opacity-[0.2] w-full">
<p class="text-grey-black dark:text-white text-center mb-7">Get SimpleX</p>
<p class="text-grey-black dark:text-white text-center mb-7">{{ "get-simplex" | i18n({}, lang ) | safe }}</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>
@@ -1,6 +1,6 @@
<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] 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>
<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" | i18n({}, lang ) | safe }} <span class="gradient-text">{{ "unique" | i18n({}, lang ) | safe }}</span></p>
<div class="swiper unique-swiper px-5 sm:px-4 py-2">
<div class="swiper-wrapper mb-16">
@@ -16,7 +16,7 @@
<div class="card-content absolute md:static px-4 md:px-0 bottom-[80px] right-1 left-1 h-[180px] md:h-fit pt-5 lg:pt-0 bg-primary-bg-light dark:bg-primary-bg-dark">
<div class="content-head">
<p class="text-[35px] lg:text-[65px] font-bold tracking-[0.06em] text-active-blue text-center md:text-left">#{{ section.id }}</p>
<p class="w-full max-w-[617px] text-[25px] leading-[33px] lg:text-[35px] lg:leading-[45px] text-center md:text-left font-bold text-grey-black dark:text-white">{{ section.title | safe }}</p>
<p class="w-full max-w-[617px] text-[25px] leading-[33px] lg:text-[35px] lg:leading-[45px] text-center md:text-left font-bold text-grey-black dark:text-white">{{ section.title | i18n({}, lang ) | safe }}</p>
</div>
<div class="content-body py-5 md:py-7">
@@ -28,14 +28,14 @@
<p class="w-full max-w-[541px] text-[16px] leading-[24px] tracking-[0.02em] mb-[36px] text-grey-black dark:text-white text-center md:text-left">{{ section.desc | safe }}</p>
{% endif %}
{% 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-4 tracking-[0.02em] text-center md:text-left">{{ 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-4 tracking-[0.02em] text-center md:text-left">{{ "learn-more" | i18n({}, lang ) | safe }}</a>
{% endif %}
</div>
</div>
<div class="hide-show-btn fixed bottom-0 pb-8 pt-2 h-[80px] left-1 right-1 md:hidden flex items-center justify-center bg-primary-bg-light dark:bg-primary-bg-dark scale-100 z-10">
<a href="javascript:void(0);" class="flex items-center gap-2 open-card-btn">
<span class="underline text-[16px] tracking-[0.02em] underline-offset-4 text-primary-light dark:text-primary-dark">More info</span>
<span class="underline text-[16px] tracking-[0.02em] underline-offset-4 text-primary-light dark:text-primary-dark">{{ "more-info" | i18n({}, lang ) | safe }}</span>
<span class="flex items-center justify-center mt-1">
<svg class="fill-primary-light dark:fill-primary-dark" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
@@ -43,7 +43,7 @@
</span>
</a>
<a href="javascript:void(0);" class="items-center gap-2 close-card-btn hidden">
<span class="underline text-[16px] tracking-[0.02em] underline-offset-4 text-primary-light dark:text-primary-dark">Hide info</span>
<span class="underline text-[16px] tracking-[0.02em] underline-offset-4 text-primary-light dark:text-primary-dark">{{ "hide-info" | i18n({}, lang ) | safe }}</span>
<span class="flex items-center justify-center mt-1">
<svg class="fill-primary-light dark:fill-primary-dark" width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.40813 4.79332C8.69689 5.06889 9.16507 5.06889 9.45384 4.79332C9.7426 4.51775 9.7426 4.07097 9.45384 3.7954L5.69327 0.206676C5.65717 0.17223 5.61827 0.142089 5.57727 0.116255C5.29026 -0.064587 4.90023 -0.0344467 4.64756 0.206676L0.886983 3.7954C0.598219 4.07097 0.598219 4.51775 0.886983 4.79332C1.17575 5.06889 1.64393 5.06889 1.93269 4.79332L5.17041 1.70356L8.40813 4.79332Z"/>
@@ -68,7 +68,7 @@
{% for section in why_simplex_is_unique.sections %}
{% if section.overlayContent %}
{{ overlay(section) }}
{{ overlay(section,lang) }}
{% endif %}
{% endfor %}
@@ -1,9 +1,6 @@
<p style="padding-bottom:6px;">
SimpleX protects the privacy of your profile, contacts and metadata,
hiding it from SimpleX platform servers and any observers.
{{ "simplex-unique-card-1-p-1" | i18n({}, lang ) | safe }}
</p>
<p>
Unlike any other existing messaging platform,
SimpleX has no identifiers assigned to the users &mdash;
<strong>not even random numbers</strong>.
{{ "simplex-unique-card-1-p-2" | i18n({}, lang ) | safe }}
</p>
@@ -1,5 +1,3 @@
<p>
Because you have no identifier or fixed address on the SimpleX platform,
nobody can contact you unless you share a one-time
or temporary user address, as a QR code or a link.
{{ "simplex-unique-card-2-p-1" | i18n({}, lang ) | safe }}
</p>
@@ -1,7 +1,6 @@
<p style="padding-bottom:5px;">
SimpleX stores all user data on client devices in a <strong>portable encrypted database format</strong> &mdash;
it can be transferred to another device.
{{ "simplex-unique-card-3-p-1" | i18n({}, lang ) | safe }}
</p>
<p>
The end-to-end encrypted messages are held temporarily on SimpleX relay servers until received, then they are permanently deleted.
{{ "simplex-unique-card-3-p-2" | i18n({}, lang ) | safe }}
</p>
@@ -1,7 +1,6 @@
<p style="padding-bottom:6px;">
The SimpleX network is fully decentralised and independent of any crypto-currency or any other platform, other than the Internet.
{{ "simplex-unique-card-4-p-1" | i18n({}, lang ) | safe }}
</p>
<p>
You can <strong>use SimpleX with your own servers</strong>
or with the servers provided by us &mdash; and still connect to any user.
{{ "simplex-unique-card-4-p-2" | i18n({}, lang ) | safe }}
</p>
+13 -13
View File
@@ -25,13 +25,13 @@
<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] leading-[45px] md:leading-[55px] lg:text-[38px] text-center font-bold text-grey-black dark:text-white mb-9">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" | i18n({}, lang ) | safe }}</p>
<!-- Tab links -->
<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>
<div data-btn-index="0" class="flex-1 tab-button tab-1 p-2 text-[20px] text-center font-bold cursor-pointer active">{{ "simplex-explained-tab-1-text" | i18n({}, lang ) | safe }}</div>
<div data-btn-index="1" class="flex-1 tab-button tab-2 p-2 text-[20px] text-center font-bold cursor-pointer">{{ "simplex-explained-tab-2-text" | i18n({}, lang ) | safe }}</div>
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">{{ "simplex-explained-tab-3-text" | i18n({}, lang ) | safe }}</div>
</div>
<!-- Tab content -->
@@ -39,40 +39,40 @@
<div class="swiper-wrapper h-[inherit] mb-20 md:mb-0">
<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="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-1-text" | i18n({}, lang ) | safe }}</div>
<div class="flex flex-col justify-center items-center">
<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.
{{ "simplex-explained-tab-1-p-1" | i18n({}, lang ) | safe }}
</p>
<p class="text-black dark:text-white text-[16px] font-normal text-center">
How can it work with unidirectional queues and without user profile identifiers?
{{ "simplex-explained-tab-1-p-2" | i18n({}, lang ) | safe }}
</p>
</div>
</div>
<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="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-2-text" | i18n({}, lang ) | safe }}</div>
<div class="flex flex-col justify-center items-center">
<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.
{{ "simplex-explained-tab-2-p-1" | i18n({}, lang ) | safe }}
</p>
<p class="text-black dark:text-white text-[16px] font-normal text-center">
Servers only pass messages one way, without having the full picture of user's conversation or connections.
{{ "simplex-explained-tab-2-p-2" | i18n({}, lang ) | safe }}
</p>
</div>
</div>
<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="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-3-text" | i18n({}, lang ) | safe }}</div>
<div class="flex flex-col justify-center items-center">
<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.
{{ "simplex-explained-tab-3-p-1" | i18n({}, lang ) | safe }}
</p>
<p class="text-black dark:text-white text-[16px] font-normal text-center">
Users can further improve metadata privacy by using Tor to access servers, preventing corellation by IP address.
{{ "simplex-explained-tab-3-p-2" | i18n({}, lang ) | safe }}
</p>
</div>
</div>