mirror of
https://github.com/simplex-chat/simplex-chat.git
synced 2026-08-29 03:18:37 +00:00
new website (#1307)
* nav in process
* edited web.yml
* navbar issue fixed
* added theme switcher
* added privacy matters section
* added features section
* updated nav padding
* added network section
* improved sidebar dark mode colors
* added footer
* simplex private section added
* added some improvements
* nav issue fixed
* simplex unique section added
* a small fix
* added overlay & data to some sections
* added overlay to simplex unique section
added some improvements to other sections too
* added a small fix
* updated CNAME
* markdown files for why simplex is unique
* Revert "markdown files for why simplex is unique"
This reverts commit ef728218f7.
* added hero section
* added comparison and simplex explained section
* added blogs page
* added articles page
* a small fix in hero section
* added contact page
* updated contact
* created files for overlay content
* a light update
* hero animation
* working on hero
* added responsiveness for mobile
* a quick fix
* added responsiveness to tablet screen
* added responsiveness for desktop screen on hero section
* switch theme of hero
* nav color update
* set comparisons sections
* switch theme of comparisons section
* added responsiveness in simplex explained section
* add logic to simplex explained
* added theme switcher to simplex explained
* manage join simplex section
* update what makes simplex private
* a quick update
* add improvements
* a bit update
* add improvements
* texts for why privacy matters section
* update headers
* texts for "why unique" and "features" sections
* EOLs
* update swipers
* update & add transitions to simplex unique section
* updated overlays
* increase the size of cross on overlays
* add overlays to hero
* website: texts for "private" and "explained" sections (#5)
* website: texts for "private" section
* texts for simplex explained
* blog previews and images (#6)
* blog previews and images
* text for dark mode
* add link style
* add overlay to -> unlike p2p networks
* add picture with blue arrows to simplex explained
* update blog list layout
* remove extra css
* bigger navigation circles & center positions
* make bullets (dots) bigger
* make private scroll thicker
* update hero & footer mobile download btns
* fix dark mode animation files (#7)
* improved contrast for light animation in hero section (#8)
* remove old animation
* Made Hero Pixel Perfect to Desktop
* texts in hero section overlays (#10)
* texts in hero section overlays
* replace hero video
* eol
* update footer links (#11)
* update footer links
* eol
* texts, links, fix layout (#12)
* mailchimp form (#13)
* site meta tags (#14)
* site meta tags
* update blog og:url
* amend texts
* font
* update text
* contact page
* Making things Polished in Hero (#15)
* Made Video Responsive on Tablet
* Fixed the issues
* remove extra files for home & contact page
* update invitation
* refactoring
* fix nav for dark
* quick fix
* update blog list layout
* refactoring
* disable inactive nav circles
* contact page
* fix mobile
* detect platform & show btns according to it
* contact & invitation page setting
* complete contact/invitation page
* create variables for download btns
* fixes for hero - for tablet & mobile
* update hero layout
* update footer layout
* increase the size of logo in navbar
* updated nav & footer logos
* add links to join simplex section
* text for p2p networks section
* text on contact page about link
* add touchstart handler to close popup
* update APK links
* update CNAME
Co-authored-by: M Sarmad Qadeer <MSarmadQadeer@gmail.com>
Co-authored-by: Ojas Shukla <54703305+whizzbbig@users.noreply.github.com>
This commit is contained in:
Evgeny Poberezkin
co-authored by
M Sarmad Qadeer
Ojas Shukla
M Sarmad Qadeer
Ojas Shukla
parent
dd9e94eefd
commit
fa5a70cd19
+231
-421
@@ -1,426 +1,236 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SimpleX Chat: private, secure, no user identitifiers</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Free open-source chat protocol and software - complete privacy, security and ownership of your contacts and messages."
|
||||
/>
|
||||
<meta name="Content-Type" content="text/html;charset=utf-8" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="SimpleX chat: private, secure, de-centralised" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Free open-source chat protocol and software - complete privacy, security and ownership of your contacts and messages."
|
||||
/>
|
||||
<meta property="og:url" content="https://simplex.chat/" />
|
||||
<meta property="og:image" content="https://simplex.chat/img/share_simplex.png" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<link href="/css/tailwind.css" rel="stylesheet" />
|
||||
<link href="/css/style.css" rel="stylesheet" />
|
||||
<link href="css/index.css" rel="stylesheet" />
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico">
|
||||
<script async defer src="js/index.js"></script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</head>
|
||||
---
|
||||
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."
|
||||
ogURL: "https://simplex.chat/"
|
||||
templateEngineOverride: njk
|
||||
active_home: true
|
||||
---
|
||||
{%- from "components/macro.njk" import overlay -%}
|
||||
|
||||
<body>
|
||||
{% include "nav.html" %}
|
||||
{% include "hero.html" %}
|
||||
|
||||
<section id="demo" class="z-10">
|
||||
<div class="container">
|
||||
<h1>SimpleX Chat</h1>
|
||||
<h3>Private & encrypted - the only platform without user identifiers!</h3>
|
||||
<div class="app__links">
|
||||
<a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img src="./img/apple_store.svg" height="42"></a>
|
||||
<a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img src="./img/google_play.svg"></a>
|
||||
<a href="https://app.simplex.chat" target="_blank" title="SimpleX F-Droid Repository"><img src="./img/f_droid.svg" height="41"></a>
|
||||
<a href="https://testflight.apple.com/join/DWuT2LQu" target="_blank"><img src="./img/testflight.png" width="41" height="41"></a>
|
||||
<a href="https://github.com/simplex-chat/simplex-chat/releases/latest/download/simplex.apk" target="_blank"><img src="./img/apk_icon.png" width="41" height="41"></a>
|
||||
</div>
|
||||
<p class="d-none-576">You can download terminal chat app from GitHub or using this command:</p>
|
||||
<p class="content_copy_with_tooltip install d-none-576">
|
||||
<span class="content">curl -o- https://raw.githubusercontent.com/simplex-chat/simplex-chat/master/install.sh | bash</span>
|
||||
<span class="tooltip">
|
||||
<span class="tooltiptext">Copy to clipboard</span>
|
||||
<img class="content_copy" src="./img/icons/content-copy.svg">
|
||||
</span>
|
||||
</p>
|
||||
<div class="all-users">
|
||||
<div class="user alice">
|
||||
<h3>Alice</h3>
|
||||
<div class="terminal">
|
||||
<div class="display"></div>
|
||||
<div class="input"></div>
|
||||
<input type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="user bob d-none">
|
||||
<h3>Bob</h3>
|
||||
<div class="terminal">
|
||||
<div class="display"></div>
|
||||
<div class="input"></div>
|
||||
<input type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="user simplex_mobile d-none-890">
|
||||
<img src="./img/simplex_mobile.png" alt="" width="320">
|
||||
</div>
|
||||
<div class="user tom d-none">
|
||||
<h3>Tom</h3>
|
||||
<div class="terminal">
|
||||
<div class="display"></div>
|
||||
<div class="input"></div>
|
||||
<input type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<button class="run-demo d-none-890">Run demo</button>
|
||||
<button class="run-faster d-none-890">Faster!</button>
|
||||
<button class="try-it d-none-890">Try it!</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="introduction">
|
||||
<div class="container">
|
||||
<h2>Privacy redefined</h2>
|
||||
<h3>SimpleX advantage:</h3>
|
||||
<p>SimpleX ensures data and meta-data privacy</p>
|
||||
<p>with a new protocol design – it delivers messages</p>
|
||||
<p>without using senders' and recipients' identifiers,</p>
|
||||
<p>unlike any other messaging platform.</p>
|
||||
<figure class="section">
|
||||
<div class="feature">
|
||||
<div class="doodle control"></div>
|
||||
<h4>Security</h4>
|
||||
<p>Two-layer encryption and communication integrity</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="doodle privacy"></div>
|
||||
<h4>Privacy</h4>
|
||||
<p>Your contacts and messages are stored on your device</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="doodle convenience"></div>
|
||||
<h4>Convenience</h4>
|
||||
<p>Easy to add contacts and start talking</p>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="problem">
|
||||
<div class="container">
|
||||
<h2>Problem: chat security</h2>
|
||||
<a id="problem-explained"></a>
|
||||
<section class="problem intro">
|
||||
<h3>End-to-end encryption?</h3>
|
||||
<p>Alice sends the key to Bob (e.g. via p2p network or via chat server)</p>
|
||||
<div class="problem-section">
|
||||
<figure class="communication">
|
||||
<figure class="party alice">Alice</figure>
|
||||
<img alt="Alice sends the key to Bob" src="./img/problem11.svg" />
|
||||
<figure class="party bob">Bob</figure>
|
||||
</figure>
|
||||
</div>
|
||||
<p>Now Bob can send encrypted messages to Alice - he believes it is secure!</p>
|
||||
<div class="problem-section">
|
||||
<figure class="communication">
|
||||
<figure class="party alice">Alice</figure>
|
||||
<img alt="They believe it is secure" src="./img/problem12.svg" />
|
||||
<figure class="party bob">Bob</figure>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
<section class="problem explained">
|
||||
<h3>Man-in-the-middle attack!</h3>
|
||||
<p>But the key can be intercepted and substituted by Tom (the attacker)</p>
|
||||
<div class="problem-section">
|
||||
<figure class="communication">
|
||||
<figure class="party alice">Alice</figure>
|
||||
<img alt="key is intercepted" src="./img/problem21.svg" />
|
||||
<figure class="party bob">Bob</figure>
|
||||
<div class="tom">Tom</div>
|
||||
</figure>
|
||||
</div>
|
||||
<p>Now the attacker can read the messages without Alice or Bob knowing</p>
|
||||
<div class="problem-section">
|
||||
<figure class="communication">
|
||||
<figure class="party alice">Alice</figure>
|
||||
<img alt="attacker can read messages" src="./img/problem22.svg" />
|
||||
<figure class="party bob">Bob</figure>
|
||||
<div class="tom">Tom</div>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
<div class="pagination">
|
||||
<a class="page intro" href="#problem-intro"></a>
|
||||
<a class="page explained" href="#problem-explained"></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="solution">
|
||||
<div class="container">
|
||||
<h2>What is the solution?</h2>
|
||||
<p>
|
||||
To create secure encrypted channel you need an existing secure channel
|
||||
<br />where you can pass the encryption key (or key fingerprint).
|
||||
</p>
|
||||
<p>Any alternative solution can be compromised.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="connection">
|
||||
<div class="container">
|
||||
<h2>Make a private connection!</h2>
|
||||
<h3>To add contact and to start chat</h3>
|
||||
<p>
|
||||
Adding a contact in mobile app will require sharing your one-time QR code.
|
||||
<br>In the <a href="https://github.com/simplex-chat/simplex-chat">terminal UI</a> you need to share an invitation with your contact.
|
||||
</p>
|
||||
<h4>After creating your chat profile in the app:</h4>
|
||||
<figure class="section">
|
||||
<figure class="conn-stage">
|
||||
<p>1.<br>Show QR code or share link</p>
|
||||
<figure class="device">
|
||||
<img alt="mobile app: show QR code to add contact" src="./img/1_show_qr_code.png" width="187px"/>
|
||||
</figure>
|
||||
<figure class="party alice small">Alice</figure>
|
||||
</figure>
|
||||
<img src="img/arrow.svg" class="arrow" />
|
||||
<figure class="conn-stage">
|
||||
<p>2.<br>Your contact scans QR code or opens link</p>
|
||||
<figure class="device">
|
||||
<img alt="mobile app: scan QR code" src="./img/2_scan_qr_code.png" width="187px"/>
|
||||
</figure>
|
||||
<figure class="party bob small">Bob</figure>
|
||||
</figure>
|
||||
<img src="img/arrow.svg" class="arrow" />
|
||||
<figure class="conn-stage">
|
||||
<p>3.<br>A private connection is established</p>
|
||||
<figure class="device">
|
||||
<img alt="mobile app: confirm contact" src="./img/3_connected.png" width="187px"/>
|
||||
</figure>
|
||||
<figure class="party alice small">Alice</figure>
|
||||
</figure>
|
||||
<img src="img/arrow.svg" class="arrow" />
|
||||
<figure class="conn-stage">
|
||||
<p>4.<br>Now you can chat privately!</p>
|
||||
<figure class="device">
|
||||
<img alt="mobile app: start chat" src="./img/4_chat.png" width="187px"/ />
|
||||
</figure>
|
||||
<figure class="party bob small">Bob</figure>
|
||||
</figure>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="comparison">
|
||||
<div class="container">
|
||||
<h2>Comparison with other protocols</h2>
|
||||
<div class="table-holder">
|
||||
<table class="systems">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="simplex"><img alt="simplex logo" src="img/icon.svg" /> SimpleX chat</th>
|
||||
<th>Signal, big platforms</th>
|
||||
<th>XMPP, Matrix</th>
|
||||
<th>P2P protocols</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Requires global identity</td>
|
||||
<td class="highlight good">No - private</td>
|
||||
<td class="highlight bad">Yes <sup>1</sup></td>
|
||||
<td class="highlight bad">Yes <sup>2</sup></td>
|
||||
<td class="highlight bad">Yes <sup>3</sup></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Possibility of MITM</td>
|
||||
<td class="highlight good">No - secure</td>
|
||||
<td class="highlight bad">Yes <sup>4</sup></td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dependence on DNS</td>
|
||||
<td class="highlight good">No - resilient</td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
<td class="highlight good">No</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Single or centralized network</td>
|
||||
<td class="highlight good">No - decentralized</td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
<td class="highlight good">No - federated <sup>5</sup></td>
|
||||
<td class="highlight bad">Yes <sup>6</sup></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Central component or other network-wide attack</td>
|
||||
<td class="highlight good">No - resilient</td>
|
||||
<td class="highlight bad">Yes</td>
|
||||
<td class="highlight bad">Yes <sup>2</sup></td>
|
||||
<td class="highlight bad">Yes <sup>7</sup></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="table-comments">
|
||||
<ul class="legend">
|
||||
<li class="good">Good</li>
|
||||
<li class="bad">Bad</li>
|
||||
</ul>
|
||||
|
||||
<div class="footnotes">
|
||||
<ol>
|
||||
<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 -
|
||||
see
|
||||
<a
|
||||
href="https://github.com/simplex-chat/protocol#comparison-with-p2p-messaging-protocols"
|
||||
>here</a
|
||||
>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="messaging">
|
||||
<div class="container flex flex-col items-center">
|
||||
<div>
|
||||
<h2>SimpleX messaging protocol</h2>
|
||||
<h3>Unidirectional (simplex) queues</h3>
|
||||
<p>
|
||||
<a
|
||||
href="https://github.com/simplex-chat/simplexmq/blob/master/protocol/simplex-messaging.md"
|
||||
target="_blank"
|
||||
>Simplex messaging protocol</a
|
||||
>
|
||||
(SMP) for messaging via secure persistent queues will serve as the low level protocol for
|
||||
SimpleX chat - see
|
||||
<a href="https://github.com/simplex-chat/simplex-messaging" target="_blank"
|
||||
>demo server implementation</a
|
||||
>.<br />
|
||||
It uses different encryption keys for each message queue - the key is passed via existing
|
||||
secure channel - e.g. QR code or another simplex queue.<br />
|
||||
</p>
|
||||
</div>
|
||||
<img alt="simplex messaging protocol" src="./img/messaging.png">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="chat">
|
||||
<div class="container flex flex-col items-center">
|
||||
<div>
|
||||
<h2>Chat</h2>
|
||||
<h3>Communication integrity</h3>
|
||||
<p>
|
||||
Each chat uses two (or more) simplex queues for duplex communication. Each message contains the
|
||||
hash of the previous message to detect if messages are lost or changed.
|
||||
</p>
|
||||
</div>
|
||||
<img alt="simplex chat: duplex conversation" src="./img/chat.png">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="simplex">
|
||||
<div class="container">
|
||||
<article id="use-simplex" class="half">
|
||||
<h3>Use SimpleX</h3>
|
||||
<p>
|
||||
SimpleX chat terminal client
|
||||
<a href="https://github.com/simplex-chat/simplex-chat/releases/tag/v2.0.0" target="_blank">v2.0.0</a> is
|
||||
released!<br />
|
||||
– groups and files<br />
|
||||
– two-layer E2E encryption, with double-ratchet algorithm<br />
|
||||
– protocol is compatible with mobile apps<br />
|
||||
</p>
|
||||
<p>
|
||||
You can use our servers or deploy your own, e.g. using
|
||||
<a href="https://github.com/simplex-chat/simplexmq#deploy-smp-server-on-linode" target="_blank">
|
||||
StackScript on Linode</a>.
|
||||
</p>
|
||||
<p>
|
||||
Sign up to be updated about the new releases.
|
||||
</p>
|
||||
<form class="sign-up"
|
||||
action="https://chat.us2.list-manage.com/subscribe/post?u=ddd892b258ae36e5438e6d4e1&id=ad6037a2fe"
|
||||
method="post" target="_blank" novalidate>
|
||||
<div>
|
||||
<input name="EMAIL" placeholder="Your email" />
|
||||
<span style="position: absolute; left: -5000px" aria-hidden="true">
|
||||
<input type="text" name="b_ddd892b258ae36e5438e6d4e1_ad6037a2fe" tabindex="-1" value="" />
|
||||
</span>
|
||||
<button type="submit">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</article>
|
||||
|
||||
<article id="join-simplex" class="half">
|
||||
<h3>Join SimpleX</h3>
|
||||
<p>
|
||||
The project can move faster with your help.<br />
|
||||
We develop it in Haskell.
|
||||
</p>
|
||||
|
||||
<div id="contacts">
|
||||
<p>
|
||||
<a href="mailto:chat@simplex.chat">
|
||||
<span class="button">Email</span> chat@simplex.chat</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://github.com/simplex-chat/simplex-chat" target="_blank"><span
|
||||
class="button">Join</span> github.com/simplex-chat</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://opencollective.com/simplex-chat" target="_blank"><span class="button">Donate</span>
|
||||
opencollective.com/simplex-chat</a> <strong>(now accepts crypto)</strong>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<section class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[85px] px-5">
|
||||
<div class="container">
|
||||
<img alt="simplex logo" class="logo d-none-992" src="./img/simplex.svg" />
|
||||
<div class="copyright__text_and_links">
|
||||
<p class="copyright">© 2020-22 SimpleX | Open-Source Project <span class="d-none-576">|</span></p>
|
||||
<div>
|
||||
<a class="" href="https://github.com/simplex-chat" target="_blank"><img
|
||||
src="./img/icons/github.svg"></a>
|
||||
<a class="" href="https://www.reddit.com/r/SimpleXChat/" target="_blank"><img
|
||||
src="./img/icons/reddit.svg"></a>
|
||||
<a class="" href="https://twitter.com/simplexchat" target="_blank"><img
|
||||
src="./img/icons/twitter.svg"></a>
|
||||
<a class="" href="https://www.linkedin.com/company/simplex-chat/" target="_blank"><img
|
||||
src="./img/icons/linkedin.svg"></a>
|
||||
<a class="" href="mailto:chat@simplex.chat" target="_blank"><img src="./img/icons/email.svg"></a>
|
||||
<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 — <span class="text-active-blue">who you talk with</span> — protects you from:</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[20px] mb-[90px]">
|
||||
|
||||
{% for section in why_privacy_matters.sections %}
|
||||
<div class="bg-white dark:bg-transparent px-[34px] flex flex-col rounded-[12px] dark:rounded-[6px] shadow-[0px_50px_61px_rgba(0,0,0,0.12)] dark:shadow-none flex-[1] border-gradient">
|
||||
<div class="flex items-center justify-center h-[215px]">
|
||||
<img src="{{ section.imgLight }}" alt="">
|
||||
</div>
|
||||
<div class="h-[152px] flex flex-col items-center justify-between">
|
||||
<p class="text-center font-medium leading-[28px] text-grey-black dark:text-white">{{ section.title }}</p>
|
||||
{% if section.overlayContent %}
|
||||
<a href="javascript:void(0);" data-show-overlay="{{ section.overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2 mb-[53px]">{{ section.overlayContent.linkText }}</a>
|
||||
{{ overlay(section) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="github d-none-992">
|
||||
<a class="github-button" href="https://github.com/simplex-chat/protocol" data-size="large"
|
||||
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
|
||||
</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>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
</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-[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>
|
||||
|
||||
<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">
|
||||
{% 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="simplex-privacy" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[85px] overflow-hidden px-5">
|
||||
<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>
|
||||
|
||||
<div class="swiper private-swiper overflow-hidden px-4 py-2">
|
||||
<div class="swiper-wrapper mb-14">
|
||||
|
||||
{% for section in what_makes_simplex_private.sections %}
|
||||
<div class="card swiper-slide relative h-[470px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
|
||||
<div class="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="simplex-network" class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[85px] 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>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between gap-16">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="mb-[30px]">
|
||||
<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]">
|
||||
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>
|
||||
|
||||
<div class="flex flex-col items-center ">
|
||||
<div class="mb-[30px]">
|
||||
<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]">
|
||||
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]">
|
||||
<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">
|
||||
servers provide <span class="text-active-blue">unidirectional queues</span>
|
||||
to connect the users, but the 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 py-[85px] 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>
|
||||
|
||||
<div class="w-full overflow-auto">
|
||||
<table class="w-full border-separate border-spacing-x-5 border-spacing-y-2">
|
||||
<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>
|
||||
<th>Signal, big platforms</th>
|
||||
<th>XMPP, Matrix</th>
|
||||
<th>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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<hr class="block my-12 mx-5 dark:opacity-[0.2]">
|
||||
|
||||
<div>
|
||||
<div class="px-5">
|
||||
<ol class="text-base 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/protocol#comparison-with-p2p-messaging-protocols">see here</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# join simplex #}
|
||||
{% include "sections/join_simplex.html" %}
|
||||
Reference in New Issue
Block a user