Files
simplex-chat/website/src/index.html
M Sarmad Qadeer 43adb7de82 migrate website to 11ty site generator (#913)
* readme: fix link

* add 11ty files to website folder

* add web.yml

* add simplex web files

* add font matter to some blogs

* remove unnecessary things

* change few settings

* add a web script

* update web.yml

* update image format & add an image

* add font matter to blogs

* update blog.html

* add article layout & give that layout to blogs

* update the location of _includes

* update article layout

* change original blog links

* add styling to blog

* improve the links of blogs

* update web.sh

* add favicon

* update a tag in a blog

* improve stylings of article page

* improve styling of blog page

* update the theme

* update font matter and update links in new blog.

* add style changes

* apply reverse chronology sort on articles

* shift blogs links back to hashes

* add ids to headers & smooth scrolling

* make all blog links relative

* add smooth scrolling & add relative to absolute links converter

* add navigation

* improve mobile nav

* change desktop header style

* convert blogs link text to "Read More"

* change desktop header style

* style mobile nav

* fix landing page styling

* update web workflow

* update web workflow

* nav setting

* add tailwind links

* update web workflow

* remove app demo folder

* remove special characters from the links

* fix the issue of links

* make web.sh executable

* update blog links

* move web.sh to website folder

* code style

* EOLs

* format index.css & contact.css

* add markdown-it configuration

* add outline none on focus

* remove extra Javascript

* make mobile nav display none by default

* add permalinks to markdown files

* update 11ty config

* update web.sh

* update article

* resolve issue of special characters in header ids
introduce slugify

* add target _blank to whitepaper link

* add last post

* EOLs

* try to resolve bullets issue

* use markdown-it-replace-link
to convert relative .md extension to .html extension

* add missing images, simpligy link parsing

* add CNAME file

* add CNAME file, rename config

* fix jumping table issue

Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>
2022-09-10 10:26:21 +01:00

427 lines
17 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>
<body>
{% include "nav.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/website/raw/master/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 operators 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&amp;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>&nbsp; chat@simplex.chat</a>
</p>
<p>
<a href="https://github.com/simplex-chat/simplex-chat" target="_blank"><span
class="button">Join</span>&nbsp; github.com/simplex-chat</a>
</p>
<p>
<a href="https://opencollective.com/simplex-chat" target="_blank"><span class="button">Donate</span>&nbsp;
opencollective.com/simplex-chat</a> <strong>(now accepts crypto)</strong>
</p>
</div>
</article>
</div>
</section>
<footer>
<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">&#169; 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>
</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>
</div>
</footer>
</body>
</html>