mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2026-05-26 03:14:36 +00:00
M Sarmad Qadeer
a96fb2f8d1
* updated the design of join simplex * updated the design of Comparison section * updated the design of Simplex explained * updated the design of Simplex network * updated the design of private section * updated the design of features section * updated the design of unique section * updated the design of privacy matters * added improvements in design Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>
239 lines
16 KiB
HTML
239 lines
16 KiB
HTML
---
|
||
layout: layouts/main.html
|
||
title: "SimpleX Chat: private and secure messenger without any user IDs (not even random)"
|
||
description: "SimpleX Chat - a private and encrypted messenger without any user IDs (not even random ones)! Make a private connection via link / QR code to send messages and make calls."
|
||
templateEngineOverride: njk
|
||
active_home: true
|
||
---
|
||
{%- from "components/macro.njk" import overlay -%}
|
||
|
||
{% include "hero.html" %}
|
||
|
||
<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-[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 — <span class="text-active-blue">who you talk with</span> — protects you from:</p>
|
||
<div class="flex flex-col lg:flex-row gap-[20px] mb-[62px] lg:mb-[90px]">
|
||
|
||
{% for section in why_privacy_matters.sections %}
|
||
<div class="bg-white dark:bg-transparent px-[34px] flex flex-col md:flex-row lg:flex-col items-center rounded-[12px] dark:rounded-[6px] shadow-[0px_50px_61px_rgba(0,0,0,0.12)] dark:shadow-none flex-[1] border-gradient">
|
||
<div class="md:w-[30%] lg:w-full flex items-center justify-center h-[215px]">
|
||
<img src="{{ section.imgLight }}" alt="">
|
||
</div>
|
||
<div class="md:w-[70%] lg:w-full flex flex-col items-center md:items-start lg:items-center gap-5 mb-[54px] md:mb-0 lg:mb-[54px]">
|
||
<p class="font-medium text-xl text-center text-grey-black dark:text-white">{{ section.title }}</p>
|
||
{% if section.overlayContent %}
|
||
<a href="javascript:void(0);" data-show-overlay="{{ section.overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2">{{ section.overlayContent.linkText }}</a>
|
||
{{ overlay(section) }}
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
|
||
</div>
|
||
<p class="text-center w-full max-w-[900px] text-[20px] leading-[28px] m-auto text-black dark:text-white">Make sure your messenger can't access your data!</p>
|
||
</div>
|
||
</section>
|
||
|
||
{# Why SimpleX is unique #}
|
||
{% include "sections/simplex_unique.html" %}
|
||
|
||
{# Features #}
|
||
<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 lg:grid-cols-4 gap-x-10 gap-y-32">
|
||
{% for feature in features.sections %}
|
||
<div class="flex flex-col items-center">
|
||
<div class="bg-white flex items-center justify-center w-[175px] h-[110px] rounded-[20px] border-[#859096] border-solid border-[1px] shadow-[2px_2px_0px_#859096] dark:border-none dark:shadow-none mb-[20px] border-gradient">
|
||
<img src="{{ feature.imgLight }}" alt="" class="dark:hidden"/>
|
||
<img src="{{ feature.imgDark }}" alt="" class="hidden dark:block"/>
|
||
</div>
|
||
<p class="text-grey-black dark:text-white text-[16px] font-medium text-center w-full max-w-[265px]">{{ feature.title | safe }}</p>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{# what makes simplex private #}
|
||
<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-[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-16">
|
||
|
||
{% for section in what_makes_simplex_private.sections %}
|
||
<div class="card swiper-slide relative h-[480px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
|
||
<div class="flex items-center justify-center py-12 px-6 h-[322px]">
|
||
<img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="{{ section.imgLight }}" alt=""/>
|
||
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="{{ section.imgDark }}" alt=""/>
|
||
</div>
|
||
<div class="flex flex-col items-center justify-between h-[138px] absolute bottom-0 py-6 px-6 bg-card-desc-bg-light dark:bg-card-desc-bg-dark rounded-b-[20px]">
|
||
<p class="text-grey-black dark:text-white text-[18px] my-4 font-bold leading-[26px] tracking-[0.01em] text-center">{{ section.title | safe }}</p>
|
||
<div class="flex-1 py-3 flex flex-col gap-3">
|
||
{% for point in section.points %}
|
||
<p class="text-grey-black dark:text-white text-[14px] text-center">{{ point | safe }}</p>
|
||
{% endfor %}
|
||
</div>
|
||
<p class="text-grey-black dark:text-white text-[12px] text-center">Tap to close</p>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<img class="fixed left-[-3px] top-[55%] swiper-button-prev private-swiper-button-prev hidden md:inline-block dark:hidden" src="/img/new/arrow-left.svg" alt="">
|
||
<img class="fixed right-[-6px] top-[55%] swiper-button-next private-swiper-button-next hidden md:inline-block dark:hidden" src="/img/new/arrow-right.svg" alt="">
|
||
<img class="fixed left-[-3px] top-[55%] swiper-button-prev private-swiper-button-prev hidden dark:md:inline-block" src="/img/new/arrow-left-dark.svg" alt="">
|
||
<img class="fixed right-[-6px] top-[55%] swiper-button-next private-swiper-button-next hidden dark:md:inline-block" src="/img/new/arrow-right-dark.svg" alt="">
|
||
<div class="swiper-scrollbar dark:bg-grey-black dark:bg-opacity-[0.2]"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{# Network #}
|
||
<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-[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-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="md:flex-[2] flex flex-col items-center justify-center">
|
||
<p class="text-active-blue text-xl font-bold text-center md:text-left lg:text-center self-stretch">Unlike P2P networks</p>
|
||
<p class="text-black dark:text-white text-base font-normal text-center md:text-left lg:text-center">
|
||
All messages are sent via the servers, both providing better
|
||
metadata privacy and reliable asynchronous message delivery,
|
||
while avoiding many <a href="javascript:void(0)" data-show-overlay="{{ simplex_network_overlay.sections[0].overlayContent.overlayId }}" class="open-overlay-btn">problems of P2P networks</a>.
|
||
{{ overlay(simplex_network_overlay.sections[0]) }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<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="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>
|
||
|
||
<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="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 — only the users do.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
|
||
{# simplex explained #}
|
||
{% include "simplex_explained.html" %}
|
||
|
||
|
||
{# Comparison #}
|
||
<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] 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 mb-14">
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<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 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-[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-[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-[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-[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-[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 mb-8 mx-5 dark:opacity-[0.2]">
|
||
|
||
<div>
|
||
<div class="px-5">
|
||
<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>
|
||
<li> If operator’s servers are compromised</li>
|
||
<li> Does not protect users' metadata</li>
|
||
<li> While P2P are distributed, they are not federated - they operate as a single network</li>
|
||
<li> P2P networks either have a central authority or the whole network can be compromised - <a class="underline text-primary-light dark:text-primary-dark underline-offset-2" href="https://github.com/simplex-chat/simplex-chat/blob/stable/docs/SIMPLEX.md#comparison-with-p2p-messaging-protocols">see here</a></li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{# join simplex #}
|
||
{% include "sections/join_simplex.html" %} |