diff --git a/website/.eleventy.js b/website/.eleventy.js index 5f6d1168b8..c70bf9a789 100644 --- a/website/.eleventy.js +++ b/website/.eleventy.js @@ -7,6 +7,7 @@ const uri = require('fast-uri') module.exports = function (ty) { // Keeps the same directory structure. ty.addPassthroughCopy("src/assets/") + ty.addPassthroughCopy("src/fonts") ty.addPassthroughCopy("src/img") ty.addPassthroughCopy("src/css") ty.addPassthroughCopy("src/js") diff --git a/website/src/_includes/layouts/main.html b/website/src/_includes/layouts/main.html new file mode 100644 index 0000000000..e87c0ede2f --- /dev/null +++ b/website/src/_includes/layouts/main.html @@ -0,0 +1,20 @@ + + + + + + + {{ title }} + + + + + + {% include "navbar.html" %} +
+
{{ content | safe }}
+
+ + + + \ No newline at end of file diff --git a/website/src/_includes/navbar.html b/website/src/_includes/navbar.html new file mode 100644 index 0000000000..ffb92eec85 --- /dev/null +++ b/website/src/_includes/navbar.html @@ -0,0 +1,182 @@ +
+
+ + + + + + + + +
+ + + +
+ + \ No newline at end of file diff --git a/website/src/css/style.css b/website/src/css/style.css index 209fb3514f..e36ec367fe 100644 --- a/website/src/css/style.css +++ b/website/src/css/style.css @@ -1,5 +1,41 @@ +@font-face { + font-family: "Gilroy"; + src: url("/fonts/GilroyRegular/font.woff2") format("woff2"), url("webFonts/GilroyRegular/font.woff") format("woff"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "Gilroy"; + src: url("/fonts/GilroyLight/font.woff2") format("woff2"), url("webFonts/GilroyLight/font.woff") format("woff"); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: "Gilroy"; + src: url("/fonts/GilroyMedium/font.woff2") format("woff2"), url("webFonts/GilroyMedium/font.woff") format("woff"); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: "Gilroy"; + src: url("/fonts/GilroyBold/font.woff2") format("woff2"), url("webFonts/GilroyBold/font.woff") format("woff"); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: "Gilroy"; + src: url("/fonts/GilroyRegularItalic/font.woff2") format("woff2"), url("webFonts/GilroyRegularItalic/font.woff") format("woff"); + font-weight: 400; + font-style: italic; +} + html { scroll-behavior: smooth; + font-family: 'Gilroy', sans-serif; } #comparison::before { @@ -15,3 +51,283 @@ html { background-color: #00C8FB; color: #fff; } */ + +/* NEW SITE */ +.container, +.container-fluid, +.container-xxl, +.container-xl, +.container-lg, +.container-md, +.container-sm { + width: 100%; + padding-right: var(--bs-gutter-x, 0.75rem); + padding-left: var(--bs-gutter-x, 0.75rem); + margin-right: auto; + margin-left: auto; +} + +@media (min-width: 576px) { + + .container-sm, + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + + .container-md, + .container-sm, + .container { + max-width: 720px; + } +} + +@media (min-width: 992px) { + + .container-lg, + .container-md, + .container-sm, + .container { + max-width: 960px; + } +} + +@media (min-width: 1200px) { + + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container { + max-width: 1140px; + } +} + +@media (min-width: 1400px) { + + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container { + max-width: 1320px; + } +} + +@media (min-width:1024px) { + .nav-link-text { + position: relative; + color: #0D0E12; + } + + .nav-link-text::before, + .active .nav-link-text::before { + content: ""; + position: absolute; + width: 0; + height: 1px; + bottom: 0; + right: 0; + background-color: #0D0E12; + transition: width 0.25s ease-out; + } + + .active .nav-link-text::before { + width: 100%; + } + + .nav-link:hover .nav-link-text::before { + width: 100%; + left: 0; + right: auto; + } +} + + + +.sub-menu { + visibility: hidden; + opacity: 0; + color: #505158; +} +.sub-menu li:hover { + color: #0053D0; +} +.sub-menu { + transition: all .3s ease !important; +} +.nav-link span img, +header nav { + transition: all 0.5s ease; +} +.nav-link:hover span img { + transform: rotate(180deg); +} + +@media (min-width:1024px) { + .nav-link:hover .sub-menu, + .nav-link:focus-within .sub-menu { + visibility: visible; + opacity: 1; + margin-top: 0; + } +} + +@media (max-width: 1024px) { + .sub-menu { + max-height: 0; + } + .sub-menu { + transform: translateY(-10px); + transition: all .7s ease !important; + } + .active .sub-menu { + max-height: 200px; + transform: translateY(0px); + opacity: 1; + visibility: visible; + margin-top: 0; + } + + header nav{ + visibility: hidden; + opacity: 0; + transform: translateX(100%); + } + header nav.open{ + visibility: visible; + opacity: 1; + transform: translateX(0); + } +} + + +/* #menu a{ + display: block; +} */ + +/* nav{ + transition: 0.6s; + z-index: 1000; + height: 0; + overflow-y: hidden; +} + +nav.active{ + height: calc(100vh - 78px); + visibility: visible; + overflow-y: auto; +} */ + + + + + + + + + + + + + + + +/*********************************/ +/* Menu */ +/*===============================*/ +#navigation { + /* width: inherit !important; + align-self: stretch; */ +} + +.navigation-menu>li { + /* position: relative; */ + + /* width: 100vw; */ + /* width: inherit; */ +} + +/* .navigation-menu > li > a { + display: block; + display: inline-flex; + align-items: center; + justify-content: space-between; + color: #0D0E12; +} */ + +.navigation-menu .has-submenu .menu-arrow { + /* border: solid #3c4858; + border-radius: 0.5px; + border-width: 0 2px 2px 0; + display: inline-block; + padding: 3px; + transform: rotate(45deg); + position: absolute; + transition: all 0.5s; */ + /* right: -1px; + top: 30px; */ +} + +.navigation-menu .has-submenu:hover .menu-arrow { + /* transform: rotate(225deg); */ +} + +@media (max-width: 991px) { + + /* .navigation-menu { + float: none; + } + .navigation-menu > li { + float: none; + } */ + .navigation-menu>li .submenu { + /* display: none; + list-style: none; */ + /* padding-left: 20px; */ + /* margin: 0; */ + } + + .navigation-menu>li .submenu li a { + /* display: block; + position: relative; + padding: 7px 15px; + text-transform: uppercase; + font-size: 11px; + letter-spacing: 0.04em; + font-weight: 700; + color: #3c4858 !important; + transition: all 0.3s; */ + /* color: #505158; */ + } + + .navigation-menu>li .submenu.open { + /* display: block; */ + } + + .navigation-menu>li>a { + /* color: #3c4858; */ + /* padding: 10px 20px; */ + } + + .navigation-menu>li>a:after { + /* position: absolute; */ + /* right: 15px; */ + } + + /* .navigation-menu > li > a:hover, + .navigation-menu > li .submenu li a:hover, + .navigation-menu > li.has-submenu.open > a { + color: #2f55d4; + } */ +} + +/* @media (max-width: 768px) { + .navigation-menu .has-submenu .menu-arrow { + right: 8px; + top: 16px; + } +} */ \ No newline at end of file diff --git a/website/src/fonts/GilroyBold/font.woff b/website/src/fonts/GilroyBold/font.woff new file mode 100644 index 0000000000..1f252b0ba5 Binary files /dev/null and b/website/src/fonts/GilroyBold/font.woff differ diff --git a/website/src/fonts/GilroyBold/font.woff2 b/website/src/fonts/GilroyBold/font.woff2 new file mode 100644 index 0000000000..687474f86e Binary files /dev/null and b/website/src/fonts/GilroyBold/font.woff2 differ diff --git a/website/src/fonts/GilroyLight/font.woff b/website/src/fonts/GilroyLight/font.woff new file mode 100644 index 0000000000..903d99d455 Binary files /dev/null and b/website/src/fonts/GilroyLight/font.woff differ diff --git a/website/src/fonts/GilroyLight/font.woff2 b/website/src/fonts/GilroyLight/font.woff2 new file mode 100644 index 0000000000..f4d4fc3e0c Binary files /dev/null and b/website/src/fonts/GilroyLight/font.woff2 differ diff --git a/website/src/fonts/GilroyMedium/font.woff b/website/src/fonts/GilroyMedium/font.woff new file mode 100644 index 0000000000..3dd51a978b Binary files /dev/null and b/website/src/fonts/GilroyMedium/font.woff differ diff --git a/website/src/fonts/GilroyMedium/font.woff2 b/website/src/fonts/GilroyMedium/font.woff2 new file mode 100644 index 0000000000..895b6d4f1b Binary files /dev/null and b/website/src/fonts/GilroyMedium/font.woff2 differ diff --git a/website/src/fonts/GilroyRegular/font.woff b/website/src/fonts/GilroyRegular/font.woff new file mode 100644 index 0000000000..115ae73dfc Binary files /dev/null and b/website/src/fonts/GilroyRegular/font.woff differ diff --git a/website/src/fonts/GilroyRegular/font.woff2 b/website/src/fonts/GilroyRegular/font.woff2 new file mode 100644 index 0000000000..24465fb7dc Binary files /dev/null and b/website/src/fonts/GilroyRegular/font.woff2 differ diff --git a/website/src/fonts/GilroyRegularItalic/font.woff b/website/src/fonts/GilroyRegularItalic/font.woff new file mode 100644 index 0000000000..1f69fc1e62 Binary files /dev/null and b/website/src/fonts/GilroyRegularItalic/font.woff differ diff --git a/website/src/fonts/GilroyRegularItalic/font.woff2 b/website/src/fonts/GilroyRegularItalic/font.woff2 new file mode 100644 index 0000000000..ef01c8d5d3 Binary files /dev/null and b/website/src/fonts/GilroyRegularItalic/font.woff2 differ diff --git a/website/src/img/new/cross.svg b/website/src/img/new/cross.svg new file mode 100644 index 0000000000..b48978e1ee --- /dev/null +++ b/website/src/img/new/cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/src/img/new/hamburger.svg b/website/src/img/new/hamburger.svg new file mode 100644 index 0000000000..3cd8fa89b7 --- /dev/null +++ b/website/src/img/new/hamburger.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/website/src/img/new/logo-symbol-light.svg b/website/src/img/new/logo-symbol-light.svg new file mode 100644 index 0000000000..d8b5951a0b --- /dev/null +++ b/website/src/img/new/logo-symbol-light.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/website/src/img/new/logo.png b/website/src/img/new/logo.png new file mode 100644 index 0000000000..c35002c937 Binary files /dev/null and b/website/src/img/new/logo.png differ diff --git a/website/src/img/new/moon.svg b/website/src/img/new/moon.svg new file mode 100644 index 0000000000..1054735b5e --- /dev/null +++ b/website/src/img/new/moon.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/src/img/new/sun.svg b/website/src/img/new/sun.svg new file mode 100644 index 0000000000..8407b98e5f --- /dev/null +++ b/website/src/img/new/sun.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/website/src/img/new/union.svg b/website/src/img/new/union.svg new file mode 100644 index 0000000000..20688b1d43 --- /dev/null +++ b/website/src/img/new/union.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/src/index.html b/website/src/index.html index 2d961cc478..00b7aeac57 100644 --- a/website/src/index.html +++ b/website/src/index.html @@ -1,426 +1,5 @@ - - - - - - - SimpleX Chat: private, secure, no user identitifiers - - - - - - - - - - - - - - - - - - {% include "nav.html" %} - -
-
-

SimpleX Chat

-

Private & encrypted - the only platform without user identifiers!

- -

You can download terminal chat app from GitHub or using this command:

-

- curl -o- https://raw.githubusercontent.com/simplex-chat/simplex-chat/master/install.sh | bash - - Copy to clipboard - - -

-
-
-

Alice

-
-
-
- -
-
-
-

Bob

-
-
-
- -
-
-
- -
-
-

Tom

-
-
-
- -
-
- - - -
-
-
- -
-
-

Privacy redefined

-

SimpleX advantage:

-

SimpleX ensures data and meta-data privacy

-

with a new protocol design – it delivers messages

-

without using senders' and recipients' identifiers,

-

unlike any other messaging platform.

-
-
-
-

Security

-

Two-layer encryption and communication integrity

-
-
-
-

Privacy

-

Your contacts and messages are stored on your device

-
-
-
-

Convenience

-

Easy to add contacts and start talking

-
-
-
-
- -
-
-

Problem: chat security

- -
-

End-to-end encryption?

-

Alice sends the key to Bob (e.g. via p2p network or via chat server)

-
-
-
Alice
- Alice sends the key to Bob -
Bob
-
-
-

Now Bob can send encrypted messages to Alice - he believes it is secure!

-
-
-
Alice
- They believe it is secure -
Bob
-
-
-
-
-

Man-in-the-middle attack!

-

But the key can be intercepted and substituted by Tom (the attacker)

-
-
-
Alice
- key is intercepted -
Bob
-
Tom
-
-
-

Now the attacker can read the messages without Alice or Bob knowing

-
-
-
Alice
- attacker can read messages -
Bob
-
Tom
-
-
-
- -
-
- -
-
-

What is the solution?

-

- To create secure encrypted channel you need an existing secure channel -
where you can pass the encryption key (or key fingerprint). -

-

Any alternative solution can be compromised.

-
-
- -
-
-

Make a private connection!

-

To add contact and to start chat

-

- Adding a contact in mobile app will require sharing your one-time QR code. -
In the terminal UI you need to share an invitation with your contact. -

-

After creating your chat profile in the app:

-
-
-

1.
Show QR code or share link

-
- mobile app: show QR code to add contact -
-
Alice
-
- -
-

2.
Your contact scans QR code or opens link

-
- mobile app: scan QR code -
-
Bob
-
- -
-

3.
A private connection is established

-
- mobile app: confirm contact -
-
Alice
-
- -
-

4.
Now you can chat privately!

-
- mobile app: start chat -
-
Bob
-
-
-
-
- -
-
-

Comparison with other protocols

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
simplex logo SimpleX chatSignal, big platformsXMPP, MatrixP2P protocols
Requires global identityNo - privateYes 1Yes 2Yes 3
Possibility of MITMNo - secureYes 4YesYes
Dependence on DNSNo - resilientYesYesNo
Single or centralized networkNo - decentralizedYesNo - federated 5Yes 6
Central component or other network-wide attackNo - resilientYesYes 2Yes 7
-
- -
-
    -
  • Good
  • -
  • Bad
  • -
- -
-
    -
  1. Usually based on a phone number, in some cases on usernames
  2. -
  3. DNS-based addresses
  4. -
  5. Public key or some other globally unique ID
  6. -
  7. If operator’s servers are compromised
  8. -
  9. Does not protect users' metadata
  10. -
  11. - While P2P are distributed, they are not federated - they operate as a single network -
  12. -
  13. - P2P networks either have a central authority or the whole network can be compromised - - see - here -
  14. -
-
-
-
-
- -
-
-
-

SimpleX messaging protocol

-

Unidirectional (simplex) queues

-

- Simplex messaging protocol - (SMP) for messaging via secure persistent queues will serve as the low level protocol for - SimpleX chat - see - demo server implementation.
- 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.
-

-
- simplex messaging protocol -
-
- -
-
-
-

Chat

-

Communication integrity

-

- 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. -

-
- simplex chat: duplex conversation -
-
- -
-
-
-

Use SimpleX

-

- SimpleX chat terminal client - v2.0.0 is - released!
- – groups and files
- – two-layer E2E encryption, with double-ratchet algorithm
- – protocol is compatible with mobile apps
-

-

- You can use our servers or deploy your own, e.g. using - - StackScript on Linode. -

-

- Sign up to be updated about the new releases. -

- -
- - -
-
- - - - +--- +layout: layouts/main.html +title: "SimpleX Chat" +--- +

Hello World

\ No newline at end of file diff --git a/website/src/index1.html b/website/src/index1.html new file mode 100644 index 0000000000..2d961cc478 --- /dev/null +++ b/website/src/index1.html @@ -0,0 +1,426 @@ + + + + + + + SimpleX Chat: private, secure, no user identitifiers + + + + + + + + + + + + + + + + + + {% include "nav.html" %} + +
+
+

SimpleX Chat

+

Private & encrypted - the only platform without user identifiers!

+ +

You can download terminal chat app from GitHub or using this command:

+

+ curl -o- https://raw.githubusercontent.com/simplex-chat/simplex-chat/master/install.sh | bash + + Copy to clipboard + + +

+
+
+

Alice

+
+
+
+ +
+
+
+

Bob

+
+
+
+ +
+
+
+ +
+
+

Tom

+
+
+
+ +
+
+ + + +
+
+
+ +
+
+

Privacy redefined

+

SimpleX advantage:

+

SimpleX ensures data and meta-data privacy

+

with a new protocol design – it delivers messages

+

without using senders' and recipients' identifiers,

+

unlike any other messaging platform.

+
+
+
+

Security

+

Two-layer encryption and communication integrity

+
+
+
+

Privacy

+

Your contacts and messages are stored on your device

+
+
+
+

Convenience

+

Easy to add contacts and start talking

+
+
+
+
+ +
+
+

Problem: chat security

+ +
+

End-to-end encryption?

+

Alice sends the key to Bob (e.g. via p2p network or via chat server)

+
+
+
Alice
+ Alice sends the key to Bob +
Bob
+
+
+

Now Bob can send encrypted messages to Alice - he believes it is secure!

+
+
+
Alice
+ They believe it is secure +
Bob
+
+
+
+
+

Man-in-the-middle attack!

+

But the key can be intercepted and substituted by Tom (the attacker)

+
+
+
Alice
+ key is intercepted +
Bob
+
Tom
+
+
+

Now the attacker can read the messages without Alice or Bob knowing

+
+
+
Alice
+ attacker can read messages +
Bob
+
Tom
+
+
+
+ +
+
+ +
+
+

What is the solution?

+

+ To create secure encrypted channel you need an existing secure channel +
where you can pass the encryption key (or key fingerprint). +

+

Any alternative solution can be compromised.

+
+
+ +
+
+

Make a private connection!

+

To add contact and to start chat

+

+ Adding a contact in mobile app will require sharing your one-time QR code. +
In the terminal UI you need to share an invitation with your contact. +

+

After creating your chat profile in the app:

+
+
+

1.
Show QR code or share link

+
+ mobile app: show QR code to add contact +
+
Alice
+
+ +
+

2.
Your contact scans QR code or opens link

+
+ mobile app: scan QR code +
+
Bob
+
+ +
+

3.
A private connection is established

+
+ mobile app: confirm contact +
+
Alice
+
+ +
+

4.
Now you can chat privately!

+
+ mobile app: start chat +
+
Bob
+
+
+
+
+ +
+
+

Comparison with other protocols

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
simplex logo SimpleX chatSignal, big platformsXMPP, MatrixP2P protocols
Requires global identityNo - privateYes 1Yes 2Yes 3
Possibility of MITMNo - secureYes 4YesYes
Dependence on DNSNo - resilientYesYesNo
Single or centralized networkNo - decentralizedYesNo - federated 5Yes 6
Central component or other network-wide attackNo - resilientYesYes 2Yes 7
+
+ +
+
    +
  • Good
  • +
  • Bad
  • +
+ +
+
    +
  1. Usually based on a phone number, in some cases on usernames
  2. +
  3. DNS-based addresses
  4. +
  5. Public key or some other globally unique ID
  6. +
  7. If operator’s servers are compromised
  8. +
  9. Does not protect users' metadata
  10. +
  11. + While P2P are distributed, they are not federated - they operate as a single network +
  12. +
  13. + P2P networks either have a central authority or the whole network can be compromised - + see + here +
  14. +
+
+
+
+
+ +
+
+
+

SimpleX messaging protocol

+

Unidirectional (simplex) queues

+

+ Simplex messaging protocol + (SMP) for messaging via secure persistent queues will serve as the low level protocol for + SimpleX chat - see + demo server implementation.
+ 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.
+

+
+ simplex messaging protocol +
+
+ +
+
+
+

Chat

+

Communication integrity

+

+ 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. +

+
+ simplex chat: duplex conversation +
+
+ +
+
+
+

Use SimpleX

+

+ SimpleX chat terminal client + v2.0.0 is + released!
+ – groups and files
+ – two-layer E2E encryption, with double-ratchet algorithm
+ – protocol is compatible with mobile apps
+

+

+ You can use our servers or deploy your own, e.g. using + + StackScript on Linode. +

+

+ Sign up to be updated about the new releases. +

+ +
+ + +
+
+ + + + diff --git a/website/src/js/script.js b/website/src/js/script.js index 88a6409d7c..4cc141d9b4 100644 --- a/website/src/js/script.js +++ b/website/src/js/script.js @@ -6,3 +6,24 @@ // else if(window.location.href.includes('blog')){ // document.querySelector('.blog-nav-btn').classList.add('nav-button-active'); // } +// const btnMobile = document.getElementById('btn-mobile'); +// const hamburger = document.getElementById('hamburger'); +// const cross = document.getElementById('cross'); + +// function toggleMenu(event) { +// if (event.type === 'touchstart') event.preventDefault(); +// const nav = document.querySelector('nav'); +// nav.classList.toggle('active'); +// hamburger.classList.toggle('hidden'); +// cross.classList.toggle('hidden'); + +// const active = nav.classList.contains('active'); +// if (active) { + +// } else { + +// } +// } + +// btnMobile.addEventListener('click', toggleMenu); +// btnMobile.addEventListener('touchstart', toggleMenu); \ No newline at end of file diff --git a/website/tailwind.css b/website/tailwind.css index dc83d5cf59..b5c61c9567 100644 --- a/website/tailwind.css +++ b/website/tailwind.css @@ -1,3 +1,3 @@ -/* @tailwind base; */ +@tailwind base; @tailwind components; @tailwind utilities;