diff --git a/website/src/_data/features.json b/website/src/_data/features.json new file mode 100644 index 000000000..10d2374ef --- /dev/null +++ b/website/src/_data/features.json @@ -0,0 +1,52 @@ +{ + "sections": [ + { + "id": 1, + "title": "Disappearing messages (comings soon)", + "imgLight": "/img/new/feature-1.svg", + "imgDark": "/img/new/feature-1-dark.svg" + }, + { + "id": 2, + "title": "Disappearing messages (comings soon)", + "imgLight": "/img/new/feature-2.svg", + "imgDark": "/img/new/feature-2-dark.svg" + }, + { + "id": 3, + "title": "Disappearing messages (comings soon)", + "imgLight": "/img/new/feature-3.svg", + "imgDark": "/img/new/feature-3-dark.svg" + }, + { + "id": 4, + "title": "Disappearing messages (comings soon)", + "imgLight": "/img/new/feature-4.svg", + "imgDark": "/img/new/feature-4-dark.svg" + }, + { + "id": 5, + "title": "Disappearing messages (comings soon)", + "imgLight": "/img/new/feature-5.svg", + "imgDark": "/img/new/feature-5-dark.svg" + }, + { + "id": 6, + "title": "Disappearing messages (comings soon)", + "imgLight": "/img/new/feature-6.svg", + "imgDark": "/img/new/feature-6-dark.svg" + }, + { + "id": 7, + "title": "Disappearing messages (comings soon)", + "imgLight": "/img/new/feature-7.svg", + "imgDark": "/img/new/feature-7-dark.svg" + }, + { + "id": 8, + "title": "Disappearing messages (comings soon)", + "imgLight": "/img/new/feature-8.svg", + "imgDark": "/img/new/feature-8-dark.svg" + } + ] +} \ No newline at end of file diff --git a/website/src/_data/what_makes_simplex_private.json b/website/src/_data/what_makes_simplex_private.json new file mode 100644 index 000000000..81e83f012 --- /dev/null +++ b/website/src/_data/what_makes_simplex_private.json @@ -0,0 +1,104 @@ +{ + "sections": [ + { + "id": 1, + "title": "2-layers of end-to-end encryption", + "imgLight": "/img/new/private-1.svg", + "imgDark": "/img/new/private-1-dark.svg", + "points": [ + "Double-ratchet protocol (OTR messaging with forward secrecy and break-in recovery).", + "E2E encryption in each queue to prevent traffic correlation between queues in case TLS is compromised." + ] + }, + { + "id": 2, + "title": "Additional layer of server encryption", + "imgLight": "/img/new/private-2.svg", + "imgDark": "/img/new/private-2-dark.svg", + "points": [ + "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.", + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!" + ] + }, + { + "id": 3, + "title": "Secure TLS 1.2/1.3", + "imgLight": "/img/new/private-3.svg", + "imgDark": "/img/new/private-3-dark.svg", + "points": [ + "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.", + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!" + ] + }, + { + "id": 4, + "title": "Optional access via Tor", + "imgLight": "/img/new/private-4.svg", + "imgDark": "/img/new/private-4-dark.svg", + "points": [ + "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.", + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!" + ] + }, + { + "id": 5, + "title": "Multiple layers of content padding", + "imgLight": "/img/new/private-5.svg", + "imgDark": "/img/new/private-5-dark.svg", + "points": [ + "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.", + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!" + ] + }, + { + "id": 6, + "title": "Out-of-band key exchange", + "imgLight": "/img/new/private-6.svg", + "imgDark": "/img/new/private-6-dark.svg", + "points": [ + "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.", + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!" + ] + }, + { + "id": 7, + "title": "Message integrity is guaranteed", + "imgLight": "/img/new/private-7.svg", + "imgDark": "/img/new/private-7-dark.svg", + "points": [ + "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.", + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!" + ] + }, + { + "id": 8, + "title": "Message mixing to prevent correlation", + "imgLight": "/img/new/private-8.svg", + "imgDark": "/img/new/private-8-dark.svg", + "points": [ + "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.", + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!" + ] + }, + { + "id": 9, + "title": "Unidirectional network", + "imgLight": "/img/new/private-9.svg", + "imgDark": "/img/new/private-9-dark.svg", + "points": [ + "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.", + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!" + ] + }, + { + "id": 10, + "title": "Temporary ephemeral pairwise identifiers", + "imgLight": "/img/new/private-10.svg", + "imgDark": "/img/new/private-10-dark.svg", + "points": [ + "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.", + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!" + ] + } + ] +} \ No newline at end of file diff --git a/website/src/_data/why_privacy_matters.json b/website/src/_data/why_privacy_matters.json new file mode 100644 index 000000000..b53e208ef --- /dev/null +++ b/website/src/_data/why_privacy_matters.json @@ -0,0 +1,39 @@ +{ + "sections": [ + { + "id": 1, + "title": "Invasive and manipulative advertising and price discrimination", + "imgLight": "/img/new/privacy-section-1.svg", + "imgDark": "/img/new/privacy-section-1.svg", + "overlayContent": { + "title": "More Information", + "linkText": "Learn more", + "showImage": true, + "paras": [ + "Unlike any other existing messaging platform, SimpleX has no identifiers assigned to the users –- not even random numbers. This protects the privacy of who you are communicating with, hiding it from SimpleX platform servers and from any observers.", + "E2E encryption in each queue to prevent traffic correlation between queues in case TLS is compromised." + ] + } + }, + { + "id": 2, + "title": "Manipulation of elections", + "imgLight": "/img/new/privacy-section-2.svg", + "imgDark": "/img/new/privacy-section-2.svg", + "overlayContent": { + "title": "More Information", + "linkText": "Learn more", + "showImage": false, + "paras": [ + "Unlike any other existing messaging platform, SimpleX has no identifiers assigned to the users –- not even random numbers. This protects the privacy of who you are communicating with, hiding it from SimpleX platform servers and from any observers." + ] + } + }, + { + "id": 3, + "title": "Protect against prosecution when you are innocent", + "imgLight": "/img/new/privacy-section-3.svg", + "imgDark": "/img/new/privacy-section-3.svg" + } + ] +} \ No newline at end of file diff --git a/website/src/_includes/components/macro.njk b/website/src/_includes/components/macro.njk new file mode 100644 index 000000000..9f2b23b19 --- /dev/null +++ b/website/src/_includes/components/macro.njk @@ -0,0 +1,29 @@ +{% macro overlay(section) %} + {# Overlay is either hidder or flex #} + +{% endmacro %} \ No newline at end of file diff --git a/website/src/index.html b/website/src/index.html index 724154dfe..4ae995926 100644 --- a/website/src/index.html +++ b/website/src/index.html @@ -2,118 +2,57 @@ layout: layouts/main.html title: "SimpleX Chat" --- +{%- from "components/macro.njk" import overlay -%} +

Why privacy matters

Preserving the privacy of your meta-data - who you talk with - protect you from:

-
-
-
- -
-
-

Invasive and manipulative advertising and price discrimination

- Learn more -
-
+
-
-
- + {% for section in why_privacy_matters.sections %} +
+
+ +
+
+

{{ section.title }}

+ {% if section.overlayContent %} + {{ section.overlayContent.linkText }} + {{ overlay(section) }} + {% endif %} +
-
-

Manipulation of elections

-
-
+ {% endfor %} -
-
- -
-
-

Protect against prosecution when you are innocent

-
-

Or choose the app that lets you send stickers and offer lots of fun features in exchange for selling your data to the highest bidder.

- - +{# Why SimpleX is unique #} {% include "sections/simplex_unique.html" %} - +{# Features #}
-

- Features -

+

Features

-
-
- - + {% for feature in features.sections %} +
+
+ + +
+

{{ feature.title }}

-

Disappearing messages (comings soon)

-
-
-
- - -
-

E2E encrypted audio and video WebRTC calls

-
-
-
- - -
-

Decentralised secret groups – these groups do NOT have network-wide identifiers.

-
-
-
- - -
-

E2E encrypted voice messages (coming soon)

-
- -
-
- - -
-

E2E encrypted text messages with markdown support

-
-
-
- - -
-

E2E encrypted pictures and files

-
-
-
- - -
-

Portable chat database – easily move your profile to another device.

-
-
-
- - -
-

Incognito

-
+ {% endfor %}
- - +{# what makes simplex private #}

What makes SimpleX private

@@ -121,156 +60,23 @@ title: "SimpleX Chat"
-
-
- - -
-
-

2-layers of end-to-end encryption

-
-

1) double-ratchet protocol (OTR messaging with forward secrecy and break-in recovery),

-

2) e2e encryption in each queue to prevent traffic correlation between queues in case TLS is compromised.

+ {% for section in what_makes_simplex_private.sections %} +
+
+ +
-

Tap to close

-
-
- -
-
- - -
-
-

Additional layer of server encryption

-
-

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!

+
+

{{ section.title }}

+
+ {% for point in section.points %} +

{{ point }}

+ {% endfor %} +
+

Tap to close

-

Tap to close

-
- -
-
- - -
-
-

Secure TLS 1.2/1.3

-
-

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!

-
-

Tap to close

-
-
- -
-
- - -
-
-

Optional access via Tor

-
-

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!

-
-

Tap to close

-
-
- -
-
- - -
-
-

Multiple layers of content padding

-
-

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!

-
-

Tap to close

-
-
- -
-
- - -
-
-

Out-of-band key exchange

-
-

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!

-
-

Tap to close

-
-
- -
-
- - -
-
-

Message integrity is guaranteed

-
-

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!

-
-

Tap to close

-
-
- -
-
- - -
-
-

Message mixing to prevent correlation

-
-

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!

-
-

Tap to close

-
-
- -
-
- - -
-
-

Unidirectional network

-
-

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!

-
-

Tap to close

-
-
- -
-
- - -
-
-

Temporary ephemeral pairwise identifiers

-
-

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!

-
-

Tap to close

-
-
- + {% endfor %}
@@ -282,8 +88,7 @@ title: "SimpleX Chat"
- - +{# Network #}

SimpleX Network

diff --git a/website/src/js/script.js b/website/src/js/script.js index cf9e77990..8e6443eb1 100644 --- a/website/src/js/script.js +++ b/website/src/js/script.js @@ -80,9 +80,34 @@ const privateSwiper = new Swiper('.private-swiper', { }, }); +const closeOverlay = (e) => { + e.target.closest('.overlay').classList.remove('flex'); + e.target.closest('.overlay').classList.add('hidden'); + document.body.classList.toggle('lock-scroll'); +} + window.addEventListener('click', (e) => { if (e.target.closest('.card')) { e.target.closest('.card').classList.toggle('card-active'); e.target.closest('.card').classList.toggle('no-hover'); } + + // ---------------For Overlay-------------------- + else if (e.target.closest('.close-overlay-btn')) { + closeOverlay(e); + } + else if (e.target.closest('.overlay-card')) { + return; + } + else if (e.target.closest('.overlay')) { + closeOverlay(e); + } + else if (e.target.closest('.open-overlay-btn')) { + let id = e.target.closest('.open-overlay-btn').dataset.showOverlay; + let overlay = document.getElementById(id); + overlay.classList.remove('hidden'); + overlay.classList.add('flex'); + document.body.classList.toggle('lock-scroll'); + } + // ----------------------------------------------- }) \ No newline at end of file